@charset "UTF-8";

/*--------------------------------------------
TITLE
---------------------------------------------*/

#title{
	display : grid;
	position : relative;
	overflow : hidden;
	color : #fff;
}

#title a{
	color : #fff;
}

#title h1{
	font-weight : 300;
	letter-spacing : .2em;
	text-shadow : 0 .5rem .5rem rgba(1, 1, 1, .8);
}

#title h1 span{
	letter-spacing : .1em;
	font-weight : 500;
	display : block;
}

#title h1[data-after]:after{
	text-indent : 0;
	display : block;
	letter-spacing : .1em;
	font-family : "Noto Serif JP", serif;
	border-top-style : solid;
	border-top-color : #fff;
	font-style : italic;
	border-top-width : 1px;
}

#title picture{
	position : absolute;
	width : 100%;
	height : 100%;
	top : 0;
	left : 0;
	overflow : hidden;
}

#title picture > img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}

#title picture{
	z-index : -1;
}

@media screen and (max-width: 750px){
	#title{
		grid-template-rows : calc( ( 19 - 8 ) * 100vw / 750 ) auto 1fr auto calc( ( 22 - 9 ) * 100vw / 750 );
		height : calc( 250 * 100vw / 750 );
	}
	#title h1{
		grid-row : 4;
		grid-column : 1;
	}
	#title h1{
		font-size : 6rem;
		line-height : 1.2;
	}
	#title h1 span{
		font-size : 2rem;
		line-height : 1.8;
	}
	#title h1[data-after]:after{
		margin-top : calc( ( 19 - 6 ) * 100vw / 750 );
		padding-top : calc( ( 19 - 9 ) * 100vw / 750 );
	}
	#title h1[data-after]:after{
		font-size : 1.8rem;
		line-height : 2;
	}
}

@media print,screen and (min-width: 751px){
	#title{
		height : 250px;
		align-items : end;
		grid-template-columns : 20px minmax( 500px , auto ) 1fr auto 20px;
		padding-bottom : calc( 22px - 9px );
	}
	#title h1{
		grid-row : 1;
		grid-column : 2;
		padding-left : 16px;
	}
	#title h1{
		font-size : 5rem;
		line-height : 1.2;
	}
	#title h1 span{
		font-size : 2rem;
		line-height : 1.8;
	}
	#title h1[data-after]:after{
		margin-left : -16px;
		margin-top : calc( 19px - 9px );
		padding-left : 16px;
	}
	#title h1[data-after]:after{
		font-size : 1.8rem;
		line-height : 2;
	}
}

/*--------------------------------------------
BREADCRUMBS
---------------------------------------------*/

#breadcrumbs{
	display : flex;
	justify-content : flex-end;
	flex-wrap : wrap;
}

#breadcrumbs li + li:before{
	content : "　／　";
	white-space : pre;
}

@media screen and (max-width: 750px){
	#breadcrumbs{
		grid-row : 2;
		grid-column : 1;
	}
	#breadcrumbs li , #breadcrumbs a{
		font-size : 1.6rem;
		line-height : 2;
	}
}

@media print,screen and (min-width: 751px){
	#breadcrumbs{
		grid-row : 1;
		grid-column : 4;
		padding-bottom : 2px;
	}
	#breadcrumbs li , #breadcrumbs a{
		font-size : 1.6rem;
		line-height : 2;
	}
}

/*--------------------------------------------
SUBLINKTOP
---------------------------------------------*/

#sublinkTop{
	background-color : #999;
	color : #fff;
}

#sublinkTop a{
	color : #fff;
	border-bottom : 1px solid #fff;
	transition : font-weight .3s ease-in , border-bottom-color .3s ease-in;
}

#sublinkTop a.is-current , #sublinkTop a:hover{
	font-weight : 700;
	border-bottom-color : transparent;
}

#sublinkTop > a{
	display : block;
	grid-column : 1;
	grid-row : 1;
}

#sublinkTop > ul{
	grid-column : 2;
	grid-row : 1;
	display : flex;
	position : relative;
}

#sublinkTop > ul:before{
	content : "｜";
	position : absolute;
	top : 0;
	left : 0;
}

#sublinkTop > ul li{
	display : flex;
	align-items : flex-start;
}

#sublinkTop > ul li:not(:last-child):after{
	content : "｜";
}

#sublinkTop > ul a{
	display : block;
}

#sublinkTop > ul a.is-current{
}

