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

/*=====================================
HEADER
===============================================================*/
#header{
	position: fixed;
	width: 100%;
	height: 80px;
	top: 0;
	left: 0;
	z-index: 200;
	background: rgba(0,0,0,.6)
}
.header-inner{
	padding: 5px clamp(0.938rem, -7.407rem + 12.96vw, 3.125rem);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap:20px;
	height: 100%
}
.hlogo{
	width: clamp(210px,23vw,380px);
	height: 100%;
}
.hlogo img{
	width: 100%;
	height: 100%;
	object-position: left;
	object-fit: contain;
	filter: brightness(0) invert(1);
}
.head-right{
	display: flex;
	gap:20px;
	align-items: center;
}
.pcnav{
    display: flex;
	align-items: center;
    flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
	font-weight: 600;
}
.pcnav li a{
    display: block;
    padding:10px clamp(0.75rem, -2.75rem + 5.33vw, 1.25rem);
    color: #ccc;
}
.pcnav li a{
	position: relative;
}
.pcnav li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    /*線の形状*/
    width: 80%;
    height: 2px;
    background: #8F8F8F;
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}

.pcnav li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}
.head-tel a{
	display: block;
	padding: 5px 30px 7px;
	background: #222;
	color: #fff;
	font-weight: 600;
	border-radius: 100px;
	font-size: 1.3rem;
}
.head-tel a span{
	font-size: 1rem;
}

/*==sid-btn===================================*/
.side-nav {
	position: fixed;
	top: 38%;
	right: 0;
	transform: translateY(-50%);
	z-index: 200;
}

.side-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.side-nav li + li {
	margin-top: 2px;
}

.side-nav a {
	display: flex;
	align-items: center;
	gap: 12px;

	padding: 20px 12px;

	background: #000;
	color: #fff;
	text-decoration: none;

	writing-mode: vertical-rl;
	text-orientation: mixed;

	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;

	transition: .3s;
}

.side-nav a:hover {
	background: #222;
}

.side-nav .icon {
	display: block;
	width: 20px;
	height: 20px;
}

.side-nav .icon img {
	display: block;
	width: 100%;
	height: auto;
}

/*=============================================
 CTA
==================================================================*/
.cta{
	background:url("../img/common/ctabg.jpg") center center / cover no-repeat;
	padding:120px 0 80px;
}
.cta::before{
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,.35);
	top:0;
	left: 0;
}
.cta .inner{
	max-width:1200px;
	margin:auto;
	padding:0 40px;
}

.cta h2{
	font-size:2.3rem;
	font-weight:700;
	line-height:1.6;
	margin-bottom:40px;
}

.cta p{
	font-size:1.4rem;
	line-height:2;
}

.cta-btn{
	display:flex;
	gap:20px;
	align-items:center;
	margin-top:50px;
}
.cta-tel a{
	display:flex;
	align-items:center;
	gap:15px;

	width:280px;
	height:64px;

	padding:0 24px;

	background:#fff;
	color:#000;
	text-decoration:none;

	border:1px solid #555;
	border-radius:100px;
}

.cta-tel .icon{
	width:24px;
	flex-shrink:0;
}

.cta-tel .icon img{
	width:100%;
	display:block;
	transition: .4s;	
}

.cta-tel .num{
	font-size:1.4rem;
	font-weight:700;
	letter-spacing:.05em;
}

.cta-tel a:hover{
	background: #000;
	color: #fff;
}
.cta-tel:hover .icon img{
	filter: brightness(0) invert(1);
	transition: .4s;
}

/*===================================
Footer
======================================================================*/
footer{
	/*background:#efefef;*/
	background: #111;
	padding:70px 0 40px;
	font-size: 16px;
	color: #fff;
	position: relative;
	z-index: 0;
}

footer .inner{
	display:grid;
	grid-template-columns:1.2fr 1.2fr 1.5fr;
	gap:40px;
	margin:auto;
	padding:0 40px;
	position: relative;
	z-index: 2;
}

footer .inner > *{
	position:relative;
}

footer .inner > *:not(:last-child)::after{
	content:"";
	position:absolute;
	right:-20px;
	top:0;
	width:1px;
	height:100%;
	background:#cfcfcf;
}
/*logo----------*/
.flogo img{
	max-width:260px;
	margin-bottom:25px;
	filter:brightness(0) invert(1);
}

.flogo p{
	font-size:.9rem;
	line-height:2;
	margin-bottom:10px;
}
/*nav-------------*/
.f-van{
	display:flex;
	gap:60px;
}

.f-van ul{
	list-style:none;
	padding:0;
	margin:0;
}

.f-van li{
	margin-bottom:8px;
	font-size: 15px;
}


.f-van b{
	letter-spacing:.1em;
	font-size: 17px;
}

.f-van a{
	color:#fff;
	opacity: .7;
	text-decoration:none;
}
/*info-----------------*/
.f-info ul{
	list-style:none;
	padding:0;
	margin:0;
}

