/* Theme Name: しろライフ関西 Author: PonzU Description: 遺品整理サービス用のLPテーマ（スマホメイン） Version: 1.0 */ /* ========================================================= 目次（ざっくり） 1. ベース設定 / 共通 2. ヘッダー / ナビ / ハンバーガー 3. メインビジュアル / 雲背景（トップ） 4. 各セクション（about / 選ばれる理由 / 料金 / エリア / 作業実績） 5. コラム（一覧 / 個別 / 背景） 6. お客様の声 7. よくあるご質問（FAQ） 8. 共通ボタン（もっとみる） 9. スクロール装飾 10. フッター ========================================================= */ /* ==================== 1) ベース設定 / 共通 ==================== */ :root{ --header-h: 5rem; --info-bar-h: 44px; /* 追加 */ --primary: #07207f; /* メインカラー */ --accent: #39d85f; /* LINEボタン */ --content-max: 980px; /* コンテンツ最大幅 */ --section-pad: 2rem 1rem; /* セクション共通余白 */ } *, *::before, *::after{ box-sizing: border-box; } html { height: 100%; font-size: 16px; font-family: "M PLUS 1p", "Noto Sans JP", sans-serif; background-color: #fffefc; color: #473607; overflow-x: clip; /* 横揺れ防止（clip対応外は下の body で担保） */ width: 100%; max-width: 100%; scroll-padding-top: calc(var(--header-h) + var(--info-bar-h) + 16px); } body { height: 100%; margin: 0; padding: 0; line-height: 1.8; text-align: center; width: 100%; /* ▼ sticky footer（画面の高さが足りない時でもフッターを最下部へ） */ min-height: 100vh; display: flex; flex-direction: column; max-width: 100%; overflow-x: hidden; background-image: url("./images/bg-about2.png"); background-size: 600px; } @media (min-width: 1200px) { body { background-size: cover; } } /* body の子要素のうち、メイン領域を伸ばしてフッターを下に押し出す */ /* ※このテーマはの直下に .container があるため、.container も flex の対象にする */ main, #content, .site, .site-content, #page, .container { flex: 1 0 auto; } /* WPのラッパーがある場合でも sticky footer を効かせる */ .container{ display: flex; flex-direction: column; min-height: 100vh; } footer{ flex-shrink: 0; margin-top: auto; /* 余白がある時は最下部へ */ } /*アイコンフォントを水平ラインに合わせる*/ .material-icons { vertical-align: -5px; } a { color: #473607; text-decoration: none; } a:visited { color: #473607; } a:hover { text-decoration: underline; } /* ==================== 2) ヘッダー / ナビ / ハンバーガー ==================== */ /* ヘッダー */ header { top: 4rem; display: flex; justify-content: space-between; align-items: center; padding: 1rem; box-sizing: border-box; max-width: 100%; /*ヘッダー固定*/ position: fixed; top: 0; left: 0; width: 100%; z-index: 999; background-color: #fffefc; /* 背景は必須（透明だと下が透けちゃう） */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 影つけて浮かせ感 */ } .site-header { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; /* ←ヘッダー左右の安全余白 */ height: 5rem; z-index: 9999; } .logo{ flex-shrink: 0; } .logo img{ height: 58px; /* ←少し小さめで固定 */ width: auto; max-width: 200px; /* ←これ超重要 */ margin-top: 6px; } .logo a { margin: 0; padding: 0 0 0 10px; } /* ヘッダーLINEボタン */ .header-line-btn{ display: none; /* PCでは非表示 */ } /* スマホ・タブレットだけ表示 */ @media (max-width: 1024px){ .site-header{ display: flex; align-items: center; justify-content: space-between; } .header-right{ display: flex; align-items: center; gap: 6px; /* LINE とハンバーガーの距離を広げる */ margin-left: auto; /* 右側へ押し出す */ padding: 0; } /* ハンバーガーを少し左に寄せる（右端の余白を作る） */ .hamburger{ margin-left: 1px; } } /* ハンバーガーメニュー */ header .logo { font-weight: bold; font-size: 1rem; } header nav a { color: #333; text-decoration: none; font-size: 0.9rem; margin-left: 1rem; } .hamburger { margin-top: 2px; width: 44px; height: 56px; /* ← ここ超重要：箱を大きくする */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; /* 線の間隔 */ cursor: pointer; flex-shrink: 0; } /* ３本線 */ .hamburger span { display: block; width: 28px; height: 4px; background: #333; border-radius: 2px; } /* 「メニュー」文字 */ .hamburger::after{ content: "メニュー"; font-size: 9px; font-weight: 700; color: #333; margin-top: 4px; } .nav-menu { display: none; position: absolute; top: 5rem; right: 1px; width: 50%; height: 25rem; background: #fffefc; padding: 1rem 1rem 1rem 1rem; border: 1px solid #ccc; z-index: 998; } .nav-menu a { font-size: 18px; } .nav-menu.active { display: block; } .nav-menu ul { list-style: none; margin: 0; padding: 0; } .nav-menu li { margin-bottom: 1.5rem; } .nav-menu a { text-decoration: none; color: #333; } /*メニュー外クリックで閉じる用*/ .menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); display: none; z-index: 90; /* nav-menu より下、hamburger より上 */ } .menu-overlay.active { display: block; } /* 固定ヘッダー＋上のお知らせバー分、スクロール停止位置を下げる */ section[id]{ scroll-margin-top: calc(var(--header-h) + var(--info-bar-h) + 1px); } /* もし section じゃなく h2 に id が付いてる場合も保険 */ h2[id], h3[id], .anchor[id]{ scroll-margin-top: calc(var(--header-h) + var(--info-bar-h) + 1px); } /* ==================== 3) トップ（現行） / 旧構成（未使用） ==================== */ /* ----- Legacy start: 旧トップ構成（現在未使用） ----- */ .main-visual { position: relative; text-align: center; margin: 0; /* ←左右の余白を消して背景をフル幅に */ padding: 0; /* section共通のpaddingは後で上書きする */ padding-top: 2rem; /* ヘッダー固定ぶんの空き */ } .main-visual-img { width: 100%; height: auto; } /* メインビジュアルだけは共通paddingを無効化（旧構成用） */ section.main-visual { padding: 0; padding-top: calc(var(--header-h) + var(--info-bar-h)); } /* 旧メインビジュアル画像サイズ */ .main-visual img { display: block; width: 100%; height: auto; } .top-bg-cloud{ position: relative; overflow: hidden; } /* 雲レイヤー */ .top-bg-cloud .cloud-bg{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; pointer-events: none; background-image: url("./images/bg-cloud.png"); background-repeat: repeat-x; background-position: 0 100%; background-size: auto; animation: cloud-move 35s linear infinite; } .top-bg-cloud picture{ position: relative; z-index: 1; display: block; max-width: 1100px; /* ここで中身の最大幅を決める */ margin: 0 auto; } .top-bg-cloud img{ position: relative; z-index: 1; display: block; width: 100%; height: auto; } /* 雲ラッパー（この中は全部同じ雲背景） */ .top-cloud-wrap{ position: relative; overflow: hidden; padding-top: calc(var(--header-h) + var(--info-bar-h)); /* ヘッダー＋お知らせバーぶん */ padding-bottom: 0px; } /* 雲レイヤー（全体に敷く） */ .top-cloud-wrap .cloud-bg{ position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("./images/bg-cloud.png"); background-repeat: repeat; /* ← repeat-x じゃなく repeat にして “ちぎれ”防止 */ background-position: 0 0; background-size: 520px auto; /* ←雲の密度（好みで調整） */ animation: cloud-move 45s linear infinite; will-change: background-position; /* 初動とアニメーションのカクつき軽減 */ transform: translateZ(0); /* 先にレイヤー化して描画負荷を下げる */ } /* 中身は雲より前に */ .top-cloud-wrap > :not(.cloud-bg){ position: relative; z-index: 1; } /* スマホ：メイン画像（中央の白い枠）を少し小さくする */ @media (max-width: 767px) { .top-bg-cloud picture { max-width: 360px; /* 好みで 320〜380px くらいで調整 */ } } /* ----- Legacy end: 旧トップ構成（現在未使用） ----- */ /* .catch { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -30%); color: white; text-shadow: 1px 1px 3px rgba(0,0,0,0.6); } */ /* 現行トップ（index.php） */ /*LINEボタン*/ .top-hero{ position: relative; width: 100%; max-width: 900px; margin: 0 auto; padding: 0; } .top-hero picture, .top-hero img{ display: block; width: 100%; height: auto; } .top-hero img{ padding-top: 1.5rem; } .hero-line-btn{ position: absolute; left: 40%; top: 82%; transform: translate(-50%, -50%); z-index: 5; display: inline-flex; align-items: center; justify-content: center; padding: 18px 56px; border-radius: 999px; text-decoration: none; font-weight: 800; font-size: clamp(18px, 2.2vw, 34px); line-height: 1; color: #fff; background: linear-gradient(180deg, var(--accent) 0%, #22b44a 100%); box-shadow: 0 10px 0 rgba(0,0,0,.18); } /* ボタン文字色がリンク色に上書きされるのを防ぐ */ .hero-line-btn, .hero-line-btn:visited, .hero-line-btn a, .hero-line-btn a:visited{ color: #fff !important; -webkit-text-fill-color: #fff; /* Safari対策 */ } .hero-line-btn:hover{ transform: translate(-50%, -52%); /* ちょい浮く */ text-decoration: none; } .hero-line-btn:active{ transform: translate(-50%, -48%); /* 押し込み */ box-shadow: 0 6px 0 rgba(0,0,0,.18); } @media (min-width: 768px) and (max-width: 1024px){ .hero-line-btn{ font-size: clamp(32px, 2.9vw, 42px); padding: 18px 36px; /* 必要なら影も少しだけ */ box-shadow: 0 8px 0 rgba(0,0,0,.18); } } @media (max-width: 767px){ .hero-line-btn{ top: 85%; padding: 8px 12px; font-size: clamp(16px, 2.2vw, 24px); min-width: 170px; box-shadow: 0 5px 0 rgba(0,0,0,.18); } } @media (max-width: 360px){ .hero-line-btn{ padding: 8px 16px; font-size: 14px; min-width: 0; /* 170px固定を解除 */ width: min(47%, 180px); /* 画面に合わせて縮む */ white-space: nowrap; /* 変な改行防止（必要なら） */ } } /* ==================== 4) 各セクション（about / 選ばれる理由 / 料金 / エリア / 作業実績） ==================== */ /*　しろライフについて　*/ .top2 { background-color: #f0f8f4; /* 画像が読めない時の保険 */ background-image: url("./images/bg-top2.png"); border-radius: 30px; background-repeat: no-repeat; background-position: center; background-size: cover; /* 画面幅に合わせていい感じに敷く */ /* ここがポイント：固定 height をやめて、画面幅に応じて必要な高さを確保 */ width: 100%; min-height: 600px; padding: 30px 20px; position: relative; overflow: hidden; margin: 0; margin-bottom: 20px; box-sizing: border-box; } /* top2セクション：上に重ねる画像（/images/top2.png） */ .top2::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("./images/top2.png"); background-repeat: no-repeat; background-position: center; background-size: 42% auto; margin: 0px 0; /* うっすら重ねたい場合は 0.2〜0.6 で調整 */ opacity: 1; } /* top2の中身は重ね画像より前面に */ .top2 > * { position: relative; z-index: 1; } /* スマホ用 */ @media (max-width: 767px) { .top2::before { background-size: 92% auto; margin: 0; } .top2 { width: 100%; min-height: clamp(420px, 85vw, 560px); /* Surface Duo(540px幅)でも見切れにくい */ } } /* タブレット用 */ @media (min-width: 768px) and (max-width: 960px) { .top2::before { background-size: 92% auto; margin: 0; } .top2 { width: 100%; min-height: 700px; } } @media (min-width: 961px) and (max-width: 1190px) { .top2::before { background-size: 92% auto; margin: 0; } .top2 { width: 100%; min-height: 900px; } } /*しろライフについて*/ .logo2-img { height: 50px; margin-top: 10px; width: auto; } /* （未使用/一旦停止中）about セクションの背景案 .about { background-image: url("./images/bg-about2.png"); background-position: center; background-size: 700px; } @media (min-width: 767px) { .about { background-size: cover; } } */ /* キャンペーンバナー */ .cp-banner img { width: 50%; height: auto; display: block; margin: 0 auto; margin-bottom: 50px; transition: transform 0.2s ease, opacity 0.2s ease; } .cp-banner a:hover img { transform: scale(1.02); opacity: 0.95; } @media (max-width: 767px){ .cp-banner img { width: 90%; height: auto; display: block; margin: 0 auto; margin-bottom: 50px; } } /* 選ばれる理由 */ .about2 { background-image: url("./images/bg-top3.png"); background-repeat: no-repeat; background-position: center top; background-size: cover; /* 画面幅に合わせて背景を敷く */ } /* Surface Duo など中間幅で「画像が見切れ」やすいので、セクション内の画像は必ずレスポンシブで縮むようにしておく */ .about2 img { max-width: 100%; height: auto; display: block; margin: 0 auto; } /* 中間幅（Surface Duo 付近）では少しだけ内側に収める */ @media (max-width: 720px) { .about2 img { width: min(92vw, 720px); } } .about2 h2 { border-left: none; font-size: 2rem; z-index: 1; } .about2 h3 { color: #07207f; } /*　数字背景を消えないように */ .number{ position: relative; /* ::before の absolute の基準 */ margin-top: 60px; } .number > *{ position: relative; z-index: 1; } .number::before{ content: ""; position: absolute; top: 40%; left: 35%; transform: translateY(-50%); /* サイズが無いと表示されない */ width: 90px; height: 90px; z-index: 0; pointer-events: none; background-repeat: no-repeat; background-position: center; background-size: contain; } #number-1::before{ background-image: url("./images/number-1.png"); } #number-2::before { background-image: url("./images/number-2.png"); } #number-3::before { background-image: url("./images/number-3.png"); } #number-4::before { background-image: url("./images/number-4.png"); } #number-5::before { background-image: url("./images/number-5.png"); } @media (max-width: 767px){ .number::before{ width: 72px; height: 72px; left: 12px; top: 30%; } } /*料金案内*/ .cp-banner img { margin: 0 auto; } /* バナーのクリック範囲を画像ぴったりに固定 */ .cp-banner > a { display: inline-block !important; width: auto !important; max-width: 100%; line-height: 0; /* 画像下の余白対策 */ } .cp-banner > a > img { display: block; /* 画像の下の謎余白を消す */ width: 100%; height: auto; } .cp-banner { padding: 0px; padding-top: 20px; margin: 0 20px; } @media (min-width: 1190px){ .cp-banner { padding: 0px; padding-top: 20px; margin: 0 300px; } } .price-table{ background: #fffefc; border-radius: 12px; /* ← 表全体の角丸 */ padding: 1rem; box-shadow: 0 2px 5px rgba(0,0,0,0.05); overflow: hidden; /* ← 角丸を効かせるため必須 */ } .price-table table{ width: 100%; border-collapse: separate; /* ← collapse をやめる */ border-spacing: 0; /* ← 余白を消す */ background: #fffefc; font-size: 14px; table-layout: fixed; /* 列幅を安定させる */ } .price-table th, .price-table td{ border: 1px solid #d6eaf4; padding: 0.75rem; text-align: center; vertical-align: middle; } /* ヘッダー行の背景色 */ .price-table th{ background: #d6eaf4; background-size: 300px; font-weight: bold; line-height: 1.45; word-break: keep-all; } .price-table .price-th-sub{ font-size: 0.92em; font-weight: inherit; } .price-table th:nth-child(1), .price-table td:nth-child(1){ width: 43%; } .price-table th:nth-child(2), .price-table td:nth-child(2){ width: 29%; } .price-table th:nth-child(3), .price-table td:nth-child(3){ width: 28%; } /* スマホ：ヘッダー文字のズレ・折返し崩れを抑える */ @media (max-width: 767px){ .price-table{ padding: 0.65rem; } .price-table table{ font-size: clamp(12px, 3.5vw, 14px); } .price-table th, .price-table td{ padding: 0.65rem 0.35rem; } .price-table th:nth-child(2), .price-table th:nth-child(3){ white-space: nowrap; } } /* ▼ 四隅だけ丸くする */ .price-table tr:first-child th:first-child{ border-top-left-radius: 12px; } .price-table tr:first-child th:last-child{ border-top-right-radius: 12px; } .price-table tr:last-child td:first-child{ border-bottom-left-radius: 12px; } .price-table tr:last-child td:last-child{ border-bottom-right-radius: 12px; } .price h2 { margin: 1rem; text-align: left; } /*対応エリア*/ .area { margin: 1rem; text-align:left; } .area-block { margin-bottom: 2rem; } .area-block h3 { font-size: 1.2rem; font-weight: bold; margin-bottom: 0.5rem; } .area-block p { line-height: 1.6; font-size: 13px; } /*作業実績*/ .works { margin: 1rem; text-align: left; background: #fffefc; border-radius: 6px; padding: 1rem; } .works-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 1rem; grid-auto-rows: 1fr; /* 行の高さを揃える */ align-items: stretch; /* カードを行いっぱいに伸ばす */ } /* 作業実績カードスタイル */ .works-card { background: #fffefc; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); text-align: center; transition: transform 0.2s; /* ▼ カードの高さを揃える */ display: flex; flex-direction: column; height: 100%; } .works-card:hover { transform: translateY(-4px); } .works-card img { width: 100%; aspect-ratio: 3 / 4; height: auto; /* 比率枠に合わせる */ object-fit: cover; /* はみ出す分はトリミング */ object-position: center; /* 中央基準でトリミング */ display: block; } .works-card .card-body { padding: 1rem; /* ▼ 本文が短くてもカード高さが揃うように */ display: flex; flex-direction: column; flex: 1; } .works-card .card-title { font-weight: bold; font-size: 1rem; margin: 0.5rem 0; color: #07207f; /* match section heading color for consistency */ } .works-card .card-excerpt { font-size: 0.9rem; color: #555; line-height: 1.5; /* ▼ 抜粋は表示したまま、3行で省略（高さを確保） */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; /* 3行分の高さを最低限確保（短文でもカードが縮まない） */ min-height: calc(1.5em * 3); } /*作業実績個別ページ*/ /* タイトル文字サイズ調整 */ body.single-works h1, body.single-works .entry-title, .single-works h1, .single-works .entry-title{ font-size: 1.4rem; /* ←ここを小さくする（例：1.4rem〜1.8rem） */ line-height: 1.35; color: var(--primary); } .single-works { margin-top: 40px; } .single-works .post-thumbnail img { width: min(520px, 92%); height: auto; margin: 0 auto 1rem; border-radius: 12px; } /* 個別ページ：レイアウト用ラッパー */ .works-single-layout{ max-width: 1100px; margin: 0 auto; display: block; /* スマホは1カラム */ gap: 24px; } .works-single-main{ text-align: left; } /* 右カラム */ .works-single-sidebar{ text-align: left; background: #fffefc; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.08); padding: 16px; } .works-side-title{ margin: 0 0 12px; font-size: 1rem; color: #07207f; border-left: 4px solid #07207f; padding-left: 8px; } .works-related-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .works-related-link{ display: block; padding: 10px 12px; border-radius: 10px; background: rgba(7,32,127,0.05); color: #473607; text-decoration: none; } .works-related-link:hover{ text-decoration: none; background: rgba(7,32,127,0.09); } .works-related-item.is-empty{ color: #777; font-size: .9rem; } /* PCのときだけ2カラム */ @media (min-width: 992px){ .works-single-layout{ display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } .works-single-sidebar{ position: sticky; top: calc(var(--header-h) + var(--info-bar-h) + 16px); } } /* 作業実績：本文内の画像をアイキャッチと同じ“見た目”に揃える（クラシック/ブロック両対応） - 画像サイズ（medium など）はWP側の設定なので、可能なら「大」「フルサイズ」で挿入すると綺麗 - CSS側では「表示幅・中央寄せ・角丸・余白」を統一する */ body.single-works .entry-content img, body.single-works .post-content img, body.single-works .works-content img, body.single-works .content img, .single-works .entry-content img, .single-works .post-content img, .single-works .works-content img, .single-works .content img{ width: min(520px, 92%); /* ←アイキャッチと同じ見た目の幅 */ height: auto; margin: 0.8rem auto 1.2rem; /* 中央寄せ＋上下余白 */ border-radius: 12px; /* ←アイキャッチ(.post-thumbnail img)と同じ値 */ float: none !important; } /* ==================== 5) コラム（一覧 / 個別 / 背景） ==================== */ /*お役立ちコラム*/ .column-intro-title { border: none; } .content-wrap{ max-width: var(--content-max); margin: 0 auto; } .column-single{ padding-top: 130px; } .column-single .entry-content img { margin-bottom: 3rem; } /* コラム個別：アイキャッチ（.column-thumb）を中央配置 */ .column-single .column-thumb{ max-width: var(--content-max); margin: 1.2rem auto 2.2rem; /* 中央寄せ */ padding-left: clamp(16px, 4vw, 140px); padding-right: clamp(16px, 4vw, 140px); box-sizing: border-box; } .column-single .column-thumb img{ display: block; width: 80%; height: auto; margin: 0 auto; /* 念のため */ } .column-single p { margin-top: 2px; } .column-single h1 { font-size: 1.8rem; } /* コラム内（ブロックエディタ/Gutenberg）：余白がバラつかないように統一 */ /* 見出しを「見出しブロック」で揃えると一番安定します（段落＋太字だと余白が別扱いになります） */ .column-single .entry-content :where(h2,h3,h4, h2.wp-block-heading, h3.wp-block-heading, h4.wp-block-heading){ line-height: 1.5; margin: 1.4rem 0 0.8rem; /* 上：下の基本余白 */ padding: 0; } /* 連続する見出しは詰める */ .column-single .entry-content :where(h2,h3,h4) + :where(h2,h3,h4){ margin-top: 0.8rem; } /* 本文ブロックの基本余白（空行ブロックがあると間が広がるので、まずはここで揃える） */ .column-single .entry-content :where(p,ul,ol,figure,table,blockquote){ margin: 0 0 1rem; } /* 見出しの直前が本文ブロックなら、見出しの上余白を少し控えめに */ .column-single .entry-content :where(p,ul,ol,figure,table,blockquote) + :where(h2,h3,h4){ margin-top: 1rem; } /* 先頭ブロックの余白を消す */ .column-single .entry-content > :first-child{ margin-top: 0; } /* 末尾ブロックの余白を消す */ .column-single .entry-content > :last-child{ margin-bottom: 0; } /* コラム個別ページ：本文・タイトル・日付を同じ幅で左寄せ */ /* コラム個別：ブロックは中央に配置し、本文は読みやすく左揃え */ .column-single{ text-align: center; /* 外枠は中央寄せ（ブロックの配置） */ } .column-single .column-title, .column-single .column-date, .column-single .entry-content{ text-align: left; /* テキストは左揃え */ } /* この記事内の“コンテンツ幅”を統一（スマホ〜PCで自然に伸縮） */ .column-single .column-title, .column-single .column-date, .column-single .entry-content{ max-width: var(--content-max); margin-left: auto; margin-right: auto; padding-left: clamp(16px, 4vw, 140px); padding-right: clamp(16px, 4vw, 140px); box-sizing: border-box; } /* 箇条書きが中央寄せっぽく見えるのを防ぐ */ .column-single ul, .column-single ol { padding-left: 1.2em; } .column h2 { text-align: left; } .column-single .entry-content h2, .column-single .entry-content h3, .column-single .entry-content h4, .column-single .entry-content p, .column-single .entry-content ul, .column-single .entry-content ol, .column-single .entry-content figure.wp-block-embed { max-width: 980px; margin-left: auto; margin-right: auto; padding-left: clamp(16px, 4vw, 140px); padding-right: clamp(16px, 4vw, 140px); box-sizing: border-box; text-align: left; } /* コラム本文の内部リンク埋め込みカードは、本文より横長に見せる */ .column-single .entry-content figure.wp-block-embed{ width: 100%; } .column-single .entry-content figure.wp-block-embed .wp-block-embed__wrapper{ width: 100%; } .column-single .entry-content figure.wp-block-embed blockquote.wp-embedded-content, .column-single .entry-content figure.wp-block-embed iframe.wp-embedded-content{ width: 100% !important; max-width: 100% !important; } .column-list{ display: grid; gap: 1rem; text-align: left; } .column-card{ display: block; background: #fff; border-radius: 10px; padding: 2rem; box-shadow: 0 2px 6px rgba(0,0,0,.08); text-decoration: none; color: inherit; } /* TOPのカードだけは横並び（.column-card の display:block を上書き） */ a.column-card.column-card--top{ display: flex; } .column-title{ margin: 0 0 .5rem; font-size: 1.05rem; } .column-excerpt{ margin: 0; font-size: .9rem; color: #555; } .btn-center{ text-align: center; margin-top: 1.5rem; } /* Gutenbergの「中央寄せ」をCSS強制左寄せより優先させる */ body.single-column .column-single .entry-content .has-text-align-center{ text-align: center !important; } /* 右寄せも一応 */ body.single-column .column-single .entry-content .has-text-align-right{ text-align: right !important; } /* 中央寄せのリストが左に見える問題の保険（必要なら） */ body.single-column .column-single .entry-content ul.has-text-align-center, body.single-column .column-single .entry-content ol.has-text-align-center{ list-style-position: inside; padding-left: 0; } /*コラム一覧ページ（アーカイブ）*/ /* NOTE: - 背景（雲）は body::before に固定配置 - 中身（.container / header / main など）は z-index:1 で前面 - .column-archive は幅制限を外してフルブリードに */ /* コラム一覧ページ（アーカイブ）：背景（雲）だけを薄くする */ body.post-type-archive-column{ position: relative; /* 擬似要素の基準 */ background: #fffefc; /* 念のため */ } /* 背景レイヤー（ページ全体に固定） */ body.post-type-archive-column::before{ content: ""; position: fixed; inset: 0; z-index: 0; /* -1 だと html 背景の裏に潜って見えないことがある */ pointer-events: none; background-image: url("./images/bg-cloud.png"); background-repeat: repeat; background-size: 600px auto; /* 好みで調整 */ background-position: 0 0; opacity: 0.25; /* 背景だけ薄く */ } /* ページの中身は背景より前面へ */ body.post-type-archive-column > .container, body.post-type-archive-column > header, body.post-type-archive-column > main, body.post-type-archive-column > section, body.post-type-archive-column > footer{ position: relative; z-index: 1; } .column-archive { background: transparent; /* 画面端まで雲背景を敷く（親に幅制限があってもフルブリードにする） */ width: 100%; /* 上下余白は残しつつ、横は padding で調整 */ margin-top: 0; /* 固定ヘッダー＋infoバーの高さぶん下げる（+少し余白） */ padding-top: calc(var(--header-h) + var(--info-bar-h) + 0rem); scroll-margin-top: calc(var(--header-h) + var(--info-bar-h) + 0px); padding-right: 1rem; padding-bottom: 2rem; padding-left: 1rem; position: relative; /* 擬似要素の基準 */ z-index: 1; overflow-x: clip; /* 横揺れだけ防止（縦は切らない） */ } /* 背景はフル幅、カード一覧だけ中央寄せで読みやすい幅に */ .column-archive .column-list{ max-width: 980px; margin: 0 auto; } @media (min-width: 768px){ .column-archive .column-list{ max-width: 1100px; } } /*お役立ちコラムロゴ・アイコン*/ .column-ttl{ display: inline-flex; align-items: center; margin-right: 40px; margin-top: 0; gap: 8px; color: #07207f; } .column-ttl::before{ content: ""; width: 60px; height: 60px; background: url("./images/shiro-icon.png") no-repeat center / contain; display: inline-block; } /* WPの絵文字(img.emoji)はデフォルトで左右に margin が付くので、見出し内だけ打ち消す */ .column-ttl img.emoji, .column-ttl img.wp-smiley{ margin: 0 !important; padding: 0 !important; vertical-align: middle !important; } /* ============================= コラム：関連記事横長（内部リンク） ============================= */ .recommended-posts__list{ display:flex; flex-direction:column; gap:18px; } .recommended-posts__item{ list-style:none; } .recommended-posts__link{ display:flex; align-items:center; gap:16px; background:#fff; border-radius:14px; padding:14px 18px; border:1px solid #e6e6e6; box-shadow:0 6px 16px rgba(0,0,0,.05); text-decoration:none; transition:.2s; } .recommended-posts__link:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.08); } .recommended-posts__thumbWrap{ flex-shrink:0; width:120px; } .recommended-posts__thumb{ width:120px; height:80px; object-fit:cover; border-radius:10px; } .recommended-posts__text{ font-size:16px; font-weight:700; line-height:1.5; color:#222; } /* ============================= コラム：おすすめ記事（内部リンク） ============================= */ .recommended-posts { max-width: 1000px; margin: 56px auto 0; padding: 28px 22px; background: #ffffff; border: 2px solid rgba(11, 42, 131, 0.18); border-radius: 18px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06); } .recommended-posts__title { margin: 0 0 18px; font-size: 22px; font-weight: 800; color: #0b2a83; letter-spacing: 0.02em; text-align: center; border-left: none; } .recommended-posts__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .recommended-posts__item { margin: 0; } .recommended-posts__link { display: flex; align-items: center; gap: 12px; padding: 14px 14px; border-radius: 14px; text-decoration: none; background: rgba(11, 42, 131, 0.04); border: 1px solid rgba(11, 42, 131, 0.12); transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .recommended-posts__link:hover, .recommended-posts__link:focus { background: rgba(11, 42, 131, 0.08); box-shadow: 0 10px 18px rgba(11, 42, 131, 0.12); transform: translateY(-2px); } .recommended-posts__thumbWrap { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); } .recommended-posts__thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .recommended-posts__text { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; color: #2a2a2a; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 900px) { .recommended-posts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .recommended-posts { margin-top: 44px; padding: 22px 16px; } .recommended-posts__title { font-size: 20px; } .recommended-posts__list { grid-template-columns: 1fr; } .recommended-posts__thumbWrap { width: 56px; height: 56px; } } /* ============================= コラム：アイキャッチ画像（角丸） ============================= */ /* NOTE: - テーマの実装によってアイキャッチが wp-post-image にならない場合があるため、コラム本文内の画像も含めて「コラム全体の画像」を優しく角丸にします。 - もし本文内の画像だけ角丸にしたくない場合は、後でセレクタを絞れます。 */ /* まずは“確実に効く”範囲：コラム個別ページ内の画像を角丸 */ body.single-column .column-single img, body.single-column .entry-content img, body.single-column img.wp-post-image, body.single-column .post-thumbnail img, body.single-column .column-thumbnail img { border-radius: 18px !important; } /* 画像が figure / wrapper に入っている場合も角丸が欠けないようにする */ body.single-column figure, body.single-column .post-thumbnail, body.single-column .column-thumbnail { border-radius: 18px; overflow: hidden; } /* 表示崩れ防止（未指定なら効く） */ body.single-column .entry-content img, body.single-column img.wp-post-image { display: block; max-width: 100%; height: auto; } /* ===== コラム下CTA（自動挿入） ===== */ .cta-auto-line{ text-align: center; margin: 3rem auto; max-width: 800px; } .cta-auto-line hr{ margin: 0 auto 1.5rem; border: 0; border-top: 3px solid rgba(71,54,7,0.35); /* ← 太さここ(例: 2px/3px/4px) */ width: 100%; } .cta-title{ font-weight: 700; margin-bottom: 1rem; } /* LINEボタン */ .cta-line-btn{ display: inline-block; background: #00d10a; color: #fff !important; padding: 16px 40px; border-radius: 999px; font-weight: 700; text-decoration: none; margin-bottom: 1.2rem; box-shadow: 0 6px 0 rgba(0,0,0,.15); transition: transform .15s ease; } .cta-line-btn:hover{ transform: translateY(-2px); text-decoration: none; } /* 箇条書き */ .cta-list{ list-style: disc; display: inline-block; text-align: left; margin: 1rem auto; padding-left: 1.2em; } /* エリア説明 */ .cta-area{ margin-top: 1rem; } /* 最後の強調文だけ太字 */ .cta-strong{ font-weight: 700; margin-top: .5rem; } /* ============================= TOP：お役立ちコラム（小サムネ付き） ============================= */ /* NOTE: - ここはにだけ効かせます。 - アーカイブ等は column-card--top を付けていないので影響しません。 */ a.column-card.column-card--top{ display: flex; gap: 16px; align-items: flex-start; text-decoration: none; } /* TOP：サムネ枠を横長に固定（巨大化防止） */ a.column-card.column-card--top .column-card__thumb{ flex: 0 0 120px; width: 120px; height: 90px; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid rgba(0,0,0,0.06); } a.column-card.column-card--top .column-card__thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; } .column-card--top .column-card__body{ flex: 1; min-width: 0; } /* 安全策：TOP以外は従来通り（block） */ .column-card:not(.column-card--top){ display: block; } /* ==================== 6) お客様の声 ==================== */ /*お客様の声*/ .voice { margin: 1rem; text-align: left; } /* お客様の声全体も優しい黄緑系の背景にしたい場合は下記を有効化 */ /* .voice { background: #e6f4e6; border-radius: 6px; padding: 2rem 1rem; } */ /* お客様の声カードスタイル */ .voice-cards { display: grid; gap: 1rem; margin-top: 1rem; background: #e6f4e6; /* 優しい黄緑系の背景色 */ padding: 1rem; border-radius: 6px; } .voice-card { background: #fffefc; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); padding: 1rem; transition: transform 0.2s; } .voice-card:hover { transform: translateY(-4px); } .voice-card .voice-name { font-weight: bold; font-size: 1rem; margin-bottom: 0.5rem; } .voice-card .voice-area { font-size: 0.8rem; color: #777; margin-bottom: 0.5rem; } .voice-card .voice-text { font-size: 0.9rem; color: #555; line-height: 1.5; } /* お客様の声：カード内で全文を開閉（details/summary） */ .voice-list details.voice-card{ background: #fffefc; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); padding: 1rem; transition: transform 0.2s; } .voice-list details.voice-card:hover{ transform: translateY(-4px); } .voice-list summary.voice-summary{ list-style: none; cursor: pointer; outline: none; } .voice-list summary.voice-summary::-webkit-details-marker{ display: none; } .voice-list .voice-more{ display: inline-block; margin-top: 0.6rem; font-size: 0.9rem; font-weight: 700; text-decoration: underline; } .voice-list .voice-full{ margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid rgba(0,0,0,0.08); } details.voice-card[open] .voice-more{ display: none; } /* 開いた時、summary内の抜粋（冒頭文）を消してダブり防止 */ .voice-list details[open] .voice-excerpt, .voice-list details[open] .voice-more { display: none; } /* ==================== 7) よくあるご質問（FAQ） ==================== */ /*よくあるご質問*/ .faq { margin: 1rem; text-align: left; } .faq-item { margin-bottom: 1.5rem; } .faq-details{ background: #fffefc; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.08); padding: 1rem 1rem; } .faq-question{ list-style: none; cursor: pointer; font-size: 15px; font-weight: 800; margin: 0; position: relative; padding-right: 2.2rem; /* 右の「＋」分 */ } /* 既存のマーカー消す（Chrome/Safari） */ .faq-question::-webkit-details-marker{ display: none; } /* ＋ / − を右側に表示 */ .faq-question::after{ content: "＋"; position: absolute; right: 0; top: 0; line-height: 1.2; font-size: 18px; font-weight: 900; opacity: .8; } .faq-details[open] .faq-question::after{ content: "－"; } .faq-answer::before{ content: "A. "; font-weight: 800; margin-right: 6px; color: #07207f; } /* 回答部分 */ .faq-answer{ margin-top: .8rem; padding-top: .8rem; border-top: 1px solid rgba(0,0,0,.08); } .faq-answer p{ margin: 0; line-height: 1.8; } /* セクション共通 */ section { padding: var(--section-pad); text-align: center; } section h2 { font-size: 1.2rem; color: #07207f; border-left: 4px solid #07207f; padding-left: 0.5rem; margin-bottom: 1rem; } /* 料金一覧 */ .price-table { background: #fffefc; border-radius: 6px; padding: 1rem; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } /* ==================== 8) 共通ボタン（もっとみる） ==================== */ /*もっとみるボタン用*/ .is-hidden { display: none !important; } .more-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; padding: 0.9rem 2.2rem; border-radius: 9999px; /* ← 楕円 */ background: var(--primary); background-color: var(--primary); color: #fffefc; font-weight: 700; font-size: 0.95rem; line-height: 1; border: none; text-decoration: none; box-shadow: 0 2px 6px rgba(0,0,0,0.12); transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; cursor: pointer; appearance: none; -webkit-appearance: none; opacity: 1; filter: none; } .more-btn:hover { text-decoration: none; opacity: 0.92; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.14); } .more-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0,0,0,0.12); } .more-btn:focus-visible { outline: 3px solid rgba(46, 125, 50, 0.35); outline-offset: 3px; } /* リンクの visited で色が上書きされるのを防ぐ（ボタン文字を白固定） */ a.more-btn, a.more-btn:visited { color: #fffefc; } a.more-btn:hover, a.more-btn:active, a.more-btn:focus { color: #fffefc; } button.more-btn { color: #fffefc; } /* スマホは少し小さめ */ @media (max-width: 767px) { .more-btn { padding: 0.75rem 1.6rem; font-size: 0.92rem; } } /* ==================== 9) スクロール装飾 ==================== */ /* スクロールで “ぽいんっ” と出す（初期状態） - 下から少し上がりつつ、少しだけ拡大して「ポイン」感 - ease は弾む系の cubic-bezier */ /* 初期状態 */ .js-reveal{ opacity: 0; transform: translateY(24px) scale(.96); will-change: opacity, transform; } /* 表示されたら 1回だけ跳ねる */ .js-reveal.is-visible{ opacity: 1; animation: reveal-pop .65s cubic-bezier(.2, 1.2, .2, 1) both; } /* ぽよんっ（1回） */ @keyframes reveal-pop{ 0% { transform: translateY(24px) scale(.96); } 60% { transform: translateY(-6px) scale(1.02); } /* ちょい上に行って */ 80% { transform: translateY(2px) scale(.99); } /* 戻りすぎる→ */ 100% { transform: translateY(0) scale(1); } /* 着地 */ } /* 苦手な人向け（動きを減らす設定を尊重） */ @media (prefers-reduced-motion: reduce) { .js-reveal, .js-reveal.is-visible { transition: none; animation: none; transform: none; opacity: 1; } } /* ==================== 10) フッター ==================== */ /* フッター（レイアウト用：sticky footer） */ footer { text-align: center; padding: 1rem; background: #07207f; color: #fffefc; font-size: 0.8rem; margin-top: auto; } /*PC切り替え*/ .main-pc img { display: none; } /*PC用*/ @media (min-width: 1190px) { /*コンテンツマージン指定*/ .price, .area, .works, .column, .voice, .faq { margin: 0 15% 0 15%; } /*グローバルナビメニュー*/ #nav-menu { display: block; position: static; width: auto; height: auto; background: none; border: none; padding: 0; } #nav-menu ul { display: flex; justify-content: flex-end; gap: 2rem; list-style: none; margin: 0px 100px 0px 0px; padding: 0; } #nav-menu li { margin: 0; border-left: 1px solid #777; padding-left: 1rem; } #nav-menu li a { color: #333; font-weight: bold; text-decoration: none; font-size: 0.95rem; padding: 0.5rem 0; } .hamburger, .menu-overlay { display: none; } } /*作業実績スマホ画面２カラム*/ @media (max-width: 767px) { .works-list { grid-template-columns: repeat(2, 1fr); } } /* 作業実績：閉じるボタンの余白 */ .works-close-btn { margin-left: 12px; } @media (max-width: 767px) { .works-close-btn { margin-left: 0; margin-top: 12px; } } /* タブレット：3列 */ @media (min-width: 768px) and (max-width: 1199px) { .works-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* PC：最大4列（これ以上増えない） */ @media (min-width: 1200px) { .works-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* PCは左右2カラム */ @media (min-width: 768px){ .top-movie-inner{ grid-template-columns: 1.2fr 1fr; /* 左(動画)を少し大きめ */ } } /* 動画サムネ（仮画像） */ .movie-thumb{ /* 横長にしたい：比率を固定（16:9）。もっと横長にしたいなら 21 / 9 に変更 */ aspect-ratio: 16 / 9; /* 2カラム内で横いっぱい */ width: 100%; position: relative; display: block; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.10); /* 白い縁取り */ border: 8px solid #fff; } @media (max-width: 767px){ .movie-thumb{ border-width: 3px; } } /* aspect-ratio 未対応ブラウザ用の保険（古い端末用） */ @supports not (aspect-ratio: 1 / 1){ .movie-thumb{ height: 0; padding-top: 56.25%; /* 16:9 */ } } .movie-thumb img, .movie-thumb video, .movie-thumb iframe{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; /* 余白が出る時は cover / 全部見せたいなら contain */ } /* ▶︎再生ボタンっぽい見た目 * .movie-thumb::after{ content: ""; position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 9999px; background: rgba(255,255,255,.70); box-shadow: 0 6px 18px rgba(0,0,0,.15); } /* 三角（▶︎） * .movie-thumb::before{ content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-left: 18px solid rgba(40,40,40,.75); border-top: 12px solid transparent; border-bottom: 12px solid transparent; transform: translateX(4px); z-index: 1; } /* ▼ 上部：コラム更新中バー（ナビ下） */ .top-update-bar{ position: fixed; top: var(--header-h); left: 0; width: 100%; height: var(--info-bar-h); z-index: 998; /* header(999)のすぐ下 */ display: flex; align-items: center; justify-content: center; background: #07207f; box-shadow: 0 2px 5px rgba(0,0,0,0.08); } .top-update-bar a{ display: inline-block; width: 100%; text-align: center; padding: 10px 16px; color: #fffefc; font-weight: 700; font-size: 1rem; line-height: 1; text-decoration: underline; } .top-update-bar a:hover{ opacity: .92; text-decoration: none; } @media (max-width: 767px){ :root{ --info-bar-h: 40px; } .top-update-bar a{ font-size: 0.88rem; padding: 9px 12px; } } /* 次のゾーン */ .top-movie-area{ max-width: 900px; margin: 0 auto; padding: 10px 12px 10px; } .top-movie-inner{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; align-items: center; } /* キャッチ画像 */ .lowest-catch img{ width: 100%; height: auto; display: block; } @keyframes cloud-move{ from{ background-position: 0 0; } to{ background-position: -520px 0; } /* background-size の横幅と揃えると綺麗 */ } .column-card, .column-title{ overflow-wrap: anywhere; word-break: break-word; } /*固定ページ*/ .page-inner{ max-width: 900px; margin: 0 auto; padding: 90px 16px 60px; /* header固定なら上余白多め */ text-align: left; } .page-title{ margin: 0 0 16px; } .page-content p{ margin: 0 0 1em; } /* 運営者情報ページは、情報一覧として読みやすいカードレイアウトにする */ .page-inner--about{ max-width: 960px; } .page-inner--about .page-title{ max-width: 700px; margin: 0 auto 18px; padding: 0 18px; font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1.18; } .page-content--about{ max-width: 700px; margin: 0 auto; padding: clamp(20px, 3.2vw, 34px); background: rgba(255, 255, 255, 0.92); border: 2px solid #d9ecf7; border-radius: 26px; box-shadow: 0 14px 32px rgba(21, 49, 84, 0.08); backdrop-filter: blur(2px); } .page-content--about > :first-child{ margin-top: 0; } .page-content--about > h2{ margin: 0 0 10px; padding-left: 12px; border-left: 6px solid #1e2f97; color: #4b380a; font-size: clamp(0.98rem, 1.2vw, 1.18rem); line-height: 1.4; } .page-content--about > h2:not(:first-child){ margin-top: 22px; } .page-content--about > p{ margin: 0; color: #4b380a; font-size: clamp(0.94rem, 1.1vw, 1.02rem); line-height: 1.75; } .page-content--about > p + p{ margin-top: 6px; } .page-content--about a{ color: #1e2f97; text-underline-offset: 0.18em; } @media (min-width: 960px){ .page-content--about{ display: grid; grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); column-gap: 24px; row-gap: 0; align-items: start; } .page-content--about > h2, .page-content--about > p{ margin: 0; padding-top: 16px; border-top: 1px solid rgba(30, 47, 151, 0.14); } .page-content--about > h2{ grid-column: 1; padding-left: 0; border-left: none; font-size: 1.08rem; } .page-content--about > p{ grid-column: 2; } .page-content--about > :nth-child(-n+2){ padding-top: 0; border-top: none; } .page-content--about > h2:not(:first-child){ margin-top: 0; } .page-content--about > p + p{ margin-top: 0; padding-top: 8px; border-top: none; } } /* ===== お見積もり固定バー（停止中） ===== index.php 側の bottom-cta はコメントアウト中のため、ここも停止中。再開時は以下を有効化: - :root { --cta-h: 64px; } - .bottom-cta - .bottom-cta__link - body { padding-bottom: calc(var(--cta-h) + env(safe-area-inset-bottom)); } */ /* ===== PC右下LINE固定 ===== */ .pc-line-float{ position: fixed; right: 24px; bottom: 24px; z-index: 9999; width: 240px; /* ← 横長だから大きめでOK */ display: block; transition: transform .2s ease, opacity .2s ease; } .pc-line-float img{ width: 100%; height: auto; display: block; } .pc-line-float:hover{ transform: translateY(-6px); opacity: .92; } @media (max-width: 1024px){ .pc-line-float{ position: fixed; right: 16px; bottom: 16px; width: 120px; z-index: 9999; } } /* タブレット */ @media (min-width: 601px) and (max-width: 1024px){ .pc-line-float{ width: 200px; } } /*フッター*/ footer a:hover { opacity: 0.8; } .site-footer .footer-links { display: flex; flex-wrap: wrap; justify-content: center; /* 中央寄せ */ gap: 24px; /* 文字の間隔 */ margin-bottom: 12px; } .site-footer .footer-links a { color: #fff; /* フッター文字色に合わせる */ text-decoration: underline; font-size: 14px; } /* ============================= コラム一覧（アーカイブ）：サムネ付きカード ============================= */ .column-archive .column-card--archive{ display: flex; gap: 16px; align-items: flex-start; padding: 1.4rem; } .column-archive .column-card--archive .column-thumb{ flex: 0 0 120px; width: 120px; height: 90px; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid rgba(0,0,0,0.06); } .column-archive .column-card--archive .column-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; } .column-archive .column-card--archive .column-card__body{ flex: 1; min-width: 0; text-align: left; } .column-archive .column-card--archive .column-title{ margin: 0 0 .4rem; font-size: 1.05rem; line-height: 1.5; } .column-archive .column-card--archive .column-date{ margin: 0 0 .6rem; font-size: .92rem; color: #6b5a2c; } .column-archive .column-card--archive .column-excerpt{ margin: 0; font-size: .9rem; color: #555; } @media (max-width: 560px){ .column-archive .column-card--archive{ gap: 12px; padding: 1.1rem; } .column-archive .column-card--archive .column-thumb{ flex-basis: 96px; width: 96px; height: 72px; } }