@charset "UTF-8";

/* --------------------------------------------
PHARMACY
--------------------------------------------- */
@media print , screen and ( width > 750px ){
	#column01:has( #pharmacy ){
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( 70 var( --remBase ) );
	}
}
#pharmacy > ul > li{
	background-color : white;
}
#pharmacy > ul .head{
	border-bottom : solid;
	border-bottom-color : #d9d9d9;
}
#pharmacy > ul .head ul{
	display : flex;
	flex-wrap : wrap;
}
#pharmacy > ul .head li{
	display : grid;
	place-items : center;
	padding-block : calc( 4 var( --remBase ) );
	padding-inline : calc( 8 var( --remBase ) );
	font-size : 1.2rem;
	line-height : 1.7;
	color : white;
}
#pharmacy .medicine{
	/* background-color: #3CAEA3; */
	background-color : var( --category03 );
}
#pharmacy .prescription{
	/* background-color: #8494C8; */
	background-color : var( --category06 );
}
#pharmacy dt , #pharmacy dd{
	font-size : 1.6rem;
	line-height : 1.5;
}
#pharmacy dl ul{
	display : inline;
	font-size : 0;
}
#pharmacy dl li{
	display : inline;
	font-size : 1.6rem;
	line-height : 1.5;
}
#pharmacy dl li + li::before{
	content : "・";
}
#pharmacy dl dl > div{
	font-size : 0;
}
#pharmacy dl dl > div *{
	display : inline;
}
#pharmacy dl dl dd{
	padding-left : .25em;
}
@media screen and ( width <= 750px ){
	#pharmacy > ul > li{
		padding-inline : calc( 16 var( --viewportBase ) );
	}
	#pharmacy > ul > li + li{
		margin-top : calc( 46 var( --remBase ) );
	}
	#pharmacy > ul a{
		display : block;
		padding-block : calc( 22 var( --remBase ) );
	}
	#pharmacy > ul .head{
		padding-bottom : calc( 16 var( --remBase ) );
		border-bottom-width : calc( 3 var( --remBase ) );
	}
	#pharmacy > ul .head ul{
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 8 var( --percentBase ) );
		margin-top : calc( 9 var( --remBase ) );
	}
	#pharmacy > ul a > dl{
		display : grid;
		grid-template-columns : calc( 85 var( --percentBase ) ) 1fr;
		row-gap : calc( 8 var( --remBase ) );
		justify-content : start;
		margin-top : calc( 20 var( --remBase ) );
	}
	#pharmacy > ul a > dl > dt{
		padding-right : calc( 10 * 100 / 85 );
	}
	#pharmacy > ul a > dl > :where( dt , dd ){
		padding-bottom : calc( 8 var( --remBase ) );
		border-bottom : dashed 1px #cfd2d9;
	}
	#pharmacy .link02{
		margin-top : calc( 20 var( --remBase ) );
	}
	#pharmacy .pagination{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#pharmacy > ul > li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	#pharmacy > ul a{
		display : grid;
		grid-template-rows : auto calc( 16 var( --remBase ) ) auto auto;
		grid-template-columns : calc( 336 * 100% / 1008 ) 1fr;
		column-gap : calc( 16 * 100% / 1008 );
		align-items : start;
		padding-inline : calc( 16 * 100% / 1040 );
		padding-top : calc( 32 var( --remBase ) );
		padding-bottom : calc( 15 var( --remBase ) );
	}
	#pharmacy > ul .head{
		grid-row : 1;
		grid-column : 1/3;
		padding-bottom : calc( 16 var( --remBase ) );
		border-bottom-width : calc( 3 var( --remBase ) );
	}
	#pharmacy > ul h2{
		font-size : 3.2rem;
		font-weight : 700;
		line-height : 1.3;
		letter-spacing : .05em;
	}
	#pharmacy > ul .head ul{
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 8 * 100% / 1008 );
		margin-top : calc( 5 var( --remBase ) );
	}
	#pharmacy > ul picture{
		grid-row : 3;
		grid-column : 1;
	}
	#pharmacy > ul a > dl{
		display : grid;
		grid-template-columns : calc( 142 * 100% / 656 ) 1fr;
		grid-row : 3;
		grid-column : 2;
		row-gap : calc( 8 var( --remBase ) );
		justify-content : start;
		margin-top : calc( -4 var( --remBase ) );
	}
	#pharmacy > ul a > dl > dt{
		padding-right : calc( 9 * 100 / 142 );
	}
	#pharmacy > ul a > dl > :where( dt , dd ){
		padding-bottom : calc( 8 var( --remBase ) );
		border-bottom : dashed 1px #cfd2d9;
	}
	#pharmacy .link02{
		display : grid;
		grid-row : 4;
		grid-column : 1/3;
	}
	#pharmacy .pagination{
		margin-top : calc( 40 var( --remBase ) );
	}
}
#searchPharmacy h3{
	display : grid;
	align-items : center;
	justify-content : start;
	height : calc( 69 var( --remBase ) );
	margin-bottom : calc( 16 var( --remBase ) );
	font-size : 2rem;
	font-weight : 300;
	line-height : 1.3;
	color : white;
	background-color : var( --color01 );
}
#searchPharmacy h4{
	font-size : 2rem;
	font-weight : 400;
	line-height : 1.3;
	border-left-color : var( --color01 );
	border-left-style : solid;
	border-left-width : calc( 4 var( --remBase ) );
}
#searchPharmacy h4:not( :first-of-type ){
	margin-top : calc( 38 var( --remBase ) );
}
#searchPharmacy summary{
	position : relative;
	display : grid;
	align-items : center;
	justify-content : start;
	height : calc( 38 var( --remBase ) );
	font-size : 1.6rem;
	line-height : calc( 23 / 16 );
	letter-spacing : .05em;
	background-color : #f1f2ed;
}
#searchPharmacy summary::-webkit-details-marker{
	display : none;
}
#searchPharmacy summary::after{
	position : absolute;
	top : 50%;
	display : block;
	height : calc( 24 var( --remBase ) );
	font-size : 0;
	content : "";
	background : url( "../images/ui/arrow/down01.svg" ) center / contain no-repeat;
	translate : 0 -50%;
}
#searchPharmacy details > div{
	display : grid;
	grid-template-rows : 0fr;
	grid-template-columns : 1fr;
}
#searchPharmacy details > div > ul{
	overflow : hidden;
}
#searchPharmacy details.is-open summary::after{
	rotate : -180deg;
}
#searchPharmacy details.is-open > div{
	grid-template-rows : 1fr;
	padding-top : calc( 12 var( --remBase ) );
	padding-bottom : calc( 2 var( --remBase ) );
}
#searchPharmacy :where( .prefectures ul , .features ){
	display : flex;
	flex-wrap : wrap;
	row-gap : calc( 5 var( --remBase ) );
}
#searchPharmacy :where( .prefectures ul , .features ) label{
	position : relative;
	display : grid;
	align-items : center;
	justify-content : start;
	font-size : 1.6rem;
	line-height : calc( 23 / 16 );
	letter-spacing : .05em;
	cursor : pointer;
}
#searchPharmacy :where( .prefectures ul , .features ) label::before{
	display : block;
	height : calc( 18 var( --remBase ) );
	font-size : 0;
	content : "";
	border-style : solid;
	border-width : 1px;
	border-radius : calc( 4 var( --remBase ) );
}
#searchPharmacy :where( .prefectures ul , .features ) label:not( :has( input:checked ) )::before{
	background-color : white;
	border-color : #a1a1a1;
}
#searchPharmacy :where( .prefectures ul , .features ) label:has( input:checked )::before{
	background-color : var( --color01 );
	border-color : var( --color01 );
}
#searchPharmacy :where( .prefectures ul , .features ) label:has( input:checked )::after{
	position : absolute;
	top : calc( 50% + ( ( ( -3 - 5.5 ) / 2 ) ) var( --remBase ) );
	left : calc( 2 var( --remBase ) );
	display : block;
	width : calc( 15 var( --remBase ) );
	height : calc( 11 var( --remBase ) );
	font-size : 0;
	content : "";
	background : url( "../images/ui/icon/check02.svg" ) center / contain no-repeat;
}
#searchPharmacy :where( .prefectures ul , .features ) input[type="checkbox"]{
	position : absolute;
	visibility : hidden;
	opacity : 0;
}
#searchPharmacy .features{
	margin-top : calc( 16 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	#searchPharmacy{
		margin-top : calc( 64 var( --remBase ) );
	}
	#searchPharmacy h3{
		padding-inline : calc( 19.5 var( --percentBase ) );
	}
	#searchPharmacy h4{
		padding-left : calc( 4 var( --percentBase ) );
	}
	#searchPharmacy .prefectures{
		margin-top : calc( 12 var( --remBase ) );
	}
	#searchPharmacy .prefectures > li + li{
		margin-top : calc( 8 var( --remBase ) );
	}
	#searchPharmacy summary{
		padding-inline : calc( 6 var( --percentBase ) );
	}
	#searchPharmacy summary::after{
		right : calc( 8 var( --percentBase ) );
		width : calc( 24 var( --percentBase ) );
	}
	#searchPharmacy :where( .prefectures ul , .features ){
		column-gap : calc( 18 var( --percentBase ) );
	}
	#searchPharmacy :where( .prefectures ul , .features ) label{
		grid-template-columns : calc( 20 var( --remBase ) ) auto;
		column-gap : calc( 6 var( --remBase ) );
	}
	#searchPharmacy button[type="submit"]{
		margin-top : calc( 45 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#searchPharmacy h3{
		padding-inline : calc( 17 * 100% / 320 );
	}
	#searchPharmacy h4{
		padding-left : calc( 4 * 100% / 320 );
	}
	#searchPharmacy .prefectures{
		margin-top : calc( 12 var( --remBase ) );
	}
	#searchPharmacy .prefectures > li + li{
		margin-top : calc( 8 var( --remBase ) );
	}
	#searchPharmacy summary{
		padding-inline : calc( 6 * 100% / 320 );
	}
	#searchPharmacy summary::after{
		right : calc( 8 * 100% / 320 );
		width : calc( 24 * 100% / 320 );
	}
	#searchPharmacy :where( .prefectures ul , .features ){
		column-gap : calc( 16 * 100% / 320 );
	}
	#searchPharmacy :where( .prefectures ul , .features ) label{
		grid-template-columns : calc( 18 var( --remBase ) ) auto;
		column-gap : calc( 6 var( --remBase ) );
	}
	#searchPharmacy button[type="submit"]{
		margin-top : calc( 54 var( --remBase ) );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#searchPharmacy details > div{
		transition : grid-template-rows var( --transitionBase ) , padding var( --transitionBase );
	}
	#searchPharmacy summary::after{
		transition : rotate var( --transitionBase );
	}
	#searchPharmacy label::before{
		transition : background-color var( --transitionBase ) , border-color var( --transitionBase );
	}
	#searchPharmacy label::after{
		transition : background var( --transitionBase );
	}
}