.f-info li{
	position: relative;
	padding-left: 30px;
	margin-bottom:16px;
	line-height:1.8;
}
.f-info li a{
	color: #fff;
}

.f-info .icon{
	position: absolute;
	width: 16px;
	top: 55%;
	left: 0;
	transform: translateY(-50%);
}

.f-info .icon img{
	display: block;	
	filter: brightness(0) invert(1);
}

.copy{
	margin-top:40px;
	font-size:14px;
	color:#777;
}

/*=============================
index
=========================================================================*/
/*== FV ======================*/
#fv{
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	max-height: 100vh;
	min-height: 60vh;
	overflow: hidden;
}

/*slider*/
.fv-slider {
  position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*　背景画像設定　*/

.slider-item01 {
    background:url("../img/fv/fv01.jpg");
}

.slider-item02 {
    background:url("../img/fv/fv02.jpg");
}

.slider-item03 {
    background:url("../img/fv/fv03.jpg");
}

.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
	aspect-ratio: 4 / 3;
	max-height: 100vh;
	min-height: 60vh;
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: right;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}
.fv-slider::before{
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	background: linear-gradient(
			90deg,
			rgba(255,255,255,.85) 0%,
			rgba(255,255,255,.55) 35%,
			rgba(255,255,255,.15) 60%,
			rgba(255,255,255,0) 100%
		);
		z-index:2;
	top: 0;
	left: 0;
}
.fv-bottom{
	position: absolute;
	width: 45vw;
	height: 100vh;
	bottom: 0;
	left: 0;
	z-index: 2
}

.fv-bottom img{
	object-position: bottom;
	filter: grayscale(.45)
}
.fv-catch{
	position: absolute;
	width: 80%;
	top: 20%;
	left: 10%;
	z-index: 3;
	font-weight: 700;
	font-size: 1.2rem;
}
.fv-catch h2{
	font-weight: 900;
	font-size: clamp(30px,6vw,56px);
	
}
.fv-catch .catch-sub{
	font-weight: 700;
	font-size: clamp(20px,4vw,43px);
	padding-bottom: 20px;
}
#fv::before{
	position: absolute;
	content: '';
	height: 30vh;
	width: 100%;
	text-align: center;
	background: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.7),rgba(0,0,0,.9));
	bottom: 0;
	left: 0;
}

