@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ（株式会社NATICA用カスタマイズ）
    Version: 1.1.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ==========================================================
   NATICA 共通設定
   - このファイルのデザインは「nt-」で始まるクラスにだけ効きます。
     SWELLの既存のページや記事には影響しません。
   - 色を変えたいときは、下の :root の数値だけを変更してください。
   ========================================================== */
:root {
	--nt-green: #2f5d45;       /* メインのアクセント（深い緑） */
	--nt-green-dark: #24483a;
	--nt-ink: #2b2b2b;         /* 文字 */
	--nt-ink-soft: #5b5b57;    /* 補足の文字 */
	--nt-kinari: #f4f0e8;      /* 生成り（セクションの背景） */
	--nt-white: #ffffff;
	--nt-gold: #b08d57;        /* 補助（細い線など） */
	--nt-line: rgba(43, 43, 43, 0.14);
	--nt-serif: "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
	--nt-en: "Cormorant Garamond", "Times New Roman", serif;
	--nt-script: "Allura", "Cormorant Garamond", cursive;   /* 手書き風の筆記体 */
	--nt-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
	--nt-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--nt-wrap: 1160px;
}

/* ----- NATICAのページ全体（SWELLのタイトル・余白を消して全幅で使う） ----- */
.nt-page { overflow-x: clip; }
.nt-page .c-pageTitle,
.nt-page .l-topTitleArea,
.nt-page #breadcrumb,
.nt-page .p-breadcrumb { display: none; }
.nt-page #content.l-content { padding-top: 0; padding-bottom: 0; }
.nt-page .post_content { margin-top: 0; margin-bottom: 0; }
.nt-page .post_content > .nt-sec { margin: 0; }

/* ----- セクションの共通 ----- */
.nt-sec {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw) !important;
	padding: clamp(80px, 12vw, 160px) 0;
	color: var(--nt-ink);
	font-family: var(--nt-sans);
	line-height: 2;
	letter-spacing: 0.04em;
}
.nt-sec--kinari { background: var(--nt-kinari); }
.nt-sec--green { background: var(--nt-green); color: var(--nt-white); }
.nt-wrap {
	width: min(var(--nt-wrap), calc(100% - 48px));
	margin: 0 auto;
}
.nt-wrap--narrow { width: min(760px, calc(100% - 48px)); }
.nt-sec p { margin: 0 0 1.4em; }
.nt-sec p:last-child { margin-bottom: 0; }
.nt-sec img { max-width: 100%; height: auto; display: block; }
.nt-sec a { text-decoration: none; }

/* SWELLの見出しデザインを、NATICAのセクション内だけ解除する */
.nt-sec h1, .nt-sec h2, .nt-sec h3, .nt-sec h4 {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0;
	color: inherit !important;
	font-family: var(--nt-serif);
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.6;
}
.nt-sec h1::before, .nt-sec h1::after,
.nt-sec h2::before, .nt-sec h2::after,
.nt-sec h3::before, .nt-sec h3::after,
.nt-sec h4::before, .nt-sec h4::after { content: none !important; display: none !important; }

/* ----- セクション見出し（後ろに大きな英字を重ねる） ----- */
.nt-head { position: relative; margin-bottom: clamp(40px, 6vw, 72px); }
/* 見出しの上に、金茶色の手書き風の英字を少し傾けて重ねる */
.nt-head__en {
	display: block;
	font-family: var(--nt-script);
	font-size: clamp(40px, 5vw, 60px);
	font-weight: 400;
	line-height: 1;
	color: var(--nt-gold);
	position: absolute;
	top: -0.95em;
	left: -0.05em;
	transform: rotate(-6deg);
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}
.nt-head__label {   /* 英字は手書き風の見出しで見せるため、小さな英字ラベルは場所だけ確保して隠す */
	display: block;
	height: 14px;
	visibility: hidden;
	font-size: 15px;
}
.nt-head__ja { position: relative; font-size: clamp(24px, 3vw, 32px) !important; }
.nt-head--center { text-align: center; }
.nt-head--center .nt-head__en { left: 50%; transform: translateX(-50%) rotate(-6deg); }
.nt-sec--green .nt-head__en { color: #e8d6b0; }

.nt-lead { font-size: 15px; color: var(--nt-ink-soft); max-width: 640px; }
.nt-head--center + .nt-lead { margin: -24px auto 56px; text-align: center; }

/* ----- ボタン（細い線と矢印） ----- */
.nt-btns { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; margin-top: 40px; }
.nt-btns--center { justify-content: center; }
.nt-btn {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	font-family: var(--nt-sans);
	font-size: 15px;
	letter-spacing: 0.08em;
	color: var(--nt-ink) !important;
	padding: 10px 0;
}
.nt-btn__arrow {
	position: relative;
	width: 48px;
	height: 1px;
	background: currentColor;
	transition: width 0.4s var(--nt-ease);
}
.nt-btn__arrow::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 10px;
	height: 1px;
	background: currentColor;
	transform: rotate(30deg);
	transform-origin: 100% 50%;
}
.nt-btn:hover .nt-btn__arrow { width: 72px; }
.nt-btn--solid {
	background: var(--nt-green);
	color: var(--nt-white) !important;
	padding: 16px 32px;
	transition: background 0.3s;
}
.nt-btn--solid:hover { background: var(--nt-green-dark); }
.nt-btn--white { color: var(--nt-white) !important; }
.nt-btn--outline-white {
	color: var(--nt-white) !important;
	border: 1px solid rgba(255, 255, 255, 0.6);
	padding: 16px 32px;
	transition: background 0.3s;
}
.nt-btn--outline-white:hover { background: rgba(255, 255, 255, 0.1); }
.nt-line-btn img { height: 36px; width: auto; display: inline-block; }

