@charset "UTF-8";

/* --------------------------------------------
COLUMN
--------------------------------------------- */
#columnResult{
	display : grid;
	grid-template-columns : calc( 260 var( --percentBase ) ) calc( 1100 var( --percentBase ) );
	column-gap : calc( 20 var( --percentBase ) );
	align-items : start;
	justify-content : start;
	padding-bottom : calc( 44 var( --remBase ) );
}

/* --------------------------------------------
SIDEBAR
--------------------------------------------- */
#sidebarResult{
	position : sticky;
	top : calc( var( --headerHeight ) + ( 80 var( --remBase ) ) );
	overflow : hidden;
	background-color : #eceff0;
	border-radius : calc( 5 var( --remBase ) );
}
#sidebarResult h3{
	display : grid;
	align-items : center;
	height : calc( 56 var( --remBase ) );
	padding-inline : calc( 8 * 100% / 260 );
	font-size : 2rem;
	font-weight : 700;
	background-color : white;
	border-bottom : solid 1px #eceff0;
}
#sidebarResult dt{
	background-color : white;
	border-top : solid 1px #eceff0;
}
#sidebarResult dd:not( .dd-free ){
	display : none;
	padding-block : calc( 10 var( --remBase ) );
	padding-inline : calc( 8 * 100% / 260 );
}
#sidebarResult dd:not( .dd-free ) label{
	display : grid;
	grid-template-columns : calc( 14 * 100% / 244 ) 1fr;
	column-gap : calc( 4 * 100% / 244 );
	font-size : calc( 12 var( --remBase ) );
	line-height : calc( 26 / 12 );
}
#sidebarResult dd:not( .dd-free ) label input{
	aspect-ratio : 1;
	margin : 0;
	margin-top : calc( 6 var( --remBase ) );
}
#sidebarResult select{
	width : 100%;
	height : calc( 25 var( --remBase ) );
	padding : 0;
	padding-inline : calc( 8 * 100% / 244 );
	font-size : 1.2rem;
	background-color : #fff;
	border : 0;
	border-radius : calc( 5 var( --remBase ) );
}
#sidebarResult dt:not( .dt-free ) button{
	position : relative;
	display : grid;
	align-items : center;
	justify-content : start;
	width : 100%;
	height : calc( 56 var( --remBase ) );
	padding-left : calc( 8 * 100% / 260 );
	padding-right : calc( 40 * 100% / 260 );
	font-size : 2rem;
	font-weight : 700;
}
#sidebarResult dt:not( .dt-free ) button::after{
	position : absolute;
	top : calc( 16 var( --remBase ) );
	right : calc( 8 * 100% / 260 );
	z-index : 1;
	display : block;
	height : calc( 24 var( --remBase ) );
	aspect-ratio : 1;
	content : "";
	background : url( "../images/ui/arrow/circle/right01.svg" ) center / contain no-repeat;
	transition : rotate var( --transitionBase );
}
#sidebarResult dt:not( .dt-free ) button.is-open::after{
	rotate : -90deg;
}
#sidebarResult dt.dt-free{
	display : grid;
	align-items : center;
	height : calc( 56 var( --remBase ) );
	padding-inline : calc( 8 * 100% / 260 );
	font-size : 2rem;
	font-weight : 700;
	background-color : white;
	border-bottom : solid 1px #eceff0;
}
#sidebarResult dd.dd-free{
	padding-inline : calc( 8 * 100% / 260 );
	padding-top : calc( 16 var( --remBase ) );
	padding-bottom : calc( 32 var( --remBase ) );
}
#sidebarResult dd.dd-free input{
	width : 100%;
	height : calc( 25 var( --remBase ) );
	padding : 0;
	padding-inline : calc( 8 * 100% / 244 );
	font-size : 1.2rem;
	background-color : #fff;
	border : 0;
	border-radius : calc( 5 var( --remBase ) );
}
#sidebarResult dd.dd-free input::placeholder{
	color : #abb8c3;
}
#sidebarResult .submits{
	position : relative;
	display : grid;
	grid-template-columns : repeat( 2 , calc( 88 * 100% / 260 ) );
	column-gap : calc( 18 * 100% / 260 );
	align-items : center;
	justify-content : center;
	padding-top : calc( 16 var( --remBase ) );
	padding-bottom : calc( 14 var( --remBase ) );
	background-color : var( --primary );
}
#sidebarResult .submits::before{
	position : absolute;
	bottom : 100%;
	left : calc( 10 * 100% / 260 );
	display : block;
	width : calc( var( --percentBase ) );
	width : calc( 27 * 100% / 260 );
	height : calc( 13 var( --remBase ) );
	font-size : 0;
	content : "";
	background-color : var( --primary );
	border-radius : calc( 5 var( --remBase ) ) calc( 5 var( --remBase ) ) 0 0;
}
#sidebarResult .submits::after{
	position : absolute;
	top : calc( -10.5 var( --remBase ) );
	left : calc( 19 * 100% / 260 );
	display : block;
	width : calc( 10 * 100% / 260 );
	height : calc( 8 var( --remBase ) );
	font-size : 0;
	content : "";
	background : url( "../images/ui/arrow/up01.svg" ) center / contain no-repeat;
}
#sidebarResult .submits input{
	display : grid;
	place-items : center;
	height : calc( 28 var( --remBase ) );
	padding : 0;
	margin : 0;
	font-size : 1.2rem;
	font-weight : 700;
	background-color : white;
	border : 0;
	border-radius : 100vmax;
}
#sidebarResult .submits input[type="submit"]{
	color : #284b66;
}

