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

/*
Theme Name: kenpla
Author: レオーネクオーリ
Description: 建築プランナー　HP用
Version: 1.0
*/

:root {
	--brown: #261f0f;
	--red: #be1a21;
	--gray: #dbdbdb;
	--gray2: #cecece;
	--gray3: #f1f1f1;
}

body {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 16px;
	color: var(--brown);
	background-color: #fff;
}

.none,.sp,.sp02 {display: none;}

a {transition: 0.5s;}
a:hover {transition: 0.5s;}

.op:hover {opacity: 0.7;}

.hover-r:hover {color: var(--red);}

img {width: 100%;}

pre {white-space: pre-wrap;}

.home .grecaptcha-badge {display: none !important;}

.btn {
	font-size: 18px;
	padding: 3px 20px 5px;
	border: solid 1px;
	border-radius: 20px;
	display: inline-block;
	white-space: nowrap;
}

.btn:hover {
	background-color: var(--red);
	color: #fff;
	border: solid 1px var(--red);
}

.img-hover {
	position: relative;
	display: inline-block;
	width: 100%;
	overflow: hidden;
}

.img-hover img {
	display: block;
	transition: opacity 0.4s ease;
}

.img-hover img:nth-child(2) {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: 0.5s;
}

.img-hover:hover img:nth-child(2) {
	opacity: 1;
	transition: 0.5s;
}

.frame-svg {
	/* 調整用 */
	--c: var(--brown);   /* 線色 */
	--b: 1px;       /* 線の太さ */
	--s: 44px;    /* 角SVGのサイズ */
	--o: 7px;

	position: relative;
}

/* 直線（上下左右） */
.frame-svg::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;

	background:
		/* 上 */
		linear-gradient(var(--c), var(--c))
			top center /
			calc(100% - (var(--s) * 2) + (var(--o) * 2)) var(--b)
			no-repeat,

		/* 下 */
		linear-gradient(var(--c), var(--c))
			bottom center /
			calc(100% - (var(--s) * 2) + (var(--o) * 2)) var(--b)
			no-repeat,

		/* 左 */
		linear-gradient(var(--c), var(--c))
			center left /
			var(--b) calc(100% - (var(--s) * 2) + (var(--o) * 2))
			no-repeat,

		/* 右 */
		linear-gradient(var(--c), var(--c))
			center right /
			var(--b) calc(100% - (var(--s) * 2) + (var(--o) * 2))
			no-repeat;
}

/* 角共通 */
.frame-svg .corner {
	position: absolute;
	width: var(--s);
	height: var(--s);
	pointer-events: none;

	/* SVG制御 */
	color: var(--c);
	stroke-width: var(--b);
}

/* 位置 */
.frame-svg .corner.tl { top: 0; left: 0; }
.frame-svg .corner.tr { top: 0; right: 0; transform: rotate(90deg); }
.frame-svg .corner.br { bottom: 0; right: 0; transform: rotate(180deg); }
.frame-svg .corner.bl { bottom: 0; left: 0; transform: rotate(270deg); }


.roman {
	font-family: "map-roman-variable", serif;
	letter-spacing: 0.05em;
}

.yu-min {
	font-family: "Yu Mincho", "游明朝", serif;
}

.narrow {font-variation-settings: 'wdth' 80;}

.chikushi {
	font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
	letter-spacing: 0.03em;
}

.c-red {color: var(--red);}
.b-red {background-color: var(--red);}
.c-gray {color: var(--gray);}
.b-gray {background-color: var(--gray);}

.bold {font-weight: bold;}

@media screen and (max-width: 640px) {
	.pc {display: none;}
	.sp {display: block;}
	
	/*body {font-size: 14px;}*/
	
	.frame-svg {
		--s: 30px;
		--o: 6px;
	}
	
	.grecaptcha-badge {
		bottom: 70px !important;
	}
}

/**********************************************************************************

TOPローディング

**********************************************************************************/
:root{
  --reveal: 0;                 /* JSが 0→1 にする */
}

/* ローダー自体は透明（白は.coverに任せる） */
#loader {
	position: fixed; inset: 0; z-index: 9999;
	background: transparent;
}

/* 中央のテキスト・％はそのまま */
.loader-inner {
	position: absolute; inset: 0;
	display: grid;
	place-items: center;
	text-align: center;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.5s ease;
}

.loader-inner img {
	width: 80%;
	max-width: 600px;
}

.loader-title {font-size: 30px;}

.loader-percent {
	position: absolute; left: 50%; transform: translateX(-50%);
	bottom: 50px;
	font-size: 20px;
}

/* 白い覆い：高さ100%で固定。transformで上へ抜ける */
.cover {
	position: absolute; inset: 0 0 auto 0; height: 100%;
	background: #fff;
	transform: translateY(calc(-100% * var(--reveal)));
	transition: transform 1200ms cubic-bezier(.2,.8,.2,1);
	will-change: transform;
}

/* 完全非表示（JSが付ける） */
#loader.is-gone{ display: none; }

/**********************************************************************************

下層ローディング

**********************************************************************************/
#subpage-loader {
	position: fixed;
	inset: 0;
	background: #fff;
	z-index: 9999;
	opacity: 1;
	visibility: visible;
	transition:
		opacity .8s cubic-bezier(0.33, 1, 0.68, 1),
		visibility 0s linear .8s;
	pointer-events: none;
}

#subpage-loader.is-hide {
	opacity: 0;
	visibility: hidden;
}

/**********************************************************************************

.fadein

**********************************************************************************/
.fadein {
	opacity: 0;
	transition: opacity 1s ease, transform 1s ease;
}

.fadein.is-show {
	opacity: 1;
}

.delay01 { transition-delay: 0.5s; }
.delay02 { transition-delay: 1.0s; }
.delay03 { transition-delay: 1.5s; }
.delay04 { transition-delay: 2.0s; }
.delay05 { transition-delay: 2.5s; }

/* 上からふわっと */
.fadein-up {
	transform: translateY(-50px);
}

.fadein-up.is-show {
	transform: translateY(0);
}

/**********************************************************************************

.typewriter

**********************************************************************************/
.typewriter {
	display: inline;
}

.typewriter.is-typing::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 1em;
	margin-left: 4px;
	background: currentColor;
	vertical-align: middle;
	animation: blink 0.8s step-end infinite;
}

.typewriter br.sp {
	display: none;
}

@media screen and (max-width: 640px) {
	.typewriter br.sp {
		display: inline;
	}
}

@keyframes blink {
	50% {
		opacity: 0;
	}
}
/**********************************************************************************

header

**********************************************************************************/
/* 下層スクロール前ヘッダー */
.header-sub {
	position: relative;
	display: flex;
	align-items: center;
	padding: 21px 50px;
}

.page-housedesign-lab .header-sub {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9;
	background: transparent;
	mix-blend-mode: difference;
}

.page-housedesign-lab .header-sub .reserv {color: #fff;}

.header-sub h1 {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	margin: 0 auto;
	max-width: 150px;
}

.header-sub .right-box {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 25px;
	margin-right: 50px;
}

.header-sub .right-box .sns {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
}

.header-sub .right-box .sns li {width: 26px;}

/* 共通スクロール後ヘッダー */
.header-scrolled {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 21px 50px;
}

.header-scrolled h1 {max-width: 150px;}

.header-scrolled .link-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 30px 15px;
	margin-right: 50px;
}

.header-scrolled .link-list .list .link {
	border: solid 1px var(--brown);
	padding: 6px 20px;
	border-radius: 20px;
}

.header-scrolled .list.contact .link {
	background-color: var(--brown);
	color: #fff;
}

.header-scrolled .list .link:hover {
	background-color: var(--red);
	color: #fff;
	border: solid 1px var(--red);
}

.header-scrolled .list.contact .link:hover {
	background-color: var(--red);
	border: solid 1px var(--red);
}

.header-scrolled .list .link .eng {
	padding-right: 15px;
	margin-right: 15px;
	position: relative;
}

.header-scrolled .list .link .eng::after {
	content: "";
	width: 1px;
	height: 19px;
	background-color: var(--brown);
	position: absolute;
	top: 4px;
	right: 0;
	transition: 0.5s;
}

.header-scrolled .link-list .contact .link .eng::after {background-color: #fff;}

.header-scrolled .link-list .list .link:hover .eng::after {
	background-color: #fff;
	transition: 0.5s;
}


/* スクロール後に表示 */
body.is-scrolled .header-scrolled,
body.nav-open .header-scrolled{
	opacity: 1;
	pointer-events: auto;
}

/* 下層初期ヘッダーはスクロール後に消す */
body.is-scrolled .header-sub {
	opacity: 0;
	pointer-events: none;
}

@media screen and (max-width: 820px) {
	.header-sub h1 {
		position: static;
		margin: 0 auto;
		width: 40%;
		transform: none;
	}
	.header-scrolled {
		justify-content: flex-start;
		padding: 21px 25px;
	}
	.header-scrolled h1 {width: 40%;}
	.header-sub .right-box,.header-scrolled .link-list {display: none;}
}

/**********************************************************************************

.global-nav

**********************************************************************************/
/* メインラップ */
.site-wrap{
	position: relative;
	z-index: 0;
	background-color: #fff;
}

/* ナビ開いたら、メイン側をぼかす */
body.nav-open .site-wrap{filter: blur(5px);}


html.nav-open,
body.nav-open{
	overflow: hidden;
}

body.nav-open::before{
	content:"";
	position: fixed;
	inset: 0;
	z-index: 800; /* nav(1000)より下 */
	pointer-events: none;
}

/* 暗幕出てる間、メイン側はクリックできないように */
body.nav-open .site-wrap{pointer-events: none;}

body.nav-open header .hamburger {
	opacity: 0;
	pointer-events: none;
}

.global-nav {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1000;
}

/* 内側 */
.nav-inner {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

/* ハンバーガー */
.hamburger {
	width: 46px;
	height: 21px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	z-index: 1001;
	position: fixed;
	top: 25px;
	right: 25px;
	mix-blend-mode: difference;
}

.hamburger span {
	display: block;
	height: 1px;
	background-color: var(--brown);
	transition: 0.3s ease;
	background-color: #fff
}

.hamburger span:first-child {width: 46px;}
.hamburger span:nth-child(2) {width: 35px;}
.hamburger span:nth-child(3) {width: 26px;}

.hamburger:hover span:nth-child(2),.hamburger:hover span:nth-child(3) {
	width: 46px;
	transition: 0.5s;
}

/* 変形：× */
.hamburger.active {height: 17px;}
.hamburger.active span {
	width: 46px;
}

.hamburger.active span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
	opacity: 0;
}

.hamburger.active span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

.nav-toggle {
	position: fixed;
	top: 25px;
	right: 25px;
	z-index: 920; /* navより上 */
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	display: none;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	width: 46px;
	height: 21px;
}

.nav-toggle span {
	display: block;
	height: 1px;
	background-color: var(--brown);
	transition: 0.3s ease;
}

/* active時は×にするなら headerのハンバーガーと同じルールでOK */
.nav-toggle.active {height: 17px;}
.nav-toggle.active span {
	width: 46px;
}
.nav-toggle.active span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}
.nav-toggle.active span:nth-child(2) {opacity: 0;}
.nav-toggle.active span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

.nav-box.active + .nav-toggle {
	display: flex;
}

/* メニュー（右からスライド） */
.nav-box {
	position: fixed;
	top: 0;
	right: -100%;
	width: 70%;
	height: 100dvh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	background: #fff;
	padding: 40px 5%;
	transition: 0.8s ease;
	z-index: 950;
}

.nav-box.active {right: 0;}

.nav-box .nav-img {
	margin-top: 60px;
	margin-bottom: 60px;
}

.nav-box .nav-img .menu-img {width: 95%;}

.nav-box .nav-img .menu-kenpla {
	display: block;
	max-width: 328px;
	margin: -10% 0 0 auto;
	width: 50%;
}

.nav-box .menu-box {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.nav-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	width: fit-content;
}

.nav-list .one-column {grid-column: span 2;}

.nav-list .list-bottom {margin-top: 30px;}

.nav-list li a {
	display: flex;
	align-items: center;
	gap: 18px;
}

.nav-list li a span {
	font-size: 20px;
	letter-spacing: 0.1em;
}

.nav-box .menu-box .link-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 30px 15px;
}

.nav-box .menu-box .link-list .list .link {
	border: solid 1px var(--brown);
	padding: 6px 20px;
	border-radius: 20px;
}


.nav-box .menu-box .link-list .list.contact .link {
	color: #fff;
	background-color: var(--brown);
}

.nav-box .menu-box .link-list .list .link:hover {
	background-color: var(--red);
	color: #fff;
	border: solid 1px var(--red);
}

.nav-box .menu-box .link-list .list.contact .link:hover {
	background-color: var(--red);
	border: solid 1px var(--red);
}

.nav-box .menu-box .link-list .list .link .eng {
	padding-right: 15px;
	margin-right: 15px;
	position: relative;
}

.nav-box .menu-box .link-list .list .link .eng::after {
	content: "";
	width: 1px;
	height: 19px;
	background-color: var(--brown);;
	position: absolute;
	top: 4px;
	right: 0;
	transition: 0.5s;
}

.nav-box .menu-box .link-list .list.contact .link .eng::after {background-color: #fff;}

.nav-box .menu-box .link-list .list .link:hover .eng::after {
	background-color: #fff;
	transition: 0.5s;
}

.nav-box .menu-box .link-list .list .sns {
	display: flex;
	align-items: center;
	gap: 12px;
}

.nav-box .menu-box .link-list .list .sns li {width: 26px;}

@media screen and (max-width: 1280px) {
	.nav-box {width: 85%;}
}

@media screen and (max-width: 1024px) {
	.nav-box {width: 100%;}
}

@media screen and (max-width: 820px) {
	.nav-list {grid-template-columns: repeat(1, 1fr);}
	.nav-list .one-column {grid-column: auto;}
	.nav-list .sp-nomargin {margin-top: 0;}
}

@media screen and (max-width: 640px) {
	.hamburger {
		top: 20px;
		right: 20px;
	}
	
	.nav-list li a {
		flex-direction: column;
		align-items: flex-start;
		font-size: 14px;
		gap: 5px;
	}
	
	.nav-box .menu-box .link-list {
		flex-direction: column;
		align-items: flex-start;
	}
}

/**********************************************************************************

#footer-link

**********************************************************************************/
#footer-link {
	margin-top: 100px;
	position: relative;
}

#footer-link .border {
	width: 98%;
	height: 1px;
	background-color: var(--brown);
}

.page-statement #footer-link,.page-custom-house #footer-link,.page-building-process #footer-link,.page-strictire #footer-link
{margin-top: 0;}

.page-team-kp #footer-link {padding-top: 30px;}

.page-statement #footer-link .border,.page-custom-house #footer-link .border,.page-building-process #footer-link .border,.page-strictire #footer-link .border,.page-team-kp #footer-link .border
{display: none;}

#footer-link ul {
	width: 90%;
	margin: 120px auto 0;
	display: flex;
	flex-direction: column;
	gap: 50px;
	position: relative;
	z-index: 2;
}

#footer-link ul li {width: fit-content;}

#footer-link ul li a p {
	font-size: 18px;
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
}

#footer-link ul li a p::after {
	content: "";
	width: 100%;
	height: 1px;
	background-color: var(--brown);
}

#footer-link ul li a h3 {
	font-size: 72px;
	margin-bottom: 10px;
	transition: 0.5s;
}

#footer-link ul li a:hover h3 {
	color: var(--red);
	transition: 0.5s;
}

#footer-link ul li a h4 {
	font-size: 18px;
	display: flex;
	align-items: center;
	gap: 10px;
}

#footer-link ul li a h4 img {width: 22px;}

#footer-link .kazari {
	width: 40%;
	max-width: 584px;
	position: absolute;
	z-index: 1;
	top: -100px;
	right: 0;
	pointer-events: none;
}

.page-statement #footer-link .kazari,.page-custom-house #footer-link .kazari,.page-building-process #footer-link .kazari,.page-strictire #footer-link .kazari,.page-team-kp #footer-link .kazari
{top: -300px;}

@media screen and (max-width: 820px) {
	.page-team-kp #footer-link {padding-top: 0;}
	#footer-link ul li a p,#footer-link ul li a h4 {font-size: 16px;}
	#footer-link ul li a h3 {font-size: 60px;}
	#footer-link .kazari {top: -80px;}
	
	.page-statement #footer-link .kazari,.page-custom-house #footer-link .kazari,.page-building-process #footer-link .kazari,.page-strictire #footer-link .kazari,.page-team-kp #footer-link .kazari
	{top: -200px;}
}

@media screen and (max-width: 640px) {
	#footer-link {margin-top: 80px;}
	.page-team-kp #footer-link {margin-top: -50px;}
	#footer-link ul {margin: 220px auto 0;}
	#footer-link ul li a h3 {font-size: 50px;}
	#footer-link .kazari {
		width: 50%;
		top: -100px;
	}
	
	.page-statement #footer-link .kazari,.page-custom-house #footer-link .kazari,.page-building-process #footer-link .kazari,.page-strictire #footer-link .kazari
	{top: -300px;}
	.page-team-kp #footer-link .kazari {top: -260px;}
}


/**********************************************************************************

footer

**********************************************************************************/
footer {
	margin-top: 200px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

footer .left {
	height: 100%;
	position: relative;
}

footer .left .footer-img,
footer .left .footer-img picture,
footer .left .footer-img img {
	height: 100%;
}

footer .left .footer-img {
	position: absolute;
	inset: 0;
}

footer .left .footer-img img {
	object-fit: cover;
	display: block;
}

footer .left .logo {
	width: 150px;
	position: absolute;
	top: 30px;
	left: 40px;
}

footer .left small {
	font-size: 12px;
	color: #fff;
	position: absolute;
	left: 20px;
	bottom: 20px;
}

footer .right {
	padding: 0 7% 30px;
	position: relative;
}

footer .right .head-box {
	display: flex;
	align-items: flex-start;
	gap: 30px;
	margin-bottom: 100px;
}

footer .right .head-box .midashi {
	flex: 0 0 40%;
	position: relative;
}

footer .right .head-box .midashi h3 {
	font-size: 36px;
	writing-mode: vertical-rl;
	line-height: 1.5em;
	white-space: nowrap;
	width: 162px;
	position: absolute;
	top: -70px;
	left: 0;
	right: 0;
	margin: 0 auto;
}

footer .right .link-box .link-btn {
	margin-top: 50px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
}

footer .right .link-box .link-btn ul {
	display: flex;
	align-items: center;
	gap: 10px;
}

footer .right .link-box .link-btn ul .list .link {
	border: solid 1px var(--brown);;
	padding: 6px 20px;
	border-radius: 20px;
}

footer .right .link-box .link-btn ul .list.contact .link {
	color: #fff;
	background-color: var(--brown);
}

footer .right .link-box .link-btn ul .list .link:hover {
	background-color: var(--red);
	color: #fff;
	border: solid 1px var(--red);
}

footer .right .link-box .link-btn ul .list.contact .link:hover {
	background-color: var(--red);
	border: solid 1px var(--red);
}

footer .right .link-box .link-btn ul .list .link .eng {
	padding-right: 15px;
	margin-right: 15px;
	position: relative;
}

footer .right .link-box .link-btn ul .list .link .eng::after {
	content: "";
	width: 1px;
	height: 19px;
	background-color: var(--brown);
	position: absolute;
	top: 4px;
	right: 0;
	transition: 0.5s;
}

footer .right .link-box .link-btn ul .list.contact .link .eng::after {background-color: #fff;}

footer .right .link-box .link-btn ul .list .link:hover .eng::after {
	background-color: #fff;
	transition: 0.5s;
}

footer .right .link-box .sns {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
}

footer .right .link-box .sns li {width: 26px;}

footer .right .page-top {
	position: absolute;
	right: 7%;
	bottom: 100px;
	width: 30px;
}

@media screen and (max-width: 1720px) {
	footer .right {padding: 0 5% 30px;}
	footer .right .page-top {right: 5%;}
}

@media screen and (max-width: 1644px) {
	footer {grid-template-columns: 1fr 830px;}
}

@media screen and (max-width: 1024px) {
	footer {grid-template-columns: 1fr;}
	
	footer .left {
		position: relative;
		aspect-ratio: 5 / 3;
		order: 2;
	}

	footer .left .footer-img {
		position: absolute;
		inset: 0;
	}

	footer .left .footer-img img {height: 100%;}
	
	footer .right {order: 1;}
}

@media screen and (max-width: 640px) {
	footer {margin-top: 150px;}
	
	footer .left {aspect-ratio: 2 / 2.5;}
	
	footer .left .logo {
		width: 120px;
		top: 20px;
		left: 20px;
	}
	
	footer .left small {bottom: 60px;}
	
	footer .right .head-box {gap: 0;}
	
	footer .right .head-box .midashi h3 {
		font-size: 26px;
		width: 112px;
		top: -45px;
	}
	
	footer .right .link-box .nav-list {display: none;}
	
	footer .right .link-box .link-btn ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 30px;
	}
}

@media screen and (max-width: 430px) {
	footer .right .head-box {margin-bottom: 120px;}
	footer .right .head-box .midashi h3 {
		font-size: 24px;
		width: 105px;
	}
}

/**********************************************************************************

.pickup-floating

**********************************************************************************/
.pickup-floating {
	position: fixed;
	right: 30px;
	bottom: 30px;
	z-index: 10;
	transition: bottom .1s linear;
}

.pickup-floating .top-pickup .pick-up-wrap {
	color: #fff;
	background-color: var(--brown);
	font-size: 18px;
	width: 130px;
	height: 130px;
	border-radius: 50%;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 10px;
	transition: 0.5s;
}

.pickup-floating .top-pickup:hover .pick-up-wrap {
	background-color: var(--red);
	transition: 0.5s;
}

@media screen and (min-width: 1025px) {
	.pickup-floating.is-bottom {bottom: 160px; }
}

@media screen and (max-width: 640px) {
	.pickup-floating {
		right: 20px;
		bottom: 60px;
	}
	.pickup-floating .top-pickup .pick-up-wrap {
		font-size: 16px;
		width: 120px;
		height: 120px;
	}
}

@media screen and (max-width: 430px) {
	.pickup-floating .top-pickup .pick-up-wrap {
		font-size: 13px;
		width: 100px;
		height: 100px;
	}
}

/**********************************************************************************

.sp-fixed-buttons

**********************************************************************************/
.sp-fixed-buttons {	
	width: 100%;
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 10;
	display: flex;
	background: rgba(255,255,255,0.8);
}

.sp-fixed-buttons .sp-fixed-btn {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.sp-fixed-buttons .btn-tel,.sp-fixed-buttons .btn-reserv {border-right: solid 1px;}

.sp-fixed-buttons .sp-fixed-btn .box {
	display: flex;
	align-items: center;	
	justify-content: center;
	width: 100%;
	gap: 10px;
	padding: 10px 0;
}

.sp-fixed-buttons .sp-fixed-btn .box p {font-size: 14px;}

.sp-fixed-buttons img {width: 20px;}

@media (min-width: 820px){
	.sp-fixed-buttons {display:none;}
}

/**********************************************************************************

#fv

**********************************************************************************/
#fv {
	width: 100%;
	position: relative;
	overflow: hidden;
}

#fv .kp {
	position: absolute;
	max-width: 46px;
	top: 20px;
	left: 25px;
	z-index: 2;
	mix-blend-mode: difference;
}

#fv .kp:hover {mix-blend-mode: normal;}

#fv h1 {
	position: absolute;
	max-width: 150px;
	top: 20px;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 2;
	mix-blend-mode: difference;
}

#fv h1:has(a:hover) {
	mix-blend-mode: normal;
}

#fv .reserv {
	position: absolute;
	top: 20px;
	right: 100px;
	z-index: 2;
	mix-blend-mode: difference;
	color: #fff;
	border: solid 1px;
	padding: 5px 20px;
	border-radius: 20px;
}

#fv .reserv:hover {
	mix-blend-mode: normal;
	background-color: var(--red);
	border: solid 1px var(--red);
}

#fv .sns {
	display: flex;
	flex-direction: column;
	gap: 18px;
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	z-index: 2;
}

#fv .sns li {width: 26px;}

#fv,#fv .bg-slider,#fv .bg-slider .slick-img {height: 100dvh;}

#fv .bg-slider {
	margin-inline: auto;
	overflow: hidden;
}

#fv .bg-slider img {
	height: 100%;
	object-fit: cover;
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15); /* 拡大率 */
  }
}
.add-animation {
  animation: zoomUp 10s linear 0s normal both;
}

#fv .bg-slider.sp {display: none;}
@media screen and (max-width: 820px) {
	#fv .bg-slider.pc {display: none;}
	#fv .bg-slider.sp {display: block;}
	#fv .slick-img--split {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	#fv .slick-img--split .split {
		flex: 1 0 50%;
		height: 50%;
		overflow: hidden;
	}
	
	#fv .slick-img--split .split--top {border-bottom: solid 2px #fff;}

	#fv .slick-img--split .split img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	
	#fv h1 {
		width: 40%;
		max-width: 300px;
		left: 40px;
		right: auto;
	}

}

@media screen and (max-width: 640px) {
	#fv .kp {max-width: 36px;}
	#fv h1 {left: 30px;}
	#fv .reserv {display: none;}
	
	#fv .global-nav {
		top: 20px;
		right: 20px;
	}
	
	#fv .sns {display: none;}
}

/**********************************************************************************

#top-sv

**********************************************************************************/
#top-sv {
	background: #fff;
	display: grid;
	place-items: center;
	text-align: center;
	min-height: 100dvh;
	scroll-snap-align: none;
	padding: 0 20px;
	position: relative;
	overflow: hidden;
	scroll-margin-top: 65px;
}

#top-sv img {
	position: absolute;
	display: inline-block;
    animation: spin-right 40s linear infinite;
}

@keyframes spin-right {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#top-sv .img01 {
	max-width: 400px;
	top: 30px;
	right: -164px;
}

#top-sv .img02 {
	max-width: 374px;
	left: -104px;
	bottom: 30px;
}

#top-sv .box h2 {
	font-size: 100px;
	margin-bottom: 30px;
}

#top-sv .box p {
	font-size: 30px;
	line-height: 1.5em;
}

#top-content-wrap {
	position: relative;
	z-index: 2;
}

@media screen and (max-width: 1280px) {
	#top-sv .img01 {
		max-width: 300px;
		right: -64px;
	}

	#top-sv .img02 {
		max-width: 274px;
		left: -54px;
	}
}
@media screen and (max-width: 1190px) {
	#top-sv .box h2 {font-size: 72px;}
}

@media screen and (max-width: 640px) {
	#top-sv .box h2 {font-size: 50px;}
	#top-sv .box p {font-size: 20px;}
	#top-sv .img01 {max-width: 200px;}
	#top-sv .img02 {max-width: 174px;}
}

/**********************************************************************************

#top-news

**********************************************************************************/
#top-news {
	position: relative;
	background-color: #fff;
	overflow: hidden;
}

#top-news .btn {
	display: block;
	width: fit-content;
	margin: 30px 0 0 auto;
}

#top-news .box {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 314px;	
}

#top-news .left {
	position: relative;
	flex: 0 0 28%;
}

#top-news .left .kazari {
	width: 216px;
	position: absolute;
	right: -132px;
	bottom: 20px;
}

#top-news .right {flex: 1;}

#top-news .right .bg {margin-bottom: 90px;}

#top-news .inner {max-width: 740px;}

#top-news .inner h3 {
	font-size: 24px;
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 30px;
}

#top-news .inner h3::after {
	content: "";
	width: 100%;
	height: 1px;
	background-color: var(--brown);;
}

