@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/* ----- common ----- */
html{font-size: 87.5%;} 
body,.font_sans-serif{
	font-family: "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	font-weight: 400;
	font-size: 1rem;
}
#wrap{opacity: 0;}
#loader{
	position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 9999;
	animation-name: blur;
	animation-duration: 1s;
	animation-timing-function: ease-in;
	animation-fill-mode: forwards;
	animation-iteration-count:1;
	mix-blend-mode: screen;
}
#loader::after{content: ""; position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;background-color: #fff;}
#loader .logo{
	max-width: 300px;width: 70%;z-index: 2;
	animation-name: loader;
	animation-duration: 3s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
	animation-iteration-count:infinite;
}
.shop_link a > div{display: inline-block;}
.top_header .shop_link{
	position: absolute;
	bottom: 30px;
	right: 65px;
}
header .shop_link a{display: inline-block;letter-spacing: 2px;transition: ease 0.3s;}
header .shop_link a:hover{letter-spacing: 4px;opacity: 0.6;}

.sns_links li a:hover{transform: translateY(-3px);}

.sc_nav{
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	box-sizing: border-box;
	background-color: rgba(255,255,255,0.9);
	z-index: 99;
	transition: ease 0.5s;
	transform: translateY(-100%);
}
.sc_nav.active{transform: translateY(0);}

#main_nav{background-color: #f2f2f2;}
#main_nav li a:hover,.sc_nav li a:hover{opacity: 1;transform: translateY(-3px);text-shadow: 0 3px 2px rgba(0,0,0,0.2);}
.sc_nav .shop_link a:hover{opacity: 1;transform: translateY(-3px);}

footer #footer #footer_links li::after{
	content: "|";
	display: inline-block;
	padding: 0 10px;
}
footer #footer #footer_links li:last-of-type::after{display: none;}
footer #footer #footer_links li a{transition: ease 0.3s;display: inline-block;}
footer #footer #footer_links li a:hover{opacity: 0.6;transform: translateY(-3px);}

#menu_bt,#menu_wrap{display: none;}
#menu_bt {
	position: fixed;
	top: 20px;
	right: 25px;
	width: 50px;
	height: 50px;
	z-index: 99;
	overflow: hidden;
}
#menu_bt > div{
	width: 100%;
}
#menu_bt > div span{
	display: block;
	width: 100%;
	height: 5px;
	margin-bottom: 10px;
	transition: ease 0.3s;
}
#menu_bt > div span:last-of-type{
	margin-bottom: 0;
}
.index #menu_bt > div span,#menu_bt.scroll > div span{background-color: white;}
 #menu_bt > div span,.index #menu_bt.scroll > div span,#menu_bt.active > div span{background-color: black;}

#menu_bt.active > div span:nth-of-type(1){
	width: 80%;
	transform: translateY(10px) rotate(45deg);
}
#menu_bt.active > div span:nth-of-type(2){
	transform: translateX(60px);
}
#menu_bt.active > div span:nth-of-type(3){
	width: 80%;
	transform: translateY(-20px) rotate(-45deg);
}

#page-top{
	right: 20px;
	transform: translateY(-30px);
	padding: 10px;
	line-height: 1;
	cursor: pointer;
	z-index: 9;
}
.fix_btn{
	width: 85%;
	box-sizing: border-box;
	position: fixed;
	bottom: 15px;
	left: 50%;
	-ms-transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
	z-index: 5;
}
@media  screen and (max-width: 667px){
	.fix_btn{width: 75%;}
	.fix_btn i{display: none;}
}

/* ----- index ----- */
#top_contents .con_img,#bg_video,#video,#top_cms figure{
	transition: ease 0.3s;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}
