@charset "UTF-8";
/* ============================================================
   HP21 アイソメトリック・ミニチュア風デザイン
   - 会社を「ミニチュアの箱庭」として俯瞰で見せる
   - パステル×白背景・ブロック状のタイル（ホバーでぽこっと浮く）
   - フォント: M PLUS Rounded 1c
   ============================================================ */

/* ------------------------------------------------------------
   変数
------------------------------------------------------------ */
:root {
	--color-bg: #ffffff;           /* ベースの白 */
	--color-bg-soft: #f2f9f6;      /* うすいミントの面 */
	--color-ink: #3f4a5a;          /* 本文のネイビーグレー */
	--color-gray: #8d97a5;         /* 補足テキスト */
	--color-line: #e3e9ef;         /* 罫線 */
	--color-mint: #7fd8c4;         /* ミント */
	--color-mint-deep: #4db8a0;    /* ミントの影面 */
	--color-pink: #f7a8c4;         /* ピンク */
	--color-pink-deep: #e07a9f;    /* ピンクの影面 */
	--color-yellow: #ffd97d;       /* イエロー */
	--color-yellow-deep: #edb84a;  /* イエローの影面 */
	--color-blue: #9bc4f2;         /* ブルー */
	--color-blue-deep: #6d9fd8;    /* ブルーの影面 */
	--font-ja: 'M PLUS Rounded 1c', sans-serif;
	--header-h: 76px;
	--radius: 18px;
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* ぽこっと弾む */
}

/* ------------------------------------------------------------
   リセット・ベース
------------------------------------------------------------ */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-ja);
	font-size: 16px;
	line-height: 1.95;
	color: var(--color-ink);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol {
	list-style: none;
}

button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background: none;
}

/* スクリーンリーダー専用テキスト */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.sp-only {
	display: none;
}

/* ------------------------------------------------------------
   共通パーツ
------------------------------------------------------------ */
.section-inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 24px;
}

.section-en {
	display: inline-block;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.24em;
	color: var(--color-mint-deep);
	background-color: var(--color-bg-soft);
	border-radius: 999px;
	padding: 4px 18px;
	margin-bottom: 14px;
}

.section-title {
	font-size: 32px;
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: 0.04em;
	margin-bottom: 30px;
}

.accent-pink {
	color: var(--color-pink-deep);
}

.accent-mint {
	color: var(--color-mint-deep);
}

/* ------------------------------------------------------------
   ボタン（ブロック風の立体）
------------------------------------------------------------ */
.btn {
	display: inline-block;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
	padding: 14px 34px;
	border-radius: 999px;
	transition: transform 0.25s var(--ease-pop), box-shadow 0.25s var(--ease-out);
}

.btn-primary {
	color: #fff;
	background-color: var(--color-mint-deep);
	box-shadow: 0 6px 0 #37927e;
}

.btn-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 9px 0 #37927e;
}

.btn-primary:active {
	transform: translateY(3px);
	box-shadow: 0 3px 0 #37927e;
}

.btn-ghost {
	color: var(--color-ink);
	background-color: #fff;
	border: 2px solid var(--color-line);
	box-shadow: 0 6px 0 var(--color-line);
}

.btn-ghost:hover {
	transform: translateY(-3px);
	box-shadow: 0 9px 0 var(--color-line);
}

.btn-lg {
	padding: 17px 44px;
	font-size: 16px;
}

/* ------------------------------------------------------------
   ヘッダー
------------------------------------------------------------ */
.site-header {
	position: sticky;
	top: 0;
	width: 100%;
	height: var(--header-h);
	z-index: 100;
	background-color: rgba(255, 255, 255, 0.92);
	border-bottom: 1px solid var(--color-line);
}

.header-inner {
	max-width: 1200px;
	height: 100%;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.site-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.logo-text {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1;
}

.logo-text-sub {
	color: var(--color-mint-deep);
	margin-left: 4px;
}

/* ナビ */
.nav-list {
	display: flex;
	align-items: center;
	gap: 26px;
}

.nav-link {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 8px 4px;
	position: relative;
}

/* ホバー・現在ページは下に丸いブロック */
.nav-link::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -2px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--color-pink-deep);
	transform: translateX(-50%) scale(0);
	transition: transform 0.3s var(--ease-pop);
}

.nav-link:hover::after,
.nav-link.active::after {
	transform: translateX(-50%) scale(1);
}

.nav-cta-btn {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	background-color: var(--color-pink-deep);
	border-radius: 999px;
	padding: 10px 24px;
	box-shadow: 0 4px 0 #c05a82;
	transition: transform 0.25s var(--ease-pop), box-shadow 0.25s;
}

.nav-cta-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 0 #c05a82;
}

