/*
 * 宙豆ラボ サイトデザイン（soramame-design.php から読み込む）
 * 基調色は Coffee Hazel 本体・HazelApp と同じスカイブルーとオレンジ。
 * body に .sm-design が付いているときだけ効く。
 */

:root {
	--sm-sky: #00a9e8;          /* スカイブルー（Hazel の輪の色） */
	--sm-sky-dark: #0086bb;     /* ボタン・枠 */
	--sm-sky-deep: #006d99;     /* ボタンのホバー */
	--sm-link: #0077a8;         /* 本文中のリンク（白地で読める濃さ） */
	--sm-sky-soft: #e6f6fd;     /* 淡い地 */
	--sm-bg: #f7fbfd;
	--sm-border: #dbe6ec;
	--sm-blue: #0d85c8;         /* 社名ロゴの青。見出し帯とフッターの地 */
	--sm-blue-deep: #0a6ea8;
	--sm-orange: #ee621c;       /* オレンジ（変化率グラフと同色）。購入・主な行き先 */
	--sm-orange-dark: #c94d10;
	--sm-orange-soft: #fdeee6;
	--sm-ink: #12313f;          /* 見出し */
	--sm-text: #2c3b43;         /* 本文 */
	--sm-muted: #6b7f89;
	--sm-radius: 10px;
	--sm-font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Zakra の配色をこちらに寄せる（テーマ側の部品はこの変数を見ている） */
body.sm-design {
	--zakra-color-1: var(--sm-sky-dark);
	--zakra-color-2: var(--sm-sky-deep);
	--zakra-color-4: var(--sm-bg);
	--zakra-color-7: var(--sm-text);
	--zakra-color-9: var(--sm-border);
	font-family: var(--sm-font);
	color: var(--sm-text);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}
.sm-design #page { background: #fff; }
.sm-design .zak-content { padding-bottom: 72px; }
.sm-design h1, .sm-design h2, .sm-design h3, .sm-design h4, .sm-design h5, .sm-design h6 {
	font-family: var(--sm-font);
	color: var(--sm-ink);
	font-weight: 700;
	letter-spacing: .02em;
}
.sm-design .entry-content p,
.sm-design .entry-content li { line-height: 1.95; }
.sm-design a { color: var(--sm-link); }
.sm-design a:hover { color: var(--sm-orange-dark); }

/* ---------- ヘッダー ---------- */
.sm-design #zak-masthead {
	background: #fff;
	border-top: 4px solid var(--sm-sky);
	border-bottom: 1px solid var(--sm-border);
	box-shadow: 0 2px 10px rgba(13, 133, 200, .06);
}
/* 上端の細い帯の右端だけオレンジにする（Hazel の青とオレンジ） */
.sm-design #zak-masthead::before {
	content: "";
	position: absolute;
	top: -4px;
	right: 0;
	width: 22%;
	height: 4px;
	background: var(--sm-orange);
}
.sm-design #zak-masthead { position: relative; }
.sm-design .zak-header-main-row .zak-main-row { min-height: 92px; align-items: center; }
.sm-design .site-branding .custom-logo-link img.sm-logo {
	width: auto !important;
	height: 64px;
	max-width: none;
	display: block;
}
.sm-design .site-branding .site-info-wrap { display: none; }

.sm-design .zak-primary-nav ul li > a {
	color: var(--sm-ink);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .03em;
	position: relative;
}
.sm-design .zak-primary-nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: -6px;
	height: 2px;
	background: var(--sm-orange);
	transition: left .18s ease, right .18s ease;
}
.sm-design .zak-primary-nav > ul > li > a:hover { color: var(--sm-sky-dark); }
.sm-design .zak-primary-nav > ul > li > a:hover::after { left: 0; right: 0; }
.sm-design .zak-primary-nav > ul > li.current-menu-item > a,
.sm-design .zak-primary-nav > ul > li.current_page_item > a,
.sm-design .zak-primary-nav > ul > li.current-menu-ancestor > a { color: var(--sm-sky-dark); }
.sm-design .zak-primary-nav > ul > li.current-menu-item > a::after,
.sm-design .zak-primary-nav > ul > li.current_page_item > a::after { left: 0; right: 0; background: var(--sm-sky); }