/* ==========================================================
   01 ファーストビュー
   ========================================================== */
.nt-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw) !important;
	min-height: 92vh;
	min-height: 92svh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--nt-white);
	overflow: hidden;
	background: #2b2b28;
}
.nt-hero::after {   /* 背景の写真（暗い画面から、ゆっくり近づくように浮かび上がる） */
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--nt-bg) center / cover no-repeat;
}
.nt-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.55) 100%);
	z-index: 1;
}
.nt-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.nt-hero__inner { position: relative; z-index: 2; padding: 0 24px; }
.nt-hero__inner { display: flex; flex-direction: column; align-items: center; }
.nt-hero__copy {   /* キャッチコピーは縦書き */
	writing-mode: vertical-rl;
	text-orientation: upright;
	font-family: var(--nt-serif);
	font-size: clamp(30px, 3.4vw, 44px) !important;
	font-weight: 400 !important;
	letter-spacing: 0.32em !important;
	line-height: 2.1 !important;
	margin: 0 0 36px !important;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}
.nt-hero__en {
	font-family: var(--nt-en);
	font-style: italic;
	font-size: clamp(15px, 1.8vw, 20px);
	letter-spacing: 0.12em;
	opacity: 0.9;
	margin: 0;
}
.nt-hero__scroll {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	font-family: var(--nt-en);
	font-size: 13px;
	letter-spacing: 0.3em;
	color: var(--nt-white);
	padding-bottom: 56px;
}
.nt-hero__scroll::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 1px;
	height: 48px;
	background: rgba(255, 255, 255, 0.7);
	transform-origin: top;
	animation: ntScrollLine 2.4s var(--nt-ease) infinite;
}

/* ロゴ（白く表示し、左から波のように現れる）
   ※トップ画面では会社名をヘッダーとフッターに任せ、キャッチコピーを主役にするため非表示 */
.nt-hero .nt-logo { display: none; }
.nt-logo { position: relative; display: inline-block; padding-bottom: 18px; }
.nt-logo img {
	width: min(520px, 78vw);
	height: auto;
	filter: brightness(0) invert(1);
}
.nt-logo::after {   /* 水平線（航海のイメージ） */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: rgba(255, 255, 255, 0.8);
	transform-origin: left;
	transform: scaleX(1);
}

/* ==========================================================
   アニメーション
   - JSが使えるときだけ動かす（nt-js）。使えないときは最初から表示。
   - 端末で「動きを減らす」設定の人には動かさない。
   ファーストビューの流れ（約5秒）：
     写真が暗い画面からゆっくり浮かぶ → キャッチコピーが1文字ずつ現れる → 英文 → Scroll
   ========================================================== */
.nt-js .nt-hero::after { opacity: 0; transform: scale(1.12); animation: ntBg 9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards; }
/* 1文字ずつに分ける前は隠しておく（分けられなかった場合も、3秒後には表示する） */
.nt-js .nt-hero__copy:not(.is-split) { opacity: 0; animation: ntFadeIn 1.5s ease 3s forwards; }
.nt-char {   /* キャッチコピーの1文字（natica.js が1文字ずつに分ける） */
	display: inline-block;
	opacity: 0;
	filter: blur(10px);
	transform: translateY(0.25em);
	animation: ntChar 1.8s var(--nt-ease) forwards;
	animation-delay: calc(1.4s + var(--i) * 0.11s);
}
.nt-js .nt-logo img { clip-path: inset(0 100% 0 0); animation: ntWipe 1.8s var(--nt-ease) 0.3s forwards; }
.nt-js .nt-logo::after { transform: scaleX(0); animation: ntLine 1.6s var(--nt-ease) 0.9s forwards; }
.nt-js .nt-hero__en,
.nt-js .nt-hero__scroll { opacity: 0; animation: ntFadeUp 2s var(--nt-ease) forwards; }
.nt-js .nt-hero__en { animation-delay: 3.9s; }
.nt-js .nt-hero__scroll { animation-delay: 4.8s; }

