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

/*
Theme Name: yamaguchi
Author: レオーネクオーリ
Description: 山口工務店　HP用
Version: 1.0
*/

:root {
	--blue: #002a78;
	--blue2: #e5e9f1;
	--blue3: #d8dce4;
	--gray: #d7d7d7;
	--gray2: #aeaeae;
	--gray3: #f5f5f5;
	--gray4: #e5e5e4;
	--gray5: #f8f8f8;
}

.slick-slider,
.slick-slider * {
	min-width: 0;
	min-height: 0;
}

body {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 16px;
	color: var(--blue);
	font-style: normal;
}

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

img {width: 100%;}

pre {white-space: pre-wrap;}

a {transition: 0.5s;}

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

.din {
	font-family: "din-2014","Barlow Condensed",sans-serif;
	font-style: italic;
	letter-spacing: 0.1em;
}

.light {font-weight: 200;}

.normal {font-style: normal;}

.link-arrow {
	display: block;
	width: 60px;
	height: 60px;
	background-color: var(--blue);
	border: solid 1px var(--blue);
	position: relative;
}

.link-arrow svg {
	fill: #fff;
	position: absolute;
	top: 50%;
    left: 0;
	right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	margin: 0 auto;
}

.link-arrow:hover {
	background-color: #fff;
	opacity: 1;
}

.link-arrow:hover svg {fill: var(--blue);}

.tag-line {
	font-size: 18px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: bold;
}

.tag-line::before {
	content: "";
	border-top: solid 1px;
	width: 90px;
}

.view-more {
	display: flex;
	align-items: center;
	gap: 7px;
	position: relative;
	width: fit-content;
	font-weight: bold;
}

.view-more img {width: 12px;}

.view-more::after {
	background-color: var(--blue);
	bottom: -6px;
	content: ""; 
	height: 1px;
	left: 0;
	position: absolute;
	transform: scale(0, 1);
	transform-origin: center top;
	transition: transform .3s;
	width: 100%;
}

.view-more:hover {opacity: 1;}
.view-more:hover::after {transform: scale(1, 1);}

.more-arrow {
	display: flex;
	align-items: center;
	gap: 20px;
	font-weight: bold;
	width: fit-content;
}

.more-arrow span {
	background-color: var(--blue);
	border: solid 1px var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	transition: 0.5s;
}

.more-arrow span svg {
	fill: #fff;
	transition: 0.5s;
}

.more-arrow:hover {opacity: 1;}
.more-arrow:hover span {
	background-color: #fff;
	transition: 0.5s;
}
.more-arrow:hover span svg {
	fill: var(--blue);
	transition: 0.5s;
}

@media screen and (max-width: 640px) {
	.pc {display: none;}
	.sp {display: block;}
	
	body {font-size: 14px;}
	
	.tag-line {font-size: 16px;}
	.tag-line::before {width: 60px;}
}

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

スライドイン

**********************************************************************************/
.slidein-top {
	opacity: 0;
	transform: translateY(-50px);
	transition: all 0.8s ease-out;
}

.slidein-top.inview {
	opacity: 1;
	transform: translateY(0);
}

.slidein-left {
	opacity: 0;
	transform: translateX(-50px);
	transition: all 0.8s ease-out;
}

.slidein-left.inview {
	opacity: 1;
	transform: translateX(0);
}

.slidein-left[data-delay="1"] { transition-delay: .5s; }
.slidein-left[data-delay="2"] { transition-delay: 1s; }

.slidein-bottom {
	opacity: 0;
	transform: translateY(50px);
	transition: all 0.8s ease-out;
}

.slidein-bottom.inview {
	opacity: 1;
	transform: translateX(0);
}

.slidein-bottom[data-delay="1"] { transition-delay: 1.5s; }


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

ローディング

**********************************************************************************/
/* #loading自体は透明にしない（背景は透明に） */
#loading {
	position: fixed;
	inset: 0;
	background: transparent;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	z-index: 9999;
}

/* 白背景レイヤー（フェードさせるのはこれだけ） */
.loading-white {
	position: absolute;
	inset: 0;
	background: #fff;
	transition: opacity 0.8s ease;
	z-index: 1;
}
.loading-white.hide { opacity: 0; }

/* ロゴ（白より上、青より下でもOKだが見せ方次第） */
.loading-logo {
	position: relative;
	transform: translateX(100%);
	opacity: 0;
	transition: transform 0.8s ease, opacity 0.8s ease;
	text-align: center;
	max-width: 230px;
	will-change: transform, opacity;
	z-index: 2;
}

.loading-logo .tag {margin-bottom: 10px;}

.loading-logo.show { transform: translateX(0); opacity: 1; }
.loading-logo.hide { opacity: 0; }

/* 青い背景（不透明のままIN→LEFT OUT） */
.loading-bg {
	position: absolute;
	inset: 0;
	background: var(--blue);
	transform: translateX(100%);
	transition: transform 0.9s ease;
	will-change: transform;
	z-index: 3;
}
.loading-bg.slide-in { transform: translateX(0); }
.loading-bg.slide-out { transform: translateX(-100%); }

/* 最後にだけ全体を隠す（青が画面外へ出た後なのでOK） */
body.loaded #loading {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* スクロールロック */
.loading-lock { overflow: hidden; }


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

header

**********************************************************************************/
html:not(.js-ready) .nav-wrap .nav {
	visibility: hidden !important;
}

.nav-wrap {
	position: relative;
	--trns: 0.35s ease;
}

/* ボタン */
.nav-button {
	position: fixed;
	top: 0;
	right: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	padding: 16px;
	gap: 5px;
	width: 60px;
	height: 60px;
	cursor: pointer;
	background-color: var(--blue);
	z-index: 10;
	transition: 0.5s;
}

/* 丸 */
.nav-button span {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: #fff;
	justify-self: center;
	align-self: center;
	transition: transform var(--trns), opacity 0.25s ease;
}

/* バツボタン */
.nav-button::before,
.nav-button::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 28px;
	height: 1px;
	background-color: #fff;
	transform-origin: center;
	transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
	opacity: 0;
	transition: transform var(--trns), opacity 0.2s ease;
	border-radius: 999px;
}

/* マウス操作の環境だけで :hover を有効にする */
@media (hover: hover) and (pointer: fine) {
	.nav-button:hover {
		background-color:#fff;
		border: solid 1px var(--blue);
		transition: 0.5s;
	}
	.nav-button:hover span {
		background-color: var(--blue);
		transition: 0.5s;
	}
	
	.nav-button:hover::before,.nav-button:hover::after {
		background-color: var(--blue);
		transition: 0.5s;
	}
}

/* 開いたとき */
.nav-button.active span {
	opacity: 0;
	transform: scale(0.5);
}
.nav-button.active::before {
	transform: translate(-50%, -50%) rotate(45deg) scaleX(1);
	opacity: 1;
}
.nav-button.active::after {
	transform: translate(-50%, -50%) rotate(-45deg) scaleX(1);
	opacity: 1;
}

/* ナビ本体 */
.nav-wrap .nav {
	position: fixed;
	top: 0;
	right: 0;
	width: min(650px, 100%);
	height: 100dvh;
	background: var(--blue);
	color: #fff;
	transform: translate3d(100%,0,0); 
	transition: transform .4s ease;
	z-index: 9;
	will-change: transform;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;        
}
.nav-wrap .nav.active {
	transform: translate3d(0,0,0);
}

.nav-wrap .nav .box {
	padding: 90px 40px;
	position: relative;
}

.nav-wrap .nav .box h3 {
	font-size: 30px;
	margin-bottom: 40px;
}

.nav-wrap .nav .box .menu-box01 {
	width: 50%;
	padding-right: 25px;
}

.nav-wrap .nav .box .menu-box02 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 50px;
	margin-bottom: 45px;
}

.nav-wrap .nav .box .menu-list {
	margin-bottom: 55px;
	width: 100%;
}

.nav-wrap .nav .box h4 {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 20px;
}

.nav-wrap .nav .box .inner-link {margin-bottom: 15px;}
.nav-wrap .nav .box .inner-link:last-child {margin-bottom: 0;}

.nav-wrap .nav .box .inner-link a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;
	gap: 20px;
	position: relative;
}

.nav-wrap .nav .box .inner-link a::after {
	background-color: #fff;
	bottom: -5px;
	content: ""; 
	height: 1px;
	left: 0;
	position: absolute;
	transform: scale(0, 1);
	transform-origin: center top;
	transition: transform .3s;
	width: 100%;
}

.nav-wrap .nav .box .inner-link a:hover {opacity: 1;}
.nav-wrap .nav .box .inner-link a:hover::after {transform: scale(1, 1);}

.nav-wrap .nav .box .inner-link a img {width: 12px;}

.nav-wrap .nav .box .sns-box {
	display: flex;
	align-items: center;
	gap: 20px;
}

.nav-wrap .nav .box .sns-box .insta {width: 30px;}
.nav-wrap .nav .box .sns-box .youtube {width: 32px;}

.nav-wrap .nav .box .illust {
	max-width: 145px;
	position: absolute;
	top: 250px;
	right: 0;
}

/* 背景マスク */
.nav-mask {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.3);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--trns);
	height: 100dvh;
}
.nav-mask.active {
	opacity: 1;
	pointer-events: auto;
	z-index: 8;
}

.link-btn-menu {
	position: fixed;
	top: 60px;
	right: 0;
	z-index: 10;
}

.link-btn-menu a div {
	width: 60px;
	height: 60px;
	background-color: var(--blue);
	border-top: solid 1px #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.5s;
}

.nav-button.active ~ .link-btn-menu a div {border-top: solid 1px var(--blue);}

.link-btn-menu a div svg {
	fill: #fff;
	width: 20px;
	transition: 0.5s;
}

.link-btn-menu a:hover {opacity: 1;}

.link-btn-menu a:hover div {
	background-color: #fff;
	border: solid 1px var(--blue);
	transition: 0.5s;
}

.link-btn-menu a:hover div svg {
	fill: var(--blue);
	transition: 0.5s;
}

@media screen and (max-width: 640px) {
	.nav-wrap .nav .box {padding: 60px 20px;}
	
	.nav-wrap .nav .box h3 {
		font-size: 24px;
		margin-bottom: 30px;
	}
	
	.nav-wrap .nav .box {
		font-size: 12px;
		margin-bottom: 15px;
	}
	
	.nav-wrap .nav .box .menu-box01 {padding-right: 14px;}

	.nav-wrap .nav .box .menu-box02 {
		gap: 0 40px;
		margin-bottom: 10px;
	}

	.nav-wrap .nav .box .menu-list {margin-bottom: 40px;}
	.nav-wrap .nav .box .inner-link a {gap: 10px;}
	.nav-wrap .nav .box .inner-link a img {width: 10px;}
	.nav-wrap .nav .box .illust {top: 220px;}
	
	.link-btn-menu {display: none;}
	.nav-button.active ~ .link-btn-menu {display: block;}
}


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

footer

**********************************************************************************/
footer {
	position: relative;
	overflow: hidden;
}

footer video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
	filter: none;
}

footer .contents {
	position: relative;
	z-index: 1;
	color: #fff;
	padding: 60px 0;
	width: 90%;
	max-width: 1280px;
	margin: 0 auto;
}

footer .contents .menu-box {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 55px;
	margin-bottom: 100px;
}

footer .contents .menu-box .menu-list {width: 100%;}

footer .contents .menu-box .menu-list h4 {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 20px;
}

footer .contents .menu-box .menu-list h4.bottom {margin-top: 35px;}

footer .contents .menu-box .menu-list ul li {margin-bottom: 12px;}
footer .contents .menu-box .menu-list ul li:last-child {margin-bottom: 0;}

footer .contents .menu-box .menu-list ul li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	position: relative;
}

footer .contents .menu-box .menu-list ul li a::after {
	background-color: #fff;
	bottom: -5px;
	content: ""; 
	height: 1px;
	left: 0;
	position: absolute;
	transform: scale(0, 1);
	transform-origin: center top;
	transition: transform .3s;
	width: 100%;
}

footer .contents .menu-box .menu-list ul li a:hover {opacity: 1;}
footer .contents .menu-box .menu-list ul li a:hover::after {transform: scale(1, 1);}

footer .contents .menu-box .menu-list ul li a img {width: 12px;}

footer .contents .menu-box .sns-box {
	position: absolute;
	left: 0;
	bottom: -20px;
	display: flex;
	align-items: center;
	gap: 20px;
}

footer .contents .menu-box .sns-box .insta {width: 40px;}
footer .contents .menu-box .sns-box .youtube {width: 42px;}

footer .contents .outline {
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 30px;
}

footer .contents .outline img {max-width: 76px;}

footer .contents .outline p {line-height: 2em;}

footer .contents small  {
	position: absolute;
	right: 0;
	bottom: 60px;
}

@media screen and (max-width: 1024px) {
	footer .contents .menu-box {
		grid-template-columns: repeat(2, 1fr);
		gap: 35px;
	}
	
	footer .contents .menu-box .sns-box {position: static;}
	
	footer .contents .outline {
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}
	
	footer .contents small {bottom: 30px;}
}

@media screen and (max-width: 640px) {
	footer .contents {padding: 40px 0;}
	
	footer .contents .menu-box {
		grid-template-columns: repeat(1, 1fr);
		margin-bottom: 50px;
		gap: 20px;
	}
	
	footer .contents .menu-box .menu-btn a {
		font-size: 18px;
		display: flex;
		align-items: center;
		gap: 20px;
		border: solid 1px;
		padding: 20px 30px;
	}
	
	footer .contents .menu-box .menu-btn a img {width: 30px;}
	
	footer .contents .menu-box .sns-box {margin-top: 20px;}
	
	footer .contents .menu-box .sns-box .insta {width: 30px;}
	footer .contents .menu-box .sns-box .youtube {width: 32px;}
	
	footer .contents .outline img {width: 20%;}
	footer .contents small  {bottom: 20px;}
}

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

#top-wrap

**********************************************************************************/
#top-wrap {
	position: relative;
	width: 100%;
}

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

#top-cover,#under-cover

**********************************************************************************/
#top-cover,#under-cover {width: 100%;}

#top-cover .box,#under-cover .box {
	width: 90%;
	max-width: 1280px;
	height: 300px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#top-cover .box {margin: 0 auto;}
#under-cover .box {margin: 0 auto 90px;}

#top-cover .box h1,#under-cover .box h1 {
	max-width: 230px;
	text-align: center;
}

#top-cover .box h1 a img,#under-cover .box h1 a img {padding: 10px 0 18px;}

#top-cover .box h1 a .tag02,#under-cover .box h1 a .tag02 {
	font-size: 14px;
	letter-spacing: 0.1em;
}

#top-cover .box .menu {
	display: flex;
	align-items: flex-end;
	gap: 30px;
}

#top-cover .box .menu ul li {margin-bottom: 20px;}
#top-cover .box .menu ul li:last-child {margin-bottom: 0;}

#top-cover .box .menu ul li a {
	position: relative;
	font-size: 14px;
}

#top-cover .box .menu ul li a::after {
	background-color: var(--blue);
	bottom: -6px;
	content: ""; 
	height: 1px;
	left: 0;
	position: absolute;
	transform: scale(0, 1);
	transform-origin: center top;
	transition: transform .3s;
	width: 100%;
}

#top-cover .box .menu ul li a:hover {opacity: 1;}
#top-cover .box .menu ul li a:hover::after {transform: scale(1, 1);}

#under-cover .box .midashi {text-align: right;}

#under-cover .box .midashi h2 {
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 15px;
}

#under-cover .box .midashi h2 span,#under-cover .box .midashi p {font-size: 18px;}

@media screen and (max-width: 1420px) {
	#top-cover .box .menu,#under-cover .box .midashi {margin-right: 60px;}
}

@media screen and (max-width: 820px) {
	#top-cover .box,#under-cover .box {align-items: flex-start;}
	
	#top-cover .box {
		padding-top: 46px;
		height: 200px;
	}
	
	#top-cover .box .menu {display: none;}
	
	#under-cover .box {
		flex-direction: column;
		gap: 50px;
		height: auto;
		margin: 0 auto;
		padding: 46px 0 120px;
	}
	
	#under-cover .box .midashi {margin-left: auto;}
}

@media screen and (max-width: 640px) {
	#top-cover .box {
		padding-top: 30px;
		height: 150px;
	}
	#top-cover .box h1,#under-cover .box h1 {max-width: 159px;}
	#top-cover .box h1 a .tag02,#under-cover .box h1 a .tag02 {font-size: 12px;}
	
	#under-cover .box {padding: 30px 0 100px;}
	#under-cover .box .midashi {margin-right: 0;}
	#under-cover .box .midashi h2 {font-size: 24px;}
	#under-cover .box .midashi h2 span,#under-cover .box .midashi p {font-size: 12px;}
}

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

#top-fv

**********************************************************************************/
#top-fv {
	position: relative;
	width: 100%;
	height: 900px;
	overflow: hidden;
}

#top-fv .fv-image,#top-fv .fv-image img,#top-fv .fv-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s ease, opacity 0.8s ease;
	will-change: transform, opacity;
}

#top-fv .fv-image {
	z-index: 2;
	transform: translateX(0);
	opacity: 1;
}
#top-fv .fv-video {
	z-index: 1;
	transform: translateX(100%);
	opacity: 0;
}

#top-fv.slide .fv-image {
	transform: translateX(-100%);
}
#top-fv.slide .fv-video {
	transform: translateX(0);
	opacity: 1;
}

@media screen and (max-width: 1300px) {
	#top-fv {height: 700px;}
}

@media screen and (max-width: 640px) {
	#top-fv {height: 620px;}
}


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

#top-news

**********************************************************************************/
#top-news {
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: #fff;
	padding: 20px 30px 30px 21%;
	z-index: 3;
}

#top-news h3 {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 20px;
}

#top-news ul li:first-child {margin-bottom: 10px;}

#top-news ul li a {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

#top-news ul li a h4 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 1;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 20em;
}

#top-news .news-link {
	background-color: var(--blue);
	border: solid 1px var(--blue);
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 0 5px 5px 5px;
}

#top-news .news-link svg {fill: #fff;}

#top-news .news-link:hover {
	opacity: 1;
	background-color: #fff;	
}

#top-news .news-link:hover svg {fill: var(--blue);}

@media screen and (max-width: 2100px) {
	#top-news {padding: 20px 30px 30px 18%;}
}

@media screen and (max-width: 1900px) {
	#top-news {padding: 20px 30px 30px 16%;}
}

@media screen and (max-width: 1800px) {
	#top-news {padding: 20px 30px 30px 14%;}
}

@media screen and (max-width: 1700px) {
	#top-news {padding: 20px 30px 30px 12%;}
}

@media screen and (max-width: 1600px) {
	#top-news {padding: 20px 30px 30px 10%;}
}

@media screen and (max-width: 1500px) {
	#top-news {padding: 20px 30px 30px 7%;}
}

@media screen and (max-width: 1400px) {
	#top-news {padding: 20px 30px 30px 4%;}
}

@media screen and (max-width: 1300px) {
	#top-news {padding: 20px 30px 30px;}
}

@media screen and (max-width: 820px) {
	#top-news {
		left: auto;
		right: 0;
	}
}

@media screen and (max-width: 430px) {
	#top-news {padding: 20px 40px 20px 20px;}
	
	#top-news h3 {
		font-size: 20px;
		margin-bottom: 10px;
	}
	
	#top-news ul li a {gap: 10px;}
	#top-news ul li a h4 {max-width: 10em;}
	#top-news .news-link {padding: 5px 10px 10px 10px;}
}

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

#scroll_down

**********************************************************************************/
#scroll_down {
	width: 0;
	position: absolute;
    left: 0;
	right: 0;
	bottom: -94px;
	margin: 0 auto;
	z-index: 3;
}

#scroll_down p {
	font-size: 14px;
	writing-mode: vertical-lr;
	position: absolute;
	left: 10px;
	bottom: 5px;
	width: 16px;
}

#scroll_down:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: -1px;
	width: 3px;
	height: 35px;
	background: var(--blue);
	animation:
	minimove 2s ease-in-out infinite,
	minimovehide 2s ease-out infinite;
}

@keyframes minimove{
  0%{bottom:160px;}
  100%{bottom:0px;}
}

