@charset "UTF-8";

/* --------------------------------------------
NEWS
--------------------------------------------- */
#news li a{
	display : grid;
	align-items : start;
	justify-content : start;
}
#news li a :where( time , h2 ){
	letter-spacing : .1em;
}
#news li a h2{
	font-weight : 400;
}
@media screen and ( max-width : 750px ){
	#news{
		padding-top : calc( ( 53 - 2.6 ) var( --remBase ) );
		padding-bottom : calc( 64 var( --remBase ) );
		background-color : var( --bgBlue );
	}
	#news li a{
		grid-template-columns : calc( 186 var( --percentBase ) ) auto;
	}
	#news li a :where( time , h2 ){
		font-size : 2.6rem;
		line-height : 1.2;
	}
	#news .link01{
		margin-top : calc( ( 54 - 2.6 ) var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#news{
		display : grid;
		grid-template-columns : 1fr calc( 290 var( --percentBase ) );
		align-items : start;
		justify-content : space-between;
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#news li a{
		grid-template-columns : calc( 116 * 100% / 710 ) auto;
		padding-block : calc( ( 17 - 1.6 ) var( --remBase ) );
	}
	#news li a :where( time , h2 ){
		font-size : 1.6rem;
		line-height : 1.2;
	}
}

/* --------------------------------------------
WORRY
--------------------------------------------- */
#worry{
	position : relative;
	overflow-x : clip;
}
#worry h2{
	font-weight : 400;
	font-feature-settings : normal;
	line-height : 1.75;
	letter-spacing : .22em;
	writing-mode : vertical-rl;
}
#worry h2 em{
	line-height : 1.75;
	color : var( --blue );
}
#worry h2::after{
	position : absolute;
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/home/worry/dog.webp" ) center / contain no-repeat;
}
#worry li{
	position : absolute;
	z-index : 0;
	text-align : center;
	text-indent : .22em;
	letter-spacing : .22em;
	background-repeat : no-repeat;
	background-position : center;
	background-size : contain;
}
#worry li:nth-of-type( 1 )::after , #worry li:nth-of-type( 2 )::after , #worry li:nth-of-type( 3 )::after{
	position : absolute;
	z-index : 1;
	display : block;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : center;
	background-size : contain;
}
#worry li:nth-of-type( 1 )::after{
	background-image : url( "../images/ui/icon/silhouette/bark01.webp" );
}
#worry li:nth-of-type( 2 )::after{
	background-image : url( "../images/ui/icon/silhouette/bark02.webp" );
}
#worry li:nth-of-type( 3 )::after{
	background-image : url( "../images/ui/icon/silhouette/bark03.webp" );
}
@media screen and ( max-width : 750px ){
	#worry{
		padding-top : calc( 104 var( --remBase ) );
		padding-bottom : calc( 1193 var( --remBase ) );
	}
	#worry::before{
		position : absolute;
		top : calc( 325 var( --remBase ) );
		left : calc( 168 var( --viewportBase ) );
		z-index : -1;
		display : block;
		width : calc( 373 var( --viewportBase ) );
		height : calc( 365 var( --remBase ) );
		font-size : 0;
		content : "";
		background : url( "../images/home/worry/bg01_sp.svg" ) center / contain no-repeat;
		background-repeat : no-repeat;
		background-position : center;
		background-size : contain;
	}
	#worry h2{
		margin-inline : auto;
		margin-left : calc( ( 283 - ( 66 * .375 ) ) var( --percentBase ) );
		font-size : 3rem;
		white-space : pre;
	}
	#worry h2 em{
		font-size : 6.6rem;
	}
	#worry h2::after{
		top : calc( 574 var( --remBase ) );
		left : calc( 150 var( --viewportBase ) );
		width : calc( 336 var( --viewportBase ) );
		height : calc( 118 var( --remBase ) );
	}
	#worry li{
		font-size : 3rem;
		line-height : 1.5;
	}
	#worry li:nth-child( 1 ){
		top : calc( 702 var( --remBase ) );
		left : calc( 441 var( --viewportBase ) );
		z-index : 4;
		width : calc( 301 var( --viewportBase ) );
		height : calc( 290 var( --remBase ) );
		padding-top : calc( ( 126 - 7.5 ) var( --remBase ) );
		background-image : url( "../images/home/worry/bg_list01_sp.svg" );
	}
	#worry li:nth-child( 1 )::after{
		top : calc( 205 var( --remBase ) );
		left : calc( 33 * 100% / 301 );
		width : calc( 256 * 100% / 301 );
		height : calc( 220 var( --remBase ) );
	}
	#worry li:nth-child( 2 ){
		top : calc( 772 var( --remBase ) );
		left : calc( 8 var( --viewportBase ) );
		z-index : 3;
		width : calc( 319 var( --viewportBase ) );
		height : calc( 308 var( --remBase ) );
		padding-top : calc( ( 102 - 7.5 ) var( --remBase ) );
		background-image : url( "../images/home/worry/bg_list02_sp.svg" );
	}
	#worry li:nth-child( 2 )::after{
		top : calc( 235 var( --remBase ) );
		left : calc( 88 * 100% / 319 );
		width : calc( 150 * 100% / 319 );
		height : calc( 130 var( --remBase ) );
	}
	#worry li:nth-child( 3 ){
		top : calc( 976 var( --remBase ) );
		left : calc( 193 var( --viewportBase ) );
		z-index : 2;
		width : calc( 357 var( --viewportBase ) );
		height : calc( 344 var( --remBase ) );
		padding-top : calc( ( 94 - 7.5 ) var( --remBase ) );
		background-image : url( "../images/home/worry/bg_list03_sp.svg" );
	}
	#worry li:nth-child( 3 )::after{
		top : calc( 268 var( --remBase ) );
		left : calc( 165 * 100% / 357 );
		width : calc( 189 * 100% / 357 );
		height : calc( 147 var( --remBase ) );
	}
	#worry li:nth-child( 4 ){
		top : calc( 1303 var( --remBase ) );
		left : calc( 444 var( --viewportBase ) );
		width : calc( 283 var( --viewportBase ) );
		height : calc( 272 var( --remBase ) );
		padding-top : calc( ( 94 - 7.5 ) var( --remBase ) );
		background-image : url( "../images/home/worry/bg_list04_sp.svg" );
	}
	#worry li:nth-child( 5 ){
		top : calc( 1349 var( --remBase ) );
		left : calc( 58 var( --viewportBase ) );
		width : calc( 317 var( --viewportBase ) );
		height : calc( 305 var( --remBase ) );
		padding-top : calc( ( 100 - 7.5 ) var( --remBase ) );
		background-image : url( "../images/home/worry/bg_list05_sp.svg" );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#worry{
		padding-top : calc( 120 var( --remBase ) );
		padding-bottom : calc( 287 var( --remBase ) );
	}
	#worry::before , #worry::after{
		position : absolute;
		z-index : -1;
		display : block;
		font-size : 0;
		content : "";
		background-repeat : no-repeat;
		background-position : center;
		background-size : contain;
	}
	#worry::before{
		top : 0;
		left : calc( 50% + ( 319 var( --remBase ) ) );
		width : calc( 300 var( --remBase ) );
		height : calc( 290 var( --remBase ) );
		background-image : url( "../images/home/worry/bg01_pc.svg" );
	}
	#worry::after{
		top : calc( 155 var( --remBase ) );
		left : calc( 50% - ( 576 var( --remBase ) ) );
		width : calc( 373 var( --remBase ) );
		height : calc( 365 var( --remBase ) );
		background-image : url( "../images/home/worry/bg01_pc.svg" );
	}
	#worry h2{
		margin-left : calc( ( 102 - ( .375 * 46 ) ) var( --percentBase ) );
		font-size : 2.6rem;
	}
	#worry h2 em{
		font-size : 4.6rem;
	}
	#worry h2::after{
		top : calc( 487 var( --remBase ) );
		left : calc( 50% - ( 584 var( --remBase ) ) );
		width : calc( 336 var( --remBase ) );
		height : calc( 118 var( --remBase ) );
	}
	#worry ul::before{
		position : absolute;
		top : calc( 281 var( --remBase ) );
		left : calc( 50% + ( 138 var( --remBase ) ) );
		z-index : -1;
		display : block;
		width : calc( 177 var( --remBase ) );
		height : calc( 173 var( --remBase ) );
		font-size : 0;
		content : "";
		background : url( "../images/home/worry/bg03_pc.svg" ) center / contain no-repeat;
	}
	#worry li{
		font-size : 1.8rem;
		line-height : calc( 30 / 18 );
	}
	#worry li:nth-child( 1 ){
		top : calc( 31 var( --remBase ) );
		left : calc( 50% + ( 250 var( --remBase ) ) );
		width : calc( 201 var( --remBase ) );
		height : calc( 194 var( --remBase ) );
		padding-top : calc( ( 86 - 6 ) var( --remBase ) );
		background-image : url( "../images/home/worry/bg_list01_pc.svg" );
	}
	#worry li:nth-child( 1 )::after{
		top : calc( 157 var( --remBase ) );
		left : calc( 41 * 100% / 201 );
		width : calc( 171 * 100% / 201 );
		height : calc( 147 var( --remBase ) );
	}
	#worry li:nth-child( 2 ){
		top : calc( 116 var( --remBase ) );
		left : calc( 50% - ( 124 var( --remBase ) ) );
		width : calc( 213 var( --remBase ) );
		height : calc( 206 var( --remBase ) );
		padding-top : calc( ( 70 - 6 ) var( --remBase ) );
		background-image : url( "../images/home/worry/bg_list02_pc.svg" );
	}
	#worry li:nth-child( 2 )::after{
		top : calc( 134 var( --remBase ) );
		left : calc( -39 * 100% / 213 );
		width : calc( 100 * 100% / 213 );
		height : calc( 89 var( --remBase ) );
	}
	#worry li:nth-child( 3 ){
		top : calc( 215 var( --remBase ) );
		left : calc( 50% + ( 40 var( --remBase ) ) );
		width : calc( 238 var( --remBase ) );
		height : calc( 230 var( --remBase ) );
		padding-top : calc( ( 64 - 6 ) var( --remBase ) );
		background-image : url( "../images/home/worry/bg_list03_pc.svg" );
	}
	#worry li:nth-child( 3 )::after{
		top : calc( 183 var( --remBase ) );
		left : calc( 49 * 100% / 238 );
		width : calc( 126 * 100% / 238 );
		height : calc( 98 var( --remBase ) );
	}
	#worry li:nth-child( 4 ){
		top : calc( 385 var( --remBase ) );
		left : calc( 50% + ( 203 var( --remBase ) ) );
		width : calc( 189 var( --remBase ) );
		height : calc( 182 var( --remBase ) );
		padding-top : calc( ( 64 - 6 ) var( --remBase ) );
		background-image : url( "../images/home/worry/bg_list04_pc.svg" );
	}
	#worry li:nth-child( 5 ){
		top : calc( 382 var( --remBase ) );
		left : calc( 50% - ( 158 var( --remBase ) ) );
		width : calc( 211 var( --remBase ) );
		height : calc( 204 var( --remBase ) );
		padding-top : calc( ( 71 - 6 ) var( --remBase ) );
		background-image : url( "../images/home/worry/bg_list05_pc.svg" );
	}
}
#worry.animation em{
	display : inline-block;
	animation-duration : .9s;
	animation-delay : 1.2s;
}
#worry.animation li{
	opacity : 0;
	transition-timing-function : ease;
	transition-duration : .3s;
	transition-property : opacity , scale;
	scale : 80%;
}
#worry.animation li:nth-child( 1 ){
	transition-delay : 0s;
}
#worry.animation li:nth-child( 2 ){
	transition-delay : .3s;
}
#worry.animation li:nth-child( 3 ){
	transition-delay : .6s;
}
#worry.animation li:nth-child( 4 ){
	transition-delay : .9s;
}
#worry.animation li:nth-child( 5 ){
	transition-delay : 1.2s;
}
#worry.animation.is-animation em{
	animation-name : scaleUpDown;
}
#worry.animation.is-animation li{
	opacity : 1;
	scale : 100%;
}
@keyframes scaleUpDown{
	0%{
		scale : 1;
	}
	50%{
		scale : .8;
	}
	100%{
		scale : 1;
	}
}

