@charset "UTF-8";
@import url("global.css");
#main_outer {
  margin: 0 2.5vw;
}

#concept_main {
  position: relative;
  padding: 30px 30vw;
}
#concept_main .head_box .img1, #concept_main .head_box .img2 {
  position: absolute;
  width: 25vw;
  height: 600px;
}
#concept_main .head_box .img1 figure, #concept_main .head_box .img2 figure {
  height: 100%;
}
#concept_main .head_box .img1 figure img, #concept_main .head_box .img2 figure img {
  -webkit-border-radius: 6px;
  border-radius: 6px;
  overflow: hidden;
}
#concept_main .head_box .img1 {
  top: 0;
  left: 0;
}
#concept_main .head_box .img2 {
  right: 0;
  bottom: 0;
}
#concept_main .head_box .catch p.ja {
  font-weight: 700;
  font-size: clamp(20px, 3.6vw, 46px);
  line-height: 1.4;
  margin-bottom: 20px;
}
#concept_main .head_box .catch p.ja small {
  display: block;
  color: #828282;
  font-size: clamp(14px, 1.5vw, 16px);
}
#concept_main .head_box .catch p.en {
  font-size: clamp(14px, 1.6vw, 18px);
  color: #2F984E;
}
#concept_main .text {
  margin-top: 30px;
}
#concept_main .text > p + p {
  margin-top: 1.5em;
}

#sec_about {
  margin-top: 90px;
  clip-path: inset(1px 1px round 12px);
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#sec_about .textbox {
  width: 626px;
  padding: 70px 60px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
  background-color: #FFF;
  -webkit-border-radius: 12px;
  border-radius: 12px;
}
#sec_about .textbox .sec_title {
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.4;
}
#sec_about .textbox .sec_title span {
  display: block;
}
#sec_about .textbox .sec_title .en {
  font-size: clamp(14px, 1.6vw, 18px);
  color: #2F984E;
}
#sec_about .textbox .sec_title .ja {
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 36px);
}
#sec_about .textbox .sec_title .ja small {
  font-size: 53%;
}
#sec_about .textbox .text {
  text-align: justify;
}
#sec_about .bg {
  content: "";
  position: fixed;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100svh;
}
#sec_about .bg::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #1D1D1D;
  opacity: .14;
}

#sec_advantage {
  margin-top: 120px;
  background-color: #EFEEE7;
  -webkit-border-radius: 12px;
  border-radius: 12px;
  padding: 90px 0;
}
#sec_advantage .wrapper.wide {
  display: flex;
  justify-content: space-between;
}
#sec_advantage .advantage_sticky {
  white-space: nowrap;
}
#sec_advantage .advantage_sticky .sticky_inner {
  position: sticky;
  top: 100px;
}
#sec_advantage .advantage_sticky .sticky_inner .sec_title span {
  display: block;
}
#sec_advantage .advantage_sticky .sticky_inner .sec_title .en {
  font-size: clamp(14px, 1.5vw, 18px);
  color: #2F984E;
  margin-bottom: 20px;
}
#sec_advantage .advantage_sticky .sticky_inner .sec_title .ja_min {
  font-size: clamp(15px, 1.6vw, 20px);
  font-weight: 700;
  line-height: 1.4;
}
#sec_advantage .advantage_sticky .sticky_inner .sec_title .ja {
  font-weight: 700;
  font-size: clamp(23px, 3vw, 44px);
}
#sec_advantage .advantage_main {
  flex-grow: 1;
  padding-left: 5vw;
}
#sec_advantage .advantage_main ol.list li {
  padding: 65px 80px;
  background-color: #FFF;
  -webkit-border-radius: 12px;
  border-radius: 12px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: flex;
  flex-direction: row-reverse;
  position: relative;
}
#sec_advantage .advantage_main ol.list li + li {
  margin-top: 50px;
}
#sec_advantage .advantage_main ol.list li .num {
  position: absolute;
  z-index: 1;
  left: -10px;
  top: -10px;
  width: 66px;
  height: 66px;
  background-color: #2F984E;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}
