/* ========================================= 福岡で笑おう！共通スタイル ========================================= */ /* ===== 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; } /* ===== 本文の横幅を画面サイズに応じて可変 ===== */ .section p, .lead p, .lead-sub, .voice__note { width: 80%; /* ← 画面幅の80%（左右10%ずつ余白） */ max-width: 720px; /* ← 画面が広いときは最大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; } .hero__noren{ position: relative; z-index: 1; /* 親の余白を無視して画面幅に“はみ出す”テクニック */ left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; width: 100vw; padding: 0; } .hero__noren img{ width: 100%; height: auto; margin: 0; border-radius: 0; box-shadow: none; } /* 手の位置・サイズ・回転アニメ設定 */ .hero__hand{ position: absolute; z-index: 3; /* のれんより前面 */ right: clamp(12px, 4vw, 36px); /* 右からの距離（好みで調整） */ bottom: clamp(-30px, -20vw, -15px); /* 下に少し食い込ませて重ねる */ 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)); } /* サブページのに has-fixed-menu を付けたときだけ余白を与える */ body.has-fixed-menu { padding-top: 150px; } @media (min-width:840px){ body.has-fixed-menu { padding-top: 180px; } } /* ===== 見出し画像（左右に余白） ===== */ .title-img { display: block; margin: 0 auto 1rem; /* 完全中央寄せ＆下に少し余白 */ width: 50%; /* 画面幅の% */ max-width: 200px; /* 最大幅 */ padding: 0; /* 左右の余白を消して真ん中寄せ */ } /* ===== 木札リンク（画像の傾きを尊重） ===== */ .wood-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:24px 0; } .wood-link{ display:block; filter:drop-shadow(0 10px 18px rgba(0,0,0,.18)); transition:transform .2s; } .wood-link:hover{ transform: translateY(-2px); } /* ===== スムーススクロール ===== */ html{ scroll-behavior: smooth; } /* オレンジの三角（見た目のみ） */ .section-arrow { width: 0; height: 0; margin: clamp(16px, 4vw, 28px) auto 0; /* 中央寄せ */ border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 26px solid #e6733b; /* 三角の色（お好みで変更OK） */ filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12)); } /* 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; /* 行間は気持ち広めに */ } }