@charset "UTF-8";

/* --------------------------------------------
DESCRIPTION
--------------------------------------------- */
#descriptions h2 .marker{
	display : inline-block;
}
@media screen and ( width <= 750px ){
	#descriptions{
		position : relative;
		padding-block : calc( 24 var( --remBase ) );
		margin-bottom : calc( 80 var( --remBase ) );
		overflow-x : clip;
		background-color : var( --color0103 );
	}
	#descriptions::before , #descriptions::after{
		position : absolute;
		display : block;
		font-size : 0;
		content : "";
		background-repeat : no-repeat;
		background-position : 0 0;
		background-size : contain;
	}
	#descriptions::before{
		top : calc( -16 var( --remBase ) );
		left : calc( 335 var( --viewportBase ) );
		width : calc( 70 var( --viewportBase ) );
		height : calc( 109 var( --remBase ) );
		background-image : url( "../images/home/descriptions/char_sp.svg" );
	}
	#descriptions::after{
		bottom : calc( -47.77 var( --remBase ) );
		left : calc( 238 var( --viewportBase ) );
		width : calc( 167.27 var( --viewportBase ) );
		height : calc( 112.77 var( --remBase ) );
		background-image : image-set( url( "../images/home/descriptions/icon.avif" ) type( "image/avif" ) , url( "../images/home/descriptions/icon.avif" ) type( "image/webp" ) );
	}
	#descriptions h2 span:not( .marker ){
		font-size : 1.8rem;
		line-height : 1.3;
	}
	#descriptions .marker{
		background : linear-gradient( transparent calc( ( 3.6 + ( 24 - 13 ) / 2 ) * 100% / 33.2 ) , #faed7c calc( ( 3.6 + ( 24 - 13 ) / 2 ) * 100% / 33.2 ) calc( ( 3.6 + ( 24 - 13 ) / 2 + 13 ) * 100% / 33.2 ) , transparent calc( ( 3.6 + ( 24 - 13 ) / 2 + 13 ) * 100% / 33.2 ) );
	}
	#descriptions p{
		margin-top : calc( 18 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#descriptions{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#descriptions .box{
		position : relative;
		width : calc( 960 var( --percentBase ) );
		padding-top : calc( 52 var( --remBase ) );
		padding-bottom : calc( 42 var( --remBase ) );
		padding-left : calc( 198 var( --percentBase ) );
		padding-right : calc( 22 var( --percentBase ) );
		margin-left : calc( 120 var( --percentBase ) );
		background-color : var( --color0103 );
	}
	#descriptions .box::before , #descriptions .box::after{
		position : absolute;
		display : block;
		font-size : 0;
		content : "";
		background-repeat : no-repeat;
		background-position : 0 0;
		background-size : contain;
	}
	#descriptions .box::before{
		top : calc( 29 var( --remBase ) );
		left : calc( -102 * 100% / 960 );
		width : calc( 278 * 100% / 960 );
		height : calc( 388 var( --remBase ) );
		background-image : url( "../images/home/descriptions/char_pc.svg" );
	}
	#descriptions .box::after{
		top : calc( 240 var( --remBase ) );
		left : calc( 924 * 100% / 960 );
		width : calc( 251.29 * 100% / 960 );
		height : calc( 169.41 var( --remBase ) );
		background-image : image-set( url( "../images/home/descriptions/icon.avif" ) type( "image/avif" ) , url( "../images/home/descriptions/icon.avif" ) type( "image/webp" ) );
	}
	#descriptions .marker{
		background : linear-gradient( transparent calc( ( 6.6 + 44 - 25 ) * 100% / 57.2 ) , #faed7c calc( ( 6.6 + 44 - 25 ) * 100% / 57.2 ) calc( ( 6.6 + 44 ) * 100% / 57.2 ) , transparent calc( ( 6.6 + 44 ) * 100% / 57.2 ) );
	}
	#descriptions p{
		margin-top : calc( 34 var( --remBase ) );
	}
}

/* --------------------------------------------
FUNCTION
--------------------------------------------- */
#functions{
	position : relative;
	overflow-x : clip;
}
#functions::before{
	position : absolute;
	top : 0;
	display : block;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
