@charset "UTF-8";

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

#Contents .main-area {

  padding-top: 0;

}

#Contents .main-area.lp {

  margin-bottom: 0;

}

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

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

  background: unset;

}

#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);

}



@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 h2,

#main-container h3,

#main-container p,

#main-container li {

  margin-block: calc((1em - 1lh) / 2);

}



#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.MC260317uv {

  font-feature-settings: "palt";

  min-width: 100%;

  overflow: clip;

  position: relative;

  display: flex;

  --white: #fcfcf2;

  --beige: #e3cdc7;

  --beige2: #f4d7c5;

  --sky-blue: #b7cde9;

  --navy: #313184;

  --gray: #7a88a0;

  --pale-aqua: #e7f0f6;

  --aqua: #b7cde9;

  --light-mint: #cee7ed;

  --mint: #add6e0;

  --shuei-gothic: dnp-shuei-gothic-kin-std, sans-serif;

  --desire: desire-pro, serif;

  --mode-mincho: mode-mincho-b-large-std, sans-serif;

  --shipori-mincho: shippori-mincho-b1, sans-serif;

  --font-regular: 400;

  --font-medium: 500;

  --font-bold: 600;

  padding-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;

  display: grid;

  place-items: center;

  background: linear-gradient(var(--sky-blue), var(--beige));

}

#main-container .lp-main-area {

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

}



#main-container [class*="sec2__accordion-desc"] {

  font-family: var(--shuei-gothic);

  color: var(--gray);

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

  line-height: 1.75;

  letter-spacing: 0.1em;

  text-align: justify;

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

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

  display: block;

}

#main-container [class*="sec2__accordion-txt"] {

  font-family: var(--shuei-gothic);

  color: var(--navy);

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

  line-height: 2;

  letter-spacing: 0.1em;

  text-align: center;

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

}

#main-container [class*="sec3__point-txt"] {

  font-family: var(--mode-mincho);

  color: var(--navy);

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

  line-height: 2;

  letter-spacing: 0.1em;

  text-align: center;

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

  position: relative;

}

#main-container [class*="sec3-number-"] {

  position: absolute;

}

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

  font-family: var(--shuei-gothic);

  color: var(--gray);

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

  line-height: 1.7;

  letter-spacing: 0.1em;

  text-align: justify;

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

}

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

  font-family: var(--desire);

  color: var(--navy);

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

  line-height: 1;

  letter-spacing: 0.05em;

  text-align: center;

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

}

#main-container [class*="sec3__point-cont"] {

  background: var(--mint);

  display: grid;

  place-items: center;

  position: relative;

}

#main-container [class*="__small-txt"] {

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

  vertical-align: super;

  color: inherit;

}

#main-container [class*="__accordion-cont"] {

  display: flex; /* flexを維持 */

  flex-direction: column;

  align-items: center;

  max-height: 0;

  opacity: 0;

  overflow: hidden;

  transition:

    max-height 0.8s ease,

    opacity 1s ease,

    padding 0.8s ease;

}



#main-container [class*="__accordion-cont"].is-open {

  opacity: 1;

}



#main-container .accordion-inner {

  min-height: 0;

}

#main-container [class*="__accordion-btn"] {

  display: grid;

  place-items: center;

  position: relative;

  cursor: pointer;

  background: none;

  border: none;

}



#main-container .btn-close-01,

#main-container .btn-open-01 {

  grid-area: 1 / 1;

  transition:

    opacity 0.3s ease,

    visibility 0.3s;

}



#main-container .btn-close-01 {

  opacity: 0;

  visibility: hidden;

}

#main-container .is-open + [class*="__accordion-btn"] .btn-close-01 {

  opacity: 1;

  visibility: visible;

}



#main-container .is-open + [class*="__accordion-btn"] .btn-open-01 {

  opacity: 0;

  visibility: hidden;

}

#main-container .left__logo-cont {

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

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: calc(14 * var(--formula_pc));

}



#main-container .lp-left__h3 {

  font-family: var(--desire);

  color: var(--navy);

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

  line-height: 1;

  letter-spacing: 0.05em;

  text-align: center;

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

  display: flex;

  flex-direction: column;

  gap: calc(6 * var(--formula_pc));

}

#main-container .lp-left__h3 span {

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

  display: block;

  letter-spacing: 0.05em;

  color: var(--navy);

}



#main-container .left__icon-cont {

  display: flex;

  gap: calc(5 * var(--formula_pc));

}



