@charset "UTF-8";
/* ====================================================
Width Media Quary
==================================================== */
/* ====================================================
Height Media Query
==================================================== */
/* ====================================================
 Font
==================================================== */
html {
  margin-top: unset !important;
  font-size: 10px;
  overflow-x: hidden;
  /* スムーズスクロール */
  scroll-behavior: smooth;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

*,
*:after,
*:before,
blockquote,
body,
dd,
div,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
p,
pre,
td,
th {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Noto Sans JP", "Noto Serif", "Yu Mincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS 明朝", "MS Mincho", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  color: #555;
  line-height: 1.8;
}
@media screen and (max-width: 1200px) {
  body {
    font-size: 1.5rem;
  }
}
body h1,
body h2,
body h3,
body h4,
body h5 {
  font-family: "Noto Sans JP", "Noto Serif", "Yu Mincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS 明朝", "MS Mincho", sans-serif;
  font-weight: 500;
  font-style: normal;
  line-height: 1.5;
}
body a {
  text-decoration: none;
  transition: 0.3s;
  color: #008CD6;
  cursor: pointer;
}
body a:hover,
body a ::before,
body a ::after,
body a :hover::before,
body a :hover::after {
  transition: 0.3s;
}
@media screen and (max-width: 1200px) {
  body .hide-lg {
    display: none !important;
  }
}
body .show-lg {
  display: none !important;
}
@media screen and (max-width: 1200px) {
  body .show-lg {
    display: block !important;
  }
}
body .only-sp {
  display: none !important;
}
@media screen and (max-width: 768px) {
  body .only-sp {
    display: block !important;
  }
}
@media screen and (max-width: 768px) {
  body .only-pc {
    display: none !important;
  }
}
body ol,
body ul,
body li {
  list-style: none;
}
body img {
  max-width: 100%;
  height: auto;
  display: block;
}
body input[type=text],
body input[type=tel],
body input[type=email],
body select,
body textarea {
  font-size: 1.5rem;
  font-family: "Jost", sans-serif, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
  background-color: #f2f2f2;
  border: none;
  padding: 15px;
  width: 100%;
}
body select {
  position: relative;
  width: 100%;
  padding-right: 28px;
  background: url(./img/select.svg) no-repeat center right 15px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  background-color: #f2f2f2;
}
body ::placeholder {
  color: #ccc;
}

.content {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}
.content p {
  margin-bottom: 30px;
}
.content_top {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}
.content_top p {
  margin-bottom: 30px;
}

a.deco {
  text-decoration: underline;
  color: #008CD6;
  transition: 0.3s;
}
a.deco:hover {
  opacity: 0.5;
  transition: 0.3s;
}
a.txt_link:hover {
  opacity: 0.5;
  transition: 0.3s;
}

.btn:hover {
  opacity: unset;
}
.btn_01 {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  padding: 10px 70px 10px 20px;
  border: #008CD6 solid 1px;
  transition: 0.3s;
  color: #008CD6;
  margin-top: 80px;
  z-index: 0;
}
.btn_01:hover {
  color: #fff;
}
.btn_01:hover::before {
  right: 15px;
  transition: 0.3s;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}
.btn_01:hover::after {
  width: 100%;
  transition: 0.2s;
  opacity: 1;
  z-index: -1;
}
.btn_01::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  border-top: 1px solid #008CD6;
  border-right: 1px solid #008CD6;
  transition: 0.3s;
}
.btn_01::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  transition: 0.2s;
  background: #008CD6;
  opacity: 0;
}
.btn_02 {
  position: relative;
  display: inline-block;
  padding: 10px 70px 10px 20px;
  border: #fff solid 1px;
  transition: 0.3s;
  color: #fff;
  margin-top: 30px;
  z-index: 0;
}
.btn_02:hover {
  color: #008CD6;
}
.btn_02:hover::before {
  right: 15px;
  transition: 0.3s;
  border-top: 1px solid #008CD6;
  border-right: 1px solid #008CD6;
}
.btn_02:hover::after {
  width: 100%;
  transition: 0.2s;
  opacity: 1;
  z-index: -1;
}
.btn_02::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transition: 0.3s;
}
.btn_02::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  transition: 0.2s;
  background: #fff;
  opacity: 0;
}
.btn_03 {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  padding: 15px 90px 15px 20px;
  border: #008CD6 solid 1px;
  background: #008CD6;
  transition: 0.3s;
  color: #fff;
  margin-top: 80px;
  z-index: 0;
}
.btn_03:hover {
  color: #008CD6;
}
.btn_03:hover::before {
  right: 15px;
  transition: 0.3s;
  border-top: 1px solid #008CD6;
  border-right: 1px solid #008CD6;
}
.btn_03:hover::after {
  width: 100%;
  transition: 0.2s;
  opacity: 1;
  z-index: -1;
}
.btn_03::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transition: 0.3s;
}
.btn_03::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  transition: 0.2s;
  background: #fff;
  opacity: 0;
}
.btn_electron {
  position: relative;
  display: inline-block;
  padding: 10px 50px 10px 20px;
  border: #008CD6 solid 1px;
  transition: 0.3s;
  color: #008CD6;
  margin-top: 20px;
  z-index: 0;
}
.btn_electron:hover {
  color: #fff;
}
.btn_electron:hover::before {
  right: 15px;
  transition: 0.3s;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}
.btn_electron:hover::after {
  width: 100%;
  transition: 0.2s;
  opacity: 1;
  z-index: -1;
}
.btn_electron::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  border-top: 1px solid #008CD6;
  border-right: 1px solid #008CD6;
  transition: 0.3s;
}
.btn_electron::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  transition: 0.2s;
  background: #008CD6;
  opacity: 0;
}
.btn_metal {
  position: relative;
  display: inline-block;
  padding: 10px 50px 10px 20px;
  border: #16349F solid 1px;
  transition: 0.3s;
  color: #16349F;
  margin-top: 20px;
  margin-left: 10px;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  .btn_metal {
    margin-left: 0;
  }
}
.btn_metal:hover {
  color: #fff;
}
.btn_metal:hover::before {
  right: 15px;
  transition: 0.3s;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}
.btn_metal:hover::after {
  width: 100%;
  transition: 0.2s;
  opacity: 1;
  z-index: -1;
}
.btn_metal::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  border-top: 1px solid #16349F;
  border-right: 1px solid #16349F;
  transition: 0.3s;
}
.btn_metal::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  transition: 0.2s;
  background: #16349F;
  opacity: 0;
}
.btn_sec {
  margin-top: 30px;
}
.btn_mt30 {
  margin-top: 30px;
}
.btn_left {
  left: 0;
  transform: unset;
}