.fvlogo{
	position: absolute;
	width: 80%;
	max-width: 900px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.fvcatch{
	position: absolute;
	width: 100%;
	bottom: 5vh;
	left: 50%;
	transform: translateX(-50%);
	color: #FFF;
	opacity: .75;
	font-size: clamp(1.063rem, 0.107rem + 4.02vw, 3.125rem);
	font-family: "Noto Serif", serif;
	text-align: center;
}
#fv .spfv{display: none;}
/*==選ばれる理由=====================================*/
.why{
	padding:120px 0;
	/*background:#f5f5f5;*/
	background: linear-gradient(-45deg,#000,#222,#000);
	color: #fff;
}
.why .sec-title::after{
	background: #fff;
}

.why-list{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:20px;
}
.why-item{
	position:relative;
	background:#fff;
	box-shadow:0 5px 15px rgba(0,0,0,.25);
	transition: .4s;
	color: #333;
}

.why-num{
	position:absolute;
	top:0;
	left:0;
	z-index:5;

	width:42px;
	height:42px;

	background:#000;
	color:#fff;

	display:flex;
	align-items:center;
	justify-content:center;

	font-size:1.4rem;
	font-weight:700;
}

.why-img{
	height:180px;
	overflow:hidden;
}

.why-img img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.why-icon{
	width:70px;
	height:70px;

	background:#fff;
	border:2px solid #ccc;
	border-radius:50%;

	display:flex;
	align-items:center;
	justify-content:center;

	margin:-35px auto 20px;
	position:relative;
	z-index:2;
}

.why-icon img{
	width:36px;
	height: 36px;
}
.why-body{
	padding:0 20px 30px;
}

.why-body h3{
	font-size:1.3rem;
	font-weight:700;
	margin-bottom:20px;
	text-align: center;
}

.why-body p{
	font-size: 16px;
	line-height:1.8;
}
.why-item:hover{
	transform: translateY(-8px);
	transition: .4s;
}

/*about-------------------------------------*/
.about{
	position: relative;
	padding: 120px 0;
	background: #fff;
	overflow: hidden;
}

.about::after{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 45%;
	height: 100%;

	background:
		url("../img/index/aboutbg.jpg")
		left center / cover no-repeat;

	z-index: 0;
}

.about .inner{
	position: relative;
	z-index: 2;
}

.about-content{
	display:flex;
	align-items:flex-end;
	gap:60px;
	overflow:visible;
}

.about-text{
	width: 50%;
    max-width: 600px;
	position:relative;
	z-index:2;
}
.about-title{
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.6;
	margin: 20px 0 50px;
}

.about-lead p{
	line-height: 1.8;
	margin-bottom: 10px;
}

.about .btn{
	margin-top: 50px;
	width: 260px;
}
.about-image{
	width:60%;
	transform:translateX(80px);
	position:relative;
	z-index:1;
}

.about-image img{
	display:block;
	width:100%;
	height:auto;
}
/*service-----------------------------*/
.service{
	position:relative;
	padding:120px 0;
	overflow:hidden;
	z-index: 1;
	background: #1a1a1a;
	color: #fff;
}
.service .inner{
	position: relative;
	z-index: 2;
}
.service::after{
	content:"SERVICE";
	position:absolute;
	right:-20px;
	bottom:-35px;

	font-size:14rem;
	font-weight:800;
	line-height:1;
	letter-spacing:.05em;

	color:rgba(255,255,255,.55);
	pointer-events:none;
	z-index: 0;
}
.service-list{
	display:grid;
	grid-template-columns:repeat(3,340px);
	justify-content:center;
	gap:35px;

	margin-top:70px;
	margin-bottom:60px;
}
.service-item{
	position:relative;

	width:340px;
	height:340px;

	border-radius:50%;

	text-decoration:none;
	color:#fff;
}
.service-item::before{
	content:"";
	position:absolute;
	top:-6px;
	left:-6px;
	width:100%;
	height:100%;
	border:2px solid #bdbdbd;
	border-radius:50%;

	z-index:1;
}

.service-item::after{
	content:"";
	position:absolute;

	top:2px;
	left:4px;

	width:100%;
	height:100%;

	border:2px solid #bdbdbd;
	border-radius:50%;

	z-index:0;
}
.service-img{
	width:100%;
	height:100%;
	overflow:hidden;
	position: relative;
	border-radius:50%;
}

.service-img img{
	width:100%;
	height:100%;
	object-fit:cover;

	transform:scale(1);
	transition:.6s ease;
}
.service-img::before{
	content:"";
	position:absolute;
	inset:0;

	background:rgba(0,0,0,.35);
	z-index:1;

	transition:.4s ease;
}
.service-item h3{
	position:absolute;
	top:50%;
	left:50%;
	width: 100%;
	transform:translate(-50%,-50%);

	z-index:2;

	font-size:1.6rem;
	font-weight:700;
	line-height:1.4;
	text-align:center;

	transition:.4s ease;
}
.service-item:hover .service-img img{
	transform:scale(1.15) rotate(10deg);
}

.service-img:hover::before{
	background:rgba(0,0,0,.15);
}

.service-item:hover h3{
	font-size:2rem;
}
.service-btn{
	display:flex;
	justify-content:center;
}

/*=施工事例======================================*/
.works{
	padding:120px 0;
	background:#fff;
}

.works-list{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:30px;
	margin-top:60px;
}
.works-item{
	display:block;
	text-decoration:none;
	color:#000;
}

.works-img{
	position:relative;
	overflow:hidden;
	margin-bottom:20px;
}

.works-img img{
	width:100%;
	aspect-ratio:4/3;
	object-fit:cover;
	display:block;

	transform:scale(1);
	transition:.6s ease;
}

.works-item:hover .works-img img{
	transform:scale(1.08);
}
.works-cat{
	position:absolute;
	left:5px;
	bottom:5px;

	background:rgba(0,0,0,.85);
	backdrop-filter:blur(4px);

	color:#fff;
	padding:5px 18px;
	font-size:0.95rem;
	font-weight:700;
	letter-spacing:.05em;
}

.works-body h3{
	font-size:1.2rem;
	font-weight:700;
	line-height:1.6;
	transition:.3s;
}

.works-item:hover h3{
	padding-left:10px;
}
.works-btn{
	margin-top:60px;
	display:flex;
	justify-content:center;
}

.works-item-link{
	display: none;
}
.works-count{
    position:absolute;
    top:10px;
    right:10px;
    background:rgba(0,0,0,.75);
    color:#fff;
    padding:4px 8px;
    border-radius:20px;
    font-size:1.2rem;
    font-weight:700;
}
.works-more{
	margin-top:60px;
	text-align:center;
}

.btn-more{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:220px;
	height:58px;
	padding:0 40px;
	border:1px solid #222;
	background:#fff;
	color:#222;
	font-weight:700;
	font-size:1.15rem;
	border-radius:100px;
	cursor:pointer;
	transition:.3s;
}

.btn-more:hover{
	background:#222;
	color:#fff;
}

/*=Company=========================*/
.company{
padding-bottom: 30px;
}

.company-wrap{
	display:grid;
	grid-template-columns:35% 45% 20%;
	align-items:stretch;

	margin-top:60px;
}
.company-intro{
	padding:60px 100px;
}

.company-logo{
	margin-bottom:30px;
}

.company-logo img{
	max-width:260px;
	height:auto;
}

.company-intro p{
	font-size:1rem;
	line-height:2;
	margin-bottom:15px;
}
.company-info{
	padding:60px;
}

.company-info dl{
	display:grid;
	grid-template-columns:120px 1fr;
	border-top:1px solid #ddd;
	row-gap:20px;
}

.company-info dt{
	font-weight:700;
}

.company-info dd{
	line-height:1.8;
}


.company-info dt,
.company-info dd{
	padding:18px 0;
	border-bottom:1px solid #ddd;
	line-height:1.8;
}

.company-info dt{
	font-weight:700;
}
.company-copy{
	font-size:1.8rem;
	font-weight:700;
	line-height:2;
	margin-bottom:40px;
}

.company-more{
/*    display: flex;
    justify-content: center;*/
	margin: 30px auto 20px;
	
}

.company-image{
	height:100%;
	min-height:500px;
}

.company-image img{
	width:100%;
	height:100%;

	display:block;
	object-fit:cover;
}

/*========================================================
 ハンバーガーボタン
=========================================================*/
.sp-menu-btn {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	width: 44px;
	height: 44px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
	z-index: 300;
	position: relative;
}

.sp-menu-btn span {
	display: block;
	width: 26px;
	height: 2px;
	background: #eee;
	border-radius: 2px;
	transition: transform .35s ease, opacity .25s ease, top .35s ease;
	position: relative;
}

@media (max-width: 879px) {
	.sp-menu-btn {
		display: flex;
	}
}

/* オープン時 ✕ 変形 */
.sp-menu-btn.is-open span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}
.sp-menu-btn.is-open span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}
.sp-menu-btn.is-open span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* ヘッダーがオープン時は白ライン */
#header.menu-open .sp-menu-btn span {
	background: #fff;
}

