/* =========================================
   Front Page / ひだまり トップページ
   参考：TCD114（QUALIA）型レイアウト
   ・front-page.php のセクション用（.hd- 接頭辞）
========================================= */

:root{
	--font-en:"Cormorant Garamond","Shippori Mincho",serif;
	--hd-green:#6f7f55;
	--hd-brown:#8a6a48;
	--hd-en-color:#d8b98c;
}

/* トップページはヘッダーが透過でヒーローに重なるため、
   共通の上余白（.head-margin）を打ち消す */
body.home .head-margin{
	margin-top:0;
}

/* ---------- 共通：矢印 ---------- */
.hd-arrow{
	display:inline-block;
	flex:none;
	width:9px;
	height:9px;
	margin-left:6px;
	border-top:1.5px solid currentColor;
	border-right:1.5px solid currentColor;
	transform:rotate(45deg);
}

/* ---------- 画像が無い時の暖色プレースホルダー ---------- */
.is-empty{
	background-image:
		radial-gradient(circle at 28% 30%, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 42%),
		linear-gradient(135deg, #f6d9a8 0%, #eab469 55%, #d78d3c 100%);
}
.is-empty.is-alt,
.hd-tile.is-alt.is-empty{
	background-image:
		radial-gradient(circle at 70% 25%, rgba(255,255,255,.5) 0, rgba(255,255,255,0) 40%),
		linear-gradient(135deg, #d9e0c3 0%, #a9b98a 55%, #7d8f5f 100%);
}

/* =========================================
   Hero
========================================= */
.hd-hero{
	position:relative;
	height:100vh;
	min-height:620px;
	overflow:hidden;
	color:var(--color-main);
	background:#efe6d6;
}

/* 写真の上下だけに薄いオレンジのグラデーションを重ねる（中央は写真そのまま） */
.hd-hero::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(180deg, rgba(255,170,70,.55) 0%, rgba(255,170,70,0) 32%, rgba(255,170,70,0) 68%, rgba(255,170,70,.55) 100%);
	pointer-events:none;
}

.hd-hero-bg{
	position:absolute;
	inset:0;
	background-size:cover;
	background-position:center;
}

.hd-hero-bg.is-empty{
	background-image:
		radial-gradient(circle at 78% 22%, rgba(255,244,214,.95) 0, rgba(255,236,190,.55) 14%, rgba(255,236,190,0) 40%),
		linear-gradient(165deg, #f2c886 0%, #e39a45 48%, #a9682a 100%);
}

/* [grm_slider] をヒーロー背景として全面に広げる */
.hd-hero-bg .grm-slider,
.hd-hero-bg .grm-slider-viewport,
.hd-hero-bg .grm-slider-track,
.hd-hero-bg .grm-slider-slide,
.hd-hero-bg .grm-slider-picture,
.hd-hero-bg .grm-slider-picture img{
	height:100% !important;
}
.hd-hero-bg .grm-slider-picture img{
	object-fit:cover;
}
.hd-hero-bg .grm-slider-arrow,
.hd-hero-bg .grm-slider-dots,
.hd-hero-bg .grm-slider-caption{
	display:none !important;
}
/* 縦書きキャッチコピー */
/* .site-main h1（page.css）に負けないよう .site-main を付けている */
.site-main .hd-hero-copy{
	position:absolute;
	z-index:2;
	top:50%;
	right:clamp(76px, 7vw, 130px);
	transform:translateY(-50%);
	margin:0;
	writing-mode:vertical-rl;
	white-space:nowrap;
	font-size:clamp(26px, 3vw, 42px);
	font-weight:500;
	line-height:1.8;
	letter-spacing:.3em;
	color:var(--color-main);
	/* 文字のまわりに白いぼかしの縁（重ねるほど濃く、広がる） */
	text-shadow:
		0 0 .12em #fff,
		0 0 .12em #fff,
		0 0 .3em #fff,
		0 0 .3em rgba(255,255,255,.9),
		0 0 .6em rgba(255,255,255,.8);
}
.hd-hero-copy span{
	display:block;
}
/* 2行目（右の列が1行目）を少し下げて、縦書きらしい段差をつける */
.hd-hero-copy span + span{
	margin-top:1em;
}

/* 最新のお知らせ（ヒーロー左下） */
.hd-hero-news{
	position:absolute;
	z-index:2;
	left:40px;
	bottom:40px;
	display:flex;
	align-items:center;
	gap:18px;
	max-width:calc(100% - 200px);
	padding:14px 30px;
	border:1px solid rgba(90,61,40,.22);
	border-radius:var(--radius-full);
	background:rgba(255,252,246,.72);
	-webkit-backdrop-filter:blur(6px);
	backdrop-filter:blur(6px);
	font-size:16px;
	line-height:1.5;
	color:var(--color-main);
}
.hd-hero-news:hover{
	background:rgba(255,252,246,.95);
}
.hd-hero-news time{
	flex:none;
	letter-spacing:.08em;
}
.hd-hero-news span{
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}



/* =========================================
   Loader / ローディング演出
   ・.hd-loading は header.php のインラインJSが <html> に付与
   ・閉じる処理は assets/js/loader.js
========================================= */
#hd-loader{
	position:fixed;
	inset:0;
	z-index:100000;
	display:none;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	background:var(--color-cream);
	transition:opacity 1s ease, visibility 1s ease;
}
html.hd-loading{
	overflow:hidden;
}
html.hd-loading #hd-loader{
	display:flex;
}
#hd-loader.is-hide{
	opacity:0;
	visibility:hidden;
}