.h1_01 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 100%;
  text-align: center;
  max-width: 90vw;
  padding: 0 20px;
  margin: 0 auto;
}
.h1_01_inner {
  position: relative;
  display: inline-block;
}
.h1_01_text {
  font-size: 3rem;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 15px 35px;
  display: inline-block;
  position: relative;
  z-index: 1;
  font-family: "Noto Serif JP", "Yu Mincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS 明朝", "MS Mincho", serif;
}
@media screen and (max-width: 1200px) {
  .h1_01_text {
    font-size: 2.2rem;
    padding: 10px 30px;
  }
}
.h1_01_bgskew {
  background-color: rgba(0, 0, 0, 0.5);
  transform: skew(-20deg);
  position: absolute;
  inset: 0;
  z-index: -1;
}
.h1_01_bg {
  width: 100%;
  height: 245px;
  position: relative;
  z-index: -1;
  margin-top: 110px;
  margin-bottom: 100px;
}
@media screen and (max-width: 1200px) {
  .h1_01_bg {
    margin-top: 60px;
    margin-bottom: 60px;
    height: 180px;
  }
}
.h1_01_bg picture {
  height: 100%;
}
.h1_01_bg picture img {
  object-fit: cover;
  display: block;
  width: 100%;
  height: 100%;
}
.h1_02 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 100%;
  text-align: center;
  max-width: 90vw;
  padding: 0 20px;
  margin: 0 auto;
}
.h1_02_inner {
  position: relative;
  display: inline-block;
}
.h1_02_text {
  font-size: 3rem;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 15px 35px;
  display: inline-block;
  position: relative;
  z-index: 1;
  font-family: "Noto Serif JP", "Yu Mincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS 明朝", "MS Mincho", serif;
}
@media screen and (max-width: 1200px) {
  .h1_02_text {
    font-size: 2.2rem;
    padding: 10px 30px;
  }
}
.h1_02_bgskew {
  background-color: rgba(0, 0, 0, 0.5);
  transform: skew(-20deg);
  position: absolute;
  inset: 0;
  z-index: -1;
}
.h1_02_bg {
  width: 100%;
  height: 185px;
  position: relative;
  z-index: -1;
  margin-top: 110px;
  margin-bottom: 100px;
  background: linear-gradient(to right, #FFFFFF 0%, #DADADA 100%);
}
@media screen and (max-width: 1200px) {
  .h1_02_bg {
    margin-top: 60px;
    margin-bottom: 60px;
    height: 120px;
  }
}
.h1_03 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 100%;
  text-align: center;
  max-width: 90vw;
  padding: 0 20px;
  margin: 0 auto;
}
.h1_03_inner {
  position: relative;
  display: inline-block;
}
.h1_03_text {
  font-size: 3rem;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 15px 35px;
  display: inline-block;
  position: relative;
  z-index: 1;
  font-family: "Noto Serif JP", "Yu Mincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS 明朝", "MS Mincho", serif;
}
@media screen and (max-width: 1200px) {
  .h1_03_text {
    font-size: 2.2rem;
    padding: 10px 30px;
  }
}
.h1_03_bgskew {
  background-color: rgba(0, 0, 0, 0.5);
  transform: skew(-20deg);
  position: absolute;
  inset: 0;
  z-index: -1;
}
.h1_03_bg {
  width: 100%;
  height: 185px;
  position: relative;
  z-index: -1;
  margin-top: 110px;
  margin-bottom: 100px;
  background: linear-gradient(45deg, #009FFF 0%, #234BD8 100%);
}
@media screen and (max-width: 1200px) {
  .h1_03_bg {
    margin-top: 60px;
    margin-bottom: 60px;
    height: 180px;
  }
}

.h2_01 {
  color: #fff;
  font-size: 2.7rem;
  padding-left: 16px;
  position: relative;
  font-weight: 600;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .h2_01 {
    font-size: 2rem;
  }
}
.h2_01 span {
  display: block;
  font-size: 1.2rem;
  font-weight: 400;
  color: #008CD6;
  letter-spacing: unset;
}
.h2_01::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  top: 0;
  left: 0;
  border: #008CD6 solid 1px;
  border-radius: 100%;
}
.h2_01::after {
  content: "";
  position: absolute;
  width: 1px;
  height: calc(100% - 6px);
  bottom: 0;
  left: 2.5px;
  background-color: #008CD6;
}
.h2_02 {
  color: #008CD6;
  font-size: 2.7rem;
  padding-left: 16px;
  position: relative;
  margin: 100px 0 40px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .h2_02 {
    font-size: 2rem;
    margin: 60px 0 30px;
  }
}
.h2_02 span {
  display: block;
  font-size: 1.2rem;
  font-weight: 400;
  color: #008CD6;
  letter-spacing: unset;
}
.h2_02::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  top: 0;
  left: 0;
  border: #008CD6 solid 1px;
  border-radius: 100%;
}
.h2_02::after {
  content: "";
  position: absolute;
  width: 1px;
  height: calc(100% - 6px);
  bottom: 0;
  left: 2.5px;
  background-color: #008CD6;
}
.h2_index {
  font-size: 3.3rem;
  padding-left: 16px;
  position: relative;
  margin: 150px 0 25px;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .h2_index {
    font-size: 2rem;
    margin: 70px 0 25px;
  }
}
.h2_index span {
  color: #008CD6;
}
.h2_index::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  top: 0;
  left: 0;
  border: #008CD6 solid 1px;
  border-radius: 100%;
}
.h2_index::after {
  content: "";
  position: absolute;
  width: 1px;
  height: calc(100% - 6px);
  bottom: 0;
  left: 2.5px;
  background-color: #008CD6;
}
.h2_three_reason {
  font-size: 3.6rem;
  padding-bottom: 5px;
  text-align: center;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  color: #008CD6;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .h2_three_reason {
    font-size: 2.8rem;
  }
}
.h2_three_reason::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  bottom: 0;
  right: 0;
  border: #008CD6 solid 1px;
  border-radius: 100%;
}
.h2_three_reason::after {
  content: "";
  position: absolute;
  width: calc(100% - 6px);
  height: 1px;
  bottom: 2.5px;
  left: 0;
  background-color: #008CD6;
}
.h2_contact {
  font-size: 3.6rem;
  padding-bottom: 5px;
  text-align: center;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  color: #008CD6;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .h2_contact {
    font-size: 2.3rem;
  }
}
.h2_contact::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  bottom: 23px;
  right: 0;
  border: #008CD6 solid 1px;
  border-radius: 100%;
}
.h2_contact::after {
  content: "";
  position: absolute;
  width: calc(100% - 6px);
  height: 1px;
  bottom: 25px;
  left: 0;
  background-color: #008CD6;
}
.h2_contact span {
  display: block;
  font-size: 1.2rem;
  font-weight: 400;
  color: #008CD6;
  padding-top: 10px;
  letter-spacing: unset;
}
.h2_recruit {
  font-size: 5rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.1em;
  font-family: "Roboto", sans-serif;
}
@media screen and (max-width: 768px) {
  .h2_recruit {
    font-size: 3.5rem;
  }
}

.h3_01 {
  font-size: 2.5rem;
  margin: 50px 0 27px;
  position: relative;
  color: #008CD6;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.h3_01::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 60px;
  height: 2px;
  background: #008CD6;
}
@media screen and (max-width: 768px) {
  .h3_01 {
    font-size: 1.8rem;
    margin: 40px 0 27px;
  }
}
.h3_three_reason {
  color: #008CD6;
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 15px;
  letter-spacing: 0.05rem;
}
@media screen and (max-width: 768px) {
  .h3_three_reason {
    font-size: 2.2rem;
  }
}

.h4_01 {
  font-size: 2rem;
  margin: 30px 0 10px;
  color: #008CD6;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .h4_01 {
    font-size: 1.6rem;
    margin: 20px 0 10px;
  }
}
.h4_02 {
  font-size: 2rem;
  margin: 30px 0 10px;
  color: #555;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .h4_02 {
    font-size: 1.6rem;
    margin: 20px 0 10px;
  }
}
.h4_02_contact {
  margin: 0 0 10px 0;
}

.flex_content {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .flex_content {
    display: block;
  }
}
.flex_content_col-02 {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .flex_content_col-02 {
    display: block;
  }
}
.flex_content_col-02 .flex_item {
  flex: 0 1 calc((100% - 30px) / 2);
}
.flex_content_col-03 {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
@media screen and (max-width: 768px) {
  .flex_content_col-03 {
    display: block;
  }
}
.flex_content_col-03 .flex_item {
  flex: 0 1 calc((100% - 60px) / 3);
}
.flex_item {
  flex: 1 1 0;
}
@media screen and (max-width: 768px) {
  .flex_item {
    margin-bottom: 30px;
  }
}
.flex_item figcaption {
  font-size: 1.5rem;
  font-weight: 400;
  margin-top: 5px;
}
.flex_item img {
  margin-bottom: 30px;
  aspect-ratio: 3/2;
  border-radius: 10px;
}

ul.deco li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 20px;
}
ul.deco li::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  top: 11px;
  left: 0;
  background: #008CD6;
}
ul.deco_pdf li {
  margin-bottom: 30px;
}
ul.deco_pdf li:hover a {
  opacity: 0.5;
  transition: 0.3s;
}
ul.deco_pdf a {
  position: relative;
}
ul.deco_pdf a::after {
  content: "";
  position: absolute;
  background: url(../img/pdf_ico.png) center/contain no-repeat;
  width: 25px;
  height: 25px;
  top: 50%;
  right: -30px;
  transform: translateY(-50%);
}

ol.deco {
  list-style-type: decimal;
  list-style-position: inside;
}
ol.deco li {
  list-style: decimal outside;
  margin-bottom: 20px;
  margin-left: 1.5em;
}
ol.deco li::marker {
  color: #008CD6;
}

body .page_details a:hover {
  opacity: 0.5;
  transition: 0.3s;
}
body .page_details ul li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 20px;
}
body .page_details ul li::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  top: 11px;
  left: 0;
  background: #008CD6;
}
body .page_details ol {
  list-style-type: decimal;
  list-style-position: inside;
}
body .page_details ol li {
  list-style: decimal outside;
  margin-bottom: 20px;
  margin-left: 1.5em;
}
body .page_details ol li::marker {
  color: #008CD6;
}
body .page_details a {
  text-decoration: underline;
  color: #008CD6;
  transition: 0.3s;
}
body .page_details a:hover {
  opacity: 0.5;
  transition: 0.3s;
}
body .page_details blockquote {
  background: #F2FAFF;
  padding: 30px 30px 30px 35px;
  position: relative;
}
body .page_details blockquote::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 100%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: #008CD6;
}
body .page_details img {
  max-width: 800px;
  margin: 0 auto;
}
body .page_details img.alignleft {
  margin: 0 auto 20px 0;
}
body .page_details img.alignright {
  margin: 0 0 20px auto;
}
body .page_details img.aligncenter {
  display: block;
  margin: 0 auto;
}
body .page_details h2 {
  color: #008CD6;
  font-size: 2.7rem;
  padding-left: 16px;
  position: relative;
  margin: 100px 0 40px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  body .page_details h2 {
    font-size: 2rem;
    margin: 60px 0 30px;
  }
}
body .page_details h2 span {
  display: block;
  font-size: 1.2rem;
  font-weight: 400;
  color: #008CD6;
  letter-spacing: unset;
}
body .page_details h2::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  top: 0;
  left: 0;
  border: #008CD6 solid 1px;
  border-radius: 100%;
}
body .page_details h2::after {
  content: "";
  position: absolute;
  width: 1px;
  height: calc(100% - 6px);
  bottom: 0;
  left: 2.5px;
  background-color: #008CD6;
}
body .page_details h2.h2_details {
  position: relative;
  font-size: 2.7rem;
  color: #008CD6;
  letter-spacing: 0.05em;
  margin-top: 220px;
  padding-left: unset;
}
@media screen and (max-width: 1200px) {
  body .page_details h2.h2_details {
    margin-top: 120px;
  }
}
@media screen and (max-width: 768px) {
  body .page_details h2.h2_details {
    font-size: 2.2rem;
  }
}
body .page_details h2.h2_details::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  top: unset;
  bottom: -7px;
  left: 150px;
  border: #008CD6 solid 1px;
  border-radius: 100%;
}
body .page_details h2.h2_details::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 1px;
  bottom: -5px;
  left: 0;
  background-color: #008CD6;
}
body .page_details h3 {
  font-size: 2.5rem;
  margin: 50px 0 27px;
  position: relative;
  color: #008CD6;
  font-weight: 600;
  letter-spacing: 0.05em;
}
body .page_details h3::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 60px;
  height: 2px;
  background: #008CD6;
}
@media screen and (max-width: 768px) {
  body .page_details h3 {
    font-size: 1.8rem;
    margin: 40px 0 27px;
  }
}
body .page_details h4 {
  font-size: 2rem;
  margin: 30px 0 10px;
  color: #008CD6;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  body .page_details h4 {
    font-size: 1.6rem;
    margin: 20px 0 10px;
  }
}
body .page_details b {
  font-weight: 600;
}