/*========================================================
 SP ドロワーメニュー
=========================================================*/
.sp-menu {
	display: none;
	position: fixed;
	inset: 0;
	background: #111;
	z-index: 250;
	overflow-y: auto;

	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease, visibility .4s ease;
}

.sp-menu.is-open {
	opacity: 1;
	visibility: visible;
}

@media (max-width: 879px) {
	.sp-menu {
		display: block;
	}
}

/* 閉じるボタン */
.sp-menu__close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 44px;
	height: 44px;
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
}

.sp-menu__close span {
	display: block;
	position: absolute;
	width: 26px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
}

.sp-menu__close span:nth-child(1) { transform: rotate(45deg); }
.sp-menu__close span:nth-child(2) { transform: rotate(-45deg); }

.sp-menu__inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100%;
	padding: 100px 40px 120px;
}

.sp-menu__nav ul {
	list-style: none;
	padding: 0;
	margin: 0 0 60px;
}

.sp-menu__nav li {
	border-bottom: 1px solid rgba(255,255,255,.12);
}

.sp-menu__nav li:first-child {
	border-top: 1px solid rgba(255,255,255,.12);
}

.sp-menu__nav a {
	display: block;
	color: #fff;
	font-size: clamp(1.3rem, 5vw, 1.8rem);
	font-weight: 700;
	letter-spacing: .15em;
	padding: 22px 0;
	text-decoration: none;
	transition: padding-left .25s ease, color .25s ease;
}

.sp-menu__nav a:hover,
.sp-menu__nav a:active {
	padding-left: 12px;
	color: #ccc;
}

.sp-menu__tel a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #fff;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-decoration: none;
}

.sp-menu__tel .icon {
	width: 24px;
	flex-shrink: 0;
}

.sp-menu__tel .icon img {
	display: block;
	width: 100%;
	filter: brightness(0) invert(1);
}

/* オーバーレイ */
.sp-menu-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 240;
	background: rgba(0,0,0,.5);
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none;
}

.sp-menu-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

@media (max-width: 879px) {
	.sp-menu-overlay {
		display: block;
	}
}

/*========================================================
 モバイル下部固定ナビ
=========================================================*/
.sp-bottom-nav {
	display: none;
}

@media (max-width: 767px) {
	.sp-bottom-nav {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 500;
		background: #111;
	}

	.sp-bottom-nav__item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		padding: 10px 4px 14px;
		color: #fff;
		text-decoration: none;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.05em;
		border-right: 1px solid #333;
		transition: background .2s;
	}

	.sp-bottom-nav__item:last-child {
		border-right: none;
	}

	.sp-bottom-nav__item:first-child {
		background: #c0392b;
	}

	.sp-bottom-nav__item:first-child:active {
		background: #a93226;
	}

	.sp-bottom-nav__item:not(:first-child):active {
		background: #333;
	}

	.sp-bottom-nav__icon {
		width: 22px;
		height: 22px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.sp-bottom-nav__icon img {
		width: 100%;
		height: auto;
		filter: brightness(0) invert(1);
	}

	.sp-bottom-nav__label {
		display: block;
	}
}

/*========================================================
 レスポンシブ
=========================================================*/
@media (max-width: 879px) {
	.pcnav,
	.head-tel {
		display: none;
	}	
}

