@charset "UTF-8";

/* --------------------------------------------
LINKS
--------------------------------------------- */
:where( #links01 , #links02 ){
	position : relative;
	display : grid;
	justify-content : center;
	overflow-x : clip;
}
:where( #links01 , #links02 )::before{
	position : absolute;
	left : 0;
	display : block;
	width : 100%;
	height : calc( 2 var( --remBase ) );
	font-size : 0;
	content : "";
	background-color : #d9d9d9;
}
:where( #links01 , #links02 ) a{
	position : relative;
	display : block;
	width : 100%;
	font-weight : 400;
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
}
:where( #links01 , #links02 ) a::after{
	position : absolute;
	bottom : 0;
	left : 0;
	width : 100%;
	font-size : 0;
	content : "";
	background-color : transparent;
	border-radius : 100vmax;
}
:where( #links01 , #links02 ) a[aria-current="page"]{
	font-weight : 500;
}
:where( #links01 , #links02 ) a[aria-current="page"]::after{
	background-color : var( --orange02 );
}
@media screen and ( width <= 750px ){
	:where( #links01 , #links02 ){
		grid-template-columns : repeat( 2 , calc( 176 var( --percentBase ) ) );
		column-gap : calc( 16 var( --percentBase ) );
	}
	:where( #links01 , #links02 )::before{
		bottom : calc( 2 var( --remBase ) );
	}
	:where( #links01 , #links02 ) a{
		padding-top : calc( 6 var( --remBase ) );
		padding-bottom : calc( 10 var( --remBase ) );
		font-size : 2.0rem;
		line-height : 1.3;
	}
	:where( #links01 , #links02 ) a::after{
		height : calc( 6 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	:where( #links01 , #links02 ){
		grid-template-columns : repeat( 2 , calc( 600 var( --percentBase ) ) );
		column-gap : calc( 40 var( --percentBase ) );
	}
	:where( #links01 , #links02 )::before{
		bottom : calc( 4 var( --remBase ) );
	}
	:where( #links01 , #links02 ) a{
		padding-bottom : calc( 46 var( --remBase ) );
		font-size : 3.2rem;
	}
	:where( #links01 , #links02 ) a::after{
		height : calc( 10 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	#links01{
		margin-top : calc( 52 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#links01{
		margin-top : calc( 80 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	#links02{
		margin-bottom : calc( 92 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#links02{
		margin-bottom : calc( 80 var( --remBase ) );
	}
}
@media ( hover : hover ){
	:where( #links01 , #links02 ) a:hover{
		font-weight : 500;
	}
	:where( #links01 , #links02 ) a:hover::after{
		background-color : var( --orange02 );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	:where( #links01 , #links02 ) a{
		transition : font-weight var( --transitionBase );
	}
	:where( #links01 , #links02 ) a::after{
		transition : background var( --transitionBase );
	}
}

/* --------------------------------------------
COLUMN
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#column{
		margin-top : calc( 52 var( --remBase ) );
	}
	#column #sidebar{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#column{
		display : grid;
		grid-template-columns : calc( 1360 var( --percentBase ) ) calc( 440 var( --percentBase ) );
		align-items : start;
		justify-content : space-between;
		margin-top : calc( 80 var( --remBase ) );
	}
}
#sidebar h4{
	display : grid;
	align-items : center;
	justify-content : start;
	color : white;
	background-color : var( --green );
}
@media screen and ( width <= 750px ){
	#sidebar h4{
		height : calc( 84 var( --remBase ) );
		padding-inline : calc( 8 var( --percentBase ) );
		font-size : 2.8rem;
		font-weight : 500;
		line-height : 1.3;
	}
	#sidebar ul{
		margin-top : calc( 8 var( --remBase ) );
	}
	#sidebar li{
		border-bottom : solid 1px #f1f2ed;
	}
	#sidebar a{
		display : grid;
		align-items : center;
		justify-content : start;
		height : calc( 48 var( --remBase ) );
		padding-inline : calc( 8 var( --percentBase ) );
		font-size : 1.6rem;
		font-weight : 500;
		line-height : calc( 22 / 16 );
		color : #3b3938;
	}
	#sidebar ul + h4{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#sidebar h4{
		height : calc( 80 var( --remBase ) );
		padding-inline : calc( 24 * 100% / 440 );
		font-size : 2rem;
		font-weight : 400;
		line-height : 1.5;
	}
	#sidebar ul{
		margin-top : calc( 24 var( --remBase ) );
	}
	#sidebar li{
		padding-inline : calc( 24 * 100% / 440 );
	}
	#sidebar li + li{
		margin-top : calc( 10 var( --remBase ) );
	}
	#sidebar a{
		font-size : 2rem;
		line-height : 1.5;
	}
	#sidebar ul + h4{
		margin-top : calc( 24 var( --remBase ) );
	}
}

/* --------------------------------------------
CONTACTS
--------------------------------------------- */
#contacts{
	background-color : #f1f2ed;
}
#contacts h4{
	font-weight : 500;
	line-height : 1.3;
	letter-spacing : .1em;
}
#contacts p{
	line-height : 1.5;
}
#contacts .tels a{
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : start;
	font-weight : 900;
	letter-spacing : .1em;
}
#contacts .tels a img{
	aspect-ratio : 77/48;
}
#contacts .tels dl{
	display : grid;
	grid-auto-flow : column;
	align-items : baseline;
	justify-content : start;
}
#contacts .tels dt , #contacts .tels dd{
	font-size : 1.4rem;
	font-weight : 500;
	line-height : 1.3;
	letter-spacing : .1em;
}
#contacts :where( .contact , .line ){
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	font-size : 1.6rem;
	font-weight : 700;
	line-height : 1.5;
	color : white;
}
#contacts .contact{
	background-color : var( --orange );
}
#contacts .contact::before{
	display : block;
	width : 100%;
	height : calc( 21 var( --remBase ) );
	aspect-ratio : 30/21;
	font-size : 0;
	content : "";
	background-image : url( "../images/ui/icon/email01.svg" );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#contacts .line{
	background-color : #06c755;
}
#contacts .line img{
	height : calc( 19 var( --remBase ) );
	aspect-ratio : 70/19;
}
@media screen and ( width <= 750px ){
	#contacts{
		padding-block : calc( 24 var( --remBase ) );
	}
	#contacts h4{
		font-size : 2.6rem;
	}
	#contacts p{
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
	}
	#contacts .tels{
		margin-top : calc( 13 var( --remBase ) );
	}
	#contacts .tels a{
		column-gap : calc( 8 var( --percentBase ) );
		font-size : 4.2rem;
	}
	#contacts .tels a img{
		height : calc( 36 var( --remBase ) );
	}
	#contacts .tels dl{
		margin-top : calc( 8 var( --remBase ) );
	}
	#contacts .tels dt , #contacts .tels dd{
		font-size : 1.4rem;
	}
	#contacts :where( .contact , .line ){
		justify-content : start;
		width : 100%;
		height : calc( 48 var( --remBase ) );
	}
	#contacts .contact{
		column-gap : calc( 4 * 100% / 348 );
		padding-left : calc( 10 var( --percentBase ) );
		margin-top : calc( 12 var( --remBase ) );
	}
	#contacts .line{
		column-gap : calc( 4 * 100% / 346 );
		padding-left : calc( 11 var( --percentBase ) );
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#contacts{
		display : grid;
		grid-template-rows : auto auto calc( 9 var( --remBase ) ) calc( 48 var( --remBase ) );
		grid-template-columns : auto calc( 44 var( --percentBase ) ) calc( 240 var( --percentBase ) ) calc( 8 var( --percentBase ) ) calc( 240 var( --percentBase ) ) auto;
		justify-content : center;
		padding-top : calc( 64 var( --remBase ) );
		padding-bottom : calc( 52 var( --remBase ) );
	}
	#contacts h4{
		grid-row : 1;
		grid-column : 1;
		padding-bottom : calc( 16 var( --remBase ) );
		font-size : 3.4rem;
	}
	#contacts p{
		grid-row : 2/-1;
		grid-column : 1;
		align-self : start;
		font-size : 1.6rem;
	}
	#contacts .tels{
		grid-row : 1/3;
		grid-column : 3/-1;
	}
	#contacts .tels a{
		column-gap : calc( 11 var( --remBase ) );
		font-size : 6rem;
	}
	#contacts .tels a img{
		height : calc( 48 var( --remBase ) );
	}
	#contacts .tels dl{
		margin-top : calc( 2 var( --remBase ) );
		margin-left : calc( 88 var( --remBase ) );
	}
	#contacts :where( .contact , .line ){
		grid-row : 4;
		column-gap : calc( 4 * 100% / 240 );
		justify-content : center;
	}
	#contacts .contact{
		grid-column : 3;
	}
	#contacts .line{
		grid-column : 5;
	}
}

