@charset "UTF-8"; /** * スマホのハンバーガーメニュー（SWELL の #sp_menu）を上書き * * 標準は白背景・黒文字のシンプルなリストなので、 * サイトのブラウン（#4a2c2a）基調に合わせた濃色パネルに変更する。 * * 開閉状態は で切り替わる。 * SWELL のカスタマイザー出力（.p-spMenu__inner::before など）を上書きするため、 * #sp_menu を付けて詳細度を上げている。 */ #sp_menu { --spm-bg-start: #563734; --spm-bg-end: #33201e; --spm-text: #f6ece0; --spm-muted: rgba(246, 236, 224, 0.6); --spm-line: rgba(246, 236, 224, 0.16); } /* ---------- 背景の暗幕 ---------- */ #sp_menu .p-spMenu__overlay { background: rgba(32, 20, 19, 0.55); opacity: 1; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } /* ---------- パネル本体 ---------- */ #sp_menu .p-spMenu__inner { width: 84vw; max-width: 400px; padding-top: 0; box-shadow: -12px 0 40px rgba(32, 20, 19, 0.35); } /* 閉じている時の退避距離をパネル幅に合わせる */ #sp_menu.-right .p-spMenu__inner { transform: translateX(100%); } html[data-spmenu="opened"] #sp_menu.-right .p-spMenu__inner { transform: translateX(0); } /* 背景色（カスタマイザーの #fdfdfd を上書き） */ #sp_menu .p-spMenu__inner::before { background: linear-gradient(165deg, var(--spm-bg-start) 0%, var(--spm-bg-end) 100%); opacity: 1; } #sp_menu.p-spMenu { color: var(--spm-text); } /* ---------- 閉じるボタン ---------- */ #sp_menu .p-spMenu__closeBtn { top: 14px; right: 14px; width: 42px; height: 42px; } #sp_menu .p-spMenu__closeBtn .c-iconBtn { width: 42px; height: 42px; color: var(--spm-text); border: 1px solid var(--spm-line); border-radius: 50%; transition: transform 0.4s ease, border-color 0.4s ease, background-color 0.4s ease; } #sp_menu .p-spMenu__closeBtn .c-iconBtn:hover, #sp_menu .p-spMenu__closeBtn .c-iconBtn:focus-visible { transform: rotate(90deg); border-color: var(--spm-text); background-color: rgba(246, 236, 224, 0.08); } #sp_menu .p-spMenu__closeBtn .c-iconBtn__icon { font-size: 15px; } /* ---------- 中身の余白 ---------- */ #sp_menu .p-spMenu__body { padding: 78px 30px 60px; scrollbar-width: thin; scrollbar-color: rgba(246, 236, 224, 0.25) transparent; } #sp_menu .p-spMenu__body::-webkit-scrollbar { width: 3px; } #sp_menu .p-spMenu__body::-webkit-scrollbar-thumb { background: rgba(246, 236, 224, 0.25); border-radius: 3px; } /* ---------- MENU 見出し ---------- */ #sp_menu .c-widget__title.-spmenu { margin: 0 0 26px; padding: 0 0 16px; font-family: "Inknut Antiqua", serif; font-size: 11px; font-weight: 400; letter-spacing: 0.34em; text-indent: 0.34em; color: var(--spm-muted); border-bottom: 1px solid var(--spm-line); background: none; } /* SWELL が見出しに付ける装飾線は使わない */ #sp_menu .c-widget__title.-spmenu::before, #sp_menu .c-widget__title.-spmenu::after { display: none; } #sp_menu .p-spMenu__nav { margin-top: 0; } /* ---------- メニュー項目 ---------- */ /* * Noto Serif JP は 400 しか読み込んでいないため、SWELL 既定の 500 のままだと * ブラウザが合成太字を描いて線が濁る。400 に揃えて明朝の線を活かす。 */ #sp_menu .c-spnav { font-family: "Noto Serif JP", serif; font-weight: 400; } #sp_menu .c-listMenu a { position: relative; padding: 17px 26px 17px 2px; font-size: 15px; letter-spacing: 0.09em; line-height: 1.6; color: var(--spm-text); border-bottom: 1px solid var(--spm-line); transition: color 0.3s ease, padding-left 0.3s ease; } #sp_menu .c-listMenu a:hover, #sp_menu .c-listMenu a:focus-visible { background-color: transparent; color: #fff; padding-left: 8px; } /* * SWELL は ::before に icomoon の「>」を left:2px で絶対配置している。 * ここでは右端に自前の山形アイコンを置くため、左のアイコンは消す。 * （消さないと左パディングを詰めた分、1文字目に重なる） */ #sp_menu .c-listMenu a::before { display: none; } /* 右端の細い山形アイコン */ #sp_menu .c-listMenu a::after { content: ""; position: absolute; top: 50%; right: 6px; width: 6px; height: 6px; margin-top: -3px; border-top: 1px solid var(--spm-muted); border-right: 1px solid var(--spm-muted); transform: rotate(45deg); transition: transform 0.3s ease, border-color 0.3s ease; } #sp_menu .c-listMenu a:hover::after { border-color: var(--spm-text); transform: rotate(45deg) translate(2px, -2px); } /* ---------- 子メニュー（採用の下など） ---------- */ #sp_menu .c-listMenu .sub-menu { margin: 0 0 4px; padding-left: 16px; border-left: 1px solid var(--spm-line); } #sp_menu .c-listMenu .sub-menu a { padding-top: 13px; padding-bottom: 13px; font-size: 13px; color: var(--spm-muted); border-bottom: none; } #sp_menu .c-listMenu .sub-menu a:hover { color: var(--spm-text); } #sp_menu .c-listMenu .sub-menu a::after { width: 5px; height: 5px; margin-top: -2.5px; } /* 親項目の下線は子メニューがある場合も残す */ #sp_menu .c-listMenu .menu-item-has-children > a { border-bottom: 1px solid var(--spm-line); } /* 最後の項目の下線は消してすっきりさせる */ #sp_menu .c-spnav > li:last-child > a { border-bottom: none; } /* ---------- 開いた時に項目を順番に出す ---------- */ #sp_menu .c-spnav > li { opacity: 0; transform: translateX(18px); transition: opacity 0.5s ease, transform 0.5s ease; } /* * 終了状態は translateX(0) ではなく none にする。 * transform が残ると合成レイヤーが保持され、濃色背景で文字が * 二重に見える描画崩れが起きるため。 */ html[data-spmenu="opened"] #sp_menu .c-spnav > li { opacity: 1; transform: none; } html[data-spmenu="opened"] #sp_menu .c-spnav > li:nth-child(1) { transition-delay: 0.20s; } html[data-spmenu="opened"] #sp_menu .c-spnav > li:nth-child(2) { transition-delay: 0.26s; } html[data-spmenu="opened"] #sp_menu .c-spnav > li:nth-child(3) { transition-delay: 0.32s; } html[data-spmenu="opened"] #sp_menu .c-spnav > li:nth-child(4) { transition-delay: 0.38s; } html[data-spmenu="opened"] #sp_menu .c-spnav > li:nth-child(5) { transition-delay: 0.44s; } html[data-spmenu="opened"] #sp_menu .c-spnav > li:nth-child(6) { transition-delay: 0.50s; } html[data-spmenu="opened"] #sp_menu .c-spnav > li:nth-child(7) { transition-delay: 0.56s; } html[data-spmenu="opened"] #sp_menu .c-spnav > li:nth-child(n + 8) { transition-delay: 0.62s; } /* MENU 見出しも少し遅れて出す */ #sp_menu .c-widget__title.-spmenu { opacity: 0; transform: translateY(-6px); transition: opacity 0.5s ease 0.12s, transform 0.5s ease 0.12s; } html[data-spmenu="opened"] #sp_menu .c-widget__title.-spmenu { opacity: 1; transform: none; } /* ---------- 動きを抑える設定を尊重する ---------- */ @media (prefers-reduced-motion: reduce) { #sp_menu .c-spnav > li, #sp_menu .c-widget__title.-spmenu { opacity: 1; transform: none; transition: none; } #sp_menu .p-spMenu__inner, #sp_menu .c-listMenu a, #sp_menu .p-spMenu__closeBtn .c-iconBtn { transition: none; } }