@charset "UTF-8";

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( max-width : 780px ){
	html{
		font-size : calc( 10 * 100vw / var( --breakpoint ) );
	}
}
@media screen and ( min-width : 780.02px ) and ( max-width : 1287.98px ){
	html{
		font-size : calc( 10 * 100vw / var( --breakpoint ) );
	}
}
@media print , screen and ( min-width : 1288px ){
	html{
		font-size : 10px;
	}
}
@media screen and ( max-width : 780px ){
	:root{
		--headerHeight : calc( 120 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 780.02px ){
	:root{
		--headerHeight : calc( 78 var( --remBase ) );
	}
}
body.bg{
	background-color : #fffafd;
}
body.is-modal{
	overflow : hidden;
}
@media screen and ( max-width : 780px ){
	body{
		scroll-padding-top : var( --headerHeight );
		padding-top : var( --headerHeight );
	}
}

/* --------------------------------------------
WRAPPER
--------------------------------------------- */
.wrap{
	margin-left : auto;
	margin-right : auto;
}
@media screen and ( max-width : 780px ){
	.wrap{
		padding-left : calc( 40 * 100% / var( --breakpoint ) );
		padding-right : calc( 40 * 100% / var( --breakpoint ) );
	}
}
@media screen and ( min-width : 780.02px ) and ( max-width : 1287.98px ){
	.wrap{
		padding-left : calc( 20 * 100% / var( --breakpoint ) );
		padding-right : calc( 20 * 100% / var( --breakpoint ) );
	}
}
@media print , screen and ( min-width : 1288px ){
	.wrap{
		padding-left : calc( ( 100% - 1248px ) / 2 );
		padding-right : calc( ( 100% - 1248px ) / 2 );
	}
}

/* --------------------------------------------
STATE
--------------------------------------------- */
@layer{
	@media screen and ( max-width : 780px ){
		.is-pc{
			display : none;
		}
	}
	@media screen and ( max-width : 780px ){
		.is-tb{
			display : none;
		}
	}
	@media print , screen and ( min-width : 1288px ){
		.is-tb{
			display : none;
		}
	}
	@media print , screen and ( min-width : 780.02px ){
		.is-sp{
			display : none;
		}
	}
}

/* --------------------------------------------
COMMON
--------------------------------------------- */
.full{
	width : 100%;
	height : auto;
}
[data-before]::before{
	white-space : pre;
	content : attr( data-before );
}
[data-after]::after{
	white-space : pre;
	content : attr( data-after );
}
[data-both]::before{
	white-space : pre;
	content : attr( data-both );
}
[data-both]::after{
	white-space : pre;
	content : attr( data-both );
}
@media screen and ( max-width : 780px ){
	[data-sp-after]::after{
		white-space : pre;
		content : attr( data-sp-after );
	}
}
@media screen and ( max-width : 780px ){
	[data-sp-before]::before{
		white-space : pre;
		content : attr( data-sp-before );
	}
}
@media print , screen and ( min-width : 780.02px ){
	[data-pc-after]::after{
		white-space : pre;
		content : attr( data-pc-after );
	}
}
@media print , screen and ( min-width : 780.02px ){
	[data-pc-before]::before{
		white-space : pre;
		content : attr( data-pc-before );
	}
}

/* --------------------------------------------
LAYOUT
  HEADER
--------------------------------------------- */
#header{
	background-color : #fff;
}
#header .logo{
	display : grid;
	place-items : center start;
	width : fit-content;
	height : 100%;
}
@media screen and ( max-width : 780px ){
	#header{
		position : fixed;
		top : 0;
		left : 0;
		z-index : 10;
		width : 100%;
		height : var( --headerHeight );
		background-color : #fff;
	}
	#header .logo img{
		height : calc( 56 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 780.02px ){
	#header{
		display : grid;
		grid-template-rows : 100%;
		grid-template-columns : auto 1fr auto;
		height : var( --headerHeight );
	}
	#header .logo{
		grid-row : 1;
		grid-column : 1;
	}
	#header .logo img{
		height : calc( 42 var( --remBase ) );
	}
}

