@charset "utf-8";
/*		Contents - Index
-------------------------------------------------- */
#index-kv { position: relative; z-index: 100;}
#index-kv .kv-slide { margin: 0 auto 40px;}
#index-kv .slick-slide { background: #fff;}
#index-kv .slick-slide a,
#index-kv .slick-slide span{ display: block; width: 96%; margin: 0 auto;}
#index-kv .slick-slide a { opacity: 0.6;}
#index-kv .slick-slide a img,
#index-kv .slick-slide span img{ width: 100%;}
#index-kv .slick-slide.slick-active a{ opacity: 1;}
#index-kv .icn { position: relative; width: 100%; max-width: 1200px; margin: 0 auto;}
#index-kv .icn img { position: absolute; width: 90%; max-width: 420px; bottom:  0; right: 0;}
#index-kv .icn img.sp { display: none;}
#index-kv .pNav { width: 94%; max-width: 1180px; margin: 0 auto; padding-bottom: 80px;}
#index-kv .pNav ul { font-size: 0; text-align: center;}
#index-kv .pNav ul li { display: inline-block; width: 16%; margin: 0 auto; vertical-align: top;}
#index-kv .pNav ul li dl { position: relative; width: 96%; margin: 0 auto;}
#index-kv .pNav ul li dl dt { width: 94%; margin: 0 auto 12px;}
#index-kv .pNav ul li dl dt a { position: relative; display: block; width: 100%; padding-top: 100%;
 background: #fff; border: solid 1px #b31b3c; border-radius: 4px;}
#index-kv .pNav ul li dl dt a img { width: 80%; max-width: 120px; height: 80%; max-height: 85px;
 position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
}
#index-kv .pNav ul li dl dt a img.icn-2a { width: 50%; max-width: 80px; height: 50%; max-height: 75px; left: auto; right: 8%; top: 8%; transform: translate(0%,0%);}
#index-kv .pNav ul li dl dt a img.icn-2b { width: 50%; max-width: 100px; height: 50%; max-height: 85px; left: 8%; top: auto; bottom: 0px; transform: translate(0%,0%);}
#index-kv .pNav ul li dl dt a svg { width: 80%; max-width: 120px; height: 80%; max-height: 85px;
 position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); fill: #b21b3c;
}
#index-kv .pNav ul li dl dt a svg.icn-2a { width: 50%; max-width: 80px; height: 50%; max-height: 75px; left: auto; right: 8%; top: 8%; transform: translate(0%,0%);}
#index-kv .pNav ul li dl dt a svg.icn-2b { width: 50%; max-width: 100px; height: 50%; max-height: 85px; left: 8%; top: auto; bottom: 0px; transform: translate(0%,0%);}

#index-kv .pNav ul li dl dd { width: 100%; font-size: 18px; text-align: center;}
@media (min-width: 801px) {
	#index-kv .pNav ul li dl dt a:hover { background: #b21b3c;}
	#index-kv .pNav ul li dl dt a:hover svg { fill: #fff;}
}
@media (max-width: 1001px) {
	#index-kv .pNav { padding-left: 40px;}
	#index-kv .pNav ul li dl dd { font-size: 14px;}
}
@media (max-width: 801px) {
	#index-kv .pNav ul li { width: 32%;}
	#index-kv .pNav ul li dl dt a img.icn-2b,
	#index-kv .pNav ul li dl dt a svg.icn-2b{ width: 45%; bottom: 30px;}
	#index-kv .pNav ul li dl dd{ position: absolute; bottom: 10px; color: #b31b3c; text-align: center;}
}
@media (max-width: 641px) {
	#index-kv .slick-slide a { width: 100%;}
	#index-kv .icn { position: relative;}
	#index-kv .pNav { padding-left: 15px;}
	#index-kv .pNav ul li dl dt a img{ transform: translate(-50%,-70%);}
	#index-kv .pNav ul li dl dt a img.icn-2a,
	#index-kv .pNav ul li dl dt a svg.icn-2a { width: 40%; height: 40%;}
	#index-kv .pNav ul li dl dt a img.icn-2b,
	#index-kv .pNav ul li dl dt a svg.icn-2b { bottom: 20px;}
	#index-kv .pNav ul li dl dd{ font-size: 16px;}
}
@media (max-width: 481px) {
	#index-kv .kv-slide{ margin: 0 auto 20px;}
	#index-kv .icn { height: 50px;}
	#index-kv .icn img.pc { display: none;}
	#index-kv .icn img.sp { display: block; width: 85%; right: 20px;}
	#index-kv .pNav { padding-bottom: 30px;}
	#index-kv .pNav ul li dl dt a img,
	#index-kv .pNav ul li dl dt a svg{ width: 60%; height: 55%;}
	#index-kv .pNav ul li dl dt a img.icn-2b,
	#index-kv .pNav ul li dl dt a svg.icn-2b{ bottom: 10px;}
	#index-kv .pNav ul li dl dt a img.icn-3,
	#index-kv .pNav ul li dl dt a svg.icn-3 { width: 70%;}
	#index-kv .pNav ul li dl dt a img.icn-6,
	#index-kv .pNav ul li dl dt a svg.icn-6 { width: 82%;}
	#index-kv .pNav ul li dl dd{ bottom: 5px; font-size: 10px;}
}