#top-news .inner ul li {margin-bottom: 20px;}
#top-news .inner ul li:last-child {margin-bottom: 0;}

#top-news .inner ul li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 60px;
}

#top-news .inner ul li a .date {font-size: 30px;}

#top-news .inner .title {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}

#top-news .moji-box {
	position: absolute;
	top: 4%;
	left: 16%;
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	max-width: 868px;
}

#top-news .moji-box img{
	display: block;
	will-change: transform, opacity;
	transform-origin: center;
	opacity: 0;
	mix-blend-mode: difference;

	/* 初期：散らし位置 */
	transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)) scale(var(--s, 1));

	/* ふわっと収まる */
	transition:
		transform 1400ms cubic-bezier(.2,.9,.2,1),
		opacity 1000ms ease;
}

/* 発火後：最終位置（＝今のmargin配置）に収まる */
#top-news .moji-box.is-in img{
	opacity: 1;
	transform: translate(0,0) rotate(0) scale(1);
	transition-delay: 400ms;
}

/* チラし：少しだけ順番ズレ（ザッと集合感） */
#top-news .moji-box .moji01{ transition-delay: 0ms; }
#top-news .moji-box .moji02{ transition-delay: 20ms; }
#top-news .moji-box .moji03{ transition-delay: 40ms; }
#top-news .moji-box .moji04{ transition-delay: 60ms; }
#top-news .moji-box .moji05{ transition-delay: 80ms; }
#top-news .moji-box .moji06{ transition-delay: 100ms; }
#top-news .moji-box .moji07{ transition-delay: 120ms; }
#top-news .moji-box .moji08{ transition-delay: 140ms; }
#top-news .moji-box .moji09{ transition-delay: 160ms; }
#top-news .moji-box .moji10{ transition-delay: 180ms; }
#top-news .moji-box .moji11{ transition-delay: 200ms; }
#top-news .moji-box .moji12{ transition-delay: 220ms; }
#top-news .moji-box .moji13{ transition-delay: 240ms; }
#top-news .moji-box .moji14{ transition-delay: 260ms; }
#top-news .moji-box .moji15{ transition-delay: 280ms; }

/* ==========================
		個別：最終位置（今の設定）
		＋ 初期チラし（--x --y --r）
========================== */

#top-news .moji-box .moji01{
	width: 83px;
	margin-right: 28px;

	--x: -120px;
	--y: -80px;
	--r: -20deg;
}
#top-news .moji-box .moji02{
	width: 86px;
	margin-top: 46px;
	margin-right: 30px;

	--x: 90px;
	--y: -110px;
	--r: 18deg;
}
#top-news .moji-box .moji03{
	width: 58px;
	margin-top: 130px;
	margin-right: 60px;

	--x: -160px;
	--y: 60px;
	--r: 12deg;
}
#top-news .moji-box .moji04{
	width: 65px;
	margin-top: 102px;
	margin-right: 50px;

	--x: 140px;
	--y: 90px;
	--r: -16deg;
}
#top-news .moji-box .moji05{
	width: 62px;
	margin-top: 56px;
	margin-right: 60px;

	--x: -80px;
	--y: 120px;
	--r: 25deg;
}
#top-news .moji-box .moji06{
	width: 20px;
	margin-top: 108px;
	margin-right: 48px;

	--x: 60px;
	--y: 40px;
	--r: -10deg;
}
#top-news .moji-box .moji07{
	width: 73px;
	margin-top: 154px;
	margin-right: 20px;

	--x: -140px;
	--y: -10px;
	--r: 14deg;
}
#top-news .moji-box .moji08{
	width: 82px;
	margin-top: 56px;

	--x: 160px;
	--y: -40px;
	--r: -22deg;
}
#top-news .moji-box .moji09{
	width: 74px;
	margin-top: 196px;
	margin-right: 48px;
	margin-left: 20px;

	--x: -40px;
	--y: -140px;
	--r: 10deg;
}
#top-news .moji-box .moji10{
	width: 94px;
	margin-top: 140px;
	margin-right: 8px;

	--x: 30px;
	--y: 150px;
	--r: -12deg;
}
#top-news .moji-box .moji11{
	width: 95px;
	margin-top: 235px;
	margin-right: 10px;

	--x: -180px;
	--y: 100px;
	--r: 20deg;
}
#top-news .moji-box .moji12{
	width: 75px;
	margin-top: 153px;
	margin-right: 52px;

	--x: 110px;
	--y: -150px;
	--r: -8deg;
}
#top-news .moji-box .moji13{
	width: 92px;
	margin-top: 195px;
	margin-right: 58px;

	--x: -100px;
	--y: -120px;
	--r: 16deg;
}
#top-news .moji-box .moji14{
	width: 80px;
	margin-top: 247px;
	margin-right: 56px;

	--x: 180px;
	--y: 30px;
	--r: -18deg;
}
#top-news .moji-box .moji15{
	width: 58px;
	margin-top: 210px;

	--x: 70px;
	--y: 140px;
	--r: 8deg;
}

@media screen and (max-width: 1600px) {
	#top-news .box {gap: 200px;}
	
	#top-news .moji-box {
		top: 4%;
		left: 10%;
		max-width: 642px;
	}
	#top-news .moji-box .moji01 {
		width: 63px;
		margin-right: 25px;
	}
	#top-news .moji-box .moji02 {
		width: 66px;
		margin-top: 30px;
		margin-right: 27px;
	}
	#top-news .moji-box .moji03 {
		width: 38px;
		margin-top: 100px;
		margin-right: 50px;
	}
	#top-news .moji-box .moji04 {
		width: 45px;
		margin-top: 80px;
		margin-right: 40px;
	}
	#top-news .moji-box .moji05 {
		width: 42px;
		margin-top: 45px;
		margin-right: 50px;
	}
	#top-news .moji-box .moji06 {
		width: 15px;
		margin-top: 93px;
		margin-right: 38px;
	}
	#top-news .moji-box .moji07 {
		width: 53px;
		margin-top: 126px;
		margin-right: 17px;
	}
	#top-news .moji-box .moji08 {
		width: 62px;
		margin-top: 50px;
	}
	#top-news .moji-box .moji09 {
		width: 54px;
		margin-top: 130px;
		margin-right: 38px;
		margin-left: 17px;
	}
	#top-news .moji-box .moji10 {
		width: 74px;
		margin-top: 80px;
		margin-right: 8px;
	}
	#top-news .moji-box .moji11 {
		width: 75px;
		margin-top: 170px;
		margin-right: 10px;
	}
	#top-news .moji-box .moji12 {
		width: 55px;
		margin-top: 110px;
		margin-right: 45px;
	}
	#top-news .moji-box .moji13 {
		width: 72px;
		margin-top: 140px;
		margin-right: 48px;
	}
	#top-news .moji-box .moji14 {
		width: 60px;
		margin-top: 180px;
		margin-right: 46px;
	}
	#top-news .moji-box .moji15 {
		width: 40px;
		margin-top: 160px;
	}
}

@media screen and (max-width: 1340px) {
	#top-news .inner {padding-right: 30px;}
}

@media screen and (max-width: 1024px) {
	#top-news .box {gap: 80px;}
	#top-news .left .kazari {
		width: 180px;
		left: -80px;
		right: auto;
	}
	#top-news .inner.pc {display: none;}
	#top-news .inner.sp {
		display: block;
	}
	
	#top-news .inner {
		width: 90%;
		margin: 60px auto 0;
		padding-right: 0;
	}
}

@media screen and (max-width: 820px) {
	#top-news .moji-box {
		top: 4%;
		left: 4%;
		max-width: 470px;
	}
	#top-news .moji-box .moji01 {
		width: 43px;
		margin-right: 20px;
	}
	#top-news .moji-box .moji02 {
		width: 46px;
		margin-top: 24px;
		margin-right: 23px;
	}
	#top-news .moji-box .moji03 {
		width: 30px;
		margin-top: 66px;
		margin-right: 40px;
	}
	#top-news .moji-box .moji04 {
		width: 30px;
		margin-top: 50px;
		margin-right: 30px;
	}
	#top-news .moji-box .moji05 {
		width: 30px;
		margin-top: 30px;
		margin-right: 40px;
	}
	#top-news .moji-box .moji06 {
		width: 10px;
		margin-top: 48px;
		margin-right: 28px;
	}
	#top-news .moji-box .moji07 {
		width: 33px;
		margin-top: 66px;
		margin-right: 13px;
	}
	#top-news .moji-box .moji08 {
		width: 42px;
		margin-top: 27px;
	}
	#top-news .moji-box .moji09 {
		width: 34px;
		margin-top: 100px;
		margin-right: 30px;
		margin-left: 14px;
	}
	#top-news .moji-box .moji10 {
		width: 54px;
		margin-top: 56px;
		margin-right: 8px;
	}
	#top-news .moji-box .moji11 {
		width: 55px;
		margin-top: 118px;
		margin-right: 10px;
	}
	#top-news .moji-box .moji12 {
		width: 35px;
		margin-top: 82px;
		margin-right: 35px;
	}
	#top-news .moji-box .moji13 {
		width: 50px;
		margin-top: 100px;
		margin-right: 38px;
	}
	#top-news .moji-box .moji14 {
		width: 40px;
		margin-top: 130px;
		margin-right: 36px;
	}
	#top-news .moji-box .moji15 {
		width: 30px;
		margin-top: 116px;
	}
}

@media screen and (max-width: 640px) {
	#top-news .box {
		flex-direction: column;
		align-items: flex-start;
		gap: 30px;
	}
	#top-news .left {
		order: 2;
		flex: 0;
		width: 55%;
	}
	#top-news .right {
		order: 1;
		flex: 0;
		width: 70%;
		margin: 0 0 0 auto;
	}
	#top-news .left .kazari {
		width: 100px;
		left: -20px;
		bottom: -30px;
	}
	#top-news .right .bg {margin-bottom: 0;}
	#top-news .inner ul li {margin-bottom: 30px;}
	#top-news .inner ul li a {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	#top-news .inner ul li a .date {font-size: 16px;}
	#top-news .moji-box {
		top: 18%;
		left: 0;
		right: 0;
		margin: 0 auto;
		max-width: 327px;
	}
	#top-news .moji-box .moji01 {
		width: 33px;
		margin-right: 10px;
	}
	#top-news .moji-box .moji02 {
		width: 36px;
		margin-top: 17px;
		margin-right: 15px;
	}
	#top-news .moji-box .moji03 {
		width: 20px;
		margin-top: 50px;
		margin-right: 30px;
	}
	#top-news .moji-box .moji04 {
		width: 20px;
		margin-top: 36px;
		margin-right: 15px;
	}
	#top-news .moji-box .moji05 {
		width: 20px;
		margin-top: 22px;
		margin-right: 25px;
	}
	#top-news .moji-box .moji06 {
		width: 7px;
		margin-top: 30px;
		margin-right: 18px;
	}
	#top-news .moji-box .moji07 {
		width: 23px;
		margin-top: 47px;
		margin-right: 7px;
	}
	#top-news .moji-box .moji08 {
		width: 30px;
		margin-top: 15px;
	}
	#top-news .moji-box .moji09 {
		width: 24px;
		margin-top: 70px;
		margin-right: 20px;
		margin-left: 14px;
	}
	#top-news .moji-box .moji10 {
		width: 35px;
		margin-top: 50px;
		margin-right: 8px;
	}
	#top-news .moji-box .moji11 {
		width: 40px;
		margin-top: 84px;
		margin-right: 8px;
	}
	#top-news .moji-box .moji12 {
		width: 25px;
		margin-top: 62px;
		margin-right: 20px;
	}
	#top-news .moji-box .moji13 {
		width: 30px;
		margin-top: 77px;
		margin-right: 25px;
	}
	#top-news .moji-box .moji14 {
		width: 30px;
		margin-top: 90px;
		margin-right: 26px;
	}
	#top-news .moji-box .moji15 {
		width: 20px;
		margin-top: 75px;
	}
}

/**********************************************************************************

#top-concept

**********************************************************************************/
#top-concept .box {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	position: relative;
}

#top-concept .left {
	flex: 0 0 70%;
	min-width: 0;
	position: relative;
	margin-top: 340px;
}

#top-concept .left h3 {
	font-size: 100px;
	position: absolute;
	top: -60px;
	left: 10%;
	z-index: 4;
}

#top-concept .left .view-slider02 {
	position: absolute;
	top: -180px;
	right: 0;
	width: 35%;
	border-right: solid 10px #fff;
	border-bottom: solid 10px #fff;
	z-index: 3;
}

#top-concept .right {
	flex: 1;
	min-width: 0;
	margin-top: 340px;
}

.view-slider.slick-slider {box-sizing: border-box;}
.view-slider:not(.slick-initialized) .slick-slide {display: block;}
.view-slider.slick-initialized .slick-slide {display: block;}

.view-slider {
	position: relative;
	width: 100%;
	min-width: 0;
	overflow: hidden;
	background: transparent;
}
.view-slider01 { aspect-ratio: 5 / 3; }
.view-slider02 { aspect-ratio: 3 / 5; }
.view-slider03 { aspect-ratio: 3 / 5; }

/* スライダー全体を反転 */
.view-slider01,
.view-slider02,
.view-slider03 {
	transform: scaleX(-1);
}

/* 中のスライドだけ再反転して正しい向きに */
.view-slider01 .slick-slide,
.view-slider02 .slick-slide,
.view-slider03 .slick-slide {
	transform: scaleX(-1);
}


.view-slider .slick-list {
	position: relative;
	overflow: hidden;
	display: block;
	height: 100%;
}
.view-slider .slick-track {
	position: relative;
	left: 0;
	top: 0;
	display: block;
	height: 100%;
}
.view-slider .slick-slide { height: 100%; }
.view-slider .slick-slide > div { height: 100%; }
.view-slider .slick-img { height: 100%; overflow: hidden; }
.view-slider .slick-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* スライダー器の上に赤帯を一時的に重ねる */
.view-slider {
	position: relative;	
	overflow: hidden;
}

/* 生成する帯オーバーレイ（JSで動的に追加） */
.view-slider .band-overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%; 
	right: 0;
	background-color: var(--red);
	pointer-events: none;
	z-index: 2; 
	transform: translateX(110%);
	will-change: transform; 
	opacity: 1;
}

.view-slider02 .band-overlay {z-index: 4;}

/* 初期：中身はまとめて隠す（slickのフェードを邪魔しないように slick-list だけ） */
.view-slider .slick-list {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease-out, visibility 0s linear 0.6s;
}

/* 帯が走るタイミングで中身を表示（コンテナがふわっと出るだけ） */
.view-slider.band-show .slick-list {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.6s ease-out;
	transition-delay: 1.3s; /* ここは今の演出に合わせてOK */
}

/* 帯アニメーション（ここに直接値：遅延＆ゆっくり） */
.view-slider .band-overlay.run {
	animation: band-sweep-inout var(--band-duration, 1800ms) cubic-bezier(.22,.61,.36,1) 1 both;
	animation-delay: var(--band-delay, 800ms);
}



/* スッと通過（in→out） */
@keyframes band-sweep-inout {
	0%   { transform: translateX(110%); }
	100% { transform: translateX(-120%); }
}

/* ズーム（1回） */
.view-slider .slick-img.zoom-once {
	animation: zoom-once 1.0s cubic-bezier(.22,.61,.36,1) 0s 1 forwards;
	transform-origin: center center;
	will-change: transform;
}

@keyframes zoom-once {
	0%   { transform: scaleX(-1) scale(1); }
	100% { transform: scaleX(-1) scale(1.12); }
}

#top-concept .kazari {
	position: absolute;
	top: 0;
	right: 0;
	width: 25%;
	max-width: 380px;
	display: block;
	opacity: 0;
	transform: translateY(30px);
	clip-path: inset(0 0 100% 0);
	transition: clip-path 2.5s ease-out, opacity 2.5s ease-out, transform 2.5s ease-out;
	z-index: 4;
	pointer-events: none;
}

#top-concept .kazari.show {
	transition-delay: 0.5s;
	opacity: 1;
	transform: translateY(0);
	clip-path: inset(0 0 0 0); /* 全面表示 */
}

#top-concept .contents {
	width: 100%;
	margin: 0 auto 100px;
	padding: 0 10%;
}

#top-concept .contents h4 {
	font-size: 75px;
	line-height: 1.3em;
	margin-bottom: 40px;
}

#top-concept .contents p {
	line-height: 1.8em;
	margin-bottom: 60px;
}

#top-concept .contents p,#top-concept .contents a {margin-left: 1%;}

@media screen and (max-width: 1600px) {
	#top-concept .left h3 {
		font-size: 80px;
		top: -50px;
		left: 5%;
	}
	
	#top-concept .contents {padding: 0 5%;}
}

@media screen and (max-width: 1200px) {
	#top-concept .left,#top-concept .right {margin-top: 250px;}
	#top-concept .left h3 {
		font-size: 70px;
		top: -45px;
	}
	
	#top-concept .left .view-slider02 {top: -100px;}
}

@media screen and (max-width: 1024px) {
	#top-concept .left {flex: 0 0 80%;}
	#top-concept .left .view-slider02 {width: 30%;}
	.view-slider01 { aspect-ratio: 5 / 2.5;}
	.view-slider03 { aspect-ratio: 2 / 5;}
	#top-concept .contents {margin: 30px auto 100px;}
	#top-concept .contents h4 {font-size: 60px;}
}

@media screen and (max-width: 768px) {
	#top-concept .contents h4 {font-size: 45px;}
}

@media screen and (max-width: 640px) {
	#top-concept .box {
		flex-direction: column;
		align-items: flex-end;
		gap: 6px;
		margin-top: 200px;
	}

	#top-concept .left {
		flex: 0 0 auto;
		width: 100%;
		margin-top: 0;
		min-width: 0;
	}
	
	#top-concept .left h3 {
		font-size: 50px;
		top: -35px;
	}
	
	#top-concept .left .view-slider02 {
		width: 40%;
		top: -120px;
		border-right: solid 6px #fff;
		border-bottom: solid 6px #fff;		
	}
	
	#top-concept .right {
		flex: 0 0 auto;
		width: 70%;
		margin-top: 0;
		min-width: 0;
	}
	
	.view-slider03 { aspect-ratio: 5 / 3;}

	#top-concept .kazari {
		width: 45%;
		max-width: none;
		top: -300px;
		right: 0;
	}

	#top-concept .contents {margin: 30px auto 80px;}
}

@media screen and (max-width: 430px) {
	#top-concept .left h3 {
		font-size: 40px;
		top: -26px;
		left: 3%;
	}
	
	#top-concept .contents h4 {
		font-size: 29px;
		letter-spacing: 0.01em;
	}
}

@media screen and (max-width: 390px) {
	#top-concept .left h3 {font-size: 35px;}
}

/**********************************************************************************

#top-statement

**********************************************************************************/
#top-statement {position: relative;}

#top-statement .bg-box {
	overflow: hidden;
	aspect-ratio: 5 / 3;
	position: relative;
}

#top-statement .bg-box::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.4),
		rgba(0, 0, 0, 0)
	);
	pointer-events: none;
}

#top-statement .bg-box img {
	height: 100%;
	object-fit: cover;
}

#top-statement .contents {
	position: absolute;
	right: 10%;
	bottom: 60px;
	color: #fff;
}

#top-statement .contents h4 {
	font-size: 30px;
	margin-bottom: 10px;
}

#top-statement .contents h3 {
	font-size: 90px;
	margin-bottom: 30px;
	margin-left: -1%;
}

#top-statement .contents p {
	line-height: 1.8em;
	margin-bottom: 30px;
}

#top-statement .contents .btn-box {text-align: right;}

#top-statement .kazari {
	position: absolute;
	left: 0;
	bottom: 31%;
	display: block;
	opacity: 0;
	transform: translateY(30px);
	clip-path: inset(0 0 100% 0);
	transition: clip-path 2.5s ease-out, opacity 2.5s ease-out, transform 2.5s ease-out;
	z-index: 4;
	pointer-events: none;
}

#top-statement .kazari.show {
	transition-delay: 0.5s;
	opacity: 1;
	transform: translateY(0);
	clip-path: inset(0 0 0 0); /* 全面表示 */
}

@media screen and (max-width: 1600px) {
	#top-statement .contents {right: 5%;}
}

@media screen and (max-width: 1024px) {
	#top-statement .bg-box {aspect-ratio: 4 / 3;}
	#top-statement .contents h3 {font-size: 70px;}
	#top-statement .kazari {bottom: 45%;}
}

@media screen and (max-width: 820px) {
	#top-statement .bg-box {aspect-ratio: 1 / 1;}
	#top-statement .kazari {bottom: 59%;}
}

@media screen and (max-width: 640px) {
	#top-statement .bg-box {aspect-ratio: 3 / 4;}
	#top-statement .contents {
		left: 5%;
		bottom: 40px;
		margin: 0 auto;
	}
	#top-statement .contents h4 {font-size: 24px;}
	#top-statement .contents h3 {font-size: 45px;}
	#top-statement .kazari {bottom: 69%;}
}

@media screen and (max-width: 430px) {
	#top-statement .bg-box {aspect-ratio: 3 / 5;}
	#top-statement .kazari {bottom: 75%;}
}

@media screen and (max-width: 414px) {
	#top-statement .bg-box {aspect-ratio: 2.5 / 5;}
	#top-statement .kazari {bottom: 79%;}
}

/**********************************************************************************

#top-fullorder

**********************************************************************************/
#top-fullorder{
	margin: 180px auto 150px;
	position: relative;
}

#top-fullorder .marquee{
	width: 100%;
	position: relative;
}

/* =========================
	文字だけ追従（sticky）
========================= */

#top-fullorder .marquee-text-sticky{
	position: sticky;
	top: 50%;
	transform: translateY(-50%);
}

#top-fullorder .marquee-clip{
	width: 100%;
	overflow: hidden;
}

#top-fullorder .marquee-inner{
	display: flex;
	width: max-content;
	will-change: transform;
	animation: marquee-loop 40s linear infinite;
}

#top-fullorder h3 {
	white-space: nowrap;
	margin-right: 200px;
	font-size: 200px;
}

/* =========================
	画像（追従しない）
	※はみ出し対策：画像段だけ clip で切る
========================= */

#top-fullorder .marquee-img-clip{
	width: 100%;
	overflow: hidden;
	margin-top: 60px;
}

#top-fullorder .marquee-inner02{
	display: flex;
	width: max-content;
	will-change: transform;
	animation: marquee-loop 20s linear infinite;
}

#top-fullorder .marquee-inner02 picture{
	display: block;
	flex: 0 0 auto;
}

#top-fullorder .marquee-inner02 img{
	display: block;
	max-width: 1500px;
	height: auto;
}

/* =========================
	共通：横ループ
========================= */

@keyframes marquee-loop{
	0%{
		transform: translateX(0);
	}
	100%{
		transform: translateX(-50%);
	}
}

/* =========================
	box（marquee内に入れてOK）
========================= */

#top-fullorder .box {
	width: 90%;
	margin: 100px auto 0;
	padding: 100px 0;
	position: relative;
}

#top-fullorder .box .inner {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 85%;
	gap: 60px;
	margin: 0 auto;
}

#top-fullorder .box .inner .left h4 {
	font-size: 48px;
	margin-bottom: 20px;
}

#top-fullorder .box .inner .left .inner-box {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

#top-fullorder .box .inner .left .inner-box h5 {
	font-size: 30px;
	letter-spacing: 0.01em;
}

#top-fullorder .box .inner .right {
	line-height: 1.8em;
}

#top-fullorder .box .kazari {
	position: absolute;
	top: -24%;
	right: 5%;
	max-width: 222px;
}

#top-fullorder .box .inner .left h4 {
	font-size: 60px;
	margin-bottom: 20px;
}

#top-fullorder .box .inner .left .inner-box {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

#top-fullorder .box .inner .left .inner-box h5 {
	font-size: 30px;
	letter-spacing: 0.01em;
}

#top-fullorder .box .inner .right {line-height: 1.8em;}

#top-fullorder .box .inner .btn.sp {display: none;}

#top-fullorder .box .kazari {
	position: absolute;
	top: -24%;
	right: 5%;
	max-width: 222px;
}

@media screen and (max-width: 1600px) {
	#top-fullorder .box .inner .left h4 {font-size: 48px;}
}

@media screen and (max-width: 1200px) {
	#top-fullorder .box .inner .left .inner-box {
		flex-direction: column;
		gap: 30px;
	}
	
	#top-fullorder .box .inner .left .inner-box h5 {width: 100%;}
}

@media screen and (max-width: 870px) {
	#top-fullorder .box .inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
	}
	#top-fullorder .box .inner .btn.pc {display: none;}
	#top-fullorder .box .inner .btn.sp {
		display: inline-block;
		margin: 0 0 0 auto;
	}
}

@media screen and (max-width: 640px) {
	#top-fullorder {margin: 100px auto;}
	#top-fullorder h3 {
		margin-right: 60px;
		font-size: 60px;
	}
	#top-fullorder .marquee-inner {animation: marquee-loop 30s linear infinite;}
	#top-fullorder .marquee-inner02 {animation: marquee-loop 20s linear infinite;}
	#top-fullorder .marquee-img-clip{margin-top: 30px;}
	#top-fullorder .marquee-inner02 img {max-width: 1000px;}
	#top-fullorder .box {padding: 60px 0;}
	#top-fullorder .box .kazari {
		top: -15%;
		right: 9px;
		max-width: 150px;
	}
}

@media screen and (max-width: 430px) {
	#top-fullorder .box .inner .left h4 {font-size: 40px;}
	#top-fullorder .box .inner .left .inner-box h5 {font-size: 24px;}
}

/**********************************************************************************

#top-spec

**********************************************************************************/
#top-spec {
	width: 90%;
	margin: 0 auto 150px;
}

#top-spec .midashi {
	margin: 0 auto 50px;
	text-align: center;
}

#top-spec .midashi p {
	font-size: 30px;
	margin-bottom: 5px;
}
#top-spec .midashi p span {font-size: 36px;}

#top-spec .midashi h3 {font-size: 120px;}

#top-spec h4 {
	font-size: 60px;
	text-align: center;
	margin-bottom: 60px;
}

#top-spec h4 span {font-size: 100px;}

#top-spec .flow {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 60px;
}

#top-spec .link-box {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	width: 90%;
	margin: 0 auto;
}

#top-spec .link-box li a .img-box {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin-bottom: 15px;
}

#top-spec .link-box li a .txt-box {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
}

#top-spec .link-box li a .txt-box .main-box h6 {
	font-size: 28px;
	margin-bottom: 5px;
}

#top-spec .link-box li a .txt-box .btn {
	font-size: 16px;
	transition: 0.5s;
}

#top-spec .link-box li a:hover .txt-box .btn {
	background-color: var(--red);
	color: #fff;
	border: solid 1px var(--red);
	transition: 0.5s;
}

@media (max-width: 1600px) {
	#top-spec .link-box {width: 100%;}
}

@media (max-width: 1280px) {
	#top-spec h4 {font-size: 40px;}
	#top-spec h4 span {font-size: 80px;}
}

@media (max-width: 1024px) {
	#top-spec .link-box li a .txt-box {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
	
	#top-spec .link-box li a .txt-box .btn {margin: 0 0 0 auto;}
}

@media (max-width: 820px) {
	#top-spec h4 .pc {display: none;}
	#top-spec h4 .sp {display: block;}
}

@media screen and (max-width: 640px) {
	#top-spec {margin: 0 auto 80px;}
	
	#top-spec .midashi p {font-size: 24px;}
	#top-spec .midashi p span {font-size: 30px;}
	#top-spec .midashi h3 {font-size: 80px;}
	
	#top-spec h4 {font-size: 24px;}
	#top-spec h4 span {font-size: 50px;}
	
	#top-spec .link-box {
		grid-template-columns: repeat(1, 1fr);
		gap: 50px;
	}
}