/* ハンバーガー（スマホ用） */
.nav-toggle {
	display: none;
	position: relative;
	z-index: 110;
	width: 44px;
	height: 44px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.nav-toggle-bar {
	display: block;
	width: 24px;
	height: 3px;
	border-radius: 3px;
	background-color: var(--color-ink);
	transition: transform 0.3s var(--ease-out), opacity 0.3s;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
	transform: translateY(9px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
	transform: translateY(-9px) rotate(-45deg);
}

/* ------------------------------------------------------------
   ヒーロー
------------------------------------------------------------ */
.hero {
	position: relative;
	padding: 72px 0 120px;
	overflow: hidden;
}

.hero-inner {
	position: relative;
	z-index: 2;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 40px;
	align-items: center;
}

.hero-title {
	font-size: clamp(34px, 4.6vw, 50px);
	font-weight: 800;
	line-height: 1.55;
	letter-spacing: 0.04em;
	margin-bottom: 22px;
}

.hero-lead {
	font-size: 15px;
	margin-bottom: 32px;
}

.hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* ヒーローのミニチュアはふわふわ浮かせる */
.hero-media img {
	animation: floatTown 5s ease-in-out infinite;
}

@keyframes floatTown {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-12px); }
}

/* 地面（ミントの丘） */
.hero-ground {
	position: absolute;
	left: 50%;
	bottom: -140px;
	width: 160%;
	height: 220px;
	transform: translateX(-50%);
	background-color: var(--color-bg-soft);
	border-radius: 50% 50% 0 0;
}

/* ヒーロー登場アニメーション */
.hero-item {
	opacity: 0;
	transform: translateY(22px);
	animation: heroIn 0.9s var(--ease-out) forwards;
}

.hero-item[data-delay="1"] { animation-delay: 0.15s; }
.hero-item[data-delay="2"] { animation-delay: 0.3s; }

@keyframes heroIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ------------------------------------------------------------
   スクロール連動フェードイン（reveal）
------------------------------------------------------------ */
.reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal[data-delay="1"] { transition-delay: 0.12s; }
.reveal[data-delay="2"] { transition-delay: 0.24s; }
.reveal[data-delay="3"] { transition-delay: 0.36s; }

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ------------------------------------------------------------
   わたしたちについて
------------------------------------------------------------ */
.about {
	padding: 40px 0 100px;
	text-align: center;
}

.about-body {
	max-width: 680px;
	margin: 0 auto;
	text-align: left;
}

.about-body p + p {
	margin-top: 1.3em;
}

/* ------------------------------------------------------------
   事業内容（ジオラマ風タイル）
------------------------------------------------------------ */
.services {
	padding: 90px 0 110px;
	background-color: var(--color-bg-soft);
	text-align: center;
}

.services-hint {
	font-size: 13px;
	color: var(--color-gray);
	margin-bottom: 40px;
}

.service-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 34px;
}

/* ブロック状のタイル。ホバーでぽこっと持ち上がる */
.service-card {
	background-color: #fff;
	border-radius: var(--radius);
	padding: 30px 26px 32px;
	box-shadow: 0 8px 0 var(--color-line);
	transition: transform 0.35s var(--ease-pop), box-shadow 0.35s var(--ease-out);
}

.service-card:hover {
	transform: translateY(-12px);
	box-shadow: 0 20px 0 var(--color-line);
}

/* タイルごとの影色 */
.service-card:nth-child(1):hover { box-shadow: 0 20px 0 rgba(127, 216, 196, 0.6); }
.service-card:nth-child(2):hover { box-shadow: 0 20px 0 rgba(247, 168, 196, 0.6); }
.service-card:nth-child(3):hover { box-shadow: 0 20px 0 rgba(255, 217, 125, 0.7); }

.service-media {
	margin-bottom: 16px;
}

/* ホバーで中のミニチュアもふわっと */
.service-media img {
	transition: transform 0.35s var(--ease-pop);
}

.service-card:hover .service-media img {
	transform: translateY(-6px) scale(1.03);
}

.service-title {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 0.06em;
	margin-bottom: 10px;
}

.service-text {
	font-size: 14px;
	line-height: 1.9;
	text-align: left;
}

