@charset "UTF-8";

/* --- デフォルトCSS設定 --- */

.main-area {

  padding-top: 0;

}

.header[data-header-theme="light"].c-active,

.header[data-header-theme="dark"] {

  background: transparent;

}

#main-container {

  --pc-width: 1400;

  --sp-width: 750;

  --pc-artboard-width: 480;

  --sp-artboard-width: 750;

  --formula: calc(var(--variable) * var(--ratio));

  --formula_pc: calc(var(--variable) * 1);

}

.main-area.lp {

  margin-bottom: 0;

}

@media (min-width: 1401px) {

  #main-container {

    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));

    --variable: 1px;

  }

}



@media (min-width: 768px) and (max-width: 1400px) {

  #main-container {

    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));

    --variable: calc(100vw / var(--pc-width));

  }

}



@media (max-width: 767px) {

  #main-container {

    --ratio: 1;

    --variable: calc(100vw / var(--sp-width));

  }

}



#main-container img {

  display: block;

  width: 100%;

  height: auto;

}



#main-container .invisible-heading {

  position: absolute;

  width: 1px;

  height: 1px;

  margin: -1px;

  padding: 0;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border: 0;

}



/* --- 抽出されたCSS（上から順） --- */



#main-container {

  min-width: 100%;

  position: relative;

  font-feature-settings: "palt";

  --font-jpn: hiragino-kaku-gothic-pron, sans-serif;

  --font-eng: aw-conqueror-didot, serif;

  --font-light: 300;

  --font-bold: 700;

  --ice-blue: #e9fff3;

  --blue: #4b87c9;

  --faded-blue: #5f94b7;

  --mint-green: #eff9f3;

  --sec3-font-blue: #668eaf;

  --sec3-grd-green: #d0efe1;

  --sec3-grd-blue: #97afcc;

  --pc-grd-iceblue: #cfedf1;

  --white: #ffffff;

  display: flex;

  margin-top: min(50px, calc(50 * (100vw / 1440)));

}



#main-container .lp-left-area,

#main-container .lp-right-area {

  position: sticky;

  top: 0;

  height: 100vh;

  flex: 1;

  background: linear-gradient(

    0deg,

    var(--white) 0%,

    var(--pc-grd-iceblue) 100%

  );

  display: grid;

  place-items: center;

}

#main-container .lp-main-area {

  display: flex;

  flex-direction: column;

  width: calc(480 * var(--formula_pc));

}



#main-container .sec-set {

  display: flex;

  flex-direction: column;

  align-items: center;

  overflow-x: clip;

}



#main-container [class*="__h2"],

#main-container [class*="__h3"] {

  font-family: var(--font-eng);

  line-height: 1;

  text-align: center;

  font-weight: var(--font-bold);

}

#main-container [class*="__txt"] {

  font-family: var(--font-jpn);

  line-height: 2;

  letter-spacing: 0.1em;

  text-align: justify;

  font-weight: var(--font-light);

}

#main-container [class*="sec3__inner"] {

  width: calc(700 * var(--formula));

  border-radius: calc(30 * var(--formula));

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: calc(62 * var(--formula)) 0 0 0;

  margin: 0 0 calc(77 * var(--formula)) 0;

}

#main-container [class*="sec3__txt"] {

  font-size: calc(24 * var(--formula));

  text-align: justify;

  width: calc(540 * var(--formula));

}

#main-container [class*="__link"] {

  font-family: var(--font-eng);

  line-height: 1;

  text-align: center;

  font-weight: var(--font-bold);

  color: var(--blue);

  display: block;

}

#main-container .left__inner--vertical {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: calc(29 * var(--formula));

  margin: calc(88 * var(--formula_pc)) 0 0 0;

}



#main-container .left__h2 {

  font-size: calc(50 * var(--formula_pc));

  color: var(--blue);

  letter-spacing: -0.02em;

  line-height: calc(62.5 / 50);

}



#main-container .left__h3 {

  font-size: calc(22 * var(--formula_pc));

  color: var(--blue);

  letter-spacing: -0.02em;

  margin: 0 0 0 calc(-6 * var(--formula));

}



#main-container .sec1__inner--absolute {

  position: relative;

}



#main-container .sec1-img-01 {

  width: calc(750 * var(--formula));

  background: var(--white);

  z-index: 1;

  position: relative;

  opacity: 0;

  transition:

    opacity 1.5s ease-out,

    filter 1.2s ease-out,

    transform 1.5s ease-out;

  filter: blur(calc(30 * var(--formula)));

  transform: scale(1.02);

}

