@charset "utf-8";
/* CSS Document */

body {
	background: url(../images/bg.png);
	background-position: top;
	background-repeat: no-repeat;
	/*background-size: cover;*/
	color: #231815;
}

a {
	color: #231815;
	text-decoration: none;
}

ul,
li {
	list-style: none;
}

img {
	max-width: 100%;
}

header {
	position: relative;
	height: 600px;
	margin-bottom:50px;
	background: url(../images/headerbg.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}
header.post-header{
	background:none;
}

.header-inner {
	max-width: 1190px;
	margin: auto;
	padding: 100px 20px 0;
	display: flex;
	justify-content: space-between;
	position: relative;
}

.header-inner:before {
	content: "";
	position: absolute;
	width: 584px;
	height: 303px;
	background-image: url(../images/headbg-l.png);
	top: 0;
	left: 125px;
	z-index: -1;
}

.header-inner:after {
	content: "";
	position: absolute;
	width: 286px;
	height: 270px;
	background-image: url(../images/headbg-s.png);
	top: 150px;
	right: 0;
	z-index: -1;
}

.header-inner-inner {
	display: flex;
	gap: 50px;
	align-items: end;
}

ul.navi {
	width: 160px;
	border-right: 1px solid #6cbb63;
	border-left: 1px solid #6cbb63;
}

ul.navi li {
	display: flex;
	gap: 10px;
	text-align: end;
	justify-content: center;
	border-bottom: 1px solid #6cbb63;
}

ul.navi li.ttl {
	background: #6cbb63;
	font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	padding: 20px 10px;
}

ul.navi li a {
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
	padding: 10px;
}

ul.navi li a:hover {
	background: #d5e492;
}

.navi h1 {
	writing-mode: vertical-rl;
	font-size: 3.0em;
	line-height: 1;
}

.navi h2 {
	writing-mode: vertical-rl;
	font-weight: 300;
	font-size: 1.15em;
	line-height: 1.2;
}


ul.navi li.top {
	background: #d5e492;
}

p.readtext {
	writing-mode: vertical-rl;
	font-size: 1.6em;
	line-height: 2;
	font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	padding-bottom: 50px;
}

ul.information {
	display: flex;
	gap: 25px;
}

ul.information dl dt {
	font-size: 0.8em;
}

ul.information dl dd {
	font-size: 1.8em;
	color: #dd6a24;
	line-height: 1.1;
}

ul.information dl dd span {
	font-size: 0.8em;
	color: #231815;
}

ul.information p {
	border-left: 2px solid;
	padding-left: 25px;
}

.slider-container {
	position: absolute;
	width: 100%;
	max-width: 60vw;
	right: 0;
	top: 160px;
	display: flex;
	gap: 10px;
	align-items: end;
	justify-content: end;
}

/* 共通 */
.slider {
	/* --w に「1枚の幅」をvwで設定（クラスで上書き） */
	--w: 14.1666667vw;
	/* 272/1920*100 = 14.1666667vw (デフォは大サイズ) */

	width: var(--w);
	/* 高さはアスペクト比で可変（デフォは272:480） */
	aspect-ratio: 272 / 480;

	overflow: hidden;
	position: relative;
}

.slides {
	display: flex;
	/* 6枚分の横並び。幅は指定不要（flexでOK） */
	animation: slideShow 36s infinite;
}

.slide {
	position: relative;
	width: var(--w);
	/* 子要素の高さも親と同じ比率に */
	aspect-ratio: inherit;
	flex-shrink: 0;
}

.slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 1.5vw;
}

.caption {
	position: absolute;
	top: 50%;
	left: 50%;
	background: #228253;
	color: #fff;
	padding: 12px 6px;
	font-size: 1vw;
	writing-mode: vertical-rl;
	transform: translate(-50%, -50%);
}

/* 大サイズ（272×480 基準） */
.slider.is-large {
	--w: 14.1666667vw;
	/* 272px → 14.1667vw */
	aspect-ratio: 272 / 480;
}

/* 小サイズ（165×290 基準） */
.slider.is-small {
	--w: 8.59375vw;
	/* 165px → 8.59375vw (165/1920*100) */
	aspect-ratio: 165 / 290;
}