@keyframes minimovehide{
  0%{opacity:0}
  50%{opacity:1;}
  80%{opacity:0.9;}
  100%{opacity:0;}
}

#scroll_down:after{
	content:"";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1px;
	height: 196px;
	background: var(--blue);
}

@media screen and (max-width: 820px) {
	#scroll_down {
		left: 15%;
		right: auto;
	}
}

@media screen and (max-width: 640px) {
	#scroll_down p {font-size: 12px;}
}

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

#top-concept

**********************************************************************************/
#top-concept {
	display: flex;
	position: relative;
}

#top-concept .inner-wrap {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

#top-concept .inner-wrap .inner {
	width: 100%;
	padding: 130px 0;
	max-width: 70%;
	display: flex;
	align-items: flex-start;
	gap: 120px;
}

#top-concept h3 {
	font-size: 100px;
	color: var(--gray);
	writing-mode: vertical-lr;
	line-height: 0.7em;
	white-space: nowrap;
	width: 80px;
}

#top-concept .inner-box {
	margin-top: 40px;
}

#top-concept .tag-line {
	margin-bottom: 50px;
}

#top-concept h4 {
	font-size: 48px;
	font-weight: 300;
	line-height: 1.5em;
	margin-bottom: 50px;
}

#top-concept .txt {line-height: 2.3em;}

#top-concept .image {
	width: 25%;
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
}

#top-concept .image img {
	height: 100%;
	object-fit: cover;
	display: block;
}

#top-concept .link-arrow {
	position: absolute;
	top: 50%;
    left: -60px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

@media screen and (max-width: 1300px) {
	#top-concept .inner-wrap .inner {padding: 130px 0 130px 5%;}
}

@media screen and (max-width: 1120px) {
	#top-concept .inner-wrap .inner {gap: 80px;}
}

@media screen and (max-width: 1024px) {
	#top-concept {flex-direction: column;}
	#top-concept .inner-wrap {position: relative;}
	
	#top-concept .inner-wrap .inner {
		max-width: none;
		padding: 130px 0 60px 5%;
	}
	
	#top-concept .link-arrow.pc {display: none;}
	#top-concept .link-arrow.sp {display: block;}
	
	#top-concept .link-arrow {
		top: auto;
		left: auto;
		right: 0;
		bottom: 0;
		transform: none;
		-webkit-transform: none;
		-ms-transform: none;
	}
	
	#top-concept .image {
		position: static;
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 5;
		overflow: hidden;
	}
}

@media screen and (max-width: 820px) {
	#top-concept .inner-box {padding-right: 5%;}
	#top-concept h4 {font-size: 40px;}
}

@media screen and (max-width: 640px) {
	#top-concept .inner-wrap .inner {gap: 40px;}
	
	#top-concept h3 {
		font-size: 40px;
		width: 28px;
	}
	
	#top-concept .tag-line {margin-bottom: 30px;}
	
	#top-concept h4 {
		font-size: 28px;
		margin-bottom: 30px;
	}
}

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

#top-build

**********************************************************************************/
#top-build {
	background-color: var(--gray);
	padding-top: 80px;
	overflow: hidden;
}

#top-build .tag-line {
	width: 90%;
	max-width: 1280px;
	margin: 0 auto 80px;
}

#top-build .box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 100px;
}

#top-build ul {flex: 0 0 70%;}

#top-build ul li {position: relative;}

#top-build ul li a {display: flex;}

#top-build ul li .image {
	flex: 1;
	overflow: hidden;
	position: relative;
}

#top-build ul li .image img {
	height: 100%;
	object-fit: cover;
	display: block;
	position: absolute;
	top: 50%;
    left: 0;
	right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	margin: 0 auto;
}

#top-build ul li a .contents {
	flex: 0 0 35%;
	height: 450px;
	text-align: center;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: 0.5s;
}

#top-build ul li:last-child {margin-top: 40px;}
#top-build ul li:last-child .contents {height: 370px;}

#top-build ul li a .contents h5 {
	font-size: 24px;
	margin-bottom: 10px;
}

#top-build ul li a .contents h4 {font-size: 36px;}

#top-build ul li a .link-arrow {
	position: absolute;
	right: -60px;
	bottom: 0;
	transition: 0.5s;
}

#top-build ul li a:hover {opacity: 1;}

#top-build ul li a:hover .contents {
	background-color: var(--blue);
	color: #fff;
	transition: 0.5s;
}

#top-build ul li a:hover .link-arrow {
	background-color: #fff;
	transition: 0.5s;
}

#top-build ul li a:hover .link-arrow svg {
	fill: var(--blue);
	transition: 0.5s;
}

#top-build .box h3 {
	font-size: 100px;
	color: #fff;
	writing-mode: vertical-lr;
	line-height: 0.7em;
	white-space: nowrap;
	width: 80px;
	margin-right: 12%;
}

@media screen and (max-width: 1500px) {
	#top-build .box h3 {margin-right: 7%;}
	#top-build ul {flex: 0 0 76%;}
}

@media screen and (max-width: 1300px) {
	#top-build .box h3 {margin-right: 5%;}
	#top-build ul {flex: 0 0 80%;}
}

@media screen and (max-width: 1024px) {	
	#top-build .box {align-items: flex-start;}
	#top-build ul {flex: 1;}
	#top-build ul li a {flex-direction: column;}
	#top-build ul li .image {
		flex: 0;
		aspect-ratio: 5 / 3;
	}
	
	#top-build ul li a .contents {
		flex: 0;
		height: auto;
		padding: 40px 30px;
	}
	
	#top-build ul li:last-child .contents {height: auto;}
}

@media screen and (max-width: 640px) {
	#top-build .tag-line {margin: 0 auto 40px;}
	#top-build .box {gap: 40px;}
	#top-build ul li a .contents h5 {font-size: 20px;}
	#top-build ul li a .contents h4 {font-size: 30px;}
	
	#top-build .box h3 {
		font-size: 40px;
		width: 28px;
	}
	
	#top-build ul li a .link-arrow {
		right: -40px;
		width: 40px;
		height: 40px;
	}
}

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

#top-tsugi

**********************************************************************************/
#top-tsugi {margin: 165px auto 0;}

#top-tsugi .tag-line {
	width: 90%;
	max-width: 1280px;
	margin: 0 auto 80px;
}

#top-tsugi .box {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#top-tsugi .box .contents {margin-left: 20%}

#top-tsugi .box .contents h3 {
	font-size: 72px;
	font-weight: 300;
	margin-bottom: 50px;
}

#top-tsugi .box .contents .txt {
	line-height: 2em;
	margin-bottom: 90px;
}

#top-tsugi .box .contents .view-more {margin-left: 240px;}

#top-tsugi .box .illust {
	position: relative;
	max-width: 860px;
}

#top-tsugi .box .illust01,#top-tsugi .box .illust02,#top-tsugi .box .illust03,#top-tsugi .box .illust04 {position: absolute;}

#top-tsugi .box .illust01 {
	max-width: 348px;
	top: 0;
	left: 240px;
}

#top-tsugi .box .illust02 {
	max-width: 440px;
	top: 230px;
	right: 40px;
}

#top-tsugi .box .illust03 {
	max-width: 340px;
	left: 0;
	bottom: 70px;
}

#top-tsugi .box .illust04 {
	max-width: 200px;
	left: 45%;
	bottom: 25%;
}

@media screen and (max-width: 2000px) {
	#top-tsugi .box .contents {margin-left: 15%}
}

@media screen and (max-width: 1700px) {
	#top-tsugi .box .contents {margin-left: 12%}
}

@media screen and (max-width: 1600px) {
	#top-tsugi .box .contents {margin-left: 7%}
}

@media screen and (max-width: 1500px) {
	#top-tsugi .box .contents {margin-left: 5%}
	
	#top-tsugi .box .illust {flex: 0 0 50%;}
	
	#top-tsugi .box .illust01 {
		width: 36%;
		left: 28%;
	}

	#top-tsugi .box .illust02 {
		width: 47%;
		top: 30%;
		right: 5%;
	}

	#top-tsugi .box .illust03 {
		width: 40%;
		bottom: 7%;
	}
	
	#top-tsugi .box .illust04 {
		width: 25%;
		left: 45%;
		bottom: 25%;
	}
}

@media screen and (max-width: 1024px) {
	#top-tsugi .tag-line {margin: 0 auto 60px;}
	#top-tsugi .box .contents h3 {font-size: 60px;}
}

@media screen and (max-width: 820px) {
	#top-tsugi .box {
		flex-direction: column;
		gap: 100px;
	}
	
	#top-tsugi .box .contents {
		width: 90%;
		margin: 0 auto;
	}
	
	#top-tsugi .box .contents .view-more {margin: 0 0 0 auto;}
	
	#top-tsugi .box .illust {
		flex: 0;
		width: 95%;
		margin: 0 auto;
	}
}

@media screen and (max-width: 640px) {
	#top-tsugi {margin: 100px auto 0;}
	
	#top-tsugi .box .contents h3 {
		font-size: 50px;
		margin-bottom: 30px;
	}
	
	#top-tsugi .box .contents .txt {margin-bottom: 50px;}
	
	#top-tsugi .box .illust01 {
		width: 43%;
		left: 23%;
	}

	#top-tsugi .box .illust02 {
		width: 54%;
		top: 28%;
		right: 0;
	}

	#top-tsugi .box .illust03 {
		width: 47%;
		bottom: 3%;
	}
}

@media screen and (max-width: 430px) {
	#top-tsugi {margin: 80px auto 0;}
	#top-tsugi .tag-line {margin: 0 auto 30px;}
	#top-tsugi .box {gap: 60px;}
	#top-tsugi .box .contents h3 {font-size: 40px;}
}

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

#top-tsukuribito

**********************************************************************************/
#top-tsukuribito {
	background: image-set(
		url("images/top/tsukuribito-bg_pc.webp") type("image/webp") 1x,
		url("images/top/tsukuribito-bg_pc.jpg") type("image/jpeg") 1x
	);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	padding: 100px 0;
}

#top-tsukuribito .midashi {
	width: 90%;
	max-width: 1060px;
	margin: 0 auto 70px;
	display: flex;
	align-items: center;
	gap: 83px;
}

#top-tsukuribito .midashi span {
	font-weight: normal;
	font-style: normal;
	letter-spacing: 0.01em;
}

#top-tsukuribito .highlight-slider {
	width: 90%;
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
}

#top-tsukuribito .highlight-slider .text-list {
	font-size: 18px;
	width: 120px;
}

#top-tsukuribito .highlight-slider .text-list li {
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: color 0.3s ease;
	position: relative;
}

#top-tsukuribito .highlight-slider .text-list li::after {
	content: "";
	display: block;
	width: 0;
	height: 1px;
	background: var(--blue);
	transition: width 0.3s ease;
	margin-left: 8px;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

#top-tsukuribito .highlight-slider .text-list .active {font-weight: bold;}
#top-tsukuribito .highlight-slider .text-list li.active::after {width: 23px;}
#top-tsukuribito .highlight-slider .text-list li:last-child {margin-bottom: 0;}

#top-tsukuribito .highlight-slider .builder-slide {	
	margin-left: -10px;
	width: 100%;
	max-width: 480px;
	position: relative;
	z-index: 0;
}

@media screen and (max-width: 1024px) {
	#top-tsukuribito {
		background: image-set(
			url("images/top/tsukuribito-bg_sp.webp") type("image/webp") 1x,
			url("images/top/tsukuribito-bg_sp.jpg") type("image/jpeg") 1x
		);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center bottom;
		padding: 100px 0 550px;
	}
	
	#top-tsukuribito .highlight-slider {justify-content: center;}
}

@media screen and (max-width: 820px) {
	#top-tsukuribito {position: relative;}
	
	#top-tsukuribito .midashi .view-more {
		position: absolute;
		right: 50px;
		bottom: 50px;
	}
}

@media screen and (max-width: 640px) {
	#top-tsukuribito .midashi {
		flex-direction: column;
		align-items: flex-start;
		gap: 30px;
	}
	
	#top-tsukuribito .midashi .view-more {margin: 0 0 0 auto;}
	
	#top-tsukuribito .highlight-slider .text-list {
		font-size: 14px;
		width: 90px;
	}
	
	#top-tsukuribito .highlight-slider .builder-slide {width: 76%;}
}

@media screen and (max-width: 430px) {
	#top-tsukuribito {padding: 80px 0 300px;}
	#top-tsukuribito .midashi {margin: 0 auto 50px;}
}

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

#top-plus

**********************************************************************************/
#top-plus {
	display: flex;
	align-items: flex-start;
	margin-top: 130px;
}

#top-plus .left {
	flex: 1;
	position: relative;
	margin-top: 40px;
}

#top-plus .left .contents01 {
	background-color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	padding: 80px 30px;
}

#top-plus .left .contents01 .tag-line::before {width: 30px;}

#top-plus .left .contents01 h3 {
	font-size: 36px;
	margin-top: 15px;
}

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

#top-plus .right .top {
	position: relative;
	z-index: 1;
}

#top-plus .right .bottom {
	display: flex;
	align-items: flex-start;
}

#top-plus .right .bottom .contents02 {
	padding: 0 50px;
	position: relative;
	display: flex;
	align-items: center;
}

#top-plus .right .bottom .contents02 p {
	line-height: 2em;
}

#top-plus .right .bottom .contents02 .link-arrow {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 40px;
	height: 40px;
}

#top-plus .right .bottom .bottom-right {
	flex: 1;
	margin-top: -10%;
	position: relative;
	z-index: 0;
}

@media screen and (max-width: 1900px) {
	#top-plus .right .bottom .bottom-right {margin-top: -5%;}
}

@media screen and (max-width: 1700px) {
	#top-plus .right .bottom .bottom-right {margin-top: -3%;}
}

@media screen and (max-width: 1600px) {
	#top-plus .right .bottom .bottom-right {margin-top: 0;}
}

@media screen and (max-width: 1300px) {
	#top-plus .right .bottom .contents02 {padding: 0 30px;}
}

@media screen and (max-width: 1024px) {
	#top-plus {flex-direction: column;}
	
	#top-plus .left {
		flex: 0;
		margin-top: 0;
		width: 100%;
	}
	
	#top-plus .right {
		flex: 0;
		width: 100%;
	}
	
	#top-plus .right .bottom .contents02 {padding: 0 50px;}
}

@media screen and (max-width: 640px) {
	#top-plus {margin-top: 80px;}
	#top-plus .left .contents01 {padding: 30px;}
	
	#top-plus .left .contents01 h3 {
		font-size: 30px;
		margin-top: 10px;
	}
	
	#top-plus .right .bottom {flex-direction: column;}
	
	#top-plus .right .bottom .contents02 {
		width: 100%;
		justify-content: center;
		padding: 50px 30px;
	}
	
	#top-plus .right .bottom .bottom-right {
		flex: 0;
		width: 100%;
	}
}

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

#top-works

**********************************************************************************/
#top-works {
	margin-top: 110px;
	position: relative;
}

#top-works .tag-line {
	width: 90%;
	max-width: 1280px;
	margin: 0 auto 60px;
}

#top-works .tag-line span {
	font-weight: normal;
	font-style: normal;
	letter-spacing: 0.01em;
}

#top-works .view-more {
	position: absolute;
	top: 28%;
	right: 52%;
}

#top-works .view-more.sp {display: none;}

#top-works ul {
	display: flex;
	align-items: flex-end;
	gap: 20px;
}

#top-works ul li:first-child {flex: 2;}
#top-works ul li:nth-child(2),#top-works ul li:nth-child(3) {flex: 1;}

#top-works ul li a {position: relative;}

#top-works ul li a:hover {opacity: 1;}
#top-works ul li a .main {position: relative;}
#top-works ul li a .main .link-arrow {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 40px;
	height: 40px;
	background-color: #fff;
	border: none;
	transition: 0.5s;
}

#top-works ul li a .main .link-arrow svg {
	fill: var(--blue);
	transition: 0.5s;
}

#top-works ul li a:hover .main .link-arrow {
	background-color: var(--blue);
	transition: 0.5s;
}

#top-works ul li a:hover .main .link-arrow svg {
	fill: #fff;
	transition: 0.5s;
}

#top-works ul li:first-child a .main {
	aspect-ratio: 5 / 3;
	overflow: hidden;
}

#top-works ul li:nth-child(2) a .main,#top-works ul li:nth-child(3) a .main {
	aspect-ratio: 3 / 5;
	overflow: hidden;
}

#top-works ul li a .under {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	width: 90%;
	margin: -50px auto 0;
	position: relative;
	z-index: 2;
}

#top-works ul li a .gaikan {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: solid 5px #fff;
	flex: 0 0 130px;
}

#top-works ul li a img {
	height: 100%;
	object-fit: cover;
}

#top-works ul li a h4 {
	margin-bottom: 5px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	min-width: 0;
}

@media (max-width: 1024px) {
	#top-works .view-more {
		position: static;
		margin: 0 5% 50px auto;
	}
	
	#top-works ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}

	#top-works ul li:first-child {
		grid-column: 1 / -1;
	}

	#top-works ul li { flex: initial; }
	#top-works ul li:first-child,
	#top-works ul li:nth-child(2),
	#top-works ul li:nth-child(3) { flex: initial; }
}

@media (max-width: 820px) {
	#top-works .view-more.pc {display: none;}
	#top-works .view-more.sp {
		display: flex;
		margin-top: 50px;
	}
}

@media (max-width: 640px) {
	#top-works ul li:first-child a .under {width: 95%;}
	#top-works ul li:nth-child(2) a .under,#top-works ul li:nth-child(3) a .under {
		flex-direction: column;
		align-items: flex-start;
	}
	
	#top-works ul li a .gaikan {flex: 0 0 100px;}
}

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

#top-event

**********************************************************************************/
#top-event {
	display: flex;
	margin-top: 60px;
}

#top-event .left {
	flex: 0 0 20%;
	display: flex;
	align-items: flex-end;
	flex-direction: column;
	justify-content: space-between;
	gap: 70px;
}

#top-event .left .tag-line {
	margin-top: 22px;
	margin-right: 50px;
}

#top-event .left .image {
		width: 100%;
		aspect-ratio: 3 / 5;
		overflow: hidden;
	}
	
#top-event .left .image img {
	height: 100%;
	object-fit: cover;
}

#top-event .right {
	flex: 1;
	margin-right: 12%;
}

#top-event .right .head {
	padding-bottom: 10px;
	border-bottom: solid 1px;
}

#top-event .right .head a {
	display: flex;
	align-items: center;
	gap: 20px;
	font-weight: bold;
	width: fit-content;
	margin: 0 0 0 auto;
}

#top-event .right .head a span {
	background-color: var(--blue);
	border: solid 1px var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	transition: 0.5s;
}

#top-event .right .head a span svg {
	fill: #fff;
	transition: 0.5s;
}

#top-event .right .head a:hover {opacity: 1;}
#top-event .right .head a:hover span {
	background-color: #fff;
	transition: 0.5s;
}
#top-event .right .head a:hover span svg {
	fill: var(--blue);
	transition: 0.5s;
}

#top-event .right .event-box {margin-left: 100px;}

#top-event .right .event-box .event-list {
	padding: 30px;
	border-bottom: solid 1px;
	transition: 0.5s;
}

#top-event .right .event-box .event-list:hover {
	background-color: var(--gray);
	transition: 0.5s;
}

#top-event .right .event-box .event-list a {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: 60px;
}

#top-event .right .event-box .event-list a .link-arrow {
	position: absolute;
	left: -30px;
	bottom: -30px;
	width: 20px;
	height: 20px;
	transition: 0.5s;
}

#top-event .right .event-box .event-list a .link-arrow svg {transition: 0.5s;}
#top-event .right .event-box .event-list a:hover {opacity: 1;}

#top-event .right .event-box .event-list a:hover .link-arrow {
	background-color: #fff;
	transition: 0.5s;
}

#top-event .right .event-box .event-list a:hover .link-arrow svg {
	fill: var(--blue);
	transition: 0.5s;
}

#top-event .right .event-box .event-list a .contents {
	flex: 1;
	display: flex;
	gap: 100px;
}

#top-event .right .event-box .event-list a .contents .new-box {width: 50px;}

#top-event .right .event-box .event-list a .contents .new-box p {
	color: var(--gray2);
	transition: 0.5s;
}
#top-event .right .event-box .event-list a:hover .contents .new-box p {
	color: #fff;
	transition: 0.5s;
}