/* --------------------------------------------
AIM
--------------------------------------------- */
#aim{
	background-repeat : no-repeat;
	background-position : center top;
}
#aim p{
	letter-spacing : .22em;
}
@media screen and ( max-width : 750px ){
	#aim{
		height : calc( 710 var( --remBase ) + var( --headerHeight ) );
		padding-top : calc( ( 87 - 17 ) var( --remBase ) );
		background-image : url( "../images/home/aim/bg_sp.webp" );
		background-size : contain;
	}
	#aim p{
		margin-left : calc( 200 var( --percentBase ) );
		font-size : 3.6rem;
		line-height : calc( 70 / 36 );
		color : white;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#aim{
		height : calc( 672 var( --remBase ) );
		padding-top : calc( ( 229 - 15 ) var( --remBase ) );
		background-image : url( "../images/home/aim/bg_pc.webp" );
		background-size : auto 100%;
	}
	#aim p{
		margin-left : calc( 597 var( --percentBase ) );
		font-size : 3rem;
		line-height : 2;
	}
}

/* --------------------------------------------
TITLE HOME
--------------------------------------------- */
.title-home{
	font-weight : 500;
	color : #56c1c8;
	letter-spacing : .2em;
}
.title-home::before{
	display : block;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : center;
	background-size : contain;
}
@media screen and ( max-width : 750px ){
	.title-home{
		font-size : 2.6rem;
	}
}
@media print , screen and ( min-width : 750.02px ){
	.title-home{
		display : grid;
		align-items : baseline;
		justify-content : space-between;
		justify-content : start;
		font-size : 1.6rem;
	}
}