/* --------------------------------------------
LAYOUT
  MENU BUTTON
--------------------------------------------- */
@media screen and ( max-width : 780px ){
	#menuBtn{
		z-index : 12;
		overflow : hidden;
	}
	#menuBtn > span:nth-of-type( 1 ){
		position : relative;
		display : block;
		width : 100%;
		height : 100%;
		font-size : 0;
	}
	#menuBtn span span{
		position : absolute;
		left : 0;
		display : block;
		width : 100%;
		transition : all .4s;
	}
	#menuBtn span span:nth-of-type( 1 ){
		top : 0;
	}
	#menuBtn span span:nth-of-type( 4 ){
		bottom : 0;
	}
	#menuBtn{
		position : fixed;
		top : calc( 30 var( --remBase ) );
		right : calc( 40 * 100% / var( --breakpoint ) );
		width : calc( 88 * 100% / var( --breakpoint ) );
		height : calc( 80 var( --remBase ) );
	}
	#menuBtn > span:nth-of-type( 1 ){
		height : calc( 44 var( --remBase ) );
	}
	#menuBtn span span{
		height : calc( 8 var( --remBase ) );
		background-color : var( --primary );
		border-radius : 100dvh;
	}
	#menuBtn span span:nth-of-type( 2 ) , #menuBtn span span:nth-of-type( 3 ){
		top : calc( 18 var( --remBase ) );
	}
	#menuBtn > span:nth-of-type( 2 ){
		display : block;
		height : calc( 36 var( --remBase ) );
		padding-top : calc( 6 var( --remBase ) );
		font-size : calc( 20 var( --remBase ) );
		color : var( --primary );
		text-align : center;
		transition : color .3s ease-in;
	}
}
body.is-open #menuBtn > span:nth-of-type( 1 ){
	overflow : hidden;
}
body.is-open #menuBtn > span:nth-of-type( 2 ){
	color : transparent;
}
body.is-open{
	overflow : hidden;
}
body.is-open #nav{
	max-height : 100dvh;
}
body.is-open #menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 1 ){
	scale : 0;
	translate : calc( 10 var( --remBase ) ) 0;
}
body.is-open #menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 2 ){
	rotate : -45deg;
}
body.is-open #menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 3 ){
	rotate : 45deg;
}
body.is-open #menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 4 ){
	scale : 0;
	translate : calc( -10 var( --remBase ) ) 0;
}