table {
  border-collapse: collapse;
  width: 100%;
}
table thead {
  background: #6BC7FF;
}
table thead tr th {
  font-size: 16px;
  text-align: center;
  color: #fff;
  font-weight: 600;
  border: #008CD6 solid 1px;
  padding: 15px 20px;
}
table tbody tr td {
  border: #008CD6 solid 1px;
  font-size: 1.4rem;
  padding: 15px 20px;
  font-weight: 600;
  color: #555;
}

.table_border_none {
  border: none;
}
.table_border_left {
  border-top: 1px solid #008CD6;
  border-left: 1px solid #008CD6;
  border-right: none;
  border-bottom: 1px solid #008CD6;
}
.table_border_right {
  border-top: 1px solid #008CD6;
  border-left: none;
  border-right: 1px solid #008CD6;
  border-bottom: 1px solid #008CD6;
}

.txt_center {
  text-align: center;
}
.txt_right {
  text-align: right;
}

p.m_btm_no {
  margin-bottom: unset;
}
p.m_btm_20 {
  margin-bottom: 20px;
}

.border {
  width: 100%;
  height: 1px;
  margin: 50px auto;
  background: #008CD6;
}
.border_img_box {
  border: #ddd solid 1px;
}

.table {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #ddd;
  margin-top: 30px;
  margin-bottom: 30px;
}
.table dt {
  width: 180px;
  font-weight: bold;
  padding: 30px;
  border-bottom: 1px solid #ddd;
  color: #008CD6;
}
@media screen and (max-width: 768px) {
  .table dt {
    width: 100%;
    padding: 30px 0 10px;
    border-bottom: none;
  }
}
.table dd {
  width: calc(100% - 180px);
  padding: 30px;
  border-bottom: 1px solid #ddd;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .table dd {
    width: 100%;
    padding: 0 0 30px;
  }
}
.table_wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media screen and (max-width: 1200px) {
  .table_wrapper {
    max-height: 700px;
  }
}
.table_wrapper table {
  min-width: 940px;
}
.table_wrapper thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #6BC7FF;
}

img.img_contain {
  object-fit: contain;
}
img.img_aspect_no {
  aspect-ratio: unset;
}
img.img_btm_no {
  margin-bottom: unset;
}

.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.8);
}
@media screen and (max-width: 1200px) {
  .header {
    background-color: #fff;
  }
}
.header_inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 110px;
  padding: 0 40px;
}
@media screen and (max-width: 1200px) {
  .header_inner {
    height: 60px;
    padding: 0 20px;
  }
}
.header_ico {
  width: 100%;
  max-width: 300px;
  height: 100%;
  max-height: 55px;
}
@media screen and (max-width: 1200px) {
  .header_ico {
    max-width: 180px;
    max-height: 30px;
  }
}
.header_ico img {
  display: block;
  width: 100%;
  max-height: 55px;
  object-fit: contain;
  object-position: left;
}
@media screen and (max-width: 1200px) {
  .header_ico img {
    max-height: 30px;
  }
}
@media screen and (max-width: 1200px) {
  .header_hamburger {
    position: absolute;
    top: 10px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: transparent;
  }
}
@media screen and (max-width: 1200px) and (max-width: 1200px) {
  .header_hamburger {
    top: 0;
  }
}
@media screen and (max-width: 1200px) {
  .header_hamburger span {
    background-color: #008CD6;
    width: 36px;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    transition: 0.3s;
  }
  .header_hamburger span::before, .header_hamburger span::after {
    content: "";
    background-color: #008CD6;
    width: 36px;
    height: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: 0.3s;
  }
  .header_hamburger span::before {
    top: -10px;
  }
  .header_hamburger span::after {
    bottom: -10px;
  }
  .header_hamburger.js-open span {
    background-color: transparent;
    transition: 0.3s;
  }
  .header_hamburger.js-open span::before {
    top: 1px;
    transition: 0.3s;
    transform: translateX(-50%) rotate(45deg);
  }
  .header_hamburger.js-open span::after {
    bottom: -1px;
    transition: 0.3s;
    transform: translateX(-50%) rotate(-45deg);
  }
}

.global-nav {
  height: 100%;
  margin-left: auto;
}
@media screen and (max-width: 1200px) {
  .global-nav {
    width: 100vw;
    height: calc(100vh - 60px);
    margin-left: unset;
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(150%);
    opacity: 0;
  }
  .global-nav.js-open {
    transform: translateX(-50%);
    transition: 0.3s;
    opacity: 1;
  }
}
.global-nav_list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 100%;
}
@media screen and (max-width: 1200px) {
  .global-nav_list {
    display: block;
    height: auto;
    padding: 15px 15px 30px;
    background-color: #fff;
    height: 100%;
    overflow: scroll;
  }
}
.global-nav_item {
  position: relative;
  width: 100px;
  height: 110px;
  transition: 0.3s;
  text-align: center;
}
@media screen and (max-width: 1200px) {
  .global-nav_item {
    width: 100%;
    height: auto;
    margin-right: 0;
    border-bottom: 1px solid #008CD6;
    padding: 0;
    text-align: left;
    margin-bottom: 30px;
  }
}
.global-nav_item:hover {
  background-color: #D7DFE5;
}
@media screen and (max-width: 1200px) {
  .global-nav_item:hover {
    background-color: #fff;
  }
}
.global-nav_item:hover .global-nav_link {
  color: #008CD6;
}
.global-nav_link {
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-decoration: none;
  color: #555;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.05rem;
}
@media screen and (max-width: 1200px) {
  .global-nav_link {
    padding: 20px 0;
    position: unset;
    transform: unset;
    color: #008CD6;
  }
  .global-nav_link:hover {
    opacity: 0.5;
    transition: 0.3s;
  }
}

.sub-nav {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background-color: #008CD6;
  padding: 35px 50px;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
}
@media screen and (max-width: 1200px) {
  .sub-nav {
    position: relative;
    top: auto;
    left: auto;
    white-space: normal;
    background-color: rgba(255, 255, 255, 0);
    padding: 0;
    opacity: 1;
    pointer-events: auto;
    display: none;
    transition: unset;
    transform: unset;
    padding-bottom: 20px;
  }
}
.sub-nav.js-fade {
  opacity: 1;
  pointer-events: auto;
  transition: 0.3s;
}
@media screen and (max-width: 1200px) {
  .sub-nav.js-fade {
    transition: unset;
  }
}
.sub-nav_link {
  position: relative;
  color: #fff;
  text-decoration: none;
  font-size: 1.5rem;
  text-align: center;
  display: block;
  font-weight: 500;
  margin-bottom: 20px;
  letter-spacing: 0.05rem;
}
@media screen and (max-width: 1200px) {
  .sub-nav_link {
    padding: 0 0 0 20px;
    color: #333;
    line-height: 1;
    display: block;
    text-align: left;
    font-weight: 500;
  }
  .sub-nav_link:hover {
    color: #008CD6;
    transition: 0.3s;
  }
}
.sub-nav_link::before {
  content: "";
  width: 0;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  transition: 0.3s;
}
@media screen and (max-width: 1200px) {
  .sub-nav_link::before {
    display: none;
  }
}
.sub-nav_link:hover:before {
  width: 100%;
  transition: 0.3s;
}

.btn-tel {
  display: none;
  border: #008CD6 solid 1px;
  padding: 30px 0 30px 85px;
  position: relative;
  line-height: normal;
  text-align: left;
  margin: 40px auto 20px;
  font-size: 1.8rem;
  font-weight: 700;
}
.btn-tel:hover {
  background-color: #F0F8FF;
  transition: 0.3s;
}
.btn-tel span {
  display: block;
  font-weight: 400;
  font-size: 1.4rem;
}
@media screen and (max-width: 1200px) {
  .btn-tel {
    display: block;
  }
}
.btn-tel::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: url(../img/tel-ico.png) center/contain no-repeat;
  transition: 0.2s;
}

.btn-contact {
  display: block;
  padding: 20px;
  font-weight: 500;
  text-align: center;
  color: #fff;
  background: linear-gradient(90deg, #008CD6 0%, #6BC7FF 50%, #008CD6 100%);
  background-size: 200% 100%;
  transition: 0.2s;
  margin-left: 50px;
}
.btn-contact:hover {
  background-position: 100% 0;
  color: #EAFF00;
  transition: 0.2s;
}
.btn-contact.header-contact {
  font-size: 1.5rem;
  letter-spacing: 0.05rem;
}
@media screen and (max-width: 1200px) {
  .btn-contact.header-contact {
    display: none;
  }
}
.btn-contact.nav-contact {
  display: none;
  position: relative;
  line-height: normal;
  text-align: left;
  margin: auto;
  padding: 30px 0 30px 85px;
}
@media screen and (max-width: 1200px) {
  .btn-contact.nav-contact {
    display: block;
  }
}
.btn-contact.nav-contact.mail::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: url(../img/mail-ico.png) center/contain no-repeat;
  transition: 0.2s;
}
.btn-contact.nav-contact.mail:hover::before {
  background: url(../img/mail-ico_yellow.png) center/contain no-repeat;
  transition: 0.2s;
}
.btn-contact.nav-contact.locker {
  background: linear-gradient(90deg, #16349F 0%, #6BC7FF 50%, #16349F 100%);
  background-size: 200% 100%;
  margin-top: 20px;
}
.btn-contact.nav-contact.locker:hover {
  background-position: 100% 0;
  transition: 0.2s;
}
.btn-contact.nav-contact.locker::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: url(../img/locker-ico.png) center/contain no-repeat;
  transition: 0.2s;
}
.btn-contact.nav-contact.locker:hover::before {
  background: url(../img/locker-ico_yellow.png) center/contain no-repeat;
  transition: 0.2s;
}

