@charset "UTF-8";

.feature {
  --lpSetSize: (100vw / 1400) * 0.64;
}
html {
  scroll-behavior:smooth;
}
.l-container {
  width:100%;
}
.feature {
  width:100%;
  font-family: hiragino-kaku-gothic-pron, sans-serif;
  font-weight: 300;
  font-style: normal;
  color: #67789b;
  background: #f4f1ed;
}
.feature * {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
  list-style: none;
}
.feature h1,
.feature h2,
.feature h3,
.feature h4,
.feature strong {
  font-weight: normal;
}
.feature img {
  width:100%;
  height:auto;
  vertical-align:top;
  display:block;
}
.feature a { 
  display: block;
  color: inherit; 
  text-decoration: none;  
}

/*****************************************************
.feature (PC)
*****************************************************/

/* 共通
----------------------------- */
html { scroll-padding-top: 80px;}
.feature a { transition: opacity 0.3s;}
.feature a:hover { cursor: pointer; opacity: .7;}
.feature .sec__img { background: #f4f1ed;}
.l-footer { padding-top: 0 !important;}
.pc-footer { margin-top: 0 !important;}

/* .feature（大枠）
----------------------------- */
.feature {
  display: flex;
}

/* .f_left
----------------------------- */
.feature .f_left {
  width: 50%;
}
.feature .f_left .f_left__box {
  position: relative;
  height: 100%;
}
.feature .f_left .f_left__box .f_left__title {
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
}
.feature .f_left .f_left__box .f_left__title figure img {
  width: 100%;
  height: calc(100vh - 80px);
  object-fit: cover;
  object-position: center center;  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index: 0;
}
.feature .f_left .f_left__box .f_left__title p {
  width: calc(320 * (100vw / 1400));
  position: absolute;
  top: 50%;
  left: 0%;
  transform:  translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  z-index: 1;
  margin: 0 0 0 calc(20 * (100vw / 1400));
}

/* .f_main
----------------------------- */
.feature .f_main {
  width: 50%;
}
.feature .f_main .inner {
  width: calc(480 * (100vw / 1400));
  margin: 0 auto;
}

/* .hero
----------------------------- */
.feature .hero h1 {
  padding-top: calc(77 * (100vw / 1400));
}


/*****************************************************
.feature (SP)
*****************************************************/

/* .hero
----------------------------- */
.feature .hero h1 {
  padding-top: calc(120 * var(--lpSetSize));
}


/*****************************************************
.feature (PC・SP共通)
*****************************************************/

/* .f_main
----------------------------- */
.feature .f_main .inner {
  overflow: hidden;
}

/* .hero
----------------------------- */
.feature .hero h1 {
  width: calc(515.7282 * var(--lpSetSize));
  margin: 0 auto;
}

/* .wrap_lead
----------------------------- */
.feature .wrap_lead {
  position: relative;
  padding: calc(82 * var(--lpSetSize)) 0 0;
}
.feature .wrap_lead p {
  text-align: center;
  font-size: calc(26 * var(--lpSetSize));
  letter-spacing: 0.05em;
  line-height: 2.25;
}
.feature .wrap_lead dl {
  padding: calc(82 * var(--lpSetSize)) 0 calc(80 * var(--lpSetSize));
  text-align: center;
  position: relative;
  z-index: 1;
}
.feature .wrap_lead dt {
  font-family: "hiragino-kaku-gothic-pron", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: calc(30 * var(--lpSetSize));
  letter-spacing: 0.100em;
  margin-bottom:calc(10 * var(--lpSetSize));
}
.feature .wrap_lead dd {
  font-family: "hiragino-kaku-gothic-pron", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: calc(36 * var(--lpSetSize));
  letter-spacing: 0.100em;
  margin-bottom:calc(50 * var(--lpSetSize));
}
.feature .wrap_lead dd strong {
  font-family: "mundial", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(60 * var(--lpSetSize));
  letter-spacing: 0.050em;
  padding-right:calc(24 * var(--lpSetSize));
}
.feature .wrap_lead::after {
  display: block;
  content: '';
  width: calc(900 * var(--lpSetSize));
  height: calc(900 * var(--lpSetSize));
  border-radius: 50%;
  background: #ffffff;
  position: absolute;
  top: calc(682 * var(--lpSetSize));
  left: calc(246 * var(--lpSetSize));
  z-index: 0;
}

/* .sec
----------------------------- */

/* .sec__credit */
.feature .sec .sec__credit .credit {
  display:flex;
  flex-direction: column;
  gap: 0 calc(20 * var(--lpSetSize));
}
.feature .sec .img03 .sec__credit .credit {
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.feature .sec .sec__itemimg01 .sec__credit .credit {
  display:flex;
  align-items: center;
}
.feature .sec .img08 .sec__credit .credit {
  margin-left:calc(40 * var(--lpSetSize));
}
.feature .sec .sec__itemimg02 .sec__credit .credit {
  display:flex;
  align-items: center;
}
.feature .sec .sec__itemimg03 .sec__credit .credit {
  display:flex;
  align-items: center;
  width: calc(300 * var(--lpSetSize));
}
.feature .sec .img10 .sec__credit .credit {
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.feature .sec .img12 .sec__credit .credit {
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.feature .sec .sec__itemimg04 .sec__credit .credit {
  display:flex;
  align-items: center;
}
.feature .sec .sec__credit .credit li {
  font-family: "mundial", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(22 * var(--lpSetSize));
  line-height: 2.0; 
  letter-spacing: 0.050em;
}
.feature .sec .img03 .sec__credit .credit li,
.feature .sec .img10 .sec__credit .credit li,
.feature .sec .img12 .sec__credit .credit li {
  width:100%;
}
.feature .sec .img03 .sec__credit .credit li:nth-of-type(3),
.feature .sec .img03 .sec__credit .credit li:nth-of-type(4),
.feature .sec .img10 .sec__credit .credit li:nth-of-type(3),
.feature .sec .img10 .sec__credit .credit li:nth-of-type(4),
.feature .sec .img12 .sec__credit .credit li:nth-of-type(3),
.feature .sec .img12 .sec__credit .credit li:nth-of-type(4){
  width:fit-content;
}
.feature .sec .sec__credit .credit li,
.feature .sec .sec__credit .credit a {
  display: flex;
  gap: calc(6 * var(--lpSetSize));
}

/* .img01 */
.feature .sec .img01 {
  width: calc(680 * var(--lpSetSize));
  margin: 0 auto calc(190 * var(--lpSetSize));
  z-index: 1;
  position: relative;
}
.feature .sec .img01 .sec__img {
  width: calc(680 * var(--lpSetSize));
}
.feature .sec .img01 .sec__credit {
  padding: calc(28 * var(--lpSetSize)) 0 0 0;
}

/* .img02 */
.feature .sec .img02 {
  width: 100%;
  margin: 0 0 calc(100 * var(--lpSetSize)) 0;
}

/* .img03 */
.feature .sec .img03 {
  width: calc(650 * var(--lpSetSize));
  margin: 0 auto calc(134 * var(--lpSetSize));
  z-index: 1;
  position: relative;
}
.feature .sec .img03 .sec__img {
  margin-bottom: calc(28 * var(--lpSetSize));
}
.feature .sec .img03 .dot {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(650 * var(--lpSetSize));
  pointer-events: none;
}
.feature .sec .img03::after {
  display: block;
  content: '';
  width: calc(900 * var(--lpSetSize));
  height: calc(900 * var(--lpSetSize));
  border-radius: 50%;
  background: #ffffff;
  position: absolute;
  top: calc(633 * var(--lpSetSize));
  left: calc(-330 * var(--lpSetSize));
  z-index: -1;
}

/* .sec__itemimg01 */
.feature .sec .sec__itemimg01 {
  width: calc(650 * var(--lpSetSize));
  margin: 0 auto calc(113 * var(--lpSetSize));
  z-index: 1;
  position: relative;
}
.feature .sec .sec__itemimg01 .flex_wrap {
  display: flex;
  gap:calc(50 * var(--lpSetSize));
  margin-bottom: calc(48 * var(--lpSetSize));
}
.feature .sec .sec__itemimg01 .itemimg {
  width: calc(300 * var(--lpSetSize));
}

/* .sec__about */
.sec__about {
  margin-bottom: calc(168 * var(--lpSetSize));
}
.sec__about dl {
  width: calc(670 * var(--lpSetSize));
}
.sec__about dt {
  font-family: "mundial", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(40 * var(--lpSetSize));
  line-height: 1.65;
  letter-spacing: 0.100em;
  padding: 0 0 calc(30 * var(--lpSetSize)) calc(94 * var(--lpSetSize));
  margin: 0 calc(16 * var(--lpSetSize)) calc(24 * var(--lpSetSize)) 0;
  border-bottom: calc(2 * var(--lpSetSize)) solid #67789b;
}
.sec__about dd {
  font-size: calc(26 * var(--lpSetSize));
  line-height: 2.25;
  letter-spacing: 0.08em;
  padding-left: calc(94 * var(--lpSetSize));
}
 
/* .img04 */
.feature .sec .img04 {
  width: calc(660 * var(--lpSetSize));
  margin: 0 0 calc(140 * var(--lpSetSize)) calc(90 * var(--lpSetSize));
  z-index: 1; 
  position: relative;
}
.feature .sec .img04::after {
  display: block;
  content: '';
  width: calc(900 * var(--lpSetSize));
  height: calc(900 * var(--lpSetSize));
  border-radius: 50%;
  background: #ffffff;
  position: absolute;
  top: calc(710 * var(--lpSetSize));
  left: calc(150 * var(--lpSetSize));
  z-index: -1;
}

/* .img05 */
.feature .sec .img05 {
  width: calc(600 * var(--lpSetSize));
  margin: 0 0 calc(30 * var(--lpSetSize));
  z-index: 1; 
  position: relative;
}

/* .img06 */
.feature .sec .img06 {
  width: calc(650 * var(--lpSetSize));
  margin: 0 auto calc(190 * var(--lpSetSize));
  z-index: 1;
  position: relative;
}
.feature .sec .img06::after {
  display: block;
  content: '';
  width: calc(900 * var(--lpSetSize));
  height: calc(900 * var(--lpSetSize));
  border-radius: 50%;
  background: #ffffff;
  position: absolute;
  top: calc(840 * var(--lpSetSize));
  left: calc(-350 * var(--lpSetSize));
  z-index: -1;
}
.feature .sec .img06 .sec__img {
  margin-bottom: calc(26 * var(--lpSetSize));
}

/* .img07 */
.feature .sec .img07 {
  width: calc(700 * var(--lpSetSize));
  margin: 0 0 calc(100 * var(--lpSetSize)) calc(50 * var(--lpSetSize));
  z-index: 1; 
  position: relative;
}
.feature .sec .img07 .dot {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(700 * var(--lpSetSize));
  pointer-events: none;
}

/* .img08 */
.feature .sec .img08 {
  width: calc(600 * var(--lpSetSize));
  margin: 0 0 calc(90 * var(--lpSetSize));
  z-index: 1;
  position: relative;
}
.feature .sec .img08 .sec__img {
  margin-bottom: calc(28 * var(--lpSetSize));
}
.feature .sec .img08::after {
  display: block;
  content: '';
  width: calc(900 * var(--lpSetSize));
  height: calc(900 * var(--lpSetSize));
  border-radius: 50%;
  background: #ffffff;
  position: absolute;
  top: calc(436 * var(--lpSetSize));
  left: calc(120 * var(--lpSetSize));
  z-index: -1;
}

/* .sec__itemimg02 */
.feature .sec .sec__itemimg02 {
  width: calc(640 * var(--lpSetSize));
  margin: 0 auto calc(200 * var(--lpSetSize));
  z-index: 1; 
  position: relative;
}
.feature .sec .sec__itemimg02 .flex_wrap {
  display: flex;
  gap:calc(40 * var(--lpSetSize));
  margin-bottom:calc(8 * var(--lpSetSize));
}
.feature .sec .sec__itemimg02 .itemimg {
  width: calc(300 * var(--lpSetSize));
}

/* .img09 */
.feature .sec .img09 {
  width: calc(600 * var(--lpSetSize));
  margin: 0 0 calc(80 * var(--lpSetSize)) calc(150 * var(--lpSetSize));
  z-index: 1; 
  position: relative;
}
.feature .sec .img09::after {
  display: block;
  content: '';
  width: calc(900 * var(--lpSetSize));
  height: calc(900 * var(--lpSetSize));
  border-radius: 50%;
  background: #ffffff;
  position: absolute;
  top: calc(350 * var(--lpSetSize));
  left: calc(-530 * var(--lpSetSize));
  z-index: -1;
}

/* .sec__itemimg03 */
.feature .sec .sec__itemimg03 {
  width: calc(300 * var(--lpSetSize));
  margin: 0 0 calc(90 * var(--lpSetSize)) calc(60 * var(--lpSetSize));
  z-index: 1;
  position: relative;
}
.feature .sec .sec__itemimg03 .itemimg {
  width: calc(300 * var(--lpSetSize));
  margin-bottom:calc(28 * var(--lpSetSize));
}

/* .img10 */
.feature .sec .img10 {
  width: calc(660 * var(--lpSetSize));
  margin: 0 auto calc(214 * var(--lpSetSize));
  z-index: 1;
  position: relative;
}
.feature .sec .img10::after {
  display: block;
  content: '';
  width: calc(900 * var(--lpSetSize));
  height: calc(900 * var(--lpSetSize));
  border-radius: 50%;
  background: #ffffff;
  position: absolute;
  top: calc(756 * var(--lpSetSize));
  left: calc(244 * var(--lpSetSize));
  z-index: -1;
}
.feature .sec .img10 .sec__img {
  margin-bottom: calc(28 * var(--lpSetSize));
}

/* .img11 */
.feature .sec .img11 {
  width: 100%;
  margin: 0 auto calc(100 * var(--lpSetSize));
  z-index: 1; 
  position: relative;
}

/* .img12 */
.feature .sec .img12 {
  width: calc(610 * var(--lpSetSize));
  margin: 0 auto calc(250 * var(--lpSetSize));
  z-index: 1;
  position: relative;
}
.feature .sec .img12::after {
  display: block;
  content: '';
  width: calc(900 * var(--lpSetSize));
  height: calc(900 * var(--lpSetSize));
  border-radius: 50%;
  background: #ffffff;
  position: absolute;
  top: calc(756 * var(--lpSetSize));
  left: calc(-511 * var(--lpSetSize));
  z-index: -1;
}
.feature .sec .img12 .sec__slide {
  margin-bottom: calc(26 * var(--lpSetSize));
}
.feature .sec .img12 .sec__img {
  width: calc(610 * var(--lpSetSize));
}
.feature .sec .img12 .dot {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(610 * var(--lpSetSize));
  pointer-events: none;
}

/* .sec__itemimg04 */
.feature .sec .sec__itemimg04 {
  width: calc(480 * var(--lpSetSize));
  margin: 0 auto calc(170 * var(--lpSetSize));
  z-index: 1; 
  position: relative;
}
.feature .sec .sec__itemimg04 .itemimg {
  width: calc(480 * var(--lpSetSize));
  margin-bottom: calc(28 * var(--lpSetSize));
}

/* .sec_bottom
----------------------------- */
.feature .sec_bottom {
  margin-bottom: calc(200 * var(--lpSetSize));
}
.feature .sec_bottom .sec__btn {
  text-align: center;
  width: calc(450 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .sec_bottom .sec__btn a {
  font-family: "mundial", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(50 * var(--lpSetSize));
  line-height: 1.5;
  letter-spacing: 0.050em;
  display:flex;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--lpSetSize));
  flex-direction: column;
  width: calc(450 * var(--lpSetSize));
  height: calc(250 * var(--lpSetSize));
  padding-bottom: calc(16 * var(--lpSetSize));
  border-radius:50%;
  background: #67789b;
  color: #ffffff;
}


/*****************************************************
animation
*****************************************************/

/* .js_fadein
----------------------------- */
.feature .js_anime.js_fadein {
  opacity: 0;
  transition: opacity 1s ease-in;
}
.feature .js_anime.js_fadein.is_show {
  opacity: 1;
}
.feature .js_anime.js_fadein.--1.is_show {
  transition-delay: 0.5s;
}

/* .js_fadeup
----------------------------- */
.feature .js_anime.js_fadeup {
  opacity: 0;
  transform: translateY(30px);
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.2s ease-out;
  will-change: transform, opacity;
}
.feature .js_anime.js_fadeup.is_show  {
  opacity: 1;
  transform: translateY(0);
}
.feature .js_anime.js_fadeup.--1.is_show {
  transition-delay: 0.3s;
}


/******************************************************/

@media screen and (min-width: 1400px) { 
  .feature {
    --lpSetSize: 1px * 0.64;
  }
  .feature .f_left .f_left__box .f_left__title p {
    width: 320px;
    margin: 0 0 0 20px;
  }
  .feature .f_main .inner {
    width: 480px;
  }
  .feature .hero h1 {
    padding-top: 77px;
  }
}