@charset "utf-8";

:root{

	--bp_pc_max: 3840px;
	--bp_pc_bas: 1920px;
	--bp_pc_min: 1281px;
	--bp_tb_max: 1280px;
	--bp_tb_min: 521px;
	--bp_sp_max: 520px;
	--bp_sp_min: 340px;

}

html{
	
}

/*--------------------------------------*/

body{
	
}
@media screen and (min-width: 521px){
	body{

	}
}
@media screen and (max-width: 520px){
	body{
		
	}
}

@keyframes csn-rotate{
	to{
		transform: rotate(360deg);
	}
}

/*--------------------------------------*/

#wrapper{
	background-color: var(--c_offwhite);
}
@media screen and (min-width: 521px){
	#wrapper{

	}
}
@media screen and (max-width: 520px){
	#wrapper{
		
	}
}

/*--------------------------------------*/

#main{
	isolation: isolate;
}
@media screen and (min-width: 521px){
	#main{

	}
}
@media screen and (max-width: 520px){
	#main{

	}
}

/*--------------------------------------*/

#contents{
	
}
@media screen and (min-width: 521px){
	#contents{

	}
}
@media screen and (max-width: 520px){
	#contents{

	}
}

/**********************************************************************/
/* ボタン関係
/**********************************************************************/

.button.common{
	display: flex;
	justify-content: space-between;
	padding: .6em 0;
	border-bottom: 1px solid transparent;
	min-width: 12.5em;
}
.button.common.dot .label{
	position: relative;
	padding-left: 2em;
}
.button.common.dot .label::before{
	content: "";
	display: block;
	width: .75em;
	height: .75em;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%3E%3Ccircle%20cx='7'%20cy='7'%20r='7'%20fill='%239f9f9f'%20opacity='0.12'/%3E%3Ccircle%20cx='3'%20cy='3'%20r='3'%20transform='translate(4%204)'%20fill='%239f9f9f'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(0, -50%);
}
.button.common.arrow .icon{
	width: 2.32em;
	height: 1.375em;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='13.444'%20height='6.402'%20viewBox='0%200%2013.444%206.402'%3E%3Cpath%20d='M681.291,1592.708h11.634l-5.122-5.122'%20transform='translate(-681.291%20-1587.055)'%20fill='none'%20stroke='%23fff'%20stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center top 40%;
	background-size: .75em auto;
	background-color: var(--c_olive);
	border-radius: 10em;
	transform: translate(0, 20%);
	margin-left: 2em;
}
.button.common.subarrow .icon{
	width: 2.32em;
	height: 1.375em;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='13.444'%20height='6.402'%20viewBox='0%200%2013.444%206.402'%3E%3Cpath%20d='M681.291,1592.708h11.634l-5.122-5.122'%20transform='translate(-681.291%20-1587.055)'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 40% top 45%;
	background-size: 1em auto;
	background-color: transparent;
	border-radius: 10em;
	margin-left: 2em;
}

@media screen and (max-width: 520px){
	.button.common.subarrow .icon{
		background-size: .8em auto;
	}
}

/**********************************************************************/
/* リンカー
/**********************************************************************/

[data-mod-linker] a{
	display: block;
}
[data-mod-linker] .parent .button{
	padding-block: 2em;
	border-color: var(--c_border);
}
[data-mod-linker] .parent .label{
	font-size: 125%;
}
[data-mod-linker] .parent .button.common.arrow .icon{
	transform: translate(0, 10%);
}
[data-mod-linker] .children{
	padding-block: 1em;
}
[data-mod-linker] .children .button{
	border-color: transparent;
}
[data-mod-linker] .children .button .label{
	position: relative;
	padding-left: 2.5em;
}
[data-mod-linker] .children .button .label::before{
	content: "";
	display: block;
	width: .6em;
	height: 1px;
	background-color: #707070;
	position: absolute;
	left: .5em;
	top: 50%;
	transform: translate(0, -50%);
}

/**********************************************************************/
/* お問い合わせ
/**********************************************************************/

section.contact .banner{
	background-color: var(--c_brown);
	color: #fff;
}
section.contact .banner .leading{
	padding: 4vw 4vw;
	max-width: 24em;
	box-sizing: content-box;
}
section.contact .banner .leading .title .label{
	padding-left: .75em;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%3E%3Cg%20transform='translate(-435.002%20-1743.238)'%3E%3Ccircle%20cx='7'%20cy='7'%20r='7'%20transform='translate(435.002%201743.238)'%20fill='%23fff'%20opacity='0.12'/%3E%3Ccircle%20cx='3'%20cy='3'%20r='3'%20transform='translate(439.002%201747.238)'%20fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left top .75em;
	background-size: auto;
}
section.contact .banner .leading .description{
	margin-top: 1em;
}
section.contact .banner .leading .link{
	margin-top: 2.5em;
}
section.contact .banner .leading .link a{
	display: block;
}
section.contact .banner .leading .link .button{
	background-color: rgba(255,255,255,.14);
	border-radius: 10em;
	padding: .75em 2em;
	padding-right: 1.5em;
}
section.contact .banner .leading .link .button .label{
	padding-block: .25em;
	padding-left: 3em;
	background-image: url("../img/icons/email.svg");
	background-repeat: no-repeat;
	background-position: left .7em;
	background-size: auto;
}
section.contact .banner .leading .link .button .icon{
	width: 2.32em;
	height: 1.375em;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='13.444'%20height='6.402'%20viewBox='0%200%2013.444%206.402'%3E%3Cpath%20d='M681.291,1592.708h11.634l-5.122-5.122'%20transform='translate(-681.291%20-1587.055)'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: .75em auto;
	background-color: #fff;
	border-radius: 10em;
	margin-left: 2em;
	transform: translate(0, 5%);
}
section.contact .banner .imaging{
	flex: 1;
	overflow: hidden;
}
section.contact .banner .imaging .image{
	width: 100%;
	height: 100%;

	background-image: url("../img/common/contact_bg.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
@media screen and (max-width: 1000px){
	section.contact .banner .leading{
		padding: 4vw 5vw;
		max-width: 40%;
	}
}
@media screen and (max-width: 920px){
	section.contact .banner{
		border-radius: 1em;
		overflow: hidden;
		flex-direction: column-reverse;
	}
	section.contact .banner .leading{
		max-width: none;
	}
	section.contact .banner .imaging{
		aspect-ratio: 20 / 9;
	}
}
@media screen and (max-width: 520px){
	section.contact .inner{
		padding-block: calc(var(--p_spacer) / 2);
	}
	section.contact .banner .leading{
		padding: 2em 6vw 2.5em 6vw;
	}
	section.contact .banner .imaging{
		aspect-ratio: 12 / 9;
	}
	section.contact .banner .leading .link{
		margin-top: 1.5em;
	}
	section.contact .banner .leading .link .button .label{
		padding-left: 0;
		background: none;
		white-space: nowrap;
	}
	section.contact .banner .leading .link .button .icon{
		margin-left: 1em;
	}
}

/*--------------------------------------*/

#sidebar{
	
}
@media screen and (min-width: 521px){
	#sidebar{

	}
}
@media screen and (max-width: 520px){
	#sidebar{

	}
}

/*--------------------------------------*/

footer{
	
}
@media screen and (min-width: 521px){
	footer{

	}
}
@media screen and (max-width: 520px){
	footer{

	}
}