/* CSS Document */

body{
	background: #E0FFFF;
	}

img[src="[url]"]{
	display: block;
	background: var(--dummy);
	background-size: contain;
	}

article{
	display: grid;
	grid-gap: clamp(24px, 4.8vw, 32px) 0;
	grid-template-columns: 1fr var(--wrap) 1fr;
	}
	article > *{
		grid-column: 2;
		}
	article h2{
		justify-self: center;
		}

#header{}
	@media (min-width: 992px) {
		#header{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			background: none;
			border: none;
			}
			#header #siteName{
				display: none;
				}
			#header #hNav{
				margin-left: 152px;
				}
		}
#siteName{}
	@media (min-width: 992px) {
		#siteName a{
			background-image: url("/notofukko/images/logoType.webp");
			}
		}

#hNav{
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	}

#hNavGlobal{
	color: #fff;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
	}

#hNavPickup{
	color: #fff;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
	}

#pagePath{
	display: none;
	}

#footer{
	border: none;
	}

#hero{
	position: relative;
	background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" fill="none" stroke="rgba(255, 255, 255, 0.5)" stroke-width="8" r="35" stroke-dasharray="164.93361431346415 56.97787143782138"><animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform></circle></svg>') center no-repeat;
	background-size: 160px;
	}
	#hero:before{
		content: "";
		position: absolute;
		top: 8px;
		left: 8px;
		width: 96px;
		aspect-ratio: 1 / 1.56;
		background: url("/notofukko/images/logoType_vt.webp") center top no-repeat;
		background-size: cover;
		pointer-events: none;
		z-index: 1;
		}
	@media (min-width: 992px) {
		#hero{
			margin-top: 44px;
			}
		#hero:before{
			top: 0;
			left: 0;
			width: 128px;
			}
		}

#emergency{
	visibility: hidden;
}

#heroSlide{
	transition: opacity 0.2s ease-out;
	opacity: 0;
	}
	#heroSlide dl{
		position: relative;
		display: grid;
		grid-template-rows: 1fr auto 1fr;
		aspect-ratio: 390 / 540;
		}
		#heroSlide dl:has(:not(dt:empty)):before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 75%);
			pointer-events: none;
			z-index: 1;
			}
	#heroSlide dl+dl{
		display: none;
		}
	#heroSlide dt{
		grid-column: 1;
		grid-row: 2;
		align-self: center;
		justify-self: center;
		padding: 16px;
		color: #fff;
		font-family: var(--font-min);
		font-size: clamp(24px, 4.8vw, 32px);
		writing-mode: vertical-rl;
		line-height: 1.65;
		text-shadow: 0 0 5px #000;
		text-decoration: none;
		pointer-events: none;
		z-index: 1;
		}
	#heroSlide dt+dd{
		grid-column: 1;
		grid-row: 3;
		justify-self: end;
		align-self: end;
		display: grid;
		place-items: center;
		max-width: 100%;
		min-height: clamp(40px, 9vw, 60px);
		padding: 8px 24px;
		background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 4"><rect width="4" height="4" fill="rgba(0, 0, 0, 0.05)"/></svg>');
		background-size: 8px 4px;
		color: #fff;
		font-size: clamp(12px, 2.7vw, 18px);
		text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
		pointer-events: none;
		z-index: 1;
		}
		#heroSlide dt+dd:empty{
			display: none;
			}
	#heroSlide dd{}
		#heroSlide dd:has(img){
			display: contents;
			}
		#heroSlide dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			}
		#heroSlide dd img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			}
	#heroSlide.slick-slider{
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: 'main';
		}
	#heroSlide.slick-initialized{
		opacity: 1;
		}
	#heroSlide .slick-list{
		grid-area: main;
		}
	#heroSlide .slick-arrow{
		grid-area: main;
		align-self: center;
		position: relative;
		color: #fff;
		filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.6));
		}
	#heroSlide .slick-prev{
		justify-self: start;
		margin-left: 20px;
		}
	#heroSlide .slick-next{
		justify-self: end;
		margin-right: 20px;
		}
	@media (min-width: 576px) {
		#heroSlide dl{
			aspect-ratio: 2 / 1;
			}
		}
	@media (min-width: 992px) {
		#heroSlide dl{
			padding-top: 100px;
			}
		#heroSlide .slick-prev{
			margin-left: 60px;
			}
		#heroSlide .slick-next{
			margin-right: 60px;
			}
		}