.hd-loader-glow{
	position:absolute;
	top:50%;
	left:50%;
	width:min(560px, 120vw);
	aspect-ratio:1 / 1;
	margin:calc(min(560px, 120vw) / -2) 0 0 calc(min(560px, 120vw) / -2);
	border-radius:50%;
	background:radial-gradient(circle, rgba(232,144,31,.30) 0%, rgba(232,144,31,0) 68%);
	animation:hd-loader-glow 2.6s ease-in-out infinite;
}

/* キャッチコピー（ロゴの前に表示 → 消えてからロゴ） */
.hd-loader-copy{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	margin:0;
	writing-mode:vertical-rl;
	white-space:nowrap;
	font-size:clamp(22px, 3vw, 34px);
	font-weight:500;
	line-height:1.8;
	letter-spacing:.3em;
	color:var(--color-main);
}
.hd-loader-copy span{
	display:block;
	opacity:0;
	animation:hd-loader-copy 2.9s .2s ease forwards;
}
.hd-loader-copy span + span{
	margin-top:1em;
	animation-duration:2.4s;
	animation-delay:.7s;
}

.hd-loader-logo{
	position:relative;
	width:min(200px, 58vw);
	height:auto;
	opacity:0;
	animation:hd-loader-in 1.1s 2.9s ease forwards;
}

.hd-loader-bar{
	position:relative;
	width:150px;
	height:2px;
	margin-top:38px;
	overflow:hidden;
	background:rgba(90,61,40,.14);
}
.hd-loader-bar span{
	display:block;
	width:100%;
	height:100%;
	background:var(--color-accent);
	transform:scaleX(0);
	transform-origin:left center;
	animation:hd-loader-bar 1.6s 3.1s cubic-bezier(.55,0,.25,1) forwards;
}

@keyframes hd-loader-copy{
	0%  { opacity:0; transform:translateY(-14px); }
	30% { opacity:1; transform:translateY(0); }
	78% { opacity:1; transform:translateY(0); }
	100%{ opacity:0; transform:translateY(0); }
}
@keyframes hd-loader-in{
	from{ opacity:0; transform:translateY(10px); }
	to  { opacity:1; transform:translateY(0); }
}
@keyframes hd-loader-bar{
	to{ transform:scaleX(1); }
}
@keyframes hd-loader-glow{
	0%,100%{ transform:scale(.92); opacity:.75; }
	50%    { transform:scale(1.06); opacity:1; }
}

/* ローディング明け：ヒーローの背景がゆっくり寄り、キャッチコピーが降りてくる */
.hd-hero-bg{
	transition:transform 7s cubic-bezier(.2,.6,.2,1);
}
html.hd-loading .hd-hero-bg{
	transform:scale(1.08);
}
.hd-hero-copy span{
	transition:opacity 1.6s ease, transform 1.6s ease;
}
.hd-hero-copy span + span{
	transition-delay:.45s;
}
html.hd-loading .hd-hero-copy span{
	opacity:0;
	transform:translateY(-18px);
}
.hd-hero-news,
.hd-side-tabs{
	transition:opacity 1.2s ease 1.2s;
}
html.hd-loading .hd-hero-news,
html.hd-loading .hd-side-tabs,
html.hd-loading .hd-sp-bar{
	opacity:0;
}