.pos { position: absolute; left: 0; top: -140px;}
#pos-1.pos { top: -60px;}


#index-info { position: relative; background: #f6f3ee; transition: 0.7s ease; opacity: 0; transform: translate(0,20px);}
#index-info .inner-sct { width: 92%; max-width: 1000px; margin: 0 auto; padding: 50px 0;}
#index-info .box { display: flex; justify-content: space-between; width: 100%;}
#index-info .box .tit { width: 24%;}
#index-info .box .ctn { width: 76%; background: url(/img/line-dot.png) repeat-x 0 0, url(/img/line-dot.png) repeat-x 0 100%;}
#index-info .box .tit h2 { font-size: 24px; font-weight: 700;}
#index-info .box .ctn ul { padding: 20px;}
#index-info .box .ctn ul li { position: relative; margin-bottom: 20px; padding-left: 120px; font-size: 18px;}
#index-info .box .ctn ul li:last-child { margin-bottom: 0px;}
#index-info .box .ctn ul li span.date { position: absolute; left: 0; top: 0px;}
#index-info .box .ctn ul li a { color: #222; text-decoration: none;}
#index-info .box .ctn ul li a:hover { color: #b31b3c;}
#index-info.show { opacity: 1; transform: translate(0,0px);}
@media (max-width: 1001px) {
	#index-info .box .tit { width: 28%;}
	#index-info .box .ctn { width: 72%;}
	#index-info .box .tit h2 { font-size: 20px;}
}
@media (max-width: 801px) {
	#index-info .box { display: block;}
	#index-info .box .tit { width: 100%; margin: 0 auto 10px;}
	#index-info .box .ctn { width: 100%;}
	#index-info .box .tit h2 { text-align: center;}
	#index-info .box .ctn ul li { margin-bottom: 15px; padding-left: 100px; font-size: 16px;}
}
@media (max-width: 481px) {
	#index-info .inner-sct { padding: 30px 0;}
	#index-info .box .ctn { background-size: auto 3px, auto 3px;}
	#index-info .box .ctn ul { padding: 20px 10px;}
	#index-info .box .ctn ul li { margin-bottom: 10px; padding-left: 70px; font-size: 12px;}
}


#index-topics { position: relative; padding: 80px 0; transition: 0.7s ease; opacity: 0; transform: translate(0,20px);}
#index-topics .tag{ width: 90%; max-width: 920px; margin: 0 auto 40px;}
#index-topics .tag ul { padding: 1px; background: #b31b3c; font-size: 0; text-align: center;}
#index-topics .tag ul li { display: inline-block; width: 25%; border-left: solid 1px #b31b3c; font-size: 18px;}
#index-topics .tag ul li:first-child{ border: none;}
#index-topics .tag ul li a { display: block; padding: 8px 0; background: #fff; color: #000; text-decoration: none;}
#index-topics .tag ul li a:hover { background: #b31b3c; color: #fff;}
#index-topics .inner-sct { padding: 50px 0; background: #f6f3ee;}
#index-topics ul.topics { width: 92%; max-width: 1160px; margin: 0 auto; font-size: 0;}
#index-topics ul.topics li { display: inline-block; width: 33%; margin: 0 auto 40px; vertical-align: top;}
#index-topics ul.topics li a { position: relative; display: block; width: 94%; margin: 0 auto; border-radius: 6px; overflow: hidden; color: #000; text-decoration: none;
 opacity: 0; transform: translate(0,20px);
}
#index-topics ul.topics li:nth-child(1) a { transition: 0.7s ease;}
#index-topics ul.topics li:nth-child(2) a { transition: 0.7s ease 0.1s;}
#index-topics ul.topics li:nth-child(3) a { transition: 0.7s ease 0.2s;}
#index-topics ul.topics li:nth-child(4) a { transition: 0.7s ease 0.3s;}
#index-topics ul.topics li:nth-child(5) a { transition: 0.7s ease 0.4s;}
#index-topics ul.topics li:nth-child(6) a { transition: 0.7s ease 0.5s;}