@media (max-width: 819px) {
	/* ===ABOUT=== */
	.about::after {
		display: none;
	}

	.about-content {
		flex-direction: column;
		gap: 30px;
	}

	.about-text {
		width: 100%;
		max-width: 100%;
	}

	.about-image {
		width: 100%;
		transform: none;
	}

	.about .btn {
		width: 100%;
		max-width: 320px;
	}
}
@media (max-width: 767px) {

	/* body下部余白（下部固定バー分） */
	body {
		padding: 60px 0;
	}

	/* ===HEADER=== */
	#header {
		height: 60px;
		background: #111;
		backdrop-filter: blur(4px);
	}

	.hlogo {
		width: clamp(160px, 52vw, 260px);
	}


	/* ===SIDE NAV=== */
	.side-nav {
		display: none;
	}

	/* ===FV=== */
/*	#fv {
		aspect-ratio: auto;
		min-height: 100svh;
	}

	.slider-item {
		aspect-ratio: auto;
		min-height: 100svh;
		background-position: center;
	}*/
	#fv{
		min-height: 53vh;

	}
	#fv .spfv{display: block;}
	#fv .pcfv{display: none;}
	.fv-bottom {
		width: 70vw;
		height: 60vh;
	}

	.fv-catch {
/*		top: auto;
		bottom: 18%;*/
		left: 5%;
		width: 90%;
	}

	.fv-catch h2 {
		font-size: clamp(24px, 7vw, 36px);
	}

	.fv-catch .catch-sub {
		font-size: clamp(16px, 5vw, 26px);
	}

	.fv-catch p {
		font-size: 0.85rem;
	}

	/* ===選ばれる理由=== */
	.why-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.why-img {
		height: 140px;
	}

	.why-body p {
		font-size: 14px;
	}



	/* ===SERVICE=== */
	.service::after {
		display: none;
	}

	.service-list {
		grid-template-columns: repeat(2, min(200px, 42vw));
		gap: 24px;
		margin-top: 40px;
		margin-bottom: 40px;
	}

	.service-item {
		width: min(200px, 42vw);
		height: min(200px, 42vw);
	}

	.service-btn {
		justify-content: center;
	}

	.service-btn .btn {
		width: 100%;
		max-width: 320px;
	}

	/* ===WORKS=== */
	.works-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
		margin-top: 40px;
	}

	.works-btn {
		margin-top: 40px;
	}

	.works-btn .btn {
		width: 100%;
		max-width: 320px;
	}

	/* ===COMPANY=== */
	.company-wrap {
		display: block;
	}
	.company-intro {
		padding: 40px 24px;
	}
	.company-logo {
		text-align: center;
	}

	.company-info {
		padding: 0 24px 40px;
	}

	.company-image {
		min-height: 260px;
		aspect-ratio: 16 / 9;
	}

	.company-more .btn {
		width: 100%;
		max-width: 320px;
	}

	/* ===CTA=== */
	.cta {
		padding: 80px 0 60px;
	}

	.cta .inner {
		padding: 0 20px;
	}

	.cta h2 {
		font-size: 1.5rem;
	}

	.cta p {
		font-size: 1rem;
	}

	.cta-btn {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		margin-top: 36px;
	}

	.cta-tel a {
		width: 100%;
		max-width: 280px;
	}

	.cta-mail .btn {
		width: 100%;
		max-width: 280px;
	}

	/* ===FOOTER=== */
	footer {
		padding: 60px 0 40px;
		
	}

	footer .inner {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 0 24px;
	}

	footer .inner > *:not(:last-child)::after {
		display: none;
	}

	.f-van {
		gap: 40px;
	}

	/* ===共通 sec-head=== */
	.sec-title {
		font-size: 2rem;
	}

	.sec-lead {
		font-size: 1rem;
		word-break: keep-all;
	}

	/* ===共通 btn=== */
	.btn {
		width: 100%;
		max-width: 320px;
	}
}
@media (min-width: 820px) and (max-width: 1024px) {
	.about::after {
		width: 40%;
	}

	.about-text {
		width: 55%;
	}

	.about-image {
		width: 50%;
		transform: translateX(40px);
	}	
}

/* タブレット調整 (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {

	body {
		font-size: clamp(14px, 1.6vw, 16px);
	}

	.pcnav li a {
		padding: 10px 12px;
	}

	.head-tel a {
		padding: 5px 16px 7px;
		font-size: 1.1rem;
	}

	.why-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}



	.service-item {
		width: 220px;
		height: 220px;
	}

	.service-list {
		grid-template-columns: repeat(3, 220px);
		gap: 20px;
	}

	.works-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.company-wrap {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
	}

	.company-image {
		grid-column: 1 / -1;
		min-height: 300px;
		aspect-ratio: 4 / 3;
	}

	.company-intro {
		padding: 40px 40px;
	}

	.company-info {
		padding: 40px;
	}

	footer .inner {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		padding: 0 24px;
	}

	footer .inner > *:nth-child(3) {
		grid-column: 1 / -1;
	}

	footer .inner > *:not(:last-child)::after {
		display: none;
	}
}

@media(max-width:550px){
	.company-info dl {
		grid-template-columns: 95px 1fr;
	}
}
@media(max-width:480px){
	.why-list {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}
@media (max-width: 395px) {
    .company-info dl {
        grid-template-columns: 75px 1fr;
		row-gap: 0px;
    }
	.company-info dt, .company-info dd {
		font-size: 14px;
	}
}
@media(max-width:380px){
    .cta h2 {
        font-size: 1.25rem;
    }	
	.service-list {
		grid-template-columns: 1fr;
		justify-items: center;
	}
	.service-item {
		width: min(260px, 80vw);
		height: min(260px, 80vw);
	}
}

/*========================================================
 下層ページ共通
=========================================================*/

