@charset "UTF-8";
/*--------------------------------------------
FONTS
---------------------------------------------*/
@font-face {
  font-family: 'Noto Sans JP';
  src: url("../fonts/NotoSansJP-VariableFont_wght.ttf") format("truetype");
  font-weight: 1 999;
}
.notosans{
	font-family: 'Noto Sans JP', sans-serif;
}
/*--------------------------------------------
SETTINGS
---------------------------------------------*/
@media screen and (max-width: 750px ){
html{
		font-size: calc( 10 * 100vw / var(--breakPoint) )
}
	}
@media screen and (min-width: 750.02px ) and (max-width: 1039.98px ){
html{
		font-size : calc( 10 * 100vw / var(--breakPoint) )
}
	}
@media print,screen and (min-width: 1040px ){
html{
		font-size:10px
}
	}
@media screen and (max-width: 750px ){
	:root{
		--headerHeight : calc( 100 var(--remBase) );
	}
}
@media print,screen and (min-width: 750.02px ){
	:root{
		--headerHeight : calc( 90 var(--remBase) );
	}
}
@media screen and (min-width: 750.02px ) and (max-width: 1399.98px ){
	:root{
		--headerHeight : calc( 90 * 100vw / 1400 );
	}
}
@media screen and (min-width: 1400px ){
	:root{
		--headerHeight : 90px;
	}
}
html{
	scroll-padding-top: var(--headerHeight);
}
@media screen and (max-width: 750px ){
body{
		padding-top: var(--headerHeight)
}
	}
@media print,screen and (min-width: 750.02px ){
body:not(.home){
			padding-top: var(--headerHeight)
	}
		}
/*--------------------------------------------
WRAPPER
---------------------------------------------*/
@media screen and (max-width: 750px ){
.wrap{
		padding-inline : calc( 40 * 100% / var(--breakPoint) )
}
	}
@media screen and (min-width: 750.02px ) and (max-width: 1039.98px ){
.wrap{
		padding-inline:calc( 20 * 100% / var(--breakPoint) )
}
	}
@media print,screen and (min-width: 1040px ){
.wrap{
		padding-inline:calc( ( 100% - 1000px ) / 2 )
}
	}
@media screen and (max-width: 750px ){
.wrap-sp{
		padding-inline : calc( 40 * 100% / var(--breakPoint) )
}
	}
@media screen and (min-width: 750.02px ) and (max-width: 1039.98px ){
.wrap-pc{
		padding-inline:calc( 20 * 100% / var(--breakPoint) )
}
	}
@media print,screen and (min-width: 1040px ){
.wrap-pc{
		padding-inline:calc( ( 100% - 1000px ) / 2 )
}
	}
/*--------------------------------------------
STATE
---------------------------------------------*/
@layer common{
			@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: 1040px ){
		.is-tb{
				display: none
		}
			}
			@media print,screen and (min-width: 750.02px ){
		.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: 750.02px ){
[data-pc-after]:after{
			content:attr( data-pc-after );
			white-space: pre
	}
		}
@media print,screen and (min-width: 750.02px ){
[data-pc-before]:before{
			content:attr( data-pc-before );
			white-space: pre
	}
		}
/*--------------------------------------------
SCROLL ANIMATION
---------------------------------------------*/
.animation{
	transition-duration: 1s;
	transition-timing-function: ease;
}
.animation.fadeIn{
	opacity: 0;
	transition-property: opacity;
}
.animation.fadeIn.is-animation{
		opacity: 1;
	}
.animation.fadeInUp{
	transition-duration: 1.5s;
	opacity: 0;
	translate:0 50%;
}
.animation.fadeInUp.is-animation{
		opacity: 1;
		translate: 0 0;
	}
/*--------------------------------------------
LAYOUT
  HEADER
---------------------------------------------*/
#header{
	display: grid;
	align-items: center;
	z-index: 10;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
	transition: filter var(--transitionBase) , background var(--transitionBase);
	height: var(--headerHeight);
}
#header .logo{
		display: grid;
		align-items: center;
		justify-content: space-between;
	}
#header .logo span{
			display: block;
		}
#header .logo span:nth-of-type(1){
				font-size: 0;
			}