#top-event .right .event-box .event-list a .contents .detail {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 50px;
}

#top-event .right .event-box .event-list a .contents .detail .inner-box li {
	display: flex;
	align-items: flex-start;
	gap: 30px;
	margin-bottom: 15px;
	line-height: 1.5em;
}

#top-event .right .event-box .event-list a .contents .detail .inner-box li:last-child {margin-bottom: 0;}

#top-event .right .event-box .event-list a .contents .detail .inner-box li h5 {flex: 0 0 114px;}

#top-event .right .event-box .event-list a .thum-box {
	flex: 0 0 280px;
	position: relative;
}

#top-event .right .event-box .event-list a .thum-box .now {
	width: 44px;
	position: absolute;
	top: -20px;
	left: -20px;
}

#top-event .right .event-box .event-list a .thum-box .thum-wrap {
	aspect-ratio: 28 / 19;
	overflow: hidden;
}

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

@media (max-width: 1500px) {
	#top-event .right {margin-right: 7%;}
}

@media (max-width: 1300px) {
	#top-event .right {margin-right: 5%;}
	#top-event .right .event-box {margin-left: 60px;}
	#top-event .right .event-box .event-list a .contents {gap: 50px;}
}

@media (max-width: 1024px) {
	#top-event .left {justify-content: flex-start;}
	#top-event .right .event-box .event-list a {flex-direction: column;}
	
	#top-event .right .event-box .event-list a .thum-box {
		flex: 0;
		max-width: 280px;
		margin: 0 auto;
	}
}

@media (max-width: 820px) {
	#top-event {margin-top: 80px;}
	#top-event .left .tag-line {margin-top: -10px;}
	#top-event .right {
		display: flex;
		flex-direction: column;
		margin-right: 0;
	}
	
	#top-event .right .head {
		order: 2;
		padding-bottom: 0;
		border-bottom: none;
		margin-top: 50px;
		margin-right: 5%;
	}
	
	#top-event .right .event-box {order: 1;}
	#top-event .right .event-box .event-list:first-child {border-top: solid 1px;}
}

@media (max-width: 640px) {
	#top-event {
		flex-direction: column;
		gap: 60px;
	}
	
	#top-event .left {
		flex: 0;
		gap: 30px;
	}
	
	#top-event .left .tag-line {margin: 0 auto 0 5%;}
	#top-event .left .image {aspect-ratio: 5 / 3;}
	#top-event .right .event-box {margin-left: 5%;}
	#top-event .right .event-box .event-list a .contents {
		flex-direction: column;
		gap: 0
	}
	#top-event .right .event-box .event-list a .contents .new-box {
		width: auto;
		margin-bottom: 30px;
	}
	#top-event .right .event-box .event-list a .contents .detail .inner-box li h5 {flex: 0 0 100px;}
}

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

#top-voice

**********************************************************************************/
#top-voice {
	display: flex;
	margin-top: 120px;
	position: relative;
}

#top-voice .left-wrap {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

#top-voice .left-wrap .left {
	width: 100%;
	padding: 150px 60px 80px 0;
	max-width: 70%;
}

#top-voice .left-wrap .left .tag-line {
	width: 100%;
	margin-bottom: 80px;
}

#top-voice .left-wrap .left .inner {
	display: flex;
	align-items: center;
	gap: 65px;
}

#top-voice .left-wrap .left .inner h3 {
	font-size: 100px;
	color: var(--gray);
	writing-mode: vertical-lr;
	line-height: 0.7em;
	white-space: nowrap;
	width: 80px;
}

#top-voice .left-wrap .left .inner .inner-box ul li {
	width: 100%;
	margin-bottom: 60px;
	padding-bottom: 40px;
	border-bottom:  solid 1px;
	position: relative;
}

#top-voice .left-wrap .left .inner .inner-box ul li h4 {
	font-size: 48px;
	font-weight: 300;
	margin-bottom: 25px;
}

#top-voice .left-wrap .left .inner .inner-box ul li .txt {
	line-height: 2em;
	padding-right: 50px;
}

#top-voice .left-wrap .left .inner .inner-box ul li .link-arrow {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 22px;
	height: 22px;
}

#top-voice .left-wrap .left .inner .inner-box .view-more {margin: 0 0 0 auto;}

#top-voice .right {
	width: 30%;
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
}

#top-voice .right video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media screen and (max-width: 1400px) {
	#top-voice .left-wrap .left .tag-line {
		width: 90%;
		margin: 0 auto 80px;
	}
}

@media screen and (max-width: 1024px) {
	#top-voice {
		flex-direction: column;
		gap: 70px;
	}
	
	#top-voice .left-wrap {position: relative;}
	
	#top-voice .left-wrap .left {
		padding: 0;
		max-width: none;
	}
	
	#top-voice .left-wrap .left .inner {align-items: flex-start;}
	#top-voice .left-wrap .left .inner .inner-box {padding-right: 5%;}
	#top-voice .left-wrap .left .inner .inner-box ul li h4 {font-size: 40px;}
	#top-voice .left-wrap .left .inner .inner-box ul li .txt {padding-right: 0;}
	
	#top-voice .right {
		position: static;
		width: 100%;
		height: auto;
		aspect-ratio: 5 / 3;
		overflow: hidden;
	}
}

@media screen and (max-width: 640px) {
	#top-voice {margin-top: 80px;}
	#top-voice .left-wrap .left .inner {gap: 50px;}
	
	#top-voice .left-wrap .left .inner h3 {
		font-size: 40px;
		width: 28px;
	}
	
	#top-voice .left-wrap .left .inner .inner-box ul li h4 {font-size: 36px;}
	
	#top-voice .left-wrap .left .tag-line {margin-bottom: 50px;}
}

@media screen and (max-width: 430px) {
	#top-voice .left-wrap .left .inner .inner-box ul li h4 {font-size: 28px;}
}

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

#top-column

**********************************************************************************/
#top-column {
	width: 90%;
	max-width: 1280px;
	margin: 100px auto;
	display: flex;
	align-items: flex-start;
	gap: 50px; 
}

#top-column .tag-line {margin-top: 20px;}

#top-column .box {width: 100%;}

#top-column .box .head {
	padding-bottom: 8px;
	border-bottom: solid 1px;
	margin-bottom: 30px;
}

#top-column .box .head a {margin: 0 0 0 auto;}
#top-column .box ul li {margin-bottom: 30px;}
#top-column .box ul li:last-child {margin-bottom: 0;}

#top-column .box ul li a {
	display: flex;
	align-items: flex-start;
	gap: 30px;
}

#top-column .box ul li h4 {
	line-height: 1.5em;
	margin-top: -4px;
}

@media screen and (max-width: 640px) {
	#top-column {
		margin: 60px auto;
		flex-direction: column;
		gap: 40px; 
	}
	
	#top-column .tag-line {margin-top: 0;}
	
	#top-column .box {
		display: flex;
		flex-direction: column;
	}
	
	#top-column .box .head {
		order: 2;
		padding-bottom: 0;
		border-bottom: none;
		margin-bottom: 0;
		margin-top: 50px;
	}
	
	#top-column .box ul {order: 1;}
	#top-column .box ul li {margin-bottom: 20px;}
}

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

#archive-box

**********************************************************************************/
#archive-wrap {padding-bottom: 150px;}

#archive-wrap .bg-illust {
	position: fixed;
	left: 0;
	max-width: 280px;
	z-index: -1;
}

.bg-illust.stop {position: absolute;}

#archive-box {
	width: 90%;
	max-width: 1280px;
	margin: 0 auto;
}

#archive-box .archive-inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 50px;
	margin-bottom: 100px;
}

#archive-box .archive-inner.news-inner,#archive-box .archive-inner.works-inner,#archive-box .archive-inner.event-inner {margin-bottom: 0;} 

#archive-box .archive-inner .archive-tab {border-bottom: solid 1px;}

#archive-box .archive-inner .archive-tab li {
	margin-bottom: 30px;
	position: relative;
}

#archive-box .archive-inner .archive-tab li::after {
	background-color: var(--blue);
	bottom: -6px;
	content: ""; 
	height: 1px;
	left: 0;
	position: absolute;
	transform: scale(0, 1);
	transform-origin: center top;
	transition: transform .3s;
	width: 100%;
}

#archive-box .archive-inner .archive-tab li:hover {opacity: 1;}
#archive-box .archive-inner .archive-tab li:hover::after {transform: scale(1, 1);}

#archive-box .archive-inner .archive-tab li a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	white-space: nowrap;
}

/* 共通：前に四角を追加 */
#archive-box .archive-inner .archive-tab li a::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 1px solid  var(--blue);
	box-sizing: border-box;
}

/* アクティブ時（親liが.active） */
#archive-box .archive-inner .archive-tab li.active a::before {
	background-color: var(--blue);
	border: none;
	position: relative;
}

/* チェックマーク */
#archive-box .archive-inner .archive-tab li.active a::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 4px;
	width: 4px;
	height: 8px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	transform: rotate(45deg);
}

.c-collapse {
	position: sticky;
	top: 30px;
	left: 0;
}

/* ===== ブレークポイント制御 ===== */
/* 1024px以下：トグル表示／パネルは閉じた状態（hiddenで非表示） */
@media (max-width: 1024px) {
	/* ===== Collapse 共通 ===== */
	.c-collapse {
		position: fixed;
		top: auto;
		bottom: 60px;
		z-index: 5;
		
	}
	.c-collapse__toggle {
		display: none; /* PCでは非表示 */
		align-items: center;
		justify-content: center;
		width: 60px;
		height: 60px;
		background-color: var(--blue);
		color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 4;
	}

	/* ＋/×アイコン（CSSだけで） */
	.c-collapse__icon {
		position: relative;
		width: 20px;
		height: 20px;
	}
	.c-collapse__icon::before,
	.c-collapse__icon::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 16px;
		height: 2px;
		background: currentColor;
		transform: translate(-50%, -50%);
		transition: transform .25s ease;
	}
	.c-collapse__icon::after {
		transform: translate(-50%, -50%) rotate(90deg); /* 縦棒で＋になる */
	}

	/* 開くと × に変形 */
	.c-collapse__toggle[aria-expanded="true"] .c-collapse__icon::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}
	.c-collapse__toggle[aria-expanded="true"] .c-collapse__icon::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	/* パネル */
	.c-collapse__panel {
		background-color: var(--blue);
		color: #fff;
		padding: 30px;
	}
	.c-collapse__toggle { display: inline-flex; }

	#archive-box .archive-inner .archive-tab {border-bottom: none;}
	#archive-box .archive-inner .archive-tab li:last-child {margin-bottom: 0;}
	
	#archive-box .archive-inner .archive-tab li a::before {border: 1px solid #fff;}
	#archive-box .archive-inner .archive-tab li.active a::before {background-color: #fff;}
	#archive-box .archive-inner .archive-tab li.active a::after {
		border-right: 1px solid var(--blue);
		border-bottom: 1px solid var(--blue);
		transform: rotate(45deg);
	}
}

/* 1025px以上：常に展開（従来レイアウト）、トグル非表示 */
@media (min-width: 1025px) {
	.c-collapse__toggle { display: none; }
	.c-collapse__panel { display: block !important; }
	.c-collapse__panel[hidden] { display: block !important; } /* 念のため */
}

@media screen and (max-width: 2000px) {
	#archive-wrap .bg-illust {max-width: 260px;}
}

@media screen and (max-width: 1700px) {
	#archive-wrap .bg-illust {max-width: 220px;}
}

@media screen and (max-width: 1300px) {
	#archive-wrap .bg-illust {width: 17%;}
}

@media screen and (max-width: 1024px) {
	#archive-wrap .bg-illust {
		position: absolute;
		top: 60px;
		bottom: auto;
		width: 10%;
	}
}

@media screen and (max-width: 640px) {
	#archive-wrap {padding-bottom: 80px;}
	#archive-wrap .bg-illust {width: 13%;}
	#archive-box .archive-inner {margin-bottom: 80px;}
}

@media screen and (max-width: 430px) {
	#archive-wrap .bg-illust {width: 19%;}
}

@media screen and (max-width: 414px) {
	#archive-wrap .bg-illust {width: 20%;}
}

@media screen and (max-width: 390px) {
	#archive-wrap .bg-illust {width: 21%;}
}

@media screen and (max-width: 375px) {
	#archive-wrap .bg-illust {width: 22%;}
}

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

ページネーション

**********************************************************************************/
.pagenation {
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.pagenation span {
	position: relative;
}

.pagenation span::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	left: 0;
	bottom: -8px;
	background-color: var(--blue);
}

.pagenation span.dots::after {content: none;}

.pagenation .svg-box {
	width: 20px;
	height: 20px;
	background-color: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
}

.pagenation .svg-box svg {fill: #fff;}

.pagenation a:hover {opacity: 1;}
.pagenation a:hover .svg-box {
	background-color:#fff;
	transition: 0.5s;
}
.pagenation a:hover .svg-box svg {
	fill: var(--blue);
	transition: 0.5s;
}

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

.news-archive

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

.news-archive li {
	width: 100%;
	max-width: 480px;
	min-width: 0;
}

.news-archive li a .thum {
	position: relative;
	aspect-ratio: 12 / 7;
	overflow: hidden;
	margin-bottom: 20px;
}

.news-archive li a .thum img {
	height: 100%;
	object-fit: cover;
}

.news-archive li a .thum .link-arrow {	
	width: 40px;
	height: 40px;
	position: absolute;
	right: 0;
	bottom: 0;
	transition: 0.5s;
}

.news-archive li a:hover {opacity: 1;}

.news-archive li a:hover .thum .link-arrow {
	background-color: #fff;
	transition: 0.5s;
}

.news-archive li a:hover .thum .link-arrow svg {
	fill: var(--blue);
	transition: 0.5s;
}

.news-archive li a .contents .top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	margin-bottom: 10px;
}

.news-archive li a .contents .top .inner {
	display: flex;
	align-items: center;
	gap: 15px;
}

.news-archive li a .contents .top .inner .date {
	border-right: solid 1px;
	padding-right: 15px;
}

.news-archive li a .contents .top .new {
	font-weight: bold;
	color: var(--gray2);
}

.news-archive li a .contents h4 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
	min-width: 0;
}

@media screen and (max-width: 640px) {
	.news-archive {
		grid-template-columns: repeat(1, 1fr);
		margin: 0 auto;
	}
}

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

#news_inner

**********************************************************************************/
#news_inner {
	width: 100%;
	max-width: 1020px;
}

#news_inner .title,#works_inner .title {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 50px;
	padding-bottom: 60px;
	border-bottom: solid 1px;
	margin-bottom: 60px;
}

#news_inner .title h3,#works_inner .title h3 {
	font-size: 22px;
	line-height: 1.7em;
}

#news_inner .title .date {letter-spacing: 0.1em;}

#news_inner .box {
	margin-bottom: 130px;
	line-height: 1.7em;
}

#news_inner .box img {
	width: auto;
	margin: 30px auto;
	display: block;
}

#news_inner .pagenav-box .pagenav-btn,#works_inner .pagenav-box .pagenav-btn,#event_inner .pagenav-box .pagenav-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	margin: 0 0 0 auto;
}

#news_inner .pagenav-box .pagenav-btn .svg-box,#works_inner .pagenav-box .pagenav-btn .svg-box,#event_inner .pagenav-box .pagenav-btn .svg-box {
	width: 20px;
	height: 20px;
	background-color: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;	
}

#news_inner .pagenav-box .pagenav-btn .svg-box svg,#works_inner .pagenav-box .pagenav-btn .svg-box svg,#event_inner .pagenav-box .pagenav-btn .svg-box svg {fill: #fff;}

#news_inner .pagenav-box .pagenav-btn:hover,#works_inner .pagenav-box .pagenav-btn:hover,#event_inner .pagenav-box .pagenav-btn:hover {opacity: 1;}
#news_inner .pagenav-box .pagenav-btn:hover .svg-box,#works_inner .pagenav-box .pagenav-btn:hover .svg-box,#event_inner .pagenav-box .pagenav-btn:hover .svg-box {
	background-color:#fff;
	transition: 0.5s;
}
#news_inner .pagenav-box .pagenav-btn:hover .svg-box svg,#works_inner .pagenav-box .pagenav-btn:hover .svg-box svg,#event_inner .pagenav-box .pagenav-btn:hover .svg-box svg {
	fill: var(--blue);
	transition: 0.5s;
}

@media screen and (max-width: 820px) {
	#news_inner .title,#works_inner .title {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 30px;
	}
	
	#news_inner .title .date {margin: 0 0 0 auto;}
}

@media screen and (max-width: 640px) {
	#news_inner .title,#works_inner .title {
		padding-bottom: 40px;
		margin-bottom: 40px;
	}

	#news_inner .title h3,#works_inner .title h3 {font-size: 18px;}
	#news_inner .box {margin-bottom: 80px;}
}

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

.works-archive

**********************************************************************************/
.works-archive {
	width: 100%;
	max-width: 1020px;
}

.works-archive li {margin-bottom: 60px;}
.works-archive li:last-child {margin-bottom: 0;}

.works-archive li a {position: relative;}

.works-archive li a .image-box {
	display: grid;
	grid-template-columns: 40fr 23fr 23fr;
	gap: 4px;
	align-items: stretch;
	margin-bottom: 20px;
}

/* 左：1枚（比率12:7） */
.works-archive li a .image-box .img01 {
	position: relative;
	aspect-ratio: 12 / 7;
}

/* 中央：2枚を上下に並べる */
.works-archive li a .image-box .figure-wrap {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 4px;
}
.works-archive li a .image-box .figure-wrap figure {aspect-ratio: 5 / 3;}

/* 右：1枚 */
.works-archive li a .image-box .img04 {aspect-ratio: 12 / 7;}

/* 共通 */
.works-archive li a .image-box figure {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.works-archive li a .image-box figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.works-archive li a .image-box .img01 .link-arrow {	
	width: 40px;
	height: 40px;
	position: absolute;
	right: 0;
	bottom: 0;
	transition: 0.5s;
}

.works-archive li a:hover {opacity: 1;}

.works-archive li a:hover .image-box .img01 .link-arrow {
	background-color: #fff;
	transition: 0.5s;
}

.works-archive li a:hover .image-box .img01 .link-arrow svg {
	fill: var(--blue);
	transition: 0.5s;
}

.works-archive li a .contents-box .top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-right: 150px;
	margin-bottom: 15px;
}

.works-archive li a .contents-box .top .date,.works-archive li a .contents-box .top .cat,.works-archive li a .contents-box .top .madori {
	padding-right: 12px;
	border-right: solid 1px;
}

.works-archive li a .contents-box h4 {
	margin-right: 150px;
	line-height: 1.7em;
}

.works-archive li a .gaikan {
	max-width: 130px;
	border: solid 5px #fff;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	position: absolute;
	right: -5px;
	bottom: -5px;
}

.works-archive li a .gaikan img {
	height: 100%;
	object-fit: cover;
}

@media (max-width: 640px) {
	.works-archive li a .image-box {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		grid-template-areas:
			"img01 img01"
			"wrap  img04";
	}

	.works-archive li a .image-box .img01 { grid-area: img01; }
	.works-archive li a .image-box .figure-wrap { 
		grid-area: wrap; 
		display: grid;
		grid-template-rows: 1fr 1fr;
	}
	.works-archive li a .image-box .img04 { grid-area: img04; }

	.works-archive li a .image-box .img01 { grid-area: img01; }
	.works-archive li a .image-box .figure-wrap { grid-area: wrap; }
	.works-archive li a .image-box .img04 { grid-area: img04; }

	.works-archive li a .image-box .figure-wrap figure {aspect-ratio: 5 / 3;}
}

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

#works_inner

**********************************************************************************/
#works_inner {
	width: 80%;
	max-width: 1020px;
}

#works_inner .date-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
}

#works_inner .date-wrap .date,#works_inner .date-wrap .madori {
	padding-right: 12px;
	border-right: solid 1px;
}

#works_inner .box {margin-bottom: 130px;}

#works_inner .renovation-works-box {position: relative;}

#works_inner .renovation-works-box .renovation-before {
	width: 30%;
	border: solid 4px #fff;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
}