/* ------------------------------------------------------------
   数字で見る
------------------------------------------------------------ */
.stats {
	padding: 90px 0;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.stat-item {
	text-align: center;
	border-radius: var(--radius);
	padding: 34px 20px 28px;
}

.stat-item:nth-child(1) { background-color: rgba(127, 216, 196, 0.22); }
.stat-item:nth-child(2) { background-color: rgba(247, 168, 196, 0.22); }
.stat-item:nth-child(3) { background-color: rgba(255, 217, 125, 0.28); }

.stat-value {
	font-size: 52px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.stat-item:nth-child(1) .stat-value { color: var(--color-mint-deep); }
.stat-item:nth-child(2) .stat-value { color: var(--color-pink-deep); }
.stat-item:nth-child(3) .stat-value { color: var(--color-yellow-deep); }

.stat-unit {
	font-size: 20px;
	margin-left: 4px;
}

.stat-label {
	font-size: 14px;
	font-weight: 700;
	color: var(--color-gray);
}

/* ------------------------------------------------------------
   お知らせ
------------------------------------------------------------ */
.news {
	padding: 20px 0 110px;
}

.news-list {
	border-top: 1px solid var(--color-line);
}

.news-item {
	border-bottom: 1px solid var(--color-line);
}

.news-link {
	display: grid;
	grid-template-columns: auto auto 1fr auto;
	align-items: center;
	gap: 20px;
	padding: 20px 12px;
	border-radius: 12px;
	transition: background-color 0.3s;
}

.news-link:hover {
	background-color: var(--color-bg-soft);
}

.news-date {
	font-size: 14px;
	font-weight: 700;
	color: var(--color-gray);
}

.news-category {
	font-size: 12px;
	font-weight: 700;
	color: var(--color-mint-deep);
	background-color: rgba(127, 216, 196, 0.2);
	border-radius: 999px;
	padding: 3px 14px;
	min-width: 96px;
	text-align: center;
}

.news-item:nth-child(even) .news-category {
	color: var(--color-pink-deep);
	background-color: rgba(247, 168, 196, 0.2);
}

.news-title {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.7;
}

.news-arrow {
	position: relative;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: var(--color-bg-soft);
	transition: background-color 0.3s;
}

.news-arrow::after {
	content: '';
	position: absolute;
	left: 9px;
	top: 9px;
	width: 7px;
	height: 7px;
	border-top: 2px solid var(--color-mint-deep);
	border-right: 2px solid var(--color-mint-deep);
	transform: rotate(45deg);
}

.news-link:hover .news-arrow {
	background-color: rgba(127, 216, 196, 0.35);
}

/* ------------------------------------------------------------
   CTA
------------------------------------------------------------ */
.cta {
	padding: 0 0 110px;
}

.cta-box {
	text-align: center;
	background-color: var(--color-bg-soft);
	border-radius: 28px;
	padding: 64px 40px;
}

.cta-title {
	font-size: 28px;
	font-weight: 800;
	line-height: 1.6;
	margin-bottom: 14px;
}

.cta-lead {
	font-size: 14px;
	color: var(--color-gray);
	margin-bottom: 32px;
}

/* ------------------------------------------------------------
   下層ページ共通ヒーロー
------------------------------------------------------------ */
.lower-hero {
	background-color: var(--color-bg-soft);
	text-align: center;
	padding: 64px 0 56px;
	margin-bottom: 80px;
	border-radius: 0 0 40px 40px;
}

.lower-hero-en {
	display: inline-block;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.24em;
	color: var(--color-mint-deep);
	background-color: #fff;
	border-radius: 999px;
	padding: 4px 18px;
	margin-bottom: 14px;
}

.lower-hero-title {
	font-size: clamp(30px, 4.5vw, 40px);
	font-weight: 800;
	letter-spacing: 0.08em;
	margin-bottom: 8px;
}

.lower-hero-lead {
	font-size: 14px;
	color: var(--color-gray);
}

/* ------------------------------------------------------------
   会社概要：代表メッセージ
------------------------------------------------------------ */
.message {
	padding: 0 0 100px;
}

.message-grid {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 56px;
	align-items: center;
}

.message-media {
	text-align: center;
}

.message-media img {
	border-radius: var(--radius);
	background-color: var(--color-bg-soft);
}

.message-caption {
	margin-top: 14px;
	font-size: 14px;
	font-weight: 700;
}

.message-catch {
	font-size: 27px;
	font-weight: 800;
	line-height: 1.6;
	margin-bottom: 18px;
}

.message-body p + p {
	margin-top: 1.3em;
}

.message-body {
	font-size: 15px;
}

/* ------------------------------------------------------------
   会社概要：会社データ
------------------------------------------------------------ */
.profile {
	padding: 0 0 100px;
}

.profile-table {
	max-width: 840px;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--color-line);
}

.profile-row {
	display: grid;
	grid-template-columns: 200px 1fr;
}

.profile-row + .profile-row {
	border-top: 1px solid var(--color-line);
}

.profile-label {
	font-size: 14px;
	font-weight: 800;
	padding: 16px 22px;
	background-color: var(--color-bg-soft);
}

.profile-value {
	font-size: 15px;
	padding: 16px 22px;
}

/* ------------------------------------------------------------
   会社概要：あゆみ（ブロックが積み上がる年表）
------------------------------------------------------------ */
.history {
	padding: 0 0 100px;
}

.history-note {
	font-size: 14px;
	color: var(--color-gray);
	margin-bottom: 36px;
}

.history-list {
	max-width: 760px;
}

.history-item {
	display: grid;
	grid-template-columns: 34px 90px 1fr;
	gap: 18px;
	align-items: baseline;
	padding: 16px 0;
	border-bottom: 1px dashed var(--color-line);
}

/* 年表の小さなブロック（アイソメ風のひし形） */
.history-block {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background-color: var(--color-mint);
	box-shadow: 0 4px 0 var(--color-mint-deep);
	transform: rotate(45deg) scale(0.82);
}

.history-item:nth-child(3n+2) .history-block {
	background-color: var(--color-pink);
	box-shadow: 0 4px 0 var(--color-pink-deep);
}

.history-item:nth-child(3n) .history-block {
	background-color: var(--color-yellow);
	box-shadow: 0 4px 0 var(--color-yellow-deep);
}

.history-year {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: 0.04em;
}

.history-text {
	font-size: 15px;
}

/* ------------------------------------------------------------
   会社概要：アクセス
------------------------------------------------------------ */
.access {
	padding: 0 0 110px;
}

.access-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: center;
}

