@charset "UTF-8";
@import url("global.css");
.sectitle {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}
.sectitle span {
  display: block;
}
.sectitle .en {
  font-size: clamp(24px, 5vw, 35px);
  font-family: "Outfit", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-weight: 700;
  margin-right: 30px;
}
.sectitle .ja {
  padding-top: 8px;
  opacity: .5;
  font-weight: 700;
  font-size: 112.5%;
}

.sec_intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin-bottom: 90px;
}
.sec_intro .text_area {
  flex: 1;
  padding-right: 20px;
}
.sec_intro .text_area .catch {
  margin-bottom: 60px;
  font-size: clamp(20px, 3.2vw, 35px);
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 600;
}
.sec_intro .text_area .more {
  margin-top: 20px;
}
.sec_intro .text_area .more a {
  display: block;
  background-color: #F5F3F0;
  padding: 15px 50px 15px 20px;
  max-width: 320px;
  box-sizing: border-box;
  border-radius: 99px;
  font-size: .825em;
  line-height: 1;
  font-weight: 500;
  position: relative;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.sec_intro .text_area .more a::after {
  content: "\f061";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 1px;
  line-height: 1;
  font-family: 'Font Awesome 6 free','Font Awesome 6 Brands';
  font-weight: 900;
  font-size: 1em;
}
.sec_intro .img_area {
  width: 38%;
  border-radius: 8px;
  overflow: hidden;
}

.sec_concept {
  max-width: 1800px;
  width: 93vw;
  margin: 0 auto 100px;
  position: relative;
}
.sec_concept .text_area {
  position: relative;
  z-index: 2;
  color: #fff;
  width: 50%;
  padding: 120px 120px 120px 0;
  box-sizing: border-box;
  margin-left: auto;
}
.sec_concept .text_area p:not([class]) {
  line-height: 2.0;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.sec_concept .text_area p:not([class]) + p:not([class]) {
  margin-top: 1em;
}
.sec_concept .bg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
}
.sec_concept .bg::after {
  content: "";
  width: 100%;
  height: 100%;
  background-image: -webkit-linear-gradient(right, #303030, transparent 70%);
  background-image: linear-gradient(to left, #303030, transparent 70%);
  position: absolute;
  left: 0;
  top: 0;
}
.sec_concept .bg figure img {
  height: 100%;
}
.sec_concept .bg figure img.tab {
  display: none;
}

.sec_area {
  background: #F8F8F8;
  position: relative;
}
.sec_area figure {
  width: 40%;
  margin-inline: auto 8vw;
}
.sec_area .wrapper {
  width: 1200px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding-top: 80px;
  box-sizing: border-box;
}
.sec_area .wrapper .subcatch {
  margin-bottom: 60px;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: clamp(16px, 2.3vw, 20px);
}
.sec_area .wrapper dl {
  margin-bottom: 40px;
}
.sec_area .wrapper dl dt {
  width: 120px;
  background: #fff;
  border: 1px solid #E3E3E3;
  text-align: center;
  padding-block: 3px;
  margin-bottom: 5px;
}

.sec_catalog {
  padding-block: 80px;
}
.sec_catalog .subcatch {
  margin-bottom: 30px;
  text-align: center;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: clamp(19px, 3.3vw, 30px);
}
.sec_catalog .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sec_catalog .inner figure {
  width: 320px;
}
.sec_catalog .inner .text_area {
  flex: 1;
  padding-left: 50px;
}
.sec_catalog .inner .text_area > .catalog_name {
  margin-bottom: 20px;
  font-size: clamp(17px, 2.3vw, 20px);
  font-weight: 600;
}
.sec_catalog .inner .text_area .attention {
  margin-top: 10px;
  font-size: 85%;
}
.sec_catalog .sub_catalog {
  background: #F5F3F0;
  padding: 40px;
  margin-top: 40px;
}
.sec_catalog .sub_catalog .subcatch {
  margin-bottom: 30px;
  text-align: center;
  font-family: "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-weight: 500;
  font-size: clamp(17px, 2.6vw, 22px);
}
.sec_catalog .sub_catalog ul {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 -20px;
}
.sec_catalog .sub_catalog ul li {
  width: calc(100% / 4);
  padding: 0 20px;
  box-sizing: border-box;
}
.sec_catalog .sub_catalog ul li figure {
  margin: 0 auto 10px;
}
.sec_catalog .sub_catalog ul li .catalog_name {
  text-align: center;
  margin-bottom: 10px;
  font-weight: 600;
}
.sec_catalog .sub_catalog ul li p:not([class]) {
  line-height: 1.45;
  font-size: 90%;
}

#formarea table.inputform .togglebox .toggle_title {
  margin-bottom: 20px;
}
#formarea table.inputform .togglebox .toggle_main ul li {
  margin-bottom: 20px;
}
#formarea table.inputform .togglebox .toggle_main ul li:last-of-type {
  margin-bottom: 0;
}
#formarea table.inputform .togglebox .toggle_main ul li .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #E3E3E3;
  padding: 10px 20px 10px 10px;
}
#formarea table.inputform .togglebox .toggle_main ul li .inner figure {
  width: 120px;
}
#formarea table.inputform .togglebox .toggle_main ul li .inner .text {
  flex: 1;
  padding-left: 30px;
}
#formarea table.inputform .togglebox .toggle_main ul li .inner .text .catalog_name {
  font-weight: 600;
}
#formarea table.inputform .togglebox .toggle_main ul li .inner .text p:not([class]) {
  line-height: 1.45;
  font-size: 90%;
}
#formarea table.inputform .togglebox .toggle_main ul li label, #formarea table.inputform .togglebox .toggle_main ul li label.mfp_not_checked {
  padding: 6px 12px;
}
#formarea table.inputform .togglebox .toggle_main ul li label::before, #formarea table.inputform .togglebox .toggle_main ul li label.mfp_not_checked::before {
  position: absolute;
  left: 0;
  top: 10px;
}
#formarea table.inputform .togglebox .toggle_main ul li label::after, #formarea table.inputform .togglebox .toggle_main ul li label.mfp_not_checked::after {
  position: absolute;
  left: 5px;
  top: 10px;
}
#formarea table.inputform .togglebox .toggle_main ul li label.mfp_checked {
  text-decoration: none;
}

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 ( 1600px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1600px) {
  .sec_concept .text_area {
    padding: 90px 50px 90px 0;
  }

  .sec_area figure {
    width: 45%;
    margin-inline: auto 6vw;
  }
  .sec_area .wrapper {
    padding-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  .sec_intro .text_area {
    padding-right: 40px;
  }

  .sec_concept .text_area {
    padding: 50px 0;
  }
  .sec_concept .text_area br {
    display: none;
  }

  .sec_area figure {
    width: 55%;
    margin-inline: auto 2vw;
  }
  .sec_area .wrapper {
    width: 100%;
  }
  .sec_area .wrapper .subcatch {
    margin-bottom: 40px;
  }
  .sec_area .wrapper dl {
    margin-bottom: 30px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  .sectitle {
    margin-bottom: 30px;
  }

  .sec_intro {
    margin-bottom: 70px;
  }
  .sec_intro .text_area .catch {
    margin-bottom: 30px;
  }
  .sec_intro .text_area p:not([class]) br {
    display: none;
  }

  .sec_concept {
    margin: 0 auto 70px;
  }
  .sec_concept .text_area {
    width: 60%;
  }
  .sec_concept .bg figure img.tab {
    display: block;
  }
  .sec_concept .bg figure img.pc {
    display: none;
  }

  .sec_area {
    background: #fff;
  }
  .sec_area figure {
    background: #F8F8F8;
    width: 100%;
    margin-inline: auto;
    text-align: center;
  }
  .sec_area figure img {
    width: 60%;
  }
  .sec_area .wrapper {
    height: auto;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }
  .sec_area .wrapper .subcatch {
    margin-bottom: 30px;
    font-size: clamp(16px, 2.3vw, 20px);
  }

  .sec_catalog .sub_catalog ul {
    flex-wrap: wrap;
  }
  .sec_catalog .sub_catalog ul li {
    width: calc(100% / 2);
    margin-bottom: 30px;
  }

  #formarea table.inputform .togglebox .toggle_main ul li .inner {
    padding: 10px;
  }
  #formarea table.inputform .togglebox .toggle_main ul li .inner .text {
    padding-left: 15px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-4 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  .sectitle {
    display: block;
    margin-bottom: 30px;
    line-height: 1;
    text-align: center;
  }
  .sectitle span {
    display: block;
  }
  .sectitle .en {
    margin-right: 0;
  }
  .sectitle .ja {
    padding-top: 6px;
  }

  .sec_intro {
    display: block;
    margin-bottom: 50px;
  }
  .sec_intro .text_area {
    padding-right: 0;
    margin-bottom: 20px;
  }
  .sec_intro .text_area .more {
    margin-top: 10px;
  }
  .sec_intro .text_area .more a {
    max-width: 90%;
  }
  .sec_intro .img_area {
    width: calc(100% + 10vw);
    margin: 0 -5vw 20px;
    aspect-ratio: 16 / 9;
    border-radius: 0;
  }

  .sec_concept {
    margin: 0 auto 60px;
    display: flex;
    flex-direction: column-reverse;
  }
  .sec_concept .text_area {
    width: 100%;
    padding: 0;
    color: #303030;
  }
  .sec_concept .text_area .catch {
    margin-bottom: 20px;
  }
  .sec_concept .text_area p:not([class]) {
    line-height: 1.8;
  }
  .sec_concept .bg {
    height: 180px;
    overflow: hidden;
    position: relative;
    left: auto;
    top: auto;
    margin-bottom: 20px;
  }
  .sec_concept .bg::after {
    background-image: none;
  }
  .sec_concept .bg figure img {
    height: 100%;
  }

  .sec_area figure img {
    width: 70%;
  }
  .sec_area .wrapper dl dt {
    width: 100px;
  }

  .sec_catalog {
    padding-block: 40px;
  }
  .sec_catalog .subcatch {
    margin-bottom: 20px;
  }
  .sec_catalog .inner {
    display: block;
  }
  .sec_catalog .inner figure {
    width: 90%;
    margin: 0 auto 20px;
  }
  .sec_catalog .inner .text_area {
    padding-left: 0;
  }
  .sec_catalog .inner .text_area > .catalog_name {
    margin-bottom: 10px;
  }
  .sec_catalog .sub_catalog {
    padding: 20px;
    margin-top: 30px;
  }
  .sec_catalog .sub_catalog .subcatch {
    margin-bottom: 20px;
  }
  .sec_catalog .sub_catalog ul {
    margin: 0 -10px;
  }
  .sec_catalog .sub_catalog ul li {
    padding: 0 10px;
  }
  .sec_catalog .sub_catalog ul li figure {
    width: 90%;
  }

  #formarea table.inputform .togglebox .toggle_main ul li .inner {
    display: block;
  }
  #formarea table.inputform .togglebox .toggle_main ul li .inner figure {
    width: 100px;
    margin: 0 auto 10px;
  }
  #formarea table.inputform .togglebox .toggle_main ul li .inner .text {
    padding-left: 0;
  }
}