/* ======================================
   共通ベース
====================================== */

*,
*::before,
*::after { box-sizing: border-box; }

body{
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Yu Gothic", "游ゴシック体",
    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: #222;
  background: #ffffff; /* 左右余白の色 */
  line-height: 1.7;
}

a{ text-decoration: none; color: inherit; }

/* 既定の section 余白（必要に応じて各セクションで上書き） */
section{ padding: 60px 0; }

/* ======================================
   背景：中央80%（左右余白）
====================================== */

.bg{
  position: fixed;
  top: 0;
  left: 50%;
  width: 80vw;
  height: 100vh;
  transform: translateX(-50%);
  overflow: hidden;
  z-index: -1;
}

.bg-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bg-overlay{
  position: absolute;
  inset: 0;
  background-image: url("https://crown885.com/img/27012025.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.7;
  pointer-events: none;
}

/* ======================================
   LP本体：背景と同じ80%幅
====================================== */

.content{
  position: relative;
  z-index: 1;
}

.wrap{
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px 80px;
}

/* ======================================
   HERO（TOP画像）
   - wrap の左右padding(16px)を相殺して背景枠100%に
====================================== */

.hero{
  position: relative;
  padding: 0 !important;
  text-align: center;
  color: #fff;
  background: transparent;
  overflow: visible; /* 重ね演出がある場合は visible 推奨 */
}

/* 注意：HTML構造が wrap > hero でなくても効くよう .wrap .hero にする */
.wrap .hero{
  margin-left: -16px;
  margin-right: -16px;
  width: calc(100% + 32px);
}

.hero-inner{
  position: relative;
  z-index: 1;
}

.hero-figure{ position: relative; width: 100%; margin: 0; }
.hero-person{ width: 100%; height: auto; display: block; }

/* 人物下の文字画像などを使う場合 */
.hero-person-text{
  display: block;
  width: 100%;
  max-width: 1100px;
  margin: 12px auto 0;
  height: auto;
}

/* 見出しバナー（使う場合） */
.lp-midashi{
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
  width: 100%;
  padding: 0 16px;
}

.lp-midashi-img{
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto;
}

/* 円盤（HEROで使う場合のみHTMLに置く） */
.dial-wrap{
  position: absolute;
  top: -20vw;
  left: -50%;
  width: 130vw;
  max-width: 900px;
  pointer-events: none;
  z-index: 0;
}
.dial-rotate{
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.35;
  filter: blur(0.5px);
  animation: dialSpin 80s linear infinite;
}
@keyframes dialSpin{
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ======================================
   choice-bg（選択セクション）
   - 上のセクションに少し被せる
   - 背景画像（choice-bg-img）の上端だけ透過させる
====================================== */

.choice-bg{
  position: relative;
  width: 100%;
  margin: 40px auto;
  overflow: hidden;
  z-index: 3;              /* 上のセクションより前に出したい場合 */
  margin-top: -10px;       /* 被せ量（調整） */
}

/* 背景画像（最背面） */
.choice-bg-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;

 /* 上端だけ透過（境界を馴染ませる） */
-webkit-mask-image: linear-gradient(
  to bottom,
  rgba(0,0,0,0.15) 0px,
  black 20px
);
mask-image: linear-gradient(
  to bottom,
  rgba(0,0,0,0.15) 0px,
  black 10px
);
 
}

/* 中身（カード群） */
.choice-content{
  position: relative;
  z-index: 1;
  min-height: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 12枚グリッド */
.choice-grid{
  width: 100%;
  max-width: 760px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 auto;
}

/* 画像カード */
.choice-card{
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 3 / 4;
}

/* 枠や光り演出を消す最終形（必要なら） */
.choice-card,
.choice-card.is-selected{
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 画像は切らずに全体表示 */
.choice-card-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

/* 月パネル（必要なら） */
.month-panel{
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.45);
  background: rgba(15,23,42,0.78);
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
}
.month-panel.is-show{
  opacity: 1;
  transform: translateY(0);
}
.month-panel-inner{ padding: 14px 14px 16px; }
.month-title{
  font-weight: 800;
  font-size: 15px;
  color: #fef9c3;
  margin-bottom: 6px;
}
.month-desc{
  font-size: 13px;
  color: #e5e7eb;
  line-height: 1.6;
}

/* ======================================
   中盤キャラクター（円盤・人物・文字上下）
   - 5枚を重ねて参考画像のバランスに寄せる
====================================== */

.secondcharacter{
  position: relative;
  padding: 0 !important;
  text-align: center;
  color: #fff;
  background: transparent;
  overflow: visible;
  z-index: 2;
}

.secondcharacter-inner{
  position: relative;
  z-index: 1;
}

.secondcharacter-visual{
  width: 100%;
  max-width: 760px;
  margin: 0 auto 24px;
}

.secondcharacter-figure{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
}

/* figure内はすべてabsoluteで重ねる */
.secondcharacter-figure > img{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  height: auto;
}

/* 円盤：人物の中央背面 */
.secondcharacter-dial{
  top: 40%;
  width: 90%;
  z-index: 1;
  opacity: 0.28;
  pointer-events: none;
}

/* 人物 */
.secondcharacter-person{
  top: 40%;
  width: 100%;
  z-index: 2;
}

/* 文字上 */
.secondcharacter-text-top{
  top: 20%;
  width: 100%;
  max-width: 680px;
  z-index: 3;
  pointer-events: none;
}

/* 文字下 */
.secondcharacter-text-bottom{
  top: 100%;
  width: 95%;
  max-width: 680px;
  z-index: 4;
  pointer-events: none;
}

/* 注意：フレームを「次セクション」に分離して被せる運用の場合、
   secondcharacter-frame はここでは使わない（HTMLから外す） */

/* 円盤回転（center維持のため translateX も含める） */
@keyframes dialSpinCentered{
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}
.secondcharacter-dial.dial-rotate{
  animation: dialSpinCentered 80s linear infinite;
}
/* 下の枠セクションを上に引き上げて被せる */
.greeting{
  position: relative;
  z-index: 3;            /* secondcharacterより前に */
  margin-top: -20px;     /* ←被せ量（-20〜-70pxで調整） */
}

/* 枠は普通に横幅100%でOK */
.greeting-frame{
  width: 95%;
  height: auto;
  display: block;
}
.greeting-wrap{
  display: flex;
  justify-content: center; /* 横中央 */
}


/* ======================================
   セクション共通（必要なら）
====================================== */

.section-title{
  text-align: center;
  color: #f9fafb;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 24px;
  position: relative;
}

.section-title::after{
  content: "";
  display: block;
  width: 80px;
  height: 2px;
  margin: 12px auto 0;
  background: linear-gradient(to right, #fbbf24, #f97316);
}

.section-lead{
  text-align: center;
  font-size: 14px;
  color: #e5e7eb;
  max-width: 680px;
  margin: 0 auto 32px;
}

/* ======================================
   VOICES（お客様の声）
   - wrap幅いっぱいで表示する版
====================================== */

.voice-vertical{
  width: 100%;
  margin: 0 auto;
  padding: 20px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 90%をやめて最大化（左右16px余白は残す） */
.voice-item{
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
  margin: 0 auto;
}

.voice-img{
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
}

/* もしこのセクションだけ wrap の左右paddingも使って端まで出したいなら
.voice-vertical{
  margin-left: -16px;
  margin-right: -16px;
  width: calc(100% + 32px);
}
.voice-item{ padding: 0; }
*/

/* ======================================
   waku 背景（鑑定紹介）
====================================== */

.waku-area{
  width: 95%;
  margin: 0 auto 24px;
  position: relative;
  text-align: center;
  overflow: hidden;
  z-index: 2;
}

.waku-img{
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
}

/* ======================================
   FOOTER
====================================== */

footer{
  border-top: 1px solid rgba(148,163,184,0.5);
  padding: 18px 0 0;
  font-size: 11px;
  color: #9ca3af;
}

.footer-links{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}

.footer-links a{
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.footer-copy{
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 8px;
}

/* ======================================
   モーダル（シート）
====================================== */

.sheet{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.sheet.is-open{ display: block; }

.sheet-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,0.65);
  backdrop-filter: blur(2px);
}

.sheet-panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 18px));
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  border-radius: 18px;
   border: 3px solid rgba(148,163,184,0.5);
  background: rgba(157, 131, 235,0.75);
  box-shadow: 0 30px 90px rgba(0,0,0,0.65);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}
.sheet.is-open .sheet-panel{
  opacity: 1;
  transform: translate(-50%, -50%);
}

.sheet-close{
  position: sticky;
  top: 0;
  margin-left: auto;
  display: block;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 26px;
  cursor: pointer;
}

.sheet-head{ padding: 10px 18px 0; }
.sheet-title{
  margin: 0 0 6px;
  font-size: 25px;
  color: #fef9c3;
  font-weight: 800;
}
.sheet-sub{
  margin: 0 0 12px;
  color: #e5e7eb;
  font-size: 18px;
}
.sheet-body{
  padding: 0 18px 18px;
  color: #e5e7eb;
  font-size: 18px;
  line-height: 1.7;
}

body.is-lock{ overflow: hidden; }

/* ======================================
   レスポンシブ：1024px以下は余白なし（背景100%）
====================================== */

@media (max-width: 1024px){
  .bg{
    left: 0;
    transform: none;
    width: 100vw;
  }
  .wrap{
    width: 100vw;
  }
}

/* スマホ微調整（必要なら） */
@media (max-width: 768px){
  /* 文字画像などの上限調整 */
  .lp-midashi-img{ max-width: 640px; }

  .choice-grid{
    max-width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* secondcharacter の舞台比率が合わない場合はここで調整 */
  /* .secondcharacter-figure{ aspect-ratio: 3 / 4; } */
}
/* ======================================
選択肢カードテキスト
====================================== */

.birth-select-title{
  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "Noto Serif JP",
    serif;

  font-weight: 900;
  font-size: clamp(20px, 5.6vw, 50px);
  text-align: center;
  margin: 0 0 28px;

  /* ゴールドグラデーション */
  background: linear-gradient(
    to bottom,
    #fff7c2 0%,
    #f6d86a 35%,
    #d9a824 60%,
    #b78510 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* 立体感 */
  text-shadow:
    0 1px 0 #fff6c8,
    0 2px 2px rgba(0,0,0,0.25),
    0 0 6px rgba(255,215,100,0.4);

  letter-spacing: 0.05em;
}

.birth-select-title::after{
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(to right, transparent, #d9a824, transparent);
}

@keyframes goldShine{
  0% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
  100% { filter: brightness(1); }
}

.birth-select-title{
  animation: goldShine 3s ease-in-out infinite;
}



.sheet-banner{
  margin-top: 20px;
  text-align: center;
}

.sheet-banner-link{
  display: block;
}

.sheet-banner-img{
  display: block;
  width: 50%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
}


.page-block{
  width: 100%;
  padding: 60px 20px;
  box-sizing: border-box;
}

.info-box{
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 28px;
  background: rgba(40, 40, 40, 0.72);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  color: #fff;
}

.page-title{
  margin: 0 0 24px;
  text-align: center;
  font-size: 32px;
  font-weight: bold;
}

.info-table{
  width: 100%;
  border-collapse: collapse;
}

.info-table th,
.info-table td{
  padding: 16px 12px;
  vertical-align: top;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  line-height: 1.8;
  font-size: 16px;
}

.info-table th{
  width: 220px;
  text-align: left;
  font-weight: bold;
  color: #ffffff;
}

.info-table td{
  color: rgba(255,255,255,0.92);
}


body{
  margin: 0;
  background: url("/img/bg-company.jpg") center center / cover no-repeat fixed;
}

.info-box{
  background: rgba(60, 60, 60, 0.68);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-top: 2px solid #c8a95b;
  border-bottom: 2px solid #c8a95b;
}

.page-title{
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}