#main-container .lp-pc-icon-01 {

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

}



#main-container .lp-pc-icon-02 {

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

}



#main-container .lp-pc-icon-03 {

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

}



#main-container .lp-pc-icon-04 {

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

}



#main-container .sec-set {

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

  position: relative;

}



#main-container .sec1 {

  background: linear-gradient(

    190deg,

    var(--sky-blue) 30%,

    /* 0%から30%までずっと青 */ var(--beige) 100%

  );

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

}



#main-container .sec1__mv-cont {

  position: relative;

}



#main-container .sec1-img-01 {

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

}



#main-container .sec1-txt-01 {

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

  position: absolute;

  left: calc(-7 * var(--formula));

  right: 0;

  margin-inline: auto;

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

}



#main-container .sec1__h3 {

  position: absolute;

  font-family: var(--desire);

  color: var(--white);

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

  line-height: 1;

  letter-spacing: 0.05em;

  text-align: center;

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

  margin-inline: auto;

  left: 0;

  right: 0;

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

  display: flex;

  flex-direction: column;

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

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

}

#main-container .sec1__h3 span {

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

  display: block;

  letter-spacing: 0.05em;

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

  color: var(--white);

}



#main-container .sec1-txt-02 {

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

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

}



#main-container .sec1__txt {

  font-family: var(--shuei-gothic);

  color: var(--navy);

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

  line-height: 2;

  letter-spacing: 0.1em;

  text-align: center;

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

  padding: 0 0 calc(81 * var(--formula)) calc(2 * var(--formula));

}



#main-container .sec1__icon-cont {

  display: grid;

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

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

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

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

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

}



#main-container .sec1-icon-01 {

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

}



#main-container .sec1-icon-02 {

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

}



#main-container .sec1-icon-03 {

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

}



#main-container .sec1-icon-04 {

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

}



#main-container .sec2 {

  background: linear-gradient(190deg, var(--aqua), var(--pale-aqua));

  position: relative;

  z-index: 0;

  overflow: hidden;

  padding: calc(101 * var(--formula)) 0 calc(99 * var(--formula)) 0;

}



#main-container .sec2::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

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

  background-repeat: no-repeat;

  background-position: top center;

  background-size: 100% auto;

  mix-blend-mode: hard-light;

  opacity: 0.5;

  z-index: -1;

}



#main-container .sec2-txt-01 {

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

}



#main-container .sec2-img-01 {

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

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

}



#main-container .sec2__credit {

  font-family: var(--shuei-gothic);

  color: var(--navy);

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

  line-height: 2;

  letter-spacing: 0.1em;

  text-align: center;

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

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

}



#main-container .sec2__lead-txt {

  font-family: var(--shipori-mincho);

  color: var(--navy);

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

  line-height: 2;

  letter-spacing: 0.1em;

  text-align: center;

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

  padding: calc(68 * var(--formula)) 0 calc(41 * var(--formula))

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

}



#main-container .sec2__accordion-cont {

  display: flex;

  flex-direction: column;

  align-items: center;

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

}



#main-container .sec2__accordion-txt1 {

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

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

}



#main-container .sec2__accordion-txt2 {

  padding: 0 0 calc(97 * var(--formula)) calc(2 * var(--formula));

}

#main-container .sec2__accordion-desc2 {

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

  letter-spacing: 0.0896em;

}



#main-container .sec2__accordion-btn {

  position: relative;

  padding: 0;

}

#main-container .is-open .sec2__accordion-btn {

  margin: 0 0 0 0;

}



#main-container .btn-close-01 {

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

}



#main-container .btn-open-01 {

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

}



#main-container .sec3 {

  /* 背景の基準点 */

  width: 100%;

  background: var(--light-mint);

  display: block;

  overflow: visible !important;

}

.sec3 .sec3__inner {

  position: relative; /* z-indexを有効にするために必要 */

  z-index: 1; /* 背景(z-index: -1)より確実に前に出す */

  width: 100%; /* flexの子要素としての幅を維持 */

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

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

  position: relative;

  z-index: 1;

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

}

.sec3__bg-frame {

  position: absolute !important;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 0;

  pointer-events: none;

}



/* 2. 実際に画面に固定される「画像」 */

.sec3__bg-sticky {

  position: sticky !important;

  top: 0;

  width: 100%;

  height: 100vh;

  background-image: url(../img/sec3-bg-01.png);

  background-repeat: no-repeat;

  background-position: top center;

  background-size: cover;

}