#works_inner .renovation-works-box .renovation-before .img {
	aspect-ratio: 5 / 3;
	overflow: hidden;
}

#works_inner .renovation-works-box .renovation-before .img img {
	height: 100%;
	object-fit: cover;
}

#works_inner .renovation-works-box .renovation-before h5,#works_inner .renovation-works-box .renovation-after {
	font-size: 18px;
	color: #fff;
	background-color: var(--blue);
	padding: 5px 10px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
}

#works_inner .box .js-works-gallery {
	margin-bottom: 60px;
	flex: 1 1 0;
	min-width: 0;
	max-width: 100%;
}

#works_inner .box .js-works-gallery .slider-for {
	width: 100%;
	overflow: hidden;
	position: relative;
	margin-bottom: 10px;
	min-width: 0;
	background-color: var(--gray5);
}

#works_inner .box .js-works-gallery .slider-for .slick-prev::before, #works_inner .box .js-works-gallery .slider-for .slick-next::before {content: none;}
#works_inner .box .js-works-gallery .slider-for .slick-prev {left: 0;}
#works_inner .box .js-works-gallery .slider-for .slick-next {right: 0;bottom: 0;}

#works_inner .box .js-works-gallery .slider-for .slick-prev, #works_inner .box .js-works-gallery .slider-for .slick-next {
	top: auto;
	bottom: -20px;
	z-index: 2;
	width: 40px;
	height: 40px;
	background-color: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.5s;
}

#works_inner .box .js-works-gallery .slider-for .slick-prev svg, #works_inner .box .js-works-gallery .slider-for .slick-next svg {
	fill: #fff; 
	transition: 0.5s;
}

#works_inner .box .js-works-gallery .slider-for .slick-prev:hover, #works_inner .box .js-works-gallery .slider-for .slick-next:hover {
	background-color: #fff; 
	transition: 0.5s;
}

#works_inner .box .js-works-gallery .slider-for .slick-prev:hover svg, #works_inner .box .js-works-gallery .slider-for .slick-next:hover svg {
	fill: var(--blue);
	transition: 0.5s;
}

#works_inner .box .js-works-gallery .slider-for .slide {
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 0;	
}

#works_inner .box .js-works-gallery .slider-for .slide img {
	max-height: 100%;
	max-width: 100%;
	height: auto;
	width: auto;
	object-fit: contain;
	object-position: center center;
}

#works_inner .box .js-works-gallery .slider-nav .slick-slide {
	position: relative;
	overflow: hidden;
	z-index: 0;
	aspect-ratio: 5 / 3;
}

#works_inner .box .js-works-gallery .slider-nav .slick-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	transition: opacity 0.3s ease;
	pointer-events: none;
	opacity: 1;
	z-index: 1;
}

#works_inner .box .js-works-gallery .slider-nav .slick-slide.is-active::after {opacity: 0;}

#works_inner .box .js-works-gallery .slider-nav .slick-slide img {
	height: 100%;
	object-fit: cover;
}

#works_inner .box .detail {
	width: 95%;
	margin: 0 auto 50px;
	display: flex;
	align-items: flex-start;
	gap: 80px;
}

#works_inner .box .detail .inner-box {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

#works_inner .box .detail .inner-box.top {margin-bottom: 40px;}
#works_inner .box h5.reno-h5 {width: 96px;}

#works_inner .box .sekoucontents {line-height: 2em;}
#works_inner .box .chousei {
	white-space: nowrap;
	margin-right: 27px;
}

#works_inner .box .kodawari {
	width: 95%;
	margin: 0 auto 130px;
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

#works_inner .box .kodawari h5 {
	line-height: 2em;
	white-space: nowrap;
}

#works_inner .box .kodawari ul {width: 100%;}

#works_inner .box .kodawari ul li {
	width: 100%;
	padding-bottom: 30px;
	border-bottom: solid 1px;
	margin-bottom: 30px;
}

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

#works_inner .box .kodawari ul li p {line-height: 2em;}

#works_inner .box .works-gallery02 h4 {
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 65px;
}

#works_inner .box .works-gallery02 ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 50px 4px;
}

#works_inner .box .works-gallery02 ul li .img {	
	aspect-ratio: 5 / 3;
	overflow: hidden;
}

#works_inner .box .works-gallery02 ul li .img img {
	height: 100%;
	object-fit: cover;
}

#works_inner .box .works-gallery02 ul li h5 {
	font-size: 18px;
	margin-top: 10px;
	font-style: italic;
}

@media screen and (max-width: 1024px) {
	#works_inner {width: 100%;}
}

@media screen and (max-width: 820px) {
	#works_inner .date-wrap {margin: 0 0 0 auto;}
}

@media screen and (max-width: 640px) {
	#works_inner .box {margin-bottom: 80px;}
	
	#works_inner .renovation-works-box .renovation-before {
		width: 40%;
		border: solid 2px #fff;
		top: 8px;
		left: 8px;
	}	
	#works_inner .renovation-works-box .renovation-before h5,#works_inner .renovation-works-box .renovation-after {
		font-size: 12px;
		padding: 3px 7px;
	}
	
	#works_inner .box .detail {
		flex-direction: column;
		gap: 20px;
	}
	#works_inner .box .detail-reno {margin-bottom: 20px;}
	
	#works_inner .box .detail .inner-box {gap: 30px;}
	
	#works_inner .box .detail .inner-box.top {margin-bottom: 20px;}
	
	#works_inner .box .detail .inner-box h5 {width: 56px;}
	#works_inner .box .detail .inner-box h5.reno-h5 {width: 84px;}
	
	#works_inner .box .kodawari {
		margin: 0 auto 80px;
		flex-direction: column;
		gap: 20px;
	}
	
	#works_inner .box .works-gallery02 h4 {
		font-size: 24px;
		margin-bottom: 50px;
	}
	
	#works_inner .box .works-gallery02 ul {grid-template-columns: repeat(1, 1fr);}
	#works_inner .box .works-gallery02 ul li h5 {font-size: 16px;}

}

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

.event-archive

**********************************************************************************/
.event-archive {
	width: 100%;
	max-width: 1020px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px 60px;
}

.event-archive .event-list a {position: relative;}
.event-archive .event-list a .thum-box {position: relative;}

.event-archive .event-list a .thum-box .thum {
	aspect-ratio: 12 / 7;
	overflow: hidden;
}

.event-archive .event-list a .thum-box .thum img {
	height: 100%;
	object-fit: cover;
}

.event-archive .event-list a .thum-box .link-arrow {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 40px;
	height: 40px;
	transition: 0.5s;
}

.event-archive .event-list a .thum-box .link-arrow svg {transition: 0.5s;}

.event-archive .event-list a:hover {opacity: 1;}

.event-archive .event-list a:hover .thum-box .link-arrow {
	background-color: #fff;
	transition: 0.5s;
}

.event-archive .event-list a:hover .thum-box .link-arrow svg {
	fill: var(--blue);
	transition: 0.5s;
}

.event-archive .event-list a .contents .inner-box {
	padding: 30px 60px 30px 20px;
	position: relative;
	border-bottom: solid 1px;
}

.event-archive .event-list a .contents .inner-box .meta li {
	display: flex;
	align-items: flex-start;
	gap: 30px;
	margin-bottom: 15px;
	line-height: 1.5em;
}

.event-archive .event-list a .contents .inner-box .meta li:last-child {margin-bottom: 0;}

.event-archive .event-list a .contents .inner-box .meta li h5 {flex: 0 0 114px;}

.event-archive .event-list a .contents .inner-box .new {
	color: var(--gray2);
	position: absolute;
	top: 20px;
	right: 10px;
}

.event-archive .event-list a .contents h4 {padding: 20px;}

.event-archive .event-list a .now {
	width: 44px;
	position: absolute;
	top: -22px;
	left: 13px;
}

.event-archive .event-list a .finish {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.3);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}

.event-archive .event-list a .finish p {
	text-align: center;
	background-color: #fff;
	padding: 10px 30px;
}

@media screen and (max-width: 1024px) {
	.event-archive {gap: 40px;}
}

@media screen and (max-width: 640px) {
	.event-archive {grid-template-columns: repeat(1, 1fr);}
	.event-archive .event-list a .contents .inner-box .meta li h5 {flex: 0 0 100px;}
}

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

#event_inner

**********************************************************************************/
#event_inner {
	width: 100%;
	max-width: 1020px;
}

#event_inner .title {margin-bottom: 60px;}

#event_inner .title h3 {
	font-size: 22px;
	line-height: 1.7em;
	margin-bottom: 60px;
}

#event_inner .title .meta {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 120px;
	padding: 20px 12px;
	border-top: solid 1px;
	border-bottom: solid 1px;
}

#event_inner .title .meta li {
	display: flex;
	align-items: flex-start;
	gap: 30px;
}

#event_inner .box {margin-bottom: 130px;}

#event_inner .box .post {
	padding-bottom: 100px;
	line-height: 1.7em;
	border-bottom: solid 1px;
}

#event_inner .box .post img {
	width: auto;
	margin: 30px auto;
	display: block;
}

#event_inner .box .detail {margin-bottom: 100px;}

#event_inner .box .detail .detail-wrap {padding: 30px 30px 0;}

#event_inner .box .detail .box01 {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	margin-bottom: 35px;
	gap: 30px 50px;
}

#event_inner .box .detail .box01 li {
	display: flex;
	align-items: flex-start;
	gap: 25px;
	line-height: 1.5em;
}

#event_inner .box .detail .box01 li h5,#event_inner .box .detail .box02 h5 {flex: 0 0 144px;}

#event_inner .box .detail .box01 li .inner {position: relative;}
#event_inner .box .detail .box01 li .inner p {margin-right: 30px;}

#event_inner .box .detail .box01 li .inner .event-map {
	position: absolute;
	bottom: 5px;
}

#event_inner .box .detail .box01 li .inner .event-map img {width: 20px;}

#event_inner .box .detail .box02 {
	display: flex;
	align-items: flex-start;
	gap: 25px;
	line-height: 1.5em;
	margin-bottom: 35px;
}

#event_inner .box .detail .box03 h4 {
	text-align: center;
	color: #fff;
	background-color: var(--blue);
	padding: 5px 0 7px;
}

#event_inner .box .detail .box03 table {
	width: 100%;
	border-collapse: collapse;
}

#event_inner .box .detail .box03 table tr td {
	text-align: center;
	background-color: var(--blue2);
	border-right: solid 1px #fff;
	border-bottom: solid 1px #fff;
	padding: 15px 20px;
}

#event_inner .box .detail .box03 table tr td:first-child {
	text-align: left;
	white-space: nowrap;
}

#event_inner .box .detail .box03 table tr td:last-child {border-right: 0;}
#event_inner .box .detail .box03 table tr:last-child td {border-bottom: 0;}

#event_inner .box .link-reserv {
	display: flex;
	align-items: center;
	gap: 20px;
	font-weight: bold;
	width: fit-content;
	margin: 0 auto;
}

#event_inner .box .link-reserv span {
	background-color: var(--blue);
	border: solid 1px var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	transition: 0.5s;
}

#event_inner .box .link-reserv span svg {
	fill: #fff;
	transition: 0.5s;
}

#event_inner .box .link-reserv:hover {opacity: 1;}
#event_inner .box .link-reserv:hover span {
	background-color: #fff;
	transition: 0.5s;
}
#event_inner .box .link-reserv:hover span svg {
	fill: var(--blue);
	transition: 0.5s;
}


@media screen and (max-width: 1024px) {
	#event_inner .title .meta {gap: 20px 60px;}
}

@media screen and (max-width: 640px) {
	#event_inner .title h3 {
		font-size: 18px;
		margin-bottom: 40px;
	}
	#event_inner .box {margin-bottom: 80px;}
	#event_inner .box .post {padding-bottom: 60px;}
	#event_inner .box .detail {margin-bottom: 60px;}
	#event_inner .box .detail .box01 li h5,#event_inner .box .detail .box02 h5 {flex: 0 0 100px;}
	#event_inner .box .detail .box03 table tr td {padding: 10px;}
}

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

#about-concept

**********************************************************************************/
#about-concept {
	width: 90%;
	max-width: 1168px;
	margin: 0 auto 150px;
}

#about-concept .tag-line {margin-bottom: 50px;}

#about-concept .box {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
}

#about-concept .box .left h3 {
	font-size: 47px;
	font-weight: 300;
	line-height: 1.5em;
	margin-bottom: 50px;
	letter-spacing: 0.01em;
	font-feature-settings: "palt";
}

#about-concept .box .left .txt {
	line-height: 2em;
	text-align: justify;
	letter-spacing: 0.01em;
	font-feature-settings: "palt";
}

#about-concept .box .right .illust-swap {
	position: relative;
	max-width: 519px;
	flex: 0 0 auto;
}

#about-concept .box .right .illust-swap img {
	width: 100%;
	display: block;
	opacity: 0;
}

#about-concept .box .right .illust-swap img:first-child {
	position: relative;
}

#about-concept .box .right .illust-swap img:not(:first-child) {
	position: absolute;
	inset: 0;
}

#about-concept .box .right .illust-swap img.is-show {
	opacity: 1;
}

@media screen and (max-width: 1024px) {
	#about-concept .box {flex-direction: column;}
	#about-concept .box .right {margin: 0 auto;}
}

@media screen and (max-width: 820px) {
	#about-concept .box .left h3 {font-size: 40px;}
}

@media screen and (max-width: 640px) {
	#about-concept {margin: 0 auto 80px;}
	#about-concept .box {gap: 60px;}
	
	#about-concept .box .left h3 {
		font-size: 28px;
		margin-bottom: 30px;
	}
}

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

#about-precious

**********************************************************************************/
#about-precious {
	background: image-set(
		url("images/about/precious-bg.webp") type("image/webp") 1x,
		url("images/about/precious-bg.png") type("image/png") 1x
	);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	color: #fff;
	padding: 100px 0;
}

#about-precious .box {
	width: 90%;
	max-width: 1168px;
	margin: 0 auto;
}

#about-precious .box h3 {
	font-size: 30px;
	line-height: 1.5em;
	margin-bottom: 440px;
}

#about-precious .box ul {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 80px;
}

#about-precious .box ul li .h4-box {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

#about-precious .box ul li .h4-box h4 {font-size: 24px;}
#about-precious .box ul li .h4-box img {width: 54px;}

#about-precious .box ul li .txt {
	line-height: 1.7em;
	text-align: justify;
}

@media screen and (max-width: 1024px) {
	#about-precious .box h3 {margin-bottom: 300px;}
}

@media screen and (max-width: 820px) {
	#about-precious .box h3 {margin-bottom: 200px;}
	#about-precious .box ul {flex-direction: column;}
}

@media screen and (max-width: 640px) {
	#about-precious {padding: 80px 0;}
	#about-precious .box h3 {
		font-size: 24px;
		margin-bottom: 100px;
	}
	#about-precious .box ul {gap: 50px;}
	#about-precious .box ul li .h4-box h4 {font-size: 20px;}
	#about-precious .box ul li .h4-box img {width: 50px;}
}

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

#about-vision

**********************************************************************************/
#about-vision {margin: 150px auto;}

#about-vision .h3-box {
	text-align: center;
	margin-bottom: 150px;
}

#about-vision .h3-box h3 {
	font-size: 72px;
	margin-bottom: 15px;
}

#about-vision .intro {
	width: 90%;
	max-width: 1168px;
	margin: 0 auto 130px;
}

#about-vision .intro .tag-line {margin-bottom: 55px;}

#about-vision .intro h4 {
	font-size: 60px;
	font-weight: 300;
	margin-bottom: 30px;
}

#about-vision .intro .txt {
	line-height: 2em;
	text-align: justify;
}

@media screen and (max-width: 820px) {
	#about-vision .h3-box h3 {font-size: 60px;}
	#about-vision .intro h4 {font-size: 48px;}
}

@media screen and (max-width: 640px) {
	#about-vision {margin: 80px auto;}
	#about-vision .h3-box,#about-vision .intro {margin-bottom: 80px;}
	#about-vision .h3-box h3 {font-size: 48px;}
	#about-vision .intro .tag-line {margin-bottom: 30px;}
	#about-vision .intro h4 {font-size: 36px;}
}

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

#about-vision .ki

**********************************************************************************/
#about-vision .ki {
	display: flex;
	position: relative;
	margin-bottom: 150px;
}

#about-vision .ki .left-wrap {
	width: 100%;
	max-width: 1168px;
	margin: 0 auto;
}

#about-vision .ki .left-wrap .left {
	width: 100%;
	max-width: 60%;
}

#about-vision .ki .left-wrap .left li,#about-vision .kazoku .right-wrap .right li,#about-vision .chiiki .box ul li {margin-bottom: 60px;}
#about-vision .ki .left-wrap .left li:last-child,#about-vision .kazoku .right-wrap .right li:last-child,#about-vision .chiiki .box ul li:last-child {margin-bottom: 0;}

#about-vision .ki .left-wrap .left li h4,#about-vision .kazoku .right-wrap .right li h4,#about-vision .chiiki .box ul li h4 {
	font-size: 30px;
	font-weight: 300;
	padding-bottom: 5px;
	border-bottom: solid 1px;
	margin-bottom: 10px;
	width: fit-content;
}

#about-vision .ki .left-wrap .left li:first-child h4,#about-vision .kazoku .right-wrap .right li:first-child h4,#about-vision .chiiki .box ul li:first-child h4 {font-size: 48px;}

#about-vision .ki .left-wrap .left li .txt,#about-vision .kazoku .right-wrap .right li .txt,#about-vision .chiiki .box ul li .txt {
	line-height: 1.7em;
	text-align: justify;
}

#about-vision .ki .right {
	width: 40%;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	max-width: 800px;
}

#about-vision .ki .right .onimg {position: absolute;}

#about-vision .ki .right .illust01 {
	width: 10%;
	top: 15%;
	left: 22%;
}

#about-vision .ki .right .illust02 {
	width: 10%;
	top: 17%;
	right: 10%;
}

#about-vision .ki .right .illust03 {
	width: 20%;
	top: 41%;
	left: 40%;
}

#about-vision .ki .right .illust04 {
	width: 30%;
	left: 35%;
	bottom: 0;
}

#about-vision .ki .right .photo01 {
	width: 33%;
	top: 0;
	left: 35%;
}

#about-vision .ki .right .photo02 {
	width: 33%;
	top: 40%;
	right: 5%;
}

#about-vision .ki .right .photo03 {
	width: 33%;
	left: 0;
	bottom: 20%;
}

@media screen and (max-width: 1250px) {
	#about-vision .ki .left-wrap .left {padding-left: 5%;}
}

@media screen and (max-width: 820px) {
	#about-vision .ki .left-wrap .left {
		max-width: none;
		padding-right: 5%;
	}
	
	#about-vision .ki .left-wrap .left .img,#about-vision .kazoku .right-wrap .right .img,#about-vision .chiiki .box ul li .img {
		margin-top: 40px;
		display: block;
		aspect-ratio: 5 / 3;
		overflow: hidden;
	}
	
	#about-vision .ki .left-wrap .left .img img,#about-vision .kazoku .right-wrap .right .img img,#about-vision .chiiki .box ul li .img img {
		height: 100%;
		object-fit: cover;
	}
	
	#about-vision .ki .right,#about-vision .kazoku .left,#about-vision .chiiki .bg {display: none;}
}

@media screen and (max-width: 640px) {
	#about-vision .ki {margin-bottom: 80px;}
	#about-vision .ki .left-wrap .left li h4,#about-vision .kazoku .right-wrap .right li h4,#about-vision .chiiki .box ul li h4 {font-size: 24px;}
	#about-vision .ki .left-wrap .left li:first-child h4,#about-vision .kazoku .right-wrap .right li:first-child h4,#about-vision .chiiki .box ul li:first-child h4 {font-size: 30px;}
}

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

#about-vision .kazoku

**********************************************************************************/
#about-vision .kazoku {
	display: flex;
	position: relative;
	margin-bottom: 170px;
}

#about-vision .kazoku .left {
	width: 48%;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	max-width: 850px;
}

#about-vision .kazoku .left .onimg {position: absolute;}

#about-vision .kazoku .left .illust01 {
	width: 18%;
	top: 10%;
	left: 12%;
}

#about-vision .kazoku .left .illust02 {
	width: 15%;
	top: 25%;
	right: 5%;
}

