@charset "UTF-8";
/*--------------------------------------------
SETTINGS
---------------------------------------------*/
@media screen and (max-width: 750px){
html{
		font-size: calc( 10 * 100vw / var(--breakpoint) )
}
	}
@media screen and (min-width: 751px) and (max-width: 1239px){
html{
		font-size : calc( 10 * 100vw / var(--breakpoint) )
}
	}
@media print,screen and (min-width: 1240px){
html{
		font-size:10px
}
	}
@media screen and (max-width: 750px){
	:root{
		--headerHeight : calc( 150 var(--remBase) );
	}
}
@media print,screen and (min-width: 751px){
	:root{
		--headerHeight : calc( 168 var(--remBase) );
	}
}
body.bg{
		background-color: #fffafd;
	}
body.is-modal{
		overflow: hidden;
	}
body{
	background-repeat: repeat;
	background-position: center top
}
@media screen and (max-width: 750px){
body{
		scroll-padding-top: var(--headerHeight);
		background-image: url("../images/ui/bg/body_sp.webp");
		font-size: calc( 24 var(--remBase) )
}
	}
@media print,screen and (min-width: 751px){
body{
		background-image: url("../images/ui/bg/body_pc.webp");
		font-size: calc( 16 var(--remBase) )
}
	}
/*--------------------------------------------
WRAPPER
---------------------------------------------*/


@media screen and (max-width: 750px){
.wrap{
		padding-inline : calc( 30 * 100% / var(--breakpoint) )
}
	}
@media screen and (min-width: 751px) and (max-width: 1239px){
.wrap{
		padding-inline : calc( 20 * 100% / var(--breakpoint) )
}
	}
@media print,screen and (min-width: 1240px){
.wrap{
		padding-inline: calc( ( 100% - 1200px ) / 2 )
}
	}
@media screen and (max-width: 750px){
.wrap-sp{
		padding-inline : calc( 30 * 100% / var(--breakpoint) )
}
	}
@media screen and (min-width: 751px) and (max-width: 1239px){
.wrap-pc{
		padding-inline : calc( 20 * 100% / var(--breakpoint) )
}
	}
@media print,screen and (min-width: 1240px){
	.wrap-pc{
			padding-inline: calc( ( 100% - 1200px ) / 2 )
	}
}
@media screen and (max-width: 750px){
	.wrap02{
			padding-inline : calc( 30 * 100% / var(--breakpoint) )
	}
}

@media screen and (min-width: 751px) and (max-width: 1239px){
	.wrap02{
			padding-inline : calc( 20 * 100% / var(--breakpoint) )
	}
}
@media print,screen and (min-width: 1240px){
	.wrap02{
			padding-inline: calc( ( 100% - 1180px ) / 2 )
	}
}
@media screen and (max-width: 750px){
	.wrap02-sp{
			padding-inline : calc( 30 * 100% / var(--breakpoint) )
	}
}
@media screen and (min-width: 751px) and (max-width: 1239px){
.wrap02-pc{
		padding-inline : calc( 30 * 100% / var(--breakpoint) )
}
	}
@media print,screen and (min-width: 1240px){
	.wrap02-pc{
			padding-inline: calc( ( 100% - 1180px ) / 2 )
	}
}


/*--------------------------------------------
STATE
---------------------------------------------*/
@layer {
			@media screen and (max-width: 750px){
		.is-pc{
				display: none
		}
			}
			@media screen and (max-width: 750px){
		.is-tb{
				display: none
		}
			}
			@media print,screen and (min-width: 1240px){
		.is-tb{
				display: none
		}
			}
			@media print,screen and (min-width: 751px){
		.is-sp{
				display: none
		}
			}
	}
/*--------------------------------------------
COMMON
---------------------------------------------*/
.full{
		width: 100%;
		height: auto;
	}
[data-before]:before{
		content:attr( data-before );
		white-space: pre;
	}
[data-after]:after{
		content:attr( data-after );
		white-space: pre;
	}
[data-both]:before{
		content:attr( data-both );
		white-space: pre;
	}