/**********************************************************************************

#top-works

**********************************************************************************/
#top-works {
	width: 90%;
	margin: 0 auto 150px;
	text-align: center;
	isolation: isolate;
	background-color: #fff;
}

#top-works .midashi {
	color: #fff;
	mix-blend-mode: difference;
	position: relative;
	z-index: 1;
}

#top-works .midashi p {font-size: 30px;}
#top-works .midashi h3 {font-size: 120px;}

#top-works .works-pickup {
	margin-top: -62px;
	margin-bottom: 50px;
	position: relative;
	z-index: 0;
}

#top-works .works-pickup .works-main-image {
	aspect-ratio: 5 / 3;
	overflow: hidden;
}

#top-works .works-pickup .works-main-image img {
	height: 100%;
	object-fit: cover;
}

#top-works .works-pickup .works-sub-images {
	width: 40%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	position: absolute;
	right: 30px;
	bottom: 30px;
}

#top-works .works-pickup .works-sub-images li {
	aspect-ratio: 5 / 3;
	overflow: hidden;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

#top-works .works-pickup .works-sub-images li img {
	height: 100%;
	object-fit: cover;
}

#top-works .works-pickup .works-meta {
	width: 40%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
	padding: 40px;
	background-color: #fff;
	position: absolute;
	left: 0;
	bottom: 0;
	text-align: left;
}

#top-works .works-pickup .works-meta .box .works-category {font-size: 18px;}
#top-works .works-pickup .works-meta .box .works-title {font-size: 48px;}

@media screen and (max-width: 1300px) {
	#top-works .works-pickup .works-meta {padding: 30px;}
}

@media screen and (max-width: 1024px) {
	#top-works .works-pickup .works-sub-images {
		width: 20%;
		grid-template-columns: repeat(1, 1fr);
		right: 20px;
		bottom: 20px;
	}
	
	#top-works .works-pickup .works-meta {width: 60%;}
}

@media screen and (max-width: 640px) {
	#top-works {
		width: 100%;
		margin: 0 auto 80px;
		background-color: var(--brown);
		padding: 50px 0;
	}
	
	#top-works .btn {
		color: #fff;
		border: solid 1px #fff;
	}
	
	#top-works .midashi p {font-size: 24px;}
	#top-works .midashi h3 {font-size: 60px;}
	#top-works .works-pickup {margin-top: -31px;}
	
	#top-works .works-pickup .works-sub-images {
		position: static;
		width: 100%;
		margin-top: 5px;
		grid-template-columns: repeat(3, 1fr);
		gap: 5px;
	}
	
	#top-works .works-pickup .works-sub-images li {box-shadow: none;}
	
	#top-works .works-pickup .works-meta {
		width: 100%;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 20px;
		padding: 20px 20px 0;
		position: static;
		color: #fff;
		background-color: var(--brown);
	}

	#top-works .works-pickup .works-meta .box .works-category {font-size: 16px;}
	#top-works .works-pickup .works-meta .box .works-title {font-size: 30px;}
	
	#top-works .works-pickup .btn {
		display: block;
		margin: 0 0 0 auto;
	}
}

/**********************************************************************************

#top-event

**********************************************************************************/
#top-event {
	margin: 0 auto 150px;
	position: relative;
}

#top-event .box {
	width: 90%;
	margin: 0 auto;
	padding-bottom: 150px;
	display: flex;
	align-items: flex-start;
	gap: 10%;
}

#top-event .box .left h3 {
	font-size: 120px;
	margin-bottom: 10px;
}

#top-event .box .left p {
	font-size: 24px;
	margin-bottom: 35px;
}

#top-event .box .left .btn {
	display: block;
	margin: 0 0 0 auto;
	width: fit-content;
}

#top-event .box .right {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-height: 650px;
}

#top-event .box .right li a {
	display: flex;
	gap: 25px;
}

#top-event .box .right li a .thum {
	flex: 0 0 40%;
	aspect-ratio: 5 / 3;
	overflow: hidden;
	position: relative;
}

#top-event .box .right li a .thum img {
	height: 100%;
	object-fit: cover;
}

#top-event .box .right li a .thum .live-icon {
	width: 60px;
	position: absolute;
	z-index: 2;
	top: 10px;
	right: 10px;
}

#top-event .box .right li a .thum .event-end {
	background: rgba(0,0,0,.5);
	mix-blend-mode: multiply;
	position: absolute;
	inset: 0;
	z-index: 1;
}

#top-event .box .right li a .thum .event-end p {
	font-size: 18px;
	padding: 10px 20px;
	color: #fff;
	background-color: var(--brown);;
	width: fit-content;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	margin: 0 auto;
}

#top-event .box .right li a .content {
	flex: 1;
	position: relative;
	padding: 20px 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#top-event .box .right li a .content .text .meta {
	display: flex;
	align-items: center;
	font-size: 18px;
	gap: 5px;
	margin-bottom: 15px;
}

#top-event .box .right li a .content .text .meta .date::after {content: " |";}

#top-event .box .right li a .content .text h4 {
	line-height: 1.8em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

#top-event .box .right li a .content .btn {
	transition: 0.5s;
	width: fit-content;
	margin: 20px 0 0 auto;
}

#top-event .box .right li a:hover .content .btn {
	background-color: var(--red);
	color: #fff;
	border: solid 1px var(--red);
	transition: 0.5s;
}

#top-event .box .right li a .content .new {
	position: absolute;
	top: 0;
	right: 0;
}

#top-event .box .right .no-event {
	margin-top: 30px;
	font-size: 20px;
	text-align: center;
}

#top-event .bg-image {
	width: 25%;
	position: absolute;
	left: 0;
	bottom: 0;	
}

#top-event .bg-image .kazari {
	width: 150px;
	position: absolute;
	top: -70px;
	right: -70px;
	display: inline-block;
    animation: spin-right 40s linear infinite;
}

@media screen and (max-width: 2000px) {
	#top-event .bg-image {width: 30%;}
}

@media screen and (max-width: 1280px) {
	#top-event .box {gap: 60px;}
	#top-event .box .right {min-height: 550px;}
	#top-event .box .right li a .thum {flex: 0 0 50%;}
	#top-event .bg-image {width: 35%;}
}

@media screen and (max-width: 1200px) {
	#top-event .box {flex-direction: column;}
	#top-event .box .left {width: 100%;}
	#top-event .box .right {
		flex: 0;
		min-height: 0;
	}
	#top-event .bg-image {
		width: 80%;
		position: relative;
	}
}

@media screen and (max-width: 640px) {
	#top-event {margin: 0 auto 80px;}
	#top-event .box {
		padding-bottom: 80px;
		border-bottom: solid 1px;
	}
	#top-event .box .left .btn {display: none;}
	#top-event .box .left h3 {font-size: 60px;}
	#top-event .box .left p {margin-bottom: 0;}
	#top-event .box .right {gap: 40px;}
	#top-event .box .right li a {flex-direction: column;}
	#top-event .box .right li a .thum,#top-event .box .right li a .content {flex: 0;}
	#top-event .box .right li a .content {padding: 0;}
	#top-event .box .right .no-event {
		margin-top: 0;
		font-size: 18px;
	}
	#top-event .bg-image {margin-bottom: 30px;}
	#top-event .bg-image .kazari {
		width: 100px;
		top: -50px;
		right: -50px;
	}
	
	#top-event .btn.sp {
		display: block;
		margin: 0 auto;
		width: fit-content;
	}
}

/**********************************************************************************

#top-voice

**********************************************************************************/
#top-voice {
	width: 80%;
	margin: 0 auto 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#top-voice .box {
	position: relative;
	text-align: center;
	width: fit-content;
	flex: 0 0 auto;
}

#top-voice .midashi {
	position: relative;
	margin-bottom: 40px;
	display: inline-block;
	width: max-content;
}

#top-voice .midashi h4 {
	font-size: 24px;
}

#top-voice .midashi h3 {
	font-size: 120px;
	display: inline-block;
}

#top-voice .midashi .img01 {
	position: absolute;
	width: 94px;
	top: 14px;
	right: -64px;
}

#top-voice p {
	font-size: 18px;
	line-height: 2em;
	margin-bottom: 55px;
	text-align: left;
}

#top-voice .img02 {
	position: absolute;
	width: 80px;
	left: -104px;
	bottom: 40px;
}

@media screen and (max-width: 1390px) {
	#top-voice .midashi h3.pc {display: none;}
	#top-voice .midashi h3.sp {display: inline-block;}
}

@media screen and (max-width: 1180px) {
	#top-voice .img02 {
		left: -70px;
		bottom: 10px;
	}
}

@media screen and (max-width: 820px) {
	#top-voice .midashi h3 .sp {display: block;}
}

@media screen and (max-width: 640px) {
	#top-voice {margin: 0 auto 80px;}
	#top-voice .midashi h3 {font-size: 54px;}
	#top-voice .midashi .img01 {
		width: 54px;
		top: 2px;
		right: -30px;
	}
	
	#top-voice p {font-size: 16px;}
	
	#top-voice .img02 {
		width: 70px;
		left: -30px;
	}
}

/**********************************************************************************

#top-rab

**********************************************************************************/
#top-rab {
	position: relative;
	overflow: hidden;
	padding: 150px 5%;
	background: url("images/top/rab-kari.jpg") center / cover no-repeat;
	isolation: isolate;
}

#top-rab .rab-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
	pointer-events: none;
}

#top-rab h3 {
	font-size: 120px;
	color: #fff;
	mix-blend-mode: difference;
	margin-bottom: 80px;
	text-align: center;
}

#top-rab .rab-inner {
	position: relative;
	z-index: 1;
	text-align: center;
}


#top-rab .rab-inner h4 {
	font-size: 36px;
	color: #fff;
	margin-bottom: 40px;
}

#top-rab .rab-inner ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	width: 90%;
	margin: 0 auto;	
}

#top-rab .rab-inner ul li a {
	display: flex;
	flex-direction: column;
	height: 100%;
}

#top-rab .rab-inner ul li a .inner {
	background-color: #fff;
	padding: 25px 20px 30px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

#top-rab .rab-inner ul li a .inner h5 {
	font-size: 22px;
	text-align: left;
	margin-bottom: 10px;
}

#top-rab .rab-inner ul li a .inner .txt {
	text-align: justify;
	line-height: 2em;
	margin-bottom: 15px;
}

#top-rab .rab-inner ul li a .inner .btn {
	font-size: 16px;
	transition: 0.5s;
	margin: auto auto 0;
	width: fit-content;
}

#top-rab .rab-inner ul li a:hover .inner .btn {
	background-color: var(--red);
	color: #fff;
	border: solid 1px var(--red);
	transition: 0.5s;
}

@media screen and (max-width: 1600px) {
	#top-rab .rab-inner ul {width: 100%;}
}

@media screen and (max-width: 1280px) {
	#top-rab h3 {font-size: 80px;}
}

@media screen and (max-width: 640px) {
	#top-rab {padding: 80px 5%;}
	#top-rab h3 {font-size: 70px;}
	#top-rab .rab-inner h4 {font-size: 30px;}
	#top-rab .rab-inner ul {
		grid-template-columns: repeat(1, 1fr);
		gap: 40px;
	}
	#top-rab .rab-inner ul li a .inner h5 {font-size: 20px;}
}

/**********************************************************************************

#top-aboutus

**********************************************************************************/
#top-aboutus {
	width: 90%;
	margin: 120px auto 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 80px;
}

#top-aboutus .left,#top-aboutus .right {flex: 1;}

#top-aboutus .left {position: relative;}

#top-aboutus .left p {
	font-size: 18px;
	line-height: 1.8em;
	position: absolute;
	left: 0;
	bottom: 10%;
}

#top-aboutus .right {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

#top-aboutus .right li {
	border-bottom: solid 1px;
	padding-bottom: 30px;
}

#top-aboutus .right li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}

#top-aboutus .right li a .midashi {
	display: flex;
	align-items: flex-end;
	gap: 5px;
}

#top-aboutus .right li a .midashi h4 {font-size: 48px;}

#top-aboutus .right li a .midashi p {font-size: 16px;}

#top-aboutus .right li a .btn {
	font-size: 16px;
	transition: 0.5s;
}

#top-aboutus .right li a:hover .btn {
	background-color: var(--red);
	color: #fff;
	border: solid 1px var(--red);
	transition: 0.5s;
}

@media screen and (max-width: 1600px) {
	#top-aboutus .left {flex: 0 0 680px;}
}

@media screen and (max-width: 1470px) {
	#top-aboutus .right li a {
		flex-direction: column;
		align-items: flex-start;
	}
	
	#top-aboutus .right li a .btn {margin: 0 0 0 auto;}
}

@media screen and (max-width: 1314px) {
	#top-aboutus .left {flex: 0 0 550px;}
	
	#top-aboutus .left .pc {display: none;}
	#top-aboutus .left .sp {display: block;}
	#top-aboutus .left p {bottom: -10%;}
}

@media screen and (max-width: 1170px) {
	#top-aboutus .right li a .midashi {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media screen and (max-width: 1024px) {
	#top-aboutus {flex-direction: column;}
	#top-aboutus .left,#top-aboutus .right {flex: 0;}
	#top-aboutus .left {max-width: 550px;}
	#top-aboutus .right {
		flex-direction: row;
		width: 100%;
	}
	#top-aboutus .right li {flex: 1;}
}

@media screen and (max-width: 640px) {
	#top-aboutus {
		margin: 80px auto 0;
		gap: 100px;
	}
	#top-aboutus .left p {font-size: 16px;}
	#top-aboutus .right {flex-direction: column;}
	#top-aboutus .right li {flex: 0;}
	#top-aboutus .right li a .midashi h4 {font-size: 40px;}
}

@media screen and (max-width: 430px) {
	#top-aboutus .left p {bottom: -30%;}
}

/***********************************************************************************下層*********************************************************************************/
/**********************************************************************************

#under-head

**********************************************************************************/
#under-head {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 80px;
	margin-top: 250px;
}

#under-head .midashi {
	text-align: right;
	padding-left: 5%;
}

#under-head .midashi p {font-size: 24px;}
#under-head .midashi h2 {font-size: 100px;}

#under-head .midashi h2.midashi-long {font-size: 80px;}

#under-head .img-box {
	aspect-ratio: 5 / 1;
	overflow: hidden;
	flex: 0 0 60%;
}

#under-head .img-box.short {flex: 0 0 70%;}
#under-head .img-box.long {flex: 0 0 55%;}

#under-head .img-box img {
	height: 100%;
	object-fit: cover;
}

@media screen and (max-width: 1800px) {
	#under-head .img-box,#under-head .img-box.long {flex: auto;}
}

@media screen and (max-width: 1600px) {
	#under-head {gap: 60px;}
	#under-head .midashi h2 {font-size: 80px;}
	#under-head .img-box.short {flex: auto;}
}

@media screen and (max-width: 820px) {
	#under-head {
		flex-direction: column;
		justify-content: flex-start;
		margin-top: 200px;
	}
	
	#under-head .midashi {padding-right: 5%;}	
}

@media screen and (max-width: 640px) {
	#under-head {
		margin-top: 60px;
		gap: 40px;
	}
	#under-head .midashi p {font-size: 20px;}
	#under-head .midashi h2 {font-size: 50px;}
	#under-head .midashi h2.midashi-long {font-size: 40px;}
	#under-head .img-box {aspect-ratio: 6 / 2;}
}

/***********************************************************************************下層動的*********************************************************************************/

/**********************************************************************************

.pagination

**********************************************************************************/
.pagination {
	margin-top: 100px;
	text-align: center;
}

.pagination .nav-links {
	display: inline-flex;
	align-items: center;
	gap: 16px;
}

.pagination .page-numbers {
	text-decoration: none;
	color: var(--brown);;
	padding: 4px 2px;
	position: relative;
	font-family: "map-roman-variable", serif;
}

.pagination .page-numbers.current {
	color: var(--red);
	border-bottom: 1px solid var(--red);
}

/* ← → ボタン */
.pagination .prev,
.pagination .next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background: var(--red);
	color: #fff;
	text-decoration: none;
}

/* hover */
.pagination .prev:hover,
.pagination .next:hover {
	background: var(--red);
}

.pagination .arrow svg {
	display: block;
}

@media screen and (max-width: 640px) {
	.pagination {margin-top: 60px;}
}

/**********************************************************************************

#post-wrap

**********************************************************************************/
#post-wrap {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 80px;
	margin: 120px auto 0;
	width: 80%;
}

.sidebar {
	flex: 0 0 238px;
	position: relative;
}

.sidebar h3 {
	font-size: 24px;
	margin-bottom: 50px;
}

.category-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.category-list li {margin-bottom: 12px;}

.category-list a {
	font-size: 18px;
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding-left: 22px;
	text-decoration: none;
	color: var(--brown);;
	transition: color 0.3s ease;
}

.category-list a img {width: 24px;}

.category-list a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 15px;
	height: 15px;
	border: 1px solid var(--brown);;
	box-sizing: border-box;
}

.category-list a::after {
	content: "";
	position: absolute;
	left: 2px;
	top: 50%;
	transform: translateY(-50%);
	width: 11px;
	height: 11px;
	background: var(--red);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.category-list a:hover::after {opacity: 1;}
.category-list li.current-cat > a::after {opacity: 1;}


@media screen and (max-width: 1600px) {
	#post-wrap {width: 90%;}
}

@media screen and (max-width: 1024px) {
	#post-wrap {
		flex-direction: column;
		justify-content: flex-start;
		gap: 60px;
	}
	
	.sidebar {flex: 0;}
	
	.sidebar .sidebar-box {
		padding: 0;
		border: none;
	}

	.sidebar .sidebar-title {margin-bottom: 12px;}

	.category-list {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		padding-bottom: 6px;
	}

	.category-list li {
		flex: 0 0 auto;
		margin: 0;
	}

	.category-list a {
		font-size: 16px;
		padding: 6px 7px;
		border: 1px solid var(--brown);;
		border-radius: 999px;
		white-space: nowrap;
		text-decoration: none;
	}

	.category-list a::before,
	.category-list a::after {
		display: none;
	}

	.category-list a:hover {
		border-color: var(--red);
		color: var(--red);
	}

	.category-list li.current-cat > a {
		border-color: var(--red);
		color: var(--red);
	}
}

@media screen and (max-width: 640px) {
	#post-wrap {margin: 60px auto 0;}
}

/**********************************************************************************

.archive-content

**********************************************************************************/
.archive-content .post-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 60px 20px;
}

.archive-content .post-list li a .post-card__thumb {position: relative;}

.archive-content .post-list li a .post-card__thumb .box {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: #d2d2d2;
}

.archive-content .post-list li a .post-card__thumb .box img {
	object-fit: cover;
	height: 100%;
}

.archive-content .post-list li a .post-card__thumb .post-card__new {
	position: absolute;
	right: 10px;
	bottom: -50px;
}

.archive-content .post-list li a .post-card__thumb .post-card__new::before {
	content: "";
	width: 1px;
	height: 40px;
	background-color: var(--red);
	position: absolute;
	top: -50px;
	left: 0;
	right: 0;
	margin: 0 auto;
}

.archive-content .post-list li a .post-card__meta {
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 0 10px;
	display: flex;
	align-items: center;
}

.archive-content .post-list li a .post-card__meta .post-card__date {
	font-size: 18px;
	padding-right: 10px;
	margin-right: 10px;
	border-right: solid 1px;
}

.archive-content .post-list li a .post-card__meta .post-card__cat {font-size: 18px;}

.archive-content .post-list li a .post-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	line-height: 1.5;
	padding: 0 20px;
}

.archive-content .post-list li a .btn {
	display: block;
	width: fit-content;
	margin: 15px 0 0 auto;
	transition: 0.5s;
}

.archive-content .post-list li a:hover .btn {
	background-color: var(--red);
	color: #fff;
	border: solid 1px var(--red);
	transition: 0.5s;
}

@media screen and (max-width: 640px) {
	.archive-content .post-list {grid-template-columns: repeat(1, 1fr);}
	
	.archive-content .post-list li a .post-card__thumb .post-card__new {
		right: 0;
		bottom: -40px;
	}
	
	.archive-content .post-list li a .post-card__thumb .post-card__new::before {
		height: 30px;
		top: -40px;
	}

	.archive-content .post-list li a .post-card__meta {padding: 0;}
	.archive-content .post-list li a .post-card__meta .post-card__date,.archive-content .post-list li a .post-card__meta .post-card__cat {font-size: 16px;}
	.archive-content .post-list li a .post-card__title {padding: 0;}
}

/**********************************************************************************

.main-content

**********************************************************************************/
.main-content {
	max-width: 1300px;
	width: 100%;
	min-width: 0;
}

.main-content .midashi {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	padding-bottom: 20px;
	border-bottom: solid 1px;
	margin-bottom: 60px;
}

.main-content .midashi h3,.main-content .midashi .post-date {font-size: 18px;}
.main-content .midashi h3 {line-height: 1.5em;}

.main-content .post-content h1 {
	font-size: 40px;
	margin-bottom: 25px;
}
.main-content .post-content h2 {
	font-size: 36px;
	margin-bottom: 20px;
}
.main-content .post-content h3 {
	font-size: 30px;
	margin-bottom: 15px;
}
.main-content .post-content h4 {
	font-size: 24px;
	margin-bottom: 10px;
}
.main-content .post-content h5 {
	font-size: 20px;
	margin-bottom: 10px;
}
.main-content .post-content h6 {
	font-size: 18px;
	margin-bottom: 10px;
}

.main-content .post-content img {
	width: auto;
	margin: 30px auto;
	display: block;
}

.main-content .post-content p {
	margin-bottom: 20px;
	line-height: 1.5em;
}

.main-content .link-box {
	margin: 60px auto 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 26px;
}

.main-content .link-box li a {
	display: flex;
	align-items: center;
	gap: 10px;
	border-bottom: solid 1px;
	padding-bottom: 10px;
}

.main-content .link-box li a img {width: 45px;}

.main-content .btn {
	margin: 100px 0 0 auto;
	display: block;
	width: fit-content;
}

@media screen and (max-width: 1024px) {
	.main-content .link-box {
		flex-direction: column;
		align-items: center;
	}
}

@media screen and (max-width: 640px) {
	.main-content .midashi {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		margin-bottom: 40px;		
	}
	.main-content .midashi .post-date {
		text-align: right;
		margin: 0 0 0 auto;
	}
	.main-content .btn {margin: 60px 0 0 auto;}
}