#header .logo span:nth-of-type(1) img{
					width: 100%;
					height: auto;
				}
#header .logo span:nth-of-type(2){
				color:var(--blue);
				letter-spacing: 0.1em;
				font-weight: 400;
				white-space: nowrap;
			}
@media screen and (max-width: 750px ){
#header{
		padding-inline: calc( 24 var(--viewportBase) );
		grid-template-columns: calc( 379 * 100% / 702 );
		background-color: white
}
		#header .logo{
			grid-template-columns: calc( 75 * 100% / 379 ) auto;
		}
			#header .logo span:nth-of-type(2){
				font-size: 2.6rem;
			}
	}
@media print,screen and (min-width: 750.02px ){
		#header .logo{
			grid-row:1;
			grid-column: 2;
			grid-template-columns: calc( 75 * 100% / 316 ) auto;
		}
	}
@media screen and (min-width: 750.02px ) and (max-width: 1399.98px ){
#header{
		grid-template-columns: calc( 20 * 100% / 1400 ) calc( 316 * 100% / 1400 ) calc( 164 * 100% / 1400 ) calc( 900 * 100% / 1400 )
}
					#header .logo span:nth-of-type(1) img{
						height: calc( 75 * 100vw / 1400 );
					}
				#header .logo span:nth-of-type(2){
					font-size: calc( 20 * 100vw / 1400 );
				}
	}
@media screen and (min-width: 1400px ){
#header{
		padding-inline: calc( ( 100% - 1400px ) / 2 );
		grid-template-columns: 20px 316px 164px 900px
}
					#header .logo span:nth-of-type(1) img{
						height: 75px;
					}
				#header .logo span:nth-of-type(2){
					font-size: 20px;
				}
	}
@media screen and (max-width: 750px ){
		body.is-scroll:not(.is-seemBlue) #header{
			background-color: rgba(255,255,255 , .1);
		}
	}
body.is-scroll:not(.is-seemBlue) #header{
		backdrop-filter: blur( .4rem );
	}
/*--------------------------------------------
LAYOUT
  MENU BUTTON
---------------------------------------------*/
@media screen and (max-width: 750px ){
	body.is-open{
		overflow: hidden;
	}
	body.is-open #nav{
		max-height: 100dvh;
	}
		body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(1){
			rotate:-45deg;
			top:50%;
		}
		body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(2){
			rotate:45deg;
			top:50%;
		}
}
#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{
	position: absolute;
	top: 0;
	height: var(--headerHeight);
	right: 0;
	width: calc( 100 var(--viewportBase) );
	padding-inline: calc( 28 var(--viewportBase) );
	padding-block: calc( 39 var(--remBase) );
	z-index: 12;
}
#menuBtn > span:nth-of-type(1){
		height: calc( 22 var(--remBase) );
	}
#menuBtn > span:nth-of-type(1) span{
			background-color: var(--green);
			height: calc( 2 var(--remBase) );
			background-color: var(--blue);
		}
/*--------------------------------------------
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;
		top: 0;
		background-color: var(--bgBlue)
}
		#nav .scroll{
			padding-top: calc( 77 var(--remBase) );
			padding-bottom: calc( ( 117 - 12 ) var(--remBase) );
			padding-inline: calc( 40 var(--viewportBase) );
		}
	}
@media print,screen and (min-width: 750.02px ){
#nav{
		grid-column: 4;
		grid-row: 1;
		height: 100%
}
		#nav .scroll{
			height: 100%;
		}
	}
@media screen and (max-width: 750px ){
		#navMe p{
			text-align: center;
			text-align: center;
			letter-spacing: .1em;
			text-indent: .1em;
			font-size: 4rem;
			color:var(--blue);
		}
		#navMe .logo{
			margin-top: calc( 49 var(--remBase) );
			display: block;
			margin-inline:auto;
			width:fit-content;
		}
			#navMe .logo span{
				display: block;
				width:fit-content;
				margin-inline:auto;
			}
				#navMe .logo span:nth-of-type(1){
					font-size: 0;
				}
					#navMe .logo span:nth-of-type(1) img{
						height: calc( 182 var(--remBase) );
					}
				#navMe .logo span:nth-of-type(2){
					margin-top: calc( 21 var(--remBase) );
					text-align: center;
					color:var(--blue);
					text-align: center;
					letter-spacing: .1em;
					text-indent: .1em;
					font-size: 3rem;
				}
	}
/*--------------------------------------------
GLOBAL NAV
---------------------------------------------*/
#globalNav a{
		transition: color var(--transitionBase) , opacity var(--transitionBase) ;
	}