[data-both]:after{
		content:attr( data-both );
		white-space: pre;
	}
@media screen and (max-width: 750px){
[data-sp-after]:after{
			content:attr( data-sp-after );
			white-space: pre
	}
		}
@media screen and (max-width: 750px){
[data-sp-before]:before{
			content:attr( data-sp-before );
			white-space: pre
	}
		}
@media print,screen and (min-width: 751px){
[data-pc-after]:after{
			content:attr( data-pc-after );
			white-space: pre
	}
		}
@media print,screen and (min-width: 751px){
[data-pc-before]:before{
			content:attr( data-pc-before );
			white-space: pre
	}
		}
/*--------------------------------------------
LAYOUT
  HEADER
---------------------------------------------*/
#header{
	position: relative;
	z-index: 10;
}
#header .logo{
		display: block;
		transition: opacity var(--transitionBase);
	}
#header .logo:hover{
		opacity: .8;
	}
@media screen and (max-width: 750px){
#header{
		height: var(--headerHeight);
		padding-top: calc( 25 var(--remBase) )
}
		#header:before{
			position: absolute;
			content:"";
			display: block;
			background: url("../images/ui/bg/logo.svg") 0 0 / contain no-repeat;
			top: calc( -93 var(--remBase) );
			height: calc( 256 var(--remBase) );
			left: calc( 126 * 100% / 750 );
			width: calc( 439 * 100% / 750 );
			z-index: -1;
		}
		#header .logo{
			margin-left: calc( 77 var(--percentBase) );
		}
			#header .logo img{
				height: calc( 101 var(--remBase) );
			}
	}
@media print,screen and (min-width: 751px){
#header{
		grid-template-columns: calc( 430 * 100% / 1600 ) 1fr;
		height: var(--headerHeight);
		padding-top: calc( 53 var(--remBase) );
		display: grid;
		align-items: start;
		justify-content: space-between;
		grid-auto-flow: column
}
		#header .logo{
			width: 100%;
		}
			#header .logo img{
				width: 100%;
				height: auto;
			}
	}
@media screen and (min-width: 751px) and (max-width: 1659px){
#header{
		padding-inline: calc( 30 * 100% / 1660 )
}
	}
@media screen and (min-width: 1660px){
#header{
		padding-inline: calc( ( 100% - 1600px ) / 2 )
}
	}
/*--------------------------------------------
LAYOUT
  MENU BUTTON
---------------------------------------------*/
@media screen and (max-width: 750px){
#menuBtn{
		position: fixed;
		z-index: 11;
		top: calc( 21 var(--remBase) );
		left:calc( 641 * 100% / 750 );
		height: calc( 100 var(--remBase) );
		width:calc( 99 * 100% / 750 );
		display: grid;
		grid-auto-flow: row;
		padding-top: calc( 23 var(--remBase) );
		align-items: start;
		grid-template-rows: calc( 25 var(--remBase) ) calc( 20 var(--remBase) ) 1fr;
		row-gap: calc( 8 var(--remBase) );
}
		#menuBtn > span:nth-of-type(1){
		width: 100%;
		height: 100%;
		position: relative;
		display: block;
		font-size: 0;
	}
		#menuBtn span span{
		display: block;
		position: absolute;
		left: 0;
		transition: all .4s;
		width: 100%;
	}
		#menuBtn span span:nth-of-type(1){
			top: 0;
		}
		#menuBtn span span:nth-of-type(2){
			bottom: 0;
		}
		#menuBtn:before{
			content:"";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: url("../images/ui/bg/circle01.svg") var(--bgContain);
			filter:invert(70%) sepia(25%) saturate(592%) hue-rotate(143deg) brightness(91%) contrast(86%);
			z-index: -1;
		}
		#menuBtn > span:nth-of-type(1){
			width:calc( 51 * 100% / 99 );
			margin-inline: auto;
		}
		#menuBtn span span{
			background-color: var(--siteBrown);
			height : calc( 10 var(--remBase) );
			border:calc( 3 var(--remBase) ) solid #fff;
			border-radius: 100dvh;
		}
			#menuBtn span span:nth-of-type(2), #menuBtn span span:nth-of-type(3){
				top: calc( 15 var(--remBase) );
			}
		#menuBtn > span:nth-of-type(2){
			display: block;
		}
			#menuBtn > span:nth-of-type(2) img{
				height: 100%;
				margin-inline: auto;
			}
	}
