@charset "UTF-8";
/*
    Theme Name: Kadence Child - ダスキン
    Theme URI: https://www.liquidweb.com/software/kadence/
    Template: kadence
    Description: ダスキン ハウスクリーニング事業サイト用の Kadence 子テーマ（FiveHope合同会社様）
    Author: meくじら
    Version: 1.0.0
    License: GNU General Public License v3.0 (or later)
    License URI: https://www.gnu.org/licenses/gpl-3.0.html
    Text Domain: kadence-child
*/

/* ここから案件固有のスタイルを記述 */

/*
 * WHY: Kadence のグローバルパレットが初期値（Tailwind slate 系の寒色）のままで、
 *      ページ地 #F7FAFC・本文 #2D3748 が青みを持っていた。その上に子テーマの
 *      暖色オレンジが乗るため全体がくすんで見えていた（要件定義書 §3-3
 *      「清潔感があり、明るい」に反する）。
 *      管理画面のカラーパレットではなくここで上書きするのは、配色をコードへ
 *      一本化する既存方針（SSOT DSK-020）を維持するため。style.css は
 *      kadence-global に依存して全ページで読み込まれ、Kadence のインライン
 *      変数より後に出力されるため、同一詳細度でもこちらが優先される。
 * 2026-08-14: 初版。値はデザインモック実測（地 #FFFFFF / ブランド #FC5210）に準拠。
 */
:root {
	--global-palette1: #FC5210;   /* ブランド面（CTA 塗り・帯）。白文字 3.31:1 = 大きい文字専用 */
	--global-palette2: #D63F00;   /* ブランド文字・枠。白地 4.60:1 = 通常文字可 */
	--global-palette3: #1A1A1A;   /* 見出し */
	--global-palette4: #333333;   /* 本文。白地 12.63:1 */
	--global-palette5: #555555;   /* 補助本文。白地 7.46:1 */
	--global-palette6: #6B6B6B;   /* muted */
	--global-palette7: #E0E0E0;   /* 装飾境界。装飾専用（操作 UI の境界には使わない） */
	--global-palette8: #FFF8F2;   /* 暖色セクション地 */
	--global-palette9: #FFFFFF;   /* 基本ページ地・カード地 */
}

/*
 * WHY: Kadence は body 背景に palette8 を割り当てるが、本案件では palette8 を
 *      「暖色セクション地」に再定義したため、ページ地には palette9（白）を明示する。
 */
body {
	background-color: var(--global-palette9);
	color: var(--global-palette4);
}

/*
 * WHY: リンク色に palette1（#FC5210）を使うと白地で 3.31:1 となり、WCAG 2.x
 *      1.4.3 の通常文字 4.5:1 に届かない。テキストリンクは palette2（4.60:1）を使う。
 */
a {
	color: var(--global-palette2);
}

/* ==========================================================================
   ヘッダー（Kadence Header Builder の外観補正・全ページ共通）
   ==========================================================================
 * WHY (2026-08-16): 構造・文言・リンクは Kadence Header Builder（管理画面／theme_mod）
 *      で持ち、外観だけをここで整える（要件 §5 #1・実装プラン「ヘッダー追従 Kadence 標準」）。
 *      header.php の置換や defaults フィルタは使わない（DB 保存値が既定値に勝つため、
 *      フィルタ方式は管理画面で 1 度保存すると効かなくなり二重管理になる）。
 *      色は既存トークンのみ参照し、新しい色リテラルを増やさない。
 */

/* WHY: サイト表示名が 15 文字と長く、ナビ 4 項目・電話・CTA と同じ行に並ぶため、
 *      branding は太字のまま一回り絞って 1 行に収める。 */
.site-branding .site-title {
	font-size: clamp(16px, 1.3vw, 20px);
	font-weight: 700;
	letter-spacing: .01em;
	white-space: nowrap;
}