#globalNav a:before{
			transition: filter var(--transitionBase);
		}
@media screen and (max-width: 750px ){
#globalNav{
		margin-top: calc( 68 var(--remBase) )
}
		#globalNav > li + li{
			margin-top: calc( 21 var(--remBase) );
		}
		#globalNav a{
			height: calc( 129 var(--remBase) );
			display: flex;
			align-items: center;
			padding-left: calc( 45 var(--percentBase) );
			padding-right: calc( 26 var(--percentBase) );
			letter-spacing: 0.1em;
			font-size: 3.6rem;
			background-color: var(--blue);
			color:white;
		}
			#globalNav a:after{
				content:"";
				display: block;
				margin-left: auto;
				width: calc( 53 * 100% / 599 );
				height: calc( 13 var(--remBase) );
				background: url("../images/ui/arrow/right01.svg") center / contain no-repeat;
				font-size: 0;
				flex-shrink: 0;
			}
	}
@media print,screen and (min-width: 750.02px ){
#globalNav{
		display: grid;
		height: 100%;
		grid-template-columns: repeat( auto-fit , minmax(0,1fr) )
}
		#globalNav li{
			height: 100%;
			position: relative;
		}
				#globalNav li + li:before{
					content:"";
					display: block;
					width: 0;
					position: absolute;
					left: 0;
					transition: -50% 0;
					transition: border var(--transitionBase);
					border-left-style: dotted;
				}
		#globalNav a{
			display: block;
			height: 100%;
			text-align: center;
			letter-spacing: .1em;
			text-indent: .1em;
		}
			#globalNav a:before{
				content:"";
				display: block;
				position: absolute;
				left: 50%;
				translate: -50% 0;
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center;
			}
			#globalNav .aim:before{
				background-image: url("../images/ui/icon/black/good.svg");
				width: calc( 36 * 100% / 150 );
			}
			#globalNav .school:before{
				background-image: url("../images/ui/icon/black/frisbee.svg");
				width: calc( 36 * 100% / 150 );
			}
			#globalNav .triming:before{
				background-image: url("../images/ui/icon/black/trimming.svg");
				width: calc( 32 * 100% / 150 );
			}
			#globalNav .hotel:before{
				background-image: url("../images/ui/icon/black/house.svg");
				width: calc( 37 * 100% / 150 );
			}
			#globalNav .shop:before{
				background-image: url("../images/ui/icon/black/shop.svg");
				width: calc( 36 * 100% / 150 );
			}
			#globalNav .onlineshop:before{
				background-image: url("../images/ui/icon/black/cart.svg");
				width: calc( 39 * 100% / 150 );
			}
	}
@media screen and (min-width: 750.02px ) and (max-width: 1399.98px ){
				#globalNav li + li:before{
					height: calc( 56 * 100vw / 1400 );
					top: calc( 17 * 100vw / 1400 );
					border-left-width: calc( 2 * 100vw / 1400 );
				}
		#globalNav a{
			padding-top: calc( 61 * 100vw / 1400 );
			font-size: calc( 15 * 100vw / 1400 );
		}
			#globalNav .aim:before{
				height: calc( 37 * 100vw / 1400 );
				top: calc( 15 * 100vw / 1400 );
			}
			#globalNav .school:before{
				height: calc( 37 * 100vw / 1400 );
				top: calc( 15 * 100vw / 1400 );
			}
			#globalNav .triming:before{
				height: calc( 35 * 100vw / 1400 );
				top: calc( 16 * 100vw / 1400 );
			}
			#globalNav .hotel:before{
				height: calc( 36 * 100vw / 1400 );
				top: calc( 16 * 100vw / 1400 );
			}
			#globalNav .shop:before{
				height: calc( 35 * 100vw / 1400 );
				top: calc( 16 * 100vw / 1400 );
			}
			#globalNav .onlineshop:before{
				height: calc( 35 * 100vw / 1400 );
				top: calc( 19 * 100vw / 1400 );
			}
	}