@media screen and (max-width: 1200px) {
  .header_open {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 60px;
  }
  .header_open::before {
    content: "";
    position: absolute;
    top: calc(50% - 2px);
    left: 50%;
    transform: translateY(-50%) translateX(-50%) rotate(135deg);
    width: 12px;
    height: 12px;
    border-top: 2px solid #008CD6;
    border-right: 2px solid #008CD6;
    transition: 0.3s;
  }
  .header_open.js-open::before {
    top: calc(50% + 2px);
    transform: translateY(-50%) translateX(-50%) rotate(-45deg);
    transition: 0.3s;
  }
}
.footer {
  padding: 120px 20px 30px;
}
@media screen and (max-width: 768px) {
  .footer {
    padding: 100px 20px 30px;
  }
}
.footer_inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
@media screen and (max-width: 1200px) {
  .footer_inner {
    display: block;
  }
}
.footer_info p {
  font-weight: 400;
  margin-bottom: 30px;
}
.footer_info p strong {
  font-size: 1.6rem;
  font-weight: 500;
}
.footer_info .iso-symbol {
  max-width: 145px;
  width: 100%;
  height: auto;
  margin-top: 30px;
}
@media screen and (max-width: 576px) {
  .footer_info .iso-symbol {
    margin: 30px auto 0;
  }
}
.footer_ico {
  display: block;
  width: 100%;
  max-width: 300px;
  height: 100%;
  max-height: 60px;
  margin-bottom: 50px;
}
@media screen and (max-width: 1200px) {
  .footer_ico {
    max-width: 330px;
    max-height: unset;
    margin: 50px 0 40px;
  }
}
@media screen and (max-width: 576px) {
  .footer_ico {
    max-width: 100%;
  }
}
.footer_ico img {
  display: block;
  width: 100%;
  max-height: 60px;
  object-fit: contain;
  object-position: left;
}
@media screen and (max-width: 1200px) {
  .footer_ico img {
    max-width: unset;
    max-height: unset;
  }
}
.footer_copy {
  margin-top: 100px;
  text-align: center;
  font-size: 1.4rem;
  color: #555555;
}
@media screen and (max-width: 1200px) {
  .footer_copy {
    margin-top: 80px;
  }
}
.footer_sitemap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (max-width: 1200px) {
  .footer_sitemap {
    display: block;
  }
}

.sitemap-list {
  margin-left: 80px;
}
@media screen and (max-width: 1200px) {
  .sitemap-list {
    margin-left: unset;
  }
}
.sitemap-list_item {
  font-size: 1.6rem;
  font-weight: 500;
  margin-top: 40px;
}
.sitemap-list_item:first-child {
  margin-top: 0;
}
@media screen and (max-width: 1200px) {
  .sitemap-list_item {
    position: relative;
    margin-top: 0;
    padding: 0;
    border-bottom: 1px solid #008CD6;
  }
}
.sitemap-list_link {
  display: block;
  margin-bottom: 15px;
}
.sitemap-list_link:hover {
  opacity: 0.5;
  transition: 0.3s;
}
@media screen and (max-width: 1200px) {
  .sitemap-list_link {
    display: block;
    position: relative;
    padding: 20px 0;
    margin-bottom: unset;
  }
  .sitemap-list_link::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #008CD6;
    left: 0;
    top: 0;
    display: none;
  }
}
@media screen and (max-width: 1200px) {
  .sitemap-list_sub {
    display: none;
    margin-top: 0;
    margin-bottom: 20px;
    padding: 0 20px;
  }
}
.sitemap-list_sub li {
  padding-left: 15px;
  display: block;
  margin-bottom: 5px;
}
.sitemap-list_sub li:hover a {
  color: #008CD6;
  transition: 0.3s;
}
@media screen and (max-width: 1200px) {
  .sitemap-list_sub li {
    padding-left: unset;
    margin-top: 20px;
  }
  .sitemap-list_sub li:first-child {
    margin-top: 0;
  }
}
.sitemap-list_sub li a {
  color: #555;
  font-size: 1.4rem;
}
@media screen and (max-width: 1200px) {
  .sitemap-list_sub li a {
    display: block;
    position: relative;
    line-height: 1.5;
    text-decoration: none;
  }
}

@media screen and (max-width: 1200px) {
  .footer_open {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 70px;
  }
  .footer_open::before {
    content: "";
    position: absolute;
    top: calc(50% - 4px);
    left: 50%;
    transform: translateY(-50%) translateX(-50%) rotate(135deg);
    width: 12px;
    height: 12px;
    border-top: 2px solid #008CD6;
    border-right: 2px solid #008CD6;
    transition: 0.3s;
  }
  .footer_open.js-open::before {
    top: 50%;
    transform: translateY(-50%) translateX(-50%) rotate(-45deg);
    transition: 0.3s;
  }
}
.index-hero {
  margin-top: 110px;
}
@media screen and (max-width: 1200px) {
  .index-hero {
    margin-top: 60px;
  }
}

.hero-slide video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.slick-dots {
  bottom: 0 !important;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  margin: 0 6px;
  width: 50px !important;
  height: 20px !important;
}
.slick-dots li.slick-active button {
  background: #008CD6 !important;
  width: 50px !important;
  height: 5px !important;
  opacity: 1;
}
.slick-dots li button {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: #fff !important;
  padding: 0 !important;
  width: 50px !important;
  height: 5px !important;
}
.slick-dots li button::before {
  display: none;
}

.about_content {
  margin-top: 100px;
}
.about_content_ttl {
  color: #008CD6;
  font-weight: 600;
  font-size: 3rem;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .about_content_ttl {
    font-size: 2.5rem;
  }
}
.about_content .flex_content img {
  border-radius: 10px;
}
.about_content_btn {
  left: 0;
  transform: unset;
  margin-top: 30px;
}
@media screen and (max-width: 768px) {
  .about_content_btn {
    left: 50%;
    transform: translateX(-50%);
  }
}
.about_content_flex {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 30px;
}
@media screen and (max-width: 768px) {
  .about_content_flex {
    display: block;
  }
}
.about_content_flex_btn {
  left: 0;
  transform: unset;
  margin-top: unset;
}
@media screen and (max-width: 768px) {
  .about_content_flex_btn {
    left: 50%;
    transform: translateX(-50%);
    margin-top: 30px;
  }
}
.about_link {
  margin-top: 60px;
  width: 100%;
  height: 380px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .about_link {
    display: block;
    height: 330px;
    margin-bottom: 450px;
  }
}
.about_link_item {
  width: 48%;
  height: 100%;
  border-radius: 30px;
  position: relative;
  padding: 20px;
  display: block;
}
@media screen and (max-width: 768px) {
  .about_link_item {
    width: 100%;
    margin-bottom: 30px;
  }
}
.about_link_item::before {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 30px;
  content: "";
  display: block;
  margin: auto;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0;
  z-index: 1;
  transform: translateY(-50%) scale(0.1);
  transition: 0.2s;
}
.about_link_item:hover::before {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  height: 100%;
  transition: 0.2s ease-in-out;
}
.about_link_item:hover .about_arrow {
  border: #EAFF00 solid 1px;
}
.about_link_item:hover .about_arrow span {
  left: 55%;
  transition: 0.3s;
}
.about_link_item:hover .about_arrow span::before {
  background: url(../img/about_arrow_yellow.png) center/contain no-repeat;
}
.about_link_inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 2.4rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.15em;
  z-index: 2;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .about_link_inner {
    top: 40%;
  }
}
.about_link_inner span {
  text-align: left;
  display: block;
  font-size: 1.5rem;
  max-width: 290px;
  width: 100%;
  margin: 30px auto 0;
  font-weight: 400;
  letter-spacing: normal;
  padding: 0 20px;
}
@media screen and (max-width: 768px) {
  .about_link_inner span {
    max-width: 100%;
  }
}
.about_link_electron {
  background: url(../img/link_electron.jpg) center/cover no-repeat;
}
.about_link_electron::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 155, 249, 0.8);
  pointer-events: none;
  border-radius: 30px;
  transition: 0.4s;
}
.about_link_electron:hover:after {
  opacity: 0;
  transition: 0.4s;
}
.about_link_metal {
  background: url(../img/link_metal.jpg) center/cover no-repeat;
}
.about_link_metal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(22, 52, 159, 0.8);
  pointer-events: none;
  border-radius: 30px;
}
.about_link_metal:hover:after {
  opacity: 0;
  transition: 0.4s;
}
.about_arrow {
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border: #fff solid 1px;
  border-radius: 50%;
  z-index: 2;
}
.about_arrow span {
  position: relative;
  width: 23px;
  height: 15px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s;
}
.about_arrow span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 23px;
  height: 15px;
  background: url(../img/about_arrow.png) center/contain no-repeat;
}

.product_slide {
  left: 0;
  width: 80%;
  border-radius: 100px;
  overflow: hidden;
  padding: 20px 0;
  background-color: #F2FAFF;
  box-shadow: 0px 3px 5px 0 rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 768px) {
  .product_slide {
    width: 100vw;
    padding: 20px 0;
    overflow: unset;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: unset;
    border-radius: unset;
  }
}
.product_slide figure {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: auto;
  margin: 0 20px;
}
.product_slide figure img {
  height: 100%;
  width: auto;
  display: block;
}
.product_slide figcaption {
  position: relative;
  display: block;
  padding-left: 12px;
  font-size: 1.4rem;
  color: #008CD6;
}
.product_slide figcaption::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background-color: #008CD6;
}
.product_slide figcaption.cate_metal {
  color: #16349F;
}
.product_slide figcaption.cate_metal::before {
  background-color: #16349F;
}
.product_slide figcaption.cate_electron {
  color: #008CD6;
}
.product_slide figcaption.cate_electron::before {
  background-color: #008CD6;
}
.product_slide .slick-track {
  height: 80px;
}

