@charset "utf-8";
/* CSS Document */
/* =============================
   Base
============================= */
:root {
--headerH-expanded: 160px;   /* 展開時ヘッダー高 */
--headerH-compact:   100px;   /* 縮小時ヘッダー高 */
--headerH-current: var(--headerH-expanded);
--nav-lift-compact: -23px; /* ← 好みで -10〜-18px あたり */
--footerH: 72px;
--overlay-lift: 14vh;   /* 例: 6vh, 8vh, 12vh など */
}
html {
	scroll-behavior: smooth;
} /* なめらかスクロール */
body {
	margin: 0;
	overflow-x: hidden;
	font-family: "honoka-antique-maru", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 15pt;
}
h1 {
	margin: 10px 0 10px 0;
}
h2 {
	margin: 15px 0 15px 0;
	color: #2f8590;
	font-weight: 500;
	text-align: center;
}
.midashi {
	text-align: center;
}
/* compact時に現在値を切替 */
body.compact {
--headerH-current: var(--headerH-compact);
}
/* =============================
   Background layers
   （最背面→前面へ）
============================= */
.background {
	position: fixed;
	inset: 0 0 0 0;
	width: 200%;
	height: 100%;
	background: repeating-linear-gradient(90deg, #fef3e6 0 20px, #fbe5cc 20px 40px);
	background-position: var(--bg-shift-bg, 0px) 0;  /* 背景用 */
	background-repeat: repeat;
	z-index: -4;
}
#hero {
	position: fixed;
	top: var(--headerH-current);       /* ヘッダーの直下から */
	left: 0;
	right: 0;
	width: 100vw;
	height: calc(100vh - var(--headerH-current));
	overflow: hidden;
	z-index: -2;                 /* ← cityscape(-3)より前、背景(-4)より後ろ */
	display: grid;
	place-items: start center;   /* ← 縦は上寄せ、横は中央 */
	padding-top: 12vh;           /* ← 真ん中より少し上に調整 */
}
.overlay-fixed {
	position: fixed;                       /* ビューポート基準：親のz-indexに縛られない */
	top: var(--headerH-current);
	left: 0;
	right: 0;
	height: calc(100vh - var(--headerH-current));
	display: grid;
	place-content: center;                 /* 中央基準 */
transform: translateY(calc(-1 * var(--overlay-lift)));
	text-align: center;
	pointer-events: none;                  /* 下の動画やリンクの操作を妨げない */
	z-index: 0;                            /* ← 重要：動画(-2)・city(-1)より前、section(1)より後ろ */
}
.hero-spacer {
	height: 100vh;
}
section, .hero-spacer {
	scroll-margin-top: calc(var(--headerH-expanded) + 12px);/* 余白ちょい足し。ヘッダーが縮む前でも被らないように“展開時”ベースで確保 */
}
/* 昼・夜どちらも同じ座標・サイズで重ねる */
#bg-video, #bg-video-night {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	transition: opacity .6s linear;
}
/* 初期：昼=1 / 夜=0（夜は透明） */
#bg-video {
	opacity: 1;
	z-index: 1;
}
#bg-video-night {
	opacity: 0;
	z-index: 0;
}
/* 固定化トリガー後（= body.compact 以降）は夜を前面にフェードイン */
body.compact #bg-video {
	opacity: 0;
}
body.compact #bg-video-night {
	opacity: 1;
}
.cityscape {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 200%;
	height: 300px;
	background: url('images/cityscape.png') repeat-x bottom;
	background-size: cover;
	transform: translateX(0);
	z-index: -1;                       /* ヒーローより前面で常に見える */
}
/* =============================
   Header (always on top)
============================= */
header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--headerH-current, 120px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #000;
	padding: 10px;
	text-align: center;
	border-bottom: 1px solid #e5e7eb;
	z-index: 10000;                     /* 最上面 */
	transition: height .3s ease, padding .3s ease, background .3s ease;
	background: #fff;
}
/* ヘッダーの中に、背景と同じ縞を敷く */
/* 昼のしましま（下地） */
header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: repeating-linear-gradient( 90deg, #fcf9f4 0 20px,   /* 昼① */ #dbf2e8 20px 40px /* 昼② */
);
	background-repeat: repeat;
	background-position: var(--bg-shift-header, 0px) 0; /* ← 既存の動きも同期 */
	will-change: background-position, opacity;
	opacity: calc(1 - var(--stripeNight, 0));           /* 0→昼  / 1→夜 */
	transition: opacity .3s linear;
}
/* 夜のしましま（上に重ねてフェードイン） */
header::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: repeating-linear-gradient( 90deg, #fadbda 0 20px,   /* 夜① */ #fdeeed 20px 40px /* 夜② */
);
	background-repeat: repeat;
	background-position: var(--bg-shift-header, 0px) 0; /* 同期して動く */
	will-change: background-position, opacity;
	opacity: var(--stripeNight, 0);                      /* 0→非表示 / 1→表示 */
	transition: opacity .3s linear;
}
/* ロゴは位置そのまま。compact時に小さくなるだけ */
header h1 img {
	height: 90px;                       /* 展開時の見た目 */
	width: auto;
	transition: transform .25s ease, height .25s ease;
}
body.compact header h1 img {
	transform: scale(0.66);             /* 2/3 に縮小 */
	transform-origin: center;
}
/* Nav */
nav a {
	color: #2f8590;
	margin: 0 20px;
	text-decoration: none;
	white-space: nowrap;
	display: inline-block; /* transform有効に */
	transition: color 0.25s ease;
}
nav a:hover {
	color: #6eb998;
	animation: bounce 0.4s ease;
}
@keyframes bounce {
0% {
transform: translateY(0);
}
30% {
transform: translateY(-4px);
} /* ピョンと上に */
60% {
transform: translateY(0);
}    /* 戻る */
80% {
transform: translateY(-2px);
} /* 小さく跳ね返り */
100% {
transform: translateY(0);
}
}
/* compact時は少しだけ上に詰める（任意） */
header nav {
	position: relative;
	transition: transform .25s ease;
}
body.compact header nav {
	transform: translateY(var(--nav-lift-compact));
}
/* =============================
   Content blocks
============================= */
.overlay {
	position: fixed;
	top: var(--headerH-current);
	left: 0;
	right: 0;
	height: calc(100vh - var(--headerH-current));
	display: grid;
	place-content: center;  /* ど真ん中配置 */
transform: translateY(calc(-1 * var(--overlay-lift))); /* ちょい上に */
	z-index: 50;             /* ← cityscape(-1)より前、section(1)より下 */
	text-align: center;
	pointer-events: none;   /* クリックは下へ通す（必要なら外してOK） */
}
section {
	position: relative;
	margin: 50px auto;
	max-width: 500px;
	padding: 15px 30px 15px 30px;
	background: rgba(255,255,255,0.8);
	backdrop-filter: blur(6px);
	border-radius: 10px;
	z-index: 100;
}
p {
	text-indent: 0;        /* インデント無し */
	margin-left: 0;        /* 左寄せ */
	line-height: 1.6;
}
p strong {
	font-weight: 700;      /* 太字 */
}
.dot {
	color: #a1dac0;        /* ●の色（お好みで変更） */
	font-size: 0.7em;      /* 少し小さめ */
	margin-right: 6px;     /* 文字との間隔 */
}
.name {
	text-align: right;
}
/* Gallery */
.gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 常に3列 */
	gap: 1rem;
}
.gallery img {
	width: 100%;   /* ← 70%だと余白が出るので列幅に合わせる */
	border-radius: 8px;
	transition: transform 0.3s;
}
/* ===== company table: modern look ===== */
#company {
	overflow-x: auto;   /* モバイルで横スクロールは許容 */
}
#company table {
	margin: 25px 0 15px 0;
	width: 100%;        /* 親要素に合わせる */
	max-width: 100%;    /* はみ出さない */
	border: none;
	border-collapse: separate;
	border-spacing: 0;
	background: rgba(255,255,255,0.85);
	backdrop-filter: blur(4px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.06);
	border-radius: 12px;
	overflow: hidden;
	table-layout: fixed; /* 幅を親にフィットさせやすくする */
}
#company th {
	width: 30%;          /* 左列を30%に固定 */
	text-align: center;
	font-weight: normal;
	color: #222;
	white-space: nowrap;
	background: #fff;
	padding: 14px 18px;
	border: none;
}
#company td {
	width: 70%;          /* 右列は残りを使う */
	padding: 14px 18px;
	border: none;
	color: #111;
	word-break: break-word; /* 長文を折り返し */
}
/* 行のセパレーター（うっすら） */
#company tbody tr:not(:first-child) th, #company tbody tr:not(:first-child) td {
	border-top: 1px solid rgba(0,0,0,0.07);
}
/* うすいストライプ（テーマに合わせて淡いピンク） */
#company tbody tr:nth-child(even) td {
	background: rgba(250, 219, 218, 0.18);  /* #fadbda を薄く */
}