#sec_advantage .advantage_main ol.list li .num i {
  display: block;
  line-height: 1;
  color: #FFF;
  font-style: normal;
  font-family: "Lexend", "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(16px, 2vw, 25px);
}
#sec_advantage .advantage_main ol.list li .img {
  width: 44.7%;
  flex-shrink: 0;
}
#sec_advantage .advantage_main ol.list li .img figure {
  width: 100%;
  height: 0;
  padding-top: 71%;
  overflow: hidden;
  position: relative;
}
#sec_advantage .advantage_main ol.list li .img figure img {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
#sec_advantage .advantage_main ol.list li .img .caption {
  text-align: center;
  background-color: #F5F5F5;
  padding: 15px 25px;
  line-height: 1.3;
  font-weight: 700;
  font-size: 1.125em;
  -webkit-border-radius: 99px;
  border-radius: 99px;
}
#sec_advantage .advantage_main ol.list li .img .caption i {
  display: inline-block;
  font-style: normal;
  color: #2F984E;
}
#sec_advantage .advantage_main ol.list li dl.text {
  width: 100%;
  padding-right: 3.1vw;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#sec_advantage .advantage_main ol.list li dl.text dt {
  margin-bottom: 20px;
}
#sec_advantage .advantage_main ol.list li dl.text dt small {
  display: flex;
  align-items: center;
  font-size: 1.06em;
  font-weight: 700;
  margin-bottom: 5px;
}
#sec_advantage .advantage_main ol.list li dl.text dt small i {
  display: inline-block;
  font-style: normal;
  color: #2F984E;
  margin-left: 3px;
}
#sec_advantage .advantage_main ol.list li dl.text dt small i::before, #sec_advantage .advantage_main ol.list li dl.text dt small i::after {
  display: inline-block;
  margin-inline: 3px;
}
#sec_advantage .advantage_main ol.list li dl.text dt small i::before {
  content: "[";
}
#sec_advantage .advantage_main ol.list li dl.text dt small i::after {
  content: "]";
}
#sec_advantage .advantage_main ol.list li dl.text dt span.h {
  display: block;
  font-weight: 700;
  font-size: clamp(16px, 2vw, 30px);
  line-height: 1.6;
}
#sec_advantage .advantage_main ol.list li dl.text dd {
  text-align: justify;
}
#sec_advantage .advantage_main ol.list li dl.text dd .morebtn {
  margin-top: 20px;
}
#sec_advantage .advantage_main ol.list li dl.text dd .morebtn .ja {
  padding-right: 40px;
}