/**********************************************************************************

施工実例

**********************************************************************************/
/**********************************************************************************

.works-archive

**********************************************************************************/
.works-archive {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.works-archive li {
	width: 100%;
	list-style: none;
}

.works-archive li a {
	display: block;
	width: 100%;
}

.works-archive li a .img-box {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2px;
	width: 100%;
}

.works-archive li a .img-box > * {
	min-width: 0;
	min-height: 0;
}

.works-archive li a .img-box .main-img,
.works-archive li a .img-box .sub-img-list {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.works-archive li a .img-box .main-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.works-archive li a .img-box .sub-img-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.works-archive li a .img-box .sub-img-list li {
	overflow: hidden;
	min-width: 0;
	min-height: 0;
}

.works-archive li a .img-box .sub-img-list li img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.works-archive li a .under-wrap {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 20px;
}

.works-archive li a .under-wrap .txt-box .meta {
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.works-archive li a .under-wrap .txt-box .meta span {
	display: inline-flex;
	align-items: center;
}

.works-archive li a .under-wrap .txt-box .meta span:not(:first-child)::before {
	content: "|";
	margin-right: 10px;
}

.works-archive li a .under-wrap .txt-box .meta .room-tour-icon {width: 24px;}

.works-archive li a .under-wrap .btn {
	margin-top: 0;
	transition: 0.5s;
}

.works-archive li a:hover .under-wrap .btn {
	background-color: var(--red);
	color: #fff;
	border: solid 1px var(--red);
	transition: 0.5s;
}

@media screen and (max-width: 640px) {
	.works-archive li a .img-box {grid-template-columns: 1fr;}
	.works-archive li a .img-box .sub-img-list {aspect-ratio: auto;}
	.works-archive li a .img-box .sub-img-list li {aspect-ratio: 3 / 2;}
	.works-archive li a .under-wrap {
		flex-direction: column;
		padding: 20px 0;
	}
	.works-archive li a .under-wrap .btn {font-size: 16px;}
}

/**********************************************************************************

.works-gallery

**********************************************************************************/
.works-gallery {
	width: 100%;
	margin-bottom: 60px;
}

.works-gallery .works-gallery-main {margin-bottom: 10px;}

.works-gallery .works-gallery-main .works-gallery-main__item {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: var(--gray);
	position: relative;
}

.works-gallery .works-gallery-main .works-gallery-main__item img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;	
}

.works-gallery .works-gallery-thumb {display: flex;}

/* サムネ本体 */
.works-gallery .works-gallery-thumb .works-gallery-thumb__item {
	position: relative;
	cursor: pointer;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.works-gallery .works-gallery-thumb .works-gallery-thumb__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* デフォルト全部グレー */
.works-gallery .works-gallery-thumb .works-gallery-thumb__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.5);
	pointer-events: none;
	transition: opacity .3s;
	z-index: 2;
}

/* slick現在 */
.works-gallery .works-gallery-thumb .works-gallery-thumb__item.slick-current::after {opacity: 0;}

/* 5枚以下 */
.works-gallery .works-gallery-thumb .works-gallery-thumb__item.is-current::after {opacity: 0;}


/**********************************************************************************

.works-data

**********************************************************************************/
.works-data {margin-bottom: 35px;}

.works-data .works-data__row {
	display: inline-grid;
	grid-template-columns: repeat(2, auto);
	gap: 35px;
	line-height: 1.8em;
}

.works-data .works-data__item {
	display: flex;
	min-width: 0;
}

.works-data .works-data__label {
	width: 110px;
	flex: 0 0 110px;
}

.works-data .works-data__value {flex: 1;}

@media screen and (max-width: 640px) {
	.works-data .works-data__row {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/**********************************************************************************

.works-kodawari

**********************************************************************************/
.works-kodawari {
	display: flex;
	min-width: 0;
	margin-bottom: 60px;
}

.works-kodawari .works-kodawari__title {
	width: 110px;
	flex: 0 0 110px;
	line-height: 1.8em;
}

.works-kodawari ul {flex: 1;}

.works-kodawari ul li {
	padding-bottom: 25px;
	border-bottom: solid 1px;
	margin-bottom: 25px;
}

.works-kodawari ul li:last-child {
	padding-bottom: 0;
	border-bottom: none;
	margin-bottom: 0;
}

.works-kodawari ul li p {line-height: 1.8em;}

@media screen and (max-width: 640px) {
	.works-kodawari {
		flex-direction: column;
		gap: 10px;
	}
	
	.works-kodawari .works-kodawari__title {flex: 0;}
}

/**********************************************************************************

.works-tour

**********************************************************************************/
.works-tour {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 auto 100px;
	border-bottom: solid 1px;
	padding-bottom: 10px;
	width: fit-content;
}

.works-tour img {width: 45px;}

@media screen and (max-width: 640px) {
	.works-tour {margin: 0 auto 80px;}
}

/**********************************************************************************

.works-voice

**********************************************************************************/
.works-voice {
	width: 100%;
	margin: 0 auto 150px;
	padding: 50px 0;
	border-top: solid 1px;
	border-bottom: solid 1px;
}

.works-voice .midashi-box {
	display: flex;
	align-items: flex-end;
	gap: 15px;
	margin-bottom: 50px;
}

.works-voice .midashi-box h3 {font-size: 72px;}
.works-voice .midashi-box p {font-size: 24px;}

.works-voice .box {
	display: flex;
	align-items: flex-start;
	gap: 30px;
}

.works-voice .box .works-voice__txt {
	flex: 1;
	text-align: justify;
	line-height: 1.8em;
}

.works-voice .box .works-voice__img {flex: 0 0 40%;}

.works-voice .box .works-voice__img img {
	height: auto;
	display: block;
}

@media screen and (max-width: 640px) {
	.works-voice {margin: 0 auto 100px;}
	.works-voice .midashi-box {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 30px;
	}
	.works-voice .midashi-box h3 {font-size: 60px;}
	.works-voice .midashi-box p {font-size: 20px;}
	.works-voice .box {
		flex-direction: column;
		gap: 40px;
	}
	.works-voice .box .works-voice__img {flex: 0;}
}

/**********************************************************************************

.works-gallery02

**********************************************************************************/
.works-gallery02 {
	width: 100%;
	margin: 0 auto 70px;
	background-color: #fff;
}

.works-gallery02 h3 {
	text-align: center;
	font-size: 72px;
	color: #fff;
	mix-blend-mode: difference;
	position: relative;
	z-index: 1;
}

.works-gallery02 .works-gallery02__item {
	position: relative;
	margin-top: -37px;
	z-index: 0;
}

.works-gallery02 .works-gallery02__item li {position: relative;}

.works-gallery02 .works-gallery02__item li .works-gallery02__img {
	position: relative;
}

.works-gallery02 .works-gallery02__item li .works-gallery02__img::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 60%;
	background: linear-gradient(
		to top,
		rgba(0,0,0,0.8) 0%,
		rgba(0,0,0,0.4) 40%,
		rgba(0,0,0,0) 100%
	);
	pointer-events: none;
}

.works-gallery02 .works-gallery02__item li img {
	height: auto;
	display: block;
}

.works-gallery02 .works-gallery02__item li .works-gallery02__content {
	color: #fff;
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 60px;
}

.works-gallery02 .works-gallery02__item li .works-gallery02__content h4 {
	font-size: 36px;
	margin-bottom: 20px;
}

.works-gallery02 .works-gallery02__item li .works-gallery02__content .works-gallery02__text {
	text-align: justify;
	line-height: 1.8em;
}

@media screen and (max-width: 640px) {
	.works-gallery02 {margin: 0 auto 50px;}
	.works-gallery02 h3 {font-size: 60px;}
	.works-gallery02 .works-gallery02__item {margin-top: -31px;}
	.works-gallery02 .works-gallery02__item li .works-gallery02__img::after {content: none;}
	.works-gallery02 .works-gallery02__item li .works-gallery02__content {
		color: var(--brown);;
		position: static;
		padding: 30px;
	}
	.works-gallery02 .works-gallery02__item li .works-gallery02__content h4 {font-size: 24px;}
}

/**********************************************************************************

.works-btn

**********************************************************************************/
.works-btn {
	width: 80%;
	margin: 0 auto;
}

.works-btn a {
	margin: 0 0 0 auto;
	display: block;
	width: fit-content;
}

@media screen and (max-width: 1600px) {
	.works-btn {width: 90%;}
}

/**********************************************************************************

イベント

**********************************************************************************/
/**********************************************************************************

イベントアーカイブ

**********************************************************************************/
.archive-content .post-list.event-post li a .post-card__thumb .live-icon {
	width: 70px;
	position: absolute;
	z-index: 2;
	top: 20px;
	right: 20px;
}

.archive-content .post-list.event-post li a .post-card__thumb .event-end {
	background: rgba(0,0,0,.5);
	mix-blend-mode: multiply;
	position: absolute;
	inset: 0;
	z-index: 1;
}

.archive-content .post-list.event-post li a .post-card__thumb .event-end p {
	font-size: 18px;
	padding: 10px 20px;
	color: #fff;
	background-color: var(--brown);;
	width: fit-content;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	margin: 0 auto;	
}

.archive-content .post-list.event-post li a .event-meta {
	align-items: flex-start;
	padding-right: 40px;
}

.archive-content .post-list.event-post li a .event-meta .term-name {
	border: solid 1px;
	padding: 3px 5px;
	white-space: nowrap;
}

.archive-content .post-list.event-post li a .event-meta .title {font-size: 18px;}

.archive-content .post-list.event-post li a .date {
	display: flex;
	align-items: center;
	padding: 0 10px;
	gap: 10px;
}

@media screen and (max-width: 640px) {
	.archive-content .post-list.event-post li a .event-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
		padding-right: 0;
	}
	.archive-content .post-list.event-post li a .event-meta .title {font-size: 16px;}
	.archive-content .post-list.event-post li a .date {padding: 0;}
}
/**********************************************************************************

.event-contents

**********************************************************************************/
.event-contents {
	padding-top: 30px;
	border-top: solid 1px;
	margin: 100px auto 0;
}

.event-contents .event-data ul {
	display: inline-grid;
	grid-template-columns: repeat(2, auto);
	gap: 35px;
}

.event-contents .event-data ul li,.event-contents .memo-box {
	display: flex;
	min-width: 0;
	line-height: 1.8em;
}

.event-contents .event-data ul li h3,.event-contents .memo-box h3 {
	width: 130px;
	flex: 0 0 130px;
}

.event-contents .event-data ul li p,.event-contents .memo-box p {flex: 1;}

.event-contents .event-data ul li .place {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.event-contents .event-data ul li a img {
	display: block;
	width: 20px;
	margin-top: -2px;
}

.event-contents .memo-box {margin-top: 35px;}

.event-contents .event-table {
	width: 100%;
	margin-top: 30px;
}

.event-contents .event-table h3 {
	color: #fff;
	background-color: var(--brown);;
	padding: 10px 10px;
	text-align: center;
}

.event-contents .event-table .table-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.event-contents .event-table .table-scroll table {
	width: max-content;
	min-width: 100%;
	border-collapse: collapse;
}

.event-contents .event-table .table-scroll table tr td {
	background-color: var(--gray3);
	padding: 15px;
	border-right: solid 1px #fff;
	border-bottom: solid 1px #fff;
	white-space: nowrap;
}

.event-contents .event-table .table-scroll table tr td:last-child {border-right: none;}
.event-contents .event-table .table-scroll table tr:last-child td {border-bottom: none;}

.event-contents .event-table .table-scroll table tr td:not(:first-child) {text-align: center;}

@media screen and (max-width: 640px) {
	.event-contents {margin: 80px auto 0;}
	
	.event-contents .event-data ul {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/**********************************************************************************

.event-miryoku

**********************************************************************************/
.event-miryoku {margin: 100px auto 0;}

.event-miryoku .box {padding: 55px;}

.event-miryoku .box h3 {
	font-size: 28px;
	text-align: center;
	margin-bottom: 30px;
}

.event-miryoku .box .inner .inner-box {
	display: flex;
	align-items: flex-end;
	gap: 40px;
}

.event-miryoku .box .inner .inner-box .step-list {
	flex: 1;
	counter-reset: step;
	padding-left: 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.event-miryoku .box .inner .inner-box .step-list li {
	counter-increment: step;
	position: relative;
	padding-left: 40px;
}

.event-miryoku .box .inner .inner-box .step-list li::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 24px;
	height: 24px;
	background: var(--brown);;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "map-roman-variable", serif;
	font-size: 14px;
}

.event-miryoku .box .inner .inner-box .step-list li h4 {
	font-size: 20px;
	margin-top: -3px;
	margin-bottom: 5px;
	line-height: 1.8em;
}

.event-miryoku .box .inner .inner-box .step-list li p {line-height: 1.8em;}

.event-miryoku .box .inner .inner-box img {width: 84px;}

@media screen and (max-width: 820px) {
	.event-miryoku .box .inner .inner-box {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.event-miryoku .box .inner .inner-box img {
		display: block;
		margin: 0 0 0 auto;
	}
}

@media screen and (max-width: 640px) {
	.event-miryoku {margin: 80px auto 0;}
	.event-miryoku .box {padding: 35px;}
	.event-miryoku .box h3 {font-size: 24px;}
	.event-miryoku .box .inner .inner-box .step-list li h4 {font-size: 18px;}
}

/**********************************************************************************

.event-form

**********************************************************************************/
.event-form {
	margin: 100px auto;
	text-align: center;
}

.event-form h3 {
	font-size: 36px;
	margin-bottom: 30px;	
}

@media screen and (max-width: 640px) {
	.event-form {margin: 80px auto;}
	.event-form h3 {font-size: 30px;}
}

/**********************************************************************************

メディア掲載情報

**********************************************************************************/
/**********************************************************************************

.media-category

**********************************************************************************/
.media-category {
	width: 90%;
	margin: 100px auto 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 25px;
}

.media-category h3 {font-size: 24px;}

.media-category ul {
	display: flex;
	align-items: center;
	gap: 30px;
}

.media-category ul li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.media-category ul li .tv {width: 20px;}
.media-category ul li .video {width: 13px;}
.media-category ul li .radio {width: 16px;}
.media-category ul li .newspaper {width: 18px;}
.media-category ul li .magazine {width: 24px;}

.media-category ul li p {font-size: 18px;}

@media screen and (max-width: 640px) {
	.media-category {
		flex-direction: column;
		flex-wrap: nowrap;
		margin: 60px auto 0;
	}
	.media-category ul {
		justify-content: center;
		flex-wrap: wrap;
		gap: 20px;
	}
}

/**********************************************************************************

.media-list

**********************************************************************************/
.media-list {
	width: 90%;
	margin: 100px auto 0;
}

.media-list ul {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 40px 20px;
}

.media-list ul li .img-box {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	margin-bottom: 20px;
	background-color: var(--gray);
}

.media-list ul li .img-box img {
	height: 100%;
	object-fit: contain;
}

.media-list ul li .txt-box .meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 25px;
}

.media-list ul li .txt-box .meta .tv {width: 20px;}
.media-list ul li .txt-box .meta .video {width: 13px;}
.media-list ul li .txt-box .meta .radio {width: 16px;}
.media-list ul li .txt-box .meta .newspaper {width: 18px;}
.media-list ul li .txt-box .meta .magazine {width: 24px;}

.media-list ul li .txt-box .meta .date,.media-list ul li .txt-box .meta h3 {font-size: 18px;}

.media-list ul li .txt-box .meta .date::after {
	content: "|";
	margin-left: 10px;
}

.media-list ul li .txt-box .media-note {line-height: 1.8em;}

@media screen and (max-width: 1800px) {
	.media-list ul {grid-template-columns: repeat(4, 1fr);}
}

@media screen and (max-width: 1600px) {
	.media-list ul {grid-template-columns: repeat(3, 1fr);}
}

@media screen and (max-width: 820px) {
	.media-list ul {grid-template-columns: repeat(2, 1fr);}
}

@media screen and (max-width: 640px) {
	.media-list {margin: 60px auto 0;}
	.media-list ul {grid-template-columns: repeat(1, 1fr);}
	.media-list ul li .txt-box .meta h3 {font-size: 16px;}
}

/**********************************************************************************

お問い合わせ

**********************************************************************************/
/**********************************************************************************

.contact-intro

**********************************************************************************/
.contact-intro {
	margin: 0 auto 100px;
	text-align: center;
}

.contact-intro h3 {
	font-size: 72px;
	margin-bottom: 30px;
}

.contact-intro .read {
	font-size: 18px;
	margin-bottom: 60px;
}

.contact-intro .box {
	text-align: justify;
	padding: 55px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.contact-intro .box ul li {
	position: relative;
	padding-left: 1.2em;
	line-height: 2em;
}

.contact-intro .box ul li::before {
	content: "■";
	position: absolute;
	left: 0;
}

.contact-intro .box ul li a {
	text-decoration: underline;
	text-underline-offset: 5px;
}

.reservation-inner ul {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.reservation-inner ul li {
	counter-increment: step;
	padding-left: 40px!important;
}

.reservation-inner ul li::before {
	content: counter(step)!important;
	top: 0.2em;
	width: 24px;
	height: 24px;
	background: var(--brown);;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "map-roman-variable", serif;
	font-size: 14px;
}

@media screen and (max-width: 640px) {
	.contact-intro {margin: 0 auto 80px;}
	.contact-intro h3 {font-size: 60px;}
	.contact-intro .box {padding: 35px;}
}

/**********************************************************************************

.contact-list

**********************************************************************************/
.contact-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.contact-list li {margin-bottom: 12px;}

.contact-list li p {
	font-size: 18px;
	position: relative;
	display: inline-block;
	padding-left: 22px;
	text-decoration: none;
	color: var(--brown);;
}

.contact-list li p::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 15px;
	height: 15px;
	border: 1px solid var(--brown);;
	box-sizing: border-box;
}

.contact-list li p::after {
	content: "";
	position: absolute;
	left: 2px;
	top: 50%;
	transform: translateY(-50%);
	width: 11px;
	height: 11px;
	background: var(--red);
	opacity: 0;
}

.contact-list li.active > p::after {opacity: 1;}

@media screen and (max-width: 1024px) {
	.contact-list {
		display: flex;
		gap: 30px;
		padding-top: 20px;
	}
	
	.contact-list li p {font-size: 16px;}
}

/**********************************************************************************

.contact-wrap

**********************************************************************************/
.contact-wrap {margin: 0 auto 100px;}

.contact-wrap h4 {
	font-size: 30px;
	text-align: center;
	margin-bottom: 50px;
}

.contact-wrap .thanks {
	font-size: 18px;
	text-align: center;
	line-height: 1.8em;
}


.contact-wrap .form-row {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	margin-bottom: 50px;
	font-size: 18px;
	line-height: 1.5em;
}

.contact-wrap .form-row.last {margin-bottom: 100px;}

.contact-wrap .form-row .form-flex, .contact-wrap .form-row .form-flex p {
	display: flex;
	align-items: center;
	gap: 15px;
	flex-wrap: wrap;
}

.contact-wrap .form-row .form-flex .icon-set {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 0 10px 10px;
	border-bottom: solid 1px;
}

.contact-wrap .form-row .form-flex.zip p,.contact-wrap .form-row .form-flex.age p {
	padding: 0 10px 10px;
	border-bottom: solid 1px;
	width: fit-content;
}

.contact-wrap .form-row .form-flex.num,.contact-wrap .form-row .form-flex.num p {flex-wrap: nowrap;}
.contact-wrap .form-row .form-flex.num {gap: 30px;}
.contact-wrap .form-row .form-flex.num p {
	width: fit-content;
	padding: 0 10px 10px;
	border-bottom: solid 1px;
}

.contact-wrap .form-row .form-flex .form-mail .form-icon {width: 16px;}
.contact-wrap .form-row .form-flex .form-tel .form-icon {width: 20px;}
.contact-wrap .form-row .form-input.reserve_date .form-flex {margin-bottom: 20px;}
.contact-wrap .form-row .form-input.form-flex .wpcf7-form-control-wrap {max-width: 260px;}
.contact-wrap .form-row .form-input .note {line-height: 1.8em;}

.contact-wrap .form-row .form-input .other {margin-top: 20px;}
.contact-wrap .form-row .form-input .privacy-check {
	margin-top: 20px;
	display: block;
}

.contact-wrap .form-row.form-textarea {
	align-items: flex-start;
	margin-bottom: 60px;
}

.contact-wrap .form-row.form-center {
	text-align: center;
	margin-bottom: 60px;
}

.contact-wrap .form-row.form-center {
	text-align: center;
	margin-bottom: 100px;
}

.contact-wrap .form-row.form-center .form-input a {position: relative;}

.contact-wrap .form-row.form-center .form-input a::after {
	background-color: var(--brown);;
	bottom: -6px;
	content: ""; 
	height: 1px;
	left: 0;
	position: absolute;
	width: 100%;
}


.contact-wrap .form-row .form-label {
	flex: 0 0 20%;
	min-width: 0; 
	font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
	letter-spacing: 0.03em;
}

.contact-wrap .form-row.long .form-label {flex: 0 0 31%;}

.contact-wrap .form-row .form-label p {
	display: flex;
	align-items: center;
	gap: 30px;
}

.contact-wrap .form-row .form-label .required {
	font-size: 12px;
	color: var(--red);
	padding: 4px 10px;
	border: solid 1px;
	border-radius: 9px;
    line-height: 1em;
	white-space: nowrap;
}

.contact-wrap .form-row .form-input {
	flex: 1 1 0%;
	min-width: 0;
	font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
	letter-spacing: 0.03em;
}

.contact-wrap .form-row .form-input p {width: 100%;}
.contact-wrap .form-row .form-input.policy {margin: 0 auto;}
.contact-wrap .form-row .form-input .privacy-link {line-height: 2em;}

input[type="text"],input[type="email"],input[type="tel"],textarea,input[type="date"],input[type="number"],.wpcf7 select {
	padding: 0 10px 10px;
	width: 100%;
	border-bottom: solid 1px;
}

.contact-wrap .form-row .form-flex .icon-set input[type="email"],
.contact-wrap .form-row .form-flex .icon-set input[type="tel"],
.contact-wrap .form-row .form-flex.zip p input[type="tel"],
.contact-wrap .form-row .form-flex.num input[type="number"],
.contact-wrap .form-row .form-flex.age input[type="number"]{
	padding: 0;
	border-bottom: none;
}

.select-wrap {
	position: relative;
	display: inline-block;
}

.select-wrap::after {
	content: "▼";
	position: absolute;
	right: 0.8em;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--brown);
	font-size: 0.8em;
}

.select-wrap select {
	padding-right: 2em; /* 矢印分の余白 */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.wpcf7 input[type="checkbox"]{
	width: 20px;
	height: 20px;
	accent-color: var(--red); /* チェックと枠の色 */
	vertical-align: middle;
	margin-right: 8px;
	margin-bottom: 2px;
}

.wpcf7 input::placeholder,.wpcf7 textarea::placeholder{
	color: var(--gray2);
	font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
	letter-spacing: 0.03em;
}

.wpcf7-form-control {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px 30px;
}

.contact-wrap .form-row .form-low .wpcf7-form-control {
	align-items: flex-start;
	flex-direction: column;
}

.wpcf7-list-item {margin-left: 0!important;}

.my-submit {
	display: block;
	width: fit-content;
	margin: 0 auto;
	font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
	letter-spacing: 0.03em;
	transition: 0.5s;
	border: solid 1px;
	border-radius: 30px;
	padding: 15px 50px;
	font-size: 18px;
}

.my-submit:hover{
	background-color: var(--red);
	color: #fff;
	border: solid 1px var(--red);
	transition: 0.5s;
}

.select-box {
	position: relative;
}

.select-box::after {
	content: "▼";
	position: absolute;
	right: 10px;
	top: 40%;
	transform: translateY(-50%);
	pointer-events: none;
	font-size: 14px;
	color: var(--brown);
}

.select-box select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

	width: 100%;
	padding-right: 25px;
}

.date-field {
	position: relative;
	display: inline-block;
	min-height: 48px;
}

.date-field::before {
	content: "日付を選択";
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--gray2);
	font-size: 14px;
	line-height: 1;
	pointer-events: none;
	z-index: 5;
}

.date-field.is-filled::before {
	display: none;
}

.date-field .wpcf7-form-control-wrap,
.date-field input[type="date"] {
	display: block;
	width: 100%;
}

.date-field input[type="date"] {
	position: relative;
	z-index: 1;
	background: transparent;
	height: 48px;
	min-height: 48px;
}

input[type="date"]::-webkit-datetime-edit {
	color: transparent;
}

.date-field.is-filled input[type="date"]::-webkit-datetime-edit,
.date-field input[type="date"]:focus::-webkit-datetime-edit {
	color: var(--brown);
}

@media screen and (max-width: 1600px) {
	.contact-wrap .form-row.long .form-label {flex: 0 0 40%;}
}

@media screen and (max-width: 640px) {
	.contact-wrap {margin: 0 auto 80px;}
	
	.contact-wrap h4 {
		font-size: 24px;
		margin-bottom: 30px;
	}

	.contact-wrap .thanks {font-size: 16px;}

	.contact-wrap .form-row {
		flex-direction: column;
		gap: 20px;
		font-size: 16px;
	}
	.contact-wrap .form-row .form-input {
		flex: 0;
		width: 100%;
	}
	
	.contact-wrap .form-row .form-label,.contact-wrap .form-row.long .form-label {flex: 0;}
	.contact-wrap .form-row .form-flex.num,.contact-wrap .form-row .form-flex.flex-sp p {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.contact-wrap .form-row .form-flex.flex-sp p span {width: 100%;}
}

/**********************************************************************************

.contact-info

**********************************************************************************/
.contact-info {
	background-color: var(--gray3);
	padding: 35px;
	text-align: center;
	margin: 0 auto;
}

.contact-info .read {
	font-size: 18px;
	line-height: 1.8em;
	margin-bottom: 25px;
}

.contact-info ul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px 30px;
	flex-wrap: wrap;
	margin-bottom: 25px;
}

.contact-info ul li:first-child {width: 170px;}

.contact-info ul li:nth-child(2) a {
	display: flex;
	align-items: center;
	gap: 10px;
}

.contact-info ul li:nth-child(2) a img {width: 34px;}
.contact-info ul li:nth-child(2) a p {
	margin-top: 3px;
	font-size: 36px;
}

.contact-info .note {line-height: 1.8em;}

@media screen and (max-width: 640px) {
	.contact-info {padding: 30px 20px;}
	.contact-info .read {font-size: 16px;}
	.contact-info ul li:nth-child(2) a p {font-size: 30px;}
}

/***********************************************************************************下層静的*********************************************************************************/
/**********************************************************************************

下層汎用

**********************************************************************************/
/**********************************************************************************

.under-head-b

**********************************************************************************/
.under-head-b {
	text-align: center;
	margin: 200px auto 150px;
}

.under-head-b h2 {
	font-size: 24px;
	margin-bottom: 25px;
}

@media screen and (max-width: 640px) {
	.under-head-b {margin: 60px auto 80px;}
	.under-head-b h2 {font-size: 20px;}
}


/**********************************************************************************

共通セクション

**********************************************************************************/
/**********************************************************************************

.under-section

**********************************************************************************/
.under-section {margin: 0 auto 150px;}

@media screen and (max-width: 640px) {
	.under-section {margin: 0 auto 80px;}
}

/**********************************************************************************

.under-intro

**********************************************************************************/
.under-intro {
	width: 90%;
	margin: 0 auto 180px;
	position: relative;
}

.under-intro .midashi {
	display: flex;
	align-items: flex-end;
	gap: 10px 20px;
	margin-bottom: 60px;
	position: relative;
}

.under-intro .midashi h3 {
	font-size: 110px;
	letter-spacing: 0.01em;
}
.under-intro .midashi p {
	font-size: 24px;
	padding-bottom: 16px;
	text-align: justify;
}

.page-concept .under-intro .midashi p {
	position: absolute;
	top: 80px;
	left: 390px;
}

.page-custom-house .under-intro .midashi p {margin-left: -110px;}

.under-intro .box {
	display: flex;
	align-items: flex-start;
	gap: 70px;
}

.under-intro .box .video {flex: 0 0 50%;}
.under-intro .box .video video {width: 100%;}
.under-intro .box p {
	font-size: 18px;
	flex: 1;
	line-height: 1.8em;
}

.under-intro .box .txt-box {flex: 1;}

.under-intro .box .txt-box .link {
	display: block;
	width: 150px;
	margin: 20px 0 0 auto;
}

@media screen and (max-width: 1600px) {
	.under-intro .midashi h3 {font-size: 100px;}
	.page-concept .under-intro .midashi p {
		top: 70px;
		left: 370px;
	}
	
	.under-intro .box .video {flex: 1;}
	.under-intro .box p {font-size: 16px;}
}

@media screen and (max-width: 1280px) {
	.under-intro .midashi h3 {font-size: 70px;}
	
	.page-concept .under-intro .midashi p {
		top: 46px;
		left: 250px;
	}
	
	.page-custom-house .under-intro .midashi p {margin-left: -100px;}
}

@media screen and (max-width: 1024px) {
	.under-intro .box {gap: 50px;}
}

@media screen and (max-width: 820px) {
	.under-intro .midashi {
		flex-direction: column;
		align-items: flex-start;
	}

	.under-intro .midashi h3 {font-size: 60px;}
	.under-intro .midashi p {
		font-size: 20px;
		padding-bottom: 0;
	}
	
	.page-concept .under-intro .midashi p {
		top: 37px;
		left: 220px;
	}
	
	.page-custom-house .under-intro .midashi p {margin-left: 0;}
}

@media screen and (max-width: 640px) {
	.under-intro {margin: 0 auto 80px;}
	.under-intro .midashi h3 {font-size: 50px;}
	
	.page-concept .under-intro .midashi p {position: static;}
	
	.under-intro .box {flex-direction: column;}
	.under-intro .box .video,.under-intro .box p {flex: 0;}
	
	.under-intro .box .txt-box .link {width: 120px;}
}

@media screen and (max-width: 430px) {
	.under-intro .midashi h3 {font-size: 36px;}
	.page-concept .under-intro .midashi h3 {font-size: 29px;}
}

/**********************************************************************************

.kazari-section

**********************************************************************************/
.kazari-section {
	width: 95%;
	margin: 0 auto;
}

.kazari-section .inner {
	padding: 100px 0;
	width: 80%;
	margin: 0 auto;
}

@media screen and (max-width: 1600px) {
	.kazari-section .inner {width: 85%;}
}

@media screen and (max-width: 1024px) {
	.kazari-section {width: 90%;}
}

@media screen and (max-width: 640px) {
	.kazari-section .inner {padding: 40px 0;}
}

/**********************************************************************************

.inner-section

**********************************************************************************/
.inner-section {
	display: flex;
	flex-direction: column;
	gap: 60px;
}

.inner-section .inner-section-box {
	display: flex;
	align-items: flex-start;
	gap: 40px 60px;
}

.inner-section .inner-section-box .txt-box {
	padding-left: 30px;
	text-align: justify;
	line-height: 1.8em;
	flex: 1;
}

.inner-section .inner-section-box .txt-box p .big {font-size: 20px;}

.inner-section .inner-section-box .txt-box .num-list {
	list-style-type: decimal;
	padding-left: 1.5em;
	margin: 20px 0;
}

.inner-section .inner-section-box .txt-box .note {
	padding: 2px 7px;
	border: solid 1px;
}

.inner-section .inner-section-box .img-box.box-30 {flex: 0 0 30%;}
.inner-section .inner-section-box .img-box.box-40 {flex: 0 0 40%;}
.inner-section .inner-section-box .img-box.box-50 {flex: 0 0 50%;}
.inner-section .inner-section-box .img-box.right-padding {padding-right: 50px;}

@media screen and (max-width: 1600px) {
	.inner-section .inner-section-box .img-box.right-padding {padding-right: 0;}
}

@media screen and (max-width: 820px) {
	.inner-section .inner-section-box {flex-direction: column;}
	.inner-section .inner-section-box .txt-box,.inner-section .inner-section-box .img-box.box-30,.inner-section .inner-section-box .img-box.box-40,.inner-section .inner-section-box .img-box.box-50 {flex: 0;}
	.inner-section .inner-section-box .txt-box {padding-left: 0;}
	
	.inner-section .inner-section-box .img-box {
		width: 100%;
		margin: 0 auto;
	}
	.inner-section .inner-section-box .img-box.w-70 {width: 70%;}
}

@media screen and (max-width: 430px) {
	.inner-section .inner-section-box .img-box.w-70 {width: 100%;}
	.inner-section .inner-section-box .img-box.sp-80 {width: 80%;}
}

/**********************************************************************************

メニュー追従

**********************************************************************************/
.menu-content-sidebar-box {
	position: relative;
	width: 100%;
}

.menu-content-sidebar-box.is-fixed {
	position: fixed;
	top: 100px;
	width: 238px;
}

.menu-content-sidebar-box.is-bottom {
	position: absolute;
	bottom: 0;
	top: auto;
}

@media (max-width: 1024px) {
	.menu-content-sidebar-box,
	.menu-content-sidebar-box.is-fixed,
	.menu-content-sidebar-box.is-bottom {
		position: static;
		width: 100%;
	}
}

.menu-content-list a.active::after {opacity: 1 !important;}

/**********************************************************************************

見出し

**********************************************************************************/
/**********************************************************************************

.midashi-a

**********************************************************************************/
.midashi-a {
	display: flex;
	align-items: flex-end;
	gap: 5px;
	margin-bottom: 30px;
}

.midashi-a h3 {font-size: 36px;}
.midashi-a p {padding-bottom: 5px;}

@media screen and (max-width: 640px) {
	.midashi-a {
		flex-direction: column;
		align-items: flex-start;
	}

	.midashi-a h3 {font-size: 30px;}
	.midashi-a p {padding-bottom: 0;}
}

/**********************************************************************************

.midashi-b

**********************************************************************************/
.midashi-b {
	display: flex;
	align-items: flex-end;
	gap: 15px;
	margin-bottom: 30px;
}

.midashi-b .num {font-size: 60px;}

.midashi-b h4 {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 1;
	font-size: 24px;
	line-height: 1.5em;
	min-width: 0;
}

.midashi-b h4::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--brown);
}

.midashi-b h4 .h4-inner {flex: 0 0 auto;}

.midashi-b h4 .small {font-size: 18px;}

.midashi-b h4 .note {
	font-size: 18px;
	padding: 5px 7px;
	border: solid 1px;
	margin-left: 10px;
	font-feature-settings: "palt";
}

@media screen and (max-width: 820px) {
	.midashi-b h4 .sp {display: block;}
}

@media screen and (max-width: 640px) {
	.midashi-b {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.midashi-b .num {
		font-size: 50px;
		display: flex;
		align-items: center;
		gap: 20px;
		flex: 1;
		width: 100%;
	}
	
	.midashi-b .num::after {
		content: "";
		flex: 1;
		height: 1px;
		background: var(--brown);
	}

	.midashi-b h4 {
		width: 100%;
		font-size: 22px;
		gap: 10px;
	}
	
	.midashi-b h4::after {content: none;}
	.midashi-b h4 .small,.midashi-b h4 .note {font-size: 16px;}
}

/**********************************************************************************

.line-midashi

**********************************************************************************/
.line-midashi {
	font-size: 20px;
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 30px;
	line-height: 1.3em;
}

.line-midashi::after {
	content: "";
	height: 1px;
	background-color: var(--brown);
	flex: 1;
}

.line-midashi img {width: 30px;}


/**********************************************************************************

.cross-midashi

**********************************************************************************/
.cross-midashi {
	width: 90%;
	margin: 0 auto 80px;
	display: flex;
	align-items: center;
}

.cross-midashi .midashi-box {
	position: relative;
	z-index: 1;
}

.cross-midashi .midashi-box h3 {
	font-size: 60px;
	margin-bottom: 5px;
}
.cross-midashi .midashi-box p {font-size: 21px;}
.material-box .cross-midashi .midashi-box p {text-align: center;}

.cross-midashi .cross {
	position: relative;
	display: inline-block;
	width: 140px;
	height: 140px;
	margin: 0 -40px;
	z-index: 0;
}

.cross-midashi .cross::before,
.cross-midashi .cross::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 1px;
	background-color: var(--red);
	transform-origin: center;
}

.cross-midashi .cross::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.cross-midashi .cross::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

@media screen and (max-width: 1280px) {
	.cross-midashi .midashi-box h3 {font-size: 50px;}
	.cross-midashi .midashi-box p {font-size: 18px;}
	
	.cross-midashi .cross {
		width: 120px;
		height: 120px;
	}
}

@media screen and (max-width: 820px) {
	.cross-midashi {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	
	.cross-midashi .cross {margin: -30px auto -30px;}
}

@media screen and (max-width: 640px) {
	.cross-midashi {margin: 0 auto 60px;}
	.cross-midashi .midashi-box h3 {font-size: 34px;}
	.cross-midashi .midashi-box p {font-size: 14px;}
	.cross-midashi .cross {
		width: 100px;
		height: 100px;
	}
}

/**********************************************************************************

コンセプト

**********************************************************************************/
/**********************************************************************************

.concept-head

**********************************************************************************/
.concept-head {
	margin: 200px auto 0;
	text-align: center;
	position: relative;
	z-index: 1;
}

.concept-head p {
	font-size: 24px;
	margin-bottom: -10px;
}

.concept-head h2 {font-size: 150px;}

@media screen and (max-width: 1280px) {
	.concept-head h2 {font-size: 120px;}
}

@media screen and (max-width: 820px) {
	.concept-head h2 {font-size: 100px;}
}

@media screen and (max-width: 640px) {
	.concept-head {margin: 60px auto 0;}
	.concept-head p {
		font-size: 20px;
		margin-bottom: 0;
	}
	.concept-head h2 {font-size: 80px;}
}

@media screen and (max-width: 430px) {
	.concept-head h2 {font-size: 60px;}
}

/**********************************************************************************

.collage-section

**********************************************************************************/
.collage-section {
	margin-top: -79px;
	margin-bottom: 150px;
	position: relative;
	height: 300vh;
	z-index: 0;
}

@media screen and (max-width: 1280px) {
	.collage-section {margin-top: -64px;}
}

@media screen and (max-width: 820px) {
	.collage-section {
		margin-top: -52px;
	}
}

@media screen and (max-width: 640px) {
	.collage-section {
		margin-top: -42px;
		margin-bottom: 80px;
	}
}

@media screen and (max-width: 430px) {
	.collage-section {margin-top: -32px;}
}

/* ===== stickyエリア ===== */

.collage-sticky {
	position: sticky;
	top: 68px;
	height: 1100px;
	overflow: hidden;
	background:
	radial-gradient(
		ellipse 120% 100% at 50% 50%,
		#8a8a8a 0%,
		#b0b0b0 30%,
		#dddddd 60%,
		#f5f5f5 100%
	);
}

.collage-sticky .txt-box {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	margin: 0 auto;
	z-index: 6;
	text-align: center;
}

.collage-sticky .txt-box h4 {
	font-size: 48px;
	color: #fff;
	line-height: 1.2em;
	margin-bottom: 20px;
}

.collage-sticky .txt-box p {
	font-size: 24px;
	line-height: 1.2em;
	color: #fff;
}

@media screen and (max-width: 1700px) {
	.collage-sticky {height: 950px;}
}

@media screen and (max-width: 1280px) {
	.collage-sticky {height: 800px;}
}

@media screen and (max-width: 640px) {
	.collage-sticky .txt-box h4 {
		font-size: 30px;
		margin-bottom: 10px;
	}
	.collage-sticky .txt-box p {font-size: 20px;}
}

@media screen and (max-width: 430px) {
	.collage-sticky {height: 550px;}
}

/* ===== レイヤー ===== */

.hero-images,
.collage-images {
	position: absolute;
	inset: 0;
}

/* ===== 共通 ===== */

.hero-img,
.collage-img {
	position: absolute;
	overflow: hidden;
}

.hero-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.collage-img img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
}

/* 最初の2枚 */
.hero-img.img1 {
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	z-index: 5;
}

.hero-img.img2 {
	top: 0;
	left: 50%;
	width: 50%;
	height: 100%;
	z-index: 5;
}

/* ===== コラージュ初期 ===== */

.collage-img {z-index: 2;}

/* ===== コラージュ配置 ===== */

.collage-img.c1 {
	top: 3%;
	left: 0;
	width: 20%;
}

.collage-img.c2 {
	left: 0%;
	bottom: 3%;
	width: 12%;
}

.collage-img.c3 {
	top: 5%;
	right: 0;
	width: 20%;
}

.collage-img.c4 {
	top: 12%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 14%;
}

.collage-img.c5 {
	left: 0;
	right: 0;
	bottom: 7%;
	margin: 0 auto;
	width: 20%;
}

.collage-img.c6 {
	right: 7%;
	bottom: 7%;
	width: 14%;
}

@media screen and (max-width: 820px) {
	.collage-img.c1 {width: 28%;}
	.collage-img.c2 {width: 18%;}
	.collage-img.c3 {width: 28%;}
	.collage-img.c4 {width: 20%;}
	.collage-img.c5 {width: 28%;}
	.collage-img.c6 {width: 20%;}
}

@media screen and (max-width: 640px) {
	.collage-img.c2 {width: 22%;}
	.collage-img.c4 {
		top: 30%;
		left: 5%;
		right: auto;
		margin: 0;
	}
	
	.collage-img.c5 {
		left: auto;
		right: 0;
		bottom: 12%;
		margin: 0;
	}
	
	.collage-img.c6 {
		top: 22%;
		right: 5%;
		bottom: auto;
	}
}

@media screen and (max-width: 430px) {	
	.collage-img.c4 {top: 27%}
}

/**********************************************************************************

.concept-box

**********************************************************************************/
.concept-box {
	width: 95%;
	margin: 0 auto;
}

.concept-box .concept-list {
	display: flex;
	flex-direction: column;
	gap: 190px;
}

.concept-box .concept-list .inner {
	display: flex;
	align-items: flex-start;
	gap: 130px;
}

.concept-box .main-img {
	position: relative;
	flex: 0 0 30%;
}

.concept-box .concept-list .inner:not(:first-child) .main-img {
	overflow: hidden;
	aspect-ratio: 3 / 4;
}

.concept-box .concept-list .inner:not(:first-child) .main-img img {
	height: 100%;
	object-fit: cover;
}

.concept-box .main-img .moji {
	position: absolute;
	top: 0;
	left: 0;
}

.concept-box .contents-box {flex: 1;}

.concept-box .contents-box .title-box {
	display: flex;
	align-items: flex-start;
	gap: 80px;
	position: relative;
	margin-bottom: 30px;
}

.concept-box .title-box h3 {
	flex: 1;
	display: flex;
	align-items: flex-start;
}

.concept-box .title-box h3 span {display: block;}

.concept-box .title-box h3 .title01-box,.concept-box .title-box h3 .title02-box {
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 1;
}

.concept-box .title-box h3 .title01-box {gap: 10px;}
.concept-box .title-box h3 .title02-box {margin-top: 40px;}

.concept-box .title-box h3 .title01-box .title01,.concept-box .title-box h3 .title02-box .title02 {font-size: 72px;}
.concept-box .title-box h3 .title01-box .sub01,.concept-box .title-box h3 .title02-box .sub02 {font-size: 18px;}

.concept-box .title-box h3 .title02-box .sub02 {
	width: fit-content;
	margin: 0 0 0 auto;
}


/* 真ん中の× */
.concept-box .title-box h3 .cross {
	position: relative;
	flex: 0 0 100px;
	width: 100px;
	height: 100px;
	margin: 30px -40px 0;
	z-index: 0;
}

.concept-box .title-box h3 .cross::before,
.concept-box .title-box h3 .cross::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px;
	height: 1px;
	background-color: var(--red);
	transform-origin: center;
}