@keyframes ntBg {
	0% { opacity: 0; transform: scale(1.12); }
	25% { opacity: 1; }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes ntChar { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes ntWipe { to { clip-path: inset(0 0 0 0); } }
@keyframes ntLine { to { transform: scaleX(1); } }
@keyframes ntFadeUp {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}
.nt-js .nt-hero__scroll { animation-name: ntFadeIn; } /* 中央寄せのtransformを崩さないよう、透明度だけ変える */
@keyframes ntFadeIn { to { opacity: 1; } }
@keyframes ntScrollLine {
	0% { transform: scaleY(0); opacity: 1; }
	60% { transform: scaleY(1); opacity: 1; }
	100% { transform: scaleY(1); opacity: 0; }
}

/* スクロールで現れる（クラス nt-reveal を付けた要素） */
.nt-js .nt-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 1.1s var(--nt-ease), transform 1.1s var(--nt-ease);
}
/* 写真は下から幕が上がるように現れる（枠ではなく中の写真を切り抜く。枠を切り抜くと画面に入ったことを検知できないため） */
.nt-js .nt-reveal--img { opacity: 1; transform: none; overflow: hidden; transition: none; }
.nt-js .nt-reveal--img img {
	clip-path: inset(100% 0 0 0);
	transform: scale(1.08);
	transition: clip-path 1.3s var(--nt-ease), transform 1.8s var(--nt-ease);
}
.nt-js .nt-reveal.is-in { opacity: 1; transform: none; }
.nt-js .nt-reveal--img.is-in img { clip-path: inset(0 0 0 0); transform: scale(1); }
.nt-d1 { transition-delay: 0.12s !important; }
.nt-d2 { transition-delay: 0.24s !important; }
.nt-d3 { transition-delay: 0.36s !important; }

@media (prefers-reduced-motion: reduce) {
	.nt-js .nt-logo img,
	.nt-js .nt-logo::after,
	.nt-js .nt-hero::after,
	.nt-char,
	.nt-js .nt-hero__en,
	.nt-js .nt-hero__scroll { animation: none; opacity: 1; clip-path: none; transform: none; filter: none; }
	.nt-js .nt-hero__scroll { transform: translateX(-50%); }
	.nt-hero__scroll::after { animation: none; }
	.nt-js .nt-reveal,
	.nt-js .nt-reveal--img,
	.nt-js .nt-reveal--img img { opacity: 1; transform: none; clip-path: none; transition: none; }
}

/* ==========================================================
   02 理念 ／ 2カラム（写真＋文章）
   ========================================================== */
.nt-split {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(40px, 7vw, 96px);
	align-items: center;
}
.nt-split--reverse { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.nt-split--reverse .nt-split__img { order: 2; }
.nt-split__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.nt-split__img--wide img { aspect-ratio: 4 / 3; }
.nt-catch {
	font-family: var(--nt-serif);
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.8;
	margin: 0 0 32px !important;
}

/* ==========================================================
   03 3つの入口（個人・法人・生産者）
   ========================================================== */
.nt-doors {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.nt-door {
	display: block;
	background: var(--nt-white);
	padding: 40px 24px 32px;
	text-align: center;
	color: var(--nt-ink) !important;
	border: 1px solid var(--nt-line);
	transition: border-color 0.3s, transform 0.4s var(--nt-ease);
}
.nt-door:hover { border-color: var(--nt-green); transform: translateY(-4px); }
.nt-door__en { display: block; font-family: var(--nt-en); font-style: italic; font-size: 15px; color: var(--nt-green); letter-spacing: 0.1em; }
.nt-door__ja { display: block; font-family: var(--nt-serif); font-size: 20px; letter-spacing: 0.1em; margin: 6px 0 12px; }
.nt-door__txt { display: block; font-size: 14px; color: var(--nt-ink-soft); line-height: 1.8; margin-bottom: 16px; }
.nt-door .nt-btn__arrow { display: inline-block; vertical-align: middle; color: var(--nt-green); }

/* ==========================================================
   04 事業内容（カード。PCでは互い違いにずらす）
   ========================================================== */
.nt-biz {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 64px 40px;
}
.nt-biz__item:nth-child(3n + 2) { margin-top: 64px; }
.nt-biz__item:nth-child(3n + 3) { margin-top: 128px; }
.nt-biz__img { overflow: hidden; margin-bottom: 24px; background: var(--nt-kinari); }
.nt-biz__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.nt-biz__img--blank {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--nt-en);
	font-style: italic;
	font-size: 28px;
	color: var(--nt-green);
	opacity: 0.6;
}
.nt-biz__num {
	font-family: var(--nt-en);
	font-size: 15px;
	letter-spacing: 0.16em;
	color: var(--nt-green);
	display: flex;
	align-items: center;
	gap: 12px;
}
.nt-biz__num::after { content: ""; width: 32px; height: 1px; background: var(--nt-green); }
.nt-biz__title { font-size: 22px !important; margin: 8px 0 12px !important; }
.nt-biz__txt { font-size: 14px; color: var(--nt-ink-soft); line-height: 1.9; }
.nt-biz .nt-btns { margin-top: 16px; }

/* ==========================================================
   05 取り組み（ポイントの一覧）
   ========================================================== */
.nt-points { list-style: none !important; margin: 32px 0 0 !important; padding: 0 !important; }
.nt-points li {
	position: relative;
	padding: 20px 0 20px 0 !important;
	border-top: 1px solid var(--nt-line);
	list-style: none !important;
}
.nt-points li::before { content: none !important; }
.nt-points li:last-child { border-bottom: 1px solid var(--nt-line); }
.nt-points strong {
	display: block;
	font-family: var(--nt-serif);
	font-weight: 500;
	font-size: 17px;
	letter-spacing: 0.08em;
	color: var(--nt-green);
	margin-bottom: 4px;
}
.nt-points span { font-size: 14px; color: var(--nt-ink-soft); line-height: 1.9; display: block; }
.nt-sec--green .nt-points li { border-color: rgba(255, 255, 255, 0.25); }
.nt-sec--green .nt-points strong { color: var(--nt-white); }
.nt-sec--green .nt-points span { color: rgba(255, 255, 255, 0.85); }

/* ==========================================================
   06 運営ブランド FUKU HOKKAIDO
   ========================================================== */
.nt-brand {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(40px, 6vw, 80px);
	align-items: center;
}
.nt-brand__logo img { width: min(280px, 70%); margin: 0 auto; }
.nt-brand__name { font-family: var(--nt-en) !important; font-size: clamp(28px, 3.4vw, 40px) !important; letter-spacing: 0.12em !important; }
.nt-brand__sub { font-family: var(--nt-serif); color: var(--nt-green); letter-spacing: 0.1em; margin: 4px 0 20px !important; }
.nt-brand__photos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 56px;
}
.nt-brand__photos figure { margin: 0; }
.nt-brand__photos img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.nt-brand__photos figcaption { font-size: 13px; text-align: center; margin-top: 10px; color: var(--nt-ink-soft); letter-spacing: 0.08em; }

/* ==========================================================
   07 代表メッセージ
   ========================================================== */
.nt-message { text-align: center; }
.nt-message .nt-catch { font-size: clamp(22px, 3vw, 34px); }
.nt-message__body { text-align: left; }
.nt-sign {
	margin-top: 40px !important;
	text-align: right;
	font-family: var(--nt-serif);
	letter-spacing: 0.12em;
}
.nt-sign small { font-size: 13px; margin-right: 1em; color: var(--nt-ink-soft); }
.nt-origin {
	margin-top: 56px;
	padding: 32px;
	border: 1px solid var(--nt-gold);
	text-align: left;
	background: var(--nt-white);
}
.nt-origin__title { font-family: var(--nt-en); font-style: italic; color: var(--nt-gold); font-size: 18px; letter-spacing: 0.12em; margin-bottom: 8px !important; }

/* ==========================================================
   08 お知らせ（WordPressの「最新の投稿」ブロックを整える）
   ========================================================== */
.nt-news-list {
	list-style: none !important;
	width: 100vw;
	margin: 0 0 0 calc(50% - 50vw) !important;
	padding: 0 max(24px, calc((100vw - var(--nt-wrap)) / 2)) !important;
	background: var(--nt-kinari);
}
.nt-news-list li {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 32px;
	padding: 24px 8px !important;
	border-bottom: 1px solid var(--nt-line);
	list-style: none !important;
	margin: 0 !important;
}
.nt-news-list li::before { content: none !important; }
.nt-news-list li:first-child { border-top: 1px solid var(--nt-line); }
.nt-news-list a { color: var(--nt-ink) !important; text-decoration: none; order: 2; }
.nt-news-list a:hover { color: var(--nt-green) !important; }
.nt-news-list time { order: 1; font-family: var(--nt-en); letter-spacing: 0.1em; color: var(--nt-ink-soft); min-width: 110px; }
.nt-sec--news { padding-bottom: 32px; }
.nt-sec--news-end { padding-top: 0 !important; }

/* ==========================================================
   09 会社概要（表）
   ========================================================== */
.nt-table { margin: 0; border-top: 1px solid var(--nt-line); }
.nt-table__row {
	display: grid;
	grid-template-columns: minmax(96px, 28%) minmax(0, 1fr);
	gap: 8px 32px;
	padding: 24px 8px;
	border-bottom: 1px solid var(--nt-line);
}
.nt-table dt { font-family: var(--nt-serif); color: var(--nt-green); letter-spacing: 0.08em; font-weight: 500; }
.nt-table dd { margin: 0; }
.nt-table ul { margin: 0 !important; padding-left: 1.2em !important; }
.nt-table li { margin: 0 !important; }

/* ==========================================================
   10 お問い合わせ
   ========================================================== */
.nt-contact { text-align: center; }
.nt-tel { font-family: var(--nt-en); font-size: clamp(28px, 4vw, 40px); letter-spacing: 0.08em; margin: 24px 0 0 !important; }
.nt-tel a { color: inherit !important; }
.nt-tel small { display: block; font-family: var(--nt-sans); font-size: 13px; letter-spacing: 0.08em; color: var(--nt-ink-soft); }

/* ==========================================================
   ヘッダー
   - 上の細い帯（キャッチフレーズ）は使わない
   - ロゴは画像の代わりに、細い明朝体と英字の文字で表示する
     （画像は検索エンジン用に残し、見た目だけ文字に置き換え）
   - トップページでは、ヘッダーを透明にして写真に重ねる
   ========================================================== */
.l-header__bar { display: none !important; }

.c-headLogo.-img .c-headLogo__img { display: none !important; }
.c-headLogo.-img .c-headLogo__link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.7em;
	color: var(--nt-ink);
	text-decoration: none;
	line-height: 1;
}
.c-headLogo.-img .c-headLogo__link::before {
	content: "株式会社";
	font-family: var(--nt-serif);
	font-size: 11px;
	letter-spacing: 0.24em;
}
.c-headLogo.-img .c-headLogo__link::after {
	content: "NATICA";
	font-family: var(--nt-en);
	font-size: 30px;
	font-weight: 500;
	letter-spacing: 0.26em;
}
@media (max-width: 959px) {
	.c-headLogo.-img .c-headLogo__link::before { font-size: 10px; }
	.c-headLogo.-img .c-headLogo__link::after { font-size: 24px; }
}

