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

/* ----- common ----- */
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_bold{font-weight: 700;}

#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;
}
#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;
}

h1 img{max-width: 300px;}
header #header{justify-content: flex-end}
header #header .shop_link a{display: inline-block;letter-spacing: 2px;transition: ease 0.3s;}
header #header .shop_link a:hover{letter-spacing: 4px;opacity: 0.6;}

.sns_links li{margin: 0 15px;}
.sns_links li a{transition: ease 0.3s;display: block;}
.sns_links li a:hover{opacity: 0.5;transform: translateY(-3px);}
.sns_links li img{width: 40px;}

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

#main_nav li a,.sc_nav li a,.sc_nav .shop_link a{display: block;}
#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 #map iframe{width: 100%;height: 500px;}
footer #footer #footer_links li{margin-bottom: 10px;}
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;}

#page-top{
	right: 20px;
	transform: translateY(-30px);
	padding: 10px;
	line-height: 1;
	cursor: pointer;
	z-index: 9;
}
/* ----- index ----- */
#main_img img,#intro img,#top_contents1 img,#top_contents2 img,#top_contents3 img{
	transition: ease 0.3s;
	cursor: pointer;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
}
#main_img img:hover,#intro img:hover,#top_contents1 img:hover,#top_contents2 img:hover,#top_contents3 img:hover{
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
}
#main_img{
		-webkit-filter: blur(5px);
		-moz-filter: blur(5px);
		-o-filter: blur(5px);
		-ms-filter: blur(5px);
		filter: blur(5px);	
}
#main_img.active{
		animation-name: img_anime;
		animation-duration: 0.6s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
}
#main_img figure{position: relative;overflow: hidden;}
#main_img figure img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}

#intro .slick{margin-left: 15%;}
#intro .slick-dots {padding-top: 40px;}
#intro .slick-dots li{line-height: 1;}
#intro .slick-dots li button{display: none;}
#intro .slick-dots li{height:6px;width: 60px;box-sizing: border-box;border-style: solid;opacity: 0.3;margin: 0 10px;cursor: pointer;}
#intro .slick-dots li.slick-active{opacity: 1;}
#intro .intro_title{width: 15%;}
#intro .intro_img{margin-bottom: 80px;}
#intro .intro_txt h2{transform: translateY(-50%)}

#top_contents1 figure{
	position: absolute;
	bottom: 20px;
	left: 0;
	z-index: 1;
}

#top_contents1 .contents1_txt,#top_contents3 .contents1_txt{margin-left: 60%;box-sizing: border-box;}
#top_contents1 .contents1_txt h3{position: relative;z-index: 2;transform: translateX(-80px);text-shadow: 0 0 5px rgba(0,0,0,0.2);}

#top_contents3 .contents1_txt h3{position: relative;z-index: 2;text-shadow: 0 0 5px rgba(0,0,0,0.2);}

#top_contents2{padding-top: 50px;}
#top_contents2 .img1{transform: translateY(-50px);}
#top_contents2 .img2{transform: translateY(50px);}
#top_contents2 h3{position: relative;}
#top_contents2 h3::after{
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	border-top: 1px solid;
	z-index: 1;
}
#top_contents2 h3 span{position: relative;z-index: 2;}

#top_cms .top_cms_box:last-of-type{margin-bottom: 0;}
#top_cms .top_cms_box .more a{position: relative;overflow: hidden;}
#top_cms .top_cms_box .more a span{position: relative;z-index: 2;}
#top_cms .top_cms_box .more a span.on{
	position: absolute;
	top: 0;
	left: 0;
	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 .top_cms_box .more 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;
}

/* ----- other ----- */
#page_title{
	min-height: 300px;
	background-position: center center;
	background-size: cover;
	box-sizing: border-box;
	padding: 180px 50px;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}
.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)}

#page08 .tel a{display: inline-block;letter-spacing: 2px;transition: ease 0.3s;}
#page08 .tel a:hover{letter-spacing: 4px;opacity: 0.6;}
#page08 .tel_txt p span{display: block;}
#page08 #form_bt input{transition: ease 0.3s;cursor: pointer;}
#page08 #form_bt input:hover{opacity: 0.5;}

#page10 ul li{}
#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)}
#page10 ul li a span{position: relative;z-index: 2;}
#page10 ul li a:hover span{opacity: 1;}
#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;
}
#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 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 ----- */
	header #header{padding: 30px;justify-content: center}
	header #header h1{
		order: 1;
		width: 100%!important;
	}
	header #header > div{
		margin-top: 20px;
		order: 2;
		width: 50%!important;
	}
    
/* ----- 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 ----- */
	#intro h3{font-size: 36px;}
/*	#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;}
	#top_contents3 .contents1_txt h3{margin-bottom: 20px;}
	
/* ----- other ----- */
	.main_wrap{padding-left: 50px;padding-right: 50px;}
    
/* ----- animation ----- */
    
}

/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
/* ----- common ----- */
    
/* ----- index ----- */
	#intro .intro_title h3{display: inline-block;}
/* ----- other ----- */
	#page08 #form_bt input{padding-bottom: 12px;}
/* ----- animation ----- */
    
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
/* ----- common ----- */
	#menu_bt {
		position: fixed;
		display: block;
		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;
	}
	#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);
	}
    .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.9);
		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 ----- */
	#intro h3{font-size: 30px;}
	#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 ----- */
	#page_title{
		padding: 100px 50px;
	}

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

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
    
/* ----- common ----- */
	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 .sns_links{width: 300px;}
	#menu_wrap ul li{margin-bottom: 15px;}
	#page-top{
		right: 10px;
		transform: translateY(-20px);
		padding: 5px;
	}

/* ----- index ----- */
	#main_img.active{
			animation-duration: 0.4s;
	}
	#intro .slick{margin-left: 0;}
	#intro .slick-dots {padding-top: 30px;}
	#intro .slick-dots li{height:5px;width: 40px;}
	#intro .intro_title{width: 90%;transform: translateY(10px)}
	#intro h3{font-size: 26px;}
	#intro .intro_img{margin-bottom: 80px;}
	#intro .intro_txt h2{transform: translateY(-50%)}
	#top_contents1 figure{bottom: 0;}
	#top_contents1 .contents1_txt{width: 100%!important;margin-left: 0;}	
	#top_contents1 .contents1_txt h3{transform: translateX(0px);}
	
	#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;}
	#page_title{
		padding: 30px 30px 200px;
	}
	.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;}
}