#about-vision .kazoku .left .illust03 {
	width: 22%;
	left: 30%;
	bottom: 10%;
}

#about-vision .kazoku .left .photo01 {
	width: 33%;
	top: 0%;
	right: 27%;
}

#about-vision .kazoku .left .photo02 {
	width: 33%;
	right: 0;
	bottom: 0;
}

#about-vision .kazoku .right-wrap {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

#about-vision .kazoku .right-wrap .right {
	width: 100%;
	max-width: 52%;
	padding-left: 5%;
	margin: 0 0 0 auto;
}

@media screen and (max-width: 1300px) {
	#about-vision .kazoku .right-wrap .right {padding-right: 5%;}
}

@media screen and (max-width: 820px) {
	#about-vision .kazoku .right-wrap .right {max-width: none;}
}

@media screen and (max-width: 640px) {
	#about-vision .kazoku {margin-bottom: 80px;}
}

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

#about-vision .chiiki

**********************************************************************************/
#about-vision .chiiki {
	position: relative;
	margin-bottom: 190px;
}

#about-vision .chiiki .box {
	width: 90%;
	max-width: 1168px;
	margin: 0 auto;
	padding-bottom: 20%;
}

#about-vision .chiiki .box ul {width: 50%;}

#about-vision .chiiki .bg {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -1;
}

#about-vision .chiiki .bg .onimg {position: absolute;}

#about-vision .chiiki .bg .illust01 {
	top: 0%;
	left: 0;
}

#about-vision .chiiki .bg .illust02 {
	left: 0;
	bottom: 0;
}

#about-vision .chiiki .bg .photo01 {
	width: 14%;
	top: 0%;
	right: 17%;
}

#about-vision .chiiki .bg .photo02 {
	width: 14%;
	right: 17%;
	bottom: 0%;
}

@media screen and (max-width: 820px) {
	#about-vision .chiiki .box {padding-bottom: 0;}
	#about-vision .chiiki .box ul {width: 100%;}
}

@media screen and (max-width: 640px) {
	#about-vision .chiiki {margin-bottom: 100px;}
}

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

#about-vision .logo

**********************************************************************************/
#about-vision .logo {
	width: 90%;
	max-width: 1168px;
	margin: 0 auto;
}

#about-vision .logo .tag-line {margin-bottom: 70px;}

#about-vision .logo .tag-line span {
	font-weight: normal;
	font-style: normal;
	letter-spacing: 0.01em;
}

#about-vision .logo .box01 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 80px;
	margin-bottom: 60px;
}

#about-vision .logo .box01 img {max-width: 130px;}

#about-vision .logo .box01 p {
	font-size: 18px;
	line-height: 2em;
}

#about-vision .logo .box02 {
	padding: 30px 0;
	border-top: solid 1px;
	border-bottom: solid 1px;
	width: fit-content;
	margin: 0 auto;
}

#about-vision .logo .box02 .txt {
	line-height: 2em;
	text-align: justify;
	width: fit-content;
}

@media screen and (max-width: 640px) {
	#about-vision .logo .tag-line {margin-bottom: 50px;}
	#about-vision .logo .box01 {
		flex-direction: column;
		gap: 40px;
	}
	#about-vision .logo .box01 p {font-size: 16px;}
}

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

.under-box

**********************************************************************************/
.under-box {
	width: 90%;
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 50px;
}

.under-box .side-tab {border-bottom: solid 1px;}

.under-box .side-tab li {
	margin-bottom: 30px;
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	white-space: nowrap;
}

/* 共通：前に四角を追加 */
.under-box .side-tab li::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 1px solid var(--blue);
}

/* アクティブ時（親liが.active） */
.under-box .side-tab li.active::before {
	background-color: var(--blue);
	border: none;
	position: relative;
}

.under-box .under-inner {
	width: 100%;
	max-width: 1020px;
}

@media screen and (max-width: 640px) {
	.under-box .side-tab {border-bottom: none;}
	.under-box .side-tab li:last-child {margin-bottom: 0;}
	.under-box .side-tab li::before {border: 1px solid #fff;}
	.under-box .side-tab li.active::before {background-color: #fff;}
}

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

.under-intro

**********************************************************************************/
.under-intro {
	display: flex;
	justify-content: space-between;
	gap: 70px;
	margin-bottom: 60px;
}

.under-intro .left {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 90px;
}

.under-intro .left h3 {
	font-size: 30px;
	letter-spacing: 0.05em;
	line-height: 1.5em;
	margin-bottom: 30px;
}

.under-intro .right {
	flex: 1;
	overflow: hidden;
	position: relative;
}

.under-intro .right img {
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 50%;
    left: 0;
	right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	margin: 0 auto;
}

@media screen and (max-width: 820px) {
	.under-intro {flex-direction: column;}
	.under-intro .left {gap: 50px;}
	.under-intro .left h3 {margin-bottom: 0;}
	.under-intro .right {aspect-ratio: 5 / 2;}
}

@media screen and (max-width: 640px) {
	.under-intro {
		gap: 50px;
		margin-bottom: 40px;
	}
	
	.under-intro .left {gap: 30px;}
	.under-intro .left h3 {font-size: 22px;}
}

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

.under-inner-box

**********************************************************************************/
.under-inner-box {margin-bottom: 150px;}
.under-inner-box.no-bottom {margin-bottom: 0;}

@media screen and (max-width: 640px) {
	.under-inner-box {margin-bottom: 80px;}
}

.under-inner-box .txt {
	line-height: 2em;
	text-align: justify;
}

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

#under-link

**********************************************************************************/
#under-link {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	gap: 60px;
}

#under-link li {text-align: center;}

#under-link li h4 {
	position: relative;
	padding: 0 40px;
}

#under-link li h4::before, #under-link li h4::after {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 30px;
	height: 1px;
	background-color: var(--blue);
}

#under-link li h4::before {left:0;}
#under-linkk li h4::after {right: 0;}

#under-link li .more-arrow {margin: 20px auto 0;}

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

.company-table

**********************************************************************************/
.company-table {
	width: 100%;
	border-collapse: collapse;
}

.company-table tr th,.company-table tr td {
	border-bottom: solid 1px;
	padding: 15px 30px;
	line-height: 1.7em;
}

.company-table tr:first-child th,.company-table tr:first-child td {border-top: solid 1px;}
.company-table tr th {
	white-space: nowrap;
	font-weight: normal;
}

@media screen and (max-width: 640px) {
	.company-table tr th {padding: 10px 0 10px 20px;}
	.company-table tr td {padding: 10px 20px 10px 30px;}
}

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

#company-info

**********************************************************************************/
#company-info .box {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 60px;
	margin-top: 70px;
}

#company-info .box h4 {
	font-size: 18px;
	margin-top: 15px;
	margin-left: 20px;
}

#company-info .box02 {margin-top: 70px;}

#company-info .box02 a {margin: 0 auto;}

@media screen and (max-width: 640px) {
	.company-inner-box {margin-bottom: 80px;}
	
	#company-info .box {
		grid-template-columns: repeat(1, 1fr);
		gap: 40px;
		margin-top: 50px;
	}
	
	#company-info .box h4 {font-size: 16px;}
	
	#company-info .box02 {margin-top: 50px;}
}

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

#company-concept

**********************************************************************************/
#company-concept .under-intro .left {
    gap: 50px;
}

#company-concept .box li {
	display: flex;
	align-items: center;
	gap: 50px;
	margin-bottom: 30px;
}

#company-concept .box li h4 {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 0 0 200px;
	white-space: nowrap;
}

#company-concept .box li h4 span {
	font-size: 24px;
	width: 100px;
}

#company-concept .box li p {
	font-size: 22px;
	line-height: 1.5em;
}

#company-concept .box li:last-child {margin-bottom: 0;}

@media screen and (max-width: 640px) {
	#company-concept .box li {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	
	#company-concept .box li h4 {flex: 0;}
	
	#company-concept .box li h4 span {
		font-size: 20px;
		width: 80px;
	}

	#company-concept .box li p {font-size: 16px;}
}

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

#company-promise

**********************************************************************************/
#company-promise .box {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 50px 20px;
}

#company-promise .box li .head {
	display: flex;
	align-items: flex-end;
	gap: 15px;
	padding: 0 15px 15px;
	border-bottom: solid 1px;
}

#company-promise .box li .head .num {font-size: 30px;}
#company-promise .box li .head .eng {color: var(--gray2);}
#company-promise .box li .head h4 {font-size: 18px;}

#company-promise .box li .txt {
	line-height: 1.7em;
	padding: 15px 15px 0;
}

@media screen and (max-width: 640px) {
	#company-promise .box {
		grid-template-columns: repeat(1, 1fr);
		gap: 40px;
	}
	#company-promise .box li .head .num {font-size: 24px;}
	#company-promise .box li .head h4 {font-size: 16px;}
}

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

#staff-fv

**********************************************************************************/
#staff-fv {
	width: 90%;
	margin: 0 auto;
	text-align: center;
}

#staff-fv img {max-width: 973px;}

#staff-fv h3 {
	font-size: 72px;
	font-weight: bold;
	letter-spacing: 0.2em;
	margin-top: 100px;
}

@media screen and (max-width: 640px) {
	#staff-fv h3 {
		font-size: 50px;
		margin-top: 60px;
	}
}

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

#staff-list

**********************************************************************************/
#staff-list {
	width: 90%;
	margin: 220px auto 200px;
	max-width: 1180px;
}

#staff-list .staff-list-box {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

#staff-list .staff-box {
	background-color: var(--gray4);
	border-radius: 30px;
	position: relative;
}

#staff-list .staff-box .txt {line-height: 2em;}

#staff-list .staff-box-mini {padding: 50px;}

#staff-list .staff-box-mini .name h4 {
	font-size: 24px;
	margin-bottom: 18px;
}

#staff-list .genba-box {
	aspect-ratio: 3.2 / 4;
	overflow: hidden;
}

#staff-list .genba-box img {
	height: 100%;
	object-fit: cover;
}

#staff-list .staff01 {padding: 80px 40px 60px;}

#staff-list .staff01 .photo-block {
	max-width: 290px;
	width: 100%;
	aspect-ratio: 2.6 / 5;
	position: absolute;
	left: 22px;
	bottom: 0;
}

#staff-list .photo-block img {
	position: absolute;
	inset: 0;
	height: 100%;
	object-fit: contain;
}

#staff-list .staff01 .text-block {margin-left: 27%;}

#staff-list .staff01 .text-block .name {
	display: flex;
	align-items: flex-end;
	gap: 14px;
}

#staff-list .staff01 .text-block .name h4 {font-size: 36px;}

#staff-list .staff01 .text-block img {
	max-width: 404px;
	display: block;
	margin-top: 50px;
	margin-bottom: 40px;
}

#staff-list .staff01 .right-img {
	max-width: 474px;
	position: absolute;
	right: -22px;
	bottom: 30px;
}

#staff-list .staff-block02 ul,#staff-list .staff-block04 ul {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 14px;
}

#staff-list .staff02,#staff-list .staff04 {margin-right: 20px;}

#staff-list .staff02 .kakugen {
	max-width: 180px;
	margin-top: 55px;
}

#staff-list .staff02 .photo-block {
	max-width: 296px;
	width: 100%;
	aspect-ratio: 3.2 / 5;
	position: absolute;
	right: -99px;
	bottom: -54px;
}

#staff-list .staff-block03 ul {
	display: grid;
	grid-template-columns: 1fr 1fr 1.3fr;
	gap: 14px;
}

#staff-list .staff03,#staff-list .staff05 {margin-left: 20px;}

#staff-list .staff03 .kakugen {
	max-width: 260px;
	margin-top: 70px;
	margin-left: -20px;
}

#staff-list .staff03 .photo-block {
	max-width: 178px;
	width: 100%;
	aspect-ratio: 2.5 / 5;
	position: absolute;
	right: -15px;
	bottom: 0;
}

#staff-list .staff04 .kakugen {
	max-width: 300px;
	margin-top: 65px;
	margin-left: -10px;
}

#staff-list .staff04 .photo-block {
	max-width: 172px;
	width: 100%;
	aspect-ratio: 2.3 / 5;
	position: absolute;
	right: -20px;
	bottom: 0;
}

#staff-list .staff-block05 ul {
	display: grid;
	grid-template-columns: 2fr 1.3fr;
	gap: 14px;
}

#staff-list .genba07 {aspect-ratio: 5 / 3;}

#staff-list .staff05 .kakugen {
	max-width: 256px;
	margin-top: 55px;
}

#staff-list .staff05 .photo-block {
	max-width: 220px;
	width: 100%;
	aspect-ratio: 2.5 / 5;
	position: absolute;
	right: -70px;
	bottom: -40px;
}

#staff-list .staff06 {padding: 50px 40px;}

#staff-list .staff06 .photo-block {
	max-width: 304px;
	width: 100%;
	aspect-ratio: 4 / 5;
	position: absolute;
	left: -104px;
	bottom: 26px;
}

#staff-list .staff06 .text-block {margin-left: 19%;}

#staff-list .staff06 .text-block .name h4 {
	font-size: 24px;
	margin-bottom: 18px;
}

#staff-list .staff06 .text-block img {
	max-width: 400px;
	display: block;
	margin-top: 40px;
	margin-bottom: 40px;
}

#staff-list .staff06 .right-img {
	max-width: 528px;
	position: absolute;
	right: -32px;
	bottom: -20px;
}

@media screen and (max-width: 1410px) {
	#staff-list .staff06 .photo-block {
		width: 25%;
		left: -70px;
	}
}

@media screen and (max-width: 1280px) {
	#staff-list .staff01 .text-block {margin-left: 30%;}
	#staff-list .staff01 .right-img {
		width: 36%;
		top: -80px;
		bottom: auto;
	}
	
	#staff-list .staff02 .photo-block {width: 66%;}
	
	#staff-list .staff03 .kakugen {width: 80%;}
	#staff-list .staff03 .photo-block {width: 42%;}
	
	#staff-list .staff04 .kakugen {width: 88%;}
	#staff-list .staff04 .photo-block {width: 40%;}
	
	#staff-list .staff05 .kakugen {
		width: 75%;
		margin-top: 45px;
	}
	#staff-list .staff05 .photo-block {
		width: 44%;
		right: -20px;
	}
	
	#staff-list .staff06 .photo-block {
		width: 27%;
		left: -30px;
	}
	#staff-list .staff06 .text-block {margin-left: 24%;}
	#staff-list .staff06 .text-block img {width: 46%;}
	#staff-list .staff06 .right-img {width: 42%;}
}

@media screen and (max-width: 1130px) {
	#staff-list .staff01 .photo-block {width: 25%;}
}

@media screen and (max-width: 1105px) {
	#staff-list .staff06 .text-block img {width: 50%;}
	#staff-list .staff06 .right-img {
		top: -20px;
		bottom: auto;
	}
}

@media screen and (max-width: 1024px) {
	#staff-list .staff-block02 ul,#staff-list .staff-block04 ul {grid-template-columns: 1.3fr 1fr;}
	#staff-list .staff-block02 .genba02,#staff-list .staff-block03 .genba03,#staff-list .staff-block04 .genba06,#staff-list .staff-block05 .genba07 {display: none;}
	
	#staff-list .staff-block02-02.sp,#staff-list .staff-block05 .genba06.sp,#staff-list .staff-block05-02.sp {display: block;}
	#staff-list .staff-block02-02 ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px;
	}
	
	#staff-list .staff-block03 ul,#staff-list .staff-block05 ul {grid-template-columns: 1fr 1.3fr;}
}

@media screen and (max-width: 820px) {
	#staff-list .staff01 .photo-block {width: 30%;}
	#staff-list .staff01 .text-block {margin-left: 35%;}
	#staff-list .staff01 .right-img {
		width: 40%;
		top: -120px;
	}
	#staff-list .staff06 .photo-block {width: 32%;}
	#staff-list .staff06 .text-block {margin-left: 29%;}
	#staff-list .staff06 .text-block img {width: 60%;}
}

@media screen and (max-width: 768px) {
	#staff-list .staff01 {padding: 150px 30px 60px;}
	#staff-list .staff01 .right-img {
		width: 50%;
		top: -100px;
	}
}

@media screen and (max-width: 640px) {
	#staff-list {margin: 100px auto;}
	#staff-list .staff-box {border-radius: 20px;}
	#staff-list .staff-box-mini {padding: 40px 30px;}
	#staff-list .staff-box-mini .name h4 ,#staff-list .staff06 .text-block .name h4{font-size: 22px;}
	#staff-list .staff01 {padding: 40px 30px 80%;}
	#staff-list .staff01 .photo-block {width: 40%;}
	#staff-list .staff01 .text-block {margin-left: 0;}
	#staff-list .staff01 .text-block .name h4 {font-size: 30px;}
	#staff-list .staff01 .right-img {
		top: auto;
		bottom: 50px;
	}
	
	#staff-list .staff-block02 ul,#staff-list .staff-block02-02 ul,#staff-list .staff-block03 ul,#staff-list .staff-block04 ul,#staff-list .staff-block05 ul {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	#staff-list .staff02,#staff-list .staff04 {margin-right: 0;}
	#staff-list .staff02 .kakugen {width: 55%;}
	#staff-list .staff02 .photo-block {
		width: 50%;
		top: -20px;
		right: -20px;	
		bottom: auto;
	}
	
	#staff-list .staff03,#staff-list .staff05 {margin-left: 0;}
	#staff-list .staff03 .kakugen {
		width: 58%;
		margin-top: 50px;
		margin-left: 0;
	}
	
	#staff-list .staff04 .kakugen {
		width: 75%;
		margin-left: 0;
	}
	
	#staff-list .staff04 .photo-block {bottom: -30px;}
	
	#staff-list .staff05 .kakugen {
		width: 72%;
		margin-top: 40px;
	}
	#staff-list .staff05 .photo-block {
		width: 40%;
		right: -10px;
		bottom: -70px;
	}
	
	#staff-list .staff06 {padding: 40px 30px 75%;}
	#staff-list .staff06 .photo-block {
		width: 50%;
		left: -10px;
		bottom: 10px;
	}
	#staff-list .staff06 .text-block {margin-left: 0;}
	#staff-list .staff06 .text-block img {width: 100%;}
	#staff-list .staff06 .right-img {
		width: 55%;
		top: auto;
		right: -10px;
		bottom: 80px;
	}
}

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

#customhouse-point

**********************************************************************************/
#customhouse-point .box li .txt {line-height: 1.7em;}

#customhouse-point .box {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 60px 40px;
	margin-top: 60px;
}

#customhouse-point .box li .h4-box {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 40px;
	margin-bottom: 45px;
	position: relative;
}

#customhouse-point .box li .h4-box .point {
	font-size: 18px;
	font-weight: bold;
}

#customhouse-point .box li .h4-box h4 {
	font-size: 25px;
	line-height: 1.5em;
	margin-top: -5px;
}

#customhouse-point .box li .h4-box::before {
	content: "";
	width: 1px;
	height: 80px;
	background-color: var(--blue);
	position: absolute;
	top: -90px;
	left: 40px;
}


@media screen and (max-width: 640px) {
	#customhouse-point .box {
		grid-template-columns: repeat(1, 1fr);
		gap: 50px;
	}
	
	#customhouse-point .box li .h4-box {
		margin-top: 30px;
		margin-bottom: 30px;
	}
	
	#customhouse-point .box li .h4-box .point {font-size: 16px;}
	#customhouse-point .box li .h4-box h4 {font-size: 22px;}
	
	#customhouse-point .box li .h4-box::before {
		height: 60px;
		top: -60px;
	}
}

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

#customhouse-spec

**********************************************************************************/
#customhouse-spec .box {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 88px;
}

#customhouse-spec .box .left p {
	line-height: 2em;
	text-align: justify;
	margin-bottom: 60px;
}

#customhouse-spec .box .left .more-arrow {margin: 0 0 0 auto;}

#customhouse-spec .box .right {max-width: 480px;}

@media screen and (max-width: 1200px) {
	#customhouse-spec .box .right {width: 40%;}
}

@media screen and (max-width: 820px) {
	#customhouse-spec .box {
		flex-direction: column;
		align-items: center;
		gap: 70px;
	}
	
	#customhouse-spec .box .left p {margin-bottom: 40px;}
	#customhouse-spec .box .right {width: 100%;}
}

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