/* --------------------------------------------
ABOUT
--------------------------------------------- */
#about{
	position : relative;
	overflow-x : clip;
}
#about h2::before{
	background-image : url( "../images/home/about/title.svg" );
}
#about picture{
	position : absolute;
}
#about picture img{
	width : 100%;
	height : auto;
}
#about p{
	font-weight : 500;
	letter-spacing : .2em;
}
@media screen and ( max-width : 750px ){
	#about{
		padding-top : calc( 155 var( --remBase ) );
		padding-bottom : calc( 200 var( --remBase ) );
	}
	#about h2::before{
		width : calc( 384 var( --percentBase ) );
		height : calc( 128 var( --remBase ) );
		margin-bottom : calc( 37 var( --remBase ) );
	}
	#about picture{
		top : calc( 422 var( --remBase ) );
		left : 0;
	}
	#about picture img{
		height : calc( 470 var( --remBase ) );
	}
	#about p{
		font-size : 2.6rem;
		line-height : calc( 70 / 26 );
	}
	#about picture + p{
		margin-top : calc( ( 614 - 22 ) var( --remBase ) );
	}
	#about p + p{
		margin-top : calc( 30 var( --remBase ) );
	}
	#about .link01{
		margin-top : calc( ( 78 - 22 ) var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#about{
		padding-top : calc( 145 var( --remBase ) );
		padding-bottom : calc( 219 var( --remBase ) );
	}
	#about h2{
		grid-template-columns : calc( 384 var( --percentBase ) ) auto;
		column-gap : calc( 12 var( --percentBase ) );
	}
	#about h2::before{
		height : calc( 127 var( --remBase ) );
	}
	#about picture{
		top : calc( 474 var( --remBase ) );
		left : 50%;
	}
	#about p{
		font-size : 1.6rem;
		line-height : calc( 50 / 16 );
	}
	#about picture + p{
		margin-top : calc( ( 140 - 17 ) var( --remBase ) );
	}
	#about p + p{
		margin-top : calc( 20 var( --remBase ) );
	}
	#about .link01{
		width : calc( 290 var( --percentBase ) );
		margin-top : calc( ( 71 - 17 ) var( --remBase ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1400px ){
	#about picture{
		width : calc( 700 * 100% / 1000 );
	}
}
@media screen and ( min-width : 1400.02px ){
	#about picture{
		width : 700px;
	}
}