/* 6枚分の「パタッと」アニメーション
   各ステイと移動の比率は前回と同じ → 速度感も同じ
   距離は var(--w) を基準に可変
*/
@keyframes slideShow {
	0% {
		transform: translateX(0);
	}

	13% {
		transform: translateX(0);
	}

	16% {
		transform: translateX(calc(-1 * var(--w)));
	}

	30% {
		transform: translateX(calc(-1 * var(--w)));
	}

	33% {
		transform: translateX(calc(-2 * var(--w)));
	}

	47% {
		transform: translateX(calc(-2 * var(--w)));
	}

	50% {
		transform: translateX(calc(-3 * var(--w)));
	}

	64% {
		transform: translateX(calc(-3 * var(--w)));
	}

	67% {
		transform: translateX(calc(-4 * var(--w)));
	}

	81% {
		transform: translateX(calc(-4 * var(--w)));
	}

	84% {
		transform: translateX(calc(-5 * var(--w)));
	}

	97% {
		transform: translateX(calc(-5 * var(--w)));
	}

	/* 6枚目も停止 */
	100% {
		transform: translateX(0);
	}

	/* 一瞬で戻る */
}

.slider.ossan:before {
    content: "";
    display: inline-block;
    width: 50px;
    height: 50px;
    background-image: url(../images/ossan.png);
    background-size: contain;
    vertical-align: middle;
    top: -50px;
    position: absolute;
    z-index: 999;
}

#items {
	background: url(../images/bg-item.png);
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
}

#items .section-inner {
	max-width: 1190px;
	margin: auto;
	padding: 10vw 20px 15vw 230px;
}

.items-card {
	writing-mode: vertical-rl;
	width: calc((100% - 40px)/3);
	font-size: 1.1vw;
	display: flex;
	align-items: flex-end;
	text-shadow: 1px 1px 4px #ffffff;
}

.items-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	flex-direction: row-reverse;
}

h2.section-title img {
	width: 10vw;
	margin-left: -2vw;
	margin-bottom: 2vw;
}

#details .section-inner {
	max-width: 1190px;
	margin: auto;
	padding: 20px 20px 20px 230px;
}

.details-flex {
	display: flex;
	gap: 20px;
	align-items: center;
}

.details-card ul {
	writing-mode: vertical-rl;
	font-size: 1.1vw;
}

footer {
	border-bottom: 14px solid #6cbb63;
	padding: 100px 10px 10px;
}

.footer-inner {
	max-width: 750px;
	padding: 20px;
	margin: auto;
}

.footer-info {
	margin-top: 210px;
	position: relative;
	padding: 90px;
}

.footer-info:before {
	position: absolute;
	content: '';
	top: -135px;
	left: -335px;
	display: block;
	width: 691px;
	height: 710px;
	background-image: url(../images/footer-map.png);
	background-size: contain;
	background-repeat: no-repeat;
	z-index: -1;
}

.footer-info dt {
	font-size: 25px;
}

.footer-info dd {
	font-size: 60px;
	font-weight: 600;
	color: #dd6b26;
}

.footer-info dd span {
	color: #333;
	font-size: 40px;
}

.footer-info h2 {
	font-family: serif;
	text-align: center;
	padding: 50px;
	font-size: 70px;
	font-weight: 300;
	letter-spacing: 10px;
}

.footer-info h2 span {
	display: block;
	font-size: 26px;
	font-weight: 300;
	letter-spacing: normal;
}

ul.footer-navi {
	display: flex;
	gap: 30px;
	font-size: 20px;
	justify-content: space-around;
}

ul.footer-navi a:before {
	content: "●";
	color: #6cbb63;
}

/* PC・SP表示 */
.pc-only {
	display: block;
}

.sp-only {
	display: none;
}
.breadcrumb{
	padding-top:10vw;
}
/* =========================
   SP最適化（～768px）
   ========================= */
