@charset "UTF-8";

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

.main-area.lp {

  margin-bottom: 0;

}

.main-area {

  display: block;

  padding-top: 0;

}

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

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

  background: transparent !important;

}

#main-container {

  min-width: 100%;

  font-feature-settings: "palt";

  position: relative;

  display: flex;

  --font-jpn: dnp-shuei-mincho-pr6n, sans-serif;

  --font-credit: trajan-pro-3, serif;

  --font-eng: bookmania, serif;

  --font-r: 400;

  --black: #000000;

  --white: #ffffff;

  --gray: #3c3c3c;

  --light-gray: #c4c4c4;

  --gold: #b4a064;

  --cream: #f4e9c3;

  --pc-width: 1400;

  --sp-width: 750;

  --pc-artboard-width: 477;

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

}



#main-container [class*="-img-"]:has(a) {

  background: var(--white);

  display: flex;

  flex-direction: column;

  line-height: 0;

  font-size: 0;

}



/* --- 属性セレクタ設定 --- */



#main-container [class*="__inner--vertical"] {

  display: flex;

  flex-direction: column;

  align-items: center;

}



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

  font-family:;

  color:;

  font-size:;

  line-height:;

  letter-spacing:;

  text-align:;

  font-weight:;

}



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

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

  color: var(--gray);

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

  line-height: calc(72 / 42);

  letter-spacing: 0;

  text-align: center;

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

  text-transform: uppercase;

}

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

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

  color: var(--gray);

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

  line-height: 2;

  letter-spacing: 0.1em;

  text-align: center;

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

}

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

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

  color: var(--gray);

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

  line-height: 2;

  letter-spacing: 0.1em;

  text-align: center;

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

}

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

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

  color: var(--gold);

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

  line-height: calc(3 / 2);

  letter-spacing: 0;

  text-align: justify;

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

}



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

  color: var(--gray);

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

}

#main-container [class*="sec02__inner--postcard"] {

  background-color: var(--cream);

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

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

  display: flex;

  flex-direction: column;

  align-items: center;

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

}

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

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

  color: var(--gray);

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

  line-height: 2;

  letter-spacing: 0.05em;

  text-align: center;

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

  text-transform: uppercase;

}



#main-container .sec03 [class*="__txt--item-name"] {

  color: var(--gold);

  text-align: left;

  line-height: calc(49 / 28);

  margin: calc(52 * var(--formula)) 0 calc(87 * var(--formula))

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

}

#main-container [class*="sec03__inner--postcard"] {

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

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

  display: flex;

  flex-direction: column;

  align-items: center;

  background: var(--white);

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

}

#main-container [class*="sec04__inner--postcard"] {

  display: grid;

  justify-items: center;

  align-items: start;

}

#main-container [class*="sec04__inner--postcard"] > * {

  grid-area: 1/1;

}



/* --- 固有クラス設定 --- */



#main-container .sec-set {

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

}



#main-container .z1-relative {

  z-index: 1;

  position: relative;

}



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



#main-container .lp-left-area {

  flex: 1;

  position: sticky;

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

  height: 100vh;

}



#main-container .lp-mv_pc,

#main-container .lp-mv_pc a,

#main-container .lp-mv_pc img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

}



#main-container .lp-main-area {

  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

}



#main-container .sec01 {

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

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  padding: calc(45 * var(--formula_pc)) 0 calc(192 * var(--formula)) 0;

  position: sticky;

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

}



#main-container .sec01__inner--vertical01 {

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

}



#main-container .sec01__h3 {

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

}



#main-container .sec01__txt--en01 {

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

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

}



#main-container .sec02 {

  background-image: url(../img/lp-bg-02.jpg);

  background-size: cover;

  background-position: top center;

  background-repeat: no-repeat;

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

  z-index: 1;

  top: calc(100vh - 4159 * var(--formula));

  position: sticky;

}



#main-container .sec02__h3 {

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

}





#main-container .sec02__inner--postcard01 {

  margin: calc(88 * var(--formula)) 0 calc(159 * var(--formula)) 0;

}



#main-container .lp-img-01 {

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

}



#main-container .sec02__txt--item-name01 {

  margin: calc(49 * var(--formula)) 0 calc(42 * var(--formula)) 0;

}



#main-container .lp-img-02 {

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

  --rot: -10deg;

}



#main-container .sec02__txt--item-name02 {

  margin: calc(68 * var(--formula)) 0 calc(103 * var(--formula)) 0;

}



#main-container .lp-img-03 {

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

}



#main-container .sec02__txt--item-name03 {

  margin: calc(49 * var(--formula)) 0 calc(42 * var(--formula)) 0;

}





#main-container .sec03 {

  background-image: url(../img/lp-bg-03.jpg);

  background-size: cover;

  background-position: top center;

  background-repeat: no-repeat;

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

  z-index: 2;

  top: calc(100vh - 4502 * var(--formula));

  position: sticky;

}



#main-container .sec03__h2 {

  color: var(--light-gray);

}



#main-container .sec03__h3 {

  color: var(--light-gray);

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

}



#main-container .sec03__txt--desc01 {

  color: var(--light-gray);

}



#main-container .sec03__txt--en01 {

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

  margin: calc(46 * var(--formula)) 0 calc(93 * var(--formula)) 0;

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

}



#main-container .lp-img-04 {

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

}





#main-container .lp-img-05 {

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

}



#main-container .lp-img-06 {

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

}