/* --------------------------------------------
MENU
--------------------------------------------- */
#menu h2::before{
	background-image : url( "../images/home/menu/title.svg" );
}
#menu .pics{
	position : relative;
}
#menu .pics::before , #menu .pics::after{
	position : absolute;
	z-index : 1;
	display : block;
	content : "";
	border-radius : 50%;
	opacity : 0;
	transition : opacity var( --transitionBase );
}
#menu .pics::before{
	background-color : transparent;
	border-color : var( --blue );
	border-style : solid;
	animation : pointer 1s linear infinite;
}
#menu .pics::after{
	background-color : var( --blue );
}
#menu .pics picture{
	position : relative;
}
#menu .pics picture::before , #menu .pics picture::after{
	position : absolute;
	display : block;
	content : "";
	border-radius : 50%;
	transition : translate var( --transitionBase );
}
#menu .pics picture::before{
	background-color : transparent;
	border-color : var( --blue );
	border-style : solid;
	animation : pointer 1s linear infinite;
}
#menu .pics picture::after{
	background-color : var( --blue );
}
#menu .pics p{
	color : #666;
	letter-spacing : .1em;
}
#menu[data-index="1"] .pics{
	position : relative;
}
#menu[data-index="1"] .pics::before , #menu[data-index="1"] .pics::after{
	opacity : 1;
}
#menu path{
	transition : fill var( --transitionBase );
}
#menu[data-index="2"] #floorTrimming{
	fill : var( --blue );
}
#menu[data-index="3"] #floorHotel{
	fill : var( --blue );
}
@media screen and ( max-width : 750px ){
	#menu{
		padding-bottom : calc( 210 var( --remBase ) );
	}
	#menu h2::before{
		width : calc( 349 var( --percentBase ) );
		height : calc( 125 var( --remBase ) );
		margin-bottom : calc( 37 var( --remBase ) );
	}
	#menu #controller{
		margin-top : calc( ( 121 - 8 ) var( --remBase ) );
	}
	#menu .box{
		margin-top : calc( 105 var( --remBase ) );
	}
	#menu .pics::before , #menu .pics::after{
		translate : calc( ( 105 + 130 ) var( --remBase ) ) calc( 258 var( --remBase ) );
	}
	#menu .pics::before{
		top : 0;
		left : 0;
		width : calc( 18 var( --percentBase ) );
		height : calc( 18 var( --remBase ) );
		border-width : 1px;
	}
	#menu .pics::after{
		top : calc( 3 var( --remBase ) );
		left : calc( 3 var( --percentBase ) );
		width : calc( 12 var( --percentBase ) );
		height : calc( 12 var( --remBase ) );
	}
	#menu .pics picture{
		width : calc( 410 var( --percentBase ) );
		margin-inline : auto;
	}
	#menu .pics picture img{
		width : 100%;
		height : auto;
	}
	#menu .pics picture::before{
		top : 0;
		left : 0;
		width : calc( 18 * 100% / 410 );
		height : calc( 18 var( --remBase ) );
		border-width : 1px;
	}
	#menu .pics picture::after{
		top : calc( 3 var( --remBase ) );
		left : calc( 3 * 100% / 410 );
		width : calc( 12 * 100% / 410 );
		height : calc( 12 var( --remBase ) );
	}
	#menu .pics p{
		margin-top : calc( 25 var( --remBase ) );
		font-size : 2.6rem;
	}
	#menu #tabs{
		margin-top : calc( 105 var( --remBase ) );
	}
	#menu[data-index="1"] picture::before , #menu[data-index="1"] picture::after{
		translate : calc( 203 var( --remBase ) ) calc( 73 var( --remBase ) );
	}
	#menu[data-index="2"] picture::before , #menu[data-index="2"] picture::after{
		translate : calc( 303 var( --remBase ) ) calc( 136 var( --remBase ) );
	}
	#menu[data-index="3"] picture::before , #menu[data-index="3"] picture::after{
		translate : calc( 297 var( --remBase ) ) calc( 335 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#menu{
		padding-bottom : calc( 130 var( --remBase ) );
	}
	#menu h2{
		grid-template-columns : calc( 349 var( --percentBase ) ) auto;
		column-gap : calc( 24 var( --percentBase ) );
	}
	#menu h2::before{
		height : calc( 126 var( --remBase ) );
	}
	#menu #controller{
		margin-top : calc( ( 80 - 4 ) var( --remBase ) );
	}
	#menu .box{
		display : grid;
		grid-template-columns : calc( 410 var( --percentBase ) ) 1fr;
		column-gap : calc( 74 var( --percentBase ) );
		align-items : start;
		margin-top : calc( 60 var( --remBase ) );
	}
	#menu .pics{
		grid-row : 1;
		grid-column : 1;
	}
	#menu .pics::before , #menu .pics::after{
		translate : calc( 105 var( --remBase ) ) calc( 258 var( --remBase ) );
	}
	#menu .pics::before{
		top : 0;
		left : 0;
		width : calc( 18 * 100% / 410 );
		height : calc( 18 var( --remBase ) );
		border-width : 1px;
	}
	#menu .pics::after{
		top : calc( 3 var( --remBase ) );
		left : calc( 3 * 100% / 410 );
		width : calc( 12 * 100% / 410 );
		height : calc( 12 var( --remBase ) );
	}
	#menu .pics picture::before{
		top : 0;
		left : 0;
		width : calc( 18 * 100% / 410 );
		height : calc( 18 var( --remBase ) );
		border-width : 1px;
	}
	#menu .pics picture::after{
		top : calc( 3 var( --remBase ) );
		left : calc( 3 * 100% / 410 );
		width : calc( 12 * 100% / 410 );
		height : calc( 12 var( --remBase ) );
	}
	#menu .pics p{
		margin-top : calc( 17 var( --remBase ) );
		font-size : 1.4rem;
	}
	#menu[data-index="1"] picture::before , #menu[data-index="1"] picture::after{
		translate : calc( 203 var( --remBase ) ) calc( 73 var( --remBase ) );
	}
	#menu[data-index="2"] picture::before , #menu[data-index="2"] picture::after{
		translate : calc( 303 var( --remBase ) ) calc( 136 var( --remBase ) );
	}
	#menu[data-index="3"] picture::before , #menu[data-index="3"] picture::after{
		translate : calc( 297 var( --remBase ) ) calc( 335 var( --remBase ) );
	}
}
@keyframes pointer{
	to{
		scale : 1.8;
	}
}
.tabButtons{
	display : grid;
	align-items : center;
	justify-content : center;
}
.tabButtons li{
	position : relative;
	display : block;
	display : grid;
	grid-auto-flow : column;
	align-content : end;
	justify-content : center;
	width : 100%;
	height : 100%;
	font-weight : 500;
	transition : color var( --transitionBase ) , background-color var( --transitionBase );
}
.tabButtons li.is-active{
	color : var( --blue );
}
.tabButtons li::after{
	position : absolute;
	bottom : 0;
	left : 0;
	display : block;
	width : 100%;
	content : "";
	background-repeat : repeat-x;
	background-position : center bottom;
}
@media screen and ( max-width : 750px ){
	.tabButtons{
		grid-template-columns : repeat( auto-fit , calc( 212 var( --percentBase ) ) );
		column-gap : calc( 17 var( --percentBase ) );
	}
	.tabButtons li{
		padding-bottom : calc( ( 24 - 8 ) var( --remBase ) );
		font-size : 2.4rem;
		line-height : calc( 40 / 24 );
		text-align : center;
		text-indent : .1em;
		letter-spacing : .1em;
	}
	.tabButtons li::after{
		height : calc( 2 var( --remBase ) );
		background-image : linear-gradient( to right , currentColor , currentColor calc( 2 var( --remBase ) ) , transparent calc( 2 var( --remBase ) ) , transparent calc( 6 var( --remBase ) ) );
		background-size : calc( 6 var( --remBase ) ) calc( 2 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.tabButtons{
		grid-template-columns : repeat( auto-fit , calc( 212 var( --percentBase ) ) );
		column-gap : calc( 100 var( --percentBase ) );
	}
	.tabButtons li{
		padding-bottom : calc( ( 17 - 4 ) var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.5;
		text-align : center;
		text-indent : .2em;
		letter-spacing : .2em;
	}
	.tabButtons li::after{
		height : calc( 2 var( --remBase ) );
		background-image : linear-gradient( to right , currentColor , currentColor calc( 2 var( --remBase ) ) , transparent calc( 2 var( --remBase ) ) , transparent calc( 6 var( --remBase ) ) );
		background-size : calc( 6 var( --remBase ) ) calc( 2 var( --remBase ) );
	}
}
@media ( hover : hover ){
	.tabButtons li:hover{
		color : var( --blue );
	}
}
.tabs h3{
	letter-spacing : .2em;
}
.tabs p{
	font-family : "Noto Sans JP" , sans-serif;
	letter-spacing : .1em;
}
@media screen and ( max-width : 750px ){
	.tabs h3{
		font-size : 4rem;
	}
	.tabs h3 + p{
		margin-top : calc( ( 60 - 17 ) var( --remBase ) );
	}
	.tabs p{
		font-size : 2.6rem;
		line-height : calc( 60 / 26 );
	}
	.tabs .link01{
		margin-top : calc( ( 55 - 17 ) var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.tabs h3{
		font-size : 3rem;
	}
	.tabs h3 + p{
		margin-top : calc( ( 94 - 12 ) var( --remBase ) );
	}
	.tabs p{
		font-size : 1.6rem;
		line-height : 2.5;
	}
	.tabs .link01{
		width : calc( 290 * 100% / 516 );
		margin-top : calc( ( 29 - 12 ) var( --remBase ) );
		margin-left : auto;
	}
}
#dots{
	font-size : 0;
}
#dots .splide__arrow{
	position : absolute;
	display : block;
	font-size : 0;
}
@media screen and ( max-width : 750px ){
	#dots{
		width : 100%;
		margin-top : calc( 164 var( --remBase ) );
	}
	#dots .splide__slide{
		margin-inline : calc( 10.5 var( --viewportBase ) );
	}
	#dots .splide__slide img{
		height : calc( 466 var( --remBase ) );
	}
	#dots .splide__arrow{
		top : calc( 194.5 var( --remBase ) );
	}
	#dots .splide__arrow img{
		height : calc( 77 var( --remBase ) );
	}
	#dots .prev{
		left : calc( 10 var( --viewportBase ) );
	}
	#dots .next{
		right : calc( 10 var( --viewportBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#dots{
		margin-top : calc( 59 var( --remBase ) );
	}
	#dots .splide__slide{
		margin-inline : calc( .5px );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1400px ){
	#dots{
		width : 100%;
	}
	#dots .splide__slide img{
		height : calc( 466 * 100vw / 1400 );
	}
	#dots .splide__arrow{
		top : calc( 203 * 100vw / 1400 );
	}
	#dots .splide__arrow img{
		height : calc( 60 * 100vw / 1400 );
	}
	#dots .prev{
		left : calc( 32 * 100% / 1400 );
	}
	#dots .next{
		right : calc( 32 * 100% / 1400 );
	}
}
@media screen and ( min-width : 1400.02px ){
	#dots{
		width : 1400px;
		margin-inline : auto;
	}
	#dots .splide__slide img{
		height : 466px;
	}
	#dots .splide__arrow{
		top : 203px;
	}
	#dots .splide__arrow img{
		height : 60px;
	}
	#dots .prev{
		left : 32px;
	}
	#dots .next{
		right : 32px;
	}
}

