@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Amatic+SC');

/* ===================================================================
#main
=================================================================== */
#main { position: relative; width: 100%; height: 100vh; margin-top: -100px; text-align: center; opacity: 0; }
#main.visible { opacity:1;
-webkit-transition: opacity 1.0s linear;
transition: opacity 1.0s linear; 
}
#main .youtube-wrap { width: 100%; height: 100%;  position: absolute; top: 0%; left: 0%; overflow: hidden; }
#main .youtube-wrap .youtube-box { position: absolute; top: 50%; left: 50%;}
#main .youtube-wrap .youtube-box iframe { width: 100%!important; height: 100%!important; }
#main:before { content: ""; position: absolute; z-index: 100; width: 100%; height: 100%; display: block;}

@media screen and (min-width:769px) {
	#main { margin-top: -60px; }
}

/* ===================================================================
#link
=================================================================== */
#link { overflow: hidden; }
#link .inner > * ul { letter-spacing: -.4em;}
#link .inner > * ul li { width: 50%; display: inline-block; vertical-align: top; letter-spacing: 0; }
#link .inner .hover-parent { position: relative; overflow: hidden; }
#link .inner .hover-parent > * { width: 100%; height: 100%; overflow: hidden; }
#link .inner .hover-mask { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: bold; }

#link .inner .link-2 { display: flex; }

@media screen and (min-width:769px) {
	#link .inner { display: table;}
	#link .inner > * { display: table-cell;vertical-align: top;}
	#link .inner .hover-parent:hover .hover-mask { opacity: 1; padding-bottom: 30px; }
	#link .inner .hover-parent img { 
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
	}
	#link .inner .hover-parent:hover img { transform: scale(1.1, 1.1); }
	#link .inner .hover-mask { width: 100%; height: 100%; padding: 30px 15px 0; font-size: 16px; font-size: calc((16/1000)*100vw); opacity: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0;
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
	}
	#link .inner .hover-mask.red { background: rgba(156,36,35,0.7); }
	#link .inner .hover-mask.blue { background: rgba(13,28,59,0.7); }
	#link .inner .hover-mask.gray { background: rgba(199,187,173,0.7); color: #170000; }
}
@media screen and (max-width:768px) {
	#link .inner .hover-mask {font-size: calc((24/750)*100vw);}
	#link .inner .hover-mask { /*width: 90%; width: calc(100% - 20px); height: 90%; height: calc(100% - 20px);*/ max-width: 90%; display: inline-table; margin: auto; padding: 2% 4%; background: rgba(255,255,255,0.9); color: #170000; position: absolute; bottom: 20px; left: 0; }
}

/* ===================================================================
#news
=================================================================== */

#news {	width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; }
#news .entry a { height: 100%; display: block;background-color: #fff; }
#news .entry .img {	width: 100%;height: 0;position: relative;overflow: hidden;padding-top: 56.25%; }
#news .entry .img img { width: auto;min-width: 100%;height: auto;min-height: 100%;position: absolute;top: 50%;left: 50%;-webkit-transform: translate3d(-50%, -50%, 1px);transform: translate3d(-50%, -50%, 1px); }
#news .entry .info { display: -webkit-box;display: -ms-flexbox;display: flex; }
#news .entry .info li { line-height: 1;margin-right: 2px;color: #999;font-family: Roboto, sans-serif;font-weight: 500;letter-spacing: .02em; }
#news .entry .info li.cate { border: 1px solid #ccc;border-radius: 3px; }
#news .entry .info li.date { margin-left: 2px; }
#news .scroll_set.entry .img:after, #news .scroll_set.entry .img:before { content: "";width: 100%;height: 100%;display: block;position: absolute;top: 0;right: 0;transition-property: width;transition-duration: .75s;transition-timing-function: cubic-bezier(.86, 0, .07, 1); }
#news .scroll_set.entry .img:before { background-color: hsla(0,0%,100%,.6);z-index: 2;transition-delay: .85s; }
#news .scroll_set.entry .img:after { background-color: #fff;z-index: 3;transition-delay: .15s; }
#news .scroll_start.entry .img:after, #news .scroll_start.entry .img:before { width: 0; }