/* ナビ カレント */
.pcnav .is-current > a,
.sp-menu__nav .is-current > a {
	color: #fff;
	pointer-events: none;
}

/* サブページはヘッダーに常に背景 */
body.is-sub #header {
	/*background: rgba(255,255,255,0.97);*/
	backdrop-filter: blur(4px);
	box-shadow: 0 1px 8px rgba(0,0,0,.08);
}

/* ページヒーロー */
.page-hero {
	padding-top: 80px;
	height: clamp(200px, 28vw, 320px);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	background: #111;
	overflow: hidden;
}

/* 写真の上にグラデーションオーバーレイ */
.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		rgba(0,0,0,.65) 0%,
		rgba(0,0,0,.25) 60%,
		rgba(0,0,0,.45) 100%
	);
	z-index: 1;
}

/* 下端の斜めカット */
.page-hero::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 48px;
	background: #f4f4f4;
	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 0);
	z-index: 2;
}

.page-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: .55;
	transition: transform 8s ease;
}

.page-hero:hover .page-hero__bg {
	transform: scale(1.04);
}

.page-hero__inner {
	position: relative;
	z-index: 3;
}

.page-hero__en {
	display: block;
	font-size: 0.85rem;
	letter-spacing: .35em;
	opacity: .65;
	margin-bottom: 12px;
}

.page-hero__title {
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.3;
}

/* タイトル下の装飾ライン */
.page-hero__title::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	background: rgba(255,255,255,.6);
	margin: 16px auto 0;
}

/* パンくず */
.breadcrumb {
	padding: 14px 0;
	background: #f5f5f5;
	font-size: 0.8rem;
	color: #888;
}

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.breadcrumb__list li + li::before {
	content: "›";
	margin-right: 6px;
	color: #bbb;
}

.breadcrumb__list a {
	color: #555;
	text-decoration: none;
}

.breadcrumb__list a:hover {
	color: #000;
}

/*========================================================
 service.php
=========================================================*/

/* サービス詳細 */
.sv-detail {
	padding: clamp(60px,8vw,100px) 0;
	position: relative;
	overflow: hidden;
	scroll-margin-top:80px;
}

.sv-detail + .sv-detail {
	padding-top: 0;
}

/* ウォーターマーク番号 */
.sv-detail:nth-of-type(1)::before { content: "01"; }
.sv-detail:nth-of-type(2)::before { content: "02"; }
.sv-detail:nth-of-type(3)::before { content: "03"; }
.sv-detail:nth-of-type(4)::before { content: "04"; }
.sv-detail:nth-of-type(5)::before { content: "05"; }
.sv-detail:nth-of-type(6)::before { content: "06"; }

.sv-detail::before {
	position: absolute;
	bottom: -0.15em;
	right: -0.05em;
	font-size: clamp(8rem, 18vw, 16rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.05em;
	color: rgba(0,0,0,.04);
	pointer-events: none;
	z-index: 0;
}

/* 背景がグレーの場合は色調整 */
.sv-detail[style*="background:#f5f5f5"]::before {
	color: rgba(0,0,0,.055);
}

.sv-detail > .inner {
	position: relative;
	z-index: 1;
}

.sv-item {
	display: flex;
	align-items: center;
	gap: clamp(30px, 5vw, 80px);
}

.sv-item.reverse {
	flex-direction: row-reverse;
}

.sv-item__img {
	width: 50%;
	flex-shrink: 0;
	overflow: hidden;
}

.sv-item__img img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	transition: transform .6s ease;
}

.sv-item__img:hover img {
	transform: scale(1.04);
}

.sv-item__body {
	flex: 1;
}

.sv-item__num {
	font-size: 3rem;
	font-weight: 800;
	line-height: 1;
	color: #e0e0e0;
	margin-bottom: 4px;
	letter-spacing: .05em;
}

.sv-item__title {
	font-size: clamp(1.4rem, 2.5vw, 1.9rem);
	font-weight: 700;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid #ddd;
}

.sv-item__lead {
	line-height: 2;
	margin-bottom: 24px;
	font-size: 0.95rem;
}

.sv-item__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sv-item__tag {
	padding: 4px 14px;
	border: 1px solid #bbb;
	font-size: 0.8rem;
	border-radius: 100px;
	color: #555;
}

