@charset "UTF-8";

/*all----------------------------*/
html {
  font-size: 62.5%;
}

body {
  -webkit-tap-highlight-color: transparent;
}

#Wrap {
  width: auto;
}

.LP_page * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1;
  font-feature-settings: "palt";
}

.LP_page {
  position: relative;
  z-index: 1;
  color: #000;
  font-family: 'Mulish', "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Pro", 'Noto Sans JP', "メイリオ", "Meiryo", sans-serif;
  overflow-x: clip;
  padding: 8rem 0 12rem;
  opacity: 0;
  transition: opacity .3s;
}

.LP_page.active {
opacity: 1;
}

.LP_page::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/bg.jpg) center center / cover no-repeat;
  opacity: .7;
  content: "";
}

.LP_page::after {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#CBDBEB, #EAEFF4);
  opacity: .3;
  content: "";
}

.page_inner {
  width: 71rem;
  margin: 0 auto;
}

.LP_page picture {
  display: block;
  font-size: 0;
}

.LP_page a {
  display: block;
}

.LP_page a:hover {
  opacity: 1 !important;
}

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

.activePoint {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 1s, transform 1s;
}

.activePoint.active {
  opacity: 1;
  transform: translateY(0) !important;
}


/*----------------------------all*/

.main_ttl {
  margin-bottom: 5rem;
  font-weight: 300;
  font-size: 3.6rem;
  letter-spacing: .075em;
  text-align: center;
  color: #ffff;
}

.main_ttl span {
  letter-spacing: .1em;
}

.main_ttl sup {
  font-size: 2.1rem;
}

.intro_wrap sup {
  font-size: .7rem;
  letter-spacing: 0;
}

.intro_wrap dt {
  border-radius: 50%;
  width: 18rem;
  height: 18rem;
  margin: 0 auto 2.4rem;
  padding-top: 3rem;
  background: #fff;
  font-size: 2.5rem;
  letter-spacing: .075em;
  text-align: center;
}

.intro_wrap dt .icon {
  display: block;
  border-radius: 10rem;
  width: fit-content;
  margin: 0 auto 1rem;
  padding: .4rem 1.5rem .3rem;
  font-size: 1rem;
  letter-spacing: .13em;
}

.intro_wrap dt .icon {
  background: #CCDBE8;
}

.intro_wrap dt .txt_S {
  display: block;
  margin-top: 1rem;
  font-size: 1.1rem;
  letter-spacing: .075em;
}

.intro_wrap dt figure {
  width: 5rem;
  margin: .8rem auto 0;
}

.intro_wrap dd {
  font-size: 1.2rem;
  line-height: 2;
  letter-spacing: .075em;
  text-align: center;
}

.intro_wrap .notes {
  display: block;
  margin-top: 1.1rem;
  font-size: 1rem;
}

.about1 {
  margin-top: 6rem;
}

.sec_ttl {
  font-size: 2rem;
}

.about1 .sec_ttl {
  margin-bottom: 3rem;
}

.about1 .about_img {
  position: relative;
}

.about1 .about_img::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: .1rem;
  height: 10rem;
  margin-top: 3rem;
  background: linear-gradient(#9FA0A0 .3rem, transparent .2rem);
  background-size: 100% .5rem;
  /*content: "";*/
}

.about1 .about_img::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: .1rem;
  height: 10rem;
  margin-bottom: 3rem;
  background: linear-gradient(#9FA0A0 .3rem, transparent .2rem);
  background-size: 100% .5rem;
  /*content: "";*/
}

.about2 {
  margin-top: 5.8rem;
}

.sec_ttl {
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: .075em;
  text-align: center;
}

.about2 .sec_ttl {
  margin-bottom: 2.2rem;
}

.about2 .sec_ttl sup {
  font-size: 1.4rem;
}

.lead {
  margin-bottom: 2.5rem;
  font-size: 1.2rem;
  line-height: 2;
  letter-spacing: .075em;
  text-align: center;
}

.about_img_wrap {
  display: flex;
  justify-content: center;
  gap: 3rem;
}

.about_img_wrap .about_img {
  width: 34rem;
}

.btn_back {
  width: fit-content;
  margin: 6rem auto 0;
}

.btn_back a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10rem;
  border: solid #4D4D4D;
  border-width: .1rem;
  width: 14rem;
  height: 2.5rem;
  font-size: 1.2rem;
  letter-spacing: .075em;
}

.btn_back a::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) rotate(-45deg);
  border-top: solid #000;
  border-left: solid #000;
  border-width: .1rem;
  width: .4rem;
  height: .4rem;
  margin-left: 1.2rem;
  content: "";
}

/*Smart phone---------------------------------------------*/
@media screen and  (max-width:768px) {
/*all----------------------------*/
.LP_page .only_pc {
  display: none;
}

#share {
  right: auto !important;
  left: 5%;
  z-index: 5 !important;
}