.concept-box .title-box h3 .cross::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.concept-box .title-box h3 .cross::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.concept-box .img-box {flex: 0 0 300px;}

.concept-box .img-box .kazari {
	width: 220px;
	margin-top: -20px;
	margin-left: 30px;
	animation: spin-right 40s linear infinite;
}

.concept-box .contents-box .txt-box h4 {
	font-size: 32px;
	margin-bottom: 10px;
	line-height: 1.2em;
}

.concept-box .contents-box .txt-box p {line-height: 2em;}

.concept-box .contents-box .txt-box .btn {
	display: block;
	margin: 30px 0 0 auto;
	width: fit-content;
}

@media screen and (max-width: 1600px) {
	.concept-box .concept-list .inner {gap: 40px 80px;}
	.concept-box .contents-box .title-box {gap: 40px 60px;}
}

@media screen and (max-width: 1400px) {
	.concept-box .title-box h3 .title01-box .title01,.concept-box .title-box h3 .title02-box .title02 {font-size: 60px;}
	.concept-box .title-box h3 .cross {
		flex: 0 0 80px;
		width: 80px;
		height: 80px;
		margin: 30px -30px 0;
	}
	
	.concept-box .title-box h3 .cross::before,.concept-box .title-box h3 .cross::after {width: 80px;}
	.concept-box .img-box {flex: 0 0 200px;}
	.concept-box .img-box .kazari {
		width: 180px;
		margin-left: 50px;
	}
}

@media screen and (max-width: 1280px) {
	.concept-box {width: 90%;}
	.concept-box .main-img {flex: 0 0 25%;}
}

@media screen and (max-width: 1200px) {
	.concept-box .concept-list .inner {flex-direction: column;}

	.concept-box .main-img {
		flex: 0;
		width: 100%;
	}
	
	.concept-box .contents-box {flex: 0;}
	
	.concept-box .concept-list .inner:first-child .main-img {
		width: 70%;
		margin: 0 auto;
		max-width: 500px;
	}
	
	.concept-box .concept-list .inner:not(:first-child) .main-img {aspect-ratio: 4 / 3;}
	
	.concept-box .concept-list .inner:nth-child(odd) .main-img {order: 2;}
	.concept-box .concept-list .inner:nth-child(odd) .contents-box {order: 1;}
	
	.concept-box .contents-box .title-box {margin-bottom: 50px;}
	
	.concept-box .img-box {
		flex: 0 0 350px;
		position: relative;
	}
	
	.concept-box .img-box .kazari {
		position: absolute;
		bottom: -110px;
		left: 30px;
	}
	
	.concept-box .concept-list .inner:nth-child(2) .title-box .img-box .kazari {
		top: -100px;
		bottom: auto;
	}
}

@media screen and (max-width: 820px) {
	.concept-box .contents-box .title-box {flex-direction: column;}
	
	.concept-box .pc {display: none;}
	.concept-box .sp {display: block;}

	.concept-box .title-box h3 {flex:0;}
	
	.concept-box .img-box {
		width: 70%;
		margin: 40px 0 0 auto;
	}
	
	.concept-box .img-box .kazari {
		bottom: 50px;
		left: -40%;
	}
	
	.concept-box .concept-list .title-box h3 {order: 1;}
	.concept-box .concept-list .title-box .main-img {order: 2;}
	.concept-box .contents-box .txt-box .btn {margin: 40px auto 0;}
}

@media screen and (max-width: 640px) {
	.concept-box .concept-list {gap: 80px;}
	.concept-box .title-box h3 .title01-box .title01,.concept-box .title-box h3 .title02-box .title02 {font-size: 40px;}
	.concept-box .title-box h3 .title01-box .sub01,.concept-box .title-box h3 .title02-box .sub02 {font-size: 16px;}
	.concept-box .title-box h3 .cross {
		flex: 0 0 60px;
		width: 60px;
		height: 60px;
	}
	.concept-box .title-box h3 .cross::before,.concept-box .title-box h3 .cross::after {width: 60px;}
	.concept-box .contents-box .txt-box h4 {
		font-size: 26px;
		margin-bottom: 20px;
	}
	.concept-box .img-box .kazari {
		width: 120px;
		bottom: 30px;
	}
	
	.concept-box .contents-box .txt-box p {line-height: 1.8em;}
}

@media screen and (max-width: 430px) {
	.concept-box .img-box .kazari {left: -58%;}
}

/**********************************************************************************

STATEMENT 家づくりのこだわり

**********************************************************************************/
/**********************************************************************************

.statement-naomi

**********************************************************************************/
.statement-naomi {
	width: 80%;
	margin: 0 auto 150px;
	display: flex;
	align-items: center;
	gap: 90px;
}

.statement-naomi .txt-box {flex: 1;}
.statement-naomi .txt-box .midashi {margin-bottom: 30px;}
.statement-naomi .txt-box .midashi p {font-size: 30px;}
.statement-naomi .txt-box .midashi h3 {font-size: 100px;}

.statement-naomi .txt-box .txt {
	font-size: 18px;
	line-height: 1.8em;
	text-align: justify;
	margin-bottom: 50px;
}

.statement-naomi .txt-box ul {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 10px 20px;
}

.statement-naomi .img-box {flex: 0 0 600px;}

@media screen and (max-width: 1600px) {	
	.statement-naomi {width: 90%;}
	.statement-naomi .txt-box .txt {font-size: 16px;}
	.statement-naomi .img-box {flex: 0 0 440px;}
}

@media screen and (max-width: 1024px) {	
	.statement-naomi {gap: 60px;}
	.statement-naomi .img-box {flex: 1;}
}

@media screen and (max-width: 820px) {	
	.statement-naomi {align-items: flex-end;}
}

@media screen and (max-width: 640px) {	
	.statement-naomi {
		flex-direction: column;
		align-items: flex-start;
		margin: 0 auto 80px;
	}
	
	.statement-naomi .txt-box,.statement-naomi .img-box {flex: 0;}
	
	.statement-naomi .img-box {
		width: 70%;
		margin: 0 0 50px auto;
		position: relative;
	}
	
	.statement-naomi .img-box .kazari {
		width: 120px;
		animation: spin-right 40s linear infinite;
		position: absolute;
		top: 10%;
		left: -20%;
	}
	
	.statement-naomi .txt-box .midashi p {font-size: 24px;}
	.statement-naomi .txt-box .midashi h3 {font-size: 70px;}
}

@media screen and (max-width: 430px) {
	.statement-naomi .img-box .kazari {left: -36%;}
}

/**********************************************************************************

.statement-magic

**********************************************************************************/
.statement-magic {
	padding-top: 150px;
	border-top: solid 1px;
}

.statement-magic .main-midashi {
	margin-bottom: 100px;
	text-align: center;
}

.statement-magic .main-midashi h3 {
	font-size: 30px;
	margin-bottom: 30px;
}

.statement-magic .main-midashi img {
	width: 70%;
	max-width: 700px;
}

@media screen and (max-width: 1600px) {	
	.statement-magic .main-midashi h3 {font-size: 24px;}
	.statement-magic .main-midashi img {max-width: 600px;}
}

@media screen and (max-width: 640px) {
	.statement-magic {padding-top: 80px;}
	.statement-magic .main-midashi {margin-bottom: 80px;}
	.statement-magic .main-midashi h3 {font-size: 22px;}
}

/**********************************************************************************

.statement-magic .main-img

**********************************************************************************/
.statement-magic .main-img {
	position: relative;
	color: #fff;
}

.statement-magic .main-img .bg {z-index: 0;}

.statement-magic .main-img h3 {
	font-size: 120px;
	line-height: 1.2em;
	position: absolute;
	top: 5%;
	right: 0;
	z-index: 2;
}

.statement-magic .main-img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #ccc;
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 0;
}

.statement-magic .main-img .box {
	display: flex;
	align-items: flex-end;
	gap: 30px;
	position: absolute;
	left: 3%;
	bottom: 5%;
	z-index: 1;
}

.statement-magic .main-img .box .txt-box .h4 {
	margin-bottom: 20px;
	position: relative;
	width: fit-content;
}

.statement-magic .main-img .box .txt-box .h4 img {
	width: 60px;
	position: absolute;
	top: 5%;
	right: 36%;
}

.statement-magic .main-img .box .txt-box .h4 h4 {
	font-size: 48px;
	position: relative;
	z-index: 2;
}

.statement-magic .main-img .box .txt-box p {
	font-size: 18px;
	line-height: 2em;
}

