/* =========================================================
	ベース：全画面高さ・本文色
========================================================= */
html, body {
	height: 100%;
}
body {
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	margin: 0;
	color: #111111;
}

/* =========================================================
	トップ画面（ヒーローセクション一式）
========================================================= */

/* ヒーロー全体の土台：全面・白文字・オーバーフロー隠し */
.hero-bg {
	position: relative;
	height: 100vh;
	height: 100svh;        /* iOS対策 */
	width: 100%;
	color: #fff;
	overflow: hidden;
	z-index: 0;
}

/* 背景画像をコンテナにフィットさせる（cover） */
.hero-bg-img,
.hero-bg-img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 丸いぼかし光（共通の見た目＆上下ゆらぎ） */
.hero-bg .blur-circle {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(14px);
	z-index: 1;
	animation: bobY var(--dur, 8s) ease-in-out infinite;
	animation-delay: var(--delay, 0s);
	will-change: transform;
}

/* 丸ぼかし：左下 */
.blur-circle.c1 {
	width: 13vw;
	height: 13vw;
	bottom: -4vh;
	left: -1vh;
	background: radial-gradient(circle, rgba(255,255,255,0.25), rgba(255,255,255,0)) !important;
	--amp: 2vh;
	--dur: 6s;
	--delay: 0s;
}
/* 丸ぼかし：右中 */
.blur-circle.c2 {
	width: 9vw;
	height: 9vw;
	right: -1vh;
	top: 66vh;
	background: radial-gradient(circle, rgba(255,255,255,0.35), rgba(255,255,255,0)) !important;
	--amp: 3vh;
	--dur: 6.5s;
	--delay: .6s;
}
/* 丸ぼかし：右上 */
.blur-circle.c3 {
	width: 7vw;
	height: 7vw;
	right: -3vh;
	top: 4vh;
	background: radial-gradient(circle, rgba(255,255,255,0.45), rgba(255,255,255,0)) !important;
	--amp: 1.2vh;
	--dur: 5.8s;
	--delay: 1.2s;
}
/* 丸ぼかし：中上 */
.blur-circle.c4 {
	width: 5.5vw;
	height: 5.5vw;
	right: 50vw;
	top: -4vh;
	background: radial-gradient(circle, rgba(255,255,255,0.55), rgba(255,255,255,0)) !important;
	--amp: 1.5vh;
	--dur: 4.2s;
	--delay: .3s;
}
/* 丸ぼかし：中左 */
.blur-circle.c5 {
	width: 4vw;
	height: 4vw;
	right: 88vw;
	top: 22vh;
	background: radial-gradient(circle, rgba(255,255,255,0.6), rgba(255,255,255,0)) !important;
	--amp: 1vh;
	--dur: 4s;
	--delay: .9s;
}

/* 丸ぼかし用：上下にふわっと揺れるアニメーション */
@keyframes bobY {
	0%   { transform: translateY(0); }
	50%  { transform: translateY(calc(-1 * var(--amp, 16px))); }
	100% { transform: translateY(0); }
}

/* ヒーロー：陰影＆ハイライト（上質レッドの奥行き感） */
.hero-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(160deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.08) 40%, rgba(0,0,0,.36) 100%),
		radial-gradient(900px 700px at 18% 22%, rgba(255,255,255,.10), rgba(255,255,255,0) 58%);
	pointer-events: none;
}
/* ヒーロー：周辺のビネット（周囲をやや暗く） */
.hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 95% at 50% 55%, rgba(0,0,0,0) 58%, rgba(0,0,0,.28) 100%);
	pointer-events: none;
}

/* ヒーロー前景のサンド画像（ゆっくり上下フロート） */
.hero-sand {
	position: absolute;
	right: 0vw;
	top: -1.2vh;
	width:100vw;
	animation: float 10s ease-in-out infinite;
	z-index: 3;
}

/* ヒーロー内キャッチの位置とタイポ */
.hero-text {
	position: absolute;
	left: 12vw;
	top: 26%;
	text-align: left;
	z-index: 4;
}
.hero-text .catch {
	font-family: "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN",
		"游明朝", "Yu Mincho", "Noto Serif JP", serif;
	font-weight: 600;
	font-size: 3.2vw;
	line-height: 1.5;
	letter-spacing: .08em;
	opacity: .95;
}

