@charset "UTF-8";
@import url("global.css");
.wrapper.wide:has(.sec_intro) {
  position: relative;
}

.sec_intro {
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 120px;
  container-type: inline-size;
}
.sec_intro .text_area {
  flex: 1;
  padding-left: 70px;
}
.sec_intro .text_area .catch {
  margin-bottom: 40px;
  font-size: 30px;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 600;
}
.sec_intro .text_area p:not([class]) {
  line-height: 2.2;
}
.sec_intro .img_intro01 {
  width: 47%;
  border-radius: 8px;
  overflow: hidden;
}
.sec_intro .img_intro02 {
  width: 20%;
  position: absolute;
  right: 0;
  bottom: -180px;
  border-radius: 8px;
  overflow: hidden;
}
@container (width <= 1400px) {
  .sec_intro .text_area .catch {
    margin-bottom: 40px;
    font-size: 26px;
  }
  .sec_intro .text_area p:not([class]) br {
    display: none;
  }
  .sec_intro .img_intro02 {
    width: 18%;
  }
}
.sec_kodawari {
  background: #F5F3F0;
  padding-block: 120px;
}
.sec_kodawari .list_kodawari li {
  margin-bottom: 90px;
}
.sec_kodawari .list_kodawari li:last-of-type {
  margin-bottom: 0;
}
.sec_kodawari .list_kodawari li a {
  display: flex;
  justify-content: space-between;
}
@media (any-hover: hover) {
  .sec_kodawari .list_kodawari li a:hover .more span {
    transform: translateX(3px);
  }
}
.sec_kodawari .list_kodawari li .text_area {
  width: 50%;
  border-top: 1px solid #E5DED3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.sec_kodawari .list_kodawari li .text_area .sec_title {
  margin-bottom: 30px;
  font-size: clamp(22px, 3.3vw, 30px);
  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: 600;
}
.sec_kodawari .list_kodawari li .text_area .sec_title span {
  display: block;
  color: #A49375;
  font-size: clamp(13px, 2vw, 18px);
  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: 600;
}
.sec_kodawari .list_kodawari li .text_area .more {
  margin-top: 20px;
}
.sec_kodawari .list_kodawari li .text_area .more span {
  margin-left: auto;
  display: block;
  background-color: #fff;
  padding: 15px 50px 15px 20px;
  max-width: 160px;
  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_kodawari .list_kodawari li .text_area .more span::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_kodawari .list_kodawari li figure {
  width: 45%;
  border-radius: 8px;
  overflow: hidden;
}

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

 Responsive-Breakpoint-1 ( 1600px )
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  .sec_intro {
    display: block;
    margin-bottom: 120px;
  }
  .sec_intro .text_area {
    padding-left: 0;
    margin-bottom: 40px;
  }
  .sec_intro .img_intro01 {
    width: 80%;
    aspect-ratio: 16 / 9;
    margin-left: -20px;
  }
  .sec_intro .img_intro02 {
    width: 30%;
    bottom: -150px;
    right: 20px;
  }

  .sec_kodawari {
    padding-block: 100px;
  }
  .sec_kodawari .list_kodawari li {
    margin-bottom: 70px;
  }
  .sec_kodawari .list_kodawari li .text_area {
    padding-top: 30px;
  }
  .sec_kodawari .list_kodawari li .text_area .sec_title {
    margin-bottom: 20px;
  }
  .sec_kodawari .list_kodawari li .text_area .more {
    margin-top: 10px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-4 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  .sec_intro {
    margin-bottom: 50px;
  }
  .sec_intro .text_area {
    margin-bottom: 30px;
  }
  .sec_intro .text_area .catch {
    margin-bottom: 20px;
    letter-spacing: 0;
    font-size: 18px;
  }
  .sec_intro .text_area p:not([class]) {
    line-height: 1.8;
  }
  .sec_intro .img_intro01 {
    margin-left: -10px;
    border-radius: 6px;
  }
  .sec_intro .img_intro02 {
    right: 10px;
    bottom: -70px;
    border-radius: 6px;
  }

  .sec_kodawari {
    padding-block: 70px;
  }
  .sec_kodawari .list_kodawari li {
    margin-bottom: 50px;
  }
  .sec_kodawari .list_kodawari li a {
    display: block;
  }
  .sec_kodawari .list_kodawari li .text_area {
    width: 100%;
    display: block;
  }
  .sec_kodawari .list_kodawari li .text_area .sec_title {
    margin-bottom: 10px;
  }
  .sec_kodawari .list_kodawari li .text_area .more {
    margin-block: 10px 20px;
  }
  .sec_kodawari .list_kodawari li figure {
    width: 100%;
    border-radius: 6px;
  }
}