@charset "UTF-8";
/**
* DUKE Corporate — メインスタイル
*
* 記述順:
* 01. カスタムプロパティ
* 02. リセットとベース
* 03. アクセシビリティ用ユーティリティ
* 04. レイアウト（コンテナ・セクション）
* 05. タイポグラフィ・見出し
* 06. ボタン・リンク
* 07. ヘッダー・グローバルナビ
* 08. フッター
* 09. メインビジュアル
* 10. トップページ各セクション
* 11. ページヘッダー・パンくず
* 12. カード・定義リスト・テーブル・地図
* 13. ニュースリスト
* 14. 店舗・求人
* 15. フォーム
* 16. ページネーション・投稿ナビ
* 17. 記事本文（ブロック）
* 18. アニメーション
*
* デザイン仕様書 docs/design-system.md の値のみを使用する。
* border-radius は最大 2px、box-shadow はヘッダーの1箇所のみ、
* グラデーションは写真上の可読性確保のみ。
*/
/* ==========================================================================
01. カスタムプロパティ
========================================================================== */
:root {
/* --- 色 --------------------------------------------------------- */
/*
* ロゴ（assets/images/logo.png）から抽出したブランドカラーに合わせている。
* 濃紺 #182858 … ロゴの「D」とワードマーク
* 青緑 #609088 … ロゴの循環矢印
* accent は本文リンクにも使うため、コントラスト比 4.5:1 を満たす濃さに調整した値を使う。
*/
--duke-color-primary: #1b2c5c;
--duke-color-primary-dark: #102848;
--duke-color-primary-deep: #0c1d38;
--duke-color-accent: #3f7168;
--duke-color-accent-soft: #609088;
--duke-color-accent-pale: #e6efed;
--duke-color-background: #ffffff;
--duke-color-background-subtle: #f1f5f8;
--duke-color-text: #1e2a36;
--duke-color-text-muted: #5a6b79;
--duke-color-text-inverse: #ffffff;
--duke-color-text-inverse-muted: #b9c6d2;
--duke-color-border: #d8dee4;
--duke-color-border-strong: #1b2c5c;
--duke-color-border-inverse: rgba(255, 255, 255, 0.24);
--duke-color-link: #3f7168;
--duke-color-link-hover: #1b2c5c;
--duke-color-error: #b3261e;
--duke-color-success: #1b6b4a;
--duke-color-focus: #3f7168;
--duke-color-disabled: #b9c6d2;
/* 写真上に文字を置く場合の可読性確保。装飾目的のグラデーションは使わない。 */
--duke-overlay-photo: linear-gradient(180deg, rgba(12, 29, 56, 0) 35%, rgba(12, 29, 56, 0.66) 100%);
/* --- フォント --------------------------------------------------- */
--duke-font-ja: "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN",
"BIZ UDPGothic", "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium",
YuGothic, Meiryo, sans-serif;
--duke-font-en: "Helvetica Neue", Helvetica, "Segoe UI", Arial, "Hiragino Sans", sans-serif;
--duke-font-num: "Helvetica Neue", Helvetica, Arial, sans-serif;
/* --- 文字サイズ ------------------------------------------------- */
--duke-fs-hero: clamp(2rem, 1.05rem + 4.05vw, 4.5rem);
--duke-fs-h1: clamp(1.75rem, 1.2rem + 2.35vw, 3rem);
--duke-fs-h2: clamp(2.125rem, 1.5rem + 2.66vw, 3.5rem);
--duke-fs-h3: clamp(1.25rem, 1.06rem + 0.8vw, 1.625rem);
--duke-fs-h4: clamp(1.0625rem, 1.03rem + 0.16vw, 1.1875rem);
--duke-fs-body: 1rem;
--duke-fs-lead: clamp(1rem, 0.96rem + 0.16vw, 1.0625rem);
--duke-fs-message: clamp(1.125rem, 1.03rem + 0.4vw, 1.375rem);
--duke-fs-small: 0.875rem;
--duke-fs-note: 0.8125rem;
--duke-fs-en: clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem);
--duke-fs-button: 0.9375rem;
--duke-fs-num: 0.9375rem;
/* --- 行間 ------------------------------------------------------- */
--duke-lh-heading: 1.6;
--duke-lh-body: 1.9;
--duke-lh-tight: 1.5;
/* --- 字間 ------------------------------------------------------- */
--duke-ls-heading: 0.04em;
--duke-ls-body: 0.02em;
--duke-ls-en: 0.12em;
--duke-ls-num: 0.06em;
/* --- 幅 --------------------------------------------------------- */
--duke-width-wide: 1440px;
--duke-width-content: 1200px;
--duke-width-narrow: 800px;
/* 複数文が続く本文の測度。読みやすさを優先して詰める。 */
--duke-width-text: 40em;
/* 1〜2文で完結するリード・サブコピー用。1行に収まる場合は折り返さない幅。 */
--duke-width-lead: 46em;
/* --- 余白 ------------------------------------------------------- */
--duke-gutter: clamp(1.25rem, 0.6rem + 2.8vw, 5rem);
--duke-gutter-narrow: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
--duke-space-section: clamp(5rem, 2.6rem + 6.4vw, 9.5rem);
--duke-space-section-tight: clamp(3rem, 2.2rem + 2.1vw, 5.5rem);
--duke-space-section-loose: clamp(6.5rem, 3.2rem + 8.8vw, 12rem);
--duke-space-1: 4px;
--duke-space-2: 8px;
--duke-space-3: 12px;
--duke-space-4: 16px;
--duke-space-5: 24px;
--duke-space-6: 32px;
--duke-space-7: 40px;
--duke-space-8: 56px;
--duke-space-9: 72px;
--duke-space-10: 96px;
/* --- 角丸・影・罫線 --------------------------------------------- */
--duke-radius-none: 0;
--duke-radius-sm: 2px;
--duke-shadow-header: 0 1px 2px rgba(27, 44, 92, 0.06);
--duke-border: 1px solid var(--duke-color-border);
--duke-border-strong: 1px solid var(--duke-color-border-strong);
--duke-border-accent: 1px solid var(--duke-color-accent-soft);
--duke-border-inverse: 1px solid var(--duke-color-border-inverse);
/* --- ヘッダー --------------------------------------------------- */
--duke-header-height: 64px;
/* WordPress管理バーの高さ。ログイン時のみ body.admin-bar 側で上書きする。 */
--duke-admin-bar-height: 0px;
/* --- アニメーション --------------------------------------------- */
--duke-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--duke-duration-fast: 200ms;
--duke-duration-base: 400ms;
--duke-duration-slow: 600ms;
--duke-duration-image: 900ms;
--duke-stagger: 80ms;
--duke-move: 16px;
}
@media (min-width: 1024px) {
:root {
--duke-header-height: 76px;
--duke-move: 16px;
}
}
/* ==========================================================================
02. リセットとベース
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
/* overflow-x: hidden は position: sticky を壊すため clip を使う。 */
overflow-x: clip;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
/* 固定ヘッダーにアンカー先が隠れないようにする。 */
scroll-padding-top: calc(var(--duke-header-height) + var(--duke-space-5));
}
body {
margin: 0;
overflow-x: clip;
background-color: var(--duke-color-background);
color: var(--duke-color-text);
font-family: var(--duke-font-ja);
font-size: var(--duke-fs-body);
font-weight: 400;
line-height: var(--duke-lh-body);
letter-spacing: var(--duke-ls-body);
/*
* 日本語の折り返し制御。
* overflow-wrap: break-word … 長いURLなど、単語自体が入りきらない場合だけ分割する
* line-break: strict … 行頭に句読点や小書き文字が来ないようにする
* word-break: auto-phrase … 文節（意味のまとまり）単位で折り返す
* text-wrap: pretty … 最終行に1〜2文字だけ残る「取り残され」を防ぐ
* auto-phrase / pretty は未対応ブラウザでは宣言ごと無視され、直前の値が使われる。
*/
overflow-wrap: break-word;
word-break: normal;
word-break: auto-phrase;
line-break: strict;
text-wrap: pretty;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-weight: 600;
line-height: var(--duke-lh-heading);
letter-spacing: var(--duke-ls-heading);
/* 見出しは各行の長さを均して、1行目だけが極端に長い状態を避ける。 */
text-wrap: balance;
word-break: auto-phrase;
}
p,
li,
dd,
figcaption {
text-wrap: pretty;
word-break: auto-phrase;
}
/* URL・メールアドレスなど、分割しないと収まらない文字列だけ任意位置で折り返す。 */
.duke-entry-content a,
.duke-dl__value,
.duke-store-info__value,
code,
kbd,
samp {
overflow-wrap: anywhere;
}
p,
ul,
ol,
dl,
figure,
blockquote,
table {
margin: 0;
}
ul,
ol {
padding: 0;
list-style: none;
}
img,
picture,
svg,
video,
iframe {
display: block;
max-width: 100%;
}
img {
height: auto;
}
a {
color: var(--duke-color-link);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color var(--duke-duration-fast) var(--duke-ease);
}
a:hover {
color: var(--duke-color-link-hover);
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
letter-spacing: inherit;
}
/* キーボード操作時のみフォーカスリングを表示する。 */
:focus-visible {
outline: 2px solid var(--duke-color-focus);
outline-offset: 2px;
border-radius: var(--duke-radius-sm);
}
/* 暗い背景の上ではフォーカスリングを白にして視認性を確保する。 */
.duke-cta :focus-visible,
.duke-band--photo :focus-visible {
outline-color: var(--duke-color-text-inverse);
}
::selection {
background-color: var(--duke-color-accent-pale);
color: var(--duke-color-text);
}
/* ==========================================================================
03. アクセシビリティ用ユーティリティ
========================================================================== */
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* スキップリンク。フォーカス時のみ表示する。 */
.duke-skip-link {
position: absolute;
top: 0;
left: 0;
z-index: 200;
padding: var(--duke-space-3) var(--duke-space-5);
background-color: var(--duke-color-primary);
color: var(--duke-color-text-inverse);
font-size: var(--duke-fs-small);
text-decoration: none;
transform: translateY(-120%);
transition: transform var(--duke-duration-fast) var(--duke-ease);
}
.duke-skip-link:focus {
color: var(--duke-color-text-inverse);
transform: translateY(0);
}
/* メインコンテンツはスキップリンクの移動先としてフォーカスを受けるが、
フォーカスリングは表示しない（視覚的なノイズになるため）。 */
#duke-main:focus {
outline: none;
}
/* 編集権限のあるユーザーにのみ表示される案内。 */
.duke-editor-notice {
margin: 0 0 var(--duke-space-4);
padding: var(--duke-space-3) var(--duke-space-4);
border: 1px dashed var(--duke-color-accent-soft);
border-radius: var(--duke-radius-sm);
background-color: var(--duke-color-accent-pale);
color: var(--duke-color-text);
font-size: var(--duke-fs-small);
line-height: 1.7;
}
.duke-editor-notice__badge {
display: inline-block;
margin-right: var(--duke-space-2);
padding: 1px var(--duke-space-2);
background-color: var(--duke-color-primary);
color: var(--duke-color-text-inverse);
font-size: var(--duke-fs-note);
letter-spacing: var(--duke-ls-body);
}
/* ==========================================================================
04. レイアウト
========================================================================== */
.duke-container {
width: 100%;
max-width: calc(var(--duke-width-wide) + var(--duke-gutter) * 2);
margin-inline: auto;
padding-inline: var(--duke-gutter);
}
.duke-container--content {
max-width: calc(var(--duke-width-content) + var(--duke-gutter) * 2);
}
.duke-container--narrow {
max-width: calc(var(--duke-width-narrow) + var(--duke-gutter) * 2);
}
/* MV など全幅に近い要素用。左右余白のみを確保する。 */
.duke-container--full {
max-width: none;
padding-inline: var(--duke-gutter-narrow);
}
.duke-section {
margin-top: var(--duke-space-section);
}
.duke-section--tight {
margin-top: var(--duke-space-section-tight);
}
.duke-section--loose {
margin-top: var(--duke-space-section-loose);
}
/* 背景色を持つセクションは margin ではなく padding で余白を作る。 */
.duke-section--filled {
margin-top: var(--duke-space-section);
padding-block: var(--duke-space-section);
background-color: var(--duke-color-background-subtle);
}
.duke-site-main {
/* 固定ヘッダー分の余白。TOPは MV 側で調整するため 0 にする。 */
padding-top: var(--duke-header-height);
}
.duke-front .duke-site-main {
padding-top: 0;
}
/* テキストの測度を制限する。 */
.duke-measure {
max-width: var(--duke-width-text);
}
/*
* 代表挨拶で写真を使わない場合は測度制限を外し、コンテナ幅いっぱいに組む。
* 写真が無いまま40emで止めると右側が大きく空いて見えるため（ユーザー指示）。
*/
.duke-message-section--full .duke-measure {
max-width: none;
}
/* ==========================================================================
05. タイポグラフィ・見出し
========================================================================== */
.duke-heading {
margin-bottom: var(--duke-space-7);
}
.duke-heading__group {
margin: 0;
}
.duke-heading__en {
display: flex;
align-items: center;
gap: var(--duke-space-3);
margin: 0 0 var(--duke-space-3);
color: var(--duke-color-accent);
font-family: var(--duke-font-en);
font-size: var(--duke-fs-en);
font-weight: 600;
line-height: 1.6;
letter-spacing: var(--duke-ls-en);
text-transform: none;
}
/* 見出し脇の装飾線。サイト内で使用する唯一の装飾線。 */
.duke-heading__en::after {
content: "";
display: block;
width: 24px;
height: 1px;
background-color: var(--duke-color-accent-soft);
transition: width var(--duke-duration-base) var(--duke-ease);
}
.duke-heading__hash {
color: var(--duke-color-accent-soft);
margin-right: var(--duke-space-1);
}
.duke-heading__ja {
font-size: var(--duke-fs-h2);
line-height: var(--duke-lh-heading);
}
.duke-heading__lead {
/* 1〜2文の短いリードは行長を均し、2行目に数語だけ残る状態を避ける。 */
text-wrap: balance;
max-width: var(--duke-width-lead);
margin-top: var(--duke-space-5);
color: var(--duke-color-text-muted);
font-size: var(--duke-fs-lead);
}
/* 暗背景・写真上での色調整。 */
.duke-heading--inverse .duke-heading__en {
color: var(--duke-color-accent-soft);
}
.duke-heading--inverse .duke-heading__ja {
color: var(--duke-color-text-inverse);
}
.duke-heading--inverse .duke-heading__lead {
color: var(--duke-color-text-inverse-muted);
}
.duke-heading--inverse .duke-heading__en::after {
background-color: var(--duke-color-border-inverse);
}
/* 小さめのセクション見出し（下層ページ内の中見出し）。 */
.duke-subheading {
margin-bottom: var(--duke-space-5);
padding-bottom: var(--duke-space-3);
border-bottom: var(--duke-border-strong);
font-size: var(--duke-fs-h3);
}
.duke-lead {
/* 1〜2文の短いリードは行長を均し、2行目に数語だけ残る状態を避ける。 */
text-wrap: balance;
max-width: var(--duke-width-lead);
font-size: var(--duke-fs-lead);
line-height: var(--duke-lh-body);
}
.duke-message-text {
font-size: var(--duke-fs-message);
line-height: 1.8;
letter-spacing: var(--duke-ls-heading);
}
.duke-note {
color: var(--duke-color-text-muted);
font-size: var(--duke-fs-note);
line-height: 1.7;
}
.duke-date {
color: var(--duke-color-text-muted);
font-family: var(--duke-font-num);
font-size: var(--duke-fs-num);
font-weight: 500;
letter-spacing: var(--duke-ls-num);
font-variant-numeric: tabular-nums;
}
/* 線囲みのラベル。塗りつぶさないことで主張を抑える。 */
.duke-label {
display: inline-block;
padding: 2px var(--duke-space-3);
border: var(--duke-border);
border-radius: var(--duke-radius-sm);
color: var(--duke-color-text-muted);
font-size: var(--duke-fs-note);
line-height: 1.6;
letter-spacing: var(--duke-ls-body);
white-space: nowrap;
}
.duke-empty {
margin: var(--duke-space-8) 0;
padding: var(--duke-space-8) var(--duke-space-5);
border: var(--duke-border);
border-radius: var(--duke-radius-sm);
color: var(--duke-color-text-muted);
text-align: center;
}
/* ==========================================================================
06. ボタン・リンク
========================================================================== */
.duke-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--duke-space-3);
min-height: 48px;
padding: var(--duke-space-3) var(--duke-space-5);
border: 1px solid transparent;
border-radius: var(--duke-radius-sm);
font-size: var(--duke-fs-button);
font-weight: 500;
line-height: 1.6;
letter-spacing: var(--duke-ls-heading);
text-decoration: none;
cursor: pointer;
transition:
background-color var(--duke-duration-fast) var(--duke-ease),
border-color var(--duke-duration-fast) var(--duke-ease),
color var(--duke-duration-fast) var(--duke-ease);
}
.duke-btn .duke-icon {
flex: none;
transition: transform var(--duke-duration-fast) var(--duke-ease);
}
.duke-btn:hover .duke-icon {
transform: translateX(4px);
}
.duke-btn--primary {
background-color: var(--duke-color-primary);
color: var(--duke-color-text-inverse);
}
.duke-btn--primary:hover {
background-color: var(--duke-color-primary-dark);
color: var(--duke-color-text-inverse);
}
.duke-btn--outline {
border-color: var(--duke-color-primary);
background-color: transparent;
color: var(--duke-color-primary);
}
.duke-btn--outline:hover {
background-color: var(--duke-color-primary);
color: var(--duke-color-text-inverse);
}
.duke-btn--outline-inverse {
border-color: var(--duke-color-text-inverse);
background-color: transparent;
color: var(--duke-color-text-inverse);
}
.duke-btn--outline-inverse:hover {
background-color: var(--duke-color-text-inverse);
color: var(--duke-color-primary-deep);
}
.duke-btn[disabled],
.duke-btn--disabled {
background-color: var(--duke-color-disabled);
border-color: var(--duke-color-disabled);
color: var(--duke-color-text-inverse);
cursor: not-allowed;
pointer-events: none;
}
.duke-btn--block {
width: 100%;
}
/* 矢印付きテキストリンク。一覧への導線に使う主力リンク。 */
.duke-arrow-link {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: var(--duke-space-4);
min-height: 44px;
min-width: 180px;
padding: var(--duke-space-3) 0;
border-bottom: var(--duke-border);
border-radius: var(--duke-radius-none);
color: var(--duke-color-text);
font-size: var(--duke-fs-button);
font-weight: 500;
letter-spacing: var(--duke-ls-heading);
text-decoration: none;
transition: border-color var(--duke-duration-fast) var(--duke-ease);
}
.duke-arrow-link:hover {
border-bottom-color: var(--duke-color-primary);
color: var(--duke-color-primary);
}
.duke-arrow-link .duke-icon {
flex: none;
transition: transform var(--duke-duration-fast) var(--duke-ease);
}
.duke-arrow-link:hover .duke-icon {
transform: translateX(4px);
}
.duke-arrow-link--compact {
min-width: 0;
min-height: 44px;
font-size: var(--duke-fs-small);
}
.duke-arrow-link--inverse {
border-bottom-color: var(--duke-color-border-inverse);
color: var(--duke-color-text-inverse);
}
.duke-arrow-link--inverse:hover {
border-bottom-color: var(--duke-color-text-inverse);
color: var(--duke-color-text-inverse);
}
.duke-link {
color: var(--duke-color-link);
text-decoration: underline;
text-underline-offset: 3px;
}
.duke-link:hover {
text-decoration-thickness: 2px;
}
.duke-icon {
display: inline-block;
vertical-align: middle;
}
.duke-icon--external {
width: 12px;
height: 12px;
}
/* 電話番号 */
.duke-tel {
display: flex;
flex-direction: column;
gap: var(--duke-space-1);
}
.duke-tel__label {
color: var(--duke-color-text-muted);
font-size: var(--duke-fs-note);
}
.duke-tel__link {
display: inline-flex;
align-items: center;
gap: var(--duke-space-2);
min-height: 44px;
color: inherit;
text-decoration: none;
}
.duke-tel__number {
font-family: var(--duke-font-num);
font-size: 1.375rem;
font-weight: 600;
letter-spacing: var(--duke-ls-num);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.duke-tel__hours {
color: var(--duke-color-text-muted);
font-size: var(--duke-fs-note);
}
.duke-tel--large .duke-tel__number {
font-size: 1.5rem;
}
.duke-tel--inverse .duke-tel__label,
.duke-tel--inverse .duke-tel__hours {
color: var(--duke-color-text-inverse-muted);
}
.duke-tel--inverse .duke-tel__link {
color: var(--duke-color-text-inverse);
}
.duke-actions {
display: flex;
flex-wrap: wrap;
gap: var(--duke-space-4);
margin-top: var(--duke-space-7);
}
/* ==========================================================================
07. ヘッダー・グローバルナビ
========================================================================== */
/*
* WordPress管理バーとの重なりを避ける。
* 管理バーは 783px以上で32px、601〜782pxで46px の固定表示。
* 600px以下では position: absolute になりスクロールで流れるため、ずらさない。
*/
body.admin-bar {
--duke-admin-bar-height: 32px;
}
@media screen and (max-width: 782px) {
body.admin-bar {
--duke-admin-bar-height: 46px;
}
}
@media screen and (max-width: 600px) {
body.admin-bar {
--duke-admin-bar-height: 0px;
}
}
/* 管理バーの分だけアンカーの着地位置も下げる。 */
html:has(body.admin-bar) {
scroll-padding-top: calc(var(--duke-header-height) + 32px + var(--duke-space-5));
}
.duke-header {
position: fixed;
top: var(--duke-admin-bar-height);
left: 0;
z-index: 100;
width: 100%;
border-bottom: 1px solid transparent;
background-color: var(--duke-color-background);
transition:
background-color 280ms var(--duke-ease),
border-color 280ms var(--duke-ease),
box-shadow 280ms var(--duke-ease);
}
/* TOPページのみ、最上部では背景を透明にしてMVと一体化させる。 */
.duke-front .duke-header {
background-color: transparent;
}
/*
* スクロール時は完全な不透明白にする。
* 半透明＋backdrop-filter は本文が透けて読みづらく、
* デザイン仕様書で禁止している Glassmorphism の印象にも近づくため使わない。
*/
.duke-header.is-scrolled,
.duke-front .duke-header.is-scrolled {
border-bottom-color: var(--duke-color-border);
background-color: var(--duke-color-background);
/* サイト内で使用する唯一の box-shadow。 */
box-shadow: var(--duke-shadow-header);
}
/* SPメニューを開いている間はヘッダーを不透明にする。 */
.duke-header.is-menu-open {
background-color: var(--duke-color-background);
}
.duke-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--duke-space-4);
/*
* 固定値ではなく最小値にすることで、メニュー項目が多くて折り返した場合でも
* 内容がヘッダーからはみ出さずヘッダー自体が伸びる。
* （推奨はトップレベル6項目以内。README「メニュー設定」参照）
*/
min-height: var(--duke-header-height);
padding-block: var(--duke-space-2);
}
.duke-header__brand {
display: flex;
align-items: center;
flex: none;
}
.duke-site-title {
margin: 0;
font-size: 1.25rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0.14em;
}
.duke-site-title a,
.duke-header__brand .custom-logo-link {
display: inline-flex;
align-items: center;
color: var(--duke-color-primary);
text-decoration: none;
}
.duke-header__brand img {
width: auto;
/* ロゴは横長（約3.45:1）のため、高さを抑えても判読できる。 */
max-height: 26px;
}
.duke-site-description {
display: none;
}
/* --- SPメニュー（〜1023px） --- */
.duke-header__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--duke-space-2);
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: var(--duke-radius-sm);
background: transparent;
color: var(--duke-color-primary);
cursor: pointer;
}
.duke-header__toggle-bars {
position: relative;
display: block;
width: 22px;
height: 12px;
}
.duke-header__toggle-bars::before,
.duke-header__toggle-bars::after,
.duke-header__toggle-bars span {
position: absolute;
left: 0;
display: block;
width: 100%;
height: 1.5px;
background-color: currentColor;
transition: transform var(--duke-duration-fast) var(--duke-ease), opacity var(--duke-duration-fast) var(--duke-ease);
content: "";
}
.duke-header__toggle-bars::before {
top: 0;
}
.duke-header__toggle-bars span {
top: 5px;
content: none;
}
.duke-header__toggle-bars::after {
top: 10px;
}
.duke-header__toggle[aria-expanded="true"] .duke-header__toggle-bars::before {
transform: translateY(5px) rotate(45deg);
}
.duke-header__toggle[aria-expanded="true"] .duke-header__toggle-bars span {
opacity: 0;
}
.duke-header__toggle[aria-expanded="true"] .duke-header__toggle-bars::after {
transform: translateY(-5px) rotate(-45deg);
}
.duke-header__nav {
position: fixed;
top: calc(var(--duke-admin-bar-height) + var(--duke-header-height));
left: 0;
width: 100%;
height: calc(100dvh - var(--duke-admin-bar-height) - var(--duke-header-height));
overflow-y: auto;
padding: var(--duke-space-6) var(--duke-gutter) var(--duke-space-10);
background-color: var(--duke-color-background);
border-top: var(--duke-border);
}
/* JavaScript が有効なときのみ初期状態で隠す。
無効時はスタックナビとして常時表示され、全ページへ到達できる。 */
.js .duke-header__nav {
display: none;
opacity: 0;
transform: translateY(-8px);
transition: opacity 240ms var(--duke-ease), transform 240ms var(--duke-ease);
}
.js .duke-header__nav.is-open {
display: block;
}
.js .duke-header__nav.is-visible {
opacity: 1;
transform: translateY(0);
}
.duke-nav__list {
display: flex;
flex-direction: column;
}
.duke-nav__list > li > a,
.duke-nav__list > li > .duke-nav__parent > a {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 2px;
min-height: 56px;
padding: var(--duke-space-3) 0;
border-bottom: var(--duke-border);
color: var(--duke-color-text);
font-size: 1.0625rem;
font-weight: 500;
letter-spacing: var(--duke-ls-heading);
text-decoration: none;
}
/* ナビの英語ラベル。日本語ラベルの下に小さく添える。 */
.duke-nav__en {
color: var(--duke-color-accent);
font-family: var(--duke-font-en);
font-size: 0.625rem;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.14em;
}
.duke-nav .sub-menu {
padding-left: var(--duke-space-4);
}
.duke-nav .sub-menu a {
display: flex;
align-items: center;
min-height: 48px;
padding: var(--duke-space-2) 0;
border-bottom: var(--duke-border);
color: var(--duke-color-text-muted);
font-size: var(--duke-fs-small);
text-decoration: none;
}
/*
* 現在地の表示（スマートフォンのスタックナビ）。
* 色だけに依存しないよう、太字と左側の縦罫線を併用する。
*/
.duke-nav a[aria-current="page"],
.duke-nav .duke-nav__item--current > a {
position: relative;
padding-left: var(--duke-space-3);
color: var(--duke-color-primary);
font-weight: 600;
}
.duke-nav a[aria-current="page"]::before,
.duke-nav .duke-nav__item--current > a::before {
position: absolute;
top: 50%;
left: 0;
width: 2px;
height: 1em;
background-color: var(--duke-color-primary);
transform: translateY(-50%);
content: "";
}
.duke-header__nav-footer {
display: flex;
flex-direction: column;
gap: var(--duke-space-5);
margin-top: var(--duke-space-7);
}
/*
* オンラインストア導線。
* 線ボタンにして視認性を上げる。お問い合わせ（塗り）＞オンラインストア（線）の
* 優先順位はボタンの塗り／線で表現する。
*/
.duke-header__store-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--duke-space-2);
min-height: 48px;
padding: var(--duke-space-2) var(--duke-space-5);
border: 1px solid var(--duke-color-primary);
border-radius: var(--duke-radius-sm);
background-color: transparent;
color: var(--duke-color-primary);
text-decoration: none;
transition:
background-color var(--duke-duration-fast) var(--duke-ease),
color var(--duke-duration-fast) var(--duke-ease);
}
.duke-header__store-link:hover {
background-color: var(--duke-color-primary);
color: var(--duke-color-text-inverse);
}
.duke-header__store-link-en {
font-family: var(--duke-font-en);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: var(--duke-ls-en);
/* 日本語ラベルの上に小さく添えるため、行送りを詰める。 */
line-height: 1.2;
}
.duke-header__store-link-ja {
display: inline-flex;
align-items: center;
gap: var(--duke-space-2);
font-size: var(--duke-fs-button);
font-weight: 500;
letter-spacing: var(--duke-ls-heading);
line-height: 1.2;
}
.duke-header__store-link-text {
display: inline-flex;
flex-direction: column;
gap: 2px;
align-items: flex-start;
}
.duke-header__cta {
display: none;
}
/* --- PCナビ（1024px〜） --- */
/*
* PCの水平ナビはここから。1024pxのままだと、ロゴ＋2段組みナビ5項目＋ボタン2つが
* 収まらずヘッダーが2段になるため、切り替え幅を1200pxにしている。
* navigation.js の DESKTOP_QUERY と必ず一致させること。
*/
@media (min-width: 1200px) {
.duke-header__toggle {
display: none;
}
.duke-header__nav,
.js .duke-header__nav {
position: static;
display: flex;
align-items: center;
gap: var(--duke-space-6);
width: auto;
height: auto;
overflow: visible;
padding: 0;
border-top: 0;
background-color: transparent;
opacity: 1;
transform: none;
}
.duke-header__inner {
gap: var(--duke-space-5);
}
/*
* ロゴとお問い合わせボタンは縮めず、ナビだけを縮める。
* min-width: 0 が無いと flex アイテムが内容幅より縮まず、
* 項目数が多いメニューでボタンが画面外へ押し出される。
*/
.duke-header__brand,
.duke-header__cta {
flex: 0 0 auto;
}
.duke-header__nav {
flex: 0 1 auto;
min-width: 0;
justify-content: flex-end;
}
.duke-nav__list {
flex-direction: row;
align-items: stretch;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--duke-space-3) var(--duke-space-7);
}
.duke-nav__list > li {
position: relative;
}
/* PCでは日本語ラベル（上）＋英語ラベル（下）の2段組みにする。 */
.duke-nav__list > li > a {
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
min-height: 48px;
padding: 0 0 var(--duke-space-3);
border-bottom: 0;
font-size: var(--duke-fs-button);
white-space: nowrap;
}
.duke-nav__list > li > a .duke-nav__en {
color: var(--duke-color-text-muted);
font-size: 0.625rem;
transition: color var(--duke-duration-fast) var(--duke-ease);
}
.duke-nav__list > li > a:hover .duke-nav__en {
color: var(--duke-color-accent);
}
/*
* 現在地は色と下線の2つで示す（色だけに依存しない）。
*
* セレクタは `.duke-nav__list > li`（トップレベル項目）に限定する。
* 限定しないとサブメニュー内の現在地にも ::after が付くが、
* サブメニューの a には position: relative が無いため、
* 基準がトップレベルの li になり、下線が本来と違う位置・幅で表示されてしまう。
*/
.duke-nav__list > li > a[aria-current="page"],
.duke-nav__list > li.duke-nav__item--current > a {
padding-left: 0;
color: var(--duke-color-primary);
font-weight: 600;
}
/* スマートフォン用の縦罫線マーカーはPCでは使わない。 */
.duke-nav__list > li > a[aria-current="page"]::before,
.duke-nav__list > li.duke-nav__item--current > a::before {
content: none;
}
.duke-nav__list > li > a[aria-current="page"]::after,
.duke-nav__list > li.duke-nav__item--current > a::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 2px;
background-color: var(--duke-color-primary);
content: "";
}
/* 現在地は英語ラベルもアクセント色にして、2段でまとまって見えるようにする。 */
.duke-nav__list > li > a[aria-current="page"] .duke-nav__en,
.duke-nav__list > li.duke-nav__item--current > a .duke-nav__en {
color: var(--duke-color-accent);
}
/*
* サブメニュー内の現在地は下線ではなく、色と太字＋左の縦罫線で示す。
* ドロップダウン内で下線を引くと、項目の区切りと紛らわしくなるため。
*/
.duke-nav .sub-menu a[aria-current="page"],
.duke-nav .sub-menu .duke-nav__item--current > a {
position: relative;
padding-left: var(--duke-space-4);
color: var(--duke-color-primary);
font-weight: 600;
}
.duke-nav .sub-menu a[aria-current="page"]::before,
.duke-nav .sub-menu .duke-nav__item--current > a::before {
position: absolute;
top: 50%;
left: var(--duke-space-2);
width: 2px;
height: 1em;
background-color: var(--duke-color-primary);
transform: translateY(-50%);
content: "";
}
/* ドロップダウン */
.duke-nav .sub-menu {
position: absolute;
top: 100%;
left: calc(var(--duke-space-4) * -1);
z-index: 10;
display: block;
min-width: 220px;
padding: var(--duke-space-2) 0;
border: var(--duke-border);
border-radius: var(--duke-radius-sm);
background-color: var(--duke-color-background);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition:
opacity var(--duke-duration-fast) var(--duke-ease),
transform var(--duke-duration-fast) var(--duke-ease),
visibility var(--duke-duration-fast);
}
.duke-nav__item--has-children:hover > .sub-menu,
.duke-nav__item--has-children:focus-within > .sub-menu,
.duke-nav__item--has-children.is-open > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.duke-nav .sub-menu a {
min-height: 44px;
padding: var(--duke-space-2) var(--duke-space-4);
border-bottom: 0;
color: var(--duke-color-text);
white-space: nowrap;
}
.duke-nav .sub-menu a:hover {
background-color: var(--duke-color-background-subtle);
color: var(--duke-color-primary);
}
.duke-header__nav-footer {
display: none;
}
.duke-header__cta {
display: flex;
align-items: center;
gap: var(--duke-space-5);
flex: none;
}
.duke-header__cta .duke-btn {
min-height: 44px;
padding-inline: var(--duke-space-5);
}
.duke-header__cta .duke-header__store-link:hover {
color: var(--duke-color-primary);
}
.duke-site-title {
font-size: 1.375rem;
}
.duke-header__brand img {
max-height: 32px;
}
}
/* SPメニュー展開中は背面のスクロールを止める（JSが body に付与）。 */
body.duke-scroll-locked {
position: fixed;
width: 100%;
overflow: hidden;
}
/* ==========================================================================
08. フッター
========================================================================== */
.duke-footer {
margin-top: var(--duke-space-section);
padding-block: var(--duke-space-9) var(--duke-space-5);
background-color: var(--duke-color-background-subtle);
}
/* CTA直後のフッターは、CTA側で余白を持つため上マージンを消す。 */
.duke-cta + .duke-footer {
margin-top: 0;
}
.duke-footer__top {
display: grid;
gap: var(--duke-space-8);
}
.duke-footer__brand-title {
margin: 0 0 var(--duke-space-4);
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 0.14em;
}
.duke-footer__brand-title a {
color: var(--duke-color-primary);
text-decoration: none;
}
.duke-footer__brand img {
width: auto;
max-height: 34px;
margin-bottom: var(--duke-space-4);
}
.duke-footer__description {
max-width: 32em;
margin-bottom: var(--duke-space-5);
color: var(--duke-color-text-muted);
font-size: var(--duke-fs-small);
}
/*
* フッターの住所。本社と事務所兼店舗を並べるため、
* ラベルと住所を1行にまとめた項目を縦に積む。
*/
.duke-footer__address {
display: grid;
gap: var(--duke-space-1);
margin-bottom: var(--duke-space-4);
font-size: var(--duke-fs-small);
font-style: normal;
line-height: 1.9;
}
/* 狭い画面ではラベルと住所を1行に流し、折り返しに任せる。 */
.duke-footer__address-item {
display: block;
}
/*
* 768px以上ではラベルを列として揃える。
* display: contents で各拠点の行を親グリッドに参加させ、
* ラベルの文字数が違っても住所の開始位置が揃うようにする。
*/
@media (min-width: 768px) {
.duke-footer__address {
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--duke-space-3);
row-gap: var(--duke-space-1);
}
.duke-footer__address-item {
display: contents;
}
}
/* ラベルは住所本体より一段弱く。「：」はCSSで足して原稿側に持たせない。 */
.duke-footer__address-label {
color: var(--duke-color-text-inverse-muted);
}
.duke-footer__address-label::after {
content: "：";
}
.duke-footer__nav {
display: grid;
gap: var(--duke-space-6);
}
.duke-footer__nav-title {
margin-bottom: var(--duke-space-3);
padding-bottom: var(--duke-space-2);
border-bottom: var(--duke-border);
color: var(--duke-color-primary);
font-size: var(--duke-fs-small);
font-weight: 600;
}
.duke-footer__nav ul li a {
display: inline-flex;
align-items: center;
gap: var(--duke-space-2);
min-height: 40px;
color: var(--duke-color-text);
font-size: var(--duke-fs-small);
text-decoration: none;
}
.duke-footer__nav ul li a:hover {
color: var(--duke-color-primary);
text-decoration: underline;
text-underline-offset: 3px;
}
.duke-footer__external {
display: grid;
gap: var(--duke-space-3);
margin-top: var(--duke-space-6);
padding-top: var(--duke-space-5);
border-top: var(--duke-border);
}
.duke-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--duke-space-4);
margin-top: var(--duke-space-8);
padding-top: var(--duke-space-5);
border-top: var(--duke-border);
}
.duke-footer__utility-list {
display: flex;
flex-wrap: wrap;
gap: var(--duke-space-5);
}
.duke-footer__utility a {
color: var(--duke-color-text-muted);
font-size: var(--duke-fs-note);
text-decoration: none;
}
.duke-footer__utility a:hover {
color: var(--duke-color-primary);
text-decoration: underline;
}
.duke-footer__copyright {
color: var(--duke-color-text-muted);
font-family: var(--duke-font-en);
font-size: var(--duke-fs-note);
letter-spacing: var(--duke-ls-body);
}
.duke-footer__sns {
display: flex;
flex-wrap: wrap;
gap: var(--duke-space-4);
margin-top: var(--duke-space-5);
}
.duke-footer__sns a {
display: inline-flex;
align-items: center;
gap: var(--duke-space-2);
min-height: 44px;
color: var(--duke-color-text-muted);
font-size: var(--duke-fs-note);
text-decoration: none;
}
.duke-widget {
margin-top: var(--duke-space-6);
font-size: var(--duke-fs-small);
}
.duke-widget__title {
margin-bottom: var(--duke-space-3);
font-size: var(--duke-fs-small);
}
@media (min-width: 768px) {
.duke-footer__nav {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.duke-footer__top {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
gap: var(--duke-space-10);
}
.duke-footer__nav {
grid-template-columns: repeat(4, 1fr);
gap: var(--duke-space-5);
}
}
/* ==========================================================================
09. メインビジュアル
========================================================================== */
.duke-hero {
padding-top: calc(var(--duke-header-height) + var(--duke-space-7));
}
.duke-hero__copy {
display: flex;
flex-direction: column;
gap: var(--duke-space-5);
padding-bottom: var(--duke-space-6);
}
.duke-hero__title {
max-width: 20em;
margin: 0;
font-size: var(--duke-fs-hero);
font-weight: 600;
line-height: 1.45;
letter-spacing: 0.02em;
}
.duke-hero__sub {
/* 1〜2文の短いリードは行長を均し、2行目に数語だけ残る状態を避ける。 */
text-wrap: balance;
max-width: var(--duke-width-lead);
color: var(--duke-color-text-muted);
font-size: var(--duke-fs-lead);
}
.duke-hero__en {
color: var(--duke-color-text-muted);
font-family: var(--duke-font-en);
font-size: var(--duke-fs-en);
letter-spacing: var(--duke-ls-en);
}
/*
* `aspect-ratio` と `max-height` を併用すると、高さが制限されたときに
* 幅まで縮んで全幅表示にならないため、高さの上限は clamp() で直接指定する。
*/
.duke-hero__media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background-color: var(--duke-color-background-subtle);
}
.duke-hero__media--empty {
border-top: var(--duke-border);
border-bottom: var(--duke-border);
}
.duke-hero__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1200ms var(--duke-ease);
}
.duke-hero__slide.is-active {
opacity: 1;
}
/* 1枚だけの場合はJSを介さず表示する。 */
.duke-hero__slide:only-child {
opacity: 1;
}
.duke-hero__slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
/*
* 静止画に「ゆっくり寄りながら流れる」動きを与えて動画のように見せる。
* 1枚しか登録されていない場合でも効くため、写真が揃うまでの間も画が止まらない。
*
* イージングに --duke-ease（ease-out系）を使わないのは、
* alternate で往復させると折り返しが不自然に見えるため。
* 往復の両端が滑らかになる ease-in-out を使う。
*/
animation: duke-hero-drift 24s ease-in-out infinite alternate;
}
/* 画面外・タブ非表示のあいだは動きを止める（main.js が付け外しする）。 */
.duke-hero__media.is-paused .duke-hero__slide img {
animation-play-state: paused;
}
/*
* 拡大率は 1.04 → 1.12。
* 常に4%以上の余白を持たせたうえで移動量を1%に抑えているため、
* object-fit: cover の外に隙間が出ることはない。
* 元画像は 2400px 幅あり、1.12倍でも実寸を超えないので画質も落ちない。
*/
@keyframes duke-hero-drift {
from {
transform: scale(1.04) translate3d(-1%, -0.6%, 0);
}
to {
transform: scale(1.12) translate3d(1%, 0.6%, 0);
}
}
.duke-hero__notice {
position: absolute;
inset: auto var(--duke-space-5) var(--duke-space-5) var(--duke-space-5);
}
@media (min-width: 768px) {
.duke-hero__media {
aspect-ratio: 16 / 9;
}
}
@media (min-width: 1024px) {
.duke-hero {
padding-top: calc(var(--duke-header-height) + var(--duke-space-9));
}
.duke-hero__copy {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
gap: var(--duke-space-8);
padding-bottom: var(--duke-space-8);
}
.duke-hero__copy-main {
display: flex;
flex-direction: column;
gap: var(--duke-space-5);
}
.duke-hero__en {
flex: none;
padding-bottom: var(--duke-space-2);
text-align: right;
}
.duke-hero__media {
/* 16:7 相当。画面が縦に短い場合は 62vh で頭打ちにする。 */
aspect-ratio: auto;
height: clamp(360px, 38vw, 62vh);
}
}
/* ==========================================================================
10. トップページ各セクション
========================================================================== */
/* --- 企業メッセージ --- */
/*
* 画像の有無でレイアウトを変える。どちらの場合もコンテナ幅を使い切り、
* 右側が空いたままにならないようにする。
*/
.duke-message__inner {
display: grid;
gap: var(--duke-space-6);
}
.duke-message__head {
/* 見出しブロック自体の下余白は、グリッドの gap に任せる。 */
margin-bottom: 0;
}
.duke-message__head .duke-heading {
margin-bottom: 0;
}
/*
* 本文の測度。em は親（16px）基準だが、中の .duke-message-text は最大22pxのため、
* 48em ＝ 768px で実質35文字程度に収まる。
*/
.duke-message__body {
display: grid;
gap: var(--duke-space-5);
max-width: 48em;
}
@media (min-width: 1024px) {
/* 画像なし: 見出し左 / 本文右 の2カラム。 */
.duke-message__inner {
grid-template-columns: 34fr 66fr;
column-gap: var(--duke-space-10);
align-items: start;
}
/* 画像あり: 見出しと本文を左に積み、右に画像を置く。 */
.duke-message__inner--media {
grid-template-columns: 55fr 45fr;
row-gap: var(--duke-space-6);
}
.duke-message__inner--media .duke-message__head,
.duke-message__inner--media .duke-message__body {
grid-column: 1;
}
.duke-message__inner--media .duke-message__media {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
}
}
/* --- 事業ダイジェスト（カード枠を持たない3カラム） --- */
.duke-digest__list {
display: grid;
gap: var(--duke-space-8);
}
.duke-digest__item {
display: flex;
flex-direction: column;
gap: var(--duke-space-4);
padding-top: var(--duke-space-5);
border-top: var(--duke-border-strong);
}
.duke-digest__number {
color: var(--duke-color-accent);
font-family: var(--duke-font-num);
font-size: var(--duke-fs-note);
font-weight: 600;
letter-spacing: var(--duke-ls-en);
}
.duke-digest__title {
font-size: var(--duke-fs-h3);
}
.duke-digest__en {
color: var(--duke-color-text-muted);
font-family: var(--duke-font-en);
font-size: var(--duke-fs-note);
letter-spacing: var(--duke-ls-en);
}
.duke-digest__text {
color: var(--duke-color-text-muted);
font-size: var(--duke-fs-small);
}
@media (min-width: 768px) {
.duke-digest__list {
grid-template-columns: repeat(2, 1fr);
gap: var(--duke-space-7);
}
}
@media (min-width: 1024px) {
.duke-digest__list {
grid-template-columns: repeat(3, 1fr);
gap: var(--duke-space-8);
}
}
/* --- DUKEの強み（番号付きリスト。カードにしない） --- */
.duke-strength__list {
display: grid;
gap: var(--duke-space-7);
margin-top: var(--duke-space-8);
}
.duke-strength__item {
display: grid;
gap: var(--duke-space-3);
padding-top: var(--duke-space-5);
border-top: var(--duke-border);
}
.duke-strength__number {
color: var(--duke-color-accent);
font-family: var(--duke-font-num);
font-size: 1.5rem;
font-weight: 600;
line-height: 1;
letter-spacing: var(--duke-ls-num);
}
.duke-strength__title {
font-size: var(--duke-fs-h4);
}
.duke-strength__text {
color: var(--duke-color-text-muted);
font-size: var(--duke-fs-small);
}
@media (min-width: 768px) {
.duke-strength__item {
grid-template-columns: 80px minmax(0, 1fr);
gap: var(--duke-space-5);
align-items: start;
}
.duke-strength__number {
grid-row: span 2;
}
}
@media (min-width: 1024px) {
.duke-strength__list {
gap: var(--duke-space-8);
}
}
/* --- 画像＋テキストの2カラム（店舗導線・価値セクション） --- */
.duke-split {
display: grid;
gap: var(--duke-space-6);
align-items: center;
}
.duke-split__body {
display: flex;
flex-direction: column;
gap: var(--duke-space-5);
}
@media (min-width: 1024px) {
.duke-split {
grid-template-columns: 55fr 45fr;
gap: var(--duke-space-10);
}
/*
* 画像が未設定で本文しか無い場合、45%の列が空いたままになるため1カラムに戻す。
* `--single` は PHP 側が明示的に付けるが、子要素が1つだけの場合も自動で1カラムにする。
*/
.duke-split--single,
.duke-split > .duke-split__body:only-child {
grid-template-columns: minmax(0, 1fr);
grid-column: 1 / -1;
}
/* 左右交互レイアウト。3ブロックまでの使用に限る。 */
.duke-split--reverse .duke-split__media {
order: 2;
}
}
/* --- 全幅の写真バンド（採用導線） --- */
.duke-band {
position: relative;
display: flex;
align-items: flex-end;
min-height: 320px;
overflow: hidden;
background-color: var(--duke-color-primary-deep);
}
.duke-band__media {
position: absolute;
inset: 0;
}
.duke-band__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 写真上の文字を読ませるための機能的なオーバーレイ。 */
.duke-band__overlay {
position: absolute;
inset: 0;
background-image: var(--duke-overlay-photo);
}
.duke-band__inner {
position: relative;
z-index: 1;
width: 100%;
padding-block: var(--duke-space-8);
color: var(--duke-color-text-inverse);
}
.duke-band__body {
display: flex;
flex-direction: column;
gap: var(--duke-space-5);
max-width: var(--duke-width-lead);
}
@media (min-width: 1024px) {
.duke-band {
min-height: 420px;
}
.duke-band__inner {
padding-block: var(--duke-space-9);
}
}
/* --- お問い合わせCTA --- */
.duke-cta {
position: relative;
margin-top: var(--duke-space-section);
padding-block: var(--duke-space-9);
overflow: hidden;
background-color: var(--duke-color-primary-deep);
color: var(--duke-color-text-inverse);
}
/* 背景写真を敷く場合。文字の可読性はオーバーレイで確保する。 */
.duke-cta__media {
position: absolute;
inset: 0;
}
.duke-cta__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.duke-cta__overlay {
position: absolute;
inset: 0;
/* 写真の明るさに左右されず白文字が読めるよう、単色で十分に暗くする。 */
background-color: rgba(12, 29, 56, 0.82);
}
.duke-cta__inner {
position: relative;
z-index: 1;
display: grid;
gap: var(--duke-space-8);
}
/*
* theme.json の `elements.heading.color` がすべての見出しに本文色を適用するため、
* 暗い背景の上に置く見出しは明示的に色を指定して打ち消す（クラスを2つ重ねて詳細度を上げる）。
*/
.duke-cta .duke-cta__heading {
margin-bottom: var(--duke-space-3);
color: var(--duke-color-text-inverse);
font-size: var(--duke-fs-h3);
}
.duke-band .duke-heading__ja,
.duke-page-header--photo .duke-page-header__title {
color: var(--duke-color-text-inverse);
}
.duke-cta__en {
color: var(--duke-color-accent-soft);
font-family: var(--duke-font-en);
font-size: var(--duke-fs-en);
font-weight: 600;
letter-spacing: var(--duke-ls-en);
}
.duke-cta__text {
/* 1〜2文の短いリードは行長を均し、2行目に数語だけ残る状態を避ける。 */
text-wrap: balance;
max-width: var(--duke-width-lead);
margin-top: var(--duke-space-4);
color: var(--duke-color-text-inverse-muted);
font-size: var(--duke-fs-small);
}
.duke-cta__actions {
display: flex;
flex-direction: column;
gap: var(--duke-space-4);
}
.duke-cta__tel {
margin-top: var(--duke-space-3);
padding-top: var(--duke-space-5);
border-top: var(--duke-border-inverse);
}
@media (min-width: 1024px) {
.duke-cta__inner {
grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
align-items: center;
gap: var(--duke-space-10);
}
}
/* ==========================================================================
11. ページヘッダー・パンくず
========================================================================== */
.duke-page-header {
position: relative;
padding-block: var(--duke-space-8) var(--duke-space-7);
border-bottom: var(--duke-border);
background-color: var(--duke-color-background-subtle);
}
/* 背景画像がある場合のみ、文字を白にして写真の上に置く。 */
.duke-page-header--photo {
border-bottom: 0;
background-color: var(--duke-color-primary-deep);
color: var(--duke-color-text-inverse);
}
.duke-page-header__media {
position: absolute;
inset: 0;
overflow: hidden;
}
.duke-page-header__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.duke-page-header__overlay {
position: absolute;
inset: 0;
background-image: var(--duke-overlay-photo);
}
.duke-page-header__inner {
position: relative;
z-index: 1;
}
.duke-page-header__en {
display: block;
margin-bottom: var(--duke-space-3);
color: var(--duke-color-accent);
font-family: var(--duke-font-en);
font-size: var(--duke-fs-en);
font-weight: 600;
letter-spacing: var(--duke-ls-en);
}
.duke-page-header--photo .duke-page-header__en {
color: var(--duke-color-accent-soft);
}
.duke-page-header__title {
font-size: var(--duke-fs-h1);
line-height: var(--duke-lh-tight);
}
.duke-page-header__lead {
/* 1〜2文の短いリードは行長を均し、2行目に数語だけ残る状態を避ける。 */
text-wrap: balance;
max-width: var(--duke-width-lead);
margin-top: var(--duke-space-5);
color: var(--duke-color-text-muted);
font-size: var(--duke-fs-lead);
}
.duke-page-header--photo .duke-page-header__lead {
color: var(--duke-color-text-inverse-muted);
}
.duke-breadcrumbs {
padding-block: var(--duke-space-4);
border-bottom: var(--duke-border);
font-size: var(--duke-fs-note);
}
.duke-breadcrumbs__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--duke-space-2);
}
.duke-breadcrumbs__item {
display: flex;
align-items: center;
gap: var(--duke-space-2);
color: var(--duke-color-text-muted);
}
.duke-breadcrumbs__item:not(:first-child)::before {
color: var(--duke-color-border);
content: "/";
}
.duke-breadcrumbs__link {
color: var(--duke-color-text-muted);
text-decoration: none;
}
.duke-breadcrumbs__link:hover {
color: var(--duke-color-primary);
text-decoration: underline;
text-underline-offset: 3px;
}
@media (min-width: 1024px) {
.duke-page-header {
padding-block: var(--duke-space-10) var(--duke-space-9);
}
}
/* ==========================================================================
12. カード・定義リスト・テーブル・地図
========================================================================== */
/* 画像の比率枠。角丸は使わない。 */
.duke-figure {
position: relative;
overflow: hidden;
background-color: var(--duke-color-background-subtle);
}
.duke-figure--4-3 {
aspect-ratio: 4 / 3;
}
.duke-figure--16-9 {
aspect-ratio: 16 / 9;
}
.duke-figure--21-9 {
aspect-ratio: 21 / 9;
}
.duke-figure--3-4 {
aspect-ratio: 3 / 4;
}
.duke-figure__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duke-duration-slow) var(--duke-ease);
}
/* 画像未設定時。「No Image」等の文字は出さず、静かな空きスペースとする。 */
.duke-figure--empty {
border: var(--duke-border);
background-color: var(--duke-color-background-subtle);
}
/* カードは店舗一覧・求人一覧・福利厚生の3箇所のみで使用する。 */
.duke-card {
display: flex;
flex-direction: column;
border: var(--duke-border);
border-radius: var(--duke-radius-sm);
background-color: var(--duke-color-background);
transition: border-color var(--duke-duration-fast) var(--duke-ease);
}
.duke-card:hover {
border-color: var(--duke-color-primary);
}
.duke-card:hover .duke-figure__image {
transform: scale(1.03);
}
.duke-card__body {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--duke-space-3);
padding: var(--duke-space-5);
}
.duke-card__title {
font-size: var(--duke-fs-h4);
}
.duke-card__title a {
color: inherit;
text-decoration: none;
}
.duke-card__meta {
display: flex;
flex-wrap: wrap;
gap: var(--duke-space-2);
}
.duke-card__text {
color: var(--duke-color-text-muted);
font-size: var(--duke-fs-small);
}
.duke-card__actions {
display: flex;
flex-wrap: wrap;
gap: var(--duke-space-4);
margin-top: auto;
padding-top: var(--duke-space-4);
}
.duke-grid {
display: grid;
gap: var(--duke-space-5);
}
@media (min-width: 768px) {
.duke-grid--2,
.duke-grid--3 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.duke-grid--3 {
grid-template-columns: repeat(3, 1fr);
}
.duke-grid {
gap: var(--duke-space-6);
}
}
/* 定義リスト（会社概要・店舗情報・募集要項）。カードにしない。 */
.duke-dl {
border-top: var(--duke-border-strong);
}
.duke-dl__row {
display: grid;
gap: var(--duke-space-1);
padding-block: var(--duke-space-4);
border-bottom: var(--duke-border);
}
.duke-dl__key {
color: var(--duke-color-text-muted);
font-size: var(--duke-fs-small);
font-weight: 600;
}
.duke-dl__value {
margin: 0;
}
@media (min-width: 768px) {
.duke-dl__row {
grid-template-columns: 30% minmax(0, 1fr);
gap: var(--duke-space-5);
padding-block: var(--duke-space-5);
}
}
@media (min-width: 1024px) {
.duke-dl__row {
grid-template-columns: 25% minmax(0, 1fr);
}
}
/* 表は画面外にはみ出さないよう横スクロールさせる。 */
.duke-table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.duke-table-scroll table {
min-width: 560px;
border-collapse: collapse;
}
.duke-table-scroll th,
.duke-table-scroll td {
padding: var(--duke-space-3) var(--duke-space-4);
border: var(--duke-border);
text-align: left;
}
/* 地図は比率を保つ。 */
.duke-map,
.duke-embed {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background-color: var(--duke-color-background-subtle);
}
.duke-map iframe,
.duke-embed iframe {
width: 100%;
height: 100%;
border: 0;
}
@media (min-width: 768px) {
.duke-map,
.duke-embed {
aspect-ratio: 16 / 9;
}
}
/* ギャラリー */
.duke-gallery {
display: grid;
gap: var(--duke-space-3);
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
.duke-gallery {
grid-template-columns: repeat(3, 1fr);
gap: var(--duke-space-4);
}
}
/* 沿革タイムライン。左罫線1本で構成する。 */
.duke-timeline {
display: grid;
gap: var(--duke-space-6);
padding-left: var(--duke-space-5);
border-left: var(--duke-border);
}
.duke-timeline__item {
position: relative;
display: grid;
gap: var(--duke-space-2);
}
.duke-timeline__item::before {
position: absolute;
top: 10px;
left: calc(var(--duke-space-5) * -1 - 2px);
width: 5px;
height: 5px;
border-radius: 50%;
background-color: var(--duke-color-accent);
content: "";
}
.duke-timeline__year {
color: var(--duke-color-accent);
font-family: var(--duke-font-num);
font-size: var(--duke-fs-small);
font-weight: 600;
letter-spacing: var(--duke-ls-num);
}
.duke-timeline__title {
font-size: var(--duke-fs-h4);
}
.duke-timeline__text {
color: var(--duke-color-text-muted);
font-size: var(--duke-fs-small);
}
@media (min-width: 768px) {
.duke-timeline__item {
grid-template-columns: 100px minmax(0, 1fr);
gap: var(--duke-space-5);
align-items: baseline;
}
.duke-timeline__year {
grid-row: span 2;
}
}
/* ==========================================================================
13. ニュースリスト（カードではなく罫線区切りの1行リスト）
========================================================================== */
.duke-news-list {
border-top: var(--duke-border-strong);
}
.duke-news-list__item {
border-bottom: var(--duke-border);
}
.duke-news-list__link {
display: flex;
flex-direction: column;
gap: var(--duke-space-2);
padding: var(--duke-space-5) var(--duke-space-1);
color: inherit;
text-decoration: none;
transition: background-color var(--duke-duration-fast) var(--duke-ease);
}
.duke-news-list__link:hover {
background-color: var(--duke-color-background-subtle);
color: var(--duke-color-primary);
}
.duke-news-list__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--duke-space-3);
}
.duke-news-list__title {
font-size: var(--duke-fs-body);
font-weight: 400;
line-height: 1.7;
}
.duke-news-list__arrow {
flex: none;
color: var(--duke-color-primary);
transition: transform var(--duke-duration-fast) var(--duke-ease);
}
.duke-news-list__link:hover .duke-news-list__arrow {
transform: translateX(4px);
}
@media (min-width: 768px) {
.duke-news-list__link {
flex-direction: row;
align-items: center;
gap: var(--duke-space-5);
min-height: 72px;
padding: var(--duke-space-4);
}
.duke-news-list__meta {
flex: none;
min-width: 200px;
}
.duke-news-list__title {
flex: 1;
}
}
/* ==========================================================================
14. 店舗・求人
========================================================================== */
.duke-filter {
display: flex;
flex-wrap: wrap;
gap: var(--duke-space-3);
margin-bottom: var(--duke-space-7);
padding-bottom: var(--duke-space-5);
border-bottom: var(--duke-border);
}
.duke-filter__item a,
.duke-filter__item span {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: var(--duke-space-2) var(--duke-space-4);
border: var(--duke-border);
border-radius: var(--duke-radius-sm);
color: var(--duke-color-text);
font-size: var(--duke-fs-small);
text-decoration: none;
transition: border-color var(--duke-duration-fast) var(--duke-ease);
}
.duke-filter__item a:hover {
border-color: var(--duke-color-primary);
color: var(--duke-color-primary);
}
/* 選択中は背景・文字色・下線の3要素で示す（色だけに依存しない）。 */
.duke-filter__item [aria-current="page"] {
border-color: var(--duke-color-primary);
background-color: var(--duke-color-primary);
color: var(--duke-color-text-inverse);
font-weight: 600;
}
.duke-store-info {
display: grid;
gap: var(--duke-space-2);
font-size: var(--duke-fs-small);
}
.duke-store-info__row {
display: grid;
grid-template-columns: 5.5em minmax(0, 1fr);
gap: var(--duke-space-3);
}
.duke-store-info__key {
color: var(--duke-color-text-muted);
}
.duke-job-summary {
display: flex;
flex-wrap: wrap;
gap: var(--duke-space-2);
margin-bottom: var(--duke-space-4);
}
/* 数字で見るDUKE。数字を大きくしすぎない。 */
.duke-stats {
display: grid;
gap: var(--duke-space-6);
}
.duke-stats__item {
display: grid;
gap: var(--duke-space-2);
padding-top: var(--duke-space-4);
border-top: var(--duke-border);
}
.duke-stats__label {
color: var(--duke-color-text-muted);
font-size: var(--duke-fs-small);
}
.duke-stats__value {
color: var(--duke-color-primary);
font-family: var(--duke-font-num);
font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
font-weight: 600;
line-height: 1.2;
letter-spacing: var(--duke-ls-num);
}
.duke-stats__unit {
margin-left: var(--duke-space-1);
font-size: 1rem;
font-weight: 400;
}
@media (min-width: 768px) {
.duke-stats {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.duke-stats {
grid-template-columns: repeat(4, 1fr);
}
}
/* MISSION / VISION / VALUE。カードにしない。 */
.duke-mvv {
display: grid;
gap: var(--duke-space-8);
}
.duke-mvv__item {
display: grid;
gap: var(--duke-space-3);
padding-top: var(--duke-space-5);
border-top: var(--duke-border-strong);
}
.duke-mvv__label {
color: var(--duke-color-accent);
font-family: var(--duke-font-en);
font-size: var(--duke-fs-en);
font-weight: 600;
letter-spacing: var(--duke-ls-en);
}
.duke-mvv__title {
font-size: var(--duke-fs-h3);
line-height: var(--duke-lh-heading);
}
.duke-mvv__text {
color: var(--duke-color-text-muted);
font-size: var(--duke-fs-small);
}
/*
* 行動指針（VALUE）。
* 中黒の箇条書きだと会社が掲げる言葉に見えないため、
* 番号と罫線で1項目ずつを独立した言明として組む。
* カードで囲わず、罫線と余白だけで区切る点は他セクションと同じ。
*/
.duke-values {
display: grid;
margin-top: var(--duke-space-4);
padding: 0;
list-style: none;
counter-reset: none;
}
.duke-values__item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--duke-space-4);
align-items: baseline;
padding: var(--duke-space-4) 0;
border-top: var(--duke-border);
}
.duke-values__item:last-child {
border-bottom: var(--duke-border);
}
.duke-values__number {
color: var(--duke-color-accent);
font-family: var(--duke-font-num);
font-size: var(--duke-fs-note);
font-weight: 600;
letter-spacing: var(--duke-ls-en);
}
.duke-values__text {
font-size: var(--duke-fs-h4);
font-weight: 600;
line-height: var(--duke-lh-heading);
letter-spacing: var(--duke-ls-heading);
}
@media (min-width: 768px) {
.duke-values__item {
grid-template-columns: 72px minmax(0, 1fr);
gap: var(--duke-space-5);
padding: var(--duke-space-5) 0;
}
/* 短い言葉が広い行の中で埋もれないよう、MISSION / VISION の見出しに近い大きさで組む。 */
.duke-values__number {
font-size: var(--duke-fs-en);
}
.duke-values__text {
font-size: var(--duke-fs-h3);
}
}
/*
* 事業内容ページの各事業見出し。
* 2カラムの45%幅に入るため、セクション見出し（56px）より一段小さくして
* 3行以上の折り返しが発生しないようにする。
*/
.duke-business-block .duke-heading__ja {
font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
}
/* 代表挨拶・採用メッセージの導入見出し。セクション見出しより一段小さくする。 */
.duke-message-heading {
margin-bottom: var(--duke-space-6);
font-size: var(--duke-fs-h3);
}
.duke-signature {
margin-top: var(--duke-space-7);
padding-top: var(--duke-space-4);
border-top: var(--duke-border);
text-align: right;
}
.duke-signature__title {
display: block;
color: var(--duke-color-text-muted);
font-size: var(--duke-fs-small);
}
.duke-signature__name {
display: block;
margin-top: var(--duke-space-1);
font-size: var(--duke-fs-h4);
font-weight: 600;
letter-spacing: var(--duke-ls-heading);
}
/* 未確定項目の表示。色だけに依存しないよう文言で「準備中」と明示する。 */
.duke-pending {
color: var(--duke-color-text-muted);
}
/* 事業内容の特徴リスト。中黒ではなく短い罫線を使う。 */
.duke-feature-list {
display: grid;
gap: var(--duke-space-2);
margin-top: var(--duke-space-5);
}
.duke-feature-list__item {
display: flex;
gap: var(--duke-space-3);
align-items: baseline;
font-size: var(--duke-fs-small);
}
.duke-feature-list__item::before {
flex: none;
width: 12px;
height: 1px;
background-color: var(--duke-color-accent-soft);
transform: translateY(-4px);
content: "";
}
/* 補足注記。フランチャイズ加盟店であることの明示などに使う。 */
.duke-note--boxed {
margin-top: var(--duke-space-5);
padding: var(--duke-space-3) var(--duke-space-4);
border-left: 2px solid var(--duke-color-accent-soft);
background-color: var(--duke-color-background-subtle);
}
.duke-note-list {
display: grid;
gap: var(--duke-space-2);
margin-top: var(--duke-space-5);
}
/*
* 組織案内。
* 組織図を図形で描かず、会社（duke-org__head）→ 部門（duke-org__item）の2階層を
* 文字サイズと罫線だけで表す。カード枠・背景色・アイコンは使わない。
*/
.duke-org {
display: grid;
gap: var(--duke-space-9);
}
.duke-org__group {
display: grid;
gap: var(--duke-space-7);
}
/* --- 会社の階層 --- */
.duke-org__head {
display: grid;
gap: var(--duke-space-3);
padding-bottom: var(--duke-space-5);
border-bottom: var(--duke-border-strong);
}
.duke-org__head-en {
color: var(--duke-color-accent);
font-family: var(--duke-font-en);
font-size: var(--duke-fs-note);
font-weight: 600;
letter-spacing: var(--duke-ls-en);
}
.duke-org__name {
font-size: var(--duke-fs-h3);
line-height: var(--duke-lh-heading);
letter-spacing: var(--duke-ls-heading);
}
.duke-org__head-text {
max-width: var(--duke-width-text);
color: var(--duke-color-text-muted);
font-size: var(--duke-fs-small);
}
/*
* 会社名と説明を左右に振り分ける。
* 広い画面で説明文が1カラムに伸びきって間延びするのを防ぐ。
*/
@media (min-width: 1024px) {
.duke-org__head {
grid-template-columns: minmax(0, 20em) minmax(0, 1fr);
column-gap: var(--duke-space-9);
}
/* 左に会社名、右に説明。説明は会社名の下端に揃える。 */
.duke-org__head-en,
.duke-org__name {
grid-column: 1;
}
.duke-org__head-text {
grid-column: 2;
grid-row: 1 / span 2;
align-self: end;
}
}
/* --- 部門の階層 --- */
.duke-org__list {
display: grid;
gap: var(--duke-space-7);
}
.duke-org__item {
display: grid;
gap: var(--duke-space-3);
align-content: start;
padding-top: var(--duke-space-5);
border-top: var(--duke-border);
}
.duke-org__number {
color: var(--duke-color-accent);
font-family: var(--duke-font-num);
font-size: var(--duke-fs-note);
font-weight: 600;
line-height: 1;
letter-spacing: var(--duke-ls-en);
}
.duke-org__unit-en {
margin-top: calc(var(--duke-space-1) * -1);
color: var(--duke-color-text-muted);
font-family: var(--duke-font-en);
font-size: var(--duke-fs-note);
letter-spacing: var(--duke-ls-en);
}
.duke-org__unit-name {
font-size: var(--duke-fs-h4);
line-height: var(--duke-lh-heading);
letter-spacing: var(--duke-ls-heading);
}
.duke-org__unit-text {
color: var(--duke-color-text-muted);
font-size: var(--duke-fs-small);
}
/* 3カラムは1024px以上でのみ組む。768pxで3列にすると1行あたりの字数が足りない。 */
@media (min-width: 768px) {
.duke-org__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--duke-space-7);
}
}
@media (min-width: 1024px) {
.duke-org__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--duke-space-8);
}
}
/* 注記は部門の並びと地続きに見えないよう、1段分あけて置く。 */
.duke-organization .duke-note--boxed {
margin-top: var(--duke-space-8);
}
/* 働く環境の各ブロック。画像がある場合は .duke-split で2カラムになる。 */
.duke-workplace-blocks {
display: grid;
gap: var(--duke-space-9);
}
/* 会社概要のアクセス欄。地図と外観写真を並べる。 */
.duke-access-media {
display: grid;
gap: var(--duke-space-5);
margin-bottom: var(--duke-space-6);
}
@media (min-width: 1024px) {
.duke-access-media--split {
grid-template-columns: 55fr 45fr;
align-items: start;
}
}
/*
* 事業ダイジェストの画像。
* 上罫線の直下に置くため、番号との間隔を詰めて図版として見せる。
*/
.duke-digest__figure {
margin-bottom: var(--duke-space-2);
}
/* サイトマップ */
.duke-sitemap__list {
display: grid;
gap: var(--duke-space-1);
}
.duke-sitemap__list a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--duke-color-text);
font-size: var(--duke-fs-small);
text-decoration: none;
}
.duke-sitemap__list a:hover {
color: var(--duke-color-primary);
text-decoration: underline;
text-underline-offset: 3px;
}
.duke-sitemap__list .children {
padding-left: var(--duke-space-5);
border-left: var(--duke-border);
}
/* 記事ヘッダー */
.duke-article-header {
margin-bottom: var(--duke-space-6);
}
.duke-article-header__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--duke-space-3);
margin-bottom: var(--duke-space-4);
}
.duke-article-header__title {
font-size: var(--duke-fs-h1);
line-height: var(--duke-lh-tight);
}
.duke-article-thumbnail {
margin-bottom: var(--duke-space-7);
}
.duke-article-tags {
display: flex;
flex-wrap: wrap;
gap: var(--duke-space-2);
margin-top: var(--duke-space-6);
}
.duke-article-tags a {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 0 var(--duke-space-3);
border: var(--duke-border);
border-radius: var(--duke-radius-sm);
color: var(--duke-color-text-muted);
font-size: var(--duke-fs-note);
text-decoration: none;
}
/* 店舗詳細のヘッダーと本体 */
.duke-store-header,
.duke-job-header {
margin-bottom: var(--duke-space-7);
}
.duke-store-main {
display: grid;
gap: var(--duke-space-6);
}
@media (min-width: 1024px) {
.duke-store-main {
grid-template-columns: 60fr 40fr;
gap: var(--duke-space-9);
align-items: start;
}
}
/* 検索結果 */
.duke-search-area {
margin-bottom: var(--duke-space-7);
}
.duke-search-results {
border-top: var(--duke-border-strong);
}
.duke-search-result {
padding-block: var(--duke-space-5);
border-bottom: var(--duke-border);
}
.duke-search-result__link {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--duke-space-3);
color: var(--duke-color-text);
text-decoration: none;
}
.duke-search-result__link:hover .duke-search-result__title {
color: var(--duke-color-primary);
text-decoration: underline;
text-underline-offset: 3px;
}
.duke-search-result__type {
flex: none;
padding: 2px var(--duke-space-3);
border: var(--duke-border);
border-radius: var(--duke-radius-sm);
color: var(--duke-color-text-muted);
font-size: var(--duke-fs-note);
}
.duke-search-result__title {
font-size: var(--duke-fs-h4);
font-weight: 600;
}
.duke-search-result__text {
margin-top: var(--duke-space-2);
color: var(--duke-color-text-muted);
font-size: var(--duke-fs-small);
}
/* ==========================================================================
15. フォーム
========================================================================== */
.duke-form {
display: grid;
gap: var(--duke-space-5);
max-width: var(--duke-width-narrow);
}
.duke-form__note {
padding: var(--duke-space-3) var(--duke-space-4);
border: var(--duke-border);
border-radius: var(--duke-radius-sm);
background-color: var(--duke-color-background-subtle);
color: var(--duke-color-text-muted);
font-size: var(--duke-fs-small);
}
.duke-form__row {
display: grid;
gap: var(--duke-space-2);
}
.duke-form__label {
font-size: var(--duke-fs-small);
font-weight: 600;
}
.duke-form__required {
display: inline-block;
margin-left: var(--duke-space-2);
padding: 1px var(--duke-space-2);
border: 1px solid var(--duke-color-error);
border-radius: var(--duke-radius-sm);
color: var(--duke-color-error);
font-size: var(--duke-fs-note);
font-weight: 400;
}
.duke-form__control,
.duke-form input[type="text"],
.duke-form input[type="email"],
.duke-form input[type="tel"],
.duke-form input[type="url"],
.duke-form input[type="date"],
.duke-form select,
.duke-form textarea {
width: 100%;
min-height: 48px;
padding: var(--duke-space-3) var(--duke-space-4);
border: var(--duke-border);
border-radius: var(--duke-radius-sm);
background-color: var(--duke-color-background);
color: var(--duke-color-text);
font-size: var(--duke-fs-body);
transition: border-color var(--duke-duration-fast) var(--duke-ease);
}
.duke-form__control:focus,
.duke-form input:focus,
.duke-form select:focus,
.duke-form textarea:focus {
border-color: var(--duke-color-accent);
}
.duke-form textarea {
min-height: 160px;
line-height: var(--duke-lh-body);
resize: vertical;
}
.duke-form__control:disabled {
background-color: var(--duke-color-background-subtle);
color: var(--duke-color-text-muted);
cursor: not-allowed;
}
.duke-form__checkbox {
display: flex;
align-items: center;
gap: var(--duke-space-3);
min-height: 44px;
font-size: var(--duke-fs-small);
}
.duke-form__checkbox input {
width: 20px;
height: 20px;
flex: none;
}
.duke-form__actions {
margin-top: var(--duke-space-4);
}
.duke-form__actions .duke-btn {
min-width: 200px;
}
.duke-form__error {
color: var(--duke-color-error);
font-size: var(--duke-fs-small);
}
.duke-form-fallback {
display: grid;
gap: var(--duke-space-5);
max-width: var(--duke-width-narrow);
}
.duke-form-fallback__text {
color: var(--duke-color-text-muted);
}
/*
* Contact Form 7。
*
* ★ここが効いているおかげで、CF7管理画面の「フォーム」タブには
* CF7標準の書き方だけを置けばよい（テーマ独自のマークアップは不要）。
*
*
*
* 項目の追加・削除・並べ替え・ラベル変更を管理画面から普通に行える。
*