@charset "UTF-8";
/* ==========================================================================
	root
========================================================================== */
:root {
	--base-pc-width:1680;
	--base-sp-width:375;
	--vwPC: calc(100vw / 1680);
	--vwSP: calc(100vw / 375);
	--easeInQuad:cubic-bezier(.55, .085, .68, .53);
	--easeOutQuad:cubic-bezier(0.23, 1, 0.32, 1);
	--easeOutQuint:cubic-bezier(.25, .46, .45, .94);
	--easeOutSine:cubic-bezier(0.39, 0.575, 0.565, 1);
	--easeOutCubic:cubic-bezier(0.215, 0.61, 0.355, 1);
	--easeInOutQuad:cubic-bezier(0.45, 0, 0.55, 1);
	--easeInOutCubic:cubic-bezier(0.65, 0, 0.35, 1);
	--easePopUp:cubic-bezier(0.17, 0.88, 0.30, 1.28);
	--easeInCirc:cubic-bezier(0.55, 0, 1, 0.45);
	--theme-color:#004161;
	--theme-color02:rgba(0, 65, 97, 0.2);
	--base-text-color:#000;
	--base-bg-color:#EEE5DD;
	--base-bg-color02:#363636;
	--base-bg-color03:rgba(0, 65, 97, 0.15);
	--base-bg-color04:rgba(255, 255, 255, 0.15);
	--base-bg-color05:rgba(0, 0, 0, 0.1);
	--base-bg-color06:#363636;
	--base-bg-color07:rgba(255, 255, 255, 0.5);
	--base-bg-color08:rgba(0, 0, 0, 0.07);
	--base-bg-color09:rgba(255, 255, 255, 0.8);
	--base-bg-color10:rgba(255, 255, 255, 0.75);
	--base-bg-color-end:rgba(0, 65, 97, 0.15);
	--base-border-color:#000;
	--base-border-color02:rgba(0, 0, 0, 0.15);
	--base-border-color03:rgba(255, 255, 255, 0.3);
	--base-border-color04:rgba(255, 255, 255, 0.2);
	--base-border-color05:rgba(0, 0, 0, 0.3);
	--base-border-color06:rgba(0, 0, 0, 0.1);
	--base-border-color07:rgba(255, 255, 255, 0.25);
	--base-color-gray:#666666;
	--base-color-gray02:#E7E7E7;
	--base-color-gray03:#F1EFED;
	--base-color-black:#000;
	--base-color-black02:rgba(0, 0, 0, 0.1);
	--base-color-black03:rgba(0, 0, 0, 0.5);
	--base-color-black04:rgba(0, 0, 0, 0.05);
	--base-color-black05:rgba(0, 0, 0, 0.08);
	--base-color-black06:rgba(0, 0, 0, 0.07);
	--base-color-red:#E51D1D;
	--base-color-red02:#C34545;
	--hanten:scale(-1, -1);
	--hantenX:scale(-1, 1);
	--hantenY:scaleY(-1);
	--transition-scale:transform 0.8s var(--easeOutCubic);
}

@media screen and (min-width: 801px) {
	:root {
		--vwPC: calc(100vw / 1680);
		--fz11: max(1.1rem, 10px);
		--fz12: max(1.2rem, 11px);
		--fz13: max(1.3rem, 12px);
		--fz14: max(1.4rem, 12px);
		--fz15: max(1.5rem, 13px);
		--fz16: max(1.6rem, 14px);
		--fz17: max(1.7rem, 15px);
		--fz18: max(1.8rem, 16px);
		--fz19: max(1.9rem, 17px);
		--fz20: max(2.0rem, 18px);
		--fz21: max(2.1rem, 18px);
		--fz22: max(2.2rem, 18px);
		--fz23: max(2.3rem, 20px);
		--fz24: max(2.4rem, 20px);
		--fz25: max(2.5rem, 21px);
		--fz26: max(2.6rem, 22px);
		--fz27: max(2.7rem, 23px);
		--fz28: max(2.8rem, 24px);
		--fz30: max(3rem, 26px);
		--fz32: max(3.2rem, 28px);
		--fz34: max(3.4rem, 30px);
		--fz36: max(3.6rem, 32px);
		--fz40: max(4rem, 36px);
		--fz42: max(4rem, 38px);
		--fz44: max(4.4rem, 40px);
		--fz46: max(4.6rem, 42px);
		--fz48: max(4.8rem, 44px);
		--fz50: max(5rem, 48px);
		--fz52: max(5.2rem, 48px);
		--fz56: max(5.6rem, 52px);
		--fz64: max(6.4rem, 60px);
		--fz72: max(7.2rem, 68px);
		--fz96: max(9.6rem, 90px);
	}
}
@media screen and (max-width: 800px) {
	:root {
		--vwSP: calc(100vw / 375);
		--fz10: clamp(10px, calc(10 * var(--vwSP)), 12px);
		--fz11: clamp(11px, calc(11 * var(--vwSP)), 13px);
		--fz12: clamp(12px, calc(12 * var(--vwSP)), 14px);
		--fz13: clamp(13px, calc(13 * var(--vwSP)), 14px);
		--fz14: clamp(14px, calc(14 * var(--vwSP)), 16px);
		--fz15: clamp(15px, calc(15 * var(--vwSP)), 17px);
		--fz16: clamp(16px, calc(16 * var(--vwSP)), 18px);
		--fz17: clamp(17px, calc(17 * var(--vwSP)), 19px);
		--fz18: clamp(18px, calc(18 * var(--vwSP)), 20px);
		--fz19: clamp(19px, calc(19 * var(--vwSP)), 21px);
		--fz20: clamp(20px, calc(20 * var(--vwSP)), 22px);
		--fz21: clamp(21px, calc(21 * var(--vwSP)), 23px);
		--fz22: clamp(22px, calc(22 * var(--vwSP)), 24px);
		--fz24: clamp(24px, calc(24 * var(--vwSP)), 26px);
		--fz25: clamp(25px, calc(25 * var(--vwSP)), 27px);
		--fz26: clamp(26px, calc(26 * var(--vwSP)), 28px);
		--fz27: clamp(27px, calc(27 * var(--vwSP)), 29px);
		--fz28: clamp(28px, calc(28 * var(--vwSP)), 30px);
		--fz30: clamp(30px, calc(30 * var(--vwSP)), 32px);
		--fz32: clamp(32px, calc(23 * var(--vwSP)), 35px);
		--fz34: clamp(34px, calc(34 * var(--vwSP)), 37px);
		--fz35: clamp(35px, calc(25 * var(--vwSP)), 39px);
		--fz36: clamp(36px, calc(36 * var(--vwSP)), 40px);
		--fz38: clamp(38px, calc(38 * var(--vwSP)), 42px);
		--fz40: clamp(40px, calc(40 * var(--vwSP)), 44px);
		--fz44: clamp(44px, calc(44 * var(--vwSP)), 48px);
		--fz45: clamp(45px, calc(45 * var(--vwSP)), 49px);
		--fz48: clamp(48px, calc(48 * var(--vwSP)), 52px);
		--fz56: clamp(56px, calc(56 * var(--vwSP)), 60px);
		--fz64: clamp(64px, calc(64 * var(--vwSP)), 68px);
	}
}
/* ==========================================================================
	h_fv
========================================================================== */
#h_fv.-tax h1 {
	font-size: var(--fz36);
}