/*
 * WHY (2026-08-25): クライアント要望「ダスキンロゴとサービスマスターロゴ、
 *      店名を一緒に合わせてほしい（バランスは任せる）」への対応。ここで
 *      レイアウトする HTML は kadence_custom_logo フィルタ（inc/site-branding.php）
 *      が返す。2 ロゴは高さを揃え、幅は各画像の元アスペクト比
 *      （DUSKIN 400:126 ≒ 3.175:1 / ServiceMASTER 400:100 = 4:1）に
 *      width:auto で委ねる。HTML 側の width/height 属性がブラウザ既定の
 *      aspect-ratio を作るため、CSS 適用前後でのレイアウトシフトは起きない。
 *
 * WHY: PC は --kdc-logo-h: 32px が基準。DUSKIN 幅 ≒ 32×400/126 ≒ 101.6px、
 *      SM 幅 = 32×400/100 = 128px。ロゴ行 32px + gap 3px + 店名 12px
 *      （line-height 1.3 ≒ 15.6px）で合計 ≒ 50.6px。既存の単体ロゴ表示時の
 *      実測ヘッダー高は未計測のため、増減はブラウザ実測で確認すること。
 *
 * WHY: SP は実効幅 250〜280px 程度しかないため --kdc-logo-h を 20px まで
 *      下げる（DUSKIN 幅 ≒ 63.5px / SM 幅 = 80px、ロゴ行合計 ≒ 157px）。
 *      店名は 11px・nowrap で 1 行に収める（15 文字 × 11px ≒ 165px、字間の
 *      揺れを見込んでも 250px 以内）。ロゴを縦に積まないのは要件の明示指定
 *      のため（潰れる場合は --kdc-logo-h を下げて対処する）。
 *
 * WHY: max-width: none !important は、カスタマイザーの「ロゴ幅」設定が
 *      Kadence の動的インライン CSS で `.site-branding a.brand img{max-width:…}`
 *      として残っていた場合に、幅だけ縮んで縦横比が崩れるのを防ぐ保険。
 *      サイズは高さ（--kdc-logo-h）だけで決める。
 */