.sec-three_reason {
  padding: 80px 20px;
  border: #008CD6 solid 1px;
  border-radius: 20px;
  margin-top: 120px;
}

.three_reason_item {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 70px;
}
@media screen and (max-width: 768px) {
  .three_reason_item {
    margin-top: 40px;
    justify-content: unset;
  }
}
.three_reason_txt {
  max-width: 595px;
  width: 100%;
  height: auto;
  margin: 0 40px 0 20px;
}
@media screen and (max-width: 1200px) {
  .three_reason_txt {
    margin: 0 0 0 20px;
  }
}
@media screen and (max-width: 768px) {
  .three_reason_txt {
    margin: 0;
    max-width: 100%;
  }
}
.three_reason_number {
  font-size: 8rem;
  font-weight: 700;
  color: #D5EFFF;
}
.three_reason_number span {
  display: block;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .three_reason_number {
    font-size: 5rem;
    margin-bottom: 10px;
  }
}
.three_reason_img {
  max-width: 210px;
  width: 100%;
}
.three_reason_img img {
  display: block;
  object-fit: cover;
  border-radius: 10px;
  aspect-ratio: 16/9;
}

.sec-topics {
  background: #39414C;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin: 120px -50vw 0 -50vw;
}

.topics_inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 80px 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (max-width: 1200px) {
  .topics_inner {
    display: block;
  }
}
.topics_left {
  max-width: 200px;
  width: 100%;
}
.topics_right {
  max-width: 800px;
  width: 100%;
}
@media screen and (max-width: 1200px) {
  .topics_right {
    max-width: 100%;
  }
}
.topics_right li {
  padding: 30px 0;
  border-bottom: #fff solid 1px;
  transition: 0.3s;
}
.topics_right li:first-child {
  padding: 0 0 30px 0;
}
@media screen and (max-width: 1200px) {
  .topics_right li:first-child {
    margin-top: 60px;
  }
}
.topics_right li:hover {
  opacity: 0.5;
  transition: 0.3s;
}
.topics_right time {
  color: #D0CACA;
  font-size: 1.5rem;
  margin-right: 15px;
  font-weight: 400;
}
.topics_right a {
  font-size: 1.6rem;
  font-weight: 400;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .topics_right a {
    font-size: 1.5rem;
  }
}
.topics_cate {
  font-size: 1.3rem;
  padding: 0 20px;
  border: #008CD6 solid 1px;
  border-radius: 100px;
  margin: 0 10px 15px 0;
  color: #008CD6;
  font-weight: 400;
  display: inline-block;
}

.contact_bg {
  padding: 60px 20px;
  background: url(../img/contact_bg.jpg) center/cover no-repeat;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin: 0 -50vw 0 -50vw;
  z-index: 1;
}
.contact_bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 155, 249, 0.3);
  width: 100%;
  height: 100%;
  z-index: -1;
}
.contact_inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.contact_inner .btn-tel {
  display: block;
  border: #008CD6 solid 1px;
  padding: 25px 0 20px 80px;
  position: relative;
  line-height: normal;
  text-align: left;
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
  height: 100%;
}
.contact_inner .btn-tel span {
  display: block;
  font-weight: 400;
  font-size: 1.5rem;
}
.contact_inner .btn-contact {
  display: block;
  font-size: 1.4rem;
  font-weight: 500;
  text-align: center;
  color: #fff;
  background: linear-gradient(90deg, #008CD6 0%, #6BC7FF 50%, #008CD6 100%);
  background-size: 200% 100%;
  transition: 0.2s;
  position: relative;
  line-height: normal;
  text-align: left;
  margin: auto;
  padding: 10px 0 10px 85px;
}
.contact_inner .btn-contact:hover {
  background-position: 100% 0;
  color: #EAFF00;
  transition: 0.2s;
}
.contact_inner .btn-contact.mail::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: url(../img/mail-ico.png) center/contain no-repeat;
  transition: 0.2s;
}
.contact_inner .btn-contact.mail:hover::before {
  background: url(../img/mail-ico_yellow.png) center/contain no-repeat;
  transition: 0.2s;
}
.contact_inner .btn-contact.locker {
  background: linear-gradient(90deg, #16349F 0%, #6BC7FF 50%, #16349F 100%);
  background-size: 200% 100%;
  margin-top: 5px;
}
.contact_inner .btn-contact.locker:hover {
  background-position: 100% 0;
}
.contact_inner .btn-contact.locker:hover::before {
  background: url(../img/locker-ico_yellow.png) center/contain no-repeat;
  transition: 0.2s;
}
.contact_inner .btn-contact.locker::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: url(../img/locker-ico.png) center/contain no-repeat;
  transition: 0.2s;
}
.contact_flex {
  display: flex;
  gap: 40px;
  justify-content: space-between;
}
@media screen and (max-width: 1200px) {
  .contact_flex {
    display: block;
  }
}
.contact_flex_item.contact_content {
  background: #fff;
  border-radius: 20px;
  padding: 40px 50px;
  width: 100%;
}
@media screen and (max-width: 1200px) {
  .contact_flex_item.contact_content {
    margin-bottom: 20px;
    padding: 40px 15px;
  }
}
.contact_flex_item.contact_content p {
  margin-top: 40px;
  color: #008CD6;
  text-align: center;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .contact_flex_item.contact_content p {
    font-size: 1.6rem;
    text-align: left;
  }
}
.contact_flex_item.recruit_content {
  position: relative;
  background: #58BEFB;
  border-radius: 20px;
  padding: 40px;
  width: 45%;
  margin: 0 auto;
  transition: 0.4s ease;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 1200px) {
  .contact_flex_item.recruit_content {
    display: block;
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .contact_flex_item.recruit_content {
    padding: 30px 15px 80px;
  }
}
.contact_flex_item.recruit_content:hover {
  background: linear-gradient(315deg, rgba(137, 211, 255, 0.9) 0%, rgba(107, 246, 251, 0.9) 30%, rgba(110, 200, 255, 0.9) 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
  transition: 0.4s ease;
}
.contact_flex_item.recruit_content:hover .recruit_arrow span {
  left: 55%;
  transition: 0.3s;
}
.contact_flex_item.recruit_content p {
  display: inline-block;
  color: #fff;
  font-size: 1.8rem;
  position: relative;
}
.contact_flex_item.recruit_content p::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  top: 50%;
  right: -25px;
  transform: translateY(-50%);
  background: url(../img/another_ico.png) center/contain no-repeat;
}

.recruit_arrow {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border: #fff solid 1px;
  border-radius: 50%;
  z-index: 2;
}
.recruit_arrow span {
  position: relative;
  width: 23px;
  height: 15px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s;
}
.recruit_arrow span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 23px;
  height: 15px;
  background: url(../img/about_arrow.png) center/contain no-repeat;
}

.company_flex {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
@media screen and (max-width: 768px) {
  .company_flex {
    display: block;
  }
}
.company_flex_item {
  flex: 0 0 calc((100% - 60px) / 3);
}
.company_flex_item:hover img {
  transform: scale(1.1);
  transition: 0.3s;
}
.company_flex_item:hover a {
  background: #008CD6;
  box-shadow: 0px 0px 0px 0 rgba(0, 0, 0, 0.3);
}
.company_flex_item:hover a p {
  color: #fff;
  transition: 0.3s;
}
.company_flex_item:hover a p span {
  color: #fff;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .company_flex_item {
    margin-bottom: 30px;
  }
}
.company_flex_item figure {
  aspect-ratio: 16/9;
  overflow: hidden;
  margin: unset;
}
.company_flex_item figure img {
  width: 100%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 16/9;
  transition: 0.3s;
}
.company_flex_item a {
  box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.3);
  display: block;
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
  background: #fff;
}
.company_flex_item a p {
  font-size: 2rem;
  font-weight: 600;
  color: #008CD6;
  display: block;
  transition: 0.3s;
  padding: 20px 15px;
}
@media screen and (max-width: 768px) {
  .company_flex_item a p {
    font-size: 1.6rem;
  }
}
.company_flex_item a p span {
  font-size: 1.3rem;
  display: block;
  color: #555;
  transition: 0.3s;
  font-weight: 400;
  margin-top: 10px;
}

.map_flex {
  margin-top: 40px;
}
.map_flex iframe {
  min-height: 300px;
}

.member_link {
  position: relative;
}
.member_link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: url(../img/another_ico_blue.png) center/contain no-repeat;
}