/* ==========================================================================
	sort
========================================================================== */
.sort {
	margin-top: 16rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
}
.sort h2 {
	width: 180px;
	font-size: 20px;
	font-weight: 500;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	cursor: pointer;
}
.sort h2 .icon {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid var(--base-border-color);
}
.sort h2 .icon img {
	width: 10px;
	-webkit-transition: -webkit-transform 0.3s ease-out;
	transition: -webkit-transform 0.3s ease-out;
	transition: transform 0.3s ease-out;
	transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
}
.sort h2.active .icon img {
	-webkit-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}
.sort .oc_area {
	display: none;
	width: 74.6153846154%;
	max-width: calc(100% - 190px);
	border-top: 1px solid var(--base-border-color);
}
.sort .oc_area dl {
	margin-top: 4rem;
	margin-bottom: -1rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.sort .oc_area dl dt {
	width: 264px;
	width: clamp(100px, 22.7%, 264px);
	font-size: var(--fz16);
	font-weight: 500;
	padding-top: 0.85rem;
}
.sort .oc_area dl dd {
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
}

@media screen and (max-width: 950px) {
	.sort h2 {
		width: 100%;
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
	}
	.sort h2 .icon {
		margin-right: 2rem;
	}
	.sort .oc_area {
		width: 100%;
		max-width: 100%;
		margin-top: 4rem;
	}
}
@media screen and (max-width: 800px) {
	.sort {
		margin-top: clamp(48px, 21.3333333333vw, 102.4px);
	}
	.sort h2 {
		font-size: 20px;
		padding-bottom: 2rem;
		border-bottom: 1px solid var(--base-border-color);
	}
	.sort h2 .icon {
		margin-right: 1rem;
	}
	.sort .oc_area {
		margin-top: 0;
		border: none;
	}
	.sort .oc_area dl {
		margin-top: 1.5rem;
		margin-bottom: 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
	}
	.sort .oc_area dl:first-child {
		margin-right: 0;
	}
	.sort .oc_area dl dt {
		width: 100%;
		font-size: var(--fz14);
		line-height: 2.8571428571;
		padding-top: 0;
	}
	.sort .oc_area dl dd {
		-webkit-box-flex: 1;
		    -ms-flex: 1;
		        flex: 1;
	}
}
/* ==========================================================================
	intro
========================================================================== */
.intro {
	padding-top: 16rem;
}
.intro h2 {
	text-align: center;
	line-height: 1.45;
	margin-bottom: 3rem;
}
.intro h3 {
	position: relative;
	font-size: var(--fz32);
	line-height: 1.4375;
	text-align: center;
	margin: 0 0 3rem;
}
.intro .n_txt + h3 {
	margin-top: 16rem;
}
.intro .w_box {
	background: #fff;
	padding: 9rem 3rem;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	text-align: center;
}

@media screen and (min-width: 801px) {
	.intro .illusts {
		position: relative;
		max-width: 877px;
		aspect-ratio: 877/430;
		margin: 0 auto;
	}
	.intro .illusts .bubble {
		position: absolute;
		width: 36.488027366%;
		opacity: 0;
		-webkit-transition: opacity 0.5s var(--easeOutCubic), -webkit-transform 0.5s var(--easeOutCubic);
		transition: opacity 0.5s var(--easeOutCubic), -webkit-transform 0.5s var(--easeOutCubic);
		transition: transform 0.5s var(--easeOutCubic), opacity 0.5s var(--easeOutCubic);
		transition: transform 0.5s var(--easeOutCubic), opacity 0.5s var(--easeOutCubic), -webkit-transform 0.5s var(--easeOutCubic);
	}
	.intro .illusts .bubble01 {
		position: absolute;
		right: 0;
		top: 9.3023255814%;
		-webkit-transform: translate(-30px, 30px);
		        transform: translate(-30px, 30px);
		-webkit-transition-delay: 0.4s;
		        transition-delay: 0.4s;
	}
	.intro .illusts .bubble02 {
		left: 0;
		right: 0;
		top: 0;
		margin: auto;
		-webkit-transform: translateY(30px);
		        transform: translateY(30px);
		-webkit-transition-delay: 0.2s;
		        transition-delay: 0.2s;
		z-index: 10;
	}
	.intro .illusts .bubble03 {
		left: 0;
		top: 9.3023255814%;
		-webkit-transform: translate(30px, 30px);
		        transform: translate(30px, 30px);
	}
	.intro .illusts .bubble span {
		display: none;
	}
	.intro .illusts .illust {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 37.6282782212%;
	}
	.intro .illusts.move .bubble {
		-webkit-transform: translate(0, 0);
		        transform: translate(0, 0);
		opacity: 1;
	}
	.intro .w_box .n_txt {
		margin-top: 4rem;
		letter-spacing: 0;
	}
}
@media screen and (max-width: 801px) {
	.intro {
		padding-top: clamp(48px, 21.3333333333vw, 102.4px);
	}
	.intro h2 {
		font-size: var(--fz24);
		line-height: 1.4583333333;
		margin-bottom: 2rem;
	}
	.intro h3 {
		padding: 6rem 3.8rem 3rem;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		text-align: center;
		font-size: var(--fz24);
		line-height: 1.4583333333;
		text-align: center;
		margin: 0;
		background: #fff;
	}
	.intro .n_txt {
		text-align: left;
	}
	.intro .n_txt + h3 {
		margin-top: 8rem;
	}
	.intro .w_box {
		padding: 0 0 6rem;
	}
	.intro .illusts {
		position: relative;
	}
	.intro .illusts .bubble {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		width: 230px;
		height: 60px;
		text-align: center;
		font-size: var(--fz16);
		line-height: 2.5;
		border-radius: 30px;
		color: #fff;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		background: var(--theme-color);
		margin: 0 auto 0.5rem;
		opacity: 0;
		-webkit-transform: translateY(30px);
		        transform: translateY(30px);
		-webkit-transition: opacity 0.5s var(--easeOutCubic), -webkit-transform 0.5s var(--easeOutCubic);
		transition: opacity 0.5s var(--easeOutCubic), -webkit-transform 0.5s var(--easeOutCubic);
		transition: transform 0.5s var(--easeOutCubic), opacity 0.5s var(--easeOutCubic);
		transition: transform 0.5s var(--easeOutCubic), opacity 0.5s var(--easeOutCubic), -webkit-transform 0.5s var(--easeOutCubic);
	}
	.intro .illusts .bubble02 {
		width: 280px;
		background: #3A3A3A;
		-webkit-transition-delay: 0.2s;
		        transition-delay: 0.2s;
	}
	.intro .illusts .bubble03 {
		-webkit-transition-delay: 0.4s;
		        transition-delay: 0.4s;
	}
	.intro .illusts .bubble img {
		display: none;
	}
	.intro .illusts .illust {
		position: relative;
		width: 68.0597014925%;
		max-width: 240px;
		margin: 3rem auto 0;
		opacity: 0;
		-webkit-transform: translateY(30px);
		        transform: translateY(30px);
		-webkit-transition: opacity 0.5s var(--easeOutCubic), -webkit-transform 0.5s var(--easeOutCubic);
		transition: opacity 0.5s var(--easeOutCubic), -webkit-transform 0.5s var(--easeOutCubic);
		transition: transform 0.5s var(--easeOutCubic), opacity 0.5s var(--easeOutCubic);
		transition: transform 0.5s var(--easeOutCubic), opacity 0.5s var(--easeOutCubic), -webkit-transform 0.5s var(--easeOutCubic);
	}
	.intro .illusts .illust.move {
		-webkit-transform: translate(0, 0);
		        transform: translate(0, 0);
		opacity: 1;
	}
	.intro .illusts.move .bubble {
		-webkit-transform: translate(0, 0);
		        transform: translate(0, 0);
		opacity: 1;
	}
	.intro .w_box .n_txt {
		width: 100%;
		margin-top: 3rem;
		text-align: center;
		letter-spacing: 0;
	}
}
/* ==========================================================================
	works_list-top
========================================================================== */
.works_list-top {
	margin-top: 8rem;
}
.works_list-top > .en-mincho {
	line-height: 1.45;
	text-align: center;
	margin-bottom: 0;
}
.works_list-top h2 {
	font-size: var(--fz40);
	line-height: 1.45;
	text-align: center;
	margin-bottom: 4rem;
}

@media screen and (max-width: 800px) {
	.works_list-top {
		margin-top: clamp(48px, 21.3333333333vw, 102.4px);
	}
	.works_list-top h2 {
		font-size: var(--fz32);
		line-height: 1.4375;
		margin-bottom: 2rem;
	}
}
/* ==========================================================================
	pagination
========================================================================== */
.pagination {
	margin-top: 12rem;
}

@media screen and (max-width: 800px) {
	.pagination {
		margin-top: clamp(12px, 5.3333333333vw, 25.6px);
	}
}
.big-link_btn.-v2 {
	width: 90%;
	max-width: 1034px;
	margin: 0 auto;
}

/* ==========================================================================
	bottom-link_area
========================================================================== */
.bottom-link_area {
	margin-top: 12rem;
	padding: 16rem 0;
	background: var(--base-color-black02);
}
.bottom-link_area .inr {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 2rem 1fr 2rem 1fr;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
.bottom-link_area .img {
	position: relative;
	aspect-ratio: 507/676;
	overflow: hidden;
}
.bottom-link_area .img img {
	-webkit-transition: var(--transition-scale);
	transition: var(--transition-scale);
}
.bottom-link_area h3 {
	display: block;
	font-size: var(--fz32);
	line-height: 1;
	letter-spacing: -0.03em;
	margin: 3rem 0 2rem;
}
.bottom-link_area p {
	font-size: var(--fz15);
	line-height: 1.6;
}
@media screen and (min-width: 801px) {
	.bottom-link_area a:hover .img img {
		-webkit-transform: scale(1.05);
		        transform: scale(1.05);
	}
}

@media screen and (max-width: 800px) {
	.bottom-link_area {
		margin-top: clamp(48px, 21.3333333333vw, 102.4px);
		padding: 8rem 0;
	}
	.bottom-link_area .inr {
		display: block;
	}
	.bottom-link_area div {
		display: block;
		width: 100%;
	}
	.bottom-link_area div + div {
		margin-top: 4rem;
	}
	.bottom-link_area .img {
		apect-ratio: 335/446;
	}
	.bottom-link_area h3 {
		font-size: var(--fz24);
		line-height: 1.3333333333;
		margin: 2rem 0 1rem;
	}
	.bottom-link_area p {
		font-size: var(--fz14);
		line-height: 1.7142857143;
	}
}
/* ==========================================================================
	fv_area
========================================================================== */
.fv_area {
	position: relative;
	width: 100%;
	height: 945px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.fv_area .inr {
	position: absolute;
	bottom: 7rem;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 10;
	color: #fff;
}
.fv_area .num {
	display: block;
	font-size: var(--fz32);
	line-height: 1;
	font-weight: 500;
	margin-bottom: 1.5rem;
}
.fv_area h1 {
	position: relative;
	font-size: var(--fz48);
	line-height: 1.3333333333;
	margin-bottom: 3rem;
}
.fv_area .links {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.fv_area .links .wrap {
	display: inline-block;
}
.fv_area .links .wrap + .wrap {
	margin-left: 1rem;
}
.fv_area .cate {
	display: inline-block;
	font-size: var(--fz14);
	line-height: 2.1428571429;
	font-weight: 500;
	padding: 0 2rem 0.2rem;
	margin-right: 1rem;
	background: var(--theme-color);
	color: #fff;
	border-radius: 16px;
}
@media screen and (min-width: 801px) {
	.fv_area .cate:hover {
		background: #fff;
		color: var(--theme-color);
	}
}
.fv_area .tag {
	position: relative;
	display: inline-block;
	font-size: var(--fz15);
	line-height: 2;
	font-weight: 500;
	margin-right: 1.5rem;
	color: #fff;
	--ul_color: #fff;
}
.fv_area .fv_img {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.fv_area .fv_img img {
	-o-object-position: bottom center;
	   object-position: bottom center;
}
.fv_area .fv_img:after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 320px;
	z-index: 2;
	background: -webkit-gradient(linear, left bottom, left top, from(rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
	background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
	opacity: 0.5;
}

@media screen and (max-width: 800px) {
	.fv_area {
		aspect-ratio: 375/460;
		height: auto;
		max-height: 1000px;
	}
	.fv_area .inr {
		bottom: 3rem;
	}
	.fv_area .num {
		font-size: var(--fz20);
		margin-bottom: 1.6rem;
	}
	.fv_area h1 {
		font-size: var(--fz24);
		line-height: 1.25;
		margin-bottom: 2.5rem;
	}
	.fv_area .links {
		display: block;
	}
	.fv_area .links .wrap {
		display: block;
	}
	.fv_area .links .wrap + .wrap {
		margin-left: 0;
		margin-top: 1rem;
	}
	.fv_area .cate {
		font-size: var(--fz12);
		padding: 0.6rem 1.2rem 0.8rem;
		line-height: 1;
		margin-right: 0.5rem;
	}
	.fv_area .tag {
		font-size: var(--fz13);
		margin-right: 1.5rem;
	}
	.fv_area .fv_img:after {
		height: 245px;
	}
}
/* ==========================================================================
	detail_area
========================================================================== */
.detail_area {
	padding-top: 16rem;
}
.detail_area .intro_txt {
	display: block;
	font-size: var(--fz22);
	line-height: 2;
	max-width: 1030px;
	margin: 0 auto 20rem;
}

.detail {
	position: relative;
}
.detail.-t_line {
	border-top: 1px solid var(--base-border-color02);
	margin-top: 16rem;
	padding-top: 12rem;
}
.detail.-last {
	margin-bottom: 20rem;
}
.detail + .detail {
	margin-top: 20rem;
}
.detail h2 {
	font-size: var(--fz40);
	line-height: 1.45;
	text-align: center;
	margin-bottom: 4rem;
}
.detail p:not([class]) {
	font-size: var(--fz20);
	line-height: 1.8;
	letter-spacing: 0;
}
.detail .texts {
	position: relative;
	max-width: 770px;
	margin: 0 auto 8rem;
}
.detail .texts:not(.-intro) {
	margin-top: 6rem;
}
.detail .texts.-intro {
	padding-bottom: 10rem;
}
.detail .texts.-intro:after {
	content: "";
	display: block;
	width: 1px;
	height: 6rem;
	background: var(--base-color-black03);
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.detail .texts.-only {
	margin: 4rem auto 0;
	padding-bottom: 0;
}
.detail .texts.-only:after {
	display: none;
}
.detail .column-image {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 2rem;
	margin-bottom: 2rem;
}
.detail .column-image img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}
.detail .column-image > .-full {
	width: 100%;
}
.detail .column-image > .-half {
	width: calc(50% - 1rem);
}
.detail .column-image > .-landscape {
	aspect-ratio: 3/2;
}
.detail .column-image > .-landscape.-left img {
	-o-object-position: 0% 0%;
	   object-position: 0% 0%;
}
.detail .column-image > .-landscape.-right img {
	-o-object-position: 100% 100%;
	   object-position: 100% 100%;
}
.detail .column-image > .-portrait {
	aspect-ratio: 2/3;
}
.detail .column-image > .-portrait.-left img {
	-o-object-position: 0% 0%;
	   object-position: 0% 0%;
}
.detail .column-image > .-portrait.-right img {
	-o-object-position: 100% 100%;
	   object-position: 100% 100%;
}
.detail .column-image > .-square {
	aspect-ratio: 1/1;
}
.detail .column-image > .-square.-left img {
	-o-object-position: left top;
	   object-position: left top;
}
.detail .column-image > .-square.-right img {
	-o-object-position: right bottom;
	   object-position: right bottom;
}
.detail .column-image > .center img {
	-o-object-position: 50% 50%;
	   object-position: 50% 50%;
}
.detail .column-image.-X3 {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 0.2rem 1fr 0.2rem 1fr;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.2rem;
}
.detail .column-image + .column-image {
	margin-top: 2rem;
}
.detail .column-image .wp-image {
	margin-top: 0;
}

.floor_num {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	width: 82px;
	height: 82px;
	border-radius: 50%;
	border: 1px solid var(--base-border-color02);
	font-size: var(--fz40);
	font-weight: 500;
	color: var(--base-color-black03);
	padding-top: 3px;
	margin: 0 auto 3rem;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.floor_num:before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	border-radius: 50%;
	border: 1px solid var(--base-border-color02);
}
.floor_num span {
	font-size: var(--fz24);
	font-weight: 500;
	-webkit-transform: translateY(4px);
	        transform: translateY(4px);
}

.swiper-conteiner-wrap {
	position: relative;
	width: 100%;
	height: 865px;
	left: calc(50% - 50vw + 60px);
}
.swiper-conteiner-wrap:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 100%;
	width: 100vw;
	height: calc(100% + 3px);
	z-index: 2;
	background-color: var(--base-bg-color);
}

.swiper-container {
	left: 0;
	z-index: 1;
}

.swiper-wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.swiper-slide {
	width: 1297px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.slide-inner {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
}

/* スクロールバー */
.swiper-scrollbar {
	height: 2px;
	background: #ddd;
	margin-top: 20px;
	position: relative;
	left: 0;
}

.swiper-scrollbar-drag {
	background: #000;
	height: 100%;
}

@media screen and (max-width: 800px) {
	.detail_area {
		padding-top: 8rem;
	}
	.detail_area .intro_txt {
		font-size: var(--fz16);
		margin: 0 auto 8rem;
	}
	.detail.-t_line {
		margin-top: clamp(48px, 21.3333333333vw, 102.4px);
		padding-top: clamp(36px, 16vw, 76.8px);
	}
	.detail + .detail {
		margin-top: 8rem;
	}
	.detail.-last {
		margin-bottom: clamp(72px, 32vw, 153.6px);
	}
	.detail .texts {
		margin: 0 auto 4rem;
		padding-bottom: 7rem;
	}
	.detail .texts:after {
		height: 4rem;
	}
	.detail h2 {
		font-size: var(--fz24);
		line-height: 1.25;
		margin-bottom: 3rem;
	}
	.detail p:not([class]) {
		font-size: var(--fz16);
		line-height: 2;
	}
	.detail .column-image {
		gap: 1rem;
	}
	.detail .column-image > .-half {
		width: calc(50% - 0.5rem);
	}
	.detail .column-image.-X3 {
		-ms-grid-columns: (1fr)[2];
		grid-template-columns: repeat(2, 1fr);
	}
	.detail .column-image + .column-image {
		margin-top: 1rem;
	}
	.detail .floor_num {
		width: 62px;
		height: 62px;
		font-size: var(--fz24);
		padding-top: 1px;
		margin: 0 auto 2rem;
	}
	.detail .floor_num:before {
		width: calc(100% - 7px);
		height: calc(100% - 7px);
	}
	.detail .floor_num span {
		font-size: var(--fz16);
		-webkit-transform: translateY(2px);
		        transform: translateY(2px);
	}
	.detail .swiper-conteiner-wrap {
		height: 204px;
		left: calc(50% - 50vw + 5.33vw);
	}
	.detail .swiper-slide {
		width: 308px;
	}
}
/* ==========================================================================
	beer-slider
========================================================================== */
.beer-slider + .beer-slider {
	margin-top: 2rem;
}
.beer-slider + .column-image {
	margin-top: 2rem;
}

/* ==========================================================================
	insulation_area
========================================================================== */
.insulation_area {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	background: var(--base-bg-color09);
	padding: 5rem;
	margin-top: 2rem;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.insulation_area .img_area {
	width: 44.0456769984%;
}
.insulation_area .text_area {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: 49.4290375204%;
}
.insulation_area .text_area h3 {
	font-size: var(--fz42);
	line-height: 1.4523809524;
	margin-bottom: 1rem;
}
.insulation_area .text_area p {
	font-size: var(--fz15);
	line-height: 2;
	max-width: 550px;
}

@media screen and (max-width: 800px) {
	.insulation_area {
		display: block;
		padding: 2rem 2rem 7rem;
		margin-top: 1rem;
	}
	.insulation_area .img_area {
		width: 100%;
		margin-bottom: 2.9rem;
	}
	.insulation_area .text_area {
		display: block;
		width: 100%;
	}
	.insulation_area .text_area h3 {
		font-size: var(--fz28);
		line-height: 1.4642857143;
		text-align: center;
	}
	.insulation_area .text_area p {
		font-size: var(--fz15);
		line-height: 1.7333333333;
	}
}
/* ==========================================================================
	insulation_area
========================================================================== */
.flow {
	margin-top: 16rem;
}
.flow > .en-mincho {
	line-height: 1.45;
	text-align: center;
	margin-bottom: 0;
}
.flow h2 {
	font-size: var(--fz40);
	line-height: 1.45;
	text-align: center;
	margin-bottom: 4rem;
}
.flow ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.flow ul li {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	width: 24.4871794872%;
	height: 300px;
	text-align: center;
	background: rgb(182, 194, 196);
	z-index: 10;
}
.flow ul li:nth-child(2) {
	z-index: 9;
}
.flow ul li:nth-child(3) {
	z-index: 8;
}
.flow ul li:nth-child(4) {
	z-index: 7;
}
.flow ul li:not(:last-child):after {
	content: "";
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 38px;
	height: 30px;
	right: -27px;
	margin: auto;
	background: url(../img/renovation/flow-arrow.png);
	background-size: cover;
	z-index: 10;
}
.flow ul li div {
	text-align: center;
}
.flow ul li .en-mincho {
	font-size: var(--fz20);
	line-height: 1.5;
	font-weight: 500;
	margin-bottom: 1rem;
}
.flow ul li .mincho {
	font-size: var(--fz24);
	line-height: 1.4583333333;
	font-weight: 500;
}

@media screen and (max-width: 800px) {
	.flow {
		margin-top: clamp(48px, 21.3333333333vw, 102.4px);
	}
	.flow > .en-mincho {
		line-height: 1.5;
	}
	.flow h2 {
		font-size: var(--fz24);
		line-height: 1.4583333333;
		margin-bottom: 2rem;
	}
	.flow ul {
		display: block;
	}
	.flow ul li {
		width: 100%;
		height: 120px;
	}
	.flow ul li + li {
		margin-top: 0.5rem;
	}
	.flow ul li:not(:last-child):after {
		content: "";
		display: block;
		position: absolute;
		right: 0;
		left: 0;
		top: auto;
		bottom: -14px;
		width: 24px;
		height: 19px;
		-webkit-transform: rotate(90deg);
		        transform: rotate(90deg);
	}
	.flow ul li .en-mincho {
		font-size: var(--fz13);
		line-height: 1.5384615385;
		margin-bottom: 0.5rem;
	}
	.flow ul li .mincho {
		font-size: var(--fz20);
		line-height: 1.45;
	}
}
/* ==========================================================================
	service
========================================================================== */
.service {
	margin-top: 16rem;
	margin-bottom: 16rem;
}
.service > .en-mincho {
	line-height: 1.45;
	margin-bottom: 0;
	text-align: center;
}
.service h2 {
	font-size: var(--fz40);
	line-height: 1.45;
	text-align: center;
	margin-bottom: 4rem;
}
.service ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.service ul li {
	position: relative;
	width: 32.4358974359%;
	text-align: center;
}
.service ul li .img {
	margin-bottom: 1rem;
}
.service ul li p {
	font-size: var(--fz20);
	line-height: 1.45;
	text-align: center;
	font-weight: 500;
}
.service .s_txt {
	font-size: var(--fz14);
	line-height: 1.7142857143;
	letter-spacing: 0;
	margin-top: 4rem;
}

@media screen and (max-width: 800px) {
	.service {
		margin-top: clamp(48px, 21.3333333333vw, 102.4px);
		margin-bottom: clamp(48px, 21.3333333333vw, 102.4px);
	}
	.service > .en-mincho {
		line-height: 1.5;
	}
	.service h2 {
		font-size: var(--fz24);
		line-height: 1.4583333333;
		margin-bottom: 2rem;
	}
	.service ul {
		display: block;
	}
	.service ul li {
		width: 100%;
	}
	.service ul li + li {
		margin-top: 2rem;
	}
	.service ul li .img {
		margin-bottom: 0.5rem;
	}
	.service ul li p {
		font-size: var(--fz15);
		line-height: 1.4666666667;
	}
	.service .s_txt {
		font-size: var(--fz12);
		line-height: 1.6666666667;
		margin-top: 2rem;
	}
}
/* ==========================================================================
	features
========================================================================== */
.features {
	margin-top: 10rem;
	margin-bottom: 10rem;
}
.features h3 {
	font-size: var(--fz32);
	line-height: 1.4375;
	text-align: center;
	margin-bottom: 3rem;
}
.features ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.features ul li {
	position: relative;
	width: 32.5%;
	padding: 6rem 0 8rem;
	text-align: center;
	background: #fff;
	color: var(--theme-color);
}
.features ul li .num {
	width: clamp(110px, 14rem, 200px);
	height: clamp(110px, 14rem, 200px);
	border-radius: 50%;
	color: var(--theme-color);
	border: 1px solid var(--theme-color);
	font-size: var(--fz44);
	line-height: 1;
	padding-top: 3.7rem;
	margin: 0 auto 1.9rem;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	letter-spacing: 0;
}
.features ul li .num span {
	display: block;
	font-size: var(--fz16);
	line-height: 1.5;
}
.features ul li h4 {
	width: 90%;
	font-size: var(--fz34);
	line-height: 1.4411764706;
	margin: 0 auto 3rem;
}
.features ul li p:not([class]) {
	font-size: var(--fz18);
	line-height: 1.6666666667;
	text-align: left;
	width: 81.0650887574%;
	margin: 0 auto;
}

@media screen and (max-width: 900px) {
	.features ul li {
		width: 100%;
	}
	.features ul li + li {
		margin-top: 2rem;
	}
}
@media screen and (max-width: 800px) {
	.features {
		margin-top: clamp(48px, 21.3333333333vw, 102.4px);
		margin-bottom: clamp(48px, 21.3333333333vw, 102.4px);
	}
	.features h3 {
		font-size: var(--fz24);
		line-height: 1.4583333333;
		margin-bottom: 2rem;
	}
	.features ul li {
		padding: 4.5rem 3rem;
	}
	.features ul li .num {
		width: clamp(110px, 13rem, 200px);
		height: clamp(110px, 13rem, 200px);
		padding-top: 3rem;
		margin: 0 auto 2.5rem;
	}
	.features ul li h4 {
		width: 100%;
		font-size: var(--fz24);
		line-height: 1.4615384615;
		margin: 0 auto 2rem;
	}
	.features ul li p:not([class]) {
		font-size: var(--fz16);
		line-height: 1.5;
		width: 100%;
	}
}
/* ==========================================================================
	gallery
========================================================================== */
.gallery {
	margin-top: 20rem;
}
.gallery h2 {
	position: relative;
	font-size: var(--fz48);
	line-height: 1;
	text-align: center;
	color: var(--base-color-black03);
	margin-bottom: 18rem;
}
.gallery h2:after {
	content: "";
	display: block;
	width: 1px;
	height: 6rem;
	background: var(--base-color-black03);
	position: absolute;
	left: 0;
	right: 0;
	top: 72px;
	margin: auto;
}
.gallery .gallery-image {
	display: -ms-grid;
	display: grid;
	gap: 1rem;
	-ms-grid-columns: 1fr 1rem 1fr 1rem 1fr 1rem 1fr;
	grid-template-columns: repeat(4, 1fr);
}
.gallery .gallery-image a {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 1/1;
	opacity: 1;
	-webkit-transform: none;
	        transform: none;
	-webkit-transition: opacity 0.6s ease, -webkit-transform 0.6s ease;
	transition: opacity 0.6s ease, -webkit-transform 0.6s ease;
	transition: opacity 0.6s ease, transform 0.6s ease;
	transition: opacity 0.6s ease, transform 0.6s ease, -webkit-transform 0.6s ease;
}
.gallery .gallery-image a.hidden {
	display: none;
}
.gallery .gallery-image a.animate-in {
	opacity: 0;
	-webkit-transform: translateY(30px);
	        transform: translateY(30px);
}
.gallery .gallery-image a.visible {
	display: block;
	opacity: 1;
	-webkit-transform: translateY(0);
	        transform: translateY(0);
}
.gallery .gallery-image a img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}
.gallery .more {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	width: 360px;
	height: 48px;
	font-size: var(--fz16);
	line-height: 2;
	font-weight: 500;
	border-radius: 24px;
	border: 1px solid var(--base-border-color05);
	background: none;
	margin: 0 auto;
	letter-spacing: 0.02em;
	-webkit-transition: background 0.4s var(--easeOutCubic), color 0.4s var(--easeOutCubic);
	transition: background 0.4s var(--easeOutCubic), color 0.4s var(--easeOutCubic);
	margin-top: 4rem;
}
@media screen and (min-width: 801px) {
	.gallery .more:hover {
		background: #333;
		color: #fff;
	}
}

@media screen and (max-width: 800px) {
	.gallery {
		margin-top: clamp(48px, 21.3333333333vw, 102.4px);
	}
	.gallery h2 {
		font-size: var(--fz32);
		margin-bottom: 11rem;
	}
	.gallery h2:after {
		height: 4rem;
		top: 51px;
	}
	.gallery .gallery-image {
		display: -ms-grid;
		display: grid;
		gap: 1rem;
		-ms-grid-columns: 1fr 1rem 1fr;
		grid-template-columns: repeat(2, 1fr);
	}
	.gallery .more {
		width: 100%;
		max-width: 400px;
		font-size: var(--fz15);
	}
}
/* ==========================================================================
	data
========================================================================== */
.data {
	margin-top: 20rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.data .img_area {
	position: relative;
	overflow: hidden;
	width: 40.8974358974%;
	aspect-ratio: 638/850;
}
.-renovation .data .img_area {
	aspect-ratio: 638/700;
}

.data .text_area {
	width: 49.358974359%;
}
.data h2 {
	font-size: var(--fz32);
	line-height: 1.4375;
	font-weight: 500;
	margin-bottom: 3.8rem;
}
.data dl {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	border-top: 1px solid var(--base-border-color02);
	padding: 1.9rem 0;
}
.data dl:last-child {
	border-bottom: 1px solid var(--base-border-color02);
}
.data dl dt {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: 23.3766233766%;
	min-widh: 190px;
	font-size: 2rem;
	line-height: 1.8;
	font-weight: 500;
	color: var(--theme-color);
}
.data dl dt p {
	font-weight: 500;
}
.data dl dd {
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	margin-left: 2rem;
	font-size: 2rem;
	line-height: 1.8;
}
.data dl ol {
	list-style: decimal inside;
	margin-bottom: 1rem;
}
.data dl ol li {
	font-size: 1.5rem;
	line-height: 1.4666666667;
}

@media screen and (max-width: 950px) {
	.data .img_area {
		display: none;
	}
	.data .text_area {
		width: 100%;
	}
}
@media screen and (max-width: 800px) {
	.data {
		margin-top: clamp(48px, 21.3333333333vw, 102.4px);
		display: block;
	}
	.data h2 {
		font-size: var(--fz24);
		line-height: 1.4583333333;
		margin-bottom: 2rem;
	}
	.data dl {
		display: block;
		padding: 1.5rem 0;
	}
	.data dl dt {
		display: block;
		width: 100%;
		min-widh: 10px;
		font-size: var(--fz13);
		line-height: 1.4615384615;
	}
	.data dl dd {
		display: block;
		margin-left: 0rem;
		font-size: var(--fz16);
		line-height: 1.4375;
	}
	.data dl ol {
		margin-bottom: 0;
	}
	.data dl ol li {
		font-size: var(--fz16);
		line-height: 1.4375;
	}
}
/* ==========================================================================
	consultation
========================================================================== */
.consultation {
	margin-top: 10rem;
}
.consultation h2 {
	font-size: var(--fz30);
	line-height: 1.5333333333;
	text-align: center;
	margin-bottom: 3rem;
	letter-spacing: 0;
}
.consultation .n_txt {
	margin-bottom: 3rem;
	letter-spacing: 0;
	line-height: 1.5;
}
.consultation .big-link_btn {
	margin-top: 0;
}

@media screen and (max-width: 800px) {
	.consultation {
		margin-top: clamp(48px, 21.3333333333vw, 102.4px);
	}
	.consultation h2 {
		font-size: var(--fz24);
		line-height: 1.4583333333;
	}
	.consultation .n_txt {
		line-height: 1.7142857143;
	}
	.consultation .big-link_btn {
		margin-top: 0;
	}
}
/* ==========================================================================
	area
========================================================================== */
.area {
	margin-bottom: 0;
}
@media screen and (min-width: 1051px) {
	.area .text_area {
		right: 5.1282051282%;
	}
}
.area .n_txt {
	font-size: var(--fz18);
	line-height: 1.5555555556;
}
.area .n_txt .s_txt {
	display: none;
}

@media screen and (max-width: 800px) {
	.area .n_txt {
		font-size: var(--fz14);
		line-height: 1.7142857143;
	}
}
/* ==========================================================================
	beer-slider
========================================================================== */
.beer-slider .ba-hint {
	position: absolute;
	inset: 0;
	z-index: 50;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	text-align: center;
	font-size: var(--fz18);
	letter-spacing: 0.02em;
	font-weight: 500;
	padding: 1.2em;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	-webkit-transition: opacity 0.25s ease, visibility 0.25s ease;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}
.beer-slider .ba-hint.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

@media screen and (max-width: 800px) {
	.beer-slider .ba-hint {
		font-size: var(--fz14);
	}
}
/*# sourceMappingURL=portfolio.css.map */