body.is-open{
		overflow: hidden;
	}
body.is-open #nav{
		max-height: 100vh;
		max-height:100dvh;
	}
body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(1){
			rotate:-45deg;
			top:50%;
			translate:0 -50%;
		}
body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(2){
			rotate:45deg;
			top:50%;
			translate:0 -50%;
		}
/*--------------------------------------------
LAYOUT
  NAV
---------------------------------------------*/
@media screen and (max-width: 750px){
#nav{
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 10;
		transition: max-height .5s ease-in;
		max-height: 0;
		overflow: hidden;
		overflow-y:auto;
		background-color:rgba(84,155,170 ,.95);
		top: 0;
		height: 100dvh
}
		#nav .scroll{
			padding-top: calc( 37 var(--remBase) );
			padding-bottom: calc( 277 var(--remBase) );
			padding-inline: calc( 58 * 100% / 750 );
		}
	}
@media print,screen and (min-width: 751px){
#nav{
		padding-top: calc( 13 var(--remBase) )
}
	}
#navGlobal .guardians{
		display: grid;
		place-items:center;
		background-color:var(--siteYellow);
		font-weight: 500;
		color:var(--siteBrown);
		transition: opacity var(--transitionBase);
	}
#navGlobal .guardians:hover{
		opacity: .8;
	}
@media screen and (max-width: 750px){
#navGlobal{
		padding-inline: calc( 67 * 100% / 634 )
}
		#navGlobal > li:not(.guardians){
			border-bottom: calc( 2 var(--remBase) ) solid white;
		}
		#navGlobal > li:not(.guardians) a, #navGlobal button{
			font-size: calc( 34 var(--remBase) );
			color:#fff;
			font-weight: 700;
			display: block;
			width: 100%;
		}
			#navGlobal > li:not(.guardians) > a, #navGlobal > li:not(.guardians) > button{
				padding-block: calc( 29 var(--remBase) );
			}
		#navGlobal button{
			position: relative;
		}
			#navGlobal button:after{
				content:"";
				display: block;
				position: absolute;
				width:calc( 21 * 100% / 500 );
				height: calc( 13 var(--remBase) );
				top: calc( 39.5 var(--remBase) );
				right:calc( 20 * 100% / 500 );
				background: url("../images/ui/parts/allow/y01.svg") var(--bgContain);
				filter:invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
				transition: rotate var(--transitionBase);
			}
			#navGlobal button.is-open:after{
				rotate:-180deg;
			}
		#navGlobal ul{
			padding-left: calc( 34 * 100% / 500 );
			padding-bottom: calc( 29 var(--remBase) );
			display: none;
		}
		#navGlobal ul li + li{
			margin-top: calc( 35 var(--remBase) );
		}
		#navGlobal .guardians{
			width: 100%;
			height: calc( 80 var(--remBase) );
			margin-top: calc( 34 var(--remBase) );
			font-size: calc( 30 var(--remBase) );
		}
	}