#special{
	margin: clamp(24px, 4.8vw, 32px) 0;
	}
	#special ul{
		display: grid;
		grid-gap: 16px;
		}
	#special li:has(a){
		display: contents;
		}
	#special li,
	#special a{
		display: grid;
		align-content: center;
		min-height: 64px;
		padding: 10px 24px;
		background: #d5d8db;
		border: 1px solid var(--color-border);
		border-radius: 32px;
		color: inherit;
		line-height: 1.65;
		text-decoration: none;
		}
	@media (min-width: 768px) {
		#special h2+div{
			text-align: center;
			}
		#special li,
		#special a{
			min-height: 96px;
			border-radius: 48px;
			padding: 8px 32px;
			font-size: 18px;
			text-align: center;
			}
		}
	@media (min-width: 1200px) {
		#special li,
		#special a{
			font-size: 20px;
			}
		}

#recommend{
	width: var(--wrap);
	margin: 80px auto;
	}
	#recommend h2+div{
		display: grid;
		grid-gap: 16px 24px;
		margin-top: clamp(24px, 4.8vw, 32px);
		}
		#recommend h2+div p{
			text-align: center;
			}
	#recommend section{
		margin-top: clamp(24px, 4.8vw, 32px);
		}
		#recommend section:not(.select){
			display: none;
			}
	#recommend h3{
		display: none;
		}
	#recommend h3+div{
		opacity: 0;
		transition: opacity 0.2s ease-out;
		}
	#recommend dl{
		position: relative;
		display: grid;
		grid-template-areas: 'photo';
		grid-gap: 16px;
		}
		#recommend dl:before{
			content: "";
			grid-area: photo;
			background: var(--dummy);
			background-size: contain;
			aspect-ratio: 1;
			}
	#recommend dt{
		color: #595757;
		font-size: clamp(16px, 2.7vw, 18px);
		font-weight: 500;
		line-height: 1.65;
		}
	#recommend dd{
		display: contents;
		}
		#recommend dd img{
			grid-area: photo;
			width: 100%;
			aspect-ratio: 1;
			object-fit: cover;
			}
		#recommend dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
			}
	#recommend .slick-slider{
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-gap: 24px 16px;
		}
	#recommend .slick-initialized{
		opacity: 1;
		}
	#recommend .slick-list{
		grid-column: 1 / 3;
		grid-row: 1;
		padding-right: 20px;
		overflow: visible;
		}
	#recommend .slick-slide{
		margin: 0 20px 0 0;
		}
	#recommend .slick-prev{
		justify-self: end;
		}
	@media (min-width: 992px) {
		#recommend .slick-list{
			margin: 0 -20px;
			padding-right: 0;
			overflow: hidden;
			}
		#recommend .slick-slide{
			margin: 0 20px;
			}
		}
	@media (min-width: 1200px) {
		#recommend h2+div{
			grid-template-columns: auto auto;
			align-items: center;
			justify-content: start;
			padding-top: 20px;
			}
		}

#information{
	margin: clamp(64px, 12vw, 80px) 0;
	}
	#information h2+div{
		display: grid;
		grid-gap: 18px 24px;
		}
	#information h2+div+div{
		margin-top: 16px;
		}