#functions :where( h2 , .box ){
	position : relative;
}
#functions h2{
	color : white;
	background-color : color-mix( in sRGB , var( --color01 ) 90% , transparent );
}
#functions li{
	display : grid;
	align-items : start;
	justify-content : start;
}
#functions li::before{
	font-size : 0;
	content : "";
	background : url( "../images/ui/icon/check01.svg" ) center / contain no-repeat;
}
#functions .eKusulink{
	display : grid;
	grid-template-rows : auto 1fr;
}
#functions .eKusulink h3{
	display : contents;
}
#functions .eKusulink picture{
	grid-row : 1/3;
	grid-column : 1;
}
#functions .eKusulink h3 span{
	grid-row : 1;
	grid-column : 2;
	align-self : start;
	font-weight : 700;
}
#functions .eKusulink p{
	grid-row : 2;
	grid-column : 2;
	align-self : start;
	letter-spacing : .05em;
}
@media screen and ( width <= 750px ){
	#functions{
		padding-top : calc( 177 var( --remBase ) );
		padding-bottom : calc( 44 var( --remBase ) );
	}
	#functions::before{
		left : 0;
		width : 100%;
		height : calc( 270 var( --remBase ) );
		background-image : image-set( url( "../images/home/functions/bg_sp.avif" ) type( "image/avif" ) , url( "../images/home/functions/bg_sp.avif" ) type( "image/webp" ) );
		background-size : 100% auto;
	}
	#functions h2{
		padding-block : calc( 17 var( --remBase ) );
		padding-inline : calc( 8 var( --percentBase ) );
		letter-spacing : 0;
	}
	#functions .box{
		margin-top : calc( 9 var( --remBase ) );
	}
	#functions li{
		grid-template-columns : calc( 28 var( --percentBase ) ) auto;
		column-gap : calc( 4 var( --percentBase ) );
		font-size : 1.8rem;
		line-height : 1.5;
	}
	#functions li::before{
		height : calc( 28 var( --remBase ) );
	}
	#functions li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#functions .eKusulink{
		grid-template-columns : calc( 64 var( --percentBase ) ) 1fr;
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 8 var( --percentBase ) );
		margin-top : calc( 14 var( --remBase ) );
	}
	#functions .eKusulink h3 span{
		font-size : 1.6rem;
		line-height : 1.3;
	}
	#functions .eKusulink p{
		font-size : 1.4rem;
		line-height : calc( 20 / 14 );
	}
	#functions .link01{
		margin-top : calc( 15 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#functions{
		min-height : calc( ( 661 + 87 ) var( --remBase ) );
		padding-top : calc( 91 var( --remBase ) );
		padding-bottom : calc( 87 var( --remBase ) );
	}
	#functions::before{
		height : calc( 661 var( --remBase ) );
		background-image : image-set( url( "../images/home/functions/bg_pc.avif" ) type( "image/avif" ) , url( "../images/home/functions/bg_pc.avif" ) type( "image/webp" ) );
	}
	#functions :where( h2 , .box ){
		width : calc( 925 var( --percentBase ) );
		margin-left : calc( -20 var( --percentBase ) );
	}
	#functions h2{
		padding-block : calc( 43 var( --remBase ) );
		padding-inline : calc( 20 var( --percentBase ) );
	}
	#functions .box{
		display : grid;
		grid-template-columns : auto calc( 633 * 100% / 885 );
		row-gap : calc( 32 var( --remBase ) );
		align-items : start;
		justify-content : space-between;
		padding-inline : calc( 20 var( --percentBase ) );
		padding-top : calc( 24 var( --remBase ) );
		padding-bottom : calc( 26 var( --remBase ) );
		background-color : white;
	}
	#functions ul{
		grid-row : 1;
		grid-column : 1/3;
		row-gap : calc( 16 var( --remBase ) );
		column-gap : 0;
		columns : 2;
	}
	#functions li{
		grid-template-columns : calc( 32 * 100% / 442.5 ) auto;
		column-gap : calc( 8 * 100% / 442.5 );
		font-size : 2rem;
		line-height : 1.45;
		letter-spacing : .05em;
	}
	#functions li::before{
		height : calc( 32 var( --remBase ) );
		margin-top : calc( -1.5 var( --remBase ) );
	}
	#functions li:not(:first-child, :nth-child( 4 )){
		margin-top : calc( 16 var( --remBase ) );
	}
	#functions .eKusulink{
		grid-template-columns : calc( 129 * 100% / 633 ) 1fr;
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 21 * 100% / 633 );
	}
	#functions .eKusulink h3 span{
		padding-top : calc( 9 var( --remBase ) );
		font-size : 2rem;
		line-height : 1.45;
		letter-spacing : .05em;
	}
	#functions .eKusulink p{
		font-size : 1.4rem;
		line-height : calc( 20 / 14 );
	}
	#functions .link01{
		grid-row : 2;
		grid-column : 1;
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	#functions::before{
		left : calc( 554 var( --viewportBase ) );
		width : calc( 1298 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	#functions::before{
		left : calc( 50% - 146px );
		width : 1146px;
	}
}