@media print,screen and (min-width: 751px){
#navGlobal{
		display: grid;
		align-items: center;
		justify-content: end;
		grid-auto-flow: column
}
		#navGlobal > li{
			position: relative;
		}
		#navGlobal button, #navGlobal > li:not([class]) > a:only-child{
			display: grid;
			place-items:center;
			color:var(--siteBrown);
			font-weight: 600;
			font-size: calc( 18 var(--remBase) );;
			line-height: calc( 24 / 18 );;
			white-space:nowrap;
			width: 100%;
			text-align: center;
			height: calc( 80 var(--remBase) );
			text-shadow:calc( 2 var(--remBase) ) calc( 2 var(--remBase) ) 0 #FFF, calc( -2 var(--remBase) ) calc( -2 var(--remBase) ) 0 #FFF,calc( -2 var(--remBase) ) calc( 2 var(--remBase) ) 0 #FFF, calc( 2 var(--remBase) ) calc( -2 var(--remBase) ) 0 #FFF,0 calc( 2 var(--remBase) ) 0 #FFF,0 calc( -2 var(--remBase) ) 0 #FFF,calc( -2 var(--remBase) ) 0 0 #FFF, calc( 2 var(--remBase) ) 0 0 #FFF;
			position: relative;
			cursor: pointer;
			transition:filter var(--transitionBase);
		}
			#navGlobal button:hover,#navGlobal > li:not([class]) > a:only-child:hover{
		filter:brightness(1.1);
	}
			#navGlobal button:before,#navGlobal > li:not([class]) > a:only-child:before{
				content:"";
				display: block;
				position: absolute;
				top: 0;
				left: 10%;
				width: 100%;
				height: 100%;
				z-index: -1;
				background: url("../images/ui/bg/square01.svg") 0 0 / contain no-repeat;
			}
			#navGlobal .pc-color01:before{
				filter: invert(62%) sepia(20%) saturate(605%) hue-rotate(308deg) brightness(117%) contrast(90%);
			}
			#navGlobal .pc-color01 + ul{
				background-color: #f2a9ad;
			}
			#navGlobal .pc-color02:before{
				filter: invert(83%) sepia(44%) saturate(437%) hue-rotate(355deg) brightness(107%) contrast(87%);
			}
			#navGlobal .pc-color02 + ul{
				background-color: #eee184;
			}
			#navGlobal .pc-color03:before{
				filter: invert(80%) sepia(31%) saturate(690%) hue-rotate(24deg) brightness(92%) contrast(96%);
			}
			#navGlobal .pc-color03 + ul{
				background-color: #b9ce53;
			}
			#navGlobal .pc-color04:before{
				filter: invert(82%) sepia(19%) saturate(221%) hue-rotate(115deg) brightness(95%) contrast(87%);
			}
			#navGlobal .pc-color04 + ul{
				background-color: #bad1c9;
			}
			#navGlobal .pc-color05:before{
				filter: invert(60%) sepia(97%) saturate(348%) hue-rotate(349deg) brightness(94%) contrast(96%);
			}
			#navGlobal .pc-color06:before{
				filter: invert(61%) sepia(25%) saturate(602%) hue-rotate(289deg) brightness(88%) contrast(89%);
			}
			#navGlobal .pc-color07:before{
				filter: invert(87%) sepia(17%) saturate(986%) hue-rotate(318deg) brightness(103%) contrast(96%);
			}
			#navGlobal .pc-color08:before{
				filter: invert(95%) sepia(4%) saturate(3394%) hue-rotate(195deg) brightness(92%) contrast(92%);
			}
		#navGlobal button{
			margin-bottom: calc( 2 var(--remBase) );
            cursor: default;
		}
			#navGlobal > li:hover > button + ul{
				scale:100% 100%;
				display: block !important;
			}
		#navGlobal ul{
			position: absolute;
			border-radius: calc( 8 var(--remBase) );
			padding-block: calc( 15 var(--remBase) );
			padding-inline: calc( 15 var(--remBase) );
			top:100%;
			left: 0;
			overflow: hidden;
			scale:100% 0;
			transition: scale var(--transitionBase);
			transform-origin: 0 0;
			z-index: 2;
		}
			#navGlobal ul li + li{
				margin-top: calc( 10 var(--remBase) );
			}
			#navGlobal ul a{
				color:#3b2619;
				font-weight: 700;
				font-size: calc( 16 var(--remBase) );
				display: block;
				white-space: nowrap;
				transition: text-decoration var(--transitionBase);
				text-decoration-color:transparent;
				text-decoration-line: underline;
			}
				#navGlobal ul a:hover{
		text-decoration-color:currentColor;
	}
		#navGlobal .stars{
			position: absolute;
			top: calc( 20 var(--remBase) );
			display: block;
		}
			#navGlobal .stars a{
				display: grid;
				align-items: center;
				justify-content: start;
				grid-auto-flow: column;
				grid-template-columns: calc( 13 var(--remBase) ) auto;
				column-gap: calc( 21 var(--remBase) );
				font-size: calc( 16 var(--remBase) );
				font-weight: 500;
				color:var(--siteBrown);
				transition: text-decoration var(--transitionBase);
				text-decoration-color:transparent;
				text-decoration-line: underline;
			}
				#navGlobal .stars a:hover{
		text-decoration-color:currentColor;
	}
				#navGlobal .stars a:before{
					content:"";
					display: block;
					background:url("../images/ui/parts/star01.svg") var(--bgContain);
					font-size: 0;
					height: calc( 15 var(--remBase) );
				}
		#navGlobal .guardians{
			position: absolute;
			top: 0;
			left:calc( 50% + calc( 390 var(--remBase) ) );
			width:calc( 210 var(--remBase) );
			height: calc( 50 var(--remBase) );
			font-size: calc( 16 var(--remBase) );
			border-radius: 0 0 calc( 6 var(--remBase) ) calc( 6 var(--remBase) );
		}
	}
