@charset "UTF-8";

/* --------------------------------------------
HOPPE
--------------------------------------------- */
#hoppe01{
	position : relative;
	overflow-x : clip;
}
#hoppe01 p{
	font-size : 2rem;
	line-height : 2;
}
#hoppe01 > picture{
	position : absolute;
}
@media screen and ( width <= 750px ){
	#hoppe01{
		padding-top : calc( 34 var( --remBase ) );
		padding-bottom : calc( 302 var( --remBase ) );
	}
	#hoppe01 h2 picture{
		margin-top : calc( 14 var( --remBase ) );
		margin-left : calc( 40 var( --percentBase ) );
	}
	#hoppe01 h2 picture img{
		height : calc( 91 var( --remBase ) );
	}
	#hoppe01 > picture{
		bottom : calc( 40 var( --remBase ) );
		left : calc( 16 var( --viewportBase ) );
	}
	#hoppe01 > picture img{
		height : calc( 313 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#hoppe01{
		padding-top : calc( 78 var( --remBase ) );
		padding-bottom : calc( 82 var( --remBase ) );
	}
	#hoppe01 :where( h2 , p ){
		padding-left : calc( 120 var( --percentBase ) );
	}
	#hoppe01 h2 picture{
		margin-top : calc( 24 var( --remBase ) );
	}
	#hoppe01 h2 picture img{
		height : calc( 101 var( --remBase ) );
	}
	#hoppe01 p{
		margin-top : calc( 24 var( --remBase ) );
	}
	#hoppe01 > picture{
		top : calc( -120 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	#hoppe01 > picture{
		left : calc( 622 var( --viewportBase ) );
		width : calc( 733 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	#hoppe01 > picture{
		left : calc( 50% - 78px );
		width : 733px;
	}
	#hoppe01 > picture img{
		height : calc( 550 var( --remBase ) );
	}
}
#hoppe02 > ul > li{
	background-color : white;
}
#hoppe02 > ul > li:not( [class] ) h3{
	display : grid;
	align-content : center;
	align-items : center;
	justify-content : start;
	background-color : var( --color02 );
}
#hoppe02 > ul > li:not( [class] ) h3::before{
	display : block;
	grid-row : 1/3;
	grid-column : 1;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
