@charset "utf-8";

/* ==========================================================================
   About Page
   ========================================================================== */
.p-about {
  padding: 0 0 clamp(80px,calc(160 / 750 * 100vw),160px);
}
.p-about__hero {
  position: relative;
  width: 100%;
  padding-bottom: clamp(0px,calc(380 / 750 * 100%),380px);
  height: 0;
  display: block;
  overflow: hidden;
}
.p-about__hero img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}
.p-about .section-header {
  margin: clamp(35px,calc(70 / 750 * 100vw),70px) auto; /* lh減算 */
}
.p-about__content {
  margin: clamp(30px,calc(60 / 750 * 100vw),60px) auto 0; /* lh減算 */
  position: relative;
  display: block;
}
.p-about__inner {
  width: 100%;
  margin: 0 auto;
}
.p-about__inner + .p-about__inner {
  margin-top: clamp(55px,calc(110 / 750 * 100vw),110px);
}
.p-about__image {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: clamp(0px,calc(440 / 750 * 100%),440px);
  overflow: hidden;
  margin: clamp(30px,calc(60 / 750 * 100vw),60px) auto;
}
.p-about__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-about__inner .p-about__img-wrap:last-child {
  margin-bottom: clamp(5px,calc(10 / 750 * 100vw),10px);
} 
.p-about__sec {
  box-sizing: border-box;
  padding: 0 calc(40 / 750 * 100%);
  display: block;
  position: relative;
  margin: clamp(40px,calc(80 / 750 * 100vw),80px) auto;
}
.p-about__sec:last-child {
  margin-bottom: 0;
}
.p-about__num {
  --fs: 50;
  --lh: 26;
  font-size: clamp(calc((var(--fs)/ 2) * 1px), calc(var(--fs)/ 750 * 100vw), calc(var(--fs)* 1px));
  color: var(--c-ac);
  font-family: var(--f-oz);
  font-weight: 300;
  margin-bottom: 20px;
}
.p-about__title {
  --fs: 42;
  --lh: 62;
  font-size: clamp(calc((var(--fs)/ 2) * 1px), calc(var(--fs)/ 750 * 100vw), calc(var(--fs)* 1px));
  line-height: calc(var(--lh) / var(--fs) * 1em);
  font-weight: 500;
  font-family: var(--f-mix);
  border-left: clamp(2px,calc(4 / 750 * 100vw),4px) solid var(--c-ac);
  padding: clamp(4px,calc(8 / 750 * 100vw),8px) 0 clamp(4px,calc(8 / 750 * 100vw),8px) clamp(19px,calc(38 / 750 * 100vw),38px);
  margin: clamp(20px,calc(40 / 750 * 100vw),40px) auto;
}
.p-about__textbox {
  background-color: var(--c-bg);
  border-radius: clamp(10px,calc(20 / 750 * 100vw),20px);
  box-sizing: border-box;
  padding: clamp(25px,calc(50 / 750 * 100vw),50px);
}
.p-about__text {
  --fs: 26;
  --lh: 44;
  font-size: clamp(calc((var(--fs)/ 2) * 1px), calc(var(--fs)/ 750 * 100vw), calc(var(--fs)* 1px));
  line-height: calc(var(--lh) / var(--fs) * 1em);
}
.p-about__text strong {
  font-weight: 700;
}
.p-about__text sup {
  vertical-align: super;
  --fs: 16;
  --lh: 20;
  font-size: clamp(calc((var(--fs)/ 2) * 1px), calc(var(--fs)/ 750 * 100vw), calc(var(--fs)* 1px));
  line-height: calc(var(--lh) / var(--fs) * 1em);
}

.p-about__text + .p-about__text {
  margin-top: clamp(16px,calc(52 / 750 * 100vw),52px); /* lh減算 */
}
.p-about__text + .p-about__img-wrap ,
.p-about__img-wrap + .p-about__text {
  margin-top: clamp(15px,calc(30 / 750 * 100vw),30px);
}

