@charset "utf-8"; /* ============================================================ * custom-top.css … トップページ用のカスタム追加スタイル * * 【役割】 * 既存の top.min.css（圧縮済み）は書き換えず、 * 今回の改修で追加したスタイルだけをこのファイルにまとめている。 * 問題が起きた場合は、この読み込みを外せば改修前の状態に戻せる。 * * 【設置場所】 * wp-templ/assets/css/page/custom-top.css * * 【読み込み】 * ドキュメントルート直下の index.php の 内、 * top.min.css を読み込む行の直後に、次の1行を追加： * * * 【内容】 * 1. スライダーのページネーション（ドット） * 2. PICKUP セクション * * 改修日：2026/07 * ============================================================ */ /* ------------------------------------------------------------ * 1. スライダーのページネーション（ドット） * * ・本番CSS側で非表示にされている可能性があるため !important で確実に出す * ・スライダー画像の下部中央に配置する * ---------------------------------------------------------- */ /* ドットを重ねるための基準位置 */ .sec-visual .owl-carousel { position: relative!important; } /* ドットの並び（下部中央） */ .sec-visual .owl-dots { display: flex !important; justify-content: center; align-items: center; padding: 40px; /* PC */ } /* ドット1個分 */ .sec-visual .owl-dots .owl-dot { margin: 0 6px; padding: 0; background: none; border: none; outline: none; cursor: pointer; } /* ドットの見た目（丸） */ .sec-visual .owl-dots .owl-dot span { display: block; width: 12px; height: 12px; margin: 0; border-radius: 50%; background: #cccccc; /* 非アクティブ時：グレー */ transition: background 0.3s ease, transform 0.3s ease; } /* 現在表示中／マウスを乗せたとき */ .sec-visual .owl-dots .owl-dot.active span, .sec-visual .owl-dots .owl-dot:hover span { background: #c80f00; /* アクティブ時：ブランドカラー */ transform: scale(1.15); } /* --- スマホ表示 --- */ @media screen and (max-width: 767px) { /* SP：デザイン基準幅750pxに対する72px分を、画面幅に合わせて拡縮させる */ .sec-visual .owl-dots { padding: calc(72 / 750 * 100vw); } .sec-visual .owl-dots .owl-dot { margin: 0 4px; } .sec-visual .owl-dots .owl-dot span { width: 8px; height: 8px; } } /* ------------------------------------------------------------ * 2. PICKUP セクション * * ・スライダーの直下に配置 * ・正方形バナー（画像＋下にテキスト・リンクあり） * ・PC：4カラム ／ SP：2カラム * ---------------------------------------------------------- */ .sec-pickup { padding: 0 0 65px; /* 上：なし ／ 下：65px */ } /* このセクションだけ横幅を広げる（PC時のみ） ・共通の .wcm は940px。他セクション・他ページに影響させないため、ここでのみ上書き ・SPでは共通の .wcm の余白設定をそのまま使いたいので、PC時だけに限定する ・内訳：バナー235px × 4枚 ＋ 間隔20px × 3 ＝ 1000px ＋ .wcm の左右padding 20px × 2 ＝ 1040px */ @media screen and (min-width: 768px) { .sec-pickup .wcm { width: 1040px; max-width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; /* 左右paddingを1040pxの内側に含める */ } } /* 見出し「ピックアップ」 */ .sec-pickup .c-title01 { font-size: 30px; font-weight: 700; } /* バナーの並び（PC：4カラム） gap は「縦の間隔 横の間隔」の順。 横はデザイン指定の20px。縦は画像の下にテキストが入るぶん、広めに取って行を分離させる */ .sec-pickup .pickup-lst { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 20px; margin: 60px 0 0; /* 見出しとの間隔 */ padding: 0; list-style: none; } /* バナー1枚（画像＋テキスト全体がリンク） */ .sec-pickup .pickup-lst > li a { display: block; text-decoration: none; color: inherit; } /* 画像枠（正方形に固定・角丸） 拡大した画像が角丸の外へはみ出さないよう、この枠で切り抜く */ .sec-pickup .pickup-lst .img { display: block; aspect-ratio: 1 / 1; /* 正方形 */ border-radius: 10px; overflow: hidden; isolation: isolate; /* 角丸の切り抜きを確実に効かせる */ } /* 画像は正方形の枠いっぱいに（比率が違ってもトリミングして収める） */ .sec-pickup .pickup-lst .img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; transition: transform 0.4s ease; } /* マウスを乗せたとき：画像を拡大（枠内で切り抜かれる） */ .sec-pickup .pickup-lst > li a:hover .img img { transform: scale(1.08); } /* 画像の下のテキスト */ .sec-pickup .pickup-lst .txt { display: block; margin-top: 12px; font-size: 16px; line-height: 1.6; } /* --- スマホ表示（デザイン基準幅750px） --- */ @media screen and (max-width: 767px) { .sec-pickup { padding: 0 0 calc(76 / 750 * 100vw); /* 上：なし ／ 下：76px相当 */ } /* 見出し「ピックアップ」（750px基準で拡縮） */ .sec-pickup .c-title01 { font-size: calc(30 / 750 * 100vw); font-weight: 700; } /* SPは2カラム（縦は広め・横はデザイン指定の30px相当） */ .sec-pickup .pickup-lst { grid-template-columns: repeat(2, 1fr); gap: calc(60 / 750 * 100vw) calc(30 / 750 * 100vw); margin: calc(72 / 750 * 100vw) 0 0; /* 見出しとの間隔 */ } /* 画像の下のテキスト（750px基準で拡縮） */ .sec-pickup .pickup-lst .txt { margin-top: calc(20 / 750 * 100vw); font-size: calc(26 / 750 * 100vw); } }