.site-branding a.brand .kdc-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
}
.kdc-brand__logos {
	--kdc-logo-h: 32px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.kdc-brand__logo {
	display: block;
}
.kdc-brand__logo img {
	display: block;
	height: var(--kdc-logo-h);
	width: auto;
	max-width: none !important;
}
.kdc-brand__divider {
	display: block;
	width: 1px;
	height: var(--kdc-logo-h);
	background: var(--ds-line);
	flex-shrink: 0;
}
.kdc-brand__name {
	font-size: var(--ds-font-xs);
	line-height: 1.3;
	color: var(--ds-fg-soft);
	white-space: nowrap;
}
@media (max-width: 767px) {
	.kdc-brand__logos {
		--kdc-logo-h: 20px;
		gap: 6px;
	}
	.kdc-brand__name {
		font-size: 11px;
	}
}

/* WHY: 電話番号は「見て覚える／タップする」用途。番号を主・受付時間を従にして
 *      2 段で縦に積む。下線は不要（電話番号は下線があると読みにくい）。 */
/* 詳細度メモ: Kadence の .inner-link-style-normal a:not(.button)（0,3,1）が下線を付ける。 */
.header-html.inner-link-style-normal a.ds-hdr-tel:not(.button),
.header-html.inner-link-style-normal a.ds-hdr-tel:not(.button):hover,
.header-html.inner-link-style-normal a.ds-hdr-tel:not(.button):focus-visible {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.2;
	/* WHY: Kadence の .header-html a は下線付き。番号に下線が乗ると桁が読みにくいので消す。 */
	text-decoration: none;
	color: var(--global-palette3);
}
.header-html .ds-hdr-tel__num {
	font-size: clamp(18px, 1.5vw, 24px);
	font-weight: 700;
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
	/* WHY: 1025px 付近で html 要素の幅が詰まると番号がハイフン位置で 2 行に折れる
	 *      （実測 91px 幅で「042-508- / 3660」）。番号は必ず 1 行で見せる。 */
	white-space: nowrap;
}
.header-html .ds-hdr-tel__hours {
	font-size: 12px;
	color: var(--global-palette5);
}

/* WHY: CTA はブランド面色＋白文字。#FC5210 は白文字 3.31:1 なので「大きい文字」基準
 *      （bold 18.66px 以上）が前提。19px を下限に固定し、2 行に折れないよう nowrap。 */
.header-button-wrap .header-button {
	background: var(--global-palette1);
	border-color: var(--global-palette1);
	color: var(--global-palette9);
	font-size: 19px;
	font-weight: 700;
	white-space: nowrap;
	padding: 12px 22px;
	border-radius: 6px;
}
.header-button-wrap .header-button:hover,
.header-button-wrap .header-button:focus-visible {
	background: var(--global-palette2);
	border-color: var(--global-palette2);
	color: var(--global-palette9);
}

/*
 * WHY (2026-09-27 / オーナー承認済み): ヘッダーへカート導線を追加。要素自体は
 *      Kadence ヘッダービルダー標準の cart（PC: main_right_center に配置、
 *      theme_mod header_desktop_items）／mobile-cart（SP: main_right の
 *      popup-toggle の直前、theme_mod header_mobile_items）で、個数バッジの
 *      更新は WooCommerce 標準の cart フラグメント（wc-cart-fragments。
 *      Kadence 側が span.header-cart-total / span.header-cart-empty-check を
 *      自動リフレッシュする）に任せる。独自 JS は追加しない（要件 §11）。
 *      クリック挙動は theme_mod header_cart_style / header_mobile_cart_style を
 *      "link" にして、ミニカート（slide）・ドロップダウン（dropdown）ではなく
 *      カートページへ直接遷移させている（この2つは Kadence の既定値でもあるが、
 *      デモ反映時に明示できるよう theme_mod へも保存済み）。
 * WHY: Kadence 標準の SVG（shopping-bag）を隠し、サイト共通のオレンジ線画
 *      （assets/img/icon-mnav-shop.svg。SP ドロワー「ショップ」項目と同一素材、
 *      inc/mobile-drawer.php・mobile-nav.css 参照）に揃える。ラベル文言は
 *      theme_mod 側を空にしてアイコンのみの表示にしており、その場合 Kadence が
 *      自動で付ける aria-label（'Shopping Cart' の日本語訳「お買い物カゴ」）を
 *      「カートを見る」に上書きするフィルタを inc/woocommerce.php に追加した。
 * WHY: タップ領域を 44×44px 確保するため .header-cart-button 自体を正方形の
 *      flex コンテナにし、アイコンは疑似要素の背景画像（24×24）で中央に置く。
 *      バッジは疑似要素と重ならない絶対配置でアイコン右上に載せる。
 * WHY: カートが空（0点）のときバッジを隠すのは、CSS の隠しクラスだけでは
 *      SP 側の初期表示（サーバー側 HTML）に is-empty クラスが付かない
 *      （inc/template-functions/header-functions.php の mobile_cart() は
 *      header-cart-total 自体に is-empty-* を付けない仕様）ため、代わりに
 *      常に is-empty-* が正しく付く兄弟要素 .header-cart-empty-check
 *      （PC/SP 共通・フラグメント更新でも同時に書き換わる）を基準にした
 *      一般兄弟セレクタで判定する。
 */
.kadence-header-cart .header-cart-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
}
.kadence-header-cart .header-cart-button .kadence-svg-iconset {
	display: none;
}
.kadence-header-cart .header-cart-button::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background: url("assets/img/icon-mnav-shop.svg") no-repeat center / contain;
}
.kadence-header-cart .header-cart-total {
	position: absolute;
	top: 2px;
	right: 2px;
	box-sizing: border-box;
	min-width: 16px;
	height: 16px;
	margin: 0;
	padding: 0 3px;
	background: var(--ds-brand);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	border-radius: var(--ds-radius-pill);
}
.kadence-header-cart .header-cart-empty-check.header-cart-is-empty-true ~ .header-cart-inner-wrap .header-cart-total {
	display: none;
}
/* WHY: PC は電話番号ブロックと同じ左右マージン（8px）を揃え、電話・カート・
 *      CTA ボタンの間隔を均等にする。 */
.header-cart-wrap {
	margin-inline: 8px;
}

/* WHY: ナビ項目の書体・太さ・通常色。フラグメント項目の current 誤判定は PHP 側
 *      （inc/nav-menu.php）で除去済みなので、ここでは current を潰さない。
 *      /shop/ 等の真のカレントは Kadence 既定（palette-highlight）で表示される。
 * 詳細度メモ: Kadence のインライン CSS が
 *   .main-navigation .primary-menu-container > ul > li.menu-item > a （0,4,1）
 * を出力するため、同等の詳細度で上書きする。 */