.p-about__img-wrap {
  position: relative;
  display: block;
  margin:clamp(20px,calc(40 / 750 * 100vw),40px) auto 0;
}
.p-about__img-wrap img {
  max-width: 100%;
}
.p-about__note {
  --fs: 16;
  --lh: 20;
  font-size: clamp(calc((var(--fs)/ 2) * 1px), calc(var(--fs)/ 750 * 100vw), calc(var(--fs)* 1px));
  line-height: calc(var(--lh) / var(--fs) * 1em);
  margin: clamp(33px,calc(66 / 750 * 100vw),66px) auto 0; /* lh減算 */
}
.p-about__inner .p-about__note:last-child {
  position: relative;
  margin-bottom: clamp(-10px,calc(10 / 750 * 100vw * -1),0px);
} 

.p-about__full-img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.p-about__features {
  background-color: #fff;
  padding: 0;
  box-sizing: border-box;
  border-radius: clamp(10px,calc(20 / 750 * 100vw),20px);
  margin: clamp(20px,calc(40 / 750 * 100vw),40px) auto 0;
  width: calc(530 / 590 * 100%);
}
.p-about__features-title {
  text-align: center;
  --fs: 30;
  --lh: 40;
  font-size: clamp(calc((var(--fs)/ 2) * 1px), calc(var(--fs)/ 750 * 100vw), calc(var(--fs)* 1px));
  line-height: calc(var(--lh) / var(--fs) * 1em);
  color: var(--c-ac);
  font-family: var(--f-mix);
  font-weight: 500;
  padding-bottom: clamp(15px,calc(30 / 750 * 100vw),30px);
  border-bottom: 1px solid var(--c-gr);
  margin-bottom: clamp(10px,calc(20 / 750 * 100vw),20px);
}
.p-about__features-list {
  display: flex;
  flex-direction: column;
  gap: 0px;
  box-sizing: border-box;
  padding: 0 clamp(5px,calc(10 / 750 * 100vw),10px);
}
.p-about__features-item {
  display: flex;
  align-items: flex-start;
  --fs: 24;
  --lh: 36;  
  box-sizing: border-box;
  padding: clamp(10px,calc(20 / 750 * 100vw),20px) clamp(10px,calc(20 / 750 * 100vw),20px) clamp(10px,calc(20 / 750 * 100vw),20px) clamp(5px,calc(10 / 750 * 100vw),10px);
  font-size: clamp(calc((var(--fs)/ 2) * 1px), calc(var(--fs)/ 750 * 100vw), calc(var(--fs)* 1px));
  line-height: calc(var(--lh) / var(--fs) * 1em);
}
.p-about__features-item + .p-about__features-item {
  border-top: 1px solid var(--c-gr);
}
.p-about__features-item::before {
  content: "";
  display: block;
  width: clamp(10px,calc(20 / 750 * 100vw),20px);
  height: clamp(10px,calc(20 / 750 * 100vw),20px);
  background: url(../shared/img/ic_check_checked.svg) no-repeat center center ;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  margin-right: clamp(10px,calc(20 / 750 * 100vw),20px);
  flex-shrink: 0;
  margin-top: clamp(5px,calc(10 / 750 * 100vw),10px);
}
.p-about__features-note {
  --fs: 20;
  --lh: 30;
  color: #666;
}

.p-about__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--c-ac);
  color: #fff;
  text-decoration: none;
  height: clamp(40px,calc(80 / 750 * 100vw),80px);
  padding: clamp(5px,calc(10 / 750 * 100vw),10px);
  border-radius: clamp(20px,calc(40 / 750 * 100vw),40px);
  --fs: 24;
  font-size: clamp(calc((var(--fs)/ 2) * 1px), calc(var(--fs)/ 750 * 100vw), calc(var(--fs)* 1px));
  max-width: 400px;
  margin: clamp(40px,calc(80 / 750 * 100vw),80px) auto 0;
  width: calc(550 / 750 * 100%);
  opacity: 1;
  transition: all .5s ease;
}
.p-about__btn:hover {
  opacity: 0.7;
}