/* --------------------------------------------
FAQ
--------------------------------------------- */
#faqLinks ul{
	display : flex;
	flex-wrap : wrap;
}
#faqLinks :where( li[aria-current="page"]  , a ){
	display : grid;
	place-items : center;
	height : calc( 40 var( --remBase ) );
	padding-inline : calc( 20 var( --remBase ) );
	border-radius : 100vmax;
}
#faqLinks li[aria-current="page"]{
	color : white;
	background-color : var( --color0102 );
}
#faqLinks a{
	background-color : var( --bg01 );
}
@media screen and ( width <= 750px ){
	#faqLinks{
		padding-top : calc( 45 var( --remBase ) );
		padding-bottom : calc( ( 34 - 16 ) var( --remBase ) );
	}
	#faqLinks ul{
		row-gap : calc( 16 var( --remBase ) );
		column-gap : calc( 16 var( --percentBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#faqLinks{
		padding-top : calc( 38 var( --remBase ) );
		padding-bottom : calc( ( 39 - 16 ) var( --remBase ) );
	}
	#faqLinks ul{
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 8 var( --percentBase ) );
		justify-content : center;
	}
	#faqLinks :where( li[aria-current="page"]  , a ){
		font-size : 1.6rem;
		line-height : 1.5;
	}
}
@media ( hover : hover ){
	#faqLinks a:hover{
		color : white;
		background-color : var( --color0102 );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#faqLinks a{
		transition : background var( --transitionBase ) , color var( --transitionBase );
	}
}
@media screen and ( width <= 750px ){
	#faq{
		padding-bottom : calc( 81 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#faq{
		padding-bottom : calc( 147 var( --remBase ) );
	}
}