/* =================== shared/css/top.css（全量） =================== */ /* ───────────────────────────────────────────── 初期化 / 変数 ────────────────────────────────────────────── */ html, body { margin:0; padding:0; } :where(ul,ol){ list-style:none; margin:0; padding:0; } body{ --site-max: 1170px; --container: min(var(--site-max), 92vw); --section-gap: 60px; --gap: 24px; --shadow: 0 10px 24px rgba(0,0,0,.12); --c-text:#0f172a; --c-muted:#475569; --c-primary:#0ea5e9; --c-bg:#f8fafc; } /* ============================================================ ページ全体の背景色 ============================================================ */ #top { background-color: #F7F6F2; } #top .contIn1170{ width:var(--container); margin-inline:auto; } body { text-align: left; } #VcArea-MainColum .contIn11#top .site-header__inner{ height:100%; display:flex; align-items:center; gap:28px; padding:0; padding-right:360px; } /* ============================================================ ヘッダー背景色（白固定） ============================================================ */ #top .site-header { background-color: #FFFFFF; } /* ヘッダー本体（高さ84px＋ドロップシャドウ） */ #top .site-header{ position:relative; height:84px; box-shadow:0 2px 8px rgba(0,0,0,.06); margin-bottom: 40px; } #top .site-header__inner{ position:relative; height:84px; display:flex; align-items:center; gap:28px; padding:0; padding-right:520px; /* ← 右ユーティリティ予約領域を拡大して被りを防止 */ } /* ナビの右側にユーティリティ分の領域を確保して重なり防止 */ #top .gnav{ max-width: calc(100% - 520px); } #top .gnav__list > li > a{ position:relative; display:inline-flex; align-items:center; gap:8px; padding:0; /* ← 余白を外す（間隔はgapで管理） */ text-decoration:none; color:#4b5563; font-size:16px; font-weight:500; letter-spacing:.02em; } /* 先頭用の個別マージン調整は不要になったため削除 */ #top .gnav__list > li{ flex:0 0 auto; /* 各項目は等幅で縮まない */ } /* 右側の検索+お問い合わせ（400px）を差し引いた最大幅を設定 */ #top .gnav{ max-width: calc(100% - 400px); flex:1 1 auto; min-width:0; /* Flexの収まりを安定化（はみ出し対策） */ } #top .gnav{ overflow:visible; max-width:calc(100% - 400px); /* 右フォーム領域分を差し引き */ } ul, #VcArea-MainColum .contIn1170 ol { padding-left: 0; } /* ───────────────────────────────────────────── Header ────────────────────────────────────────────── */ #top .site-header__inner{ height:100%; display:flex; align-items:center; gap:28px; padding:0; padding-right:430px; /* 検索(約240px) + 余白 + CTA(可変) を考慮して拡張 */ } /* ロゴは左に、ナビは右側へ寄せる（autoマージンで押し出し） */ #top .logo{ margin-right:auto; } #top .gnav__list{ display:flex; gap:32px; align-items:center; justify-content:flex-end; /* 右寄せ */ } #top .logo{ margin-top:15px; margin-left:15px; } #top .logo img{ width:197px; height:57px; display:block; } #top .gnav__list > li > a{ position:relative; display:inline-flex; align-items:center; gap:8px; padding:0 2px; text-decoration:none; color:#4b5563; font-size:16px; /* ← 指定フォントサイズ */ font-weight:100; /* ← ミディアム（medium相当） */ letter-spacing:.02em; height: 84px; } #top .gnav__list > li:first-child > a { margin-left: 0px; } #top .gnav__list > li > a:hover{ color:#0f172a; } #top .gnav__list > li:not(.gnav__search) > a::after{ content:none !important; } /* ▼を消す */ #top .gnav__underline{ display:none !important; } #top .gnav__underline.is-show{ display:none !important; } /* header-contact はボタンのラッパ。位置は header-util に任せる */ #top .header-contact{ position: static; width:auto; height:auto; background:transparent; margin-bottom: 0px;} #top .header-contact__icon{ width:auto; height:auto; display:initial; } /* 使っていないので無影響 */ #top .header-contact .label{ font-size:inherit; font-weight:inherit; } /* ヘッダーの絶対配置基準 */ #top .site-header{ position:relative; } #top .site-header__inner{ position:relative; } /* ───────────────────────────────────────────── 共通：丸矢印（20×20px／中の矢印 5×8px、線1px） ────────────────────────────────────────────── */ #top .arrow-circle{ --s: 20px; position:relative; inline-size: var(--s); block-size: var(--s); border-radius:50%; background:var(--c-primary); display:inline-block; vertical-align:middle; } #top .arrow-circle::before, #top .arrow-circle::after{ content:""; position:absolute; left:50%; top:50%; width:5px; height:0; border-top:1px solid #fff; transform-origin:right center; } #top .arrow-circle::before{ transform:translate(-50%,-50%) rotate(45deg); } #top .arrow-circle::after { transform:translate(-50%,-50%) rotate(-45deg); } /* ───────────────────────────────────────────── Key Visual ────────────────────────────────────────────── */ #top .kv{ position:relative; margin-block:0; } #top .kv__viewport{ width:100%; height:450px; /* ← 高さを固定 */ overflow:hidden; /* ← 左右見切れOK */ border-radius:12px; /* 角丸を維持したい場合（任意） */ } /* === KV: 600x450 のカードを並べて最大3枚表示 === */ #top .flexslider{ background:transparent; border:0; box-shadow:none; overflow:hidden; /* 左右は見切れでOK */ } /* li と画像サイズを固定（flexsliderのitemWidthと一致） */ #top .flexslider .slides > li{ width:600px !important; /* JSのitemWidthとセット */ height:450px; margin-right:30px; /* JSのitemMarginとセット */ } #top .flexslider .slides img{ width:600px; height:450px; object-fit:cover; display:block; border-radius:12px; } /* ドットは下中央寄せ（任意：レイアウト調整） */ #top .flex-control-nav{ bottom:12px; right:12px; left:auto; width:auto; gap:8px; display:flex; } #top .flex-control-paging a{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.7); } #top .flex-control-paging a.flex-active{ background:#3B8026; } @media (max-width:940px){ #top .kv__viewport{ border-radius:10px; } } #top .kv__track{ display:flex; height:100%; gap:30px; /* ← JSのGAPと一致 */ transition:transform .6s ease; will-change: transform; } #top .kv__slide { flex: 0 0 600px; width: 600px; /* height: 450px; ← 固定高さを外す */ height: auto; /* 画像の実高に合わせる */ box-sizing: border-box; overflow: hidden; } #top .kv__slide img{ width:100%; height:100%; display:block; object-fit:cover; border-radius:12px; /* 任意：カード自体に角丸 */ } #top .kv__controls{ position:absolute; right:12px; /* 内側に寄せる */ bottom:12px; /* 内側に寄せる */ display:flex; align-items:center; gap:12px; } /* ============================================================ KV ページネーション（ドットのみ／中央寄せ） ============================================================ */ #top .kv .kv__dots{ display:flex; justify-content:center; align-items:center; gap:24px; /* ドット間 28px */ padding:16px 0 20px; } /* ドット（12px 丸） */ #top .kv .kv__dot{ width:12px; height:12px; border-radius:50%; background:#DAD6C4; /* 無効 */ border:0; padding:0; cursor:pointer; display:inline-block; line-height:0; transition:transform .2s ease, background-color .2s ease; } #top .kv .kv__dot.is-active{ background:#54AE3A; /* 有効 */ transform:scale(1.0); } /* フォーカス時のアクセシビリティ */ #top .kv .kv__dot:focus-visible{ outline:2px solid #54AE3A; outline-offset:2px; box-shadow:0 0 0 2px #fff; } /* 余計なUI（再生ボタン等）があれば強制非表示 */ #top .kv .kv__dots .kv__play, #top .kv .kv__dots .kv__pause, #top .kv .kv__dots .kv__progress, #top .kv .kv__dots > *:not(.kv__dot){ display:none !important; } /* 次のドットも緑に（KVと同じトーン） */ #top .kv .kv__dots .kv__dot.is-next{ background: #54AE3A; } /* ===== Banner KV (4枚/ページ、幅1200px) ===== */ #top .kv.kv--banner .kv__viewport{ max-width: 1200px; margin: 0 auto; overflow: hidden; } #top .kv.kv--banner .kv__track{ gap: 32px; /* カード間の余白 */ padding: 0; /* 端の余白はゼロに */ } #top .kv.kv--banner .kv__slide a{ display: block; background: #fff; border-radius: 12px; overflow: hidden; } #top .kv.kv--banner .kv__slide img{ display:block; width:100%; height:auto; } /* ===== Banner KV：高さの固定を解除し、余白を圧縮 ===== */ #top .kv.kv--banner{ height: auto !important; min-height: 0 !important; padding: 16px 0 24px; /* 上下の余白をコンパクトに */ } /* ヒーロー用の固定高さを打ち消す */ #top .kv.kv--banner .kv__viewport{ max-width: 1200px; /* 4列エリア */ margin: 0 auto; height: auto !important; overflow: hidden; } #top .kv.kv--banner .kv__slide{ height: auto !important; } #top .kv.kv--banner .kv__slide a{ display: block; background: #fff; border-radius: 12px; overflow: hidden; } #top .kv.kv--banner .kv__slide img{ display: block; width: 100%; height: auto; /* 画像の縦伸びを防止 */ } /* ドットが“器の底”基準で離れ過ぎないように */ #top .kv.kv--banner .kv__dots{ position: static !important; /* ヒーロー前提の bottom 固定を解除 */ margin-top: 16px; } /* 前後ボタンの縦位置がズレるケースの保険（必要なときだけ有効化） #top .kv.kv--banner .kv__prev, #top .kv.kv--banner .kv__next{ top: calc(50% - 20px) !important; } */ /* 左端スタート用のリセット */ #top .kv.kv--banner .kv__viewport{ max-width: 1200px; margin: 0 auto; padding-left: 0 !important; padding-right: 0 !important; } #top .kv.kv--banner .kv__track{ /* 余白は gap を使い、左右パディングはゼロに */ gap: 32px; /* 必要な列間余白。不要なら削除可 */ padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; /* 念のため先頭の押し出しもゼロに */ } #top .kv.kv--banner .kv__slide{ /* グローバルで margin を与えている場合の保険 */ margin: 0 !important; } #top .kv.kv--banner .kv__slide:first-child{ /* 念のため先頭の左余白を強制ゼロに */ margin-left: 0 !important; } #top .kv__toggle{ width:40px; height:40px; border-radius:0; border:0; background:var(--c-primary); display:grid; place-items:center; cursor:pointer; } #top .kv__toggle-ico{ position:relative; width:12px; height:12px; display:block; } #top .kv__toggle[aria-pressed="false"] .kv__toggle-ico::before,#top .kv__toggle[aria-pressed="false"] .kv__toggle-ico::after{ content:""; position:absolute; top:0; bottom:0; width:3px; background:#fff; } #top .kv__toggle[aria-pressed="false"] .kv__toggle-ico::before{ left:0; } #top .kv__toggle[aria-pressed="false"] .kv__toggle-ico::after{ right:0; } #top .kv__toggle[aria-pressed="true"] .kv__toggle-ico{ width:0; height:0; border-left:12px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent; } #top .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; } /* ============================================================ KV ページ送り（左右ナビ） ============================================================ */ /* KVはGridで重ねる：viewportとナビを同じセルに配置 */ #top .kv{ display: grid; } #top .kv__viewport{ grid-area: 1 / 1; } #top .kv__nav{ grid-area: 1 / 1; /* viewportと同じセルに重なる */ z-index: 5; pointer-events: none; /* 土台はクリックを通す */ position: relative; /* 子のabsoluteの基準にする */ } #top .kv__controls{ grid-area: 2 / 1; } /* ドットは下段 */ #top .kv__nav .kv__prev, #top .kv__nav .kv__next{ position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 0; pointer-events: auto; /* ボタンはクリック可 */ cursor: pointer; background: transparent; /* 背景は透過にしておく */ box-shadow: none; transition: transform .2s ease, opacity .2s ease; } /* 左右位置＋アイコン */ #top .kv__nav .kv__prev{ left: 12px; background-image: url("../img/common/sp_arrow_L.png"); background-repeat: no-repeat; background-position: center; background-size: contain; } #top .kv__nav .kv__next{ right: 12px; background-image: url("../img/common/sp_arrow_R.png"); background-repeat: no-repeat; background-position: center; background-size: contain; } /* 左右位置 */ #top .kv__nav .kv__prev{ left: 12px; } #top .kv__nav .kv__next{ right: 12px; } #top .kv__nav .kv__prev::before, #top .kv__nav .kv__next::before{ content:""; border: none; width: 0; height: 0; } /* Hover / Active */ #top .kv__nav .kv__prev:hover, #top .kv__nav .kv__next:hover{ box-shadow: 0 8px 20px rgba(0,0,0,.16); transform: translateY(-50%) scale(1.04); } #top .kv__nav .kv__prev:active, #top .kv__nav .kv__next:active{ transform: translateY(-50%) scale(0.98); } /* Banner dots：アクティブ＆隣だけ白に */ #top .kv.kv--banner .kv__dots .kv__dot.is-active, #top .kv.kv--banner .kv__dots .kv__dot.is-next{ background: #FFF !important; } /* ===== Banner only: dots connector bar を白版に差し替え ===== */ /* 背景でバーを敷いている実装（例：repeat-x） */ #top .kv.kv--banner .kv__dots{ background-image: url("shared/img/common/dot-bar_w.png") !important; background-repeat: repeat-x !important; /* 既存に合わせてください */ background-position: center !important; /* 既存に合わせてください */ } /* 疑似要素でバーを敷く実装（::before / ::after のどちらかを使用） */ #top .kv.kv--banner .kv__dots::before, #top .kv.kv--banner .kv__dots::after{ background-image: url("../img/common/dot-bar_w.png") !important; } /* 各ドット間を疑似要素で繋いでいる実装（.kv__dot::before など） */ #top .kv.kv--banner .kv__dot::before, #top .kv.kv--banner .kv__dot::after{ background-image: url("../img/common/dot-bar_w.png") !important; } /* Banner dots：非アクティブはグリーン、アクティブ＆隣は白 */ #top .kv.kv--banner .kv__dots .kv__dot{ background: #78C163; /* 通常（非アクティブ） */ } /* 既存指定より後ろに置いて上書き */ #top .kv.kv--banner .kv__dots .kv__dot.is-active, #top .kv.kv--banner .kv__dots .kv__dot.is-next{ background: #FFF; } /* ===== Banner SP (<= 767px): 3列・左右見切れ・矢印非表示 ===== */ @media (max-width: 767px){ #top .kv.kv--banner .kv__viewport{ max-width: none; width: 100%; padding: 0 12px; /* 内側余白で“左右見切れ”の感じを作る */ overflow: hidden; /* はみ出しをカット */ } #top .kv.kv--banner .kv__track{ gap: 16px; /* SPは少し狭めの余白 */ } #top .kv.kv--banner .kv__prev, #top .kv.kv--banner .kv__next{ display: none !important; /* SPは矢印を消す */ } #top .kv__nav .kv__prev, #top .kv__nav .kv__next{ width: 32px; height: 32px; } /* 左右位置 */ #top .kv__nav .kv__prev{ left: -12px; } #top .kv__nav .kv__next{ right: -12px; } } /* 元の 100% !important を打ち消すために、セレクタ強度＋!important で上書き */ #top .kv.kv--banner .kv__slide{ flex: 0 0 276px !important; } #top .kv.kv--banner .kv__track{ gap: 32px; } @media (max-width: 767px){ #top .kv.kv--banner .kv__slide{ flex: 0 0 176px !important; } #top .kv.kv--banner .kv__track{ gap: 15px!important; } .kv.kv--banner .kv__viewport { border-radius: 0!important; } } #top .kv.kv--banner .kv__slide img{ width:100%; height:auto; display:block; } /* ===== Banner SP: 最初のバナーをセンターに配置 ===== */ @media (max-width: 767px){ #top .kv.kv--banner .kv__viewport{ /* バナー幅176px → 半分=88px。画面中央(50%)から半分引いた分だけ左に余白を作る */ padding-left: calc(50% - 88px)!important; padding-right: calc(50% - 88px)!important; /* 左右対称にして中央表示をキープ */ overflow: hidden; /* 見切れ演出は維持 */ } } /* ===== Banner controls visibility ===== */ /* PC(>=768px)では非表示 */ @media (min-width: 768px){ #top .kv.kv--banner .kv__controls{ display: none !important; } } /* SP(<=767px)では表示（保険） */ @media (max-width: 767px){ #top .kv.kv--banner .kv__controls{ display: block; } } /* ===== Banner nav arrows: 白い円＋グラデ矢印 ===== */ @media (min-width: 768px){ /* ボタン本体：白い丸 */ #top .kv.kv--banner .kv__nav .kv__prev, #top .kv.kv--banner .kv__nav .kv__next{ background: #FFF !important; } /* 矢印（グラデ三角形） */ #top .kv.kv--banner .kv__nav .kv__prev::before, #top .kv.kv--banner .kv__nav .kv__next::before{ border-left: 10px solid #3AA14E; border-top: 5px solid transparent; border-bottom: 5px solid transparent; content: ""; position: absolute; right: -10px; top: 10px; } } /* 右矢印（そのまま）・左矢印（反転） */ #top .kv.kv--banner .kv__nav .kv__next::before{ transform: translate(-50%, -50%); /* → */ } #top .kv.kv--banner .kv__nav .kv__prev::before{ transform: translate(-50%, -50%) scaleX(-1); /* ← */ } /* ホバー時の軽いフィードバック */ #top .kv.kv--banner .kv__nav .kv__prev:hover, #top .kv.kv--banner .kv__nav .kv__next:hover{ box-shadow: 0 4px 12px rgba(0,0,0,.12); } } /* ───────────────────────────────────────────── 業種から探す ────────────────────────────────────────────── */ #top .industry-nav{ background:var(--c-bg); padding:24px 0; border-bottom:1px solid #e2e8f0; margin-block:0; } #top .industry-nav__list{ position:relative; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:0; } #top .industry-nav__list::before,#top .industry-nav__list::after{ content:""; position:absolute; top:8px; bottom:8px; width:1px; background:#e6edf2; } #top .industry-nav__list::before{ left:0; } .industry-nav__list::after{ right:0; } #top .industry-nav__list li{ position:relative; } #top .industry-nav__list li + li::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px; background:#e6edf2; } #top .industry-nav__list a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px; text-decoration:none; color:#0f172a; padding:16px 10px; background:transparent; box-shadow:none; } #top .industry-nav__list .ico{ width:56px; height:auto; display:block; } #top .industry-nav__list .label{ font-size:16px; font-weight:700; letter-spacing:.08em; line-height:1; } /* ───────────────────────────────────────────── 重要なお知らせ ────────────────────────────────────────────── */ #top .urgent{ background:#fff; margin-block:var(--section-gap); } #top .urgent__list{ display:grid; gap:10px; } #top .urgent__item{ display:grid; grid-template-columns:28px auto 110px 1fr auto; align-items:center; gap:16px; padding:22px 28px; border:1px solid #e6edf2; background:#fff; } #top .urgent__icon{ width:20px; height:auto; display:block; } #top .urgent__badge{ font-weight:800; color:#0f172a; } #top .urgent__time{ color:#64748b; font-variant-numeric:tabular-nums; } #top .urgent__link{ text-decoration:none; color:#0f172a; text-align: left;} /* ───────────────────────────────────────────── ピックアップ 3件 ────────────────────────────────────────────── */ #top .quick{ margin-block:var(--section-gap); } #top .quick__cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; } #top .quick__cards a{ display:grid; grid-template-rows:auto 1fr; min-height:270px; text-decoration:none; color:inherit; background:#fff; border:none; overflow:hidden; box-shadow:var(--shadow); } #top .quick__cards .body{ padding:25px 16px; display:flex; align-items:center; justify-content:space-between; } #top .quick__cards h3{ font-size:16px; margin:0; } #top .quick__cards .arrow-circle{ margin-left:12px; flex-shrink:0; } #top .quick__cards .media{ margin:0; aspect-ratio:16/9; } #top .quick__cards .media img{ width:100%; height:100%; object-fit:cover; display:block; } /* ───────────────────────────────────────────── About Us ────────────────────────────────────────────── */ #top .about-hero{ position:relative; color:#fff; margin-block:var(--section-gap); min-height:500px; background: linear-gradient(180deg, rgba(2,132,199,.22), rgba(2,132,199,.22)), url("../img/common/bg_about.png") center center / cover no-repeat; } #top .about-hero__inner{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; width:var(--container); margin-inline:auto; } #top .about-hero__title{ text-align:center; margin:0; font-size:clamp(24px,3.2vw,32px); line-height:1.4; letter-spacing:.04em; } #top .about-hero__title small{ display:block; font-size:12px; opacity:.95; margin-bottom:10px; letter-spacing:.2em; text-transform:uppercase; } #top .about-hero__links{ margin-top:100px; display:grid; grid-template-columns:repeat(3,370px); gap:30px; justify-content:center; } #top .about-hero__links a{ width:370px; height:100px; box-sizing:border-box; background:#fff; color:#0f172a; text-decoration:none; display:flex; align-items:center; gap:16px; padding: 0 16px 0 0; overflow: hidden; } #top .about-hero__thumb{ flex: 0 0 100px; width: 100px; height: 100px; object-fit: cover; display: block; margin: 0; } #top .about-hero__label{ font-weight:700; font-size:16px; } #top .about-hero__links .arrow-circle{ margin-left:auto; flex-shrink:0; } /* ───────────────────────────────────────────── News（右770px・UL切替方式） ────────────────────────────────────────────── */ #top .news-block{ min-height:415px; } #top .news-block .contIn1170{ display:grid; grid-template-columns: 1fr 770px; column-gap: 40px; row-gap: 0; align-items:start; } #top .news-block .section-h{ grid-column:1; grid-row: 1 / span 2; display:flex; flex-direction:column; gap:16px; } #top .news-block .section-h .eyebrow{ color:#0ea5e9; font-size:14px; letter-spacing:.15em; margin:0; } #top .news-block .section-h .ttl{ margin:0; font-size:28px; font-weight:700; color:#0f172a; text-align: left; padding: 0px 0px 0px 0px; } #top a.link-more, #top a.btn.btn--primary{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:170px; height:50px; background:var(--c-primary); color:#fff; text-decoration:none; overflow:hidden; border-radius:0; transition: background-color .35s cubic-bezier(.4,0,.2,1); } #top a.link-more::after, #top a.btn.btn--primary::after{ content:""; position:absolute; right:0; bottom:0; width:0; height:0; border-left:30px solid transparent; border-bottom:30px solid #333333; pointer-events:none; transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s; } #top a.link-more:hover, #top a.btn.btn--primary:hover{ background:#333333; } #top a.link-more:hover::after, #top a.btn.btn--primary:hover::after{ transform: translate(30%, 30%); } #top .news-block .news-cat{ grid-column:2; display:flex; gap:32px; border-bottom:1px solid #e6edf2; margin:0 0 30px; padding:0; } #top .news-block .news-cat button{ appearance:none; background:none; border:0; padding:12px 0; margin:0; font-weight:800; font-size:16px; letter-spacing:.02em; color:#0f172a; position:relative; cursor:pointer; } #top .news-block .news-cat button.is-active{ color:var(--c-primary); } #top .news-block .news-cat button.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--c-primary); } #top .news-block .news-lines{ grid-column:2; display:block; margin:0; } #top .news-block .news-lines .news-line + .news-line{ border-top:1px solid #e6edf2; } #top .news-block .news-lines a{ display:grid; grid-template-columns:110px auto 1fr 28px; gap:16px; align-items:center; padding:18px 0; color:#0f172a; text-decoration:none; width:100%; min-width:0; } #top .news-block .news-date{ color:#334155; font-variant-numeric:tabular-nums; } #top .news-block ul[hidden]{ display:none !important; } #top .news-block .news-badge{ display:inline-flex; align-items:center; justify-content:center; width:110px; height:26px; font-size:10px; font-weight:400; color:#fff; background:#00A7EB; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0; border-radius:0; } #top .news-block .news-text{ min-width:0; color:#334155; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #top .news-block .news-lines .arrow-circle{ justify-self:end; } /* ───────────────────────────────────────────── Cases / Columns / Recruit（汎用カード部分） ※ 導入事例のスライダー専用CSSは次ブロックで上書き ────────────────────────────────────────────── */ #top .cases-block{ margin-block:var(--section-gap); background:linear-gradient(180deg,#f8fafc,#ffffff); } #top .cards{ display:grid; gap:var(--gap); } #top .cards--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } #top .card{ background:#fff; overflow:hidden; box-shadow:0 6px 24px rgba(0,0,0,.08); border:1px solid #eef2f7; border-radius:0; } #top .card__link{ display:block; color:inherit; text-decoration:none; } #top .card__media{ aspect-ratio:16/9; overflow:hidden; } #top .card__media img{ width:100%; height:100%; object-fit:cover; display:block; } #top .card__body{ padding:14px 16px 18px; } #top .card__title{ font-size:clamp(16px,1.8vw,18px); font-weight:700; margin:0 0 6px; color:#0f172a; } #top .card__text{ font-size:14px; color:#475569; line-height:1.6; } #top .case-links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; } #top .case-links a{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid #dbe7f1; background:#fff; text-decoration:none; color:#0f172a; font-weight:700; font-size:14px; border-radius:0; } #top .case-links .arrow-circle{ margin-left:6px; } #top .columns-block{ margin-block:var(--section-gap); } /* ============================================================ Columns quick links（コラム：カード下の4リンク） ============================================================ */ #top .cases-cats, #top .columns-cats{ margin-top: 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } #top .cases-cats a, #top .columns-cats a{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; background: #fff; color: #0f172a; text-decoration: none; border: 1px solid #eef2f7; border-radius: 0; box-shadow: 0 4px 16px rgba(15, 23, 42, .06); transition: transform .12s ease, box-shadow .12s ease; } #top .cases-cats a:hover, #top .columns-cats a:hover{ transform: translateY(-1px); box-shadow: 0 6px 20px rgba(15, 23, 42, .08); } #top .cases-cats a .arrow-circle, #top .columns-cats a .arrow-circle{ flex: 0 0 auto; } @media (max-width:1024px){ #top .cases-cats, #top .columns-cats{ grid-template-columns: repeat(2, 1fr); } } @media (max-width:640px){ #top .cases-cats, #top .columns-cats{ grid-template-columns: 1fr; } } #top .recruit-hero{ margin-block:var(--section-gap); background:linear-gradient(180deg,#eef7fd,#ffffff); } #top .recruit-hero__box{ position:relative; overflow:hidden; width:var(--container); margin-inline:auto; } #top .recruit-hero__img{ height:420px; background:url("vc-files/top/img/recruit.jpg") center/cover no-repeat; filter:saturate(1.05); } #top .recruit-hero__body{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:28px; color:#0f172a; } #top .btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; text-decoration:none; font-weight:700; border-radius:0; } #top .btn--primary{ background:var(--c-primary); color:#fff; } /* ───────────────────────────────────────────── Footer ────────────────────────────────────────────── */ /* ========== Footer（4カラム＋2本のリンク帯＋コピーライト） ========== */ #top .site-footer{ background:#111827; color:#e5e7eb; margin-top:0; } #top .site-footer a{ color:#e5e7eb; text-decoration:none; } #top .site-footer a:hover{ color:#00A7EB; } #top .site-footer__upper{ padding:44px 0 32px; } #top .site-footer .footer-cols{ width:var(--container); margin-inline:auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:34px 36px; } #top .site-footer .fcol h3{ font-size:16px; font-weight:800; margin:0 0 16px; } #top .site-footer .fcol ul{ margin:0; padding:0; list-style:none; } #top .site-footer .fcol li + li{ margin-top:10px; } #top .site-footer .fcol a{ display:inline-block; padding:4px 0; font-size:14px; } #top .site-footer .fcol--simple .fcol-simple{ margin-top:0; } #top .site-footer .fcol--simple .fcol-simple li{ border-bottom:1px solid #2b3340; } #top .site-footer .fcol--simple .fcol-simple li a{ display:block; padding:14px 0; font-weight:700; } #top .site-footer__middle{ border-top:1px solid #1f2937; border-bottom:1px solid #1f2937; background:#0f1420; padding-bottom: 70px; } #top .site-footer__middle .contIn1170{ width:var(--container); margin-inline:auto; } #top .footer-links{ display:flex; flex-wrap:wrap; gap:18px 28px; align-items:center; padding:16px 0; } #top .footer-links--primary li a{ font-weight:700; } #top .site-footer__policies{ background:#0f1420; } #top .site-footer__policies .contIn1170{ width:var(--container); margin-inline:auto; } #top .footer-links--policies{ padding:14px 0; gap:14px 22px; } #top .footer-links--policies li{ position:relative; padding-left:0; margin-left:0; } #top .footer-links--policies li + li{ padding-left:22px; } #top .footer-links--policies li + li::before{ content:""; position:absolute; left:0; top:50%; width:1px; height:14px; background:#2b3340; transform:translateY(-50%); } #top .site-footer__bottom{ padding:18px 0 30px; background:#111827; } #top .site-footer__bottom .contIn1170{ width:var(--container); margin-inline:auto; } #top .site-footer__bottom small{ color:#94a3b8; } @media (max-width:1024px){ #top .site-footer .footer-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:640px){ #top .site-footer .footer-cols{ grid-template-columns:1fr; } #top .footer-links, #top .footer-links--policies{ gap:12px 18px; } } /* ============================ Footer color theme (overwrite) ============================ */ #top .site-footer { background:#ffffff !important; color:#111827; } #top .site-footer__upper, #top .site-footer__middle{ background:#222222 !important; color:#e5e7eb; } #top .site-footer__upper h3, #top .site-footer__middle h3{ color:#e5e7eb; } #top .site-footer__upper a, #top .site-footer__middle a{ color:#e5e7eb; } #top .site-footer__middle{ border-top: 1px solid #2b2b2b; border-bottom: 1px solid #2b2b2b; } #top .site-footer__policies, #top .site-footer__copyright{ background:#ffffff !important; color:#111827; } #top .site-footer__policies a{ color:#111827; } #top .site-footer__bottom{ background:#ffffff !important; color:#111827; } #top .site-footer__bottom a{ color:#111827; } #top .site-footer .fcol h3{ margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid #2b3340; } /* ============================================================ Footer tweaks ============================================================ */ #top .site-footer__middle{ border-top:0; } #top .site-footer__middle .contIn1170{ position: relative; padding: 18px 0; } #top .site-footer__middle .contIn1170::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width: var(--container); height:1px; background: rgba(255,255,255,.20); } #top .site-footer__middle .contIn1170 > ul{ display:flex; flex-wrap:wrap; gap:0; } #top .site-footer__middle .contIn1170 > ul > li{ position:relative; padding:0 16px; } #top .site-footer__middle .contIn1170 > ul > li:first-child{ padding-left:0; } #top .site-footer__middle .contIn1170 > ul > li + li::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:16px; background: rgba(255,255,255,.25); } #top .site-footer__policies{ margin-bottom:20px; } #top .site-footer__policies .contIn1170 > ul{ display:flex; flex-wrap:wrap; gap:0; } #top .site-footer__policies .contIn1170 > ul > li{ position:relative; padding:0 16px; } #top .site-footer__policies .contIn1170 > ul > li:first-child{ padding-left:0; } #top .site-footer__policies .contIn1170 > ul > li + li::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:14px; background:#d7dbe1; } #top .site-footer__bottom small, #top .site-footer__copyright { color: #0f172a; } /* ───────────────────────────────────────────── Responsive ────────────────────────────────────────────── */ @media (max-width:1200px){ #top .about-hero__links{ grid-template-columns:repeat(3, minmax(300px, 1fr)); } #top .about-hero__links a{ width:auto; } } @media (max-width:1024px){ #top .cards--3{ grid-template-columns:repeat(2,minmax(0,1fr)); } #top .industry-nav__list{ grid-template-columns:repeat(4,minmax(0,1fr)); } } @media (max-width:760px){ #top .about-hero__links{ grid-template-columns:1fr; } } @media (max-width:640px){ #top .cards--3{ grid-template-columns:1fr; } #top .industry-nav__list{ grid-template-columns:repeat(3,minmax(0,1fr)); } #top .mega__inner{ width:100%; grid-template-columns: 1fr; } #top .mega__left{ padding:20px; } #top .mega__links{ padding:20px; } #top .mega__links > ul{ grid-template-columns: 1fr; } } @media (max-width:640px){ /* 3列用の区切り線（940pxでの4列指定を上書き） */ #top .industry-nav__list li:not(:nth-child(3n+1))::after{ content:""; position:absolute; top:12px; bottom:12px; left:0; width:1px; background:#e6edf2; } /* アイコンとラベルをやや小さめに（940pxの48px/14pxを踏襲しつつSP最適化） */ #top .industry-nav__list .ico{ width:44px; height:auto; } #top .industry-nav__list .label{ font-size:13px; } } /* ============================================================ Cases heading & slider（導入事例：見出し＋スライダー）専用 ============================================================ */ #top .cases-block{ position: relative !important; overflow: hidden; margin-top: 0; background-image: url("../img/common/bg_jirei.png"); background-repeat: no-repeat; background-position: left top; background-size: auto; } #top .cases-block .contIn1170{ position: static !important; z-index: 1; } #top .cases-block .section-h--row{ display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 0 18px; } #top .cases-block .eyebrow{ margin:0 0 6px; font-size:14px; font-weight:700; color:#00A7EB; letter-spacing:.02em; } #top .cases-block .ttl{ margin:0; font-size:36px; line-height:1.2; font-weight:800; color:#0f172a; padding: 0px 0px 0px 0px; } #top .cases-block .section-h--row .link-more{ flex:0 0 auto;} #top .cases-slider{ position: static !important; margin-top:60px; } #top .cases-slider__viewport{ position: relative; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; } #top .cases-slider__viewport::-webkit-scrollbar{ width:0; height:0; display:none; } #top .cases-slider__track{ display:flex; gap:32px; padding:0 8px; overflow:visible; scroll-snap-type:x mandatory; } #top .cases-card{ flex:0 0 360px; scroll-snap-align:start; border:none; } #top .cases-card__media{ margin:0 0 16px; aspect-ratio:16/9; background:#f2f5f8; } #top .cases-card__media img{ width:100%; height:100%; object-fit:cover; display:block; } #top .cases-card__title{ font-size:18px; font-weight:800; margin:0 0 10px; color:#0f172a; position:relative; padding-right:28px; } #top .cases-card__title::after{ content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:20px; height:20px; border-radius:50%; background:#00a7eb url("data:image/svg+xml;utf8,\ \ \ ") center/6px 8px no-repeat; } #top .cases-card__text{ color:#475569; font-size:14px; line-height:1.8; } #top .cases-card__tags{ display:flex; gap:8px; margin-top:14px; } #top .cases-card .tag{ display:inline-block; padding:6px 10px; background:#00a7eb; border:1px solid #00a7eb; color:#fff; font-size:12px; } #top .cases-block .cases-slider__btn{ position: absolute; top:40%; transform:translateY(-50%); width:40px; height:60px; border:0; background:#fff; box-shadow:0 6px 18px rgba(2,32,62,.10); display:grid; place-items:center; cursor:pointer; z-index:3; } #top .cases-block .cases-slider__btn--prev{ left:0; border-radius:0 30px 30px 0; } #top .cases-block .cases-slider__btn--next{ right:0; border-radius:30px 0 0 30px; } #top .cases-block .cases-slider__btn > span{ position:relative; width:12px; height:20px; display:block; font-size:0; line-height:0; } #top .cases-block .cases-slider__btn::before, #top .cases-block .cases-slider__btn::after{ content:none !important; } #top .cases-block .cases-slider__btn > span::before{ position:absolute; inset:0; margin:auto; width:12px; height:20px; transform:rotate(45deg); } #top .cases-block .cases-slider__btn--next > span::before{ transform:rotate(-135deg); } #top .cases-slider__bar{ margin-top:16px; height:6px; background:#e6edf2; position:relative; cursor:pointer; z-index:1; } #top .cases-slider__thumb{ position:absolute; left:0; top:0; bottom:0; width:120px; background:#111827; cursor:grab; pointer-events:auto; z-index:2; } /* ============================================================ Cases : 追加スタイル（4リンク / 見出し内丸矢印 / タグ色 / 矢印色 ） ============================================================ */ /* ========== 導入事例：スライダー矢印を画像に差し替え ========== */ #top .cases-block .cases-slider__btn::before, #top .cases-block .cases-slider__btn::after{ content: none !important; } #top .cases-block .cases-slider__btn{ position:absolute; top:40%; transform:translateY(-50%); width:40px; height:60px; border:0; background:#fff; box-shadow:0 6px 18px rgba(2,32,62,.10); display:grid; place-items:center; cursor:pointer; z-index:3; } #top .cases-block .cases-slider__btn--prev{ left:0; border-radius:0 30px 30px 0; } #top .cases-block .cases-slider__btn--next{ right:0; border-radius:30px 0 0 30px; } #top .cases-block .cases-slider__btn > span{ display:block; width:12px; height:20px; background-position:center; background-repeat:no-repeat; background-size:contain; } #top .cases-block .cases-slider__btn--prev > span{ background-image:url("../img/common/arrow_slider_L.png"); } #top .cases-block .cases-slider__btn--next > span{ background-image:url("../img/common/arrow_slider_R.png"); } /* ========== 導入事例：スライダー矢印を画像に差し替え ========== */ #top .cases-block .cases-slider__btn::before, #top .cases-block .cases-slider__btn::after{ content: none !important; } #top .cases-block .cases-slider__btn{ position:absolute; top:40%; transform:translateY(-50%); width:40px; height:60px; border:0; background:#fff; box-shadow:0 6px 18px rgba(2,32,62,.10); display:grid; place-items:center; cursor:pointer; z-index:3; } #top .cases-block .cases-slider__btn--prev{ left:0; border-radius:0 30px 30px 0; } #top .cases-block .cases-slider__btn--next{ right:0; border-radius:30px 0 0 30px; } #top .cases-block .cases-slider__btn > span{ display:block; width:12px; height:20px; background-position:center; background-repeat:no-repeat; background-size:contain; } #top .cases-block .cases-slider__btn--prev > span{ background-image:url("../img/common/arrow_slider_L.png"); } #top .cases-block .cases-slider__btn--next > span{ background-image:url("../img/common/arrow_slider_R.png"); } #top .cases-cats{ margin-top: 26px; } #top .cases-cats__list{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } #top .cases-cats__list a{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 18px; background:#fff; border:1px solid #eef2f7; box-shadow: 0 0 16px rgba(0,0,0,.08); text-decoration:none; color:#0f172a; } #top .cases-cats__list .label{ font-weight:700; } #top .cases-cats__list .arrow-circle{ flex:0 0 auto; } #top .cases-slider__track{ align-items: flex-start; } #top .cases-card{ display: flex; flex-direction: column; } #top .cases-card__media{ flex: 0 0 auto; } #top .cases-card__text { flex: 0 0 auto; } #top .cases-card__tags { flex: 0 0 auto; } #top .cases-block .cases-slider{ margin-bottom: 22px; } #top .cases-cats{ clear: both; } #top .cases-card__title{ margin-top: 0; } #top .cases-card__media img{ display:block; } #top .columns-block .card__title{ font-weight: 700 !important; } #top .columns-block .card__text{ color: #475569; } #top .columns-block .columns-list{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 40px; } #top .columns-block .cases-card__media{ aspect-ratio: 16 / 9; background: #f2f5f8; margin: 0 0 16px; } #top .columns-block .cases-card__media img{ width: 100%; height: 100%; object-fit: cover; display: block; } #top .columns-block .top_cats{ margin-top: 28px; } @media (max-width: 1024px){ #top .columns-block .columns-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 940px){ #top .columns-block .columns-list{ grid-template-columns: 1fr; } } /* ============================================================ 共通パーツ：top_cats（4リンクの行） ※ 既存 .cases-block 用の CSS はそのまま、 ここでは .top_cats にも同じ見た目が適用されるように追加 ============================================================ */ #top .top_cats { margin-top: 24px; } #top .cases-block .cases-cats__list, #top .top_cats .cases-cats__list{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 18px 0 0; padding: 0; } #top .cases-block .cases-cats__list a, #top .top_cats .cases-cats__list a{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; background: #fff; color: #0f172a; text-decoration: none; border: 1px solid #e6edf2; box-shadow: 0 4px 12px rgba(2, 32, 62, 0.06); } #top .cases-block .cases-cats__list .label, #top .top_cats .cases-cats__list .label{ font-weight: 700; font-size: 16px; } #top .cases-block .cases-cats__list .arrow-circle, #top .top_cats .cases-cats__list .arrow-circle{ flex-shrink: 0; } /* ============================================================ Columns heading（コラムの見出し）＝導入事例と同仕様 ※ 既存を壊さないよう .columns-block スコープで追加 ============================================================ */ #top .columns-block .section-h--row{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:12px 0 18px; } #top .columns-block .eyebrow{ margin:0 0 6px; font-size:14px; font-weight:700; color:#00A7EB; letter-spacing:.02em; } #top .columns-block .ttl{ margin:0; font-size:36px; line-height:1.2; font-weight:800; color:#0f172a; padding: 0px 0px 0px 0px; } #top .columns-block .section-h--row .link-more{ flex:0 0 auto; } /* ============================================================ Column cards：リンク体裁を Cases と完全一致に（青/下線を消す） ※ 追記でOK。差し替え不要 ============================================================ */ #top .columns-block .cases-card a{ color:#0f172a; text-decoration:none; } #top .columns-block .cases-card a:visited{ color:#0f172a; } #top .columns-block .cases-card a:hover{ text-decoration:none; } #top .columns-block .cases-card__title{ margin:0 0 10px; font-size:18px; font-weight:800; color:#0f172a; position:relative; padding-right:28px; } #top .columns-block .cases-card__title a{ color:#0f172a; text-decoration:none; display:inline-block; } #top .columns-block .cases-card .tag, #top .columns-block .cases-card .tag:link, #top .columns-block .cases-card .tag:visited{ display:inline-block; padding:6px 10px; background:#00a7eb; border:1px solid #00a7eb; color:#fff; font-size:12px; text-decoration:none; } #top .columns-block .cases-card__media{ aspect-ratio:16/9; background:#f2f5f8; margin:0 0 16px; } #top .columns-block .cases-card__media img{ width:100%; height:100%; object-fit:cover; display:block; } /* ============================================================ Recruit（採用情報）調整：サイズ／寄せ／背景 ============================================================ */ #top .recruit-block{ position: relative; margin-block: var(--section-gap) 0; min-height: 500px; display: flex; align-items: center; --recruitY: 100%; background-image: url("../img/common/bg_recruit.png"); background-repeat: no-repeat; background-position: right var(--recruitY); background-size: cover; will-change: background-position; } @media (min-width: 1200px){ #top .recruit-block{ background-size: cover; } } #top .recruit-block .contIn1170{ position: relative; z-index: 1; } #top .recruit-block__panel{ width: 570px; height: 380px; box-sizing: border-box; background: rgba(255,255,255,.95); padding: 36px 40px; box-shadow: 0 10px 24px rgba(0,0,0,.12); display: flex; flex-direction: column; justify-content: center; } #top .recruit-block .eyebrow{ margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--c-primary); text-align: center; } #top .recruit-block .ttl{ margin: 0 0 16px; font-size: 36px; line-height: 1.25; font-weight: 800; color:#0f172a; text-align: center; } #top .recruit-block .lead{ margin: 0 0 24px; color: #334155; line-height: 1.9; font-size: 15px; text-align: left; } #top .recruit-block .link-more--lg{ width: 255px; height: 80px; font-size: 18px; line-height: 1; margin-inline: auto; } #top .recruit-block{ --recruitY: 100%; background-position: right var(--recruitY); will-change: background-position; } @media (prefers-reduced-motion: reduce){ #top .recruit-block{ --recruitY: 100%; } } /* =========================== About hero（パララックス） ※ 既存の background はそのまま ※ 2レイヤー（1:グラデ, 2:画像）それぞれの position を上書き =========================== */ #top .about-hero{ --aboutY: 0px; background-repeat: no-repeat, no-repeat; background-size: 100% 100%, cover; background-position: center center, right calc(100% + var(--aboutY, 0px)); } /* ============================================================ MOBILE / TABLET RESPONSIVE ADD-ONS（末尾追記） ============================================================ */ /* ---------- 共通トークン微調整（タブレット以下） ---------- */ @media (max-width: 960px){ body{ --section-gap: 48px; --gap: 20px; } } /* ---------- 共通トークン微調整（スマホ） ---------- */ @media (max-width: 760px){ body{ --section-gap: 40px; --gap: 16px; } } /* ============================================================ News（お知らせ） ============================================================ */ @media (max-width: 960px){ #top .news-block .contIn1170{ grid-template-columns: 1fr; row-gap: 18px; } #top .news-block .section-h{ grid-column: 1; grid-row:auto; } #top .news-block .news-cat{ grid-column: 1; } #top .news-block .news-lines{ grid-column: 1; } } @media (max-width: 760px){ #top .news-block .news-cat{ gap: 18px; margin: 0 0 10px; } #top .news-block .news-cat button{ font-size: 15px; padding: 10px 0; } #top .news-block .news-lines a{ grid-template-columns: 90px auto 1fr 18px; gap: 12px; padding: 14px 0; } #top .news-block .news-badge{ height: 22px; padding: 0 8px; font-size: 10px; width: auto; } } /* ============================================================ Cases（導入事例：スライダー） ============================================================ */ @media (max-width: 960px){ #top .cases-slider__track{ gap: 24px; } #top .cases-card{ flex: 0 0 70vw; } } @media (max-width: 760px){ #top .cases-block .cases-slider__btn{ display: none; } #top .cases-slider__track{ gap: 20px; padding: 0 4px; } #top .cases-card{ flex: 0 0 82vw; } #top .cases-slider__bar{ height: 4px; } } @media (max-width: 960px){ #top .top_cats .cases-cats__list{ grid-template-columns: repeat(2, 1fr); gap: 14px; } } @media (max-width: 760px){ #top .top_cats .cases-cats__list{ gap: 12px; } #top .top_cats .cases-cats__list a{ height: 56px; padding: 0 12px; } #top .top_cats .cases-cats__list .label{ font-size: 14px; } #top .top_cats .arrow-circle{ --s: 16px; } } /* ============================================================ Columns（コラム：カードは導入事例と同ルック・静的） ============================================================ */ @media (max-width: 960px){ #top .columns-block .columns-cards{ grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; } } @media (max-width: 760px){ #top .columns-block .columns-cards{ grid-template-columns: 1fr; gap: 16px; } #top .columns-block .cases-card__title{ padding-right: 26px; } } /* ============================================================ Recruit（採用情報：パララックス背景＋カード中央） ============================================================ */ @media (max-width: 960px){ #top .recruit-block__card{ width: min(570px, calc(100vw - 64px)); } } @media (max-width: 760px){ #top .recruit-block{ min-height: 420px; padding: 24px 0 0; } #top .recruit-block__card{ width: calc(100vw - 32px); padding: 22px; } #top .recruit-block__eyebrow{ font-size: 12px; } #top .recruit-block__title{ font-size: 26px; } #top .recruit-block__btn{ width: 100%; max-width: 255px; height: 68px; } } /* ============================================================ Header / KV ============================================================ */ @media (max-width: 760px){ #top .kv__dots{ gap: 28px; padding: 0 10px; } /* スペーシングをPCと揃える */ #top .kv__dots button{ width: 10px; height: 10px; } } /* ============================================================ Footer（段組み→2段/1段） ============================================================ */ @media (max-width: 960px){ #top .footer-cols{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; } } @media (max-width: 940px){ #top .footer-cols{ grid-template-columns: 1fr; } #top .site-footer__middle .footer-menu{ flex-wrap: wrap; gap: 8px 16px; } #top .site-footer__middle .footer-menu li+li::before{ margin: 0 8px; opacity: .5; } } /* ============================================================ SPハンバーガーメニュー（新構造対応） ============================================================ */ #top .hamburger { position: absolute; top: 18px; right: 20px; width: 32px; height: 28px; cursor: pointer; display: none; background: none; border: none; z-index: 1001; } #top .hamburger__bar, #top .hamburger__bar::before, #top .hamburger__bar::after { content: ""; display: block; width: 100%; height: 2px; background-color: #333; position: absolute; left: 0; transition: transform 0.3s ease, opacity 0.3s ease; } #top .hamburger__bar { top: 50%; transform: translateY(-50%); } #top .hamburger__bar::before { top: -9px; } #top .hamburger__bar::after { top: 9px; } #top .hamburger.is-active .hamburger__bar { background-color: transparent; } #top .hamburger.is-active .hamburger__bar::before { transform: rotate(45deg) translate(5px,5px); } #top .hamburger.is-active .hamburger__bar::after { transform: rotate(-45deg) translate(5px,-5px); } #top .sp-menu { display: none; } /* 1) ヘッダーを最前面に */ :root{ --sp-header-h: 84px; } /* 現在のヘッダー高に合わせる */ #top .site-header{ position: relative; /* z-indexを効かせるためにposition付与 */ z-index: 2000; /* メニューより上の数字に */ height: 84px; box-shadow: 0 2px 8px rgba(0,0,0,.06); margin-bottom: 40px; } /* 2) スライドメニューはヘッダーの“下から”始める */ #top .sp-menu__inner{ top: var(--sp-header-h); /* ← ここ重要 */ left: 0; z-index: 1200; /* ヘッダーより下 */ } /* 3) 半透明レイヤーもヘッダーの下から */ #top .sp-menu__overlay{ top: var(--sp-header-h); /* ← ここ重要 */ z-index: 1100; /* パネルより一段低く */ } @media screen and (max-width: 1286px) { /* 背景レイヤー（半透明） */ #top .sp-menu { position: fixed; inset: 0; display: block; visibility: hidden; opacity: 0; transition: opacity 0.3s ease, visibility 0.3s ease; will-change: opacity; } /* 内側スライドパネル */ #top .sp-menu__inner { position: absolute; right: 0; bottom: 0; width: min(86vw, 360px); background: #fff; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; padding: 30px 24px 40px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; } /* 開いたときの状態 */ #top .sp-menu.is-open { visibility: visible; opacity: 1; } #top .sp-menu.is-open .sp-menu__inner { transform: translateX(0); } /* メニューリスト */ #top .sp-menu__list { list-style: none; padding: 0; margin: 0; } #top .sp-menu__list li { margin-bottom: 20px; text-align: left; border-bottom: 1px solid #eee; padding-bottom: 20px; font-weight: 800;} #top .sp-menu__list a { font-size: 18px; text-decoration: none; color: #333; } #top .sp-menu__list li.has-children { padding-bottom: 0px!important;} } /* ============================================================ KV：SPでコントローラーを画像の下に ============================================================ */ @media (max-width: 940px){ #top .kv{ padding-bottom:0; } #top .kv__controls{ position:static; right:auto; bottom:auto; display:flex; align-items:center; gap:12px; margin-top:10px; } #top .kv__dots{ padding:0; background:transparent; } #top .kv__toggle{ margin-left:auto; order:0; } } @media (max-width: 940px){ #top .kv__controls{ display:flex; align-items:center; gap:12px; margin-top:10px; } #top .kv__dots{ flex: 1 1 auto; display:flex; justify-content:center; } #top .kv__toggle{ margin-left:auto; } } /* ============================================================ 業種から探す（SPは4列） ============================================================ */ @media (max-width: 940px){ #top .industry-nav__list{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap:0; position:relative; } #top .industry-nav__list::before, #top .industry-nav__list::after, #top .industry-nav__list li + li::before{ display:none; } #top .industry-nav__list li{ position:relative; } #top .industry-nav__list li:not(:nth-child(4n+1))::after{ content:""; position:absolute; top:12px; bottom:12px; left:0; width:1px; background:#e6edf2; } #top .industry-nav__list a{ padding:14px 6px; } #top .industry-nav__list .ico{ width:48px; } #top .industry-nav__list .label{ font-size:14px; } } /* ============================================================ SP Global Navigation（ハンバーガー開閉） - 全幅（100%）で左端から表示 - ＋ボタンのアコーディオン - 最下部に検索フォーム ============================================================ */ @media (max-width:640px){ #top .sp-nav{ width:100vw; left:0; right:0; } #top .sp-nav__inner{ width:100vw; max-width: none; margin: 0; box-sizing: border-box; padding-left: 0; padding-right: 0; } } @media (max-width: 940px){ #top .sp-nav{ position: fixed; inset: 0; left: 0; width: 100%; background:#fff; transform: translateX(100%); transition: transform .32s cubic-bezier(.16,1,.3,1); z-index: 1000; } #top .sp-nav.is-open{ transform: translateX(0); } #top .sp-nav[aria-hidden="true"]{ visibility: hidden; } #top .sp-nav.is-open[aria-hidden="false"]{ visibility: visible; } #top .sp-nav__inner{ height: 100%; overflow: auto; padding: 10px 14px 20px; } #top .sp-menu{ margin: 0; padding: 0; list-style:none; } #top .sp-menu > li{ border-bottom: 1px solid #e6edf2; } #top .sp-menu__toggle{ width: 100%; margin: 0; /*padding: 18px 0;*/ background: transparent; border: 0; outline: none; box-shadow:none; display: flex; align-items: center; justify-content: space-between; font-size: 18px; font-weight: 800; color: #0f172a; padding-left: 0px; padding-bottom: 20px; } #top .sp-menu__link{ display:block; padding: 18px 8px; text-decoration: none; color:#0f172a; font-size:18px; font-weight:800; } #top .sp-menu__toggle .plus{ position: relative; width: 24px; height: 24px; flex: 0 0 24px; } #top .sp-menu__toggle .plus::before, #top .sp-menu__toggle .plus::after{ content:""; position:absolute; left:50%; top:50%; width: 16px; height: 2px; background:#00A7EB; transform: translate(-50%,-50%); transition: transform .2s ease, opacity .2s ease; } #top .sp-menu__toggle .plus::after{ transform: translate(-50%,-50%) rotate(90deg); } #top .sp-menu__toggle[aria-expanded="true"] .plus::after{ transform: translate(-50%,-50%) rotate(0deg); opacity: 0; } #top .sp-sub{ background:#f8fafc; border-top: 1px solid #e6edf2; padding: 10px 8px 14px; } #top .sp-sub ul{ list-style:none; margin:0; padding:0; } #top .sp-sub li + li{ border-top:1px dashed #e2e8f0; } #top .sp-sub a{ display:block; padding:12px 4px 12px 14px; color:#0f172a; text-decoration:none; font-size:16px; font-weight:600; position: relative; } #top .sp-sub a::before{ content:""; position:absolute; left:4px; top:50%; width: 10px; height: 2px; background:#00A7EB; transform: translateY(-50%); } #top .sp-search{ margin-top: 18px; padding: 14px 8px 6px; display:flex; gap:8px; align-items:center; } #top .sp-search input[type="search"]{ flex: 1 1 auto; height: 48px; border:1px solid #dbe7f1; border-radius: 8px; padding: 0 14px; font-size:16px; outline:none; } #top .sp-search__btn{ flex: 0 0 48px; width:48px; height:48px; border:0; border-radius:8px; background:#00A7EB; mask: url("data:image/svg+xml;utf8,") center/20px 20px no-repeat; -webkit-mask: url("data:image/svg+xml;utf8,") center/20px 20px no-repeat; color: transparent; } #top .sr-only{ position:absolute; width:1px; height:1px; clip:rect(0,0,0,0); overflow:hidden; white-space:nowrap; } } /* ========================= SP Global Nav: 位置とボタン ========================= */ @media (max-width: 940px){ #top .sp-nav{ position: fixed; left: 0; right: 0; top: var(--spnav-top, 64px); height: calc(100vh - var(--spnav-top, 64px)); width: 100vw; z-index: 1000; } #top .sp-nav__inner{ width: 100vw; max-width: none; height: 100%; overflow: auto; margin: 0; box-sizing: border-box; padding-left: 0; padding-right: 0; } #top .sp-menu-btn{ position: relative; width: 44px; height: 44px; border: 0; background: #fff; } #top .sp-menu-btn::before, #top .sp-menu-btn::after, #top .sp-menu-btn i{ content: ""; position: absolute; left: 10px; right: 10px; height: 2px; background: #00a7eb; top: 50%; transform: translateY(-50%); } #top .sp-menu-btn::before{ top: 15px; transform: none; } #top .sp-menu-btn::after { top: auto; bottom: 15px; transform: none; } #top .sp-menu-btn i{ display:block; } #top .sp-menu-btn.is-open i{ background: transparent; } #top .sp-menu-btn.is-open::before{ top: 50%; transform: translateY(-50%) rotate(45deg); } #top .sp-menu-btn.is-open::after{ top: 50%; bottom: auto; transform: translateY(-50%) rotate(-45deg); } } /* ========== SPメニュー：ハンバーガー → × ========== */ @media (max-width: 940px){ #top .sp-menu-btn{ position: relative; width: 44px; height: 44px; border: 0; background:#fff; outline: none; } #top .sp-menu-btn::before, #top .sp-menu-btn::after, #top .sp-menu-btn i{ content:""; position:absolute; left:10px; right:10px; height:2px; background:#00a7eb; transition: transform .2s ease, opacity .15s ease; } #top .sp-menu-btn::before{ top:14px; } #top .sp-menu-btn i{ top:50%; transform:translateY(-50%); } #top .sp-menu-btn::after { bottom:14px; } #top .sp-menu-btn.is-open > *, #top .sp-menu-btn.is-open svg{ opacity:0; visibility:hidden; } #top .sp-menu-btn.is-open i{ opacity:0; } #top .sp-menu-btn.is-open::before{ top:50%; transform:translateY(-50%) rotate(45deg); } #top .sp-menu-btn.is-open::after{ bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg); } #top .sp-nav__close{ position: absolute; top:8px; right:8px; width: 44px; height: 44px; border:0; background:#fff; z-index: 1001; } #top .sp-nav__close::before, #top .sp-nav__close::after{ content:""; position:absolute; left:12px; right:12px; top:50%; height:2px; background:#00a7eb; } #top .sp-nav__close::before{ transform:translateY(-50%) rotate(45deg); } #top .sp-nav__close::after { transform:translateY(-50%) rotate(-45deg); } } #top .sp-nav{ transition: transform .32s ease, opacity .32s ease; } #top .sp-nav.is-closing{ transform: translateX(100%); opacity: 0; visibility: visible; display: block; } /* ========================================================= 追記：ハンバーガー（閉＝3本線／開＝X） 完全上書きセット ========================================================= */ @media (max-width: 940px){ #top .site-header{ position: relative; } #top .site-header .sp-menu-btn{ position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 1001 !important; width: 44px; height: 44px; background: #fff; border: 0; outline: none; box-shadow: none; } #top .sp-menu-btn i, #top .sp-menu-btn svg, #top .sp-menu-btn img, #top .sp-menu-btn span{ display: none !important; } #top .sp-menu-btn::before{ content:""; position:absolute; left: 10px; right: 10px; top:50%; height:2px; background:#00A7EB; box-shadow: 0 -7px 0 0 #00A7EB, 0 7px 0 0 #00A7EB; transform: translateY(-50%) rotate(0deg); border-radius: 1px; transition: transform .25s ease, box-shadow .2s ease, opacity .2s ease; } #top .sp-menu-btn::after{ content:""; position:absolute; left: 10px; right: 10px; top:50%; height:2px; background:#00A7EB; transform: translateY(-50%) rotate(0deg); opacity: 0; border-radius: 1px; transition: transform .25s ease, opacity .2s ease; } #top .sp-menu-btn.is-open::before{ box-shadow: none; transform: translateY(-50%) rotate(45deg); } #top .sp-menu-btn.is-open::after{ opacity: 1; transform: translateY(-50%) rotate(-45deg); } } /* === ハンバーガー → X を強制（最下部に追記） =================== */ @media (max-width: 940px){ #top .site-header .sp-menu-btn::before{ box-shadow: 0 -7px 0 0 #00A7EB, 0 7px 0 0 #00A7EB !important; } #top .site-header .sp-menu-btn::after{ opacity: 0 !important; transform: translateY(-50%) rotate(0) !important; } #top .site-header .sp-menu-btn.is-open::before{ box-shadow: none !important; transform: translateY(-50%) rotate(45deg) !important; } #top .site-header .sp-menu-btn.is-open::after{ opacity: 1 !important; transform: translateY(-50%) rotate(-45deg) !important; } #top .site-header .sp-menu-btn i, #top .site-header .sp-menu-btn svg, #top .site-header .sp-menu-btn img, #top .site-header .sp-menu-btn span{ display: none !important; } } @media (max-width: 940px){ #top .sp-menu-btn{ width: 44px; height: 44px; background-color: #fff !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 22px 22px !important; border: 0; outline: none; background-image: url("data:image/svg+xml;utf8,\ \ \ ") !important; } #top .sp-menu-btn::before, #top .sp-menu-btn::after, #top .sp-menu-btn i, #top .sp-menu-btn svg, #top .sp-menu-btn img, #top .sp-menu-btn span{ display: none !important; content: none !important; opacity: 0 !important; visibility: hidden !important; } #top .sp-menu-btn.is-open{ background-image: url("data:image/svg+xml;utf8,\ \ \ ") !important; } } @media (max-width: 940px){ #top .site-header .sp-menu-btn, #top .site-header .sp-nav-toggle{ width: 44px; height: 44px; background-color: #fff !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 22px 22px !important; border: 0; outline: none; background-image: url("data:image/svg+xml;utf8,\ \ \ ") !important; } #top .site-header .sp-menu-btn::before, #top .site-header .sp-menu-btn::after, #top .site-header .sp-menu-btn i, #top .site-header .sp-menu-btn svg, #top .site-header .sp-menu-btn img, #top .site-header .sp-menu-btn span, #top .site-header .sp-nav-toggle::before, #top .site-header .sp-nav-toggle::after, #top .site-header .sp-nav-toggle i, #top .site-header .sp-nav-toggle svg, #top .site-header .sp-nav-toggle img, #top .site-header .sp-nav-toggle span{ display: none !important; content: none !important; opacity: 0 !important; visibility: hidden !important; } #top .site-header .sp-menu-btn.is-open, #top .site-header .sp-nav-toggle.is-open{ background-image: url("data:image/svg+xml;utf8,\ \ \ ") !important; } } /* ========================= SP Global Nav: 小メニュー体裁 ========================= */ @media (max-width: 940px){ #top .sp-nav .sp-sub{ background: #F6F6F6; margin-left: 25px; border-radius: 4px; } #top .sp-nav .sp-sub ul{ margin: 0; padding: 6px 8px; list-style: none; } #top .sp-nav .sp-sub li{ border-bottom: 1px solid #DCDCDC !important; } #top .sp-nav .sp-sub li:last-child{ border-bottom: none !important; } #top .sp-nav .sp-sub a{ display: block; color: #0f172a; text-decoration: none; padding: 12px 8px 12px 28px; } #top .sp-nav .sp-sub a::before{ content: ""; position: absolute; left: 10px; top: 50%; width: 12px; height: 2px; background: #00A7EB; transform: translateY(-50%); } } /* ========================= SPグロナビ：検索フォームの体裁 ========================= */ @media (max-width: 940px){ #top .sp-nav .sp-search{ position: relative; padding: 16px; } #top .sp-nav .sp-search__field, #top .sp-nav .sp-search input[type="search"]{ -webkit-appearance: none; appearance: none; width: 100%; height: 48px; border: 0; border-radius: 10px; background: #F6F6F6; padding: 0 56px 0 16px; font-size: 16px; color: #0f172a; } #top .sp-nav .sp-search__field::placeholder, #top .sp-nav .sp-search input[type="search"]::placeholder{ color: #9AA4AF; } #top .sp-nav .sp-search__field:focus, #top .sp-nav .sp-search input[type="search"]:focus{ outline: none; background: #fff; box-shadow: inset 0 0 0 2px #00A7EB; } #top .sp-nav .sp-search__btn, #top .sp-nav .sp-search button[type="submit"]{ position: absolute; top: 50%; right: 22px; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 2px solid #00A7EB; padding: 0; display: grid; place-items: center; cursor: pointer; } #top .sp-nav .sp-search__btn::before, #top .sp-nav .sp-search button[type="submit"]::before{ content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #00A7EB; } #top .sp-nav .sp-search__btn::after, #top .sp-nav .sp-search button[type="submit"]::after{ content: ""; position: absolute; width: 10px; height: 2px; background: #00A7EB; transform: rotate(45deg); right: 8px; bottom: 9px; } } /* ========================= SP Header: 86px / side padding 20px ========================= */ @media (max-width: 940px){ #top .site-header{ height: 64px; margin-bottom: 18px; /* ヘッダー直下に 18px マージン */ } #top .site-header__inner{ height: 64px; padding: 0 20px; gap: 16px; } #top .sp-menu-btn{ margin-left: auto; } #top .site-header__inner{ padding-right: 20px; } } @media (max-width: 940px){ #top .sp-nav{ top: var(--spnav-top, 86px) !important; height: calc(100vh - var(--spnav-top, 86px)) !important; } #top .sp-nav__inner{ padding-top: 0 !important; } } /* ============================== SP: 重要なお知らせ（≦640px） ============================== */ @media (max-width: 940px){ #top .urgent__item{ display:grid; grid-template-columns: 28px 1fr 32px; grid-template-rows: auto auto auto; align-items:center; gap: 10px 12px; padding: 16px; } #top .urgent__icon{ grid-column: 1; grid-row: 1 / 4; width: 24px; height: auto; align-self: center; justify-self: center; } #top .urgent__badge{ grid-column: 2; grid-row: 1; font-size: 18px; font-weight: 800; color: #0f172a; } #top .urgent__time{ grid-column: 2; grid-row: 2; margin: 2px 0 2px; color:#334155; font-variant-numeric: tabular-nums; font-size: 16px; } #top .urgent__link{ grid-column: 2; grid-row: 3; color:#0f172a; text-decoration: none; font-size: 16px; line-height: 1.6; } #top .urgent__item > .arrow-circle, #top .urgent__item > .is-arrow{ grid-column: 3; grid-row: 1 / 4; justify-self: end; align-self: center; } } /* ============================== SP: 重要なお知らせ 微調整（≦640px） ============================== */ @media (max-width: 940px){ #top .urgent__item{ padding: 16px 20px; grid-template-columns: 28px 1fr 28px; } #top .urgent__item > .arrow-circle, #top .urgent__item > .is-arrow{ grid-column: 3; grid-row: 3; justify-self: end; align-self: center; } } @media (max-width: 940px){ #top .urgent__item{ display: grid; grid-template-columns: 28px 1fr 28px; grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 8px; padding: 16px 20px; } #top .urgent__icon{ grid-column: 1; grid-row: 1; justify-self: center; align-self: start; margin: 0; } #top .urgent__badge{ grid-column: 2; grid-row: 1; margin: 0; } #top .urgent__time{ grid-column: 2; grid-row: 2; margin: 0; } #top .urgent__link{ grid-column: 2; grid-row: 3; margin: 0; min-width: 0; display: inline-flex; align-items: center; } #top .urgent__item > .arrow-circle, #top .urgent__item > .is-arrow{ grid-column: 3; grid-row: 3; justify-self: end; align-self: center; } } @media (max-width: 940px){ #top .quick__cards{ grid-template-columns: 1fr !important; row-gap: 24px; } #top .quick__cards a{ min-height: auto; grid-template-rows: auto 1fr; } #top .quick__cards .body{ padding: 16px; } #top .quick__cards .media{ aspect-ratio: 16 / 9; } #top .cards--3{ grid-template-columns: 1fr !important; row-gap: 24px; } } /* ========================================================= SP: About us（about-hero）— はみ出し修正（差し替え） ========================================================= */ @media (max-width: 940px){ #top .about-hero{ background-image: url("../img/common/bg_about_sp.png"); background-position: top center; background-repeat: no-repeat; background-size: 100% auto; padding: 24px 0 24px; overflow: hidden; min-height: auto; } #top .about-hero .contIn1170{ width: 100%; margin: 0; } #top .about-hero__inner{ position: static; width: 100%; padding: 0 20px; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; } #top .about-hero__title{ margin: 0 0 16px; text-align: left; font-size: clamp(20px, 5.6vw, 28px); line-height: 1.35; } #top .about-hero__links{ width: 100%; display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 110px; padding: 0; box-sizing: border-box; } #top .about-hero__links a{ width: 100% !important; max-width: 100%; box-sizing: border-box; margin: 0; } } @media (max-width: 940px){ #top .about-hero{ position: relative; padding-top: 30px; } #top .about-hero__title{ position: absolute; top: 60px; left: 20px; right: 20px; margin: 0; text-align: center; font-size: clamp(40px, 6.5vw, 32px); line-height: 1.3; } } @media (max-width: 940px){ #top .about-hero{ position: relative; overflow: hidden; } #top .about-hero::before{ content: ""; position: absolute; inset: 0; z-index: 0; background-image: url("../img/common/bg_about_sp.png"); background-repeat: no-repeat; background-position: top center; background-size: cover; transform: translateZ(0); } #top .about-hero__title, #top .about-hero__inner{ position: relative; z-index: 1; } } @media (max-width: 940px){ #top .news-block > .link-more, #top .cases-block > .link-more, #top .columns-block > .link-more{ display: inline-flex; margin: 20px 0 0; } #top .news-block .section-h .link-more, #top .cases-block .section-h--row .link-more, #top .columns-block .section-h .link-more{ margin: 0; } } @media (max-width: 940px){ #top .news-block > .link-more, #top .cases-block > .link-more, #top .columns-block > .link-more{ display: flex; align-items: center; justify-content: center; width: calc(100% - 40px); margin: 20px 20px 0; box-sizing: border-box; } } @media (max-width: 940px){ #top .news-block{ margin-bottom: 90px; } #top .cases-block .cases-slider{ margin-top: 0 !important; } #top .columns-block .columns-list { margin-top: 0 !important; } } /* ========================= News: SP(≤640px)レイアウト調整 ========================= */ @media (max-width:640px){ #top .news-block .news-cat{ display:none; } #top .news-block .news-cat--select{ display:block; margin: 0 20px 20px; } #top .news-block .news-cat__select{ appearance:none; width:100%; height:44px; padding:0 44px 0 12px; border:1px solid #dbe7f1; border-radius:6px; background:#fff url("data:image/svg+xml;utf8,\ \ \ ") right 12px center/12px 8px no-repeat; font-size:16px; font-weight:700; color:#0f172a; } #top .news-block .news-lines a{ display:grid; grid-template-columns: auto 1fr 28px; grid-template-rows: auto auto; grid-template-areas: "date badge arrow" "title title arrow"; align-items:center; gap: 6px 12px; padding:16px 0; } #top .news-block .news-date{ grid-area:date; } #top .news-block .news-badge{ grid-area:badge; justify-self:start; white-space:nowrap; } #top .news-block .news-text{ grid-area:title; white-space:normal; overflow:visible; text-overflow:clip; line-height:1.6; } #top .news-block .news-lines .arrow-circle{ grid-area:arrow; justify-self:end; align-self:center; } } @media (max-width:640px){ #top .news-block .news-cat--select{ margin: 0 0px 12px; } #top .news-block .news-cat__select{ appearance: none; width: 100%; height: 42px; line-height: 42px; padding: 0 28px 6px 0; border: 0; border-bottom: 1px solid #e6edf2; border-radius: 0; background: url("data:image/svg+xml;utf8,\ \ \ ") right 6px center/10px 6px no-repeat; color:#0f172a; font-size: 18px; font-weight: 700; background-color: transparent; cursor: pointer; } #top .news-block .news-cat__select:focus{ outline: none; border-bottom-color:#111827; } #top .news-block .news-cat__select{ background: url("data:image/svg+xml;utf8,\ \ \ ") right 6px center/10px 6px no-repeat !important; } } /* ========================= Recruit（採用情報） SP 調整 ========================= */ @media (max-width:640px){ #top .recruit-block{ padding-bottom: 24px; } #top .recruit-block__panel{ position: static !important; transform: none !important; top:auto; left:auto; right:auto; box-sizing: border-box; width: calc(100% - 40px) !important; margin: 0 20px; height: auto; padding: 22px 20px 26px; } #top .recruit-block__panel .recruit-title{ text-align: center; margin: 0 0 10px; } #top .recruit-block__panel .recruit-lead{ text-align: left; } #top .recruit-block__panel .link-more{ display: block; width: 255px; height: 80px; margin: 22px auto 0; } } /* ========================= Recruit（採用情報） SP 専用修正 ========================= */ @media (max-width:640px){ #top .recruit-block{ background-image: url("../img/common/bg_recruit_sp.png") !important; background-repeat: no-repeat; background-position: top center !important; background-size: 100vw auto !important; padding-top: 24px; } #top .recruit-block__panel{ position: static !important; transform: none !important; width: calc(100% - 40px) !important; margin: 24px 20px 28px !important; box-sizing: border-box; height: auto !important; } #top .recruit-block__panel .recruit-title{ text-align: center; } #top .recruit-block__panel .link-more{ display: flex; align-items: center; justify-content: center; width: 255px; height: 80px; margin: 22px auto 0; padding: 0; } #top .recruit-block{ background-size: cover !important; background-position: top center !important; background-repeat: no-repeat !important; } } /* ========================= Footer: SP ========================= */ @media (max-width:640px){ #top .site-footer__middle, #top .site-footer__middle .contIn1170{ border-top: none !important; } #top .site-footer__middle nav ul{ display: flex; flex-direction: column; gap: 12px; } #top .site-footer__middle nav li{ display: block; padding: 0; margin: 0; border-left: 0 !important; } #top .site-footer__middle nav li+li::before{ content: none !important; } #top .site-footer__middle nav a{ display: block; padding: 6px 0; } #top .site-footer__policies ul{ display: flex; flex-direction: column; gap: 12px; } #top .site-footer__policies li{ display: block; padding: 0; margin: 0; border-left: 0 !important; } #top .site-footer__policies li+li::before{ content: none !important; } #top .site-footer__policies a{ display: block; padding: 6px 0; } } @media (max-width:640px){ #top footer.site-footer .site-footer__middle, #top footer.site-footer .site-footer__middle .contIn1170{ border-top: none !important; box-shadow: none !important; } #top footer.site-footer .site-footer__middle::before, #top footer.site-footer .site-footer__middle::after, #top footer.site-footer .site-footer__middle .contIn1170::before, #top footer.site-footer .site-footer__middle .contIn1170::after{ content: none !important; } #top footer.site-footer .site-footer__middle hr{ display: none !important; } #top footer.site-footer .site-footer__middle{ background-image: none !important; padding-bottom: 20px; padding-top: 0px; margin-top: -40px; } #top footer.site-footer .site-footer__middle nav, #top footer.site-footer .site-footer__middle .footer-links, #top footer.site-footer .site-footer__middle nav ul{ display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 12px !important; align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; } #top footer.site-footer .site-footer__middle nav li, #top footer.site-footer .site-footer__middle .footer-links li{ display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } #top footer.site-footer .site-footer__middle nav li+li::before, #top footer.site-footer .site-footer__middle .footer-links li+li::before{ content: none !important; } #top footer.site-footer .footer-links--policies{ text-align: left !important; justify-content: flex-start !important; align-items: flex-start !important; } #top footer.site-footer .footer-links--policies ul{ display: flex !important; flex-direction: column !important; gap: 12px !important; align-items: flex-start !important; } #top footer.site-footer .footer-links--policies li{ border: 0 !important; margin: 0 !important; padding: 0 !important; } #top footer.site-footer .footer-links--policies li+li::before{ content: none !important; } } /* ===== News：PCではSP用プルダウンを非表示 ===== */ @media (min-width: 641px){ /* セクション内だけを対象に限定して安全に隠す */ #top .news-cat--select { display: none !important; } } /* =========== ヘッダー：検索＆お問い合わせ（右ピル） =========== */ #top .header-util{ position:absolute; right:16px; top:50%; transform:translateY(-50%); /* 高さが変わっても常に中央 */ display:flex; align-items:center; gap:14px; } /* ───────────────────────────── Header: 1445px以下でナビを圧縮 ───────────────────────────── */ @media (max-width:1445px){ /* メニュー間の間隔を32px → 16pxに圧縮 */ #top .gnav__list{ gap:16px; } /* ラベル文字サイズを16px → 14pxに */ #top .gnav__list > li > a{ font-size:14px; } } /* ───────────────────────────── Header: 1286px以下でPCナビ・検索・お問い合わせを非表示 ハンバーガーメニューを先行表示 ───────────────────────────── */ @media (max-width:1286px){ /* PC用ナビ・検索・問い合わせを非表示 */ #top .ssDisplay {display:block!important;} #top .gnav, #top .site-search, #top .header-contact{ display:none !important; } /* ハンバーガーアイコン */ #top .hamburger{ display:block !important; z-index:1300; width:20px; height:14px; position:absolute; top:50%; /* 高さ 64px に対して中央 */ right:20px; transform: translateY(-50%); /* 中央寄せ */ background:none; border:0; cursor:pointer; } /* 3本線 */ #top .hamburger span, #top .hamburger span::before, #top .hamburger span::after{ position:absolute; left:0; width:20px; height:2px; background:#333; border-radius:1px; content:""; transition:transform .3s ease, opacity .3s ease; transform-origin:50% 50%; /* ← 回転中心を中央に固定 */ } #top .hamburger span{ top:50%; transform:translateY(-50%); } #top .hamburger span::before{ top:-6px; } #top .hamburger span::after{ top:6px; width:12px; /* ← 左寄せで短くする */ left:0; right:auto; } /* 開いた状態（×へ変形） */ #top .hamburger.is-active span{ background:transparent; } #top .hamburger.is-active span::before{ top:0; left:3px; /* ← (20 - 14) / 2 = 3px で中央配置 */ width:14px; height:2px; transform:rotate(45deg); } #top .hamburger.is-active span::after{ top:0; left:3px; /* ← 下側アームも中央に揃える */ width:14px; height:2px; transform:rotate(-45deg); } } /* キーワードで探すページ用フォームのstyle ssDisplay */ #top .lwr .lwr-keyword .ssDisplay { width: 100%; max-width: none; } #top .ssDisplay { position: relative; display: flex; align-items: center; background: #F7F6F2; border-radius: 9999px; padding-left: 18px; width: 200px; height: 44px; } #top .ssDisplay input[type="search"]{ border:0; background:transparent; outline:none; width:100%; height:40px; line-height:1; /* ← ベースラインのズレ防止 */ font-size:14px; color:#374151; box-sizing:border-box; padding:0; /* ← 余計な上下余白を排除 */ } @media (max-width:780px){ #top .ssDisplay input[type="search"]{ height:42px; line-height:1; /* ← ベースラインのズレ防止 */ font-size:12px; } } #top .ssDisplay__btn { position: absolute; right: 0; top: 0; bottom: 0; margin: auto; width: 44px; height: 44px; border: 0; border-radius: 50%; background: url("../img/common/icon_lupe.svg") center / 18px 18px no-repeat, linear-gradient(90deg, #3B8026 0%, #54AE3A 100%); display: flex; align-items: center; justify-content: center; cursor: pointer; } #top .ssDisplay__btn::before, #top .ssDisplay__btn::after{ content:none; } .lwr-keyword__util .ssDisplay { background: #FFF !important; border: #d8d3c1 solid 1px; } /* 検索フォーム全体を200pxに収める（装飾＋ボタン含む） */ #top .site-search { position: relative; /* ← ボタンを重ねる基準に */ display: flex; align-items: center; background: #F7F6F2; /* 背景を全体に適用 */ border-radius: 9999px; padding-left: 18px; /* 左のみ余白 */ width: 200px; height: 44px; } #top .site-search__field{ display:flex; align-items:center; /* ← 入力欄を垂直中央に */ flex:1 1 auto; min-width:0; /* ← 収まり安定化 */ } #top .site-search input[type="search"]{ border:0; background:transparent; outline:none; width:100%; height:28px; line-height:1; /* ← ベースラインのズレ防止 */ font-size:14px; color:#374151; box-sizing:border-box; padding:0; /* ← 余計な上下余白を排除 */ } #top .site-search__btn { position: absolute; right: 0; top: 0; bottom: 0; margin: auto; width: 44px; height: 44px; border: 0; border-radius: 50%; background: url("../img/common/icon_lupe.svg") center / 18px 18px no-repeat, linear-gradient(90deg, #3B8026 0%, #54AE3A 100%); display: flex; align-items: center; justify-content: center; cursor: pointer; } #top .site-search__btn::before, #top .site-search__btn::after{ content:none; } .lwr-keyword__util .site-search { background: #FFF!important; /* 背景を全体に適用 */ border: #d8d3c1 solid 1px; } /* お問い合わせボタン（緑ピル） */ #top .header-contact a{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 22px; background:linear-gradient(90deg, #3B8026 0%, #54AE3A 100%); color:#fff; border-radius:9999px; font-weight:700; text-decoration:none; transition:opacity .3s ease; } #top .header-contact a:hover{ opacity:.85; /* グラデの彩度を保ちつつ軽いホバー効果 */ } #top .header-contact .ico-mail{ width:20px; height:20px; display:inline-block; background:url("../img/common/icon_mail.svg") center / 20px 20px no-repeat; } #top .header-contact .ico-mail::before, #top .header-contact .ico-mail::after{ content:none; } /* ============================================================ KV：ページネーション中央寄せ（再配置） ============================================================ */ #top .kv__controls { position: static !important; /* 絶対配置を解除して通常フローへ */ display: flex; justify-content: center; /* 中央寄せ */ align-items: center; margin-top: 16px; /* 画像とドットの間隔 */ gap: 0; width: 100%; } #top .kv__dots { display: flex; justify-content: center; align-items: center; gap: 28px; /* ドット間のマージンを28pxに変更 */ } /* ドット（既存と同一色指定） */ #top .kv__dot { width: 12px; height: 12px; border-radius: 50%; background: #DAD6C4; border: none; cursor: pointer; transition: background-color 0.25s ease; } #top .kv__dot.is-active { background: #54AE3A; } /* 再生ボタンなど不要要素を非表示 */ #top .kv__toggle, #top .kv__controls > *:not(.kv__dots) { display: none !important; } /* ============================================================ KV ページネーション連結ライン（アクティブ＋次） ============================================================ */ #top .kv__dots { position: relative; display: flex; justify-content: center; align-items: center; gap: 28px; } /* ドットの基本形 */ #top .kv__dot { position: relative; width: 12px; height: 12px; border-radius: 50%; background: #DAD6C4; border: none; cursor: pointer; transition: background-color .35s ease; } /* アクティブ */ #top .kv__dot.is-active { background: #54AE3A; } /* アクティブ → 次ドットの棒（PNG） */ #top .kv__dot{ position: relative; overflow: visible; } #top .kv__dot.is-active{ z-index: 2; } #top .kv__dot.is-active::after{ content: ""; position: absolute; top: 50%; left: calc(100% - 3px); /* ご指定の3px左寄せ維持 */ transform: translateY(-50%); width: 30px; /* 長さ：gapに応じて調整可 */ height: 10px; /* 太さ：画像比率に合わせて調整可 */ pointer-events: none; background-image: url("../img/common/dot-bar.png"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; /* 画像を枠にフィット */ } #top .kv__dot.is-active:last-child::after{ content: none; /* 末尾では棒を出さない */ } /* アクティブが最後のドットなら線を消す */ #top .kv__dot.is-active:last-child::after { opacity: 0; width: 0; } /* ============================================================ KV ページネーション：次のドットも緑に ============================================================ */ /* 通常 */ #top .kv__dot { background: #DAD6C4; transition: background-color .3s ease; } /* アクティブ */ #top .kv__dot.is-active { background: #54AE3A; } /* 次のドット */ #top .kv__dot.is-next { background: #54AE3A; /* 通常の緑と同じ色 */ opacity: 1; /* 不透明で完全表示 */ } /* ============================================================ Catch band（KV直下の帯セクション） ============================================================ */ #top .catch-band{ margin: 40px 0 0; /* KVとの間隔 */ } #top .catch-band__inner{ width: 998px; margin: 0 auto; border-radius: 40px; padding: 56px 64px; display: flex; justify-content: space-between; align-items: center; gap: 40px; } #top .catch-band__lead{ width: 273px; height: auto; padding-top: 10px; } #top .catch-band__lead img{ display: block; width: 100%; height: auto; } #top .catch-band__desc{ width: 614px; margin: 0; font-family: 'Noto Sans JP', sans-serif; font-weight: 500; font-size: 16px; line-height: 2; color: #4B4B4B; } /* --- Responsive --- */ @media (max-width: 1024px){ #top .catch-band__inner{ padding: 40px 32px; column-gap: 28px; grid-template-columns: 1fr; /* 1カラム */ row-gap: 18px; } #top .catch-band__lead{ font-size: clamp(22px, 5.2vw, 32px); line-height: 1.7; } #top .catch-band__desc{ font-size: 15px; line-height: 1.9; } } @media (max-width: 640px){ #top .catch-band{ margin-top: 24px; margin-bottom: 40px; } #top .catch-band__inner{ padding: 24px 20px; border-radius: 28px; } #top .catch-band__lead{ letter-spacing: .06em; } } /* ============================================================ Support（課題解決サポート） ============================================================ */ /* Support セクション：上26pxだけ透明→そこから帯色 */ #top .support-block{ position: relative; padding: 0px 0 120px; text-align: center; overflow: visible; /* 透明(0～26px) → #F0EFE9(26px～下端) を一枚で描画 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0 40px, #F0EFE9 26px 100%); } #top .support-block a{ text-decoration: none; } /* 英字見出しのはみ出し表現強化 */ #top .support-block__title{ position: relative; margin-top: -0px; /* はみ出し量 */ z-index: 1; /* 背景より前に */ } #top .support-block__title{ font-family:"Noto Sans JP", sans-serif; font-weight:700; margin-bottom:56px; } #top .support-block__title .en{ display:block; font-family:"Poppins","Noto Sans JP",system-ui,-apple-system,BlinkMacSystemFont,sans-serif; font-weight:300; /* Light */ font-size:88px; /* 指定サイズ */ color:#BCA78D; line-height:1; margin-bottom: 20px; } #top .support-block__title .ja{ display:block; font-size:18px; font-weight:700; color:#111; margin-top:8px; letter-spacing:.1em; } #top .support-block small.ja, #top .lineup-grid__title .ja { display: block; font-family: "Noto Sans JP", sans-serif; font-weight: 700; /* Bold */ font-size: 20px; /* ← 統一フォントサイズ */ line-height: 1.6; color: #333; margin-top: 8px; } #top .support-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:40px; justify-content:center; width:1200px; /* ← 指定どおり拡幅 */ margin:0 auto; } #top .support-card{ background:#fff; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.08); padding:48px; text-align:center; } #top .support-card__head { font-family: "Noto Sans JP", sans-serif; font-weight: 700; /* Bold */ font-size: 18px; margin-bottom: 18px; text-align: center; } /* --- 業態から探す --- */ #top .support-card__list { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin: 0; padding: 0; list-style: none; } #top .support-card__list li{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:12px; } #top .support-card__list img{ width:96px; height:auto; display:block; } #top .support-card__list .ttl{ font-weight:700; font-size:16px; margin:4px 0 2px; } #top .support-card__list .desc { font-size: 12px; line-height: 1.6; margin-bottom: 0px; } /* --- キーワードで探す --- */ #top .support-card__tags{ display:flex; flex-wrap:wrap; gap:12px 10px; justify-content:center; margin:0 0 32px; padding:0; } #top .support-card__tags li{ display:inline-block; padding:10px 16px; background:#DDD1A8; border-radius:9999px; font-size:14px; color:#333; } #top .support-card__tags li:hover {background:#f4eed8;} #top .support-card__tags li a{ text-decoration: none!important; } /* ボタンのラッパー */ #top .support-card__btn{ width:437px; height:64px; margin:0 auto; /* セクション中央寄せ */ position:relative; border-radius:9999px; background:linear-gradient(90deg, #3B8026 0%, #54AE3A 100%); padding:0 72px 0 24px; /* 右端の矢印スペース */ display:flex; align-items:center; justify-content:center; gap:12px; } /* ====== support-card__btn : compact (for keyword button) ====== */ #top .support-card__btn.support-card__btn--sm{ width:168px; height:48px; padding-left:42px; /* テキスト側の余白 */ padding-right:42px; /* 右の◯分を確保 */ border-radius:24px; /* 48px高に合わせた角丸 */ font-size:16px; /* 小ボタンなので少し小さめ */ line-height:48px; /* 縦中央 */ } @media (max-width: 767px){ #top .support-card__btn.support-card__btn--sm { width: 80%; /* SP時のボタンサイズ */ } } /* 小ボタンでは虫眼鏡は不要 */ #top .support-card__btn.support-card__btn--sm .btn__lupe{ display:none; } /* 右端の ◯ ＋ 矢印（大ボタンと同仕様だが小さめに調整） */ #top .support-card__btn.support-card__btn--sm .btn__arrow{ width:32px; height:32px; right:8px; /* 端の余白 */ border-radius:50%; } /* 矢印アイコン自体のスケール（大きさを32pxにフィット） */ #top .support-card__btn.support-card__btn--sm .btn__arrow::after{ transform: translate(-50%,-50%) scale(0.8); } /* テキスト部分のリンク */ #top .support-card__btn .btn__text a{ display:inline-block; color:#fff; text-decoration:none; font-family:"Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; font-weight:700; font-size:14px; line-height:1; transition:opacity .2s; } #top .support-card__btn:not(.support-card__btn--sm) .btn__text a{ display:inline-block; color:#fff; text-decoration:none; font-family:"Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans"; font-weight:700; font-size:20px; /* ← これが大ボタンだけに適用される */ line-height:1; transition:opacity .2s; } #top .support-card__btn .btn__text a:hover{ opacity:.9; } /* 左の虫眼鏡アイコン */ #top .support-card__btn .btn__lupe{ width:24px; height:24px; background:url("../img/common/icon_lupe.svg") no-repeat center/contain; flex:0 0 24px; } /* 右端の◯矢印 */ #top .support-card__btn .btn__arrow{ position:absolute; right:16px; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%; background:#fff; display:grid; place-items:center; } #top .support-card__btn .btn__arrow::before{ content:""; width:0; height:0; border-left:7px solid #3AA14E; /* 三角 (W7px × H5px) */ border-top:5px solid transparent; border-bottom:5px solid transparent; transform:translateX(1px); } #top .support-card__btn:hover{ opacity:.9; } #top .btn-keyword{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:240px; height:48px; border-radius:9999px; background:linear-gradient(90deg,#3B8026,#54AE3A); color:#fff; font-weight:700; text-decoration:none; transition:opacity .3s ease; } #top .btn-keyword:hover{ opacity:.85; } #top .btn-keyword::after{ content:""; width:10px; height:10px; border-right:2px solid #fff; border-top:2px solid #fff; transform:rotate(45deg); display:inline-block; } /* --- Responsive --- */ @media (max-width:1024px){ #top .support-cards{ grid-template-columns:1fr; width:90%; } #top .support-card{ padding:32px; } } @media (max-width:640px){ #top .support-card__list{ flex-direction:column; gap:24px; } #top .support-card__tags{ justify-content:flex-start; } } /* ===== Support（業態から探す）: アイコンを120px円の中央に ===== */ #top .support-card__icon{ width: 120px; height: 120px; border-radius: 50%; background: #F4F4F2; /* 指定色 */ display: grid; place-items: center; /* ど真ん中に配置 */ margin: 0 auto 0; /* 下の見出しと少し空ける */ } #top .support-card__icon img{ max-width: 84px; /* アイコンの見た目に合わせて安全幅 */ max-height: 84px; width: auto; height: auto; display: block; } /* ===== Support カード寸法：幅590px＆影なし ===== */ #top .support-cards { display: flex; justify-content: center; align-items: stretch; /* ← 高さを揃える */ gap: 20px; width: 1200px; margin: 0 auto; padding: 0; box-sizing: border-box; } #top .support-card { width: 590px; background: #fff; border-radius: 16px; box-shadow: none !important; margin: 0; padding: 40px 30px; box-sizing: border-box; flex: 1; /* ← 両方のカードを均等に伸ばす */ display: flex; /* 内部を縦方向レイアウトにして下部ボタンも追従 */ flex-direction: column; } /* ========== Lineup Grid (Top) ========== */ /* インナー幅：1200px、左275px／右890px */ .lineup-grid { padding: 80px 0; } .lineup-grid__inner{ max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 275px 890px; column-gap: 35px; align-items: start; } /* 見出し：Supportと同仕様を共有 */ .support-block__title .en, .lineup-grid__title .en{ display: block; font-family: "Poppins","Noto Sans JP",system-ui,-apple-system,BlinkMacSystemFont,sans-serif; font-weight: 300; font-size: 88px; color: #BCA78D; line-height: 1; margin-bottom: 20px; } } .support-block__title .ja, .lineup-grid__title .ja{ display: block; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 20px; line-height: 1.6; color: #333; margin-top: 8px; } /* 右側：カード 4列×2行 */ .lineup-grid__list{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 30px; } .lineup-card{ width: 206px; aspect-ratio: 1 / 1; border-radius: 16px; background:#eee; position: relative; /* ← 親を配置基準にする */ overflow: hidden; /* ← 角丸からはみ出るのを防止 */ } .lineup-card a{ display:block; width:100%; height:100%; } .lineup-card img{ width:100%; height:auto; display:block; transform: scale(1.001); transition: transform .35s ease; } /* 右下：緑の丸い矢印 */ .lineup-card__go{ position:absolute; right:5px; bottom:14px; width:24px; height:24px; border-radius:50%; background:#3aa14e; display:grid; place-items:center; } .lineup-card__go::before{ content:""; width:0; height:0; border-left:7px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent; transform: translateX(1px); } /* hover */ .lineup-card a:hover img{ transform: scale(1.05); } .lineup-card a:hover .lineup-card__go{ filter: brightness(1.05); } /* support-card__btn をどこでも使えるように拡張 */ .support-card__btn{-webkit-font-smoothing:antialiased} .support-card__btn.-center{ text-align:center; } .support-card__btn.-lg .btn-keyword{ display:inline-flex; align-items:center; justify-content:center; min-width: 520px; height: 56px; padding: 0 28px; border-radius: 999px; font-size: 18px; font-weight: 700; } /* 既存の .btn-keyword の配色・ホバーは流用（既存定義が無い場合は下を採用） */ .btn-keyword{ background:#3aa14e; color:#fff; text-decoration:none; transition: filter .25s ease; display:inline-flex; align-items:center; gap:10px; padding:12px 22px; border-radius:999px; } .btn-keyword:hover{ filter: brightness(1.05); } /* セクション下のボタン周りの余白 */ .lineup-grid__btn{ margin-top: 28px; } /* --- Responsive --- */ @media (max-width: 1200px){ .lineup-grid__inner{ grid-template-columns: 1fr; row-gap: 24px; padding: 0 20px; } .lineup-grid__list{ grid-template-columns: repeat(2, 1fr); } .support-card__btn.-lg .btn-keyword{ min-width: 0; width: 100%; } } @media (max-width: 560px){ .lineup-grid{ padding: 56px 0; } .lineup-grid__list{ grid-template-columns: 1fr 1fr; gap: 14px; } .lineup-card__label .jp{ font-size:14px; } .lineup-card__go{ width:32px; height:32px; } } /* ===================== Pickup ===================== */ /* ==== Pickup：Supportと同仕様（背景を下げる方式） ==== */ #top .pickup-block { position: relative; padding: 0px 0 120px; text-align: center; overflow: visible; background: linear-gradient(to bottom, rgba(0,0,0,0) 0 40px, #fff 26px 100%); } /* 見出しブロックは Support と同じ .support-block__title を使用 */ #top #pickup-title{ width: 1200px; /* インナー幅 */ margin: 0 auto 56px; /* 下マージンも Support に合わせる */ position: relative; z-index: 1; /* 帯より前面 */ } /* インナー */ #top .pickup-inner{ width:1200px; margin:40px auto 0; } /* グリッド（4列×2行想定　※まずは4枚） */ #top .pickup-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:28px; } /* カード */ #top .pickup-card{ background:#F7F6F2; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; } #top .pickup-card > a img{ display:block; width:100%; height:auto; } #top .pickup-card__body{ padding:16px 20px 18px; text-align: left; } #top .pickup-card__title{ font-weight:700; font-size:18px; line-height:1.5; margin:0 0 4px; color:#2B2B2B; } #top .pickup-card__title a{ text-decoration: none!important; } #top .pickup-card__sub{ font-size:12px; color:#666; margin:0 0 10px; } #top .pickup-card__tags{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px; padding:0; list-style:none; } #top .pickup-card__tags li{ font-size:12px; padding:5px 10px; background:#F0EFE9; border-radius:999px; color:#333; } #top .pickup-card__meta{ font-size:12px; color:#333; margin:0 0 6px; } #top .pickup-card__hash{ font-size:12px; color:#777; margin:0; } /* ボタン：Supportの小ボタン仕様（210x48）を踏襲し、中央寄せ */ #top .pickup__all{ margin:40px auto 0; /* support-card__btn--sm のサイズに任せる（W210×H48） */ } /* ========== Recipe block ========== */ #top .recipe-block_top{ background: url("../img/common/bg_recipe.png") center top no-repeat; padding: 100px 0 120px; /* 見出し上100px */ } #top .recipe-inner{ width: 1200px; margin: 0 auto; } /* 見出しは Lineup と同仕様（左寄せ） */ #top .lineup-block__title, #top .recipe-block__title{ margin-bottom: 28px; text-align: left; } @media (max-width: 960px){ #top .lineup-block__title, #top .recipe-block__title{ text-align: center; } } #top .lineup-block__title .en, #top .recipe-block__title .en{ font-family: "Poppins", sans-serif; font-weight: 300; font-size: 88px; line-height: 1; color: #B9A88F; display: block; } #top .lineup-block__title .ja, #top .recipe-block__title .ja{ display: inline-block; margin-top: 12px; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 18px; color: #3d3d3d; } /* グリッド：4列 × 2行（gap はデザインに合わせて） */ #top .recipe-list{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } #top .recipe-card a{ display: block; text-decoration: none; color: inherit; background: #fff; border-radius: 8px; overflow: hidden; transition: transform .2s ease; } #top .recipe-card a:hover{ transform: translateY(-2px); } #top .recipe-card img{ width: 100%; display: block; aspect-ratio: 4 / 3; /* 画像比率を整える（実画像で不要なら削除） */ object-fit: cover; } #top .recipe-card__ttl{ padding: 12px 14px 14px; font-size: 14px; line-height: 1.6; } #top .recipe-actions { width: 1200px; margin: 40px auto 0; display: flex; justify-content: flex-end; /* ← 右寄せに変更 */ } /* Recipe：ボタンの中央寄せを解除して右寄せを確実にする */ #top .recipe-actions .support-card__btn { margin: 0; /* ← グローバルの margin: 0 auto; を打ち消す */ } /* ルーペ・矢印の位置微調整（必要なら） */ #top .recipe-btn .btn__lupe{ margin-left: 16px; } /* 中見出し */ #top .recipe-subtitle{ margin: 40px 0 16px; /* 上段との間隔／見出し下の間隔 */ font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 18px; color: #333; } /* 上段：1行4列 */ #top .recipe-list--top{ grid-template-columns: repeat(4, 1fr); } /* 下段：2列×2行（4件） */ #top .recipe-list--new{ grid-template-columns: repeat(2, 1fr); } /* （任意）カードのテキスト余白を少し広めにしたい場合 */ #top .recipe-card__ttl{ padding: 12px 16px 16px; } /* --------------------------------------- Recipe card – structure --------------------------------------- */ #top .recipe-card{ background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.05); } #top .recipe-card__link{ display: flex; flex-direction: column; text-decoration: none; color: inherit; } #top .recipe-card__thumb{ position: relative; aspect-ratio: 16/9; overflow: hidden; background: #f6f6f6; } #top .recipe-card__thumb{ position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #f6f6f6; line-height: 0; /* ←これでimg下の余白を完全に除去 */ } #top .recipe-card__thumb img{ display: block; width: 100%; height: 100%; object-fit: cover; vertical-align: middle; /* Safari対策 */ } #top .recipe-card__body{ padding: 14px 16px 16px; } /* --------------------------------------- Title / tags – Pickupと同等トーン --------------------------------------- */ #top .recipe-card__title{ font: 700 16px/1.6 "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; letter-spacing: .02em; margin: 4px 0 10px; } #top .recipe-card__tags{ margin-top: 10px; font-size: 12px; color: #666; } /* --------------------------------------- Chip (Pickup風ピル) --------------------------------------- */ #top .chip-row{ display:flex; gap:8px; flex-wrap:wrap; margin: 0 0 6px; } #top .chip{ display:inline-block; padding: 3px 10px; border-radius: 9999px; font-size: 12px; background:#F4F4F2; color:#333; } #top .chip--outline{ background:#fff; border:1px solid #E5E2D8; } /* --------------------------------------- Badge (DL限定など) --------------------------------------- */ #top .badge{ position:absolute; left:10px; top:10px; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; color:#fff; background:#B3B3B3; } #top .badge--dl{ background:#F39800; } /* オレンジ系 */ /* Recipe セクションで pickup-grid をそのまま使う */ #top .recipe-block .pickup-grid{ margin-top: 24px; } /* 下段（新着レシピ）を2列にする */ #top .recipe-block .pickup-grid--2col{ grid-template-columns: repeat(2, minmax(0, 1fr)); } /* ========================================= Recipe（新着レシピ）横型カード ※ .pickup-card--h を付けたカードだけに適用 ========================================= */ #top .pickup-card--h{ display: grid; grid-template-columns: 320px 1fr; /* 左画像 右テキスト */ align-items: stretch; } /* 横型カードの画像は角丸を外す */ #top .pickup-card--h > a{ display:block; height: 260px; border-radius: 0; /* ← ここを 12px → 0 に変更 */ overflow: hidden; } /* 画像自体は変わらず */ #top .pickup-card--h > a img{ width: 100%; height: 100%; object-fit: cover; display:block; } /* テキスト側（右） */ #top .pickup-card--h .pickup-card__body{ padding: 16px; /* 右エッジに合わせて少し詰める */ } /* タイトルやタグ類の余白微調整（上段と統一感を持たせる） */ #top .pickup-card--h .pickup-card__title{ margin: 0 0 10px; } #top .pickup-card--h .pickup-card__sub{ margin: 0 0 12px; } #top .pickup-card--h .pickup-card__tags{ margin: 0 0 12px; } #top .pickup-card--h .pickup-card__meta{ margin: 0 0 6px; } /* グリッド（新着レシピ）の2列×2行は既存の .pickup-grid でOK。 念のためタイルの間隔を少し広めに */ #top .recipe-block .pickup-grid--latest{ /* もし別名のラッパーがある場合用（任意） */ gap: 24px; } /* レスポンシブ（SP/タブレット時は縦積み） */ @media (max-width: 960px){ #top .pickup-card--h{ grid-template-columns: 1fr; } #top .pickup-card--h > a{ height: 200px; } } /* ========================================= Recipe セクション内カード背景を白に統一 ========================================= */ /* 通常の縦型カード（上段4列） */ #top .recipe-block .pickup-card { background-color: #FFFFFF; /* ← 背景白 */ border-radius: 12px; overflow: hidden; } /* 横型カード（下段2×2） */ #top .recipe-block .pickup-card--h { background-color: #FFFFFF; /* ← 背景白 */ border-radius: 12px; } #top #column { background: url("../img/common/bg_column.png") no-repeat center top; padding: 0px 0 120px; } /* 画像まわりのラッパを基準に（a には触れない） */ #top .pickup-card .pickup-card__media{ position: relative; display: block; /* 画像ブロックと同一の扱いに */ margin: 0; /* 既存余白があれば調整 */ } /* DL限定バッジ */ /* DL限定バッジ（まずは非表示） */ #top .pickup-card .DLicon{ position: absolute; top: 0; left: -5px; z-index: 2; /* ← ここだけ変更：空なら出さない */ display: none; align-items: center; justify-content: center; padding: 4px 18px; min-height: 18px; border-bottom-right-radius: 10px; font-weight: normal; font-size: 14px; letter-spacing: .02em; color: #fff; background: #E48B2E; pointer-events: none; } /* 中身があるときだけ表示（空テキストは :empty で除外される） */ #top .pickup-card .DLicon:not(:empty){ display: inline-flex; } @media (max-width: 767px){ #top .pickup-card .DLicon{ top: 8px; left: 8px; padding: 7px 12px; font-size: 13px; border-radius: 9px; } } /* figure 既定マージンをリセット＋画像のはみ出し防止 */ #top .pickup-card .pickup-card__media{ position: relative; display: block; margin: 0; /* ← これがポイント */ } /* 画像をブロック化して余白ゼロに */ #top .pickup-card .pickup-card__media a, #top .pickup-card .pickup-card__media img{ display: block; width: 100%; height: auto; } /* ============================= Information Section ============================= */ #top #information { background: #F0EFE9; padding: 100px 0 180px; } #top #information .information-inner { max-width: 994px; margin: 0 auto; } #top #information .recipe-block__title { margin-bottom: 0px; } #top #information .info-list { list-style: none; margin: 0 0 60px; padding: 0; } #top #information .info-item { border-top: 1px solid #E0E0E0; /* 上にもラインを追加 */ border-bottom: 1px solid #E0E0E0; /* 下のラインも変更 */ padding: 20px 0; } #top #information .info-item a { text-decoration: none; color: #333; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; transition: opacity 0.3s ease; } #top #information .info-item a:hover { opacity: 0.6; } #top #information .info-date { font-size: 14px; color: #8B857D; min-width: 110px; flex-shrink: 0; } #top #information .info-title { font-size: 16px; line-height: 1.6; flex: 1; } #top #information .recipe-actions { text-align: right; width: 994px; } #top #information .info-list { list-style: none; margin: 0 0 60px 300px; /* 左に300pxの余白を追加 */ padding: 0; } #top #information .info-item { border-bottom: 1px solid #E5E3DC; padding: 20px 0; } #top #information .info-title { font-size: 14px; line-height: 1.6; margin: 0; } #top #information .info-title a { text-decoration: none; color: #333; transition: opacity 0.3s ease; } #top #information .info-title a:hover { opacity: 0.6; } #top #information .info-date { font-size: 12px; font-family: "Poppins", sans-serif; color: #B6A590; margin-top: 6px; } /* ボタンのテキストを改行させない・可変に */ #top .support-card__btn a { white-space: nowrap; display: inline-block; width: auto; /* padding: 0 48px 0 32px; 左右にゆとりを追加して被り防止 */ box-sizing: border-box; } /* ボタンのラッパー */ #top #information .support-card__btn{ width:187px!important; } /* ========================== Contact Section ========================== */ #top #contact { padding: 80px; margin-top: -190px; } #top .contact-inner { max-width: 1200px; margin: 0 auto; } #top .contact-box { display: flex; align-items: stretch; overflow: hidden; border-radius: 10px; } #top .contact-img { width: 50%; } #top .contact-img img { width: 100%; height: 100%; object-fit: cover; display: block; } #top .contact-content { width: 50%; background: linear-gradient(90deg, #2C7A24 0%, #62B043 100%); color: #fff; text-align: center; padding: 60px 40px; display: flex; flex-direction: column; justify-content: center; } #top .contact-title { font-size: 22px; font-weight: 700; margin-bottom: 20px; } #top .contact-text { font-size: 14px; line-height: 2; margin-bottom: 40px; } /* ボタンを中央寄せ */ #top .contact-btn { display: flex; justify-content: center; } /* supportカードボタン共通仕様を流用 */ #top .contact-btn .support-card__btn { background: #fff; color: #2C7A24; border-radius: 40px; padding: 0 40px; } #top .contact-btn .support-card__btn a { color: #2C7A24; white-space: nowrap; } /* ========================== SNS Section ========================== */ #top #sns-block { background: #fff; padding: 40px 0 20px; } #top .sns-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 40px; } #top .sns-text { font-size: 15px; color: #333; position: relative; white-space: nowrap; } #top .sns-text span { position: relative; display: inline-block; padding-bottom: 4px; } #top .sns-text--left span::after, #top .sns-text--right span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #333; } #top .sns-icons { display: flex; align-items: center; justify-content: center; gap: 24px; list-style: none; padding: 0; margin: 0; } #top .sns-icons li a img { width: 56px; height: 56px; display: block; transition: opacity 0.3s ease; } #top .sns-icons li a:hover img { opacity: 0.8; } /* ========================== Banner Section ========================== */ #top #banner-block { background: linear-gradient(90deg, #2C7A24 0%, #62B043 100%); padding: 40px 0; border-radius: 0!important; } #top .banner-inner { position: relative; max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; } #top .banner-slider { overflow: hidden; width: 1200px; position: relative; } #top .banner-list { display: flex; gap: 30px; /* ← マージン30pxに変更 */ transition: transform 0.6s ease; } #top .banner-item { flex: 0 0 276px; height: 100px; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; } #top .banner-item img { width: 100%; height: 100%; object-fit: cover; } #top .banner-nav { width: 48px; height: 48px; border-radius: 50%; border: none; background-color: #fff; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; cursor: pointer; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center; } #top .banner-nav::after { content: ""; display: block; width: 17px; height: 11px; background: url('../img/common/icon_arrow_green.svg') no-repeat center center; background-size: contain; } #top .banner-prev { left: -70px; } #top .banner-next { right: -70px; } #top .banner-nav:hover { opacity: 0.8; } #top .banner-prev { left: -70px; transform: translateY(-50%) rotate(180deg); } #top .banner-next { right: -70px; } #top .banner-nav:hover { opacity: 0.8; } /* ========================== Footer Section ========================== */ #footer { display: flex; justify-content: center; background-color: #4A3C33; color: #fff; } .footer-inner { display: flex; width: 100%; max-width: 1600px; min-height: 520px; } /* 左カラム */ .footer-left { position: relative; width: 50%; overflow: hidden; } .footer-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .footer-left__content { position: relative; z-index: 1; padding: 80px 60px; color: #fff; text-align: center; } .footer-logo { width: 280px; margin-bottom: 32px; } .footer-title { font-size: 24px; font-weight: 700; margin-bottom: 24px; } .footer-desc { font-size: 16px; line-height: 1.8; margin-bottom: 40px; } /* ボタン */ .footer-btn { position: relative; /* ← アイコンの絶対位置基準 */ display: flex; align-items: center; justify-content: center; /* ← テキスト中央寄せ */ height: 64px; margin: 0 auto; background: linear-gradient(90deg, #3D8B2E, #58BA47); border-radius: 40px; border: none; color: #FFFFFF; font-family: "Noto Sans JP", sans-serif; font-size: 18px; font-weight: 700; text-decoration: none; transition: opacity 0.3s ease; padding: 0 55px; } @media screen and (max-width: 350px) { .footer-btn { width: 60%;} } .footer-btn span { color: #FFFFFF; text-decoration: none !important; } .footer-btn__icon { position: absolute; right: 24px; /* ← 右端に固定配置 */ top: 50%; transform: translateY(-50%); width: 20px; height: 20px; display: inline-block; } .footer-btn:hover { opacity: 0.85; } footer a:link { text-decoration: none !important; /* ← 下線確実に消す */} .footer-btn__icon { width: 20px; height: 20px; flex-shrink: 0; } .footer-btn:hover { opacity: 0.85; } @media screen and (max-width: 767px) { /* ボタン */ .footer-btn { width: 358px; font-size: 14px; padding: 0 30px; } .footer-btn__icon { width: 15px; height: 15px; right: 20px; } } /* 右カラム */ .footer-right { width: 50%; padding: 60px 80px; box-sizing: border-box; background-color: #584D44; display: flex; flex-direction: column; justify-content: space-between; } /* ===== Masonry Layout ===== */ .footer-menu { column-count: 2; /* ← 2カラム構成を維持 */ column-gap: 60px; /* ← 列間を詰める（100 → 60px） */ list-style: none; padding: 0; margin: 0 auto; max-width: 620px; /* ← 各カラムのメニュー幅を広げるための全体幅指定 */ } .footer-menu > li { break-inside: avoid; /* ← 要素を途中で分断しない */ -webkit-column-break-inside: avoid; margin-bottom: 40px; /* ← 下の間隔（要素間スペース） */ display: flex; flex-direction: column; gap: 10px; } .footer-menu__title { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 18px; color: #FFFFFF; margin-bottom: -4px; } .footer-menu__title a { color: #FFF!important; } .footer-menu ul { margin-top: 0; list-style: none; padding: 0; } .footer-menu ul li a { font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 14px; color: #A1A1A1; text-decoration: none; display: inline-block; line-height: 1.4; margin-bottom: 2px; } .footer-menu ul li a:hover { color: #fff; } /* ===== 下部リンク・コピーライト ===== */ .footer-bottom { padding-top: 20px; } .footer-links { display: flex; flex-wrap: wrap; gap: 24px; list-style: none; margin-bottom: 12px; } .footer-links li a { font-family: "Noto Sans JP", sans-serif; font-size: 14px; color: #A1A1A1; text-decoration: none; } .footer-links li a { display: inline-flex; align-items: center; gap: 4px; /* ← margin-leftの代わりにgapで間隔管理 */ white-space: nowrap; /* ← 改行禁止 */ text-decoration: none; color: #A1A1A1; } .footer-links li a:hover { color: #fff; } .footer-link__icon { width: 12px; height: 12px; vertical-align: middle; flex-shrink: 0; /* ← inline-flexで潰れ防止 */ } .footer-copy { font-family: "Poppins", sans-serif; font-weight: 300; font-size: 16px; color: #CEC7BF; } /* footer内アイコン画像のdisplay:blockを上書きして改行防止 */ .footer-link__icon, .footer-btn__icon { display: inline-block !important; /* ← グローバル指定をキャンセル */ margin: 0 !important; vertical-align: middle; } /* ========================== 固定サンプルボタン ========================== */ .floating-sample-btn { position: fixed; bottom: 20px; right: 20px; width: 140px; height: 140px; z-index: 999; opacity: 0; transform: translateY(40px); animation: fadeInUp 0.8s ease-out forwards; } .floating-sample-btn img { width: 100%; height: auto; display: block; } /* フワッと出るアニメーション */ @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } } /* ========================== Responsive Design（SP用） ========================== */ @media screen and (max-width: 767px) { /* 共通設定 */ body, html { overflow-x: hidden; } /* -------------------------- Header -------------------------- */ .site-header__inner { flex-wrap: wrap; justify-content: space-between; padding: 10px 16px; } .gnav { display: none; } .header-util { display: none; } .hamburger { display: block; } /* -------------------------- KV（メインビジュアル） -------------------------- */ .kv__slide img { width: 100%; height: auto; } /* -------------------------- Support セクション -------------------------- */ .support-cards { flex-direction: column; gap: 24px; } .support-card { width: 100%; } /* -------------------------- Lineup セクション -------------------------- */ .lineup-grid__inner { flex-direction: column; } .lineup-grid__list { grid-template-columns: repeat(2, 1fr); gap: 12px; } .lineup-grid__title { margin-bottom: 0px; text-align: center; } .support-card__btn { justify-content: center; } /* -------------------------- Pickup セクション -------------------------- */ .pickup-grid { grid-template-columns: 1fr; gap: 20px; } .pickup-card img { width: 100%; height: auto; } .pickup__all { text-align: center; margin-top: 24px; } /* Pickup：SPのときだけボタンを中央寄せ */ #top .pickup__all{ grid-column: 1 / -1; /* 既存指定はそのまま活かす */ margin-top: 20px; /* 既存どおり */ display: flex; /* 自分をフレックス化 */ justify-content: center; /* 中身（ボタン）を中央に */ } /* -------------------------- Recipe セクション -------------------------- */ .recipe-block__title { text-align: center; } .pickup-grid--2col { grid-template-columns: 1fr; } .recipe-actions { text-align: center; margin-top: 24px; } /* -------------------------- Column セクション -------------------------- */ #column .pickup-grid { grid-template-columns: 1fr; } /* -------------------------- Information セクション -------------------------- */ .information-inner { width: 100%; padding: 0 20px; box-sizing: border-box; /* ← これで100%にパディングを内包してはみ出し防止 */ } .info-list { margin-left: 0; } .info-item { border-top: 1px solid #E0E0E0; padding: 12px 0; } .info-item:first-child { border-top: 1px solid #E0E0E0; } .info-title { font-size: 13px; line-height: 1.5; } /* -------------------------- Contact セクション -------------------------- */ .contact-box { flex-direction: column; align-items: center; gap: 20px; } .contact-img img { width: 100%; height: auto; } .contact-content { text-align: center; } /* -------------------------- SNS セクション -------------------------- */ .sns-inner { flex-direction: column; text-align: center; gap: 8px; } .sns-icons { justify-content: center; gap: 20px; } .sns-icons img { width: 40px; height: 40px; } /* -------------------------- Banner セクション -------------------------- */ .banner-inner { flex-direction: column; gap: 12px; } .banner-slider { width: 100%; } .banner-item { width: 100%; height: auto; } .banner-nav { display: none; } /* -------------------------- Footer -------------------------- */ .footer-inner { flex-direction: column; min-height: auto; } .footer-left, .footer-right { width: 100%; } .footer-left__content { padding: 40px 20px; } .footer-logo { width: 200px; } .footer-menu { column-count: 2; column-gap: 20px; /* 列間（お好みで調整） */ } .footer-btn { max-width: 280px; margin: 0 auto; } .footer-copy { text-align: left; display: block; margin-top: 10px; font-size: 10px; } /* -------------------------- 固定サンプルボタン -------------------------- */ .floating-sample-btn { width: 110px; height: 100px; bottom: 20px; right: 10px; } /* セクション内インナーは左右15pxを確保（__inner命名を横断） */ #top [class$="__inner"] { margin-left: auto; margin-right: auto; max-width: 100%; box-sizing: border-box; } /* 画像・メディアのはみ出し防止 */ #top img, #top svg, #top video, #top canvas { max-width: 100%; height: auto; } img.footer-bg { max-width: auto!important; height: 100%!important; } /* フレックス子要素のオーバーフロー対策 */ #top * { min-width: 0; } } /* ============================================================ SP Key Visual — Consolidated & Safe (<=767px) - 外側15pxの余白は viewport の padding で作る - スライドは幅100%・margin:0・gap:0（ズレ防止） - Swiper使用時も同じ見え方を担保（*.swiper* も対応） ============================================================ */ @media screen and (max-width: 767px) { /* ====== コンテナ（section.kv / .kv / .swiper） ====== */ section.kv, #top .kv, #top .swiper { position: relative; width: 100%; margin: 0 auto 0; /* 上の余白をゼロに */ max-width: 100vw; overflow: hidden; box-sizing: border-box; border-radius: 8px; padding-left: 15px; padding-right: 15px; } /* ====== ビューポート（余白はここで作る） ====== */ #top .kv__viewport, #top .swiper { /* Swiper本体がviewportの役割を担う場合に合わせる */ overflow: hidden !important; width: 100% !important; padding: 0px !important; /* ← 左右15px */ box-sizing: border-box !important; } /* ====== トラック（横並び/移動対象） ====== */ #top .kv__track, #top .swiper-wrapper { display: flex !important; align-items: stretch !important; gap: 0 !important; /* ← gapは0に固定（ズレ防止） */ padding: 0 !important; margin: 0 auto !important; transform: translate3d(0,0,0); /* 初期化 */ transition: transform .45s cubic-bezier(.4,0,.2,1); will-change: transform; } /* ====== スライド（100%幅 / 余白は持たせない） ====== */ #top .kv__slide, #top .swiper-slide { flex: 0 0 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border-radius: 8px !important; box-sizing: border-box !important; overflow: hidden !important; } /* ====== メディア（画像/動画） ====== */ #top .kv__slide img, #top .kv__slide picture, #top .kv__slide video, #top .swiper-slide img, #top .swiper-slide picture, #top .swiper-slide video { display: block !important; width: 100% !important; height: auto !important; /* 必要なら object-fit:cover; に */ border-radius: 8px !important; } /* ====== ドット（Swiper使用時のみ） ====== */ #top .swiper-pagination { position: relative; text-align: center; margin-top: 12px; } #top .swiper-pagination-bullet { width: 8px; height: 8px; background-color: #ccc; opacity: 1; margin: 0 4px; } #top .swiper-pagination-bullet-active { background-color: #3D8B2E; } /* 画像で高さを決める前提を明示 */ #top .kv__slide img { display: block; width: 100%; height: auto; } #top .kv__viewport { height: auto; /* JSで都度セットするが初期値はauto */ } /* SP: ロゴ位置・サイズ */ #top .logo{ position: absolute; top: 10px; left: 10px; margin: 0; /* 既存の margin を上書き */ } #top .logo img{ width: 166px; height: auto; display: block; } } /* SPのみ：catch-band の回り込み解除＋中央寄せ */ @media screen and (max-width: 767px){ /* 横並びを解除して縦積み・中央寄せ */ #top .catch-band__inner{ display: block; /* ← flexを外す（grid指定も無効化） */ text-align: center; /* 子テキスト中央 */ } /* 見出し画像を中央に */ #top .catch-band__lead{ width: auto; /* 固定273pxを解除 */ margin: 0 auto 16px; /* 中央寄せ & 下に余白 */ padding-top: 0; /* 既存の上余白が不要なら0に */ } #top .catch-band__lead img{ display: block; margin: 0 auto; /* 画像自体も中央 */ max-width: 100%; height: auto; } /* 段落テキストも中央寄せ */ #top .catch-band__desc{ text-align: center; margin: 0 auto; /* 横中央 */ } } @media screen and (max-width: 767px){ /* catch-band：PCの固定幅をSPでリキッド化 */ #top .catch-band__inner{ width: auto !important; /* 固定px幅を解除 */ max-width: 100% !important; /* はみ出し防止 */ margin: 0 auto !important; padding: 0 15px !important; /* セクション内の左右余白 */ box-sizing: border-box !important; display: block !important; /* 横並びを解除（前回の指示と整合） */ text-align: center !important; /* 画像・テキスト中央 */ } /* 見出し画像とテキストもリキッドに */ #top .catch-band__lead{ width: auto !important; /* 固定幅があれば解除 */ margin: 0 auto 16px !important; /* 画像の下に余白 */ padding: 0 !important; } #top .catch-band__lead img{ display: block !important; max-width: 196px !important; height: auto !important; margin: 0 auto !important; } #top .catch-band__desc{ margin: 0 auto !important; text-align: center !important; } /* 子要素のはみ出しを防ぐ保険 */ #top .catch-band__inner *{ min-width: 0; } /* desc の固定幅(614px等)をSPで解除し、中央寄せ＋左右15px */ #top .catch-band__desc{ width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 15px !important; box-sizing: border-box !important; text-align: center !important; padding-bottom: 40px; } /* 各セクション見出しの英字 .en を一括で48pxに */ #top section .en{ font-size: 48px!important; line-height: 1.1; margin-bottom: 10px; } #top .support-block { background: linear-gradient(to bottom, rgba(0,0,0,0) 0 25px, #F0EFE9 26px 100%); } #top .support-block__title { font-family: "Noto Sans JP", sans-serif; font-weight: 700; margin-bottom: 20px; } #top .support-cards { display: flex; justify-content: center; align-items: stretch; gap: 20px; width: 100%; margin: 0 auto; box-sizing: border-box; padding: 0 15px; } #top .support-card { width: 100%; background: #fff; border-radius: 16px; box-shadow: none !important; margin: 0; padding: 40px 30px; box-sizing: border-box; flex: 1; display: flex; flex-direction: column; } .lineup-card { width: 100%; aspect-ratio: 1 / 1; border-radius: 16px; background: #eee; position: relative; overflow: hidden; } #top .support-card__btn { width: 85%; height: 64px; margin: 0 auto; position: relative; border-radius: 9999px; background: linear-gradient(90deg, #3B8026 0%, #54AE3A 100%); padding: 0 72px 0 24px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 15px; } #top .support-card__btn:not(.support-card__btn--sm) .btn__text a { display: inline-block; color: #fff; text-decoration: none; font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans"; font-weight: 700; font-size: 16px; line-height: 1; transition: opacity .2s; } } /* SPだけ「業態から探す」を3列に＆サイズ調整 */ @media screen and (max-width: 767px){ /* 3列グリッド化 */ #top .support-card__list{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); /* ← 3列 */ gap: 12px 8px; /* 行/列の余白 */ padding: 0; margin: 0; list-style: none; margin-bottom: -10px; } #top .support-card__list > li{ display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; min-width: 0; /* はみ出し防止 */ } /* アイコン */ /* アイコン */ #top .support-card__icon{ /* display: block; ← これをフレックスに変更 */ display: flex; align-items: center; /* 縦中央 */ justify-content: center; /* 横中央 */ width: 64px; height: 64px; margin: 0 auto -4px; line-height: 0; /* 画像下の隙間対策 */ } #top .support-card__icon img{ display: block; width: 50%; height: auto; } /* タイトル／説明 */ #top .support-card__list .ttl{ font-size: 14px; /* 見出し */ line-height: 1.35; font-weight: 700; margin: 0 0 -8px; color: #333; } #top .support-card__list .desc{ font-size: 12px; /* サブ説明 */ line-height: 1.6; margin: 0; color: #666; white-space: nowrap; /* 1行で収めたい場合。折返したいなら削除 */ } #top .support-card__tags li { display: inline-block; padding: 10px 10px; background: #F5F3EC; border-radius: 9999px; font-size: 14px; color: #333; } #top .support-block { padding: 0px 0 60px; } .lineup-grid { padding: 40px 0; } } /* SP：Pickup 見出しとインナーをリキッド化してはみ出しを防止 */ @media screen and (max-width: 767px){ #top #pickup-title, #top .pickup-inner{ width: auto !important; max-width: 100% !important; margin: 0 auto 40px !important; padding: 0 15px !important; /* 画面左右の余白 */ box-sizing: border-box !important; } /* 見出し英字サイズが大きすぎる場合の安全策（必要なければ削除可） */ #top #pickup-title .en{ font-size: 48px !important; line-height: 1 !important; } } @media screen and (max-width: 767px){ /* pickup を2列グリッド化 */ #top .pickup-grid{ display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); /* ← 2列 */ gap: 16px 12px; /* 行/列の余白 */ } /* カードの幅固定などがあれば無効化してリキッドに */ #top .pickup-card{ width: auto !important; margin: 0 !important; } /* 画像のはみ出し防止 */ #top .pickup-card img{ display: block; width: 100%; height: auto; } /* 「すべての製品一覧へ」は2列下で全幅に */ #top .pickup__all{ grid-column: 1 / -1; margin-top: 20px; } #top .pickup-block { padding: 0px 0 20px; background: linear-gradient(to bottom, rgba(0,0,0,0) 0 25px, #fff 26px 100%); } } /* SP: Recipe 見出しの中央寄せ */ @media (max-width: 767px) { #top .recipe-block { background: linear-gradient(to bottom, 0 25px, #F0EFE9 25px 100%); padding: 0px 0 20px; } #top .recipe-inner { width: 100%; margin: 0 auto; } #top .recipe-block .pickup-grid { margin-top: 24px; padding: 0 0px; } #top .recipe-block.recipe-block_top .pickup-grid { margin-top: 24px; padding: 0 15px; } recipe-block_top #top .recipe-block__title { text-align: center; } #top .recipe-subtitle { text-align: center; } #top .pickup-grid--2col { display: grid; /* 既存がgridでもOK。なければgrid化 */ grid-template-columns: 1fr; /* 1列 */ gap: 16px; /* 必要に応じて調整 */ } /* 横並びカードを縦積みに */ /* SPでも横並び（画像 左／テキスト 右） */ #top .pickup-card--h{ display: grid; grid-template-columns: 180px 1fr; /* 画像幅はデザインに合わせて調整可 */ gap: 16px; align-items: center; } #top .pickup-card--h > a{ width: auto; height: 140px; /* 目安。添付②の比率に合わせて微調整可 */ border-radius: 12px 0 0 12px; /* 左だけ角丸、右側は0 */ overflow: hidden; } #top .pickup-card--h > a img{ width: 100%; height: 100%; object-fit: cover; display: block; } #top .pickup-card__title { font-size: 14px; } #top .pickup-card__tags li { font-size: 10px; } #top .pickup-card--h .pickup-card__body { padding: 0px 8px 0 0; } #top .pickup-card--h .pickup-card__tags { margin: 0 0 4px; } /* 「新着レシピ」の2colだけ1列に（親セレクタまで含めて上書き） */ #top .recipe-block .pickup-grid--2col { grid-template-columns: 1fr !important; } #top #column { padding: 0px 0 20px; background: linear-gradient(to bottom, #F0EFE9 0 25px, #fff 25px 100%); } #top .recipe-actions{ width: 80%; margin: 24px auto 0; padding: 0 16px; /* 端の余白で安全マージン */ justify-content: center; /* 中央寄せ */ margin-left:auto; margin-right:auto; } #top .recipe-actions .support-card__btn{ margin: 0 auto; /* ボタン自身も中央に */ max-width: 100%; /* 念のためのオーバーフロー防止 */ } #top .recipe-actions .support-card__btn.support-card__btn--sm { width: 84%; height: 64px; padding-left: 15px; padding-right: 15px; border-radius: 32px; font-size: 16px; line-height: 48px; margin-left: -28px; margin-right: 0; } #top .support-card__btn.support-card__btn--sm { height: 64px; padding-left: 15px; padding-right: 15px; border-radius: 9999px; font-size: 16px; line-height: 48px; margin: 0 auto; } #top .support-card__btn.support-card__btn--SPmune { width: 93%!important; } /* === SPメニュー内の「お問い合わせ」ボタンを横幅100%にしてはみ出し防止 === */ #top .sp-menu__utility .support-card__btn{ width: 100%; box-sizing: border-box; /* これで padding を含めて100%に収める */ margin-left: 0; margin-right: 0; } /* もし .sp-menu__utility 側に左右の余白を出したいなら（任意） */ #top .sp-menu__utility{ padding-left: 0x; padding-right: 0px; } /* SPメニュー：お問い合わせボタンのメールアイコン */ #top .sp-menu__utility .support-card__btn{ display: flex; align-items: center; justify-content: center; gap: 0px; /* テキストとの間隔 */ } #top .sp-menu__utility .support-card__btn .ico-mail{ display: inline-block; width: 22px; /* お好みで 20–24px 程度に調整可 */ height: 16px; flex: 0 0 22px; /* つぶれないよう固定幅 */ background: url("../img/common/icon_mail_spmenu.png") center / contain no-repeat; /* ボタン全体がリンクなのでポインターはテキストに合わせる */ pointer-events: none; } /* テキストリンクの装飾統一（下線を消す/中央寄せ） */ #top .sp-menu__utility .support-card__btn .btn__text a{ color: inherit; text-decoration: none; display: inline-block; text-align: center; } #top #information { background: linear-gradient(to bottom, #fff 0 25px, #F0EFE9 25px 100%); padding: 0px 0 60px; } #top #information .information-inner { max-width: 100%; margin: 0 auto; padding: 0 15px; } #top #information .info-list { list-style: none; margin: 20px 0 20px 0px; padding: 0; } #top #information .info-date { font-size: 12px; margin-top: 0px; margin-block-end:1px!important; } #top #information .recipe-actions { text-align: center; width: 100%; } #top #information .support-card__btn { width: 250px !important; } #top #contact { padding: 0; margin-top: 40px; } #top .contact-inner { max-width: 100%; padding: 0 15px; /* 左右 15px マージン */ } #top .contact-content { width: auto; /* 既存（support-card__btn）の緑グラデに合わせる */ background: linear-gradient(90deg, #3B8026 0%, #54AE3A 100%); color: #fff; text-align: center; padding: 40px 15px; display: flex; flex-direction: column; justify-content: center; margin-bottom: 40px; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; } #top .contact-img { width: 100%; } /* 追記：画像をカード内でトリミング＆角丸を継承 */ #top .contact-box { overflow: hidden; /* 角丸内に画像を収める（再確認用） */ border-radius: 16px; /* デザインに合わせ角丸を少し大きめにするなら調整 */ display: block; } #top .contact-img img { display: block; width: 100%; height: auto; /* SPでは高さ自動でOK（既存SP指定も有） */ object-fit: cover; } #top .sns-inner { width: 230px; } #top .sns-icons { margin: -30px 0 -20px; } .footer-menu__title { font-size: 16px; } .footer-right { padding: 40px 20px; } .footer-menu ul li a { font-size: 12px; } }/* /max-width: 767px */ /* ===================== Banner (SP) ===================== */ @media (max-width: 767px){ /* セクションの余白調整（任意） */ #banner-block .banner-inner{ position: relative; padding: 24px 0 56px; } /* 中央に1枚・左右見切れ：画像幅176pxを基準に左右に可変パディング */ #banner-block .banner-slider{ overflow: hidden; /* 176px を中央に据えるための左右可変余白 */ padding: 0 calc((100% - 176px) / 2); } /* スライド横並び */ #banner-block .banner-list{ display: flex; align-items: center; gap: 24px; /* 画像間の余白 */ will-change: transform; transition: transform .4s cubic-bezier(.4,0,.2,1); } /* 1枚の箱（176px固定） */ #banner-block .banner-item{ flex: 0 0 176px; width: 176px; } /* 画像は白カード＋角丸の中に収める */ #banner-block .banner-item img{ display: block; width: 176px; height: auto; background: #fff; border-radius: 12px; padding: 16px; } /* KVと同じドットの置き場（中央に） */ #banner-block .banner-controls{ margin-top: 16px; display: flex; justify-content: center; } /* 既存KVの .kv__dots スタイルを流用。必要なら軽微に調整 */ #banner-block .kv__dots{ display: flex; gap: 24px; } /* SPでは左右の矢印は非表示（任意） */ #banner-block .banner-nav{ display: none; } #banner-block .kv__dot.is-active::after{ background-image: url("../img/common/dot-bar_w.png"); } #banner-block .kv__dot{ background-color: #fff !important; /* 非アクティブも白 */ border-color: rgba(255,255,255,.6) !important; /* 枠がある設計なら */ opacity: .55; /* お好みで */ } #banner-block .kv__dot.is-active{ background-color: #fff !important; /* アクティブも白 */ opacity: 1; box-shadow: 0 0 0 2px rgba(255,255,255,.35) inset; /* 緑背景上で視認性UP（任意） */ } /* Banner block only: dot colors (KV仕様に揃える) */ #banner-block .kv__dot{ background-image: none; /* 色指定を有効に */ background-color: rgba(255,255,255,.55); /* 通常（非アクティブ） */ border-color: transparent; } #banner-block .kv__dot.is-active{ background-color: #fff; /* アクティブ（KVと同様の想定） */ box-shadow: 0 0 0 2px rgba(255,255,255,.35) inset; } #banner-block .kv__dot.is-next{ background-color: #54AE3A; /* ← 次のdotを“緑”に */ } } /* PCでは .sp-br を無効化（改行させない） */ br.sp-br { display: none; } /* SPのみ .sp-br を有効化（改行させる） */ @media (max-width: 767px){ br.sp-br { display: inline; } /* inlineでOK（
は改行を発生） */ } /* ===== Main KV only: dots connector bar grow effect ===== */ #top .kv:not(.kv--banner) .kv__dots{ position: relative; overflow: visible; /* 念のため */ } /* 伸びるバー（dot-bar.png を横リピート） */ #top .kv:not(.kv--banner) .kv__dots{ position: relative; } #top .kv:not(.kv--banner) .kv__dots{ position: relative; } /* dot-bar.png をタイルし、横幅だけを広げて見せる */ /* メインKVのドット帯 */ #top .kv:not(.kv--banner) .kv__dots{ position: relative; overflow: visible; } /* 左端から“面積”を広げて見せる：横幅を 0 → 100% にアニメ */ #top .kv:not(.kv--banner) .kv__dots::after{ content: ""; position: absolute; top: 50%; left: 0; height: 6px; /* バー太さは調整可 */ width: 0; /* ← 初期は0px */ transform: translateY(-50%); background: url("shared/img/common/dot-bar.png") left center / auto 100% repeat-x; pointer-events: none; transition: width 3.4s cubic-bezier(.22,.7,.15,1); /* ← 横幅をアニメ */ } /* 再生トリガで 100% までスーッと伸びる */ #top .kv:not(.kv--banner) .kv__dots.is-animating::after{ width: 100%; } /* ============ SPメニュー全体 ============ */ /* ヘッダー高さを変数化（必要に応じて調整） */ :root { --sp-header-h: 64px; } /* メニューの板（左端まで開く） */ .sp-menu__inner{ position: fixed; top: var(--sp-header-h); /* ヘッダーの下から */ left: 0; /* 画面左端に揃える */ width: inherit!important; /* パネル幅：全幅 or 上限 */ height: calc(100vh - var(--sp-header-h)); background: #F7F6F2!important; /* 指定の背景色 */ overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(100%); /* 右からスライドイン */ transition: transform .35s cubic-bezier(.4,0,.2,1); z-index: 1000; /* ヘッダーより下にならないよう要調整 */ box-shadow: -12px 0 24px rgba(0,0,0,.08); box-sizing: unset!important; margin: 0!important; } /* 開状態（既存の is-open を流用） */ .sp-menu.is-open .sp-menu__inner{ transform: translateX(0); } /* 背景の半透明レイヤー（ヘッダーを隠さない） */ .sp-menu__overlay{ position: fixed; top: 66px!important; /* ヘッダーの下から */ left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.28); opacity: 0; visibility: hidden; transition: opacity .2s ease; z-index: 900; } .sp-menu.is-open .sp-menu__overlay{ opacity: 1; visibility: visible; } /* ============ リストと区切り ============ */ .sp-menu__list{ list-style: none; margin: 0; padding: 16px 20px 8px; } .sp-menu__item{ border-bottom: 1px solid rgba(0,0,0,.06); } /* 見出し行（トグルボタン） */ .sp-menu__toggle{ position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; /*min-height: 56px;*/ /*padding: 14px 0;*/ background: none; border: 0; font-size: 18px; line-height: 1.4; color: #222; } /* + / − アイコン */ .sp-menu__plus{ position: relative; inline-size: 15px; block-size: 15px; margin-left: 12px; } .sp-menu__plus::before, .sp-menu__plus::after{ content: ""; position: absolute; inset: 0; margin: auto; background: #54AE3A; /* 色 */ border-radius: 1px; } /* 横棒 */ .sp-menu__plus::before{ width: 15px; height: 2px; } /* 縦棒（開いたら消す） */ .sp-menu__plus::after{ width: 2px; height: 15px; transition: opacity .2s ease, transform .2s ease; } .sp-menu__toggle[aria-expanded="true"] .sp-menu__plus::after{ opacity: 0; /* − 表示へ */ transform: scaleY(0); } /* サブリスト */ .sp-sublist{ list-style: none; margin: 0 0 8px; padding: 0 0 0 10px; } .sp-sublist > li {margin-bottom: 0!important; border-bottom: none!important;} .sp-sublist > li > a{ display: block; padding: 0; font-size: 16px; color: #333; text-decoration: none; } /* ============ ユーティリティ（検索＆お問い合わせ） ============ */ .sp-menu__utility{ padding: 0 0 28px; } /* 検索はPCの .site-search を流用しつつ全幅化 */ .sp-menu__utility .site-search{ width: 100%; margin: 10px 0 18px; } /* お問い合わせボタンは右寄せではなく全幅に */ .sp-menu__contact{ width: 100% !important; display: flex; justify-content: center; } .sp-menu__contact .btn__text a{ text-decoration: none; } /* ==== Header overlay & drawer: force under header ==== */ :root { --sp-header-h: 84px; } /* ヘッダーは常に最前面（影も含めて） */ #top .site-header { position: relative; z-index: 3000; /* 2000→余裕を持って上げる */ } /* メニュー本体はヘッダーの“下から”出す（古い top:0 を上書き） */ #top .sp-menu__inner { position: absolute; top: var(--sp-header-h) !important; /* ← ここが効けばOK */ left: 0; z-index: 1800; /* ヘッダーより下 */ } /* オーバーレイも同様にヘッダーの下から */ #top .sp-menu__overlay { position: fixed; top: var(--sp-header-h) !important; /* 66px → 変数で統一 */ left: 0; right: 0; bottom: 0; z-index: 1700; /* パネルより一段下 */ } /* スライドメニューの上端に擬似的なシャドーを描画 */ #top .sp-menu__inner{ position: absolute; /* 既存の指定のままでOK。相対基準を保証 */ background: #F7F6F2; /* ご指定の地色 */ overflow-y: auto; /* 内部スクロールの場合 */ } #top .sp-menu__inner::before{ content: ""; position: absolute; /* パネルの上端に固定 */ top: 0; left: 0; right: 0; height: 22px; /* 影の長さ（お好みで調整） */ pointer-events: none; /* クリックを邪魔しない */ z-index: 2; /* パネル内容より前面に */ /* ヘッダーの box-shadow(0 2px 8px rgba(0,0,0,.06)) に寄せた擬似影 */ background: linear-gradient( to bottom, rgba(0,0,0,.06) 0%, rgba(0,0,0,.01) 50%, rgba(0,0,0,.0) 70%, rgba(0,0,0,0) 100% ); /* 角が丸い場合のはみ出し対策（任意） */ border-top-left-radius: inherit; border-top-right-radius: inherit; } /* 影を少し弱くしたいとき（任意） */ @media (prefers-reduced-motion: reduce){ #top .sp-menu__inner::before{ background: linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,0)); } } /* ===== SPメニュー内のサイト内検索は常に表示 ===== */ @media (max-width: 767px){ #top .sp-menu .site-search{ display: flex !important; /* 非表示化の打ち消し */ align-items: center; gap: 8px; width: 100%; margin: 0 0 16px; padding: 0 10px; box-sizing: border-box; } #top .sp-menu .site-search__field{ flex: 1 1 auto; display: block; } #top .sp-menu .site-search__field input{ width: 100%; } #top .sp-menu .site-search__btn{ flex: 0 0 auto; } /* 他方式の隠し方も念のためリセット */ #top .sp-menu .site-search{ visibility: visible !important; opacity: 1 !important; height: 64px !important; clip: auto !important; background: #FFF; } #top .site-search__btn {right: 10px;} #top .ss_btn {right: 10px!important;} } /* SPメニュー内：お問い合わせボタンのメールアイコン */ #top .sp-menu .sp-menu__contact .ico-mail{ display: inline-block !important; /* 念のため display: none の打消し */ vertical-align: middle; width: 18px; height: 14px; margin-right: 0px; background: url("../img/common/icon_mail_spmenu.png") center/contain no-repeat; /* もし白アイコンpngが無い場合のSVGマスク方式（どちらか片方でOK） */ /* -webkit-mask: url("shared/img/common/icon_mail.svg") no-repeat center / contain; mask: url("shared/img/common/icon_mail.svg") no-repeat center / contain; background-color:#fff; */ } /* ボタン内のテキスト色と下線の打ち消し（PCと統一） */ #top .sp-menu .sp-menu__contact .btn__text a{ color:#fff; text-decoration: none; padding: 0; } /* ========================================================= Recipe 一覧：カード画像の高さを統一（4:3） -
を想定 - 旧マークアップで の場合もケア ========================================================= */ /* 入れ物を比率ボックス化 */ #top #recipe .pickup-card .pickup-card__media, #top #recipe .pickup-card > a:first-child{ position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; /* ★ここで高さを統一（必要なら 1/1 や 16/9 に変更） */ overflow: hidden; } /* 画像をボックスいっぱいにフィット */ #top #recipe .pickup-card .pickup-card__media img, #top #recipe .pickup-card > a:first-child > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* 余白を作らず全面に表示（はみ出しはトリミング） */ display: block; } /* aspect-ratio 非対応ブラウザのフォールバック */ @supports not (aspect-ratio: 4 / 3) { #top #recipe .pickup-card .pickup-card__media, #top #recipe .pickup-card > a:first-child{ height: 0; padding-top: 75%; /* 4:3 = 75% */ } #top #recipe .pickup-card .pickup-card__media img, #top #recipe .pickup-card > a:first-child > img{ position: absolute; } } /* 横長バリエーション（必要なら有効化） #top #recipe .pickup-card.pickup-card--h .pickup-card__media, #top #recipe .pickup-card.pickup-card--h > a:first-child{ aspect-ratio: 16 / 9; } */ /* 2列レシピ：画像枠を常に 4:3 に固定（ 直下の img を対象） */ #top .pickup-grid--2col .pickup-card--h > a{ display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; } #top .pickup-grid--2col .pickup-card--h > a > img{ width: 100%; height: 100%; object-fit: cover; /* 既定：横長はカバー */ object-position: center; display: block; } /* 縦長だけ左右に余白（contain） */ #top .pickup-grid--2col .pickup-card--h > a > img.is-portrait{ object-fit: contain; background: #fff; /* 余白の色。必要に応じて変更 */ } /* aspect-ratio 非対応フォールバック */ @supports not (aspect-ratio: 4 / 3){ #top .pickup-grid--2col .pickup-card--h > a{ height: 0; padding-top: calc(100% * 3 / 4); } #top .pickup-grid--2col .pickup-card--h > a > img{ position: absolute; inset: 0; } } /* === Product detail main image: keep 4:3 stage === */ .lwr-productSection__inner .lwr-productCard__thumb{ aspect-ratio: 4 / 3; overflow: hidden; display: block; } /* 既定（横長/正方形）はカバー：4:3にフィットさせてトリミング */ .lwr-productSection__inner .lwr-productCard__thumb > img{ width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* 縦長は左右に余白を出して全体を見せる（上下はフィット） */ .lwr-productSection__inner .lwr-productCard__thumb > img.is-portrait{ object-fit: contain; background: transparent; /* 余白は親の背景色 */ } /* 製品詳細メイン画像：4:3 ステージを固定 */ #top .lwr .lwr-productSection__inner .lwr-productCard__thumb{ aspect-ratio: 4 / 3; overflow: hidden; display: block; } /* 既定（横長/正方形）はトリミングしてカバー */ #top .lwr .lwr-productSection__inner .lwr-productCard__thumb > img{ width: 100% !important; height: 100% !important; /* 他の height:auto を打ち消す */ object-fit: cover; object-position: center; display: block; } /* 縦長だけ左右に余白を出して全体表示 */ #top .lwr .lwr-productSection__inner .lwr-productCard__thumb > img.is-portrait{ object-fit: contain !important; /* 念のため確実に切り替える */ } /* ========================================================= Top: recipe / pickup 画像エリア共通（4:3固定・等高） - landscape: 画像は cover - portrait : 画像は contain（左右に余白） ========================================================= */ /* 画像の入れ物を 4:3 固定に */ #top .recipe-block .pickup-card > a, #top .recipe-block .pickup-card__media, #top .pickup-inner .pickup-card > a, #top .pickup-inner .pickup-card__media { position: relative; display: block; width: 100%; /* 等高化：アスペクト比で固定 */ aspect-ratio: 4 / 3; overflow: hidden; /* 既存の角丸と質感に寄せる（必要に応じて調整） */ background: #fff; } /* 画像のフィット挙動（デフォルトは cover） */ #top .recipe-block .pickup-card > a > img, #top .recipe-block .pickup-card__media img, #top .pickup-inner .pickup-card > a > img, #top .pickup-inner .pickup-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 縦長だけ contain（左右に余白） */ #top .recipe-block .pickup-card > a > img.is-portrait, #top .recipe-block .pickup-card__media img.is-portrait, #top .pickup-inner .pickup-card > a > img.is-portrait, #top .pickup-inner .pickup-card__media img.is-portrait { object-fit: contain; background: #fff; /* 背景が透けると困る場合 */ } /* 2列カード（横レイアウト）でも画像ブロックは 4:3 を維持 */ #top .pickup-grid--2col .pickup-card.pickup-card--h > a, #top .pickup-grid--2col .pickup-card.pickup-card--h .pickup-card__media { aspect-ratio: 4 / 3; } /* ===== PCメガメニュー（CSSのみ） ===== */ @media (min-width: 1025px){ /* トリガーになる
  • */ .gnav__item.has-mega { position: relative; } /* メガ本体（全幅） */ .gnav__item.has-mega > .mega{ position: absolute; left: 0; right: 0; /* 全幅＝100vw と等価（ナビulがヘッダー幅に広がっている前提） */ top: 100%; /* 親リンクの真下から */ z-index: 5000; /* ヘッダーより上に必要なら数値上げてOK */ background: #e2e2e2; /* ふわっと出るモーション */ opacity: 0; transform: translateY(8px); visibility: hidden; pointer-events: none; transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s; } /* ホバー or キーボードフォーカスで開く */ .gnav__item.has-mega:hover > .mega, .gnav__item.has-mega:focus-within > .mega{ opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; transition: opacity .22s ease, transform .22s ease; } /* 内側レイアウト（中央1200px） */ .gnav__item.has-mega > .mega .mega__inner{ max-width: 1200px; margin: 0 auto; padding: 28px 24px 36px; /* 余白はお好みで */ box-sizing: border-box; box-shadow: none; } /* モバイルでは絶対に出さない（SPハンバーガー優先） */ @media (max-width: 1024px){ .gnav__item.has-mega > .mega{ display: none !important; } } /* ===== PCメガメニュー ===== */ @media (min-width: 1024px){ #top .site-header{ overflow: visible; } /* クリップ回避 */ /* ベース */ #top .site-nav > ul{ position: relative; z-index: 40; } #top .site-nav > ul > li{ position: static; } /* li幅に依存させない */ /* パネル本体：画面幅100%でヘッダー直下に固定 */ #top .mega{ position: fixed; left: 0; right: 0; top: var(--header-height, 84px); background: #e2e2e2; display: block; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease, visibility 0s .18s; z-index: 30; /* ヘッダー背景より上 */ } /* hover と focus-within で開く（CSSのみ） */ #top .has-mega:hover > .mega, #top .has-mega:focus-within > .mega{ opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity .18s ease, transform .18s ease; } /* インナー 1200px */ #top .mega__inner{ max-width: 1200px; margin: 0 auto; padding: 24px 20px 28px; } /* Z型で増える3列グリッド */ #top .mega__grid{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px 24px; list-style: none; } #top .mega__grid > li > a{ display: block; padding: 12px 14px; background: #fff; border-radius: 6px; color: #333; text-decoration: none; line-height: 1.4; transition: background-color .15s ease, transform .15s ease; } #top .mega__grid > li > a:hover, #top .mega__grid > li > a:focus{ background: #F5F3EC; transform: translateY(-1px); text-decoration: none; } /* メニュー項目の右側に + アイコン */ #top .has-mega > a{ position: relative; padding-right: 20px; /* 余白を少し増やす */ } #top .has-mega > a::after{ content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; font-weight: 700; color: #54AE3A; line-height: 1; text-align: center; } } /* SP ではメガメニューを使わず既存ハンバーガーを利用 */ @media (max-width: 1023px){ #top .mega{ display:none!important; } } @media (min-width: 1024px){ /* --- ここからレイアウト調整 --- */ /* インナー：背景は透明（無色）、横1200px、左右ゆったり */ #top .mega__inner{ max-width: 1200px; margin: 0 auto; padding: 24px 24px 28px; background: transparent; /* ← 無色に */ } /* 4列グリッド（1200pxに対して均等幅） */ #top .mega__grid{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); /* ← 3 → 4 列に */ gap: 18px 24px; list-style: none; } /* 各項目カード */ #top .mega__grid > li > a{ position: relative; display: block; padding: 14px 34px 14px 16px; /* 右は矢印ぶん広め */ background: #fff; border-radius: 8px; color: #333; text-decoration: none; line-height: 1.45; box-shadow: 0 1px 0 rgba(0,0,0,.04); transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease; } /* 右端の > 印（控えめ） */ #top .mega__grid > li > a::after{ content: "›"; /* ＞より視認性のよい1ストローク */ position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; line-height: 1; color: currentColor; opacity: .45; transition: transform .15s ease, opacity .15s ease; } /* ホバー/フォーカスのあしらい */ #top .mega__grid > li > a:hover, #top .mega__grid > li > a:focus{ background: #F7F6F2; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.06); text-decoration: none; } #top .mega__grid > li > a:hover::after, #top .mega__grid > li > a:focus::after{ opacity: .7; transform: translate(2px,-50%); /* ちょい右に動く */ } /* 必要なら行間を少し詰めたい場合の微調整 #top .mega__grid > li > a { line-height: 1.35; } */ /* --- ここまで --- */ } /* PCだけ適用 */ @media (min-width:1024px){ /* トリガー項目を基準要素に */ #top .site-nav > li.gnav__item.has-mega{ position: relative; } /* ↓この見えない“橋”が、メニュー項目とメガの間のスキマを埋めます */ #top .site-nav > li.gnav__item.has-mega::after{ content:""; position:absolute; left:-12px; /* 少し左右に余裕を出してもOK */ right:-12px; top:100%; /* 項目の直下から */ height:24px; /* ←ここが橋の厚み。スキマ量に合わせて 16〜28px くらいで調整 */ /* 透明でOK。hover を保つための当たり判定だけ */ } /* ホバーは「項目上」でも「メガメニュー上」でも維持する */ #top .site-nav > li.gnav__item.has-mega:hover .mega, #top .site-nav > li.gnav__item.has-mega .mega:hover{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; } } /* ===== Banner nav arrows: 白い円＋グラデ矢印 ===== */ @media (min-width: 768px){ /* ボタン本体：白い丸 */ #top .kv.kv--banner .kv__nav .kv__prev, #top .kv.kv--banner .kv__nav .kv__next{ background: #FFF !important; border-radius: 50%; /* ← ここを追加 */ background-image: none; /* ← sp用PNGを無効化（必要なら） */ } /* 矢印（三角形）はこのままでOK */ #top .kv.kv--banner .kv__nav .kv__prev::before, #top .kv.kv--banner .kv__nav .kv__next::before{ border-left: 10px solid #3AA14E; border-top: 5px solid transparent; border-bottom: 5px solid transparent; content: ""; position: absolute; right: 12px; top: 50%; } /* …以下略… */ }