#hoppe02 > ul > li:not( [class] ) h3 span{
	color : white;
}
#hoppe02 > ul > li:not( [class] ) h3 span:nth-of-type( 1 ){
	grid-row : 1;
	grid-column : 2;
	align-self : end;
	font-weight : 500;
}
#hoppe02 > ul > li:not( [class] ) h3 span:nth-of-type( 2 ){
	grid-row : 2;
	grid-column : 2;
	align-self : start;
}
#hoppe02 > ul > li:not( [class] ):nth-child( 1 ) h3::before{
	background-image : image-set( url( "../images/hoppe/icon01.avif" ) type( "image/avif" ) , url( "../images/hoppe/icon01.avif" ) type( "image/webp" ) );
}
#hoppe02 > ul > li:not( [class] ):nth-child( 2 ) h3::before{
	background-image : image-set( url( "../images/hoppe/icon02.avif" ) type( "image/avif" ) , url( "../images/hoppe/icon02.avif" ) type( "image/webp" ) );
}
#hoppe02 > ul > li:not( [class] ):nth-child( 3 ) h3::before{
	background-image : image-set( url( "../images/hoppe/icon03.avif" ) type( "image/avif" ) , url( "../images/hoppe/icon03.avif" ) type( "image/webp" ) );
}
#hoppe02 > ul > li:not( [class] ):nth-child( 4 ) h3::before{
	background-image : image-set( url( "../images/hoppe/icon04.avif" ) type( "image/avif" ) , url( "../images/hoppe/icon04.avif" ) type( "image/webp" ) );
}
#hoppe02 > ul > li:not( [class] ):nth-child( 5 ) h3::before{
	background-image : image-set( url( "../images/hoppe/icon05.avif" ) type( "image/avif" ) , url( "../images/hoppe/icon05.avif" ) type( "image/webp" ) );
}
#hoppe02 > ul > li:not( [class] ):nth-child( 6 ) h3::before{
	background-image : image-set( url( "../images/hoppe/icon06.avif" ) type( "image/avif" ) , url( "../images/hoppe/icon06.avif" ) type( "image/webp" ) );
}
#hoppe02 .other ul{
	display : flex;
	flex-wrap : wrap;
}
#hoppe02 .other li{
	display : grid;
	grid-template-columns : auto auto;
	align-items : start;
	justify-content : start;
	font-weight : 500;
	line-height : 1.3;
}
#hoppe02 .other li::before{
	color : var( --color02 );
	white-space : pre;
	content : "＊ ";
}
#hoppe02 .e_kusulink h4::after{
	display : block;
	grid-row : 1/3;
	grid-column : 1;
	justify-content : start;
	font-size : 0;
	content : "";
	background : image-set( url( "../images/ui/label/e_kusulink.avif" ) type( "image/avif" ) , url( "../images/ui/label/e_kusulink.webp" ) type( "image/webp" ) ) center / contain no-repeat;
}
#hoppe02 .e_kusulink h4 span{
	grid-row : 1;
	grid-column : 4;
	justify-content : start;
	font-weight : 300;
}
#hoppe02 .e_kusulink h4 span::before{
	grid-row : 1;
	grid-column : 3;
	justify-content : start;
	color : var( --color02 );
	white-space : pre;
	content : "＊ ";
}
@media screen and ( width <= 750px ){
	#hoppe02{
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( 135 var( --remBase ) );
	}
	#hoppe02 > ul{
		margin-top : calc( 24 var( --remBase ) );
	}
	#hoppe02 > ul > li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#hoppe02 > ul > li:not( [class] ) h3{
		grid-template-columns : calc( 108.56 * 100% / 346 ) 1fr;
		column-gap : calc( 14.44 * 100% / 346 );
		padding-top : calc( 20 var( --remBase ) );
		padding-bottom : calc( 18 var( --remBase ) );
		padding-left : calc( 4.58 var( --percentBase ) );
		padding-right : calc( 17.42 var( --percentBase ) );
	}
	#hoppe02 > ul > li:not( [class] ) h3::before{
		height : calc( 76 var( --remBase ) );
	}
	#hoppe02 > ul > li:not( [class] ) h3 > span:nth-of-type( 1 ){
		font-size : 1.6rem;
		line-height : 1.3;
	}
	#hoppe02 > ul > li:not( [class] ) p{
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 16 var( --percentBase ) );
	}
	#hoppe02 .other{
		padding-top : calc( 11.95 var( --remBase ) );
		padding-bottom : calc( 25.05 var( --remBase ) );
		padding-left : calc( 7.02 var( --percentBase ) );
		padding-right : calc( 10.03 var( --percentBase ) );
	}
	#hoppe02 .other ul{
		row-gap : calc( 12 var( --remBase ) );
		column-gap : calc( 16 var( --percentBase ) );
		margin-top : calc( 8 var( --remBase ) );
	}
	#hoppe02 .other li{
		font-size : 1.4rem;
	}
	#hoppe02 .e_kusulink{
		padding-top : calc( 18 var( --remBase ) );
		padding-bottom : calc( 21 var( --remBase ) );
	}
	#hoppe02 .e_kusulink h4{
		display : grid;
		grid-template-columns : calc( 115 * 100% / 346 ) 1fr;
		column-gap : calc( 8 * 100% / 346 );
		align-items : center;
		justify-content : start;
		padding-left : calc( 6 var( --percentBase ) );
		padding-right : calc( 16 var( --percentBase ) );
	}
	#hoppe02 .e_kusulink h4::after{
		grid-row : 1;
		grid-column : 1;
		height : calc( 86 var( --remBase ) );
	}
	#hoppe02 .e_kusulink h4 span{
		grid-row : 1;
		grid-column : 2;
	}
	#hoppe02 .e_kusulink p{
		padding-left : calc( 15 var( --percentBase ) );
		padding-right : calc( 17 var( --percentBase ) );
		margin-top : calc( 10 var( --remBase ) );
	}
	#hoppe02 .function{
		margin-top : calc( 16 var( --remBase ) );
	}
	#hoppe02 .function picture::before{
		width : calc( 64 var( --percentBase ) );
		height : calc( 45 var( --remBase ) );
	}
	#hoppe02 .function h4{
		margin-top : calc( 8 var( --remBase ) );
	}
	#hoppe02 .function p{
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#hoppe02{
		padding-top : calc( 86 var( --remBase ) );
		padding-bottom : calc( 135 var( --remBase ) );
	}
	#hoppe02 > ul{
		display : flex;
		flex-wrap : wrap;
		row-gap : calc( 40 var( --remBase ) );
		column-gap : calc( 40 var( --percentBase ) );
		align-items : start;
		margin-top : calc( 40 var( --remBase ) );
	}
	#hoppe02 > ul > li:not( [class] ){
		width : calc( 440 var( --percentBase ) );
	}
	#hoppe02 > ul > li:not( [class] ) h3{
		grid-template-columns : calc( 104 * 100% / 408 ) 1fr;
		column-gap : calc( 19 * 100% / 408 );
		padding-inline : calc( 16 * 100% / 440 );
		padding-top : calc( 20 var( --remBase ) );
		padding-bottom : calc( 18 var( --remBase ) );
	}
	#hoppe02 > ul > li:not( [class] ) h3::before{
		height : calc( 76 var( --remBase ) );
	}
	#hoppe02 > ul > li:not( [class] ) h3 > span:nth-of-type( 1 ){
		font-size : 2rem;
		line-height : 1.3;
	}
	#hoppe02 > ul > li:not( [class] ) p{
		padding-inline : calc( 16 * 100% / 440 );
		padding-top : calc( 8 var( --remBase ) );
		padding-bottom : calc( 16 var( --remBase ) );
	}
	#hoppe02 :where( .other , .e_kusulink ){
		width : calc( 680 var( --percentBase ) );
		height : calc( 186 var( --remBase ) );
	}
	#hoppe02 .other{
		display : grid;
		grid-template-columns : calc( 176 * 100% / 632 ) 1fr;
		align-items : start;
		justify-content : start;
		padding-inline : calc( 24 var( --percentBase ) );
		padding-top : calc( 24 var( --remBase ) );
	}
	#hoppe02 .other ul{
		row-gap : calc( 12 var( --remBase ) );
		column-gap : calc( 16 * 100% / 456 );
	}
	#hoppe02 .other li{
		font-size : 2rem;
	}
	#hoppe02 .e_kusulink{
		display : grid;
		grid-template-rows : auto 1fr;
		grid-template-columns : calc( 166 * 100% / 648 ) calc( 17 * 100% / 648 ) auto 1fr;
		row-gap : calc( 11 var( --remBase ) );
		align-items : start;
		justify-content : start;
		padding-block : calc( 18 var( --remBase ) );
		padding-left : calc( 11 var( --percentBase ) );
		padding-right : calc( 21 var( --percentBase ) );
	}
	#hoppe02 .e_kusulink h4{
		display : contents;
	}
	#hoppe02 .e_kusulink h4::after{
		grid-row : 1/3;
		grid-column : 1;
	}
	#hoppe02 .e_kusulink h4 span{
		grid-row : 1;
		grid-column : 4;
		justify-content : start;
	}
	#hoppe02 .e_kusulink h4 span::before{
		grid-row : 1;
		grid-column : 3;
		justify-content : start;
	}
	#hoppe02 .e_kusulink p{
		grid-row : 2;
		grid-column : 3/5;
		justify-content : start;
	}
	#hoppe02 .e_kusulink h4 span{
		font-size : 2.4rem;
		line-height : 1.3;
	}
	#hoppe02 .e_kusulink h4::after{
		height : calc( 120 var( --remBase ) );
	}
	#hoppe02 .e_kusulink p{
		padding-left : calc( 3 * 100% / 472 );
	}
	#hoppe02 .function{
		display : grid;
		grid-template-columns : calc( 439.19 * 100% / 1160 ) calc( 650 * 100% / 1160 );
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 12.81 * 100% / 1160 );
		width : calc( 1160 var( --percentBase ) );
		margin-inline : auto;
		margin-top : calc( 57 var( --remBase ) );
		background-color : white;
	}
	#hoppe02 .function a{
		grid-row : 1/3;
		grid-column : 1;
	}
	#hoppe02 .function picture::before{
		width : calc( 91.88 * 100% / 439.19 );
		height : calc( 64.43 var( --remBase ) );
	}
	#hoppe02 .function h4{
		grid-row : 1;
		grid-column : 2;
		align-self : end;
	}
	#hoppe02 .function p{
		grid-row : 2;
		grid-column : 2;
		align-self : start;
	}
}
#hoppe03{
	position : relative;
	overflow-x : clip;
}
#hoppe03 h3{
	position : relative;
	z-index : 1;
	color : white;
}
#hoppe03 h3::before{
	position : absolute;
	z-index : -1;
	display : block;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