@media (prefers-reduced-motion: reduce){
	#hd-loader,
	.hd-hero-bg,
	.hd-hero-copy span{
		transition:none;
	}
	.hd-loader-copy{
		display:none;
	}
	.hd-loader-glow,
	.hd-loader-logo,
	.hd-loader-bar span{
		animation:none;
		opacity:1;
		transform:none;
	}
}

/* =========================================
   CTA 3 Cards
========================================= */
.hd-cta3{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	background:#fff;
}

.hd-cta3-item{
	display:block;
	background:#fffdf8;
	border-top:5px solid var(--card-color);
	border-left:1px solid var(--color-border);
}
.hd-cta3-item:first-child{ border-left:0; }
.hd-cta3-item.is-orange{ --card-color:var(--color-accent); }
.hd-cta3-item.is-green{  --card-color:var(--hd-green); }
.hd-cta3-item.is-brown{  --card-color:var(--hd-brown); }

.hd-cta3-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:26px 30px;
	color:var(--card-color);
}
.hd-cta3-sub{
	margin:0 0 4px;
	font-size:16px;
	color:var(--color-text);
}
.hd-cta3-title{
	margin:0;
	font-size:20px;
	font-weight:600;
	letter-spacing:.1em;
	line-height:1.5;
}
.hd-cta3-img{
	height:230px;
	background-size:cover;
	background-position:center;
	transition:opacity .3s;
}
.hd-cta3-item:hover .hd-cta3-img{
	opacity:.85;
}

/* =========================================
   共通：見出し（日本語ラベル＋英字タイトル）
========================================= */
.hd-heading{
	margin-bottom:36px;
	text-align:center;
}
.hd-heading-ja{
	margin:0 0 6px;
	font-size:16px;
	letter-spacing:.2em;
	color:var(--color-sub);
}
.hd-heading-en{
	margin:0;
	font-family:var(--font-en);
	font-size:clamp(46px, 7vw, 76px);
	font-weight:500;
	line-height:1.1;
	letter-spacing:.06em;
	color:var(--hd-en-color);
}

/* =========================================
   Intro
========================================= */
.hd-intro{
	padding:130px 0 120px;
	text-align:center;
}
.hd-catch{
	margin:0 0 40px;
	font-size:clamp(22px, 2.8vw, 30px);
	font-weight:500;
	line-height:1.9;
	letter-spacing:.14em;
	color:var(--color-main);
}
.hd-lead{
	max-width:780px;
	margin:0 auto 52px;
	text-align:left;
	line-height:2.3;
}

/* =========================================
   Tiles 2
========================================= */
.hd-tiles2{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
}
.hd-tile{
	position:relative;
	display:flex;
	align-items:flex-end;
	min-height:340px;
	overflow:hidden;
	color:#fff;
	background-size:cover;
	background-position:center;
}
.hd-tile::before{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(180deg, rgba(60,32,8,0) 30%, rgba(60,32,8,.62) 100%);
	transition:background .3s;
}
.hd-tile:hover::before{
	background:linear-gradient(180deg, rgba(60,32,8,.1) 20%, rgba(60,32,8,.72) 100%);
}
.hd-tile-body{
	position:relative;
	padding:0 36px 34px;
}
.hd-tile-ja{
	margin:0 0 2px;
	font-size:16px;
	letter-spacing:.15em;
}
.hd-tile-en{
	margin:0 0 6px;
	font-family:var(--font-en);
	font-size:clamp(38px, 4.6vw, 56px);
	font-weight:500;
	line-height:1.15;
	letter-spacing:.06em;
}
.hd-tile-text{
	margin:0;
	font-size:16px;
}

