/* 秋のおもてなしキャンペーン2026 専用CSS。 キャンペーン終了後（2026-10-12以降）はこのフォルダごと削除してよい設計にするため、 site.css は触らずここに隔離している。 */ /* ★開催期間の自動切り替え（開始前＝2026-09-12 0:00 JSTまで／終了後＝2026-10-13 0:00 JST〜）。 index.html頭の同期scriptがに.camp-notyetまたは.camp-endedを付ける／付けないだけを 担当し、実際の出し分け（何を隠して何を見せるか）はここに集約する。 .camp-form-wrap は実際のフォームを包む.container、.camp-closed-boxは 終了メッセージを包む別の.container（同じcontainerクラスを使い回すため、 クラス名がかぶらないようそれぞれに専用クラスを振って区別している）。 #camp-closed自体は開始前・終了後で共有し、中の.camp-closed-ended/.camp-closed-notyet だけを出し分ける（見た目の枠・落ち葉演出を二重に書かないため）。 */ #camp-closed{display:none} html.camp-ended #camp-closed, html.camp-notyet #camp-closed{display:block} html.camp-ended .camp-hero, html.camp-ended .camp-form-wrap, html.camp-notyet .camp-hero, html.camp-notyet .camp-form-wrap{display:none} .camp-closed-ended,.camp-closed-notyet{display:none} html.camp-ended .camp-closed-ended{display:block} html.camp-notyet .camp-closed-notyet{display:block} /* ★「めっちゃ寂しい」の指摘で、ヒーローと同じ落ち葉の散らし背景を流用してリッチにした */ #camp-closed{position:relative;overflow:hidden; background:radial-gradient(120% 100% at 50% 0%,#FCE9C8 0%,#FBF6EF 62%)} .camp-closed-box{position:relative;z-index:1;max-width:560px;text-align:center;padding-top:52px;padding-bottom:52px} .camp-closed-box .en{font-family:var(--en);font-size:11.5px;font-weight:700;letter-spacing:.32em; color:var(--wine);opacity:.85;margin-bottom:14px} .camp-closed-box h1{font-family:var(--mincho);font-weight:600;font-size:clamp(19px,4vw,24px); letter-spacing:.03em;color:var(--ink);margin-bottom:18px} .camp-closed-box p{color:var(--ink-soft);font-size:14px;line-height:1.9;margin:0 0 14px} .camp-closed-btn{display:inline-block;margin-top:14px;background:var(--wine);color:#fff; text-decoration:none;font-weight:700;font-size:14px;padding:13px 32px;border-radius:999px; transition:background .18s ease,transform .18s ease} .camp-closed-btn:hover{background:var(--wine-deep);transform:translateY(-2px)} /* チラシ本体（campaign-hero.jpg）をそのまま主役にする。素の白背景だと寂しいので、 暖色のグラデーションを敷いて秋らしい賑やかさを足す。 ★画像内の「2025」「10/13」等の実物チラシの表記は、2026キャンペーン用に inpaint（塗りつぶし＋再描画）で2026・10/12へ修正済み（whitespace-safe-cropスキル参照）。 ★本番サイト（nakanotana.jp/campaign/）と同じ方式に変更：チラシ自体は等身大の まま中央に置き、画面いっぱいに広げるのはチラシではなく周りに散らした落ち葉。 一度チラシ画像そのものを画面幅いっぱいに広げてみたが、絵が荒く騒がしく見えて 不採用（「めちゃ極端」と差し戻し）。 STEP1（クイズ）もこの同じセクションの中に入れて、ヒーローと1枚の絵として 繋がって見えるようにする（別ブロックとして浮かせない）。 */ .camp-hero{position:relative;background:radial-gradient(120% 100% at 50% 0%,#FCE9C8 0%,#FBF6EF 62%); padding:32px 0 40px;text-align:center;overflow:hidden} .camp-hero .in{max-width:640px;margin:0 auto;padding:0 22px;position:relative;z-index:1} /* ★カードのように浮いて見えないよう、影・枠は付けずグラデーション地に直接馴染ませる（背景っぽく）。 本番サイトに合わせて等身大に戻した上で、左右+100pxずつ（460→660px）拡大。 元画像を1400px幅で書き出し直しているので、660px表示（Retinaの2x換算で1320px要求）でも 滲まない。これ以上大きくしたい場合は、この1400px書き出しがネイティブ解像度の上限 （crop元は1515px幅）なので、757px表示あたりが再書き出しなしで安全に伸ばせる限界。 */ .camp-hero-img{width:100%;max-width:660px;margin:0 auto -6px;display:block;position:relative;z-index:1;border-radius:12px} /* 落ち葉の散らし方：--x/--yは.camp-hero全体に対する位置（%）、--sは一辺の大きさ、 --rは回転角。座標はHTML側でランダムに散らしてあるだけで、CSS側は共通のルールのみ持つ。 z-indexはチラシ・見出しより下（0）に置き、あくまで背景として振る舞わせる。 */ .camp-leaves{position:absolute;inset:0;z-index:0;pointer-events:none} .camp-leaves img{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s); transform:translate(-50%,-50%) rotate(var(--r));opacity:.85; animation:campLeafDrift var(--dur,8s) ease-in-out infinite;animation-delay:var(--delay,0s)} /* ★風に舞う感じでゆっくり漂わせる。--dur/--delayは葉ごとにHTML側でばらつかせてあり、 全部同じタイミングで動いて不自然に見えないようにしている */ @keyframes campLeafDrift{ 0%,100%{transform:translate(-50%,-50%) rotate(var(--r)) translate(0,0)} 25%{transform:translate(-50%,-50%) rotate(calc(var(--r) + 5deg)) translate(6px,-10px)} 50%{transform:translate(-50%,-50%) rotate(var(--r)) translate(-4px,-16px)} 75%{transform:translate(-50%,-50%) rotate(calc(var(--r) - 5deg)) translate(5px,-8px)} } @media (prefers-reduced-motion: reduce){ .camp-leaves img{animation:none} } .camp-hero-text .en{font-family:var(--en);font-size:11.5px;font-weight:700;letter-spacing:.32em; color:var(--wine);opacity:.85;margin-bottom:10px} .camp-hero-text h1{font-family:var(--mincho);font-weight:600;font-size:clamp(21px,4.6vw,28px); letter-spacing:.03em;color:var(--ink);margin-bottom:10px; animation:campTitleBlink 1.8s ease-in-out infinite} .camp-hero-text .camp-year{color:var(--wine)} @keyframes campTitleBlink{0%,100%{opacity:1}50%{opacity:.45}} @media (prefers-reduced-motion: reduce){ .camp-hero-text h1{animation:none} } .camp-hero-text .sub{color:var(--ink-soft);font-size:13.5px;line-height:1.8} .camp-panel-link{max-width:720px;margin:0 auto;font-size:13px;color:var(--ink-soft);text-align:center} .camp-panel-link a{color:var(--wine);font-weight:600;text-decoration:underline;text-underline-offset:2px} .camp-fact{margin:36px auto 0;max-width:720px} /* ★site.cssの.factbox .rowはラベル列6.5em固定。「ネット応募締切」(7文字)だけ収まらず 「切」だけ折り返していたので、このページの.camp-factだけラベル列を広げる （他ページのfactboxには影響させない） */ .camp-fact .row{grid-template-columns:7.6em 1fr} .camp-fact .row .l{white-space:nowrap} .camp-note{max-width:720px;margin:20px auto 0;color:var(--ink-soft);font-size:13.5px;line-height:1.9; background:var(--well);border:1px solid var(--line);border-radius:12px;padding:16px 20px} .camp-form{max-width:640px;margin:40px auto 0} .camp-step{margin-bottom:34px} /* ★イラスト2枚目（クロスワード）は.camp-heroの中に入れて、ヒーローの続きとして 見えるようにしている。containerの外に出ているため、.camp-formと同じ横幅・ 左右の余白だけをここで個別に持たせる */ .camp-step--top{max-width:640px;margin:30px auto 0;padding:0 22px;position:relative;z-index:1} .camp-step-h{display:flex;align-items:center;gap:10px;font-family:var(--mincho);font-weight:600; font-size:17px;color:var(--ink);margin-bottom:10px} .camp-step-n{flex:0 0 auto;background:var(--wine);color:#fff;font-family:var(--en);font-size:11px; font-weight:700;letter-spacing:.08em;padding:4px 10px;border-radius:999px} .camp-step-lead{color:var(--ink-soft);font-size:13.5px;margin:0 0 16px} /* チラシのクロスワード画像をそのまま見せるだけの絵として使う（入力欄は重ねない）。 ★重ねる方式（--x/--yで元画像上のマス中心を指定）は、画面幅によって微妙にズレて 直らなかったため廃止。ヒントの下に独立した.camp-answersを置く方式に変更した。 */ .camp-grid{position:relative;max-width:420px;margin:0 auto;border-radius:12px;overflow:hidden; box-shadow:var(--shadow)} .camp-grid img{width:100%;display:block} .camp-hint-img{display:block;max-width:420px;width:100%;margin:14px auto 0;border-radius:12px} /* 答えの入力欄：画像に重ねず独立させたので、ズレの心配がない */ .camp-answers{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;max-width:420px;margin:18px auto 0} .camp-answer{display:flex;flex-direction:column;align-items:center;gap:6px} .camp-answer-l{font-family:var(--mincho);font-weight:700;font-size:14px;color:var(--wine)} .camp-answer input{width:52px;height:52px;box-sizing:border-box;text-align:center; font-family:var(--mincho);font-weight:700;font-size:20px;color:var(--wine); background:#fff;border:2px solid var(--line);border-radius:10px; transition:border-color .15s ease,box-shadow .15s ease} .camp-answer input:focus{outline:none;border-color:var(--wine);box-shadow:0 0 0 3px rgba(168,52,42,.18)} .camp-field{display:block;margin-bottom:14px} .camp-label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px} .camp-label em{color:var(--wine);font-style:normal;font-size:11px;margin-left:6px} .camp-field input[type=text], .camp-field input[type=tel], .camp-field input[type=email]{width:100%;box-sizing:border-box;font:inherit;font-size:15px; padding:11px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel); color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease} .camp-field input:focus{outline:none;border-color:var(--wine);box-shadow:0 0 0 3px rgba(168,52,42,.12)} .camp-prize{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media (max-width:560px){.camp-prize{grid-template-columns:1fr}} .camp-prize-card{position:relative;display:block;border:1px solid var(--line);border-radius:12px; padding:16px 18px;cursor:pointer;background:var(--panel);transition:border-color .15s ease,box-shadow .15s ease} .camp-prize-card input{position:absolute;top:14px;right:14px;width:16px;height:16px;accent-color:var(--wine)} .camp-prize-card:has(input:checked){border-color:var(--wine);box-shadow:0 0 0 3px rgba(168,52,42,.12)} .camp-prize-body{display:block;padding-right:26px} .camp-prize-icon{display:block;height:52px;width:auto;margin:0 0 8px} .camp-prize-desc{display:block;font-size:12.5px;color:var(--ink-soft);line-height:1.7} .camp-consent{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--ink-soft); line-height:1.8;margin:8px 0 26px} .camp-consent input{flex:0 0 auto;margin-top:3px;width:15px;height:15px;accent-color:var(--wine)} /* ハニーポット：人間には見えないが、DOM上には存在するのでbotが自動入力してしまう */ .camp-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden} .camp-submit{display:block;width:100%;background:var(--wine);color:#fff;border:0;border-radius:999px; font:inherit;font-size:15.5px;font-weight:700;letter-spacing:.04em;padding:15px 0;cursor:pointer; transition:background .18s ease,transform .18s ease} .camp-submit:hover{background:var(--wine-deep);transform:translateY(-2px)} @media (max-width:600px){ .camp-fact,.camp-note,.camp-form{margin-left:16px;margin-right:16px} }