@media screen and (max-width: 768px) {

	/* 全体 */
	body {
		background-size: contain;
	}
	.breadcrumb{
	padding-top:0;
}

	header {
		height: auto;
	}

	.header-inner {
		max-width: 100%;
		padding: 20px 16px 0;
		flex-direction: column;
		gap: 16px;
	}

	/* ヘッダー装飾は非表示（軽量化） */
	.header-inner:before,
	.header-inner:after {
		content: none;
	}

	.header-inner-inner {
		gap: 16px;
		align-items: flex-start;
		flex-direction: column;
		margin-top: -20px;
		margin-right: -16px;
		margin-left: -16px;
	}

	/* 縦書き → 横書きに */
	.navi h1,
	.navi h2,
	p.readtext,
	.items-card,
	.details-card ul {
		writing-mode: horizontal-tb;
	}

	/* 見出しまわり */
	ul.navi {
		width: 100%;
		border: 0;
	}

	ul.navi li {
		border: 0;
	}

	ul.navi li.ttl {
		padding: 5px 10px;
		flex-wrap: wrap-reverse;
		text-align: start;
		justify-content: flex-start;
		gap: 5px;
	}

	.navi h1 {
		font-size: 1.8rem;
		line-height: 1.2;
	}

	.navi h2 {
		font-size: 0.95rem;
		line-height: 1.5;
		margin-top: 4px;
		color: #333;
	}

	/* メニュー行（横並び・スワイプ可能） */
	ul.navi li.top,
	ul.navi li:not(.ttl) {
		/*display: inline-flex;
		border-radius: 999px;
		margin-right: 8px;
		margin-top: 8px;
		overflow: hidden;*/
		background: #ffffff;
		border: 1px solid #6cbb63;
	}

	ul.navi li.top {
		background: #d5e492;
	}

	ul.navi li a {
		padding: 10px 14px;
		font-size: 0.95rem;
	}

	/* キャッチコピー */
	p.readtext {
		font-size: 1.05rem;
		line-height: 1.6;
		padding: 0;
		text-align: center;
		margin: auto;
	}

	/* スライダー：大のみ表示、横幅いっぱい */
	.slider-container {
		position: static;
		width: 100%;
		max-width: 100%;
		margin-top: 8px;
		display: block;
	}

	.slider.is-small {
		display: none !important;
		/* ご要望：SPで非表示 */
	}

	.slider.is-large {
		--w: 84vw;
		/* 広く見せる */
		width: var(--w);
		margin: 0 auto 16px;
		aspect-ratio: 16 / 9;
	}

	.slide img {
		border-radius: 12px;
		height: 177px;
		/* vw → pxにして小画面で過度に丸まらないよう調整 */
	}

	.caption {
		font-size: 4vw;
		/* 1vw → 固定px */
		padding: 6px 8px;
		writing-mode: horizontal-tb;
		/* キャプションは横書き */
	}

	/* 取扱品目 */
	#items {
		background-position: left;
		background-size: cover;
	}

	#items .section-inner {
		max-width: 100%;
		padding: 32px 16px 48px;
	}

	.items-flex {
		flex-direction: column;
		gap: 12px;
	}

	.items-card {
		width: 100%;
		font-size: 14px;
		/* 1.1vw → 可読px */
		text-shadow: none;
		/* 小画面ではシャドウを抑える */
	}

	h2.section-title img {
		width: 30vw;
		margin: 0 0 12px;
	}

	/* 工事内容 */
	#details .section-inner {
		max-width: 100%;
		padding: 32px 16px;
	}

	.details-flex {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.details-card ul {
		font-size: 14px;
		display: flex;
		flex-wrap: wrap;
		gap: 8px 16px;
	}

	.details-card img {
		width: 100%;
		height: auto;
		display: block;
	}

	/* フッター */
	footer {
		padding: 48px 10px 10px;
	}

	.footer-inner {
		max-width: 100%;
		padding: 0 16px 16px;
	}

	.footer-info {
		margin-top: 24px;
		padding: 16px;
	}

	.footer-info:before {
		content: none;
		/* 大きな背景マップはSPでは非表示 */
	}

	.footer-info dt {
		font-size: 14px;
	}

	.footer-info dd {
		font-size: 28px;
		font-weight: 600;
	}

	.footer-info dd span {
		font-size: 14px;
	}

	.footer-info h2 {
		text-align: center;
		padding: 16px 0;
		font-size: 28px;
		letter-spacing: 4px;
		font-weight: 300;
	}

	.footer-info h2 span {
		font-size: 14px;
		letter-spacing: normal;
	}

	ul.footer-navi {
		gap: 16px;
		font-size: 14px;
		justify-content: center;
		flex-wrap: wrap;
	}

	/* 既存のPC/SPユーティリティはそのまま活用 */
	.pc-only {
		display: none !important;
	}

	.sp-only {
		display: block !important;
	}
}