.main-navigation .primary-menu-container > ul > li.menu-item > a {
	color: var(--global-palette3);
	font-weight: 700;
	font-size: 15px;
}
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.menu-item > a:focus-visible,
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a {
	color: var(--global-palette2);
}

/* WHY: 電話ブロックとボタンが密着しないよう最小限の間隔。 */
.site-header-item.site-header-item-html + .site-header-item,
.header-html { margin-inline: 8px; }

/* WHY: 1280px 未満で「表示名＋ナビ 4 項目＋電話＋CTA」は 1 行に入らない。
 *      Kadence は 1024px 以下で mobile builder に切り替わるので、その手前の
 *      1025〜1279px だけ、電話ブロックの受付時間を隠して幅を稼ぐ。 */
@media (min-width: 1025px) and (max-width: 1279px) {
	.header-html .ds-hdr-tel__hours { display: none; }
	.header-navigation .menu > li > a { padding-inline: 8px; }
}

/* WHY: モバイル popup 内。電話とボタンをナビの下にまとめ、押しやすい面にする。 */
.mobile-html .ds-hdr-tel {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	margin: 20px 0 8px;
	text-decoration: none;
	color: var(--global-palette3);
}
.mobile-html .ds-hdr-tel__num  { font-size: 22px; font-weight: 700; }
.mobile-html .ds-hdr-tel__hours{ font-size: 13px; color: var(--global-palette5); }
.mobile-header-button-wrap .mobile-header-button {
	display: block;
	text-align: center;
	background: var(--global-palette1);
	border-color: var(--global-palette1);
	color: var(--global-palette9);
	font-size: 19px;
	font-weight: 700;
	padding: 14px 20px;
	border-radius: 6px;
}

/* WHY: sticky ヘッダー導入に伴い、ナビのアンカー着地点がヘッダーの下に隠れないよう
 *      余白を取る。80px はヘッダー高（Kadence 既定）＋余裕。front.css 側の 100px は
 *      追従ヘッダー実装前の暫定値だったため、こちらの値で全ページ統一する。 */
#menu, #reasons, #works, #shop, #blog, #contact { scroll-margin-top: 96px; }

/* WHY: モバイル drawer は Kadence 既定で暗地。カレント項目だけオレンジ・電話が黒で沈む・
 *      下線付き・ボタン左寄せ、と要素ごとに見え方が違ったため、白基調で統一する。
 *      「明るく清潔感」（要件 §3-3）は drawer 内でも維持する。 */
#mobile-drawer .drawer-inner {
	background: var(--global-palette9);
	color: var(--global-palette3);
}
#mobile-drawer .drawer-header .menu-toggle-close {
	color: var(--global-palette3);
}
#mobile-drawer .mobile-navigation ul li a {
	color: var(--global-palette3);
	font-weight: 700;
	font-size: 17px;
	border-bottom-color: var(--global-palette7);
}
#mobile-drawer .mobile-navigation ul li a:hover,
#mobile-drawer .mobile-navigation ul li a:focus-visible {
	color: var(--global-palette2);
}
#mobile-drawer .mobile-html.inner-link-style-normal a.ds-hdr-tel:not(.button) {
	text-decoration: none;
	color: var(--global-palette3);
}
#mobile-drawer .mobile-header-button-wrap {
	display: block;
	width: 100%;
	margin-top: 8px;
}
#mobile-drawer .mobile-header-button-wrap .mobile-header-button.button {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

/* ==========================================================================
   フッター（加盟店のフル表記・全ページ共通）
   ========================================================================== */
/*
 * WHY (2026-08-25): 「ダスキンフランチャイズチェーン加盟店　ダスキン羽衣町
 *      サービスマスター」はヘッダー（特に SP）に入らないためフッターへ全文を
 *      出す（出力元は inc/site-branding.php の kdc_footer_franchise_notice、
 *      kadence_bottom_footer フック）。控えめな注記として小さく中央寄せ。
 */
.kdc-footer-franchise-notice {
	margin: 8px 0 0;
	padding: 0 20px;
	font-size: var(--ds-font-xs);
	color: var(--ds-fg-soft);
	text-align: center;
}