.history_flex {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
@media screen and (max-width: 768px) {
  .history_flex {
    padding-left: 25px;
  }
}
.history_flex:last-child .history_flex_item.col1::before {
  content: "";
  position: absolute;
  width: 1px;
  height: calc(100% + 100px);
  background-image: linear-gradient(to bottom, #008CD6 0%, #008CD6 70%, transparent 70%), repeating-linear-gradient(to bottom, #008CD6, #008CD6 4px, #fff 4px, #fff 8px);
  z-index: -1;
}
.history_flex_item p {
  margin-bottom: unset;
  padding: 20px 0;
}
@media screen and (max-width: 768px) {
  .history_flex_item p {
    padding: unset;
  }
}
.history_flex_item.col1 {
  width: 200px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .history_flex_item.col1 {
    width: 100%;
    padding: 30px 0 10px;
  }
}
.history_flex_item.col1 p {
  color: #008CD6;
  font-size: 1.6rem;
  font-weight: 700;
}
.history_flex_item.col1::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: #008CD6 solid 1px;
  border-radius: 50%;
  top: 28px;
  right: -6px;
  background: #fff;
}
@media screen and (max-width: 768px) {
  .history_flex_item.col1::after {
    right: unset;
    top: 38px;
    left: -25px;
  }
}
.history_flex_item.col1::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  top: 50%;
  right: -1px;
  transform: translateY(-50%);
  background: #008CD6;
}
@media screen and (max-width: 768px) {
  .history_flex_item.col1::before {
    right: unset;
    top: 10px;
    left: -19px;
    transform: unset;
    height: calc(100% + 200px);
  }
}
.history_flex_item.col2 {
  width: 100px;
}
@media screen and (max-width: 768px) {
  .history_flex_item.col2 {
    width: 50px;
  }
}
.history_flex_item.col2 p {
  padding-left: 30px;
}
@media screen and (max-width: 768px) {
  .history_flex_item.col2 p {
    padding-left: unset;
  }
}
.history_flex_item.col3 {
  width: calc(100% - 300px);
}
@media screen and (max-width: 768px) {
  .history_flex_item.col3 {
    width: calc(100% - 50px);
  }
}
.history_flex_item.col3 p {
  font-weight: 400;
}

.greeting_top {
  margin-bottom: 60px;
}
.greeting_top_img {
  max-width: 800px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.greeting_top figcaption {
  margin-top: 10px;
  font-weight: 400;
}
.greeting_sign_flex {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 30px auto 80px;
  justify-content: right;
  max-width: 800px;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .greeting_sign_flex {
    gap: 20px;
    margin: 30px auto 60px;
  }
}
.greeting_sign_img {
  max-width: 195px;
  object-fit: contain;
  display: unset;
}
@media screen and (max-width: 768px) {
  .greeting_sign_img {
    width: 150px;
  }
}
.greeting_txt {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  letter-spacing: 0.05em;
  font-weight: 400;
}

.philosophy_top {
  padding: 60px 15px;
  border: #008CD6 solid 1px;
  border-radius: 20px;
}
@media screen and (max-width: 768px) {
  .philosophy_top {
    padding: 40px 15px;
  }
}
.philosophy_copy {
  font-size: 2.3rem;
  text-align: center;
  color: #008CD6;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .philosophy_copy {
    font-size: 1.8rem;
    text-align: left;
    margin-bottom: 30px;
  }
}
.philosophy_copy p {
  font-weight: 600;
}
.philosophy_flex {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .philosophy_flex {
    display: block;
    margin-bottom: 30px;
  }
}
.philosophy_flex_number {
  font-size: 5rem;
  color: #D5EFFF;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .philosophy_flex_number {
    font-size: 3.5rem;
  }
}
.philosophy_flex_txt {
  font-size: 1.8rem;
  color: #008CD6;
  flex: 1 1 0;
}
@media screen and (max-width: 768px) {
  .philosophy_flex_txt {
    font-size: 1.6rem;
  }
}
.philosophy_flex_txt p {
  font-weight: 600;
}

.declaration_top span {
  font-size: 2.8rem;
  text-align: center;
  margin-bottom: 50px;
  display: block;
}
@media screen and (max-width: 768px) {
  .declaration_top span {
    font-size: 2.2rem;
  }
}
.declaration_top p {
  font-weight: 400;
}
.declaration_name {
  margin-top: 20px;
}
.declaration_name span {
  font-weight: 400;
  margin-top: 10px;
}
.declaration_signature {
  margin-top: 60px;
}

.quality_copy {
  color: #008CD6;
  font-size: 2.8rem;
  margin-bottom: 60px;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .quality_copy {
    font-size: 2.2rem;
    margin-bottom: 50px;
  }
}
.quality_txt {
  font-weight: 400;
}
.quality_name {
  font-weight: 600;
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  .quality_name {
    margin-top: 30px;
  }
}

.environmental_copy {
  color: #008CD6;
  font-size: 2rem;
  margin-bottom: 60px;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .environmental_copy {
    font-size: 1.8rem;
    margin-bottom: 50px;
  }
}
.environmental_name {
  font-weight: 600;
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  .environmental_name {
    margin-top: 30px;
  }
}

.regional_img .flex_item img {
  aspect-ratio: unset;
  border: #555 solid 1px;
  padding: 10px;
  object-fit: contain;
}

.electron_top {
  margin-top: 80px;
}
.electron_top_item {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  position: relative;
  z-index: 1;
}
.electron_top_item_inner {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 80px 20px;
}
.electron_top_car {
  background: linear-gradient(rgba(51, 59, 60, 0.95), rgba(51, 59, 60, 0.95)), url(../img/electron/electron_top_bg_01.jpg) center/cover no-repeat;
}
.electron_top_bike {
  background: linear-gradient(rgba(25, 41, 69, 0.95), rgba(25, 41, 69, 0.95)), url(../img/electron/electron_top_bg_02.jpg) center/cover no-repeat;
}
.electron_top_air-conditioner {
  background: linear-gradient(rgba(72, 101, 117, 0.95), rgba(72, 101, 117, 0.95)), url(../img/electron/electron_top_bg_03.jpg) center/cover no-repeat;
}

.electron-machine_copy {
  max-width: 550px;
  width: 100%;
  margin: 0 auto 100px;
  font-weight: 700;
}
.electron-machine_content {
  padding: 80px 0;
}
@media screen and (max-width: 768px) {
  .electron-machine_content {
    padding: 60px 0;
  }
}
.electron-machine_content:nth-child(even) {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: #DADADA;
  padding: 80px 20px;
}
@media screen and (max-width: 768px) {
  .electron-machine_content:nth-child(even) {
    padding: 60px 20px;
  }
}
.electron-machine_content:nth-child(even) .electron-machine_flex {
  max-width: 940px;
  width: 100%;
  margin: 0 auto;
}
.electron-machine_ttl {
  display: flex;
  align-items: center;
  gap: 15px;
  justify-content: center;
  margin-bottom: 50px;
  font-size: 4rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .electron-machine_ttl {
    font-size: 2rem;
    margin-bottom: 20px;
    justify-content: left;
  }
}
.electron-machine_ttl span {
  color: #008CD6;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-size: 5rem;
}
@media screen and (max-width: 768px) {
  .electron-machine_ttl span {
    font-size: 4rem;
  }
}
.electron-machine_txt {
  max-width: 800px;
  width: 100%;
  margin: 0 auto 60px;
}
.electron-machine_flex {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .electron-machine_flex {
    gap: 20px;
    justify-content: unset;
  }
}
.electron-machine_flex_item {
  flex: 0 1 calc((100% - 60px) / 3);
}
@media screen and (max-width: 768px) {
  .electron-machine_flex_item {
    flex: 0 1 calc((100% - 20px) / 2);
  }
}
.electron-machine_flex_item img {
  aspect-ratio: 4/3;
  border-radius: 10px;
}
.electron-machine_flex_item figcaption {
  font-size: 1.6rem;
}
@media screen and (max-width: 768px) {
  .electron-machine_flex_item figcaption {
    font-size: 1.4rem;
  }
}

table.press_table td:nth-child(1),
table.press_table td:nth-child(3) {
  text-align: center;
}

table.plating_table td {
  text-align: center;
}

.electron_btn {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  padding: 20px 30px;
  font-weight: 500;
  text-align: center;
  color: #fff;
  background: linear-gradient(90deg, #008CD6 0%, #6BC7FF 50%, #008CD6 100%);
  background-size: 200% 100%;
  transition: 0.2s;
  font-size: 1.5rem;
  margin-top: 80px;
}
@media screen and (max-width: 768px) {
  .electron_btn {
    margin-top: 60px;
  }
}
.electron_btn:hover {
  background-position: 100% 0;
  color: #EAFF00;
  transition: 0.2s;
}

.metal_copy {
  padding-left: 16px;
  position: relative;
  margin: 100px 0 30px;
  letter-spacing: 0.05em;
}
.metal_copy::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  top: 0;
  left: 0;
  border: #008CD6 solid 1px;
  border-radius: 100%;
}
.metal_copy::after {
  content: "";
  position: absolute;
  width: 1px;
  height: calc(100% - 6px);
  bottom: 0;
  left: 2.5px;
  background-color: #008CD6;
}
.metal_copy p {
  font-size: 3rem;
  line-height: 50px;
  color: #555;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .metal_copy p {
    font-size: 1.8rem;
    line-height: unset;
  }
}

.good_point_ttl {
  font-size: 4rem;
  text-align: center;
  margin: 150px auto 50px;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .good_point_ttl {
    font-size: 3rem;
    margin: 120px auto 50px;
  }
}
.good_point_ttl span.good_point_copy {
  font-size: 2.6rem;
}
@media screen and (max-width: 768px) {
  .good_point_ttl span.good_point_copy {
    font-size: 1.6rem;
  }
}
.good_point_txt {
  font-size: 1.8rem;
  width: 100%;
  margin: 0 auto;
}
.good_point_item .flex_item img {
  aspect-ratio: 16/9;
  border-radius: 10px;
}
.good_point_item_ttl {
  font-size: 3rem;
  font-weight: 600;
  margin-top: 80px;
}
@media screen and (max-width: 768px) {
  .good_point_item_ttl {
    font-size: 2.2rem;
  }
}
.good_point_number {
  color: #008CD6;
  font-size: 8rem;
  font-weight: 300;
  display: inline-block;
  margin-right: 15px;
}
@media screen and (max-width: 768px) {
  .good_point_number {
    display: block;
    font-size: 7rem;
  }
}
.good_point .flex_content {
  margin-top: 30px;
}