/* --------------------------------------------
BREADCRUMBS
--------------------------------------------- */
#breadcrumb ol{
	display : flex;
	flex-wrap : wrap;
}
#breadcrumb li:not( :last-child )::after{
	white-space : pre;
	content : "  /  ";
}
#breadcrumb li:not( :last-child )::after , #breadcrumb a{
	line-height : 1.5;
}
@media screen and ( width <= 750px ){
	#breadcrumb{
		padding-block : calc( 35.5 var( --remBase ) );
	}
	#breadcrumb li:not( :last-child )::after , #breadcrumb a{
		font-size : 1.4rem;
	}
}
@media screen and ( width > 750px ) , print{
	#breadcrumb{
		padding-block : calc( 23 var( --remBase ) );
	}
	#breadcrumb li:not( :last-child )::after , #breadcrumb a{
		font-size : 2rem;
	}
}

/* --------------------------------------------
FOOTER
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#main:not( :has( #breadcrumb ) ) + #footer{
		margin-top : calc( 92 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#main:not( :has( #breadcrumb ) ) + #footer{
		margin-top : calc( 76 var( --remBase ) );
	}
}
#toTop{
	position : absolute;
	display : block;
	width : fit-content;
	height : calc( 60 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	#toTop{
		top : calc( -76 var( --remBase ) );
		right : 0;
	}
}
@media screen and ( width > 750px ) , print{
	#toTop{
		top : calc( -68 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1960px ){
	#toTop{
		right : calc( 40 var( --percentBase ) );
	}
}
@media screen and ( width >= 1960px ) , print{
	#toTop{
		left : calc( 50% + 776px );
	}
}
#footer{
	position : relative;
	background-color : var( --gray );
}
#footer > ul{
	border-image-source : linear-gradient( var( --green ) , var( --green ) );
	border-image-slice : 0 fill;
	border-image-outset : 0 100vw 0 100vw;
}
#footer > ul a{
	font-size : 1.8rem;
	font-weight : 500;
	line-height : 1.2;
	color : white;
}
#footer .me{
	color : white;
}
#footer .me a{
	color : white;
}
#footer .me > a{
	grid-row : 1/-1;
	grid-column : 1;
}
#footer .me > a:nth-of-type( 1 ){
	display : block;
}
#footer .me dl{
	display : grid;
	grid-row : 2;
	grid-column : 6;
	grid-auto-flow : column;
	align-items : start;
	justify-content : start;
}
#footer .me dl dd , #footer .me dl dd + dt{
	margin-left : 1em;
}
#footer .me > a:nth-of-type( 2 ){
	display : grid;
	grid-template-columns : auto auto;
	align-items : baseline;
	justify-content : start;
	line-height : 1.3;
}
#footer .me > a:nth-of-type( 2 )::before{
	white-space : pre;
	content : "» ";
}
#footer > p{
	font-family : Alata , serif;
	line-height : 1.7;
	color : white;
	text-align : right;
	letter-spacing : .1em;
}
@media screen and ( width <= 750px ){
	#footer{
		padding-bottom : calc( 36 var( --remBase ) );
	}
	#footer > ul{
		padding-top : calc( 8 var( --remBase ) );
		padding-bottom : calc( 4 var( --remBase ) );
	}
	#footer > ul li + li a{
		border-top : solid 1px #d9d9d9;
	}
	#footer > ul a{
		display : grid;
		place-items : center;
		height : calc( 54 var( --remBase ) );
	}
	#footer .me{
		padding-top : calc( 28 var( --remBase ) );
	}
	#footer .me > a:nth-of-type( 1 ) img{
		height : calc( 33 var( --remBase ) );
	}
	#footer .me :where( p , dt ,dd ){
		font-size : 1.4rem;
		line-height : 2;
	}
	#footer .me p{
		margin-top : calc( 16 var( --remBase ) );
	}
	#footer .me > a:nth-of-type( 2 ){
		margin-top : calc( 16 var( --remBase ) );
		font-size : 1.4rem;
	}
	#footer > p{
		margin-top : calc( 24 var( --remBase ) );
		font-size : 1rem;
	}
}
@media screen and ( width > 750px ) , print{
	#footer{
		padding-bottom : calc( 40 var( --remBase ) );
	}
	#footer > ul{
		display : grid;
		grid-auto-flow : column;
		justify-content : start;
		padding-top : calc( 35 var( --remBase ) );
		padding-bottom : calc( 39 var( --remBase ) );
	}
	#footer > ul li + li::before{
		margin-inline : calc( 16 var( --remBase ) );
		font-size : 1.8rem;
		font-weight : 500;
		line-height : 1.2;
		color : white;
		content : "｜";
	}
	#footer .me{
		display : grid;
		grid-template-rows : 1fr auto calc( 12 var( --remBase ) ) auto 1fr;
		grid-template-columns : auto calc( 56 var( --percentBase ) ) auto auto calc( 16 var( --percentBase ) ) auto;
		align-items : center;
		justify-content : start;
		padding-top : calc( 55 var( --remBase ) );
	}
	#footer .me > a:nth-of-type( 1 ) img{
		height : calc( 68 var( --remBase ) );
	}
	#footer .me :where( p , dt , dd ){
		font-size : 1.6rem;
		line-height : 1.3;
	}
	#footer .me p{
		grid-row : 2;
		grid-column : 3/5;
	}
	#footer .me dl{
		display : grid;
		grid-row : 2;
		grid-column : 6;
		grid-auto-flow : column;
	}
	#footer .me dl dd , #footer .me dl dd + dt{
		margin-left : 1em;
	}
	#footer .me > a:nth-of-type( 2 ){
		grid-row : 4;
		grid-column : 3;
		font-size : 1.6rem;
	}
	#footer > p{
		margin-top : calc( 68 var( --remBase ) );
		font-size : 1.6rem;
	}
}