/*
 * WHY (2026-08-23): 書体の適用。トークンの定義とフォールバックの意図は
 *      assets/css/tokens.css を参照。ここで当てるのは、style.css が
 *      kadence-global に依存して**全ページ**で読み込まれるため
 *      （front.css はトップ限定なので書体のような全体設定は置けない）。
 *
 * WHY: 見出しの側だけ !important を付けているのは、Kadence のタイポグラフィ設定が
 *      カスタマイザーの値を wp_head のインライン <style> で出力し、
 *      子テーマの style.css より後に来て打ち消してしまうため。body 側は
 *      インライン出力が無く後勝ちで通るので付けない。
 *
 * WHY: ボタンを見出し側の書体にしているのは、CTA が短い太字の文字列で、
 *      丸ゴシックの方が字面が大きく視認しやすいため。
 */
body,
button,
input,
select,
textarea {
	font-family: var(--ds-font-family-base);
}

h1, h2, h3, h4, h5, h6,
.ds-heading,
.ds-btn,
.site-title {
	font-family: var(--ds-font-family-heading) !important;
}

/*
 * WHY (2026-09-25): 案件担当者の指示「ヘッダーの高さを狭める」（SP）。Kadence の Customizer 値
 *      （DB・min-height 80px）はローカルとデモで DB が別物のため触らず、テーマ移行だけで反映できる
 *      子テーマ CSS で上書きする。56px はロゴ（.site-branding 実測 37px）＋上下約 10px。
 *      全ページ共通のため front.css ではなく style.css に置く。
 */
@media (max-width: 767px) {
	#mobile-header .site-main-header-inner-wrap {
		min-height: 56px;
	}

	/*
	 * WHY (2026-09-27): SP ヘッダーへ追加したカート（ハンバーガーの左）が
	 *      44×44px のタップ領域を保ったまま高さ 56px に収まるよう、余白は
	 *      左右のみに絞る（上下 margin は追加しない）。ハンバーガーとの間に
	 *      最小限の間隔を空け、2つのタップ領域が接触しないようにする。
	 */
	.header-mobile-cart-wrap {
		margin-inline-end: 4px;
	}
}

/* WHY(2026-09-27): オンラインショップ一覧（カテゴリ一覧を含む）とカートの見出し帯が
 *      Kadence 既定のグレー単色でサイトの雰囲気から浮くとオーナー指摘。明るいキッチンの
 *      背景写真（Codex imagegen 生成、中央を空けた構図）に差し替える。
 * WHY(2026-09-28): 注文手続き（チェックアウト）にも同じ着せ替えを追加し、画面ごとに
 *      別カットの背景（shop/cart/checkout）へ差し替えた。旧 page-hero-kitchen-1536 は
 *      参照が無くなったが、ロールバック用に削除はしていない。
 *      特商法等の他ページは引き続き対象にしない。
 * WHY(2026-10-01): 注文完了（order-received）は checkout と同じ body class
 *      `woocommerce-checkout` を持つため、下のセレクタで注文手続きと同じ背景・見出し色が
 *      当たる（グレー単色で寂しいとの指摘を受けて意図的に含める）。英字小見出し・
 *      配送エリアバッジ（inc/woocommerce.php）は注文完了には出さない。 */
.product-archive-hero-section .entry-hero-container-inner,
body.woocommerce-cart .page-hero-section .entry-hero-container-inner,
body.woocommerce-checkout .page-hero-section .entry-hero-container-inner {
	background-color: #fbf6ee;
	background-position: center;
	background-size: cover;
}

.product-archive-hero-section .entry-hero-container-inner {
	background-image: url("assets/img/page-hero-shop-1536.jpg");
	background-image: image-set(url("assets/img/page-hero-shop-1536.webp") type("image/webp"), url("assets/img/page-hero-shop-1536.jpg") type("image/jpeg"));
}

body.woocommerce-cart .page-hero-section .entry-hero-container-inner {
	background-image: url("assets/img/page-hero-cart-1536.jpg");
	background-image: image-set(url("assets/img/page-hero-cart-1536.webp") type("image/webp"), url("assets/img/page-hero-cart-1536.jpg") type("image/jpeg"));
}