/* --------------------------------------------
RESULT
--------------------------------------------- */
#result > h1{
	font-size : 3rem;
	font-weight : 700;
}
#result .box{
	display : grid;
	grid-template-columns : auto calc( 24 * 100% / 1100 ) auto 1fr calc( 128 * 100% / 1100 ) calc( 16 * 100% / 1100 ) auto;
	align-items : center;
	margin-top : calc( 27 var( --remBase ) );
}
#result .box .search_page{
	display : contents;
}
#result .box .search_page p{
	display : grid;
	grid-row : 1;
	grid-column : 3;
	grid-auto-flow : column;
	float : none;
	margin : 0;
	font-size : calc( 16 var( --remBase ) );
	font-weight : 700;
	line-height : calc( 22 / 16 );
}
#result .box .search_page p span{
	font-size : calc( 16 var( --remBase ) );
	font-weight : 700;
	line-height : calc( 22 / 16 );
}
#result .box .search_page ul{
	display : flex;
	flex-wrap : wrap;
	grid-row : 1;
	grid-column : 7;
	column-gap : calc( 8 var( --remBase ) );
	margin : 0;
}
#result .box .search_page ul li{
	display : grid;
	place-items : center;
	width : calc( 35 var( --percentBase ) );
	height : calc( 35 var( --remBase ) );
	padding : 0;
	margin : 0;
	font-size : 1.6rem;
	font-weight : 700;
	line-height : 1;
	color : #284b66;
	background-color : #c1e4ea;
	border : 0;
}
#result .box select{
	grid-row : 1;
	grid-column : 5;
	height : calc( 35 var( --remBase ) );
	background-color : white;
	border : solid 1px #eceff0;
}
#listResult{
	margin-top : calc( 16 var( --remBase ) );
}
#listResult > li{
	filter : drop-shadow( 0 0 10px rgb( 40 75 102 / .15 ) );
}
#listResult > li + li{
	margin-top : calc( 26 var( --remBase ) );
}
#listResult > li > a{
	display : grid;
	grid-template-rows : auto calc( 18 var( --remBase ) ) auto calc( 18 var( --remBase ) ) auto 1fr calc( 24 var( --remBase ) ) calc( 56 var( --remBase ) );
	grid-template-columns : 1fr calc( 500 * 100% / 1040 );
	column-gap : calc( 10 * 100% / 1040 );
	padding-inline : calc( 30 * 100% / 1100 );
	padding-top : calc( 30 var( --remBase ) );
	padding-bottom : calc( 28 var( --remBase ) );
	background-color : #fff;
}
#listResult .tags{
	display : flex;
	flex-wrap : wrap;
	grid-row : 1;
	grid-column : 1;
	row-gap : calc( 8 var( --remBase ) );
	column-gap : calc( 8 * 100% / 510 );
}
#listResult .tags > span{
	display : grid;
	place-items : center;
	height : calc( 27 var( --remBase ) );
	padding-inline : calc( 8 var( --remBase ) );
	border-radius : calc( 5 var( --remBase ) );
}
#listResult .tags > span:not( .new ){
	color : #fff;
	background-color : var( --primary );
}
#listResult .tags > span.new{
	color : #284b66;
	background-color : #ffe500;
}
#listResult h2{
	grid-row : 3;
	grid-column : 1;
	font-size : 2.4rem;
	font-weight : 700;
	line-height : 1.4;
}
#listResult dl{
	display : grid;
	grid-template-columns : calc( 30 * 100% / 530 ) 1fr;
	grid-row : 5/7;
	grid-column : 1;
	row-gap : calc( 15 var( --remBase ) );
	column-gap : calc( 8 * 100% / 530 );
	align-items : start;
}
#listResult dl dt img{
	width : 100%;
	height : auto;
}
#listResult dl dd{
	padding-top : calc( 2 var( --remBase ) );
	font-size : calc( 20 var( --remBase ) );
	font-weight : 700;
	line-height : 1.3;
}
#listResult picture{
	grid-row : 1/7;
	grid-column : 2;
	align-items : start;
	height : calc( 320 var( --remBase ) );
}
#listResult picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#listResult a > span{
	display : grid;
	grid-template-columns : calc( 25 * 100% / 250 ) auto;
	grid-row : 8;
	grid-column : 1/3;
	column-gap : calc( 6 * 100% / 250 );
	align-items : center;
	justify-content : center;
	justify-self : center;
	width : calc( 250 * 100% / 1040 );
	height : calc( 56 var( --remBase ) );
	font-size : 2.4rem;
	font-weight : 700;
	color : #fff;
	background-color : var( --primary );
	border-radius : calc( 3 var( --remBase ) );
	box-shadow : 0 calc( 2 var( --remBase ) ) 0 0 #284b66;
}
#listResult a > span::before{
	display : block;
	aspect-ratio : 1;
	content : "";
	background : url( "../images/ui/icon/search04.svg" ) center / contain no-repeat;
}
#columnResultOther{
	padding-top : calc( 50 var( --remBase ) );
	padding-bottom : calc( 40 var( --remBase ) );
}
#columnResultOther :where( #resultOther , #resultSupport , #searchPc ){
	margin-left : calc( 300 var( --percentBase ) );
}
#columnResultOther #resultSupport{
	display : block;
	margin-top : calc( 50 var( --remBase ) );
}
#columnResultOther #resultSupport img{
	width : 100%;
	height : auto;
}
#columnResultOther #searchPc{
	margin-top : calc( 26 var( --remBase ) );
}
#resultOther .noImg{
	position : relative;
	display : grid;
	grid-template-columns : calc( 27 var( --remBase ) ) auto;
	column-gap : calc( 10 var( --remBase ) );
	align-items : center;
	justify-content : start;
	height : calc( 53 var( --remBase ) );
	padding-left : calc( 20 var( --remBase ) );
	padding-right : calc( 10 var( --remBase ) );
	font-size : 2.4rem;
	color : #284b66;
	background-color : #c1e4ea;
}
#resultOther .noImg::before{
	height : calc( 30 var( --remBase ) );
	content : "";
	background : url( "../images/ui/icon/bell.svg" ) center / contain no-repeat;
}
#resultOther .noImg::after{
	position : absolute;
	top : 0;
	left : 100%;
	display : block;
	width : calc( 20 var( --remBase ) );
	height : calc( 53 var( --remBase ) );
	content : "";
	background : url( "../images/ui/parts/title01_after_pc.svg" ) left center / auto 100% no-repeat;
}
#resultOther > ul{
	display : grid;
	grid-template-columns : repeat( 4 , calc( 250 * 100%  / 1100 ) );
	row-gap : calc( 30 var( --remBase ) );
	column-gap : calc( ( 100 / 3 ) * 100% / 1100 );
	margin-top : calc( 20 var( --remBase ) );
}
#resultOther > ul > li{
	border-radius : calc( 5 var( --remBase ) ) calc( 5 var( --remBase ) ) 0 0;
	box-shadow : 0 0 calc( 10 var( --remBase ) ) 0 rgb( 0 0 0 / .1 );
}
#resultOther > ul > li > a{
	display : block;
	padding-bottom : calc( 20 var( --remBase ) );
}
#resultOther > ul picture{
	width : 100%;
	height : calc( 150 var( --remBase ) );
}
#resultOther > ul picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#resultOther > ul :where( h4 , dl ){
	padding-inline : calc( 20 * 100% / 250 );
}
#resultOther > ul h4{
	margin-top : calc( 17 var( --remBase ) );
	font-size : calc( 18 var( --remBase ) );
	font-weight : 700;
	line-height : calc( 26 / 18 );
}
#resultOther > ul dl{
	display : grid;
	grid-template-columns : calc( 25 * 100% / 210 ) 1fr;
	row-gap : calc( 8 var( --remBase ) );
	column-gap : calc( 8 * 100% / 210 );
	align-items : start;
	margin-top : calc( 10 var( --remBase ) );
}
#resultOther > ul dt{
	margin-top : calc( .5 var( --remBase ) );
}
#resultOther > ul dt img{
	width : 100%;
	height : auto;
}
#resultOther > ul dd{
	font-size : calc( 16 var( --remBase ) );
	line-height : calc( 26 / 16 );
}
#resultOther > ul a > span{
	display : grid;
	grid-template-columns : auto calc( 16 * 100% / 210 );
	column-gap : calc( 8 * 100% / 210 );
	align-items : center;
	justify-content : center;
	width : calc( 210 * 100% / 250 );
	height : calc( 32 var( --remBase ) );
	margin-inline : auto;
	margin-top : calc( 20 var( --remBase ) );
	font-size : 1.6rem;
	font-weight : 700;
	background-color : #e9f5f7;
	border : solid 1px var( --primary );
	border-radius : calc( 3 var( --remBase ) );
	box-shadow : 0 calc( 2 var( --remBase ) ) 0 0 #284b66;
}
#resultOther > ul a > span::after{
	display : block;
	aspect-ratio : 1;
	font-size : 0;
	content : "";
	background : url( "../images/ui/arrow/circle/right01.svg" ) center / contain no-repeat;
}