@media screen and (min-width: 751px) and (max-width: 1219px){
#navGlobal{
		grid-auto-columns: calc( 91 * 100% / 770 )
}
		#navGlobal .star01{
			left:calc( 50% + calc( 17 var(--remBase) ) );
		}
		#navGlobal .star02{
			left:calc( 50% + calc( 112 var(--remBase) ) );
		}
		#navGlobal .star03{
			left:calc( 50% + calc( 270 var(--remBase) ) );
		}
		#navGlobal .guardians{
			left:calc( 50% + calc( 390 var(--remBase) ) );
		}
	}
@media screen and (min-width: 1220px){
#navGlobal{
		grid-auto-columns: 95px;
}
		#navGlobal .star01{
			right: calc(50% - 100px);
		}
		#navGlobal .star02{
			right: calc(50% - 260px);
		}
		#navGlobal .star03{
			right: calc(50% - 370px);
		}
		#navGlobal .guardians{
			right: calc(50% - 600px);
		}
			#navGlobal button:before,#navGlobal > li:not([class]) > a:only-child:before{
				left: 0;
			}
	}
@media screen and (max-width: 750px){
#navWe{
		margin-top: calc( 63 var(--remBase) );
		border: solid calc( 4 var(--remBase) ) #fff;
		padding-inline: calc( 63 * 100% / 634 );
		padding-top: calc( 60 var(--remBase) );
		padding-bottom: calc( 43 var(--remBase) );
		color:#fff
}
		#navWe h4{
			font-weight: 500;
			text-align: center;
			letter-spacing: .1em;
			text-indent: .1em;
			font-size: calc( 44 var(--remBase) );
		}
		#navWe p{
			padding-left: calc( 17 * 100% / 500 );
			display: grid;
			grid-auto-flow: column;
			align-items: start;
			justify-content: start;
			margin-top: calc( 46 var(--remBase) );
			padding-top: calc( ( 19 - 3 ) var(--remBase) );
			padding-bottom: calc( ( 30 - 3 ) var(--remBase) );
			line-height: 1.2;
			font-size: calc( 30 var(--remBase) );
			border-top: solid calc( 2 var(--remBase) ) currentColor;
			border-bottom: solid calc( 2 var(--remBase) ) currentColor;
			grid-template-columns: calc( 25 * 100% / 483 ) auto;
			column-gap: calc( 14 * 100% / 483 );
			font-weight: 500;
			letter-spacing: 0.1em;
		}
			#navWe p:before{
				content:"";
				display: block;
				height: calc( 37 var(--remBase) );
				background: url("../images/ui/icon/mappin.svg") var(--bgContain);
				filter:var(--toWhite);
				font-size: 0;
				margin-top: calc( 4 var(--remBase) );
			}
		#navWe a:first-of-type{
			margin-top: calc( 24 var(--remBase) );
			display: grid;
			margin-left:calc( 18 * 100% / 500 );
			grid-auto-flow:column;
			grid-template-columns: calc( 24 * 100% / 482 ) auto;
			align-items: center;
			justify-content: start;
			font-size: calc( 30 var(--remBase) );
			font-weight: 500;
			color:#fff;
			column-gap: calc( 18 * 100% / 482 );
			letter-spacing: 0.1em;
		}
			#navWe a:first-of-type:before{
				content:"";
				display: block;
				height: calc( 28 var(--remBase) );
				background: url("../images/ui/icon/tel01.svg") var(--bgContain);
				filter:var(--toWhite);
				font-size: 0;
				margin-top: calc( 1 var(--remBase) );
			}
		#navWe a:nth-of-type(2){
			margin-top: calc( 41 var(--remBase) );
			margin-inline: auto;
			border-radius: 100dvh;
			width: calc( 420 * 100% / 500 );
			height: calc( 60 var(--remBase) );
			display: grid;
			align-items: center;
			justify-content: center;
			grid-template-columns: calc( 30 * 100% / 420 ) auto;
			column-gap: calc( 9 * 100% / 420 );
			font-size: calc( 26 var(--remBase) );
			letter-spacing: 0.1em;
			background-color: var(--siteYellow);
			font-weight: 500;
		}
			#navWe a:nth-of-type(2):before{
				content:"";
				display: block;
				height: calc( 25 var(--remBase) );
				background: url("../images/ui/icon/email.svg") var(--bgContain);
				filter:invert(18%) sepia(1%) saturate(918%) hue-rotate(314deg) brightness(90%) contrast(82%);
				font-size: 0;
			}
	}