.home.nt-page .l-header {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100%;
	background: transparent !important;
	box-shadow: none !important;
	z-index: 10;
}
.home.nt-page .l-header .c-headLogo__link,
.home.nt-page .l-header .c-gnav > .menu-item > a,
.home.nt-page .l-header .l-header__menuBtn,
.home.nt-page .l-header .l-header__customBtn,
.home.nt-page .l-header .c-iconBtn { color: #fff !important; }
.home.nt-page .l-header .c-gnav > .menu-item > a::after { background: #fff !important; }
.home.nt-page .nt-hero { min-height: 100vh; min-height: 100svh; }

/* ==========================================================
   スマホの画面下に固定するメニュー（SWELLの固定フッターメニュー）
   ========================================================== */
#fix_bottom_menu {
	background: rgba(255, 255, 255, 0.97);
	color: var(--nt-ink);
	border-top: 1px solid var(--nt-line);
}
#fix_bottom_menu .menu-item a:active { color: var(--nt-green); }
#fix_bottom_menu span { font-size: 11px; letter-spacing: 0.04em; }

/* アイコンはボタンの内側に表示する。
   メニューの「CSSクラス」にアイコン名を入れると、ボタンの外側にもアイコンが出て文字がはみ出すため、外側のアイコンは消す */
#fix_bottom_menu .menu-item[class*="icon-"]::before { content: none !important; display: none !important; }
#fix_bottom_menu .menu-item i::before { font-family: icomoon !important; font-style: normal; line-height: 1; }
#fix_bottom_menu a[href*="fuku-hokkaido"] i::before { content: "\e939"; } /* カート */
#fix_bottom_menu a[href*="lin.ee"] i::before { content: "\e907"; }        /* LINE */
#fix_bottom_menu a[href*="/contact"] i::before { content: "\e92c"; }      /* 封筒 */

/* ==========================================================
   木漏れ日（葉の影をうっすら重ねる）
   使い方：セクションの最初に <span class="nt-leaf"></span>（右下は nt-leaf--r）
   ========================================================== */
.nt-leaf {
	position: absolute;
	top: -20px;
	left: -30px;
	width: min(520px, 80vw);
	aspect-ratio: 420 / 380;
	background: url("assets/img/leaf-shadow.svg") no-repeat 0 0 / 100% 100%;
	pointer-events: none;
	z-index: 0;
}
.nt-leaf--r { left: auto; top: auto; right: -40px; bottom: -30px; transform: scaleX(-1) rotate(10deg); }
.nt-sec > .nt-wrap { position: relative; z-index: 1; }

/* ==========================================================
   北海道の産地（地図＋ポラロイド写真）
   ========================================================== */
.nt-origin-grid {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: 56px;
	align-items: center;
}
.nt-map { position: relative; aspect-ratio: 2560 / 2281; }
.nt-map__outline {   /* 地図の形に、細い緑の線を付ける */
	position: absolute;
	inset: 0;
	filter: drop-shadow(1px 0 0 var(--nt-green)) drop-shadow(-1px 0 0 var(--nt-green)) drop-shadow(0 1px 0 var(--nt-green)) drop-shadow(0 -1px 0 var(--nt-green));
}
.nt-map__shape {   /* 地図の画像（--nt-map）を、形だけ切り抜いて生成り色で塗る */
	position: absolute;
	inset: 0;
	background: #fbf9f4;
	-webkit-mask: var(--nt-map) center / contain no-repeat;
	mask: var(--nt-map) center / contain no-repeat;
}
.nt-pins { position: absolute; inset: 0; }
.nt-pin {
	position: absolute;
	transform: translate(-4.5px, -50%);
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--nt-ink);
	background: rgba(251, 249, 244, 0.85);
	padding: 2px 6px 2px 0;
	border-radius: 2px;
}
.nt-pin::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--nt-gold);
	box-shadow: 0 0 0 4px rgba(176, 141, 87, 0.22);
}
.nt-pin b { font-family: var(--nt-serif); font-weight: 500; }
.nt-pin--hq::before { background: var(--nt-green); box-shadow: 0 0 0 4px rgba(47, 93, 69, 0.2); }
.nt-pin--l { flex-direction: row-reverse; transform: translate(calc(-100% + 4.5px), -50%); padding: 2px 0 2px 6px; }