.half_link {
  margin-top: 120px;
}
.half_link ul {
  display: flex;
  gap: 5px;
}
.half_link ul li {
  flex-grow: 1;
}
.half_link ul li a {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 55%;
  position: relative;
  z-index: 1;
  color: #FFF;
}
@media (any-hover: hover) {
  .half_link ul li a:hover::before {
    opacity: .3;
  }
  .half_link ul li a:hover .bg img {
    transform: scale(1.03);
  }
}
.half_link ul li a .inner {
  position: absolute;
  left: 0;
  top: 0;
  padding: 35px 60px 50px 75px;
  height: 100%;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.half_link ul li a .inner .text {
  width: 100%;
}
.half_link ul li a .inner .text p.h {
  font-weight: 700;
  font-size: clamp(18px, 3vw, 52px);
}
.half_link ul li a .inner .text p.comment {
  font-size: 1.125em;
}
.half_link ul li a .inner .arrow {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFF;
  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;
}
.half_link ul li a .inner .arrow::after {
  content: "\f061";
  display: block;
  line-height: 1;
  color: #1D1D1D;
  font-family: 'Font Awesome 6 free','Font Awesome 6 Brands';
  font-weight: 900;
}
.half_link ul li a::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #1D1D1D;
  opacity: .56;
  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;
}
.half_link ul li a .bg {
  content: "";
  position: absolute;
  z-index: -2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.half_link ul li a .bg img {
  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;
}

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

 Responsive-Breakpoint-1 ( 1600px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1600px) {
  #sec_advantage .advantage_main {
    padding-left: 4vw;
  }
  #sec_advantage .advantage_main ol.list li {
    padding: 60px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  #sec_about {
    margin-top: 80px;
    height: 560px;
  }
  #sec_about .textbox {
    width: 600px;
    padding: 60px;
  }
  #sec_about .textbox .sec_title {
    margin-bottom: 25px;
  }

  #sec_advantage {
    margin-top: 90px;
    padding: 80px 0;
  }
  #sec_advantage .advantage_main ol.list li {
    display: block;
  }
  #sec_advantage .advantage_main ol.list li .img {
    width: 80%;
    margin: 0 auto;
  }
  #sec_advantage .advantage_main ol.list li .img figure {
    height: auto;
    padding-top: 0;
    overflow: hidden;
    position: static;
  }
  #sec_advantage .advantage_main ol.list li .img figure img {
    position: static;
  }
  #sec_advantage .advantage_main ol.list li .img .caption {
    padding: 15px 20px;
  }
  #sec_advantage .advantage_main ol.list li dl.text {
    padding: 25px 0 0;
  }
  #sec_advantage .advantage_main ol.list li dl.text dt span.h br {
    display: none;
  }

  .half_link {
    margin-top: 90px;
  }
  .half_link ul {
    gap: 3px;
  }
  .half_link ul li a .inner {
    padding: 30px 4vw;
  }
  .half_link ul li a .inner .text p.comment {
    font-size: 1em;
  }
  .half_link ul li a .inner .arrow {
    width: 40px;
    height: 40px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  #concept_main {
    padding: 0;
  }
  #concept_main .head_box {
    display: flex;
    align-items: center;
  }
  #concept_main .head_box .img1,
  #concept_main .head_box .img2 {
    position: static;
    height: auto;
  }
  #concept_main .head_box .catch {
    flex-grow: 1;
    text-align: center;
  }
  #concept_main .head_box .catch p.ja {
    margin-bottom: 15px;
  }
  #concept_main .head_box .catch p.ja small {
    margin-bottom: 5px;
  }
  #concept_main .head_box .catch p.ja span {
    display: block;
    margin-left: 1em;
    text-indent: -1em;
  }
  #concept_main .text {
    text-align: center;
  }

  #sec_about {
    margin-top: 65px;
    height: 540px;
  }
  #sec_about .textbox {
    width: 560px;
    padding: 50px 40px;
    border-radius: 8px;
  }
  #sec_about .textbox .sec_title {
    margin-bottom: 25px;
  }

  #sec_advantage {
    margin-top: 65px;
    border-radius: 8px;
    padding: 60px 0;
  }
  #sec_advantage .advantage_sticky .sticky_inner .sec_title .en {
    margin-bottom: 10px;
  }
  #sec_advantage .advantage_main ol.list li {
    padding: 50px 5vw;
    -webkit-border-radius: 8px;
    border-radius: 8px;
  }
  #sec_advantage .advantage_main ol.list li + li {
    margin-top: 40px;
  }
  #sec_advantage .advantage_main ol.list li .num {
    width: 50px;
    height: 50px;
  }
  #sec_advantage .advantage_main ol.list li .img {
    width: 90%;
  }
  #sec_advantage .advantage_main ol.list li dl.text dt {
    margin-bottom: 15px;
  }
  #sec_advantage .advantage_main ol.list li dl.text dt small {
    font-size: 1em;
  }
  #sec_advantage .advantage_main ol.list li dl.text dt small i {
    margin-left: 2px;
  }
  #sec_advantage .advantage_main ol.list li dl.text dt small i::before, #sec_advantage .advantage_main ol.list li dl.text dt small i::after {
    margin-inline: 2px;
  }

  .half_link {
    margin-top: 65px;
  }
  .half_link ul {
    gap: 2px;
  }
  .half_link ul li a .inner {
    padding: 20px 3vw;
  }
  .half_link ul li a .inner .text p.comment {
    font-size: .9em;
    letter-spacing: 0;
  }
  .half_link ul li a .inner .arrow {
    width: 36px;
    height: 36px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-4 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  #main_outer {
    margin: 0;
  }

  #concept_main .head_box .img1 figure img {
    border-radius: 0 3px 3px 0;
  }
  #concept_main .head_box .img2 figure img {
    border-radius: 3px 0 0 3px;
  }
  #concept_main .head_box .catch p.ja {
    font-size: 5vw;
    margin-bottom: 10px;
  }
  #concept_main .head_box .catch p.en {
    font-size: 12px;
  }
  #concept_main .text {
    text-align: left;
    padding: 0 5vw;
  }

  #sec_about {
    margin-top: 45px;
    clip-path: inset(0 0 round 0);
    height: auto;
    display: block;
    padding: 50px 5vw;
  }
  #sec_about .textbox {
    width: auto;
    padding: 35px 30px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
  }
  #sec_about .textbox .sec_title {
    margin-bottom: 15px;
  }

  #sec_advantage {
    margin-top: 50px;
    -webkit-border-radius: 0;
    border-radius: 0;
    padding: 40px 0;
  }
  #sec_advantage .wrapper.wide {
    display: block;
  }
  #sec_advantage .advantage_sticky {
    white-space: normal;
    margin-bottom: 20px;
  }
  #sec_advantage .advantage_sticky .sticky_inner {
    position: static;
  }
  #sec_advantage .advantage_sticky .sticky_inner .sec_title {
    text-align: center;
  }
  #sec_advantage .advantage_sticky .sticky_inner .sec_title span {
    display: block;
  }
  #sec_advantage .advantage_sticky .sticky_inner .sec_title .ja_min {
    font-size: 13px;
  }
  #sec_advantage .advantage_sticky .sticky_inner .sec_title .ja_min br {
    display: none;
  }
  #sec_advantage .advantage_sticky .sticky_inner .sec_title .ja {
    font-size: 26px;
  }
  #sec_advantage .advantage_main {
    padding-left: 0;
  }
  #sec_advantage .advantage_main ol.list li {
    padding: 35px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
  }
  #sec_advantage .advantage_main ol.list li .num {
    width: 46px;
    height: 46px;
  }
  #sec_advantage .advantage_main ol.list li .img {
    width: 94%;
  }
  #sec_advantage .advantage_main ol.list li .img .caption {
    font-size: 1em;
  }
  #sec_advantage .advantage_main ol.list li dl.text dt {
    margin-bottom: 10px;
  }
  #sec_advantage .advantage_main ol.list li dl.text dt small {
    margin-bottom: 3px;
  }
  #sec_advantage .advantage_main ol.list li dl.text dd .morebtn {
    margin-top: 15px;
  }
  #sec_advantage .advantage_main ol.list li dl.text dd .morebtn .ja {
    padding-right: 35px;
    margin: 0 auto;
  }

  .half_link {
    margin-top: 60px;
  }
  .half_link ul {
    display: block;
  }
  .half_link ul li {
    margin-top: 1px;
  }
  .half_link ul li a {
    padding-top: 54%;
  }
  .half_link ul li a .inner {
    padding: 20px 5vw;
  }
  .half_link ul li a .inner .arrow {
    width: 36px;
    height: 36px;
  }
  .half_link ul li a .inner .text p.h {
    font-size: 24px;
  }
}