body.woocommerce-checkout .page-hero-section .entry-hero-container-inner {
	background-image: url("assets/img/page-hero-checkout-1536.jpg");
	background-image: image-set(url("assets/img/page-hero-checkout-1536.webp") type("image/webp"), url("assets/img/page-hero-checkout-1536.jpg") type("image/jpeg"));
}

/* WHY(2026-09-28): クライアント参考デザインに合わせ、見出し帯の中身を
 *      「日本語見出し（オレンジ→濃茶のグラデーション太字。既存の H1 をそのまま
 *      流用し色と太さだけ変える）→ 英字小見出し（字間広め・濃茶）→ 弧状ライン
 *      （オレンジ）→ 配送エリアバッジ」の4段構成にする（HTML は
 *      inc/woocommerce.php kdc_render_hero_area_meta()）。
 *      H1 の色・太さは、ページ上部の見出しルールと同じ理由（Kadence の
 *      カスタマイザー値が wp_head のインライン <style> で本ファイルより後に
 *      出力され、同じ詳細度なら後勝ちで打ち消されるため）で !important が要る。
 *      グラデーション文字は background-clip:text 未対応ブラウザ向けに、まず
 *      単色のフォールバック色を当ててから @supports で上書きする。
 *      弧状ラインは実要素を持たず、大きな円の下端だけを overflow:hidden で
 *      覗かせる CSS トリック（画像・SVG を増やさない）。 */
.product-archive-hero-section .page-title,
body.woocommerce-cart .page-hero-section .entry-title,
body.woocommerce-checkout .page-hero-section .entry-title {
	color: #b34400 !important; /* フォールバック: グラデーション未対応ブラウザ向けの単色 */
	font-weight: 700 !important;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.product-archive-hero-section .page-title,
	body.woocommerce-cart .page-hero-section .entry-title,
	body.woocommerce-checkout .page-hero-section .entry-title {
		background: linear-gradient(135deg, #fc5210 0%, #6b3410 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent !important;
	}
}

.ds-hero-subtitle {
	margin: 8px 0 0;
	color: #6b3410;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.22em;
}

.ds-hero-arc {
	display: block;
	width: 88px;
	height: 10px;
	margin: 14px auto 0;
	overflow: hidden;
}

.ds-hero-arc::before {
	content: "";
	display: block;
	width: 88px;
	height: 88px;
	margin-top: -78px;
	border: 3px solid var(--global-palette1);
	border-radius: 50%;
}

.ds-hero-area-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: center;
	/* WHY(2026-09-28 親確認分の修正): Kadence 本体 content.min.css の
	 *      `.entry-hero-container-inner .entry-header > div{width:100%}`
	 *      （詳細度 0,3,1）が、このバッジ（`<header>` 直下の `<div>`）にも
	 *      当たってしまい、width:fit-content（詳細度 0,1,0）が負けて全幅に
	 *      伸びていた。align-self:center だけでは幅が 100% のままなので
	 *      見た目上の中央寄せ効果が出ない。width・max-width に !important
	 *      を付けて明示的に上書きする。 */
	width: fit-content !important;
	max-width: 100% !important;
	margin: 16px auto 0;
	padding: 8px 16px;
	background-color: #fff;
	border: 1.5px solid var(--global-palette1);
	border-radius: 999px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--global-palette4);
}

.ds-hero-area-badge__icon {
	display: block;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--global-palette1);
}

.ds-hero-area-badge__text strong {
	color: var(--global-palette2);
	font-weight: 700;
}

@media (max-width: 767px) {
	.ds-hero-subtitle {
		margin-top: 4px;
		font-size: 10px;
		letter-spacing: 0.16em;
	}

	.ds-hero-arc {
		width: 64px;
		height: 8px;
		margin-top: 8px;
	}

	.ds-hero-arc::before {
		width: 64px;
		height: 64px;
		margin-top: -56px;
		border-width: 2px;
	}

	.ds-hero-area-badge {
		margin-top: 10px;
		padding: 6px 12px;
		font-size: 11px;
	}

	.ds-hero-area-badge__icon {
		width: 14px;
		height: 14px;
	}
}