/* --------------------------------------------
SERVICE
--------------------------------------------- */
#service h2::before{
	background-image : url( "../images/home/service/title.svg" );
}
#service a{
	position : relative;
	display : block;
	overflow : hidden;
}
#service a::before{
	position : absolute;
	top : 0;
	left : 0;
	z-index : -1;
	display : block;
	width : 100%;
	height : 100%;
	content : "";
	background-repeat : no-repeat;
	background-position : center;
	background-size : contain;
	transition : opacity var( --transitionBase );
}
#service h3{
	font-weight : 500;
	color : #fff;
	text-align : center;
	text-indent : .2em;
	letter-spacing : .2em;
}
#service span{
	position : relative;
	display : grid;
	place-items : center;
	margin-inline : auto;
	font-weight : 500;
	color : white;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
	background-color : var( --blue );
	border-radius : 100vmax;
	transition : color var( --transitionBase ) , background var( --transitionBase );
}
#service span::after{
	position : absolute;
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/ui/arrow/black/right01.svg" ) center / contain no-repeat;
	filter : var( --filterWhite );
	transition : filter var( --transitionBase );
}
@media screen and ( max-width : 750px ){
	#service{
		padding-bottom : calc( 172 var( --remBase ) );
	}
	#service h2::before{
		width : calc( 401 var( --percentBase ) );
		height : calc( 125 var( --remBase ) );
		margin-bottom : calc( 40 var( --remBase ) );
	}
	#service ul{
		margin-top : calc( 80 var( --remBase ) );
	}
	#service li + li{
		margin-top : calc( 2 var( --remBase ) );
	}
	#service a{
		font-size : 4.6rem;
	}
	#service span{
		width : calc( 580 var( --viewportBase ) );
		height : calc( 80 var( --remBase ) );
		margin-top : calc( 20 var( --remBase ) );
		font-size : 2.6rem;
	}
	#service span::after{
		top : calc( 35 var( --remBase ) );
		right : calc( 34 * 100% / 580 );
		width : calc( 45 * 100% / 580 );
		height : calc( 10 var( --remBase ) );
	}
	#service li:nth-child( 1 ) a , #service li:nth-child( 4 ) a{
		height : calc( 600 var( --remBase ) );
	}
	#service li:not( :nth-child( 1 ), :nth-child( 4 ) ) a{
		height : calc( 339 var( --remBase ) );
	}
	#service li:nth-child( 1 ) a{
		padding-top : calc( 260 var( --remBase ) );
		background-image : url( "../images/ui/icon/white/calendar.svg" );
		background-position : center calc( 192 var( --remBase ) );
		background-size : auto calc( 47 var( --remBase ) );
	}
	#service li:nth-child( 1 ) a::before{
		background-image : url( "../images/home/service/bg01_sp.webp" );
	}
	#service li:nth-child( 2 ) a{
		padding-top : calc( 137 var( --remBase ) );
		background-image : url( "../images/ui/icon/white/mappin.svg" );
		background-position : center calc( 66 var( --remBase ) );
		background-size : auto calc( 52 var( --remBase ) );
	}
	#service li:nth-child( 2 ) a::before{
		background-image : url( "../images/home/service/bg02_sp.webp" );
	}
	#service li:nth-child( 3 ) a{
		padding-top : calc( 136 var( --remBase ) );
		background-image : url( "../images/ui/icon/white/price.svg" );
		background-position : center calc( 65 var( --remBase ) );
		background-size : auto calc( 53 var( --remBase ) );
	}
	#service li:nth-child( 3 ) a::before{
		background-image : url( "../images/home/service/bg03_sp.webp" );
	}
	#service li:nth-child( 4 ) a{
		padding-top : calc( 260 var( --remBase ) );
		background-image : url( "../images/ui/icon/white/info.svg" );
		background-position : center calc( 198 var( --remBase ) );
		background-size : auto calc( 44 var( --remBase ) );
	}
	#service li:nth-child( 4 ) a::before{
		background-image : url( "../images/home/service/bg04_sp.webp" );
	}
	#service li:nth-child( 5 ) a{
		padding-top : calc( 137 var( --remBase ) );
		background-image : url( "../images/ui/icon/white/cart.svg" );
		background-position : center calc( 68 var( --remBase ) );
		background-size : auto calc( 49 var( --remBase ) );
	}
	#service li:nth-child( 5 ) a::before{
		background-image : url( "../images/home/service/bg05_sp.webp" );
	}
	#service li:nth-child( 6 ) a{
		padding-top : calc( 136 var( --remBase ) );
		background-image : url( "../images/ui/icon/white/mail.svg" );
		background-position : center calc( 73 var( --remBase ) );
		background-size : auto calc( 37 var( --remBase ) );
	}
	#service li:nth-child( 6 ) a::before{
		background-image : url( "../images/home/service/bg06_sp.webp" );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#service{
		padding-bottom : calc( 115 var( --remBase ) );
	}
	#service h2{
		grid-template-columns : calc( 400 var( --percentBase ) ) auto;
		column-gap : calc( 16 var( --percentBase ) );
	}
	#service h2::before{
		height : calc( 126 var( --remBase ) );
	}
	#service ul{
		display : grid;
		margin-top : calc( 67 var( --remBase ) );
	}
	#service a{
		height : 100%;
	}
	#service span::after{
		right : calc( 34 * 100% / 390 );
		width : calc( 29 * 100% / 390 );
	}
	#service li:nth-child( 1 ) span , #service li:nth-child( 4 ) span{
		width : calc( 390 * 100% / 804 );
	}
	#service li:not( :nth-child( 1 ), :nth-child( 4 ) ) span{
		width : calc( 390 * 100% / 594 );
	}
	#service li:nth-child( 1 ){
		grid-row : 1/3;
		grid-column : 1/3;
	}
	#service li:nth-child( 1 ) a::before{
		background-image : url( "../images/home/service/bg01_pc.webp" );
	}
	#service li:nth-child( 1 ) a{
		background-image : url( "../images/ui/icon/white/calendar.svg" );
	}
	#service li:nth-child( 2 ){
		grid-row : 1;
		grid-column : 3;
	}
	#service li:nth-child( 2 ) a::before{
		background-image : url( "../images/home/service/bg02_pc.webp" );
	}
	#service li:nth-child( 2 ) a{
		background-image : url( "../images/ui/icon/white/mappin.svg" );
	}
	#service li:nth-child( 3 ){
		grid-row : 2;
		grid-column : 3;
	}
	#service li:nth-child( 3 ) a::before{
		background-image : url( "../images/home/service/bg03_pc.webp" );
	}
	#service li:nth-child( 3 ) a{
		background-image : url( "../images/ui/icon/white/price.svg" );
	}
	#service li:nth-child( 4 ){
		grid-row : 3/5;
		grid-column : 2/4;
	}
	#service li:nth-child( 4 ) a::before{
		background-image : url( "../images/home/service/bg04_pc.webp" );
	}
	#service li:nth-child( 4 ) a{
		background-image : url( "../images/ui/icon/white/info.svg" );
	}
	#service li:nth-child( 5 ){
		grid-row : 3;
		grid-column : 1;
	}
	#service li:nth-child( 5 ) a::before{
		background-image : url( "../images/home/service/bg05_pc.webp" );
	}
	#service li:nth-child( 5 ) a{
		background-image : url( "../images/ui/icon/white/cart.svg" );
	}
	#service li:nth-child( 6 ){
		grid-row : 4;
		grid-column : 1;
	}
	#service li:nth-child( 6 ) a::before{
		background-image : url( "../images/home/service/bg06_pc.webp" );
	}
	#service li:nth-child( 6 ) a{
		background-image : url( "../images/ui/icon/white/mail.svg" );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1400px ){
	#service ul{
		grid-template-columns : calc( 594 * 100% / 1400 ) calc( 208 * 100% / 1400 ) calc( 594 * 100% / 1400 );
		grid-auto-rows : calc( 299 * 100vw / 1400 );
		row-gap : calc( 2 * 100vw / 1400 );
		column-gap : calc( 2 * 100% / 1400 );
		width : 100%;
	}
	#service a{
		font-size : calc( 30 * 100vw / 1400 );
	}
	#service span{
		height : calc( 60 * 100vw / 1400 );
		margin-top : calc( 31 * 100vw / 1400 );
		font-size : calc( 16 * 100vw / 1400 );
	}
	#service span::after{
		top : calc( 27 * 100vw / 1400 );
		height : calc( 6 * 100vw / 1400 );
	}
	#service li:nth-child( 1 ) a{
		padding-top : calc( 264 * 100vw / 1400 );
		background-position : center calc( 192 * 100vw / 1400 );
		background-size : auto calc( 47 * 100vw / 1400 );
	}
	#service li:nth-child( 2 ) a{
		padding-top : calc( 126 * 100vw / 1400 );
		background-position : center calc( 52 * 100vw / 1400 );
		background-size : auto calc( 52 * 100vw / 1400 );
	}
	#service li:nth-child( 3 ) a{
		padding-top : calc( 130 * 100vw / 1400 );
		background-position : center calc( 55 * 100vw / 1400 );
		background-size : auto calc( 53 * 100vw / 1400 );
	}
	#service li:nth-child( 4 ) a{
		padding-top : calc( 264 * 100vw / 1400 );
		background-position : center calc( 198 * 100vw / 1400 );
		background-size : auto calc( 50 * 100vw / 1400 );
	}
	#service li:nth-child( 5 ) a{
		padding-top : calc( 126 * 100vw / 1400 );
		background-position : center calc( 56 * 100vw / 1400 );
		background-size : auto calc( 49 * 100vw / 1400 );
	}
	#service li:nth-child( 6 ) a{
		padding-top : calc( 130 * 100vw / 1400 );
		background-position : center calc( 63 * 100vw / 1400 );
		background-size : auto calc( 37 * 100vw / 1400 );
	}
}
@media screen and ( min-width : 1400.02px ){
	#service ul{
		grid-template-columns : 594px 208px 594px;
		grid-auto-rows : 299px;
		row-gap : 2px;
		column-gap : 2px;
		width : 1400px;
		margin-inline : auto;
	}
	#service a{
		font-size : 30px;
	}
	#service span{
		height : 60px;
		margin-top : 31px;
		font-size : 16px;
	}
	#service span::after{
		top : 27px;
		height : 6px;
	}
	#service li:nth-child( 1 ) a{
		padding-top : 264px;
		background-position : center 192px;
		background-size : auto 47px;
	}
	#service li:nth-child( 2 ) a{
		padding-top : 126px;
		background-position : center 52px;
		background-size : auto 52px;
	}
	#service li:nth-child( 3 ) a{
		padding-top : 130px;
		background-position : center 55px;
		background-size : auto 53px;
	}
	#service li:nth-child( 4 ) a{
		padding-top : 264px;
		background-position : center 198px;
		background-size : auto 50px;
	}
	#service li:nth-child( 5 ) a{
		padding-top : 126px;
		background-position : center 56px;
		background-size : auto 49px;
	}
	#service li:nth-child( 6 ) a{
		padding-top : 130px;
		background-position : center 63px;
		background-size : auto 37px;
	}
}
@media ( hover : hover ){
	#service a:hover::before{
		opacity : .5;
	}
	#service a:hover span{
		color : #555;
		background-color : rgb( 67 186 199 / .5 );
	}
	#service a:hover span::after{
		filter : invert( 32% ) sepia( 0% ) saturate( 439% ) hue-rotate( 153deg ) brightness( 88% ) contrast( 77% );
	}
}