/* =========================================
   News
========================================= */
.hd-news{
	padding:120px 0;
}
.hd-news-list{
	max-width:800px;
	margin:0 auto 50px;
	padding:0;
	list-style:none;
	border:1px solid var(--color-border);
	background:#fffdf8;
}
.hd-news-list li + li{
	border-top:1px solid var(--color-border);
}
.hd-news-list a{
	display:flex;
	align-items:center;
	gap:32px;
	padding:24px;
}
.hd-news-list a:hover{
	background:rgba(232,144,31,.06);
}
.hd-news-thumb{
	flex:none;
	width:200px;
	aspect-ratio:3 / 2;
	overflow:hidden;
}
.hd-news-thumb img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}
.hd-news-noimg{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	background:var(--color-gray);
	color:var(--color-sub);
	font-family:"Cormorant Garamond", var(--font-mincho);
	font-size:16px;
	letter-spacing:.1em;
}
.hd-news-meta{
	display:flex;
	align-items:center;
	gap:18px;
	margin:0 0 10px;
	font-size:16px;
	color:var(--color-sub);
	letter-spacing:.06em;
}
.hd-news-cat{
	color:var(--color-accent-dark);
}
.hd-news-title{
	margin:0;
	font-weight:600;
	line-height:1.7;
	letter-spacing:.06em;
}
.hd-news-empty{
	padding:36px;
	text-align:center;
	color:var(--color-sub);
}

/* =========================================
   Split（画像＋色パネル）
========================================= */
.hd-split{
	display:grid;
	grid-template-columns:1fr 1fr;
	min-height:480px;
}
.hd-split.is-reverse .hd-split-media{ order:2; }
.hd-split-media{
	background-size:cover;
	background-position:center;
}
.hd-split-panel{
	display:flex;
	align-items:center;
	background:var(--hd-green);
	color:#fff;
}
.hd-split-inner{
	width:100%;
	max-width:560px;
	padding:70px 60px;
	margin:0 auto;
}
.hd-split-ja{
	margin:0 0 4px;
	font-size:16px;
	letter-spacing:.2em;
}
.hd-split-en{
	margin:0 0 26px;
	font-family:var(--font-en);
	font-size:clamp(44px, 5vw, 64px);
	font-weight:500;
	line-height:1.1;
	letter-spacing:.06em;
}
.hd-split-text{
	margin:0 0 30px;
	line-height:2.1;
}
.hd-split-link{
	display:inline-flex;
	align-items:center;
	padding-bottom:6px;
	border-bottom:1px solid rgba(255,255,255,.6);
	letter-spacing:.1em;
}
.hd-split-link:hover{
	opacity:.75;
}

/* =========================================
   Banners
========================================= */
.hd-banners{
	display:grid;
	grid-template-columns:1fr 1fr;
	max-width:800px;
	margin:90px auto 100px;
	border:1px solid var(--color-border);
	background:#fffdf8;
}
.hd-banner{
	display:flex;
	align-items:center;
	gap:20px;
	padding:18px 26px 18px 18px;
}
.hd-banner + .hd-banner{
	border-left:1px solid var(--color-border);
}
.hd-banner:hover{
	background:rgba(232,144,31,.06);
}
.hd-banner-thumb{
	display:flex;
	align-items:center;
	justify-content:center;
	flex:none;
	width:84px;
	height:84px;
	border-radius:var(--radius-sm);
	color:#fff;
}
.hd-banner-thumb.is-tel{  background:var(--color-accent); }
.hd-banner-thumb.is-mail{ background:var(--hd-green); }
.hd-banner-text{
	flex:1;
	font-size:16px;
	line-height:1.9;
}
.hd-banner-text strong{
	font-size:16px;
	font-weight:600;
	letter-spacing:.06em;
	color:var(--color-accent-dark);
}

/* =========================================
   右側固定タブ（全ページ共通：footer.php）
========================================= */
.hd-sp-bar{
	display:none;
}
.hd-side-tabs{
	position:fixed;
	z-index:900;
	top:50%;
	right:0;
	transform:translateY(-100%);
	display:flex;
	flex-direction:column;
}
.hd-side-tab{
	display:flex;
	align-items:center;
	justify-content:center;
	width:58px;
	padding:34px 0;
	writing-mode:vertical-rl;
	font-size:16px;
	letter-spacing:.35em;
	color:#fff;
	transition:opacity .3s;
}
.hd-side-tab:hover{
	opacity:.85;
}
.hd-side-tab.is-orange{ background:var(--color-accent-dark); }
.hd-side-tab.is-green{  background:var(--hd-green); }

/* ページトップボタンが右タブと重ならないように少し上げる */
#page_top{
	right:12px;
	bottom:24px;
}