/* 言語切替: いまの言語は出さず、もう一方だけを小さな枠で出す（メニューが2行に折れるのを防ぐ） */
.sm-design .zak-primary-nav li.lang-item.current-lang { display: none; }
.sm-design .zak-primary-nav > ul > li.lang-item > a {
	border: 1px solid var(--sm-border);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sm-sky-dark);
	opacity: 1;
}
.sm-design .zak-primary-nav > ul > li.lang-item > a::after { display: none; }
.sm-design .zak-primary-nav > ul > li.lang-item > a:hover { background: var(--sm-sky-soft); border-color: var(--sm-sky); }

.sm-design .zak-header-search__toggle svg,
.sm-design .zak-menu-toggle svg { fill: var(--sm-sky-dark); }

/* スマートフォンのメニュー（Zakra 既定は濃いグレー地。青い文字が読めないので明るい地にする） */
.sm-design #zak-mobile-nav {
	background: #fff;
	color: var(--sm-ink);
	border-top: 4px solid var(--sm-sky);
	box-shadow: 0 12px 30px rgba(13, 133, 200, .18);
}
.sm-design #zak-mobile-nav .zak-mobile-menu li { border-color: var(--sm-border); }
.sm-design #zak-mobile-nav .zak-mobile-menu li > a {
	color: var(--sm-ink);
	font-weight: 600;
	text-decoration: none;
}
.sm-design #zak-mobile-nav .zak-mobile-menu li.current-menu-item > a,
.sm-design #zak-mobile-nav .zak-mobile-menu li.current_page_item > a {
	color: var(--sm-sky-dark);
	box-shadow: inset 4px 0 0 var(--sm-orange);
	background: var(--sm-sky-soft);
}
.sm-design #zak-mobile-nav .zak-mobile-menu li.lang-item.current-lang { display: none; }
.sm-design #zak-mobile-nav .zak-mobile-menu li.lang-item > a { color: var(--sm-sky-dark); }
.sm-design #zak-mobile-nav input[type="search"] { background: var(--sm-bg); color: var(--sm-ink); }
.sm-design #zak-mobile-nav svg { fill: var(--sm-ink); }