@media screen and (min-width: 750px) {
  .p-about .section-header__title-en {
    --fs: 24;
    font-size: calc(var(--fs) * 1px);
    margin-bottom: 8px;
  }
  .p-about__hero {
    padding-bottom: 380px;
  }
  .p-page-header {
    margin-bottom: 80px;
  }
  .p-page-header__title-en {
    --fs: 40;
    --lh: 50;
  }
  .p-page-header__title-ja {
    --fs: 16;
    --lh: 24;
  }
  .p-about__content {
    padding: 0 20px;
    max-width: 1240px;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
  }
  .p-about__inner {
    position: relative;
    display: block;
  }
  .p-about__image {
    width: calc(600 / 1200 * 100%);
    display: block;
    margin: 0;
    top: 0;
    left: 0;
    padding-bottom: clamp(200px,calc(400 /1100 * 100%),400px);
    position: absolute;
    z-index: 3;
    border-radius: 10px;
    overflow: hidden;
  }
  .p-about__sec {
    width: calc(1100 / 1200 * 100%);
    margin: 0 0 0 auto;
    padding: 0;
  }
  .p-about__num {
    width: 50%;
    display: block;
    margin: 0 0 0 auto;
  }
  .p-about__title {
    width: 50%;
    display: block;
    margin: 0 0 0 auto;
  }
  
  
  
  .p-about__num {
    --fs: 40;
    --lh: 26;
    margin-bottom: 20px;
    font-size: calc(var(--fs) * 1px);
  }
  .p-about__title {
    --fs: 22;
    --lh: 26;
    font-size: calc(var(--fs) * 1px);
    line-height: calc(var(--lh) / var(--fs) * 1em);
    margin-bottom: 60px;
    border-width: 2px;
  }
  .p-about__textbox {
    padding:  clamp(25px,calc(50 / 1100 * 100%),50px)  clamp(25px,calc(50 / 1100 * 100%),50px)  clamp(25px,calc(50 / 1100 * 100%),50px)  clamp(220px,calc(550 / 1100 * 100%),550px);
    box-sizing: border-box;
    min-height: clamp(0px,calc(540 / 1100 * 100vw),540px);
   }
  .p-about__text {
    --fs: 16;
    --lh: 26;
    font-size: calc(var(--fs) * 1px);
    line-height: calc(var(--lh) / var(--fs) * 1em);
  }
  .p-about__text + .p-about__text {
    margin-top: 40px;
  }
  .p-about__text sup {
    --fs:10;
    font-size: calc(var(--fs) * 1px);
  }
  .p-about__note {
    margin-top: 40px;
    --fs: 10;
    --lh: 14;
    font-size: calc(var(--fs) * 1px);
    line-height: calc(var(--lh) / var(--fs) * 1em);
  }
  .p-about__img-wrap {
    display: block;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: clamp(30px,calc(60 / 1100 * 100%),60px);
    left: clamp(25px,calc(50 / 1100 * 100%),50px);
    width: clamp(0px,calc(450 / 1100 * 100%),450px);
  }
  
  .p-about__features {
    padding: 0;
    width: 100%;
    box-sizing: border-box;
  }
  .p-about__features-title {
    --fs: 20;
    --lh: 40;
    font-size: calc(var(--fs) * 1px);
    line-height: calc(var(--lh) / var(--fs) * 1em);
  }
  .p-about__features-item {
    --fs: 16;
    --lh: 28;
    font-size: calc(var(--fs) * 1px);
    line-height: calc(var(--lh) / var(--fs) * 1em);
  }
  .p-about__features-item::before {
    width: 16px;
    height: 16px;
    margin-top: 6px;
  }
  .p-about__features-note {
    --fs: 12;
    --lh: 20;
  }
  .p-about__btn {
    --fs: 16;
    font-size: calc(var(--fs) * 1px);
    padding: 5px;
    width: 310px;
    height: 50px;
    margin: 80px auto 0;
  }
}