/* 施工事例 カテゴリフィルター */
.works-filter {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

.works-filter__btn {
	padding: 8px 24px;
	border: 1px solid #bbb;
	background: none;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	border-radius: 100px;
	transition: .25s;
	letter-spacing: .05em;
}

.works-filter__btn:hover,
.works-filter__btn.is-active {
	background: #111;
	color: #fff;
	border-color: #111;
}

/*========================================================
 about.php
=========================================================*/

/* 会社概要 + マップ */
.about-detail {
	padding: clamp(60px,8vw,100px) 0;
	background: #fff;
	position: relative;
	overflow: hidden;
}

/* 右上の装飾ブロック */
.about-detail::before {
	content: "COMPANY";
	position: absolute;
	top: -0.1em;
	right: -0.05em;
	font-size: clamp(5rem, 12vw, 11rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: .05em;
	color: rgba(0,0,0,.035);
	pointer-events: none;
}

.about-detail > .inner {
	position: relative;
	z-index: 1;
}

/* dlのdtに左アクセントライン */
.about-detail__info dt {
	position: relative;
	padding-left: 14px;
}

.about-detail__info dt::before {
	content: "";
	position: absolute;
	left: 0;
	top: 22px;
	width: 3px;
	height: 1em;
	background: #111;
	border-radius: 2px;
}

.about-detail__wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: start;
}

.about-detail__info dl {
	display: grid;
	grid-template-columns: 120px 1fr;
	border-top: 1px solid #ddd;
}

.about-detail__info dt,
.about-detail__info dd {
	padding: 16px 0 16px 10px ;
	border-bottom: 1px solid #ddd;
	line-height: 1.8;
	font-size: 0.9rem;
}

.about-detail__info dt {
	font-weight: 700;
}

.about-detail__map {
	width: 100%;
	overflow: hidden;
}

.about-detail__map iframe {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
	filter: grayscale(.2);
	aspect-ratio: 4 / 3;
}

/* お問い合わせフォーム */
.contact {
	padding: clamp(60px,8vw,100px) 0;
	/*background:
		radial-gradient(circle, rgba(0,0,0,.06) 1px, transparent 1px),
		#f5f5f5;*/
	background: #111;
	color: #fff;
	background-size: 28px 28px;
	position: relative;
}

/* 上端の斜めカット（ページヒーロー下端と対応） */
.contact::before {
	content: "";
	position: absolute;
	top: -2px;
	left: -2px;
	width: 101%;
	height: 48px;
	background: #fff;
	clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
	z-index: 0;
}

.contact-form {
	max-width: 760px;
	margin: 0 auto;
}

.contact-form__row {
	display: grid;
	grid-template-columns: 195px 1fr;
	gap: 0;
	border-bottom: 1px solid #ddd;
}

.contact-form__row:first-child {
	border-top: 1px solid #ddd;
}

.contact-form__label {
	padding: 22px 0;
	font-weight: 700;
	font-size: 0.9rem;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding-right: 20px;
}

.contact-form__req {
	display: inline-block;
	background: #c0392b;
	color: #fff;
	font-size: 0.7rem;
	padding: 2px 7px;
	border-radius: 3px;
	flex-shrink: 0;
	margin-top: 2px;
}

.contact-form__field {
	padding: 18px 0;
}

.contact-form__field input,
.contact-form__field textarea,
.contact-form__field select {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 1rem;
	font-family: inherit;
	background: #fff;
	transition: border-color .2s;
	appearance: none;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
	outline: none;
	border-color: #333;
}

.contact-form__field textarea {
	resize: vertical;
	min-height: 160px;
}

.contact-form__privacy {
	margin: 36px 0 28px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.9rem;
	line-height: 1.7;
}

.contact-form__privacy input[type="checkbox"] {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 3px;
	cursor: pointer;
	accent-color: #111;
}
.privacy-link{
	color: #fff;
	opacity: .6;
}
.contact-form__submit {
	display: flex;
	justify-content: center;
}

.contact-form .btn {
	width: 280px;
	height: 60px;
	font-size: 1rem;
	cursor: pointer;
	border: none;
}

/* プライバシーポリシー アコーディオン */
.privacy {
	padding: clamp(40px,6vw,80px) 0;
	background: #fff;
	position: relative;
	overflow: hidden;
}

.privacy::after {
	content: "PRIVACY";
	position: absolute;
	bottom: -0.1em;
	left: -0.05em;
	font-size: clamp(5rem, 12vw, 10rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: .05em;
	color: rgba(0,0,0,.03);
	pointer-events: none;
}

.privacy > .inner {
	position: relative;
	z-index: 1;
}

/* アコーディオン開閉時の背景変化 */
.privacy-acc__item {
	border-bottom: 1px solid #ddd;
	transition: background .2s;
}

.privacy-acc__head.is-open {
	color: #000;
}

.privacy-acc__item:has(.is-open) {
	background: #fafafa;
}

.privacy-acc__item {
	border-bottom: 1px solid #ddd;
}

.privacy-acc__item:first-child {
	border-top: 1px solid #ddd;
}

.privacy-acc__head {
	width: 100%;
	background: none;
	border: none;
	text-align: left;
	padding: 20px 40px 20px 0;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	position: relative;
	display: block;
	font-family: inherit;
	color: #333;
	letter-spacing: .05em;
}

.privacy-acc__head::after {
	content: "";
	position: absolute;
	right: 4px;
	top: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid #555;
	border-bottom: 2px solid #555;
	transform: translateY(-65%) rotate(45deg);
	transition: transform .3s ease;
}

.privacy-acc__head.is-open::after {
	transform: translateY(-30%) rotate(-135deg);
}

.privacy-acc__body {
	display: none;
	padding: 0 0 24px;
	font-size: 0.9rem;
	line-height: 2;
	color: #555;
}

/*========================================================
 thanks.php
=========================================================*/
.thanks {
	padding: clamp(80px, 12vw, 160px) 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}

/* 背景の円装飾 */
.thanks::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(700px, 120vw);
	height: min(700px, 120vw);
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,.06);
	pointer-events: none;
}