@media screen and (min-width:769px) {
	#news {	margin-bottom: 10%; }
	#news .entry { width: 25%;position: relative; }
	#news .entry h3 { padding: 22px 25px 12px; }
	#news .entry .info { margin: 0 25px 25px; }
	#news .entry .info li {	padding: 2px 2px 1px; }
	#news .entry .info li.cate { font-size: 10px; }
	#news .entry .info li.date { font-size: 12px; }
	#news .entry:first-of-type { z-index: 14; }
	#news .entry:nth-of-type(2) { z-index: 13; }
	#news .entry:nth-of-type(3) { z-index: 12; }
	#news .entry:nth-of-type(4) { z-index: 11; }
	#news .entry a { transition: all .22s cubic-bezier(.25, .46, .45, .94); }
	#news .entry:hover { z-index: 15; }
	#news .entry:hover a { box-shadow: 12px 21px 36px 0 rgba(0,0,0,.15);-webkit-transform: translate3d(0, -15px, 1px);transform: translate3d(0, -15px, 1px); }
}

@media screen and (max-width:768px) {
	#news .entry span { font-size: 11px;width: 40px;height: 40px;line-height: 40px;}
	#news .entry { width: 50%;margin-bottom: 56px; }
	#news .entry .img { margin-bottom: 20px; }
	#news .entry h3 { overflow: hidden;padding: 0 5%;line-height: 1.6;font-size: 13px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; }
	#news .entry .info { margin: 15px 5% 0; }
	#news .entry .info li { padding: 2px; }
	#news .entry .info li.cate { font-size: 8px; }
	#news .entry .info li.date { font-size: 10px; }
}

/* ===================================================================
#description
=================================================================== */
#description { overflow: hidden; }
#description dl dt img { width: 100%; }
#description dl dd { background: url("../img/top/cont-bg01.png") repeat; background-size: cover; padding: 25px 30px; position: relative; }
#description dl .description-btn { width: 60%;  margin: 20px auto 0; background: #170000; }
@media screen and (min-width:769px) {
	#description dl { display: flex; }
	#description dl:nth-child(even) { flex-flow: row-reverse; }
	#description dl dt { width: 56%; }
	#description dl dd { width: 44%; font-size: 18px; font-size: calc((18/1000)*100vw); }
	#description dl .description-btn { max-width: 294px; position: absolute; bottom: 25px; left: 0; right: 0;
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
	}
	#description dl:nth-of-type(1) .description-btn:hover { background: #9c2423; }
	#description dl:nth-of-type(2) .description-btn:hover { background: #0d1c3b; }
}

@media screen and (max-width:768px) {
	#description dl { display: block; }
	#description dl .description-btn { max-width: 180px; }
	#description dl dd { font-size: calc((24/750)*100vw); }
}

/* ===================================================================
#slider
=================================================================== */
#slider { margin-bottom: 13%; padding: 0 2% 28px; }
#slider .slider-item li { padding: 0 10px; }
#slider .slider-item li a { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
#slider .slider-item li a > img { border-radius: 50%;	}
#slider .slider-item .slick-dots { display:block; width:100%; position:absolute; bottom:-25px; height:12px; text-align:center; }
#slider .slider-item .slick-dots li { display:inline-block; vertical-align:top; padding:0 5px; }
#slider .slider-item .slick-dots button { width:14px; height:14px; border:1px solid #8d5b28; display:block; text-indent:-9999px; background:#fff; cursor:pointer; padding:0; border-radius:50%; }
#slider .slider-item .slick-dots .slick-active button { background:#8d5b28; }

@media screen and (min-width:769px) {
	#slider .slider-item li a { border-radius: 50%; }
	#slider .slider-item li a img { border-radius: 50%;
		-webkit-transition: all 0.6s ease;
		-moz-transition: all 0.6s ease;
		-ms-transition: all 0.6s ease;
		-o-transition: all 0.6s ease;
		transition: all 0.6s ease;
	}
	#slider .slider-item li a:hover img { transform: scale(1.1, 1.1); }
	#slider .slider-item li a .hover-mask { width: 100%; border-radius: 50%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; display: flex; align-items: center; justify-content: center;  padding: 30px 0 0; overflow: hidden;
		-webkit-transition: all 0.6s ease;
		-moz-transition: all 0.6s ease;
		-ms-transition: all 0.6s ease;
		-o-transition: all 0.6s ease;
		transition: all 0.6s ease;
	}
	#slider .slider-item li.red a:hover .hover-mask { background: rgba(156,36,35,0.7); }
	#slider .slider-item li.blue a:hover .hover-mask { background: rgba(13,28,59,0.7); }
	#slider .slider-item li a:hover .hover-mask { opacity: 1; padding-bottom: 30px; }
}
@media screen and (max-width:768px) {
	#slider { overflow: hidden; padding-bottom: 25px; }
	#slider .slider-item { margin:  0 -8%; }
	#slider .slider-item .slick-dots button { width:10px; height:10px; }
	#slider .slider-item li a .hover-mask { margin: 6px auto 0;	}
}