.access-media img {
	border-radius: var(--radius);
}

.access-name {
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 8px;
}

.access-address {
	font-size: 15px;
	margin-bottom: 18px;
}

.access-list li {
	position: relative;
	padding-left: 22px;
	font-size: 14px;
	line-height: 2.1;
	color: var(--color-gray);
}

.access-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.75em;
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background-color: var(--color-mint);
	transform: rotate(45deg);
}

/* ------------------------------------------------------------
   お問い合わせ
------------------------------------------------------------ */
.contact {
	padding: 0 0 120px;
}

.contact-grid {
	display: grid;
	grid-template-columns: 7fr 4fr;
	gap: 44px;
	align-items: start;
}

.contact-form {
	background-color: #fff;
	border: 1px solid var(--color-line);
	border-radius: 24px;
	padding: 48px 44px;
	box-shadow: 0 10px 0 var(--color-bg-soft);
}

.contact-form-title {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: 0.06em;
	margin-bottom: 8px;
}

.contact-form-lead {
	font-size: 13px;
	color: var(--color-gray);
	margin-bottom: 34px;
}

.form-row {
	margin-bottom: 24px;
	border: none;
}

.form-label {
	display: block;
	font-size: 14px;
	font-weight: 800;
	margin-bottom: 8px;
}

.form-required {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	color: #fff;
	background-color: var(--color-pink-deep);
	border-radius: 999px;
	padding: 2px 10px;
	margin-left: 10px;
	vertical-align: middle;
}

.form-input,
.form-select,
.form-textarea {
	width: 100%;
	font-family: var(--font-ja);
	font-size: 15px;
	color: var(--color-ink);
	background-color: var(--color-bg-soft);
	border: 2px solid transparent;
	border-radius: 14px;
	padding: 12px 16px;
	transition: border-color 0.3s, background-color 0.3s;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
	outline: none;
	border-color: var(--color-mint);
	background-color: #fff;
}

.form-textarea {
	resize: vertical;
	min-height: 150px;
}

/* ラジオボタン */
.form-radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.form-radio {
	cursor: pointer;
}

.form-radio input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.form-radio-label {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	background-color: var(--color-bg-soft);
	border-radius: 999px;
	padding: 8px 18px;
	transition: background-color 0.25s, color 0.25s;
}

.form-radio input:checked + .form-radio-label {
	background-color: var(--color-mint-deep);
	color: #fff;
}

.form-radio input:focus-visible + .form-radio-label {
	outline: 2px solid var(--color-pink-deep);
	outline-offset: 2px;
}

/* 同意チェック */
.form-check {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 14px;
}

.form-check input {
	width: 18px;
	height: 18px;
	accent-color: var(--color-mint-deep);
}

.form-submit {
	text-align: center;
	margin-top: 34px;
}

.form-note {
	margin-top: 14px;
	font-size: 12px;
	color: var(--color-gray);
}

/* サイド情報 */
.contact-side {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.side-card {
	border-radius: var(--radius);
	padding: 30px 28px 26px;
}

.side-card-mint   { background-color: rgba(127, 216, 196, 0.2);  box-shadow: 0 6px 0 rgba(127, 216, 196, 0.5); }
.side-card-pink   { background-color: rgba(247, 168, 196, 0.18); box-shadow: 0 6px 0 rgba(247, 168, 196, 0.45); }
.side-card-yellow { background-color: rgba(255, 217, 125, 0.24); box-shadow: 0 6px 0 rgba(255, 217, 125, 0.55); }

.side-card-title {
	font-size: 17px;
	font-weight: 800;
	margin-bottom: 12px;
}

.side-card-tel {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: 0.02em;
	margin-bottom: 6px;
}

.side-card-note {
	font-size: 13px;
	line-height: 1.9;
	color: var(--color-gray);
}

.contact-flow-item {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.7;
	padding: 8px 0;
}

.contact-flow-num {
	flex: 0 0 26px;
	height: 26px;
	font-size: 14px;
	font-weight: 800;
	color: #fff;
	background-color: var(--color-pink-deep);
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ------------------------------------------------------------
   フッター
------------------------------------------------------------ */
.site-footer {
	background-color: var(--color-bg-soft);
	border-radius: 40px 40px 0 0;
	padding: 80px 0 28px;
}

.footer-inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 24px;
}

.footer-cta {
	text-align: center;
	padding-bottom: 60px;
	border-bottom: 1px solid rgba(63, 74, 90, 0.1);
}

.footer-catch {
	font-size: clamp(24px, 3.6vw, 32px);
	font-weight: 800;
	line-height: 1.6;
	margin-bottom: 28px;
}

.footer-middle {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 44px;
	padding: 52px 0;
}

.footer-brand-text {
	margin-top: 16px;
	font-size: 13px;
	line-height: 2;
	color: var(--color-gray);
}

.footer-nav-list li + li {
	margin-top: 12px;
}

.footer-nav-list a {
	font-size: 14px;
	font-weight: 700;
	position: relative;
	padding-left: 18px;
}

.footer-nav-list a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background-color: var(--color-mint);
	transform: translateY(-50%) rotate(45deg);
	transition: background-color 0.3s;
}