#main-container .sec04 {

  background-image: url(../img/lp-bg-04.jpg);

  background-size: cover;

  background-position: top center;

  background-repeat: no-repeat;

  margin: 0 0 0 0;

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

  z-index: 3;

  position: sticky;

  top: calc(100vh - 4509 * var(--formula));

}



#main-container .sec04__h3 {

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

}



#main-container .sec04__txt--en01 {

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

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

}



#main-container .sec04__inner--vertical02 {

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

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

}



#main-container .lp-img-07 {

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

  --rot: 4deg;

}



#main-container .z5-relative {

  z-index: 5;

  position: relative;

}



#main-container .lp-img-08 {

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

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

}



#main-container .sec04__inner--vertical03 {

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

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

}



#main-container .lp-img-09 {

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

  --rot: -4deg;

}



#main-container .lp-img-10 {

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

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

}



#main-container .sec04__inner--vertical04 {

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

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

}



#main-container .lp-img-11 {

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

  --rot: 4deg;

}



#main-container .lp-img-12 {

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

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

}



#main-container .sec05 {

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

  z-index: 4;

  position: sticky;

  top: calc(100vh - 1395 * var(--formula));

  overflow: hidden;

  background: var(--white);

}

#main-container .sec05::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-image: url(../img/lp-bg-05.jpg);

  background-size: cover;

  background-position: top center;

  background-repeat: no-repeat;

  opacity: 0.5; /* ★不透明度50% */

  z-index: -1; /* コンテンツ（テキストや画像）の背後に配置 */

  pointer-events: none; /* マウス操作を邪魔しない */

}



#main-container .sec05__inner--grid01 {

  display: grid;

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

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

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

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

  margin: calc(42 * var(--formula)) 0 calc(153 * var(--formula)) 0;

}



#main-container .lp-img-13 {

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

}



#main-container .lp-img-14 {

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

}



#main-container .lp-img-15 {

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

}



#main-container .lp-img-16 {

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

}



#main-container .lp-img-17 {

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

}



#main-container .lp-img-18 {

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

}



#main-container .lp-img-19 {

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

}



#main-container .lp-img-20 {

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

}



#main-container .lp-img-21 {

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

}



#main-container .lp-txt-01 {

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

}

#main-container .lp-mv_sp {

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

  display: none;

}

@media (max-width: 767px) {

  #main-container {

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

  }

  #main-container .lp-left-area {

    display: none;

  }

  #main-container .lp-main-area {

    flex: 1;

  }

  #main-container .lp-mv_sp {

    display: block;

  }

  #main-container .sec01 {

    top: calc(100vh - 1966 * var(--formula));

  }

  #main-container .sec01 {

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

  }

}

/* 

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

animation

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

*/

#main-container .zoom-out {

  overflow: hidden;

}

#main-container .zoom-out img {

  opacity: 0;

  transform: scale(1.15); /* 初期状態は少し大きめ */

  transition:

    transform 2s cubic-bezier(0.22, 0.61, 0.36, 1),

    opacity 1.5s ease;

}

#main-container .zoom-out.is-visible img {

  opacity: 1;

  transform: scale(1);

}

#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 .rotate-in {

  opacity: 0;

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

  rotate: calc(var(--rot, 0deg) + 10deg);



  transition:

    opacity 1.6s cubic-bezier(0.22, 0.61, 0.36, 1),

    translate 1.6s cubic-bezier(0.22, 0.61, 0.36, 1),

    scale 1.6s cubic-bezier(0.22, 0.61, 0.36, 1),

    rotate 1.6s cubic-bezier(0.22, 0.61, 0.36, 1),

    filter 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);

  will-change: opacity, filter, rotate;

}



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

  opacity: 1;

  filter: blur(0);

  rotate: var(--rot, 0deg);

}



#main-container .rotate-cw {

  opacity: 0;

  transform: translate(calc(-40 * var(--formula)), calc(100 * var(--formula)))

    rotate(calc(var(--rot, 0deg) - 4deg));

  transition:

    opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),

    transform 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  will-change: opacity, transform;

  box-shadow: calc(0 * var(--formula)) calc(5 * var(--formula))

    calc(15 * var(--formula)) calc(0 * var(--formula)) rgba(0, 0, 0, 0.35);

}



/* 反時計回り（右下からスライドインしつつ左回転して着地） */

#main-container .rotate-ccw {

  opacity: 0;

  transform: translate(calc(40 * var(--formula)), calc(100 * var(--formula)))

    rotate(calc(var(--rot, 0deg) + 4deg));

  transition:

    opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),

    transform 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  will-change: opacity, transform;

  box-shadow: calc(0 * var(--formula)) calc(5 * var(--formula))

    calc(15 * var(--formula)) calc(0 * var(--formula)) rgba(0, 0, 0, 0.35);

}



/* 表示時（指定の定位置・最終角度へ） */

#main-container .rotate-cw.is-visible,

#main-container .rotate-ccw.is-visible {

  opacity: 1;

  transform: translate(0, 0) rotate(var(--rot, 0deg));

}

/* 初期状態：アニメーション前〜最中はクリーム色 */

#main-container [class*="sec02__inner--postcard"] [class*="-img-"]:has(a) {

  background-color: var(--cream);

  /* 背景色が白へ変わるアニメーション（画像のフェードイン時間に合わせる） */

  transition: background-color 1.5s ease;

}



/* 表示完了時（.is-visible付与時）：背景色を白に変更 */

#main-container

  [class*="sec02__inner--postcard"]

  [class*="-img-"].is-visible:has(a) {

  background-color: var(--white);

}