#main-container .is-visible .sec1-img-01 {

  opacity: 1;

  filter: blur(0);

  transform: scale(1);

}



#main-container .sec1__absolute-item {

  position: absolute;

  bottom: calc(62 * var(--formula));

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: calc(26 * var(--formula));

  pointer-events: none;

  z-index: 5;

}



#main-container .sec1__h2 {

  font-size: calc(100 * var(--formula));

  color: var(--mint-green);

  letter-spacing: -0.02em;

  margin: 0 0 0 calc(-2 * var(--formula));

}



#main-container .sec1__h3 {

  font-size: calc(40 * var(--formula));

  color: var(--mint-green);

  letter-spacing: -0.02em;

}



#main-container .sec2 {

  padding: calc(102 * var(--formula)) 0 calc(119 * var(--formula))

    calc(5 * var(--formula));

  background-image: url(../img/sec2-bg-01.jpg);

  background-size: cover;

}



#main-container .sec2-txt-01 {

  width: calc(382 * var(--formula));

  margin: 0 0 calc(64 * var(--formula)) calc(-7 * var(--formula));

}



#main-container .sec2-txt-02 {

  width: calc(533 * var(--formula));

}



#main-container .sec2-img-01 {

  width: calc(804 * var(--formula));

  margin: calc(81 * var(--formula)) 0 calc(46 * var(--formula))

    calc(-9 * var(--formula));

  background: var(--white);

  mask-image: url(../img/sec2-img-01.png);

  mask-size: cover;

}



#main-container .sec2__credit {

  font-family: var(--font-jpn);

  color: var(--blue);

  font-size: calc(22 * var(--formula));

  line-height: 2;

  letter-spacing: 0.1em;

  text-align: center;

  font-weight: var(--font-light);

}



#main-container .sec2__txt {

  font-size: calc(26 * var(--formula));

  color: var(--blue);

  width: calc(580 * var(--formula));

  margin: calc(60 * var(--formula)) 0 calc(76 * var(--formula)) 0;

}

#main-container .sec2__inner--border {

  position: relative;

  border-width: max(1px, calc(2 * var(--formula)));

  border-color: var(--blue);

  border-style: solid;

  border-top: none; /* 上だけ消す */



  width: calc(582 * var(--formula));

  margin: 0 0 0 calc(-5 * var(--formula));

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: calc(23 * var(--formula));

  padding: 0 calc(37 * var(--formula)) calc(31 * var(--formula));

}



#main-container .sec2__inner--border::before,

#main-container .sec2__inner--border::after {

  content: "";

  width: calc(243 * var(--formula));

  height: 0;

  border-top-style: solid;

  border-top-color: var(--blue);

  border-top-width: max(1px, calc(2 * var(--formula)));

  background-color: transparent;

  position: absolute;

  top: 0;

}



#main-container .sec2__inner--border::before {

  left: 0;

}



#main-container .sec2__inner--border::after {

  right: 0;

}

#main-container .sec2__h5 {

  color: var(--blue);

  font-size: calc(20 * var(--formula));

  line-height: 1;

  letter-spacing: 0.1em;

  text-align: center;

  font-weight: var(--font-light);

  margin: calc(-9 * var(--formula)) 0 0 0;

}



#main-container .sec2__txt--small {

  color: var(--blue);

  font-size: calc(20 * var(--formula));

  line-height: calc(35 / 20);

}



#main-container .sec3 {

  background: var(--mint-green);

  padding: calc(108 * var(--formula)) 0 calc(50 * var(--formula)) 0;

}



#main-container .sec3__h3 {

  color: var(--faded-blue);

  font-size: calc(100 * var(--formula));

  letter-spacing: 0.02em;

  margin: 0 0 calc(52 * var(--formula)) calc(-2 * var(--formula));

}



#main-container .sec3__inner1,

#main-container .sec3__inner3,

#main-container .sec3__inner5 {

  background: linear-gradient(

    0deg,

    var(--mint-green) 0%,

    var(--sec3-grd-green) 100%

  );

}

#main-container .sec3__inner2,

#main-container .sec3__inner4 {

  background: linear-gradient(

    0deg,

    var(--mint-green) 0%,

    var(--sec3-grd-blue) 100%

  );

}