/* --------------------------------------------
COPY APPS
--------------------------------------------- */
@media print , screen and ( width > 750px ){
	#appsCopy{
		position : relative;
		overflow-x : clip;
	}
	#appsCopy::before{
		position : absolute;
		top : calc( -65 var( --remBase ) );
		display : block;
		height : calc( 169.41 var( --remBase ) );
		content : "";
		background : image-set( url( "../images/apps/icon.avif" ) type( "image/avif" ) , url( "../images/apps/icon.avif" ) type( "image/webp" ) ) 0 0 / contain no-repeat;
	}
}
@media screen and ( 750px < width < 1440px ){
	#appsCopy::before{
		left : calc( 2 var( --viewportBase ) );
		width : calc( 251.29 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	#appsCopy::before{
		left : calc( 50% - 698px );
		width : 251.29px;
	}
}

/* --------------------------------------------
RECOMMENDS
-------------------------------------------- */
#recommends{
	position : relative;
	overflow-x : clip;
}
#recommends::before{
	position : absolute;
	display : block;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
#recommends h2 span{
	color : var( --color02 );
}
@media screen and ( width <= 750px ){
	#recommends{
		padding-block : calc( 80 var( --remBase ) );
	}
	#recommends::before{
		top : calc( ( 204 + 80 ) var( --remBase ) );
		left : calc( 296 var( --viewportBase ) );
		width : calc( 112.85 var( --viewportBase ) );
		height : calc( 92.68 var( --remBase ) );
		background-image : image-set( url( "../images/home/recommends/icon_sp.avif" ) type( "image/avif" ) , url( "../images/home/recommends/icon_sp.avif" ) type( "image/webp" ) );
	}
	#recommends h2{
		margin-top : calc( 8 var( --remBase ) );
	}
	#recommends .text01{
		margin-top : calc( 9 var( --remBase ) );
	}
	#recommends .text02{
		margin-top : calc( 8 var( --remBase ) );
	}
	#recommends .link01{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#recommends{
		display : grid;
		grid-template-rows : repeat( 4 , auto ) 1fr;
		grid-template-columns : calc( 560 var( --percentBase ) ) 1fr;
		column-gap : calc( 40 var( --percentBase ) );
		align-items : start;
		padding-top : calc( 80 var( --remBase ) );
		padding-bottom : calc( 103 var( --remBase ) );
	}
	#recommends::before{
		top : calc( 47.38 var( --remBase ) );
		height : calc( 195.13 var( --remBase ) );
		background-image : image-set( url( "../images/home/recommends/icon_pc.avif" ) type( "image/avif" ) , url( "../images/home/recommends/icon_pc.avif" ) type( "image/webp" ) );
	}
	#recommends > picture{
		grid-row : 1/6;
		grid-column : 1;
	}
	#recommends h2{
		position : relative;
		grid-row : 1;
		grid-column : 2;
		padding-top : calc( 58 var( --remBase ) );
	}
	#recommends h2::before , #recommends h2::after{
		position : absolute;
		z-index : -1;
		display : block;
		width : calc( 610.86 * 100% / 800 );
		height : calc( 605.31 var( --remBase ) );
		font-size : 0;
		content : "";
		background : url( "../images/home/recommends/bg.svg" ) center / contain no-repeat;
	}
	#recommends h2::before{
		top : calc( -113 var( --remBase ) );
		left : calc( -306 * 100% / 800 );
	}
	#recommends h2::after{
		top : calc( 126 var( --remBase ) );
		left : calc( 166 * 100% / 800 );
	}
	#recommends .text01{
		grid-row : 2;
		grid-column : 2;
		padding-top : calc( 18 var( --remBase ) );
	}
	#recommends .text02{
		grid-row : 3;
		grid-column : 2;
		padding-top : calc( 16 var( --remBase ) );
	}
	#recommends .text03{
		grid-row : 4;
		grid-column : 2;
		padding-top : calc( 16 var( --remBase ) );
	}
	#recommends .link01{
		grid-row : 5;
		grid-column : 2;
		margin-top : calc( 20 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	#recommends::before{
		left : calc( 1184.85 var( --viewportBase ) );
		width : calc( 215.24 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	#recommends::before{
		left : calc( 50% + 484.85px );
		width : 215.24px;
	}
}