@media screen and (max-width: 750px){
#menuClose{
		width: fit-content;
		margin-inline: auto;
		margin-top: calc( 39 var(--remBase) )
}
		#menuClose img{
			height: calc( 43 var(--remBase) );
		}
	}
/*--------------------------------------------
HOME
---------------------------------------------*/
#mv{
	font-size: 0;
}
#mv picture{
		width: 100%;
		height: 100%;
	}
#mv picture img{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
@media screen and (max-width: 750px){
		#mv .swiper-slide{
			margin-inline : calc( 5 var(--remBase) );
			height : calc( 420 var(--remBase) );
			width : calc( 670 var(--remBase) );
		}
	}
@media print,screen and (min-width: 751px){
		#mv .swiper-slide{
			margin-inline : calc( 15 var(--remBase) );
			height : calc( 600 var(--remBase) );
			width : calc( 1200 var(--remBase) );
		}
	}
/*--------------------------------------------
TITLE
---------------------------------------------*/
#title{
	background-repeat: repeat-x;
	background-position: center top;
	display: grid;
	justify-content: center;
	align-content: center;
    font-family: var(--fontFamilyMal);
}
#title span ,#title b{
		display: block;
		text-align: center;
		color:#5c5754;
	}
@media screen and (max-width: 750px){
#title{
		height: calc( 224 var(--remBase) )
}
		#title.pink{
			background-image: url("../images/ui/bg/title/pink_sp.webp");
		}
		#title.pink2{
			background-image: url("../images/ui/bg/title/pink2_sp.webp");
		}
		#title.cream{
			background-image: url("../images/ui/bg/title/cream_sp.webp");
		}
		#title.green{
			background-image: url("../images/ui/bg/title/green_sp.webp");
		}
		#title.mint{
			background-image: url("../images/ui/bg/title/mint_sp.webp");
		}
		#title.sakura{
			background-image: url("../images/ui/bg/title/sakura_sp.webp");
		}
		#title.lemon{
			background-image: url("../images/ui/bg/title/lemon_sp.webp");
		}
		#title.orange{
			background-image: url("../images/ui/bg/title/orange_sp.webp");
		}
			#title span:nth-of-type(1){
				font-size: calc( 35 var(--remBase) );
				line-height: calc( 65 / 35 );;
			}
			#title span:nth-of-type(2) , #title span.main-title{
				font-size: calc( 60 var(--remBase) );
				line-height: calc( 65 / 60 );;
			}
			#title i{
				font-size: calc( 35 var(--remBase) );
				line-height: 1;
                font-style: normal;
                display: block;
                text-align: center
			}
	}