.share-txt {
  margin: 0 !important;
  padding-bottom: calc(40 * (100vw / 750));
  display: none;
}

.LP_page {
  padding: calc(142 * (100vw / 750)) 0 calc(140 * (100vw / 750));
}

.LP_page::before {
  background: url(../img/bg_sp.jpg) center center / cover no-repeat;
}

.activePoint {
  transform: translateY(calc(15 * (100vw / 750)));
}

.page_inner {
  width: calc(682 * (100vw / 750));
}
/*----------------------------all*/
.main_ttl {
  margin-bottom: calc(80 * (100vw / 750));
  font-size: calc(58 * (100vw / 750));
}

.main_ttl sup {
  font-size: calc(34 * (100vw / 750));
}

.intro_wrap sup {
  font-size: calc(13 * (100vw / 750));
}

.intro_wrap dt {
  width: calc(360 * (100vw / 750));
  height: calc(360 * (100vw / 750));
  margin: 0 auto calc(70 * (100vw / 750));
  padding-top: calc(60 * (100vw / 750));
  font-size: calc(50 * (100vw / 750));
}

.intro_wrap dt .icon {
  border-radius: calc(100 * (100vw / 750));
  margin: 0 auto calc(20 * (100vw / 750));
  padding: calc(8 * (100vw / 750)) calc(32 * (100vw / 750)) calc(6 * (100vw / 750));
  font-size: calc(20 * (100vw / 750));
}

.intro_wrap dt .txt_S {
  margin-top: calc(20 * (100vw / 750));
  font-size: calc(22 * (100vw / 750));
  letter-spacing: .1em;
}

.intro_wrap dt figure {
  width: calc(100 * (100vw / 750));
  margin: calc(20 * (100vw / 750)) auto 0;
}

.intro_wrap dd {
  font-size: calc(22 * (100vw / 750));
}

.intro_wrap dd .notes {
  margin-top: calc(15 * (100vw / 750));
  font-size: calc(20 * (100vw / 750));
}

.about1 {
  margin-top: calc(120 * (100vw / 750));
}

.sec_ttl {
  font-size: calc(40 * (100vw / 750));
}

.about1 .sec_ttl {
  margin-bottom: calc(40 * (100vw / 750));
}

.about1 .about_img::before {
  top: 50%;
  left: 0;
  width: calc(220 * (100vw / 750));
  height: calc(2 * (100vw / 750));
  margin: calc(-14 * (100vw / 750)) 0 0 calc(90 * (100vw / 750));
  background: linear-gradient(to right, #9FA0A0 calc(4 * (100vw / 750)), transparent calc(4 * (100vw / 750)));
  background-size: calc(8 * (100vw / 750)) 100%;
}

.about1 .about_img::after {
  bottom: auto;
  top: 50%;
  left: auto;
  right: 0;
  width: calc(220 * (100vw / 750));
  height: calc(2 * (100vw / 750));
  margin: calc(-14 * (100vw / 750)) calc(90 * (100vw / 750)) 0 0;
  background: linear-gradient(to right, #9FA0A0 calc(4 * (100vw / 750)), transparent calc(4 * (100vw / 750)));
  background-size: calc(8 * (100vw / 750)) 100%;
}

.about2 {
  margin-top: calc(95 * (100vw / 750));
}

.about2 .sec_ttl {
  margin-bottom: calc(50 * (100vw / 750));
}

.about2 .sec_ttl sup {
  font-size: calc(24 * (100vw / 750));
}

.lead {
  margin-bottom: calc(48 * (100vw / 750));
  font-size: calc(22 * (100vw / 750));
}

.about_img_wrap {
  display: block;
}

.about_img_wrap .about_img {
  width: auto;
}

.about_img_wrap .about_img:nth-of-type(n+2) {
  margin-top: calc(30 * (100vw / 750));
}

.btn_back {
  margin: calc(80 * (100vw / 750)) auto 0;
}

.btn_back a {
  border-radius: calc(100 * (100vw / 750));
  border-width: calc(2 * (100vw / 750));
  width: calc(280 * (100vw / 750));
  height: calc(50 * (100vw / 750));
  font-size: calc(24 * (100vw / 750));
}

.btn_back a::before {
  border-width: calc(2 * (100vw / 750));
  width: calc(8 * (100vw / 750));
  height: calc(8 * (100vw / 750));
  margin-left: calc(28 * (100vw / 750));
}
}

/*---------------------------------------------Smart phone*/

/*PC------------------------------------------------------*/
@media screen and  (min-width:769px) {
  .only_sp {
    display: none;
  }
}
/*------------------------------------------------------PC*/

/*レスポンシブ＆タブレット対応-------------------------------*/
@media screen and (max-width: 1400px){
  html {
    font-size: calc(10 * (100vw / 1400));
  }
}
/*-------------------------------レスポンシブ＆タブレット対応*/