/* --------------------------------------------
LAYOUT
  NAV
--------------------------------------------- */
@media screen and ( max-width : 780px ){
	#nav{
		position : fixed;
		top : var( --headerHeight );
		left : 0;
		z-index : 10;
		width : 100%;
		height : calc( 100dvh - var( --headerHeight ) );
		max-height : 0;
		overflow : hidden;
		overflow-y : auto;
		background-color : #fffafd;
		transition : max-height .5s ease-in;
	}
	#nav .scroll{
		padding-top : calc( 20 var( --remBase ) );
		padding-bottom : calc( 20 var( --remBase ) );
		padding-left : calc( 40 * 100% / var( --breakpoint ) );
		padding-right : calc( 40 * 100% / var( --breakpoint ) );
	}
}
@media print , screen and ( min-width : 780.02px ){
	#nav{
		grid-row : 1;
		grid-column : 3;
		align-self : center;
		height : 100%;
	}
	#nav .scroll{
		height : 100%;
	}
}
#sidebar{
	overflow : hidden;
	background-color : #fff;
	border : 1px solid var( --border );
}
#sidebar h2{
	display : grid;
	align-items : center;
}
#sidebar h2 img{
	border-radius : 100vmax;
}
#sidebar h2 span{
	font-weight : 700;
	color : var( --bodyDark );
}
#sidebar a{
	display : grid;
	align-items : center;
	justify-content : space-between;
	font-weight : 500;
	color : var( --primary );
	border-top : 1px solid var( --border );
	transition : border-color .3s ease-in , color .3s ease-in , background .3s ease-in;
}
#sidebar li:not( :last-child ) a::after{
	display : block;
	font-size : 0;
	content : "";
	background : url( "../../images/ui/parts/arrow01.svg" ) 0 center / contain no-repeat;
	filter : invert( 50% ) sepia( 62% ) saturate( 6421% ) hue-rotate( 308deg ) brightness( 84% ) contrast( 87% );
	transition : filter .3s ease-in;
}
#sidebar li:not( :last-child ) a.is-active , #sidebar li:not( :last-child ) a:hover{
	color : #fff;
	background-color : var( --primary );
	border-top-color : var( --primary );
}
#sidebar li:not( :last-child ) a.is-active::after , #sidebar li:not( :last-child ) a:hover::after{
	filter : invert( 95% ) sepia( 5% ) saturate( 19% ) hue-rotate( 222deg ) brightness( 105% ) contrast( 105% );
}
#sidebar li:last-child a{
	color : var( --bodyDark );
	background-color : #f9fafb;
	transition : opacity .3s ease-in;
}
#sidebar li:last-child a:hover{
	opacity : .8;
}
@media screen and ( max-width : 780px ){
	#sidebar{
		border-radius : calc( 20 var( --remBase ) );
	}
	#sidebar h2{
		grid-template-columns : calc( 80 * 100% / 610 ) 1fr;
		column-gap : calc( 15 * 100% / 610 );
		padding-top : calc( 58 var( --remBase ) );
		padding-bottom : calc( 40 var( --remBase ) );
		padding-left : calc( 29 * 100% / 668 );
		padding-right : calc( 29 * 100% / 668 );
	}
	#sidebar h2 img{
		height : calc( 80 var( --remBase ) );
	}
	#sidebar h2 span{
		font-size : calc( 40 var( --remBase ) );
		line-height : 1.05;
	}
	#sidebar a{
		grid-template-columns : 1fr calc( 12 * 100% / 610 );
		height : calc( 100 var( --remBase ) );
		padding-left : calc( 29 * 100% / 668 );
		padding-right : calc( 29 * 100% / 668 );
		font-size : calc( 24 var( --remBase ) );
		line-height : 1.5;
	}
	#sidebar a::after{
		height : calc( 18 var( --remBase ) );
	}
}
@media screen and ( max-width : 780px ){
	#navSub{
		display : grid;
		grid-template-columns : auto 1fr auto 1fr auto;
		grid-auto-flow : column;
		align-items : center;
		margin-top : calc( 48 var( --remBase ) );
	}
	#navSub::before , #navSub::after{
		font-size : calc( 24 var( --remBase ) );
		line-height : 1.5;
		color : var( --bodyDark );
		text-align : center;
		content : "｜";
	}
	#navSub::before{
		grid-column : 2;
	}
	#navSub::after{
		grid-column : 4;
	}
	#navSub li:nth-child( 1 ){
		grid-column : 1;
	}
	#navSub li:nth-child( 2 ){
		grid-column : 3;
	}
	#navSub li:nth-child( 3 ){
		grid-column : 5;
	}
	#navSub a{
		font-size : calc( 24 var( --remBase ) );
		line-height : 1.5;
		color : var( --bodyDark );
	}
}
@media print , screen and ( min-width : 780.02px ){
	#navSub{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		height : 100%;
	}
	#navSub li{
		height : 100%;
	}
	#navSub a{
		font-weight : 500;
		text-align : center;
		text-indent : .1em;
		letter-spacing : .1em;
		transition : color .3s ease-in;
	}
	#navSub a:hover{
		color : var( --primary );
	}
	#navSub .privacy{
		display : grid;
		align-items : center;
	}
	#navSub .privacy a{
		display : grid;
		place-items : center;
		height : calc( 38 var( --remBase ) );
		padding-left : calc( 38 var( --remBase ) );
		padding-right : calc( 38 var( --remBase ) );
		font-size : calc( 14 var( --remBase ) );
		border-right : 1px solid var( --border );
	}
	#navSub .message a , #navSub .favorite a , #navSub .mypage a{
		display : block;
		height : 100%;
		font-size : calc( 10 var( --remBase ) );
		text-align : center;
	}
	#navSub .message a::before , #navSub .favorite a::before , #navSub .mypage a::before{
		display : block;
		margin-left : auto;
		margin-right : auto;
		content : "";
		filter : invert( 50% ) sepia( 62% ) saturate( 6421% ) hue-rotate( 308deg ) brightness( 84% ) contrast( 87% );
		background-repeat : no-repeat;
		background-position : center top;
		background-size : contain;
	}
	#navSub .message{
		margin-left : calc( 42 var( --remBase ) );
	}
	#navSub .message a{
		padding-top : calc( 14 var( --remBase ) );
	}
	#navSub .message a::before{
		width : calc( 34 var( --remBase ) );
		height : calc( 29 var( --remBase ) );
		margin-bottom : calc( 10 var( --remBase ) );
		background-image : url( "../../images/ui/icon/comment.svg" );
	}
	#navSub .favorite{
		margin-left : calc( 34 var( --remBase ) );
	}
	#navSub .favorite a{
		padding-top : calc( 14 var( --remBase ) );
	}
	#navSub .favorite a::before{
		width : calc( 31 var( --remBase ) );
		height : calc( 29 var( --remBase ) );
		margin-bottom : calc( 10 var( --remBase ) );
		background-image : url( "../../images/ui/icon/heart.svg" );
	}
	#navSub .mypage{
		margin-left : calc( 32 var( --remBase ) );
	}
	#navSub .mypage a{
		padding-top : calc( 12 var( --remBase ) );
	}
	#navSub .mypage a::before{
		width : calc( 34 var( --remBase ) );
		height : calc( 32 var( --remBase ) );
		margin-bottom : calc( 9 var( --remBase ) );
		background-image : url( "../../images/ui/icon/settings.svg" );
	}
}