/* --------------------------------------------
INSTAGRAM
--------------------------------------------- */
#instagram h2::before{
	background-image : url( "../images/home/instagram/title.svg" );
}
#instagram ul{
	display : grid;
	font-size : 0;
}
#instagram ul li{
	aspect-ratio : 1;
}
#instagram ul a{
	position : relative;
	display : block;
	width : 100%;
	height : 100%;
}
#instagram ul a > svg{
	position : absolute;
	aspect-ratio : 1;
}
#instagram ul a > svg path{
	fill : white;
}
#instagram ul img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
@media screen and ( max-width : 750px ){
	#instagram{
		padding-bottom : calc( 207 var( --remBase ) );
	}
	#instagram h2::before{
		width : calc( 625 var( --percentBase ) );
		height : calc( 172 var( --remBase ) );
		margin-bottom : calc( -5 var( --remBase ) );
	}
	#instagram ul{
		display : grid;
		grid-template-columns : repeat( 3 , calc( 248 var( --viewportBase ) ) );
		row-gap : calc( 3 var( --remBase ) );
		column-gap : calc( 3 var( --viewportBase ) );
		margin-top : calc( 66 var( --remBase ) );
	}
	#instagram ul svg{
		top : calc( 8 var( --remBase ) );
		right : calc( 8 * 100% / 248 );
		width : calc( 15 * 100% / 248 );
	}
	#instagram .link01{
		margin-top : calc( 71 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#instagram{
		padding-bottom : calc( 90 var( --remBase ) );
	}
	#instagram h2{
		grid-template-columns : calc( 626 var( --percentBase ) ) auto;
		column-gap : calc( 21 var( --percentBase ) );
		align-items : end;
	}
	#instagram h2::before{
		height : calc( 173 var( --remBase ) );
		margin-bottom : calc( -48 var( --remBase ) );
	}
	#instagram ul{
		grid-template-columns : repeat( 5 , 1fr );
		margin-top : calc( ( 36 + 48 ) var( --remBase ) );
	}
	#instagram ul li:nth-child( n+6 ){
		display : none;
	}
	#instagram ul svg{
		top : calc( 8 var( --remBase ) );
		right : calc( 8 * 100% / 280 );
		width : calc( 15 * 100% / 280 );
	}
	#instagram .link01{
		width : calc( 290 var( --percentBase ) );
		margin-top : calc( 49 var( --remBase ) );
		margin-left : auto;
	}
}