/* =========================================================
	News セクション
========================================================= */

/* News全体の背景色と上下余白 */
.news-section {
	background:#ffccd3;
	padding:6.5vh 0 2vh;
}

/* Newsの横並びレイアウト（左：見出し／右：リスト） */
.news-inner {
	width:69%;
	margin:0 auto 5vh;
	display:flex;
	gap:2rem;
	align-items:flex-start;
}

/* 見出し側の縦並びと中央揃え */
.news-head {
	display:flex;
	flex-direction:column;
	gap:1vw;
	padding-top:1vh;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* “NEWS” 大見出し */
.news-head h2 {
	display: block;
	font-size: 6vh;
	font-weight: 700;
	color: #e60000;
	letter-spacing: .03em;
	margin:-1.4vh 0 0;
}
/* “お知らせ” サブ見出し（英字下の日本語） */
.news-head h2 span {
	display: block;
	font-size: 1.8vh;
	font-weight: 500;
	letter-spacing: .06em;
	color: #111;
}

/* “お知らせ一覧へ” のリンク */
.news-head .news-more {
	font-size:1.6vh;
	font-weight:500;
	color:#e60000;
	text-decoration:underline;
	text-underline-offset:0.6vh;
	margin-top: 10vh;
}
.news-head .news-more span {
	color:#e60000;
	font-weight:900;
}
.news-head .news-more:hover { opacity:.8; }

/* 右側：ニュースのリスト枠 */
.news-list {
	flex:1;
	list-style:none;
	margin:0;
	padding:0 2vh;
	border:none;
	border-radius:0;
	background:transparent;
	box-shadow:none;
}

/* リスト項目の1行グリッド＆区切り線 */
.news-list li { list-style:none; }
.news-list li a {
	display:grid;
	grid-template-columns:6vw max-content 1fr 2.6vw; /* 日付 / タグ / タイトル / 矢印 */
	align-items:center;
	gap:1.4vw;
	padding:2.7vh 1vh 2.7vh 2vh;
	text-decoration:none;
	color:#111;
	background:transparent;
	border-top:0.1vw solid rgba(230,0,0,.18);
}
.news-list li:first-child a { border-top:none; }
.news-list li:last-child  a { border-bottom:0.1vw solid rgba(230,0,0,.18); }

/* タイトル（右の本文テキスト） */
.news-list .text{
	font-size:1.15vw;
	font-weight:500;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	justify-self:start;
}

/* カテゴリバッジ（NEWS / EVENT / NEW など） */
.tag{
	display:inline-flex;
	justify-content:center;
	align-items:center;
	width:5em;
	height:1.8em;
	padding:0 .3em;
	border-radius:999px;
	font-size: .8vw;
	font-weight:500;
	line-height:1;
	white-space:nowrap;
	user-select:none;
	border:1px solid transparent;
}
/* バッジ：通常ニュース */
.tag.news{
	background:rgb(244, 249, 255);
	color:#0b63c9;
	border-color:#cfe3ff;
}
/* バッジ：イベント */
.tag.event{
	background:rgb(255, 248, 230);
	color:#b27300;
	border-color:#ffe7ac;
}
/* バッジ：新着 */
.tag.new{
	background:rgb(255, 242, 247);
	color:#d60033;
	border-color:#ffd1dd;
}

/* 日付表記（等幅寄せ） */
.news-list .date {
	font-variant-numeric:tabular-nums;
	font-size:1.15vw;
	justify-self: start;
	white-space:nowrap;
	line-height:1;
}

/* 本文タイトル（再掲／センタリング） */
.news-list .text {
	font-size:1.15vw;
	line-height:1;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	justify-self:start;
	text-align:center;
}

/* 右端の山括弧（→） */
.news-list .chev {
	font-size:1.7vw;
	justify-self:end;
	font-weight:300;
	color:#e60000;
	transition:transform .15s ease;
}
/* 行ホバー時の背景＆矢印のスライド */
.news-list li a:hover { background:rgba(255,255,255,.35); }
.news-list li a:hover .chev { transform:translateX(0.4vw); }

/* =========================================================
	配達セクション（バナー／車アニメ／クリック誘導）
========================================================= */

/* 配達バナー外側の余白 */
.delivery-banner{ margin: 3vh 0 5vh; }

/* 配達バナー本体（角丸・影・ホバーアニメ） */
.delivery-banner .delivery-link{
	width:68%;
	margin:0 auto;
	display:block;
	position:relative;
	overflow:hidden;
	border-radius:2.4vh;
	box-shadow:0 0.5vh 2vh rgba(0,0,0,.06);
	transition: transform .15s ease, box-shadow .15s ease;
}
.delivery-banner .delivery-link:hover{
	transform: translateY(0.4vh);
	box-shadow:0 0.2vh 0.8vh rgba(0,0,0,.1);
}
.delivery-banner img{ display:block; width:100%; height:auto; }

/* 車イラストの初期位置＆可動 */
.car-image{
	position:absolute;
	bottom:0;
	right:-20%;
	max-width:30vh;
	transform: translateX(120%);
	pointer-events:none;
}
/* 走行アニメの付与時 */
.car-image.car-move{
	animation: carDrive 2s ease-out forwards;
}
/* 右→左へ走るアニメーション */
@keyframes carDrive{
	0%   { transform: translateX(120%); }
	100% { transform: translateX(-120vw); }
}

/* 「クリックしてね」などの誘導バッジ */
.click-hint{
	position:absolute;
	left:50%;
	bottom:2.8vh;
	transform:translateX(-50%);
	padding:0.9vw 8vw;
	background:rgba(255,255,255,.8);
	border-radius:999px;
	font-size:1.2vw;
	font-weight:700;
	color:#e60000;
	opacity:0;
	transition: opacity .4s ease;
	pointer-events:none;
	white-space:nowrap;
}

/* =========================================================
	ABOUT セクション（縦レール・見出し・本文）
========================================================= */

/* ABOUT全体のフレーム（背景と余白） */
.about-section{
	position: relative;
	overflow: hidden;
	padding:0 0 8vh;
	background-color: rgb(255, 234, 237);
}

/* ABOUT本文の横幅・中央寄せ・前面化 */
.about-body {
	width: 90%;
	margin: 0 auto;
	text-align: center;
	padding: 2vh 0 0;
	position: relative;
	z-index: 1;
}

/* 小見出しブロック（“ABOUT”＋“カドマルサンドについて”） */
.eyebrow {
	margin: 5vh 0 7vh;
}

/* “ABOUT” 英字の大見出し */
.about-body .eyebrow-main {
	display: block;
	font-size: 6.5vh;
	font-weight: 700;
	color: #e60000;
	letter-spacing: .03em;
}

/* “カドマルサンドについて” サブ見出し */
.about-body .eyebrow-sub {
	display: block;
	font-size: 1.8vh;
	font-weight: 500;
	letter-spacing: .06em;
}

/* メイン見出し（カドがマル〜い…） */
.about-title {
	font-size: 7vh;
	font-weight: 700;
	margin: 1vh 0 8vh;
	color: #333;
	letter-spacing: .12em;
}
/* 見出し内の赤文字を回転演出 */
.about-title .red{
	display: inline-block;
	color: #e60000;
	font-size: 8.5vh;
	transform: rotate(0deg);
	transition: transform 1.1s ease;
}
.about-title.inview .red{ transform: rotate(366deg); }
.about-title.inview .red:nth-of-type(1){ transition-delay: .0s; }
.about-title.inview .red:nth-of-type(2){ transition-delay: .1s; }
.about-title.inview .red:nth-of-type(3){ transition-delay: .2s; }
.about-title.inview .red:nth-of-type(4){ transition-delay: .3s; }
.about-title.inview .red:nth-of-type(5){ transition-delay: .4s; }
.about-title.inview .red:nth-of-type(6){ transition-delay: .5s; }
.about-title.inview .red:nth-of-type(7){ transition-delay: .6s; }

/* ABOUT本文テキスト */
.about-text {
	width: 80%;
	margin:4vh auto 5vh;
	font-size: 3vh;
	line-height: 1.9;
	text-align: center;
}

/* サイドの流れる縦テキストの器（左右） */
.about-rail{
	position: absolute;
	top: 0;
	bottom: 0;
	width: 3vw;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2.2vh, #000 calc(100% - 2.2vh), transparent 100%);
					mask-image: linear-gradient(to bottom, transparent 0, #000 2.2vh, #000 calc(100% - 2.2vh), transparent 100%);
}
.rail-left{ left:0; }
.rail-right{ right:0; }

/* 流れる縦書きテキスト本体（1列） */
.rail-track{
	position:absolute;
	top:0;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	white-space: nowrap;
	letter-spacing:.1em;
	font-weight:800;
	font-size:0.95vw;
	color:#db8f96;
	opacity:.9;
	line-height:1;
	padding:0;
	margin:0;
	will-change: transform;
	transform: translate3d(0,0,0);
	backface-visibility: hidden;
}
/* 同文を上下に複製してループ接続 */
.rail-track::before,
.rail-track::after{
	content: attr(data-text);
	position:absolute;
	left:0;
	line-height:1;
}
.rail-track::before{ top:-100%; }
.rail-track::after { top: 100%; }
.rail-right .up::before{ top:-101%; }
.rail-right .up::after { top: 101%; }

/* 左レール：下方向へ流す */
@keyframes loopDown {
	0%{ transform: translateY(0); }
	100%{ transform: translateY(100%); }
}
.rail-left  .down {
	left:1vw;
	animation: loopDown 12s linear infinite;
}

/* 右レール：上方向へ流す（180度回転で見た目を立て直し） */
@keyframes rightUp {
	0%{ transform: translateY(0) rotate(180deg); }
	100%{ transform: translateY(-100%) rotate(180deg); }
}
.rail-right .up  {
	right:1vw;
	transform-origin: 50% 50%;
	animation: rightUp 12s linear infinite;
}

/* レール脇の細い棒 */
.about-rail .rail-bar {
	position:absolute;
	top:0;
	bottom:0;
	width:0.08vw;
	background:#e1c9cd;
}
.rail-left  .rail-bar{ left:calc(100% - 0.08vw); }
.rail-right .rail-bar{ left:0; }

/* ABOUT内：スマホ用SNS行（PCでは非表示） */
.sns-mobile { display: none; }
.sns-mobile{
	justify-content:center;
	align-items:center;
	gap: 38vw;
	background:rgb(255, 234, 237);
}
.sns-btn{
	display:grid;
	place-items:center;
	width: 18vw;
	height: 18vw;
	border-radius: 50%;
	text-decoration:none;
	background: transparent;
	color: #ffccd3
}
.sns-icon{ width: 70%; height: 70%; fill: currentColor; }
.sns-mobile img{
	width: 60%;
	height: auto;
	display: block;
	color: rgb(255, 204, 211);
}

/* =========================================================
	Mobile 調整（～900px）
========================================================= */
@media (max-width:900px) {
	/* ヒーロー：キャッチと前景サンドの位置調整 */
	.hero-text {
		left: 50%;
		transform: translateX(-46%);
		text-align: left;
		top: 22vh;
	}
	.hero-text .catch{
		font-size: 6.8vw;
		white-space: nowrap;
	}
	.hero-sand{
		left: 50%;
		right: auto;
		top: 21%;
		transform: translateX(-50%);
		width: 90vw;
	}

	/* 丸ぼかし群のサイズ・位置をSP最適化 */
	.blur-circle.c1 { width: 30vw; height: 30vw; bottom: -4vh; left: -2vh; }
	.blur-circle.c2 { width: 26vw; height: 26vw; right: -6vh; top: 60vh; }
	.blur-circle.c3 { width: 18vw; height: 18vw; right: -7vh; top: 1vh; }
	.blur-circle.c4 { width: 12vw; height: 12vw; right: 56vw; top: -2vh; }
	.blur-circle.c5 { width: 10vw; height: 10vw; right: 80vw; top: 20vh; }

	/* ===== News（SP最適化） ===== */
	.news-section { padding:3.2vh 0 2vh; }

	/* Newsの縦並び・余白調整 */
	.news-inner{
		width: 86%;
		margin: 0 auto 2.6vh;
		flex-direction: column;
		gap: 1.6vh;
		align-items: stretch;
	}

	/* 見出し行をグリッド化（タイトル＋右寄せリンク） */
	.news-head{
		width:100%;
		display:grid;
		grid-template-columns: minmax(0,1fr) auto;
		column-gap:.8em;
		align-items:baseline;
		padding-top:.4vh;
	}
	.news-head h2{
		margin: 0;
		display: flex;
		align-items: baseline;
		gap: .35em;
		font-size: 3.4vh;
		letter-spacing: .02em;
		white-space:nowrap;
	}
	.news-head h2 span{
		display: inline-block;
		margin: 0;
		font-size: 1.8vh;
		letter-spacing: .04em;
	}
	.news-head .news-more{
		margin:0;
		font-size: 1.6vh;
		text-underline-offset: .35em;
		margin-right: 2vw;
	}

	/* リスト側の内側余白・線の太さ調整 */
	.news-list { padding:0; }
	.news-list li a{
		grid-template-columns: 17vw max-content minmax(0, 34ch) 2vw;
		gap:0.7vw;
		padding: 1.6vh .6vh;
		border-top: 1px solid rgba(230,0,0,.16);
	}
	.news-list li:first-child a{ border-top: 1px solid rgba(230,0,0,.22); }
	.news-list li:last-child  a{ border-bottom: 1px solid rgba(230,0,0,.22); }
 	.news-list li a > *{ min-width:0; }
	
	/* バッジのサイズ感 */
	.tag{
		padding:0 .2vw;
		width:11vw;
		height:1.7vh;
		font-size: 1.2vh;
		margin: 0 0.5vw;
	}

	/* 日付と本文のサイズ */
	.news-list .date{ font-size: 1.6vh; }
	.news-list .text{
		width: 100%;
		min-width: 0;
		font-size: 1.6vh;
		margin-left: 0.2vw;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: left !important;
		justify-self: start;   
	}

	/* 右端矢印のサイズ */
	.news-list .chev{ font-size: 1.85vh; }

	/* ===== 配達（SP最適化） ===== */
	.delivery-banner{ margin: 2vh 0 2vh; }
	.delivery-banner .delivery-link{
		width:86%;
		margin:0 auto;
		border-radius:1.2vh;
		box-shadow:0 0.5vh 2vh rgba(0,0,0,.05);
	}
	.delivery-banner .delivery-link:hover{ transform: translateY(0.2vh); }

	.car-image{ max-width:12vh; }
	.car-image.car-move{ animation: carDrive 1.5s ease-out forwards; }

	.click-hint{
		bottom:2.1vh;
		font-size:3vw;
	}

	/* ===== ABOUT（SP最適化） ===== */
	.about-section{ padding:0 0 2vh; }
	.about-body {
		margin: 0 auto;
		padding: 2vh 0 0;
	}
	.eyebrow { margin: 2vh 0 3vh; }
	.about-body .eyebrow-main { font-size: 3.4vh; }
	.about-body .eyebrow-sub  { font-size: 1.8vh; }

	.about-title {
		font-size: 2.9vh;
		margin: 1vh 0 4vh;
		letter-spacing: .08em;
	}
	.about-title .red{ font-size:3.7vh; }

	.about-text {
		width: 90%;
		margin:2vh auto 3vh;
		font-size: 1.9vh;
		line-height: 1.8;
	}

	/* 縦流しテキストの字間・サイズ */
	.rail-track{
		top:0;
		letter-spacing:.1em;
		font-size:3vw;
	}
	.rail-left  .down { left:0.4vw; }
	.rail-right .up  { right:0.4vw; }

	/* レール幅とバー位置の微調整 */
	:root{
		--bar-w: 0.08vw;
		--bar-offset-left: 0.1vw;
		--bar-offset-right: 0.1vw;
		--rail-gap: 0.25vw;
	}
	.about-rail{ width: 4vw; }
	.rail-left  .rail-bar{  left:auto; right:var(--bar-offset-left); }
	.rail-right .rail-bar{  left:var(--bar-offset-right); }

	/* ABOUT内のSNS行をSPで表示 */
	.sns-mobile { display: flex; }
}