/* --------------------------------------------
BREAKCRUMBS
--------------------------------------------- */
#breadcrumbs{
	display : flex;
	flex-wrap : wrap;
	background-color : #fff;
	border-top : 1px solid var( --border );
	border-bottom : 1px solid var( --border );
}
#breadcrumbs li , #breadcrumbs a{
	color : #707070;
}
#breadcrumbs a{
	transition : color .3s ease-in;
}
#breadcrumbs a:hover{
	color : var( --primary );
}
#breadcrumbs a::after{
	white-space : pre;
	content : " 　＞";
}
@media screen and ( max-width : 780px ){
	#breadcrumbs{
		column-gap : calc( 10 var( --percentBase ) );
		padding-top : calc( 14 var( --remBase ) );
		padding-bottom : calc( 14 var( --remBase ) );
	}
	#breadcrumbs li{
		font-size : calc( 24 var( --remBase ) );
		line-height : 1.5;
	}
}
@media print , screen and ( min-width : 780.02px ){
	#breadcrumbs{
		column-gap : calc( 30 var( --percentBase ) );
		padding-top : calc( 7 var( --remBase ) );
		padding-bottom : calc( 7 var( --remBase ) );
	}
	#breadcrumbs li{
		font-size : calc( 12 var( --remBase ) );
		line-height : 1.5;
	}
}

/* --------------------------------------------
COLUMN
--------------------------------------------- */
@media screen and ( max-width : 780px ){
	#column{
		padding-top : calc( 72 var( --remBase ) );
		padding-bottom : calc( 216 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 780.02px ){
	#column{
		display : grid;
		grid-template-columns : calc( 230 var( --percentBase ) ) calc( 938 var( --percentBase ) );
		align-items : start;
		justify-content : space-between;
		padding-top : calc( 46 var( --remBase ) );
		padding-bottom : calc( 176 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 780.02px ){
	#sidebar{
		--wrapperInside : 228;
		--percentBase : * 100% / var( --wrapperInside );
	}
}
@media print , screen and ( min-width : 780.02px ){
	#sidebar{
		position : sticky;
		top : calc( 46 var( --remBase ) );
		border-radius : calc( 9 var( --remBase ) );
	}
	#sidebar h2{
		grid-template-columns : calc( 40 * 100% / 192 ) 1fr;
		column-gap : calc( 21 * 100% / 192 );
		height : calc( 110 var( --remBase ) );
		padding-left : calc( 18 var( --percentBase ) );
		padding-right : calc( 18 var( --percentBase ) );
	}
	#sidebar h2 img{
		height : calc( 40 var( --remBase ) );
	}
	#sidebar h2 span{
		font-size : calc( 20 var( --remBase ) );
		line-height : 1.05;
	}
	#sidebar a{
		height : calc( 60 var( --remBase ) );
		padding-left : calc( 27 var( --percentBase ) );
		padding-right : calc( 15 var( --percentBase ) );
		font-size : calc( 14 var( --remBase ) );
		line-height : calc( 20 / 14 );
	}
	#sidebar li:not( :last-child ) a{
		grid-template-columns : 1fr calc( 6 * 100% / 186 );
	}
	#sidebar li:not( :last-child ) a::after{
		height : calc( 9 var( --remBase ) );
	}
}
@media screen and ( max-width : 780px ){
	#content > section + section{
		margin-top : calc( 84 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 780.02px ){
	#content{
		--wrapperInside : 938;
		--percentBase : * 100% / var( --wrapperInside )
;
	}
	#content > section + section{
		margin-top : calc( 85 var( --remBase ) );
	}
}