/* --------------------------------------------
USEFUL
--------------------------------------------- */
#useful h2::before{
	background-image : url( "../images/home/useful/title.svg" );
}
#useful li a{
	display : block;
}
#useful time{
	display : block;
	font-weight : 500;
	color : #999;
	letter-spacing : .1em;
}
#useful h3{
	font-weight : 500;
	letter-spacing : .2em;
}
@media screen and ( max-width : 750px ){
	#useful{
		padding-bottom : calc( 203 var( --remBase ) );
	}
	#useful h2::before{
		width : calc( 466 var( --percentBase ) );
		height : calc( 127 var( --remBase ) );
		margin-bottom : calc( 39 var( --remBase ) );
	}
	#useful ul{
		margin-top : calc( 76 var( --remBase ) );
	}
	#useful li + li{
		margin-top : calc( ( 64 - ( 26 * .375 ) ) var( --remBase ) );
	}
	#useful picture img{
		width : 100%;
		height : auto;
	}
	#useful :where( time , h3 ){
		line-height : 1.75;
	}
	#useful time{
		margin-top : calc( ( 43 - ( 24 * .375 ) ) var( --remBase ) );
		font-size : 2.4rem;
	}
	#useful h3{
		font-size : 2.6rem;
	}
	#useful .link01{
		margin-top : calc( ( 103 - ( 26 * .375 ) ) var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#useful{
		padding-bottom : calc( 92 var( --remBase ) );
	}
	#useful h2{
		grid-template-columns : calc( 467 var( --percentBase ) ) auto;
		column-gap : calc( 16 var( --percentBase ) );
	}
	#useful h2::before{
		height : calc( 126 var( --remBase ) );
	}
	#useful ul{
		display : grid;
		grid-template-columns : repeat( 3 , 1fr );
		margin-top : calc( 85 var( --remBase ) );
	}
	#useful picture{
		width : 100%;
	}
	#useful picture img{
		width : 100%;
		height : 100%;
		object-fit : cover;
	}
	#useful :where( time , h3 ){
		padding-inline : calc( 37 * 100% / 468 );
		line-height : 1.75;
	}
	#useful .link01{
		width : calc( 290 var( --percentBase ) );
		margin-top : calc( ( 59 - ( 16 * .375 ) ) var( --remBase ) );
		margin-left : auto;
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1400px ){
	#useful ul{
		width : 100%;
	}
	#useful picture{
		height : calc( 351 * 100vw / 1400 );
	}
	#useful time{
		margin-top : calc( 29 * 100vw / 1400 - .375em );
		font-size : calc( 12 var( --remBase ) );
	}
	#useful h3{
		font-size : calc( 16 var( --remBase ) );
	}
}
@media screen and ( min-width : 1400.02px ){
	#useful ul{
		width : 1400px;
		margin-inline : auto;
	}
	#useful picture{
		height : 351px;
	}
	#useful time{
		margin-top : calc( 29px - .375em );
		font-size : 12px;
	}
	#useful h3{
		font-size : 16px;
	}
}