.blue {
  color: #008CD6;
}

.slide-metal {
  position: relative;
  z-index: 1;
  padding: 60px 0;
}
.slide-metal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: #F2FAFF;
  z-index: -1;
}
.slide-metal .slick-list.draggable {
  width: 100%;
  height: unset;
  margin-right: 30px;
  object-fit: contain;
}
.slide-metal.slick-initialized.slick-slider.slick-dotted {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 80px;
}
@media screen and (max-width: 768px) {
  .slide-metal.slick-initialized.slick-slider.slick-dotted {
    display: block;
  }
}
.slide-metal ul.slick-dots {
  position: unset;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 35%;
}
@media screen and (max-width: 768px) {
  .slide-metal ul.slick-dots {
    width: 100%;
    gap: 5px;
  }
}
.slide-metal .slick-dots li {
  position: relative;
  display: inline-block;
  height: 100% !important;
  width: 100% !important;
  margin: unset !important;
  padding: 0;
  cursor: pointer;
  aspect-ratio: 1/1;
  flex: 0 1 calc((100% - 10px) / 2);
}
@media screen and (max-width: 768px) {
  .slide-metal .slick-dots li {
    flex: 0 1 calc((100% - 20px) / 5);
  }
}
.slide-metal .slick-dots li img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}
.slide-metal .slick-dots li.slick-active {
  z-index: 1;
}
.slide-metal .slick-dots li.slick-active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 140, 214, 0.5);
  pointer-events: none;
  z-index: 2;
}
.slide-metal .slick-slide img {
  display: block;
  object-fit: contain;
  object-position: center top;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .slide-metal .slick-slide img {
    height: 400px;
  }
}
@media screen and (max-width: 576px) {
  .slide-metal .slick-slide img {
    height: 200px;
  }
}
.slide-metal figure.slick-slide {
  margin: unset !important;
}

.metal-machine_copy {
  max-width: 550px;
  width: 100%;
  margin: 0 auto 100px;
  font-weight: 700;
}
.metal-machine_content {
  padding: 80px 0;
}
@media screen and (max-width: 768px) {
  .metal-machine_content {
    padding: 60px 0;
  }
}
.metal-machine_content:nth-child(even) {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: #DADADA;
  padding: 80px 20px;
}
@media screen and (max-width: 768px) {
  .metal-machine_content:nth-child(even) {
    padding: 60px 20px;
  }
}
.metal-machine_content:nth-child(even) .metal-machine_flex {
  max-width: 940px;
  width: 100%;
  margin: 0 auto;
}
.metal-machine_ttl {
  display: flex;
  align-items: center;
  gap: 15px;
  justify-content: center;
  margin-bottom: 50px;
  font-size: 4rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .metal-machine_ttl {
    font-size: 2rem;
    margin-bottom: 20px;
    justify-content: left;
  }
}
.metal-machine_ttl span {
  color: #008CD6;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-size: 5rem;
}
@media screen and (max-width: 768px) {
  .metal-machine_ttl span {
    font-size: 4rem;
  }
}
.metal-machine_txt {
  max-width: 800px;
  width: 100%;
  margin: 0 auto 60px;
}
.metal-machine_flex {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .metal-machine_flex {
    gap: 20px;
    justify-content: unset;
  }
}
.metal-machine_flex_item {
  flex: 0 1 calc((100% - 60px) / 3);
}
@media screen and (max-width: 768px) {
  .metal-machine_flex_item {
    flex: 0 1 calc((100% - 20px) / 2);
  }
}
.metal-machine_flex_item img {
  aspect-ratio: 4/3;
  border-radius: 10px;
}
.metal-machine_flex_item figcaption {
  font-size: 1.6rem;
}
@media screen and (max-width: 768px) {
  .metal-machine_flex_item figcaption {
    font-size: 1.4rem;
  }
}
.metal-machine_table td:nth-child(1) {
  text-align: center;
}

.delivery-box_copy {
  font-size: 3.5rem;
  font-family: "Noto Serif JP", "Yu Mincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS 明朝", "MS Mincho", serif;
  font-weight: 600;
  line-height: 1.5;
}
.delivery-box_copy span {
  color: #008CD6;
}
.delivery-box_flex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .delivery-box_flex {
    display: block;
  }
}
.delivery-box_flex_item {
  flex: 1 calc((100% - 10px) / 2);
  padding: 30px;
  border: #008CD6 solid 1px;
  border-radius: 20px;
}
@media screen and (max-width: 768px) {
  .delivery-box_flex_item {
    margin-bottom: 10px;
  }
}
.delivery-box_flex_item figure {
  width: 70px;
  height: 70px;
  margin: auto;
}
.delivery-box_flex_item figure img {
  height: 100%;
  margin: auto;
  object-fit: contain;
  aspect-ratio: unset;
  border-radius: unset;
}
.delivery-box_flex_item span {
  font-size: 1.7rem;
  text-align: center;
  display: block;
  margin: 20px 0 10px;
  color: #008CD6;
}
@media screen and (max-width: 768px) {
  .delivery-box_flex_item span {
    margin: 0 0 10px;
  }
}
.delivery-box_flex_item p {
  margin-bottom: 0;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .delivery-box_flex_02 {
    display: flex;
    gap: 15px;
    align-items: center;
  }
}
@media screen and (max-width: 768px) {
  .delivery-box_flex_02_item {
    flex: 1 1 0;
  }
}
.delivery-box_flex_02_item span {
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .delivery-box_flex_02_item span {
    text-align: left;
  }
}
.delivery-box_ico {
  flex: 0.2 1 0;
}
.delivery-box_btn {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  padding: 20px 30px;
  font-weight: 500;
  text-align: center;
  color: #fff;
  background: linear-gradient(90deg, #16349F 0%, #008CD6 50%, #16349F 100%);
  background-size: 200% 100%;
  transition: 0.2s;
  font-size: 1.5rem;
  margin-top: 80px;
}
@media screen and (max-width: 768px) {
  .delivery-box_btn {
    margin-top: 60px;
  }
}
.delivery-box_btn:hover {
  background-position: 100% 0;
  color: #EAFF00;
  transition: 0.2s;
}

.locker_flex .flex_item img {
  margin: 0 auto 20px;
  width: 100%;
}
.locker_btn {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  padding: 20px 30px;
  font-weight: 500;
  text-align: center;
  color: #fff;
  background: linear-gradient(90deg, #16349F 0%, #008CD6 50%, #16349F 100%);
  background-size: 200% 100%;
  transition: 0.2s;
  font-size: 1.5rem;
  margin-top: 80px;
}
@media screen and (max-width: 768px) {
  .locker_btn {
    margin-top: 60px;
  }
}
.locker_btn:hover {
  background-position: 100% 0;
  color: #EAFF00;
  transition: 0.2s;
}

p.locker_txt {
  font-size: 1.4rem;
}
p.locker_txt span {
  font-size: 2rem;
  font-weight: 600;
  display: block;
  margin-bottom: 10px;
  color: #008CD6;
}
@media screen and (max-width: 768px) {
  p.locker_txt span {
    font-size: 1.6rem;
    margin-bottom: 5px;
  }
}
@media screen and (max-width: 768px) {
  p.locker_txt {
    margin-bottom: 50px;
  }
}

.company_description {
  padding: 40px;
  background: #F2FAFF;
  border-radius: 10px;
}
@media screen and (max-width: 768px) {
  .company_description {
    padding: 30px 20px;
  }
}
.company_description.main_office {
  margin: 100px auto 20px;
}
.company_description_flex {
  display: flex;
  gap: 30px;
}
@media screen and (max-width: 768px) {
  .company_description_flex {
    display: block;
  }
}
.company_description_ttl {
  font-size: 2rem;
  color: #008CD6;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .company_description_ttl {
    margin-bottom: 15px;
  }
}
.company_description_txt {
  width: calc(100% - 400px);
}
@media screen and (max-width: 768px) {
  .company_description_txt {
    width: 100%;
  }
}
.company_description_img {
  max-width: 400px;
}
@media screen and (max-width: 768px) {
  .company_description_img {
    margin-top: 30px;
    max-width: 100%;
  }
}
.company_description_img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border-radius: 10px;
}

.quality_top {
  z-index: 0;
  padding: 50px 0;
  border-radius: 0px 0px 20px 0px;
  background: #F6FAFF;
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  gap: 50px;
  margin-top: -100px;
  margin-left: -100vw;
  padding-left: 100vw;
  align-items: flex-end;
}
@media screen and (max-width: 1200px) {
  .quality_top {
    margin-top: -60px;
  }
}
@media screen and (max-width: 768px) {
  .quality_top {
    display: block;
  }
}
.quality_link_btn {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  padding: 10px 70px 10px 20px;
  border: #008CD6 solid 1px;
  transition: 0.3s;
  color: #008CD6;
  z-index: 0;
}
.quality_link_btn::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  border-top: 1px solid #008CD6;
  border-right: 1px solid #008CD6;
  transition: 0.3s;
}
.quality_link_btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  transition: 0.2s;
  background: #008CD6;
  opacity: 0;
}
.quality_link_btn:hover {
  color: #fff;
  transition: 0.3s;
}
.quality_link_btn:hover::before {
  right: 15px;
  transition: 0.3s;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}