@media screen and (min-width: 1400px ){
				#globalNav li + li:before{
					height: 56px;
					top: 17px;
					border-left-width: 2px;
				}
		#globalNav a{
			padding-top: 61px;
			font-size: 1.5rem;
		}
			#globalNav .aim:before{
				height: 37px;
				top: 15px;
			}
			#globalNav .school:before{
				height: 37px;
				top: 15px;
			}
			#globalNav .triming:before{
				height: 35px;
				top: 16px;
			}
			#globalNav .hotel:before{
				height: 36px;
				top: 16px;
			}
			#globalNav .shop:before{
				height: 35px;
				top: 16px;
			}
			#globalNav .onlineshop:before{
				height: 35px;
				top: 19px;
			}
	}
@media (hover: hover) {
		#globalNav a:hover{
			color:var(--blue);
		}
			#globalNav a:hover:before{
				filter:var(--filterBlue);
			}
}
@media print,screen and (min-width: 750.02px ){
			body.home #globalNav li + li:before{
				border-left-color: white;
			}
			body.home #globalNav a{
				color:white;
			}
				body.home #globalNav a:before{
					filter:var(--filterWhite);
				}
		}
@media print,screen and (min-width: 750.02px ){
			body.home.is-scroll:not(.is-seemBlue) #globalNav li + li:before{
				border-left-color: var(--blue);
			}
			body.home.is-scroll:not(.is-seemBlue) #globalNav a{
				color:var(--blue);
			}
				body.home.is-scroll:not(.is-seemBlue) #globalNav a:before{
					filter: var(--filterBlue);
				}
		}
@media (hover: hover) {
			body.home.is-scroll:not(.is-seemBlue) #globalNav a:hover{
				opacity: .7;
			}
}
@media print,screen and (min-width: 750.02px ){
			body:not(.home) #globalNav li + li:before{
				border-left-color: var(--blue);
			}
			body:not(.home) #globalNav a{
				color:var(--blue);
			}
				body:not(.home) #globalNav a:before{
					filter:var(--filterBlue);
				}
		}
@media (hover: hover) {
			body:not(.home) #globalNav a:hover{
				opacity: .7;
			}
}
@media screen and (max-width: 750px ){
#subNav{
		margin-top: calc( 64 var(--remBase) );
		display: grid;
		grid-template-columns:repeat( 2 , 1fr );
		row-gap: calc( 52 var(--remBase) )
}
		#subNav a{
			display: grid;
			align-items: start;
			justify-content: start;
			font-size: 2.8rem;
			letter-spacing: 0.1em;
			color:#444;
			grid-template-columns:calc( 10 * 100% / 335 ) auto;
			column-gap: calc( 23 * 100% / 335 );
		}
			#subNav a:before{
				content:"";
				display: block;
				background-color: var(--blue);
				aspect-ratio:1;
				font-size: 0;
				margin-top: calc( 9 var(--remBase) );
			}
	}
@media screen and (max-width: 750px ){
#navSns{
		display: grid;
		margin-top: calc( 54 var(--remBase) );
		grid-template-columns: repeat( 3 , calc( 214 var(--percentBase) ) );
		column-gap: calc( 14 var(--percentBase) );
		grid-template-rows: calc( 151 var(--remBase) )
}
		#navSns a{
			width: 100%;
			height: 100%;
			display: block;
			text-indent: 0.1em;
			text-align: center;
			font-size: 2.4rem;
			background-color: white;
      color:#666;
      letter-spacing: 0.1em;
		}
      #navSns a:before{
        content:"";
        display: block;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
				margin-inline: auto;
      }
		#navSns .shop{
      padding-top: calc( 33 var(--remBase) );
		}
      #navSns .shop:before{
				background-image: url("../images/ui/icon/cart.svg");
        width: calc( 46 * 100% / 214 );
        height: calc( 42 var(--remBase) );
        margin-bottom: calc( 22 var(--remBase) );
      }
		#navSns .instagram{
      padding-top: calc( 32 var(--remBase) );
		}
      #navSns .instagram:before{
				background-image: url("../images/ui/icon/sns/instagram.svg");
        width: calc( 44 * 100% / 214 );
        aspect-ratio: 1;
        margin-bottom: calc( 23 var(--remBase) );
      }
		#navSns .line{
      padding-top: calc( 30 var(--remBase) );
		}
      #navSns .line:before{
				background-image: url("../images/ui/icon/sns/line02.svg");
        width: calc( 50 * 100% / 214 );
        height: calc( 48 var(--remBase) );
        margin-bottom: calc( 21 var(--remBase) );
      }
	}