.footer-nav-list a:hover::before {
	background-color: var(--color-pink-deep);
}

.footer-info-name {
	font-size: 15px;
	font-weight: 800;
	margin-bottom: 8px;
}

.footer-info-address {
	font-size: 13px;
	line-height: 2;
	color: var(--color-gray);
}

.footer-bottom {
	border-top: 1px solid rgba(63, 74, 90, 0.1);
	padding-top: 22px;
	text-align: center;
}

.copyright {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--color-gray);
}

/* ------------------------------------------------------------
   ページ上部へ戻る
------------------------------------------------------------ */
.to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 90;
	width: 52px;
	height: 52px;
	background-color: #fff;
	border: 2px solid var(--color-line);
	border-radius: 16px;
	box-shadow: 0 5px 0 var(--color-line);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.4s, visibility 0.4s, transform 0.4s var(--ease-pop);
}

.to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.to-top:hover {
	transform: translateY(-3px);
}

.to-top-arrow {
	width: 12px;
	height: 12px;
	border-top: 3px solid var(--color-mint-deep);
	border-left: 3px solid var(--color-mint-deep);
	border-radius: 2px;
	transform: rotate(45deg) translate(2px, 2px);
}

/* ------------------------------------------------------------
   レスポンシブ（タブレット以下）
------------------------------------------------------------ */
@media (max-width: 900px) {
	.hero-inner {
		grid-template-columns: 1fr;
		gap: 40px;
		text-align: center;
	}

	.hero-cta {
		justify-content: center;
	}

	.hero-media {
		max-width: 520px;
		margin: 0 auto;
	}

	.service-grid {
		grid-template-columns: 1fr;
		max-width: 480px;
		margin: 0 auto;
	}

	.stats-grid {
		grid-template-columns: 1fr;
		max-width: 420px;
		margin: 0 auto;
	}

	.message-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.message-media {
		max-width: 320px;
		margin: 0 auto;
	}

	.access-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.contact-grid {
		grid-template-columns: 1fr;
	}

	.footer-middle {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* ------------------------------------------------------------
   レスポンシブ（スマホ）
------------------------------------------------------------ */
/* ヘッダー・ナビのみ広めに切替（1100px） */
@media (max-width: 1100px) {
	/* ナビをドロワー化 */
	.nav-toggle {
		display: flex;
	}

	.global-nav {
		position: fixed;
		inset: 0;
		z-index: 105;
		background-color: rgba(255, 255, 255, 0.97);
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.35s var(--ease-out), visibility 0.35s;
	}

	.global-nav.is-open {
		opacity: 1;
		visibility: visible;
	}

	body.is-nav-open {
		overflow: hidden;
	}

	.nav-list {
		flex-direction: column;
		gap: 28px;
		text-align: center;
	}

	.nav-link {
		font-size: 20px;
	}
}

/* ヘッダー以外は従来どおり768pxで切替 */
@media (max-width: 768px) {
	body {
		font-size: 15px;
	}

	.sp-only {
		display: inline;
	}

	:root {
		--header-h: 64px;
	}

	.hero {
		padding: 44px 0 90px;
	}

	.section-title {
		font-size: 25px;
	}

	.about {
		padding: 24px 0 72px;
	}

	.services {
		padding: 64px 0 80px;
	}

	.stats {
		padding: 64px 0;
	}

	.stat-value {
		font-size: 42px;
	}

	.news {
		padding: 0 0 80px;
	}

	.news-link {
		grid-template-columns: auto auto;
		grid-template-rows: auto auto;
		gap: 8px 14px;
		padding: 16px 6px;
	}

	.news-title {
		grid-column: 1 / -1;
	}

	.news-arrow {
		display: none;
	}

	.cta {
		padding: 0 0 88px;
	}

	.cta-box {
		padding: 48px 24px;
	}

	.cta-title {
		font-size: 22px;
	}

	.lower-hero {
		padding: 44px 0 40px;
		margin-bottom: 56px;
	}

	.message,
	.profile,
	.history {
		padding: 0 0 72px;
	}

	.access {
		padding: 0 0 88px;
	}

	.contact {
		padding: 0 0 96px;
	}

	.contact-form {
		padding: 36px 22px;
	}

	.profile-row {
		grid-template-columns: 1fr;
	}

	.profile-label {
		padding: 10px 18px;
	}

	.profile-value {
		padding: 12px 18px;
	}

	.history-item {
		grid-template-columns: 30px 1fr;
	}

	.history-text {
		grid-column: 2;
	}

	.to-top {
		right: 16px;
		bottom: 16px;
		width: 46px;
		height: 46px;
	}
}

/* ------------------------------------------------------------
   アニメーション抑制設定への対応
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.hero-item,
	.reveal {
		opacity: 1;
		transform: none;
		animation: none;
		transition: none;
	}

	.hero-media img {
		animation: none;
	}

	.service-card,
	.service-media img,
	.btn,
	.nav-cta-btn,
	.to-top {
		transition: none;
	}
}

/* ============================================
   HAPREAT追加スタイル（トップページ用）
   ============================================ */

:root {
	--color-purple: #b79ce0;       /* パープル（ペットアクセ用） */
	--color-purple-deep: #8f6fc7;  /* パープルの影面 */
}

/* ヒーローの機体写真 */
.hero-media img {
	border-radius: var(--radius);
	background: #fff;
	box-shadow: 0 12px 32px rgba(63, 74, 90, 0.12);
}

/* わたあめ・LEKE VRの写真並び */
.cotton-photos {
	display: flex;
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 32px;
}
.cotton-photos img {
	width: min(360px, 100%);
	height: auto;
	border-radius: var(--radius);
	border: 1px solid var(--color-line);
}

/* ラインナップカード（機種テーマカラー） */
.lineup-card {
	position: relative;
	border-top: 6px solid var(--color-line);
}
.lineup-card .lineup-media img {
	object-fit: contain;
	background: #fff;
}
.lineup-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: var(--color-ink);
	border-radius: 999px;
	padding: 4px 12px;
}
.card-pink   { border-top-color: var(--color-pink); }
.card-pink   .lineup-badge { background: var(--color-pink-deep); }
.card-yellow { border-top-color: var(--color-yellow); }
.card-yellow .lineup-badge { background: var(--color-yellow-deep); }
.card-blue   { border-top-color: var(--color-blue); }
.card-blue   .lineup-badge { background: var(--color-blue-deep); }
.card-mint   { border-top-color: var(--color-mint); }
.card-mint   .lineup-badge { background: var(--color-mint-deep); }
.card-purple { border-top-color: var(--color-purple); }
.card-purple .lineup-badge { background: var(--color-purple-deep); }

/* オンラインショップのボタン並び */
.shop-actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ヒーロー：縦型動画（PC） */
.hero-media .video-portrait {
	aspect-ratio: 9 / 16;
	width: min(320px, 100%);
	margin: 0 auto;
	overflow: hidden;
	border-radius: var(--radius);
	background: #000;
	box-shadow: 0 12px 32px rgba(63, 74, 90, 0.18);
}
.hero-media .video-portrait iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
@media (max-width: 768px) {
	.hero-media .video-portrait {
		width: min(240px, 80%);
	}
}

/* ヒーロー背景動画（縦型動画を拡大トリミングして全面に敷く） */
.hero-has-video {
	background: #1c202c;
}
.hero-video-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
}
.hero-video-bg iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: max(100%, calc(100vh * 0.5625));
	aspect-ratio: 9 / 16;
	border: 0;
}
/* 文字を読みやすくする暗めのオーバーレイ */
.hero-video-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(28, 32, 44, 0.52);
}
.hero-has-video .hero-inner {
	position: relative;
	z-index: 1;
}
.hero-has-video .hero-title,
.hero-has-video .hero-lead {
	color: #fff;
}
.hero-has-video .btn-ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.7);
}
.hero-has-video .hero-ground {
	display: none;
}