#main-container .sec3__ttl-cont {

  display: flex;

  gap: calc(28 * var(--formula));

  margin: 0 0 0 calc(-3 * var(--formula));

}



#main-container .sec3__circle {

  background: var(--mint-green);

  border-radius: 50%;

  width: calc(40 * var(--formula));

  height: calc(40 * var(--formula));

  position: relative;

  top: calc(-3 * var(--formula));

}



#main-container .sec3-common-01 {

  width: calc(37 * var(--formula));

  position: absolute;

  transform: translate(-50%, -50%);

  top: 40%;

  left: 67%;

}



#main-container .sec3-txt-01 {

  width: calc(415 * var(--formula));

}



#main-container .sec3__txt1,

#main-container .sec3__txt3,

#main-container .sec3__txt5 {

  color: var(--sec3-font-blue);

}

#main-container .sec3__txt2,

#main-container .sec3__txt4 {

  color: var(--mint-green);

}

#main-container .sec3__txt1 {

  margin: calc(25 * var(--formula)) 0 calc(5 * var(--formula)) 0;

}



#main-container .sec3-img-01 {

  width: calc(480 * var(--formula));

}



#main-container .sec3-txt-02 {

  width: calc(521 * var(--formula));

}



#main-container .sec3__txt2 {

  margin: calc(24 * var(--formula)) 0 calc(-3 * var(--formula)) 0;

}



#main-container .sec3-img-02 {

  width: calc(640 * var(--formula));

}



#main-container .sec3__inner3 {

  padding: calc(59 * var(--formula)) 0 0 0;

}



#main-container .sec3-txt-03 {

  width: calc(525 * var(--formula));

}



#main-container .sec3__txt3 {

  margin: calc(25 * var(--formula)) 0 calc(3 * var(--formula)) 0;

}



#main-container .sec3-txt-04 {

  width: calc(278 * var(--formula));

}



#main-container .sec3__point {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-template-rows: repeat(2, 1fr);

  grid-column-gap: calc(13 * var(--formula));

  grid-row-gap: calc(13 * var(--formula));

  margin: calc(37 * var(--formula)) 0 calc(12 * var(--formula)) 0;

}



#main-container .sec3-point-01 {

  width: calc(142 * var(--formula));

}



#main-container .sec3-point-02 {

  width: calc(142 * var(--formula));

}



#main-container .sec3-point-03 {

  width: calc(142 * var(--formula));

}



#main-container .sec3-point-04 {

  width: calc(142 * var(--formula));

}



#main-container .sec3-point-05 {

  width: calc(142 * var(--formula));

}



#main-container .sec3-point-06 {

  width: calc(142 * var(--formula));

}



#main-container .sec3-txt-05 {

  width: calc(404 * var(--formula));

  margin: calc(-2 * var(--formula)) calc(3 * var(--formula)) 0 0;

}



#main-container .sec3__txt5 {

  margin: calc(24 * var(--formula)) 0 0 0;

}



#main-container .sec4 {

  position: relative; /* 擬似要素の基準点になります */

  padding: calc(109 * var(--formula)) 0 calc(23 * var(--formula)) 0;

  overflow: hidden; /* ぼかしが枠外に漏れるのを防ぎます */

  background: var(--mint-green); /* 元の背景指定は削除します */

}

#main-container .sec4::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 0;

  background-image: url(../img/sec4-bg-01.jpg);

  background-size: contain;

  background-position: top center;

  opacity: 0;

  filter: blur(calc(30 * var(--formula)));

  transform: scale(1.02);

  transition:

    opacity 1.5s ease-out,

    filter 1.2s ease-out,

    transform 1.5s ease-out;

}

#main-container .sec4.is-visible::before {

  opacity: 1;

  filter: blur(0);

  transform: scale(1);

}

#main-container .sec4__h3 {

  font-size: calc(100 * var(--formula));

  letter-spacing: 0.02em;

  color: var(--mint-green);

  margin: 0 0 calc(1014 * var(--formula)) calc(2 * var(--formula));

  z-index: 5;

}

#main-container .sec4__h4 {

  font-size: calc(80 * var(--formula));

  letter-spacing: -0.02em;

  color: var(--blue);

  margin: 0 0 calc(24 * var(--formula)) calc(-2 * var(--formula));

  font-family: var(--font-eng);

  line-height: calc(10 / 8);

  text-align: center;

  font-weight: var(--font-bold);

  z-index: 5;

}