@media screen and ( width <= 750px ){
	#hoppe03{
		padding-bottom : calc( 116.4 var( --remBase ) );
	}
	#hoppe03 h3{
		padding-inline : calc( 23 var( --percentBase ) );
		padding-top : calc( 206 var( --remBase ) );
		padding-bottom : calc( 45.26 var( --remBase ) );
	}
	#hoppe03 h3::before{
		top : calc( -37 var( --remBase ) );
		left : calc( -36 var( --percentBase ) );
		width : calc( 406.4 var( --percentBase ) );
		height : calc( 349.24 var( --remBase ) );
		background-image : image-set( url( "../images/hoppe/bg_title_sp.avif" ) type( "image/avif" ) , url( "../images/hoppe/bg_title_sp.webp" ) type( "image/webp" ) );
	}
	#hoppe03 ul{
		margin-top : calc( 7.36 var( --remBase ) );
	}
	#hoppe03 li + li{
		margin-top : calc( 32 var( --remBase ) );
	}
	#hoppe03 p{
		margin-top : calc( 16 var( --remBase ) );
	}
	#hoppe03 picture{
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#hoppe03{
		padding-bottom : calc( 163 var( --remBase ) );
	}
	#hoppe03 h3{
		padding-top : calc( 110 var( --remBase ) );
		padding-bottom : calc( 145 var( --remBase ) );
		padding-left : calc( 676 var( --percentBase ) );
	}
	#hoppe03 h3::before{
		top : calc( -53 var( --remBase ) );
		left : calc( -20 var( --percentBase ) );
		width : calc( 1441 var( --percentBase ) );
		height : calc( 422 var( --remBase ) );
		background-image : image-set( url( "../images/hoppe/bg_title_pc.avif" ) type( "image/avif" ) , url( "../images/hoppe/bg_title_pc.webp" ) type( "image/webp" ) );
	}
	#hoppe03 ul{
		width : calc( 1160 var( --percentBase ) );
		margin-inline : auto;
		margin-top : calc( 48 var( --remBase ) );
	}
	#hoppe03 ul > li{
		display : grid;
		grid-template-columns : 1fr calc( 264 * 100% / 1160 );
		row-gap : calc( 16 var( --remBase ) );
		column-gap : calc( 24 * 100% / 1160 );
		align-items : start;
		justify-content : start;
	}
	#hoppe03 ul > li + li{
		margin-top : calc( 122 var( --remBase ) );
	}
	#hoppe03 h4{
		grid-row : 1;
		grid-column : 1;
	}
	#hoppe03 p{
		grid-row : 2;
		grid-column : 1;
	}
	#hoppe03 picture{
		grid-row : 1/3;
		grid-column : 2;
	}
}