#top_contents .con_img:hover,#top_cms figure:hover{
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
}
#bg_video{
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}
#bg_video::before{
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #000000;
	opacity: 0.3;
	z-index: 1;
	mix-blend-mode: multiply;
}
header.top_header #header > div {
    order: inherit;
	z-index: 1;
}
.top_header .fv_box{
	-webkit-filter: blur(30px);
	-moz-filter: blur(30px);
	-o-filter: blur(30px);
	-ms-filter: blur(30px);
	filter: blur(30px);
}
.top_header .fv_box.active{
	animation: noblur 1s linear forwards;
}

.top_header .sns_links li img{
	width: 25px;
    display: block;
}
.top_header .sns_links ul li a{
	background-color: #fff;
    border-radius: 50%;
    padding: 12px;
}

.intro_title span{max-height: 300px;}
#intro_h .intro_more{cursor: pointer;}

.more_h::before, .more_h::after{
    position: absolute;
    content: "";
    width: 10px;
    height: 1px;
    background-color: currentColor;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
	z-index: 2;
}
.more_h::after{
    transition: transform 0.5s;
    transform: rotate(90deg);
}
.more_h.active::after{
    transform: rotate(0deg);
}
#top_cms .more_h::after{display: none;}
#top_cms .more_h::before{
	background-color: white;
	width: 30px;
	transition: width 0.5s;
	mix-blend-mode: exclusion;
}
#top_cms .more_h:hover::before{width: 40px;}

#top_gallery .box_wrap{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    height: 800px;
}
#top_gallery .cate_box:not(:nth-of-type(1)){
    transition: filter 0.3s;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}
#top_gallery .cate_box:hover{
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
}
#top_gallery .cate_box:nth-of-type(1){grid-area: 1 / 1 / 2 / 2;}
#top_gallery .cate_box:nth-of-type(2){grid-area: 1 / 2 / 2 / 4;}
#top_gallery .cate_box:nth-of-type(3){grid-area: 1 / 4 / 3 / 5;}
#top_gallery .cate_box:nth-of-type(4){grid-area: 2 / 3 / 3 / 4;}
#top_gallery .cate_box:nth-of-type(5){grid-area: 2 / 1 / 4 / 3;}
#top_gallery .cate_box:nth-of-type(6){grid-area: 3 / 3 / 4 / 5;}

@media screen and (max-width: 667px){
#top_gallery .box_wrap{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    height: 500px;
}
#top_gallery .cate_box:nth-of-type(1){grid-area: 1 / 1 / 2 / 3;}
#top_gallery .cate_box:nth-of-type(2){grid-area: 2 / 1 / 4 / 2;}
#top_gallery .cate_box:nth-of-type(3){grid-area: 2 / 2 / 3 / 3;}
#top_gallery .cate_box:nth-of-type(4){grid-area: 1 / 3 / 3 / 4;}
#top_gallery .cate_box:nth-of-type(5){grid-area: 3 / 2 / 5 / 4;}
#top_gallery .cate_box:nth-of-type(6){grid-area: 4 / 1 / 5 / 2;}
}

#top_cms .top_cms_box:last-of-type{margin-bottom: 0;}


/* ----- other ----- */
#page_title{
	background-position: center center;
	background-size: cover;
	box-sizing: border-box;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}
#page_title{
	z-index: 1;
	-webkit-filter: blur(30px);
	-moz-filter: blur(30px);
	-o-filter: blur(30px);
	-ms-filter: blur(30px);
	filter: blur(30px);
}
#page_title.active{
	animation: noblur 1s linear forwards;
}
/* pan */
.pan:not(.pc_hide){
	position: absolute;
    transform: rotate(90deg);
}
.pan > div{position: relative;}
.pan > div:before{
	content: "";
	display: block;
	background-color: white;
	width: 30px;
	height: 1px;
	position: absolute;
	top:50%;
	left: 0;
	-ms-transform: translate(0,-50%);
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
}
.pan:not(.sp_hide) > div:before{background-color: black;}
.pan p:nth-of-type(2):before{
	content: "/";
	position: absolute;
	left: -3px;
}

.pager li{margin-right: 30px!important;}
.pager li:last-of-type{margin-right: 0px!important;}
.pager li a{padding: 10px;transition: ease 0.3s;display: block;}
.pager li a:hover{opacity: 0.6;transform: translateY(-2px);}