@media print,screen and (min-width: 751px){
#title{
		margin-top: calc( 14 var(--remBase) );
		height: calc( 220 var(--remBase) )
}
		#title.pink{
			background-image: url("../images/ui/bg/title/pink_pc.webp");
		}
		#title.pink2{
			background-image: url("../images/ui/bg/title/pink2_pc.webp");
		}
		#title.cream{
			background-image: url("../images/ui/bg/title/cream_pc.webp");
		}
		#title.green{
			background-image: url("../images/ui/bg/title/green_pc.webp");
		}
		#title.mint{
			background-image: url("../images/ui/bg/title/mint_pc.webp");
		}
		#title.sakura{
			background-image: url("../images/ui/bg/title/sakura_pc.webp");
		}
		#title.lemon{
			background-image: url("../images/ui/bg/title/lemon_pc.webp");
		}
		#title.orange{
			background-image: url("../images/ui/bg/title/orange_pc.webp");
		}
			#title span:nth-of-type(1){
				font-size: calc( 30 var(--remBase) );;
				line-height: 2;
			}
			#title span:nth-of-type(2) , #title b , #title span.main-title{
				font-size: calc( 45 var(--remBase) );;
				line-height: calc( 60 / 45 );;
			}
			#title i{
				font-size: calc( 24 var(--remBase) );;
				line-height: 1;
                display: block;
                font-style: normal;
                text-align: center;
			}
	}
#titleSingle{
	background-repeat: repeat-x;
	background-position: center top;
	display: grid;
	justify-content: center;
	align-content: center;
	color:#5c5754;
	font-weight: 700;
}
@media screen and (max-width: 750px){
    #titleSingle{
		height: calc( 224 var(--remBase) );
		font-size: calc( 60 var(--remBase) );
		line-height: calc( 65 / 60 );
    }
		#titleSingle.sky{
			background-image: url("../images/ui/bg/title/sky_sp.webp");
		}
		#titleSingle.sakura{
			background-image: url("../images/ui/bg/title/sakura_sp.webp");
		}
		#titleSingle.grape{
			background-image: url("../images/ui/bg/title/grape_sp.webp");
		}
		#titleSingle.lemon{
			background-image: url("../images/ui/bg/title/lemon_sp.webp");
		}
		#titleSingle.mint{
			background-image: url("../images/ui/bg/title/mint_sp.webp");
		}
	}
@media print,screen and (min-width: 751px){
#titleSingle{
		margin-top: calc( 14 var(--remBase) );
		height: calc( 220 var(--remBase) );
		font-size: calc( 45 var(--remBase) );
		line-height: calc( 60 / 45 );
}
		#titleSingle.sky{
			background-image: url("../images/ui/bg/title/sky_pc.webp");
		}
		#titleSingle.sakura{
			background-image: url("../images/ui/bg/title/sakura_pc.webp");
		}
		#titleSingle.grape{
			background-image: url("../images/ui/bg/title/grape_pc.webp");
		}
		#titleSingle.lemon{
			background-image: url("../images/ui/bg/title/lemon_pc.webp");
		}
		#titleSingle.mint{
			background-image: url("../images/ui/bg/title/mint_pc.webp");
		}
}
@media screen and (max-width: 750px){
    .img-radius {
        border-radius:  calc( 6 var( --remBase ) );
    }
}
@media print,screen and (min-width: 751px){
    .img-radius {
        border-radius:  calc( 6 var( --remBase ) );
    }
}
#main section p a , #main #content p a {
    text-decoration: underline;
    color: steelblue;
}
        #main section p a:hover {
            color: #333;
            text-decoration: none;
        }
.f-maru {
        font-family: var(--fontFamilyMal);
}