.nt-polas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; margin: 0 !important; }
.nt-pola {
	margin: 0 !important;
	background: #fff;
	padding: 10px 10px 0;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	transition: transform 0.5s var(--nt-ease);
}
.nt-pola:nth-child(1) { transform: rotate(-5deg); }
.nt-pola:nth-child(2) { transform: rotate(4deg) translateY(18px); }
.nt-pola:nth-child(3) { transform: rotate(3deg); }
.nt-pola:nth-child(4) { transform: rotate(-4deg) translateY(14px); }
.nt-pola:hover { transform: rotate(0) scale(1.03); }
.nt-pola img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.nt-pola figcaption {
	font-family: var(--nt-script);
	font-size: 30px;
	color: var(--nt-ink);
	text-align: center;
	padding: 4px 0 8px;
	line-height: 1.2;
}
.nt-pola small {
	display: block;
	font-family: var(--nt-sans);
	font-size: 11px;
	color: var(--nt-ink-soft);
	letter-spacing: 0.08em;
}

/* ==========================================================
   お問い合わせページ
   ========================================================== */
/* 問い合わせ方法（フォーム・電話・LINE）のカード */
.nt-ways {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 48px;
}
.nt-way {
	display: block;
	background: var(--nt-white);
	border: 1px solid var(--nt-line);
	padding: 32px 24px;
	text-align: center;
	color: var(--nt-ink) !important;
	transition: border-color 0.3s, transform 0.4s var(--nt-ease);
}
a.nt-way:hover { border-color: var(--nt-green); transform: translateY(-3px); }
.nt-way__en { display: block; font-family: var(--nt-en); font-style: italic; font-size: 15px; color: var(--nt-green); letter-spacing: 0.1em; }
.nt-way__ja { display: block; font-family: var(--nt-serif); font-size: 19px; letter-spacing: 0.1em; margin: 6px 0 10px; }
.nt-way__txt { display: block; font-size: 13px; color: var(--nt-ink-soft); line-height: 1.8; }
.nt-way__big { display: block; font-family: var(--nt-en); font-size: 26px; letter-spacing: 0.06em; margin: 4px 0; color: var(--nt-ink); }
.nt-way .nt-line-btn img { margin: 10px auto 0; }

