/* =========================================
   福岡で笑おう！ 共通スタイル
   ========================================= */

/* ===== Theme & Base ===== */
:root{
  --red-1:#e2431f;
  --red-2:#a51f14;
  --beige:#f5efe6;
  --ink:#2e2a27;
  --shadow:0 8px 20px rgba(0,0,0,.08);
}

html { font-size: 100%; } /* 1rem = 16px */
html, body { overflow-x: hidden; }     /* フルブリードのはみ出し対策 */

body {
  margin: 0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
    "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Meiryo",sans-serif;
  color: var(--ink);
  background: var(--beige);
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
  -webkit-text-size-adjust: 100%;
}

/* ===== Typography ===== */
h1 {
  font-size: clamp(1.875rem, 4.5vw, 2.25rem);
  line-height: 1.3;
  margin: 0.2em 0 0.6em;
  font-weight: 800;
}
h2 {
  font-size: clamp(1.5rem, 3.6vw, 2rem);
  line-height: 1.35;
  margin: 0.2em 0 0.8em;
  font-weight: 800;
}
h3 {
  font-size: clamp(1.125rem, 2.8vw, 1.25rem);
  line-height: 1.4;
  margin: 0.2em 0 0.6em;
  font-weight: 700;
}
p { margin: 0.8em 0; }
.small, .caption { font-size: 0.875rem; line-height: 1.7; }
.caption--xs { font-size: 0.75rem; line-height: 1.6; }
.button, .label { font-size: clamp(1rem, 2.6vw, 1.125rem); }


.lead p {
  line-height: 1.9;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
}

/* ===== 本文の横幅を画面サイズに応じて可変 ===== */
.lead p,
.lead-sub,
.voice__note {
  width: 80%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.9;
}




@media (min-width: 840px){
  h1 { font-size: clamp(2rem, 2.8vw, 2.5rem); }
  h2 { font-size: clamp(1.6rem, 2.2vw, 2.125rem); }
}

/* ===== Layout ===== */
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
/* width　数値を下げると余白が広くなる　margin-inline: auto; 左右中央寄せにする*/
.container{width:min(88vw,760px); margin-inline:auto}
.section{padding:clamp(36px,6vw,72px) 0}


/* ===== Hero（トップののれんをフルブリード） ===== */
/* ヒーロー全体 */
.hero {
  position: relative;
  height: auto;             /* 画像の高さに合わせて自動調整 */
  min-height: auto;
  overflow: visible;        /* 手がはみ出しても切れないようにする */
}

/* のれん（親） */
.hero__noren {
  position: relative;
  width: 100%;
}
.hero__noren > img:first-child {
  width: 100%;
  display: block;
}

/* ロゴ（子）：中央に重ねる＋左右の余白は width で調整 */
.hero__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(55vw, 340px);   /* ←ここを小さくすると左右の余白が広がる */
  height: auto;
  z-index: 2;
}



/* 手の位置（右下に重ねる） */
.hero__hand {
  position: absolute;
  right: 8%;
  bottom: 6%;
  width: clamp(70px, 18vw, 110px);
}


/* スクロール時の回転クラス（今の JS 用） */
.hero__hand.is-rotated {
  transform: rotate(-15deg) translateY(8px);
}

/* スマホ向け調整 */
@media (max-width: 768px) {
  /* ヒーローエリアの高さを「固定」から「自動（画像なり）」に変更して余白をなくす */
  .hero {
    height: auto; 
    min-height: auto; /* 念のためmin-heightもリセット */
    overflow: visible; /* 手が少しはみ出しても切れないようにする（お好みでhiddenのままでも可） */
  }

  /* ロゴのサイズ調整（既存） */
  .hero__logo img {
    width: min(80vw, 360px);
  }

  /* 手の位置を調整：枠の高さが変わったので位置も合わせる */
  .hero__hand {
    /* 以前の clamp 設定だと位置が高すぎる可能性があるため、画像の下端に合わせて調整 */
    bottom: -10%; /* 画像の下端より少し下にはみ出させる場合 */
    /* もしはみ出させたくない場合は bottom: 0; にしてください */
    
    right: 4%;    /* 右端の余白 */
    width: 80px;  /* スマホでの手のサイズ */
  }
}


/* 手の位置・サイズ・回転アニメ設定 */
.hero__hand {
  position: absolute;
  z-index: 3;
  right: clamp(12px, 4vw, 36px);
  
  /* 修正箇所：下の位置を調整 */
  bottom: -40px;  /* 数値を小さくするほど下へ移動します。PCでの位置を基準に設定 */
  /* bottom: clamp(150px, 10vw, 80px); ←元の設定は削除 */
  
  width: clamp(80px, 18vw, 120px);
  height: auto;
  pointer-events: none;

  transform: rotate(0deg);
  transform-origin: 70% 30%;
  transition: transform .45s ease;
}