/* ---------- ページの見出し帯（各ページ上部のタイトル） ---------- */
.sm-design .zak-page-header {
	background: linear-gradient(180deg, #fff 0%, var(--sm-sky-soft) 100%);
	border-bottom: 2px solid var(--sm-sky);
	padding: 34px 0 28px;
}
.sm-design .zak-page-header .zak-page-title,
.sm-design .zak-page-header h1 {
	color: var(--sm-ink);
	font-size: clamp(22px, 17px + 1vw, 30px);
	font-weight: 700;
	position: relative;
	padding-left: 18px;
}
.sm-design .zak-page-header .zak-page-title::before,
.sm-design .zak-page-header h1::before {
	content: "";
	position: absolute;
	left: 0;
	top: .2em;
	bottom: .2em;
	width: 5px;
	border-radius: 3px;
	background: linear-gradient(180deg, var(--sm-sky) 0 70%, var(--sm-orange) 70% 100%);
}
.sm-design .zak-page-header .breadcrumbs,
.sm-design .zak-page-header .zak-breadcrumbs,
.sm-design .zak-page-header .breadcrumbs a,
.sm-design .zak-page-header .zak-breadcrumbs a { color: var(--sm-muted); font-size: 13px; }

/* 製品ページはタイトルの上に COFFEE HAZEL のロゴ */
.sm-design.page-id-35 .zak-page-header .zak-page-title::after,
.sm-design.page-id-144 .zak-page-header .zak-page-title::after { content: none; }
.sm-design.page-id-35 .zak-page-header .zak-container,
.sm-design.page-id-144 .zak-page-header .zak-container { position: relative; }
.sm-design.page-id-35 .zak-page-header .zak-page-title,
.sm-design.page-id-144 .zak-page-header .zak-page-title {
	padding-left: 0;
	padding-top: 92px;
	background: url("hazel-logo.svg") no-repeat left top / auto 72px;
}
.sm-design.page-id-35 .zak-page-header .zak-page-title::before,
.sm-design.page-id-144 .zak-page-header .zak-page-title::before { display: none; }

/* トップページは見出し帯の代わりにヒーローを出す */
.sm-design.home .zak-page-header { display: none; }
.sm-design.home .zak-content { padding-top: 24px; }
.sm-design.home .entry-content > h2:first-child { margin-top: 8px; }

/* ---------- ヒーロー（トップ） ---------- */
.sm-hero {
	background:
		radial-gradient(1200px 500px at 85% -20%, rgba(0, 169, 232, .55), transparent 60%),
		radial-gradient(700px 400px at -10% 120%, rgba(0, 169, 232, .35), transparent 60%),
		var(--sm-blue);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.sm-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--sm-sky) 0 78%, var(--sm-orange) 78% 100%);
}
.sm-hero__inner {
	max-width: 1160px;
	margin: 0 auto;
	padding: clamp(48px, 7vw, 96px) 24px clamp(52px, 7vw, 100px);
	display: grid;
	grid-template-columns: minmax(180px, 300px) 1fr;
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
}
.sm-hero__mark { width: 100%; height: auto; filter: drop-shadow(0 8px 24px rgba(0, 40, 70, .25)); }
.sm-hero__eyebrow {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .28em;
	color: rgba(255, 255, 255, .85);
}
.sm-design .sm-hero__title {
	margin: 0 0 18px;
	color: #fff;
	font-size: clamp(32px, 18px + 3vw, 54px);
	line-height: 1.25;
	letter-spacing: .06em;
	word-break: keep-all;      /* 日本語を語の途中で折らない（「科学す／る。」を防ぐ） */
	overflow-wrap: anywhere;
}
.sm-hero__lead {
	margin: 0 0 30px;
	font-size: clamp(16px, 14px + .35vw, 19px);
	line-height: 1.9;
	color: rgba(255, 255, 255, .95);
	max-width: 36em;
}
.sm-hero__buttons { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- ボタン ---------- */
.sm-btn,
.sm-design .wp-block-button__link,
.sm-design .wp-element-button {
	display: inline-block;
	border-radius: 999px;
	padding: .78em 1.7em;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .04em;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.sm-design .wp-block-button__link,
.sm-design .wp-element-button {
	background-color: var(--sm-sky-dark);
	color: #fff;
	border: 2px solid var(--sm-sky-dark);
}
.sm-design .wp-block-button__link:hover,
.sm-design .wp-element-button:hover {
	background-color: var(--sm-sky-deep);
	border-color: var(--sm-sky-deep);
	color: #fff;
	transform: translateY(-1px);
}
.sm-design .is-style-outline > .wp-block-button__link {
	background: #fff;
	color: var(--sm-sky-dark);
}
.sm-design .is-style-outline > .wp-block-button__link:hover { background: var(--sm-sky-soft); color: var(--sm-sky-deep); }

.sm-btn--primary { background: var(--sm-orange); color: #fff !important; border: 2px solid var(--sm-orange); }
.sm-btn--primary:hover { background: var(--sm-orange-dark); border-color: var(--sm-orange-dark); transform: translateY(-1px); }
.sm-btn--ghost { background: transparent; color: #fff !important; border: 2px solid rgba(255, 255, 255, .85); }
.sm-btn--ghost:hover { background: rgba(255, 255, 255, .14); border-color: #fff; transform: translateY(-1px); }

/* 購入まわり（カートに入れる・レジに進む・注文する）はオレンジ */
.sm-design .single_add_to_cart_button,
.sm-design .add_to_cart_button,
.sm-design ul.products a.button,
.sm-design .checkout-button,
.sm-design .wc-block-cart__submit-button,
.sm-design .wc-block-components-checkout-place-order-button,
.sm-design .wc-block-components-button.contained,
.sm-design .woocommerce a.button.alt,
.sm-design .woocommerce button.button.alt {
	background-color: var(--sm-orange) !important;
	border-color: var(--sm-orange) !important;
	color: #fff !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
}
.sm-design .single_add_to_cart_button:hover,
.sm-design .add_to_cart_button:hover,
.sm-design ul.products a.button:hover,
.sm-design .checkout-button:hover,
.sm-design .wc-block-cart__submit-button:hover,
.sm-design .wc-block-components-checkout-place-order-button:hover,
.sm-design .wc-block-components-button.contained:hover,
.sm-design .woocommerce a.button.alt:hover,
.sm-design .woocommerce button.button.alt:hover {
	background-color: var(--sm-orange-dark) !important;
	border-color: var(--sm-orange-dark) !important;
}
.sm-design .woocommerce-Price-amount { color: var(--sm-ink); }

/* ---------- 本文 ---------- */
.sm-design .entry-content h2 {
	position: relative;
	padding: 0 0 12px;
	margin-top: 1.6em;
	font-size: clamp(22px, 18px + .8vw, 29px);
	border-bottom: 1px solid var(--sm-border);
}
.sm-design .entry-content h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 64px;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--sm-sky) 0 75%, var(--sm-orange) 75% 100%);
}
.sm-design .entry-content h2.has-text-align-center::after { left: calc(50% - 32px); }
.sm-design .entry-content h3 {
	color: var(--sm-sky-dark);
	font-size: clamp(18px, 16px + .4vw, 22px);
	padding-left: 12px;
	border-left: 4px solid var(--sm-sky);
	line-height: 1.5;
}
.sm-design .entry-content strong { color: var(--sm-ink); }
.sm-design .entry-content a:not(.wp-block-button__link):not(.sm-btn) {
	text-decoration: underline;
	text-decoration-color: rgba(0, 119, 168, .35);
	text-underline-offset: 3px;
}
.sm-design .entry-content a:not(.wp-block-button__link):not(.sm-btn):hover { text-decoration-color: currentColor; }
.sm-design .entry-content .wp-block-image img,
.sm-design .entry-content .wp-block-video video { border-radius: var(--sm-radius); }
.sm-design .entry-content figcaption,
.sm-design .entry-content .wp-element-caption { color: var(--sm-muted); font-size: 13px; }

/* 表 */
.sm-design .entry-content table { border-collapse: collapse; width: 100%; }
.sm-design .entry-content table th,
.sm-design .entry-content table td { border: 1px solid var(--sm-border); padding: 10px 14px; }
.sm-design .entry-content table th { background: var(--sm-sky-soft); color: var(--sm-ink); font-weight: 700; text-align: left; }
.sm-design .entry-content .wp-block-table thead { border-bottom: 2px solid var(--sm-sky); }

/* 引用・区切り */
.sm-design .entry-content blockquote {
	border-left: 4px solid var(--sm-orange);
	background: var(--sm-orange-soft);
	border-radius: 0 var(--sm-radius) var(--sm-radius) 0;
	padding: 14px 20px;
}
.sm-design .entry-content hr { border: 0; border-top: 1px solid var(--sm-border); }

/* 最新のお知らせ（トップ）・投稿一覧 */
.sm-design .wp-block-latest-posts.is-grid li,
.sm-design .wp-block-latest-posts__list li {
	border: 1px solid var(--sm-border);
	border-radius: var(--sm-radius);
	padding: 16px 20px;
	margin: 0 0 12px;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.sm-design .wp-block-latest-posts__list li:hover { border-color: var(--sm-sky); box-shadow: 0 4px 16px rgba(13, 133, 200, .08); }
.sm-design .wp-block-latest-posts__post-title { font-weight: 700; color: var(--sm-ink) !important; text-decoration: none !important; }
.sm-design .wp-block-latest-posts__post-title:hover { color: var(--sm-sky-dark) !important; }
.sm-design .wp-block-latest-posts__post-date { color: var(--sm-orange-dark); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.sm-design .wp-block-latest-posts__post-excerpt { color: var(--sm-text); font-size: 14px; margin-top: 4px; }

.sm-design .zak-post .entry-title a { color: var(--sm-ink); }
.sm-design .zak-post .entry-title a:hover { color: var(--sm-sky-dark); }
.sm-design .zak-entry-meta, .sm-design .zak-entry-meta a { color: var(--sm-muted); }

/* フォーム */
.sm-design input[type="text"], .sm-design input[type="email"], .sm-design input[type="tel"],
.sm-design input[type="search"], .sm-design input[type="number"], .sm-design input[type="password"],
.sm-design textarea, .sm-design select {
	border: 1px solid #c6d6de;
	border-radius: 6px;
}
.sm-design input:focus, .sm-design textarea:focus, .sm-design select:focus {
	outline: none;
	border-color: var(--sm-sky);
	box-shadow: 0 0 0 3px var(--sm-sky-soft);
}

/* ---------- フッター ---------- */
.sm-design #zak-footer { display: none; } /* 「Powered by Zakra」の行。著作権表示は下のブランド帯に出す */
.sm-footer {
	background:
		radial-gradient(900px 360px at 100% 0%, rgba(0, 169, 232, .45), transparent 60%),
		var(--sm-blue);
	color: #fff;
	position: relative;
}
.sm-footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--sm-sky) 0 78%, var(--sm-orange) 78% 100%);
}
.sm-footer__inner {
	max-width: 1160px;
	margin: 0 auto;
	padding: 48px 24px 20px;
	text-align: center;
}
.sm-footer__brand img { width: 240px; max-width: 70%; height: auto; }
.sm-footer__tagline { margin: 14px 0 0; font-size: 15px; letter-spacing: .18em; color: rgba(255, 255, 255, .92); }
.sm-footer__copy { margin: 22px 0 0; font-size: 12px; color: rgba(255, 255, 255, .75); letter-spacing: .04em; }

/* フッターの法定表示（soramame-footer-legal.php）を同じ帯に載せる */
.sm-design .soramame-legal-nav { background: var(--sm-blue-deep); padding: 14px 20px 18px; }
.sm-design .soramame-legal-nav__list a { color: rgba(255, 255, 255, .9); }
.sm-design .soramame-legal-nav__list a:hover { color: #fff; }

.sm-design .zak-scroll-to-top { background: var(--sm-orange); border-radius: 50%; }
.sm-design .zak-scroll-to-top:hover { background: var(--sm-orange-dark); }

/* ---------- 狭い画面 ---------- */
@media (max-width: 1100px) {
	.sm-design .zak-primary-nav ul li > a { font-size: 14px; }
	.sm-design .site-branding .custom-logo-link img.sm-logo { height: 54px; }
}
/* 960px 以下はメニューが2行に折れるので、スマートフォンと同じ折りたたみメニューにする
   （Zakra は 767px 以下でしか折りたたまない。768px ちょうどは soramame-nav-fix.php が面倒を見ている） */
@media (min-width: 769px) and (max-width: 960px) {
	/* Zakra はデスクトップ用とスマートフォン用のヘッダーを両方出力しているので、表示を入れ替える */
	.sm-design #zak-masthead .zak-desktop-row { display: none; }
	.sm-design #zak-masthead .zak-mobile-row { display: block; }
	.sm-design #zak-masthead .zak-mobile-row .zak-toggle-menu { display: block; }
}
@media (max-width: 768px) {
	.sm-design .site-branding .custom-logo-link img.sm-logo { height: 44px; }
	.sm-design .zak-header-main-row .zak-main-row { min-height: 64px; }
	.sm-hero__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
	.sm-hero__mark { width: 150px; }
	.sm-design .sm-hero__title { font-size: clamp(26px, 7.4vw, 34px); letter-spacing: .02em; }
	.sm-hero__buttons { justify-content: center; }
	.sm-hero__lead { margin-left: auto; margin-right: auto; }
	.sm-design.page-id-35 .zak-page-header .zak-page-title,
	.sm-design.page-id-144 .zak-page-header .zak-page-title { padding-top: 70px; background-size: auto 54px; }
}