#main-container .sec3__h3 {

  padding: 0 0 calc(42 * var(--formula)) calc(4 * var(--formula));

}



#main-container .sec3__point-cont1 {

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

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

}



#main-container .sec3-number-01 {

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

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

  left: calc(74 * var(--formula));

}



#main-container .sec3__point-cont2 {

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

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

  align-self: start;

}



#main-container .sec3__point-txt2 {

  left: calc(-19 * var(--formula));

}



#main-container .sec3-number-02 {

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

  right: calc(-44 * var(--formula));

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

}



#main-container .sec3__point-cont3 {

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

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

  align-self: end;

}



#main-container .sec3__point-txt3 {

  left: calc(-66 * var(--formula));

}



#main-container .sec3-number-03 {

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

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

  right: calc(39 * var(--formula));

}



#main-container .sec3__point-cont4 {

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

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

}



#main-container .sec3-number-04 {

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

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

  left: calc(-19 * var(--formula));

}



#main-container .sec3__point-cont5 {

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

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

  align-self: start;

}



#main-container .sec3-number-05 {

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

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

  right: calc(-24 * var(--formula));

}



#main-container .sec3__point-cont6 {

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

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

  align-self: end;

}



#main-container .sec3__point-txt6 {

  left: calc(-88 * var(--formula));

}



#main-container .sec3-number-06 {

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

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

  right: calc(52 * var(--formula));

}



#main-container .sec3__point-cont7 {

  width: 100%;

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

  display: flex;

  flex-direction: column;

  justify-content: center;

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

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

}



#main-container .sec3__icon-cont {

  display: flex;

  flex-direction: column;

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

}



#main-container .sec3__icon--upper,

#main-container .sec3__icon-lower {

  display: flex;

  flex-wrap: nowrap;

  justify-content: center;

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

}

#main-container .sec3-icon-01 {

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

}



#main-container .sec3-icon-02 {

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

}



#main-container .sec3-icon-03 {

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

}



#main-container .sec3-icon-04 {

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

}



#main-container .sec3-icon-05 {

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

}



#main-container .sec3-icon-06 {

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

}



#main-container .sec3-icon-07 {

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

}



#main-container .sec3-number-07 {

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

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

  left: calc(69 * var(--formula));

}



#main-container .sec3__desc1 {

  padding: calc(53 * var(--formula)) calc(55 * var(--formula)) 0;

}



#main-container .sec3__desc2 {

  padding: calc(12 * var(--formula)) calc(55 * var(--formula)) 0;

  line-height: 1.75;

}



#main-container .sec4 {

  background: linear-gradient(190deg, var(--sky-blue) 0%, var(--beige2) 100%);

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

  position: relative;

  z-index: 0;

  overflow: hidden;

}

#main-container .sec4::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

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

  background-repeat: no-repeat;

  background-position: top center;

  background-size: 100% auto;

  mix-blend-mode: hard-light;

  opacity: 0.5;

  z-index: -1;

}

#main-container .sec4__h3 {

  padding: 0 0 calc(48 * var(--formula)) calc(4 * var(--formula));

}



#main-container .sec4-img-01 {

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

}



#main-container .sec4-txt-01 {

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

  margin: calc(80 * var(--formula)) 0 0 calc(-4 * var(--formula));

}



#main-container .sec4-img-02 {

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

  margin: calc(85 * var(--formula)) 0 calc(65 * var(--formula))

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

}



#main-container .sec4__accordion-cont {

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

  display: flex;

  flex-direction: column;

  align-items: center;

}



#main-container .sec4__accordion-txt {

  font-family: var(--shuei-gothic);

  color: var(--navy);

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

  line-height: 2;

  letter-spacing: 0.1em;

  text-align: center;

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

  padding: calc(15 * var(--formula)) 0 calc(67 * var(--formula)) 0;

}



#main-container .sec4__accordion-btn {

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

}



#main-container .sec4__check-all {

  font-family: var(--desire);

  color: var(--white);

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

  line-height: 1.25;

  letter-spacing: 0.05em;

  text-align: center;

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

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

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

  background: var(--navy);

  border-radius: 50%;

  display: grid;

  place-items: center;

  position: relative;

  padding: calc(22 * var(--formula)) 0 0 calc(3 * var(--formula));

}