/* スクロール時に90度回転 */
.hero__hand.is-rotated{
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce){
  .hero__hand{ transition:none; }
}

/* ===== 固定メニュー（サブページ用運用。indexは使わない） ===== */
.fixed-menu{ position:fixed; top:0; left:0; right:0; z-index:50; text-align:center; }
.fixed-menu img{ width:100vw; margin:0; display:block; filter:drop-shadow(0 10px 18px rgba(0,0,0,.18)); }
/* サブページの <body> に has-fixed-menu を付けたときだけ余白を与える */
body.has-fixed-menu {
  /* スマホ・タブレット用：画面幅の約40%の高さを確保
     (例: 幅375pxなら約150px、幅768pxなら約307pxになります) */
  padding-top: 40vw;
}

@media (min-width: 840px){
  body.has-fixed-menu {
    /* PC用：画像が横長の「menu_long.png」に切り替わるため、割合を減らす
       (例: 幅1000pxなら約220pxの高さになります) */
    padding-top: 22vw;
  }
}

/* さらに画面が大きくなりすぎて余白が広がりすぎるのを防ぐ上限設定（任意） */
@media (min-width: 1200px){
  body.has-fixed-menu {
    padding-top: 260px; /* ある程度の大きさで固定する */
  }
}

/* ===== 見出し画像（左右に余白） ===== */
.title-img {
  display: block;
  margin: 0 auto 1rem;        /* 完全中央寄せ＆下に少し余白 */
  width: 50%;                 /* 画面幅の% */
  max-width: 200px;           /* 最大幅 */
  padding: 0;                 /* 左右の余白を消して真ん中寄せ */
}


/* PCで少し大きくする */
@media (min-width: 840px) {
  .section-arrow {
    border-left-width: 22px;
    border-right-width: 22px;
    border-top-width: 30px;
    margin-top: 32px;
  }
}


/* ===== 楽しみ方（ビール） ===== */
.beer-wrap{display:grid; gap:14px; margin:18px 0}
.beer-card{ background:#fff; border-radius:18px; padding:14px; box-shadow:var(--shadow); }
.beer-img{border-radius:14px; overflow:hidden}
.bullets{list-style:'・ '; margin:12px 0 0; padding-left:.6rem}
.bullets li{margin:.45rem 0; font-weight:600}

/* ===== もっと見る（枝豆ボタン） ===== */
.pill-link img {
  width: 180px;   /* ← ここでサイズ変更 */
  height: auto;   /* ← 縦横比を自動維持 */
  margin: 20px auto 0; /* ← 上下の余白（中央寄せ） */
  display: block; /* ← 中央寄せに必要 */
}


/* ===== 芸人の声 ===== */
.voice{display:grid; gap:16px; align-items:center}
.voice__img{border-radius:14px; overflow:hidden; box-shadow:var(--shadow)}
.voice__note{font-size:.95rem}

/* ===== 芸人の声スライダー ===== */
.voice__slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 24px 0 40px;
}

.voice__slider .slide-track {
  display: flex;
  gap: 20px;
  width: calc(250px * 12); /* スライドを繰り返す想定で広めに */
  animation: scrollSlider 40s linear infinite;
}

.voice__slider img {
  width: 250px;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  transition: transform .3s ease;
}

.voice__slider img:hover {
  transform: scale(1.05);
}

/* 横に自動で流れるアニメーション */
@keyframes scrollSlider {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* スマホ調整 */
@media (max-width: 600px) {
  .voice__slider img {
    width: 180px;
  }
  .voice__slider .slide-track {
    gap: 14px;
    animation-duration: 35s;
  }
}

/* ===== インタビュー一覧 ===== */
.interview-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.interview-item {
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  transition: transform .2s ease, box-shadow .2s ease;
}

.interview-item img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin-bottom: 8px;
}

.interview-item p {
  font-weight: 600;
  font-size: 1rem;
}

.interview-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}