#cate_list_title{transition: ease 0.3s;}
#cate_list_title.active{margin-bottom: 50px;}
#cate_list_title span{cursor: pointer;}
#cate_list_title span i{opacity: 0.5;transition: ease 0.3s;}
#cate_list_title span:hover i{opacity: 1;}
#cate_list_title.active span i{transform: rotate(180deg);}

.cate_list a:hover{transform: translateX(-3px)}

#page07 #map_h{height: 300px;}
#page07 #map_h iframe{width: 100%;height: 100%;}

#page08 #form_bt input{transition: ease 0.3s;cursor: pointer;}
#page08 #form_bt input:hover{opacity: 0.5;}



#top_cms .more_h,#page10 ul li a{position: relative;overflow: hidden;transition: ease 0.3s;}
#page10 ul li a:hover{box-shadow: 0 3px 3px rgba(0,0,0,0.2);transform: translateY(-3px)}
#top_cms .more_h span,#page10 ul li a span{position: relative;z-index: 2;}
#top_cms .more_h:hover span,#page10 ul li a:hover span{opacity: 1;}
#top_cms .more_h span.on,#page10 ul li a span.on{
	position: absolute;
	top: 0;
	left: 2px;
	width: 100%;
	height: 100%;
	z-index: 1;
	transform: translateX(100%);
	animation-name: more;
	animation-duration: 0.3s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}
#top_cms .more_h:hover span.on,#page10 ul li a:hover span.on{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	animation-name: more_hover;
	animation-duration: 0.3s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

/* ----- animation ----- */
@keyframes loader {
	0% {
		opacity:0;
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		filter: grayscale(100%);
	}
	50% {
		opacity:1;
		-webkit-filter: grayscale(0%);
		-moz-filter: grayscale(0%);
		-ms-filter: grayscale(0%);
		-o-filter: grayscale(0%);
		filter: grayscale(0%);
	}
	100% {
		opacity:0;
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		filter: grayscale(100%);
	}
}
@keyframes more {
	0% {transform:translateX(0);}
	100% {transform:translateX(100%);}
}
@keyframes more_hover {
	0% {transform:translateX(-100%);}
	100% {transform:translateX(0);}
}
@keyframes menu_open {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes blur {
	0% {
		-webkit-filter: blur(5px);
		-moz-filter: blur(5px);
		-o-filter: blur(5px);
		-ms-filter: blur(5px);
		filter: blur(5px);
	}
	100% {
		-webkit-filter: blur(0px);
		-moz-filter: blur(0px);
		-o-filter: blur(0px);
		-ms-filter: blur(0px);
		filter: blur(0px);
	}
}
@keyframes noblur{
	0% {
		-webkit-filter: blur(30px);
		-moz-filter: blur(30px);
		-o-filter: blur(30px);
		-ms-filter: blur(30px);
		filter: blur(30px);
	}
	100% {
		-webkit-filter: blur(0px);
		-moz-filter: blur(0px);
		-o-filter: blur(0px);
		-ms-filter: blur(0px);
		filter: blur(0px);
	}
}
@keyframes img_anime {
	0% {
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		filter: grayscale(100%);
		-webkit-filter: blur(5px);
		-moz-filter: blur(5px);
		-o-filter: blur(5px);
		-ms-filter: blur(5px);
		filter: blur(5px);
	}
	100% {
		-webkit-filter: grayscale(0%);
		-moz-filter: grayscale(0%);
		-ms-filter: grayscale(0%);
		-o-filter: grayscale(0%);
		filter: grayscale(0%);
		-webkit-filter: blur(0px);
		-moz-filter: blur(0px);
		-o-filter: blur(0px);
		-ms-filter: blur(0px);
		filter: blur(0px);
	}
}

/* ---------- PC 1366px~ ---------- */
@media screen and (max-width: 1367px){
/* ----- common ----- */
/* ----- index ----- */
	#top_contents2 .img1,#top_contents2 .img2{width: 60%!important;}
	#top_contents2 .contents2_txt{width: 100%!important;}
/* ----- other ----- */
    
/* ----- animation ----- */
    
}

/* ---------- PC 1280px~ ---------- */
@media screen and (max-width: 1281px){
/* ----- common ----- */
	header #header .shop_link a.font_20{font-size: 18px;}
	header #header .shop_link a i.font_30{font-size: 24px;}
	.sns_links li img{width: 30px;}
    
/* ----- index ----- */
	#top_contents1 figure{
		position: relative;
		bottom: 40px;
		z-index: 1;
	}
	#top_contents1 .contents1_txt{width: 60%!important;margin-left: 40%;padding-top: 30px;padding-right: 20px;}
	#top_contents1 .contents1_txt h3{margin-bottom: 20px;}
/* ----- other ----- */
	.main_wrap{padding-left: 50px;padding-right: 50px;}
    
/* ----- animation ----- */
    
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
/* ----- common ----- */
	#menu_bt {
		display: block;
	}
    .point_none{pointer-events: none;}
	#menu_wrap{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		box-sizing: border-box;
		background-color: rgba(255,255,255,0.95);
		z-index: 98;
		opacity: 0;
		animation-name: menu_open;
		animation-duration: 0.3s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	#menu_wrap.active{
		display: block;
	}
	#menu_wrap.active > div{
		-webkit-filter: blur(5px);
		-moz-filter: blur(5px);
		-o-filter: blur(5px);
		-ms-filter: blur(5px);
		filter: blur(5px);	
		animation-name: blur;
		animation-duration: 0.6s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	#menu_wrap ul li{margin-bottom: 30px;}