/* ============================================
   修正パッチ（動画の焼き込み黒帯対応・画像のcover統一）
   ============================================ */

/* 動画は16:9ファイル中央47%だけが実映像のため、黒帯の外側までズームして切り落とす */
.hero-video-bg iframe {
	width: max(213%, calc(100vh * 1.78));
	aspect-ratio: 16 / 9;
}

/* 画像は固定比率＋cover（背景画像と同じトリミング挙動）に統一 */
.lineup-card .lineup-media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.lineup-card .lineup-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cotton-photos img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ============================================
   ヘッダー崩れ修正（段階レスポンシブ）・ヒーローボタン修正
   ============================================ */
.site-logo .logo-text {
	white-space: nowrap;
}
.nav-link {
	white-space: nowrap;
}
.nav-cta-btn {
	white-space: nowrap;
}
/* 段階1: 余白を詰める */
@media (max-width: 1400px) and (min-width: 1101px) {
	.nav-list { gap: 8px; }
	.nav-link { padding: 8px 6px; font-size: 14px; }
	.nav-cta-btn { padding: 8px 16px; }
}
/* 段階2: さらに縮小 */
@media (max-width: 1240px) and (min-width: 1101px) {
	.nav-link { font-size: 13px; }
}
/* 以下1100pxでハンバーガーメニューに切替 */