#customhouse-works

**********************************************************************************/
#customhouse-works .head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 100px;
	margin-bottom: 60px;
}

#customhouse-works .head .tag-line span {
	font-weight: normal;
	font-style: normal;
	letter-spacing: 0.01em;
}

#customhouse-works .more-arrow.sp {display: none;}

@media screen and (max-width: 820px) {
	#customhouse-works .more-arrow.pc {display: none;}
	
	#customhouse-works .more-arrow.sp {
		display: flex;
		margin: 60px 0 0 auto;
	}
}

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

#tsugiplus-tsugiplus

**********************************************************************************/
#tsugiplus-tsugiplus h3 {max-width: 214px;}

#tsugiplus-tsugiplus .anker-link {
	display: flex;
	gap: 70px;
	margin-top: 70px;
}

#tsugiplus-tsugiplus .anker-link li {flex: 1;}
#tsugiplus-tsugiplus .anker-link li:last-child {flex: 1.5;}

#tsugiplus-tsugiplus .anker-link li a {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-align: center;
	gap: 30px;
}

#tsugiplus-tsugiplus .anker-link li a .main {
	display: block;
	margin-top: auto;
}

#tsugiplus-tsugiplus .anker-link li a .inner {
	margin: 0 auto;
	padding-bottom: 15px;
	border-bottom: solid 1px;
	width: fit-content;
}

#tsugiplus-tsugiplus .anker-link li a .inner h4 {
	font-weight: bold;
	font-size: 36px;
	margin-bottom: 15px;
}

#tsugiplus-tsugiplus .anker-link li a .inner p {line-height: 1.5em;}

#tsugiplus-tsugiplus .anker-link li a .ank {
	margin: 20px auto 0;
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
	width: fit-content;
}

#tsugiplus-tsugiplus .anker-link li a .ank img {
	width: 20px;
	border: solid 1px;
	transition: 0.5s;
}

#tsugiplus-tsugiplus .anker-link li a .ank .hover {
	opacity: 0;
	position: absolute;
	top: 0;
	right: 0;
}

#tsugiplus-tsugiplus .anker-link li a:hover {opacity: 1;}

#tsugiplus-tsugiplus .anker-link li a:hover .hover {
	opacity: 1;
	transition: 0.5s;
}

@media screen and (max-width: 1024px) {
	#tsugiplus-tsugiplus .anker-link {gap: 50px;}
}

@media screen and (max-width: 640px) {
	#tsugiplus-tsugiplus h3 {max-width: 160px;}
	#tsugiplus-tsugiplus .anker-link {
		flex-direction: column;
		align-items: center;
		margin-top: 50px;
	}
	
	#tsugiplus-tsugiplus .anker-link li a {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0;
		align-items: center;
	}
	
	#tsugiplus-tsugiplus .anker-link li a .main {margin: 0 auto;}
	#tsugiplus-tsugiplus .anker-link li:first-child a .main,#tsugiplus-tsugiplus .anker-link li:nth-child(2) a .main {width: 70%;}
	
	#tsugiplus-tsugiplus .anker-link li a .inner h4 {font-size: 30px;}
}

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

.tsugiplus-box .plus-intro

**********************************************************************************/
.tsugiplus-box .plus-intro {margin-bottom: 80px;}

.tsugiplus-box .plus-intro .main {
	aspect-ratio: 4 / 1;
	overflow: hidden;
}

.tsugiplus-box .plus-intro .main img {
	height: 100%;
	object-fit: cover;
}

.tsugiplus-box .plus-intro .midashi {
	width: 95%;
	margin: 45px auto 0;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	position: relative;
}

.tsugiplus-box .plus-intro .midashi::before {
	content: "";
	width: 1px;
	height: 80px;
	background-color: var(--blue);
	position: absolute;
	top: -90px;
	left: 20px;
}

.tsugiplus-box .plus-intro .midashi h3 {
	font-size: 48px;
	font-weight: bold;
	display: flex;
	align-items: center;
	gap: 20px;
}

.tsugiplus-box .plus-intro .midashi h3 span {
	font-size: 18px;
	font-weight: normal;
	letter-spacing: 0.05em;
}

.tsugiplus-box .plus-intro .midashi dl {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tsugiplus-box .plus-intro .midashi dl dt {
	color: #fff;
	background-color: var(--blue);
	padding: 3px 10px 5px;
}

.tsugiplus-box .plus-intro .concept {
	display: flex;
	align-items: flex-start;
	gap: 30px;
	margin-top: 40px;
}

.tsugiplus-box-mplus .plus-intro .concept {align-items: center;}

.tsugiplus-box .plus-intro .concept .left {
	flex: 1;
	margin-top: 50px;
}

.tsugiplus-box-mplus .plus-intro .concept .left {margin-top: 0;}

.tsugiplus-box .plus-intro .concept .left h4 {
	font-size: 24px;
	margin-bottom: 25px;
}

.tsugiplus-box .plus-intro .concept .right {
	flex: 0 0 52%;
	aspect-ratio: 5 / 4;
	overflow: hidden;
}

.tsugiplus-box .plus-intro .concept .right img {
	height: 100%;
	object-fit: cover;
}

.tsugiplus-box .plus-intro .plus-anker {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 80px;
	margin: 100px auto 0;
}

.tsugiplus-box .plus-intro .plus-anker li a {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tsugiplus-box .plus-intro .plus-anker li a h4 {
	font-size: 18px;
	padding: 3px 10px 5px;
	border: solid 1px;
	transition: 0.5s;
}

.tsugiplus-box .plus-intro .plus-anker li a .box {
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
}

.tsugiplus-box .plus-intro .plus-anker li a .box img {
	width: 20px;
	border: solid 1px;
	transition: 0.5s;
}

.tsugiplus-box .plus-intro .plus-anker li a .box .hover {
	opacity: 0;
	position: absolute;
	top: 0;
	right: 0;
}

.tsugiplus-box .plus-intro .plus-anker li a:hover {opacity: 1;}

.tsugiplus-box .plus-intro .plus-anker li a:hover h4 {
	color: #fff;
	background-color: var(--blue);
	transition: 0.5s;
}

.tsugiplus-box .plus-intro .plus-anker li a:hover .box .hover {
	opacity: 1;
	transition: 0.5s;
}

@media screen and (max-width: 1280px) {
	.tsugiplus-box .plus-intro .plus-anker {gap: 60px;}
}

@media screen and (max-width: 1024px) {
	.tsugiplus-box-mplus .plus-intro .concept {align-items: flex-start;}
	.tsugiplus-box .plus-intro .concept .left {margin-top: 0;}
}

@media screen and (max-width: 820px) {
	.tsugiplus-box .plus-intro .plus-anker {
		flex-direction: column;
		gap: 40px;
	}
}

@media screen and (max-width: 640px) {
	.tsugiplus-box .plus-intro .main {aspect-ratio: 5 / 2;}
	
	.tsugiplus-box .plus-intro .midashi {
		margin: 35px auto 0;
		flex-direction: column;
	}
	.tsugiplus-box .plus-intro .midashi::before {
		height: 60px;
		top: -70px;
		left: 17px;
	}
	.tsugiplus-box .plus-intro .midashi h3 {font-size: 36px;}
	.tsugiplus-box .plus-intro .midashi h3 span {font-size: 16px;}
	
	.tsugiplus-box .plus-intro .concept {flex-direction: column;}
	.tsugiplus-box .plus-intro .concept .left h4 {font-size: 20px;}
	.tsugiplus-box .plus-intro .concept .right {
		flex: 0;
		aspect-ratio: 5 / 3;
	}
	
	.tsugiplus-box .plus-intro .plus-anker {margin: 80px auto 0;}
	.tsugiplus-box .plus-intro .plus-anker li a h4 {font-size: 16px;}
	.tsugiplus-box .plus-intro .plus-anker li a {flex-direction: column;}
}

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

.tsugiplus-box .plus-spec

**********************************************************************************/
.tsugiplus-box .plus-spec {margin-bottom: 70px;}

.tsugiplus-box .plus-spec .midashi,.tsugiplus-box .plus-madori .midashi {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 60px;
}

.tsugiplus-box .plus-spec .midashi::after,.tsugiplus-box .plus-madori .midashi::after {
	content: "";
	width: 100%;
	height: 1px;
	background-color: var(--blue);
}

.tsugiplus-box .plus-spec .midashi h4,.tsugiplus-box .plus-spec .midashi p,.tsugiplus-box .plus-madori .midashi h4,.tsugiplus-box .plus-madori .midashi p {white-space: nowrap;}
.tsugiplus-box .plus-spec .midashi h4,.tsugiplus-box .plus-madori .midashi h4 {margin-top: 3px;}
.tsugiplus-box .plus-spec .midashi p,.tsugiplus-box .plus-madori .midashi p {font-size: 18px;}
.tsugiplus-box .plus-spec .midashi img {width: 14px;}

.tsugiplus-box .plus-spec .photo-box {
	display: flex;
	gap: 10px;
	margin-bottom: 30px;
}

.tsugiplus-box .plus-spec .photo-box .plus-slider {
	flex: 0 0 70%;
	overflow: hidden;
}

.plus-slider .slick-list,
.plus-slider .slick-track,
.plus-slider .slick-slide {
	height: 100%;
}

.plus-slider .slick-list{
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}
.plus-slider .slick-list .slick-track{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

.tsugiplus-box .plus-spec .photo-box .plus-slider img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tsugiplus-box .plus-spec .photo-box .plus-thumbnail {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.tsugiplus-box .plus-spec .photo-box .plus-thumbnail li {
	position: relative;
	cursor: pointer;
}

.tsugiplus-box .plus-spec .photo-box .plus-thumbnail li img {
	display: block;
	width: 100%;
	height: auto;
}

.tsugiplus-box .plus-spec .photo-box .plus-thumbnail li::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 1;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.tsugiplus-box .plus-spec .photo-box .plus-thumbnail li.is-current {border: solid 2px;}

.tsugiplus-box .plus-spec .photo-box .plus-thumbnail li.is-current::before {opacity: 0;}

.tsugiplus-box .plus-spec .vr {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.tsugiplus-box .plus-spec .vr iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.tsugiplus-box .plus-spec .vr-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 20px 20px 0 auto;
	position: relative;
	width: fit-content;
}

.tsugiplus-box .plus-spec .vr-btn img {
	width: 20px;
	border: solid 1px;
	transition: 0.5s;
}

.tsugiplus-box .plus-spec .vr-btn .hover {
	opacity: 0;
	position: absolute;
	top: 0;
	right: 0;
}

.tsugiplus-box .plus-spec .vr-btn:hover {opacity: 1;}

.tsugiplus-box .plus-spec .vr-btn:hover .hover {
	opacity: 1;
	transition: 0.5s;
}

@media screen and (max-width: 640px) {
	.tsugiplus-box .plus-spec .midashi,.tsugiplus-box .plus-madori .midashi {margin-bottom: 30px;}
	.tsugiplus-box .plus-spec .midashi p,.tsugiplus-box .plus-madori .midashi p {font-size: 16px;}
	
	.tsugiplus-box .plus-spec .photo-box {flex-direction: column;}
	.tsugiplus-box .plus-spec .photo-box .plus-slider {
		flex: 1;
		aspect-ratio: 5 / 3;
	}
	.tsugiplus-box .plus-spec .photo-box .plus-thumbnail {
		grid-template-columns: repeat(5, 1fr);
		flex: 0;
	}
}

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

.tsugiplus-box .plus-special-option

**********************************************************************************/
.tsugiplus-box .plus-special-option {margin-bottom: 100px;}

.tsugiplus-box .plus-special-option h4 {
	font-size: 24px;
	line-height: 1.5em;
	letter-spacing: 0.05em;
	padding-bottom: 15px;
	border-bottom: solid 1px;
	margin-bottom: 20px;
}

.tsugiplus-box .plus-special-option .size01 {font-size: 18px;}
.tsugiplus-box .plus-special-option .size02 {font-size: 20px;}

.tsugiplus-box .plus-special-option table tr th,.tsugiplus-box .plus-special-option table td {
	padding-bottom: 15px;
	vertical-align: middle;
}

.tsugiplus-box .plus-special-option table tr th {font-weight: normal;}

.tsugiplus-box .plus-special-option table tr:not(:first-child) th {padding-right: 80px;}

.tsugiplus-box .plus-special-option table tr:first-child th p {
	color: #fff;
	background-color: var(--blue);
	padding: 3px 10px 5px;
	width: fit-content;
}

.tsugiplus-box .plus-special-option table tr .option-spec {
	display: grid;
	grid-template-columns: auto minmax(5rem, 1fr);
	column-gap: 10px;
	align-items: center;
}

.tsugiplus-box .plus-special-option table tr .option-spec::after {
	content: "";
	height: 1px;
	background-color: var(--blue);
	align-self: center;
}

.tsugiplus-box .plus-special-option table tr .price {padding-left: 10px;}

@media screen and (max-width: 1024px) {
	.tsugiplus-box .plus-special-option table tr:not(:first-child) th {padding-right: 40px;}
}

@media screen and (max-width: 640px) {
	.tsugiplus-box .plus-special-option {margin-bottom: 80px;}
	
	.tsugiplus-box .plus-special-option h4 {font-size: 20px;}
	.tsugiplus-box .plus-special-option .size01 {font-size: 16px;}
	.tsugiplus-box .plus-special-option .size02 {font-size: 18px;}
	.tsugiplus-box .plus-special-option table tr:not(:first-child) th {padding-right: 20px;}
	.tsugiplus-box .plus-special-option table tr .option-spec {grid-template-columns: auto minmax(1rem, 1fr);}
}

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

.tsugiplus-box .plus-madori

**********************************************************************************/
.tsugiplus-box .plus-madori h5 {
	font-size: 24px;
	margin-bottom: 25px;
}

.tsugiplus-box .plus-madori .txt {margin-bottom: 60px;}

.tsugiplus-box .plus-madori .madori-img {
	margin: 0 auto;
	max-width: 800px;
}

.tsugiplus-box .plus-madori .madori-box {
	display: flex;
	gap: 30px;
}

.tsugiplus-box .plus-madori .madori-box .madori-img {max-width: 540px;}

@media screen and (max-width: 640px) {
	.tsugiplus-box .plus-madori h5 {font-size: 20px;}
	
	.tsugiplus-box .plus-madori .madori-box {
		flex-direction: column;
		gap: 0;
	}
}

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

#tsugiplus-customize

**********************************************************************************/
#tsugiplus-customize {
	padding-bottom: 100px;
	border-bottom: solid 1px;
	margin-bottom: 60px;
}

#tsugiplus-customize .under-intro .left {gap: 50px;}

#tsugiplus-customize .customize-box {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 60px 40px;
	margin-top: 100px;
}

#tsugiplus-customize .customize-box .inner {min-width: 0;}

#tsugiplus-customize .customize-box .inner .midashi {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 30px;
}

#tsugiplus-customize .customize-box .inner .midashi h4 {
	font-size: 18px;
	white-space: nowrap;
}

#tsugiplus-customize .customize-box .inner .midashi p {
	font-size: 14px;
	white-space: nowrap;
}

#tsugiplus-customize .customize-box .inner .midashi .inner-box {
	display: flex;
	align-items: center;
	gap: 10px;
}

#tsugiplus-customize .customize-box .inner .midashi .normal {
	padding: 3px 8px 5px;
	color: #fff;
	background-color: var(--blue);
}

#tsugiplus-customize .customize-box .inner .midashi .option {
	padding: 3px 8px 5px;
	border: solid 1px;
}

#tsugiplus-customize .customize-box .inner .midashi::after {
	content: "";
	width: 100%;
	height: 1px;
	background-color: var(--blue);
}

#tsugiplus-customize .customize-box .inner ul {
	display: grid;
	gap: 12px;
}
#tsugiplus-customize .customize-box .inner .column2 {grid-template-columns: repeat(2, 1fr);}
#tsugiplus-customize .customize-box .inner .column3 {grid-template-columns: repeat(3, 1fr);}
#tsugiplus-customize .customize-box .inner .column4 {grid-template-columns: repeat(4, 1fr);}
#tsugiplus-customize .customize-box .inner .column5 {grid-template-columns: repeat(5, 1fr);}
#tsugiplus-customize .customize-box .inner .no-column {display: block;}

#tsugiplus-customize .customize-box .inner ul li {min-width: 0;}

#tsugiplus-customize .customize-box .inner .comment {
	font-size: 14px;
	text-align: right;
	margin-top: 10px;
}

#tsugiplus-customize .customize-box .inner .customize-txt {
	line-height: 1.5em;
	margin-top: 20px;
}

#tsugiplus-customize .customize-box .inner .customize-txt span {font-size: 14px;}

@media screen and (max-width: 640px) {
	#tsugiplus-customize {
		padding-bottom: 80px;
		margin-bottom: 40px;
	}
	
	#tsugiplus-customize .customize-box {
		grid-template-columns: repeat(1, 1fr);
		margin-top: 60px;
	}
	
	#tsugiplus-customize .customize-box .inner .midashi {
		flex-direction: column;
		align-items: flex-start;
	}
	#tsugiplus-customize .customize-box .inner .midashi::after {content: none;}
	#tsugiplus-customize .customize-box .inner .midashi h4 {
		font-size: 16px;
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
	}
	#tsugiplus-customize .customize-box .inner .midashi h4::after {
		content: "";
		width: 100%;
		height: 1px;
		background-color: var(--blue);
	}
	#tsugiplus-customize .customize-box .inner .midashi p,#tsugiplus-customize .customize-box .inner .comment,#tsugiplus-customize .customize-box .inner .customize-txt span {font-size: 12px;}
	#tsugiplus-customize .customize-box .inner ul {gap: 8px;}
}

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

#renovation-about

**********************************************************************************/
#renovation-about .under-intro .left {gap: 50px;}

:root {
	--pos: 50%;
}

.compare {
	display: inline-grid; /* 画像のサイズにピッタリ合わせたいので inline-grid 推奨 */
	position: relative;
	margin-top: 60px;
}

/* 2枚重ねる */
.compare > * {
	grid-area: 1 / 1;
}

.compare > section {
	display: grid;
	place-content: center;
}

/* 画像のサイズ */
.compare img {
	max-inline-size: 100%;
	display: block;
	/* 必要なら高さ制限もここで。例：
	max-block-size: 80vh;
	*/
}

/* マスク */
.compare .before {
	mask: linear-gradient(to right, #000 0, var(--pos, 50%), #0000 0);
	-webkit-mask: linear-gradient(to right, #000 0, var(--pos, 50%), #0000 0);
}

.compare .after {
	mask: linear-gradient(to right, #0000 0, var(--pos, 50%), #000 0);
	-webkit-mask: linear-gradient(to right, #0000 0, var(--pos, 50%), #000 0);
}

/* range 本体 */
.compare input[type="range"] {
	z-index: 1;
	appearance: none;
	background: transparent;
	cursor: pointer;
	width: 100%;
	height: 100%; /* ★ これが画像の高さを拾う */
}

/* トラック（必要なら高さリセット） */
.compare input[type="range"]::-webkit-slider-runnable-track {
	height: 100%;
	background: transparent;
}
.compare input[type="range"]::-moz-range-track {
	height: 100%;
	background: transparent;
}

/* WebKit系 つまみ：画像の高さ = 100% にする */
.compare input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	width: 4px;
	height: 100%; /* ★ 画像と同じ高さ */
	background-color: var(--blue);
	border: none;
}

/* Firefox用 */
.compare input[type="range"]::-moz-range-thumb {
	width: 4px;
	height: 100%; /* ★ 画像と同じ高さ */
	background-color: var(--blue);
	border: none;
}

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

#renovation-point

**********************************************************************************/
#renovation-point .under-intro .left {gap: 50px;}

#renovation-point .box {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 60px 20px;
	margin-top: 120px;
}

#renovation-point .box li .midashi {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	padding: 0 15px 15px;
	border-bottom: solid 1px;
	margin-bottom: 15px;
}

#renovation-point .box li .midashi .inner {
	display: flex;
	align-items: flex-end;
	gap: 12px;
}

#renovation-point .box li .midashi .inner .num {font-size: 28px;}
#renovation-point .box li .midashi .inner .eng {
	font-size: 14px;
	color: var(--gray);
	white-space: nowrap;
}
#renovation-point .box li .midashi .inner h4 {
	font-size: 18px;
	white-space: nowrap;
}
#renovation-point .box li .midashi img {max-width: 76px;}