/* ===== 白カード ===== */
.card{ background:#fff; border-radius:18px; padding:18px; box-shadow:var(--shadow); min-height:220px; }

/* ===== Footer ===== */
footer{
  color:#fff; background:linear-gradient(180deg,var(--red-2),#7f1f15);
  padding:40px 0; margin-top:40px; text-align:center;
}

/* PC調整 */
@media (min-width:840px){
  .beer-wrap{grid-template-columns:1fr 1fr}
  .voice{grid-template-columns:1fr 1fr}
  .card{min-height:360px}
}

/* スマホ時：本文の文字を少しだけ小さく */
@media (max-width: 600px){
  /* 読み物っぽい本文だけを対象にする */
  .prose p,
  .prose .lead-sub,
  .section.prose p,
  .section .prose p {
    font-size: 0.95rem;   /* お好みで 0.92rem〜0.98rem に調整可 */
    line-height: 1.95;    /* 行間は気持ち広めに */
  }
}

/* ===== howtoページ用の大きい左寄せ見出し画像 ===== */
.howto-title {
  display: block;
  margin: 0 0 1.2rem 0;   /* 左寄せ＋下に余白 */
  width: 90%;             /* かなり大きめに広げる */
  max-width: 600px;       /* PCでの最大サイズ（調整可） */
  height: auto;
}

/* スマホ時（600px以下）は少し小さめに調整 */
@media (max-width: 600px) {
  .howto-title {
    width: 100%;
    max-width: 100%;
  }
}

/* コンビ名画像は影・角丸を消す */
.interview-name-img {
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* インタビュー個別ページのタイトル画像 */
.voice-title {
  text-align: center;
  margin-bottom: 1.5em;
}

.voice-title-img {
  max-width: 360px;   /* PC時の最大サイズ */
  width: 80%;         /* スマホでは自動で縮まる */
  height: auto;
  display: block;
  margin: 0 auto;
}

/* =========================================
   固定メニュー（リンクエリア設定）
   ========================================= */

/* 画像とリンクをまとめるラッパー */
.menu-inner {
  position: relative;
  width: 100%;
}

/* 画像設定（既存のスタイルを微調整） */
.menu-inner img {
  width: 100%;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
}

/* リンクのコンテナ（画像の上に被せる） */
.menu-links {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 85%; /* のれんの布部分の高さをカバー（下部の凹凸を避けるため少し短めに設定） */
  display: flex; /* 子要素を横並びにする */
  z-index: 10;
}

/* 個別の透明リンク設定 */
.menu-links a {
  flex: 1; /* 幅を均等に4等分する */
  height: 100%;
  display: block;
  cursor: pointer;
  /* background: rgba(255,0,0,0.3); */ /* ←配置を確認したい時はこのコメントを外すと赤く表示されます */
}

/* タッチデバイスでのタップ時の反応を見やすくする（オプション） */
.menu-links a:active {
  background-color: rgba(0, 0, 0, 0.05);
}

/* =========================================
   YouTube公開予定エリア（統合・修正版）
   ========================================= */

   .movie-preview {
    margin: 48px 0;
    padding: 0px 24px 24px; /* 上だけ狭くして「文字の上が空きすぎ」を解消 */
    background-color: #fff;
    border: 2px dashed #ddd;
    border-radius: 12px;
    text-align: center;
  }
  
  /* 見出し（「お悩み解決編」） */
  .movie-preview h3 {
    margin: 0 0 16px; /* 上は0、下にだけ余白 */
    color: #e73b3b;
    font-size: 1.2rem;
  }
  
  /* 動画プレーヤーのラッパー（16:9を維持） */
  .movie-box {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
  }
  
  /* iframeをピッタリはめる */
  .movie-box iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  
  /* チャンネルリンクボタン */
  .movie-link-btn {
    display: inline-block;
    margin-top: 16px;
    font-size: 0.9em;
    color: #e73b3b;
    border-bottom: 1px solid #e73b3b;
    padding-bottom: 2px;
    transition: opacity 0.3s;
  }
  .movie-link-btn:hover {
    opacity: 0.7;
  }
  

/* =========================================
   スクロールで出現する固定メニュー
   ========================================= */

   .fixed-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    
    /* アニメーション用設定 */
    transform: translateY(-100%); /* 最初は画面の上に隠しておく */
    transition: transform 0.4s ease; /* 0.4秒かけてスッと出す */
  }
  
  /* JavaScriptでこのクラスがついたら表示する */
  .fixed-menu.is-visible {
    transform: translateY(0); /* 定位置（上端）に戻す */
  }
  
  /* メニュー内部のスタイル（前回までの設定を維持） */
  .menu-inner {
    position: relative;
    width: 100%;
  }
  .menu-inner img {
    width: 100%;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
  }
  .menu-links {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90%;
    display: flex;
  }
  .menu-links a {
    flex: 1;
    height: 100%;
    display: block;
    cursor: pointer;
  }

  /* ===== beer.png専用のサイズ調整 ===== */
.beer-image {
  width: 60%;
  max-width: 280px;
  height: auto;
  display: block;
  margin: 1.5rem auto;
}

/* スマホサイズでさらに小さくする */
@media (max-width: 600px) {
  .beer-image {
    width: 80%;
    max-width: 180px;
  }
}

/* ===== 読みやすさを向上させる余白とレイアウトの調整 ===== */

/* 1. 全体コンテナの微調整 */
.container {
  width: 90%; /* スマホ時は画面の90%を使い、窮屈さを解消 */
  max-width: 800px; /* 読み物として視線が疲れにくい最大幅に設定 */
  margin-inline: auto;
}

/* 2. 本文（proseクラス）のテキスト制御 */
.prose p, 
.prose .bullets, 
.prose dl {
  width: 100%; /* .container 内いっぱいに広げる */
  max-width: 100%; 
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8; /* 読みやすい行間を確保 */
  text-align: justify; /* 日本語の端を揃えて綺麗に見せる */
  word-break: break-all;
}

/* 3. スマホ表示（600px以下）の最適化 */
@media (max-width: 600px) {
  .section {
    padding: 32px 0; /* 上下の余白を少し詰め、リズムを作る */
  }
  
  .howto-title {
    width: 100%; /* 見出し画像は横いっぱいに */
    margin-bottom: 1rem;
  }

  .prose p {
    font-size: 0.95rem; /* 小さすぎない程度に調整 */
    margin: 1.2em 0; /* 段落間の余白をしっかり取る */
  }

  /* DM会話例の横幅調整（スマホで狭くなりすぎないように） */
  .dm-example {
    padding: 1rem;
    margin: 1rem -4%; /* 少しだけ外にはみ出させて内容量を確保 */
    border-radius: 8px;
  }
}

/* 4. PC・タブレット表示（840px以上）の最適化 */
@media (min-width: 840px) {
  .prose {
    padding: 0 40px; /* 広い画面では左右に少し内側余白を入れて、中央に視線を集める */
  }
}

/* カレンダー（.card）の下に十分な余白を作る */
.section .card {
  margin-bottom: 3rem; /* 1rem（16px）の3倍、約48pxの余白を確保 */
}

/* ライブを選ぶときのポイント（h3）の上の余白を微調整 */
.prose h3 {
  margin-top: 2rem; /* カレンダーとの間にさらにゆとりを持たせる */
}

/* スマホ表示では余白を少しだけ抑える */
@media (max-width: 600px) {
  .section .card {
    margin-bottom: 2rem; /* スマホでは画面が小さいため、やや少なめの余白に */
  }
}

/* 外部リンクは必ず下線を表示 */
a[target="_blank"] {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ===== リンクの視認性向上 ===== */

/* 1. テキストリンク：色を変え、ホバー時に線を出す */
.prose a:not(.pill-link):not(.slide):not(.interview-item) {
  color: var(--red-1);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity 0.2s ease;
}

.prose a:hover {
  opacity: 0.7;
}

/* 2. 枝豆ボタン（もっと見る）：少し浮き上がる動きを追加 */
.pill-link {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: inline-block; /* 動きをつけるために必要 */
  width: 100%;
}

.pill-link:hover {
  transform: scale(1.05); /* マウスを乗せると少し大きく */
}

.pill-link:active {
  transform: scale(0.95); /* クリックした瞬間に少し凹む */
}

/* 3. 画像リンク共通：マウスを乗せると明るくする */
.slide img,
.interview-item img {
  transition: filter 0.3s ease, transform 0.3s ease;
}

.slide:hover img,
.interview-item:hover img {
  filter: brightness(1.1); /* 少し明るくして「反応」を示す */
  box-shadow: 0 10px 25px rgba(0,0,0,0.2); /* 影を強くして浮き上がらせる */
}

.center {
  text-align: center;
}

.center p,
.center .lead-sub {
  text-align: center;
}

/* インタビュー個別ページ：キャプションは両端揃えにしないで中央に固定 */
.prose p.caption{
  text-align: center;
}

/* 既存の .movie-box は残したまま、下を追加（保険） */
/* .movie-box {
  min-height: 315px; 
} */

/* さらに確実にしたい場合（古いブラウザ向け） */
/* .movie-box::before{
  content:"";
  display:block;
  padding-top:56.25%; 
} */

/* YouTube動画の外枠 */
/* .movie-box {
  position: relative;
  width: 100%;
  max-width: 720px;   
  margin: 16px auto 0; 
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
} */

/* iframeをピッタリはめる */
.movie-box iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 動画セクション全体の余白を調整 */
/* .movie-preview {
  margin-top: 24px; 
  padding-top: 0;
} */

/* 見出しの余白を減らす */
/* .movie-preview h3 {
  margin-top: 0;
  margin-bottom: 12px;
} */

@media (max-width: 600px) {
  .interview-q {
    margin-left: 1em;
    margin-right: 1em;
    padding-left: 1em;
    padding-right: 1em;
    width: auto;
    display: block;
    box-sizing: border-box; /* ← パディング込みで横幅を制御 */
  }
}