/* =========================================
   Orochi Fan Site – LeeLee風 style.css（完成版）
   ✅この1本だけにする（他のCSSは全部削除）
   ========================================= */

/* ---------- 基本設定 ---------- */
:root{
  --text: rgba(0,0,0,0.78);
  --muted: rgba(0,0,0,0.58);
  --border: rgba(0,0,0,0.06);

  --bg-gray: #f3f4f6;

  --radius: 26px;

  --shadow: 0 12px 28px rgba(0,0,0,0.10);
  --shadow-hover: 0 18px 40px rgba(0,0,0,0.14);

  --btn-bg: #5a5a5a;
  --btn-bg-hover: #787878;
}

*{ box-sizing:border-box; }

html, body{ height:100%; }

body{
  margin:0;
  font-family:"M PLUS Rounded 1c", system-ui, -apple-system,
    "Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  color:var(--text);
  line-height:1.75;
  font-size:15px;
  background:#fff;
}

/* 画像の下に余計な隙間が出ないように */
img{ display:block; max-width:100%; height:auto; }

/* =========================================
   HERO（背景エリア）
   ========================================= */
.hero{
  position: relative;
  text-align: center;
  background: url("./assets/hero_bg.jpg") center/cover no-repeat;

  /* ✅背景を画面幅いっぱい */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* ✅ここでヒーローの高さを作る（下の白帯対策も兼ねる） */
  padding: 92px 16px 72px;
  overflow: hidden;
}

/* ===== 読みやすさUP：ヒーロー背景に薄いベール ===== */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0.55); /* 白いベール（ふんわり） */
  pointer-events:none;
  z-index:0;
}

/* ヒーロー内の要素をベールより前に */
.hero > *{
  position: relative;
  z-index: 1;
}

/* 左上のバッジ（リーリー寄せ） */
.hero-badge{
  position:absolute;
  top: 28px;
  left: 32px;

  display:inline-flex;
  align-items:center;
  gap:10px;

  padding: 12px 20px;
  border-radius:999px;

  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  backdrop-filter: blur(10px);

  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(0,0,0,0.78);
  line-height: 1.2;
}

/* (from CNP) は添え物感 */
.hero-badge span{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(0,0,0,0.40);
  transform: translateY(1px);
}

/* 上の大きい一言 */
.hero-topline{
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(0,0,0,0.65);
}

/* キャラ */
.hero-chara{
  width: min(320px, 62vw);
  margin: 18px auto 0;
  filter: drop-shadow(0 16px 16px rgba(0,0,0,0.20));
  animation: floaty 4.6s ease-in-out infinite;
}

@keyframes floaty{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
  100%{ transform: translateY(0); }
}

/* 下側のまとまり */
.hero-bottom{
  max-width: 1100px;
  margin: 10px auto 0;
}

/* この、ふわっと〜 の文（リーリーみたいに大きめ） */
.hero-lead{
  margin: 18px auto 14px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: rgba(0,0,0,0.62);
  text-shadow: 0 2px 10px rgba(255,255,255,0.78);
}

/* カウントダウンBOX（リーリー風） */
.countdown-box{
  width: fit-content;
  margin: 0 auto;
  padding: 18px 22px;

  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 18px;

  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  backdrop-filter: blur(6px);

  text-align: center;
}

/* ラベル */
.countdown-box .label{
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(0,0,0,0.55);
  letter-spacing: 0.06em;
}

/* 数字行 */
.countdown-box .countdown{
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  color: rgba(0,0,0,0.72);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* 注釈 */
.countdown-box .note{
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: rgba(0,0,0,0.55);
}

/* ✅ HEROと本文の間に白い帯が出るのを防ぐ（犯人は最初のsectionのmargin） */
.wrap{ margin:0 auto; }
.wrap > .section:first-child{ margin-top:0; }

/* =========================================
   共通レイアウト
   ========================================= */
.wrap{
  max-width: 1100px;
  padding: 0 16px 64px;
}

.section{
  margin: 64px 0;
}

.h2, .section-title{
  text-align:center;
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 24px;
  color: rgba(0,0,0,0.68);
}

/* =========================================
   Secrets（グレー背景）
   ========================================= */
.section.secrets{
  background: var(--bg-gray);

  /* 画面幅いっぱいにグレー */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* 上下余白 */
  padding: 64px 0;
}

/* セクション内部はコンテンツ幅に戻す */
.section.secrets .h2,
.section.secrets .grid{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* グリッド */
.grid,
.works-grid{
  display: grid;
  gap: 26px;
}

@media (min-width: 760px){
  .grid,
  .works-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* カード共通 */
.card,
.work-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;

  display:flex;
  flex-direction:column;

  box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease;
}

.card:hover,
.work-card:hover{
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}

/* 画像 */
.card img,
.work-img{
  width:100%;
  height: 190px;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Secretsテキスト */
.card h3{
  margin: 16px 0 8px;
  padding: 0 20px;
  font-size: 20px;
  font-weight: 800;
  text-align: center;
}

.card p{
  margin: 0;
  padding: 0 20px 20px;
  font-size: 15px;
  line-height: 1.8;
  text-align: center;
  flex: 1;
}

/* Works側 */
.work-content{
  padding: 18px 20px 20px;
  text-align: center;
  display:flex;
  flex-direction:column;
  flex:1;
}

.work-content h3{
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 800;
}

.work-content p{
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  flex:1;
}

/* ボタン */
.btn-link{
  margin: 16px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 12px 20px;
  border-radius: 999px;

  background: var(--btn-bg);
  color: #fff;
  text-decoration: none;

  font-weight: 800;
  font-size: 15px;
}

.btn-link:hover{ background: var(--btn-bg-hover); }

.btn-link::after{
  content:"↗";
  font-size: 13px;
}

/* =========================================
   Footer（LeeLee風）
   ========================================= */
.footer{
  background: #4a4a4a;
  color: #fff;
  text-align: center;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  padding: 64px 16px 56px;
}

.footer a{
  display:block;
  width: fit-content;
  margin: 14px auto;

  color: #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.03em;

  text-decoration: none;
  border-bottom: 1px dotted rgba(255,255,255,0.75);
  padding-bottom: 6px;
}

.footer a:hover{
  border-bottom-color: rgba(255,255,255,1);
}

.footer .copyright{
  display:block;
  margin-top: 26px;
  font-size: 13px;
  opacity: 0.75;
}

/* =========================================
   Responsive
   ========================================= */
@media (max-width: 680px){
  .hero{
    padding: 84px 14px 64px;
  }

  .hero-badge{
    top: 20px;
    left: 20px;
    padding: 10px 16px;
    font-size: 14px;
  }
  .hero-badge span{ font-size: 11px; }

  .hero-topline{ font-size: 26px; }

  .hero-chara{ width: min(260px, 72vw); }

  .hero-lead{ font-size: 18px; }

  .countdown-box{ padding: 16px 18px; }
  .countdown-box .countdown{ font-size: 18px; }

  .h2,.section-title{ font-size: 22px; }

  .card img,.work-img{ height: 180px; }
}