#index-topics ul.topics li dl { width: 100%; background: #fff;}
#index-topics ul.topics li dl dt { position: relative; width: 100%; margin: 0 auto 15px; padding-top: 78%; overflow: hidden; background: #000; text-align: center;}
#index-topics ul.topics li dl dt.noImage{ background: #fafafa;}
#index-topics ul.topics li dl dt img { position: absolute; height: 100%; left: 50%; top: 50%; transition: 0.2s linear; transform: translate(-50%,-50%) scale(1.02);}
#index-topics ul.topics li dl dt.noImage img { width: 60% !important;}
#index-topics ul.topics li dl dd { width: 92%; margin: 0 auto;}
#index-topics ul.topics li dl dd.tit { font-size: 20px; font-weight: 700;}
#index-topics ul.topics li dl dd.txt { min-height: 4.5em; padding: 10px 0; font-size: 17px;}
#index-topics ul.topics li dl dd.update { border-top: dashed 1px #222; padding: 10px 0; font-size: 16px;}
#index-topics ul.topics li dl dd.update span { display: inline-block; width: 50px; margin-right: 8px;
 background: #e62922; border-radius: 4px;
 color: #fff; text-align: center;
}
#index-topics.show ,
#index-topics  ul.topics.show li a { opacity: 1; transform: translate(0,0);}
@media (min-width: 801px) {
	#index-topics ul.topics li a:hover { opacity: 0.8;}
	#index-topics ul.topics li a:hover dl dt img{ transform: translate(-50%,-50%) scale(1.1); opacity: 0.8;}
	#index-topics ul.topics li a:hover dl dd.tit,
	#index-topics ul.topics li a:hover dl dd.txt { color: #b31b3c;}
}
#index-topics .btn { width: 100%; max-width: 300px; margin: 0 auto;}
#index-topics .btn a { font-size: 18px;}
@media (max-width: 1001px) {
	#index-topics .tag ul li { font-size: 16px;}
	#index-topics ul.topics li dl dd.tit { font-size: 16px;}
	#index-topics ul.topics li dl dd.txt { font-size: 15px;}
	#index-topics ul.topics li dl dd.update { font-size: 14px;}
}
@media (max-width: 801px) {
	#index-topics ul.topics li { width: 50%; margin: 0 auto 30px;}
}
@media (max-width: 641px) {
	#index-topics ul.topics li dl dt { background: #fff;}
}
@media (max-width: 481px) {
	#index-topics { padding: 40px 0;}
	#index-topics .tag{ margin: 0 auto 20px;}
	#index-topics .tag ul li { font-size: 12px;}
	#index-topics .tag ul li a { padding: 4px 0;}
	#index-topics ul.topics li { display: block; width: 100%; margin: 0 auto 20px;}
	#index-topics ul.topics li dl dt { margin: 0 auto 10px; padding-top: 60%; background: #fff;}
	#index-topics ul.topics li dl dt.noImage { margin: 0 auto 15px;}
	#index-topics ul.topics li dl dt img { height: auto; width: 80%; transform: translate(-50%,-45%);}
	#index-topics ul.topics li dl dt.catch { padding-top: 20px;}
	#index-topics ul.topics li dl dt.catch img { position: relative; left: auto; top: auto; transform: translate(0%,0%); margin: 0 auto;}
	#index-topics ul.topics li dl dd.txt { min-height: auto; padding: 10px 0;}
	#index-topics .btn a { font-size: 15px;}
}