#main-container .sec4__copyright {

  font-family: var(--desire);

  color: var(--navy);

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

  line-height: 1.27;

  letter-spacing: 0.05em;

  text-align: center;

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

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

}



#main-container .right__check-all {

  font-family: var(--desire);

  color: var(--navy);

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

  line-height: 1;

  letter-spacing: 0.05em;

  text-align: center;

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

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

  height: calc(132 * var(--formula_pc));

  border-width: 1px;

  border-style: solid;

  border-radius: 50%;

  border-color: var(--navy);

  display: grid;

  place-items: center;

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

  padding-top: calc(8 * var(--formula_pc));

  box-sizing: border-box;

}

/* 

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

animation

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

*/

#main-container .g-reveal {

  opacity: 0;



  /* 1. 参考サイトの超詳細なグラデーションマスク */

  /* 0deg（下から上）で、非常に細かく透明度を変化させて境界をぼかしています */

  -webkit-mask-image: linear-gradient(

    0deg,

    transparent,

    transparent 39.6666666667%,

    rgba(0, 0, 0, 0.02) 43.3333333333%,

    rgba(0, 0, 0, 0.08) 45%,

    rgba(0, 0, 0, 0.18) 46.6666666667%,

    rgba(0, 0, 0, 0.32) 48.3333333333%,

    rgba(0, 0, 0, 0.5) 50%,

    rgba(0, 0, 0, 0.68) 51.6666666667%,

    rgba(0, 0, 0, 0.82) 53.3333333333%,

    rgba(0, 0, 0, 0.92) 55%,

    rgba(0, 0, 0, 0.98) 56.6666666667%,

    #000 58.3333333333%,

    #000

  );

  mask-image: linear-gradient(

    0deg,

    transparent,

    transparent 39.6666666667%,

    rgba(0, 0, 0, 0.02) 43.3333333333%,

    rgba(0, 0, 0, 0.08) 45%,

    rgba(0, 0, 0, 0.18) 46.6666666667%,

    rgba(0, 0, 0, 0.32) 48.3333333333%,

    rgba(0, 0, 0, 0.5) 50%,

    rgba(0, 0, 0, 0.68) 51.6666666667%,

    rgba(0, 0, 0, 0.82) 53.3333333333%,

    rgba(0, 0, 0, 0.92) 55%,

    rgba(0, 0, 0, 0.98) 56.6666666667%,

    #000 58.3333333333%,

    #000

  );

  -webkit-mask-size: 100% max(300%, 100vh);

  mask-size: 100% max(300%, 100vh);

  -webkit-mask-repeat: no-repeat;

  mask-repeat: no-repeat;

  -webkit-mask-position: center 100%;

  mask-position: center 100%;

  transform: translateY(calc(30 * var(--formula)));

  transition:

    opacity 2.4s cubic-bezier(0.51, 0.21, 0.41, 1),

    transform 2.4s cubic-bezier(0.51, 0.21, 0.41, 1),

    mask-position 3.2s cubic-bezier(0.51, 0.21, 0.41, 1),

    -webkit-mask-position 3.2s cubic-bezier(0.51, 0.21, 0.41, 1);



  /* GPU負荷を抑えつつ滑らかにするおまじない */

  will-change: mask-position, opacity, transform;

}



#main-container .g-reveal.is-visible {

  opacity: 1;

  transform: translateY(0);



  /* 6. 発火時：マスクの位置を上へスライド（見える部分へ移動） */

  -webkit-mask-position: center 0;

  mask-position: center 0;

}



#main-container .blur-in {

  opacity: 0;

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

  transition:

    transform 1.5s ease,

    opacity 1.5s ease,

    filter 1.5s ease,

    -webkit-transform 1.5s ease,

    -webkit-filter 1.5s ease;

}

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

  opacity: 1;

  filter: blur(0);

}

#main-container .slide-up {

  opacity: 0;

  transform: translateY(calc(30 * var(--formula)));

  transition:

    opacity 2s,

    transform 0.5s;

}

#main-container .slide-up.delay1 {

  transition-delay: 0.3s;

}

#main-container .is-visible .slide-up,

#main-container .is-visible.slide-up {

  opacity: 1;

  transform: translateY(0);

}



/* 

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

SP settings

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

*/

@media (max-width: 767px) {

  #main-container.MC260317uv {

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

  }

  #main-container .lp-left-area,

  #main-container .lp-right-area {

    display: none;

  }

  #main-container .lp-main-area {

    width: 100%;

  }

}