#blog{
	margin-top: clamp(64px, 12vw, 80px);
	padding: clamp(48px, 9.6vw, 64px) 0 clamp(24px, 4.8vw, 32px) 0;
	padding-bottom: clamp(64px, 12vw, 80px);
	background: var(--color-theme);
	}
	#blog dl{
		position: relative;
		display: grid;
		grid-template-rows: auto 1fr;
		align-content: space-between;
		grid-gap: 16px;
		padding: 16px;
		background: #fff;
		border: 1px solid var(--color-border);
		}
	#blog dt{
		align-self: center;
		margin: 0 8px 8px 8px;
		font-weight: 500;
		line-height: 1.65;
		}
	#blog dd{
		order: -1;
		aspect-ratio: 1 / 1.271;
		}
		#blog dd:not(:has(img)){
			background: var(--dummy);
			background-size: contain;
			}
		#blog dd img{
			aspect-ratio: 1 / 1.271;
			object-fit: cover;
			}
		#blog dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			padding: 16px;
			font-size: 0;
			}
	#blog .slick-slider{
		position: relative;
		opacity: 0;
		transition: opacity 0.2s ease-out;
		}
		#blog .slick-slider.slick-initialized{
			opacity: 1;
			}
		#blog .slick-list{
			overflow: visible;
			}
		#blog .slick-track{
			display: flex;
			}
		#blog .slick-slide{
			float: inherit;
			display: grid !important;
			height: auto;
			margin: 0 10px;
			}
		#blog .slick-arrow{
			position: absolute;
			top: 50%;
			background: rgba(255, 255, 255, 0.7);
			transform: translateY(-50%);
			}
		#blog .slick-prev{
			left: 0;
			}
		#blog .slick-next{
			right: 0;
			}
	@media (min-width: 992px) {
		#blog .slick-arrow{
			opacity: 0;
			transition: opacity 0.2s ease-out;
			}
			#blog .slick-slider:hover .slick-arrow{
				opacity: 1;
				}
			}
	@media (min-width: 1200px) {
		#blog dt{
			font-size: 18px;
			}
		}

#banner{
	width: min(var(--wrap-fit), 1160px);
	margin: 80px auto;
	}
	#banner ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: clamp(32px, 6vw, 40px);
		}
	#banner li{
		width: min(100%, 360px);
		}
	#banner a{
		display: block;
		}
	#banner img{
		aspect-ratio: 1;
		object-fit: contain;
		}

#photo{
	margin-bottom: clamp(64px, 12vw, 80px);
	padding: clamp(24px, 4.8vw, 32px) 0 clamp(48px, 9.6vw, 64px) 0;
	background: var(--color-theme);
	}
	#photo h2+div+div{
		margin-top: 16px;
		}
	#photo dl{
		position: relative;
		display: grid;
		grid-template-rows: auto 1fr;
		align-content: space-between;
		grid-gap: 16px;
		padding: 16px;
		background: #fff;
		border: 1px solid var(--color-border);
		}
	#photo dt{
		align-self: center;
		margin: 0 8px 8px 8px;
		font-weight: 500;
		line-height: 1.65;
		}
	#photo dd{
		order: -1;
		aspect-ratio: 1 / 1.271;
		}
		#photo dd:not(:has(img)){
			background: var(--dummy);
			background-size: contain;
			}
		#photo dd img{
			aspect-ratio: 1 / 1.271;
			object-fit: cover;
			}
		#photo dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			padding: 16px;
			font-size: 0;
			}
	#photo .slick-slider{
		position: relative;
		opacity: 0;
		transition: opacity 0.2s ease-out;
		}
		#photo .slick-slider.slick-initialized{
			opacity: 1;
			}
		#photo .slick-list{
			overflow: visible;
			}
		#photo .slick-track{
			display: flex;
			}
		#photo .slick-slide{
			float: inherit;
			display: grid !important;
			height: auto;
			margin: 0 10px;
			}
		#photo .slick-arrow{
			position: absolute;
			top: 50%;
			background: rgba(255, 255, 255, 0.7);
			transform: translateY(-50%);
			}
		#photo .slick-prev{
			left: 0;
			}
		#photo .slick-next{
			right: 0;
			}
	@media (min-width: 992px) {
		#photo .slick-arrow{
			opacity: 0;
			transition: opacity 0.2s ease-out;
			}
			#photo .slick-slider:hover .slick-arrow{
				opacity: 1;
				}
			}
	@media (min-width: 1200px) {
		#photo dt{
			font-size: 18px;
			}
		}