.statement-magic .main-img .kazari01 {
	width: 60%;
	max-width: 1200px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.statement-magic .main-img .kazari02 {
	width: 30%;
	max-width: 500px;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1;
}

@media screen and (max-width: 1600px) {	
	.statement-magic .main-img h3 {font-size: 100px;}
	.statement-magic .main-img .kazari01 {max-width: 965px;}
	.statement-magic .main-img .kazari02 {max-width: 400px;}
}

@media screen and (max-width: 1280px) {	
	.statement-magic .main-img h3 {font-size: 80px;}
	.statement-magic .main-img .box {
		flex-direction: column;
		align-items: flex-start;
	}
	.statement-magic .main-img .box .txt-box p {font-size: 16px;}
}

@media screen and (max-width: 820px) {
	.statement-magic .main-img h3 {font-size: 60px;}
	.statement-magic .main-img .box .txt-box .h4 h4 {font-size: 36px;}
	.statement-magic .main-img .box .txt-box .h4 img {width: 46px;}
	.statement-magic .main-img .box .txt-box p {
		width: 80%;
		line-height: 1.8em;
	}
}

@media screen and (max-width: 640px) {
	.statement-magic .main-img .bg {
		overflow: hidden;
		aspect-ratio: 3 / 4;
	}
	
	.statement-magic .main-img .bg img {
		height: 100%;
		object-fit: cover;
	}
	
	.statement-magic .main-img h3 {font-size: 50px;}
	.statement-magic .main-img .box {left: 5%;}
	.statement-magic .main-img .box .txt-box p {width: 95%;}
	.statement-magic .main-img .kazari02 {width: 35%;}
}

@media screen and (max-width: 390px) {
	.statement-magic .main-img .bg {aspect-ratio: 3 / 5;}
}

/**********************************************************************************

.statement-magic .magic-box

**********************************************************************************/
.statement-magic .magic-box {position: relative;}

.statement-magic .magic-box .kazari01,.statement-magic .magic-box .kazari02 {
	width: 30%;
	max-width: 500px;
	position: absolute;
}

.statement-magic .magic-box .box {
	width: 90%;
	margin: 0 auto;
	padding: 120px 0;
}

.statement-magic .magic-box .kazari01 {
	top: 0;
	right: 0;
}

.statement-magic .magic-box .kazari02 {
	left: 0;
	bottom: 0;
}

.statement-magic .magic-box h3 {
	text-align: center;
	font-size: 72px;
	margin-bottom: 80px;
}

.statement-magic .magic-box h3 span {font-size: 100px;}

.statement-magic .magic-box .magic-list {
	display: flex;
	flex-direction: column;
}

.statement-magic .magic-box .magic-list li .content {
	display: flex;
	align-items: flex-start;
	gap: 30px 90px;
}


.statement-magic .magic-box .magic-list li .content .img-box {
	flex: 0 0 500px;
	margin-bottom: 100px;
}

.statement-magic .magic-box .magic-list li .content .txt-box {flex: 1;}

.statement-magic .magic-box .magic-list li .content .txt-box h5 {
	font-size: 30px;
	margin-bottom: 20px;
	display: flex;
	align-items: flex-end;
	gap: 20px;
}

.statement-magic .magic-box .magic-list li .content .txt-box h5 .num {font-size: 60px;}
.statement-magic .magic-box .magic-list li .content .txt-box h5 .main {margin-bottom: 5px;}

.statement-magic .magic-box .magic-list li .content .txt-box p {
	font-size: 18px;
	line-height: 1.8em;
	text-align: justify;
}

@media screen and (max-width: 1600px) {
	.statement-magic .magic-box .kazari01,.statement-magic .magic-box .kazari02 {max-width: 400px;}
	.statement-magic .magic-box .magic-list li .content .txt-box p {font-size: 16px;}
	.statement-magic .magic-box .magic-list li .content .img-box {flex: 0 0 410px;}
}

@media screen and (max-width: 820px) {
	.statement-magic .magic-box h3 {font-size: 60px;}
	.statement-magic .magic-box h3 span {font-size: 80px;}
	.statement-magic .magic-box .magic-list {gap: 60px;}
	.statement-magic .magic-box .magic-list li .content {flex-direction: column;}
	.statement-magic .magic-box .magic-list li .content .img-box {
		flex: 0;
		margin-bottom: 0;
		width: 100%;
	}
	
	.statement-magic .magic-box .magic-list li .content .txt-box {flex: 0;}
}

@media screen and (max-width: 640px) {
	.statement-magic .magic-box .box {padding: 80px 0;}
	.statement-magic .magic-box .kazari01,.statement-magic .magic-box .kazari02 {width: 35%;}
	.statement-magic .magic-box h3 {
		font-size: 40px;
		margin-bottom: 60px;
	}
	.statement-magic .magic-box h3 span {font-size: 60px;}
	
	.statement-magic .magic-box .magic-list li .content .txt-box h5 {
		font-size: 24px;
		flex-direction: column;
		align-items: flex-start;
	}
	.statement-magic .magic-box .magic-list li .content .txt-box h5 .num {font-size: 50px;}
	.statement-magic .magic-box .magic-list li .content .txt-box h5 .main {
		margin-bottom: 0;
		line-height: 1.2em;
	}
}

/**********************************************************************************

.magic-photo

**********************************************************************************/
.magic-photo {position: relative;}

.magic-photo ul li {position: relative;}

.magic-photo ul li .txt-box {
	color: #fff;
	position: absolute;
	right: 3%;
	bottom: 5%;
	width: 40%;
}

.magic-photo ul li .txt-box h3 {
	font-size: 40px;
	line-height: 1.2em;
	margin-bottom: 10px;
}

.magic-photo ul li .txt-box p {
	font-size: 18px;
	line-height: 1.8em;
	text-align: justify;
}

.magic-photo .kazari {
	width: 30%;
	max-width: 500px;
	position: absolute;
	top: 0;
	left: 0;
}

@media screen and (max-width: 1600px) {
	.magic-photo ul li .txt-box h3 {font-size: 36px;}
	.magic-photo ul li .txt-box p {font-size: 16px;}
	.magic-photo .kazari {max-width: 400px;}
}

@media screen and (max-width: 1280px) {
	.magic-photo ul li .txt-box {width: 42%;}
}

@media screen and (max-width: 820px) {
	.magic-photo ul li .txt-box {width: 93%;}
	.magic-photo ul li .txt-box h3 {font-size: 30px;}
}

@media screen and (max-width: 640px) {
	.magic-photo ul li .txt-box {
		position: static;
		padding: 5%;
		color: var(--brown);
		width: 100%;
	}
	.magic-photo ul li .txt-box h3 {font-size: 24px;}
	.magic-photo .kazari {width: 35%;}
}

/**********************************************************************************

CUSTOM HOUSE

**********************************************************************************/
/**********************************************************************************

.custom-anker

**********************************************************************************/
.custom-anker {
	width: 95%;
	margin: 0 auto 160px;
}

.custom-anker .midashi {
	width: 95%;
	margin: 0 auto 90px;
}

.custom-anker .midashi h3 {
	font-size: 100px;
	margin-bottom: 40px;
}

.custom-anker .midashi p {
	font-size: 18px;
	line-height: 2em;
	text-align: justify;
}

.custom-anker .anker-box {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	align-items: center;
}

.custom-anker .anker-box .order-item {
	position: relative;
	flex: 1;
}

.custom-anker .anker-box .order-item .deco {
	position: absolute;
	z-index: 0;
	animation: spin-right 40s linear infinite;
}

.custom-anker .anker-box .order-item .deco-left {
	width: 334px;
	left: 10%;
	bottom: -20%;
}

.custom-anker .anker-box .order-item .deco-right {
	width: 390px;
	top: -30%;
	right: 10%;
}

.custom-anker .anker-box .order-item.full-order {
	margin-right: -60px;
	z-index: 1;
}

.custom-anker .anker-box .order-item.semi-order {
	margin-top: 200px;
	z-index: 2;
}

.custom-anker .anker-box .order-item .circle {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	text-decoration: none;
	position: relative;
	z-index: 1;
}

.custom-anker .anker-box .order-item.full-order .circle {
	color: #fff;
	background-color: var(--brown);
	border: solid 1px var(--brown);
}

.custom-anker .anker-box .order-item.full-order .circle:hover {
	color: var(--brown);
	background-color: #fff;
}


.custom-anker .anker-box .order-item.semi-order .circle {
	background-color: #fff;
	border: solid 1px var(--brown);
}

.custom-anker .anker-box .order-item.semi-order .circle:hover {
	color: #fff;
	background-color: var(--brown);
}


.custom-anker .anker-box .order-item .circle .inner {
	width: 100%;
	text-align: center;
}

.custom-anker .anker-box .order-item .circle .inner .inner-midashi {margin-bottom: 45px;}

.custom-anker .anker-box .order-item .circle .inner .inner-midashi .j-midashi {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.custom-anker .anker-box .order-item .circle .inner .inner-midashi .j-midashi p {font-size: 24px;}

.custom-anker .anker-box .order-item .circle .inner .inner-midashi .j-midashi .comment {
	font-size: 14px;
	border: solid 1px;
	padding: 4px 10px 5px;
	border-radius: 20px;
}

.custom-anker .anker-box .order-item .circle .inner .inner-midashi h4 {font-size: 70px;}

.custom-anker .anker-box .order-item .circle .inner ul {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: fit-content;
	margin: 0 auto 30px;
}

.custom-anker .anker-box .order-item .circle .inner ul li {
	font-size: 18px;
	text-align: center;
	border: solid 1px;
	padding: 5px 20px;
	border-radius: 20px;
}

.custom-anker .anker-box .order-item .circle .inner .img-hover {width: 50px;}

.custom-anker .anker-box .order-item .circle:hover .inner .img-hover img:nth-child(2) {
	opacity: 1;
	transition: 0.5s;
}

@media screen and (max-width: 1600px) {	
	.custom-anker .midashi h3 {font-size: 72px;}
	.custom-anker .midashi p {font-size: 16px;}
}

@media screen and (max-width: 1280px) {	
	.custom-anker .anker-box .order-item .deco-left {width: 260px;}
	.custom-anker .anker-box .order-item .deco-right {width: 330px;}
	.custom-anker .anker-box .order-item .circle .inner .inner-midashi h4 {font-size: 60px;}
}

@media screen and (max-width: 1024px) {
	.custom-anker .midashi h3 {font-size: 60px;}
	.custom-anker .anker-box .order-item .deco-left {width: 200px;}
	.custom-anker .anker-box .order-item .deco-right {
		width: 260px;
		right: 3%;
	}
	.custom-anker .anker-box .order-item.full-order {margin-right: -200px;}
	.custom-anker .anker-box .order-item.semi-order {margin-top: 400px;}
}

@media screen and (max-width: 820px) {
	.custom-anker {width: 90%;}
	.custom-anker .midashi {width: 100%;}
	.custom-anker .anker-box .order-item .deco-left {
		width: 200px;
		top: -5%;
		left: auto;
		right: -20%;
		bottom: auto;
	}
	.custom-anker .anker-box .order-item .deco-right {
		width: 260px;
		top: auto;
		left: -30%;
		right: auto;
		bottom: -10%;
	}
	.custom-anker .anker-box .order-item.full-order {margin-right: -400px;}
	.custom-anker .anker-box .order-item.semi-order {margin-top: 500px;}
	.custom-anker .anker-box .order-item .circle .inner ul li {font-size: 16px;}
}

@media screen and (max-width: 640px) {
	.custom-anker .midashi h3 {font-size: 40px;}
	.custom-anker .anker-box {
		flex-direction: column;
		align-items: center;
	}
	.custom-anker .anker-box .order-item {
		flex: 0;
		width: 100%;
	}
	.custom-anker .anker-box .order-item.full-order {margin-right: 0;}
	.custom-anker .anker-box .order-item.semi-order {margin-top: -7%;}
	
	.custom-anker .anker-box .order-item .deco-left {
		width: 180px;
		top: -15%;
		right: 0;
	}
	.custom-anker .anker-box .order-item .deco-right {
		width: 200px;
		left: 0;
		bottom: -15%;
	}

	.custom-anker .anker-box .order-item .circle .inner .inner-midashi {margin-bottom: 20px;}
	.custom-anker .anker-box .order-item .circle .inner .inner-midashi h4 {font-size: 34px;}
	.custom-anker .anker-box .order-item .circle .inner .inner-midashi .j-midashi p {font-size: 16px;}
	.custom-anker .anker-box .order-item .circle .inner ul li {font-size: 13px;}
	.custom-anker .anker-box .order-item .circle .inner .img-hover {width: 30px;}
}

@media screen and (max-width: 430px) {
	.custom-anker .anker-box .order-item .deco-left {width: 130px;}
	.custom-anker .anker-box .order-item .deco-right {width: 150px;}
}


/**********************************************************************************

.custom-order

**********************************************************************************/
.custom-order {
	width: 95%;
	margin: 0 auto 200px;
}

.custom-order .intro-midashi {
	font-size: 18px;
	text-align: center;
	color: #fff;
	background-color: var(--brown);
	padding: 10px 20px;
	width: fit-content;
	margin: 0 auto 80px;
}

.custom-order h3 {
	text-align: center;
	margin-bottom: 10px;
}

.custom-order.custom-order-full h3 {font-size: 150px;}
.custom-order.custom-order-semi h3 {font-size: 100px;}

.custom-order .zeitaku {
	font-size: 72px;
	text-align: center;
	margin-bottom: 90px;
}

.custom-order .inner01 {
	display: flex;
	align-items: flex-start;
	gap: 50px;
	width: 80%;
	margin: 0 auto 100px;
}

.custom-order .inner01 .img-box {flex: 0 0 45%;}
.custom-order .inner01 .img-box img {display: block;}

.custom-order .inner01 p {
	font-size: 18px;
	line-height: 2em;
	flex: 1;
}

.custom-order .inner01 p span {
	text-decoration: underline;
	text-underline-offset: 6px;
}

.custom-order .inner02 {
	width: 90%;
	margin: 0 auto 100px;
}

.custom-order .inner02 ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.custom-order .inner02 ul li {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.custom-order .inner02 ul li img {
	height: 100%;
	object-fit: cover;
}

.custom-order .inner02 .btn {
	display: block;
	margin: 30px 0 0 auto;
	width: fit-content;
}

.custom-order .inner03 {
	width: 80%;
	margin: 0 auto;
	padding-bottom: 100px;
}

.custom-order .inner03 h4 {
	font-size: 72px;
	margin-bottom: 40px;
}

.custom-order .inner03 .voice-img {
	position: relative;
	margin-bottom: 10px;
}

.custom-order .inner03 .voice-img .kazari {
	width: 216px;
	animation: spin-right 40s linear infinite;
	position: absolute;
	top: -100px;
	right: -20px;
}

.custom-order .inner03 h5 {
	font-size: 28px;
	line-height: 1.5em;
	margin-bottom: 30px;
}

.custom-order .inner03 p {
	font-size: 18px;
	line-height: 1.8em;
	text-align: justify;
}

@media screen and (max-width: 1600px) {
	.custom-order .inner03 h5 {font-size: 24px;}
	.custom-order .inner03 p {font-size: 16px;}
}

@media screen and (max-width: 1280px) {
	.custom-order.custom-order-full h3 {font-size: 120px;}
	.custom-order.custom-order-semi h3 {font-size: 90px;}
	.custom-order .zeitaku {font-size: 60px;}
	.custom-order .inner01,.custom-order .inner03 {width: 90%;}
}

@media screen and (max-width: 1024px) {
	.custom-order.custom-order-full h3 {font-size: 100px;}
	.custom-order.custom-order-semi h3 {font-size: 70px;}
	.custom-order {width: 90%;}
}

@media screen and (max-width: 820px) {
	.custom-order.custom-order-full h3 {font-size: 80px;}
	.custom-order.custom-order-semi h3 {font-size: 58px;}
	.custom-order .inner01 {
		flex-direction: column;
		gap: 40px;
	}
	
	.custom-order .inner03 .voice-img .kazari {
		width: 150px;
		top: -80px;
		right: -10px;
	}
}

@media screen and (max-width: 640px) {
	.custom-order {margin: 0 auto 100px;}
	.custom-order .intro-midashi {
		font-size: 16px;
		padding: 5px 10px;
		margin: 0 auto 40px;
	}
	
	.custom-order.custom-order-full h3 {font-size: 50px;}
	.custom-order.custom-order-semi h3 {font-size: 50px;}
	.custom-order .zeitaku {
		font-size: 30px;
		margin-bottom: 40px;
	}
	
	.custom-order .inner01,.custom-order .inner02 {margin: 0 auto 60px;}
	.custom-order .inner01 p {font-size: 16px;}
	
	.custom-order .inner02 ul {display: block;}
	
	.house-slider .slick-dots {bottom: -25px;}
	.house-slider .slick-dots li {
		width: 15px;
		margin: 0 1px;
	}

	.house-slider .slick-dots li button:before {
		font-size: 24px;
		color: #ccc;
		opacity: 1;
	}

	.house-slider .slick-dots li.slick-active button:before {color: var(--brown);}
	
	.custom-order .inner02 .btn {margin: 40px 0 0 auto;}
	
	.custom-order .inner03 {padding-bottom: 40px;}
	.custom-order .inner03 h4 {font-size: 50px;}
	.custom-order .inner03 .voice-img {margin-bottom: 40px;}
	.custom-order .inner03 .voice-img .kazari {
		width: 100px;
		top: 20%;
		right: 0;
	}
	.custom-order .inner03 h5 {
		font-size: 22px;
		margin-bottom: 20px;
	}
}

/**********************************************************************************

.custom-style

**********************************************************************************/
.custom-style {
	margin-bottom: 200px;
	position: relative;
	background-color: #fff;
}

.custom-style h3 {
	font-size: 40px;
	line-height: 1.5em;
	position: absolute;
	top: 10%;
	right: 15%;
}

.custom-style .kenpla {
	width: 60%;
	max-width: 900px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 25%;
	margin: 0 auto;
	mix-blend-mode: difference;
}

@media screen and (max-width: 1600px) {
	.custom-style h3 {font-size: 30px;}
}

@media screen and (max-width: 1024px) {
	.custom-style h3 {right: 10%;}
}

@media screen and (max-width: 820px) {
	.custom-style h3 {right: 7%;}
}

@media screen and (max-width: 640px) {
	.custom-style {margin-bottom: 100px;}
	.custom-style h3 {
		font-size: 24px;
		top: 2%;
		right: 15%;
	}
}

@media screen and (max-width: 430px) {
	.custom-style h3 {
		top: -10%;
		right: 8%;
	}
}

/**********************************************************************************

.custom-photo

**********************************************************************************/
.custom-photo {
	position: relative;
	z-index: 0;
}

.custom-photo .custom-slide li img {display: block;}

.custom-photo h3 {
	font-size: 44px;
	color: #fff;
	mix-blend-mode: difference;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	margin: 0 auto;
}

@media screen and (max-width: 1600px) {
	.custom-photo h3 {font-size: 36px;}
}

@media screen and (max-width: 640px) {
	.custom-photo h3 {font-size: 30px;}
}

/**********************************************************************************

SPEC　性能

**********************************************************************************/
/**********************************************************************************

.spec-intro

**********************************************************************************/
.spec-intro {
	width: 90%;
	margin: 150px auto;
	text-align: center;
}

.spec-intro h3 {
	font-size: 36px;
	margin-bottom: 20px;
}

.spec-intro img {max-width: 1020px;}

.spec-intro p {
	font-size: 20px;
	margin-top: 80px;
	line-height: 2.5em;
}

@media screen and (max-width: 1280px) {
	.spec-intro h3 {font-size: 30px;}
}

@media screen and (max-width: 830px) {
	.spec-intro p {font-size: 18px;}
}

@media screen and (max-width: 640px) {
	.spec-intro {margin: 80px auto;}
	.spec-intro h3 {font-size: 26px;}
	.spec-intro p {
		font-size: 15px;
		margin-top: 40px;
		line-height: 2em;
	}
}

/**********************************************************************************

.spec-box

**********************************************************************************/
.spec-box {margin-bottom: 150px;}
.spec-box .cross-midashi {margin-top: 130px;}

.spec-box .inner {
	display: flex;
	align-items: flex-start;
	gap: 60px 80px;
}

.material-box.spec-box .inner {align-items: stretch;}

.spec-box .inner.inner-inner {margin-top: 100px;}

.spec-box .photo {
	flex: 0 0 25%;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.spec-box .photo.esta-photo li {
	width: 50%;
	margin: 0 0 0 auto;
}

.spec-box .one-photo {
	flex: 0 0 25%;
	position: relative;
	overflow: hidden;
}

.spec-box .one-photo img {	
	height: 100%;
	object-fit: cover;
	position: absolute;
	inset: 0;
}

.spec-box .contents {
	flex: 1;
	padding-right: 10%;
}

.spec-box .contents h4 {
	font-size: 36px;
	line-height: 1.3em;
	margin-bottom: 30px;
}

.spec-box .contents h4 span {font-size: 24px;}

.spec-box .contents .read {
	line-height: 1.8em;
	text-align: justify;
	margin-bottom: 60px;
}

.material-warmth.spec-box .contents .read {margin-bottom: 0;}

.spec-box .contents .read .under-line {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.spec-box .contents .read .big {font-size: 20px;}

.spec-box .contents .flame {
	display: flex;
	flex-direction: column;
	gap: 100px;
}

.spec-box .contents .flame-inner {
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.spec-box .contents .flame-inner .txt {
	line-height: 1.8em;
	text-align: justify;
	margin-bottom: 30px;
}

.spec-box .contents .flame-inner .num-list {
	counter-reset: num;
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.spec-box .contents .flame-inner .num-list li {
	counter-increment: num;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	line-height: 1.5em;
}

.spec-box .contents .flame-inner .num-list li::before {
	content: counter(num);
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--brown);
	color: #fff;
	width: 20px;
	height: 20px;
	font-size: 14px;
	font-family: "map-roman-variable", serif;
	font-variation-settings: 'wdth' 80;
	flex-shrink: 0;
	margin-top: 3px;
	padding-bottom: 2px;
}

.spec-box .contents .flame-inner .box-list {
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin-bottom: 60px;
}

.spec-box .contents .flame-inner .box-list h6 {
	font-size: 18px;
	display: flex;
	gap: 15px;
	margin-bottom: 15px;
}

.spec-box .contents .flame-inner .box-list h6 span {
	font-size: 14px;
	color: #fff;
	background-color: var(--brown);
	padding: 3px 7px 4px;
}

.spec-box .contents .flame-inner .box-list p {
	line-height: 1.8em;
	text-align: justify;
}

.spec-box .contents .flame-inner .innter-box li {margin-bottom: 20px;}

.spec-box .contents .flame-inner .innter-box li h6 {
	font-weight: bold;
	margin-bottom: 10px;
}

.spec-box .contents .flame-inner .innter-box li p {
	line-height: 1.8em;
	text-align: justify;
}

.spec-box .contents .inner-flex {
	display: flex;
	align-items: flex-start;
	gap: 30px 40px;
}

.spec-box .contents .inner-flex p {
	flex: 1;
	line-height: 1.8em;
	text-align: justify;
}

.spec-box .contents .inner-flex .img-box {flex: 0 0 430px;}

.spec-box .contents .list-wrap {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}
.spec-box .contents .list-wrap .num-list {flex: 1;}
.spec-box .contents .list-wrap .image {flex: 0 0 410px;}

.spec-box .contents .taishin-img02 {max-width: 440px;}
.spec-box .contents .dannetsu-img01 {max-width: 830px;}
.spec-box .contents .dannetsu-img02 {max-width: 1000px;}

@media screen and (max-width: 1900px) {
	.spec-box .contents .dannetsu-img01 {max-width: 640px;}
}

@media screen and (max-width: 1600px) {
	.spec-box .photo,.spec-box .one-photo {flex: 0 0 30%;}
	.spec-box .contents .inner-flex .img-box {flex: 0 0 330px;}
}

@media screen and (max-width: 1400px) {
	.spec-box .photo,.spec-box .one-photo {flex: 0 0 40%;}
	.spec-box .contents {padding-right: 5%;}
}

@media screen and (max-width: 1024px) {
	.spec-box .inner {flex-direction: column;}
	.spec-box .inner.esta-inner {
		margin-top: 60px;
		gap: 30px;
	}
	
	.spec-box .inner.inner-inner,.spec-box .inner.galvalume-inner {margin-top: 80px;}
	
	.spec-box .photo {
		flex: 0;
		flex-direction: row;
		order: 2;
	}
	
	.spec-box .photo.esta-photo li {
		width: 80%;
		max-width: 320px;
		margin: 0 auto;
	}
	
	.spec-box .photo.esta-photo li .pc {display: none;}
	.spec-box .photo.esta-photo li .sp {display: block;}
	
	.spec-box .one-photo {
		overflow: hidden;
		aspect-ratio: 4 / 3;
		order: 2;
	}
	
	.spec-box .one-photo img {	position: static;}
	
	.spec-box .photo li {
		overflow: hidden;
		aspect-ratio: 1 / 1;
	}
	
	.spec-box .photo.hiritsu-4 li {
		width: 100%;
		aspect-ratio: 4 / 3;
	}
	
	.spec-box .photo.zero {display: none;}
	
	.spec-box .photo li:nth-child(n+4) {display: none;}
	
	.spec-box .photo li img {
		height: 100%;
		object-fit: cover;
	}
	
	.spec-box .contents {
		padding-left: 5%;
		order: 1;
	}
	
	.spec-box .contents h4 {font-size: 30px;}
	.spec-box .contents h4 span {font-size: 22px;}
	
	.spec-box .contents .read.galvalume {margin-bottom: 0;}
}

@media screen and (max-width: 640px) {
	.spec-box {margin-bottom: 80px;}
	.spec-box .cross-midashi {margin-top: 80px;}
	.spec-box .contents .read .big {font-size: 18px;}
	.spec-box .contents .flame {gap: 60px;}
	.spec-box .contents h4 {font-size: 24px;}
	.spec-box .contents h4 span {font-size: 20px;}
	.spec-box .contents .inner-flex {flex-direction: column;}
	.spec-box .contents .inner-flex p {flex: 0;}
	.spec-box .contents .inner-flex .img-box {
		flex: 0;
		width: 100%;
	}
	
	.spec-box .contents .list-wrap {flex-direction: column;}
	.spec-box .contents .list-wrap .num-list {flex: 0;}
	.spec-box .contents .list-wrap .image {
		flex: 0;
		width: 100%;
	}
}

/**********************************************************************************

.spec-eco

**********************************************************************************/
.spec-eco {margin-bottom: 150px;}
.spec-eco .main-img {position: relative;}

.spec-eco .main-img::after {
	content: "";
	background-color: var(--brown);
	width: 1px;
	height: 100px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -50px;
	margin: 0 auto;
}

.spec-eco .midashi {
	text-align: center;
	margin: 100px auto;
	position: relative;
	width: fit-content;
}

.spec-eco .midashi h4,.spec-eco .midashi p {
	font-size: 21px;
	line-height: 1.2em;
}
.spec-eco .midashi h4,.spec-eco .midashi h3 {margin-bottom: 5px;}
.spec-eco .midashi h3 {
	font-size: 60px;
	line-height: 1.2em;
}

.spec-eco .midashi img {
	width: 60px;
	position: absolute;
	right: -80px;
	bottom: -10px;
}

@media screen and (max-width: 820px) {
	.spec-eco .midashi h4,.spec-eco .midashi p {font-size: 18px;}
	.spec-eco .midashi h3 {font-size: 50px;}
	.spec-eco .midashi img {
		width: 50px;
		right: -60px;
		bottom: 0;
	}
}

@media screen and (max-width: 640px) {
	.spec-eco {margin-bottom: 80px;}
	.spec-eco .main-img::after {
		height: 60px;
		bottom: -30px;
	}
	.spec-eco .midashi {margin: 80px auto;}
	.spec-eco .midashi h3 {font-size: 45px;}
	.spec-eco .midashi img {right: -30px;}
}

/**********************************************************************************

.spec-eco .inner01

**********************************************************************************/
.spec-eco .inner01 {
	display: flex;
	gap: 60px 80px;
	margin-bottom: 100px;
}

.spec-eco .inner01 .img-box {
	flex: 0 0 25%;
	position: relative;
	overflow: hidden;
}

.spec-eco .inner01 .img-box img {	
	height: 100%;
	object-fit: cover;
	position: absolute;
	inset: 0;
}

.spec-eco .inner01 .contents {
	flex: 1;
	padding-right: 10%;
	display: flex;
	align-items: flex-end;
	gap: 40px 60px;
}

.spec-eco .inner01 .contents .txt-box {flex: 1;}

.spec-eco .inner01 .contents .txt-box h4 {
	font-size: 36px;
	line-height: 1.2em;
	margin-bottom: 20px;
}

.spec-eco .inner01 .contents .txt-box p {
	line-height: 2em;
	text-align: justify;
}

.spec-eco .inner01 .contents .tokkyo {flex: 0 0 206px;}

@media screen and (max-width: 1600px) {
	.spec-eco .inner01 .img-box {flex: 0 0 30%;}
}

@media screen and (max-width: 1400px) {
	.spec-eco .inner01 .img-box {flex: 0 0 40%;}
	.spec-eco .inner01 .contents {padding-right: 5%;}
	.spec-eco .inner01 .contents .tokkyo {flex: 0 0 150px;}
}

@media screen and (max-width: 1024px) {
	.spec-eco .inner01 {flex-direction: column;}
	.spec-eco .inner01 .img-box {
		flex: 0;
		order: 2;
		aspect-ratio: 4 / 3;
	}
	
	.spec-eco .inner01 .img-box img {position: static;}
	
	.spec-eco .inner01 .contents {
		flex: 0;
		padding-left: 5%;
		order: 1;
	}
	
	.spec-eco .inner01 .contents .txt-box h4 {font-size: 30px;}
}

@media screen and (max-width: 640px) {
	.spec-eco .inner01 {margin-bottom: 80px;}
	.spec-eco .inner01 .contents {
		flex-direction: column;
		align-items: center;
	}
	.spec-eco .inner01 .contents .txt-box h4 {font-size: 24px;}
	.spec-eco .inner01 .contents .txt-box p {
		flex: 0;
		line-height: 1.8em;
	}
	
	.spec-eco .inner01 .contents .tokkyo {
		flex: 0;
		width: 50%;
		max-width: 206px;
	}
}

/**********************************************************************************

.spec-eco .inner02

**********************************************************************************/
.spec-eco .inner02 {
	width: 90%;
	margin: 0 auto;
	display: flex;
	gap: 60px 100px;
	align-items: flex-start;
}

.spec-eco .inner02 .img-box,.spec-eco .inner02 .txt-box {flex: 1;}

.spec-eco .inner02 .txt-box .num-list {
	counter-reset: num;
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.spec-eco .inner02 .txt-box .num-list li {
	counter-increment: num;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	line-height: 1.5em;
}

.spec-eco .inner02 .txt-box .num-list li::before {
	content: counter(num);
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--brown);
	color: #fff;
	width: 20px;
	height: 20px;
	font-size: 14px;
	font-family: "map-roman-variable", serif;
	font-variation-settings: 'wdth' 80;
	flex-shrink: 0;
	margin-top: 3px;
	padding-bottom: 2px;
}

@media screen and (max-width: 1024px) {
	.spec-eco .inner02 {flex-direction: column;}
	.spec-eco .inner02 .img-box {
		flex: 0;
		width: 100%;
		order: 2;
	}
	
	.spec-eco .inner02 .txt-box {
		flex: 0;
		order: 1;
	}
}

/**********************************************************************************

.spec-link

**********************************************************************************/
.spec-link {
	display: block;
	width: 90%;
	max-width: 826px;
	margin: 0 auto;
}

.spec-link .box {
	padding: 20px 20px 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
}

.spec-link .txt-box h3 {
	font-size: 36px;
	line-height: 1.2em;
	margin-bottom: 10px;
}

.spec-link .txt-box p {
	font-size: 24px;
	line-height: 1.2em;
}

.spec-link .box .btn {transition: 0.5s;}

.spec-link:hover .box .btn {
	background-color: var(--red);
	color: #fff;
	border: solid 1px var(--red);
	transition: 0.5s;
}

@media screen and (max-width: 820px) {
	.spec-link .txt-box h3 {font-size: 32px;}
	.spec-link .txt-box p {font-size: 20px;}
}

@media screen and (max-width: 640px) {
	.spec-link .box {
		padding: 20px 0 0;
		flex-direction: column;
		align-items: flex-start;
	}
	
	.spec-link .txt-box h3 {font-size: 29px;}
	.spec-link .txt-box p {font-size: 18px;}
	
	.spec-link .box .btn {
		width: fit-content;
		margin: 0 0 0 auto;
	}
}

/**********************************************************************************

素材と住宅設備

**********************************************************************************/
/**********************************************************************************

.material-intro

**********************************************************************************/
.material-intro {
	background-image: url("images/material/intoro-bg.jpg");
	background-image: image-set(
		url("images/material/intoro-bg.webp") type("image/webp"),
		url("images/material/intoro-bg.jpg") type("image/jpeg")
	);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.material-intro .box {
	width: 90%;
	margin: 0 auto;
	padding: 180px 0 160px;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.material-intro .box h3 {
	font-size: 36px;
	line-height: 1.8em;
	margin-bottom: 40px;
	text-align: center;
}

.material-intro .box h3 span {font-size: 48px;}

.material-intro .box p {
	font-size: 20px;
	line-height: 1.8em;
	text-align: justify;
}

@media screen and (max-width: 1280px) {
	.material-intro .box p {font-size: 18px;}
}

@media screen and (max-width: 1024px) {
	.material-intro .box h3 {font-size: 30px;}
	.material-intro .box h3 span {font-size: 40px;}
}

@media screen and (max-width: 640px) {
	.material-intro .box {padding: 80px 0;}
	.material-intro .box h3 {font-size: 24px;}
	.material-intro .box h3 span {font-size: 36px;}
	.material-intro .box p {font-size: 16px;}
}

/**********************************************************************************

.material-fictures

**********************************************************************************/
.material-fictures {
	padding-top: 150px;
	border-top: solid 1px;
}

.material-fictures h3 {
	width: 70%;
	max-width: 328px;
	margin: 0 auto 100px;
}

.material-fictures .intro {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	width: 80%;
	margin: 0 auto 150px;
}

.material-fictures .intro .txt-box,.material-fictures .intro .img-box {flex: 1;}

.material-fictures .intro .txt-box h4 {
	font-size: 60px;
	line-height: 1.3em;
	margin-bottom: 30px;
}

.material-fictures .intro .txt-box p {
	line-height: 1.8em;
	text-align: justify;
}

@media screen and (max-width: 1600px) {
	.material-fictures .intro {width: 90%;}
}

@media screen and (max-width: 1280px) {
	.material-fictures .intro .txt-box h4 {font-size: 50px;}
}

@media screen and (max-width: 1024px) {
	.material-fictures .intro .txt-box h4 {font-size: 40px;}
}

@media screen and (max-width: 820px) {
	.material-fictures .intro {flex-direction: column;}
	.material-fictures .intro .txt-box,.material-fictures .intro .img-box {flex: 0;}
	.material-fictures .intro .img-box {width: 100%;}
}

@media screen and (max-width: 640px) {
	.material-fictures {padding-top: 80px;}
	.material-fictures h3,.material-fictures .intro {margin: 0 auto 80px;}
	.material-fictures .intro .txt-box h4 {font-size: 32px;}
}

/**********************************************************************************

.material-fictures .line-up-box

**********************************************************************************/
.material-fictures .line-up-box {
	width: 95%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 100px;
	text-align: center;
}

.material-fictures .line-up-box h4 {
	font-size: 72px;
	margin-bottom: 50px;	
}

.material-fictures .line-up-list .item-list {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 10px;
	margin-bottom: 60px;
}

.material-fictures .line-up-list.kitchen .item-list {grid-template-columns: repeat(4, 1fr);}

.material-fictures .line-up-list .item-list > li img {
	display: block;
	width: 100%;
	height: auto;
}

/* --------------------
   初期表示（PC）
-------------------- */

/* kitchen：9枚目以降を隠す → 8枚表示 */
.material-fictures .line-up-list.kitchen:not(.is-open) .item-list > li:nth-child(n+9) {display: none;}

/* kitchen以外：7枚目以降を隠す → 6枚表示 */
.material-fictures .line-up-list:not(.kitchen):not(.is-open) .item-list > li:nth-child(n+7) {display: none;}

/* 開いたら全部表示 */
.material-fictures .line-up-list.is-open .item-list > li {display: block;}

.material-fictures .line-up-list .btn,.material-fictures .line-up-list .btn:hover {transition: 0.5s;}

@media screen and (max-width: 1280px) {
	.material-fictures .line-up-box {width: 90%;}
	.material-fictures .line-up-box h4 {font-size: 60px;}
}

@media screen and (max-width: 640px) {
	.material-fictures .line-up-box {gap: 80px;}

	.material-fictures .line-up-box h4 {
		font-size: 40px;
		margin-bottom: 30px;
	}

	.material-fictures .line-up-list .item-list {
		grid-template-columns: repeat(3, 1fr);
		margin-bottom: 30px;
	}

	.material-fictures .line-up-list.kitchen .item-list {grid-template-columns: repeat(2, 1fr);}

	/* --------------------
	   初期表示（SP）
	-------------------- */

	/* kitchen：5枚目以降を隠す → 4枚表示 */
	.material-fictures .line-up-list.kitchen:not(.is-open) .item-list > li:nth-child(n+5) {display: none;}

	/* kitchen以外：4枚目以降を隠す → 3枚表示 */
	.material-fictures .line-up-list:not(.kitchen):not(.is-open) .item-list > li:nth-child(n+4) {display: none;}

	/* 開いたら全部表示 */
	.material-fictures .line-up-list.is-open .item-list > li {display: block;}
}

/**********************************************************************************

家づくりの流れ

**********************************************************************************/
/**********************************************************************************

.process-hint

**********************************************************************************/
.process-hint {
	display: flex;
	align-items: flex-start;
	margin-bottom: 150px;
}

.process-hint .left {
	padding: 0 5%;
	flex: 1;
}

.process-hint .left h3 {
	font-size: 42px;
	line-height: 1.3em;
	margin-bottom: 30px;
}

.process-hint .left .box {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

.process-hint .left .box .txt-box {flex: 1;}

.process-hint .left .box .txt-box p {
	font-size: 18px;
	text-align: justify;
	line-height: 1.8em;
	margin-bottom: 30px;
}

.process-hint .left .box .illust {flex: 0 0 110px;}
.process-hint .right {flex: 0 0 50%;}

@media screen and (max-width: 1600px) {
	.process-hint .left h3 {font-size: 36px;}
	.process-hint .left .box .illust {flex: 0 0 86px;}
	.process-hint .left .box .txt-box p {font-size: 16px;}
	.process-hint .right {flex: 0 0 40%;}
}

@media screen and (max-width: 1024px) {
	.process-hint {
		flex-direction: column;
		gap: 50px;
	}
	.process-hint .left,.process-hint .right {
		width: 100%;
		flex: 0;
	}
	.process-hint .left .box {justify-content: space-between;}
}

@media screen and (max-width: 640px) {
	.process-hint {margin-bottom: 80px;}
	.process-hint .left h3 {font-size: 30px;}
	.process-hint .left .box {
		flex-direction: column;
		gap: 0;
	}
	.process-hint .left .box .txt-box,.process-hint .left .box .illust {flex: 0;}
	.process-hint .left .box .illust {
		width: 76px;
		margin: -50px 30px 0 auto;
	}
}

/**********************************************************************************

.process-flow

**********************************************************************************/
.process-flow {margin-bottom: 150px;}
.process-flow .process-midashi {
	display: flex;
	align-items: flex-end;
	gap: 15px;
	margin-bottom: 100px;
}

.process-flow .process-midashi h3 {
	font-size: 72px;
	vertical-align: text-bottom;
}

.process-flow .process-midashi h3 span {font-size: 100px;}
.process-flow .process-midashi h4 {font-size: 30px;}

.process-flow .process-midashi p {
	font-size: 18px;
	color: #fff;
	background-color: var(--brown);
	padding: 3px 10px 5px;
	margin-bottom: 5px;
}

.process-flow .section-list {position: relative;}

.process-flow .section-list .kazari {
	width: 86px;
	position: absolute;
	top: -10px;
	right: -20px;
}

.process-flow .section-list .line-box {margin-top: 30px;}

.process-flow .section-list .line-box h5 {font-size: 18px;}

.process-flow .section-list .line-box h5 span {
	display: flex;
	align-items: center;
}

.process-flow .section-list .line-box h5 span::before {
	content: "";
	display: block;
	width: 20px;
	height: 1px;
	background-color: var(--brown);
	margin-right: 10px;
}

.process-flow .section-list .line-box h5 span::after {
	content: "";
	display: block;
	flex: 1;
	height: 1px;
	background-color: var(--brown);
	margin-left: 10px;
}

.process-flow .section-list .line-box p {
	line-height: 1.8em;
	padding: 30px;
	border-left: solid 1px;
	border-right: solid 1px;
	border-bottom: solid 1px;
	margin-top: -14px;
}

.process-flow .tochi-box01 {
	background-color: var(--gray3);
	padding: 40px;
	margin-top: 60px;
	margin-bottom: 10px;
}

.process-flow .tochi-box01 .tochi-midashi {
	display: flex;
	align-items: flex-end;
	gap: 10px 20px;
	margin-bottom: 30px;
}

.process-flow .tochi-box01 .tochi-midashi h5 {font-size: 30px;}

.process-flow .tochi-box01 ul {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 0 20px;
}

.process-flow .tochi-box01 ul li {
	display: flex;
	align-items: center;
	gap: 50px;
}

.process-flow .tochi-box01 ul li h6 {
	font-size: 18px;
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 0 0 198px;
}

.process-flow .tochi-box01 ul li p {flex: 1;}

.process-flow .tochi-box02 {display: flex;}
.process-flow .tochi-box02.flont {margin-bottom: 10px;}

.process-flow .tochi-box02 .txt-box {
	background-color: var(--gray3);
	padding: 40px;
	flex: 1;
}

.process-flow .tochi-box02 .txt-box h5 {
	font-size: 30px;
	margin-bottom: 20px;
	line-height: 1.2em;
}

.process-flow .tochi-box02 .txt-box p {
	line-height: 1.8em;
	text-align: justify;
}

.process-flow .tochi-box02 .img-box {
	flex: 0 0 316px;
	overflow: hidden;
	position: relative;
}

.process-flow .tochi-box02 .img-box img {
	height: 100%;
	object-fit: cover;
	position: absolute;
	inset: 0;
}

@media screen and (max-width: 1600px) {
	.process-flow .process-midashi h3 {font-size: 60px;}
	.process-flow .process-midashi h3 span {font-size: 90px;}
}

@media screen and (max-width: 1024px) {
	.process-flow .process-midashi {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.process-flow .tochi-box01 .tochi-midashi {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.process-flow .tochi-box01 ul {padding: 0;}
}

@media screen and (max-width: 820px) {
	.process-flow .tochi-box02 {flex-direction: column;}
	.process-flow .tochi-box02 .txt-box,.process-flow .tochi-box02 .img-box {flex: 0;}
	.process-flow .tochi-box02 .img-box {aspect-ratio: 5 / 3;}
}

@media screen and (max-width: 640px) {
	.process-flow {margin-bottom: 80px;}
	.process-flow .process-midashi {margin-bottom: 40px;}
	.process-flow .process-midashi h3 {font-size: 40px;}
	.process-flow .process-midashi h3 span {font-size: 70px;}
	.process-flow .process-midashi h4 {font-size: 24px;}
	.process-flow .process-midashi p {font-size: 16px;}
	
	.process-flow .section-list .kazari {
		width: 70px;
		top: -5px;
	}
	
	.process-flow .tochi-box01 {
		padding: 30px 20px;
		margin-top: 40px;
	}
	.process-flow .tochi-box01 .tochi-midashi h5,.process-flow .tochi-box02 .txt-box h5 {font-size: 24px;}
	.process-flow .tochi-box01 ul {gap: 30px;}
	
	.process-flow .tochi-box01 ul li {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	
	.process-flow .tochi-box01 ul li h6,.process-flow .tochi-box01 ul li p {flex: 0;}
	
	.process-flow .tochi-box02 .txt-box {padding: 30px 20px;}
}

/**********************************************************************************

.process-after

**********************************************************************************/
.process-after {
	position: relative;
	padding-bottom: 150px;
}

.process-after .box {
	width: 90%;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	gap: 60px;
}

.process-after .midashi p {
	font-size: 24px;
	margin-bottom: 5px;
}

.process-after .midashi h3 {font-size: 80px;}

.process-after ul {
	display: flex;
	flex-direction: column;
	gap: 30px;
	flex: 1;
}

.process-after ul li {
	padding-top: 30px;
	border-top: solid 1px;	
}

.process-after ul li h4 {
	font-size: 24px;
	margin-bottom: 20px;
}

.process-after ul li {
	line-height: 1.8em;
	text-align: justify;
}

.process-after ul li .btn {
	display: block;
	margin: 20px 0 0 auto;
	width: fit-content;
}

.process-after .bg {
	width: 30%;
	position: absolute;
	top: 250px;
	left: 0;
}

@media screen and (max-width: 2100px) {
	.process-after .bg {width: 35%;}
}

@media screen and (max-width: 1600px) {
	.process-after .midashi h3 {font-size: 72px;}
}

@media screen and (max-width: 1300px) {
	.process-after .bg {width: 44%;}
}

@media screen and (max-width: 1024px) {
	.process-after {padding-bottom: 0;}
	.process-after .box {
		flex-direction: column;
		gap: 40px;
		margin-bottom: 50px;
	}
	
	.process-after ul {flex: 1;}
	
	.process-after .bg {
		position: static;
		width: 90%;
	}
}

@media screen and (max-width: 640px) {
	.process-after .midashi p,.process-after ul li h4 {font-size: 22px;}
	.process-after .midashi h3 {font-size: 48px;}
}

/**********************************************************************************

安心の耐性と保証

**********************************************************************************/
/**********************************************************************************

.strictire-section

**********************************************************************************/
.strictire-section.strictire-team {margin-bottom: 60px;}

.strictire-section .inner .midashi {
	display: flex;
	align-items: flex-end;
	margin-bottom: 80px;
}

.strictire-section .inner .midashi h3 {
	font-size: 72px;
	line-height: 1.2em;
}
.strictire-section .inner .midashi p {
	font-size: 30px;
	margin-bottom: 5px;
}

.strictire-section.strictire-team .midashi p {margin-left: -284px;}
.strictire-section.strictire-warranty .midashi p {margin-left: -40px;}

@media screen and (max-width: 1280px) {
	.strictire-section .inner .midashi h3 {font-size: 60px;}
	.strictire-section .inner .midashi p {font-size: 24px;}
	.strictire-section.strictire-team .midashi p {margin-left: -234px;}
}

@media screen and (max-width: 1024px) {
	.strictire-section .inner .midashi h3 {font-size: 50px;}
	.strictire-section.strictire-team .midashi p {margin-left: -190px;}
	.strictire-section.strictire-warranty .midashi p {margin-left: -30px;}
}

@media screen and (max-width: 820px) {
	.strictire-section .inner .midashi {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.strictire-section.strictire-team .midashi p,.strictire-section.strictire-warranty .midashi p {margin-left: 0;}
}

@media screen and (max-width: 640px) {
	.strictire-section .inner .midashi {margin-bottom: 40px;}
	.strictire-section .inner .midashi h3 {font-size: 40px;}
	.strictire-section .inner .midashi p {font-size: 20px;}
}

/**********************************************************************************

.after-box

**********************************************************************************/
.after-box {
	margin-top: 90px;
	padding-left: 30px;
}

.after-box h5 {
	font-size: 18px;
	line-height: 1.5em;
	margin-bottom: 20px;
}

.after-box ul {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	flex-wrap: wrap;
}

.after-box ul li {max-width: 344px;}

@media screen and (max-width: 820px) {
	.after-box {padding-left: 0;}
}

@media screen and (max-width: 640px) {
	.after-box {margin-top: 90px;}
}

/**********************************************************************************

.hoshou-box

**********************************************************************************/
.hoshou-box {
	padding: 0 30px;
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.hoshou-box h5 {
	font-size: 18px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.hoshou-box h5::before {
	content: "";
	background-color: var(--red);
	width: 5px;
	height: 20px;
}

.hoshou-box .hoshou-inner {
	background-color: var(--gray3);
	display: flex;
	align-items: center;
}

.hoshou-box .hoshou-inner p {
	padding: 20px;
	line-height: 1.8em;
}

.hoshou-box .hoshou-inner .left {
	border-right: solid 1px #fff;
	flex: 0 0 306px;
}

.hoshou-box .hoshou-inner .right {
	text-align: justify;
	flex: 1;
}

@media screen and (max-width: 820px) {
	.hoshou-box {padding: 0;}
}

@media screen and (max-width: 640px) {
	.hoshou-box .hoshou-inner {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.hoshou-box .hoshou-inner .left {
		border-right: none;
		border-bottom: solid 1px #fff;
		width: 100%;
	}
	
	.hoshou-box .hoshou-inner .left,.hoshou-box .hoshou-inner .right {flex: 0;}
}

/**********************************************************************************

お客様の声

**********************************************************************************/
/**********************************************************************************

.voice-intro

**********************************************************************************/
.voice-intro .txt-box {
	width: 80%;
	margin: 150px auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
}

.voice-intro .txt-box h3 {max-width: 1020px;}

.voice-intro .txt-box p {
	font-size: 18px;
	line-height: 2.5em;
	text-align: justify;
}

@media screen and (max-width: 640px) {
	.voice-intro .txt-box {width: 90%;}
}

@media screen and (max-width: 640px) {
	.voice-intro .txt-box {margin: 80px auto;}
	
	.voice-intro .txt-box p {
		font-size: 16px;
		line-height: 2em;
	}
}

/**********************************************************************************

.voice-box

**********************************************************************************/
.voice-box .voice-contents {
	width: 90%;
	margin: 150px auto 70px;
}

.voice-box .midashi {
	display: flex;
	align-items: flex-end;
	gap: 30px;
	margin-bottom: 100px;
}

.voice-box .midashi h3 {font-size: 72px;}
.voice-box .midashi h3 span {font-size: 100px;}

.voice-box .midashi p {
	font-size: 30px;
	display: flex;
	align-items: center;
	gap: 30px;
}
.voice-box .midashi p span {
	font-size: 24px;
	padding: 5px 10px;
	border: solid 1px;
}

.voice-box .img-box {
	position: relative;
	margin-bottom: 80px;
}

.voice-box .img-box .kazari {
	width: 186px;
	position: absolute;
	animation: spin-right 40s linear infinite;
}

.voice-box .img-box .kazari01 {
	top: 23%;
	right: -5%;
}

.voice-box .img-box .kazari02 {
	left: 30%;
	bottom: 14%;
}

.voice-box .d-f .inner-midashi {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 30px;
}

.voice-box .d-f .inner-midashi h4 {font-size: 48px;}
.voice-box .d-f .inner-midashi img {width: 66px;}

.voice-box .dear .inner-box {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

.voice-box .dear .inner-box p {
	flex: 1;
	line-height: 1.8em;
	text-align: justify;
}

.voice-box .dear .inner-box .img-wrap {flex: 0 0 40%;}

.voice-box .from-wrap {background-color: var(--gray3);}

.voice-box .from {
	width: 90%;
	margin: 0 auto;
	padding: 40px 0 60px;
}

.voice-box .from ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.voice-box .from ul li {
	padding-right: 30px;
	border-right: solid 1px;
}

.voice-box .from ul li:last-child {
	padding-right: 0;
	border-right: none;
}

.voice-box .from ul li h5 {
	font-size: 24px;
	line-height: 1.3em;
	margin-bottom: 20px;
}

.voice-box .from ul li p {
	line-height: 1.8em;
	text-align: justify;
}

@media screen and (max-width: 1280px) {
	.voice-box .img-box .kazari {width: 150px;}
	.voice-box .dear .inner-box .img-wrap {flex: 1;}
}

@media screen and (max-width: 1024px) {
	.voice-box .img-box .kazari01 {
		top: 18%;
		right: 3%;
	}

	.voice-box .img-box .kazari02 {
		left: 26%;
		bottom: 11%;
	}
}

@media screen and (max-width: 820px) {
	.voice-box .midashi {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.voice-box .midashi h3 {font-size: 60px;}
	.voice-box .midashi h3 span {font-size: 80px;}
	.voice-box .img-box .kazari {width: 100px;}
	
	.voice-box .from ul {grid-template-columns: repeat(1, 1fr);}

	.voice-box .from ul li {
		padding-right: 0;
		border-right: none;
		padding-bottom: 30px;
		border-bottom: solid 1px;
	}

	.voice-box .from ul li:last-child {
		padding-bottom: 0;
		border-bottom: none;
	}
}

@media screen and (max-width: 640px) {
	.voice-box .voice-contents {margin: 80px auto 50px;}
	.voice-box .midashi {margin-bottom: 60px;}
	.voice-box .midashi h3 {font-size: 40px;}
	.voice-box .midashi h3 span {font-size: 60px;}	
	.voice-box .midashi p {
		font-size: 24px;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.voice-box .midashi p span {font-size: 20px;}
	.voice-box .img-box {margin-bottom: 60px;}
	.voice-box .img-box .kazari {width: 80px;}
	.voice-box .img-box .kazari01 {
		top: 8%;
		right: 2%;
	}

	.voice-box .img-box .kazari02 {
		left: 20%;
		bottom: 9%;
	}
	
	.voice-box .d-f .inner-midashi h4 {font-size: 36px;}
	.voice-box .d-f .inner-midashi img {width: 50px;}
	.voice-box .dear .inner-box {flex-direction: column;}
	.voice-box .dear .inner-box p,.voice-box .dear .inner-box .img-wrap {flex: 0;}
	.voice-box .dear .inner-box .img-wrap {width: 100%;}
	.voice-box .from {padding: 40px 0;}
	.voice-box .from ul li h5 {
		font-size: 22px;
		margin-bottom: 10px;
	}
}

/**********************************************************************************

.voice-workslink

**********************************************************************************/
.voice-workslink {
	width: 90%;
	margin: 150px auto 0;
}

.voice-workslink .head-box {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 50px;
}

.voice-workslink .head-box .midashi {
	display: flex;
	align-items: flex-end;
	gap: 10px 30px;
}

.voice-workslink .head-box .midashi h3 {font-size: 48px;}
.voice-workslink .head-box .midashi h3 span {font-size: 72px;}
.voice-workslink .head-box .midashi p {font-size: 24px;}

.voice-workslink ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 60px 20px;
}

/* デフォルト（〜1599px）：6件表示 */
.works-list > li:nth-child(n+7) {
	display: none;
}

/* 1600px以上：8件表示 */
@media screen and (min-width: 1600px) {
	.works-list > li:nth-child(n+7) {
		display: list-item;
	}
}

.voice-workslink ul li .img-box {
	overflow: hidden;
	aspect-ratio: 3 / 2;
	margin-bottom: 25px;
}

.voice-workslink ul li .img-box img {
	height: 100%;
	object-fit: cover;
}

.voice-workslink ul li .meta {margin-bottom: 10px;}
.voice-workslink ul li p {line-height: 1.8em;}

.voice-workslink .btn.sp {display: none;}

@media screen and (max-width: 1600px) {
	.voice-workslink ul {grid-template-columns: repeat(3, 1fr);}
}

@media screen and (max-width: 820px) {
	.voice-workslink .head-box .midashi {
		flex-direction: column;
		align-items: flex-start;
		
	}
	
	.voice-workslink .head-box .midashi h3 {font-size: 40px;}
	.voice-workslink .head-box .midashi h3 span {font-size: 60px;}
	.voice-workslink .head-box .midashi p {font-size: 22px;}
	
	.voice-workslink .btn.pc {display: none;}
	.voice-workslink .btn.sp {
		display: block;
		margin: 30px 0 0 auto;
		width: fit-content;
	}
}

@media screen and (max-width: 640px) {
	.voice-workslink {margin: 80px auto 0;}
	.voice-workslink .head-box .midashi h3 {font-size: 30px;}
	.voice-workslink .head-box .midashi h3 span {font-size: 40px;}
	.voice-workslink .head-box .midashi p {font-size: 20px;}
	.voice-workslink ul {grid-template-columns: repeat(1, 1fr);}
}

/**********************************************************************************

会社情報

**********************************************************************************/
/**********************************************************************************

.company-info

**********************************************************************************/
.company-info table {
	border-collapse: collapse;
	width: 100%;
}

.company-info table tr th,.company-info table tr td {
	padding: 15px 20px;
	border-top: solid 1px;
	line-height: 1.8em;
}

.company-info table tr th {white-space: nowrap;}
.company-info table tr td {text-align: justify;}
.company-info table tr:last-child th,.company-info table tr:last-child td {border-bottom: solid 1px;}


@media screen and (max-width: 640px) {
	.company-info table tr th,.company-info table tr td {padding: 10px;}
}

/**********************************************************************************

.company-concept

**********************************************************************************/
.company-concept h4 {
	font-size: 24px;
	line-height: 1.8em;
	margin-bottom: 50px;
}

.company-concept table {border-collapse: collapse;}

.company-concept table tr th {
	padding: 0 50px 30px 0;
	display: flex;
	align-items: flex-end;
	gap: 5px;
	white-space: nowrap;
	font-weight: 400;
}

.company-concept table tr th h5 {
	font-size: 24px;
	width: 100px;
}

.company-concept table tr td {
	padding-bottom: 30px;
	line-height: 1.8em;
	text-align: justify;
}

.company-concept table tr:last-child th,.company-concept table tr:last-child td {padding-bottom: 0;}

@media screen and (max-width: 640px) {
	.company-concept table tr {display: block;}
	.company-concept table tr th {padding: 0 0 20px 0;}
	.company-concept table tr:last-child th {padding-bottom: 20px;}
}

/**********************************************************************************

.company-access

**********************************************************************************/
.company-access .map-wrap {
	width: 100%;
	aspect-ratio: 2.5 / 1;
	margin-bottom: 30px;
}

.company-access .map-wrap iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.company-access ul {padding: 0 20px;}

.company-access ul li {
	display: flex;
	align-items: center;
	gap: 15px;
}

.company-access ul li:first-child {margin-bottom: 25px;}
.company-access ul li img {width: 20px;}
.company-access ul li p {line-height: 1.5em;}

/**********************************************************************************

.company-office

**********************************************************************************/
.company-office .photo01 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.company-office .photo01 li {
	overflow: hidden;
	aspect-ratio: 45 / 26;
}

.company-office .photo02 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.company-office .photo02 li {
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.company-office .photo01 li img,.company-office .photo02 li img {
	display: block;
	height: 100%;
	object-fit: cover;
}

.company-office .office-info li {
	display: flex;
	align-items: flex-start;
	gap: 30px 0;
	margin-top: 30px;
}

.company-office .office-info li .txt-box {
	padding: 0 20px;
	flex: 1;
}

.company-office .office-info li .txt-box .midashi-box {
	display: flex;
	gap: 10px;
}

.company-office .office-info li:first-child .txt-box .midashi-box {align-items: flex-start;}
.company-office .office-info li:nth-child(2) .txt-box .midashi-box {align-items: center;}
.company-office .office-info li .txt-box .midashi-box img {width: 20px;}
.company-office .office-info li .txt-box .midashi-box p {line-height: 1.8em;}
.company-office .office-info li:first-child .txt-box .midashi-box p {margin-top: -5px;}

.company-office .office-info li .txt-box .txt {
	line-height: 1.8em;
	margin-top: 15px;
}

.company-office .office-info li .image {flex: 0 0 500px;}

@media screen and (max-width: 1800px) {
	.company-office .office-info li .image {flex: 0 0 400px;}
}

@media screen and (max-width: 1280px) {
	.company-office .office-info li .image {flex: 0 0 280px;}
}

@media screen and (max-width: 640px) {
	.company-office .photo01 {grid-template-columns: repeat(1, 1fr);}
	.company-office .photo02 {grid-template-columns: repeat(2, 1fr);}
	.company-office .office-info li {flex-direction: column;}
	.company-office .office-info li .txt-box,.company-office .office-info li .image {flex: 0;}
}

/**********************************************************************************

.company-licenses

**********************************************************************************/
.company-licenses .licenses-wrap {
	display: flex;
	align-items: flex-start;
	gap: 10px 40px;
	flex-wrap: wrap;
}

.company-licenses .licenses-wrap ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.company-licenses .licenses-wrap ul li {line-height: 1.5em;}

/**********************************************************************************

スタッフ紹介

**********************************************************************************/
/**********************************************************************************

.team-kp-head

**********************************************************************************/
.team-kp-head {
	width: 80%;
	margin: 280px auto 120px;
	position: relative;
}

.team-kp-head h2 {position: relative;}

.team-kp-head h2 .set {
	position: absolute;
	inset: 0;
}

.team-kp-head .midashi {
	position: absolute;
	left: 4%;
	bottom: 20%;
}

.team-kp-head .midashi h3 {
	font-size: 24px;
	line-height: 1.5em;
	margin-bottom: 15px;
}

.team-kp-head .midashi p {line-height: 2em;}

@media screen and (max-width: 1280px) {
	.team-kp-head {width: 90%;}
}

@media screen and (max-width: 1024px) {
	.team-kp-head .midashi h3 .sp {display: block;}
	.team-kp-head .midashi {bottom: 16%;}
}

@media screen and (max-width: 820px) {
	.team-kp-head .midashi p .sp {display: block;}
	.team-kp-head .midashi {
		left: 2%;
		bottom: 0;
	}
}

@media screen and (max-width: 640px) {
	.team-kp-head {margin: 60px auto;}
	.team-kp-head .midashi {
		position: static;
	}
	.team-kp-head .midashi h3 {font-size: 22px;}
	.team-kp-head .midashi p {line-height: 1.8em;}
}

/**********************************************************************************

.team-kp-ceo

**********************************************************************************/
.team-kp-ceo {
	width: 80%;
	margin: 150px auto 180px;
}

.team-kp-ceo .midashi {margin-bottom: 40px;}

.team-kp-ceo .midashi p {
	font-size: 18px;
	margin-bottom: 5px;
}

.team-kp-ceo .midashi h3 {font-size: 48px;}

.team-kp-ceo .box {
	display: flex;
	align-items: flex-start;
	gap: 40px 50px;
}

.team-kp-ceo .box p {
	flex: 1;
	line-height: 1.8em;
}

.team-kp-ceo .box .img-box {
	flex: 0 0 40%;
	position: relative;
}

.team-kp-ceo .kazari {
	width: 250px;
	position: absolute;
	right: -10%;
	bottom: -16%;
	animation: spin-right 40s linear infinite;
}

@media screen and (max-width: 1280px) {
	.team-kp-ceo {width: 90%;}
}

@media screen and (max-width: 1024px) {
	.team-kp-ceo .kazari {
		width: 180px;
		right: 10%;
		bottom: -22%;
	}
}

@media screen and (max-width: 640px) {
	.team-kp-ceo {margin: 80px auto 100px;}
	.team-kp-ceo .midashi h3 {font-size: 36px;}
	.team-kp-ceo .box {flex-direction: column;}
	.team-kp-ceo .box p {
		flex: 0;
		order: 2;
	}
	.team-kp-ceo .box .img-box {
		flex: 0;
		width: 70%;
		margin: 0 0 0 auto;
		order: 1;
	}
	.team-kp-ceo .kazari {
		width: 150px;
		left: -30%;
		bottom: 20%;
	}
}

@media screen and (max-width: 430px) {
	.team-kp-ceo .kazari {
		width: 120px;
		left: -40%;
		bottom: 20%;
	}
}

/**********************************************************************************

.team-kp-staff

**********************************************************************************/
.team-kp-staff {
	width: 95%;
	margin: 0 auto 200px;
}

.team-kp-staff .inner {padding: 80px 10% 120px;}

.team-kp-staff .inner h3 {
	font-size: 150px;
	margin-bottom: 80px;
	text-align: center;
}

.team-kp-staff .staff-list {
	display: flex;
	flex-direction: column;
	gap: 140px;
}

.team-kp-staff .staff-list .list-box {
	display: flex;
	align-items: center;
	gap: 50px 60px;
}

.team-kp-staff .staff-list .list-box .img-box {
	flex: 0 0 20%;
	position: relative;
	text-align: center;
}

.team-kp-staff .staff-list .list-box .img-box .set {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
}

.team-kp-staff .staff-list .list-box .img-box .btn {
	display: flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	margin: 60px auto 0;
}

.team-kp-staff .staff-list .list-box .img-box .btn p {
	width: 16px;
	margin-top: 2px;
}

.team-kp-staff .staff-list .list-box .contents-box {flex: 1;}

.team-kp-staff .staff-list .list-box .contents-box .name-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 50px;
}

.team-kp-staff .staff-list .list-box .contents-box .name-box h4 {
	font-size: 30px;
	margin-top: 10px;
}

.team-kp-staff .staff-list .list-box .contents-box .name-box h4 span {font-size: 18px;}

.team-kp-staff .staff-list .list-box .contents-box .name-box .name {font-size: 72px;}
.team-kp-staff .staff-list .list-box .contents-box .name-box .name.staff01 {color: rgba(179, 30, 35, 0.5);}
.team-kp-staff .staff-list .list-box .contents-box .name-box .name.staff02 {color: rgba(30, 72, 179, 0.5);}
.team-kp-staff .staff-list .list-box .contents-box .name-box .name.staff03 {color: rgba(181, 180, 180, 0.5);}
.team-kp-staff .staff-list .list-box .contents-box .name-box .name.staff04 {color: rgba(0, 0, 0, 0.5);}
.team-kp-staff .staff-list .list-box .contents-box .name-box .name.staff05 {color: rgba(35, 114, 10, 0.5);}

.team-kp-staff .staff-list .list-box .contents-box .profile {
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.team-kp-staff .staff-list .list-box .contents-box .profile .line-midashi {
	font-size: 16px;
	margin-bottom: 20px;
}

.team-kp-staff .staff-list .list-box .contents-box .profile p {
	line-height: 1.8em;
	text-align: justify;
}

.team-kp-staff .staff-list .list-box .contents-box .profile ul {
	display: grid;
	grid-template-columns: repeat(2, auto);
	gap: 15px 20px;
	width: fit-content;
}

.team-kp-staff .staff-list .list-box .contents-box .profile ul li {
	display: flex;
	align-items: center;
	gap: 15px;
}

.team-kp-staff .staff-list .list-box .contents-box .profile ul li .icon {width: 60px;}

@media screen and (max-width: 1280px) {
	.team-kp-staff {width: 90%;}
	.team-kp-staff .inner {padding: 80px 5% 120px;}
	.team-kp-staff .inner h3 {font-size: 120px;}
}

@media screen and (max-width: 820px) {
	.team-kp-staff .inner h3 {font-size: 80px;}
	.team-kp-staff .staff-list .list-box {flex-direction: column;}
	.team-kp-staff .staff-list .list-box .img-box {
		flex: 0;
		order: 1;
	}
	
	.team-kp-staff .staff-list .list-box .img-box .photo {
		width: 55%;
		max-width: 400px;
	}
	
	.team-kp-staff .staff-list .list-box .img-box .btn {margin: 30px auto 0;}
	
	.team-kp-staff .staff-list .list-box .contents-box {
		flex: 0;
		order: 2;
	}
	
	.team-kp-staff .staff-list .list-box .contents-box .name-box .name {font-size: 60px;}
}

@media screen and (max-width: 640px) {
	.team-kp-staff {margin: 0 auto 100px;}
	.team-kp-staff .inner {padding: 50px 5%;}
	.team-kp-staff .inner h3 {
		font-size: 60px;
		margin-bottom: 60px;
	}

	.team-kp-staff .staff-list {gap: 80px;}
	
	.team-kp-staff .staff-list .list-box .contents-box .name-box {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	
	.team-kp-staff .staff-list .list-box .contents-box .name-box .name {
		font-size: 40px;
		margin: 0 0 0 auto;
	}
	
	.team-kp-staff .staff-list .list-box .contents-box .profile ul {grid-template-columns: repeat(1, auto);}
}

/**********************************************************************************

.team-kp-carpenter

**********************************************************************************/
.team-kp-carpenter {margin-bottom: 150px;}

.team-kp-carpenter .midashi {
	width: 80%;
	margin: 0 auto 100px;
	text-align: center;
}

.team-kp-carpenter .midashi .h3-box {
	position: relative;
	display: inline-block;
}

.team-kp-carpenter .midashi .h3-box img {
	width: 170px;
	position: absolute;
	right: 0;
	bottom: 20px;
	transform: translateX(60%);
	z-index: 0;
}

.team-kp-carpenter .midashi h3 {
	font-size: 150px;
	display: inline-block;
	position: relative;
	z-index: 1;
}

.team-kp-carpenter .midashi .txt-box {
	display: flex;
	align-items: center;
	gap: 40px 60px;
	margin-top: 50px;
}

.team-kp-carpenter .midashi .txt-box .img-box {flex: 0 0 25%;}

.team-kp-carpenter .midashi .txt-box p {
	flex: 1;
	line-height: 1.8em;
	text-align: justify;
}

.team-kp-carpenter .box {
	width: 90%;
	margin: 0 auto;
}

.team-kp-carpenter .box h4 {
	font-size: 36px;
	line-height: 1.5em;
	text-align: center;
	margin-bottom: 40px;
}

.team-kp-carpenter .box ul {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}

@media screen and (max-width: 1280px) {
	.team-kp-carpenter .midashi {width: 90%;}
	.team-kp-carpenter .midashi .h3-box img {width: 150px;}
	.team-kp-carpenter .midashi h3 {font-size: 120px;}
}

@media screen and (max-width: 1024px) {
	.team-kp-carpenter .midashi .h3-box img {width: 120px;}
	.team-kp-carpenter .midashi h3 {font-size: 100px;}
}

@media screen and (max-width: 820px) {
	.team-kp-carpenter .midashi .h3-box img {width: 100px;}
	.team-kp-carpenter .midashi h3 {font-size: 80px;}
	.team-kp-carpenter .midashi .txt-box {flex-direction: column;}
	.team-kp-carpenter .midashi .txt-box .img-box {
		flex: 0;
		width: 60%;
		max-width: 300px;
	}
	.team-kp-carpenter .midashi .txt-box p {flex: 0;}
	.team-kp-carpenter .box h4 {font-size: 30px;}
	.team-kp-carpenter .box ul {grid-template-columns: repeat(3, 1fr);}
}

@media screen and (max-width: 640px) {
	.team-kp-carpenter {margin-bottom: 80px;}
	.team-kp-carpenter .midashi {margin: 0 auto 80px;}
	.team-kp-carpenter .midashi .h3-box img {width: 60px;}
	.team-kp-carpenter .midashi h3 {font-size: 50px;}
	.team-kp-carpenter .box h4 {font-size: 24px;}
}

/**********************************************************************************

.team-kp-chairman

**********************************************************************************/
.team-kp-chairman {
	width: 90%;
	margin: 0 auto;
}

.team-kp-chairman h3 {
	font-size: 72px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-bottom: 100px;
}

.team-kp-chairman h3::before,
.team-kp-chairman h3::after {
	content: "";
	flex: 1;
	height: 1px;
	background-color: var(--brown);
}

.team-kp-chairman .box {
	display: flex;
	align-items: center;
	gap: 40px 60px;
}

.team-kp-chairman .box .img-box {
	flex: 0 0 20%;
	position: relative;
}

.team-kp-chairman .box .img-box .set {
	position: absolute;
	inset: 0;
}

.team-kp-chairman .box .contents-box {flex: 1;}

.team-kp-chairman .box .contents-box .name-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 50px;
}

.team-kp-chairman .box .contents-box .name-box h4 {
	font-size: 30px;
	margin-top: 10px;
}

.team-kp-chairman .box .contents-box .name-box h4 span {font-size: 18px;}

.team-kp-chairman .box .contents-box .name-box .name {
	font-size: 72px;
	color: rgba(0, 0, 0, 0.5);
}

.team-kp-chairman .box .contents-box .profile {
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.team-kp-chairman .box .contents-box .profile .line-midashi {
	font-size: 16px;
	margin-bottom: 20px;
}

.team-kp-chairman .box .contents-box .profile p {
	line-height: 1.8em;
	text-align: justify;
}

.team-kp-chairman .box .contents-box .profile ul {
	display: grid;
	grid-template-columns: repeat(2, auto);
	gap: 15px 20px;
	width: fit-content;
}

.team-kp-chairman .box .contents-box .profile ul li {
	display: flex;
	align-items: center;
	gap: 15px;
}

.team-kp-chairman .box .contents-box .profile ul li .icon {width: 60px;}

@media screen and (max-width: 1280px) {
	.team-kp-chairman h3 {font-size: 60px;}
}

@media screen and (max-width: 820px) {
	.team-kp-chairman h3 {font-size: 50px;}
	.team-kp-chairman .box {flex-direction: column;}
	.team-kp-chairman .box .img-box {
		flex: 0;
		width: 45%;
		max-width: 280px;
	}
	
	.team-kp-chairman .box .contents-box {flex: 0;}
	
	.team-kp-chairman .box .contents-box .name-box .name {font-size: 60px;}
}

@media screen and (max-width: 640px) {
	.team-kp-chairman h3 {
		font-size: 40px;
		margin-bottom: 60px;
	}
	
	.team-kp-chairman .box .contents-box .name-box {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	
	.team-kp-chairman .box .contents-box .name-box .name {
		font-size: 40px;
		margin: 0 0 0 auto;
	}
	
	.team-kp-chairman .box .contents-box .profile ul {grid-template-columns: repeat(1, auto);}
}

/**********************************************************************************

セカンドオピニオン

**********************************************************************************/
/**********************************************************************************

.housedesign-lab-head

**********************************************************************************/
.housedesign-lab-head {
	position: relative;
	margin-bottom: 140px;
}

.housedesign-lab-head video {width: 100%;}

.housedesign-lab-head .txt-box {
	color: #fff;
	text-align: center;
	mix-blend-mode: difference;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	margin: 0 auto;
}

.housedesign-lab-head .txt-box h2 {
	font-size: 120px;
	margin-bottom: 10px;
}
.housedesign-lab-head .txt-box p {font-size: 27px;}

.housedesign-lab-head .line {
	width: 1px;
	height: 160px;
	background-color: #fff;
	mix-blend-mode: difference;
	position: absolute;	
	left: 0;
	right: 0;
	bottom: -80px;
	margin: 0 auto;
}

@media screen and (max-width: 1280px) {
	.housedesign-lab-head .txt-box h2 {font-size: 90px;}
}

@media screen and (max-width: 820px) {
	.housedesign-lab-head .txt-box h2 {font-size: 60px;}
	.housedesign-lab-head .txt-box p {font-size: 24px;}
	.housedesign-lab-head .line {
		height: 120px;
		bottom: -60px;
	}
}

@media screen and (max-width: 640px) {
	.housedesign-lab-head {
		margin-bottom: 80px;
		aspect-ratio: 4 / 3;
	}
	.housedesign-lab-head video {
		height: 100%;
		object-fit: cover;
	}
	.housedesign-lab-head .txt-box h2 {font-size: 40px;}
	.housedesign-lab-head .txt-box p {font-size: 18px;}
	.housedesign-lab-head .line {
		height: 80px;
		bottom: -40px;
	}
}

@media screen and (max-width: 414px) {
	.housedesign-lab-head .txt-box h2 {font-size: 36px;}
}

/**********************************************************************************

.housedesign-lab-menu

**********************************************************************************/
.housedesign-lab-menu  {
	background-image: image-set(
		url("images/housedesign-lab/menu-bg.webp") type("image/webp"),
		url("images/housedesign-lab/menu-bg.jpg") type("image/jpeg")
	);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.housedesign-lab-menu .box {
	width: 70%;
	margin: 0 auto;
	padding: 150px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 110px;
}

.housedesign-lab-menu .menu-list {
	display: flex;
	align-items: center;
	gap: 60px;
	min-width: 0;
}

.housedesign-lab-menu .contents {flex: 0 0 50%;}

.housedesign-lab-menu .contents .txt-box {
	background-color: #fff;
	padding: 40px 30px 70px;
}

.housedesign-lab-menu .contents .txt-box h5 {
	font-size: 18px;
	margin-bottom: 10px;
}

.housedesign-lab-menu .contents .txt-box h4 {
	font-size: 30px;
	line-height: 1.3em;
	margin-bottom: 20px;
}

.housedesign-lab-menu .contents .txt-box .cat {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin-bottom: 20px;
}

.housedesign-lab-menu .contents .txt-box .cat li {
	font-size: 18px;
	color: #fff;
	background-color: var(--brown);
	padding: 5px 10px;
}

.housedesign-lab-menu .contents .txt-box p {
	line-height: 1.8em;
	text-align: justify;
	margin-bottom: 60px;
}

.housedesign-lab-menu .contents .txt-box .link {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}

.housedesign-lab-menu .contents .txt-box .link .btn {padding: 5px 20px;}

.housedesign-lab-menu .fukidashi {
	flex: 1 1 0;
	min-width: 0;
	color: #fff;
}

.housedesign-lab-menu .fukidashi h3 {
	font-size: 60px;
	position: relative;
	margin-bottom: 70px;
}

.housedesign-lab-menu .menu-list:nth-child(even) .fukidashi h3 {text-align: right;}

.housedesign-lab-menu .fukidashi h3::before {
	content: "";
	background-color: var(--red);
	display: block;
	width: 86px;
	height: 1px;
	position: absolute;
	top: 57%;
	left: -110px;
}

.housedesign-lab-menu .menu-list:nth-child(even) .fukidashi h3::before {
	left: auto;
	right: -110px;
}

@media screen and (max-width: 1280px) {
	.housedesign-lab-menu .box {width: 90%;}
}

@media screen and (max-width: 640px) {
	.housedesign-lab-menu .box {
		padding: 80px 0;
		gap: 80px;
	}
	.housedesign-lab-menu .menu-list {
		flex-direction: column;
		gap: 40px;
	}
	
	.housedesign-lab-menu .contents {order: 2;}
	.housedesign-lab-menu .contents .txt-box h4 {font-size: 24px;}
	.housedesign-lab-menu .contents .txt-box .cat li {font-size: 16px;}
	
	.housedesign-lab-menu .fukidashi {order: 1;}
	.housedesign-lab-menu .fukidashi h3 {
		font-size: 50px;
		margin-bottom: 40px;
	}
	.housedesign-lab-menu .menu-list:nth-child(even) .fukidashi h3 {text-align: left;}
	.housedesign-lab-menu .fukidashi h3::before {content: none;}
}

/**********************************************************************************

.housedesign-lab-contents

**********************************************************************************/
.housedesign-lab-contents {
	padding: 150px 5%;
	border-top: solid 1px;
}

.housedesign-lab-contents.lab-contents-menu01 {border-top: none;}

.housedesign-lab-contents h3 {
	font-size: 48px;
	margin-bottom: 100px;
	text-align: center;
}

.housedesign-lab-contents .intro {
	display: flex;
	align-items: flex-start;
	gap: 40px 60px;
	margin-bottom: 100px;
}

.housedesign-lab-contents .intro .img-box {
	flex: 0 0 30%;
	position: relative;
}

.housedesign-lab-contents .intro .img-box .kazari {
	width: 220px;
	animation: spin-right 40s linear infinite;
	position: absolute;
	left: -3%;
	bottom: -55%;
}

.housedesign-lab-contents.lab-contents-menu01 .intro .img-box .kazari {
	top: -50%;
	left: -10%;
	bottom: auto;
}

.housedesign-lab-contents .intro .txt-box {flex: 1;}

.housedesign-lab-contents .intro .txt-box h4 {
	font-size: 60px;
	margin-bottom: 20px;
}

.housedesign-lab-contents .intro .txt-box p {
	line-height: 1.8em;
	text-align: justify;
}

.housedesign-lab-contents .intro .txt-box p span {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.housedesign-lab-contents .menu-box {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.housedesign-lab-contents .menu-box .menu-list {
	padding: 40px 20px 0;
	border-top: solid 1px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px 40px;
}

.housedesign-lab-contents .menu-box .menu-list .midashi {flex: 1;}

.housedesign-lab-contents .menu-box .menu-list .midashi h5 {
	font-size: 30px;
	margin-bottom: 10px;
}

.housedesign-lab-contents .menu-box .menu-list .midashi p {font-size: 18px;}
.housedesign-lab-contents .menu-box .menu-list .list {flex: 0 0 40%;}

.housedesign-lab-contents .menu-box .menu-list .list .read {
	line-height: 1.8em;
	margin-bottom: 10px;
}

.housedesign-lab-contents .menu-box .menu-list ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.housedesign-lab-contents .menu-box .menu-list ul li {
	line-height: 1.8em;
	position: relative;
	padding-left: 1em;
}

.housedesign-lab-contents .menu-box .menu-list ul li::before {
	content: "";
	position: absolute;
	top: 0.8em;
	left: 0;
	width: 0.4em;
	height: 0.4em;
	background-color: var(--red);
	border-radius: 50%;
}

.housedesign-lab-contents .menu-box .menu-list ul li .note {
	display: grid;
	grid-template-columns: 1.5em 1fr;
	align-items: start;
	line-height: 1.8;
}

.housedesign-lab-contents .menu-box .menu-list ul li .note-mark,
.housedesign-lab-contents .menu-box .menu-list ul li .note-text {
	display: block;
	min-width: 0;
}

.housedesign-lab-contents .menu-box .menu-list ul li .note-text {margin-left: -5px;}

.housedesign-lab-contents .menu-box .menu-list ul li .small {font-size: 14px;}

@media screen and (max-width: 1280px) {
	.housedesign-lab-contents .intro .txt-box h4 {font-size: 50px;}
	
	.housedesign-lab-contents .intro .img-box .kazari {
		width: 180px;
		left: -3%;
		bottom: -55%;
	}

	.housedesign-lab-contents.lab-contents-menu01 .intro .img-box .kazari {
		top: -50%;
		left: -15%;
	}
	
	.housedesign-lab-contents .menu-box .menu-list .list {flex: 0 0 60%;}
}

@media screen and (max-width: 1024px) {
	.housedesign-lab-contents .intro {flex-direction: column;}
	.housedesign-lab-contents .intro .img-box {
		flex: 0;
		width: 100%;
		max-width: 600px;
		margin: 0 auto;
		order: 2;
	}
	
	.housedesign-lab-contents .intro .txt-box {
		flex: 0;
		order: 1;
	}
	
	.housedesign-lab-contents .intro .img-box .kazari {
		position: static;
		margin-top: -10%;
		margin-left: 5%;
	}
}

@media screen and (max-width: 640px) {
	.housedesign-lab-contents {padding: 80px 5%;}
	
	.housedesign-lab-contents h3 {
		font-size: 36px;
		margin-bottom: 60px;
	}
	
	.housedesign-lab-contents .intro {margin-bottom: 60px;}
	.housedesign-lab-contents .intro .txt-box h4 {font-size: 30px;}
	.housedesign-lab-contents .intro .img-box .kazari {width: 130px;}
	.housedesign-lab-contents .menu-box {gap: 30px;}
	.housedesign-lab-contents .menu-box .menu-list {
		flex-direction: column;
		padding: 30px 0 0;
	}
	.housedesign-lab-contents .menu-box .menu-list .midashi,.housedesign-lab-contents .menu-box .menu-list .list {flex: 0;}
}

/**********************************************************************************

.housedesign-lab-review

**********************************************************************************/
.housedesign-lab-review {
	width: 90%;
	margin: 100px auto 150px;
	text-align: center;
}

.housedesign-lab-review .midashi {margin-bottom: 80px;}

.housedesign-lab-review .midashi h3 {
	font-size: 72px;
	margin-bottom: 30px;
}

.housedesign-lab-review .midashi p {
	font-size: 18px;
	line-height: 1.5em;
}

.housedesign-lab-review ul {
	display: flex;
	flex-direction: column;
	gap: 50px;
	margin-bottom: 60px;
}

.housedesign-lab-review ul li {
	display: flex;
	align-items: flex-start;
	gap: 30px;
}

.housedesign-lab-review ul li .icon {flex: 0 0 100px;}

.housedesign-lab-review ul li .txt-box {
	flex: 1;
	text-align: justify;
	padding-bottom: 50px;
	border-bottom: solid 1px;
	position: relative;
}

.housedesign-lab-review ul li .txt-box h4 {
	font-size: 20px;
	line-height: 1.5em;
	margin-bottom: 20px;
}

.housedesign-lab-review ul li .txt-box p {line-height: 1.8em;}

.housedesign-lab-review ul li:nth-child(2) .txt-box::after {content: none;}

.housedesign-lab-review ul li .txt-box.is-open::after {
	opacity: 0;
	pointer-events: none;
}

.housedesign-lab-review ul li .btn {
	position: relative;
	z-index: 2;
	display: block;
	width: fit-content;
	margin: 30px auto 0;
}

.housedesign-lab-review ul li .btn.sp {display: none!important;}

.housedesign-lab-review .btn,.housedesign-lab-review .btn:hover {transition: 0.5s;}

@media screen and (max-width: 640px) {
	.housedesign-lab-review {margin: 80px auto;}
	.housedesign-lab-review .midashi {margin-bottom: 60px;}
	.housedesign-lab-review .midashi h3 {font-size: 50px;}
	.housedesign-lab-review ul {gap: 30px;}
	.housedesign-lab-review ul li {gap: 20px;}
	.housedesign-lab-review ul li .icon {flex: 0 0 50px;}
	.housedesign-lab-review ul li .txt-box {padding-bottom: 30px;}
	.housedesign-lab-review ul li .txt-box::after {height: 200px;}
	.housedesign-lab-review ul li .txt-box p {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		position: relative;
	}

	.housedesign-lab-review ul li .txt-box::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 200px;
		background: linear-gradient(
			to bottom,
			rgba(255,255,255,0) 0%,
			rgba(255,255,255,0.9) 40%,
			rgba(255,255,255,1) 70%
		);
		pointer-events: none;
	}
}

@media screen and (max-width: 611px) {
	.housedesign-lab-review ul li .btn.sp {display: block!important;}
	.housedesign-lab-review ul li:nth-child(2) .txt-box::after {content: "";}
}

/**********************************************************************************

.housedesign-lab-youtube

**********************************************************************************/
.housedesign-lab-youtube {
	width: 90%;
	margin: 100px auto 150px;
	text-align: center;
}

.housedesign-lab-youtube .midashi {margin-bottom: 80px;}

.housedesign-lab-youtube .midashi h3 {
	font-size: 72px;
	margin-bottom: 30px;
}

.housedesign-lab-youtube .midashi p {
	font-size: 18px;
	line-height: 1.5em;
}

.housedesign-lab-youtube ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px 20px;
	margin-bottom: 60px;
}

.housedesign-lab-youtube ul h4 {
	line-height: 1.8em;
	padding: 20px 0;
	border-bottom: solid 1px;
	text-align: justify;
}

.housedesign-lab-youtube .link p {margin-bottom: 20px;}

.housedesign-lab-youtube .link div {
	padding: 10px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	width: fit-content;
	color: #fff;
	margin: 0 auto;
}

.housedesign-lab-youtube .link div img {width: 26px;}

.housedesign-lab-youtube .link div h4 {line-height: 1.5em;}

@media screen and (max-width: 640px) {
	.housedesign-lab-youtube {margin: 80px auto;}
	.housedesign-lab-youtube .midashi {margin-bottom: 60px;}
	.housedesign-lab-youtube .midashi h3 {font-size: 50px;}
	.housedesign-lab-youtube ul {grid-template-columns: repeat(1, 1fr);}
}

/**********************************************************************************

.housedesign-lab-line

**********************************************************************************/
.housedesign-lab-line {
	width: 90%;
	margin: 100px auto 0;
	text-align: center;
}

.housedesign-lab-line p {
	line-height: 1.8em;
	margin-bottom: 30px;
}

.housedesign-lab-line img {width: 234px;}

@media screen and (max-width: 640px) {
	.housedesign-lab-line {margin: 80px auto 0;}
	.housedesign-lab-line img {width: 200px;}
}

/**********************************************************************************

.housedesign-lab-form

**********************************************************************************/
.housedesign-lab-form {
	width: 70%;
	margin: 150px auto;
}

.housedesign-lab-form .midashi {
	margin-bottom: 80px;
	text-align: center;
}

.housedesign-lab-form .midashi h3 {
	font-size: 72px;
	margin-bottom: 30px;
}

.housedesign-lab-form .midashi p {
	font-size: 18px;
	line-height: 1.5em;
}

@media screen and (max-width: 1280px) {
	.housedesign-lab-form {width: 90%;}
}

@media screen and (max-width: 640px) {
	.housedesign-lab-form {margin: 80px auto;}
	.housedesign-lab-form .midashi {margin-bottom: 60px;}
	.housedesign-lab-form .midashi h3 {font-size: 50px;}
}

/**********************************************************************************

プライバシーポリシー

**********************************************************************************/
/**********************************************************************************

.policy-box

**********************************************************************************/
.policy-box {
	width: 90%;
	margin: 120px auto 0;
	text-align: justify;
}

.policy-box h3 {
	font-size: 24px;
	line-height: 1.8em;
	margin-bottom: 40px;
}

.policy-box .inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.policy-box .inner .list h4 {
	font-size: 18px;
	line-height: 1.8em;
	margin-bottom: 10px;
}

.policy-box .inner .list p {line-height: 1.8em;}

.policy-box .inner .list ul {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 5px;
}

.policy-box .inner .list ul li {
	position: relative;
	padding-left: 1em;
}

.policy-box .inner .list ul li::before {
	content: "・";
	position: absolute;
	left: 0;
	top: 0;
}

.policy-box .inner table {
	border-spacing: 0 4px;
	margin-top: 40px;
}

.policy-box .inner table tr th {
	color: #fff;
	background-color: var(--brown);
	text-align: center;
	padding: 5px 10px;
	white-space: nowrap;
	vertical-align: middle;
}

.policy-box .inner table tr td {
	padding: 5px 0 0 10px;
	line-height: 1.5em;
}

@media screen and (max-width: 640px) {
	.policy-box {margin: 80px auto 0;}
	.policy-box h3 {font-size: 22px;}
}