.quality_link_btn:hover::after {
  width: 100%;
  transition: 0.2s;
  opacity: 1;
  z-index: -1;
}
.quality_link_btn:hover .about_arrow span {
  left: 55%;
  transition: 0.3s;
}
.quality_txt p {
  margin-bottom: unset;
}
@media screen and (max-width: 768px) {
  .quality_txt {
    margin-bottom: 30px;
  }
}
.quality_ttl {
  font-size: 2.7rem;
  color: #008CD6;
  font-weight: 600;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .quality_ttl {
    font-size: 2.2rem;
  }
}
.quality_ttl_02 {
  font-size: 2rem;
  color: #008CD6;
  font-weight: 600;
  margin-bottom: 15px !important;
}
@media screen and (max-width: 768px) {
  .quality_ttl_02 {
    font-size: 1.8rem;
  }
}
.quality_control_flex {
  margin-top: 50px;
}
.quality_control_flex figcaption {
  text-align: center;
  display: block;
  font-size: 1.5rem;
  color: #008CD6;
  font-weight: 600;
}
.quality_control_flex .flex_item img {
  margin-bottom: 10px;
  aspect-ratio: unset;
}
.quality_control_flex .flex_item dt {
  color: #008CD6;
  font-weight: 600;
}
.quality_control_flex_col-03.flex_content_col-03 {
  margin-top: 30px;
}
.quality_control_flex_col-03 .flex_item img {
  margin-bottom: 10px;
  object-fit: cover;
}
.quality_control_flex_col-03 .flex_item figcaption {
  text-align: center;
  display: block;
  font-size: 1.5rem;
  color: #008CD6;
  font-weight: 600;
}

.topics_cate_flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .topics_cate_flex {
    justify-content: unset;
    gap: 10px;
  }
}
.topics_cate_flex .topics_cate {
  margin: 0;
  transition: 0.3s;
  padding: 5px 30px;
}
.topics_cate_flex .topics_cate:hover {
  background-color: #008CD6;
  color: #fff;
  transition: 0.3s;
}
.topics_cate_flex .topics_cate.active {
  background-color: #008CD6;
  color: #fff;
}
.topics_content li {
  padding: 30px 0;
  border-bottom: #D3D3D3 solid 1px;
  transition: 0.3s;
}
.topics_content li:first-child {
  padding: 0 0 30px 0;
}
@media screen and (max-width: 1200px) {
  .topics_content li:first-child {
    margin-top: 60px;
  }
}
.topics_content li:hover {
  opacity: 0.5;
  transition: 0.3s;
}
.topics_content time {
  color: #333;
  font-size: 1.5rem;
  margin-right: 15px;
  font-weight: 400;
}
.topics_content a {
  font-size: 1.6rem;
  font-weight: 400;
  color: #333;
  display: block;
}
@media screen and (max-width: 768px) {
  .topics_content a {
    font-size: 1.5rem;
  }
}

.wp-pagenavi {
  text-align: center;
  margin-top: 100px;
}

.wp-pagenavi .pages {
  display: none !important;
}

.wp-pagenavi a.nextpostslink,
.wp-pagenavi a.previouspostslink {
  display: inline-block;
  text-decoration: none !important;
  border: solid #008CD6 1px !important;
  padding: 0px !important;
  font-size: 1.6rem !important;
  color: #008CD6 !important;
  background-color: #fff !important;
  width: 40px !important;
  height: 40px !important;
  line-height: 38px !important;
}

.wp-pagenavi a.nextpostslink {
  margin: 0 0 0 30 !important;
}

.wp-pagenavi a.previouspostslink {
  margin: 0 30 0 0 !important;
}

.wp-pagenavi span.current {
  font-weight: bold;
  color: #fff !important;
  background-color: #008CD6 !important;
  border: none !important;
}

.wp-pagenavi a,
.wp-pagenavi span {
  display: inline-block;
  text-decoration: none !important;
  border: none !important;
  padding: 0px !important;
  margin: 0 10px !important;
  font-size: 1.6rem !important;
  color: #555 !important;
  background-color: #fff !important;
  width: 40px !important;
  height: 40px !important;
  line-height: 38px !important;
  text-align: center;
}

.page_details time {
  margin-right: 15px;
}
.page_details .topics_cate {
  margin-right: 10px;
}
.page_details .details_data {
  margin-top: 30px;
}

.tel_content {
  padding: 30px 20px;
  border: #008CD6 solid 1px;
  border-radius: 20px;
  margin-bottom: 30px;
}
.tel_content .h3_01 {
  margin: 0 auto 27px;
}

.contact_info a {
  font-weight: 700;
  font-size: 2rem;
  margin-bottom: 5px;
  display: block;
}
@media screen and (max-width: 768px) {
  .contact_info a {
    font-size: 1.6rem;
  }
}
.contact_info span {
  font-weight: 700;
  font-size: 2rem;
}
@media screen and (max-width: 768px) {
  .contact_info span {
    font-size: 1.6rem;
  }
}

body .form input[type=text],
body .form input[type=tel],
body .form input[type=email],
body .form select,
body .form textarea {
  background-color: #EEF6FB;
  border-radius: 10px;
}

.form_flex {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .form_flex {
    display: block;
  }
}
.form_flex dt {
  width: 260px;
  font-weight: 600;
  font-size: 1.6rem;
}
@media screen and (max-width: 768px) {
  .form_flex dt {
    width: 100%;
    margin-bottom: 20px;
  }
}
.form_flex dt span.req {
  color: #E76666;
  font-size: 1.3rem;
  padding-left: 10px;
  font-weight: 300;
}
.form_flex_02 {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .form_flex_02 {
    display: block;
  }
}
.form_flex_02_item {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .form_flex_02_item {
    margin-bottom: 10px;
  }
}
.form_flex dd {
  width: calc(100% - 260px);
}
@media screen and (max-width: 768px) {
  .form_flex dd {
    width: 100%;
  }
}
.form_flex dd.w-half {
  width: calc((100% - 280px) / 2);
}
@media screen and (max-width: 768px) {
  .form_flex dd.w-half {
    width: 100%;
  }
}
.form_flex_03 {
  display: flex;
  gap: 20px;
  align-items: center;
}
.form_arrow {
  position: relative;
}
.form_arrow::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 20px;
  transform: rotate(135deg);
  width: 12px;
  height: 12px;
  border-top: 2px solid #008CD6;
  border-right: 2px solid #008CD6;
  z-index: 1;
}
.form .btn_01 {
  cursor: pointer;
}
.form .btn_01:hover input[type=submit] {
  color: #fff;
  transition: 0.3s;
}

input[type=submit] {
  color: #008CD6;
  border: none;
  background: transparent;
  cursor: pointer;
}

.postal_flex {
  display: flex;
  align-items: center;
}
.postal_ico {
  font-size: 2rem;
  font-weight: 700;
  width: 40px;
}

.postal_flex .wpcf7-form-control-wrap {
  flex: 1;
}

input[name=your-file] {
  display: none;
}

.wpcf7-form-control-wrap[data-name=your-file] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  overflow: hidden;
}

.file_upload p {
  font-size: 1.4rem;
  color: #008CD6;
  margin: 10px 0 0;
}
.file_upload p span {
  color: #E76666;
}
.file_name {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: #666;
}

.agree {
  text-align: center;
}
.agree_link {
  font-size: 1.2rem;
  font-weight: 300;
  position: relative;
}
.agree_link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: url(../img/another_ico_blue.png) center/contain no-repeat;
}
.agree label {
  display: flex;
  align-items: center;
  gap: 15px;
}
.agree span.wpcf7-list-item-label {
  cursor: pointer;
}
.agree span.wpcf7-list-item-label a {
  transition: 0.3s;
  text-decoration: underline;
}
.agree span.wpcf7-list-item-label a:hover {
  opacity: 0.5;
  transition: 0.3s;
}
.agree span.req {
  color: #E76666;
  font-size: 1.3rem;
  padding-left: 10px;
  font-weight: 300;
}

#customFileButton {
  background-color: #fff;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  border: #008CD6 solid 1px;
  border-radius: 10px;
  font-size: 1.4rem;
  font-weight: 500;
  color: #008CD6;
  transition: 0.3s;
  padding: 15px 20px;
}
#customFileButton:hover {
  background-color: #008CD6;
  color: #fff;
  transition: 0.3s;
}

input[type=checkbox] {
  width: 20px;
  height: 20px;
  accent-color: #008CD6;
  border: 2px solid #ccc;
  background-color: #fff;
  cursor: pointer;
}

.thanks_copy {
  font-weight: 600;
  font-size: 2.5rem;
  margin-bottom: 80px;
  color: #008CD6;
}
@media screen and (max-width: 768px) {
  .thanks_copy {
    font-size: 2rem;
    margin-bottom: 60px;
  }
}
.thanks_contact a {
  font-size: 1.8rem;
  font-weight: 500;
}

.not-found_copy {
  font-weight: 600;
  font-size: 2.5rem;
  margin-bottom: 80px;
  color: #008CD6;
}
@media screen and (max-width: 768px) {
  .not-found_copy {
    font-size: 2rem;
    margin-bottom: 60px;
  }
}

.page-link {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 100px;
  flex-wrap: wrap;
}
.page-link_electron {
  justify-content: unset;
}
@media screen and (max-width: 768px) {
  .page-link {
    display: block;
    margin-top: 80px;
  }
}
.page-link a {
  display: block;
  background: #008CD6;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
  padding: 30px 20px;
  max-width: 320px;
  width: 100%;
  border-radius: 10px;
  transition: 0.3s;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .page-link a {
    max-width: 100%;
    margin: 0 auto 20px;
  }
}
.page-link a:hover {
  background: #234BD8;
  transition: 0.3s;
}

.u-w10 {
  width: 10%;
}

.u-w20 {
  width: 20%;
}

.u-w30 {
  width: 30%;
}

.u-w40 {
  width: 40%;
}

.u-w50 {
  width: 50%;
}

.u-w60 {
  width: 60%;
}

.u-w70 {
  width: 70%;
}

.u-w80 {
  width: 80%;
}

.u-w90 {
  width: 90%;
}

.u-w100 {
  width: 100%;
}/*# sourceMappingURL=styles.css.map */