#instagram{
	display: grid;
	grid-gap: clamp(24px, 4.8vw, 32px) 0;
	width: var(--wrap);
	margin: clamp(32px, 6vw, 40px) auto clamp(64px, 12vw, 80px) auto;
	}
	#instagram h2{
		width: fit-content;
		margin: 0 auto;
		}
	/*
	#instagram h2{
		width: fit-content;
		margin: 0 auto;
		display: grid;
		grid-template-columns: 40px auto;
		justify-content: center;
		align-items: center;
		grid-gap: 16px;
		font-weight: 500;
		font-size: clamp(20px, 3.6vw, 24px);
		letter-spacing: 0.1em;
		}
		
		#instagram h2:before{
			content: "";
			aspect-ratio: 1;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 2.881c4.275 0 4.781 0.019 6.462 0.094 1.563 0.069 2.406 0.331 2.969 0.55 0.744 0.288 1.281 0.638 1.837 1.194 0.563 0.563 0.906 1.094 1.2 1.838 0.219 0.563 0.481 1.412 0.55 2.969 0.075 1.688 0.094 2.194 0.094 6.463s-0.019 4.781-0.094 6.463c-0.069 1.563-0.331 2.406-0.55 2.969-0.288 0.744-0.637 1.281-1.194 1.837-0.563 0.563-1.094 0.906-1.837 1.2-0.563 0.219-1.413 0.481-2.969 0.55-1.688 0.075-2.194 0.094-6.463 0.094s-4.781-0.019-6.463-0.094c-1.563-0.069-2.406-0.331-2.969-0.55-0.744-0.288-1.281-0.637-1.838-1.194-0.563-0.563-0.906-1.094-1.2-1.837-0.219-0.563-0.481-1.413-0.55-2.969-0.075-1.688-0.094-2.194-0.094-6.463s0.019-4.781 0.094-6.463c0.069-1.563 0.331-2.406 0.55-2.969 0.288-0.744 0.638-1.281 1.194-1.838 0.563-0.563 1.094-0.906 1.838-1.2 0.563-0.219 1.412-0.481 2.969-0.55 1.681-0.075 2.188-0.094 6.463-0.094zM16 0c-4.344 0-4.887 0.019-6.594 0.094-1.7 0.075-2.869 0.35-3.881 0.744-1.056 0.412-1.95 0.956-2.837 1.85-0.894 0.888-1.438 1.781-1.85 2.831-0.394 1.019-0.669 2.181-0.744 3.881-0.075 1.713-0.094 2.256-0.094 6.6s0.019 4.887 0.094 6.594c0.075 1.7 0.35 2.869 0.744 3.881 0.413 1.056 0.956 1.95 1.85 2.837 0.887 0.887 1.781 1.438 2.831 1.844 1.019 0.394 2.181 0.669 3.881 0.744 1.706 0.075 2.25 0.094 6.594 0.094s4.888-0.019 6.594-0.094c1.7-0.075 2.869-0.35 3.881-0.744 1.050-0.406 1.944-0.956 2.831-1.844s1.438-1.781 1.844-2.831c0.394-1.019 0.669-2.181 0.744-3.881 0.075-1.706 0.094-2.25 0.094-6.594s-0.019-4.887-0.094-6.594c-0.075-1.7-0.35-2.869-0.744-3.881-0.394-1.063-0.938-1.956-1.831-2.844-0.887-0.887-1.781-1.438-2.831-1.844-1.019-0.394-2.181-0.669-3.881-0.744-1.712-0.081-2.256-0.1-6.6-0.1v0z" /><path d="M16 7.781c-4.537 0-8.219 3.681-8.219 8.219s3.681 8.219 8.219 8.219 8.219-3.681 8.219-8.219c0-4.537-3.681-8.219-8.219-8.219zM16 21.331c-2.944 0-5.331-2.387-5.331-5.331s2.387-5.331 5.331-5.331c2.944 0 5.331 2.387 5.331 5.331s-2.387 5.331-5.331 5.331z" /><path d="M26.462 7.456c0 1.060-0.859 1.919-1.919 1.919s-1.919-0.859-1.919-1.919c0-1.060 0.859-1.919 1.919-1.919s1.919 0.859 1.919 1.919z" /></svg>') center no-repeat;
			-webkit-mask-size: contain;
			}
		*/
	#instagram h2+div+div{
		margin-top: 16px;
		}
	#instagram ul{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 16px;
		}
		/*visumo用*/
		#instagram .ecbn-selection-page-wrapper .ecbn-selection-title, 
		#instagram .ecbn-selection-wrapper .ecbn-selection-title {
			margin: 0;
			}
		#instagram ul.ecbn-selection-snap {
			width: auto!important;
			height: auto!important;
			}
		#instagram ul.ecbn-selection-snap * {
			min-width: 100%;
			}
		/*visumo用ここまで*/
	#instagram li{
		display: contents;
		}
		#instagram li a{
			display: block;
			}
		#instagram li>div{
			background: #fff;
			}
		#instagram li img{
			aspect-ratio: 1;
			object-fit: cover;
			}
	@media (min-width: 992px) {
		#instagram ul{
			grid-template-columns: repeat(5, 1fr);
			}
		}
	@media (min-width: 1200px) {
		#instagram ul{
			grid-gap: 24px;
			}
		}