/* ヒーローのお問い合わせボタン（白背景に白文字になる問題の修正） */
.hero-has-video .btn-ghost {
	color: #fff;
	background-color: rgba(28, 32, 44, 0.45);
	border-color: rgba(255, 255, 255, 0.7);
	box-shadow: none;
}

/* わたあめセクション：PCはテキスト｜画像の2カラム */
.cotton-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 40px;
	align-items: center;
	text-align: left;
	margin-top: 8px;
}
.cotton-grid .about-body {
	margin: 0;
	max-width: none;
}
.cotton-grid .cotton-photos {
	margin-top: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.cotton-grid .cotton-photos img {
	width: 100%;
}
@media (max-width: 768px) {
	.cotton-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* ラインナップカードのバッジが画像の下に隠れる問題の修正 */
.lineup-badge {
	z-index: 2;
}
.lineup-card .lineup-media {
	position: relative;
	z-index: 0;
}

/* ============================================
   下層ページ共通スタイル（案3配色）
   ============================================ */
.sub-page {
	--sub-accent: var(--color-pink-deep);
	--sub-ink: var(--color-ink);
	--sub-soft: var(--color-bg-soft);
	--sub-line: var(--color-line);
	--sub-radius: var(--radius);
}
.sub-page {
	color: var(--sub-ink);
}
.sub-inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 24px;
}
.sub-hero {
	padding: calc(var(--header-h, 72px) + 56px) 0 48px;
	background: var(--sub-soft);
}
.sub-hero-en {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--sub-accent);
	margin-bottom: 10px;
}
.sub-hero-title {
	font-size: clamp(26px, 3.4vw, 40px);
	font-weight: 800;
	line-height: 1.4;
	margin-bottom: 14px;
}
.sub-lead {
	max-width: 760px;
	line-height: 1.9;
}
.sub-section {
	padding: 56px 0 8px;
}
.sub-section p {
	line-height: 1.9;
	margin-bottom: 1em;
}
.sub-h2 {
	font-size: clamp(20px, 2.4vw, 28px);
	font-weight: 800;
	line-height: 1.5;
	margin-bottom: 22px;
	padding-left: 14px;
	border-left: 5px solid var(--sub-accent);
}
.sub-desc {
	margin-bottom: 20px;
}
.two-col {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 36px;
	align-items: start;
	margin-bottom: 24px;
}
.two-col-media img {
	display: block;
	width: 100%;
	border-radius: var(--sub-radius);
	border: 1px solid var(--sub-line);
	margin-bottom: 14px;
}
.feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 8px 0 24px;
}
.feature-grid-4 {
	grid-template-columns: repeat(4, 1fr);
}
.feature-grid-1col {
	grid-template-columns: 1fr;
	gap: 12px;
}
.feature-item {
	background: #fff;
	border: 1px solid var(--sub-line);
	border-radius: var(--sub-radius);
	padding: 20px;
}
.feature-item h3 {
	font-size: 15px;
	font-weight: 800;
	line-height: 1.5;
	margin-bottom: 8px;
}
.feature-item p {
	font-size: 14px;
	line-height: 1.8;
	margin-bottom: 0;
}
.spec-table {
	width: 100%;
	border-collapse: collapse;
	margin: 8px 0 24px;
	background: #fff;
}
.spec-table th,
.spec-table td {
	border: 1px solid var(--sub-line);
	padding: 12px 16px;
	font-size: 14px;
	text-align: left;
	line-height: 1.7;
}
.spec-table th {
	width: 220px;
	background: var(--sub-soft);
	font-weight: 700;
}
.photo-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-bottom: 14px;
}
.photo-strip-2 {
	grid-template-columns: 1fr 1fr;
}
.photo-strip img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--sub-radius);
	border: 1px solid var(--sub-line);
	margin-bottom: 0;
}
.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 8px 0 24px;
	padding: 0;
	list-style: none;
}
.tag-list li {
	border: 1px solid var(--sub-line);
	background: #fff;
	border-radius: 999px;
	padding: 8px 18px;
	font-size: 13px;
	font-weight: 700;
}
.note {
	font-size: 12px;
	opacity: 0.7;
	margin-bottom: 24px;
}
.btn-row {
	margin-top: 24px;
}
.cta-band {
	margin-top: 64px;
	padding: 56px 0 72px;
	background: var(--sub-soft);
	text-align: center;
}
.cta-band p {
	margin-bottom: 20px;
	font-weight: 700;
	line-height: 1.9;
}
.sub-btn {
	display: inline-block;
	padding: 14px 40px;
	border-radius: 999px;
	background: var(--sub-accent);
	color: #fff;
	font-weight: 800;
}
.sub-btn:hover {
	opacity: 0.85;
}
/* ラインナップカードの詳細リンク */
.card-more {
	margin-top: 10px;
	font-weight: 700;
	font-size: 14px;
}
.card-more a {
	color: var(--sub-accent);
}
@media (max-width: 768px) {
	.two-col {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.feature-grid,
	.feature-grid-4 {
		grid-template-columns: 1fr 1fr;
	}
	.spec-table th {
		width: 35%;
	}
	.photo-strip {
		grid-template-columns: 1fr 1fr;
	}
}

/* トップページのカードリンク */
.service-title a { color: inherit; text-decoration: none; }
.card-more a { color: var(--color-pink-deep); }
.card-more a.btn { color: #fff; }

:root {
	--dd-line: var(--color-line);
	--dd-ink: var(--color-ink);
	--dd-soft: var(--color-bg-soft);
	--dd-accent: var(--color-pink-deep);
	--dd-radius: 14px;
}
/* ============================================
   ヘッダードロップダウン（自販機ラインナップ）
   ============================================ */
.nav-item.has-sub {
	position: relative;
}
.nav-sub {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	min-width: 260px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--dd-line);
	border-radius: var(--dd-radius);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	z-index: 30;
}
.nav-item.has-sub:hover .nav-sub,
.nav-item.has-sub:focus-within .nav-sub {
	opacity: 1;
	visibility: visible;
}
.nav-sub li a {
	display: block;
	padding: 11px 20px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--dd-ink);
	white-space: nowrap;
	text-decoration: none;
}
.nav-sub li a:hover {
	background: var(--dd-soft);
	color: var(--dd-accent);
}
@media (max-width: 1100px) {
	.nav-sub {
		position: static;
		transform: none;
		opacity: 1;
		visibility: inherit;
		border: 0;
		box-shadow: none;
		background: transparent;
		min-width: 0;
		padding: 0 0 4px 18px;
	}
	.nav-sub li a {
		padding: 8px 0;
	}
}