@media screen and (max-width: 750px){
	#sublinkTop{
		width : 100%;
		overflow-x : auto;
		padding-top : calc( 28 * 100vw / 750 );
		padding-bottom : calc( 33 * 100vw / 750 );
		display : flex;
		align-items : flex-start;
	}
	#sublinkTop > a , #sublinkTop > ul{
		flex-shrink : 0;
	}
	#sublinkTop > a , #sublinkTop ul:before , #sublinkTop li{
		font-size : 2.6rem;
	}
	#sublinkTop ul{
		padding-left : calc( 30 * 100vw / 750 );
	}
	#sublinkTop li a{
		white-space : nowrap;
	}
	#sublinkTop a{
		padding-bottom : calc( 13 * 100vw / 750 );
	}
}

@media print,screen and (min-width: 751px){
	#sublinkTop{
		display : grid;
		grid-template-columns : auto 1fr;
		align-items : start;
		grid-row : auto;
		padding-top : 32px;
		padding-bottom : 26px;
	}
	#sublinkTop ul{
		row-gap : 7px;
		padding-left : 20px;
		flex-wrap : wrap;
	}
	#sublinkTop ul:before{
		margin-right : 4px;
	}
	#sublinkTop > a , #sublinkTop ul:before , #sublinkTop li{
		font-size : 1.6rem;
	}
	#sublinkTop a{
		padding-bottom : 8px;
	}
}

/*--------------------------------------------
TITLE TAX
---------------------------------------------*/

#titleOutline{
	color : #fff;
}

#titleOutline.tax{
	background-color : #518fbc;
}

#titleOutline.audit{
	background-color : var(--green);
}

#titleOutline a{
	color : #fff;
}

#titleOutline ul{
	display : flex;
}

#titleOutline li:not(:last-child):after{
	content : "｜";
}

#titleOutline a{
	transition : border-color .3s ease-in , font-weight .3s ease-in;
	border-bottom-width : 1px;
	border-bottom-style : solid;
	display : inline-block;
}

#titleOutline a.is-current{
	font-weight : 700;
	border-bottom-color : transparent;
}

#titleOutline a:not(.is-current){
	border-bottom-color : #fff;
}

#titleOutline a:hover{
	font-weight : 700;
	border-bottom-color : transparent;
}

@media screen and (max-width: 750px){
	#titleOutline{
		padding-top : calc( 17 * 100vw / 750 );
		grid-template-columns : auto 1fr;
		overflow : hidden;
	}
	#titleOutline.tax h2{
		margin-left : calc( 18 * 100% / 750 );
	}
	#titleOutline.tax h2 img{
		height : calc( 54 * 100vw / 750 );
	}
	#titleOutline.audit h2{
		margin-left : calc( 18 * 100% / 750 );
	}
	#titleOutline.audit h2 img{
		height : calc( 54 * 100vw / 750 );
	}
	#titleOutline ul{
		margin-top : calc( 19 * 100vw / 750 );
		overflow-x : auto;
		padding-bottom : calc( 30 * 100vw / 750 );
		padding-left : calc( 30 * 100% / 750 );
		padding-right : calc( 30 * 100% / 750 );
	}
	#titleOutline li{
		font-size : 2.6rem;
		white-space : nowrap;
	}
	#titleOutline a{
		padding-bottom : calc( 13 * 100vw / 750 );
	}
}

@media print,screen and (min-width: 751px){
	#titleOutline{
		min-height : 86px;
		padding-top : 15px;
		padding-bottom : 15px;
		display : grid;
		align-items : center;
		grid-template-columns : auto 1fr;
	}
	#titleOutline.tax{
		column-gap : 37px;
	}
	#titleOutline.tax h2{
		column-gap : 21px;
	}
	#titleOutline.tax ul{
		padding-top : 8px;
	}
	#titleOutline.audit{
		column-gap : 61px;
	}
	#titleOutline.audit h2{
		column-gap : 20px;
	}
	#titleOutline h2{
		display : grid;
		align-items : center;
		grid-template-columns : auto auto;
		justify-content : start;
	}
	#titleOutline h2 img{
		height : 33px;
	}
	#titleOutline h2 span:nth-of-type(2){
		font-weight : 400;
		font-size : 2rem;
		letter-spacing : .2em;
	}
	#titleOutline ul{
		flex-wrap : wrap;
		row-gap : 7px;
	}
	#titleOutline li{
		font-size : 1.6rem;
	}
	#titleOutline a{
		padding-bottom : 8px;
	}
}