/* --------------------------------------------
HOW TO
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#howto01{
		padding-top : calc( 51 var( --remBase ) );
		padding-bottom : calc( 47 var( --remBase ) );
	}
	#howto01 h2{
		margin-top : calc( 51 var( --remBase ) );
	}
	#howto01 ul{
		margin-top : calc( 42 var( --remBase ) );
	}
	#howto01 li + li{
		margin-top : calc( 42 var( --remBase ) );
	}
	#howto01 .youtube{
		margin-top : calc( 8 var( --remBase ) );
	}
	#howto01 .youtube::before{
		width : calc( 76.78 var( --percentBase ) );
		height : calc( 64.43 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#howto01{
		padding-top : calc( 32 var( --remBase ) );
		padding-bottom : calc( 40 var( --remBase ) );
	}
	#howto01 h2{
		margin-top : calc( 32 var( --remBase ) );
	}
	#howto01 ul{
		display : flex;
		flex-wrap : wrap;
		row-gap : calc( 40 var( --remBase ) );
		column-gap : calc( 40 var( --percentBase ) );
		justify-content : center;
		margin-top : calc( 50 var( --remBase ) );
	}
	#howto01 li{
		width : calc( 440 var( --percentBase ) );
	}
	#howto01 .youtube{
		margin-top : calc( 8 var( --remBase ) );
	}
	#howto01 .youtube::before{
		width : calc( 92.05 * 100% / 440 );
		height : calc( 64.43 var( --remBase ) );
	}
}
#howto02 .box{
	background-color : white;
}
@media screen and ( width <= 750px ){
	#howto02{
		padding-bottom : calc( 152 var( --remBase ) );
	}
	#howto02 .box{
		padding-block : calc( 40 var( --remBase ) );
		padding-inline : calc( 16 var( --percentBase ) );
	}
	#howto02 picture{
		margin-top : calc( 16 var( --remBase ) );
	}
	#howto02 p{
		margin-top : calc( 16 var( --remBase ) );
	}
	#howto02 .link01{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#howto02{
		padding-bottom : calc( 166 var( --remBase ) );
	}
	#howto02 .box{
		display : grid;
		grid-template-rows : repeat( 2 , auto ) 1fr;
		grid-template-columns : calc( 546 * 100% / 1071 ) 1fr;
		column-gap : calc( 8 * 100% / 1071 );
		align-items : start;
		justify-content : start;
		justify-items : start;
		width : calc( 1160 var( --percentBase ) );
		padding-block : calc( 16 var( --remBase ) );
		padding-left : calc( 16 var( --percentBase ) );
		padding-right : calc( 73 var( --percentBase ) );
		margin-inline : auto;
	}
	#howto02 picture{
		grid-row : 1/4;
		grid-column : 1;
	}
	#howto02 h3{
		grid-row : 1;
		grid-column : 2;
		padding-top : calc( 107 var( --remBase ) );
	}
	#howto02 p{
		grid-row : 2;
		grid-column : 2;
		padding-top : calc( 16 var( --remBase ) );
	}
	#howto02 .link01{
		grid-row : 3;
		grid-column : 2;
		margin-top : calc( 40 var( --remBase ) );
	}
}

/* --------------------------------------------
PHARMACY
--------------------------------------------- */
#searchPharmacy dt label{
	display : grid;
	align-items : center;
	justify-content : start;
	background-color : var( --color0103 );
}
#searchPharmacy input[type="text"]{
	width : 100%;
	background-color : #fff;
}
#searchPharmacy .checkboxies ul{
	display : flex;
	flex-wrap : wrap;
	row-gap : calc( 8 var( --remBase ) );
}
#searchPharmacy .checkboxies label{
	display : grid;
	place-items : center;
	align-items : center;
	justify-content : start;
}
#searchPharmacy .checkboxies label input{
	position : absolute;
	visibility : hidden;
	opacity : 0;
}
#searchPharmacy .checkboxies label{
	height : calc( 32 var( --remBase ) );
	padding-block : calc( 4 var( --remBase ) );
	padding-inline : calc( 8 var( --remBase ) );
	background-color : #f1f2ed;
	border-radius : calc( 6 var( --remBase ) );
}
#searchPharmacy .checkboxies label:has( input:checked ){
	color : white;
	background-color : var( --color01 );
}
@media screen and ( width <= 750px ){
	#searchPharmacy{
		padding-top : calc( 41 var( --remBase ) );
		padding-bottom : calc( 71 var( --remBase ) );
	}
	#searchPharmacy dl > div + div{
		margin-top : calc( 41 var( --remBase ) );
	}
	#searchPharmacy dt label{
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 16 var( --percentBase ) );
		font-size : 1.8rem;
		line-height : 1.3;
	}
	#searchPharmacy dd{
		margin-top : calc( 22 var( --remBase ) );
	}
	#searchPharmacy input[type="text"]{
		height : calc( 40 var( --remBase ) );
		padding-inline : calc( 8 var( --percentBase ) - 1px );
		border : solid 1px #a1a1a1;
		border-radius : calc( 4 var( --remBase ) );
	}
	#searchPharmacy input[type="text"]::placeholder{
		color : #a1a1a1;
	}
	#searchPharmacy .checkboxies ul{
		column-gap : calc( 8 var( --percentBase ) );
	}
	#searchPharmacy button{
		margin-top : calc( 41 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#searchPharmacy{
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( 120 var( --remBase ) );
	}
	#searchPharmacy dl{
		display : grid;
		grid-template-columns : repeat( 2 , 50% );
		row-gap : calc( 6 var( --remBase ) );
	}
	#searchPharmacy dl > div{
		display : grid;
		justify-content : start;
		padding-bottom : calc( 8 var( --remBase ) );
		border-bottom : dotted 1px #cfd2d9;
	}
	#searchPharmacy dl > :where( div:nth-of-type( 1 ) , div:nth-of-type( 2 ) ){
		align-items : center;
	}
	#searchPharmacy dl > div:nth-of-type( 1 ){
		grid-template-columns : calc( 200 * 100% / 700 ) calc( 464 * 100% / 700 );
		grid-row : 1;
		grid-column : 1;
		column-gap : calc( 16 * 100% / 700 );
	}
	#searchPharmacy dl > div:nth-of-type( 2 ){
		grid-template-columns : calc( 200 * 100% / 680 ) calc( 464 * 100% / 680 );
		grid-row : 1;
		grid-column : 2;
		column-gap : calc( 16 * 100% / 680 );
		padding-left : calc( 20 * 100% / 700 );
	}
	#searchPharmacy dl > div:nth-of-type( 3 ){
		grid-template-columns : calc( 200 var( --percentBase ) ) 1fr;
		grid-row : 2;
		grid-column : 1/3;
		column-gap : calc( 16 var( --percentBase ) );
		align-items : start;
	}
	#searchPharmacy dt label{
		padding-block : calc( 7 var( --remBase ) );
		padding-inline : calc( 9 * 100% / 200 );
	}
	#searchPharmacy input[type="text"]{
		height : calc( 40 var( --remBase ) );
	}
	#searchPharmacy input[type="text"]::placeholder{
		color : transparent;
	}
	#searchPharmacy .checkboxies ul{
		column-gap : calc( 8 * 100% / 1184 );
		padding-top : calc( 11 var( --remBase ) );
	}
	#searchPharmacy button{
		margin-top : calc( 24 var( --remBase ) );
	}
}
@media ( hover : hover ){
	#searchPharmacy .checkboxies label:hover:not( :has( input:checked ) ){
		color : white;
		background-color : var( --color01 );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#searchPharmacy .checkboxies label{
		transition : background var( --transitionBase ) , color var( --transitionBase );
	}
}
#pharmacy #map{
	width : 100%;
}
@media screen and ( width <= 750px ){
	#pharmacy{
		padding-bottom : calc( 77 var( --remBase ) );
	}
	#pharmacy #map{
		height : calc( 701 var( --remBase ) );
		margin-top : calc( 59 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#pharmacy{
		padding-bottom : calc( 30 var( --remBase ) );
	}
	#pharmacy #map{
		height : calc( 720 var( --remBase ) );
		margin-top : calc( 40 var( --remBase ) );
	}
}
#pharmacy .pharmacy:not( .is-current ){
	background : url( "../images/ui/icon/mappin.svg" ) center / contain no-repeat;
}
#pharmacy .pharmacy:not( .is-current ) > div{
	display : none;
}
#pharmacy .pharmacy.is-current{
	padding-block : calc( 8 var( --remBase ) );
	background-color : white;
	border-radius : calc( 6 var( --remBase ) );
	box-shadow : 0 calc( 4 var( --remBase ) ) calc( 4 var( --remBase ) ) 0 color-mix( in srgb , #000 25% , transparent );
}
#pharmacy .pharmacy.is-current .triangle{
	position : absolute;
	bottom : calc( -19 var( --remBase ) );
	left : 50%;
	height : calc( 21 var( --remBase ) );
	font-size : 0;
	filter : drop-shadow( 0 calc( 4 var( --remBase ) ) calc( 4 var( --remBase ) ) color-mix( in srgb , #000 25% , transparent ) );
	translate : -50% 0;
}
#pharmacy .pharmacy.is-current .triangle span{
	display : block;
	width : 100%;
	height : 100%;
	clip-path : polygon( 0 0 , 100% 0 , 50% 100% );
	background-color : white;
}
#pharmacy .pharmacy.is-current > div{
	display : grid;
	grid-template-columns : calc( 120 * 100% / 304 ) 1fr;
	column-gap : calc( 8 * 100% / 304 );
}
#pharmacy .pharmacy.is-current picture{
	grid-row : 1;
	grid-column : 1;
}
#pharmacy .pharmacy.is-current .box{
	grid-row : 1;
	grid-column : 2;
}
#pharmacy .pharmacy.is-current h3{
	padding-bottom : calc( 4 var( --remBase ) );
	font-size : 1.4rem;
	font-weight : 400;
	line-height : 1.2;
	border-bottom : solid 1px #d9d9d9;
}
#pharmacy .pharmacy.is-current .address{
	margin-top : calc( 9 var( --remBase ) );
	font-size : 1.2rem;
	line-height : 1.2;
}
#pharmacy .pharmacy.is-current ul{
	display : flex;
	flex-wrap : wrap;
	row-gap : calc( 4 var( --remBase ) );
	column-gap : calc( 4 * 100% / 172 );
	margin-top : calc( 4 var( --remBase ) );
}
#pharmacy .pharmacy.is-current li{
	display : grid;
	place-items : center;
	height : calc( 18 var( --remBase ) );
	padding-inline : calc( 4 var( --remBase ) );
	font-size : .9rem;
	line-height : 1.5;
	color : white;
	border-radius : calc( 2 var( --remBase ) );
}
#pharmacy .pharmacy.is-current .medicine{
	/* background-color: #3CAEA3; */
	background-color : var( --category03 );
}
#pharmacy .pharmacy.is-current .prescription{
	/* background-color: #8494C8; */
	background-color : var( --category06 );
}
#pharmacy .pharmacy.is-current a{
	display : block;
	width : fit-content;
	margin-top : calc( 6 var( --remBase ) );
	margin-left : auto;
	font-size : 1.1rem;
	line-height : 1.2;
	-webkit-text-decoration : underline;
	text-decoration : underline;
}
@media screen and ( width <= 750px ){
	#pharmacy .pharmacy:not( .is-current ){
		width : calc( 57.44 var( --remBase ) );
		height : calc( 57.44 var( --remBase ) );
	}
}
@media screen and ( width < 1440px ){
	#pharmacy .pharmacy.is-current{
		width : calc( 320 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
	}
	#pharmacy .pharmacy.is-current .triangle{
		width : calc( 12 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#pharmacy .pharmacy:not( .is-current ){
		height : calc( 59 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	#pharmacy .pharmacy:not( .is-current ){
		width : calc( 59 var( --remBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	#pharmacy .pharmacy:not( .is-current ){
		width : 59px;
	}
	#pharmacy .pharmacy.is-current{
		width : 320px;
		padding-inline : 8px;
	}
	#pharmacy .pharmacy.is-current .triangle{
		width : 12px;
	}
}

/* --------------------------------------------
CONTACT
--------------------------------------------- */
#contact dt label{
	display : grid;
	justify-content : start;
	font-size : 1.8rem;
	font-weight : 500;
	line-height : 1.3;
	background-color : var( --color0103 );
}
#contact :where( input[type="text"] , input[type="email"] , textarea ){
	padding-inline : calc( 8 var( --remBase ) - 1px );
	font-size : 1.6rem;
	font-weight : 300;
	line-height : 1.6;
	background-color : white;
	border : solid 1px #a1a1a1;
	border-radius : calc( 4 var( --remBase ) );
}
#contact :where( input[type="text"] , input[type="email"] , textarea )::placeholder{
	color : #a1a1a1;
}
#contact :where( input[type="text"] , input[type="email"] ){
	height : calc( 40 var( --remBase ) );
}
#contact .mails p{
	margin-top : calc( 9 var( --remBase ) );
	margin-bottom : calc( 10 var( --remBase ) );
	font-size : 1.6rem;
	line-height : 1.7;
}
#contact .checkboxies input[type="checkbox"]{
	position : absolute;
	visibility : hidden;
	opacity : 0;
}
#contact .checkboxies label{
	position : relative;
	display : grid;
	align-items : center;
	justify-content : start;
	font-size : 1.6rem;
	line-height : 1.7;
}
#contact .checkboxies label::before{
	display : block;
	font-size : 0;
	content : "";
	background-color : white;
	border : solid 1px #a1a1a1;
	border-radius : calc( 3 var( --remBase ) );
}
#contact .checkboxies label:has( input:checked )::after{
	position : absolute;
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/ui/icon/check03.svg" ) center / contain no-repeat;
}
#contact .privacies{
	overflow-y : auto;
	background-color : white;
	border : solid 1px #a1a1a1;
	border-radius : calc( 4 var( --remBase ) );
}
#contact .privacies .scroll{
	padding-block : calc( 4 var( --remBase ) );
}
#contact .privacies .scroll *{
	font-size : 1.6rem;
	line-height : 1.7;
	color : #aaa;
}
@media screen and ( width <= 750px ){
	#contact{
		padding-top : calc( 45 var( --remBase ) );
		padding-bottom : calc( 103 var( --remBase ) );
	}
	#contact dl{
		margin-top : calc( 45 var( --remBase ) );
	}
	#contact dl > div + div{
		margin-top : calc( 46 var( --remBase ) );
	}
	#contact dt label{
		align-items : center;
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 16 var( --percentBase ) );
	}
	#contact dd{
		margin-top : calc( 6 var( --remBase ) );
	}
	#contact :where( input[type="text"] , input[type="email"] , textarea ){
		width : 100%;
	}
	#contact .names input + input{
		margin-top : calc( 16 var( --remBase ) );
	}
	#contact .checkboxies{
		padding-top : calc( 16 var( --remBase ) );
	}
	#contact .checkboxies li + li{
		margin-top : calc( 8 var( --remBase ) );
	}
	#contact .checkboxies label{
		grid-template-columns : calc( 28 var( --percentBase ) ) auto;
		column-gap : calc( 3 var( --percentBase ) );
	}
	#contact .checkboxies label::before{
		height : calc( 25 var( --remBase ) );
	}
	#contact .checkboxies label:has( input:checked )::after{
		top : calc( 50% - ( 19.77 / 2 ) var( --remBase ) );
		left : calc( 1.87 var( --percentBase ) );
		width : calc( 23.91 var( --percentBase ) );
		height : calc( 19.77 var( --remBase ) );
	}
	#contact textarea{
		height : calc( 195 var( --remBase ) );
		margin-top : calc( 4 var( --remBase ) );
	}
	#contact h4{
		margin-top : calc( 36 var( --remBase ) );
		font-size : 1.8rem;
		font-weight : 500;
		line-height : 1.3;
		text-align : center;
	}
	#contact .privacies{
		height : calc( 175 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
	#contact .privacies .scroll{
		padding-inline : calc( 8 * 100% / 368 - 1px );
	}
	#contact .link03{
		margin-top : calc( 45 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#contact{
		padding-top : calc( 35 var( --remBase ) );
		padding-bottom : calc( 132 var( --remBase ) );
	}
	#contact dl{
		padding-inline : calc( 120 var( --percentBase ) );
		margin-top : calc( 47 var( --remBase ) );
	}
	#contact dl > div{
		display : grid;
		grid-template-columns : calc( 320 * 100% / 1160 ) 1fr;
	}
	#contact dl > div + div{
		padding-top : calc( 16 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
		border-top : solid 1px #aaa;
	}
	#contact dt label{
		align-items : start;
		padding-inline : calc( 16 * 100% / 320 );
		padding-top : calc( 13 var( --remBase ) );
		padding-bottom : calc( 30 var( --remBase ) );
	}
	#contact dd{
		padding-block : calc( 14 var( --remBase ) );
		padding-inline : calc( 40 * 100% / 840 );
	}
	#contact .names{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 238 * 100% / 760 ) );
		column-gap : calc( 15 * 100% / 760 );
		align-items : center;
		justify-content : start;
	}
	#contact .mails input{
		width : calc( 489 * 100% / 760 );
	}
	#contact .checkboxies ul{
		display : flex;
		flex-wrap : wrap;
		column-gap : calc( 16 * 100% / 760 );
	}
	#contact .checkboxies label{
		grid-template-columns : calc( 28 var( --remBase ) ) auto;
		column-gap : calc( 8 var( --remBase ) );
	}
	#contact .checkboxies label::before{
		height : calc( 28 var( --remBase ) );
	}
	#contact .checkboxies label:has( input:checked )::after{
		top : calc( 50% - ( 28 - 19.68 + 7.94 ) / 2 var( --remBase ) );
		left : calc( 1.5 var( --remBase ) );
		width : calc( 27.12 var( --remBase ) );
		height : calc( 19.68 var( --remBase ) );
	}
	#contact textarea{
		width : calc( 489 * 100% / 760 );
		height : calc( 123 var( --remBase ) );
	}
	#contact h4{
		margin-top : calc( 48 var( --remBase ) );
	}
	#contact .privacies{
		width : calc( 538 var( --percentBase ) );
		height : calc( 175 var( --remBase ) );
		margin-inline : auto;
		margin-top : calc( 24 var( --remBase ) );
	}
	#contact .privacies .scroll{
		padding-inline : calc( 8 * 100% / 538 - 1px );
	}
	#contact .link03{
		margin-top : calc( 40 var( --remBase ) );
	}
}