/* --------------------------------------------
RECRUIT
--------------------------------------------- */
#recruit{
	position : relative;
	overflow-x : clip;
}
#recruit h2::before{
	background-image : url( "../images/home/recruit/title.svg" );
}
#recruit picture{
	position : absolute;
}
#recruit picture img{
	width : 100%;
	height : auto;
}
#recruit p{
	color : var( --blue );
	letter-spacing : .2em;
}
@media screen and ( max-width : 750px ){
	#recruit{
		padding-bottom : calc( 158 var( --remBase ) );
	}
	#recruit h2::before{
		width : calc( 425 var( --percentBase ) );
		height : calc( 127 var( --remBase ) );
		margin-bottom : calc( 37 var( --remBase ) );
	}
	#recruit p{
		margin-top : calc( ( 79 - ( 40 * .375 ) ) var( --remBase ) );
		font-size : 4rem;
		line-height : 1.75;
	}
	#recruit picture{
		top : calc( 434 var( --remBase ) );
		left : 0;
	}
	#recruit picture img{
		height : calc( 461 var( --remBase ) );
	}
	#recruit .link01{
		margin-top : calc( ( 580 - 4 ) var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#recruit{
		padding-bottom : calc( 284 var( --remBase ) );
	}
	#recruit h2{
		grid-template-columns : calc( 426 * 100% / 1021 ) auto;
		column-gap : calc( 30 * 100% / 1021 );
		margin-left : calc( -21 var( --percentBase ) );
	}
	#recruit h2::before{
		height : calc( 127 var( --remBase ) );
	}
	#recruit picture{
		top : calc( 205 var( --remBase ) );
		right : 50%;
	}
	#recruit p{
		width : fit-content;
		margin-top : calc( 245 var( --remBase ) );
		margin-left : auto;
		margin-right : calc( -112 var( --percentBase ) );
		font-size : 3rem;
	}
	#recruit .link01{
		width : calc( 290 var( --percentBase ) );
		margin-top : calc( 61 var( --remBase ) );
		margin-left : auto;
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1400px ){
	#recruit picture{
		width : calc( 700 * 100% / 1000 );
	}
}
@media screen and ( min-width : 1400.02px ){
	#recruit picture{
		width : 700px;
	}
}