/* ===================================================================
#pickup
=================================================================== */
#pickup > div { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#pickup .item { box-sizing: border-box; text-align: center; line-height: 1.6; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition-property: opacity, transform, -webkit-transform; transition-timing-function: cubic-bezier(.25, .25, .75, .75), cubic-bezier(.23, 1, .32, 1), cubic-bezier(.23, 1, .32, 1); transition-duration: .5s, .75s, .75s; }
#pickup .item a { display: block; }
#pickup .item img { width: 100%; height: auto; }
#pickup .item figcaption { font-family: Roboto, sans-serif; letter-spacing: .02em; font-weight: 700; }
#pickup .item p { color: #999; }
#pickup .item:nth-of-type(4n-3) { transition-delay: .35s, .1s; }
#pickup .item:nth-of-type(4n-2) { transition-delay: .45s, .2s; }
#pickup .item:nth-of-type(4n-1) { transition-delay: .55s, .3s; }
#pickup .item:nth-of-type(4n) { transition-delay: .65s, .4s; }

@media screen and (min-width:769px) { 
	#pickup .item { width: 33.3%; }
	#pickup .item:last-of-type, #pickup .item:nth-last-of-type(2), #pickup .item:nth-last-of-type(3), #pickup .item:nth-last-of-type(4) { margin-bottom: 0; }
	#pickup .item a { padding: 20% 11.905%; }
	#pickup .item figcaption { margin: 20.835% 0 3.79%; font-size: 16px; }
	#pickup .item p { font-size: 14px; }
	#pickup .item a { position: relative; transition: -webkit-transform .22s cubic-bezier(.25, .46, .45, .94); transition: transform .22s cubic-bezier(.25, .46, .45, .94); transition: transform .22s cubic-bezier(.25, .46, .45, .94), -webkit-transform .22s cubic-bezier(.25, .46, .45, .94); }
	#pickup .item a:before { content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; opacity: 0; box-shadow: 12px 21px 36px 0 rgba(0,0,0,.15); background-color: #fff; transition: all .22s cubic-bezier(.25, .46, .45, .94); }
	#pickup .item a div, #pickup .item a img { position: relative; transition: none; }
	#pickup .item a:hover { -webkit-transform: translate3d(0, -15px, 1px); transform: translate3d(0, -15px, 1px); }
	#pickup .item a:hover:before { opacity: 1; }
	#pickup .item a:hover div, #pickup .item a:hover img { -webkit-transform: none; transform: none;}
	#pickup .item:last-of-type{ display: none; }
}

@media screen and (max-width:768px) { 
	#pickup > div { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-left: 5.95238vw; margin-right: 5.95238vw; }
	#pickup .item { width: 50%; margin-bottom: 45px; }
	#pickup .item:last-of-type, #pickup .item:nth-last-of-type(2) { margin-bottom: 0; }
	#pickup .item figcaption { margin: 24px 0 6px; font-size: 13px; }
	#pickup .item p { font-size: 11px; }
	#pickup .item a { padding: 0 10px; }
	#pickup .item a img { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; }
	#pickup .item a div, #pickup .item a img { -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: -webkit-transform .4s cubic-bezier(.075, .82, .165, 1); transition: transform .4s cubic-bezier(.075, .82, .165, 1); transition: transform .4s cubic-bezier(.075, .82, .165, 1), -webkit-transform .4s cubic-bezier(.075, .82, .165, 1); }
	#pickup .item a div { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; }
	#pickup .item a:hover img { -webkit-transform: scale(.95); transform: scale(.95); }
	#pickup .item a:hover div { -webkit-transform: scale(.9); transform: scale(.9); }
	#pickup .more_btn { margin: 20px 0 0;  }
}