@media screen and (max-width: 750px ){
#navSubLinks{
		margin-top: calc( 71 var(--remBase) );
		display: grid;
		align-items: start;
		justify-content: center;
		grid-auto-flow:column;
		column-gap: calc( 22 var(--percentBase) )
}
		#navSubLinks a{
			letter-spacing: 0.1em;
			font-size: 2.2rem;
			color:#666;
			font-family: 'Noto Sans JP', sans-serif;
		}
	}
@media screen and (max-width: 750px ){
#navMe02{
		margin-top: calc( ( 76 - 12 ) var(--remBase) )
}
		#navMe02 :where( p , a ){
			text-align: center;
			letter-spacing: .1em;
			text-indent: .1em;
			font-size: 2.6rem;;
			line-height: calc( 50 / 26 );;
			color:#666;
		}
		#navMe02 a{
			width: fit-content;
			margin-inline: auto;
			display: block;
		}
	}
/*--------------------------------------------
HOME MV
---------------------------------------------*/
#mv video{
		width: 100%;
		height: auto;
	}
#mv p{
		color:var(--blue);
		letter-spacing: 0.22em;
	}
#mv a{
		background-color: #fff;
		color:var(--blue);
		display: grid;
		align-items: center;
		position: absolute;
		justify-content: start;
		transition: background var(--transitionBase) , color var(--transitionBase);
	}
#mv a:after{
			content:"";
			display: block;
			background: url("../images/ui/button/black/play.svg") center / contain no-repeat;
			transition: filter var(--transitionBase);
			filter:var(--filterBlue);
			font-size: 0;
			aspect-ratio: 1;
		}
@media screen and (max-width: 750px ){
#mv{
		padding-bottom: calc( ( 87 - 22 ) var(--remBase) )
}
		#mv .videoBox{
			position: relative;
		}
		#mv a{
			width: calc( 200 var(--viewportBase) );
			height: calc( 70 var(--remBase) );
			bottom: calc( 16 var(--remBase) );
			right: calc( 16 var(--viewportBase) );
			padding-left: calc( 28 var(--viewportBase) );
			grid-template-columns: auto calc( 38 * 100% / 172 );
			column-gap: calc( 18 * 100% / 172 );
			font-size: 2.4em;
			letter-spacing: 0.05em;
		}
		#mv p{
			margin-top: calc( ( 60 - 22 ) var(--remBase) );
			font-size: 3.6rem;;
			line-height: calc( 80 / 36 );;
		}
	}
@media print,screen and (min-width: 750.02px ){
#mv{
		overflow-x: clip;
		position: relative
}
		#mv .wrap{
			display: grid;
			align-items: center;
			justify-content: start;
			height: 100%;
		}
		#mv p{
			writing-mode: vertical-rl;
			line-height: calc( 60 / 30 );
			font-feature-settings: normal;
		}
		#mv .videoBox{
			height: 100%;
			aspect-ratio: 900 / 820;
			position: absolute;
			top: 0;
		}
		#mv a{
			width: calc( 150 * 100% / 900 );
			padding-left: calc( 27 * 100% / 900 );
			grid-template-columns: auto calc( 28 * 100% / 123 );
			column-gap: calc( 15 * 100% / 123 );
			left: calc( 730 * 100% / 900 );
		}
	}