/* アンカー着地位置を固定ヘッダー分下げる */
#lineup,
#lekevr,
#cottoncandy {
	scroll-margin-top: calc(var(--header-h, 72px) + 20px);
}

/* 下層ページはフッターのCTAと重複するため本文側のCTA帯を非表示 */
.sub-page .cta-band {
	display: none;
}

/* ラインナップカード全体をリンク化 */
a.service-card {
	display: block;
	color: inherit;
	text-decoration: none;
}
.card-more span {
	color: var(--color-pink-deep);
	font-weight: 700;
}

/* フッター：本文との区切りを明確に（背景色を変えて上に余白を追加） */
.site-footer {
	background-color: #e6efe9;
	margin-top: 72px;
}
.footer-cta {
	padding-top: 8px;
}

/* お問い合わせフォーム（見た目のみ・本実装時にWP側へ接続） */
.sub-form {
	max-width: 680px;
}
.form-row {
	margin-bottom: 22px;
}
.form-row label {
	display: block;
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 8px;
}
.form-row .req {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	font-size: 11px;
	color: #fff;
	background: var(--sub-accent);
	border-radius: 4px;
	vertical-align: 1px;
}
.form-row input,
.form-row textarea {
	width: 100%;
	padding: 12px 14px;
	font-size: 15px;
	font-family: inherit;
	color: var(--sub-ink);
	background: #fff;
	border: 1px solid var(--sub-line);
	border-radius: calc(var(--sub-radius) / 2);
}
.form-row input:focus,
.form-row textarea:focus {
	outline: 2px solid var(--sub-accent);
	outline-offset: 0;
	border-color: transparent;
}
.form-submit {
	margin-top: 32px;
	text-align: center;
}
.form-submit .sub-btn {
	border: 0;
	cursor: pointer;
	font-size: 16px;
	font-family: inherit;
	padding: 16px 64px;
}

/* 下層ページ末尾の余白（フォーム・ボタン下が詰まる問題の対策） */
.sub-page {
	padding-bottom: 72px;
}
.sub-page .cta-band {
	margin-bottom: -72px;
}

/* わたあめ・LEKE VRの「詳しく見る」ボタンを中央寄せ */
.about .card-more {
	text-align: center;
	margin-top: 28px;
}
/* #cottoncandy へのアンカー着地位置（既存のscroll-margin対象に含まれているが明示） */

/* フッター背景をはっきり区別できる淡グリーングレーに（濃色は取り消し） */
.site-footer {
	background-color: #dce9e2;
}

/* ヘッダーがstickyで場所を取るため、下層ヒーローのヘッダー分かさ上げは不要 */
.sub-hero {
	padding-top: 56px;
}

/* 480px以下のみ有効な改行 */
.br-480 {
	display: none;
}
@media (max-width: 480px) {
	.br-480 {
		display: inline;
	}
}

/* スマホのヒーロー内側余白 */
@media (max-width: 768px) {
	.hero-inner {
		padding: 0 15px;
	}
}