/* --------------------------------------------
PHARMACIES
--------------------------------------------- */
#pharmacies{
	position : relative;
	overflow-x : clip;
	background-color : var( --bg01 );
}
#pharmacies::after{
	position : absolute;
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/home/pharmacies/bg.svg" ) center / contain no-repeat;
}
@media screen and ( width <= 750px ){
	#pharmacies{
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( 267.35 var( --remBase ) );
	}
	#pharmacies::after{
		bottom : calc( -24 var( --remBase ) );
		left : calc( -20 var( --viewportBase ) );
		width : calc( 422 var( --viewportBase ) );
		height : calc( 236 var( --remBase ) );
	}
	#pharmacies p{
		margin-top : calc( 8 var( --remBase ) );
	}
	#pharmacies .link01{
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#pharmacies{
		padding-top : calc( 69 var( --remBase ) );
		padding-bottom : calc( 73 var( --remBase ) );
	}
	#pharmacies::after{
		top : calc( 25 var( --remBase ) );
		height : calc( 437 var( --remBase ) );
	}
	#pharmacies :where( h2 , p , .link01 ){
		margin-left : calc( 78 var( --percentBase ) );
	}
	#pharmacies p{
		width : calc( 680 var( --percentBase ) );
		margin-top : calc( 18 var( --remBase ) );
	}
	#pharmacies .link01{
		margin-top : calc( 18 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	#pharmacies::after{
		left : calc( 737 var( --viewportBase ) );
		width : calc( 781 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	#pharmacies::after{
		left : calc( 50% + 37px );
		width : 781px;
	}
}
#voices li a{
	display : block;
	background-color : white;
}
#voices h3{
	display : grid;
	align-items : center;
	justify-content : start;
}
#voices h3::before{
	display : block;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
#voices h3.char01::before{
	background-image : url( "../images/home/voices/char01.svg" );
}
@media screen and ( width <= 750px ){
	#voices{
		padding-top : calc( 86 var( --remBase ) );
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#voices ul{
		display : grid;
		grid-auto-columns : calc( 304 * 100% / 384 );
		column-gap : calc( 16 * 100% / 384 );
		justify-content : center;
		padding-left : calc( 16 var( --viewportBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#voices li a{
		padding-inline : calc( 16 * 100% / 304 );
		padding-top : calc( 19 var( --remBase ) );
		padding-bottom : calc( 17 var( --remBase ) );
	}
	#voices h3{
		grid-template-columns : calc( 80 * 100% / 272 ) 1fr;
		column-gap : calc( 8 * 100% / 272 );
		min-height : calc( 80 var( --remBase ) );
	}
	#voices h3::before{
		height : calc( 80 var( --remBase ) );
	}
	#voices p{
		margin-top : calc( 8 var( --remBase ) );
	}
	#voices .link01{
		margin-top : calc( 24 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#voices{
		padding-top : calc( 94 var( --remBase ) );
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#voices ul{
		display : grid;
		grid-auto-columns : calc( 440 var( --percentBase ) );
		column-gap : calc( 40 var( --percentBase ) );
		justify-content : center;
		margin-top : calc( 40 var( --remBase ) );
	}
	#voices li a{
		padding-top : calc( 19 var( --remBase ) );
		padding-bottom : calc( 17 var( --remBase ) );
	}
	#voices h3{
		grid-template-columns : calc( 130 * 100% / 412 ) 1fr;
		column-gap : calc( 22 * 100% / 412 );
		min-height : calc( 130 var( --remBase ) );
		padding-left : calc( 12 * 100% / 440 );
		padding-right : calc( 16 * 100% / 440 );
	}
	#voices h3::before{
		height : calc( 130 var( --remBase ) );
	}
	#voices p{
		padding-inline : calc( 16 * 100% / 440 );
		margin-top : calc( 5 var( --remBase ) );
	}
	#voices .link01{
		margin-top : calc( 56 var( --remBase ) );
	}
}

