@charset "UTF-8"; /* ========================================================= * いちごの里よしみ テーマ メインスタイル * * 構成： * 01. 変数（カラー・サイズ・アイコン） * 02. リセット・ベース * 03. ユーティリティ（アクセシビリティ・アイコン） * 04. 共通コンポーネント（見出し・ボタン・ウェーブ・ドット・カード等） * 05. レイアウト：トップバー・ヘッダー・グローバルナビ・メガメニュー * 06. フロント：ヒーロー * 07. フロント：Event / About / News / Enjoy / Blog / Feature / Movie * 08. レイアウト：フッター * 09. GSAP 初期状態・フォールバック * 10. 視差効果を減らす設定への対応 * * ブレークポイント（モバイルファースト）： * 768px 以上 … タブレット * 1024px 以上 … PC（グローバルナビを横並び表示） * 1280px 以上 … ワイドPC * ======================================================= */ /* ========================================================= * 01. 変数 * ======================================================= */ :root { /* カラー：いちごレッド */ --c-red: #e63946; --c-red-dark: #c1121f; --c-red-light: #ffe3e6; --c-pink: #fff1f2; /* カラー：アイボリー・クリーム（自然・あたたかみ） */ --c-ivory: #fdf8f0; --c-cream: #fbefd2; --c-cream-dark: #f3dfae; --c-white: #ffffff; /* カラー：深いブルー（フッター） */ --c-blue: #1a6b9a; --c-blue-light: #2a8fc4; --c-blue-dark: #0f3f63; --c-navy: #0b2c47; /* カラー：アクセント */ --c-yellow: #f6b93b; --c-gold: #ffd166; --c-green: #5aa88a; /* テキスト */ --c-text: #3b2f2b; --c-text-sub: #7a6a64; --c-border: #eadfd4; /* フォント */ --ff-base: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; --ff-script: "Caveat", "Segoe Print", cursive; /* サイズ */ --container: 1120px; --container-wide: 1280px; --gutter: 16px; --topbar-h: 36px; /* いちごのつぶつぶ模様（フッター・トップバー共通） */ --dots-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23ffd166'%3E%3Cellipse cx='14' cy='18' rx='2.2' ry='3.6' transform='rotate(-20 14 18)'/%3E%3Cellipse cx='52' cy='8' rx='2' ry='3.2' transform='rotate(15 52 8)'/%3E%3Cellipse cx='90' cy='24' rx='2.2' ry='3.6' transform='rotate(-35 90 24)'/%3E%3Cellipse cx='34' cy='50' rx='2' ry='3.4' transform='rotate(25 34 50)'/%3E%3Cellipse cx='74' cy='58' rx='2.2' ry='3.6' transform='rotate(-10 74 58)'/%3E%3Cellipse cx='108' cy='70' rx='2' ry='3.2' transform='rotate(30 108 70)'/%3E%3Cellipse cx='10' cy='86' rx='2' ry='3.4' transform='rotate(10 10 86)'/%3E%3Cellipse cx='48' cy='96' rx='2.2' ry='3.6' transform='rotate(-25 48 96)'/%3E%3Cellipse cx='88' cy='106' rx='2' ry='3.2' transform='rotate(20 88 106)'/%3E%3C/g%3E%3C/svg%3E"); --header-h: 64px; --radius: 12px; --radius-s: 8px; --wave-h: 36px; /* 影・トランジション */ --shadow-s: 0 2px 10px rgba(59, 47, 43, 0.08); --shadow-m: 0 10px 30px rgba(59, 47, 43, 0.12); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur: 0.35s; /* アイコン（mask用 SVG） */ --i-about: url("data:image/svg+xml;utf8,"); --i-view: url("data:image/svg+xml;utf8,"); --i-route: url("data:image/svg+xml;utf8,"); --i-gourmet: url("data:image/svg+xml;utf8,"); --i-shopping: url("data:image/svg+xml;utf8,"); --i-event: url("data:image/svg+xml;utf8,"); --i-blog: url("data:image/svg+xml;utf8,"); --i-news: url("data:image/svg+xml;utf8,"); --i-chevron: url("data:image/svg+xml;utf8,"); --i-plus: url("data:image/svg+xml;utf8,"); --i-x: url("data:image/svg+xml;utf8,"); --i-instagram: url("data:image/svg+xml;utf8,"); --i-youtube: url("data:image/svg+xml;utf8,"); --i-rss: url("data:image/svg+xml;utf8,"); --i-pause: url("data:image/svg+xml;utf8,"); --i-play: url("data:image/svg+xml;utf8,"); } @media (min-width: 768px) { :root { --gutter: 32px; --wave-h: 48px; } } @media (min-width: 1024px) { :root { --header-h: 84px; --wave-h: 64px; } } /* ========================================================= * 02. リセット・ベース * ======================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; font-family: var(--ff-base); font-size: 15px; font-weight: 500; line-height: 1.8; letter-spacing: 0.04em; color: var(--c-text); background-color: var(--c-ivory); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } @media (min-width: 768px) { body { font-size: 16px; } } body.is-nav-open { overflow: hidden; } h1, h2, h3, h4, h5, h6, p, ul, ol, figure, address, blockquote { margin: 0; padding: 0; } ul, ol { list-style: none; } address { font-style: normal; } a { color: inherit; text-decoration: none; transition: color var(--dur) ease, opacity var(--dur) ease; } img, video, svg { display: block; max-width: 100%; height: auto; } button { margin: 0; padding: 0; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; } :focus-visible { outline: 3px solid var(--c-blue-light); outline-offset: 3px; border-radius: 4px; } .l-site { position: relative; overflow-x: clip; } .l-main { display: block; position: relative; } /* ========================================================= * 03. ユーティリティ * ======================================================= */ /* スクリーンリーダー専用テキスト（WordPress標準） */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; word-wrap: normal !important; } .skip-link:focus { position: fixed !important; top: 8px; left: 8px; z-index: 10000; width: auto; height: auto; padding: 12px 20px; clip: auto; color: var(--c-white); background: var(--c-red); border-radius: var(--radius-s); } /* マスクアイコン共通 */ .c-gnav__icon, .p-enjoy__icon, .c-side-sns__icon, .c-sns-icon, .c-event-card__date-icon { display: inline-block; flex-shrink: 0; background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; } .c-gnav__icon--about, .p-enjoy__icon--about { --icon: var(--i-about); } .c-gnav__icon--view, .p-enjoy__icon--view { --icon: var(--i-view); } .c-gnav__icon--route, .p-enjoy__icon--route { --icon: var(--i-route); } .c-gnav__icon--gourmet, .p-enjoy__icon--gourmet { --icon: var(--i-gourmet); } .c-gnav__icon--shopping, .p-enjoy__icon--shopping { --icon: var(--i-shopping); } .c-gnav__icon--event, .c-event-card__date-icon { --icon: var(--i-event); } .c-gnav__icon--blog { --icon: var(--i-blog); } .c-gnav__icon--news { --icon: var(--i-news); } .c-side-sns__icon--x, .c-sns-icon--x { --icon: var(--i-x); } .c-side-sns__icon--instagram, .c-sns-icon--instagram { --icon: var(--i-instagram); } .c-side-sns__icon--youtube, .c-sns-icon--youtube { --icon: var(--i-youtube); } .c-sns-icon--rss { --icon: var(--i-rss); } /* ========================================================= * 04. 共通コンポーネント * ======================================================= */ /* ---------- セクション共通 ---------- */ .p-section { position: relative; padding: 72px 0; } @media (min-width: 1024px) { .p-section { padding: 120px 0; } } /* ---------- セクション見出し ---------- */ .c-heading { position: relative; margin-bottom: 40px; text-align: center; } @media (min-width: 1024px) { .c-heading { margin-bottom: 56px; } } .c-heading__en { display: inline-block; font-family: var(--ff-script); font-size: 44px; font-weight: 700; line-height: 1.1; letter-spacing: 0.02em; color: var(--c-text); transform: rotate(var(--heading-tilt, -3deg)); } @media (min-width: 1024px) { .c-heading__en { font-size: 58px; } } .c-heading__line { display: block; width: 120px; height: 12px; margin: 2px auto 8px; color: var(--c-red); transform: translateX(-14px) rotate(var(--heading-tilt, -3deg)); } .c-heading__ja { font-size: 14px; font-weight: 700; letter-spacing: 0.12em; } @media (min-width: 1024px) { .c-heading__ja { font-size: 16px; } } .c-heading.is-white .c-heading__en, .c-heading.is-white .c-heading__ja { color: var(--c-white); } .c-heading.is-white .c-heading__line { color: var(--c-gold); } /* SplitType 生成要素 */ .js-split .word, .js-split .char { display: inline-block; } /* ---------- ボタン ---------- */ .c-btn-wrap { margin-top: 40px; text-align: center; } .c-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 240px; min-height: 56px; padding: 12px 48px; font-size: 15px; font-weight: 700; letter-spacing: 0.08em; color: var(--c-white); background-color: var(--c-red); border: 2px solid var(--c-red); border-radius: 999px; box-shadow: 0 6px 0 var(--c-red-dark); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur) ease, color var(--dur) ease; } .c-btn::after { content: ""; position: absolute; top: 50%; right: 20px; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: var(--i-chevron) center / contain no-repeat; mask: var(--i-chevron) center / contain no-repeat; transform: translateY(-50%); transition: transform var(--dur) var(--ease-out); } .c-btn:hover { transform: translateY(3px); box-shadow: 0 3px 0 var(--c-red-dark); } .c-btn:hover::after { transform: translate(4px, -50%); } .c-btn--outline { background-color: transparent; border-color: rgba(255, 255, 255, 0.85); box-shadow: none; } .c-btn--outline:hover { color: var(--c-text); background-color: var(--c-white); box-shadow: none; transform: none; } .c-btn--small { min-width: 0; min-height: 44px; padding: 8px 40px 8px 24px; font-size: 13px; box-shadow: 0 4px 0 var(--c-red-dark); } .c-btn--small::after { right: 16px; width: 12px; height: 12px; } /* ---------- ウェーブ境界線 ---------- */ .c-wave { position: absolute; left: 0; z-index: 2; width: 100%; height: var(--wave-h); overflow: hidden; line-height: 0; pointer-events: none; color: var(--c-white); } .c-wave--bottom { bottom: -1px; } .c-wave--top { top: 1px; transform: translateY(-100%); } .c-wave.is-white { color: var(--c-white); } .c-wave.is-cream { color: var(--c-cream); } .c-wave.is-ivory { color: var(--c-ivory); } .c-wave.is-blue { color: var(--c-blue-light); } /* お知らせ帯の下端の波線：次のEventセクションの背景色に合わせる */ .c-wave.is-notice-bottom { color: var(--event-bg, var(--c-ivory)); } /* Newsセクション下端の波線：次のEnjoyセクションの背景色に合わせる */ .c-wave.is-enjoy-top { color: var(--enjoy-bg, var(--c-cream)); } /* Enjoyセクション下端の波線：次のBlogセクションの背景色に合わせる */ .c-wave.is-blog-top { color: var(--blog-bg, var(--c-white)); } /* 奥・手前を重ねた2枚のSVG。逆方向・別速度で流して奥行きを出す */ .c-wave__svg { position: absolute; top: 0; left: 0; width: 200%; max-width: none; height: 100%; animation: wave-flow 16s linear infinite; will-change: transform; } .c-wave__svg--back { animation: wave-flow 28s linear infinite reverse; } .c-wave__path { fill: currentColor; } /* 奥の波：色はサイト共通設定で変更可（未設定時は手前と同色の半透明） */ .c-wave__path--back { fill: var(--wave-back-color, currentColor); opacity: var(--wave-back-opacity, 0.45); transform-box: fill-box; animation: wave-bob 4.8s ease-in-out infinite alternate; } .c-wave__path--front { transform-box: fill-box; animation: wave-bob 6.4s ease-in-out -2s infinite alternate-reverse; } /* 横方向に流れ続ける（SVGは2周期分の幅なので -50% で継ぎ目なくループ） */ @keyframes wave-flow { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* 「波線を動かす」がオフのときは静止 */ .c-wave.is-static .c-wave__svg, .c-wave.is-static .c-wave__path { animation: none; } /* 上下にゆらゆら揺れる */ @keyframes wave-bob { from { transform: translateY(0) scaleY(1); } to { transform: translateY(8%) scaleY(1.12); } } /* ---------- ドット装飾 ---------- */ .c-dots { position: absolute; display: block; width: 200px; height: 140px; pointer-events: none; background-image: radial-gradient(circle, var(--dot-color, var(--c-red)) 1.6px, transparent 2px); background-size: var(--pattern-size, 16px) var(--pattern-size, 16px); opacity: 0.55; } .c-dots--red { --dot-color: var(--c-red); } .c-dots--green { --dot-color: var(--c-green); } .c-dots--yellow { --dot-color: var(--c-yellow); } @media (min-width: 1024px) { .c-dots { --pattern-size: 20px; width: 260px; height: 180px; } } /* * 模様の切り替え（.c-dots に追加して使う） * 色は .c-dots--red 等の --dot-color、タイルの大きさは --pattern-size を共通で使う。 */ /* つぶつぶ（.c-dots の既定と同じ） */ .c-dots--pattern-dots { background-image: radial-gradient(circle, var(--dot-color, var(--c-red)) 1.6px, transparent 2px); } /* ストライプ（斜め線・継ぎ目なしのタイル） */ .c-dots--pattern-stripe { background-image: linear-gradient( 45deg, var(--dot-color, var(--c-red)) 12.5%, transparent 12.5%, transparent 50%, var(--dot-color, var(--c-red)) 50%, var(--dot-color, var(--c-red)) 62.5%, transparent 62.5% ); } /* ギンガムチェック（縦横の帯が重なる部分を濃くする） */ .c-dots--pattern-gingham { --pattern-size: 24px; background-image: linear-gradient(90deg, color-mix(in srgb, var(--dot-color, var(--c-red)) 50%, transparent) 50%, transparent 50%), linear-gradient(color-mix(in srgb, var(--dot-color, var(--c-red)) 50%, transparent) 50%, transparent 50%); } /* 方眼（格子線） */ .c-dots--pattern-grid { background-image: linear-gradient(var(--dot-color, var(--c-red)) 1.5px, transparent 1.5px), linear-gradient(90deg, var(--dot-color, var(--c-red)) 1.5px, transparent 1.5px); } /* 波線・プラスは SVG をマスクにして --dot-color で塗る */ .c-dots--pattern-wave, .c-dots--pattern-cross { background-color: var(--dot-color, var(--c-red)); background-image: none; -webkit-mask-repeat: repeat; mask-repeat: repeat; } .c-dots--pattern-wave { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath d='M0 8 Q10 1 20 8 T40 8' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath d='M0 8 Q10 1 20 8 T40 8' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); -webkit-mask-size: 32px 13px; mask-size: 32px 13px; } .c-dots--pattern-cross { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 6v8M6 10h8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 6v8M6 10h8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); -webkit-mask-size: var(--pattern-size, 16px) var(--pattern-size, 16px); mask-size: var(--pattern-size, 16px) var(--pattern-size, 16px); } @media (min-width: 1024px) { .c-dots--pattern-gingham { --pattern-size: 30px; } .c-dots--pattern-wave { -webkit-mask-size: 40px 16px; mask-size: 40px 16px; } } /* * セクション背景全体の模様（News / Blog 共通。functions.php の ichigonosato_section_bg_pattern() が出力） * .c-dots の模様クラス（.c-dots--pattern-*）をセクション全面に広げて使う。 * 色は各セクションで --bg-dot-color を指定する。 */ .c-dots.c-bg-pattern { --dot-color: var(--bg-dot-color, var(--c-red)); --pattern-size: 22px; inset: 0; z-index: 0; width: auto; height: auto; opacity: var(--bg-dot-opacity, 0.1); } .c-dots.c-bg-pattern.is-density-normal { --bg-dot-opacity: 0.2; } .c-dots.c-bg-pattern.is-density-strong { --bg-dot-opacity: 0.35; } /* ギンガムはタイルが小さいと細かすぎるため大きめにする */ .c-dots.c-bg-pattern.c-dots--pattern-gingham { --pattern-size: 32px; } /* ---------- 画像なしプレースホルダー ---------- */ .c-noimage { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: radial-gradient(circle at 30% 30%, rgba(230, 57, 70, 0.18), transparent 50%), linear-gradient(135deg, var(--c-pink), var(--c-cream)); } /* ---------- 空表示 ---------- */ .c-empty { padding: 40px 16px; text-align: center; color: var(--c-text-sub); } /* ---------- スライダー前後ボタン ---------- */ .c-slider-nav { display: flex; gap: 12px; } .c-slider-nav__prev, .c-slider-nav__next, .c-mega__prev, .c-mega__next { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--c-text); background-color: var(--c-white); border: 1px solid var(--c-border); border-radius: 50%; transition: color var(--dur) ease, background-color var(--dur) ease, border-color var(--dur) ease, opacity var(--dur) ease; } .c-slider-nav__prev::before, .c-slider-nav__next::before, .c-mega__prev::before, .c-mega__next::before { content: ""; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: var(--i-chevron) center / contain no-repeat; mask: var(--i-chevron) center / contain no-repeat; } .c-slider-nav__prev::before, .c-mega__prev::before { transform: scaleX(-1); } .c-slider-nav__prev:hover, .c-slider-nav__next:hover, .c-mega__prev:hover, .c-mega__next:hover { color: var(--c-white); background-color: var(--c-red); border-color: var(--c-red); } .swiper-button-disabled { opacity: 0.35; pointer-events: none; } /* ---------- 記事カード（News / Blog） ---------- */ .c-card { height: auto; } .c-card__link { display: block; height: 100%; } .c-card__thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--c-pink); border-radius: var(--radius-s); } .c-card__img, .c-card__thumb .c-noimage { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); } .c-card__link:hover .c-card__img { transform: scale(1.06); } .c-card__label { position: absolute; top: 10px; left: 10px; z-index: 1; display: inline-block; max-width: calc(100% - 20px); padding: 2px 12px; overflow: hidden; font-size: 12px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; color: var(--c-white); background-color: var(--c-red); border-radius: 999px; } .c-card__label--square { top: auto; bottom: 0; left: 16px; padding: 4px 12px; color: var(--c-text); background-color: var(--c-yellow); border-radius: 0; } .c-card__body { padding: 12px 4px 0; } .c-card__date { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-text-sub); letter-spacing: 0.06em; } .c-card__date::before { content: ""; width: 6px; height: 6px; background-color: var(--c-red); border-radius: 50%; } .c-card__title { margin-top: 4px; font-size: 15px; font-weight: 700; line-height: 1.6; transition: color var(--dur) ease; } .c-card__link:hover .c-card__title { color: var(--c-red); } .c-card__title--clamp { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* ブログカード（白背景・影付き） */ .c-card--blog .c-card__link { overflow: hidden; background-color: var(--c-white); border-radius: var(--radius); box-shadow: var(--shadow-s); transition: box-shadow var(--dur) ease, transform var(--dur) var(--ease-out); } .c-card--blog .c-card__link:hover { box-shadow: var(--shadow-m); transform: translateY(-4px); } .c-card--blog .c-card__thumb { border-radius: 0; } .c-card--blog .c-card__body { padding: 14px 16px 20px; } /* ---------- イベントカード ---------- */ .c-event-card { height: auto; } .c-event-card__link { display: block; } .c-event-card__thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--c-pink); border-radius: var(--radius-s); } .c-event-card__img, .c-event-card__thumb .c-noimage { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); } .c-event-card__link:hover .c-event-card__img { transform: scale(1.06); } .c-event-card__date { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; font-weight: 700; color: var(--c-white); background: linear-gradient(to top, rgba(20, 12, 10, 0.72), rgba(20, 12, 10, 0.45)); } .c-event-card__date-icon { width: 16px; height: 16px; color: var(--c-gold); } .c-event-card__title { margin-top: 12px; font-size: 16px; font-weight: 700; line-height: 1.6; transition: color var(--dur) ease; } .c-event-card__link:hover .c-event-card__title { color: var(--c-red); } /* ---------- タブ ---------- */ .c-tabs__list { display: flex; gap: 0; margin: 0 calc(var(--gutter) * -1) 24px; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; } .c-tabs__list::-webkit-scrollbar { display: none; } .c-tabs__tab { flex: 0 0 auto; min-width: 120px; min-height: 52px; padding: 8px 20px; font-size: 14px; font-weight: 700; color: var(--c-text); background-color: var(--c-white); border: 1px solid var(--c-border); border-left-width: 0; transition: color var(--dur) ease, background-color var(--dur) ease; } .c-tabs__tab:first-child { border-left-width: 1px; border-radius: var(--radius-s) 0 0 var(--radius-s); } .c-tabs__tab:last-child { border-radius: 0 var(--radius-s) var(--radius-s) 0; } .c-tabs__tab:hover { color: var(--c-red); } .c-tabs__tab.is-active, .c-tabs__tab[aria-selected="true"] { color: var(--c-white); background-color: var(--c-red); border-color: var(--c-red); } @media (min-width: 768px) { .c-tabs__list { margin: 0 0 32px; padding: 0; overflow: visible; } .c-tabs__tab { flex: 1 1 0; } } .c-tabs__panel[hidden] { display: none; } .c-tabs__panel.is-entering { animation: tab-in 0.5s var(--ease-out); } @keyframes tab-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* ---------- 右端固定SNS ---------- */ .c-side-sns { position: fixed; right: 0; bottom: 30%; z-index: 900; display: none; flex-direction: column; } @media (min-width: 1024px) { .c-side-sns { display: flex; } } .c-side-sns__link { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--c-white); background-color: var(--c-text); transition: width var(--dur) var(--ease-out), background-color var(--dur) ease; } .c-side-sns__item--instagram .c-side-sns__link { background: linear-gradient(45deg, #f9a03f, #d6249f 55%, #6a3ee8); } .c-side-sns__item--youtube .c-side-sns__link { background-color: #ff0000; } .c-side-sns__link:hover { width: 56px; } .c-side-sns__icon { width: 20px; height: 20px; } /* ---------- ページトップ ---------- */ .c-pagetop { position: fixed; right: 16px; bottom: 16px; z-index: 900; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; color: var(--c-white); background-color: var(--c-red); border-radius: 50%; box-shadow: var(--shadow-m); opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity var(--dur) ease, visibility var(--dur) ease, transform var(--dur) var(--ease-out), background-color var(--dur) ease; } .c-pagetop.is-visible { opacity: 1; visibility: visible; transform: none; } .c-pagetop:hover { background-color: var(--c-red-dark); } .c-pagetop__arrow { width: 18px; height: 18px; background-color: currentColor; -webkit-mask: var(--i-chevron) center / contain no-repeat; mask: var(--i-chevron) center / contain no-repeat; transform: rotate(-90deg); } @media (min-width: 1024px) { .c-pagetop { right: 24px; bottom: 24px; width: 64px; height: 64px; } } /* キャラクター版：丸背景を消し、キャラクターがふわふわ揺れる */ .c-pagetop--chara { width: 54px; height: auto; background-color: transparent; border-radius: 0; box-shadow: none; } .c-pagetop--chara:hover { background-color: transparent; } .c-pagetop__chara { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.18)); transform-origin: 50% 100%; animation: c-pagetop-float 2.6s ease-in-out infinite; } /* ホバー・フォーカス時はぴょんと跳ねる */ .c-pagetop--chara:hover .c-pagetop__chara, .c-pagetop--chara:focus-visible .c-pagetop__chara { animation: c-pagetop-jump 0.6s var(--ease-out) infinite alternate; } .c-pagetop--chara:focus-visible { outline: 3px solid var(--c-red); outline-offset: 4px; border-radius: 8px; } @keyframes c-pagetop-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } } @keyframes c-pagetop-jump { from { transform: translateY(0) scale(1, 1); } to { transform: translateY(-12px) scale(0.96, 1.04); } } @media (min-width: 1024px) { .c-pagetop--chara { width: 66px; height: auto; } } @media (prefers-reduced-motion: reduce) { .c-pagetop__chara, .c-pagetop--chara:hover .c-pagetop__chara, .c-pagetop--chara:focus-visible .c-pagetop__chara { animation: none; } } /* ========================================================= * 05. トップバー・ヘッダー・グローバルナビ・メガメニュー * ======================================================= */ /* ---------- トップバー ---------- */ .l-topbar { --topbar-fs: 12px; position: relative; z-index: 20; display: flex; align-items: center; justify-content: center; min-height: var(--topbar-h); padding: 4px 64px 4px 16px; color: var(--topbar-text, var(--c-white)); background-color: var(--topbar-bg, var(--c-red)); } .l-topbar__text { position: relative; z-index: 1; font-size: var(--topbar-fs); font-weight: 700; line-height: 1.4; letter-spacing: 0.1em; text-align: center; } .l-topbar__link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--dur) ease, opacity var(--dur) ease; } .l-topbar__link:hover, .l-topbar__link:focus-visible { text-decoration-color: currentColor; opacity: 0.85; } /* 表示位置（サイト共通設定） */ .l-topbar.is-align-left { justify-content: flex-start; } .l-topbar.is-align-left .l-topbar__text { text-align: left; } .l-topbar.is-align-right { justify-content: flex-end; } .l-topbar.is-align-right .l-topbar__text { text-align: right; } /* 文字の大きさ（サイト共通設定） */ .l-topbar.is-size-small { --topbar-fs: 11px; } .l-topbar.is-size-large { --topbar-fs: 14px; } @media (min-width: 1024px) { .l-topbar { --topbar-fs: 13px; padding: 4px 32px; } .l-topbar.is-size-small { --topbar-fs: 12px; } .l-topbar.is-size-large { --topbar-fs: 16px; } } /* つぶつぶ模様（帯は細いのでタイルを小さめに） */ .l-topbar.has-dots::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--dots-image); background-size: 72px 72px; opacity: var(--dots-opacity, 0.22); } .l-topbar.is-dots-soft { --dots-opacity: 0.14; } .l-topbar.is-dots-normal { --dots-opacity: 0.26; } .l-topbar.is-dots-strong { --dots-opacity: 0.42; } /* トップバー非表示時は帯の高さを0にする（メインビジュアル・SPヘッダー位置の計算用） */ body.no-topbar { --topbar-h: 0px; } /* 下端の波線：直下のヘッダー・メインビジュアルに重ねて垂らす */ .l-topbar.has-wave { z-index: 1001; } .c-wave--hang { top: calc(100% - 1px); bottom: auto; height: 14px; transform: scaleY(-1); } .c-wave.is-topbar { color: var(--topbar-bg, var(--c-red)); } @media (min-width: 1024px) { .c-wave--hang { height: 18px; } } /* ---------- ヘッダー（SP基本） ---------- */ .l-header { position: sticky; top: 0; z-index: 1000; height: var(--header-h); background-color: rgba(253, 248, 240, 0.96); box-shadow: 0 1px 0 rgba(59, 47, 43, 0.06); transition: background-color var(--dur) ease, box-shadow var(--dur) ease, top var(--dur) var(--ease-out); } .l-header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 8px 0 var(--gutter); } .l-header__logo { font-size: inherit; font-weight: inherit; line-height: 1; } .l-header__logo-link { display: flex; align-items: center; gap: 10px; } .l-header__logo-img { width: auto; max-height: 40px; } .l-header__logo-text { font-size: 18px; font-weight: 700; letter-spacing: 0.06em; color: var(--c-red); } .l-header__logo-sub { display: none; font-size: 11px; font-weight: 500; white-space: nowrap; /* 「吉見町観光協会 公式サイト」を途中で改行させない */ color: var(--c-text-sub); } @media (min-width: 768px) { .l-header__logo-sub { display: block; } } /* SPのフロントページ：ヒーロー上に透明ヘッダーを重ねる */ @media (max-width: 1023.98px) { .home .l-header { position: fixed; top: var(--topbar-h); right: 0; left: 0; background-color: transparent; box-shadow: none; } .home .l-header .l-header__logo { opacity: 0; pointer-events: none; transition: opacity var(--dur) ease; } .home .l-header .l-header__toggle { color: var(--c-white); } .home .l-header.is-scrolled { top: 0; } .home .l-header.is-solid, .is-nav-open .l-header { background-color: rgba(253, 248, 240, 0.96); box-shadow: 0 1px 0 rgba(59, 47, 43, 0.06); } .home .l-header.is-solid .l-header__logo, .is-nav-open .l-header .l-header__logo { opacity: 1; pointer-events: auto; } .home .l-header.is-solid .l-header__toggle, .is-nav-open .l-header .l-header__toggle { color: var(--c-text); } .home.is-nav-open .l-header { top: 0; } } /* ---------- ハンバーガー ---------- */ .l-header__toggle { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 48px; height: 48px; color: var(--c-text); } .l-header__toggle-line { display: block; width: 26px; height: 2px; background-color: currentColor; border-radius: 2px; transition: transform var(--dur) var(--ease-out), opacity var(--dur) ease; } .l-header__toggle[aria-expanded="true"] .l-header__toggle-line:nth-child(1) { transform: translateY(8px) rotate(45deg); } .l-header__toggle[aria-expanded="true"] .l-header__toggle-line:nth-child(2) { opacity: 0; } .l-header__toggle[aria-expanded="true"] .l-header__toggle-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ---------- グローバルナビ（SP：ドロワー） ---------- */ @media (max-width: 1023.98px) { .c-gnav { position: fixed; inset: 0; z-index: 2; padding: calc(var(--header-h) + 8px) var(--gutter) 48px; overflow-y: auto; overscroll-behavior: contain; background-color: var(--c-ivory); visibility: hidden; transform: translateX(100%); transition: transform 0.5s var(--ease-out), visibility 0.5s; } .is-nav-open .c-gnav { visibility: visible; transform: none; } .c-gnav__item { border-bottom: 1px dashed var(--c-border); } .c-gnav__head { display: flex; align-items: center; } .c-gnav__link { display: flex; flex: 1; align-items: center; gap: 12px; min-height: 60px; font-size: 16px; font-weight: 700; } .c-gnav__icon { width: 22px; height: 22px; color: var(--c-red); } .c-gnav__expand { position: relative; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--c-red); } .c-gnav__expand::before { content: ""; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: var(--i-plus) center / contain no-repeat; mask: var(--i-plus) center / contain no-repeat; transition: transform var(--dur) var(--ease-out); } .c-gnav__expand[aria-expanded="true"]::before { transform: rotate(135deg); } /* メガメニュー：アコーディオン */ .c-mega[hidden] { display: none; } .c-mega { padding: 0 0 20px; } .c-mega.is-opening { animation: tab-in 0.4s var(--ease-out); } .c-mega__title { display: none; } .c-mega__desc { margin-bottom: 12px; font-size: 13px; color: var(--c-text-sub); } .c-mega__links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; } .c-mega__link { display: block; padding: 10px 12px; font-size: 14px; background-color: var(--c-white); border-radius: var(--radius-s); } .c-mega__all { margin-bottom: 20px; } .c-mega__nav { display: none; } } /* ---------- グローバルナビ（PC：横並び＋ホバーでメガメニュー） ---------- */ @media (min-width: 1024px) { .l-header__inner { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); } .l-header__logo-img { max-height: 52px; } .l-header__toggle { display: none; } .c-gnav { height: 100%; } .c-gnav__list { display: flex; align-items: stretch; height: 100%; } .c-gnav__item { position: static; display: flex; } .c-gnav__head { position: relative; display: flex; align-items: center; } .c-gnav__link { position: relative; display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 12px; font-size: 14px; font-weight: 700; white-space: nowrap; } /* ホバー時の下線 */ .c-gnav__link::after { content: ""; position: absolute; right: 12px; bottom: 18px; left: 12px; height: 3px; background-color: var(--c-red); border-radius: 3px; transform: scaleX(0); transform-origin: right; transition: transform var(--dur) var(--ease-out); } .c-gnav__item:hover .c-gnav__link::after, .c-gnav__item.is-open .c-gnav__link::after, .c-gnav__link:focus-visible::after { transform: scaleX(1); transform-origin: left; } .c-gnav__item:hover .c-gnav__link, .c-gnav__item.is-open .c-gnav__link { color: var(--c-red); } .c-gnav__icon { width: 18px; height: 18px; color: var(--c-red); } /* キーボード操作用の開閉ボタン（小さなシェブロン） */ .c-gnav__expand { display: flex; align-items: center; justify-content: center; width: 20px; height: 32px; margin-left: -8px; margin-right: 4px; color: var(--c-text-sub); } .c-gnav__expand::before { content: ""; width: 10px; height: 10px; background-color: currentColor; -webkit-mask: var(--i-chevron) center / contain no-repeat; mask: var(--i-chevron) center / contain no-repeat; transform: rotate(90deg); transition: transform var(--dur) var(--ease-out); } .c-gnav__expand[aria-expanded="true"]::before { transform: rotate(-90deg); } /* メガメニューパネル（hidden属性はPCではCSSで制御） */ .c-mega, .c-mega[hidden] { position: absolute; top: 100%; right: 0; left: 0; z-index: 10; display: block; padding: 32px var(--gutter) 40px; background-color: var(--c-white); border-top: 3px solid var(--c-red); box-shadow: 0 20px 40px rgba(59, 47, 43, 0.14); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.3s ease, visibility 0.3s, transform 0.4s var(--ease-out); pointer-events: none; } /* マウスがパネルへ移動する間に閉じないよう、上部に透明な橋を架ける */ .c-mega::before { content: ""; position: absolute; top: -24px; right: 0; left: 0; height: 24px; } .c-gnav__item.has-mega:hover > .c-mega, .c-gnav__item.has-mega.is-open > .c-mega, .c-gnav__item.has-mega:focus-within > .c-mega { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } /* JSで明示的に閉じた場合（Escキー等）はホバー中でも閉じる */ .c-gnav__item.has-mega.is-closed > .c-mega { opacity: 0; visibility: hidden; pointer-events: none; } .c-mega__inner { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; max-width: var(--container-wide); margin: 0 auto; } .c-mega__title { position: relative; margin-bottom: 12px; padding-left: 16px; font-size: 20px; font-weight: 700; } .c-mega__title::before { content: ""; position: absolute; top: 0.3em; left: 0; width: 5px; height: 1.1em; background-color: var(--c-red); border-radius: 3px; } .c-mega__desc { margin-bottom: 16px; font-size: 13px; color: var(--c-text-sub); } .c-mega__links { margin-bottom: 24px; } .c-mega__link { position: relative; display: block; padding: 8px 0 8px 20px; font-size: 14px; border-bottom: 1px dashed var(--c-border); } .c-mega__link::before { content: ""; position: absolute; top: 50%; left: 2px; width: 10px; height: 10px; background-color: var(--c-red); -webkit-mask: var(--i-chevron) center / contain no-repeat; mask: var(--i-chevron) center / contain no-repeat; transform: translateY(-50%); transition: transform var(--dur) var(--ease-out); } .c-mega__link:hover { color: var(--c-red); } .c-mega__link:hover::before { transform: translate(3px, -50%); } .c-mega__nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; } } @media (min-width: 1280px) { .c-gnav__link { padding: 0 16px; font-size: 15px; } } /* ---------- メガメニュー（PC）：記事カルーセル型デザイン ---------- * 最新記事カルーセルを持つパネル（イベント・ブログ・スポット）は、 * 黒背景・横並びカード（正方形サムネイル＋日付ピル＋タイトル）で表示する。 * ---------------------------------------------------------------- */ @media (min-width: 1024px) { /* 開いている項目の背景をクリーム色に */ .c-gnav__item.has-mega { transition: background-color var(--dur) ease; } .c-gnav__item.has-mega:hover, .c-gnav__item.has-mega.is-open, .c-gnav__item.has-mega:focus-within { background-color: #fbe6b0; } /* メガメニュー項目は下線ではなく背景色で状態を示す */ .c-gnav__item.has-mega .c-gnav__link::after { display: none; } .c-gnav__item.has-mega:hover .c-gnav__link, .c-gnav__item.has-mega.is-open .c-gnav__link { color: var(--c-text); } /* パネル本体 */ .c-mega:has(.c-mega__slider) { padding: 22px var(--gutter); background-color: #111; border-top: 0; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); } .c-mega:has(.c-mega__slider) .c-mega__inner { display: block; max-width: 1400px; } /* 見出し・リンク列はカルーセル型では表示しない */ .c-mega:has(.c-mega__slider) .c-mega__side { display: none; } /* 左右の矢印をスライダーの両脇に配置 */ .c-mega:has(.c-mega__slider) .c-mega__slider { position: relative; padding: 0 72px; } .c-mega:has(.c-mega__slider) .c-mega__nav { position: absolute; inset: 0; display: block; margin: 0; pointer-events: none; } .c-mega:has(.c-mega__slider) .c-mega__prev, .c-mega:has(.c-mega__slider) .c-mega__next { position: absolute; top: 50%; width: 48px; height: 48px; color: var(--c-white); background-color: transparent; border: 0; transform: translateY(-50%); pointer-events: auto; } .c-mega:has(.c-mega__slider) .c-mega__prev { left: 8px; } .c-mega:has(.c-mega__slider) .c-mega__next { right: 8px; } .c-mega:has(.c-mega__slider) .c-mega__prev::before, .c-mega:has(.c-mega__slider) .c-mega__next::before { width: 26px; height: 26px; } .c-mega:has(.c-mega__slider) .c-mega__prev:hover, .c-mega:has(.c-mega__slider) .c-mega__next:hover { color: var(--c-gold); background-color: transparent; } .c-mega:has(.c-mega__slider) .c-mega__prev.swiper-button-disabled, .c-mega:has(.c-mega__slider) .c-mega__next.swiper-button-disabled { opacity: 0.25; } /* カード：正方形サムネイル＋右側に日付ピルとタイトル */ .c-mega:has(.c-mega__slider) .c-mega-card__link { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: start; color: var(--c-white); } .c-mega:has(.c-mega__slider) .c-mega-card__thumb { aspect-ratio: 1 / 1; border-radius: 0; } .c-mega:has(.c-mega__slider) .c-mega-card__body { padding-top: 0; } .c-mega:has(.c-mega__slider) .c-mega-card__date { display: inline-block; max-width: 100%; margin-bottom: 12px; padding: 5px 16px; font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: 0.04em; color: var(--c-white); background-color: #f5b335; border-radius: 18px; } .c-mega:has(.c-mega__slider) .c-mega-card__title { font-size: 17px; font-weight: 700; line-height: 1.8; letter-spacing: 0.1em; -webkit-line-clamp: 3; transition: color var(--dur) ease; } .c-mega:has(.c-mega__slider) .c-mega-card__link:hover .c-mega-card__title { color: var(--c-gold); } } /* 1024〜1439px：カード幅が狭くなるためサムネイルと文字を一回り小さく */ @media (min-width: 1024px) and (max-width: 1439.98px) { .c-mega:has(.c-mega__slider) .c-mega-card__link { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; } .c-mega:has(.c-mega__slider) .c-mega-card__date { margin-bottom: 8px; padding: 4px 12px; font-size: 13px; } .c-mega:has(.c-mega__slider) .c-mega-card__title { font-size: 15px; line-height: 1.7; letter-spacing: 0.06em; } } /* ---------- メガメニュー内カルーセル ---------- */ .c-mega__slider { min-width: 0; } .c-mega-swiper { overflow: hidden; } .c-mega-card { height: auto; } .c-mega-card__link { display: block; } .c-mega-card__thumb { aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--c-pink); border-radius: var(--radius-s); } .c-mega-card__img, .c-mega-card__thumb .c-noimage { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); } .c-mega-card__link:hover .c-mega-card__img { transform: scale(1.06); } .c-mega-card__body { padding-top: 8px; } .c-mega-card__date { display: block; font-size: 12px; color: var(--c-red); } .c-mega-card__title { display: -webkit-box; overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* ========================================================= * 06. ヒーロー * ======================================================= */ .p-hero { position: relative; display: flex; flex-direction: column; height: calc(100svh - var(--topbar-h)); min-height: 520px; max-height: 1080px; overflow: hidden; color: var(--c-white); background-color: var(--c-navy); } @media (min-width: 1024px) { .p-hero { min-height: 640px; } } .p-hero__media { position: absolute; inset: 0; } .p-hero__video, .p-hero__image, .p-hero__image-sp { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } /* * YouTube背景動画：16:9 の iframe をエリア全体に「cover」で敷き詰める（はみ出しは切り取り） * 再生が始まるまでは透明にして、下の代替画像を見せる（main.js が .is-playing を付与）。 */ .p-hero__youtube { overflow: hidden; container-type: size; pointer-events: none; opacity: 0; transition: opacity 0.8s ease; } .p-hero__youtube.is-playing { opacity: 1; } /* YouTube の再生開始後は代替画像を隠し、iframe の再描画待ちの間は暗色を見せる（スクロールで戻った際のちらつき対策） */ .p-hero__media.is-video-started { background-color: #1a1412; } .p-hero__media.is-video-started .p-hero__image { visibility: hidden; } .p-hero__youtube iframe { position: absolute; top: 50%; left: 50%; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); border: 0; transform: translate(-50%, -50%) scale(1.06); } /* SP用代替画像：スマホ時は動画の代わりに表示 */ .p-hero__image-sp { display: none; } @media (max-width: 767.98px) { .p-hero__media:has(.p-hero__image-sp) .p-hero__video, .p-hero__media:has(.p-hero__image-sp) .p-hero__image { display: none; } .p-hero__image-sp { display: block; } } .p-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(11, 44, 71, 0.45) 0%, rgba(11, 44, 71, 0) 25%), linear-gradient(to top, rgba(20, 10, 8, 0.6) 0%, rgba(20, 10, 8, 0) 40%), rgba(30, 10, 12, 0.18); } .p-hero__label { --label-fs: 12px; position: relative; z-index: 2; padding: 20px var(--gutter); font-size: var(--label-fs); font-weight: 700; letter-spacing: 0.12em; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); } /* 表示位置・文字の大きさ（サイト共通設定） */ .p-hero__label.is-align-center { text-align: center; } .p-hero__label.is-align-right { text-align: right; } .p-hero__label.is-size-small { --label-fs: 11px; } .p-hero__label.is-size-large { --label-fs: 15px; } .p-hero__label-link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color var(--dur) ease; } .p-hero__label-link:hover, .p-hero__label-link:focus-visible { text-decoration-color: currentColor; } @media (min-width: 1024px) { .p-hero__label { --label-fs: 14px; padding: 24px 32px; } .p-hero__label.is-size-small { --label-fs: 12px; } .p-hero__label.is-size-large { --label-fs: 18px; } } .p-hero__center { position: relative; z-index: 2; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 0 var(--gutter) 40px; text-align: center; } .p-hero__logo { width: min(64vw, 300px); filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.35)); } .p-hero__logo-img { width: 100%; margin: 0 auto; } .p-hero__logo-text { display: block; font-size: clamp(32px, 7vw, 64px); font-weight: 700; line-height: 1.3; letter-spacing: 0.12em; } .p-hero__catch { margin-top: 24px; font-size: clamp(16px, 2.4vw, 24px); font-weight: 700; letter-spacing: 0.16em; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); } .p-hero__pause { position: absolute; right: 16px; bottom: 72px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--c-white); background-color: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50%; transition: background-color var(--dur) ease; } .p-hero__pause::before { content: ""; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: var(--i-pause) center / contain no-repeat; mask: var(--i-pause) center / contain no-repeat; } .p-hero__pause[aria-pressed="true"]::before { -webkit-mask-image: var(--i-play); mask-image: var(--i-play); } /* お知らせ帯がないときは一時停止ボタンを下端に寄せる */ .p-hero__pause.is-no-notice { bottom: 16px; } .p-hero__pause:hover { background-color: rgba(230, 57, 70, 0.8); } .p-hero__notice { position: relative; z-index: 2; color: var(--notice-text, var(--c-white)); background-color: var(--notice-bg, rgba(20, 10, 8, 0.6)); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } /* お知らせ帯の波線・つぶつぶ（トップページの編集画面で設定） */ .p-hero__notice .c-wave { height: 16px; } .p-hero__notice .c-wave--top { top: 0; } .c-wave.is-notice { color: var(--notice-bg, rgba(20, 10, 8, 0.6)); } /* 帯は半透明のため、奥の波を重ねると重なり部分だけ濃くなる。上端は手前の波1枚にする */ .c-wave.is-notice .c-wave__svg--back { display: none; } .p-hero__notice.has-wave-bottom { padding-bottom: 12px; } .p-hero__notice.has-dots::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--dots-image); background-size: 80px 80px; opacity: var(--dots-opacity, 0.22); } .p-hero__notice.is-dots-soft { --dots-opacity: 0.14; } .p-hero__notice.is-dots-normal { --dots-opacity: 0.26; } .p-hero__notice.is-dots-strong { --dots-opacity: 0.42; } @media (min-width: 1024px) { .p-hero__notice .c-wave { height: 22px; } .p-hero__notice.has-wave-bottom { padding-bottom: 16px; } } .p-hero__notice-link { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px; min-height: 56px; padding: 10px var(--gutter); font-size: 13px; font-weight: 700; text-align: center; } a.p-hero__notice-link:hover .p-hero__notice-text { text-decoration: underline; text-underline-offset: 4px; } .p-hero__notice-date { color: var(--notice-date, var(--c-gold)); letter-spacing: 0.08em; } .p-hero__notice-text::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; vertical-align: middle; background-color: var(--c-red); border-radius: 50%; animation: notice-blink 1.6s ease-in-out infinite; } @keyframes notice-blink { 50% { opacity: 0.2; } } @media (min-width: 1024px) { .p-hero__notice-link { font-size: 15px; } .p-hero__pause { right: 32px; bottom: 80px; } .p-hero__pause.is-no-notice { bottom: 32px; } } /* ========================================================= * 07. フロントページ各セクション * ======================================================= */ /* ---------- Event ---------- */ /* * 背景色は管理画面（フロントページ › Event › 背景色）で変更可能。 * 選択時は functions.php から :root に --event-bg（色）と --event-bg-image:none（グラデーションを外す）が出力される。 */ .p-event { padding-top: 56px; background-color: var(--event-bg, var(--c-ivory)); background-image: var(--event-bg-image, linear-gradient(135deg, rgba(255, 227, 230, 0.6) 0%, rgba(253, 248, 240, 0) 45%)); } /* * あしらいの重なり順：白パネルの背景 ＜ 模様（2）＜ パネルの中身（3）＜ あしらい画像（4） * .p-event__deco 自体には z-index を付けない（子要素がパネルと同じ重なり順で比較されるようにするため）。 */ .p-event__deco { position: absolute; inset: 0; pointer-events: none; } /* 模様が白パネルの下に潜り込まないよう、パネルより手前に出す */ .p-event__dots-top, .p-event__dots-left { z-index: 2; } .p-event__dots-top { top: 0; right: 4%; /* パネル手前に出すため、見出しやイベントカードにかからない高さに抑える（パネル上部の余白内で止める） */ height: 88px; } @media (min-width: 1024px) { .p-event__dots-top { height: 140px; } } .p-event__dots-left { bottom: 24px; left: 2%; } .p-event__deco-img { position: absolute; z-index: 4; width: 120px; } .p-event__deco-img img { width: 100%; } /* * あしらい画像1：右上のドット模様（.p-event__dots-top）に重ねる * 直上のグローバルナビ（sticky・z-index:1000）と重ならないよう、セクション内に収める。 * ※ z-index をナビより上にすると、スクロール時に固定ナビやメガメニューの上に画像が乗ってしまうため位置で回避。 */ .p-event__deco-img--1 { top: 0; right: 4%; } /* あしらい画像2：左下のドット模様（.p-event__dots-left）に重ねる（下端から少しはみ出させる） */ .p-event__deco-img--2 { bottom: -12px; left: 2%; } @media (min-width: 768px) { .p-event__deco-img { width: 170px; } } @media (min-width: 1024px) { .p-event__deco-img { width: 230px; } .p-event__deco-img--1 { top: 0; right: calc(4% + 16px); } .p-event__deco-img--2 { bottom: -24px; left: calc(2% + 16px); } } /* * パネル自体には z-index を付けず（重なりのグループを作らない）、中身（見出し・カード・ボタン）だけを模様より手前に出す。 * → 重なり順：白パネルの背景 ＜ 模様（2）＜ パネルの中身（3）＜ あしらい画像（4） * 模様は白背景の上には見えるが、ボタンやカードの上にはかぶらない。 */ .p-event__panel { position: relative; margin: 0 var(--gutter); padding: 40px 20px 48px; background-color: var(--c-white); border-radius: var(--radius); box-shadow: var(--shadow-s); } .p-event__panel > .p-event__head, .p-event__panel > .p-event__body, .p-event__panel > .c-btn-wrap { position: relative; z-index: 3; } .p-event__head { display: flex; flex-direction: column; align-items: center; margin-bottom: 24px; } .p-event__head .c-heading { margin-bottom: 16px; } .p-event__nav { display: none; } .p-event__swiper { overflow: visible; } .p-event__body { overflow: hidden; margin-right: -20px; } @media (min-width: 768px) { .p-event__nav { display: flex; } } @media (min-width: 1024px) { .p-event { padding-top: 96px; } .p-event__panel { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 32px; margin: 0 0 0 max(var(--gutter), calc((100vw - var(--container-wide)) / 2)); padding: 56px 0 56px 48px; border-radius: var(--radius) 0 0 var(--radius); } .p-event__head { align-items: flex-start; justify-content: center; margin-bottom: 0; } .p-event__head .c-heading { margin-bottom: 32px; text-align: left; } .p-event__head .c-heading__line { margin-left: 0; transform: rotate(var(--heading-tilt, -3deg)); } .p-event__body { margin-right: 0; padding-right: 0; } .p-event__panel > .c-btn-wrap { grid-column: 1 / -1; margin-top: 48px; } } /* ---------- About ---------- */ .p-about { padding: 96px 0 0; overflow: hidden; color: var(--c-white); background: linear-gradient(160deg, var(--c-blue-dark), var(--c-navy)); } /* * イラスト（.p-about__illust）は上端からはみ出す配置＋パララックスで上に動くため、 * 縦方向は切り取らず、横方向（SPの右はみ出しによる横スクロール防止）だけ切り取る。 * overflow: clip 非対応ブラウザでは従来どおり hidden（overflow-x: hidden + y: visible は auto 扱いになりスクロールバーが出るため @supports で分岐）。 */ @supports (overflow: clip) { .p-about { overflow: visible; overflow-x: clip; } } .p-about__bg { position: absolute; inset: 0; overflow: hidden; } .p-about__bg-inner { position: absolute; inset: -15% 0; } .p-about__bg-img { width: 100%; height: 100%; max-width: none; object-fit: cover; } .p-about__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(11, 44, 71, 0.72), rgba(11, 44, 71, 0.5)); } .p-about__illust { position: absolute; top: 16px; right: -40px; z-index: 2; width: 180px; opacity: 0.95; } .p-about__illust-img { width: 100%; } .p-about__inner { position: relative; z-index: 3; max-width: 840px; margin: 0 auto; padding: 0 var(--gutter) 80px; text-align: center; } .p-about__lead { margin-bottom: 24px; font-size: 18px; font-weight: 700; letter-spacing: 0.12em; } .p-about__text { font-size: 15px; line-height: 2.2; } .p-about__text p + p { margin-top: 1em; } @media (min-width: 1024px) { .p-about { padding-top: 160px; } .p-about__illust { top: -40px; right: 2%; width: 360px; } .p-about__inner { padding-bottom: 120px; } .p-about__lead { font-size: 22px; } .p-about__text { font-size: 16px; } } /* ---------- News ---------- */ /* * 背景色・背景の模様（形・色・濃さ）は管理画面（フロントページ › News）で変更可能。 * 色は functions.php から :root に --news-bg / --news-dot-color として出力される。 */ .p-news { padding-bottom: calc(96px + var(--wave-h)); background-color: var(--news-bg, var(--c-white)); } /* 背景全体の模様の色（.c-bg-pattern で使用） */ .p-news { --bg-dot-color: var(--news-dot-color, var(--c-red)); } .p-news__inner { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .p-news__slider { position: relative; } .p-news__swiper { overflow: visible; } .p-news__prev, .p-news__next { display: none; } @media (max-width: 767.98px) { .c-tabs__panel { overflow: hidden; margin-right: calc(var(--gutter) * -1); } } @media (min-width: 768px) { .p-news__swiper { overflow: hidden; } } @media (min-width: 1024px) { .p-news__slider { padding: 0 4px; } .p-news__prev, .p-news__next { position: absolute; top: calc((100% - 80px) / 2); z-index: 2; display: inline-flex; } .p-news__prev { left: -64px; } .p-news__next { right: -64px; } } .p-news__deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .p-news__deco-img { position: absolute; display: none; overflow: hidden; border-radius: 50%; box-shadow: var(--shadow-m); } .p-news__deco-img img { width: 100%; aspect-ratio: 1; object-fit: cover; } /* * PC：画像1は左上（中央の見出しの左側）、画像2は右下（ボタン横〜ウェーブ上）に配置 * ※ SPはコンテンツと重なるため非表示 */ @media (min-width: 1024px) { .p-news__deco-img { display: block; } .p-news__deco-img--1 { top: 32px; left: 2%; width: 180px; } .p-news__deco-img--2 { right: 2%; bottom: calc(var(--wave-h) + 8px); width: 160px; } } @media (min-width: 1440px) { .p-news__deco-img--1 { width: 220px; } .p-news__deco-img--2 { width: 190px; } } /* ---------- Enjoy ---------- */ /* 背景色は管理画面（フロントページ › Enjoy › 背景色）で変更可能。選択時は functions.php から :root に --enjoy-bg が出力される */ .p-enjoy { padding: 64px 0 calc(96px + var(--wave-h)); overflow: hidden; background-color: var(--enjoy-bg, var(--c-cream)); } .p-enjoy__head { position: relative; z-index: 2; padding: 0 var(--gutter); } /* * 背景全体のつぶつぶ模様（管理画面 › Enjoy › 背景のつぶつぶ模様）。お知らせ帯と同じ --dots-image を使用。 * 明るい背景の上に載るため、お知らせ帯（暗い帯）より不透明度を高めにしている。 */ .p-enjoy.has-dots::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--dots-image); background-size: 80px 80px; opacity: var(--dots-opacity, 0.5); } .p-enjoy.is-dots-soft { --dots-opacity: 0.35; } .p-enjoy.is-dots-normal { --dots-opacity: 0.6; } .p-enjoy.is-dots-strong { --dots-opacity: 0.9; } .p-enjoy__list { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, 1fr); } @media (min-width: 1024px) { .p-enjoy { padding-top: 80px; } .p-enjoy__list { grid-template-columns: repeat(4, 1fr); } } .p-enjoy__link { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; color: var(--c-white); } @media (min-width: 1024px) { .p-enjoy__link { aspect-ratio: 9 / 10; } } .p-enjoy__thumb { position: absolute; inset: 0; } .p-enjoy__img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1.2s var(--ease-out), filter var(--dur) ease; } .p-enjoy__thumb::after { content: ""; position: absolute; inset: 0; background-color: rgba(30, 14, 12, 0.38); transition: background-color var(--dur) ease; } .p-enjoy__link:hover .p-enjoy__img { transform: scale(1.08); } .p-enjoy__link:hover .p-enjoy__thumb::after { background-color: rgba(230, 57, 70, 0.45); } .p-enjoy__text { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 24%; gap: 4px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } .p-enjoy__icon { width: 32px; height: 32px; transition: transform 0.5s var(--ease-out); } .p-enjoy__link:hover .p-enjoy__icon { transform: translateY(-6px) rotate(-8deg); } .p-enjoy__en { font-family: var(--ff-script); font-size: 24px; font-weight: 700; line-height: 1.2; } .p-enjoy__ja { margin-top: 8px; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2em; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; } @media (min-width: 1024px) { .p-enjoy__icon { width: 44px; height: 44px; } .p-enjoy__en { font-size: 30px; } .p-enjoy__ja { font-size: 30px; } } .p-enjoy > .c-btn-wrap { position: relative; z-index: 2; margin-top: 48px; } .p-enjoy__deco { position: absolute; inset: 0; pointer-events: none; } .p-enjoy__deco-img { position: absolute; z-index: 3; display: none; width: 120px; overflow: hidden; border-radius: 50%; } .p-enjoy__deco-img img { width: 100%; aspect-ratio: 1; object-fit: cover; } /* あしらい画像（左下の1枚のみ） */ .p-enjoy__deco-img--1 { bottom: 80px; left: 2%; } .p-enjoy__dots { bottom: 0; left: 0; z-index: 1; } @media (min-width: 768px) { .p-enjoy__deco-img { display: block; } } @media (min-width: 1024px) { .p-enjoy__deco-img { width: 220px; } .p-enjoy__deco-img--1 { bottom: 80px; } } /* ---------- Blog ---------- */ /* * 背景色・背景の模様（形・色・濃さ）は管理画面（フロントページ › Blog）で変更可能。 * 色は functions.php から :root に --blog-bg / --blog-dot-color として出力される。 */ .p-blog { --bg-dot-color: var(--blog-dot-color, var(--c-red)); overflow: hidden; background-color: var(--blog-bg, var(--c-white)); } .p-blog__dots-left { top: 40px; left: 0; } .p-blog__dots-right { right: 0; bottom: 40px; } /* * あしらい画像（右下・緑のドット模様に重ねる） * 「ブログ一覧」ボタンの右側〜セクション下端の余白に収まる大きさにし、カードには重ねない。 * SPはボタンと重なるため非表示。 */ .p-blog__deco-img { position: absolute; right: 2%; bottom: 16px; z-index: 2; display: none; width: 120px; pointer-events: none; } .p-blog__deco-img img { width: 100%; } @media (min-width: 768px) { .p-blog__deco-img { display: block; } } @media (min-width: 1024px) { .p-blog__deco-img { right: calc(2% + 16px); bottom: 8px; width: 160px; } } @media (min-width: 1440px) { .p-blog__deco-img { width: 170px; } } .p-blog__inner { position: relative; z-index: 1; max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); } .p-blog__list { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 600px) { .p-blog__list { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .p-blog__list { grid-template-columns: repeat(4, 1fr); } } /* ---------- Feature（べにたま） ---------- */ .p-feature { padding: 96px 0; overflow: hidden; color: var(--c-white); background: linear-gradient(135deg, var(--c-red-dark), #7a0f1c); } .p-feature__bg { position: absolute; inset: 0; overflow: hidden; } .p-feature__bg-inner { position: absolute; inset: -20% 0; } .p-feature__bg-img { width: 100%; height: 100%; max-width: none; object-fit: cover; } .p-feature__bg::after { content: ""; position: absolute; inset: 0; background: rgba(40, 12, 14, 0.55); } .p-feature__inner { position: relative; z-index: 1; max-width: 840px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; } .p-feature__text { font-size: 15px; line-height: 2.2; } .p-feature__text p + p { margin-top: 1em; } @media (min-width: 1024px) { .p-feature { padding: 140px 0; } .p-feature__text { font-size: 16px; } } /* ---------- Movie ---------- */ /* * 背景色・背景の模様・文字の大きさと色は管理画面（フロントページ › Movie）で変更可能。 * 色は functions.php から :root に --movie-bg / --movie-dot-color / --movie-heading-color / * --movie-label-color / --movie-title-color として出力される。 */ .p-movie { --bg-dot-color: var(--movie-dot-color, var(--c-red)); padding-bottom: calc(96px + var(--wave-h)); background-color: var(--movie-bg, var(--c-white)); } .p-movie__inner { position: relative; z-index: 1; max-width: 840px; margin: 0 auto; padding: 0 var(--gutter); } /* 動画が2本以上のときは横幅を広げて2列にする */ .p-movie__inner.is-multi { max-width: 1120px; } /* 見出し（Movie Gallery / ムービーギャラリー）の色 */ .p-movie .c-heading__en, .p-movie .c-heading__ja { color: var(--movie-heading-color, var(--c-text)); } /* 見出しの大きさ（小・大。中は共通の .c-heading のまま） */ .p-movie .c-heading.is-size-small .c-heading__en { font-size: 34px; } .p-movie .c-heading.is-size-small .c-heading__ja { font-size: 13px; } .p-movie .c-heading.is-size-large .c-heading__en { font-size: 54px; } .p-movie .c-heading.is-size-large .c-heading__ja { font-size: 16px; } @media (min-width: 1024px) { .p-movie .c-heading.is-size-small .c-heading__en { font-size: 44px; } .p-movie .c-heading.is-size-small .c-heading__ja { font-size: 14px; } .p-movie .c-heading.is-size-large .c-heading__en { font-size: 74px; } .p-movie .c-heading.is-size-large .c-heading__ja { font-size: 20px; } } .p-movie__list { display: grid; gap: 56px; } /* 2列表示。本数が奇数のときは最後の1本を中央に置く */ @media (min-width: 768px) { .p-movie__list.is-multi { display: flex; flex-wrap: wrap; justify-content: center; gap: 56px 40px; } .p-movie__list.is-multi > .p-movie__item { width: calc((100% - 40px) / 2); } } .p-movie__item { text-align: center; } .p-movie__label { font-family: var(--ff-script); font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--movie-label-color, var(--c-red)); } .p-movie__title { position: relative; margin-bottom: 28px; padding-bottom: 12px; font-size: 18px; font-weight: 700; color: var(--movie-title-color, var(--c-text)); } /* タイトルが無く小見出しだけのときも、動画との間隔をあける */ .p-movie__label:has(+ .p-movie__player) { margin-bottom: 20px; } .p-movie__title::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 40px; height: 2px; background-color: var(--c-border); transform: translateX(-50%); } .p-movie__player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background-color: var(--c-navy); border-radius: var(--radius); box-shadow: var(--shadow-m); } .p-movie__trigger, .p-movie__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .p-movie__thumb { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1s var(--ease-out), filter var(--dur) ease; } .p-movie__trigger:hover .p-movie__thumb { transform: scale(1.04); filter: brightness(0.85); } .p-movie__play { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; color: var(--c-white); background-color: rgba(230, 57, 70, 0.9); border-radius: 50%; transform: translate(-50%, -50%); transition: transform var(--dur) var(--ease-out); } .p-movie__play::before { content: ""; width: 28px; height: 28px; margin-left: 4px; background-color: currentColor; -webkit-mask: var(--i-play) center / contain no-repeat; mask: var(--i-play) center / contain no-repeat; } /* 再生ボタンの波紋 */ .p-movie__play::after { content: ""; position: absolute; inset: 0; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 50%; animation: play-ripple 2s ease-out infinite; } @keyframes play-ripple { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } } .p-movie__trigger:hover .p-movie__play { transform: translate(-50%, -50%) scale(1.08); } @media (min-width: 1024px) { .p-movie__title { font-size: 22px; } .p-movie__play { width: 96px; height: 96px; } .p-movie__play::before { width: 36px; height: 36px; } } /* 2列表示のときは再生ボタンを標準サイズにとどめる */ @media (min-width: 1024px) { .p-movie__list.is-multi .p-movie__play { width: 72px; height: 72px; } .p-movie__list.is-multi .p-movie__play::before { width: 28px; height: 28px; } } /* 小見出し・動画タイトルの大きさ（小・大。中は上記の標準） */ .p-movie__list.is-title-small .p-movie__label { font-size: 18px; } .p-movie__list.is-title-small .p-movie__title { font-size: 15px; } .p-movie__list.is-title-large .p-movie__label { font-size: 26px; } .p-movie__list.is-title-large .p-movie__title { font-size: 22px; } @media (min-width: 1024px) { .p-movie__list.is-title-small .p-movie__label { font-size: 18px; } .p-movie__list.is-title-small .p-movie__title { font-size: 17px; } .p-movie__list.is-title-large .p-movie__label { font-size: 30px; } .p-movie__list.is-title-large .p-movie__title { font-size: 28px; } } /* フロントページで Movie が無い場合も Blog / Feature の下にウェーブ分の余白を確保 */ .p-front > .p-section:last-child:not(.p-movie) { padding-bottom: calc(96px + var(--wave-h)); } /* ========================================================= * 08. フッター * ======================================================= */ .l-footer { position: relative; color: var(--c-white); background: linear-gradient(180deg, var(--c-blue-light) 0%, var(--c-blue) 35%, var(--c-blue-dark) 100%); } .l-footer__main { position: relative; padding: 48px 0 40px; } /* * いちごのつぶつぶ模様（サイト共通設定でON/OFF・濃さを切替） * 種の形の楕円をランダム風に配置したSVGタイルを敷き、下に向かってフェードさせる。 */ .l-footer.has-dots .l-footer__main::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--dots-image); background-size: 120px 120px; opacity: var(--dots-opacity, 0.22); -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 60%, transparent 100%); } .l-footer.is-dots-soft { --dots-opacity: 0.12; } .l-footer.is-dots-normal { --dots-opacity: 0.22; } .l-footer.is-dots-strong { --dots-opacity: 0.38; } /* 模様より手前に中身を表示 */ .l-footer__main > .l-footer__inner { position: relative; z-index: 1; } .l-footer__inner { display: grid; gap: 40px; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } /* * レイアウト * - SP〜タブレット：協会情報 → ナビ → 施設バナー の縦積み * - 1024px〜：左に協会情報、右にナビ。施設バナーはナビの下・右寄せ * - 1280px〜：協会情報 ｜ ナビ ｜ 施設バナー（一番右）の3列 */ .l-footer__info { grid-area: info; } .l-footer__navs { grid-area: navs; } .l-footer__facility { grid-area: facility; } .l-footer__inner { grid-template-areas: "info" "navs" "facility"; } @media (min-width: 1024px) { .l-footer__main { padding: 64px 0 56px; } .l-footer__inner { grid-template-columns: 260px minmax(0, 1fr); grid-template-areas: "info navs" "info facility"; gap: 40px 56px; } .l-footer__facility { justify-self: end; } } @media (min-width: 1280px) { .l-footer__inner { max-width: var(--container-wide); grid-template-columns: 260px minmax(0, 1fr) auto; grid-template-areas: "info navs facility"; gap: 48px; } .l-footer__facility { align-self: start; } } .l-footer__logo { display: inline-block; margin-bottom: 16px; } .l-footer__logo-img { width: auto; max-height: 120px; } .l-footer__logo-text { font-size: 22px; font-weight: 700; letter-spacing: 0.08em; } .l-footer__org { margin-bottom: 8px; font-size: 14px; font-weight: 700; } .l-footer__address { font-size: 13px; line-height: 1.8; opacity: 0.9; } .l-footer__address-text, .l-footer__tel { display: block; } .l-footer__tel a:hover { text-decoration: underline; } .l-footer__fax { margin-left: 1em; } /* 施設バナー：白い台紙の上に画像を載せ、背景の青が透けないようにする */ .l-footer__facility-box { display: block; width: fit-content; padding: 8px; background-color: var(--c-white); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) ease; } .l-footer__facility-box.is-link:hover, .l-footer__facility-box.is-link:focus-visible { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28); transform: translateY(-4px); } .l-footer__facility-img { display: block; width: 100%; max-width: 224px; height: auto; border-radius: 4px; transition: opacity var(--dur) ease; } /* 画像だけを薄くしても下は白い台紙なので、青が透けない */ .l-footer__facility-box.is-link:hover .l-footer__facility-img { opacity: 0.85; } /* フッターナビ */ .l-footer__nav-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 24px; } /* モバイル〜タブレット（1024px未満）：ロゴ・協会情報・施設バナーを中央揃え */ @media (max-width: 1023px) { .l-footer__info { text-align: center; } .l-footer__logo { display: block; width: fit-content; margin-right: auto; margin-left: auto; } .l-footer__logo-img { margin: 0 auto; } .l-footer__facility { justify-self: center; } .l-footer__facility-box { margin: 0 auto; } } /* スマホ（768px未満）：2列のフッターナビも中央揃えにして全体の軸をそろえる */ @media (max-width: 767px) { .c-fnav { text-align: center; } } /* 768px〜：About / Enjoy / Association / Blog & Contact を4列で横並び */ @media (min-width: 768px) { .l-footer__nav-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; } } .c-fnav__heading { margin-bottom: 10px; font-family: var(--ff-script); font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--c-gold); } .c-fnav__list li + li { margin-top: 6px; } .c-fnav__list a { position: relative; font-size: 13px; opacity: 0.92; } .c-fnav__list a::after { content: ""; position: absolute; right: 0; bottom: -2px; left: 0; height: 1px; background-color: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--dur) var(--ease-out); } .c-fnav__list a:hover { opacity: 1; } .c-fnav__list a:hover::after { transform: scaleX(1); transform-origin: left; } /* 関連リンクバナー */ .l-footer__banners { padding: 28px 0; border-top: 1px solid rgba(255, 255, 255, 0.2); } .c-banner-swiper .swiper-wrapper { transition-timing-function: linear !important; } .c-banner-swiper__item { width: 180px; } @media (min-width: 1024px) { .c-banner-swiper__item { width: 200px; } } .c-banner-swiper__link { display: block; transition: transform var(--dur) var(--ease-out), opacity var(--dur) ease; } .c-banner-swiper__link:hover { opacity: 0.85; transform: translateY(-3px); } .c-banner-swiper__img { width: 100%; aspect-ratio: 20 / 7; object-fit: contain; background-color: var(--c-white); border-radius: 4px; } /* コピーライト */ /* コピーライト帯：背景色はサイト共通設定で変更可（文字色は明るさに応じて自動切替） */ .l-footer__bottom { padding: 16px 0 88px; color: var(--footer-bottom-text, inherit); background-color: var(--footer-bottom-bg, var(--c-navy)); } .l-footer__bottom-inner { display: flex; flex-direction: column-reverse; align-items: center; gap: 12px; max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); } @media (min-width: 768px) { .l-footer__bottom { padding-bottom: 16px; } .l-footer__bottom-inner { flex-direction: row; justify-content: space-between; padding-right: 120px; } } .l-footer__copy { font-size: 12px; opacity: 0.85; } .l-footer__sns { display: flex; gap: 16px; } .l-footer__sns-link { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; transition: color var(--dur) ease, transform var(--dur) var(--ease-out); } .l-footer__sns-link:hover { color: var(--footer-bottom-hover, var(--c-gold)); transform: translateY(-2px); } .c-sns-icon { width: 18px; height: 18px; } /* ========================================================= * 09. GSAP アニメーション初期状態・フォールバック * * GSAPで動かす要素は初期状態で非表示にしておく。 * JS（GSAP）が読み込めなかった場合でも、2.5秒後に CSS アニメーションで * 自動表示されるフォールバックを用意（コンテンツが消えたままにならない）。 * GSAP 起動時は html に .is-gsap が付き、フォールバックを停止する。 * ======================================================= */ .js-fade, .js-fade-item, .p-hero .js-split, .js-hero-logo { opacity: 0; visibility: hidden; animation: reveal-fallback 0.8s ease 2.5s forwards; } @keyframes reveal-fallback { to { opacity: 1; visibility: visible; } } .is-gsap .js-fade, .is-gsap .js-fade-item, .is-gsap .p-hero .js-split, .is-gsap .js-hero-logo { animation: none; } /* GSAP不可・視差効果を減らす設定時：即時表示 */ .is-reveal-all .js-fade, .is-reveal-all .js-fade-item, .is-reveal-all .p-hero .js-split, .is-reveal-all .js-hero-logo { opacity: 1; visibility: visible; animation: none; } /* パララックス要素のGPU最適化 */ .js-parallax { will-change: transform; } /* ========================================================= * 10. 視差効果を減らす設定への対応 * ======================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } .c-wave__svg, .c-wave__path { animation: none !important; } .js-fade, .js-fade-item, .p-hero .js-split, .js-hero-logo { opacity: 1; visibility: visible; animation: none !important; } .js-parallax { will-change: auto; } /* 代替画像がある場合は動画を表示しない */ .p-hero__media:has(.p-hero__image-sp) .p-hero__video { display: none; } .p-hero__image-sp { display: block; } } /* ========================================================= * 11. 下層ページ（見出しエリア・パンくず・一覧・記事本文） * ======================================================= */ /* ---------- 共通コンテナ ---------- */ .l-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .l-container--narrow { max-width: 880px; } .l-main--sub { padding: 24px 0 calc(96px + var(--wave-h)); } @media (min-width: 1024px) { .l-main--sub { padding: 40px 0 calc(140px + var(--wave-h)); } } /* ---------- 見出しエリア ---------- */ .p-subhero { position: relative; display: flex; align-items: center; justify-content: center; min-height: 220px; padding: 56px var(--gutter) calc(48px + var(--wave-h)); overflow: hidden; color: var(--c-white); text-align: center; background-color: var(--c-red-dark); } @media (min-width: 1024px) { .p-subhero { min-height: 360px; padding-top: 80px; } } .p-subhero__bg { position: absolute; inset: 0; overflow: hidden; } .p-subhero__bg-inner { position: absolute; inset: -15% 0; } .p-subhero__img { width: 100%; height: 100%; max-width: none; object-fit: cover; } .p-subhero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(40, 12, 14, 0.35), rgba(40, 12, 14, 0.55)); } /* 画像未設定時：いちご色のグラデーション＋水玉 */ .p-subhero.is-noimage .p-subhero__bg { background: radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.18) 0, transparent 30%), radial-gradient(circle at 85% 80%, rgba(255, 209, 102, 0.25) 0, transparent 35%), linear-gradient(135deg, var(--c-red) 0%, var(--c-red-dark) 60%, #9d0f1f 100%); } .p-subhero.is-noimage .p-subhero__bg::after { background-image: radial-gradient(circle, rgba(255, 255, 255, 0.16) 1.5px, transparent 2px); background-size: 18px 18px; } .p-subhero__dots { top: 24px; right: 4%; opacity: 0.35; } .p-subhero__inner { position: relative; z-index: 3; max-width: 900px; } .p-subhero__en { font-family: var(--ff-script); font-size: 40px; font-weight: 700; line-height: 1.1; color: var(--c-gold); transform: rotate(var(--heading-tilt, -3deg)); } .p-subhero__title { margin-top: 10px; font-size: 22px; font-weight: 700; line-height: 1.5; letter-spacing: 0.1em; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); } @media (min-width: 1024px) { .p-subhero__en { font-size: 60px; } .p-subhero__title { font-size: 30px; } } .p-subhero__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin-top: 16px; font-size: 13px; } .p-subhero__date { letter-spacing: 0.08em; opacity: 0.9; } .p-subhero__term { padding: 2px 12px; font-weight: 700; color: var(--c-text); background-color: var(--c-gold); border-radius: 999px; transition: background-color var(--dur) ease; } .p-subhero__term:hover { background-color: var(--c-white); } /* ---------- パンくず ---------- */ .c-breadcrumb { max-width: var(--container); margin: 0 auto; padding: 12px var(--gutter) 0; } .c-breadcrumb__list { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 12px; color: var(--c-text-sub); } .c-breadcrumb__item:not(:last-child)::after { content: "›"; margin: 0 10px; opacity: 0.6; } .c-breadcrumb__item:last-child { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .c-breadcrumb__link { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(122, 106, 100, 0.4); } .c-breadcrumb__link:hover { color: var(--c-red); } /* ---------- カテゴリー絞り込み ---------- */ .c-term-nav { margin: 24px 0 32px; } .c-term-nav__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .c-term-nav__link { display: inline-block; padding: 8px 20px; font-size: 14px; font-weight: 700; background-color: var(--c-white); border: 1px solid var(--c-border); border-radius: 999px; transition: color var(--dur) ease, background-color var(--dur) ease, border-color var(--dur) ease; } .c-term-nav__link:hover { color: var(--c-red); border-color: var(--c-red); } .c-term-nav__link.is-current { color: var(--c-white); background-color: var(--c-red); border-color: var(--c-red); } /* ---------- 一覧 ---------- */ .p-archive__list { display: grid; grid-template-columns: 1fr; gap: 28px 24px; margin-top: 32px; } @media (min-width: 600px) { .p-archive__list { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .p-archive__list { grid-template-columns: repeat(3, 1fr); gap: 40px 32px; } } .c-card__date--event::before { display: none; } .c-card__date--event { font-weight: 700; color: var(--c-red); } .c-card__excerpt { display: -webkit-box; margin-top: 6px; overflow: hidden; font-size: 13px; line-height: 1.7; color: var(--c-text-sub); -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .p-archive__search { max-width: 560px; margin: 24px auto 0; } /* ---------- ページ送り ---------- */ .c-pagination { margin-top: 56px; } .c-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .c-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 8px; font-weight: 700; background-color: var(--c-white); border: 1px solid var(--c-border); border-radius: 999px; transition: color var(--dur) ease, background-color var(--dur) ease, border-color var(--dur) ease; } .c-pagination a.page-numbers:hover { color: var(--c-red); border-color: var(--c-red); } .c-pagination .page-numbers.current { color: var(--c-white); background-color: var(--c-red); border-color: var(--c-red); } .c-pagination .page-numbers.dots { background: none; border: 0; } .c-pagination .prev::before, .c-pagination .next::before { content: ""; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: var(--i-chevron) center / contain no-repeat; mask: var(--i-chevron) center / contain no-repeat; } .c-pagination .prev::before { transform: scaleX(-1); } /* ---------- 記事詳細 ---------- */ .p-entry { margin-top: 32px; padding: 28px 20px 40px; background-color: var(--c-white); border-radius: var(--radius); box-shadow: var(--shadow-s); } @media (min-width: 768px) { .p-entry { padding: 48px 56px 56px; } } .p-entry__event { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 28px; padding: 14px 20px; background-color: var(--c-pink); border-left: 5px solid var(--c-red); border-radius: 0 var(--radius-s) var(--radius-s) 0; } .p-entry__event-label { font-size: 13px; font-weight: 700; color: var(--c-red); } .p-entry__event-date { margin: 0; font-size: 17px; font-weight: 700; } .p-entry__thumb { margin-bottom: 32px; overflow: hidden; border-radius: var(--radius-s); } .p-entry__thumb-img { width: 100%; } /* 前後の記事 */ .p-entry__nav { display: grid; gap: 12px; margin-top: 48px; padding-top: 32px; border-top: 1px dashed var(--c-border); } @media (min-width: 768px) { .p-entry__nav { grid-template-columns: 1fr 1fr; } } .p-entry__nav-link { display: block; padding: 14px 18px; background-color: var(--c-ivory); border-radius: var(--radius-s); transition: background-color var(--dur) ease; } .p-entry__nav-link:hover { background-color: var(--c-pink); } .p-entry__nav-link--next { text-align: right; } @media (min-width: 768px) { .p-entry__nav-link--next { grid-column: 2; } } .p-entry__nav-label { display: block; font-size: 12px; color: var(--c-red); } .p-entry__nav-title { display: block; overflow: hidden; font-size: 14px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; } /* ---------- 本文（ブロックエディターの出力） ---------- */ .c-entry { font-size: 15px; line-height: 2; word-break: break-word; } @media (min-width: 768px) { .c-entry { font-size: 16px; } } .c-entry > * + * { margin-top: 1.4em; } .c-entry h2 { position: relative; margin-top: 2.4em; padding: 0.5em 0 0.5em 18px; font-size: 1.4em; line-height: 1.5; border-bottom: 2px solid var(--c-pink); } .c-entry h2::before { content: ""; position: absolute; top: 0.55em; bottom: 0.55em; left: 0; width: 6px; background-color: var(--c-red); border-radius: 3px; } .c-entry h3 { margin-top: 2em; padding-bottom: 0.3em; font-size: 1.2em; line-height: 1.5; border-bottom: 1px dashed var(--c-border); } .c-entry h4 { margin-top: 1.8em; font-size: 1.05em; color: var(--c-red-dark); } .c-entry a { color: var(--c-red-dark); text-decoration: underline; text-underline-offset: 3px; } .c-entry a:hover { text-decoration: none; } .c-entry ul, .c-entry ol { padding-left: 1.5em; } .c-entry ul { list-style: disc; } .c-entry ol { list-style: decimal; } .c-entry li::marker { color: var(--c-red); } .c-entry img { height: auto; border-radius: var(--radius-s); } .c-entry figure figcaption, .c-entry .wp-element-caption { margin-top: 8px; font-size: 13px; color: var(--c-text-sub); text-align: center; } .c-entry blockquote { padding: 16px 20px; color: var(--c-text-sub); background-color: var(--c-ivory); border-left: 4px solid var(--c-border); border-radius: 0 var(--radius-s) var(--radius-s) 0; } .c-entry table { width: 100%; font-size: 14px; border-collapse: collapse; } .c-entry th, .c-entry td { padding: 10px 14px; text-align: left; vertical-align: top; border: 1px solid var(--c-border); } .c-entry th { width: 30%; font-weight: 700; background-color: var(--c-ivory); } .c-entry hr { border: 0; border-top: 1px dashed var(--c-border); } .c-entry .wp-block-button__link { padding: 12px 32px; color: var(--c-white); text-decoration: none; background-color: var(--c-red); border-radius: 999px; } .c-entry .alignleft { float: left; margin: 0 1.5em 1em 0; } .c-entry .alignright { float: right; margin: 0 0 1em 1.5em; } .c-entry .aligncenter { margin-right: auto; margin-left: auto; } .c-entry__pages { margin-top: 32px; text-align: center; } /* ---------- 検索フォーム ---------- */ .search-form { display: flex; gap: 8px; } .search-form label { flex: 1; } .search-form .search-field { width: 100%; height: 48px; padding: 0 18px; font: inherit; background-color: var(--c-white); border: 1px solid var(--c-border); border-radius: 999px; } .search-form .search-field:focus { border-color: var(--c-red); outline: none; } .search-form .search-submit { height: 48px; padding: 0 24px; font: inherit; font-weight: 700; color: var(--c-white); cursor: pointer; background-color: var(--c-red); border: 0; border-radius: 999px; } /* ---------- 404 ---------- */ .p-notfound { margin-top: 32px; text-align: center; } .p-notfound__text { line-height: 2; } .p-notfound__search { max-width: 480px; margin: 32px auto 0; } /* ========================================================= * 12. フォント設定（サイト共通設定「フォント・見出し」と連動） * --ff-script / --fw-script : 英字見出し * --ff-heading-ja / --fw-heading-ja : 日本語見出し * ======================================================= */ :root { --fw-script: 700; --ff-heading-ja: var(--ff-base); --fw-heading-ja: 700; } .c-heading__en, .p-subhero__en, .p-enjoy__en, .c-fnav__heading, .p-movie__label { font-weight: var(--fw-script); } .c-heading__ja, .p-subhero__title, .p-enjoy__ja, .p-hero__catch, .p-hero__logo-text, .p-about__lead, .p-movie__title, .c-mega__title, .c-entry h2, .c-entry h3 { font-family: var(--ff-heading-ja); font-weight: var(--fw-heading-ja); } /* ========================================================= * 13. SNSボタンの調整 * ======================================================= */ /* PC右端：ホバーしたボタンだけが左へ伸びるよう右揃えにする */ .c-side-sns { align-items: flex-end; } .c-side-sns__link { transition: width var(--dur) var(--ease-out), padding var(--dur) var(--ease-out), background-color var(--dur) ease; } .c-side-sns__link:hover, .c-side-sns__link:focus-visible { width: 60px; padding-right: 12px; } /* SP：ハンバーガーメニュー下部のSNS */ .c-gnav__sns { margin-top: 28px; text-align: center; } .c-gnav__sns-title { margin-bottom: 12px; font-family: var(--ff-script); font-size: 22px; font-weight: var(--fw-script, 700); line-height: 1.2; color: var(--c-red); } .c-gnav__sns-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .c-gnav__sns-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; font-size: 14px; font-weight: 700; color: var(--c-white); background-color: var(--c-text); border-radius: 999px; transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out); } .c-gnav__sns-link:hover { opacity: 0.85; transform: translateY(-2px); } .c-gnav__sns-link--instagram { background: linear-gradient(45deg, #f9a03f, #d6249f 55%, #6a3ee8); } .c-gnav__sns-link--youtube { background-color: #ff0000; } @media (min-width: 1024px) { .c-gnav__sns { display: none; } }