/* =========================================
   Footer
========================================= */
.grm-footer{
	padding:0;
	background:var(--color-cream);
	color:var(--color-text);
	border-top:1px solid var(--color-border);
}
.hd-footer-main{
	padding:64px 20px 44px;
	text-align:center;
}
.hd-footer-logo img{
	display:inline-block;
	width:200px;
	height:auto;
}
.hd-footer-info{
	margin:24px 0 0;
	font-size:16px;
	line-height:2.1;
}
.hd-footer-info a:hover{
	color:var(--color-accent-dark);
}
.hd-footer-bar{
	background:var(--color-main);
}
.hd-footer-nav{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:10px 34px;
	margin:0;
	padding:24px 20px;
	list-style:none;
}
.hd-footer-nav a{
	color:#fbf6ec;
	font-size:16px;
	letter-spacing:.1em;
}
.hd-footer-nav a:hover{
	color:var(--color-accent);
}
.hd-footer-subnav{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:8px 28px;
	margin:0;
	padding:0 20px 24px;
	list-style:none;
}
.hd-footer-nav + .hd-footer-subnav{
	margin-top:-6px;
}
.hd-footer-subnav a{
	color:rgba(251,246,236,.75);
	font-size:14px;
	letter-spacing:.08em;
}
.hd-footer-subnav a:hover{
	color:var(--color-accent);
}
.grm-footer-copyright{
	padding:22px 20px;
	font-size:16px;
	text-align:center;
	color:var(--color-sub);
	opacity:1;
}

/* =========================================
   SP
========================================= */
.hd-sp-br{ display:none; }

@media (max-width: 991px){
	.hd-cta3{
		grid-template-columns:1fr;
	}
	.hd-cta3-item{
		border-left:0;
	}
	.hd-cta3-img{
		display:none;
	}
	.hd-split{
		grid-template-columns:1fr;
	}
	.hd-split.is-reverse .hd-split-media{ order:0; }
	.hd-split-media{
		min-height:260px;
	}
}

@media (max-width: 767px){
	.hd-sp-br{ display:inline; }

	.hd-hero{
		height:88vh;
		min-height:520px;
	}
	.site-main .hd-hero-copy{
		right:28px;
		font-size:32px;
		letter-spacing:.24em;
	}
	.hd-hero-news{
		left:16px;
		right:16px;
		bottom:20px;
		max-width:none;
		padding:12px 20px;
		gap:12px;
	}

	.hd-intro{
		padding:80px 0 72px;
	}
	.hd-lead{
		line-height:2.1;
		margin-bottom:40px;
	}
	.hd-tiles2{
		grid-template-columns:1fr;
	}
	.hd-tile{
		min-height:260px;
	}
	.hd-tile-body{
		padding:0 24px 26px;
	}

	.hd-news{
		padding:80px 0;
	}
	.hd-news-list a{
		gap:16px;
		padding:16px;
	}
	.hd-news-thumb{
		width:104px;
	}
	.hd-news-meta{
		gap:10px;
		margin-bottom:6px;
		font-size:16px;
	}
	.hd-news-title{
		font-size:16px;
	}

	.hd-split-inner{
		padding:56px 28px;
	}
	.hd-banners{
		grid-template-columns:1fr;
		margin:60px 16px 70px;
	}
	.hd-banner + .hd-banner{
		border-left:0;
		border-top:1px solid var(--color-border);
	}

	/* 右タブはSPでは出さず、下部バー（メール／電話）にする */
	.hd-side-tabs{
		display:none;
	}
	.hd-sp-bar{
		position:fixed;
		z-index:900;
		right:0;
		bottom:0;
		left:0;
		display:flex;
	}
	.hd-sp-bar-item{
		flex:1;
		display:flex;
		align-items:center;
		justify-content:center;
		gap:8px;
		padding:16px 6px;
		font-size:16px;
		letter-spacing:0;
		white-space:nowrap;
		color:#fff;
	}
	.hd-sp-bar-item svg{
		flex:none;
	}
	.hd-sp-bar-item.is-mail{ flex:1.45; background:var(--hd-green); }
	.hd-sp-bar-item.is-tel{  background:var(--color-accent-dark); }
	#page_top{
		bottom:72px;
	}
	.grm-footer{
		padding-bottom:52px;
	}
}