/* ホバーでさりげなく強調（PC向け） */
@media (hover:hover) {
#company tbody tr:hover td {
	background: rgba(250, 219, 218, 0.28);
}
}
/* ほんの少しの余白と角を整える（全体） */
#company h2 {
	margin-bottom: 14px;
}
#contact {
	margin-bottom: 60px;
}
/* Form */
form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 640px;
	margin: 0 auto 20px auto;
}
form input, form textarea {
	padding: .5rem;
	font-size: 1rem;
}
form button {
	padding: .75rem;
	background: #2f8590;
	color: #fff;
	border: none;
	cursor: pointer;
}
form label {
	font-size: .95rem;
	margin: 8px 0 4px;
	display: block;
}
form input, form textarea {
	padding: 0.6rem 0.8rem;
	border: 1px solid rgba(0,0,0,.15);
	border-radius: 10px;
	background: #fff;
}
form input:focus, form textarea:focus {
	outline: none;
	border-color: rgba(0,0,0,.35);
	box-shadow: 0 0 0 4px rgba(250,219,218,.25); /* テーマ色に合わせたフォーカス */
}
form button {
	padding: 0.75rem 1.2rem;
	border-radius: 999px;
	font-weight: 700;
}
/* Footer */
footer {
	padding: 0 0 30px 0;
	font-size: 12pt;
	background: none;
	text-align: center;
}
/* =============================
   Dog walker (front of content)
============================= */
.walker {
	position: fixed;
	bottom: 10px;
	left: 0;
	width: 200px;
	z-index: 1000;                      /* ヘッダーより下、コンテンツより上 */
	will-change: transform;
}
.walker img {
	width: 100%;
	display: block;
}
/* =============================
   Optional: at-bottom footer reveal
   （必要なら body.at-bottom をJSで付与）
============================= */
.site-footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--footerH);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
	background: none;
	border-top: 1px solid rgba(0,0,0,.08);
	color: #fff;
	transform: translateX(-100%);       /* 初期は隠す */
	transition: transform .45s ease;
	z-index: 5;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.9), 2px 2px 6px rgba(0,0,0,0.8);
}
.site-footer a {
	color: #fff;
	text-decoration: none;
	font-weight: 400;
}
.site-footer a:hover {
	text-decoration: underline;
}
/* いまの fixed フッター指定を削除 */
.site-footer2{
  position: static;   /* ← fixed ではなく通常フロー */
  transform: none;    /* ← アニメーション用 transform も不要 */
  height: auto;       /* 自然な高さ */
  background: #f9f9f9;
  border-top: 1px solid #ddd;
  color: #333;
  padding: 20px;
  text-align: center;
}
.site-footer2 a{
  color: #333;
  text-decoration: none;
  margin: 0 8px;
}
.site-footer2 a:hover{
  text-decoration: underline;
}

.cityscape {
	transition: transform .35s ease;
}
body.at-bottom .site-footer {
	transform: translateX(0);
}
body.at-bottom .cityscape {
transform: translateY(calc(-1 * var(--footerH)));
}

/* =============================
   Responsive
============================= */
@media (max-width: 520px) {
body.compact {
--headerH-current: var(--headerH-compact);
}
header {
	height: var(--headerH-current);
}
body.compact header h1 img {
	transform: scale(0.58);
}
nav a {
	margin: 0 12px;
}
}