/* ----- index ----- */
	.top_video,.top_header #main_img,#video{height: 56vw;}
	.top_header .shop_link{position: static;}
	
	#top_contents1 .contents1_txt{width: 70%!important;margin-left: 30%;}

	#top_contents2 .img1,#top_contents2 .img2{width: 80%!important;}
	#top_contents2 .contents2_txt{width: 100%!important;}

/* ----- other ----- */

/* ----- animation ----- */
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
    
/* ----- common ----- */
	header #header{padding: 20px;}
	footer #footer #map iframe{width: 100%;height: 350px;}
	#menu_bt {
		top: 25px;
		right: 20px;
		width: 40px;
		height: 40px;
	}
	#menu_bt > div span{
		height: 3px;
	}
	#menu_bt.active > div span:nth-of-type(1){
		width: 80%;
		transform: translateY(6px) rotate(45deg);
	}
	#menu_bt.active > div span:nth-of-type(2){
		transform: translateX(50px);
	}
	#menu_wrap ul li{margin-bottom: 10px;}
	#page-top{
		right: 10px;
		transform: translateY(-20px);
		padding: 5px;
	}

/* ----- index ----- */
	.intro_title span{max-height: 250px;}
	
	#top_contents1 figure{bottom: 0;}
	#top_contents1 .contents1_txt{width: 100%!important;margin-left: 0;}	
	#top_contents1 .contents1_txt h3{transform: translateX(0px);}
	#top_contents .con_img{height: 60vw;}
	
	#top_contents2 .img1,#top_contents2 .img2{width: 100%!important;transform: translateY(0);}
	#top_cms .top_cms_box .more a{transition: all 0s;}
/* ----- other ----- */
	.main_wrap{padding-left: 20px;padding-right: 20px;}
	.pager li:not(.prev){display: none;}

	#page09 .box p{letter-spacing: 2px;padding-left: 0;}

/* ----- animation ----- */
	@keyframes more_hover {
		0% {transform:translateX(0);}
		100% {transform:translateX(0);}
	}
}
@media screen and (orientation: landscape) {
	#menu_wrap{overflow: auto;}
	#menu_wrap > div{position: static;transform: translate(0);padding: 30px;}
}