.thanks::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(480px, 90vw);
	height: min(480px, 90vw);
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,.04);
	pointer-events: none;
}

.thanks > .inner {
	position: relative;
	z-index: 1;
}

.thanks__icon {
	width: 72px;
	height: 72px;
	background: #111;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 36px;
}

.thanks__icon svg {
	width: 34px;
	height: 34px;
	stroke: #fff;
}

.thanks__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	margin-bottom: 24px;
}

.thanks__text {
	font-size: 1rem;
	line-height: 2.2;
	color: #555;
	margin-bottom: 56px;
}

.thanks__btn {
	display: flex;
	justify-content: center;
}

.thanks .btn {
	width: 240px;
}

/*========================================================
 下層レスポンシブ
=========================================================*/
@media (max-width: 767px) {

	.page-hero {
		padding-top: 60px;
		height: clamp(160px, 55vw, 220px);
	}
	.page-hero::after {
		height: 40px;
	}
	/* service */
	.sv-item,
	.sv-item.reverse {
		flex-direction: column;
	}

	.sv-item__img {
		width: 100%;
	}

	/* about */
	.about-detail__wrap {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.about-detail__info dl {
		grid-template-columns: 105px 1fr;
	}

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

	.contact-form__label {
		padding: 16px 0 4px;
		border-bottom: none;
	}

	.contact-form__field {
		padding: 0 0 16px;
	}

	.contact-form .btn {
		width: 100%;
		max-width: 280px;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.sv-item__img {
		width: 45%;
	}

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

	.contact-form__row {
		grid-template-columns: 140px 1fr;
	}
}
@media (max-width: 420px) {
	.company-info dl ,.about-detail__info dl{
        grid-template-columns: 1fr;
	}
    .company-info dt,.about-detail__info dt {
        border-bottom: none;
		padding-bottom: 0;
    }
	.company-info dd{
		padding: 10px 0;
	}
	.about-detail__info dd{
		padding: 10px 0 10px 10px;
	}
}
@media (max-width: 360px) {
	.page-hero::after {
		display: none;
	}
	.sp-menu__inner {
    	padding: 80px 40px 100px;
	}
	.sp-menu__nav ul {
		margin: 0 0 35px;
	}
	.sp-menu__nav a {
		font-size: 1.2rem;
		padding: 15px 0;	
	}

	.works-count,.works-cat {
		font-size: .75rem;
	}	
	footer span.ib{
		display: contents !important;
	}
}
@media (max-width: 340px) {
	.sec-subtitle {
		font-size: 1.2rem;
	}
    .sec-title {
        font-size: 1.6rem;
    }	
    .sec-lead {
        font-size: .85rem;
	}

	.cta h2 {
		font-size: 1.1rem;
	}
	.privacy-acc__head{
		font-size: .9rem;
	}
	.privacy-acc__body{
		font-size: .75rem;
	}
	footer{
		font-size: 13px;
	}
    footer .inner {
        padding: 0 10px;
    }
	.flogo p {
		font-size: .85rem;
	}
}
@media (max-height: 670px) {
	.sp-menu__inner {
    	padding: 80px 40px 100px;
	}
	.sp-menu__nav ul {
		margin: 0 0 35px;
	}
	.sp-menu__nav a {
		font-size: 1.2rem;
		padding: 15px 0;	
	}	
}

.aboutbg{
	position: absolute;
	width: 36%;
	min-width: 280px;
	height: 30%;
	object-fit: contain;
	opacity: .2;
	top: 10vh;
	left: 0;
	object-position: top;
}
footer .aboutbg{
	width: 50%;
	height: 70%;
	z-index: 1;
	left: auto;
	right: 5%;
	filter: brightness(.2) invert(.5);
	object-position: right;
}