#renovation-point .box li .txt {
	padding: 0 15px;
	text-align: justify;
}

@media screen and (max-width: 1300px) {
	#renovation-point .box li .midashi .inner {
		flex-direction: column;
		align-items: flex-start;
	}
}


@media screen and (max-width: 640px) {
	#renovation-point .box {
		grid-template-columns: repeat(1, 1fr);
		gap: 40px;
		margin-top: 80px;
	}
	#renovation-point .box li .midashi .inner .num {font-size: 24px;}
	#renovation-point .box li .midashi .inner .eng {font-size: 12px;}
	#renovation-point .box li .midashi .inner .h4 {font-size: 16px;}
	#renovation-point .box li .midashi img {max-width: 60px;}
}

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

#renovation-works

**********************************************************************************/
#renovation-works .head {margin-bottom: 60px;}

#renovation-works .head .tag-line span {
    font-weight: normal;
    font-style: normal;
    letter-spacing: 0.01em;
}

#renovation-works .renovation-loop {
	display: flex;
	flex-direction: column;
	gap: 60px;
	margin-bottom: 100px;
}

#renovation-works .renovation-loop a .thumbs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin-bottom: 15px;
	position: relative;
}

#renovation-works .renovation-loop a .thumbs .thumb {
	aspect-ratio: 5 / 3;
	overflow: hidden;
	position: relative;
}

#renovation-works .renovation-loop a .thumbs .thumb img {
	height: 100%;
	object-fit: cover;
}

#renovation-works .renovation-loop a .thumbs .thumb .label {
	padding: 5px 10px;
	position: absolute;
	top: 0;
	right: 0;	
}

#renovation-works .renovation-loop a .thumbs .before .label {
	color: var(--blue);
	background-color: #fff;
}
#renovation-works .renovation-loop a .thumbs .after .label {
	color: #fff;
	background-color: var(--blue);
}

#renovation-works .renovation-loop a .thumbs .link-arrow {
	width: 40px;
	height: 40px;
	position: absolute;
	right: 0;
	bottom: 0;
	transition: 0.5s;
}

#renovation-works .renovation-loop a:hover {opacity: 1;}

#renovation-works .renovation-loop a:hover .thumbs .link-arrow {
	background-color: #fff;
	transition: 0.5s;
}

#renovation-works .renovation-loop a:hover .thumbs .link-arrow svg {
	fill: var(--blue);
	transition: 0.5s;
}


#renovation-works .renovation-loop a .meta .spec {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 15px;
}

#renovation-works .renovation-loop a .meta .spec .date,#renovation-works .renovation-loop a .meta .spec .madori {
	padding-right: 12px;
	border-right: solid 1px;
}

#renovation-works .renovation-loop a .meta .title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media screen and (max-width: 640px) {
	#renovation-works .renovation-loop {margin-bottom: 80px;}
	#renovation-works .renovation-loop a .thumbs {grid-template-columns: repeat(1, 1fr);}
}

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

#spec-lineup

**********************************************************************************/
#spec-lineup .under-intro .left {gap: 50px;}
#spec-lineup .lineup-box {margin-top: 100px;}
#spec-lineup .lineup-box .lineup-list {margin-bottom: 60px;}
#spec-lineup .lineup-box .lineup-list:last-child {margin-bottom: 0;}

#spec-lineup .lineup-box .lineup-list h4 {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 40px;
	white-space: nowrap;
}

#spec-lineup .lineup-box .lineup-list h4::after {
	content: "";
	border-top: solid 1px;
	width: 100%;
}

#spec-lineup .lineup-box .lineup-list h4 span {font-size: 18px;}

#spec-lineup .lineup-box .lineup-list ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
}

#spec-lineup .lineup-box .lineup-list ul li .image {
	position: relative;
	margin-bottom: 25px;
}

#spec-lineup .lineup-box .lineup-list ul li .image h5 {
	font-size: 14px;
	color: #fff;
	background-color: var(--blue);
	padding: 5px 12px;
	position: absolute;
	top: 0;
	left: 0;
}

#spec-lineup .lineup-box .lineup-list ul li .detail h5 {
	font-size: 18px;
	text-align: center;
	margin-bottom: 25px;
}

#spec-lineup .lineup-box .lineup-list ul li .detail p {
	line-height: 1.5em;
	text-align: justify;
}

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

@media screen and (max-width: 640px) {
	#spec-lineup .under-intro .left {gap: 30px;}
	#spec-lineup .lineup-box {margin-top: 80px;}
	#spec-lineup .lineup-box .lineup-list h4 span {font-size: 16px;}
	
	#spec-lineup .lineup-box .lineup-list ul {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px 20px;
	}
	
	#spec-lineup .lineup-box .lineup-list ul li .image {margin-bottom: 15px;}
	#spec-lineup .lineup-box .lineup-list ul li .image h5 {font-size: 12px;}
	
	#spec-lineup .lineup-box .lineup-list ul li .detail h5 {
		font-size: 16px;
		margin-bottom: 15px;
	}
	
	#spec-lineup .lineup-box .lineup-list ul li .detail h5 span {font-size: 12px;}
}

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

.merit-box

**********************************************************************************/
.merit-box {margin-top: 100px;}

.merit-box .head {
	aspect-ratio: 4 / 1;
	overflow: hidden;
	margin-bottom: 50px;
}

.merit-box h3 {
	display: flex;
	align-items: center;
	gap: 20px;
	position: relative;
	margin-left: 18px;
	margin-bottom: 55px;
}

.merit-box h3::before {
	content: "";
	width: 1px;
	height: 80px;
	background-color: var(--blue);
	position: absolute;
	top: -95px;
	left: 30px;
}

.merit-box h3 span {
	font-size: 30px;
	margin-top: -5px;
}

@media screen and (max-width: 640px) {
	.merit-box {margin-top: 80px;}
	
	.merit-box .head {aspect-ratio: 5 / 2;}
	.merit-box h3 {margin-bottom: 30px;}
	
	.merit-box h3::before {
		height: 60px;
		top: -75px;
		left: 23px;
	}
	
	.merit-box h3 span {font-size: 24px;}
}

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

#spec-taishin

**********************************************************************************/
#spec-taishin .bottom {margin-top: -200px;}

@media screen and (max-width: 1250px) {
	#spec-taishin .bottom {margin-top: -150px;}
}

@media screen and (max-width: 820px) {
	#spec-taishin .bottom {margin-top: -100px;}
}

@media screen and (max-width: 640px) {
	#spec-taishin .bottom {margin-top: 0;}
}

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

#spec-reason

**********************************************************************************/
#spec-reason {position: relative;}

#spec-reason h4 {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 70px;
	white-space: nowrap;
}

#spec-reason h4::after {
	content: "";
	border-top: solid 1px;
	width: 100%;
}

#spec-reason h3 {
	font-size: 30px;
	line-height: 1.5em;
	margin-bottom: 50px;
}

#spec-reason .bg {
	width: 64%;
	position: absolute;
	right: calc((100vw - 1280px) / -2);
	bottom: -70px;
}

#spec-reason .bg .bg01,#spec-reason .bg .bg02,#spec-reason .bg .bg03 {position: absolute;}

#spec-reason .bg .bg01 {
	width: 250px;
	top: 0;
	right: 40px;
}

#spec-reason .bg .bg02 {
	width: 260px;
	top: 260px;
	left: 0;
}

#spec-reason .bg .bg03 {
	width: 250px;
	right: 40px;
	bottom: 0;
}

@media screen and (max-width: 1840px) {
	#spec-reason .bg {
		width: 54%;
		bottom: -20px;
	}
}

@media screen and (max-width: 1600px) {
	#spec-reason .bg {width: 50%;}
	#spec-reason .bg .bg01 {width: 210px;}
	#spec-reason .bg .bg02 {width: 230px;}
	#spec-reason .bg .bg03 {width: 210px;}
}

@media screen and (max-width: 1550px) {
	#spec-reason .bg {width: 44%;}
	#spec-reason .bg .bg01 {width: 180px;}
	#spec-reason .bg .bg02 {
		width: 200px;
		top: 200px;
	}
	#spec-reason .bg .bg03 {width: 180px;}
}

@media screen and (max-width: 1450px) {
	#spec-reason .bg {width: 40%;}
	#spec-reason .bg .bg01 {width: 150px;}
	#spec-reason .bg .bg02 {
		width: 170px;
		top: 150px;
	}
	#spec-reason .bg .bg03 {width: 150px;}
}

@media screen and (max-width: 1350px) {
	#spec-reason .bg {
		width: 36%;
		right: -5%;
	}
	#spec-reason .bg .bg01 {width: 130px;}
	#spec-reason .bg .bg02 {width: 150px;}
	#spec-reason .bg .bg03 {width: 130px;}
}

@media screen and (max-width: 1260px) {
	#spec-reason .bg {width: 32%;}
	#spec-reason .bg .bg01 {width: 100px;}
	#spec-reason .bg .bg02 {width: 120px;}
	#spec-reason .bg .bg03 {width: 100px;}
}

@media screen and (max-width: 1200px) {
	#spec-reason .bg {
		width: 100%;
		max-width: 600px;
		position: relative;
		right: -5%;
        margin: 0 0 0 auto;
	}
	
	#spec-reason .bg .bg01 {width: 36%;}
	#spec-reason .bg .bg02 {
		width: 38%;
		top: 36%;
	}
	#spec-reason .bg .bg03 {width: 36%;}
}

@media screen and (max-width: 640px) {
	#spec-reason h4 {margin-bottom: 40px;}
}

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

#spec-dannetsu

**********************************************************************************/
#spec-dannetsu .box {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

#spec-dannetsu .box img {
	width: 60%;
	max-width: 624px;
}

@media screen and (max-width: 640px) {
	#spec-dannetsu .box {flex-direction: column;}
	#spec-dannetsu .box img {width: 100%;}
}

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

#flow-about

**********************************************************************************/
#flow-about .icon-exp {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin-top: 100px;
	gap: 20px;
}

#flow-about .icon-exp .inner .inner-box {
	display: flex;
	align-items: flex-end;
	gap: 15px;
	padding: 0 10px 10px 10px;
	border-bottom: solid 1px;
}

#flow-about .icon-exp .inner .inner-box img {max-width: 70px;}
#flow-about .icon-exp .inner .inner-box h5,#flow-about .icon-exp .inner .inner-box h4 {margin-bottom: 20px;}
#flow-about .icon-exp .inner .inner-box h5 {color: var(--gray);}
#flow-about .icon-exp .inner .inner-box h4 {
	font-size: 18px;
	line-height: 1.5em;
}
#flow-about .icon-exp .inner .inner-box h4 span {font-size: 16px;}

#flow-about .icon-exp .inner .eraberu {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

#flow-about .icon-exp .inner .eraberu li {position: relative;}

#flow-about .icon-exp .inner .eraberu li h5 {
	text-align: center;
	color: #fff;
	background-color: var(--blue);
	padding: 3px 15px 5px;
	border-radius: 14px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -12px;
	margin: 0 auto;
	width: fit-content;
}

#flow-about .icon-exp .last {margin-top: 18px;}

@media screen and (max-width: 1349px) {
	#flow-about .icon-exp .last {margin-top: 2%;}
}

@media screen and (max-width: 820px) {
	#flow-about .icon-exp {
		grid-template-columns: repeat(1, 1fr);
		gap: 30px;
	}
	#flow-about .icon-exp .last {margin-top: 18px;}
}

@media screen and (max-width: 640px) {
	#flow-about .icon-exp {margin-top: 80px;}
	#flow-about .icon-exp .inner .inner-box img {max-width: 60px;}
	#flow-about .icon-exp .inner .inner-box h5,#flow-about .icon-exp .inner .inner-box h4 {margin-bottom: 10px;}
	#flow-about .icon-exp .inner .inner-box h4 {font-size: 16px;}
	#flow-about .icon-exp .inner .inner-box h4 span {font-size: 14px;}
}

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

#flow-step

**********************************************************************************/
#flow-step {margin-top: 120px;}

#flow-step .main-box {
	text-align: center;
	position: relative;
}

#flow-step .main-box .main {max-width: 220px;}

#flow-step .main-box .kazari {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 20px;
}

#flow-step .main-box .kazari .left {
	width: 150px;
	position: absolute;
	left: 15px;
	bottom: 0;
}

#flow-step .main-box .kazari .right {
	width: 144px;
	position: absolute;
	right: 15px;
	bottom: 0;
}

#flow-step .main-box h3 {
	font-size: 18px;
	font-weight: bold;
	margin-top: 20px;
	position: relative;
}

#flow-step .main-box h3::before, #flow-step .main-box h3::after {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 41%;
	height: 1px;
	background-color: var(--blue);
}

#flow-step .main-box h3::before {left:0;}
#flow-step .main-box h3::after {right: 0;}

#flow-step .step-box .step-inner {
	padding: 40px 0 60px;
	border-bottom: solid 1px;
	position: relative;
}

#flow-step .step-box .step-inner .num {
	font-size: 60px;
	margin-left: 10px;
	position: relative;
	z-index: 1;
}

#flow-step .step-box .step-inner .inner-box {
	display: flex;
	align-items: flex-end;
	gap: 100px;
	margin-top: -35px;
	position: relative;
}

#flow-step .step-box .step-inner .inner-box .main {
	width: 60%;
	position: relative;
	z-index: 0;
}

#flow-step .step-box .step-inner .start {
	width: 130px;
	position: absolute;
	left: 30px;
	bottom: -20px;
}

#flow-step .step-box .step-inner .inner-box .inner-inner {margin-bottom: 20px;}

#flow-step .step-box .step-inner .inner-box .inner-inner h4 {
	font-size: 24px;
	margin-bottom: 15px;
	display: flex;
	align-items: flex-end;
	gap: 8px;
	position: relative;
}

#flow-step .step-box .step-inner .inner-box .inner-inner h4::before {
	content: "";
	position: absolute;
	left: -180px;
	top: 50%;
	width: 160px;
	height: 1px;
	background-color: var(--blue);
	transform: translateY(-50%);
	z-index: 1;
}

#flow-step .step-box .step-inner .inner-box .inner-inner h4 span {
	font-size: 16px;
	color: var(--gray);
}

#flow-step .step-box .step-inner .inner-box .inner-inner p {font-size: 18px;}

#flow-step .step-box .step-inner .inner-bottom {
	margin-top: 30px;
	margin-left: 30px;
}

#flow-step .step-box .step-inner .nopic {
	display: flex;
	align-items: flex-start;
	gap: 15px;
}

#flow-step .step-box .step-inner .nopic h4 {
	font-size: 24px;
	margin-bottom: 30px;
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

#flow-step .step-box .step-inner .nopic h4 span {
	font-size: 16px;
	color: var(--gray);
}

#flow-step .step-box .step-inner .nopic .text-box {margin-top: 30px;}

#flow-step .step-box .step-inner .nopic .text-box-inner {
	display: flex;
	align-items: flex-start;
	gap: 15px;
}

#flow-step .step-box .step-inner .nopic .text-box-inner h5 {
	font-size: 18px;
	white-space: nowrap;
}

#flow-step .step-box .step-inner .nopic .text-box-inner p {margin-top: -5px;}

#flow-step .step-box .custom-box {
	background-color: var(--blue3);
	position: relative;
}

#flow-step .step-box .custom-box .anker {
	width: 204px;
	position: absolute;
	top: -34px;
	right: -28px;
}

#flow-step .step-box .custom-box .h4-custom {
	color: #fff;
	background-color: var(--blue);
	padding: 5px 10px 7px;
	width: fit-content;
}

#flow-step .step-box .custom-box ul .step-inner .step-wrap {
	width: 90%;
	margin: 0 auto;
}

#flow-step .step-box .custom-box ul .step-inner .inner-box {gap: 60px;}
#flow-step .step-box .custom-box ul .step-inner .inner-box .main {width: 55%;}

#flow-step .step-box .custom-box ul .step-inner .inner-box .inner-inner h4::before {
	left: -100px;
	width: 80px;
}

#flow-step .step-box .custom-box ul .step-inner .inner-box .inner-inner h4 span {color: #fff;}
#flow-step .step-box .custom-box ul .step-inner .inner-bottom {margin-left: 0;}

#flow-step .step-box .step02 .inner-box .inner-inner img {
	max-width: 286px;
	margin-bottom: 20px;
}
#flow-step .step-box .step02 .inner-bottom {
	display: flex;
	align-items: center;
	gap: 56px;
}
#flow-step .step-box .step02 .inner-bottom img {width: 68px;}

#flow-step .step-box .step03 .inner-box,#flow-step .step-box .step05 .inner-box,#flow-step .step-box .step12 .inner-box,#flow-step .step-box .step13 .inner-box {align-items: flex-start;}
#flow-step .step-box .step03 .inner-box .inner-inner,#flow-step .step-box .step05 .inner-box .inner-inner,#flow-step .step-box .step12 .inner-box .inner-inner,#flow-step .step-box .step13 .inner-box .inner-inner {margin-top: 70px;}

#flow-step .step-box .step03 .inner-bottom .icon-box,#flow-step .step-box .step05 .inner-bottom .icon-box,#flow-step .step-box .step12 .inner-bottom .icon-box,#flow-step .step-box .step13 .inner-bottom .icon-box {
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	gap: 20px;
}

#flow-step .step-box .step03 .inner-bottom .icon-box .fukidashi01 {max-width: 246px;}
#flow-step .step-box .step03 .inner-bottom .icon-box .icon-inner {
	display: flex;
	align-items: center;
	gap: 15px;
}
#flow-step .step-box .step03 .inner-bottom .icon-box .icon-inner .icon {max-width: 68px;}
#flow-step .step-box .step03 .inner-bottom .icon-box .icon-inner .icon01 {max-width: 60px;}
#flow-step .step-box .step03 .inner-bottom .icon-box .icon-inner .icon-okane {
	display: flex;
	align-items: center;
}
#flow-step .step-box .step03 .inner-bottom .icon-box .icon-inner .fukidashi02 {max-width: 142px;}
#flow-step .step-box .step03 .inner-bottom .txt {width: 70%;}
#flow-step .step-box .step03 .picture {
	max-width: 280px;
	position: absolute;
	right: -18px;
	bottom: 85px;
}

#flow-step .step-box .step05 .inner-bottom .icon-box .fukidashi {max-width: 314px;}
#flow-step .step-box .step05 .inner-bottom .icon-box .icon {max-width: 60px;}
#flow-step .step-box .step05 .inner-bottom .txt {width: 72%;}
#flow-step .step-box .step05 .picture {
	max-width: 350px;
	position: absolute;
	right: -80px;
	bottom: 70px;
}

#flow-step .step-box .step06 .inner-bottom {
	display: flex;
	align-items: center;
	gap: 10px;
}
#flow-step .step-box .step06 .inner-bottom .icon-box {
	display: flex;
	align-items: center;
}
#flow-step .step-box .step06 .inner-bottom .icon-box .icon {max-width: 68px;}
#flow-step .step-box .step06 .inner-bottom .icon-box .fukidashi {max-width: 142px;}

#flow-step .step-box .step12 .inner-bottom .icon-box .fukidashi01 {max-width: 246px;}
#flow-step .step-box .step12 .inner-bottom .icon-box .icon01 {max-width: 60px;}
#flow-step .step-box .step12 .inner-bottom .icon-box .icon-okane {
	display: flex;
	align-items: center;
}
#flow-step .step-box .step12 .inner-bottom .icon-box .icon-okane .icon02 {max-width: 68px;}
#flow-step .step-box .step12 .inner-bottom .icon-box .icon-okane .fukidashi02 {max-width: 142px;}
#flow-step .step-box .step12 .picture {
	max-width: 290px;
	position: absolute;
	right: 0;
	bottom: 47px;
}

#flow-step .step-box .step13 .inner-bottom .icon-box .fukidashi {max-width: 256px;}
#flow-step .step-box .step13 .inner-bottom .icon-box .icon {max-width: 60px;}
#flow-step .step-box .step13 .picture {
	max-width: 312px;
	position: absolute;
	right: -50px;
	bottom: 40px;
}