/* --------------------------------------------
TOPIC and COLUMN
--------------------------------------------- */
#topics-columns h2 a{
	display : grid;
	align-items : center;
	justify-content : space-between;
	padding-bottom : calc( 8 var( --remBase ) );
	font-weight : 600;
	line-height : 1.3;
	color : var( --color01 );
	letter-spacing : .1em;
	border-bottom : solid calc( 2 var( --remBase ) ) #d9d9d9;
}
#topics-columns h2 a::after{
	display : block;
	height : calc( 30 var( --remBase ) );
	font-size : 0;
	content : "";
	background : url( "../images/ui/arrow/circle02.svg" ) center / contain no-repeat;
}
@media screen and ( width <= 750px ){
	#topics-columns{
		padding-bottom : calc( 116 var( --remBase ) );
	}
	#topics-columns h2 a{
		grid-template-columns : auto calc( 30 * 100% / 364 );
		padding-inline : calc( 2 var( --viewportBase ) );
		font-size : 2.8rem;
	}
}
@media print , screen and ( width > 750px ){
	#topics-columns{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 680 var( --percentBase ) ) );
		align-items : start;
		justify-content : space-between;
		padding-top : calc( 80 var( --remBase ) );
		padding-bottom : calc( 70 var( --remBase ) );
		background-color : white;
	}
	#topics-columns h2 a{
		grid-template-columns : auto calc( 30 * 100% / 666 );
		padding-bottom : calc( 8 var( --remBase ) );
		padding-left : calc( 4 * 100% / 680 );
		padding-right : calc( 10 * 100% / 680 );
		font-size : 4.4rem;
	}
}
#topics li a{
	display : grid;
	align-items : start;
}
#topics time{
	font-size : 1.6rem;
	line-height : 1.5;
}
#topics .category{
	display : grid;
	place-items : center;
	color : white;
}
#topics h3{
	font-size : 1.6rem;
	font-weight : 400;
	line-height : 1.5;
}
@media screen and ( width <= 750px ){
	#topics ul{
		margin-top : calc( -2 var( --remBase ) );
	}
	#topics li{
		border-bottom : solid 1px #cfd2d9;
	}
	#topics li a{
		grid-template-columns : calc( 96 var( --percentBase ) ) auto 1fr;
		row-gap : calc( 7 var( --remBase ) );
		padding-block : calc( 18 var( --remBase ) );
	}
	#topics time{
		grid-row : 1;
		grid-column : 1;
		padding-top : calc( 1 var( --remBase ) );
	}
	#topics .category{
		grid-row : 1;
		grid-column : 2;
		height : calc( 26 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 1.3;
	}
	#topics h3{
		grid-row : 2;
		grid-column : 1/4;
	}
}
@media print , screen and ( width > 750px ){
	#topics ul{
		margin-top : calc( 12 var( --remBase ) );
	}
	#topics li + li{
		border-top : solid 1px #cfd2d9;
	}
	#topics li a{
		grid-template-columns : calc( 100 * 100% / 680 ) calc( 88 * 100% / 680 ) 1fr;
		padding-block : calc( 18 var( --remBase ) );
	}
	#topics time{
		padding-top : calc( 5 var( --remBase ) );
	}
	#topics .category{
		height : calc( 34 var( --remBase ) );
		font-size : 1.2rem;
		line-height : 1.5;
	}
	#topics h3{
		padding-inline : calc( 8 * 100% / 492 );
		padding-top : calc( 5 var( --remBase ) );
	}
}
#columns picture{
	width : 100%;
}
#columns picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#columns h3{
	font-weight : 400;
}
@media screen and ( width <= 750px ){
	#columns{
		margin-top : calc( 80 var( --remBase ) );
	}
	#columns h2{
		width : calc( 368 var( --viewportBase ) );
		margin-inline : auto;
	}
	#columns .splide__track{
		margin-top : calc( 16 var( --remBase ) );
	}
	#columns .splide__slide{
		margin-left : calc( 16 var( --viewportBase ) );
	}
	#columns picture{
		height : calc( 171 var( --remBase ) );
	}
	#columns h3{
		margin-top : calc( 6 var( --remBase ) );
		font-size : 2em;
		line-height : 1.3;
	}
}
@media print , screen and ( width > 750px ){
	#columns .splide__track{
		margin-top : calc( 30 var( --remBase ) );
	}
	#columns .splide__list{
		display : grid;
		grid-template-columns : repeat( 3 , calc( 200 * 100% / 680 ) );
		row-gap : calc( 40 var( --remBase ) );
		justify-content : space-between;
	}
	#columns picture{
		height : calc( 140 var( --remBase ) );
	}
	#columns h3{
		margin-top : calc( 4 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.5;
	}
}