#main-container .sec4-txt-01 {

  width: calc(498 * var(--formula));

  z-index: 5;

}



#main-container .sec4__txt {

  font-size: calc(26 * var(--formula));

  color: var(--blue);

  margin: calc(67 * var(--formula)) 0 calc(138 * var(--formula)) 0;

  width: calc(560 * var(--formula));

  z-index: 5;

}

#main-container .sec4__link {

  display: block;

  width: calc(540 * var(--formula));

  margin: 0 auto;

  text-align: center;

  font-size: calc(50 * var(--formula));

  color: var(--blue);

  text-decoration: none;

  position: relative;



  /* --- 本体のボーダー設定 --- */

  border-style: solid;

  border-color: var(--blue);

  border-top-width: max(1px, calc(2 * var(--formula)));

  border-bottom-width: max(1px, calc(2 * var(--formula)));

  border-left-width: 0;

  border-right-width: 0;

  padding: calc(36 * var(--formula)) 0 calc(27 * var(--formula));

  box-sizing: border-box;

  letter-spacing: -0.02em;

  z-index: 5;

}



#main-container .sec4__link::before,

#main-container .sec4__link::after {

  content: "";

  position: absolute;

  left: 0;

  width: 100%;

  height: 0;

  border-top-style: solid;

  border-top-color: var(--blue);

  border-top-width: max(1px, calc(2 * var(--formula)));



  background-color: transparent;

}

#main-container .sec4__link::before {

  top: calc(6 * var(--formula));

}



#main-container .sec4__link::after {

  bottom: calc(5 * var(--formula));

}

#main-container .copyright {

  font-size: calc(20 * var(--formula));

  letter-spacing: 0;

  color: var(--blue);

  margin: calc(97 * var(--formula)) 0 0 0;

  font-family: var(--font-eng);

  line-height: calc(3 / 2);

  text-align: center;

  font-weight: var(--font-light);

}



#main-container .right__link {

  display: block;

  width: calc(250 * var(--formula_pc));

  margin: calc(94 * var(--formula_pc)) auto 0; /* marginを整理しました */

  text-align: center;

  font-size: calc(28 * var(--formula_pc));

  color: var(--blue);

  text-decoration: none;

  position: relative;



  /* --- 本体のボーダー（ロングハンド） --- */

  border-style: solid;

  border-color: var(--blue);

  border-top-width: max(1px, calc(1 * var(--formula_pc)));

  border-bottom-width: max(1px, calc(1 * var(--formula_pc)));

  border-left-width: 0;

  border-right-width: 0;



  padding: calc(22 * var(--formula_pc)) 0 calc(15 * var(--formula_pc));

  box-sizing: border-box;

  letter-spacing: -0.02em;

}



#main-container .right__link::before,

#main-container .right__link::after {

  content: "";

  position: absolute;

  left: 0;

  width: 100%;

  height: 0;

  border-top-style: solid;

  border-top-color: var(--blue);

  border-top-width: max(1px, calc(2 * var(--formula)));



  background-color: transparent;

}



#main-container .right__link::before {

  top: calc(6 * var(--formula));

}



#main-container .right__link::after {

  /* 下側も同様 */

  bottom: calc(5 * var(--formula));

}

@media (max-width: 767px) {

  #main-container {

    margin-top: calc(50 * (100vw / 375));

  }

  #main-container .lp-left-area,

  #main-container .lp-right-area {

    display: none;

  }

  #main-container .lp-main-area {

    width: 100%;

  }

}

/* 

////////////////////////////////////////////

animation

////////////////////////////////////////////

*/



#main-container .blur-in {

  transition: all 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  opacity: 0;

  filter: blur(calc(30 * var(--formula)));

}

#main-container .delay {

  transition-delay: 0.6s;

}

#main-container .is-visible .blur-in,

#main-container .is-visible.blur-in {

  opacity: 1;

  filter: blur(0);

}

#main-container .fade-in {

  transition: 2s cubic-bezier(0.51, 0.21, 0.41, 1);

  opacity: 0;

}

#main-container .is-visible.fade-in {

  opacity: 1;

}

#main-container .wipe-right {

  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s;

  clip-path: inset(0 100% 0 0);

}

#main-container .is-visible .wipe-right {

  clip-path: inset(0 0 0 0);

}