.tabA{
	display: flex;
	justify-content: center;
	}
	.tabA li{
		position: relative;
		display: grid;
		align-content: center;
		margin: 16px -1px 0 0;
		padding: clamp(4px, 1.2vw, 8px) clamp(12px, 2.4vw, 16px);
		background: #fff;
		border: 1px solid var(--color-border);
		color: inherit;
		font-size: clamp(12px, 2.4vw, 16px);
		line-height: 1.65;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		}
		.tabA li:before{
			content: "";
			position: absolute;
			right: 1px;
			bottom: 1px;
			width: 4px;
			height: 4px;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6"><polygon points="6 0 6 6 0 6 6 0"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			background: currentColor;
			pointer-events: none;
			}
		.tabA li.select{
			margin-top: 0;
			font-weight: 500;
			pointer-events: none;
			}
	@media (max-width: 575.98px) {
		.tabA li{
			width: 50%;
			}
		}
	@media (min-width: 768px) {
		.tabA li{}
			.tabA li:before{
				right: 2px;
				bottom: 2px;
				width: 6px;
				height: 6px;
				}
		}
	@media (min-width: 1200px) {
		.tabA li{
			margin-top: 0;
			}
			.tabA li.select{
				margin-top: -20px;
				}
		}

.more{
	display: grid;
	grid-template-columns: auto 50px;
	grid-template-areas: 'text icon';
	align-items: center;
	justify-content: center;
	grid-gap: 16px;
	min-height: 80px;
	padding: 8px;
	border: solid var(--color-border);
	border-width: 1px 0;
	color: #595757;
	font-weight: 500;
	line-height: 1.65;
	text-decoration: none;
	}
	.more:before{
		content: "";
		grid-area: icon;
		width: 50px;
		height: 50px;
		border: 1px solid var(--color);
		border-radius: 100%;
		}
	.more:after{
		content: "";
		grid-area: icon;
		justify-self: center;
		width: 18px;
		height: 16px;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.16 15.71"><polygon points="9.31 0 8.6 .71 15.25 7.35 0 7.35 0 8.35 15.25 8.35 8.6 15 9.31 15.71 17.16 7.85 9.31 0" /></svg>') center no-repeat;
		-webkit-mask-size: 17.16px 15.71px;
		background: var(--color);
		}