@media screen and (min-width: 750.02px ) and (max-width: 1400px ){
#mv{
		height: calc( 820 * 100vw / 1400 )
}
		#mv .videoBox{
			left:calc( 50% - ( 200 * 100% / 1400 ) );
		}
		#mv p{
			font-size: calc( 30 * 100vw / 1400 );
		}
		#mv a{
			height: calc( 50 * 100vw / 1400 );
			font-size: calc( 16 * 100vw / 1400 );
			bottom: calc( 20 * 100vw / 1400 );
		}
	}
@media screen and (min-width: 1400.02px ){
#mv{
		width: 1400px;
		margin-inline: auto;
		height: 820px
}
		#mv .videoBox{
			left:calc( 50% - 200px );
		}
		#mv p{
			font-size: 30px;
		}
		#mv a{
			height: 50px;
			font-size: 16px;
			bottom: 20px;
		}
	}
@media (hover: hover) {
		#mv a:hover{
			background-color: var(--blue);
			color:white;
		}
			#mv a:hover:after{
				filter: var(--filterWhite);
			}
}
#mv p{
		transition-delay: 1s;
	}
/*--------------------------------------------
LINK LINE
---------------------------------------------*/
#linkLine{
  position: fixed;
  top: 50%;
  translate: 0 -50%;
  border-radius: 50%;
  overflow: hidden;
  border: solid 1px var(--blue);
  border-style: solid;
  border-color: var(--blue);
  aspect-ratio: 1;
  display: block;
  text-align: center;
  letter-spacing: .2em;
  text-indent: .2em;
  color:#56c1c8;
  background-repeat: no-repeat;
  background-image: url("../images/ui/icon/sns/line.svg");
  background-position-x: center;
  transition: background var(--transitionBase) , color var(--transitionBase) , opacity var(--transitionBase);
  z-index: 2;
  opacity: 0;
}
@media screen and (max-width: 750px ){
#linkLine{
    font-size: 2.2rem;;
    line-height: calc( 30 / 22 );;
		width: calc( 222 var(--viewportBase) );
    right: calc( -8 var(--viewportBase) );
    padding-top: calc( ( 120 - 4 ) var(--remBase) );
    background-size: auto calc( 71 var(--remBase) );
    background-position-y: calc( 34 var(--remBase) )
}
  }
@media print,screen and (min-width: 750.02px ){
#linkLine{
		line-height: calc( 24 / 16 )
}
  }
@media screen and (min-width: 750.02px ) and (max-width: 1400px ){
#linkLine{
		width: calc( 182 * 100% / 1400 );
    right: calc( 19 * 100vw / 1400 );
		font-size: calc( 16 * 100vw / 1400 );
    padding-top: calc( ( 104 - 4 ) * 100vw / 1400 );
    background-size: auto calc( 60 * 100vw / 1400 );
    background-position-y: calc( 32 * 100vw / 1400 )
}
	}
@media screen and (min-width: 1400.02px ){
#linkLine{
		width: 182px;
    right: 19px;
		font-size: 16px;
    padding-top: calc( 104px - 4px );
    background-size: auto 60px;
    background-position-y: 32px
}
	}
body.is-scroll #linkLine{
		opacity: 1;
	}
/*--------------------------------------------
TITLE
---------------------------------------------*/
#title01{
	background-color: #ecf5f6;
	color:var(--blue);
	display: grid;
	place-items:center;
	text-align: center;
	letter-spacing: .1em;
	text-indent: .1em;
	font-weight: 400;
	height: calc( 240 var(--remBase) );
	font-size: 4.341rem;
}
@media print,screen and (min-width: 750.02px ){
#title01{
		margin-top: calc( 10 var(--remBase) )
}
	}
#title02{
	background-color: #ecf5f6;
	color:var(--blue);
	text-align: center;
	letter-spacing: .1em;
	text-indent: .1em;
	font-weight: 400;
	line-height: 1.75;
	background-repeat: no-repeat;
	background-position-x: center;
	height: calc( 240 var(--remBase) );
}
@media screen and (max-width: 750px ){
#title02{
		padding-top: calc( ( 147 - 24 * 0.375 ) var(--remBase) );
		font-size: 2.4rem
}
	}
@media print,screen and (min-width: 750.02px ){
#title02{
		margin-top: calc( 13 var(--remBase) );
		padding-top: calc( ( 147 - 20 * 0.375 ) var(--remBase) );
		font-size: 2rem
}
	}
body.service #title02{
		background-image: url("../images/service/en.svg");
	}
@media screen and (max-width: 750px ){
body.service #title02{
			background-size: auto calc( 80 var(--remBase) );
			background-position-y: calc( 58 var(--remBase) )
	}
		}
@media print,screen and (min-width: 750.02px ){
body.service #title02{
			background-size: auto calc( 80 var(--remBase) );
			background-position-y: calc( 57 var(--remBase) )
	}
		}
body.recruit #title02{
		background-image: url("../images/recruit/en.svg");
	}
@media screen and (max-width: 750px ){
body.recruit #title02{
			background-size: auto calc( 79 var(--remBase) );
			background-position-y: calc( 59 var(--remBase) )
	}
		}
@media print,screen and (min-width: 750.02px ){
body.recruit #title02{
			background-size: auto calc( 79 var(--remBase) );
			background-position-y: calc( 58 var(--remBase) )
	}
		}
body.shop #title02{
		background-image: url("../images/shop/en.svg");
	}
@media screen and (max-width: 750px ){
body.shop #title02{
			background-size: auto calc( 110 var(--remBase) );
			background-position-y: calc( 59 var(--remBase) )
	}
		}
@media print,screen and (min-width: 750.02px ){
body.shop #title02{
			background-size: auto calc( 111 var(--remBase) );
			background-position-y: calc( 54 var(--remBase) )
	}
		}
#title02.title-news{
	background-image: url("../images/news/en.svg");
}
@media screen and (max-width: 750px ){
#title02.title-news{
		background-size: auto calc( 84 var(--remBase) );
		background-position-y: calc( 54 var(--remBase) )
}
	}
@media print,screen and (min-width: 750.02px ){
#title02.title-news{
		background-size: auto calc( 84 var(--remBase) );
		background-position-y: calc( 53 var(--remBase) )
}
	}
body.contact #title02,body.thanks #title02{
		background-image: url("../images/contact/en.svg");
	}
@media screen and (max-width: 750px ){
body.contact #title02,body.thanks #title02{
			background-size: auto calc( 78 var(--remBase) );
			background-position-y: calc( 59 var(--remBase) )
	}
		}
@media print,screen and (min-width: 750.02px ){
body.contact #title02,body.thanks #title02{
			background-size: auto calc( 78 var(--remBase) );
			background-position-y: calc( 58 var(--remBase) )
	}
		}
/*--------------------------------------------
BREAD CRUMBS
---------------------------------------------*/
#breadcrumbs{
	display: flex;
	flex-wrap: wrap;
}
#breadcrumbs a, #breadcrumbs li{
		color:var(--blue);
		letter-spacing: 0.1em;
		line-height: 1.75;
		font-family: 'Noto Sans JP', sans-serif;
	}
#breadcrumbs a{
		display: block;
	}
#breadcrumbs li + li{
		display: grid;
		grid-template-columns: auto auto;
		align-items: baseline;
		justify-content: start;
	}
#breadcrumbs li + li:before{
		content:"　＞　";
		white-space: pre;
	}
@media screen and (max-width: 750px ){
#breadcrumbs{
		height: calc( 119 var(--remBase) );
		padding-top: calc( ( 30 - ( 22 * 0.375 ) ) var(--remBase) );
		align-items: start
}
		#breadcrumbs li, #breadcrumbs a{
			font-size: 2.2rem;
		}
	}
@media print,screen and (min-width: 750.02px ){
#breadcrumbs{
		height: calc( 115 var(--remBase) );
		align-content: center
}
		#breadcrumbs li, #breadcrumbs a{
			font-size: 1.2rem;
		}
	}
@media screen and (max-width: 750px ){
#title01 + #breadcrumbs{
		height: auto;
		padding-top: calc( ( 24 - ( 22 * 0.375 ) ) var(--remBase) );
		padding-bottom: calc( ( 70 - ( 22 * 0.375 ) ) var(--remBase) )
}
	}
@media print,screen and (min-width: 750.02px ){
#title01 + #breadcrumbs{
		height: calc( 58 var(--remBase) )
}
	}