.index-shop { position: relative; transition: 0.7s ease; opacity: 0; transform: translate(0,20px);}
.index-shop.mb { margin: 0 auto 80px;}
.index-shop .inner-sct { padding: 40px 0 10px; background: #f6f3ee;}
.index-shop ul { width: 92%; max-width: 1200px; margin: 0 auto; font-size: 0;}
.index-shop ul li { display: inline-block; width: 20%; margin: 0 auto 40px; vertical-align: top;}
.index-shop ul li dl { position: relative; width: 94%; margin: 0 auto; opacity: 0; transform: translate(0,20px);}
.index-shop ul li:nth-child(1) dl { transition: 0.7s ease;}
.index-shop ul li:nth-child(2) dl { transition: 0.7s ease 0.1s;}
.index-shop ul li:nth-child(3) dl { transition: 0.7s ease 0.2s;}
.index-shop ul li:nth-child(4) dl { transition: 0.7s ease 0.3s;}
.index-shop ul li:nth-child(5) dl { transition: 0.7s ease 0.4s;}
.index-shop ul li:nth-child(6) dl { transition: 0.7s ease 0.5s;}
.index-shop ul li:nth-child(7) dl { transition: 0.7s ease 0.6s;}
.index-shop ul li:nth-child(8) dl { transition: 0.7s ease 0.7s;}
.index-shop ul li:nth-child(9) dl { transition: 0.7s ease 0.8s;}
.index-shop ul li:nth-child(10) dl{ transition: 0.7s ease 0.9s;}
.index-shop ul li:nth-child(11) dl{ transition: 0.7s ease 1.0s;}
.index-shop ul li dl dt { margin: 0 auto 4px; background: #000;}
.index-shop ul li dl dt a { display: block;}
.index-shop ul.floor-shop li dl dt a { padding: 35px 0; background: #fff;}
.index-shop ul.floor-shop li dl dt span { display: block; padding: 35px 0; background: #fff;}
.index-shop ul.floor-shop li dl dt span img { width: 100%;}
.index-shop ul.floor-cafe li dl dt a {}
.index-shop ul.floor-cafe li dl dt span { display: block; padding: 38px 0; background: #fff;}
.index-shop ul.floor-cafe li dl dt span img { width: 100%;}
.index-shop ul li dl dt a img { width: 100%; transition: 0.3s linear;}
.index-shop ul li dl dd { position: relative; font-size: 15px;}
.index-shop ul li dl dd span { display: inline-block; margin-right: 8px;}
.index-shop.show { opacity: 1; transform: translate(0,0);}
.index-shop ul.show li dl { opacity: 1; transform: translate(0,0);}
@media (min-width: 801px) {
	.index-shop ul.floor-shop li dl dt a:hover { opacity: 0.8;}
	.index-shop ul.floor-cafe li dl dt a:hover { opacity: 0.8;}
}
@media (max-width: 1201px) {
	.index-shop ul.floor-cafe li dl dt span { padding: 3.0vw 0;}
}
@media (max-width: 1001px) {
	.index-shop ul li { width: 25%;}
	.index-shop ul.floor-cafe li dl dt span { padding: 3.5vw 0;}
}
@media (max-width: 801px) {
	.index-shop ul li { width: 33%;}
	.index-shop ul.floor-shop li dl dt span,
	.index-shop ul.floor-shop li dl dt a { padding: 30px 0;}
	.index-shop ul.floor-cafe li dl dt span{ padding: 30px 0;}
	.index-shop ul li dl dd { padding-left: 30px; font-size: 14px;}
	.index-shop ul li dl dd span { position: absolute; left: 0; top: 0; display: block; margin-right: 0px;}
}
@media (max-width: 641px) {
	.index-shop ul li { width: 50%; margin: 0 auto 30px;}
	.index-shop ul li dl { background: #fff;}
	.index-shop ul li dl dt { margin: 0 auto; background: #fff;}
	.index-shop ul.floor-cafe li dl dt span{ padding: 7vw 0;}
	.index-shop ul li dl dd { padding-left: 0; padding-bottom: 5px; text-align: center;}
	.index-shop ul li dl dd span { position: relative; display: block; width: 100%; margin: 0 0 5px; padding: 2px;
	 color: #fff; font-size: 15px; font-weight: 700;
	}
	.index-shop ul.floor-shop li dl dd span { background: #b6a17d;}
	.index-shop ul.floor-cafe li dl dd span { background: #b31b3c;}
}
@media (max-width: 481px) {
	.index-shop .inner-sct { padding: 25px 0 10px;}
	.index-shop ul li { width: 50%; margin: 0 auto 20px;}
	.index-shop ul li dl dd { font-size: 11px;}
	.index-shop ul li dl dd span { font-size: 13px;}
}