#flow-step .step-box .step15 {padding: 40px 0 30px;}
#flow-step .step-box .step15 .finish {
	width: 156px;
	position: absolute;
	top: -20px;
	right:  42%;
}
#flow-step .step-box .step15 .inner-bottom {
	display: flex;
	align-items: center;
	gap: 18%;
}
#flow-step .step-box .step15 .inner-bottom .icon-box {
	display: flex;
	align-items: center;
}
#flow-step .step-box .step15 .inner-bottom .icon-box .icon {max-width: 68px;}
#flow-step .step-box .step15 .inner-bottom .icon-box .fukidashi {max-width: 142px;}
#flow-step .step-box .step15 .illust-box {
	width: 95%;
	margin: 70px auto 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
}
#flow-step .step-box .step15 .illust-box .illust01 {max-width: 400px;}
#flow-step .step-box .step15 .illust-box .illust02 {max-width: 260px;}

@media screen and (max-width: 1413px) {
	#flow-step .step-box .step03 .inner-bottom .txt {width: 66%;}
	#flow-step .step-box .step03 .picture {width: 34%;}
	#flow-step .step-box .step05 .inner-bottom .txt {width: 63%;}
	#flow-step .step-box .step05 .picture,#flow-step .step-box .step12 .picture,#flow-step .step-box .step13 .picture {right: -5%;}
	#flow-step .step-box .step13 .inner-bottom .txt {width: 60%;}
}

@media screen and (max-width: 1360px) {
	#flow-step .step-box .step03 .picture {
		width: 27%;
		bottom: 50px;
	}
}

@media screen and (max-width: 1280px) {
	#flow-step .step-box .step-inner .inner-box {gap: 80px;}
	#flow-step .step-box .step-inner .inner-box .main {width: 50%;}
	#flow-step .step-box .custom-box ul .step-inner .inner-box .main {width: 45%;}
	#flow-step .step-box .step-inner .inner-box .inner-inner h4::before {
		left: -160px;
		width: 140px;
	}
	#flow-step .step-box .step12 .inner-bottom .txt {margin-bottom: 50px;}
	#flow-step .step-box .step15 .finish {right: 52%;}
	#flow-step .step-box .step15 .inner-bottom {gap: 10px;}
}

@media screen and (max-width: 1240px) {
	#flow-step .step-box .step12 .picture {width: 30%;}
}

@media screen and (max-width: 1260px) {
	#flow-step .step-box .step03 .picture {width: 34%;}
	#flow-step .step-box .step03 .inner-bottom .icon-box {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}

@media screen and (max-width: 1024px) {
	#flow-step .main-box h3::before, #flow-step .main-box h3::after {width: 38%;}		
	#flow-step .step-box .step02 .inner-box {margin-top: -8%;}
	#flow-step .step-box .step06 .inner-bottom {gap: 20px;}
	#flow-step .step-box .step06 .inner-bottom .txt {width: 60%;}
}

@media screen and (max-width: 820px) {
	#flow-step .step-box .step02 .inner-box {margin-top: -17%;}
	
	#flow-step .step-box .step-inner .nopic h4 {
		flex-direction: column;
		align-items: flex-start;
	}
	
	#flow-step .step-box .step-inner .nopic .text-box-inner {flex-direction: column;}
	#flow-step .step-box .step-inner .nopic .text-box-inner p {margin-top: 0x;}
	#flow-step .step-box .step05 .picture {width: 37%;}
	#flow-step .step-box .step12 .inner-bottom .icon-box {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	#flow-step .step-box .step12 .inner-bottom .txt {width: 50%;}
	#flow-step .step-box .step13 .inner-bottom .txt {
		width: 50%;
		margin-bottom: 100px;
	}
	
	#flow-step .step-box .step15 .illust-box .illust01 {width: 50%;}
	#flow-step .step-box .step15 .illust-box .illust02 {width: 40%;}
}

@media screen and (max-width: 640px) {
	#flow-step {margin-top: 80px;}
	#flow-step .main-box .main {width: 30%;}
	#flow-step .main-box .kazari .left,#flow-step .main-box .kazari .right {width: 20%;}
	#flow-step .main-box h3 {font-size: 16px;}
	#flow-step .main-box h3::before, #flow-step .main-box h3::after {width: 35%;}
	#flow-step .step-box .step-inner {padding: 30px 0 40px;}
	#flow-step .step-box .step-inner .num {font-size: 50px;}
	
	#flow-step .step-box .step-inner .inner-box {
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
		margin-top: -30px;
	}
	
	#flow-step .step-box .step-inner .inner-box .main,#flow-step .step-box .custom-box ul .step-inner .inner-box .main {width: 100%;}
	
	#flow-step .step-box .step-inner .start {
		top: -20px;
		left: auto;
		right: 20px;
		bottom: auto;
	}	
	
	#flow-step .step-box .step-inner .inner-box .inner-inner {
		width: 95%;
		margin: 0 auto;
	}
	#flow-step .step-box .step-inner .inner-box .inner-inner h4,#flow-step .step-box .step-inner .nopic h4 {font-size: 20px;}
	#flow-step .step-box .step-inner .inner-box .inner-inner h4::before {content: none;}
	
	#flow-step .step-box .step-inner .inner-box .inner-inner h4::after {
		content: "";
		position: absolute;
		left: 25px;
		top: -70px;
		width: 1px;
		height: 60px;
		background-color: var(--blue);
		z-index: 1;
	}
	
	#flow-step .step-box .step-inner .inner-box .inner-inner h4 span,#flow-step .step-box .step-inner .nopic h4 span {font-size: 14px;}
	#flow-step .step-box .step-inner .inner-box .inner-inner p,#flow-step .step-box .step-inner .nopic .text-box-inner h5 {font-size: 16px;}
	#flow-step .step-box .step-inner .inner-bottom {
		width: 95%;
		margin: 30px auto 0;
	}
	
	#flow-step .step-box .step-inner .nopic {flex-direction: column;}
	
	#flow-step .step-box .step-inner .nopic .text-box {
		margin-top: 0;
		margin-left: 10px;
	}
	
	#flow-step .step-box .custom-box .anker {
		width: 180px;
		top: -30px;
		right: -25px;
	}
	
	#flow-step .step-box .custom-box ul .step-inner .inner-box {gap: 40px;}
	
	#flow-step .step-box .step02 .inner-box .inner-inner img {width: 80%;}
	#flow-step .step-box .step02 .inner-box .inner-inner h4::after {top: -140px;}
	#flow-step .step-box .step02 .inner-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
	#flow-step .step-box .step02 .inner-bottom .txt {order: 2;}
	#flow-step .step-box .step02 .inner-bottom img {
		width: 58px;
		order: 1;
	}
	
	#flow-step .step-box .step03 .inner-box .inner-inner,#flow-step .step-box .step05 .inner-box .inner-inner,#flow-step .step-box .step12 .inner-box .inner-inner,#flow-step .step-box .step13 .inner-box .inner-inner {margin-top: 0;}
	#flow-step .step-box .step03 .inner-bottom .txt,#flow-step .step-box .step05 .inner-bottom .txt,#flow-step .step-box .step12 .inner-bottom .txt,#flow-step .step-box .step13 .inner-bottom .txt {width: 100%;}
	#flow-step .step-box .step03 .inner-bottom .icon-box .fukidashi01 {width: 80%;}
	#flow-step .step-box .step03 .inner-bottom .icon-box .icon-inner {gap: 10px;}
	#flow-step .step-box .step03 .inner-bottom .icon-box .icon-inner .icon {max-width: 58px;}
	#flow-step .step-box .step03 .inner-bottom .icon-box .icon-inner .icon01 {max-width: 50px;}
	#flow-step .step-box .step03 .inner-bottom .icon-box .icon-inner .fukidashi02 {max-width: 124px;}
	#flow-step .step-box .step03 .picture {
		position: static;
		width: 90%;
		display: block;
		margin: 30px auto 0;
	}
	
	#flow-step .step-box .step05 .inner-bottom .icon-box,#flow-step .step-box .step13 .inner-bottom .icon-box {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	#flow-step .step-box .step05 .inner-bottom .icon-box .fukidashi {width: 90%;}
	#flow-step .step-box .step05 .inner-bottom .icon-box .icon {max-width: 50px;}
	#flow-step .step-box .step05 .picture,#flow-step .step-box .step12 .picture,#flow-step .step-box .step13 .picture {
		position: static;
		width: 80%;
		display: block;
		margin: 30px auto 0;
	}
	
	#flow-step .step-box .step06 .inner-bottom {
		flex-direction: column;
		align-items: flex-start;
	}
	#flow-step .step-box .step06 .inner-bottom .txt {
		width: 100%;
		order: 2;
	}
	#flow-step .step-box .step06 .inner-bottom .icon-box {order: 1;}
	#flow-step .step-box .step06 .inner-bottom .icon-box .icon {max-width: 58px;}
	#flow-step .step-box .step06 .inner-bottom .icon-box .fukidashi {max-width: 124px;}
	
	#flow-step .step-box .step12 .inner-bottom .txt {margin-bottom: 0;}
	#flow-step .step-box .step12 .inner-bottom .icon-box .fukidashi01 {max-width: 200px;}
	#flow-step .step-box .step12 .inner-bottom .icon-box .icon01 {max-width: 50px;}
	#flow-step .step-box .step12 .inner-bottom .icon-box .icon-okane .icon02 {max-width: 58px;}
	#flow-step .step-box .step12 .inner-bottom .icon-box .icon-okane .fukidashi02 {max-width: 124px;}
	
	#flow-step .step-box .step13 .inner-bottom .icon-box .fukidashi {max-width: 210px;}
	#flow-step .step-box .step13 .inner-bottom .icon-box .icon {max-width: 50px;}
	#flow-step .step-box .step13 .inner-bottom .txt {margin-bottom: 0;}
	
	#flow-step .step-box .step15 {padding: 30px 0;}
	#flow-step .step-box .step15 .finish {
		right: 20px;
	}
	#flow-step .step-box .step15 .inner-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
	#flow-step .step-box .step15 .inner-bottom .txt {order: 2;}
	#flow-step .step-box .step15 .inner-bottom .icon-box {order: 1;}
	#flow-step .step-box .step15 .inner-bottom .icon-box .icon {max-width: 58px;}
	#flow-step .step-box .step15 .inner-bottom .icon-box .fukidashi {max-width: 124px;}
}

@media screen and (max-width: 430px) {
	#flow-step .main-box h3::before, #flow-step .main-box h3::after {width: 28%;}
}

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

#flow-hoshou

**********************************************************************************/
#flow-hoshou .under-intro .left {
    gap: 50px;
}

#flow-hoshou .hoshou-list {margin-top: 100px;}

#flow-hoshou .hoshou-list li {
	padding-bottom: 20px;
	border-bottom: solid 1px;
}

#flow-hoshou .hoshou-list li .box {
	width: 95%;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 46px;
}

#flow-hoshou .hoshou-list li:first-child {margin-bottom: 50px;}

#flow-hoshou .hoshou-list li:first-child .left {max-width: 484px;}
#flow-hoshou .hoshou-list li:nth-child(2) .left {max-width: 456px;}

#flow-hoshou .hoshou-list li .right {flex: 0 0 44%;}

#flow-hoshou .hoshou-list li .right a {
	margin: 30px 0 0 auto;
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
}

#flow-hoshou .hoshou-list li:nth-child(2) .right a {margin-top: 60px;}

#flow-hoshou .hoshou-list li .right a img {
	width: 20px;
	transition: 0.5s;
	border: solid 1px;
}

#flow-hoshou .hoshou-list li .right a .hover {
	opacity: 0;
	position: absolute;
	top: 0;
	right: 0;
}

#flow-hoshou .hoshou-list li .right a:hover {opacity: 1;}

#flow-hoshou .hoshou-list li .right a:hover .hover {
	opacity: 1;	
	transition: 0.5s;
}

@media screen and (max-width: 1396px) {
	#flow-hoshou .hoshou-list li:nth-child(2) .right a {margin-top: 30px;}
}

@media screen and (max-width: 640px) {
	#flow-hoshou .hoshou-list li .box {
		flex-direction: column;
		align-items: center;
		gap: 40px;
	}
	
	#flow-hoshou .hoshou-list li:first-child .left {width: 80%;}
	#flow-hoshou .hoshou-list li:nth-child(2) .left {width: 70%;}
}

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

#build-link

**********************************************************************************/
.build-link-wrapper {text-align: center;}
#build-link {
	margin: 0 auto;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
}

#build-link h3 {
	margin: 0 0 20px;
	position: relative;
	align-self: stretch;
	text-align: center;
}

#build-link h3::before,
#build-link h3::after {
	content: '';
	position: absolute;
	top: 50%;
	height: 1px;
	background-color: var(--blue);
	width: 32%;
}

#build-link h3::before {left: 0;}
#build-link h3::after {right: 0;}

#build-link ul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media screen and (max-width: 640px) {
	#build-link ul {
		flex-direction: column;
		gap: 20px;
		width: 200px;
	}
	
	#build-link h3::before,#build-link h3::after {width: 18%;}
}

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

.voice-inner

**********************************************************************************/
.voice-inner .midashi {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 50px;
}

.voice-inner .midashi .left h4 {
	font-size: 30px;
	line-height: 1.5em;
	margin-bottom: 10px;
}

.voice-inner .midashi .right {flex: 0 0 300px;}

.voice-inner ul li {
	padding-bottom: 30px;
	border-bottom: solid 1px;
	margin-bottom: 30px;
	position: relative;
}

.voice-inner ul li:last-child {margin-bottom: 0;}

.voice-inner ul li img {
	position: absolute;
	right: 35px;
	bottom: 0;
}

.voice-inner ul li img.voice01-illust01 {width: 78px;}
.voice-inner ul li img.voice01-illust02 {width: 212px;}

.voice-inner ul li div {
	display: flex;
	align-items: flex-start;
	gap: 15px;
}

.voice-inner ul li div h5 {
	background-color: var(--blue);
	color: #fff;
	padding: 2px 0 4px;
	text-align: center;
	flex: 0 0 22px;
}

.voice-inner ul li div p {
	line-height: 1.7em;
	text-align: justify;
}

.voice-inner ul li .question {margin-bottom: 30px;}
.voice-inner ul li .question p {
	font-size: 18px;
	margin-top: -4px;
}
.voice-inner ul li .answer p {margin-top: -2px;}

@media screen and (max-width: 820px) {
	.voice-inner .midashi .right {flex: 0 0 200px;}
	.voice-inner ul li.illuston {padding-bottom: 0;}
	.voice-inner ul li img {
		position: static;
		display: block;
		margin: 30px 30px 0 auto;
	}
}

@media screen and (max-width: 640px) {
	.voice-inner .midashi {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		margin-bottom: 50px;
	}
	.voice-inner .midashi .left {order: 2;}
	.voice-inner .midashi .left h4 {font-size: 24px;}
	.voice-inner .midashi .right {
		flex: 0;
		width: 150px;
		margin: 0 0 0 auto;
		order: 1;
	}
	.voice-inner ul li .question {margin-bottom: 20px;}
	.voice-inner ul li .question p {font-size: 16px;}
	
	.voice-inner ul li img.voice01-illust01 {width: 58px;}
	.voice-inner ul li img.voice01-illust02 {width: 172px;}
}

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

#model-comingsoon

**********************************************************************************/
#model-comingsoon {
	margin: 0 auto 200px;
	text-align: center;
}

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

#contact-box

**********************************************************************************/
#contact-box {
	width: 90%;
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 50px;
}

#contact-box .contact-side {border-bottom: solid 1px;}

#contact-box .contact-side li {
	margin-bottom: 30px;
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	white-space: nowrap;
}

/* 共通：前に四角を追加 */
#contact-box .contact-side li::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 1px solid var(--blue);
}

/* アクティブ時（親liが.active） */
#contact-box .contact-side li.active::before {
	background-color: var(--blue);
	border: none;
	position: relative;
}

#contact-box .contact-inner {
	width: 100%;
	max-width: 1020px;
}

#contact-box .contact-inner h4 {
	font-size: 22px;
	line-height: 1.5em;
	padding-bottom: 60px;
	border-bottom: solid 1px;
	margin-bottom: 60px;
}

.contact-wrap .form-row {
	display: flex;
	align-items: center;
	gap: 40px;
	margin-bottom: 30px;
}

.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-input.form-flex .wpcf7-form-control-wrap {max-width: 260px;}
.contact-wrap .form-row .form-input.form-flex .note {font-size: 14px;}

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

.contact-wrap .form-row.form-textarea .form-label {margin-top: 10px;}

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

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

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

.contact-wrap .form-row.form-center .form-input a::after {
	background-color: var(--blue);
	bottom: -6px;
	content: ""; 
	height: 1px;
	left: 0;
	position: absolute;
	transform: scale(0, 1);
	transform-origin: center top;
	transition: transform .3s;
	width: 100%;
}

.contact-wrap .form-row.form-center .form-input a:hover {opacity: 1;}
.contact-wrap .form-row.form-center .form-input a:hover::after {transform: scale(1, 1);}

.contact-wrap .form-row .form-label {
	flex: 0 0 25%;
	min-width: 0; 
}

.contact-wrap .form-row .form-label span {
	font-size: 12px;
	color: #fff;
	background-color: var(--blue);
	padding: 3px 7px;
	margin-left: 10px;
}

.contact-wrap .form-row .form-input {
	flex: 1 1 0%;
	min-width: 0; 
}

.contact-wrap .form-row .form-input p {
	width: 100%;
}

.contact-wrap .form-row .form-input .first p {
	margin-bottom: 20px;
}

input[type="text"],input[type="email"],input[type="tel"],textarea,input[type="date"],input[type="number"],.wpcf7 select {
	background-color: var(--gray3);
	padding: 10px;
	width: 100%;
	border-bottom: solid 1px;
}
.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(--blue);
	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(--blue); /* チェックと枠の色 */
	vertical-align: middle;
	margin-right: 8px;
	margin-bottom: 2px;
}

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

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

.my-submit {
	display: flex;
	align-items: center;
	gap: 20px;
	font-weight: bold;
	width: fit-content;
	margin: 0 auto;
}

.my-submit.prev {margin-bottom: 40px;}

.my-submit .svg-box {
	background-color: var(--blue);
	border: solid 1px var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	transition: 0.5s;
}

.my-submit .svg-box svg {
	fill: #fff;
	transition: 0.5s;
}

.my-submit:hover .svg-box {
	background-color: #fff;
	transition: 0.5s;
}

.my-submit:hover .svg-box svg {
	fill: var(--blue);
	transition: 0.5s;
}

.contact-wrap .thanks {line-height: 1.7em;}

@media screen and (max-width: 1024px) {
	#contact-box {flex-direction: column;}
	
	#contact-box .contact-side {
		display: flex;
		align-items: flex-start;
		gap: 30px;
		padding-bottom: 30px;
		width: 100%;
	}
	
	#contact-box .contact-side li {margin-bottom: 0;}
}

@media screen and (max-width: 820px) {
	.contact-wrap .form-row {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		margin-bottom: 40px;
	}
	
	.contact-wrap .form-row.form-textarea .form-label {margin-top: 0;}
	.contact-wrap .form-row.form-textarea {align-items: stretch;}
	
	.contact-wrap .form-row .form-label,
	.contact-wrap .form-row .form-input {
		flex: none; 
		width: 100%;
		min-width: 0;
	}
	
	.contact-wrap .form-row .form-input.form-flex p {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.contact-wrap .form-row .form-input.form-flex .wpcf7-form-control-wrap {max-width: 820px;}
}

@media screen and (max-width: 640px) {
	#contact-box .contact-inner h4 {
		font-size: 18px;
		padding-bottom: 40px;
		margin-bottom: 40px;
	}
	
	input[type="date"] {
		padding: 15px 10px;
        width: 180px;
	}
}

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

#policy-inner

**********************************************************************************/
#policy-inner {
	width: 90%;
	max-width: 1280px;
	margin: 0 auto;
	line-height: 1.7em;
}

#policy-inner .list {margin-bottom: 60px;}
#policy-inner .list:last-child {margin-bottom: 0;}

#policy-inner .list h3 {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 20px;
}

@media screen and (max-width: 640px) {
	#policy-inner .list {margin-bottom: 40px;}
	#policy-inner .list h3 {
		font-size: 16px;
		margin-bottom: 10px;
	}
}