/* --- WooCommerce: 関連商品見出しの食い込み修正 --- 単一商品ページで、上部のフロート要素の影響により
内の

が左上に食い込むのを防止。 BFC を生成し（flow-root）、見出し自体にも clear を付けて確実に回り込み解除。 */ .single-product .related.products, .single-product .upsells.products, .single-product .cross-sells { display: flow-root; clear: both; /* セクションを直前のフロート要素の下に配置 */ /* 回り込みを解除するために新しいブロック整形コンテキスト(BFC)を作る */ } .single-product .related.products>h2, .single-product .upsells.products>h2, .single-product .cross-sells>h2 { clear: both; } /* 商品リスト自体も新しいBFCを開始し、回り込みを解除 */ .single-product .related.products>ul.products, .single-product .upsells.products>ul.products, .single-product .cross-sells>ul.products { /* Wooの既定グリッド/フレックスを壊さないよう、clear のみに留める */ clear: both; } /* PC表示: 商品リストを4列（columns-4）で表示に復元 */ @media (min-width: 960px) { /* 影響を最小化するため、Woo が columns-4 を出力した場合のみフレックス適用 */ .single-product .related.products>ul.products.columns-4, .single-product .upsells.products>ul.products.columns-4, .single-product .cross-sells>ul.products.columns-4 { display: flex; flex-wrap: wrap; } .single-product .related.products>ul.products.columns-4 li.product, .single-product .upsells.products>ul.products.columns-4 li.product, .single-product .cross-sells>ul.products.columns-4 li.product { flex: 0 0 25%; max-width: 25%; box-sizing: border-box; } } /* ================================ WooCommerce: 価格表示の共通スタイル - フォントサイズ: 1.2rem - カラー: #2e6fa9 - 太さ: 700 対象: 商品一覧・商品詳細などの .woocommerce-Price-amount ================================ */ .woocommerce div.product p.price .woocommerce-Price-amount, .woocommerce div.product span.price .woocommerce-Price-amount, .woocommerce ul.products li.product .price .woocommerce-Price-amount, .woocommerce .woocommerce-Price-amount, .woocommerce .woocommerce-Price-amount bdi, .woocommerce .woocommerce-Price-amount .woocommerce-Price-currencySymbol { font-size: 2rem; color: #2e6fa9; font-weight: 700; } /* ================================ WooCommerce: 成功メッセージ色をサイトカラーに - .woocommerce-message の枠線色（デフォルト緑）→ #2e6fa9 - アイコン擬似要素の色も #2e6fa9 ================================ */ .woocommerce .woocommerce-message { border-top-color: #2e6fa9 !important; } .woocommerce .woocommerce-message::before { color: #2e6fa9 !important; } /* WCS: マイアカウント > 定期購入 詳細の「キャンセル」ボタン専用（ユニーク指定） */ .woocommerce-account .shop_table.subscription_details td a.woocommerce-button.button.cancel[href*="change_subscription_to=cancelled"] { background-color: #951818 !important; border-color: #951818 !important; color: #fff !important; background-image: none !important; } /* ================================ SP: 背景に色のつくボタンのサイズと縦間隔の統一 - padding: 0.6em 0.8em; font-size: 16px - 縦に折り返された場合、5px の間隔を付ける ================================ */ @media (max-width: 768px) { /* サイズ統一（アウトラインは除外） */ .wp-block-button .wp-block-button__link:not(.is-style-outline), .wp-element-button:not(.is-style-outline), .woocommerce a.button, .woocommerce .button, a.woocommerce-button.button, .woocommerce-Button.button { font-size: 16px; padding: 0.6em 0.8em; } /* Wooのマイアカウントやテーブル内で縦並びになった時の間隔 */ .woocommerce td a.woocommerce-button.button+a.woocommerce-button.button, .woocommerce td a.button+a.button, .woocommerce .woocommerce-MyAccount-content a.woocommerce-button.button+a.woocommerce-button.button { margin-top: 5px; } /* Gutenbergボタンが縦に並んだ場合の間隔 */ .wp-block-buttons .wp-block-button+.wp-block-button, .wp-block-button .wp-block-button__link+.wp-block-button__link { margin-top: 5px; } } .woocommerce-account .shop_table.subscription_details td a.woocommerce-button.button.cancel[href*="change_subscription_to=cancelled"]:hover, .woocommerce-account .shop_table.subscription_details td a.woocommerce-button.button.cancel[href*="change_subscription_to=cancelled"]:focus { background-color: #7d1313 !important; border-color: #7d1313 !important; color: #fff !important; } /* Woo: 追加済み（お買い物カゴを表示）ボタン */ .woocommerce a.added_to_cart, .woocommerce .added_to_cart, ul.products li.product a.added_to_cart { display: inline-flex; align-items: center; gap: 8px; background-color: rgb(149, 24, 24); color: #fff !important; border-radius: 4px; padding: 10px 14px; font-weight: 700; text-decoration: none; line-height: 1; transition: background-color .2s ease, transform .05s ease; } .woocommerce a.added_to_cart:before, .woocommerce .added_to_cart:before, ul.products li.product a.added_to_cart:before { content: ""; display: inline-block; width: 1em; height: 1em; mask: url('data:image/svg+xml;utf8,'); -webkit-mask: url('data:image/svg+xml;utf8,'); background-color: currentColor; } .woocommerce a.added_to_cart:hover, .woocommerce .added_to_cart:hover, ul.products li.product a.added_to_cart:hover { background-color: #7f1212; } .woocommerce a.added_to_cart:active, .woocommerce .added_to_cart:active, ul.products li.product a.added_to_cart:active { transform: translateY(1px); } .woocommerce a.added_to_cart:focus-visible, .woocommerce .added_to_cart:focus-visible, ul.products li.product a.added_to_cart:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* 商品一覧（ダッシュボード8） */ .sh_goods-list { margin-top: 8px; } .sh_goods-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 16px; list-style: none; padding: 0; margin: 0; } .sh_goods-item { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(36, 80, 129, 0.08); overflow: hidden; transition: box-shadow 0.2s; border: 1px solid #e3e7ee; } .sh_goods-item:hover { box-shadow: 0 4px 16px rgba(36, 80, 129, 0.16); } .sh_goods-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; } .woocommerce ul.products li.product .button, ul.products li.product .button { width: 100%; box-sizing: border-box; } .sh_goods-info { padding: 12px 10px 14px 10px; text-align: center; } .sh_goods-name { font-size: 1.05rem; font-weight: 600; color: #245081; margin: 0 0 6px 0; } .sh_goods-price { font-size: 0.98rem; color: #333; margin: 0; } @media (max-width: 900px) { .sh_goods-grid { grid-template-columns: repeat(2, 1fr); } } /* ============================= My Account > 定期購入 注文 > 関連する注文 「表示」ボタンのテキスト色を常に白へ 理由: ダッシュボード内の一般 a 色指定に上書きされるため 対象: #woocommerce-subscriptions-related-orders-table 内の order-actions ============================= */ .page-id-189 .sh_dashboard-compact .sh_dash-woo #woocommerce-subscriptions-related-orders-table td.order-actions a.woocommerce-button, .page-id-189 .sh_dashboard-compact .sh_dash-woo #woocommerce-subscriptions-related-orders-table td.order-actions a.woocommerce-button:visited, .page-id-189 .sh_dashboard-compact .sh_dash-woo #woocommerce-subscriptions-related-orders-table td.order-actions a.woocommerce-button:hover, .page-id-189 .sh_dashboard-compact .sh_dash-woo #woocommerce-subscriptions-related-orders-table td.order-actions a.woocommerce-button:focus, .page-id-189 .sh_dashboard-compact .sh_dash-woo #woocommerce-subscriptions-related-orders-table .woocommerce-orders-table__cell-order-actions a.woocommerce-button, .page-id-189 .sh_dashboard-compact .sh_dash-woo #woocommerce-subscriptions-related-orders-table .woocommerce-orders-table__cell-order-actions a.woocommerce-button:visited, .page-id-189 .sh_dashboard-compact .sh_dash-woo #woocommerce-subscriptions-related-orders-table .woocommerce-orders-table__cell-order-actions a.woocommerce-button:hover, .page-id-189 .sh_dashboard-compact .sh_dash-woo #woocommerce-subscriptions-related-orders-table .woocommerce-orders-table__cell-order-actions a.woocommerce-button:focus { color: #fff !important; } /* ================================ ニュースページ: SP/TB 調整 - .sh_news-list の左寄せ（margin-left:5%）をSP/TBで解除 - .sh_news-filter a のSP時パディング調整 - .sh_news-archive のグリッドSP時パディングを30px 0に ================================ */ @media screen and (max-width: 1024px) { /* ニュース一覧の左寄せ（左インデント）をTB以下で確実に解除 */ .sh_news-archive .sh_news-list, .sh_news-list { margin-left: 0 !important; } } /* ================================ SP: 各ページのヒーロー高さを About のSP基準(200px)に統一 - author個別ページの75vh指定はそのまま（body.authorが勝つため） ================================ */ @media screen and (max-width: 768px) { .sh_step-hero, .sh_sponsors-hero, .sh_contact-hero, body:not(.author) .sh_athletes-hero { height: 200px; } } @media (max-width: 768px) { /* フィルタのSPパディングを強制 */ .sh_news-archive .sh_news-filter a, .sh_news-filter a { padding: 6px 10px !important; } /* アーカイブグリッドのSPパディングを強制 */ .sh_news-archive .sh_news-grid { padding: 30px 0 !important; } } /* 画像を正方形で安定表示 */ .woocommerce ul.products li.product img, ul.products li.product img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; } /* タイトルを2行で高さ固定（長い場合は省略） */ .woocommerce ul.products li.product h2.woocommerce-loop-product__title, ul.products li.product h2.woocommerce-loop-product__title { font-size: 1rem; /* テーマに合わせて調整可 */ line-height: 1.35; display: -webkit-box; line-clamp: 2; /* 標準 */ -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.35em * 2); margin: 0; /* 余白の暴れを抑制 */ } /* 価格行の安定化（最低高） */ .woocommerce ul.products li.product .price, ul.products li.product .price { color: rgb(149, 24, 24); font-weight: 700 !important; font-size: 1.2rem !important; line-height: 1.2; min-height: 1.2em; font-synthesis: weight; /* 合成ボールドを許可（フォント未搭載時の保険） */ } /* 子要素側で font-weight が上書きされているケースを強制的に太字に */ .woocommerce ul.products li.product .price .woocommerce-Price-amount, .woocommerce ul.products li.product .price .amount, .woocommerce ul.products li.product .price bdi, .woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol { font-weight: 700 !important; font-size: 1.2rem !important; color: rgb(149, 24, 24) !important; } /* 価格内のすべての子要素にも太字を強制（span継承の打ち消し対策） */ .woocommerce ul.products li.product .price *, ul.products li.product .price * { font-weight: 700 !important; } @media (max-width: 600px) { .sh_goods-grid { grid-template-columns: 1fr; } } /* --------------------------------------- Header Section ---------------------------------------- */ .sh_header { width: 100vw; background: linear-gradient(135deg, rgba(174, 206, 247, 0.8) 0%, rgba(0, 85, 139, 0.8) 100%); /* === Override woo.scss margin that pushes button away from bottom === */ main .woocommerce ul.products li.product .button, main ul.products li.product .button { display: inline-flex !important; justify-content: center; align-items: center; margin: 0 !important; /* リセット */ margin-top: auto !important; /* 下寄せ優先 */ width: 100% !important; } box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); padding: 10px 0; position: relative; z-index: 0; color: #fff; transform-origin: top; transform: scaleY(0); transition: transform 0.8s ease-in-out; will-change: transform; } .sh_header.visible { transform: scaleY(1); position: fixed; min-height: 84px; /* 既定の高さを維持 */ } .sh_header-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; opacity: 0; transform: translateY(-30px); transition: opacity 0.6s ease, transform 0.6s ease; } .sh_header-container.visible { opacity: 1; transform: translateY(0); } .sh_header-logo img { width: auto; max-width: 220px; max-height: 48px; } .sh_header-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; opacity: 0; transform: translateY(-30px); transition: opacity 0.6s ease, transform 0.6s ease; } .sh_header-brand.visible { opacity: 1; transform: translateY(0); } .sh_header-tagline { font-size: 1rem; color: #fff; } .sh_header-navarea { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; opacity: 0; transform: translateY(-30px); transition: opacity 0.6s ease, transform 0.6s ease; } .sh_header-navarea.visible { opacity: 1; transform: translateY(0); } /* 重複統合: ヘッダーアイコンはここに集約 */ .sh_header-icons { display: flex; gap: 10px; align-items: center; } .sh_icon { width: 24px; height: 24px; background-color: #ccc; border-radius: 50%; } .sh_header-nav ul { display: flex; gap: 20px; } .sh_header-nav a { font-size: .9rem; font-weight: 700; color: #fff; text-decoration: none; position: relative; } .sh_header-nav a::after { content: ""; display: block; height: 2px; background: #fff; width: 0; transition: 0.3s; position: absolute; bottom: -4px; left: 0; } .sh_header-nav a:hover::after { width: 100%; } /* アイコンリンクは維持 */ .sh_icon-link { display: inline-block; width: 24px; height: 24px; } .sh_icon-img { width: 100%; height: auto; display: block; } /* ============================= 共通: セクション見出し・余白（統一） ============================= */ .sh_section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 40px 0 20px; } .sh_section-title { font-size: 22px; font-weight: 800; line-height: 1.2; position: relative; padding: 10px 14px; color: #fff; background: #245081; border-radius: 8px; } .sh_section-sub { color: #555; font-size: 1.5em; font-weight: 700; margin-left: auto; } /* セクション/フッター余白（下詰まり防止） */ .sh_main section { margin-bottom: 0; } .sh_main { padding-bottom: 0; /* 以前: 96px。不要な下余白を解消 */ } /* main直下の最後の要素は下余白を詰める（フッターとの隙間を最小化） */ .site-main>*:last-child, .sh_main>*:last-child { margin-bottom: 0; } /* --------------------------------------- Hamburger Menu (SP only) ---------------------------------------- */ .sh_header { z-index: 10; /* 上に変更 */ } .sh_menu-toggle { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 22px; background: none; border: none; cursor: pointer; } .sh_menu-toggle span { display: block; height: 3px; background: #fff; border-radius: 2px; } /* --- オーバーレイメニュー: 二重定義解消（アニメーション版を採用） --- */ /* 初期状態 */ .sh_overlay-menu { position: fixed; top: 0; right: 0; width: 100vw; height: 100vh; background: linear-gradient(135deg, #0c1117 0%, #0b3652 100%); z-index: 1000; display: flex; flex-direction: column; padding: 20px; color: #fff; transform: translateX(100%); opacity: 0; pointer-events: none; transition: transform 0.4s ease, opacity 0.4s ease; } /* 表示状態（開く） */ .sh_overlay-menu.active { transform: translateX(0); opacity: 1; pointer-events: auto; } /* 閉じる途中（閉じるアニメーション） */ .sh_overlay-menu.closing { transform: translateX(100%); opacity: 0; pointer-events: none; } .sh_overlay-header { display: flex; justify-content: space-between; align-items: center; } .sh_overlay-logo img { height: 30px; } .sh_menu-close { font-size: 2rem; background: none; border: none; color: #fff; cursor: pointer; } .sh_overlay-nav ul { margin-top: 40px; display: flex; flex-direction: column; gap: 20px; } .sh_overlay-nav a { color: #fff; font-size: 1.2rem; text-decoration: none; } /* SP: オーバーレイナビ各項目に白アイコンを付与 */ @media (max-width: 768px) { .sh_overlay-nav a { display: inline-flex; align-items: center; gap: 10px; } /* デフォルト（未マッピングページ）は矢印 */ .sh_overlay-nav a::before { content: ""; display: inline-block; width: 20px; height: 20px; flex: 0 0 20px; background-repeat: no-repeat; background-position: center; background-size: 20px 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* News（ニュース） */ .sh_overlay-nav a[href*="/news"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 5h14a2 2 0 0 1 2 2v9a3 3 0 0 1-3 3H6a2 2 0 0 1-2-2V5z' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M8 8h7M8 12h10M8 16h6' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } /* Athletes（アスリート） */ .sh_overlay-nav a[href*="/athlete"]::before, .sh_overlay-nav a[href*="/athletes"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='none'%3E%3Cpath d='M16 11a3 3 0 1 0-2.999-3A3 3 0 0 0 16 11Zm-8 0a3 3 0 1 0-3-3 3 3 0 0 0 3 3Z' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M3 20a5 5 0 0 1 5-5h0a5 5 0 0 1 5 5M11 20a5 5 0 0 1 5-5h0a5 5 0 0 1 5 5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } /* Sponsors（スポンサー） */ .sh_overlay-nav a[href*="/sponsor"]::before, .sh_overlay-nav a[href*="/sponsors"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27Z' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Contact（お問い合わせ） */ .sh_overlay-nav a[href*="/contact"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 6h16v12H4z' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='m4 6 8 7 8-7' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Shop/Products（ショップ） */ .sh_overlay-nav a[href*="/shop"]::before, .sh_overlay-nav a[href*="/product"]::before, .sh_overlay-nav a[href*="/cart"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6h15l-1.5 9h-12z' stroke='%23ffffff' stroke-width='2'/%3E%3Ccircle cx='9' cy='20' r='1.5' fill='%23ffffff'/%3E%3Ccircle cx='18' cy='20' r='1.5' fill='%23ffffff'/%3E%3C/svg%3E"); } /* My Account / Login（マイアカウント・ログイン） */ .sh_overlay-nav a[href*="/my-account"]::before, .sh_overlay-nav a[href*="/user/login"]::before, .sh_overlay-nav a.login-link::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4Z' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M4 20a8 8 0 0 1 16 0' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } /* About（概要） / Step（はじめての方へ等） */ .sh_overlay-nav a[href*="/about"]::before, .sh_overlay-nav a[href*="/step"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M12 8v.01M11 12h1v4h1' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } } /* ============================= アスリート詳細: プロフィール ============================= */ .sh_athlete-blogs { background: linear-gradient(135deg, rgba(174, 206, 247, 0.5) 0%, rgba(0, 85, 139, 0.5) 100%); padding: 0.8em; } .sh_athlete-profile-inner { display: flex; gap: 32px; align-items: center; } .sh_athlete-portrait img { width: 100%; height: auto; object-fit: cover; border-radius: 50%; box-shadow: 0 4px 16px rgb(0 0 0 / 15%); padding: 1rem; } .sh_athlete-profile-dl { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; margin: 16px 0; } .sh_athlete-profile-row { display: contents; } .sh_athlete-career { margin: 0; padding-left: 1.2em; } .sh_athlete-career li { list-style: disc; margin: 2px 0; } .sh_athlete-bio { margin-top: 8px; line-height: 1.9; } @media (max-width: 640px) { .sh_athlete-profile-inner { flex-direction: column; align-items: flex-start; } } /* --- スマホ表示調整 --- */ @media screen and (max-width: 768px) { .sh_header-container { display: flex; justify-content: space-between; align-items: center; } .sh_header.visible { min-height: 27px; } .sh_header-brand { flex-direction: row; align-items: center; gap: 0; } .sh_header-tagline { display: none; /* SP時はテキスト非表示 */ } .sh_header-navarea { display: none; } .sh_menu-toggle { display: flex; } } /* --------------------------ヒーローcss------------------------------------------ */ /* セクション全体 */ .sh_hero { width: 100%; padding: 0; margin: 0; margin-top: 83.8px; background: linear-gradient(135deg, rgba(31, 32, 172, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%); padding-top: 2%; padding-bottom: 2%; } /* 親 */ .sh_hero-container { display: flex; max-width: 1200px; margin: 0 auto; height: 60vh; /* margin-top: 3vh; */ /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); background: radial-gradient(circle at center, #fff, #e6e6e6); */ overflow: hidden; } /* 子供共通：img / video */ .sh_hero-panel img, .sh_hero-panel video { transition: transform 0.4s ease; width: 100%; height: 100%; object-fit: cover; display: block; } .sh_hero-panel:hover img, .sh_hero-panel:hover video { transform: scale(1.05); } /* ------------------JSアニメーション------------------ */ /* フォールバック: JSが動かなくてもヒーローが見えるよう初期状態は表示 */ .sh_hero-panel { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s ease; } .sh_hero-panel.visible { opacity: 1; transform: translateX(0); position: relative; overflow: hidden; } .sh_hero-panel::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.4); transform: skewX(-20deg); transition: left 0.6s ease; } .sh_hero-panel.visible::before { left: 100%; } /* ------------------JSアニメーション------------------ */ /* 中親1（左：動画2つ） */ .sh_hero-main { display: flex; flex-direction: column; flex: 3; height: 100%; } /* 中親2（右：画像4つ） */ .sh_hero-side { display: flex; flex-direction: column; flex: 1; height: 100%; } /* 子供（共通） */ .sh_hero-panel { display: block; width: 100%; height: 50%; /* メイン用：2分割 */ overflow: hidden; position: relative; } /* サイドの子パネル（4つ） */ .sh_hero-panel-side { height: 25%; } /* video, img共通再掲（必要） */ .sh_hero-panel video, .sh_hero-panel img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 中親見出し（右下） */ .sh_hero-heading { position: absolute; bottom: 10px; right: 15px; color: white; font-size: 1.2rem; z-index: 2; pointer-events: none; } /* キャプション */ .sh_hero-caption { position: absolute; bottom: 8px; right: 10px; color: #fff; font-size: 0.9rem; background: rgba(0, 0, 0, 0.5); padding: 2px 6px; border-radius: 4px; pointer-events: none; } /* --------------------------------------------メディアクエリヒーロー */ @media screen and (max-width: 768px) { .sh_hero { padding: 0; margin: 0; margin-top: 47px; position: relative; z-index: 1; } .sh_hero-container { flex-direction: column; height: auto; width: 100%; max-width: none; padding: 0; margin: 0; } .sh_hero-main { flex-direction: row; flex-wrap: wrap; gap: 0; margin: 0; } .sh_hero-side { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); gap: 0; margin: 0; } .sh_hero-panel { width: 100%; aspect-ratio: 16 / 9; } .sh_hero-panel.sh_hero-panel-side { width: 100%; height: auto; aspect-ratio: 16 / 9; } .sh_hero-heading { position: static; margin: 0; text-align: right; color: #333; font-size: 1rem; } .sh_hero-caption { font-size: 0.75rem; bottom: 5px; right: 5px; } } /* --------------------------------------------メディアクエリヒーローend */ /* ------------------------------------------------------------ アスリート紹介css開始 ------------------------------------------------------------ */ /* セクション全体（背景付き最背面） */ .sh_athletes { position: relative; width: 100%; padding: 0 0; color: #fff; overflow: hidden; } /* 背景テキスト（装飾） */ .sh_athletes-bg-text { position: absolute; top: 0; left: 10px; font-size: 36vw; font-weight: 700; color: rgba(212, 226, 231, 1); z-index: 0; pointer-events: none; margin-left: 10vw; font-style: italic; font-family: serif; letter-spacing: -1vw; } /* SP: 画面幅に追随しつつ、横幅360px時の 26vw を下限にする */ @media (max-width: 768px) { .sh_athletes-bg-text { /* 26vw を可変値、中間に据え、360px時の26vw=93.6pxを最小、36vwを最大 */ font-size: clamp(93.6px, 26vw, 36vw); } } .sh_athletes-bg-text2 { position: absolute; top: 0; left: 0; font-size: 30vw; font-weight: 700; color: rgba(255, 45, 127, 0.21); z-index: 0; pointer-events: none; margin-left: 20vw; font-style: italic; font-family: serif; letter-spacing: -1vw; } /* max-width 中央揃え */ .sh_athletes-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; } /* 親構造：左右分割（左:右 = 1:3） */ .sh_athletes-wrapper { display: flex; flex-wrap: wrap; gap: 40px; } /* 左カラム：情報エリア */ .sh_athletes-info { flex: 1; min-width: 360px; display: flex; flex-direction: column; justify-content: center; background-color: rgba(30, 60, 121, 0.3); } .sh_athletes-title { font-size: 2rem; font-weight: 700; margin-bottom: 20px; border-bottom: 1px solid rgb(17, 150, 150); display: inline-block; font-family: sans-serif; padding: 4%; } .sh_athletes-description { font-size: 1rem; line-height: 1.8; text-align: justify; padding: 4%; } .sh_athletes-description dt { font-weight: 700; } /* --------------------- 右カラム カルーセル ----------------------- */ /* 旧100pxカード幅指定は削除し、下記最終仕様へ統一 */ .sh_athletes-right { flex: 3; overflow: hidden; position: relative; /* 背景画像 + 白半透明マスク（上に黒文字） */ background-image: linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65)), url('../images/20254.jpg'); background-size: 100% 100%, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; } .sh_athletes-list { display: flex; flex-wrap: nowrap; transition: transform 0.5s ease-in-out; will-change: transform; } .sh_athlete-card { /*2025-09-04 修正　アスリートが増えるまでの暫定 flex: 0 0 230px; */ flex: 0 0 48.5%; margin-right: 20px; box-sizing: border-box; padding: 1rem; background: rgba(54, 46, 93, 0.36); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; text-align: center; } .sh_athlete-image { width: 100%; border-radius: 6px; margin-bottom: 10px; } .sh_athlete-name { text-align: left; } .sh_athlete-bio { text-align: justify; } /* TOP（home）限定：カルーセル内カードで「ブログを見る」ボタンを下寄せ */ body.home .sh_athletes-right .sh_athlete-card { display: flex; flex-direction: column; } body.home .sh_athletes-right .sh_athlete-link { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; text-decoration: none; color: inherit; } body.home .sh_athletes-right .sh_athletes-blog-btn { margin-top: auto; /* 下寄せ */ align-self: stretch; /* 横幅いっぱい */ width: 100%; box-sizing: border-box; /* 汎用ボタンの余白を上書き（このカルーセル内のみ） */ margin-right: 0; margin-bottom: 0; } /* --------------------- レスポンシブ ----------------------- */ @media screen and (max-width: 768px) { .sh_athletes-wrapper { flex-direction: column; } .sh_athletes-right { width: 100%; } .sh_athletes-list { justify-content: flex-start; } .sh_athlete-card { flex: 0 0 180px; /* ← 固定幅に */ width: 200px; margin-right: 12px; } } @media screen and (max-width: 768px) { .sh_athletes-wrapper { flex-direction: column; gap: 20px; /* 左右のセクション間のスペースもやや縮小 */ } .sh_athletes-info, .sh_athletes-right { width: 100%; padding-inline: 10px; box-sizing: border-box; } .sh_athlete-card { flex: 0 0 auto; width: 75%; /* カード幅固定 */ } } /* ------------------------------フロントサポーターコンテンツ紹介------------------------------------------------ */ /* ============================= セクション全体 ============================= */ .sh_supporters { position: relative; width: 100%; padding: 100px 0; overflow: hidden; z-index: 1; } /* ============================= 背景装飾（左右色分け） ============================= */ /* 背景要素を完全に背面へ送る */ .sh_supporters::before, .sh_supporters::after { content: ""; position: absolute; top: 0; height: 100%; z-index: -10; /* ← 完全に背面へ */ pointer-events: none; } .sh_supporters::before { left: 0; width: 40%; background-color: #f0f4ff; } .sh_supporters::after { right: 0; width: 40%; background-color: #245a81; } /* ============================= アスリート詳細: ブログ/ニュースグリッド ============================= */ .sh_news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .sh_news-image { position: relative; } .sh_news-image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; } .sh_badge { position: absolute; top: 8px; left: 8px; padding: 4px 8px; border-radius: 999px; font-size: .75rem; color: #fff; font-weight: 700; box-shadow: 0 2px 4px rgba(0, 0, 0, .15); } .sh_badge.is-free { background: #2e7d32; } .sh_badge.is-paid { background: #c62828; } .sh_news-content { padding: 8px 0; } .sh_news-title { font-size: 1rem; margin: 4px 0; font-weight: 700; } .sh_news-date { color: #666; font-size: .85rem; } .sh_pagination { margin: 20px 0; } @media (max-width: 1024px) { .sh_news-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .sh_news-grid { grid-template-columns: 1fr; } } /* ============================= アスリート詳細: グッズカード（視認性向上） ============================= */ .sh_goods-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .sh_goods-card { display: flex; flex-direction: column; border: 1px solid #e5ebf0; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .04); } .sh_goods-thumb { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; } .sh_goods-body { padding: 12px; display: flex; flex-direction: column; gap: 6px; } .sh_goods-title { font-size: 1rem; margin: 0; font-weight: 700; color: #111; } .sh_goods-price { color: #111; font-weight: 700; } .sh_btn-cart { display: inline-flex; align-items: center; justify-content: center; background: #2e6fa9; color: #fff; padding: 10px 12px; border-radius: 6px; font-weight: 700; transition: opacity .2s ease; text-decoration: none; } .sh_btn-cart:hover { opacity: .85; } .sh_goods-info-link { color: inherit; text-decoration: none; } @media (max-width: 1024px) { .sh_goods-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .sh_goods-grid { grid-template-columns: repeat(2, 1fr); } } /* ============================= 最背面背景画像（任意） ============================= */ .sh_supporters-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.2; z-index: -10; /* ← 同じく完全に背面 */ pointer-events: none; } /* ============================= ベース構造 ============================= */ .sh_supporters-base { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* ============================= 親：左右構造 ============================= */ .sh_supporters-wrapper { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; } /* ============================= 左カラム：説明ブロック ============================= */ .sh_supporters-left { flex: 1; min-width: 300px; background-color: #080505; padding: 30px; position: relative; z-index: 2; } .sh_supporters-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 20px; color: #fff; text-align: left; } .sh_supporters-description { font-size: 1rem; line-height: 1.8; margin-bottom: 20px; color: #fff; text-align: justify; } .sh_supporters-closure { font-size: 0.95rem; color: #fff; text-align: right; } /* ============================= 右カラム：登録フォーム ============================= */ .sh_supporters-right { flex: 1; min-width: 300px; width: 300px; background-color: #fff; padding: 30px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); position: relative; z-index: 2; /* 背景画像 + 白半透明マスク（上に黒文字） */ background-image: linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65)), url('../images/20254.jpg'); background-size: 100% 100%, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; } .sh_supporters-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .sh_supporters-form-title { font-size: 1.8rem; font-weight: 700; text-align: left; } .sh_supporters-step-btn { display: inline-block; background-color: #2e6fa9; color: #fff; font-size: 14px; padding: 8px 16px; border-radius: 4px; text-decoration: none; transition: background-color 0.3s; white-space: nowrap; } .sh_supporters-step-btn:hover { background-color: #205d93; } .sh_supporters-form-group { margin-bottom: 15px; color: rgb(0, 0, 0); text-align: left; } .sh_supporters-form-group label { display: block; font-size: 0.95rem; margin-bottom: 5px; } .sh_supporters-input { width: 100%; padding: 10px; font-size: 1rem; border: 1px solid #ccc; border-radius: 4px; } .sh_supporters-form-footer { margin-top: 20px; } .sh_supporters-form-btn { text-align: right; margin-bottom: 12px; } .sh_supporters-form-note { text-align: left; font-size: 13px; line-height: 1.6; } .sh_supporters-form-note p:first-child { font-size: 1.5em; color: #951818; font-weight: 700; } .sh_supporters-submit { padding: 10px 20px; font-size: 1rem; background-color: #2e6fa9; color: #fff; border: none; border-radius: 4px; cursor: pointer; } .sh_supporters-submit:hover { background-color: #1f5f90; } /* サポーター登録するボタン（条件付きで色を上書き） 条件1: リンクが https://aug.s-k-y-inc.jp/product-category/supporter/ の直下にあるボタン 条件2: JSでテキストが「サポーター登録する」と判定されたボタン（.is-supporter-register 付与） */ a[href^="https://aug.s-k-y-inc.jp/product-category/supporter/"]>.sh_supporters-submit, .sh_supporters-submit.is-supporter-register { background-color: rgb(149, 24, 24) !important; } a[href^="https://aug.s-k-y-inc.jp/product-category/supporter/"]>.sh_supporters-submit:hover, .sh_supporters-submit.is-supporter-register:hover { background-color: rgb(149, 24, 24) !important; opacity: 0.8; } /* アンカーがボタン風のケース（.button や .wp-block-button__link） */ a.wp-block-button__link[href^="https://aug.s-k-y-inc.jp/product-category/supporter/"], a.button[href^="https://aug.s-k-y-inc.jp/product-category/supporter/"], a.btn[href^="https://aug.s-k-y-inc.jp/product-category/supporter/"], button.is-supporter-register, a.is-supporter-register, input.is-supporter-register[type="submit"] { background-color: rgb(149, 24, 24) !important; color: #fff !important; } a.wp-block-button__link[href^="https://aug.s-k-y-inc.jp/product-category/supporter/"]:hover, a.button[href^="https://aug.s-k-y-inc.jp/product-category/supporter/"]:hover, a.btn[href^="https://aug.s-k-y-inc.jp/product-category/supporter/"]:hover, button.is-supporter-register:hover, a.is-supporter-register:hover, input.is-supporter-register[type="submit"]:hover { background-color: rgb(149, 24, 24) !important; opacity: 0.8; } @media screen and (max-width: 768px) { .sh_supporters-wrapper { flex-direction: column; } .sh_supporters-left, .sh_supporters-right { width: 100%; } } /* --------------------------------------------サポーター登録ステップCSS */ /* セクションB：登録ステップ */ .sh_step-section { background-color: #290e50; padding: 60px 0; } .sh_step-container { border: 1px solid #fff; padding: 40px 20px; border-radius: 8px; background: radial-gradient(circle at top left, #fff, #fff); } .sh_section-title { font-size: 24px; text-align: center; margin-bottom: 40px; } .sh_step-container p { padding: 1%; margin-bottom: 20px; } .sh_step-cards { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 30px; } .sh_step-cards a { text-decoration: underline; color: #245a81; font-weight: 700; } .sh_step-card { flex: 1 1 calc(25% - 30px); /* 4枚並び（間にgapあり） */ background-color: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 20px; box-sizing: border-box; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } .sh_step-card-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; } .sh_step-card-img { width: 100%; height: auto; margin-bottom: 12px; border-radius: 4px; } .sh_step-card-desc { font-size: 14px; line-height: 1.6; text-align: justify; } /* メディアクエリ */ @media screen and (max-width: 768px) { .sh_step-cards { flex-direction: column; gap: 20px; } .sh_step-card { flex: 1 1 100%; } .sh_section-title { font-size: 20px; } .sh_step-card-title { font-size: 14px; } .sh_step-card-desc { font-size: 13px; } } /* --------------------------------------------スポンサーコンテンツフロント */ /* セクション全体 */ .sh_sponsors { position: relative; width: 100%; padding: 100px 0; background-color: #251b74; overflow: hidden; z-index: 0; } .sh_sponsors { background-image: linear-gradient(to right, #000 0%, /* 黒 */ #000 5%, #004 5%, #004 12%, #111 12%, #111 16%, #005 16%, #005 23%, #002 23%, #002 30%, #111 30%, #111 37%, #003 37%, #003 45%, #000 45%, #000 100%); } /* 左30%背景色追加 */ .sh_sponsors::before { content: ""; position: absolute; top: 0; left: 0; width: 30%; height: 100%; background-color: #951818; /* ← 任意の色に変更可 */ z-index: 1; pointer-events: none; } /* セクション内部コンテンツを前面に出す */ /* 重複定義整理: .sh_sponsors-base は一箇所に統一 */ .sh_sponsors-base { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* 最背面の背景画像（任意） */ .sh_sponsors-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.1; z-index: 1; pointer-events: none; } /* タイトル・概要文（左揃え） */ .sh_sponsors-title { font-size: 2rem; font-weight: 700; margin-bottom: 20px; text-align: right; color: rgb(255, 255, 255); } /* 誤適用回避: ここにあった .sh_supporters のフォント指定は削除 */ /* カードコンテナ（横並び） */ .sh_sponsor-card { flex: 0 0 200px; background: white; border: 1px solid #ddd; border-radius: 8px; padding: 20px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); text-align: left; } .sh_sponsor-card img { width: 100%; height: auto; max-height: 100px; object-fit: contain; margin-bottom: 10px; } .sh_sponsor-logo-link { display: inline-block; } .sh_sponsor-logo-link img { width: 100%; height: auto; max-height: 100px; object-fit: contain; } .sh_sponsor-name { font-size: 1rem; font-weight: 700; margin-bottom: 10px; } .sh_sponsor-summary { font-size: 0.7rem; } .sh_sponsor-desc { font-size: 0.3rem; color: #666; } /* 締めテキスト（左揃え） */ .sh_sponsors-ending-text { margin-top: 30px; font-size: 0.8rem; color: #fff; text-align: right; } .sh_sponsors-ending-text p { color: rgb(255, 255, 255); /* 文字色 */ } /* --------------------------------------------スポンサーコンテンツ-ページ */ /* セクションA：ヒーロー（アバウト/スポンサー/コンタクト/ステップで共通） */ .sh_sponsors-hero, .sh_contact-hero, .sh_step-hero, .sh_about-hero, .sh_login-hero { position: relative; /* 子要素の absolute に必要 */ background-color: #000; /* 背景色指定 */ overflow: hidden; /* ワイプ等ではみ出る部分を隠す */ height: 460px; /* 高さ指定（画像サイズやバランスに応じて） */ text-align: center; /* テキスト中央寄せ */ } .sh_about-hero-title { font-size: 36px; font-weight: 700; color: #fff; z-index: 2; position: relative; } .sh_about-hero-overlay { position: relative; background-color: rgba(0, 0, 0, 0.4); height: 100%; display: flex; align-items: center; justify-content: center; } .sh_about-hero-bg { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 0; } /* セクションB：スポンサー一覧 */ /* 二重定義解消: 背景はグラデ版を採用 */ .sh_sponsors-section { position: relative; padding: 60px 0; background-image: linear-gradient(135deg, /* 左上→右下 */ #e0f7fa 0%, #e0f7fa 33.33%, #b3e5fc 33.33%, #b3e5fc 66.66%, #4fc3f7 66.66%, #4fc3f7 100%); background-size: cover; background-repeat: no-repeat; } .sh_sponsors-section p { text-align: justify; line-height: 1.6; margin-bottom: 5%; color: rgb(0, 0, 0); } .sh_sponsors-card-wrap { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-start; } /* 最初は非表示 */ .sh_sponsors-card { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } /* 表示時に適用されるクラス */ .sh_sponsors-card.visible { opacity: 1; transform: translateY(0); } .sh_sponsors-card { width: 220px; /* 幅固定 */ background-color: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 20px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.05); box-sizing: border-box; text-align: center; } .sh_sponsors-logo { width: 100%; max-width: 120px; height: auto; margin: 0 auto 12px; } .sh_sponsors-name { font-size: 16px; font-weight: 700; margin-bottom: 8px; } .sh_sponsors-description { color: rgb(255, 255, 255); text-align: right; padding-bottom: 2%; } /* レスポンシブ調整（wrap前提なので不要な場合省略可能） */ @media screen and (max-width: 768px) { .sh_sponsors-card-wrap { justify-content: center; } } @media screen and (max-width: 768px) { .sh_sponsors-card-wrap { flex-direction: column; align-items: center; } .sh_sponsors-card { width: 100%; max-width: 90%; } .sh_sponsors-logo { max-width: 100px; margin-bottom: 10px; } .sh_sponsors-name { font-size: 15px; } .sh_sponsors-title { text-align: center; font-size: 5vw; } .sh_supporters-form-title { font-size: 4.5vw; } .sh_sponsors-description { font-size: 13px; color: rgb(255, 255, 255); text-align: center; } } /* --------------------------------------------カルーセル用カードCSS */ /* カードコンテナ：横並びカルーセル */ .sh_sponsors-cards { display: flex; flex-wrap: nowrap; width: max-content; /* 横幅を中身に応じて自動拡張 */ transition: transform 0.6s ease; will-change: transform; } /* JSオートカルーセル稼働中はtransitionを無効化（rAFと競合させない） */ .sh_sponsors-right .sh_sponsors-cards.is-auto { transition: none !important; } /* CSS marquee fallback (CSP-safe): duplicate content and scroll half width */ .sh_sponsors-right .sh_sponsors-cards.is-marquee { animation: sh-sponsors-marquee 65s linear infinite; } .sh_sponsors-right .sh_sponsors-cards.is-marquee:hover { animation-play-state: paused; } @keyframes sh-sponsors-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* 各スポンサーカード：横スライド対応 */ .sh_sponsor-card { flex: 0 0 260px; /* 幅固定で横並び */ margin-right: 20px; box-sizing: border-box; background: #fff; padding: 20px; border: 1px solid #ccc; border-radius: 8px; text-align: center; } /* ロゴ画像：見やすく調整 */ .sh_sponsor-logo { width: 100%; height: auto; max-height: 80px; object-fit: contain; margin-bottom: 10px; } /* 右カラム：表示枠を制限 */ .sh_sponsors-right { flex: 1; overflow: hidden; position: relative; } @media screen and (max-width: 768px) { .sh_sponsors-right { width: 100%; overflow-x: hidden; padding-left: 5vw; /* 左の余白を確保して中央寄せ */ box-sizing: border-box; } .sh_sponsors-cards { display: flex; flex-wrap: nowrap; width: max-content; padding-right: 5vw; /* 右も少し余白を確保 */ gap: 4vw; } .sh_sponsor-card { flex: 0 0 70vw; /* カード幅：画面幅の70% */ margin-right: 0; } .sh_sponsor-logo { max-height: 60px; } } /* 詳しく見るボタン（右寄せ） */ .sh_sponsors-button-area { display: flex; justify-content: flex-end; margin-top: 30px; } .sh_sponsors-more-button { padding: 10px 25px; background-color: #0073aa; color: #fff; text-decoration: none; font-size: 1rem; border-radius: 4px; } .sh_sponsors-more-button:hover { background-color: #005f88; } /* -------------------------------ニュースイベント------------------------------------------------ */ /* ====================== Contact: checkbox must be perfect square ====================== */ .sh_contact-policy input[type="checkbox"] { -webkit-appearance: checkbox; appearance: checkbox; width: 16px; height: 16px; min-width: 16px; min-height: 16px; aspect-ratio: 1 / 1; /* ensure square in modern browsers */ border-radius: 0; /* enforce square corners */ box-sizing: border-box; vertical-align: middle; } /* In case some engines ignore aspect-ratio on form controls, keep explicit height */ @supports not (aspect-ratio: 1 / 1) { .sh_contact-policy input[type="checkbox"] { height: 16px; /* ensure same as width */ } } /* ================================ 6. お知らせ（News & Events）セクション ================================ */ .sh_news { background-color: #fff; padding: 80px 20px; position: relative; overflow: visible; /* ← はみ出し防止 */ } .sh_news-bg-text { position: absolute; top: 30px; right: 100px; font-size: 16rem; font-weight: 700; color: rgba(233, 241, 244, 0.5); z-index: 0; pointer-events: none; font-family: serif; letter-spacing: -1vw; line-height: 1; font-style: italic; font-optical-sizing: auto; text-align: right; } .sh_news-container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; display: block; overflow: visible; height: auto; /* ← 明示的に高さを制限しない */ } .sh_news-wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; width: 100%; height: auto; /* ← 高さの自動調整を許容 */ overflow: visible; /* ← 明示的に重なり防止 */ position: relative; } .sh_news-left, .sh_news-right { flex: 1 1 48%; } .sh_news-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 20px; margin-bottom: 16px; border-bottom: 1px solid #eee; padding-bottom: 12px; } .sh_news-list { list-style: none; padding: 0; margin-left: 5%; } .sh_news-item { display: flex; align-items: center; padding: 2%; gap: 3%; } .sh_news-date { font-size: 1rem; color: #e85454; white-space: nowrap; min-width: 80px; } .sh_news-link { display: flex; align-items: center; gap: 5%; text-decoration: none; color: #333; flex: 1; } .sh_news-thumb { width: 50px; height: 50px; object-fit: cover; border-radius: 4px; background-color: #ddd; } .sh_news-text { font-size: 1rem; line-height: 1.4; } .sh_news-filter { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 20px; margin-bottom: 20px; } .sh_news-filter a { width: 30%; text-align: center; padding: 10px 20px; background-color: transparent; /* 非アクティブは塗りなし */ color: #0073aa; /* 非アクティブの文字色は枠色と同一 */ border: 2px solid #0073aa; /* 枠のみ表示 */ text-decoration: none; font-size: 1rem; border-radius: 4px; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .sh_news-filter a:hover { background-color: rgba(0, 115, 170, 0.08); } .sh_news-filter a.is-active { background-color: #0073aa; /* アクティブは塗りつぶし */ color: #fff; border-color: #0073aa; } /* アーカイブメディアクエリ */ @media screen and (max-width: 768px) { .sh_news-wrapper { flex-direction: column; gap: 40px; } .sh_news-left, .sh_news-right { flex: 1 1 100%; } .sh_news-title { font-size: 1.5rem; margin-bottom: 16px; } .sh_news-list { width: 100%; overflow: hidden; } .sh_news-item { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; width: 100%; box-sizing: border-box; flex-wrap: wrap; /* ← はみ出し対策 */ } .sh_news-link { display: flex; gap: 10px; width: 100%; text-decoration: none; color: #333; } .sh_news-thumb { width: 50px; height: 50px; flex-shrink: 0; } .sh_news-meta { display: flex; flex-direction: column; gap: 4px; max-width: calc(100% - 60px); /* thumb横の余白を除いた幅 */ } .sh_news-date { font-size: 0.8rem; color: #888; } .sh_news-text { font-size: 0.95rem; line-height: 1.5; word-break: break-word; } } /* -------------------------------ニュースイベント------------------------------------------------ */ /* -------------------------------お問い合わせ体裁------------------------------------------------ */ /* ================================ 6. お問い合わせセクション ================================ */ .sh_contact { background-color: #f9f9f9; padding: 80px 20px; position: relative; background: linear-gradient(60deg, #1f20ac 0%, #000000 100%); } .sh_contact-bg-text { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); font-size: 23rem; color: rgba(65, 199, 249, 0.4); font-weight: 700; pointer-events: none; font-style: italic; font-family: serif; z-index: 0; } .sh_contact-container { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; } .sh_contact-wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; } .sh_contact-info, .sh_contact-right { flex: 1 1 48%; } .sh_contact-title-wrap { margin-bottom: 20px; } .sh_contact-title { font-size: 2.4rem; font-weight: 700; color: rgb(255, 255, 255); } .sh_contact-text-wrap { margin-bottom: 30px; } .sh_contact-description { font-size: 1rem; line-height: 1.8; color: rgb(255, 255, 255); } .sh_contact-form-wrap { background: #fff; /* padding: 20px; */ border: 1px solid #ddd; border-radius: 8px; } .sh_contact-form { display: flex; flex-direction: column; gap: 20px; } .sh_contact-form-group label { font-size: 0.95rem; margin-bottom: 5px; display: block; color: #333; } .sh_contact-policy input[type="checkbox"] { /* reset.css で appearance/background/border が消えるため再定義 */ appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin-top: 2px; border: 2px solid #0073aa; border-radius: 4px; background-color: #fff; display: inline-block; position: relative; cursor: pointer; } .sh_contact-policy input[type="checkbox"]:checked { background-color: #0073aa; border-color: #0073aa; } .sh_contact-policy input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 4px; top: 0; width: 6px; height: 12px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .sh_contact-input, .sh_contact-textarea { width: 100%; padding: 10px; font-size: 1rem; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } .sh_contact-textarea { height: 120px; resize: vertical; } .sh_contact-form-footer { text-align: right; } .sh_contact-submit { background-color: #0077cc; color: white; border: none; padding: 12px 24px; font-size: 1rem; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } .sh_contact-submit:hover { background-color: #005fa3; } /* Contact notices */ .sh_contact-notice { border: 1px solid #cfe3f6; background: #eaf3fc; color: #245081; padding: 12px 14px; border-radius: 6px; margin-bottom: 16px; } .sh_contact-notice--success { border-color: #b6e1c3; background: #e9f7ef; color: #216e3a; } .sh_thanks-box { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 24px; box-shadow: 0 2px 12px rgba(0, 0, 0, .06); text-align: center; } .sh_thanks-actions { margin-top: 16px; } .sh_contact-logo { margin-bottom: 20px; text-align: left; } /* 同意チェック（プライバシーポリシー） */ .sh_contact-policy { display: flex; align-items: flex-start; gap: 10px; } .sh_contact-policy input[type="checkbox"] { inline-size: 18px; block-size: 18px; margin-top: 2px; } .sh_contact-agree-label a { color: #0073aa; text-decoration: underline; } .sh_contact-agree-label a:hover { text-decoration: none; } .sh_contact-logo img { max-width: 200px; height: auto; display: inline-block; } /* ------------------------------------------------------------------------------コンタクトjs用 */ .fadein-up { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .fadein-up.visible { opacity: 1; transform: translateY(0); } .delay-1 { transition-delay: 0.2s; } .delay-2 { transition-delay: 0.5s; } /* ------------------------------------------------------------------------------コンタクトjs用 */ @media screen and (max-width: 768px) { .sh_contact-wrapper { flex-direction: column; gap: 40px; /* 上下間隔を少し広めに調整 */ } .sh_contact-info, .sh_contact-right { flex: 1 1 100%; } .sh_contact-logo img { max-width: 160px; height: auto; display: block; margin: 0 auto; /* 中央配置 */ } .sh_contact-title { font-size: 1.8rem; text-align: center; } .sh_contact-description { font-size: 0.95rem; line-height: 1.7; text-align: center; } .sh_contact-form-wrap { padding: 5px; } .sh_contact-input, .sh_contact-textarea { font-size: 0.95rem; padding: 8px; } .sh_contact-submit { padding: 10px 20px; font-size: 0.95rem; } /* ✅ 追加：背景テキストの調整 */ .sh_contact-bg-text { font-size: 3rem; white-space: nowrap; max-width: 100%; overflow: hidden; text-align: center; pointer-events: none; } } /* ================================ SP 背景テキストの可変サイズ統一 - 画面幅に追随しつつ、横幅360px時の 26vw (=93.6px) を下限に - .sh_athletes-bg-text と同じポリシーを他の背景テキストにも適用 ================================ */ @media (max-width: 768px) { .sh_news-bg-text, .sh_athletes-bg-text2, .sh_contact-bg-text { /* 26vw を可変値の中間に据え、360px時の26vw=93.6pxを最小、36vwを最大 */ font-size: clamp(93.6px, 26vw, 36vw); } } /* -------------------------------お問い合わせ------------------------------------------------ */ /* ---------------------------------------------------------------------------------フッター */ /* ===== 共通スタイル ===== */ .sh_footer { background-color: #000; color: #fff; font-family: "Noto Sans JP", sans-serif; padding: 40px 0 0; } .sh_footer-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .sh_footer-wrapper { display: flex; justify-content: space-between; gap: 40px; flex-wrap: nowrap; } /* カラム共通 */ .sh_footer-column { box-sizing: border-box; } /* === カラム1：ロゴ＋紹介（左） === */ .sh_footer-left { flex: 0 0 40%; } .sh_footer-logo { max-width: 180px; height: auto; margin-bottom: 16px; display: block; } .sh_footer-description { font-size: 14px; line-height: 1.6; color: rgb(255, 255, 255); } /* === カラム2＋3 ラッパー（中央＋右） === */ .sh_footer-center-wrap { flex: 0 0 65%; display: flex; justify-content: space-between; gap: 40px; flex-wrap: nowrap; } .sh_footer-center-left, .sh_footer-center-right { flex: 0 0 48%; } .sh_footer-heading { font-size: 16px; font-weight: 700; margin-bottom: 12px; color: rgb(255, 255, 255); } .sh_footer-list, .sh_footer-icons { list-style: none; margin: 0; padding: 0; } .sh_footer-list li, .sh_footer-icons li { margin-bottom: 8px; } .sh_footer-list a, .sh_footer-icons a { color: #fff; text-decoration: none; font-size: 14px; } /* SNSアイコン（横並び、サイズ指定） */ .sh_footer-icons { display: flex; gap: 16px; align-items: center; justify-content: flex-start; } .sh_footer-icons img { width: 32px; height: 32px; display: block; } /* コピーライト */ .sh_footer-copyright { text-align: center; font-size: 12px; color: #fff; background-color: #000; padding: 20px 0; margin-top: 20px; } /* ===== レスポンシブ：スマホ表示 ===== */ @media screen and (max-width: 768px) { .sh_footer-wrapper { display: block; } .sh_footer-description { font-size: 14px; line-height: 1.6; color: rgb(255, 255, 255); text-align: left; } .sh_footer-heading { color: rgb(255, 255, 255); } .sh_footer-left { text-align: center; margin-bottom: 24px; } .sh_footer-center-wrap { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; gap: 20px; } .sh_footer-center-left, .sh_footer-center-right { flex: 1 1 45%; } .sh_footer-icons { justify-content: left; } .sh_footer-copyright { margin-top: 16px; /* ← スマホ時はさらに詰める */ padding-bottom: 24px; /* 安全に下余白を確保 */ } } /* --- Fix: ログイン時、TOPの .sh_contact と .sh_footer の間に出る1pxの白線 --- 管理バー表示時のサブピクセル丸めでセクション間に隙間が出るブラウザ挙動への対処。 ログイン中のTOPのみ、.sh_contactを1pxだけ重ねてシームを消す。 */ .logged-in.home .sh_contact { margin-bottom: -1px; } /* -------------------------------------------about------------------------------------ */ /* 共通幅・内側パディング */ .sh_inner { max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 20px; } .sh_about-hero { position: relative; height: 460px; overflow: hidden; color: #fff; text-align: center; } .sh_about-hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .sh_about-hero-overlay { position: relative; /* ← 背景画像の上に載せる */ width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; z-index: 1; } .sh_about-hero-title { font-size: 3vw; font-weight: 700; color: rgb(255, 255, 255); position: relative; z-index: 2; border: 1px solid #fff; /* ← 外罫線（白） */ display: inline-block; /* ← テキスト内容に合わせて枠を縮める */ padding: 8px 16px; /* ← 文字と枠の間に余白 */ background-color: rgba(0, 0, 0, 0.4); /* 任意：見やすさ向上 */ } /* セクションB：ロゴ＋コンセプト */ .sh_about-concept { background-color: #0c156a; background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.08) 0px, rgba(255, 255, 255, 0.08) 2px, transparent 2px, transparent 8px, rgba(255, 255, 255, 0.05) 8px, rgba(255, 255, 255, 0.05) 12px, transparent 12px, transparent 20px, rgba(255, 255, 255, 0.07) 20px, rgba(255, 255, 255, 0.07) 25px, transparent 25px, transparent 35px); } .sh_about-concept-wrap { display: flex; align-items: center; gap: 40px; padding: 60px 0; } .sh_about-logo { width: 160px; height: auto; } .sh_about-concept-text h2 { font-size: 5vw; margin-bottom: 12px; color: #fff; font-weight: 700; } .sh_about-concept-text p { font-size: 16px; line-height: 1.7; color: #fff; } /* セクションC：運営情報＋特商法＋プライバシー */ .sh_about-info { background-color: #fff; } .sh_about-info h3 { margin-top: 60px; /* タイトル上に余白を追加 */ font-size: 18px; font-weight: 700; } .sh_about-info-left, .sh_about-info-right { flex: 1 1 50%; } .sh_info-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; } .sh_info-table th, .sh_info-table td { border: 1px solid #ccc; padding: 10px 12px; text-align: left; vertical-align: top; } .sh_info-table th { background-color: #f5f5f5; font-weight: 700; width: 35%; } /* プライバシーポリシー：外罫囲み＋本文 */ .sh_about-privacy-box { border: 1px solid #ccc; padding: 24px; background-color: #fff; margin-top: 40px; margin-bottom: 80px; /* ← ここを追加 */ } .sh_about-privacy-box h3 { font-size: 18px; margin-bottom: 16px; margin-top: 1%; } .sh_about-privacy-body { font-size: 14px; line-height: 1.8; } .sh_about-privacy-body p { margin-bottom: 16px; } /* スマホ表示 */ @media screen and (max-width: 768px) { .sh_inner { padding: 0 20px; } .sh_about-concept-wrap, .sh_about-info-wrap { flex-direction: column; text-align: center; padding-top: 5vh; padding-bottom: 3vh; } .sh_about-logo { margin: 0 auto 20px; } .sh_about-info-left, .sh_about-info-right { width: 100%; } .sh_info-table { font-size: 12px; } .sh_about-hero { height: 200px; } .sh_about-hero-title { font-size: 24px; } .sh_about-concept-text h2 { font-size: 10vw; margin-bottom: 1.5em; } } @media screen and (max-width: 768px) { .sh_about-privacy-body p { font-size: 12px; /* ← テーブル内と同じに揃える */ line-height: 1.7; } } @media screen and (max-width: 768px) { .sh_about-privacy-box { margin-bottom: 40px; /* ← PCの80pxより狭くする */ } } /* --------------------------------------------athletes----------------------------------- */ /* 共通設定 */ .sh_main { background-color: #fff; color: #333; font-family: "Noto Sans JP", sans-serif; } /* セクションA：ヒーロー */ .sh_athletes-hero { position: relative; height: 460px; overflow: hidden; } .sh_athletes-hero-bg { position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; z-index: 0; } .sh_athletes-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; z-index: 1; } .sh_athletes-hero-title { font-size: 3vw; font-weight: 700; color: rgb(255, 255, 255); position: relative; z-index: 2; border: 1px solid #fff; /* ← 外罫線（白） */ display: inline-block; /* ← テキスト内容に合わせて枠を縮める */ margin-top: 100px; padding: 8px 16px; /* ← 文字と枠の間に余白 */ background-color: rgba(0, 0, 0, 0.4); /* 任意：見やすさ向上 */ } /* SP時のヒーロータイトルは他ページ（About等）と同等の24pxに固定 */ @media screen and (max-width: 768px) { .sh_athletes-hero-title { font-size: 24px; } .sh_athletes-hero-overlay .sh_inner { width: initial; margin: initial; align-content: center; } .sh_athletes-hero-overlay .sh_inner h1 { margin-top: initial; } } /* author（個別ブログ）ページ専用：ヒーロー高さを変更 */ body.author .sh_athletes-hero { height: 75vh; } .sh_athlete-profile-text { background: rgba(255, 255, 255, 0.8); /* 白透過 */ border-radius: 10px; padding: 1rem; } /* ヒーロー内では下部に固定配置 */ .sh_athletes-hero-overlay .sh_athlete-profile-text { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2; } @media (max-width: 768px) { .sh_athletes-hero-overlay .sh_athlete-profile-text { left: 12px; right: 12px; bottom: 12px; } } /* ============================= Author: SPレイアウト最適化 ・丸画像を最上部 ・プロフィールカードはその下に縦並び ・dtは太字、ddは次行表示 ============================= */ @media screen and (max-width: 768px) { /* ヒーロー内オーバーレイの配置をフローに戻す */ body.author .sh_athletes-hero-overlay .sh_inner { display: block; padding: 16px; } /* 丸画像を最上部・中央 */ body.author .sh_athletes-hero-overlay .sh_athlete-portrait { width: 160px; height: 160px; margin: 8px auto 12px; } body.author .sh_athletes-hero-overlay .sh_athlete-portrait img { width: 160px; height: 160px; object-fit: cover; border-radius: 50%; display: block; } /* プロフィールカードは絶対配置をやめて縦並びに */ body.author .sh_athletes-hero-overlay .sh_athlete-profile-text { position: static; left: auto; right: auto; bottom: auto; margin: 0; } /* プロフィールのdt/ddを縦並び */ body.author .sh_athlete-profile-dl { display: block; font-size: 14px; /* 要望: SP時14px */ } body.author .sh_athlete-profile-dl dt { display: block; font-weight: 700; margin-top: 10px; } body.author .sh_athlete-profile-dl dd { display: block; margin: 4px 0 8px 0; } /* 要望: 自己紹介テキストもSP時14px */ body.author .sh_athlete-bio { font-size: 14px; } body.author .sh_athlete-bio p { font-size: 14px; } /* 要望: ヒーロータイトルの上マージン */ body.author .sh_athletes-hero-title { margin-top: 42px !important; } /* 行コンテナがある場合の間隔を調整 */ body.author .sh_athlete-profile-row { display: block; margin: 0 0 6px; } } /* PCでは丸画像の右側にテキストを配置（横並び・下揃え） */ @media (min-width: 1025px) { /* authorページのヒーローはオーバーレイ全体を下揃え・左寄せに */ body.author .sh_athletes-hero-overlay { align-items: flex-end; justify-content: flex-start; } body.author .sh_athletes-hero-overlay .sh_inner { display: flex; align-items: flex-end; /* 下揃え */ gap: 24px; padding: 20px; position: relative; /* 子absoluteの基準を維持 */ flex-wrap: wrap; justify-content: flex-start; } body.author .sh_athletes-hero-overlay .sh_athlete-portrait { flex: 0 0 auto; order: 1; } body.author .sh_athletes-hero-overlay .sh_athlete-portrait img { width: 260px; height: 260px; object-fit: cover; border-radius: 50%; } body.author .sh_athletes-hero-overlay .sh_athlete-profile-text { position: static; /* 絶対配置を解除 */ left: auto; right: auto; bottom: auto; margin: 0 0 4px 0; /* ほんの少し下余白 */ order: 2; flex: 1 1 auto; } /* タイトルは1段目で100%幅・左寄せ */ body.author .sh_athletes-hero-overlay .sh_athletes-hero-title { order: 0; flex: 1 0 100%; display: block; text-align: left; margin-top: 0; margin-right: 0; margin-bottom: 8px; margin-left: 0; } } /* セクションB：アスリートカード一覧 */ .sh_athletes-list { padding: 60px 0; background-color: #f9f9f9; } /* .sh_section-title は先頭で定義済みのため重複削除 */ .sh_athletes-card-wrap { display: flex; flex-wrap: wrap; gap: 40px; justify-content: flex-start; } .sh_athletes-card { flex: 1 1 calc(50% - 20px); /* 2枚並び */ background-color: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 20px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.05); box-sizing: border-box; } .sh_athletes-img { width: 100%; height: auto; border-radius: 4px; margin-bottom: 16px; } .sh_athletes-name { font-size: 22px; font-weight: 700; margin-bottom: 8px; } .sh_athletes-description { font-size: 16px; line-height: 1.6; } /* アスリート紹介カードメディアクエリ */ @media screen and (max-width: 768px) { .sh_athletes-list { padding: 40px 0; } .sh_section-title { font-size: 20px; margin-bottom: 24px; } .sh_athletes-card-wrap { flex-direction: column; gap: 24px; } .sh_athletes-card { flex: 1 1 100%; padding: 16px; } .sh_athletes-name { font-size: 16px; margin-bottom: 6px; } .sh_athletes-description { font-size: 13px; line-height: 1.6; } .sh_athletes-list { background-color: transparent; } } /* アスリートカード内CTAをボックス下部に配置 */ .sh_athletes-card { display: flex; flex-direction: column; } .sh_athletes-card .sh_athletes-registration { margin-top: auto; /* 残りの縦スペースを吸収して下へ */ display: flex; flex-direction: column; /* 縦並び */ justify-content: flex-start; align-items: stretch; gap: 10px; /* 右寄せ（必要に応じて変更） */ } .sh_athletes-link-wrap { width: 100%; display: flex; justify-content: center; align-items: center; } .sh_athletes-link-btn { display: inline-block; background-color: #2e6fa9; color: #fff; padding: 10px 20px; border-radius: 4px; text-decoration: none; font-size: 14px; transition: background-color 0.3s ease; margin-right: 4%; margin-bottom: 5%; } /* 既存の余白をカード内では打ち消し */ .sh_athletes-card .sh_athletes-link-btn { width: 90%; margin: 0 auto; display: inline-block; background-color: #2e6fa9; color: #fff; text-align: center; font-size: 18px; font-weight: 700; padding: 8px 16px; border-radius: 4px; text-decoration: none; white-space: nowrap; } .sh_athletes-registration a:hover { background-color: #1a4d7a; transition: background-color 0.3s; } /* チェックボックス（デザイン用） */ .sh_athletes-check { display: inline-flex; margin-left: 5%; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; color: #2e6fa9; user-select: none; } .sh_athletes-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 2px solid #2e6fa9; border-radius: 4px; display: inline-block; position: relative; background-color: #fff; cursor: pointer; } .sh_athletes-check input[type="checkbox"]:checked { background-color: #2e6fa9; border-color: #2e6fa9; } .sh_athletes-check input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 4px; top: 0; width: 6px; height: 12px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* ------------------------------------------------------------------------------- */ html { scroll-behavior: smooth; } html, body { overflow-x: hidden; } /* ===== SH lightweight notice modal ===== */ .sh_notice-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .25); opacity: 0; transition: opacity .2s ease; z-index: 9998; } .sh_notice-backdrop.open { opacity: 1; } .sh_notice-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -46%); opacity: 0; transition: opacity .2s ease, transform .2s ease; z-index: 9999; } .sh_notice-modal.open { opacity: 1; transform: translate(-50%, -50%); } .sh_notice-modal__inner { min-width: 260px; max-width: min(92vw, 520px); background: #111; color: #fff; padding: 16px 18px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); text-align: center; font-weight: 700; letter-spacing: .02em; } /* --------------------------------------- Global Settings ---------------------------------------- */ body { /* 100vw はスクロールバー幅を含むため横ズレ原因に。幅指定を除去 */ overflow-x: hidden; background-color: #fff; /* デフォルト背景（最下層） */ } /* --------------------------------------- Container for content (上層レイヤー) ---------------------------------------- */ .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 10; /* 上層 */ } /* --------------------------------------- Mid Layer - Background or Decoration ---------------------------------------- */ .background-layer { max-width: 1200px; margin: 0 auto; position: absolute; top: 0; left: 0; right: 0; z-index: 1; /* 中間層背景装飾など */ } /* --------------------------------------- Bottom Layer - Full width background ---------------------------------------- */ .full-bg { width: 100vw; position: absolute; top: 0; left: 0; z-index: 0; background-color: #f0f0f0; /* 必要に応じて差し替え */ /* background-image, gradient, clip-path などをここで定義 */ } /* --------------------------------------- Typography Defaults ---------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: "Noto Sans JP", sans-serif; line-height: 1.4; color: #000; } p { font-size: 1rem; line-height: 1.8; color: #333; } /* --------------------------------------- Utility ---------------------------------------- */ .text-center { text-align: center; } .mt-40 { margin-top: 40px; } .mb-40 { margin-bottom: 40px; } /* 必要に応じて階層別にスタイル追加していく */ /* プライバシーポリシーページ（現状は about.html の #privacy へ移行。必要なら保持） */ .sh_privacy-content { padding: 80px 0; background: #fff; } .sh_privacy-container { max-width: 800px; margin: 0 auto; padding: 40px; background: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); border-radius: 8px; } .sh_privacy-intro { margin-bottom: 40px; line-height: 1.8; } .sh_privacy-content h2 { font-size: 24px; font-weight: 700; margin: 30px 0 15px; color: #333; } .sh_privacy-content p { margin-bottom: 20px; line-height: 1.8; } .sh_privacy-content ul { margin-left: 20px; margin-bottom: 20px; } .sh_privacy-content li { margin-bottom: 10px; line-height: 1.6; } /* 特定商取引法ページ（現状は about.html の #notice へ移行。必要なら保持） */ .sh_specific-content { padding: 80px 0; background: #fff; } .sh_specific-container { max-width: 1000px; margin: 0 auto; padding: 40px; background: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); border-radius: 8px; } .sh_specific-content .sh_info-table { width: 100%; border-collapse: collapse; margin-top: 20px; } .sh_specific-content .sh_info-table th, .sh_specific-content .sh_info-table td { padding: 20px; border: 1px solid #ddd; } .sh_specific-content .sh_info-table th { width: 200px; background: #f5f5f5; font-weight: 700; text-align: left; } .sh_specific-content .sh_info-table td { line-height: 1.8; } /* ニュースアーカイブページ（衝突回避のため .sh_news-grid スコープ化） */ .sh_news-archive { background: #f5f5f5; } .sh_news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; padding: 60px 0; } .sh_news-grid .sh_news-item { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s; } .sh_news-grid .sh_news-item:hover { transform: translateY(-5px); } .sh_news-grid .sh_news-link { text-decoration: none; color: inherit; } .sh_news-grid .sh_news-image { height: 200px; overflow: hidden; } @media screen and (max-width: 768px) { .sh_news-grid .sh_news-image { display: none; } } .sh_news-grid .sh_news-image img { width: 100%; height: 100%; object-fit: cover; } .sh_news-grid .sh_news-content { padding: 20px; } .sh_news-grid .sh_news-date { color: #666; font-size: 14px; } .sh_news-grid .sh_news-title { margin: 10px 0; font-size: 18px; font-weight: 700; } .sh_news-grid .sh_news-excerpt { color: #666; font-size: 14px; line-height: 1.6; } /* ニュースアーカイブ ページネーション */ .sh_pagination { padding: 10px 0 60px; display: flex; justify-content: center; } .sh_pagination-list { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0; } .sh_pagination-item button { min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid #ddd; background: #fff; border-radius: 6px; cursor: pointer; color: #333; transition: all .2s ease; } .sh_pagination-item button:hover:not(:disabled) { border-color: #2e6fa9; color: #2e6fa9; } .sh_pagination-item button.active { background: #2e6fa9; color: #fff; border-color: #2e6fa9; } .sh_pagination-item button:disabled { opacity: .5; cursor: not-allowed; } /* ニュース詳細ページ */ .sh_news-single { background: #fff; } .sh_news-header { padding: 60px 0 30px; } .sh_news-header .sh_news-title { font-size: 32px; margin: 20px 0; } .sh_news-body { padding: 0 0 60px; } .sh_news-content { max-width: 800px; margin: 0 auto; line-height: 1.8; } .sh_news-content p { margin-bottom: 1.5em; } .sh_news-content h2 { font-size: 24px; font-weight: 700; margin: 2em 0 1em; } .sh_news-nav { margin-top: 60px; text-align: center; } .sh_news-back { display: inline-block; padding: 10px 30px; background: #333; color: #fff; text-decoration: none; border-radius: 4px; transition: background-color 0.3s; } .sh_news-back:hover { background: #555; } /* ========================== Single (記事詳細) ========================== */ .sh_single { background: #f5f7fb; } .sh_single-body { padding: 60px 0 80px; } .sh_article { max-width: 900px; margin: 0 auto; background: #fff; border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06); padding: 28px 24px 34px; } .sh_article-header { border-bottom: 1px solid #eef2f7; padding-bottom: 12px; margin-bottom: 18px; } .sh_article-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .sh_article-date { font-size: 14px; color: #6b7280; } .sh_article-cats { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; } .sh_article-cats a { display: inline-block; font-size: 12px; color: #245081; background: #eaf3fc; border: 1px solid #cfe3f6; border-radius: 999px; padding: 4px 10px; text-decoration: none; } .sh_article-thumb { margin: 8px 0 18px; } .sh_article-thumb img { width: 100%; height: auto; border-radius: 8px; display: block; } .sh_article-caption { font-size: 12px; color: #6b7280; margin-top: 6px; } .sh_article-content { line-height: 1.9; } .sh_article-content h2, .sh_article-content h3 { margin: 1.6em 0 .8em; } .sh_article-content p { margin: 0 0 1.2em; } .sh_article-content img { max-width: 100%; height: auto; } .sh_article-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 16px; margin-top: 24px; border-top: 1px solid #eef2f7; } .sh_article-prev a, .sh_article-next a { color: #245081; text-decoration: none; } .sh_article-prev a:hover, .sh_article-next a:hover { text-decoration: underline; } /* お問い合わせページ */ .sh_contact-page { background: #f5f5f5; } .sh_contact-form-section { padding: 60px 0; } .sh_contact-intro { text-align: center; margin-bottom: 40px; } .sh_contact-form { max-width: 800px; margin: 0 auto; background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .sh_form-group { margin-bottom: 30px; } .sh_form-group label { display: block; margin-bottom: 10px; font-weight: 700; } .required { color: #e00; margin-left: 5px; font-size: 12px; } .sh_form-group input, .sh_form-group select, .sh_form-group textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } .sh_form-group textarea { height: 200px; resize: vertical; } .sh_form-footer { text-align: center; margin-top: 40px; } .sh_submit-btn { padding: 15px 60px; background: #333; color: #fff; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; transition: background-color 0.3s; } .sh_submit-btn:hover { background: #555; } /*★20250810追加　ログナビゲーション*/ .sh_log_nav { position: fixed; top: 7px; right: 25px; z-index: 1000; } .sh_log_nav ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 8px; } .sh_log_nav li { margin: 0; } .sh_log_nav a { display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; background: #245081; color: white; text-decoration: none; border-radius: 8px; font-size: 12px; font-weight: 500; transition: all 0.3s ease; flex-direction: column; gap: 3px; border: 2px solid transparent; } .sh_log_nav a:hover { background: rgba(255, 255, 255, 0.9); color: #333; border-color: #007bff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3); } .sh_log_nav i { width: 24px; height: 24px; fill: currentColor; display: flex; align-items: center; justify-content: center; } .sh_log_nav i svg { width: 100%; height: 100%; fill: inherit; } /* ログイン状態のナビゲーション（コメントアウト解除時用） */ .sh_log_nav #logout_nav a { background: #245081; } .sh_log_nav #logout_nav a:hover { background: rgba(255, 255, 255, 0.9); border-color: #28a745; box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3); } /* レスポンシブ対応 */ @media screen and (max-width: 768px) { .sh_log_nav { top: auto; bottom: 20px; right: 20px; } .sh_log_nav a { width: 70px; height: 70px; font-size: 11px; /* SPでは背景を20%透過（= 不透明度80%） */ background: rgba(36, 80, 129, 0.85); } /* ログアウトボタンもSP時は同様に透過背景に */ .sh_log_nav #logout_nav a { background: rgba(36, 80, 129, 0.85); } .sh_log_nav i { width: 20px; height: 20px; } } /* 管理バー(#wpadminbar)表示時のオフセット（PC表示時のみ上にずらす） */ body.admin-bar { --wpadminbar-height: 32px; /* デスクトップ時の管理バー高さ */ } @media screen and (max-width: 782px) { /* 各固定ページのヒーロー高さを直接上書き（確実に反映） */ .sh_step-hero, .sh_sponsors-hero, .sh_contact-hero, .sh_athletes-hero, .sh_login-hero { height: 200px !important; } /* author（個別アスリート）ページは従来通り 75vh を優先 */ body.author .sh_athletes-hero { height: 100vh !important; } /* オーバーレイは通常フローへ（背景色はそのまま） */ body.author .sh_athletes-hero-overlay { position: relative; /* staticだと背面の絶対配置画像に隠れるためrelativeに */ height: auto; display: block; z-index: 1; /* 背景画像(.sh_athletes-hero-bg, z-index:0)より前面に */ } /* 背景はヒーローの高さに追随 */ body.author .sh_athletes-hero-bg { height: 100%; } body.admin-bar { --wpadminbar-height: 46px; /* 狭幅時の管理バー高さ */ } } /* ============================= SP: ログインページのヒーロータイトル上下中央寄せ - 対象: