/* CSS Document */
@import url('//fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');

/*
Zen Kaku Gothic New
font-family: 'Zen Kaku Gothic New', sans-serif;
Zen Old Mincho
font-family: 'Zen Old Mincho', serif;
*/

[src="[url]"]{
	background: var(--dummy);
}

:root{
	--color: #4a4947;
	--color-theme: #e78385;
	--variable-color: var(--color-theme);
	--color-border: #ccc;
	--font: 'Zen Kaku Gothic New', 'BIZ UDPGothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
	--font-min: 'Zen Old Mincho', serif;
	--wrap-space: clamp(24px, calc(48 / 1366 * 100dvw), max(48px, calc(48 / 1367 * 100dvw)));
	--wrap-min: 375px;
	--wrap-max: 1140px;
	--wrap-fit: calc(clamp(var(--wrap-min), 100%, 100dvw) - (var(--wrap-space) * 2));
	--wrap: clamp(calc(var(--wrap-min) - (var(--wrap-space) * 2)), calc(max(100dvw, 100%) - (var(--wrap-space) * 2)), var(--wrap-max));
	--anchor: 56px;
	--dummy: #f2f2f2 url('/common/images/logoType.svg') no-repeat center / 75%;
}

html{
	min-width: var(--wrap-min);
	scroll-behavior: smooth;
	scroll-padding-top: var(--anchor);
}

body{
	color: var(--color);
	font: 400 16px var(--font);
	line-height: 1.65;
	overflow-wrap: anywhere;
	&::selection{
		background: var(--color-theme);
		color: #fff;
	}
	a{
		color: inherit;
		.done &{
			transition-property: color, text-decoration, background, background-color, background-size, border, border-color, box-shadow, filter, opacity;
			transition-duration: 0.2s;
			transition-timing-function: ease-out;
		}
		&:focus-visible{
			outline: var(--color-theme) auto 2px;
		}
	}
	input,
	select,
	textarea,
	button{
		&:focus-visible{
			outline: 2px solid var(--color-theme);
			outline-offset: -1px;
		}
	}
	input{
		&[type="checkbox"],
		&[type="radio"]{
			&:checked{
				color: var(--color-theme);
			}
		}
	}
	button{
		background: var(--color-theme);
	}
}

main{
	& a{
		color: var(--color-theme);
		text-decoration: underline;
	}
}

[popovertarget="nav"]{
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	display: grid;
	align-content: center;
	justify-items: center;
	grid-gap: 4px;
	aspect-ratio: 1;
	width: clamp(56px, calc(72 / 768 * 100dvw), 72px);
	background: transparent;
	color: var(--color-theme);
	font-size: 0;
	overflow: hidden;
	:has(#nav:popover-open) &{
		&:after{
			animation: active-circle .7s .2s forwards;
		}
		& i{
			&:nth-of-type(1){
				top: 50%;
				transform: translateY(-50%) rotate(135deg);
			}
			&:nth-of-type(2){
				left: 60%;
				opacity: 0;
				transform: translateY(-50%) scale(0) rotate(135deg);
			}
			&:nth-of-type(3){
				top: 50%;
				transform: translateY(-50%) rotate(225deg);
			}
		}
	}
	&{
		position: relative;
	}
	&,
	& i{
		display: inline-block;
		transition: all .5s .2s;
		box-sizing: border-box;
	}
	&:after{
		content: '';
		position: absolute;
		top: 15%;
		left: 15%;
		display: block;
		width: 70%;
		height: 70%;
		border-radius: 50%;
		border: 3px solid transparent;
		transition: all .75s;
	}
	& i{
		position: absolute;
		left: 25%;
		width: 50%;
		height: 3px;
		background-color: currentColor;
		border-radius: 2px;
		transform: translateY(-50%);
		&:nth-of-type(1) {
			top: calc(50% - clamp(8px, calc(12 / 768 * 100dvw), 12px));
		}
		&:nth-of-type(2) {
			top: 50%;
		}
		&:nth-of-type(3) {
			top: calc(50% + clamp(8px, calc(12 / 768 * 100dvw), 12px));
		}
	}
}
@keyframes active-circle{
	0% {
		border-color: transparent;
		transform: rotate(0);
	}
	25% {
		border-color: transparent currentColor transparent transparent;
	}
	50% {
		border-color: transparent currentColor currentColor transparent;
	}
	75% {
		border-color: transparent currentColor currentColor currentColor;
	}
	100% {
		border-color: currentColor;
		transform: rotate(-680deg);
	}
}

#wrapper{
	display: grid;
	grid-template-rows: auto 1fr;
	min-height: 100dvh;
	#header{
		grid-column: 1;
		grid-row: 1;
		position: sticky;
		top: 0;
		min-height: var(--anchor);
		z-index: 120;
	}
	#nav{
		z-index: 120;
	}
	#pagePath,
	#footer,
	#pageTop{
		order: 10;
	}
	#footer{
		order: 11;
	}
	#floatingNav{
		grid-column: 1;
		grid-row: 1;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 120;
	}
	@media (max-width: 1199.98px) {
		#floatingNav{
			display: none;
		}
	}
	@media (min-width: 1200px) {
		#nav{
			display: none;
		}
	}
}

#header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: clamp(56px, calc(72 / 768 * 100dvw), 72px);
	padding-left: clamp(16px, calc(24 / 768 * 100dvw), 24px);
	@media (max-width: 1199.98px) {
		background: #fff;
		filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.25));
		.scrollTop &{
			background: unset;
			filter: unset;
		}
	}
	@media (min-width: 1200px) {
		#siteName,
		#navButton{
			display: none;
		}
	}
}

#siteName{
	& a{
		display: block;
		aspect-ratio: 3.8 / 1;
		height: clamp(32px, calc(40 / 768 * 100dvw), 40px);
		background: url('/common/images/ito.logoType.svg') no-repeat -8% top / auto 166%, url('/common/images/ito.logoType.svg') no-repeat right 103% / auto 290%;
		font-size: 0;
		transition: none;
	}
}

#nav{
	all: unset;
	position: fixed;
	top: 0;
	left: 0;
	display: grid;
	grid-template-columns: min(100%, 390px);
	grid-template-rows: clamp(56px, calc(72 / 768 * 100dvw), 72px) auto auto auto auto 1fr;
	justify-content: end;
	align-content: start;
	grid-row-gap: 24px;
	width: 100%;
	height: 100%;
	background: #f7f2e8;
	background: linear-gradient(-90deg, #f7f2e8 min(100%, 389.98px), transparent 0);
	overflow-y: auto;
	overscroll-behavior: none;
	transform: translateX(min(100%, 390px));
	transition: transform 0.2s ease-out;
	&:popover-open{
		filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.25));
		transform: translateX(0);
	}
	&:not(:popover-open){
		pointer-events: none;
	}
	&::backdrop{
		background: rgba(0, 0, 0, 0.5);
	}
	& h2{
		align-self: center;
		justify-self: start;
		margin-left: 24px;
		aspect-ratio: 3.8 / 1;
		height: clamp(32px, calc(40 / 768 * 100dvw), 40px);
		background: url('/common/images/ito.logoType.svg') no-repeat -8% top / auto 166%, url('/common/images/ito.logoType.svg') no-repeat right 103% / auto 290%;
		font-size: 0;
		cursor: pointer;
	}
	& summary,
	& a{
		font-weight: 700;
		&:hover{
			color: var(--color-theme);
		}
	}
	&{
		#navGlobal,
		#navPickup,
		#navSns,
		#navLanguage,
		#navSearch{
			justify-self: center;
			width: calc(100%  - 48px);
		}
		#navGlobal,
		#navPickup,
		#navSns{
			padding-top: 24px;
			border-top: 1px solid #d1d1d1;
		}
		#navExtra{
			display: grid;
			grid-template-columns: min(calc(100%  - 48px), 288px);
			justify-content: center;
			align-content: start;
			padding: 32px 0 56px 0;
			background: var(--color-theme);
		}
		#navLanguage{
			grid-row: 3;
		}
		#navSearch{
			grid-row: 2;
		}
		#navClose{
			position: fixed;
			top: 0;
			right: 0;
		}
		#navCloseOuter{
			all: unset;
			box-sizing: border-box;
			position: absolute;
			top: 0;
			left: 0;
			width: calc(100% - min(100%, 390px));
			height: 100%;
			font-size: 0;
		}
	}
	#navGlobal{
		& ul{
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 8px 16px;
		}
		& a{
			display: grid;
			grid-template-columns: auto 1fr;
			grid-gap: 8px;
			font-weight: 700;
			&:before{
				content: "-";
			}
		}
	}
	#navPickup{
		& ul{
			display: grid;
			grid-gap: 8px 16px;
		}
		& a{
			display: grid;
			grid-template-columns: auto 1fr;
			grid-gap: 8px;
			font-weight: 700;
			&:before{
				content: "-";
			}
		}
	}
	#navLanguage{
		&::details-content{
			display: contents;
		}
		& summary{
			display: grid;
			grid-template-columns: auto 1fr auto;
			align-items: center;
			column-gap: 16px;
			font-weight: 700;
			transition: color 0.2s ease-out;
			cursor: pointer;
			&:before,
			&:after{
				content: "";
				aspect-ratio: 1;
			}
			&:before{
				width: 24px;
				background: currentColor url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M22,11h-10c-.55,0-1,.45-1,1v10c0,.55.45,1,1,1h10c.55,0,1-.45,1-1v-10c0-.55-.45-1-1-1ZM19.84,21.15c-.46,0-.54-.22-.71-.7l-.48-1.37h-3.3l-.48,1.37c-.17.49-.25.7-.72.7-.28,0-.81-.14-.81-.58,0-.16.07-.33.16-.57l2.32-6.16c.19-.49.37-.99,1.19-.99s.99.52,1.17.99l2.32,6.16c.12.31.16.43.16.57,0,.44-.51.58-.82.58ZM15.78,17.87h2.44l-1.22-3.46-1.22,3.46ZM7.72,5.76c-.67,0-1.06.08-1.34.14.05-.48.07-.64.12-.92,2.3-.14,3.24-.32,3.53-.38.26-.06.55-.14.55-.52,0-.23-.11-.53-.49-.53-.05,0-.62.09-1.06.15-.26.04-1.19.18-2.33.25.19-.76.21-.84.21-.94,0-.39-.42-.43-.55-.43-.36,0-.5.09-.72,1.41-.23.01-.66.02-1.19,0-.1,0-.6-.03-.72-.03-.17,0-.56,0-.56.52s.38.54.73.55c.57,0,1.5,0,1.58,0-.07.59-.08.73-.11,1.16-1.33.49-2.66,1.64-2.66,3.17,0,1.18.78,1.79,1.7,1.79.85,0,2.91-.58,4.52-4.25.79.24,1.24.87,1.24,1.67,0,1.46-1.41,1.75-1.96,1.86-.27.06-.47.1-.47.46,0,.15.06.55.51.55.34,0,3.03-.4,3.03-2.83,0-1.43-.97-2.84-3.56-2.84ZM4.47,10.1c-.74,0-.74-.71-.74-.79,0-.21,0-1.24,1.6-2.08,0,1.24.17,2.11.25,2.49-.37.22-.7.38-1.11.38ZM6.46,9c-.16-.87-.15-1.9-.14-2.14.24-.06.83-.2,1.63-.15-.56,1.33-1.2,1.99-1.49,2.29Z"/></svg>') no-repeat center / contain;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22,10h-8V2c0-1.1-.9-2-2-2H2C.9,0,0,.9,0,2v10c0,1.1.9,2,2,2h8v8c0,1.1.9,2,2,2h10c1.1,0,2-.9,2-2v-10c0-1.1-.9-2-2-2Z"/></svg>') no-repeat center / contain;
			}
			&:after{
				width: 14px;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.41 8.12"><polyline points="12.71 .71 6.71 6.71 .71 .71" style="fill: none; stroke: black; stroke-miterlimit: 10; stroke-width: 2px;"/></svg>') no-repeat center / contain;
			}
			[open] &:after{
				transform: scale(1, -1);
			}
		}
		& summary+div{
			margin-top: 16px;
		}
		& ul{
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 8px 16px;
		}
		& a{
			display: grid;
			grid-template-columns: auto 1fr;
			grid-gap: 8px;
			font-weight: 700;
			&:before{
				content: "-";
			}
		}
	}
	#navSearch{
		&::details-content{
			display: contents;
		}
		& summary{
			display: none;
		}
		.gsc-search-box{
			form&{
				border-color: currentColor;
				border-radius: 24px;
			}
		}
	}
	#navSns{
		& ul{
			display: flex;
			justify-content: center;
			grid-gap: 16px;
		}
		& li{
			display: contents;
		}
		& a{
			display: block;
			aspect-ratio: 1;
			width: 48px;
			background: no-repeat center / 30px;
			font-size: 0;
			&:hover{
				opacity: 0.8;
			}
			&[href*="instagram.com"]{
				background-image: url("/common/images/snsIcon_Instagram.svg");
			}
			&[href*="facebook.com"]{
				background-image: url("/common/images/snsIcon_Facebook.svg");
			}
			&[href*="youtube.com"]{
				background-image: url("/common/images/snsIcon_Youtube.svg");
			}
			&[href*="x.com"]{
				background-image: url("/common/images/snsIcon_X.svg");
			}
		}
	}
	#navExtra{
		& ul{
			display: grid;
			grid-gap: 16px;
		}
		& li{
			display: contents;
		}
		& a{
			display: grid;
			grid-template-columns: 0 auto;
			align-items: center;
			min-height: clamp(56px, calc(64 / 768 * 100dvw), 64px);
			padding: 8px clamp(28px, calc(32 / 768 * 100dvw), 32px);
			background: white;
			border: 1px solid var(--color-border);
			border-radius: clamp(28px, calc(32 / 768 * 100dvw), 32px);
			font-weight: 700;
			text-align: center;
			text-wrap: balance;
			&:before{
				content: "";
				justify-self: center;
				aspect-ratio: 1;
				width: 8px;
				background: currentColor;
				border-radius: 100%;
				transition: all 0.2s ease-out;
			}
			&:hover{
				background: var(--color);
				border-color: transparent;
				color: white;
				&:before{
					background: var(--color-theme);
				}
			}
		}
	}
}

#pagePath{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	padding: 16px 0;
	& ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 0.25em 0.5em;
		font-size: 14px;
	}
	& li{
		display: contents;
		&:nth-child(n+2){
			&:before{
				content: "\3E";
			}
		}
	}
	& a{
		text-decoration: underline;
	}
}

#footer{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	padding: clamp(24px, calc(32 / 768 * 100dvw), 32px) 0 16px 0;
	background: var(--color-theme);
	&{
		#fBanner,
		#fAddress,
		#copyright{
			color: white;
		}
		#fNav{
			margin-top: clamp(48px, calc(64 / 768 * 100dvw), 64px);
		}
		#fAddress,
		#copyright{
			margin-top: clamp(32px, calc(48 / 768 * 100dvw), 48px);
		}
	}
	#fBanner{
		display: grid;
		grid-row-gap: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		& h3{
			font-weight: 700;
			font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
			letter-spacing: 1em;
			text-indent: 1em;
			text-align: center;
		}
		& ul{
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 16px), 208px), 1fr));
			grid-gap: clamp(16px, calc(32 / 768 * 100dvw), 32px);
		}
		& a{
			display: block;
			text-align: center;
			&:hover{
				opacity: 0.8;
			}
		}
		& img{
			aspect-ratio: 262 / 80;
			object-fit: contain;
			&[src^="data"]{
				object-fit: cover;
			}
		}
	}
	#fNav{
		& ul{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			grid-gap: clamp(16px, calc(32 / 768 * 100dvw), 32px);
		}
		& li{
			display: contents;
		}
		& a{
			display: grid;
			grid-template-columns: 0 auto;
			align-items: center;
			width: min(80%, 280px);
			min-height: clamp(56px, calc(64 / 768 * 100dvw), 64px);
			padding: 8px clamp(28px, calc(32 / 768 * 100dvw), 32px);
			background: white;
			border: 1px solid var(--color-border);
			border-radius: clamp(28px, calc(32 / 768 * 100dvw), 32px);
			font-weight: 700;
			text-align: center;
			text-wrap: balance;
			&:before{
				content: "";
				justify-self: center;
				aspect-ratio: 1;
				width: 8px;
				background: currentColor;
				border-radius: 100%;
				transition: all 0.2s ease-out;
			}
			&:hover{
				background: var(--color);
				border-color: transparent;
				color: white;
				&:before{
					background: var(--color-theme);
				}
			}
		}
	}
	#fAddress{
		font-weight: 700;
		text-align: center;
		& h3{}
		& h3+div{
			margin-top: 1em;
		}
		& dl{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}
		& dt{
			display: flex;
			&:after{
				content: ":";
				display: inline-block;
				width: 1em;
				text-align: center;
			}
		}
	}
	#copyright{
		& p{
			font-weight: 700;
			font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
			text-align: center;
		}
}
}

#floatingNav{
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	grid-gap: 0.25em 1.5em;
	min-height: 96px;
	padding: 16px calc(var(--wrap-space) / 2);
	background: #fff;
	filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.25));
	font-size: clamp(12px, calc(15 / 1366 * 100dvw), 15px);
	.scrollTop &{
		background: unset;
		filter: unset;
	}
	& h2{
		display: block;
		aspect-ratio: 3.8 / 1;
		height: clamp(48px, calc(56 / 1366 * 100dvw), 56px);
		background: url('/common/images/ito.logoType.svg') no-repeat -8% top / auto 166%, url('/common/images/ito.logoType.svg') no-repeat right 103% / auto 290%;
		font-size: 0;
		transition: none;
		cursor: pointer;
	}
	& details{
		position: relative;
		&::details-content{
			display: contents;
		}
		& summary{
			display: grid;
			justify-items: center;
			font-weight: 700;
			font-size: 0.875em;
			transition: color 0.2s ease-out;
			cursor: pointer;
			text-align: center;
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 24px;
				background: currentColor;
				-webkit-mask: no-repeat center / contain;
			}
		}
		&:not([open]){
			& summary{
				#floatingNavLanguage &:before{
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.32,6.86c0,.24-.02,1.27.14,2.14.29-.3.93-.96,1.49-2.29-.8-.05-1.39.09-1.63.15ZM3.73,9.32c0,.08,0,.79.74.79.41,0,.74-.16,1.11-.38-.08-.38-.25-1.25-.25-2.49-1.6.84-1.6,1.87-1.6,2.08ZM22,10h-8V2c0-1.1-.9-2-2-2H2C.9,0,0,.9,0,2v10c0,1.1.9,2,2,2h8v8c0,1.1.9,2,2,2h10c1.1,0,2-.9,2-2v-10c0-1.1-.9-2-2-2ZM8.25,11.42c-.45,0-.51-.4-.51-.55,0-.36.2-.4.47-.46.55-.11,1.96-.4,1.96-1.86,0-.8-.45-1.43-1.24-1.67-1.61,3.67-3.67,4.25-4.52,4.25-.92,0-1.7-.61-1.7-1.79,0-1.53,1.33-2.68,2.66-3.17.03-.43.04-.57.11-1.16-.08,0-1.01.02-1.58,0-.35,0-.73-.02-.73-.55s.39-.52.56-.52c.12,0,.62.03.72.03.53.02.96.01,1.19,0,.22-1.32.36-1.41.72-1.41.13,0,.55.04.55.43,0,.1-.02.18-.21.94,1.14-.07,2.07-.21,2.33-.25.44-.06,1.01-.15,1.06-.15.38,0,.49.3.49.53,0,.38-.29.46-.55.52-.29.06-1.23.24-3.53.38-.05.28-.07.44-.12.92.28-.06.67-.14,1.34-.14,2.59,0,3.56,1.41,3.56,2.84,0,2.43-2.69,2.83-3.03,2.83ZM23,22c0,.55-.45,1-1,1h-10c-.55,0-1-.45-1-1v-10c0-.55.45-1,1-1h10c.55,0,1,.45,1,1v10ZM18.18,13.84c-.18-.47-.37-.99-1.17-.99s-1,.5-1.19.99l-2.32,6.16c-.09.24-.16.41-.16.57,0,.44.53.58.81.58.47,0,.55-.21.72-.7l.48-1.37h3.3l.48,1.37c.17.48.25.7.71.7.31,0,.82-.14.82-.58,0-.14-.04-.26-.16-.57l-2.32-6.16ZM15.78,17.87l1.22-3.46,1.22,3.46h-2.44Z"/></svg>');
				}
				#floatingNavSearch &:before{
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.71,22.29l-5.07-5.07c-.39-.39-1.02-.39-1.41,0s-.39,1.02,0,1.41l5.07,5.07c.2.2.45.29.71.29s.51-.1.71-.29c.39-.39.39-1.02,0-1.41ZM9.5,0C4.25,0,0,4.25,0,9.5s4.25,9.5,9.5,9.5,9.5-4.25,9.5-9.5S14.75,0,9.5,0ZM9.5,17c-4.14,0-7.5-3.36-7.5-7.5s3.36-7.5,7.5-7.5,7.5,3.36,7.5,7.5-3.36,7.5-7.5,7.5Z"/></svg>');
				}
			}
		}
		&[open]{
			& summary+div{
				z-index: 1;
			}
			& summary{
				&:before{
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: none; stroke: black; stroke-width: 1.8px; stroke-linecap: round; stroke-linejoin: round;"><line x1="5" y1="5" x2="19" y2="19"/><line x1="19" y1="5" x2="5" y2="19"/></svg>');
				}
				&:after{
					display: none;
				}
			}
		}
	}
	& summary,
	& a{
		font-weight: 700;
		&:hover{
			color: var(--color-theme);
		}
	}
	&{
		& h2{
			grid-column: 1;
			grid-row: 1;
		}
		#floatingNavGlobal{
			grid-column: 2;
			grid-row: 1;
		}
		#floatingNavPickup{
			grid-column: 2;
			grid-row: 2;
			align-self: start;
		}
		#floatingNavLanguage{
			grid-column: 3;
			grid-row: 1;
		}
		#floatingNavSearch{
			grid-column: 4;
			grid-row: 1;
		}
		&:has(#floatingNavPickup){
			& h2,
			#floatingNavLanguage,
			#floatingNavSearch{
				grid-row: 1 / 3;
			}
			#floatingNavGlobal{
				align-self: end;
			}
		}
	}
	#floatingNavGlobal{
		& ul{
			display: flex;
			justify-content: end;
			column-gap: 1.5em;
		}
		& li{
			display: contents;
		}
		& a{
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: center;
			grid-gap: 0.5em;
			font-weight: 700;
			&:before{
				content: "";
				aspect-ratio: 2 / 1;
				width: 0.5em;
				background: currentColor;
				border-radius: 0.25em;
			}
			&[href="/ito/features/ito-overview"]{
				&:before{
					color: #3a9961;
				}
				&:hover{
					color: color-mix(in srgb, var(--color) 50%, #3a9961);
				}
			}
			&[href="/ito/features/ito-aruku"]{
				&:before{
					color: #ab8c4f;
				}
				&:hover{
					color: color-mix(in srgb, var(--color) 50%, #ab8c4f);
				}
			}
			&[href="/ito/features/ito-course"]{
				&:before{
					color: #ab8c4f;
				}
				&:hover{
					color: color-mix(in srgb, var(--color) 50%, #ab8c4f);
				}
			}
			&[href="/ito/features/ito-spot"]{
				&:before{
					color: #7d75a3;
				}
				&:hover{
					color: color-mix(in srgb, var(--color) 50%, #7d75a3);
				}
			}
			&[href="/ito/features/ito-specialty"]{
				&:before{
					color: #eca152;
				}
				&:hover{
					color: color-mix(in srgb, var(--color) 50%, #eca152);
				}
			}
			&[href="/ito/features/ito-event"]{
				&:before{
					color: #e68385;
				}
				&:hover{
					color: color-mix(in srgb, var(--color) 50%, #e68385);
				}
			}
			&[href="/ito/features/ito-stay"]{
				&:before{
					color: #a2d7e6;
				}
				&:hover{
					color: color-mix(in srgb, var(--color) 50%, #a2d7e6);
				}
			}
			&[href="/ito/features/ito-access"]{
				&:before{
					color: #3a9961;
				}
				&:hover{
					color: color-mix(in srgb, var(--color) 50%, #3a9961);
				}
			}
		}
	}
	#floatingNavPickup{
		& ul{
			display: flex;
			justify-content: end;
			column-gap: 1.5em;
		}
		& li{
			display: contents;
		}
		& a{
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: center;
			grid-gap: 0.5em;
			font-weight: 700;
			&:before{
				content: "";
				aspect-ratio: 2 / 1;
				width: 0.5em;
				background: #9f9f9f;
				border-radius: 0.25em;
			}
			&:hover{
				color: color-mix(in srgb, var(--color) 50%, #9f9f9f);
			}
		}
	}
	#floatingNavLanguage{
		& summary+div{
			position: absolute;
			top: 100%;
			left: 50%;
			width: 6.2em;
			padding-top: 4px;
			transform: translateX(-50%);
		}
		& ul{
			display: grid;
			grid-row-gap: 4px;
			padding: 8px 16px;
			background: white;
			border: 1px solid var(--color-border);
			border-radius: 8px;
		}
		& li{
			display: contents;
		}
		& a{
			display: block;
			white-space: nowrap;
		}
	}
	#floatingNavSearch{
		& summary+div{
			position: absolute;
			top: 100%;
			right: 0;
			width: 320px;
			padding-top: 4px;
		}
	}
}

#pageTop{
	position: sticky;
	bottom: 16px;
	justify-self: end;
	display: grid;
	align-content: center;
	aspect-ratio: 1;
	width: 88px;
	margin: -16px 16px -72px -16px;
	background: var(--color);
	border: 2px solid currentColor;
	border-radius: 100%;
	color: #fff;
	font-weight: 500;
	font-size: 14px;
	text-align: center;
	line-height: 1.2;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s ease-out 1s;
	overflow: hidden;
	z-index: 100;
	&{
		@media (min-width: 576px) {
			bottom: 24px;
			width: 96px;
			margin: -48px 24px;
			font-size: 16px;
		}
		@media (min-width: 1200px) {
			bottom: 32px;
			width: 128px;
			margin: -64px 32px;
			border-width: 3px;
			font-size: 18px;
		}
	}
	&:before{
		content: "";
		justify-self: center;
		aspect-ratio: 1;
		width: 1em;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.29 11.07"><polyline points=".96 10.11 9.15 1.93 17.33 10.11" style="fill: none; stroke: black; stroke-miterlimit: 10; stroke-width: 2.73px;"/></svg>') center no-repeat;
		-webkit-mask-size: contain;
		background: currentColor;
		transform: translateY(-50%);
		transition: transform 0.2s ease-out;
	}
	&:hover:before{
		transform: translateY(-75%);
	}
	.done:not(.scrollTop) &{
		opacity: 1;
	}
}

#pagenation{
	overflow: hidden;
	}
	#pagenation:not(:has(a)){
		display: none;
		}
	#pagenation :where(ul,ol){
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		grid-gap: 8px;
		width: var(--wrap);
		margin: auto;
		list-style: none;
		}
	#pagenation a{
		display: grid;
		text-decoration: none;
		}
		#pagenation a:not([rel]){
			place-items: center;
			aspect-ratio: 1;
			width: 48px;
			background: #fff;
			border: 1px solid currentColor;
			border-radius: 24px;
			color: inherit;
			font-weight: 500;
			line-height: 1;
			}
		#pagenation a[rel]{
			align-items: center;
			grid-gap: 4px;
			color: inherit;
			}
			#pagenation a[rel]:before{
				aspect-ratio: 1;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.163 4.516c0.418 0.408 4.502 4.695 4.502 4.695 0.223 0.219 0.335 0.504 0.335 0.789s-0.112 0.57-0.335 0.787c0 0-4.084 4.289-4.502 4.695-0.418 0.408-1.17 0.436-1.615 0-0.446-0.434-0.481-1.041 0-1.574l3.747-3.908-3.747-3.908c-0.481-0.533-0.446-1.141 0-1.576s1.197-0.409 1.615 0z" /></svg>') center no-repeat;
				-webkit-mask-size: contain;
				background: currentColor;
				}
		#pagenation a[rel="prev"],
		#pagenation a[rel="next"]{
			aspect-ratio: 1;
			width: 48px;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.58 16" style="fill: none; stroke: black; stroke-miterlimit: 10; stroke-width: 2px;"><line x1=".83" y1="7.93" x2="15.17" y2="7.93"/><polyline points="9.3 2.14 15.17 8 9.3 13.86"/></svg>') center no-repeat;
			-webkit-mask-size: 16.58px;
			background: currentColor;
			font-size: 0;
			}
		#pagenation a[rel="prev"]{
			transform: scale(-1, 1);
			}
		#pagenation a.lsc-current-page{
			background: var(--color-theme);
			color: #fff;
			pointer-events: none;
			}
	#pagenation ul{}
		#pagenation ul li{
			display: flex;
			}
		#pagenation ul li+li{}
			#pagenation ul li+li:before{
				content: "｜";
				margin-right: 8px;
				}

.infoWin{}
	[LSC-LT="dummy"] .infoWin{
		position: absolute;
		top: 50%;
		left: 50%;
		width: min(80vw, 320px);
		padding: 8px;
		background: #fff;
		border-radius: 8px;
		transform: translate(-50%, -50%);
		z-index: 1;
		}
	.infoWin dl{
		display: grid;
		grid-template-areas: 'title title' 'photo photo';
		grid-template-columns: 1fr 1fr;
		grid-gap: 8px;
		max-width: 320px;
		padding: 4px;
		font-weight: 500;
		}
	.infoWin dt{
		grid-area: title;
		font-weight: 500;
		padding: 0 8px;
		}
	.infoWin dd{
		display: contents;
		}
	.infoWin img{
		grid-area: photo;
		aspect-ratio: 1 / 0.667;
		object-fit: cover;
		border-radius: 4px;
		}
	.infoWin a{
		display: grid;
		align-items: center;
		min-height: clamp(24px, 4.8vw, 32px);
		padding: 4px 8px;
		background: var(--color-theme);
		border-radius: 4px;
		color: #fff;
		font-size: clamp(12px, 2.1vw, 14px);
		text-align: center;
		text-decoration: none;
		}
		.infoWin a[href*="www.google.co.jp"]{
			order: 1;
			background: #333;
			}
			.infoWin dd:last-child a[href*="www.google.co.jp"]{
				grid-column: 1 / 3;
				justify-self: center;
				width: 50%;
				}


.fr-view{
	& h1,
	& h2,
	& h3,
	& h4,
	& h5,
	& h6{
		margin-bottom: .5rem;
		font-family: inherit;
		font-weight: 500;
		line-height: 1.1;
		color: inherit;
	}
	& h1{
		font-size: 2.5rem;
	}
	& h2{
		font-size: 2rem;
	}
	& h3{
		font-size: 1.75rem;
	}
	& h4{
		font-size: 1.5rem;
	}
	& h5{
		font-size: 1.25rem;
	}
	& h6{
		font-size: 1rem;
	}
	& p{
		margin-top: 0;
	}
	& td{
		padding: 0.5em;
		vertical-align: middle;
	}
	& ul,
	& ol{
		list-style: revert;
		margin: revert;
		padding: revert;
	}
	& hr{
		margin-top: 1rem;
		margin-bottom: 1rem;
		border: 0;
		border-top: 1px solid rgba(0, 0, 0, .1)
	}
	& small{
		font-size: 80%;
		font-weight: 400;
	}
	& img{
		width: unset;
		max-width: 100%;
	}
	& iframe{
		max-width: 100%;
		[src*="youtube.com"]{
			aspect-ratio: 16 / 9;
		}
		[src*="www.google.com/maps/"]{
			aspect-ratio: 3 / 2;
		}
	}
}

.translated-ltr{
	& font{
		display: contents;
	}
	& wbr:not(:lang(ja)){
		display: none;
	}
}

.gsc-control-cse{
	display: contents;
	.gsc-control-wrapper-cse{
		display: contents;
	}
	.gsc-search-box{
		display: contents;
		& div,
		& table,
		& tbody,
		& tr,
		& td{
			&:not(.gsc-clear-button){
				display: contents;
			}
		}
		& td{
			&.gsc-search-button{
				display: contents !important;
			}
		}
		form&{
			all: unset;
			box-sizing: border-box;
			position: relative;
			display: flex;
			align-items: center;
			column-gap: 8px;
			padding: 0 16px;
			background: white;
			border: 1px solid var(--color-border);
			border-radius: 8px;
			overflow: hidden;
			& inout{
				grid-column: 1;
			}
			& a{
				grid-column: 2;
			}
			& button{
				grid-column: 3;
			}
		}
		& inout{
			all: unset;
			color: inherit;
			font: 400 16px inherit;
		}
		& a{
			all: unset;
			box-sizing: border-box;
			cursor: pointer;
			aspect-ratio: 1;
			width: 16px;
			height: 16px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M183.1 137.4C170.6 124.9 150.3 124.9 137.8 137.4C125.3 149.9 125.3 170.2 137.8 182.7L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7L320.5 365.3L457.9 502.6C470.4 515.1 490.7 515.1 503.2 502.6C515.7 490.1 515.7 469.8 503.2 457.3L365.8 320L503.1 182.6C515.6 170.1 515.6 149.8 503.1 137.3C490.6 124.8 470.3 124.8 457.8 137.3L320.5 274.7L183.1 137.4z"/></svg>') no-repeat center / contain;
			& span{
				display: none;
			}
		}
		& button{
			all: unset;
			box-sizing: border-box;
			cursor: pointer;
			display: block;
			aspect-ratio: 1;
			width: 24px;
			height: 24px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z"/></svg>') no-repeat center / contain;
			& svg{
				display: none;
			}
			&.gsc-search-button{
				display: block!important;
			}
		}
	}
	.gsc-results-wrapper-overlay{
		top: 24px;
		left: 50%;
		height: calc(100dvh - 48px);
		transform: translate(-50%, 0);
	}
	.gsc-modal-background-image{
		height: 100dvh;
	}
}