/* お問い合わせの種類の目安（表） */
.nt-topics { list-style: none !important; margin: 0 !important; padding: 0 !important; border-top: 1px solid var(--nt-line); }
.nt-topics li {
	display: grid;
	grid-template-columns: minmax(140px, 32%) minmax(0, 1fr);
	gap: 4px 24px;
	padding: 18px 4px !important;
	border-bottom: 1px solid var(--nt-line);
	list-style: none !important;
	margin: 0 !important;
	font-size: 14px;
}
.nt-topics li::before { content: none !important; }
.nt-topics strong { font-family: var(--nt-serif); font-weight: 500; color: var(--nt-green); letter-spacing: 0.06em; }
.nt-topics span { color: var(--nt-ink-soft); }

/* フォーム（WPForms）を、サイトのデザインに合わせる */
.nt-form { background: var(--nt-white); border: 1px solid var(--nt-line); padding: clamp(28px, 5vw, 56px); }
.nt-form .wpforms-container { margin: 0 !important; }
.nt-form .wpforms-field { padding: 0 0 28px !important; }
.nt-form .wpforms-field-label,
.nt-form legend.wpforms-field-label {
	font-family: var(--nt-serif) !important;
	font-weight: 500 !important;
	font-size: 15px !important;
	letter-spacing: 0.08em;
	color: var(--nt-ink) !important;
	margin-bottom: 10px !important;
}
.nt-form .wpforms-required-label {
	color: var(--nt-white) !important;
	background: var(--nt-green);
	font-family: var(--nt-sans);
	font-size: 11px;
	font-weight: 400;
	padding: 2px 8px;
	margin-left: 10px;
	vertical-align: 2px;
	letter-spacing: 0.1em;
}
.nt-form .wpforms-required-label::before { content: "必須"; }
.nt-form .wpforms-required-label { font-size: 0 !important; }
.nt-form .wpforms-required-label::before { font-size: 11px; }
.nt-form input[type="text"],
.nt-form input[type="email"],
.nt-form input[type="tel"],
.nt-form input[type="number"],
.nt-form select,
.nt-form textarea {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 52px;
	padding: 14px 16px !important;
	border: 1px solid rgba(43, 43, 43, 0.22) !important;
	border-radius: 0 !important;
	background: #fcfbf8 !important;
	font-size: 16px !important; /* スマホで入力時に画面が拡大されないよう16px */
	color: var(--nt-ink) !important;
	box-shadow: none !important;
	transition: border-color 0.2s, background 0.2s;
}
.nt-form textarea { min-height: 200px; line-height: 1.8; }
.nt-form input:focus,
.nt-form select:focus,
.nt-form textarea:focus { border-color: var(--nt-green) !important; background: #fff !important; outline: none; }
.nt-form ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.nt-form ul li { list-style: none !important; margin: 0 0 10px !important; padding: 0 !important; display: flex; align-items: center; gap: 10px; }
.nt-form ul li::before { content: none !important; }
.nt-form input[type="radio"],
.nt-form input[type="checkbox"] { width: 18px !important; height: 18px !important; accent-color: var(--nt-green); margin: 0 !important; flex-shrink: 0; }
.nt-form .wpforms-field-sublabel,
.nt-form .wpforms-field-description { font-size: 13px !important; color: var(--nt-ink-soft) !important; }
.nt-form .wpforms-error,
.nt-form label.wpforms-error { color: #b3261e !important; font-size: 13px !important; }
.nt-form .wpforms-submit-container { text-align: center; padding-top: 8px !important; }
.nt-form button[type="submit"],
.nt-form .wpforms-submit {
	min-width: min(320px, 100%);
	height: auto !important;
	padding: 18px 40px !important;
	background: var(--nt-green) !important;
	border: none !important;
	border-radius: 0 !important;
	color: #fff !important;
	font-family: var(--nt-sans) !important;
	font-size: 16px !important;
	letter-spacing: 0.16em;
	cursor: pointer;
	transition: background 0.3s;
}
.nt-form button[type="submit"]:hover { background: var(--nt-green-dark) !important; }
.nt-form .wpforms-confirmation-container-full {
	background: var(--nt-kinari) !important;
	border: 1px solid var(--nt-green) !important;
	color: var(--nt-ink) !important;
	padding: 32px !important;
	line-height: 2;
}
.nt-form-note { font-size: 13px; color: var(--nt-ink-soft); margin-top: 20px !important; }
.nt-form-note a { color: var(--nt-green) !important; text-decoration: underline !important; }

/* プライバシーポリシーなどの文章ページ */
.nt-doc h2 {
	font-size: 19px !important;
	margin: 48px 0 16px !important;
	padding-bottom: 10px !important;
	border-bottom: 1px solid var(--nt-line) !important;
}
.nt-doc h2:first-of-type { margin-top: 0 !important; }
.nt-doc p, .nt-doc li { font-size: 15px; }
.nt-doc ol, .nt-doc ul { padding-left: 1.4em !important; margin: 0 0 1.4em !important; }
.nt-doc li { margin-bottom: 6px !important; }
.nt-doc .nt-table { margin-top: 8px; }

/* ==========================================================
   フッター（SWELLのフッター全体を深い緑に。中身はウィジェットの「カスタムHTML」で .nt-footer を表示）
   ========================================================== */
.l-footer { background: var(--nt-green) !important; color: rgba(255, 255, 255, 0.92) !important; }
.l-footer a { color: inherit !important; }
.l-footer .l-footer__foot,
.l-footer .l-footer__foot * { background: transparent !important; color: rgba(255, 255, 255, 0.75) !important; }
.l-footer .l-footer__foot { border-top: 1px solid rgba(255, 255, 255, 0.18); }
.l-footer .w-footer,
.l-footer .w-footer__box { width: 100% !important; max-width: none !important; flex: 1 1 100% !important; }
.l-footer .widget_block,
.l-footer .c-widget { margin: 0 !important; }

.nt-footer {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 3fr);
	gap: 48px;
	padding: 72px 0 56px;
	font-family: var(--nt-sans);
	font-size: 14px;
	line-height: 2;
	letter-spacing: 0.04em;
}
.nt-footer p { margin: 0 !important; }
.nt-footer .nt-footer__logo { display: flex; align-items: baseline; gap: 0.7em; line-height: 1; margin-bottom: 20px !important; }
.nt-footer__logo span { font-family: var(--nt-serif); font-size: 11px; letter-spacing: 0.24em; }
.nt-footer__logo strong { font-family: var(--nt-en); font-size: 30px; font-weight: 500; letter-spacing: 0.26em; }
.nt-footer .nt-footer__copy { font-family: var(--nt-serif); letter-spacing: 0.12em; margin-bottom: 20px !important; }
.nt-footer__info { font-size: 13px; opacity: 0.85; }
.nt-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; align-content: start; }
.nt-footer__nav ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.nt-footer__nav li { list-style: none !important; margin: 0 0 10px !important; padding: 0 !important; }
.nt-footer__nav li::before { content: none !important; }
.nt-footer__nav a { text-decoration: none !important; }
.nt-footer__nav a:hover { opacity: 0.7; }
.nt-footer .nt-footer__head { font-family: var(--nt-en); font-style: italic; font-size: 14px; letter-spacing: 0.14em; opacity: 0.7; margin-bottom: 12px !important; }
.nt-footer__line { text-align: center; }
.nt-footer__qr { width: 120px; height: 120px; margin: 0 auto 10px; background: #fff; padding: 8px; display: block; }
.nt-footer__line small { display: block; font-size: 12px; opacity: 0.8; line-height: 1.6; }

/* パソコンだけ・スマホだけに表示（QRコードはパソコン、友だち追加ボタンはスマホ） */
.nt-sp-only { display: none !important; }

/* ==========================================================
   スマートフォン・タブレット
   ========================================================== */
@media (max-width: 959px) {
	.nt-pc-only { display: none !important; }
	.nt-origin-grid { grid-template-columns: 1fr; gap: 48px; }
	.nt-polas { gap: 20px 16px; }
	.nt-pola figcaption { font-size: 24px; }
	.nt-pin { font-size: 11px; }
	.nt-sp-only { display: inline-block !important; }
	.nt-footer { grid-template-columns: 1fr; gap: 36px; padding: 56px 8px 40px; }
	.nt-footer__line { text-align: left; }
	.nt-ways { grid-template-columns: 1fr; }
	.nt-biz { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; }
	.nt-biz__item:nth-child(n) { margin-top: 0; }
	.nt-biz__item:nth-child(even) { margin-top: 48px; }
	.nt-brand { grid-template-columns: 1fr; text-align: center; }
	.nt-brand .nt-btns { justify-content: center; }
}
@media (max-width: 599px) {
	.nt-sec { line-height: 1.95; }
	.nt-topics li { grid-template-columns: 1fr; }
	/* スマホでは、左向きの地図ラベル（仁木町）が画面の端で切れるので、右向きにする */
	.nt-pin--l { flex-direction: row; transform: translate(-4.5px, -50%); padding: 2px 6px 2px 0; }
	.nt-form { padding: 24px 18px; }
	.nt-split,
	.nt-split--reverse { grid-template-columns: 1fr; gap: 32px; }
	.nt-split--reverse .nt-split__img { order: 0; }
	.nt-split__img img { aspect-ratio: 4 / 3; }
	.nt-doors { grid-template-columns: 1fr; gap: 12px; }
	.nt-door { padding: 28px 20px 24px; }
	.nt-biz { grid-template-columns: 1fr; gap: 48px; }
	.nt-biz__item:nth-child(even) { margin-top: 0; }
	.nt-brand__photos { gap: 8px; margin-top: 40px; }
	.nt-brand__photos figcaption { font-size: 11px; }
	.nt-table__row { grid-template-columns: 1fr; gap: 4px; padding: 20px 4px; }
	.nt-origin { padding: 24px 20px; }
	.nt-btns { gap: 12px 24px; }
	.nt-btn--solid,
	.nt-btn--outline-white { width: 100%; justify-content: center; }
	.nt-news-list time { min-width: 0; width: 100%; }
}