/*.new_mark*/
@media screen and (min-width: 768px) {
	.new_mark {
		background: #FADC00; color: #222 !important; border-radius: 50%; text-align: center; vertical-align: middle; display: inline-block; transform: rotate(-10deg); -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); padding: 14px 20px; position: absolute; z-index: 100; font-size: 1.8rem!important; font-family: 'Amatic SC', cursive; font-weight: bold; letter-spacing: 1.2px; }
}
@media screen and (max-width: 768px) {
	.new_mark {
		background: #FADC00; color: #222 !important; border-radius: 50%; text-align: center; display: inline-block; transform: rotate(-10deg); -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); padding: 10px 12px; position: absolute; z-index: 100; font-size: 16px!important; font-family: 'Amatic SC', cursive; font-weight: bold; letter-spacing: 1px; }
}


/* ===================================================================
#customer
=================================================================== */
#customer ul { background: url("../img/top/cont-bg01.png") repeat; background-size: cover; padding: 40px 2%; display: flex; }
#customer ul li { width: 25%; margin: 0 10px; background: #FFF; border-radius: 10px; }
#customer ul li dl { display: table; padding: 15px; word-break: break-all; }
#customer ul li dl > * { display: table-cell; }
#customer ul li dl dt { width: 34px; }
#customer ul li dl dd { padding-left: 10px; }

#customer ul li dl .customer-btn a {  background: #170000; display: block; padding: 5px 0; }

@media screen and (min-width:769px) {
	#customer ul li dl .customer-btn { margin: 10px auto; }
	#customer ul li dl .customer-btn img { width: auto; height: 25px; margin: auto; }
	#customer ul li dl .customer-icon { width: 94px; float: right; }
	
	#customer ul li dl .customer-btn a { 
		-webkit-transition: all 0.6s ease;
		-moz-transition: all 0.6s ease;
		-ms-transition: all 0.6s ease;
		-o-transition: all 0.6s ease;
		transition: all 0.6s ease;
	}
	#customer ul li:nth-of-type(1) dl .customer-btn a:hover { background: #0d1c3b; }
	#customer ul li:nth-of-type(2) dl .customer-btn a:hover { background: #9c2423; }
	#customer ul li:nth-of-type(3) dl .customer-btn a:hover { background: #0d1c3b; }
	#customer ul li:nth-of-type(4) dl .customer-btn a:hover { background: #9c2423; }
}

@media screen and (max-width: 768px) {
	#customer ul { flex-wrap: wrap; padding: 30px 2% 20px; }
	#customer ul li { width: 48%; margin: 0 1% 10px; }
	#customer ul li dl dt { width: 13%; }
	#customer ul li dl dd { font-size: calc((24/750)*100vw);}
	#customer ul li dl dd > div { display: table; }
	#customer ul li dl dd > div > * { display: table-cell; width: 50%; vertical-align: bottom;}
	#customer ul li dl .customer-icon { padding-left: 5px;}
}

/* ===================================================================
#sns
=================================================================== */
#sns { margin-bottom: 0; overflow: hidden; }
#sns ul { letter-spacing: -.4em; }
#sns ul li { display: inline-block; vertical-align: top; letter-spacing: 0; width: 25%; position: relative; }

#sns ul li div { text-align: center; position: absolute; left: 0; right: 0; bottom: 10px;}
#sns ul li div span { width: 26px; margin: 0 5px; display: inline-block; opacity: 0;
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
}
#sns ul li div span a { display: block; }

@media screen and (min-width:769px) {
	#sns ul li div span { opacity: 0;
		-webkit-transition: all 0.6s ease;
		-moz-transition: all 0.6s ease;
		-ms-transition: all 0.6s ease;
		-o-transition: all 0.6s ease;
		transition: all 0.6s ease;
	}
	#sns ul li:hover div span { opacity: 0.6; }
	#sns ul li div span:hover { opacity: 1; }
}

@media screen and (max-width: 768px) {
	#sns ul li { width: 50%; }
	#sns ul li div span { opacity: 1; }
}