@charset "UTF-8"; /* ★★CSSの url() は必ず「このCSSからの相対パス」で書くこと。 url("/assets/img/...") のようにルート相対で書くと、 静的サイト（/assets/css/style.css）では動くが、 WordPressテーマ（wp-content/themes/tomotake/assets/css/style.css）では サイトのルートを見に行って404になる。 実際に5件これで壊れ、リボン・月桂冠・FVの背景模様が ステージングで表示されなかった（2026-09-04）。 正しい書き方： url("../img/deco/ribbon.svg") これなら静的でもテーマでも同じ場所を指す。 ★wp-theme/lint_theme.py がルート相対の url() を検出して止める。 */ /* ============================================================ 友竹ホールディングス コーポレートサイト デザインシステム / style.css ------------------------------------------------------------ WordPress 移行時はこのファイルをテーマ直下の style.css として そのまま使えます（先頭にテーマヘッダコメントを追加するだけ）。 ============================================================ */ /* ------------------------------------------------------------ 1. Design Tokens ------------------------------------------------------------ */ :root { /* --- Brand ------------------------------------------------ */ --c-red: #C10302; /* メインレッド：見出し帯・強調・大数字 */ --c-red-dark: #B0101F; /* ダークレッド：章タイトル */ --c-red-deep: #8E0C18; /* ホバー時など、さらに濃い赤 */ --c-pink: #FFB2B2; /* ライトピンク：カード地・淡いアクセント */ --c-pink-pale: #FED4DA; /* ごく薄ピンク：表ヘッダ */ --c-yellow: #FFE500; /* イエローハイライト：マーカー */ --c-gold: #F4CF95; /* ゴールド */ --c-cream: #FDE6A1; /* クリーム */ --c-teal: #69C7CD; /* ティール：差し色（使いすぎない） */ /* --- Neutrals --------------------------------------------- */ --c-text: #333333; --c-text-sub: #545454; --c-text-mute: #918F8F; --c-line: #E7E3E0; --c-white: #FFFFFF; /* --- Surfaces --------------------------------------------- */ --bg-base: #FFFFFF; --bg-cream: #FFFBF2; /* ページ全体のベース（yaaha 参照の温かいクリーム） */ --bg-cream-2: #FFF6E6; /* 一段濃いクリーム：セクション交互 */ --bg-pink-pale: #FFF5F5; /* 赤系セクションの淡い地 */ --bg-dark: #241C1C; /* フッター */ /* --- Typography ------------------------------------------- */ --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo UI", Meiryo, sans-serif; --font-en: "Outfit", "Noto Sans JP", sans-serif; /* --- Layout ----------------------------------------------- */ --w-container: 1120px; --w-narrow: 880px; --pad-x: 24px; /* --- Radius / Shadow / Motion ----------------------------- */ --r-sm: 8px; --r-md: 14px; --r-lg: 24px; --r-pill: 999px; --shadow-card: 0 2px 10px rgba(80, 60, 40, .06); --shadow-hover: 0 10px 28px rgba(80, 60, 40, .12); --ease: cubic-bezier(.22, .61, .36, 1); } /* ------------------------------------------------------------ 2. Reset / Base ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* 装飾のブロブやグローが横にはみ出しても横スクロールを出さない。 overflow-x: hidden と違い clip はスクロールコンテナを作らないので、 ヘッダーの position: sticky が効いたまま保たれる。 */ body { overflow-x: clip; } body { margin: 0; font-family: var(--font-jp); font-size: 16px; line-height: 1.9; font-feature-settings: "palt"; color: var(--c-text); background: var(--bg-cream); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, svg, video { max-width: 100%; height: auto; vertical-align: middle; } a { color: inherit; text-decoration: none; transition: color .2s var(--ease), opacity .2s var(--ease); } button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; } table { border-collapse: collapse; width: 100%; } /* キーボード操作時のみフォーカスリング */ :focus-visible { outline: 3px solid var(--c-teal); outline-offset: 2px; border-radius: 4px; } /* スクリーンリーダー専用 */ .u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* 「本文へスキップ」リンク */ .skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 18px; background: var(--c-red); color: #fff; border-radius: var(--r-sm); font-weight: 700; transition: top .2s var(--ease); } .skip-link:focus { top: 12px; } /* ------------------------------------------------------------ 3. Layout Utilities ------------------------------------------------------------ */ .container { width: 100%; max-width: var(--w-container); margin-inline: auto; padding-inline: var(--pad-x); } .container--narrow { max-width: var(--w-narrow); } .section { position: relative; padding-block: clamp(56px, 7.5vw, 100px); isolation: isolate; /* ★装飾がセクションの外へ出ないよう必ずクリップする。 これが無いと ::before / ::after が隣のセクションに被って 「背景が前面に出ている」ように見える。 */ overflow: hidden; } /* セクション内の要素をグロー層より前面に出す */ .section > .container { position: relative; z-index: 1; } /* --- セクション地：単色ではなく同系色内の微グラデーション --- 振り幅は2〜4%程度。強くすると途端に安っぽくなるので上げないこと。 */ .section--cream { background: linear-gradient(180deg, var(--bg-cream-2) 0%, #FFFAEF 55%, var(--bg-cream-2) 100%); } .section--white { background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF9 100%); } .section--pink { background: linear-gradient(180deg, var(--bg-pink-pale) 0%, #FFF9F5 60%, #FFF6F2 100%); } /* --- 境界をまたぐ放射グロー --- 「帯に見える」原因は水平の切れ目なので、セクションをまたいで にじむ光を置いて境界を曖昧にする。 */ .section::before { content: ""; /* 以前は inset:-18% 0 で上下にはみ出させていたが、 隣のセクションに被る不具合が出たため内側に収める。 */ position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--glow, none); } .section--cream::before { --glow: radial-gradient(52% 46% at 82% 8%, rgba(244, 207, 149, .34), transparent 70%), radial-gradient(46% 42% at 8% 92%, rgba(255, 178, 178, .22), transparent 72%); } .section--white::before { --glow: radial-gradient(46% 40% at 6% 6%, rgba(253, 230, 161, .30), transparent 70%), radial-gradient(44% 40% at 94% 88%, rgba(105, 199, 205, .12), transparent 72%); } .section--pink::before { --glow: radial-gradient(54% 48% at 88% 12%, rgba(255, 178, 178, .30), transparent 70%), radial-gradient(40% 38% at 4% 86%, rgba(253, 230, 161, .28), transparent 72%); } /* --- 硬い水平線を崩す曲線 --- 白セクションがクリーム地の上に乗るときだけ、上端を丸める。 */ .section--white { border-radius: clamp(20px, 3.4vw, 44px) clamp(20px, 3.4vw, 44px) 0 0; } .section--curve-top { border-radius: clamp(24px, 5vw, 56px) clamp(24px, 5vw, 56px) 0 0; } /* ------------------------------------------------------------ 4. Typography Components ------------------------------------------------------------ */ /* 小見出しラベル：「○ ラベル」（yaaha 参照） */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: .08em; color: var(--c-red); } .eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid currentColor; flex-shrink: 0; } /* 英字の大見出し＋日本語サブラベル */ .sec-head { margin-bottom: clamp(32px, 5vw, 56px); } .sec-head__en { display: block; font-family: var(--font-en); font-size: clamp(38px, 6vw, 64px); font-weight: 600; line-height: 1.1; letter-spacing: .01em; color: var(--c-red); } .sec-head__jp { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; font-weight: 700; letter-spacing: .1em; color: var(--c-text-sub); } .sec-head__jp::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c-red); flex-shrink: 0; } .sec-head--center { text-align: center; } .sec-head--center .sec-head__jp { justify-content: center; } .sec-head__lead { max-width: 46em; margin-top: 20px; font-size: clamp(15px, 1.6vw, 17px); color: var(--c-text-sub); } .sec-head--center .sec-head__lead { margin-inline: auto; } /* 大きな日本語見出し */ .h-lg { font-size: clamp(26px, 3.6vw, 42px); font-weight: 700; line-height: 1.5; letter-spacing: .01em; } .h-md { font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; line-height: 1.6; } .h-sm { font-size: clamp(17px, 1.8vw, 20px); font-weight: 700; line-height: 1.7; } .lead { font-size: clamp(15px, 1.7vw, 18px); color: var(--c-text-sub); } .note { font-size: 13px; color: var(--c-text-mute); line-height: 1.8; } /* PCでのみ効く改行（スマホでは無効化して自然に折り返す） */ .u-br-pc { display: inline; } @media (max-width: 767px) { .u-br-pc { display: none; } } /* 黄色マーカー（ブランドのシグネチャー要素） */ .mark { background: linear-gradient(transparent 58%, var(--c-yellow) 58%); padding-inline: 2px; font-weight: 700; } .txt-red { color: var(--c-red); font-weight: 700; } /* ------------------------------------------------------------ 5. Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 12px 32px; font-size: 15px; font-weight: 700; letter-spacing: .04em; border-radius: var(--r-pill); transition: transform .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn--primary { background: var(--c-red); color: #fff; box-shadow: 0 4px 14px rgba(193, 3, 2, .25); } .btn--primary:hover { background: var(--c-red-deep); color: #fff; box-shadow: var(--shadow-hover); } .btn--ghost { background: #fff; color: var(--c-red); border: 2px solid var(--c-red); } .btn--ghost:hover { background: var(--c-red); color: #fff; } .btn--light { background: #fff; color: var(--c-text); box-shadow: var(--shadow-card); } .btn--light:hover { box-shadow: var(--shadow-hover); } .btn--lg { min-height: 64px; padding-inline: 44px; font-size: 16px; } .btn--block { width: 100%; } /* 矢印アイコン */ .btn__arrow { width: 18px; height: 18px; flex-shrink: 0; transition: transform .2s var(--ease); } .btn:hover .btn__arrow { transform: translateX(3px); } /* テキストリンク（→付き） */ .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--c-red); } .link-arrow::after { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--c-red) no-repeat center / 9px 9px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E"); transition: transform .2s var(--ease); } .link-arrow:hover::after { transform: translateX(3px); } /* ------------------------------------------------------------ 6. Header ------------------------------------------------------------ */ .header { position: sticky; top: 0; z-index: 100; background: rgba(255, 251, 242, .92); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .header.is-scrolled { border-bottom-color: var(--c-line); box-shadow: 0 2px 12px rgba(80, 60, 40, .05); } .header__inner { display: flex; align-items: center; gap: 24px; height: 76px; max-width: var(--w-container); margin-inline: auto; padding-inline: var(--pad-x); } .logo { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; } /* 正式ロゴ（横組み）。元データが 2MB の SVG（中身はPNG）だったため、 実表示サイズの2倍で書き出した PNG に差し替えている。 マーク＝#D72F53／文字＝#595959。フッターは文字を白にした反転版を使う。 */ .logo__img { height: 36px; width: auto; display: block; } @media (max-width: 900px) { .logo__img { height: 32px; } } .logo__mark { width: 34px; height: 34px; flex-shrink: 0; } .logo__text { line-height: 1.15; } .logo__en { display: block; font-family: var(--font-en); font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--c-red); } .logo__jp { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--c-text-mute); } .gnav { margin-left: auto; align-self: stretch; } .gnav__list { display: flex; align-items: center; gap: 26px; } /* ★ドロップダウンは li の下端（top:100%）に出る。li の高さが文字ぶんしか ないと、ヘッダーの下端より12px上から白い箱が始まり、境目が段になる。 li をヘッダーの高さまで伸ばして、下端をヘッダーの下端に一致させる。 リンク自体は li の中で中央に置くので、下線の位置は変わらない。 */ @media (min-width: 901px) { .gnav__list { align-items: stretch; height: 100%; } .gnav__list > li { display: flex; align-items: center; } } .gnav__link { position: relative; font-size: 14px; font-weight: 700; letter-spacing: .02em; padding-block: 6px; white-space: nowrap; } .gnav__link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--c-red); transform: scaleX(0); transform-origin: right; transition: transform .25s var(--ease); } .gnav__link:hover { color: var(--c-red); } .gnav__link:hover::after, /* カレント表示。静的サイトは aria-current、WordPress は .current-menu-item / .current_page_parent を付けるので、両方を拾う */ .gnav__link[aria-current="page"]::after, .current-menu-item .gnav__link::after, .current-menu-ancestor .gnav__link::after, .current_page_parent .gnav__link::after { transform: scaleX(1); transform-origin: left; } .gnav__link[aria-current="page"], .current-menu-item .gnav__link, .current-menu-ancestor .gnav__link, .current_page_parent .gnav__link { color: var(--c-red); } /* --- ドロップダウン ------------------------------------------ ★親項目 = .gnav__item--has-sub。WordPress の wp_nav_menu は .menu-item-has-children を付けるので、両方を書いてある。 ★子リスト = .gnav__sub。WordPress は .sub-menu。 ★PCは hover だけでなく :focus-within でも開く。マウスを使えない人が Tab だけで下層ページに辿り着けなくなるため、hover だけにしないこと。 ★開閉ボタン（スマホ用）は main.js が差し込む。HTMLには書かない。 */ .gnav__list > li { position: relative; } /* 親項目の下向き矢印。下線は ::after を使っているので ::before を使う */ .gnav__list > li.gnav__item--has-sub > .gnav__link, .gnav__list > li.menu-item-has-children > a > .gnav__link { padding-right: 15px; } .gnav__list > li.gnav__item--has-sub > .gnav__link::before, .gnav__list > li.menu-item-has-children > a > .gnav__link::before { content: ""; position: absolute; right: 1px; top: calc(50% - 4px); width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transform-origin: 60% 60%; transition: transform .2s var(--ease); } .gnav__list > li.gnav__item--has-sub:hover > .gnav__link::before, .gnav__list > li.menu-item-has-children:hover > a > .gnav__link::before { transform: rotate(225deg); } .gnav__sub, .gnav__list .sub-menu { position: absolute; top: 100%; left: 50%; translate: -50% 0; min-width: 218px; padding: 8px; z-index: 20; background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: 0 14px 34px rgba(80, 60, 40, .14); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; } /* ★マウスが「リンク → 子リスト」へ動く途中に隙間があると閉じてしまう。 見えない橋を子リストの上に生やして、hover を切らさない。 */ .gnav__sub::before, .gnav__list .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; } .gnav__list > li.gnav__item--has-sub:hover > .gnav__sub, .gnav__list > li.gnav__item--has-sub:focus-within > .gnav__sub, .gnav__list > li.menu-item-has-children:hover > .sub-menu, .gnav__list > li.menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } /* いちばん右の項目は、中央寄せだと画面の外に出るので右端に揃える */ .gnav__list > li:last-child .gnav__sub, .gnav__list > li:last-child .sub-menu { left: auto; right: 0; translate: none; } .gnav__sub a, .gnav__list .sub-menu a { display: block; padding: 11px 14px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 700; line-height: 1.5; white-space: nowrap; transition: background-color .2s var(--ease), color .2s var(--ease); } .gnav__sub a:hover, .gnav__list .sub-menu a:hover { background: var(--bg-cream); color: var(--c-red); } .gnav__sub .gnav__link, .gnav__list .sub-menu .gnav__link { padding: 0; font-size: inherit; } .gnav__sub .gnav__link::after, .gnav__sub .gnav__link::before, .gnav__list .sub-menu .gnav__link::after, .gnav__list .sub-menu .gnav__link::before { display: none; } .gnav__toggle { display: none; } /* スマホでだけ出す */ /* ★901〜1080pxの帯だけ、ヘッダーの1行が入りきらない。 ロゴ130 + ナビ578 + ボタン130 + 余白96 = 934px 必要なのに、 スマホ表示に切り替わるのは900px以下なので、901〜909pxで 8pxはみ出していた（2026-09-05に発覚。矢印用の padding-right を 足したぶん、ナビが45px長くなったのが引き金）。 ここだけ間隔と文字サイズを詰めて収める。広い画面には触らない。 */ @media (min-width: 901px) and (max-width: 1080px) { .header__inner { gap: 16px; } .gnav__list { gap: 16px; } .gnav__link { font-size: 13.5px; } .header__cta .btn { padding-inline: 18px; } } .gnav__cta { display: none; } /* デスクトップでは .header__cta 側を使う */ .header__cta { flex-shrink: 0; } .header__cta .btn { min-height: 44px; padding-inline: 22px; font-size: 14px; } /* ハンバーガー */ .burger { display: none; width: 44px; height: 44px; flex-shrink: 0; margin-left: auto; position: relative; border-radius: var(--r-sm); } .burger__bar { position: absolute; left: 11px; width: 22px; height: 2px; background: var(--c-text); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s var(--ease); } .burger__bar:nth-child(1) { top: 15px; } .burger__bar:nth-child(2) { top: 21px; } .burger__bar:nth-child(3) { top: 27px; } .burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); } .burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ------------------------------------------------------------ 7. Hero ------------------------------------------------------------ */ .hero { position: relative; overflow: hidden; padding-block: clamp(56px, 8vw, 104px) clamp(64px, 9vw, 120px); background: radial-gradient(58% 52% at 88% 6%, rgba(253, 230, 161, .55), transparent 68%), radial-gradient(46% 44% at 2% 86%, rgba(255, 178, 178, .34), transparent 70%), radial-gradient(38% 34% at 62% 96%, rgba(105, 199, 205, .14), transparent 72%), linear-gradient(168deg, #FFFDF6 0%, var(--bg-cream) 46%, #FFF7EA 100%); } /* 背景の有機的なブロブ装飾 */ .hero__blob { position: absolute; z-index: 0; pointer-events: none; filter: blur(.3px); } .hero__blob--1 { top: -120px; right: -100px; width: 520px; color: var(--c-cream); opacity: .40; } .hero__blob--2 { bottom: -220px; left: -180px; width: 460px; color: var(--c-pink); opacity: .20; } .hero__blob--3 { bottom: 40px; right: 18%; width: 150px; color: var(--c-teal); opacity: .26; } .hero__inner { position: relative; z-index: 1; } .hero__title { margin-top: 18px; font-size: clamp(30px, 5.2vw, 60px); font-weight: 700; line-height: 1.42; letter-spacing: .005em; } .hero__lead { margin-top: 28px; max-width: 34em; } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; } /* ------------------------------------------------------------ 8. Cards / Grids ------------------------------------------------------------ */ .grid { display: grid; gap: 24px; } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .card { display: flex; flex-direction: column; background: linear-gradient(180deg, #FFFFFF 0%, #FFFCF6 100%); border-radius: var(--r-md); box-shadow: var(--shadow-card); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } .card__body { padding: 28px; display: flex; flex-direction: column; flex: 1; gap: 12px; } /* ★16:9 にしている。16:9のアイキャッチを入れる運用にそろえたため。 16:10のままだと、16:9の画像が object-fit:cover で上下1割ほど切れる。 16:9にすれば切れずにぴったり収まる。 */ .card__thumb { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--bg-cream-2); } .card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); } a.card:hover .card__thumb img { transform: scale(1.05); } /* ニュースのカードで、ブログのカテゴリタグと同じ位置に置く日付。 ★.tag を流用しない。日付は分類ではないので、同じ見た目にすると カテゴリと読み違える。 */ .card__date { font-size: 13px; font-weight: 700; color: var(--c-text-mute); letter-spacing: .02em; } .card__title { font-size: 18px; font-weight: 700; line-height: 1.6; } .card__text { font-size: 14px; color: var(--c-text-sub); line-height: 1.85; } .card__foot { margin-top: auto; padding-top: 6px; } /* 小さな連番ラベル（Service 01、Value 01、Phase 01 など） もとは service-card 専用だったが、カードを廃止して汎用ラベルになったため改名した。 */ .label-num { font-family: var(--font-en); font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--c-red); } /* タグ / バッジ */ .tag { display: inline-block; padding: 4px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; letter-spacing: .04em; background: var(--bg-pink-pale); color: var(--c-red); } .tag--teal { background: #E6F6F7; color: #2A8A90; } .tag--gray { background: #F1EEEB; color: var(--c-text-sub); } /* ------------------------------------------------------------ 9. Stats（数字で見る） ------------------------------------------------------------ */ .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .stat { background: linear-gradient(180deg, #FFFFFF 0%, #FFFBF3 100%); border-radius: var(--r-md); padding: 32px 24px; text-align: center; box-shadow: var(--shadow-card); } .stat__label { font-size: 13px; font-weight: 700; color: var(--c-text-sub); letter-spacing: .04em; } .stat__value { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-top: 8px; font-family: var(--font-en); color: var(--c-red); } .stat__num { font-size: clamp(40px, 5vw, 60px); font-weight: 700; line-height: 1; } .stat__unit { font-size: 17px; font-weight: 700; font-family: var(--font-jp); } .stat__note { margin-top: 10px; font-size: 12px; color: var(--c-text-mute); } /* ------------------------------------------------------------ 10. News リスト ------------------------------------------------------------ */ .news-list { border-top: 1px solid var(--c-line); } .news-item { border-bottom: 1px solid var(--c-line); } .news-item__link { /* ★日付／見出しの2列。以前はカテゴリ用に真ん中の120pxがあったが、 ニュースはNEWSしか無いのでタグを出さないことにした（2026-09-07）。 3列のままにすると、見出しが120pxぶん右にずれて日付から離れる。 */ display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 20px; padding: 22px 8px; transition: background-color .2s var(--ease); } .news-item__link:hover { background: rgba(255, 245, 245, .7); } .news-item__link:hover .news-item__title { color: var(--c-red); } .news-item__date { font-family: var(--font-en); font-size: 14px; font-weight: 600; color: var(--c-text-mute); } .news-item__title { font-size: 15px; font-weight: 500; line-height: 1.7; } /* ------------------------------------------------------------ 11. Message（代表メッセージ） ------------------------------------------------------------ */ .message { display: grid; grid-template-columns: 1fr 380px; gap: clamp(32px, 5vw, 64px); align-items: start; } .message__body p + p { margin-top: 1.6em; } .message__sign { margin-top: 32px; font-size: 14px; color: var(--c-text-sub); } .message__sign strong { display: block; margin-top: 4px; font-size: 20px; color: var(--c-text); } .message__photo { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); } .message__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; } /* ------------------------------------------------------------ 12. CTA バンド ------------------------------------------------------------ */ .cta-band { position: relative; overflow: hidden; color: #fff; background: radial-gradient(64% 90% at 12% 0%, rgba(255, 255, 255, .16), transparent 62%), radial-gradient(52% 80% at 92% 100%, rgba(0, 0, 0, .22), transparent 64%), linear-gradient(122deg, var(--c-red-dark) 0%, var(--c-red) 46%, #D6221B 100%); } /* 上端に細いハイライトを入れて面の立ち上がりを作る */ .cta-band::after { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); } .cta-band__inner { position: relative; z-index: 1; padding-block: clamp(56px, 8vw, 96px); text-align: center; } .cta-band__title { font-size: clamp(24px, 3.4vw, 38px); font-weight: 700; line-height: 1.5; } .cta-band__lead { margin-top: 16px; color: rgba(255, 255, 255, .88); font-size: 15px; } .cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 36px; } .cta-band .btn--light { color: var(--c-red); } .cta-band .btn--ghost { border-color: #fff; color: #fff; background: transparent; } .cta-band .btn--ghost:hover { background: #fff; color: var(--c-red); } .cta-band__deco { position: absolute; inset: 0; z-index: 0; opacity: .12; pointer-events: none; } /* ------------------------------------------------------------ 13. Footer ------------------------------------------------------------ */ .footer { position: relative; background: radial-gradient(70% 60% at 50% 0%, rgba(193, 3, 2, .16), transparent 70%), linear-gradient(180deg, #2C2222 0%, var(--bg-dark) 60%, #1C1616 100%); color: rgba(255, 255, 255, .82); padding-block: clamp(48px, 6vw, 72px) 32px; } .footer a:hover { color: #fff; } .footer__top { display: grid; grid-template-columns: 300px 1fr; gap: clamp(32px, 5vw, 72px); } .footer .logo__en { color: #fff; } .footer .logo__jp { color: rgba(255, 255, 255, .55); } .footer__addr { margin-top: 20px; font-size: 13px; line-height: 1.9; color: rgba(255, 255, 255, .65); } /* ★列数はHTMLの列の数とそろえること。 採用の列を外すときは3に、戻すときは4に。 CSSに固定で書いてあるので、HTMLだけ変えると空きの列ができる。 */ .footer__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } .footer__navtitle { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .06em; margin-bottom: 12px; } .footer__navlist li + li { margin-top: 8px; } .footer__navlist a { font-size: 13px; color: rgba(255, 255, 255, .72); } .footer__bottom { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; margin-top: clamp(36px, 5vw, 56px); padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .14); } .footer__copy { font-family: var(--font-en); font-size: 12px; color: rgba(255, 255, 255, .55); } .footer__sub { display: flex; gap: 20px; flex-wrap: wrap; } .footer__sub a { font-size: 12px; color: rgba(255, 255, 255, .6); } /* ------------------------------------------------------------ 14. 下層ページ共通 ------------------------------------------------------------ */ .page-head { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 88px) clamp(32px, 4vw, 48px); background: radial-gradient(56% 60% at 92% 0%, rgba(253, 230, 161, .48), transparent 68%), radial-gradient(40% 46% at 0% 100%, rgba(255, 178, 178, .22), transparent 72%), linear-gradient(170deg, #FFFDF7 0%, var(--bg-cream) 100%); } .page-head__blob { position: absolute; top: -140px; right: -80px; width: 460px; color: var(--c-cream); opacity: .38; z-index: 0; } .page-head__inner { position: relative; z-index: 1; } .breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--c-text-mute); padding-top: 18px; } .breadcrumb li:not(:last-child)::after { content: "／"; margin-left: 8px; color: var(--c-line); } .breadcrumb a:hover { color: var(--c-red); } /* 定義リスト（会社概要・募集要項） */ .deflist { border-top: 1px solid var(--c-line); } .deflist__row { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 22px 4px; border-bottom: 1px solid var(--c-line); } .deflist__key { font-size: 14px; font-weight: 700; color: var(--c-red); } .deflist__val { font-size: 15px; color: var(--c-text); } /* ------------------------------------------------------------ 15. スクロールインアニメーション ------------------------------------------------------------ */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } /* ------------------------------------------------------------ 16. Responsive ------------------------------------------------------------ */ @media (max-width: 1024px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .message { grid-template-columns: 1fr; } .message__photo { max-width: 320px; } .footer__top { grid-template-columns: 1fr; } .footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { /* --- モバイルナビ --- */ .burger { display: block; } .header__cta { display: none; } /* ★★ここで backdrop-filter を必ず切ること。 backdrop-filter が効いている要素は、その中の position:fixed の 「包含ブロック」になる。つけたままだと、中にある .gnav の top/height がヘッダー（高さ77px）を基準に解決されてしまい、 ドロワーの高さが96pxしか出ず、メニューが1項目しか見えなくなる。 （2026-09-05に発覚。position:sticky 自体は包含ブロックを作らない。 原因はあくまで backdrop-filter。） 背景は元から不透明度.92なので、単色にしても見た目はほぼ同じ。 */ .header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-cream); } /* --gnav-top はヘッダーの下端。main.js が実測して入れる。 管理バー（ログイン中は上に46px入る）があってもズレないようにするため。 */ .gnav { position: fixed; top: var(--gnav-top, 76px); left: 0; right: 0; height: calc(100vh - var(--gnav-top, 76px)); height: calc(100dvh - var(--gnav-top, 76px)); /* アドレスバーのぶんを引く */ z-index: 90; background: var(--bg-cream); padding: 16px var(--pad-x) 48px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; } .gnav.is-open { opacity: 1; visibility: visible; transform: none; } .gnav__list { flex-direction: column; align-items: stretch; gap: 0; } .gnav__list > li { border-bottom: 1px solid var(--c-line); } .gnav__link { display: block; padding: 16px 4px; font-size: 16px; } .gnav__link::after { display: none; } /* 親項目：リンクと開閉ボタンを1行に並べ、子リストは下の行に落とす */ .gnav__list > li.gnav__item--has-sub, .gnav__list > li.menu-item-has-children { display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; } .gnav__list > li.gnav__item--has-sub > .gnav__link::before, .gnav__list > li.menu-item-has-children > a > .gnav__link::before { display: none; } .gnav__list > li.gnav__item--has-sub > .gnav__link, .gnav__list > li.menu-item-has-children > a { padding-right: 0; } /* 開閉ボタン。＋が−に変わる */ .gnav__toggle { display: block; position: relative; width: 48px; height: 48px; justify-self: end; border-radius: var(--r-sm); } .gnav__toggle::before, .gnav__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--c-text); border-radius: 2px; transition: opacity .2s var(--ease), transform .2s var(--ease); } .gnav__toggle::before { width: 15px; height: 2px; margin: -1px 0 0 -7.5px; } .gnav__toggle::after { width: 2px; height: 15px; margin: -7.5px 0 0 -1px; } .gnav__list > li.is-subopen > .gnav__toggle::after { opacity: 0; transform: rotate(90deg); } /* 子リスト：PCの浮かせる指定をすべて打ち消して、その場で開くだけにする */ .gnav__sub, .gnav__list .sub-menu { position: static; grid-column: 1 / -1; translate: none; transform: none; min-width: 0; margin: 0; padding: 0 0 12px; background: none; border: 0; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transition: none; display: none; } .gnav__sub::before, .gnav__list .sub-menu::before { display: none; } /* hover用の橋は不要 */ .gnav__list > li.is-subopen > .gnav__sub, .gnav__list > li.is-subopen > .sub-menu { display: block; } .gnav__sub li, .gnav__list .sub-menu li { border: 0; } .gnav__sub a, .gnav__list .sub-menu a { display: block; padding: 13px 4px 13px 16px; border-left: 2px solid var(--c-line); border-radius: 0; font-size: 14.5px; font-weight: 700; color: var(--c-text-sub); white-space: normal; } .gnav__sub a:hover, .gnav__list .sub-menu a:hover { background: none; } .gnav__sub a:active, .gnav__list .sub-menu a:active { color: var(--c-red); border-left-color: var(--c-red); } .gnav__cta { display: block; margin-top: 24px; } .gnav__cta .btn { width: 100%; } body.is-navopen { overflow: hidden; } } @media (max-width: 767px) { body { font-size: 15px; line-height: 1.85; } /* 装飾ブロブがスマホでは大きすぎて本文にかぶるため小さくする */ .hero__blob--1 { width: 300px; top: -60px; right: -80px; } .hero__blob--2 { width: 280px; bottom: -140px; left: -120px; } .hero__blob--3 { display: none; } .page-head__blob { width: 260px; top: -80px; right: -60px; } .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } .news-item__link { grid-template-columns: 1fr; gap: 6px; padding-block: 18px; } .news-item__date { font-size: 13px; } .deflist__row { grid-template-columns: 1fr; gap: 6px; padding-block: 18px; } .footer__nav { grid-template-columns: 1fr 1fr; } .btn { width: 100%; } .hero__actions .btn, .cta-band__actions .btn { width: 100%; } .stat { padding: 24px 16px; } } @media (max-width: 400px) { .stats { grid-template-columns: 1fr; } } /* ------------------------------------------------------------ 17. アクセシビリティ：モーション低減 ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } } /* ------------------------------------------------------------ 18. 印刷 ------------------------------------------------------------ */ @media print { .header, .footer, .cta-band, .burger { display: none !important; } body { background: #fff; } } /* ------------------------------------------------------------ 19. 画像プレースホルダ（本番写真に差し替える箇所） ------------------------------------------------------------ 写真が用意でき次第 に置き換えてください。 .ph は「ここに画像が入る」ことが見て分かるダミーです。 */ .ph { display: grid; place-items: center; background: repeating-linear-gradient(45deg, rgba(193,3,2,.04) 0 10px, transparent 10px 20px), var(--bg-cream-2); color: var(--c-text-mute); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-align: center; border-radius: var(--r-md); padding: 12px; } .ph--thumb { aspect-ratio: 16 / 10; } .ph--square { aspect-ratio: 1 / 1; } .ph--portrait { aspect-ratio: 3 / 4; } .ph--wide { aspect-ratio: 21 / 9; } /* ============================================================ 20. 下層ページ用コンポーネント ============================================================ */ /* --- 20-1. 本文（プライバシーポリシー等の長文） --------------- */ .prose { max-width: 46em; } /* ★左の縦帯は使わない（本人より禁止）。下線で差をつける。 記事本文の見出しは193記事すべてに出るので、ここは控えめに。 */ .prose h2 { margin-top: 2.4em; margin-bottom: .8em; padding-bottom: .5em; font-size: clamp(19px, 2.2vw, 23px); font-weight: 700; line-height: 1.6; border-bottom: 2px solid var(--bg-cream-2); } .prose h2:first-child { margin-top: 0; } .prose h3 { margin-top: 1.8em; margin-bottom: .6em; font-size: 17px; font-weight: 700; } .prose p { margin-bottom: 1.4em; } .prose ul, .prose ol { margin: 0 0 1.4em; padding-left: 1.4em; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li { margin-bottom: .5em; } .prose li::marker { color: var(--c-red); } .prose a { color: var(--c-red); text-decoration: underline; text-underline-offset: 3px; } /* --- 20-2. ステップ（支援の流れ・選考フロー） ---------------- */ .steps { counter-reset: step; display: grid; gap: 16px; } .step { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 24px; align-items: start; background: var(--c-white); border-radius: var(--r-md); padding: 28px; box-shadow: var(--shadow-card); } .step::before { counter-increment: step; content: "STEP " counter(step, decimal-leading-zero); grid-column: 1; align-self: start; font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--c-red); line-height: 1.4; } .step__title { font-size: 17px; font-weight: 700; margin-bottom: 6px; } .step__text { font-size: 14px; color: var(--c-text-sub); } /* --- 20-3. メンバーカード ------------------------------------ */ .member { text-align: left; } .member__photo { border-radius: var(--r-md); overflow: hidden; margin-bottom: 18px; } .member__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; } .member__role { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--c-red); } .member__name { font-size: 20px; font-weight: 700; margin-top: 4px; } .member__en { font-family: var(--font-en); font-size: 12px; color: var(--c-text-mute); letter-spacing: .06em; } /* ★★スマホでの文字の下限は12pxにそろえている（注記だけ11px）。 日本語は12pxを下回ると読みにくく、 iOSでは入力欄が16px未満だとタップ時に画面が拡大する。 clamp() の第1引数（下限）を10pxや9pxにしないこと。 実際に .igfv__mnote が9px、.igfv__mlabel と .tkfv__pts が10pxで、 スマホ幅で読みづらくなっていた（2026-09-04に実測して修正）。 ★vwの係数だけ大きくしても直らない。下限が効いている幅では 第1引数がそのまま出る。 */ /* --- 20-3b. ボードメンバー（1人1行）------------------------------------ ★2026-09、3列のカード並びから作り替えた。 実際の経歴文をいただいたら、代表の分だけで約450字・6段落あり、 3列（1列370px）では極端に縦長になり、しかも3人の長さが3倍ちがうため カードの高さがまったくそろわなかった。 本番サイト（tomotakeholdings.com/member/）も1人1行なので、そちらに合わせた。 ★写真の列は最大300px。これ以上広げると本文が読みにくい幅になる。 */ .member-rows { display: grid; } .member-row { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 52px); align-items: start; padding-block: clamp(34px, 4.4vw, 60px); } .member-row:first-child { padding-top: 0; } .member-row:last-child { padding-bottom: 0; } .member-row + .member-row { border-top: 1px solid var(--c-line); } @media (max-width: 820px) { .member-row { grid-template-columns: 1fr; } /* スマホでは写真が幅いっぱいになると縦に伸びすぎるので上限をかける */ .member-row__photo { max-width: 260px; } } .member-row__photo { border-radius: var(--r-md); overflow: hidden; } .member-row__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; } .member-row__body { min-width: 0; } /* ★学歴。無い人もいるので、あるときだけ出す */ .member__edu { margin-top: 6px; font-size: 13px; color: var(--c-text-mute); } /* 「Profile」の見出し。本番サイトと同じ位置づけ */ .member__ptitle { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--c-line); font-family: var(--font-en); font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--c-red); } /* ★段落ごとに

を置く。改行を
で並べると行間が詰まって読みづらい */ .member__bio { margin-top: 12px; font-size: 14px; color: var(--c-text-sub); } .member__bio p { line-height: 1.95; text-wrap: pretty; } .member__bio p + p { margin-top: 13px; } /* --- 20-4. 沿革タイムライン ---------------------------------- */ .timeline { position: relative; padding-left: 28px; } .timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--c-pink), var(--c-line)); } .timeline__item { position: relative; padding-bottom: 32px; } .timeline__item::before { content: ""; position: absolute; left: -28px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-red); border: 3px solid var(--bg-cream); } .timeline__date { font-family: var(--font-en); font-size: 14px; font-weight: 700; color: var(--c-red); } .timeline__text { font-size: 15px; margin-top: 2px; } /* --- 20-5. FAQ / アコーディオン ------------------------------ */ .faq { border-top: 1px solid var(--c-line); } .faq__item { border-bottom: 1px solid var(--c-line); } .faq__item > summary { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; padding: 22px 44px 22px 4px; position: relative; font-size: 16px; font-weight: 700; line-height: 1.7; list-style: none; } .faq__item > summary::-webkit-details-marker { display: none; } .faq__item > summary::before { content: "Q."; color: var(--c-red); font-family: var(--font-en); flex-shrink: 0; } .faq__item > summary::after { content: ""; position: absolute; right: 8px; top: 28px; width: 12px; height: 12px; border-right: 2px solid var(--c-red); border-bottom: 2px solid var(--c-red); transform: rotate(45deg); transition: transform .25s var(--ease); } .faq__item[open] > summary::after { transform: rotate(-135deg); top: 32px; } .faq__body { display: flex; gap: 14px; padding: 0 4px 24px; font-size: 15px; color: var(--c-text-sub); } .faq__body::before { content: "A."; color: var(--c-text-mute); font-family: var(--font-en); font-weight: 700; flex-shrink: 0; } /* --- 20-6. チェック付きリスト（事業内容ページの箇条書きで使用） ------ */ .plan__list li { position: relative; padding-left: 26px; font-size: 14px; margin-bottom: 10px; } .plan__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 14px; height: 8px; border-left: 2.5px solid var(--c-red); border-bottom: 2.5px solid var(--c-red); transform: rotate(-45deg); } /* --- 20-7. カテゴリフィルタ ---------------------------------- */ .chips { display: flex; flex-wrap: wrap; gap: 10px; } .chip { display: inline-block; padding: 8px 18px; border-radius: var(--r-pill); font-size: 13px; font-weight: 700; background: var(--c-white); border: 1px solid var(--c-line); color: var(--c-text-sub); transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } /* ★a: に限定すること。ページ送りの現在ページと「…」は で出るので、 .chip:hover のままだと押せない要素が押せるように見える。 */ a.chip:hover { border-color: var(--c-red); color: var(--c-red); } /* --- ページ送り（paginate_links の出力に .chip を付けている：functions.php） --- */ .chips--pager { justify-content: center; margin-top: 40px; } /* ★44px。スマホで押しにくいと「動いていない」と言われる。 .chip の padding だけでは29px程度しかない。 */ .chips--pager .chip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; } /* 「…」は押せないので、枠と背景を消して文字だけにする */ .chips--pager .chip.dots { background: none; border-color: transparent; min-width: 0; padding-inline: 6px; } .chip.is-active { background: var(--c-red); border-color: var(--c-red); color: #fff; } /* --- 20-8. フォーム ------------------------------------------ */ /* ★★ラベルと入力欄の間隔は、項目と項目の間隔より「はっきり」狭くすること。 人は近いものを一組だと受け取るので、余白の大小がそのまま意味になる。 ここが逆転すると、ラベルが上の入力欄の説明に見えて入力欄を間違える （実際に会社名の欄に名前を入れてしまう報告があった）。 ★目安は4倍以上。2倍程度では、入力欄が縦に長いと見分けがつかない。 ラベル→入力 6px ／ 項目→項目 26px。 ★WordPressではCF7が

と
を挟んでこの gap を無効にする。 inc/forms.php で自動整形を切っている。あれを外すと元に戻る。 */ .form { display: grid; gap: 26px; } .field { display: grid; gap: 6px; } .field__label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; } /* ★12px。必須／任意は読み落とすと入力ミスにつながるので小さくしない */ .field__req { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: var(--c-red); color: #fff; letter-spacing: .04em; } .field__req--any { background: var(--c-line); color: var(--c-text-sub); } .field__hint { font-size: 12px; color: var(--c-text-mute); } .input, .textarea, .select { width: 100%; padding: 14px 16px; font: inherit; font-size: 15px; color: var(--c-text); background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-sm); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--c-red); box-shadow: 0 0 0 3px rgba(193, 3, 2, .12); } .textarea { min-height: 170px; resize: vertical; } .select { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23545454' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 15px; } .check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; } .check input { margin-top: .35em; width: 18px; height: 18px; accent-color: var(--c-red); flex-shrink: 0; } .check a { color: var(--c-red); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; } .form__submit { justify-self: center; margin-top: 8px; } /* --- 20-9. 表（募集要項など） -------------------------------- */ .table { font-size: 15px; } .table th, .table td { padding: 16px 18px; border: 1px solid var(--c-line); text-align: left; vertical-align: top; } .table th { background: var(--c-pink-pale); color: var(--c-red-dark); font-weight: 700; white-space: nowrap; } .table--scroll { overflow-x: auto; } /* --- 20-10. 対比ブロック（運用前／運用後） -------------------- */ .compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; } .compare__col { background: var(--c-white); border-radius: var(--r-md); padding: 26px; box-shadow: var(--shadow-card); } .compare__col--after { border: 2px solid var(--c-red); } .compare__label { display: inline-block; padding: 5px 16px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; margin-bottom: 14px; background: var(--c-line); color: var(--c-text-sub); } .compare__col--after .compare__label { background: var(--c-red); color: #fff; } .compare__arrow { color: var(--c-red); font-size: 28px; font-weight: 700; } /* --- 20-11. アンカーリンク列 --------------------------------- */ .anchors { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .anchors a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: var(--r-pill); font-size: 14px; font-weight: 700; background: var(--c-white); box-shadow: var(--shadow-card); } .anchors a::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--c-red); border-bottom: 2px solid var(--c-red); transform: rotate(45deg) translateY(-2px); } .anchors a:hover { color: var(--c-red); } /* --- レスポンシブ調整 ---------------------------------------- */ @media (max-width: 900px) { .compare { grid-template-columns: 1fr; } .compare__arrow { transform: rotate(90deg); justify-self: center; } } @media (max-width: 767px) { .step { grid-template-columns: 1fr; gap: 10px; padding: 22px; } .timeline { padding-left: 24px; } .faq__item > summary { font-size: 15px; padding-right: 36px; } .prose { max-width: none; } } /* ------------------------------------------------------------ 21. イラスト（unDraw） ------------------------------------------------------------ 出典：unDraw（https://undraw.co）。商用利用可・帰属表示不要のライセンス。 アクセント色 #6c63ff を友竹の #C10302 に置換済み。 差し替える場合も同じ置換を行ってからブランドを揃えてください。 */ .illust { display: grid; place-items: center; padding: 28px; background: linear-gradient(160deg, #FFFDF7 0%, var(--bg-cream-2) 100%); border-radius: var(--r-md); } .illust img { width: 100%; height: 100%; object-fit: contain; /* グリッドアイテムの min-height/min-width は既定が auto のため、 中身（SVG）の固有サイズより小さくならず枠からはみ出す。0 にして必ず収める。 */ min-width: 0; min-height: 0; } /* --- アイキャッチ（投稿のサムネイル）は枠いっぱいに出す --------------------- ★指示：16:9のアイキャッチを入れたとき、余白を作らず枠いっぱいに表示する。 多少トリミングされても、余白が出るより枠を埋めることを優先する。 事例紹介だけでなく、資料ダウンロード・ブログ・ニュースなど アイキャッチを使うすべての箇所に共通で適用する。 ★★余白の原因は3つ重なっていた。1つ直しても消えない。 ① .illust の padding（28px、.card__thumb 内では24px） ② .illust のクリーム色の背景グラデーション ③ .illust img の object-fit: contain .illust はもともとSVGイラスト用の枠で、余白と地色があるのが正しい。 そこに写真を入れていたのが問題だった。 ★★テンプレート8枚を1枚ずつ直すのではなく、CSSで見分けている。 WordPressの the_post_thumbnail() / get_the_post_thumbnail() は 必ず class に wp-post-image を付ける。 front-page.php などが直書きしているSVGには付かない。 この違いで「写真か、イラストか」を判定できる。 → 今後アイキャッチを出す箇所が増えても、この規則が自動で効く。 ★★ACFの画像には wp-post-image が付かない。 資料ダウンロードの表紙（dl_cover_img）がこれに当たる。 その場合はテンプレート側で class="illust__fill" を付ける。 付け忘れると、その箇所だけ余白が残る。 ★:has() を使っているのは、親（.illust）の padding を消す必要があるため。 CSSでは子から親を指定する方法が他にない。 未対応の古いブラウザでは img 側（object-fit:cover）だけが効き、 余白は残るが崩れはしない。 */ .illust:has(> img.wp-post-image), .illust:has(> img.illust__fill) { padding: 0; background: none; overflow: hidden; } .illust > img.wp-post-image, .illust > img.illust__fill { width: 100%; height: 100%; object-fit: cover; display: block; min-width: 0; min-height: 0; } /* カードのサムネイル枠に入れる場合 */ .card__thumb .illust { border-radius: var(--r-md) var(--r-md) 0 0; height: 100%; padding: 24px; } a.card:hover .card__thumb .illust img { transform: scale(1.04); } .card__thumb .illust img { transition: transform .4s var(--ease); } /* 縦横比のバリエーション */ /* ★16:9。アイキャッチの標準に合わせている（.card__thumb と同じ理由） */ .illust--thumb { aspect-ratio: 16 / 9; } .illust--wide { aspect-ratio: 21 / 9; } .illust--square{ aspect-ratio: 1 / 1; } /* サービス詳細ページのページヘッドに置く回り込みイラスト */ .page-head--illust .page-head__inner { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: center; } .page-head--illust .illust { background: none; padding: 0; } @media (max-width: 900px) { .page-head--illust .page-head__inner { grid-template-columns: 1fr; } .page-head--illust .illust { max-width: 320px; } } /* ------------------------------------------------------------ 22. Service Row（TOPの事業内容：横並び3行） ------------------------------------------------------------ 3カラムのカードだと1枚あたりの幅が足りず、本文が詰まって テンプレート感が出ていたため、1事業＝1行の横組みに変更。 下層の /service/ とは違い、箇条書きとボタンを持たない軽い構成にしている。 */ .service-rows { display: block; } .service-row { display: grid; grid-template-columns: 340px 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; padding-block: clamp(28px, 3.4vw, 44px); border-bottom: 1px solid var(--c-line); transition: background-color .25s var(--ease); } .service-row:first-child { padding-top: 0; } .service-row:last-child { border-bottom: 0; padding-bottom: 0; } /* 行全体をリンクにする（クリック領域を広く取る） */ a.service-row { color: inherit; } a.service-row:hover { background: rgba(255, 245, 245, .5); } a.service-row:hover .service-row__title { color: var(--c-red); } a.service-row:hover .link-arrow::after { transform: translateX(3px); } .service-row__fig { display: grid; place-items: center; padding: 22px; border-radius: var(--r-md); background: linear-gradient(160deg, #FFFDF7 0%, var(--bg-cream-2) 100%); } .service-row__fig img { width: 100%; height: 150px; object-fit: contain; min-width: 0; min-height: 0; /* グリッドアイテムのはみ出し防止 */ transition: transform .4s var(--ease); } a.service-row:hover .service-row__fig img { transform: scale(1.04); } .service-row__num { font-family: var(--font-en); font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--c-red); } .service-row__title { font-size: clamp(21px, 2.4vw, 26px); font-weight: 700; line-height: 1.5; margin: 6px 0 12px; transition: color .2s var(--ease); } .service-row__text { font-size: clamp(15px, 1.6vw, 16px); color: var(--c-text-sub); line-height: 1.9; } .service-row__foot { margin-top: 18px; } @media (max-width: 767px) { .service-row { grid-template-columns: 1fr; gap: 20px; } .service-row__fig { max-width: 320px; } .service-row__fig img { height: 130px; } } /* ------------------------------------------------------------ 23. Infographic（数字で見る） ------------------------------------------------------------ 棒グラフ＋サイドの数値カード。yaaha の Infographic を参照した構成。 ★アニメーション設計 棒の高さは各カラムの CSS変数 --h に持たせ、既定は height:0。 .reveal に .is-visible が付いた時点で height:var(--h) に遷移する。 つまり JS 側の追加実装は不要で、既存の IntersectionObserver に乗る。 数値のカウントアップも既存の data-count がそのまま使える。 ------------------------------------------------------------ */ /* 全体を白地＋赤の囲み線でひとまとまりに見せる */ /* .framed は「数字で見る」と同じ囲み。定義を分けると必ずズレるので選択子を共有する */ .infographic-wrap, .framed { background: var(--c-white); border: 2px solid var(--c-red); border-radius: var(--r-lg); padding: clamp(20px, 2.8vw, 40px); box-shadow: 0 6px 26px rgba(193, 3, 2, .07); } .infographic { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 20px; align-items: stretch; } .info-card { /* 中は白、枠線は地のクリーム。外枠（赤）と入れ子でうるさくならないようにする */ background: var(--c-white); border: 2px solid var(--bg-cream-2); border-radius: var(--r-md); box-shadow: none; padding: clamp(22px, 2.8vw, 36px); display: flex; flex-direction: column; } .info-card__title { font-size: clamp(16px, 1.9vw, 20px); font-weight: 700; color: var(--c-text); margin-bottom: 4px; } .info-card__note { font-size: 12px; color: var(--c-text-mute); } /* ★グラフ直下の注記。他のカードの注記は style="margin-top:12px" を直書きしているが、 ここはグラフの目盛りとの間に少し余白が要るので、クラス側で持たせている。 文字は小さくするが11pxより下げないこと（読めなくなる）。 */ .info-card__note--chart { margin-top: clamp(10px, 1.4vw, 16px); line-height: 1.7; } /* グラフの見出し（社内資料と同じく数字を大きく見せる） */ .chart-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px; line-height: 1.25; } .chart-head__lead { font-size: clamp(20px, 2.6vw, 30px); font-weight: 700; color: var(--c-text); } .chart-head__num { font-family: var(--font-en); font-size: clamp(42px, 6vw, 74px); font-weight: 700; line-height: .95; color: var(--c-red); letter-spacing: -.01em; margin-inline: 4px; } .chart-head__unit { font-size: clamp(20px, 2.6vw, 30px); font-weight: 700; color: var(--c-red); } .chart-head__sub { margin-top: 10px; font-size: clamp(14px, 1.6vw, 17px); font-weight: 700; color: var(--c-text-sub); } .chart-head__sub em { font-style: normal; background: linear-gradient(transparent 58%, var(--c-yellow) 58%); padding-inline: 2px; } /* --- 棒グラフ本体 --- ★高さの持たせ方 棒は position:absolute で下端に固定し、height を 0 → var(--h) に遷移させる。 （flex アイテムに % 高さを持たせると flex-shrink で潰れるため、絶対配置にしている） ラベルは棒の上に絶対配置し、bottom を var(--h) に遷移させて棒と一緒にせり上がる。 .reveal に .is-visible が付いた時点で動くので、JS の追加実装は不要。 */ .chart { margin-top: auto; padding-top: 28px; } .chart__plot { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; /* ★行の高さを明示するのが必須。 暗黙の行（grid-auto-rows: auto）のままだとカラムの高さが「不定」と扱われ、 中の棒に指定した % 高さが 0 に解決されてしまう。 */ grid-auto-rows: 100%; gap: clamp(10px, 1.8vw, 28px); height: clamp(260px, 27vw, 360px); border-bottom: 2px solid var(--c-line); } .chart__col { position: relative; z-index: 1; height: 100%; } /* 棒 */ .chart__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #D6221B 0%, var(--c-red) 100%); transition: height .95s var(--ease); } .reveal.is-visible .chart__bar { height: var(--h, 0%); } /* 棒の上に載るラベル（期＋金額）。棒と一緒にせり上がる */ .chart__label { position: absolute; left: -6px; right: -6px; bottom: 0; margin-bottom: 10px; text-align: center; white-space: nowrap; opacity: 0; transition: bottom .95s var(--ease), opacity .5s var(--ease) .35s; } .reveal.is-visible .chart__label { bottom: var(--h, 0%); opacity: 1; } .chart__period { display: block; font-size: clamp(12px, 1.3vw, 15px); font-weight: 700; color: var(--c-red); letter-spacing: .02em; } .chart__val { display: block; margin-top: 1px; font-size: clamp(13px, 1.5vw, 17px); font-weight: 700; color: var(--c-text); } /* ★em だけだと、親が下限13pxになるスマホ幅で 10.7px まで落ちる。 max() で12pxの床を入れる。 */ .chart__val small { font-size: max(12px, .82em); margin-left: 1px; } /* 最新期は少し強調する */ .chart__col--current .chart__bar { background: linear-gradient(180deg, #C10302 0%, #8E0C18 100%); } .chart__col--current .chart__val { font-size: clamp(15px, 1.8vw, 20px); } /* 目標（点線の枠だけ） */ .chart__col--target .chart__bar { background: var(--bg-cream-2); border: 2px dashed var(--c-red); border-radius: 5px; } /* --- グラフ下に並べる数値カード（3枚） --- */ .infographic-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; } .info-card--compact { padding: clamp(20px, 2.4vw, 30px); } .info-card--compact .stat-figure__num { font-size: clamp(36px, 4.2vw, 52px); } .info-card--compact .stat-figure__icon { width: 34px; height: 34px; } @media (max-width: 767px) { .infographic-row { grid-template-columns: 1fr; } } /* --- 右側の数値カード --- */ .infographic__side { display: grid; grid-template-rows: 1fr 1fr; gap: 24px; } .info-card--stat { justify-content: center; align-items: center; text-align: center; } .info-card--stat .info-card__title { margin-bottom: 18px; } .stat-figure { display: flex; align-items: center; justify-content: center; gap: 14px; } .stat-figure__icon { width: 44px; height: 44px; color: var(--c-red); flex-shrink: 0; } .stat-figure__num { font-family: var(--font-en); font-size: clamp(44px, 5.4vw, 66px); font-weight: 700; line-height: 1; color: var(--c-text); } .stat-figure__unit { font-size: 17px; font-weight: 700; color: var(--c-text); align-self: flex-end; margin-bottom: 6px; } .stat-people { display: flex; justify-content: center; gap: 6px; margin-top: 16px; } .stat-people svg { width: 20px; height: 30px; color: var(--c-red); } .stat-people svg.is-muted { color: var(--c-line); } @media (max-width: 900px) { .infographic { grid-template-columns: 1fr; } .infographic__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .infographic__side { grid-template-columns: 1fr; } .chart__callout { left: 4%; top: 6%; } .chart__label { font-size: 92%; } } /* モーション低減時は最終状態で即表示（棒が消えたままにならないように） */ @media (prefers-reduced-motion: reduce) { .chart__bar { height: var(--h, 0%); transition: none; } .chart__label { bottom: var(--h, 0%); opacity: 1; transition: none; } .chart__callout { opacity: 1; transform: none; transition: none; } } /* ------------------------------------------------------------ 24. 追従サイドCTA ------------------------------------------------------------ PC：画面右端に縦書きで固定。スマホ：下部の横並びバーに切り替える。 CTAバンドが画面に入っている間は重複するので自動で引っ込む（main.js）。 */ .side-cta { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 80; display: flex; flex-direction: column; gap: 8px; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; } .side-cta__item { display: inline-flex; align-items: center; justify-content: center; gap: 10px; writing-mode: vertical-rl; padding: 24px 15px; border-radius: var(--r-md) 0 0 var(--r-md); font-size: 14px; font-weight: 700; letter-spacing: .14em; box-shadow: -3px 3px 16px rgba(80, 60, 40, .16); transition: transform .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease); } .side-cta__item:hover { transform: translateX(-4px); } .side-cta__item--primary { background: var(--c-red); color: #fff; } .side-cta__item--primary:hover { background: var(--c-red-deep); color: #fff; } .side-cta__item--ghost { background: var(--c-white); color: var(--c-red); border: 2px solid var(--c-red); border-right: 0; } .side-cta__item--ghost:hover { background: var(--c-red); color: #fff; } /* 縦書きの中でアイコンだけ正立させる */ .side-cta__icon { writing-mode: horizontal-tb; width: 17px; height: 17px; flex-shrink: 0; } /* CTAバンド表示中は引っ込める（重複を避ける） */ .side-cta.is-hidden { opacity: 0; visibility: hidden; transform: translateY(-50%) translateX(100%); } /* モバイルナビを開いている間は隠す */ body.is-navopen .side-cta { display: none; } @media (max-width: 900px) { .side-cta { top: auto; bottom: 0; right: 0; left: 0; transform: none; flex-direction: row; gap: 0; box-shadow: 0 -2px 14px rgba(80, 60, 40, .14); } .side-cta__item { writing-mode: horizontal-tb; flex: 1; padding: 15px 10px; border-radius: 0; letter-spacing: .06em; box-shadow: none; } .side-cta__item:hover { transform: none; } .side-cta__item--ghost { border: 0; border-top: 2px solid var(--c-red); } .side-cta.is-hidden { opacity: 0; visibility: hidden; transform: translateY(100%); } /* 下部バーがフッターの内容を隠さないよう余白を確保する */ body { padding-bottom: 58px; } } @media (prefers-reduced-motion: reduce) { .side-cta, .side-cta__item { transition: none; } } /* ------------------------------------------------------------ 25. 背景の装飾レイヤー（奥行き） ------------------------------------------------------------ 素材：SVG Backgrounds 系のジェネレータ出力をブランド色に置換したもの （assets/img/bg/）。既存のグラデーション（17〜19章）の上に重ねる。 ★HTMLは触らず ::after だけで全ページに効かせている。 .section::before は既にグロー層で使っているため ::after を使う。 ★重ねる順番（奥→手前） 1. セクションの地色グラデーション（background） 2. ::before … 放射グロー 3. ::after … ここで足す図形／テクスチャ 4. .container … 本文（z-index: 1） ------------------------------------------------------------ */ /* ヒーローとページヘッド：やわらかいグラデーション円で奥行きを作る */ /* ★素材はそのまま置くと輪郭が立って「前面に貼った模様」に見える。 親でクリップしたうえで大きくぼかし、輪郭のない“面”にして奥行きにする。 */ .hero::after, .page-head::after { content: ""; position: absolute; inset: -90px; z-index: 0; pointer-events: none; background: url("../img/bg/moon.svg") no-repeat center / cover; filter: blur(42px); opacity: .34; } .page-head::after { opacity: .26; } /* 手描きブロブ：背景の Moon と二重にならない程度に、輪郭のある要素として残す */ .hero__blob--1 { opacity: .34; } .hero__blob--2 { opacity: .20; } .hero__blob--3 { opacity: .26; } .page-head__blob { opacity: .30; } /* クリーム地のセクション：ゆっくり漂う図形 */ .section--cream::after { content: ""; position: absolute; inset: -90px; z-index: 0; pointer-events: none; background: url("../img/bg/shapes.svg") no-repeat center / cover; filter: blur(40px); opacity: .38; } /* 白地のセクション：細かい点のテクスチャ（面が単調にならない程度に） */ .section--white::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("../img/bg/sprinkle.svg") repeat center / 720px auto; opacity: .28; border-radius: inherit; } /* 装飾が本文より前に出ないようにする（.container は z-index:1） */ .hero__inner, .page-head__inner { position: relative; z-index: 1; } /* ★本文の背後にテクスチャを出さない 地色のパネルを敷くとセクションのグラデーションと色がずれて継ぎ目が出るため、 マスクで「コンテンツ幅の内側では装飾を描かない」方式にしている。 コンテナ幅（--w-container）を基準に左右の余白だけ残す。 ビューポートがコンテナより狭いときは calc が反転してマスク全体が透明になり、 結果として装飾は出ない（スマホでは意図的にオフ）。 */ .section--white::after, .section--cream::after { --edge: calc(50% - var(--w-container) / 2); -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--edge) - 30px), transparent calc(var(--edge) + 70px), transparent calc(100% - var(--edge) - 70px), #000 calc(100% - var(--edge) + 30px), #000 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--edge) - 30px), transparent calc(var(--edge) + 70px), transparent calc(100% - var(--edge) - 70px), #000 calc(100% - var(--edge) + 30px), #000 100%); } @media (max-width: 767px) { /* スマホは面積が狭く、装飾が本文と競合しやすいので弱める */ .hero::after { opacity: .22; } .page-head::after { opacity: .18; } .section--cream::after { opacity: .24; } .section--white::after { opacity: .18; } } /* ------------------------------------------------------------ 26. 事業内容ページ ------------------------------------------------------------ */ /* --- 事業ブロック（左バナー58% ／ 右テキスト）--- ★2026-09、「画像左・文字右を交互に置くだけ」の作りから作り替えた。 元は 1fr/1fr でイラストを入れる想定だったが、 16:9のバナーに差し替えたことで作りが合わなくなっていた。 ★変えた点 ・バナーを58%まで拡大（508px → 622px） ・箇条書きをやめてリード文に。1件の高さ 711px → 407px ・「詳細を見る」の赤ボタンをやめ、右端に寄せた矢印リンクに ・薄い大きな番号を視線の起点として敷いた ★左右交互（--rev）はやめた。全件バナー左でそろえている。 */ .service-block { display: grid; grid-template-columns: minmax(0, 58%) minmax(0, 1fr); gap: clamp(24px, 3.2vw, 48px); align-items: center; } @media (max-width: 900px) { .service-block { grid-template-columns: 1fr; } } /* --- バナー（事業内容ページ）--------------------------------------------- ★★角を丸めてはいけない。 バナーの絵柄の端に赤い枠と右下の赤い三角が入っているので、 border-radius で角を落とすとその赤が切れる。 「画像を全部見せる」ことを優先する。ここに角丸を足さないこと。 ★object-fit は contain。素材は正確に16:9なので余白は出ない。 cover だと枠の計算が小数でずれたとき、端の赤枠を薄く削る可能性がある。 ★このページは hover で拡大しないので overflow:hidden は不要。 */ .service-block__fig { display: block; border-radius: 0; } .service-block__fig img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: contain; display: block; min-width: 0; } /* --- テキスト側 --- */ .service-block__body { min-width: 0; } /* 薄く大きな番号。視線の起点をつくる装飾なので、読ませる必要はない */ .service-block__num { font-family: var(--font-en); font-size: clamp(58px, 7vw, 104px); font-weight: 800; line-height: .85; letter-spacing: -.04em; color: var(--c-red); opacity: .13; display: block; margin-bottom: -10px; /* 行送りの余りを詰めて見出しに寄せる */ } .service-block__ttl { font-size: clamp(23px, 2.5vw, 34px); font-weight: 700; line-height: 1.3; margin: 0; } /* ★横棒。左に縦帯を立てる形にはしないこと */ .service-block__rule { width: 44px; height: 3px; border-radius: 2px; background: var(--c-red); margin: 16px 0 18px; } /* ★バナーの中の文と重複しない内容を書くこと。 「何が含まれるか」を文章にしている。 バナーと同じ説明文を戻すと、同じことが2回並ぶ。 */ .service-block__lead { font-size: clamp(14.5px, 1.5vw, 15.5px); line-height: 1.95; color: var(--c-text-sub); margin: 0 0 26px; text-wrap: pretty; } /* --- 「詳しく見る」：右端に寄せた矢印リンク -------------------------------- ★赤いボタンをやめた。 ★justify-content:flex-end で右端に寄せる。実測でずれ0px。 ★トップの .link-arrow と同じ作り（赤い丸＋白い矢印）だが、丸を34pxに大きくした。 1件に1つしかない導線なので、22pxのままでは弱かった。 */ .service-block__more { display: flex; justify-content: flex-end; margin: 0; } .service-block__more a { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--c-red); padding: 6px 0; } .service-block__more .ar { width: 34px; height: 34px; border-radius: 50%; background: var(--c-red); flex: 0 0 auto; display: grid; place-items: center; transition: transform .25s var(--ease); } .service-block__more .ar svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; } .service-block__more a:hover .ar { transform: translateX(5px); } @media (max-width: 900px) { .service-block__more { justify-content: flex-start; } } /* --- 16:9バナーを入れる図版枠（トップページの一覧）------------------------- ★既定の枠はイラスト用で、クリーム色の地に余白22pxを取って中央に置く作り。 バナーは自前で背景も余白も持っているので、そのまま入れると 「額縁の中に額縁」になり、絵柄も小さくなる。枠を外して端まで使わせる。 ★★ここも角を丸めない。理由は事業内容ページ側と同じ（赤い枠が切れる）。 ★ただし overflow:hidden は残す。トップは hover でバナーを1.04倍に拡大するので、 これを外すと隣の要素にはみ出す。 ★詳細度が既定（.service-row__fig img）と同じ (0,1,1) なので、 必ずこの位置＝既定より後ろに書くこと。前に置くと効かない。 ★height:150px を打ち消すため height:auto を明示。 aspect-ratio があるので高さは幅から決まる。 */ .service-row__fig--banner { padding: 0; background: none; overflow: hidden; border-radius: 0; } .service-row__fig--banner img { width: 100%; height: auto; max-height: none; aspect-ratio: 16 / 9; object-fit: contain; display: block; } /* ★バナーは文字が多い（実績の数値や注記まで入っている）。 イラスト用の340pxでは340x191pxにしかならず、細部が読めなかった。 バナーを入れた行だけ図版側を広げる。 ★:has() を使っているのは、修飾クラスが行ではなく図版側に付いているため。 未対応のブラウザでは既定の340pxのまま＝やや小さいが崩れない。 ★スマホでは既定の max-width:320px を外して幅いっぱいに使わせる。 バナーは細部が読めないと意味がないので、ここは広げる側に振る。 */ .service-row:has(.service-row__fig--banner) { grid-template-columns: minmax(0, 460px) 1fr; } @media (max-width: 767px) { .service-row:has(.service-row__fig--banner) { grid-template-columns: 1fr; } .service-row__fig--banner { max-width: none; } } /* ------------------------------------------------------------ 27. 会社概要ページ ------------------------------------------------------------ */ /* --- 共通：小見出しラベル（○ ラベル） --- */ .lab { display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:700; color:var(--c-red); letter-spacing:.04em; } .lab::before { content:""; width:9px; height:9px; border-radius:50%; border:2px solid var(--c-red); } /* --- ビジョン（大きな宣言） --- */ .vision { position:relative; overflow:hidden; } .vision__mark { position:absolute; top:50%; right:-70px; translate:0 -50%; width:min(400px,36vw); opacity:.05; pointer-events:none; } .vision__inner { position:relative; z-index:1; } .vision__ttl { font-size:clamp(27px,4.4vw,52px); font-weight:700; line-height:1.5; margin-top:22px; letter-spacing:.01em; } .vision__lead { max-width:760px; font-size:15px; line-height:2.15; color:var(--c-text-sub); margin-top:26px; } /* --- 姿勢（横並びの帯を3本） --- */ .pillars { display:grid; gap:14px; margin-top:clamp(30px,4vw,44px); } .pillar { display:grid; grid-template-columns:96px 300px 1fr; align-items:center; gap:clamp(16px,3vw,34px); background:var(--bg-cream-2); border-radius:var(--r-lg); padding:clamp(20px,2.6vw,28px) clamp(22px,3vw,34px); transition:background .25s var(--ease), transform .25s var(--ease); } .pillar:hover { background:#FFF3DE; transform:translateX(4px); } /* ★幅を固定値で書くと、列が76pxに縮んだときに20pxはみ出して 見出しに重なる（2026-09-05に発覚）。列に追従させること。 */ .pillar__fig { width:100%; max-width:96px; } .pillar__fig img { width:100%; height:auto; display:block; } .pillar__name { font-size:clamp(19px,2.2vw,24px); font-weight:700; line-height:1.45; } .pillar__txt { font-size:14px; line-height:2; color:var(--c-text-sub); } /* --- 行動指針（2カラムの番号付き帯） --- */ .creeds { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:clamp(30px,4vw,44px); } .creed { display:grid; grid-template-columns:auto 1px 1fr; align-items:center; gap:20px; background:var(--bg-cream-2); border-radius:var(--r-lg); padding:22px 26px; } .creed__num { font-family:var(--font-en); font-size:26px; font-weight:700; line-height:1; color:var(--c-red); opacity:.55; } .creed__sep { align-self:stretch; background:rgba(193,3,2,.18); } .creed__name { font-size:18px; font-weight:700; line-height:1.5; } .creed__sub { font-size:12.5px; color:var(--c-text-mute); margin-top:5px; line-height:1.7; } /* --- 代表メッセージ --- */ .msg { display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(28px,5vw,64px); align-items:start; } .msg__photo .ph { border-radius:var(--r-lg); } .msg__ttl { font-size:clamp(21px,2.6vw,30px); font-weight:700; line-height:1.6; margin-bottom:24px; } .msg__body p + p { margin-top:18px; } .msg__body p { font-size:14.5px; line-height:2.15; color:var(--c-text-sub); } .msg__sign { margin-top:30px; text-align:right; font-size:13px; color:var(--c-text-sub); } .msg__sign strong { display:inline-block; margin-left:10px; font-size:20px; color:var(--c-text); } /* --- メンバー --- */ .members { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2.4vw,26px); } .member-card .ph { border-radius:var(--r-md); } .member-card__role { font-size:12px; color:var(--c-text-mute); margin-top:14px; } .member-card__name { font-size:18px; font-weight:700; margin-top:3px; } .member-card__en { font-family:var(--font-en); font-size:12px; color:var(--c-text-mute); letter-spacing:.08em; margin-top:2px; } /* --- 会社情報（左に表／右に写真） --- */ /* ★1fr ではなく minmax(0,1fr)。1fr は自動最小値が min-content なので、 中の の実寸より列を狭くできない。320px幅で列が282pxになり、 入れ物（272px）から10pxはみ出していた（2026-09-05に発覚）。 */ .company-2col { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr); gap:clamp(28px,5vw,56px); align-items:start; } .company-2col .deflist { border-top:1px solid var(--c-line); } .company-2col .deflist__row { grid-template-columns:130px 1fr; gap:20px; } .company-side { display:grid; gap:14px; } .company-side .ph { border-radius:var(--r-md); } .company-side__cap { font-size:12px; color:var(--c-text-mute); line-height:1.8; } /* --- 沿革 --- */ .history { border-top:1px solid var(--c-line); } .history__item { display:grid; grid-template-columns:150px 1fr; gap:clamp(16px,3vw,36px); padding:clamp(22px,2.6vw,30px) 8px; border-bottom:1px solid var(--c-line); } .history__year { font-family:var(--font-en); font-size:clamp(22px,2.6vw,30px); font-weight:700; line-height:1.1; color:var(--c-red); } .history__month { display:block; font-size:13px; color:var(--c-text-mute); margin-top:4px; letter-spacing:.06em; } .history__text { font-size:15px; line-height:2; padding-top:4px; } /* --- 下層ページ導線 --- */ .subpages { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } .subpage { display:grid; grid-template-columns:1fr auto; align-items:center; gap:20px; padding:clamp(26px,3vw,34px) clamp(24px,3vw,32px); background:linear-gradient(180deg,#FFF 0%,#FFFBF3 100%); border-radius:var(--r-lg); box-shadow:var(--shadow-card); transition:transform .25s var(--ease), box-shadow .25s var(--ease); } .subpage:hover { transform:translateY(-3px); box-shadow:var(--shadow-hover); } .subpage > span { display:block; } .subpage__en { display:block; font-family:var(--font-en); font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--c-red); } .subpage__ttl { display:block; font-size:clamp(19px,2.2vw,23px); font-weight:700; margin-top:6px; } .subpage__txt { display:block; font-size:13px; color:var(--c-text-sub); line-height:1.85; margin-top:8px; } .subpage__arw { width:44px; height:44px; border-radius:50%; flex-shrink:0; background:var(--c-red) no-repeat center / 15px 15px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E"); transition:transform .2s var(--ease); } .subpage:hover .subpage__arw { transform:translateX(4px); } @media (max-width:1024px){ .pillar { grid-template-columns:76px minmax(0,1fr); row-gap:10px; } .pillar__txt { grid-column:2; } .company-2col { grid-template-columns:minmax(0,1fr); } .company-side { max-width:420px; } .msg { grid-template-columns:1fr; } .msg__photo { max-width:360px; } .members { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:767px){ .creeds { grid-template-columns:1fr; } .history__item { grid-template-columns:1fr; gap:6px; } .subpages { grid-template-columns:1fr; } .vision__mark { right:-90px; width:290px; } } /* ------------------------------------------------------------ 28. マーキー（自動で流れるスライダー） ------------------------------------------------------------ 仕組み：同じ並びを2つ用意し、トラック全体を -50% までずらす。 ちょうど1組ぶん流れた時点で先頭と同じ絵になるので、継ぎ目なくループする。 ★2組目は必ず aria-hidden="true"（読み上げの重複を防ぐ） ★中身を足したら「両方の組」に同じものを足すこと。片方だけだとループがずれる ------------------------------------------------------------ */ .marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); } .marquee__track { display: flex; width: max-content; align-items: center; animation: marquee-scroll var(--speed, 46s) linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__group { display: flex; align-items: center; gap: var(--gap, 56px); padding-right: var(--gap, 56px); } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* --- 企業ロゴの帯（TOPのFV直下） --- 参考：https://otolio.jp/ のロゴスライダー ★2026-09に作り替えた。変えた点は3つ。 ① 上の「累計750社の…」の文を削除（指示による） ② 角丸をやめた ③ ロゴ間のすき間を詰めた（最大64px → 最大40px） ★★ロゴを150x58pxの箱に押し込むのをやめた。 幅を固定すると、横長のロゴ（「医療法人社団ヤマナ会」など）と 正方形に近いロゴ（マークだけのもの）が同じ幅に揃えられ、 横長のほうだけ極端に小さく見える。 高さだけ揃えて幅は中身に任せるのが、ロゴを並べるときの定石。 ★グレースケールもやめた。参考サイトと同じくそのままの色で出す。 ロゴは色が識別の一部なので、灰色にすると「どこの会社か」が伝わりにくい。 ★帯は白でベタ塗り。FVのクリーム色と分けて、境目をはっきりさせる。 */ .logo-strip { padding: clamp(22px, 2.6vw, 34px) 0; background: var(--c-white); } /* ★指示で詰めた（最大40px → 26px）。 土台の余白を実寸に切ったので、見た目のすき間は この値 ＋ 左右の余白5px×2 ＝ 約36px になる。 */ .logo-strip .marquee__group { --gap: clamp(14px, 1.8vw, 26px); } /* ★ロゴは tools/make_logos.py で「高さ80px共通・幅は実寸＋余白8px」にそろえてある。 高さだけ共通なので、CSSは高さを指定して幅は auto にするだけ。 ★★以前は全社300x80の同寸にしていたが、それが「間隔が広い」原因だった。 幅の狭いロゴ（いきなりステーキ165px）が300pxの土台の中央に置かれ、 左右に約42px（表示換算）の透明な余白を抱えていた。 CSSのすき間をいくら詰めても、その余白は詰まらない。 しかも余白の量がロゴごとに違うので、すき間が不均等に見えていた。 ★★ロゴを足すときは assets/img/logos/_src/ に置いて python3 tools/make_logos.py を実行する。直接 assets/img/logos/ に置くと寸法がそろわない。 width/height は _sizes.txt に書き出されるので、そこから写す。 */ .logo-strip__item { /* ★指示で1.25倍にした（40px → 50px） */ height: clamp(38px, 3.6vw, 50px); width: auto; flex-shrink: 0; display: flex; align-items: center; } .logo-strip__item img { height: 100%; width: auto; max-width: none; display: block; } /* ロゴが未設定のときの仮の箱 */ .logo-strip__item .ph { height: 100%; width: 150px; font-size: 11px; border-radius: 0; } /* ★超ワイドな画面（2000px以上）ではロゴを一段大きくする。 広い画面で小さく寂しく見えるため。 */ @media (min-width: 2000px) { .logo-strip__item { height: 63px; } .logo-strip .marquee__group { --gap: 34px; } } /* --- 事務所写真の帯 --- */ .photo-strip { padding: clamp(56px, 7vw, 88px) 0; } .photo-strip .marquee__group { --gap: clamp(14px, 1.8vw, 22px); } .photo-strip__item { width: clamp(230px, 25vw, 330px); flex-shrink: 0; } .photo-strip__item .ph { aspect-ratio: 4 / 3; border-radius: var(--r-md); font-size: 12px; } .photo-strip__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); display: block; } .photo-strip__cap { text-align: center; font-size: 12px; color: var(--c-text-mute); margin-top: clamp(18px, 2.4vw, 26px); } /* --- Googleマップの埋め込み -------------------------------------------- ★Googleが出す埋め込みコードは width="600" height="450" が直書きされている。 そのままでは画面幅に追従しないので、属性は外して枠側で比率を決める。 ★仮の枠は 21:9 だったが、地図には横長すぎて道路しか見えない。16:9にした。 ★iframeを absolute で敷くのは、aspect-ratio を持つ枠に確実に追従させるため。 ★WordPress側は 設定 → 共通画像 → Googleマップの埋め込みコード に貼る。 テンプレートは tt_the_map() が iframe だけを許可して出力する。 */ .map-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--bg-cream-2); } .map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* ★★指で押す端末では、文字リンクのタップ領域を広げる。 フッターのナビ・パンくず・注記のリンクは高さ18〜20pxしかなく、 指では狙いにくい（推奨は44px前後）。実測で1ページに15〜17件あった。 ★hover: none and pointer: coarse で「指の端末」に限定している。 幅だけで判定すると、タッチ対応のノートPCが外れる。 逆にマウスの端末で padding を足すと、フッターの行間が崩れる。 ★padding で稼ぐ。line-height を上げると文字の間隔まで変わる。 ★margin を負にしないこと。隣のリンクと領域が重なって誤タップになる。 */ @media (hover: none) and (pointer: coarse) { .footer__navlist a, .footer__legal a, .breadcrumb a { display: inline-block; padding-block: 11px; /* 18px + 11px×2 ＝ 40px */ } /* padding のぶん行が詰まって見えるので、リストの間隔を戻す */ .footer__navlist li + li { margin-top: 0; } .breadcrumb { padding-top: 7px; } } /* 動きを抑える設定では止め、代わりに手で横スクロールできるようにする */ @media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .marquee__track { animation: none; } } /* ------------------------------------------------------------ 29. 事業詳細ページ（/service/sns/ など） ------------------------------------------------------------ */ /* --- 課題（吹き出し型のカード） --- */ .issue { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.6vw,32px); align-items:start; } .issue__card { position:relative; background:var(--c-white); border:2px solid var(--c-red); border-radius:22px; padding:40px 26px 30px; text-align:center; } /* 吹き出しの尻尾：正方形を45度回して、枠線の2辺だけ残す */ .issue__card::after { content:""; position:absolute; left:42px; bottom:-13px; width:22px; height:22px; background:var(--c-white); border-right:2px solid var(--c-red); border-bottom:2px solid var(--c-red); transform:rotate(45deg); } /* 上辺に差し込むアクセントのタブ */ .issue__tab { position:absolute; top:-2px; left:28px; display:flex; } .issue__tab span { display:block; width:9px; height:42px; border-radius:0 0 3px 3px; } .issue__tab span:nth-child(1){ background:var(--c-red); } .issue__tab span:nth-child(2){ background:var(--c-cream); } .issue__tab span:nth-child(3){ background:var(--c-teal); } .issue__ttl { font-size:clamp(18px,2.1vw,21px); font-weight:700; line-height:1.55; } .issue__fig { height:clamp(130px,14vw,165px); display:grid; place-items:center; margin:20px 0 18px; } /* ★比率が壊れる書き方は .voice__fig img のコメントを読むこと */ .issue__fig img { width:100%; height:100%; object-fit:contain; object-position:center; /* 枠は place-items:center */ min-width:0; min-height:0; } /* blog-cpa は右肩上がりのグラフなので、左右反転して「下がっていく」向きにする。 モニターの絵に文字は入っていないため、反転しても破綻しない。 */ .issue__fig--flip img { transform:scaleX(-1); } .issue__txt { font-size:13.5px; line-height:2; color:var(--c-text-sub); text-align:left; } /* ★3列のままだと375pxで1枚96pxになり、見出しが縦書きのように11行へ折り返す。 （2026-09-05に発覚）カード型のグリッドは必ず折り返し先を書くこと。 */ @media (max-width:900px){ .issue { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:600px){ .issue { grid-template-columns:1fr; } .issue__card { padding:36px 20px 26px; } .issue__fig { height:150px; margin:16px 0 14px; } } /* --- 強み（左右2カラム。--rev で図版を左に） --- */ .feature { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,5vw,68px); align-items:center; } .feature + .feature { margin-top:clamp(48px,6vw,86px); } .feature--rev .feature__fig { order:-1; } .feature__num { font-family:var(--font-en); font-size:13px; font-weight:700; letter-spacing:.14em; color:var(--c-red); } .feature__ttl { font-size:clamp(23px,3vw,34px); font-weight:700; line-height:1.5; margin-top:12px; } .feature__txt { font-size:14.5px; line-height:2.1; color:var(--c-text-sub); margin-top:18px; } /* ★「淡い地＋左に太い縦帯」の囲みは使わないこと（本人より禁止）。 強調はサイト既定の黄色マーカー（.mark）で行う。 */ .feature__point { margin-top:24px; font-size:15px; font-weight:700; line-height:2.1; } .feature__fig img { width:100%; height:auto; display:block; } .feature__fig .ph { border-radius:var(--r-lg); } /* --- 制作クリエイティブ（縦型9:16。28章のマーキーに乗せている） --- */ .works .marquee__group { --gap:clamp(12px,1.6vw,18px); } /* ★枠（.ph）と動画を「重ねる」。並べてはいけない。 静的サイトでは差し替え忘れが分かるように枠を残したまま動画を置いているので、 grid で同じマスに載せる。これをやらないと高さが2倍になり、 帯の中に枠と動画が縦に並んで出る（実際にやらかした）。 ★.phone__screen も同じ作りにしている。 */ .works__item { width: clamp(150px, 15vw, 196px); flex-shrink: 0; display: grid; } .works__item > * { grid-area: 1 / 1; } .works__item .ph { aspect-ratio:9/16; border-radius:var(--r-md); font-size:11.5px; } .works__item img { width:100%; aspect-ratio:9/16; object-fit:cover; border-radius:var(--r-md); display:block; } /* 制作実績には動画を入れることもある（管理画面で動画を選んだとき） */ .works__item video { width:100%; aspect-ratio:9/16; object-fit:cover; border-radius:var(--r-md); display:block; } @media (max-width:1024px){ .feature { grid-template-columns:1fr; } .feature--rev .feature__fig { order:0; } .feature__fig { max-width:460px; } } /* ------------------------------------------------------------ 30. 4STEP のカード並び ------------------------------------------------------------ お問い合わせの「ご相談の流れ」と、SNS運用代行の「対応範囲」で使い回している。 片方だけ変えるとページ間で見た目がズレるので注意 ------------------------------------------------------------ */ /* --- 赤い吹き出しの見出し --- */ .flow__lead { position:relative; max-width:760px; margin:0 auto clamp(34px,4.5vw,52px); background:var(--c-red); color:#fff; text-align:center; border-radius:var(--r-pill); padding:clamp(15px,2vw,20px) clamp(24px,3vw,40px); font-size:clamp(16px,2.2vw,23px); font-weight:700; letter-spacing:.02em; } .flow__lead::after { content:""; position:absolute; top:100%; left:50%; translate:-50% 0; border:14px solid transparent; border-top-color:var(--c-red); border-bottom:0; } .flow__lead b { font-family:var(--font-en); font-size:1.35em; margin:0 .1em; } /* --- 4枚のステップカード --- */ .flow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.8vw,20px); } .flow__card { background:var(--bg-cream-2); border-radius:var(--r-lg); padding:clamp(18px,2.2vw,24px) clamp(14px,1.8vw,20px) clamp(20px,2.4vw,26px); text-align:center; } .flow__step { display:inline-block; background:#241C1C; color:#fff; border-radius:var(--r-pill); padding:7px 26px; font-family:var(--font-en); font-size:13px; font-weight:700; letter-spacing:.1em; } .flow__ttl { font-size:clamp(15px,1.7vw,17px); font-weight:700; line-height:1.5; margin-top:14px; } .flow__fig { height:clamp(110px,12vw,138px); display:grid; place-items:center; margin:16px 0 14px; } /* ★比率が壊れる書き方は .voice__fig img のコメントを読むこと */ .flow__fig img { width:100%; height:100%; object-fit:contain; object-position:center; /* 枠は place-items:center */ min-width:0; min-height:0; } .flow__txt { font-size:12.5px; line-height:1.9; color:var(--c-text-sub); } /* --- 下の帯（中央にラベルを乗せた罫線） --- */ .flow__band { margin-top:clamp(40px,5vw,60px); } .flow__bar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; } .flow__bar::before, .flow__bar::after { content:""; height:2px; background:var(--c-red); } .flow__badge { background:var(--c-red); color:#fff; border-radius:var(--r-pill); padding:7px 24px; font-size:14px; font-weight:700; white-space:nowrap; } .flow__catch { text-align:center; font-size:clamp(14px,1.8vw,18px); font-weight:700; margin:clamp(20px,2.6vw,28px) 0 clamp(14px,1.8vw,18px); } .flow__catch span { color:var(--c-text-mute); margin:0 .4em; } /* ★display:inline-block に padding を付けると、行の高さ（line-height）より 背景のほうが高くなり、上下の行と重なる。 15px×1.9=28.5pxの行に、2px+28.5px+2px=32.5pxの赤い箱が入っていた。 （2026-09-05に発覚） 直し方：親の行間を広げ、箱の中の line-height を小さくして、 箱の高さが必ず行の高さより低くなるようにする。 */ .flow__msg { text-align:center; font-size:clamp(15px,2vw,21px); font-weight:700; line-height:2.4; } .flow__hl { background:var(--c-red); color:#fff; border-radius:var(--r-sm); padding:2px 9px; margin:0 4px; display:inline-block; line-height:1.6; } .flow__rule { height:2px; background:var(--c-red); margin-top:clamp(20px,2.6vw,28px); } @media (max-width:900px){ .flow { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:520px){ .flow { grid-template-columns:1fr; } .flow__fig { height:120px; } } /* ------------------------------------------------------------ 31. お客さまの声 ------------------------------------------------------------ */ .voices { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(8px,1.2vw,16px); align-items:end; } .voice { display:flex; flex-direction:column; } .voice:nth-child(even) { padding-bottom:clamp(20px,3vw,40px); } .voice__tag { text-align:center; font-size:clamp(12px,1.2vw,13px); font-weight:700; margin-bottom:10px; } .voice__tag::before { content:"＼"; color:var(--c-text-mute); margin-right:2px; } .voice__tag::after { content:"／"; color:var(--c-text-mute); margin-left:2px; } .voice__bubble { position:relative; background:var(--c-cream); border-radius:var(--r-md); padding:clamp(14px,1.8vw,18px) clamp(12px,1.4vw,16px); font-size:clamp(11.5px,1.25vw,13px); line-height:1.85; text-align:center; } .voice__bubble::after { content:""; position:absolute; top:100%; left:50%; translate:-50% 0; border:10px solid transparent; border-top-color:var(--c-cream); border-bottom:0; } .voice__fig { height:clamp(120px,14vw,180px); display:grid; place-items:end center; margin-top:18px; } .voice__fig .ph { width:100%; height:100%; border-radius:var(--r-md); font-size:10.5px; } /* ★★max-width と max-height だけで縛ってはいけない。画像がゆがむ。 WordPressの wp_get_attachment_image() は に width/height 属性を出す。 その状態で max-width:100% と max-height:100% を両方かけると、 幅と高さが別々に切り詰められて縦横比が壊れる。 実際に、1512x1512の正方形が 202x180（横に12%伸び）で表示され、 お客さまの声の丸が楕円になっていた（2026-09-04にステージングで発覚）。 ★正しい書き方：width/height を100%にして object-fit で収める。 object-position は枠の place-items と合わせる。 */ .voice__fig img { width:100%; height:100%; object-fit:contain; object-position:bottom center; /* 枠は place-items:end center */ min-width:0; min-height:0; } /* --- 満足度。円グラフは conic-gradient で描くので画像もJSも不要 --- */ .satis { margin-top:clamp(34px,4.5vw,52px); background:var(--c-white); border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:clamp(26px,3.4vw,44px); } .satis__ttl { text-align:center; font-size:clamp(17px,2.2vw,24px); font-weight:700; margin-bottom:clamp(22px,3vw,34px); } .satis__body { display:grid; grid-template-columns:auto auto; gap:clamp(26px,4vw,60px); align-items:center; justify-content:center; } .pie { position:relative; width:clamp(150px,17vw,210px); aspect-ratio:1; border-radius:50%; background:conic-gradient(var(--c-red) 0 calc(var(--v) * 1%), #E7E0D8 calc(var(--v) * 1%) 100%); display:grid; place-items:center; } .pie__inner { text-align:center; color:#fff; line-height:1.3; } .pie__inner b { font-family:var(--font-en); font-size:clamp(20px,2.4vw,27px); font-weight:700; } .pie__inner small { display:block; font-size:10px; opacity:.85; } .satis__num { text-align:left; } .satis__label { font-size:clamp(15px,1.9vw,20px); font-weight:700; } .satis__val { font-family:var(--font-en); font-size:clamp(44px,6.5vw,84px); font-weight:700; line-height:1; color:var(--c-red); } .satis__val span { font-size:.42em; margin-left:2px; } .satis__note { font-size:11.5px; color:var(--c-text-mute); margin-top:12px; line-height:1.8; } /* --- 満足度の節を1枚絵で置き換えるとき --------------------------------- ★支給された画像（Section/カード.png）が、白いカード・角丸・影・文字まで すべて内蔵している。.satis の枠をそのまま使うと 「額縁の中に額縁」になるので、枠側の装飾を全部外す。 ★角丸と影は画像に焼き込まれている。CSSで付け足さないこと。 ★画像の四隅は透過（PNGのアルファを保持したロスレスWebP）。 どの背景色のセクションに置いても角が白く出ない。 ★★ロスレスで書き出している。文字が多い平面的な絵なので、 ロスレス84KB＜非可逆q88の149KB＜元PNG206KB。 非可逆にすると容量が増えるうえ文字がにじむ。q値をいじらないこと。 ★★中の文字は画像なので選択も読み上げもできない。 alt に内容を全部書いてある。画像を差し替えたら alt も直すこと。 */ .satis--img { background: none; box-shadow: none; padding: 0; border-radius: 0; } .satis--img picture { display: block; } /* picture は既定でインライン */ /* ★★スマホは縦版（750×1077）に差し替えている（2026-09-05）。 切り替えは 側だけで行う。 ■なぜ切り替えるか（画像内の文字を実測して決めた） 画像に焼かれた本文の文字サイズ（原寸） 横版 1908px幅 のうち 31px → 表示幅の 1.63% 縦版 750px幅 のうち 26px → 表示幅の 3.47% 同じ表示幅なら、縦版のほうが文字が2.1倍大きくなる。 画面幅ごとの実効的な文字サイズ 画面幅 横版 縦版 375px 5.1px 10.8px 414px 5.7px 12.2px 600px 8.7px 18.6px 767px 11.4px 24.4px 768px 11.5px − 900px 13.6px − 1440px 17.4px − ■なぜ767pxなのか 横版が12pxを割るのは表示幅738px未満＝画面幅およそ800pxから下。 767pxはサイトが元から使っているSPの境目でもあるので、ここに合わせた。 768〜799pxでは横版が11.5px相当と、12pxをわずかに下回る。 タブレットで読みづらいと言われたら、この値を800pxまで上げること。 （上げると縦版が750pxを超えて拡大されるので、その時は max-width:750px と margin-inline:auto も足すこと） ★★ここに aspect-ratio を書かないこと。 縦横で比率が違うので、CSSに数値を書くと 「CSSの判定」と「の判定」の2箇所で幅を見ることになる。 この2つがズレた瞬間、選ばれた画像に他方の比率が当たって潰れる。 実際、iframe内では の解決が先走って 1024pxでも縦版が選ばれることがあった（実機では正しい）。 width:100% と height:auto だけにして、比率は 読み込まれた画像自身に決めさせる。どちらが選ばれても潰れない。 ★ずれ防止の / の width・height 属性は必ず残すこと。 これが無いと読み込み前の高さが0になり、下のセクションが飛び跳ねる。 */ .satis--img img { width: 100%; height: auto; display: block; } @media (max-width:900px){ .voices { grid-template-columns:repeat(2,minmax(0,1fr)); } .voice:nth-child(even) { padding-bottom:0; } .satis__body { grid-template-columns:1fr; justify-items:center; } .satis__num { text-align:center; } } @media (max-width:520px){ .voices { grid-template-columns:1fr; } } /* ------------------------------------------------------------ 32. 事業詳細ページのFV ------------------------------------------------------------ ★パンくずは .page-head__inner の外に出すこと。 中に入れると2カラムの右側を食い、イラストが下に落ちて右下が空洞になる。 （SNS・広告運用・SODATSU・お問い合わせの4ページで実際に起きていた） */ .page-head__crumb { position:relative; z-index:2; padding-top:clamp(14px,2vw,20px); } /* --- 作り込んだFV（現在はSNS運用代行のみ） --- */ .fv { position:relative; overflow:hidden; background:linear-gradient(160deg,#FFFDF8 0%,#FFF4E3 60%,#FFEFEF 100%); } .fv__inner { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(26px,4vw,56px); align-items:center; padding:clamp(24px,3vw,40px) 0 clamp(46px,5.5vw,74px); } .fv__fig img { width:100%; height:auto; display:block; } .fv__label { display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--c-red); } .fv__label::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; } /* ★行にするのは直接の子だけ。span 全部に効かせると .k1 や .mark まで改行され、 見出しが行ごとにバラバラになる */ .fv__ttl { font-size:clamp(23px,3.2vw,40px); font-weight:700; line-height:1.45; letter-spacing:.01em; margin-top:16px; } .fv__ttl > span { display:block; } .fv__ttl .k1 { color:var(--c-red); } .fv__lead { font-size:14px; line-height:2.1; color:var(--c-text-sub); margin-top:clamp(20px,2.6vw,28px); } .fv__lead p + p { margin-top:2px; } .fv__cta { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; margin-top:clamp(24px,3vw,34px); } .fv__ctawrap { position:relative; display:flex; flex-direction:column; align-items:flex-start; } .fv__balloon { position:relative; font-size:12.5px; font-weight:700; background:var(--c-white); border-radius:var(--r-pill); padding:7px 18px; margin-bottom:12px; box-shadow:0 4px 14px rgba(80,60,40,.12); } .fv__balloon::after { content:""; position:absolute; top:100%; left:28px; border:8px solid transparent; border-top-color:var(--c-white); border-bottom:0; } .fv__balloon em { font-style:normal; color:var(--c-red); } /* 背景の作り込み：細いグリッド線とアクセントの帯 */ .fv__grid { position:absolute; inset:0; z-index:0; pointer-events:none; background-image:linear-gradient(rgba(193,3,2,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(193,3,2,.05) 1px, transparent 1px); background-size:56px 56px; } .fv__bar { position:absolute; z-index:1; height:10px; border-radius:2px; pointer-events:none; } .fv__bar--1 { background:var(--c-red); width:150px; top:16%; right:40px; } .fv__bar--2 { background:var(--c-teal); width:96px; top:30%; right:220px; } .fv__bar--3 { background:var(--c-cream); width:180px; bottom:20%; right:10px; } @media (max-width:900px){ .fv__inner { grid-template-columns:1fr; } .fv__fig { max-width:400px; } .fv__bar { display:none; } } /* ------------------------------------------------------------ 33. 既存記事の互換スタイル（SWELL由来のブロック） ------------------------------------------------------------ 本番サイトの投稿200件はSWELLで書かれており、テーマを変えると SWELL固有のブロックだけ装飾が外れて素のテキストになる。 実際に崩れたのは下の2つだけだったので、ここで受け止める。 ・swell-block-faq … 11記事 / 57項目 ・is-style-big_icon_point … 108箇所 画像・グループ・区切り線は WordPress 標準なので手当て不要。 */ /* --- FAQブロック --- */ .prose .swell-block-faq { margin: 2em 0; } .prose .swell-block-faq__item { background: var(--c-white); border: 2px solid var(--bg-cream-2); border-radius: var(--r-md); padding: 20px 22px; margin-bottom: 14px; } .prose .faq_q, .prose .faq_a { position: relative; padding-left: 40px; margin-left: 0; } .prose .faq_q::before, .prose .faq_a::before { position: absolute; left: 0; top: 0; width: 27px; height: 27px; border-radius: 50%; font-family: var(--font-en); font-size: 14px; font-weight: 700; display: grid; place-items: center; } .prose .faq_q { font-weight: 700; font-size: 16px; line-height: 1.75; } .prose .faq_q::before { content: "Q"; background: var(--c-red); color: #fff; } .prose .faq_a { margin-top: 14px; } .prose .faq_a::before { content: "A"; background: var(--bg-cream-2); color: var(--c-red); } .prose .faq_a > p { margin-bottom: 0; } .prose .faq_a > p + p { margin-top: .8em; } /* --- ブログパーツ（SWELLの [blog_parts] の受け皿） --- 記事本文に差し込まれるCTAブロック。前後に余白を取って本文と切り分ける。 */ .prose .p-blogParts { margin: 2.4em 0; } .prose .p-blogParts > *:first-child { margin-top: 0; } .prose .p-blogParts > *:last-child { margin-bottom: 0; } /* --- 大きいアイコン付きリスト --- ★is-style-big_icon_point は ul ではなく外側の wp-block-group に付いている。 ul を直接指定しないと、標準の「・」と二重になる。 */ .prose .is-style-big_icon_point ul { list-style: none; padding-left: 0; } .prose .is-style-big_icon_point ul > li { position: relative; padding-left: 34px; margin-bottom: .8em; } .prose .is-style-big_icon_point ul > li::before { content: ""; position: absolute; left: 0; top: .3em; width: 20px; height: 20px; border-radius: 50%; background: var(--c-red) no-repeat center / 11px 11px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E"); } /* ========================================================== 34. 料金プラン（/service/sns/） ========================================================== ★囲みは .framed を使う。「数字で見る」と同じ枠。 ここで独自の枠を作ると必ずズレるので、.framed の中に置くこと。 ★接頭辞は pricing。plan__list は 20-6 に別物（事業内容ページのチェック付き 箇条書き）が既にあり、同じ名前にすると /service/ の箇条書きが崩れる。 */ .pricing__name { text-align: center; font-weight: 700; font-size: 1.125rem; letter-spacing: .04em; color: var(--c-red); } .pricing__price { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 4px; line-height: 1; } .pricing__price b { font-family: var(--font-en); font-weight: 700; font-size: clamp(3.5rem, 9vw, 5.5rem); letter-spacing: -.02em; } .pricing__per { font-size: 1rem; font-weight: 700; } .pricing__unit { font-size: 1.5rem; font-weight: 700; } .pricing__note { margin-top: 10px; text-align: center; font-size: .8125rem; line-height: 1.7; color: var(--c-text-mute); } .pricing__lead { margin-top: 28px; padding-top: 24px; border-top: 2px solid var(--bg-cream-2); text-align: center; font-weight: 700; } .pricing__list { list-style: none; padding-left: 0; margin-top: 16px; display: grid; gap: 12px; } .pricing__list > li { position: relative; padding: 14px 16px 14px 44px; border-radius: var(--r-md); background: var(--bg-cream); font-size: .9375rem; line-height: 1.8; } /* チェックマーク。擬似要素で描くので画像を足さない */ .pricing__list > li::before { content: ""; position: absolute; left: 16px; top: 21px; width: 14px; height: 8px; border-left: 2.5px solid var(--c-red); border-bottom: 2.5px solid var(--c-red); transform: rotate(-45deg); } .pricing__list > li b { display: block; font-size: .8125rem; letter-spacing: .04em; color: var(--c-red); } /* 未確定の数量。公開前に消し忘れないよう色を変えている */ .pricing__todo { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: #fff3cd; font-size: .75rem; color: #7a5b00; } .pricing__foot { margin-top: 20px; font-size: .8125rem; line-height: 1.8; color: var(--c-text-mute); } @media (min-width: 768px) { .pricing__list { grid-template-columns: 1fr 1fr; } .pricing__list > li:nth-child(1), .pricing__list > li:nth-child(4) { grid-column: span 2; } } /* ========================================================== 35. お客さまの声（1件だけ載せるとき） ========================================================== ★.voices は5件を横に並べる専用（grid-template-columns: repeat(5,...)）。 1件だけ入れると左端に寄って窮屈になるので、事例詳細ではこちらを使う。 ★左に縦帯を出す囲みは禁止。全周の枠線で囲む。 */ .testimonial { display: grid; gap: clamp(20px, 3vw, 32px); align-items: center; margin: 0; padding: clamp(24px, 3.2vw, 40px); background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-lg); } .testimonial__fig { width: clamp(120px, 20vw, 170px); justify-self: center; } .testimonial__fig .ph { aspect-ratio: 3 / 4; width: 100%; border-radius: var(--r-md); font-size: 11px; } .testimonial__fig img { width: 100%; height: auto; border-radius: var(--r-md); } .testimonial__body { margin: 0; } .testimonial__tag { font-size: 13px; font-weight: 700; color: var(--c-red); margin-bottom: 10px; } /* 引用符は擬似要素で描く。画像を足さない */ .testimonial__quote { position: relative; padding-left: 30px; font-size: clamp(17px, 2vw, 22px); font-weight: 700; line-height: 1.75; } .testimonial__quote::before { content: "“"; position: absolute; left: 0; top: -.1em; font-family: var(--font-en); font-size: 2.4em; line-height: 1; color: var(--c-cream); } .testimonial__cite { margin-top: 16px; padding-left: 30px; font-size: 13px; font-style: normal; color: var(--c-text-mute); } .testimonial__cite::before { content: "— "; } @media (min-width: 768px) { .testimonial { grid-template-columns: auto 1fr; } } /* ========================================================== 36. 事例詳細（インタビュー記事フォーマット） ========================================================== ブログ記事のように読ませる1カラムのレイアウト。 ★.prose はWordPressの既存記事用なので触らない。ここは独立した名前空間にする。 ★見出しは背景ベタの帯。左に縦帯を出す囲みは禁止。 */ .caseart { max-width: 800px; margin-inline: auto; } /* ★2カラムの中に入れるときは幅の制限を外す。 外さないとカラムの中でさらに800pxに絞られ、右側に無駄な余白ができる。 */ .caseart--incol { max-width: none; margin-inline: 0; } /* --- 日付とカテゴリ --- */ .caseart__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .caseart__date { font-family: var(--font-en); font-size: 14px; font-weight: 700; color: var(--c-text-mute); } /* --- タイトルまわり --- */ .caseart__title { font-size: clamp(23px, 3.2vw, 33px); font-weight: 700; line-height: 1.6; letter-spacing: .01em; } .caseart__client { margin-top: 16px; font-size: 15px; color: var(--c-text-sub); } .caseart__client::before { content: ""; display: inline-block; width: 22px; height: 1px; margin-right: 12px; vertical-align: middle; background: var(--c-text-mute); } .caseart__lead { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--c-line); font-size: clamp(16px, 1.9vw, 18px); font-weight: 700; line-height: 2; } /* --- 本文 --- */ .caseart p { font-size: 15px; line-height: 2.1; margin-bottom: 1.5em; } .caseart p:last-child { margin-bottom: 0; } .caseart strong { font-weight: 700; } /* --- 帯見出し（課題／解決策／成果／今後）--- */ .caseart__h2 { margin-top: 3.2em; margin-bottom: 1.8em; padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 26px); border-radius: var(--r-md); background: var(--bg-cream); font-size: clamp(17px, 2.1vw, 21px); font-weight: 700; line-height: 1.7; } /* --- インタビューの質問 --- */ .caseart__q { margin-top: 2.6em; margin-bottom: 1.2em !important; font-weight: 700; line-height: 1.9 !important; } .caseart__q::before { content: "ーー"; color: var(--c-red); } /* --- 話者 --- */ .caseart__who { margin-bottom: .8em !important; font-size: 14px !important; font-weight: 700; color: var(--c-red); line-height: 1.7 !important; } /* --- 写真とキャプション --- */ .caseart__fig { margin: 2.4em 0; } .caseart__fig img { width: 100%; height: auto; border-radius: var(--r-md); } .caseart__fig .ph { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-md); } .caseart__cap { margin-top: 12px; font-size: 13px !important; line-height: 1.8 !important; color: var(--c-text-mute); } /* ========================================================== 37. TOPのファーストビュー（背景動画＋左下のテキスト） ========================================================== 検討したA案（アーチ1枚）／C案（大小2枚）は不採用。 バックアップは作業フォルダに残してある。 ★ヘッダーは sticky・高さ76px・z-index:100。 margin-top:-76px でその下に潜り込ませ、ヘッダーが必ず上に来るようにする。 ★高さは height ではなく min-height。height:100vh にすると 画面が低いときに文字が切れる。 ★svh はスマホでアドレスバーが出入りしても高さがガタつかない単位。 未対応ブラウザ用に vh を先に書いておくこと。 */ .hero--mv { position: relative; overflow: hidden; /* ★.hero の padding-block と背景グラデーションを打ち消す。 消し忘れると下に120pxほど余白が残り、テキストが下に着かない。 */ padding: 0; background: none; margin-top: -76px; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; /* テキストを下に寄せる */ } /* --- 背景（動画）--- */ .mv-bg { position: absolute; inset: 0; z-index: 0; } .mv-bg__video { width: 100%; height: 100%; object-fit: cover; display: block; } /* 動画が無い／読み込めないときに見える下地。動画を入れれば隠れる */ .mv-bg__fallback { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; background: linear-gradient(160deg, #6E5A4C 0%, #3A2C24 100%); color: rgba(255,255,255,.4); font-size: 12px; font-weight: 600; letter-spacing: .12em; } /* --- ドットの網（トゥモローゲート風）--- */ /* ★.hero--mesh が付いているときだけ出る。付け外しで「あり／なし」を切り替える。 参考にしたサイトは4pxのPNGタイルを敷いていたが、 こちらはグラデーションで描く（画像ファイルが1つ減り、拡大しても粗くならない）。 ★z-index は動画（0）より上、覆い（::after）より下。 覆いより上に置くと、暗くする前の網が浮いて見える。 ★濃さは3px・0.35に決めた（比較したA〜Fのうちのa案）。 模様として主張させず、質感だけを足す狙い。 数値を上げるとLEDらしくなるが、映像の中身が読み取れなくなる。 ★画素密度の高い画面だと網が細かすぎて消えるので、少しだけ目を広げる。 */ .mv-bg__mesh { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: radial-gradient(circle at center, rgba(0, 0, 0, .35) .8px, rgba(0, 0, 0, 0) 1.1px); background-size: 3px 3px; } @media (min-resolution: 2dppx) { .mv-bg__mesh { background-size: 4px 4px; } } /* 文字を読ませるための覆い。テキストが左下なので、下を濃くする */ .mv-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,17,13,.42) 0%, rgba(26,17,13,.12) 34%, rgba(26,17,13,.80) 100%), linear-gradient(90deg, rgba(26,17,13,.42) 0%, rgba(26,17,13,0) 58%); } /* --- テキスト（左下・左揃え）--- */ .mv-body { position: relative; z-index: 2; width: 100%; padding-top: 140px; padding-bottom: clamp(52px, 9vh, 116px); text-align: left; color: #fff; } .mv__en { font-family: var(--font-en); font-size: clamp(38px, 7.4vw, 104px); font-weight: 700; line-height: 1.04; letter-spacing: -.025em; color: #fff; } /* 文末の「.」だけ色を変えて視線を止める */ .mv__en .dot { color: var(--c-yellow); } .mv__jp { margin-top: clamp(16px, 2.2vw, 28px); font-size: clamp(14px, 1.8vw, 21px); font-weight: 500; letter-spacing: .04em; line-height: 1.9; color: rgba(255,255,255,.92); } /* 黄色マーカーは暗い背景だと沈むので、下線の引き方を変える */ .mv__jp .mark { background: none; font-weight: 700; box-shadow: inset 0 -.42em 0 rgba(255, 214, 0, .32); } @media (max-width: 767px) { .mv-body { padding-top: 120px; padding-bottom: clamp(40px, 7vh, 72px); } } /* ★動きを減らす設定のときは動画を止めて、静止画（poster）だけ見せる */ @media (prefers-reduced-motion: reduce) { .mv-bg__video { display: none; } } /* ========================================================== 38. TikTok運用ページのFV（LP型） ========================================================== 参考：https://shortdrama.gokkoclub.jp/ 斜めに割った背景＋スマホ枠の縦型動画＋大きな見出し、というLPの型。 ★このページ専用。他の事業ページ（完全SNS運用・Instagram・SODATSU）は 従来の .fv のままにしてある。増やすときはクラス名を分けること。 ★日本語フォントには本物の斜体が無い。参考サイトの見出しは画像。 ここでは skewX で傾けている（文字なので検索・読み上げには残る）。 */ .tkfv { position: relative; overflow: hidden; margin-top: -76px; background: var(--bg-base); /* ★このセクションは「ヒーロー ＋ 赤いCTA帯（.ctaduo）」の2段構え。 2つあわせて1画面（100svh）に収める。 ★★TikTokだけは「ヒーローのみ100vh」。CTA帯は1画面の外に出す。 Instagram（.igfv）は「FV＋CTA帯の合計で100vh」なので、設計が違う。 混同して .tkfv 側に min-height を戻さないこと。 100svh は .tkfv ではなく .tkfv__inner（ヒーロー）に付けてある。 ★grid-template-rows: 1fr auto 1fr … ヒーロー auto … CTA帯。中身ぶんの高さだけ ヒーローが100svhを持つので、帯はちょうど画面の下端の続きに来る。 スクロールすると帯が現れる。 ★margin-top:-76px でヘッダーの下に潜らせているので、100svhがちょうど1画面。 */ display: grid; grid-template-rows: 1fr auto; } /* 斜めの赤い面。2枚重ねて奥行きを出す */ .tkfv__diag, .tkfv__diag2 { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* ★★装飾はヒーロー行（1行目）だけに閉じ込める。 グリッドの子に grid-area を指定すると、position:absolute の基準が 「セクション全体」ではなく「そのグリッド領域」になる。 これをやらないと inset:0 がCTA帯まで伸び、 clip-path の % が伸びた高さに対して計算されて三角形が大きくなる。 （1080pxの画面で 311px → 383px、約23%も大きくなってしまう） ★絶対配置なので行を消費しない。__inner は1行目、.ctaduo は2行目に入る。 */ .tkfv__diag, .tkfv__diag2, .tkfv__geo { grid-area: 1 / 1; } /* ★左上の三角形。左辺いっぱいに下ろすと見出しの左端が赤に隠れて読めなくなる。 斜辺が見出しの手前で切れるように角度を決めている。 ★指示により、辺の長さを元の30%に縮小した（面積では約9%）。 赤 52% × 96% → 15.6% × 28.8% 濃赤 26% × 48% → 7.8% × 14.4% 幅と高さを同じ0.3倍にしているので、斜辺の角度は変わらない。 片方だけ変えると角度が変わって濃赤とずれるので、必ず両方そろえること。 ★縮小の副作用：スマホ枠2台が赤い面から外れて、 クリーム色の地の上に乗るようになった。枠に影を付けてあるので沈まないが、 背景色を変えるときはコントラストを見直すこと。 */ .tkfv__diag { background: var(--c-red); clip-path: polygon(0 0, 15.6% 0, 0 28.8%); } .tkfv__diag2 { background: var(--c-red-deep, #8E0201); opacity: .5; clip-path: polygon(0 0, 7.8% 0, 0 14.4%); } /* 右側（白い面）に敷く幾何学模様。文字の可読性を落とさない濃さに留めている */ .tkfv__geo { position: absolute; z-index: 1; inset: 0; background: url("../img/deco/geo-tiktok.svg") right center / auto 100% no-repeat; pointer-events: none; } .tkfv__inner { position: relative; z-index: 2; /* ★ここが「ファーストビューのみ100vh」の本体。 height ではなく min-height。背の低い画面で中身の高さが勝っても切れない。 svh はスマホでアドレスバーが出入りしても高さがガタつかない単位。 未対応ブラウザ用に vh を先に書く。 */ min-height: 100vh; min-height: 100svh; /* ★ヘッダー（76px）に隠れないための逃げ。 上下そろえてあるので、中央に来たときに中身が偏らない。 */ padding-block: 76px; align-content: center; /* ★このFVだけコンテナを広く取る（既定は1120px）。 1120pxではスマホ側の列が480px止まりで、 画面が広くても2台が大きくならなかった。 広げるとスマホも見出しも同時に大きくなる。 ★他のセクションは既定のままにすること。 全体を広げると、本文の1行が長くなって読みづらくなる。 */ max-width: 1420px; display: grid; gap: clamp(24px, 3vw, 48px); align-items: center; } /* スマホ2台ぶんの幅を確保する。 ★39%では2台が小さく、何の動画か分かりにくかったので広げた。 ★2カラムにする境界を900pxから1080pxに上げた。 900〜1079pxではテキスト列が460pxしかなく、 FVのボタン2つが横に並ばず縦積みになっていた。 この幅では縦積みのレイアウト（スマホが上・テキストが下・中央揃え）にして、 横幅をいっぱいに使わせる。 */ /* ★★スマホ列の幅は「%」ではなく「スマホ本体の幅」で決めること。 ここは作り方を間違えて、幅の広い＋背の低い画面で崩れていた。 何が起きていたか（1512×827の画面で実測） 列の幅 … 45% ＝ 617px（TikTok）／44% ＝ 560px（Instagram） 本体の幅 … 54vh + 20px ＝ 467px → 列の中に 150px / 93px の「死んだ余白」ができ、 本体は列の中央に寄るので、テキストとの間が 見た目 121px / 98px も空いた（CSSのgapは45px / 51px）。 さらに本体が小さいぶん、テキスト列だけ大きく見えた。 原因は「列は画面の幅で決まる／本体は画面の高さで決まる」という食い違い。 幅が広くて背が低い画面ほど差が開く。 ★★54vh が小さすぎたのも直した。 あれは「FV＋CTA帯を100vhに収める」ための値。 いまはヒーローだけで100vhなのでCTA帯の分を引く必要がなく、 827pxの画面では縦に226pxも余っていた。 いまの式： clamp(340px, calc(99.4vh - 171px), min(660px, 48%)) 99.4vh - 171px … 100svh から上下の余白152pxと逃げ40pxを引き、 枠の縦横比 1:2.011 から幅に換算した値 min(660px, 48%) … 大きな画面での上限。テキストが狭くなりすぎないように 340px … 下限 ★.phones は width:100% で列いっぱいに。列が本体の幅なので余白が出ない。 ★式を変えるときは必ず実測すること。 縦の余り・見た目のすき間・テキスト列の幅を同時に見ないと判断できない。 */ @media (min-width: 1080px) { .tkfv__inner { grid-template-columns: clamp(340px, calc(99.4vh - 171px), min(660px, 48%)) 1fr; } } /* --- 見出しまわり --- */ .tkfv__body { text-align: center; } @media (min-width: 1080px) { .tkfv__body { text-align: left; } } .tkfv__ttl { transform: skewX(-6deg); } .tkfv__ttl span { display: block; font-weight: 700; line-height: 1.24; letter-spacing: -.01em; } /* ★vw基準なので、列幅より速く大きくなる。 以前72pxのままにしていたら1280px幅で 「伸びるを、つく／る。」と折り返した。1行に収まる値に抑えること。 ★読点「、」を外して1文字ぶん短くなったので、そのぶん大きくできる。 ★★計測の落とし穴（2回ひっかかった） .tkfv__ttl-1 は span だがブロック要素なので、 getBoundingClientRect().width は「列の幅」を返す。文字の幅ではない。 これを文字幅だと思って読むと「もう限界だ」と誤判断する。 文字の実幅は Range で測ること： var r = document.createRange(); r.selectNodeContents(el); r.getBoundingClientRect().width 実測すると 74px の時点で列幅707pxに対し文字は519px、 187pxも余っていた。 ★94px で文字の実幅は約659px、列幅707pxに対し約48pxの余裕。 1120〜1920pxのどの幅でも余裕は約36〜50pxで一定になるよう vw係数(6.54vw)を合わせている。片方だけ変えると崩れる。 */ .tkfv__ttl-1 { font-size: clamp(30px, 6.54vw, 94px); } .tkfv__ttl-1 em { font-style: normal; color: var(--c-red); } .tkfv__ttl-2 { margin-top: 6px; font-size: clamp(23px, 5.15vw, 74px); } /* ★以前ここに「背の低い画面だけ見出しと下余白を縮める」指定を置いていたが、 撤去した。 あれは FV＋CTA帯 の合計を100vhに収めるための逃げだった。 CTA帯を1画面の外に出したので、ヒーロー単体は 高さ768pxの画面でも約600pxしかなく、縮める必要がなくなった。 復活させると、背の低い画面で見出しだけ理由なく小さくなる。 */ /* ── サブ見出し ── 前後に罫線を引く */ .tkfv__sub { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 20px); margin-top: clamp(14px, 1.8vw, 22px); font-size: clamp(13px, 1.6vw, 19px); font-weight: 700; color: var(--c-red); transform: skewX(-6deg); } .tkfv__sub::before, .tkfv__sub::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .45; } @media (min-width: 900px) { .tkfv__sub::before { flex: 0 0 clamp(24px, 3vw, 52px); } } /* Produced by の帯 */ .tkfv__bar { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: clamp(18px, 2.2vw, 28px); padding: clamp(10px, 1.3vw, 15px) clamp(14px, 2vw, 26px); border-radius: var(--r-sm); background: #1f1a17; color: #fff; font-size: clamp(11px, 1.15vw, 14px); font-weight: 700; letter-spacing: .06em; } .tkfv__bar b { font-size: clamp(14px, 1.6vw, 19px); letter-spacing: .02em; } .tkfv__bar i { font-style: normal; width: 1px; height: 1.4em; background: rgba(255,255,255,.3); } /* 強みのバッジ3つ。 ★参考サイトは月桂冠の「受賞」バッジだが、当社に受賞実績は無い。 受賞に見える形は使わず、既にサイトで述べている強みを並べている。 */ .tkfv__pts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.1vw, 14px); margin-top: clamp(16px, 2vw, 24px); } .tkfv__pts li { padding: clamp(10px, 1.3vw, 15px) clamp(6px, 1vw, 12px); border: 1.5px solid var(--c-red); border-radius: var(--r-sm); background: rgba(255,255,255,.86); text-align: center; line-height: 1.5; } .tkfv__pts b { display: block; font-size: clamp(17px, 2.2vw, 27px); color: var(--c-red); } .tkfv__pts span { font-size: clamp(12px, 1.05vw, 12px); font-weight: 700; color: var(--c-text-sub); } .tkfv__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 2.6vw, 32px); } /* ★このFVのボタンだけ左右の余白を詰める。 スマホ枠を大きくしたぶんテキスト列が狭くなり、 既定の padding（44px）だと2つが横に並ばず縦に折り返していた（5px足りなかった）。 .btn 全体を細くすると他のページに響くので、ここだけに効かせる。 */ /* ★下限を16pxまで下げる。900px幅ではテキスト列が460pxしかなく、 22pxのままだと2つが横に並ばず縦積みになった。 */ .tkfv__cta .btn { padding-inline: clamp(16px, 2.4vw, 34px); } @media (max-width: 899px) { .tkfv__cta { justify-content: center; } } @media (max-width: 560px) { .tkfv__cta .btn { width: 100%; justify-content: center; } } /* 斜めの赤面の上に乗る文字は白にする（スマホ幅では面が細くなるので対象外） */ @media (max-width: 899px) { .tkfv__diag { clip-path: polygon(0 0, 100% 0, 100% 26%, 0 42%); } .tkfv__diag2 { clip-path: polygon(0 0, 46% 0, 0 22%); } .tkfv__geo { background-size: auto 70%; background-position: right bottom; opacity: .8; } } /* ========================================================== 39. Instagram運用ページのFV（LP型） ========================================================== 参考：https://lp.vooster.net/lp/fb/ver2 Figma（node 79:677）の座標をそのまま採寸して寸法を合わせている。 基準は幅1497px・FVの高さ763px。各値は 1497px を100として vw に換算し、 clamp() で上限（=Figmaの実寸）と下限を挟んでいる。 ★採寸した主な位置（FVの上端からの距離／1497px時） 吹き出し y=50 h=69 文字32px 見出し1行目 y=124 h=53 文字48px 見出し2行目 y=184 h=96 文字76px リード y=294 32px×2行 文字19px リボン y=383 h=50 文字27px 月桂冠 y=453 h=93 数値64px 下の帯 y=596 h=167 ボタン250×62 写真 x=771 y=0 w=726 h=539（右上・下の帯には掛からない） ★このページ専用。TikTokは .tkfv、それ以外は従来の .fv。 ★月桂冠は「数値を囲む」用途に限ること（受賞実績はありません）。 */ /* ★TikTok側と同じ。「ヒーロー ＋ 赤いCTA帯」の2段で1画面（100svh）に収める。 行の割り当ても同じ（1fr auto）で、帯が必ず最下部に来る。 */ .igfv { position: relative; overflow: hidden; margin-top: -76px; background: var(--c-white); min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; } /* --- 右側に敷く幾何学模様 --- ★以前は円形に切り抜いた写真を置いていたが、スマホ2台に差し替えたため撤去した。 文字の可読性を落とさない濃さ（6〜12%）に留めている。 */ .igfv__geo { position: absolute; z-index: 0; inset: 0; background: url("../img/deco/geo-instagram.svg") right center / auto 100% no-repeat; pointer-events: none; } /* --- 左下の装飾ライン --- */ .igfv__lines { position: absolute; z-index: 0; left: 0; right: 0; bottom: clamp(120px, 11vw, 167px); height: clamp(180px, 23vw, 340px); background: url("../img/deco/fv-lines.svg") left bottom / auto 100% no-repeat; pointer-events: none; } /* ★TikTok側と同じ理由でコンテナを広く取る */ .igfv__inner { max-width: 1320px; position: relative; z-index: 2; align-content: center; display: grid; gap: clamp(28px, 3.4vw, 54px); align-items: center; /* ★上下を同じにする（TikTok側と同じ理由）。 中央に置くので、上だけヘッダー分を足すと中身が下寄りに見える。 */ padding-block: 76px; } /* 左：文字／右：スマホ2台 */ /* ★スマホ2台ぶんの列。40%では小さく、下に大きな余白が余っていた。 テキスト側（左）は幅に余裕があるので、右を広げている。 */ /* ★列の幅の決め方は .tkfv__inner と同じ。理由はそちらのコメントを読むこと。 Instagramは図版が右なので順番だけ逆。 */ @media (min-width: 900px) { .igfv__inner { grid-template-columns: 1fr clamp(340px, calc(99.4vh - 171px), min(660px, 48%)); } } .igfv__body { max-width: 700px; } /* --- 吹き出しの帯（Figma: 476×69 / 文字32px）--- */ /* ★インパクトを出すため、Figmaより一段強めている。 ・文字を大きく（32px → 38px） ・影を付けて浮かせる ・強調語を黄色に（当サイトのマーカーと同じ色） ・尻尾を大きく */ .igfv__balloon { display: inline-block; position: relative; padding: clamp(9px, .94vw, 14px) clamp(20px, 2.4vw, 36px); border-radius: var(--r-pill); /* ★赤の淡いグラデーション。ブランドの赤（#C10302）を中心に、 濃い側と明るい側へ少しだけ振っている。 尻尾（::after）は border-color でしか色を付けられずグラデーションが使えないので、 尻尾の位置（左寄り）に来る色を単色で指定して合わせている。 */ background: linear-gradient(96deg, #9E0201 0%, var(--c-red) 52%, #DC2A1D 100%); color: #fff; font-size: clamp(17px, 2.54vw, 38px); font-weight: 700; letter-spacing: .01em; line-height: 1.3; box-shadow: 0 clamp(6px, .8vw, 12px) clamp(16px, 2vw, 30px) rgba(140, 12, 8, .28); /* ★★尻尾（::after）は position:absolute なので、下の見出しを押し下げない。 尻尾ぶん＋見た目の余白を、こちらで確保する。 これが無いと尻尾が見出しの1文字目に6〜8px重なる （375px / 768px / 900px / 1440px すべてで重なっていた。2026-09-07に発覚）。 ★下限17pxの根拠：尻尾は clamp(9px, .94vw, 14px)。 狭い幅では9pxなので、17 - 9 = 8px が見た目の余白になる。 広い幅では 27 - 14 = 13px。 ★影（下へ6〜12px＋ぼかし）もこの余白に収まる。 余白を削ると、影が見出しの上端にかぶって文字がにじむ。 */ margin-bottom: clamp(17px, 1.85vw, 27px); } /* 助詞を小さくして強弱をつける */ /* ★em だけだと狭い幅で11.6pxまで落ちる。max()で12pxの床を入れる */ .igfv__balloon small { font-size: max(12px, .68em); font-weight: 700; } /* 強調語 */ .igfv__balloon em { font-style: normal; color: var(--c-yellow); } .igfv__balloon::after { content: ""; position: absolute; top: 100%; left: clamp(24px, 3.2vw, 48px); border: clamp(9px, .94vw, 14px) solid transparent; /* 尻尾は左寄りにあるので、グラデーションの左端付近の色に合わせる */ border-top-color: #A30201; border-bottom: 0; } /* --- 大見出し（Figma: 48px → 76px）--- */ .igfv__ttl { margin-top: clamp(2px, .33vw, 5px); font-weight: 700; letter-spacing: -.015em; } .igfv__ttl-1 { display: block; font-size: clamp(24px, 3.2vw, 48px); line-height: 1.1; } .igfv__ttl-2 { display: block; font-size: clamp(34px, 5.08vw, 76px); line-height: 1.16; margin-top: clamp(3px, .47vw, 7px); } /* 一部の語をグラデーションで塗る。 ★background-clip:text は -webkit- 付きも必要。片方だけだと一部の環境で透明になる。 ★--c-pink（#FFB2B2）は白背景で薄すぎて文字が読めなくなる。 読める濃さの赤どうしでグラデーションを組むこと。 */ .igfv__grad { background: linear-gradient(100deg, var(--c-red-deep) 0%, var(--c-red) 52%, #DE2A1E 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* --- リード（Figma: 19px・行送り32px）--- */ .igfv__lead { /* ★36emだと列が狭いときに1文字だけ次行へ落ちる。 列幅いっぱいまで使わせて、句読点で自然に折り返させる。 */ max-width: 34em; text-wrap: pretty; margin-top: clamp(10px, .94vw, 14px); font-size: clamp(13px, 1.27vw, 19px); line-height: 1.7; color: var(--c-text); } /* --- リボン（Figma: 529×50 / 文字27px）--- ★デザインから書き出したSVG（399×38）をそのまま背景に使う。 文字の長さに合わせて横に伸ばすので、両端のくぼみも少し広がる。 形を崩したくない場合は、文字量を399×38の比率に近づけること。 */ .igfv__ribbon { display: inline-block; position: relative; margin-top: clamp(16px, 1.67vw, 25px); padding: clamp(7px, .6vw, 9px) clamp(24px, 2.6vw, 40px); background: url("../img/deco/ribbon.svg") center / 100% 100% no-repeat; color: #fff; font-size: clamp(13px, 1.52vw, 22px); font-weight: 700; letter-spacing: .02em; line-height: 1.35; /* ★絶対に折り返させない。 2行になるとリボンのSVGが縦に伸びて、両端のくぼみが崩れる。 文字が入らないときはフォントを小さくすること（折り返しでは直らない）。 */ white-space: nowrap; text-shadow: 0 1px 2px rgba(90, 66, 20, .35); } /* --- 月桂冠で囲んだ数値（Figma: 1枚233×93 / 数値64px）--- */ .igfv__metrics { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(6px, .67vw, 10px); margin-top: clamp(12px, 1.34vw, 20px); } .igfv__metrics li { text-align: center; } /* ★月桂冠はデザインから書き出したSVG（215×86・左右一体）をそのまま使う。 左右を別々の擬似要素で置いていたのをやめ、1枚の背景にしている。 注記（.igfv__mnote）は月桂冠の外（下）に出す。Figmaもそうなっている。 */ .igfv__mwrap { display: grid; place-content: center; width: clamp(176px, 15.6vw, 233px); aspect-ratio: 215 / 86; padding-inline: 13%; background: url("../img/deco/metric-laurel.svg") center / contain no-repeat; } .igfv__mlabel { font-size: clamp(12px, .94vw, 14px); font-weight: 700; color: var(--c-text-sub); } .igfv__mnum { font-family: var(--font-en); font-weight: 700; line-height: 1; font-size: clamp(30px, 4.28vw, 64px); color: var(--c-red); margin-top: clamp(2px, .27vw, 4px); } /* ★em だけだと、数字が縮む狭い幅で11.6pxまで落ちる。max()で12pxの床を入れる。 （.chart__val small と同じ理由） */ .igfv__mnum small { font-family: var(--font-jp); font-size: max(12px, .44em); margin-left: 2px; } .igfv__mnote { margin-top: clamp(3px, .4vw, 6px); font-size: clamp(11px, .8vw, 12px); line-height: 1.5; color: var(--c-text-mute); } @media (max-width: 899px) { .igfv__geo { background-size: auto 62%; background-position: right bottom; opacity: .85; } .igfv__lines { bottom: auto; top: 40%; height: 200px; } .igfv__body { max-width: none; } /* ★★padding-top を76pxより小さくしないこと。 .igfv には margin-top:-76px が掛かっていて、FVの上端が ヘッダー（高さ76px）の裏から始まる。ここを 16〜26px にしていたため、 赤い吹き出し「保存されるから、選ばれる」がヘッダーの裏に 52pxぶん隠れていた（2026-09-05に発覚）。 76 = ヘッダーを外に出すぶん ／ +16 = 見た目の余白。 TikTok側（.tkfv__inner）は 76px のまま中央寄せの余りで16px空いており、 結果として同じ位置になる。数値を変えるときは両方そろえること。 ★管理バー（ログイン中は上に46px入る）があっても、ヘッダーとFVは 一緒に下がるので、この76pxという差は変わらない。 */ /* padding-inline は既定の24pxより6px詰める。 見出しを大きくするための幅をここで稼いでいる（左右で12px）。 ★スマホ2台も同じ列に入っているので、写真と文字の左端はそろったまま。 */ .igfv__inner { padding-top: 92px; padding-inline: 18px; } /* ■スマホのFV見出しの文字サイズ ★★係数は「列の幅の何%を文字で埋めるか」から逆算している。 PC用の係数をそのまま使うと、スマホは1カラムで列が広いぶん 文字が小さくなり、右に大きな空白が残って間延びする。 係数 = 埋めたい割合 ÷ 「font-size 1pxあたりの文字幅」 ★★1pxあたりの文字幅は、必ず実機で測ってから決めること。 文字数ではなく字形で決まる。欧文が入ると大きく変わる。 実測値（Noto Sans JP・700・字間 -.04em、2026-09-07 計測） ブランディング 6.047 → 10.4 × 6.047 = 列の 63% Instagram運用 6.700 → 13.8 × 6.700 = 列の 92% 保存されるから、選ばれる 9.548（吹き出し。左右パディング込み） ★★測るときは Range.selectNodeContents で「文字の実幅」を取ること。 span は display:block なので getBoundingClientRect は 列幅を返してしまい、何%使っているか分からない。 ★★上限域（76px）では実測 6.80 とわずかに増える。 係数はこちらで割ること（94 ÷ 6.80 = 13.8）。 ★空の probe 要素で測ってはいけない。2行目は の入れ子があり、実幅が数%広い。 probe 計測では 6.531 と出て、実際の 6.700 を下回った。 ★★2行目は絶対に2行に割ってはいけない。割合を96%より上げないこと。 フォントの読み込み前は代替フォントで描かれるため、数%の余白が要る。 文言を変えたら、この係数を測り直すこと。 以前の文言（「来店をつくる。」1pxあたり5.771）向けの係数16を そのまま使うと 16 × 6.70 = 107% になり、必ず折り返す。 ★上限（38 / 48 / 76px）はデザインの値。変えないこと。 係数を96%以下にしておけば、上限に達する幅でも自動的に収まる （上限に達するのは列が 76 ÷ 0.138 = 551px のとき、文字幅は517px）。 ★★基準は vw ではなく列の幅そのもの（cqw）にすること。 vw は縦スクロールバーのぶん（PCのブラウザで15px）を引かないので、 同じ375pxでも実機とPCのブラウザで列幅が15px違う。 vwで96%を狙うと、PCのブラウザで幅を狭めたときだけ折り返す。 実際に344〜480pxで2行目が折り返した（2026-09-05）。 cqw は入れ物（.igfv__body）の実幅の1%なので、この差が出ない。 ★1つめの font-size は cqw に未対応のブラウザ向けの控えめな値。 消さないこと（消すと古いブラウザで下限の24pxまで落ちる）。 スクロールバーぶんを見込んで 100vw から51pxを引いてある。 ★字間を-.04emまで詰めているぶん、文字を約2.5%大きくできている。 字間を戻すなら係数も下げること。 ★PC側（.igfv__ttl-2 の clamp）は変更不要。実測で列の最大81% （1440px幅で列613px・文字498px）なので余裕がある。 */ .igfv__body { container-type: inline-size; } .igfv__ttl { letter-spacing: -.04em; } .igfv__balloon { font-size: min(38px, calc((100vw - 51px) * .080)); font-size: min(38px, 8cqw); padding-inline: 5.5cqw; } .igfv__ttl-1 { font-size: min(48px, calc((100vw - 51px) * .104)); font-size: min(48px, 10.4cqw); } .igfv__ttl-2 { font-size: min(76px, calc((100vw - 51px) * .138)); font-size: min(76px, 13.8cqw); } /* ★スマホでは動画2台を先に見せる（指示による）。 DOM順は「文字 → スマホ」のままにしてある。 読み上げと検索エンジンには見出しから読ませたいので、 見た目の順番だけ order で入れ替える。 ★TikTok側はもともとDOM順が「スマホ → 文字」なので何もしていない。 */ .igfv__inner .phones { order: -1; } .igfv__inner .igfv__body { order: 0; } } @media (max-width: 560px) { .igfv__metrics { justify-content: center; } } /* ========================================================== 40. スマホ枠（2台を横に並べる） ========================================================== TikTok運用ページとInstagram運用ページで共有している。 片方だけ直すとズレるので、必ずここを直すこと。 ★枠はお預かりしたIllustratorデータ（27478201.ai「スマホ枠　１」）から作った assets/img/deco/phone-frame.svg を使う。 以前はCSSで角丸の箱を描いていたが、実物のiPhone枠に差し替えた。 ★SVGは画面部分が「塗りの穴」になっている。 だから枠を動画の上に重ねると、画面のところだけ動画が透ける。 枠を下に敷くのではなく、必ず上に重ねること。 ★画面の位置はSVGの中の比率に合わせてある（下の inset）。 枠のSVGを差し替えたら、この数値も測り直すこと。 左 6.468% / 上 2.491% / 右 7.195% / 下 2.491% 角丸 = 画面幅の 14.05%（＝枠全体の幅の 12.134%） ★以前は2台を重ねて傾けて置いていたが、横並びに変更した。 重ねると奥の1台が半分隠れて、何の動画か分からなかった。 */ .phones { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.6vw, 20px); /* ★幅を「画面の高さ」から決める。 FVは「ヒーロー ＋ CTA帯」で1画面（100svh）に収める作り。 スマホの大きさを固定pxにすると、低い画面で ヒーロー＋帯＋余白が1画面を超えてしまう（実際に超えた）。 ★計算の中身 枠1台の縦横比は 1 : 2.011。 2台ぶんの幅 = 1台の高さ / 2.011 × 2 + すき間(20px) 1台の高さを 54vh に収めたいので → 54vh + 20px ★54vh の根拠（画面の高さ900pxの場合） ヒーローの上下の余白 152px（ヘッダー分76px × 2） ＋ CTA帯 約231px ＝ 383px が固定で必要。残り517pxにスマホが入ればよい。 54vh = 486px なので収まる。 最初48vhにしていたが、余裕を取りすぎて2台が小さかった。 ★min() の中身 100% … 列より広がらない（横で溢れない） 54vh + 20px … 画面の高さに追従する（これが主役） 660px … 大きな画面での上限 */ /* ★列そのものが本体の幅になっているので、ここは100%でよい。 ここに vh の式を書くと、列の幅と二重に効いて余白ができる。 */ width: 100%; margin-inline: auto; align-items: start; } .phone { position: relative; /* 枠SVGの縦横比。数値を変えると画面の位置がずれる */ aspect-ratio: 551.203 / 1108.738; filter: drop-shadow(0 14px 30px rgba(40, 10, 8, .28)); } /* 枠。動画より上に置く */ .phone::after { content: ""; position: absolute; inset: 0; z-index: 2; background: url("../img/deco/phone-frame.svg") center / 100% 100% no-repeat; pointer-events: none; } /* 画面。枠の穴とぴったり合わせる */ .phone__screen { position: absolute; top: 2.491%; right: 7.195%; bottom: 2.491%; left: 6.468%; z-index: 1; overflow: hidden; /* ★x方向とy方向で別に指定する。 単に 14% と書くと縦に伸びた角丸になる。 */ border-radius: 14.05% / 6.35%; /* ★cover なので帯は出ない。読み込み前に枠の中が透けないための下地。 */ background: #000; display: grid; } /* ★★cover。指示により contain から変更した（2026-09-04）。 経緯を残しておく。一度 contain に変えて、また cover に戻している。 枠の画面は 1:2.214（実物のiPhoneと同じ縦長）、 入れる動画は 9:16（1:1.778）。比率が違う。 cover … 高さに合わせて左右が約19.7%（片側24px前後）切られる。 端に寄せたテロップが欠ける。 contain … 動画が丸ごと入り、上下に黒帯が出る（高さの約20%）。 はじめ cover で「見切れている」と指摘を受けて contain にしたが、 こんどは「スマホの画面いっぱいに広げたい。テロップが多少切れても構わない」 という指示だったので cover に戻した。 ★★次に「テロップが切れる」と言われても、勝手に contain に戻さないこと。 見切れることは承知のうえでの指示。判断が変わったか必ず確認する。 ★cover にしたので上下の黒帯は出ない。 .phone__screen の background:#000 は、動画の読み込み前に 枠の中が透けないようにするためだけに残している。 */ .phone__screen video, .phone__screen img { width: 100%; height: 100%; object-fit: cover; grid-area: 1 / 1; display: block; } .phone__screen .ph { grid-area: 1 / 1; width: 100%; height: 100%; border-radius: 0; background: linear-gradient(160deg, #3A3A42 0%, #22222a 100%); color: rgba(255,255,255,.42); font-size: 10px; letter-spacing: .08em; } /* ★1079px以下は縦積みのレイアウト（スマホが上・テキストが下）。 縦に積むぶん高さに余裕が無いので、高さ基準にすると小さくなりすぎる。 横幅いっぱいまで使う（2列は保つ）。 ★境界を899pxから1079pxに合わせている。 .tkfv__inner が2カラムになるのは1080px以上。 */ @media (max-width: 1079px) { .phones { width: min(100%, 460px); gap: 8px; } } /* ========================================================== 41. CTA帯（説明文つきボタン2つ） ========================================================== ブランドカラーの面に斜めのストライプを敷き、 「小さな説明文＋横長のボタン」を2つ並べる形。 ★ボタンの角は落としていない（角丸にしない）。 サイト全体のボタンは .btn で角丸だが、この帯だけ意図的に角ばらせている。 .btn を使わず独自のクラスにしているのはそのため。 ★矢印は擬似要素で描いている（画像・アイコンフォントを増やさない）。 */ .ctaduo { position: relative; overflow: hidden; background: var(--c-red); } /* 斜めのストライプ。濃さを上げると文字が読みにくくなるので薄く保つ */ .ctaduo::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( 115deg, rgba(255,255,255,.075) 0 clamp(34px, 4vw, 62px), rgba(255,255,255,0) clamp(34px, 4vw, 62px) clamp(80px, 9.6vw, 150px)); } .ctaduo__inner { position: relative; z-index: 1; display: grid; gap: clamp(20px, 2.4vw, 40px); padding-block: clamp(30px, 3.8vw, 58px); } @media (min-width: 768px) { .ctaduo__inner { grid-template-columns: 1fr 1fr; } } .ctaduo__cap { margin-bottom: clamp(10px, 1.1vw, 16px); text-align: center; /* ★下限は12.5px。ここは読ませる一文なので11pxでは小さい */ font-size: clamp(12.5px, 1.1vw, 14px); font-weight: 700; letter-spacing: .04em; color: #fff; } .ctaduo__btn { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(58px, 5.5vw, 84px); padding: 12px clamp(42px, 4.4vw, 62px); font-size: clamp(14px, 1.32vw, 20px); font-weight: 700; letter-spacing: .02em; line-height: 1.4; text-align: center; transition: transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s var(--ease); } /* 右端の「>」。border で三角ではなく山形を描く */ .ctaduo__btn::after { content: ""; position: absolute; right: clamp(16px, 1.9vw, 28px); width: 9px; height: 9px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; rotate: 45deg; } .ctaduo__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(60, 8, 6, .3); } .ctaduo__btn--dark { background: #000; color: #fff; } .ctaduo__btn--light { background: #fff; color: var(--c-red); } /* ========================================================== 42. 資料ダウンロードの個別ページ ========================================================== 参考：https://stock-sun.com/download/ad/btob-shindan-marketing-guide/ 左に資料の説明、右にダウンロードフォーム（追従）という組み方。 ★フォームの部品（.form / .field / .input / .select / .check）は お問い合わせページと共通のものを使っている。ここでは器だけ定義する。 ★見出しの帯は事例詳細（.caseart__h2）と同じ見え方に揃えている。 */ /* --- ページ上部の赤い帯（資料ページ・ブログ記事で共通）--- ★.page-head は使わない。クリームのグラデーションが入っており、 読ませるページでは背景が薄すぎてメリハリが出ない。 ★見出しに .sec-head__jp を使わない。あれは14pxの小ラベル用で、 赤い四角の装飾が付くため大見出しには合わない。 ★資料ページ・ブログ記事・事例詳細で共通。違いはタイトルの寄せ方だけ （中央にするときは .pghead__ttl--center）。 以前あった「表紙を帯に食い込ませる」作りは廃止している。 */ .pghead { position: relative; overflow: hidden; background: var(--c-red); color: #fff; padding-block: 0 clamp(28px, 3.4vw, 48px); } /* 斜めのストライプ。CTA帯（41章）と同じ手法・同じ濃さ */ .pghead::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, rgba(255,255,255,.075) 0 clamp(34px, 4vw, 62px), rgba(255,255,255,0) clamp(34px, 4vw, 62px) clamp(80px, 9.6vw, 150px)); } .pghead > .container { position: relative; z-index: 1; } .pghead .breadcrumb { color: rgba(255,255,255,.72); } .pghead .breadcrumb a { color: #fff; } .pghead .breadcrumb li:not(:last-child)::after { color: rgba(255,255,255,.4); } .pghead__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: clamp(10px, 1.2vw, 16px); } .pghead__date { font-family: var(--font-en); font-size: 14px; font-weight: 700; color: rgba(255,255,255,.8); } .pghead__meta .tag, .pghead__tag .tag { background: #fff; color: var(--c-red); } .pghead__tag { margin-top: clamp(10px, 1.2vw, 16px); text-align: center; } .pghead__ttl { margin-top: clamp(8px, 1vw, 14px); font-size: clamp(21px, 2.8vw, 38px); font-weight: 700; line-height: 1.5; letter-spacing: -.01em; color: #fff; } .pghead__ttl--center { text-align: center; } /* ★表紙とフォームを帯に食い込ませる作りは廃止した。 画面幅によって重なり量が変わり、どう調整しても「かぶって見える」ため。 資料ページ・ブログ記事・事例詳細はすべて「重ねない」で揃えている。 負のマージンをここに足さないこと。 */ /* 本体は白で通す。 ★overflow を visible に戻すこと。.section は overflow:hidden を持っており、 その中では position:sticky が効かない（フォームが追従せず、初期位置も96pxずれる）。 */ .dlbody { background: var(--c-white); overflow: visible; } .dlpage__grid { display: grid; gap: clamp(30px, 4vw, 56px); align-items: start; } /* ★右カラムの幅は .artgrid（ブログ・事例）と同じ値にすること。 ここだけ広いと、同じフォームがページによって太さが変わって見える。 */ @media (min-width: 1000px) { .dlpage__grid { grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 360px); } } /* --- 左：資料の説明 --- */ /* ★表紙は16:9。差し替える画像もこの比率で用意すること（1600×900 推奨）。 比率が違う画像を入れると object-fit: cover で上下が切れる。 */ .dlpage__cover { margin-bottom: clamp(24px, 3vw, 40px); } .dlpage__cover .ph, .dlpage__cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md); background: var(--c-white); box-shadow: 0 20px 46px rgba(60, 20, 16, .22); } .dlpage__h2 { margin-top: 2.6em; margin-bottom: 1.2em; padding: clamp(13px, 1.6vw, 18px) clamp(16px, 2vw, 24px); border-radius: var(--r-md); background: var(--c-red); color: #fff; font-size: clamp(16px, 1.9vw, 21px); font-weight: 700; line-height: 1.6; } .dlpage__h2:first-of-type { margin-top: 0; } .dlpage p { font-size: 15px; line-height: 2; margin-bottom: 1.4em; } /* 収録内容。番号は counter で振る（手で書くと差し込み時にずれる） */ .dlpage__toc { list-style: none; padding: 0; counter-reset: toc; display: grid; gap: 10px; } .dlpage__toc > li { counter-increment: toc; position: relative; padding: 12px 16px 12px 52px; border-radius: var(--r-md); background: var(--c-white); border: 1px solid var(--c-line); font-size: 14.5px; line-height: 1.8; } .dlpage__toc > li::before { content: counter(toc); position: absolute; left: 14px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-red); color: #fff; font-family: var(--font-en); font-size: 13px; font-weight: 700; } .dlpage__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: clamp(20px, 2.4vw, 30px); padding-top: clamp(16px, 2vw, 24px); border-top: 1px solid var(--c-line); font-size: 13px; color: var(--c-text-sub); } .dlpage__meta b { color: var(--c-text); } /* --- 右：ダウンロードフォーム --- */ /* ★ここに .dlpage > *:first-child { margin-top: 0 } を置いてはいけない。 表紙を上の帯に食い込ませる負のマージンを打ち消してしまい、 左（表紙）と右（フォーム）の上端が148pxずれる。 */ .dlpage__form { background: var(--c-white); border: 2px solid var(--c-red); border-radius: var(--r-lg); padding: clamp(18px, 1.9vw, 26px); box-shadow: 0 20px 46px rgba(60, 20, 16, .14); } @media (min-width: 1000px) { /* ヘッダー（76px）に隠れないように余裕を持たせる */ .dlpage__form { position: sticky; top: 96px; } } .dlpage__formttl { text-align: center; font-weight: 700; line-height: 1.5; font-size: clamp(16px, 1.8vw, 20px); margin-bottom: clamp(6px, .8vw, 10px); } .dlpage__formsub { text-align: center; font-size: 12px; color: var(--c-text-mute); margin-bottom: clamp(18px, 2vw, 26px); } .dlpage__form .form { gap: 18px; } .dlpage__form .form__submit { justify-self: stretch; } /* 送信後に出るダウンロードボタンの箱 */ /* ★フォームの上に出す。送信すると入力欄が消えるわけではないので、 どこを見ればよいか分かるように枠で囲んでいる。 */ .dlpage__done { display: grid; gap: 10px; justify-items: center; text-align: center; margin-bottom: 18px; padding: 18px 16px; border: 2px solid #1E7A4B; border-radius: var(--r-md); background: #F1FAF4; } .dlpage__donettl { font-size: 14px; font-weight: 700; line-height: 1.7; color: #14603A; } .dlpage__donesub { font-size: 12px; color: var(--c-text-mute); } .dlpage__done .btn { width: 100%; justify-content: center; } .dlpage__form .btn { width: 100%; justify-content: center; } /* ★右カラムのフォームは入力欄を本文用より低くする。 .input の padding は 14px（お問い合わせページ用）で、 狭いカラムに縦に7つ並ぶと箱が大きく見えてしまう。 */ .dlpage__form .input, .dlpage__form .select, .artform .input, .artform .select { padding-block: 11px; font-size: 14px; } /* 狭い場所でも比は保つ（4px と 18px／14px で3.5〜4.5倍） */ .dlpage__form .field, .artform .field { gap: 4px; } .dlpage__form .field__label, .artform .field__label { font-size: 13px; } /* 縦に並ぶ画面では、フォームへ誘導する帯を出す */ .dlpage__jump { margin-top: clamp(30px, 4vw, 52px); text-align: center; font-size: clamp(14px, 1.7vw, 19px); font-weight: 700; } .dlpage__jump span { color: var(--c-red); } @media (min-width: 1000px) { .dlpage__jump { display: none; } } /* ========================================================== 43. 記事の2カラム＋右カラムの相談フォーム ========================================================== 参考：https://stock-sun.com/column/youtube-growth/ ブログ記事と事例詳細で共通して使う。 ★sticky を効かせるには、囲っているセクションの overflow を visible にすること。 .section は overflow:hidden を持っており、その中では position:sticky が死ぬ （追従しないうえ、初期位置も top の値だけずれる）。→ .artsec で解除している。 */ /* 記事本文のセクション。 ★overflow を visible にすること。.section は overflow:hidden を持っており、 その中では position:sticky が死ぬ（追従せず、初期位置も top の値だけずれる）。 */ .artsec { overflow: visible; background: var(--c-white); } .artgrid { display: grid; gap: clamp(32px, 4vw, 56px); align-items: start; } @media (min-width: 1000px) { .artgrid { grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 360px); } } /* --- 右カラム --- */ @media (min-width: 1000px) { .artside { position: sticky; top: 96px; } } .artform { background: var(--bg-cream); border-radius: var(--r-lg); padding: clamp(18px, 2vw, 26px); } .artform__ttl { text-align: center; font-weight: 700; line-height: 1.5; font-size: clamp(15px, 1.6vw, 19px); margin-bottom: clamp(4px, .5vw, 7px); } .artform__sub { text-align: center; font-size: 11.5px; color: var(--c-text-mute); margin-bottom: clamp(14px, 1.6vw, 20px); } .artform .form { gap: 18px; } .artform .field__label { font-size: 13px; } .artform .input, .artform .select { background: var(--c-white); } .artform .field__hint { font-size: 11px; } .artform .form__submit { justify-self: stretch; } .artform .btn { width: 100%; justify-content: center; } /* ========================================================== 44. 記事に差し込むブロック（宣伝・お問い合わせ導線） ========================================================== 記事本文の途中に差し込んで、宣伝や相談につなげるための部品。 一覧は /blocks/ で確認できる（本番公開前に消してよい確認用ページ）。 ★WordPress側では SWELL の「ブログパーツ」として登録し、 [blog_parts id="..."] で記事に差し込む運用にする。 テーマ側にショートコードの受け皿は既に用意済み（functions.php）。 ★左に縦帯を出す囲みは禁止。枠は全周か、背景ベタにする。 */ .pb { margin: clamp(30px, 3.6vw, 52px) 0; } /* ★これらのブロックは .prose（記事本文）の中に入るので、.prose の指定を打ち消す。 打ち消さないと次の2つが起きる。 1. 箇条書きに「・」が付き、自前のチェックマークと二重になる 2. .prose a の色（赤）がボタンにも当たり、赤地に赤文字で文字が消える */ .prose .pb ul { list-style: none; padding-left: 0; margin-bottom: 0; } .prose .pb ul > li { margin-bottom: 0; } .prose .pb ul > li::marker { color: transparent; } .prose .pb a { text-decoration: none; } .prose .pb p { margin-bottom: 0; } .prose .pb .btn--primary { color: var(--c-white); } .prose .pb .btn--light { color: var(--c-text); } .prose a.pb--link { color: inherit; } /* まとめブロックの番号付きリストは .prose の指定をそのまま使ってよい */ .prose .pb--summary ol { list-style: decimal; padding-left: 1.4em; } .prose .pb--summary li { margin-bottom: 6px; } /* ★事例の本文（.caseart）にも同じブロックを差し込む。 46章で .caseart ul / ol / a に体裁を当てているので、 .prose と同じ打ち消しをこちらにも用意する。 用意しないと、事例に差し込んだときだけ 「箇条書きの点が二重に出る」「ボタンに下線が付く」が起きる。 */ .caseart .pb ul { list-style: none; padding-left: 0; margin: 0; } .caseart .pb ul > li { margin-bottom: 0; font-size: inherit; line-height: inherit; } .caseart .pb ul > li::marker { color: transparent; } .caseart .pb a { text-decoration: none; } .caseart .pb p { margin-bottom: 0; } .caseart .pb .btn--primary { color: var(--c-white); } .caseart .pb .btn--light { color: var(--c-text); } .caseart .pb--summary ol { list-style: decimal; padding-left: 1.4em; margin: 12px 0 0; } .caseart .pb--summary li { margin-bottom: 6px; font-size: inherit; line-height: inherit; } /* ブロック自体の上下の間隔（記事の段落と詰まって見えないようにする） */ .prose .pb, .caseart .pb { margin-block: clamp(28px, 3.4vw, 44px); } /* --- 1. サービス紹介（枠の上辺に見出しが乗る） --- */ .pb--service { position: relative; border: 2px solid var(--c-red); border-radius: var(--r-md); padding: clamp(26px, 3vw, 38px) clamp(18px, 2.2vw, 30px) clamp(20px, 2.4vw, 30px); } .pb__ribttl { position: absolute; top: 0; left: clamp(16px, 2vw, 26px); translate: 0 -50%; padding: 0 12px; background: var(--c-white); font-size: clamp(13px, 1.4vw, 16px); font-weight: 700; color: var(--c-red); } .pb__list { list-style: none; padding: 0; display: grid; gap: 10px; } .pb__list > li { position: relative; padding: 0 0 10px 30px; border-bottom: 1px dashed var(--c-line); font-size: 14.5px; line-height: 1.8; } .pb__list > li:last-child { border-bottom: 0; padding-bottom: 0; } /* チェックマークは擬似要素で描く */ .pb__list > li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 13px; height: 7px; border-left: 2.4px solid var(--c-red); border-bottom: 2.4px solid var(--c-red); transform: rotate(-45deg); } .pb__foot { margin-top: clamp(16px, 1.8vw, 22px); } .pb__foot .btn { width: 100%; justify-content: center; } /* --- 2. 資料ダウンロード（表紙＋説明＋ボタン） --- */ .pb--doc { display: grid; gap: clamp(14px, 1.8vw, 24px); padding: clamp(18px, 2.2vw, 28px); border-radius: var(--r-md); background: var(--bg-cream); } @media (min-width: 640px) { .pb--doc { grid-template-columns: clamp(140px, 20vw, 200px) 1fr; align-items: center; } } .pb--doc img, .pb--doc .ph { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-sm); background: var(--c-white); box-shadow: 0 8px 20px rgba(80, 50, 40, .12); } .pb__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--c-red); } .pb__ttl { margin-top: 4px; font-size: clamp(15px, 1.7vw, 19px); font-weight: 700; line-height: 1.6; } .pb__txt { margin-top: 8px; font-size: 13px; line-height: 1.85; color: var(--c-text-sub); } /* --- 3. 相談CTA（赤ベタ＋斜めストライプ） --- */ .pb--cta { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--c-red); color: #fff; padding: clamp(22px, 2.6vw, 34px) clamp(18px, 2.2vw, 30px); text-align: center; } .pb--cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, rgba(255,255,255,.08) 0 clamp(26px, 3vw, 46px), rgba(255,255,255,0) clamp(26px, 3vw, 46px) clamp(60px, 7vw, 110px)); } .pb--cta > * { position: relative; z-index: 1; } .pb--cta .pb__ttl { font-size: clamp(16px, 2vw, 24px); } .pb--cta .pb__txt { color: rgba(255,255,255,.82); } .pb--cta .pb__foot .btn { width: auto; min-width: min(100%, 280px); } /* --- 4. 関連サービスへのリンク --- */ .pb--link { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 20px); padding: clamp(14px, 1.8vw, 22px) clamp(16px, 2vw, 26px); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-white); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .pb--link:hover { border-color: var(--c-red); box-shadow: var(--shadow-card); } .pb--link img, .pb--link .ph { width: clamp(56px, 7vw, 84px); aspect-ratio: 1; flex: none; border-radius: var(--r-sm); object-fit: cover; } .pb--link .pb__arrow { margin-left: auto; flex: none; color: var(--c-red); } /* --- 5. この記事のまとめ --- */ .pb--summary { border-radius: var(--r-md); background: var(--bg-cream-2); padding: clamp(18px, 2.2vw, 28px); } .pb--summary .pb__ttl { display: flex; align-items: center; gap: 10px; } .pb--summary .pb__ttl::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c-red); flex: none; } .pb--summary ol { margin: 12px 0 0; padding-left: 1.4em; } .pb--summary li { font-size: 14px; line-height: 1.9; margin-bottom: 6px; } /* ========================================================== 45. 前後のニュース（記事の下に置く送り） ========================================================== */ .newsnav { display: grid; gap: clamp(10px, 1.4vw, 18px); margin-top: clamp(34px, 4.4vw, 60px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--c-line); } @media (min-width: 640px) { .newsnav { grid-template-columns: 1fr 1fr; } } .newsnav__item { position: relative; display: block; padding: clamp(14px, 1.7vw, 20px) clamp(16px, 2vw, 24px); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-white); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .newsnav__item:hover { border-color: var(--c-red); box-shadow: var(--shadow-card); } .newsnav__label { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--c-red); } .newsnav__ttl { display: block; font-size: 14px; font-weight: 700; line-height: 1.65; } /* 矢印は擬似要素で描く。前は左向き、次は右向き */ .newsnav__label::before, .newsnav__label::after { display: inline-block; } .newsnav__item--prev .newsnav__label::before { content: "← "; } .newsnav__item--next { text-align: right; } .newsnav__item--next .newsnav__label::after { content: " →"; } /* ========================================================== 46. 事例本文を WordPress のエディタで書いたときの体裁 ========================================================== 事例のインタビュー本文は、章の数も質問の数も事例ごとに違うので ACFの連番フィールドでは足りない。そのため本文はエディタで書く。 ★ここは「クラスを付けずに普通に書いても、そこそこ正しく見える」ための保険。 見出し2＝章タイトル、引用＝質問、として扱う。 ★正確な体裁（ーー付きの質問・赤い話者名）はブログパーツで出す。 ブログパーツは .caseart__q / .caseart__who を直接出力するので、 下の指定より優先される（クラス指定のほうが詳細度が高い）。 ★.prose は既存記事（SWELL由来）用の別系統。混ぜないこと。 */ /* 見出し2 → 帯見出し（.caseart__h2 と同じ見た目にする） */ .caseart h2 { margin-top: 3.2em; margin-bottom: 1.8em; padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 26px); border-radius: var(--r-md); background: var(--bg-cream); font-size: clamp(17px, 2.1vw, 21px); font-weight: 700; line-height: 1.7; } /* 見出し3 → 章の中の小見出し */ .caseart h3 { margin-top: 2.4em; margin-bottom: 1em; font-size: clamp(16px, 1.9vw, 18px); font-weight: 700; line-height: 1.8; } /* 引用ブロック → インタビューの質問 ★左に縦帯を出す囲みは使わない。ーー を頭に付けるだけにする。 */ .caseart blockquote { margin: 2.6em 0 1.2em; padding: 0; border: 0; background: none; font-weight: 700; line-height: 1.9; } .caseart blockquote > :first-child::before { content: "ーー"; color: var(--c-red); } .caseart blockquote p { margin-bottom: .6em; line-height: 1.9; } .caseart blockquote p:last-child { margin-bottom: 0; } .caseart blockquote cite { display: block; margin-top: .6em; font-size: 13px; font-style: normal; font-weight: 400; color: var(--c-text-mute); } /* 箇条書き */ .caseart ul, .caseart ol { margin: 0 0 1.5em 1.4em; } .caseart ul li, .caseart ol li { font-size: 15px; line-height: 2.1; margin-bottom: .4em; } .caseart ul { list-style: disc; } .caseart ol { list-style: decimal; } /* エディタが吐く画像ブロック（figure）にも .caseart__fig と同じ体裁を当てる */ .caseart figure { margin: 2.4em 0; } .caseart figure img { width: 100%; height: auto; border-radius: var(--r-md); } .caseart figcaption { margin-top: 12px; font-size: 13px; line-height: 1.8; color: var(--c-text-mute); text-align: left; } /* テーブル（成果の数字を並べるとき） */ .caseart table { width: 100%; margin: 2em 0; border-collapse: collapse; font-size: 14px; } .caseart th, .caseart td { padding: 12px 14px; border: 1px solid var(--c-line); line-height: 1.8; text-align: left; } .caseart th { background: var(--bg-cream); font-weight: 700; } /* 本文中のリンクは下線を残す（記事なので押せることが分かる必要がある） */ .caseart a { color: var(--c-red); text-decoration: underline; text-underline-offset: .2em; } /* ========================================================== 47. Contact Form 7 が出すマークアップの手当て ========================================================== フォームは Contact Form 7 で作る。CF7は独自のクラスを足すので、 サイトのデザインに合わせる指定をここに置く。 ★CF7は

を
で包み、 各入力欄を で包む。 この span が inline のままだと、入力欄の幅が100%にならない。 ★エラー文と送信結果は放っておくと素のテキストで出る。読めるようにする。 ★このサイト側のフォームは .form / .field / .input / .select / .textarea。 CF7のフォーム定義でも同じクラスを付けること（class: オプション）。 */ .wpcf7 { margin: 0; } /* 入力欄を包む span を block にする（これが無いと幅が効かない） */ .wpcf7-form-control-wrap { display: block; } /* --- 必須項目のエラー文 --- */ .wpcf7-not-valid-tip { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; line-height: 1.7; color: var(--c-red); } /* エラーの欄は枠を赤くする（文字だけだと見落とす） */ .wpcf7-not-valid { border-color: var(--c-red) !important; background: #FFF7F7; } /* --- 送信後のメッセージ --- */ .wpcf7-response-output { margin: 24px 0 0 !important; padding: 16px 18px !important; border: 1px solid var(--c-line) !important; border-radius: var(--r-md); font-size: 14px; line-height: 1.8; } /* 送信できたとき */ .wpcf7 form.sent .wpcf7-response-output { border-color: #1E7A4B !important; background: #F1FAF4; color: #14603A; } /* 入力に不備があるとき／送れなかったとき */ .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output { border-color: var(--c-red) !important; background: #FFF7F7; color: var(--c-red-deep); } /* --- 送信中のくるくる --- */ .wpcf7-spinner { margin: 0 0 0 10px; vertical-align: middle; } /* --- 同意チェック --- */ /* CF7の [acceptance] は、こういう入れ子で出てくる。 span.wpcf7-form-control-wrap span.wpcf7-acceptance span.wpcf7-list-item label input[type=checkbox] span.wpcf7-list-item-label ← ここに文言が入る ★CF7が自分で