@charset "utf-8";

.slick-dots {display: block;width: 100%;padding: 0;margin: 0;list-style: none;text-align: center;}
.slick-dots li {position: relative;display: inline-block;padding: 2px;margin: 0 3px;cursor: pointer;}
.slick-dots li button {font-size: 0;line-height: 0;display: block;width: 8px;height: 8px;cursor: pointer;border: solid 1px #222;background: #fff;border-radius: 100%;padding: 0;}
.slick-dots li.slick-active button {background: #222;}

/* -------------------------------------------------- */
/* #block-mv */
/* -------------------------------------------------- */
#block-mv { position: relative;margin: 40px auto 0; }
#block-mv .container{padding-top:0;}
#block-mv .item {position: relative;overflow: hidden;}
#block-mv .item:after { content: ""; position: absolute; top: 0; right: 0; width: 30.8333333%;height: 100%;background: rgba(0, 0, 0,.7); z-index: 0; }
#block-mv .normal-link:after {content: none;}
#block-mv .normal-link a {display: block;transition: .3s;}
#block-mv .normal-link a:hover {opacity: .7;}
#block-mv .item:not(.normal-link):before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.1);z-index: 1;}
#block-mv figure { margin: auto; padding-bottom: 50%; background-size: cover; background-repeat: no-repeat; background-position: center;}
#block-mv .txt { position: absolute; right: 6.6666%; bottom: 54px; color: #fff; text-align: right; z-index: 1; }
#block-mv .txt .mv-ttl { font-size: 2.571rem; line-height: 1.75em; letter-spacing: 0.1em; margin-top: 30px; }
#block-mv .txt .mv-ttl strong { font-size: 4.285rem; font-weight: normal; }
#block-mv .btn { margin-top: 50px; display: flex; justify-content: flex-end; }
#block-mv .btn a { font-size: 1.4rem; display: flex; justify-content: center; align-items: center; min-width: 200px; height: 60px; border: solid 1px #fff; color: #fff;  margin: auto; padding: 0 40px; position: relative; overflow: visible; letter-spacing: 0.05em; text-align: center;margin: 0; }
#block-mv .btn.en a { letter-spacing: 0.1em; }
#block-mv .btn a:hover { color: inherit; border-color: rgba(255, 255, 255, 0.5);}
#block-mv .btn a:after { content: ""; position: absolute; top: 50%; right: -20px; width: 40px; height: 1px; margin-top: -1px; background: #fff;  transition: .2s; }
#block-mv .btn a:hover:after { right: -30px; }
#block-mv p.feature { display: flex; justify-content: flex-end; }
#block-mv p.feature span { display: flex; justify-content: center; align-items: center; font-size: 1.285rem; width: 92px; height: 92px; background: url(/img/flame-feature.png) center / 100% no-repeat; }
#block-mv .item.left::after{right:auto;left:0;}
#block-mv .item.left .txt{right:auto;left:6.6666%;text-align:left;}
#block-mv .item.left .btn{justify-content:flex-start;}
#block-mv .item.left p.feature{justify-content:flex-start;}

#block-mv .item:not(.normal-link) figure,#block-mv .txt > *,#block-mv .item:after {opacity: 0;}
#block-mv .slick-active:not(.normal-link) figure {animation: mv-zoom 10s ease-in-out both;opacity: 1; }
#block-mv .slick-active .txt > * {animation: mv-txt 2s ease both;opacity: 1;}
#block-mv .slick-active .txt > *:nth-child(1) {animation-delay: .5s;}
#block-mv .slick-active .txt > *:nth-child(2) {animation-delay: .8s;}
#block-mv .slick-active .txt > *:nth-child(3) {animation-delay: 1.1s;}
#block-mv .item.slick-active:after {animation: mv-bg 1s ease both;}

@keyframes mv-bg {0% {opacity: 0;}100% {opacity: 1;}}
@keyframes mv-zoom {0% {transform: scale(1.1);opacity: 0;}10% {opacity: 1;}100% {transform: scale(1);}}
@keyframes mv-txt {0% {opacity: 0;transform: translateX(-10px);}50% {opacity: 1;}100% {transform: translateX(0);}}

/* -------------------------------------------------- */
/* parts */
/* -------------------------------------------------- */
.parts-slider { position: relative;display: flex;flex-wrap: wrap;max-width:calc(100% + 40px);margin-left:-20px;}
.parts-slider .item {display:none;position: relative;padding-top:8px;text-align:center;padding:8px 20px 0;}
.parts-slider .item:first-child{display:block;}
.parts-slider.slick-initialized .item{display:block;}
.parts-slider .item.new-icon > a:before { content: "New\A Arrange";position: absolute; top: 0; left: -8px; width: 92px; height: 92px; display: flex; justify-content: center; align-items: center; background: url(/img/flame-new.png) no-repeat center; z-index: 1; text-align: center; font-family: 'Lato', sans-serif; font-size: 1.2rem; white-space: pre; line-height: 1.5em; color: #222; }
.parts-slider .item.new-icon > a:hover:before { color: #222; }
.parts-slider .item > a{display:block;}
.parts-slider .item .img { padding-top: 129.8%; overflow: hidden; position: relative; }
.parts-slider .item a .img figure { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-position: center;background-color: #ccc; background-repeat: no-repeat; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
.parts-slider .item a:hover .img figure { -webkit-transform: scale(1.08); transform: scale(1.08); opacity: .8;}
.parts-slider .item dl { position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px 20px 20px; color: #fff; z-index: 0; text-align:left;}
.parts-slider .item dl:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: #222; background: linear-gradient(rgba(34,34,34,0),rgba(34,34,34,1)); z-index: -1; }
.parts-slider .item dl dt { font-family: 'Lato', sans-serif; font-size: 1.2rem; letter-spacing: 0.1em; }
.parts-slider .item dl dd { font-size: 1.6rem; letter-spacing: 0.1em; line-height: 1.5em; word-break: break-all;}

/* -------------------------------------------------- */
/* #block-event */
/* -------------------------------------------------- */
#block-event .event-list { margin-top: 40px; }
#block-event .event-list dl { display: table; border-top: solid 1px #333333; padding: 23px 0 24px; width: 100%; }
#block-event .event-list a:last-of-type dl { border-bottom: solid 1px #333333; }
#block-event .event-list dl dt { display: table-cell; width: 6em; padding: 0 20px; font-family: 'Lato', sans-serif; letter-spacing: 0.1em; }
#block-event .event-list dl dd { display: table-cell; padding: 0 20px; letter-spacing: 0; pointer-events: none; word-break: break-all;}

/* -------------------------------------------------- */
/* #block-backnumber */
/* -------------------------------------------------- */
#block-backnumber h3 {font-size: 3rem;text-align: center;border-bottom: 1px solid #333333;margin-bottom: 50px;display: flex;justify-content: center;font-weight:bold;}
#block-backnumber h3 span {border-bottom: 2px solid #333;}
#block-backnumber .d-flex{display:flex;}
#block-backnumber .d-flex figure {background-color: #eeeeee;width: 40%;text-align: center;padding: 30px 0;}
#block-backnumber .d-flex figure img {max-width: 180px;width: 100%;}
#block-backnumber .bn-text {width: 50%;margin-left: 70px;}
#block-backnumber .num {color: #989898; font-size: 1em;position: relative;}
#block-backnumber .num:before {content: '';display: block;width: 20px;height: 1px;background-color: #989898;position: absolute;left: -30px;top: 50%;}
#block-backnumber .feature {font-size: 1.4em;margin-bottom: 25px;}
#block-backnumber .feature span {font-weight: bold;line-height: 1.4;display:block;}
#block-backnumber .feature strong {font-size: 1.1em;}
#block-backnumber .sub small {margin-top: 1em;display: block;}
#block-backnumber p{margin-bottom:1em;}


/* ======================================================================================================================= */
/* for tablet */
/* ======================================================================================================================= */
@media screen and (max-width: 1200px) {
	/* -------------------------------------------------- */
	/* #block-mv */
	/* -------------------------------------------------- */
    #block-mv {width: auto;margin: auto;}
}
@media screen and (min-width:1px) and (max-width:999px){
	/* -------------------------------------------------- */
	/* #block-mv */
	/* -------------------------------------------------- */
	#block-mv .item:after {width: 38%;}
	#block-mv figure {padding-bottom: 60%;background-repeat: no-repeat;min-height: 450px;}

	/* -------------------------------------------------- */
	/* parts */
	/* -------------------------------------------------- */
	.parts-slider{width:calc(100% + 20px);margin-left:-10px;}
	.parts-slider .item{padding:8px 10px;}
	.parts-slider .item dl {padding: 10px;}
	.parts-slider .item.new-icon > a:before{width: 32%;height: 25%;background-size: cover;line-height: 1.2em;}

}

/* ======================================================================================================================= */
/* for sp */
/* ======================================================================================================================= */
@media screen and (min-width:1px) and (max-width:767px){
	/* -------------------------------------------------- */
	/* #block-mv */
	/* -------------------------------------------------- */
	#block-mv{margin-top:15px;}
    #block-mv .item:after {width: 100%;background: rgba(0, 0, 0,.5);}
    #block-mv figure {padding-bottom: 0;position: absolute;width: 100%;height: 100%;min-height: auto;}
	#block-mv .normal-link figure {min-height: 360px;position: relative;}
    #block-mv .txt {width: 100%;min-height: 360px; right: auto;bottom: 0;top: 0;padding: 8% 5%;display: flex;flex-wrap: wrap;align-content: center;position: relative;}
    #block-mv .txt .mv-ttl {font-size: 2rem;flex: 1;margin: 0;text-align: center;}
    #block-mv .txt .mv-ttl strong {font-size: 2.8rem;}
    #block-mv .txt .btn {margin-top: 15px;width: 100%;justify-content: center;}
	#block-mv .btn a { font-size:1.2rem;height: 50px; padding: 0 20px;width: 90%;line-height: 1.4;}
	#block-mv .btn a:after { right: -15px; width: 30px;}
	#block-mv .btn a:hover:after { right: -20px;}
	#block-mv p.feature {margin: 0 0 10px;display: flex;align-items: center;width: 100%;justify-content: center;}
	#block-mv p.feature span {width: 72px;height: 72px;}
	#block-mv .item.left .txt{left:auto;text-align:center;}
	#block-mv .item.left .btn{justify-content:center;}
	#block-mv .item.left p.feature{justify-content:center;}

	/* -------------------------------------------------- */
	/* parts */
	/* -------------------------------------------------- */
	.parts-slider .item {flex: 0 1 33.333%;}
	.parts-slider .item.new-icon > a:before{font-size:1rem;line-height:1;}

	/* -------------------------------------------------- */
	/* #block-event */
	/* -------------------------------------------------- */
	#block-event .event-list { margin-top: 30px; }
	#block-event .event-list dl { padding: 15px 0; }
	#block-event .event-list dl dt,#block-event .event-list dl dd { padding: 0 10px; }

	/* -------------------------------------------------- */
	/* #block-backnumber */
	/* -------------------------------------------------- */
	#block-backnumber h3{font-size: 2.3rem;}
	#block-backnumber h3 {margin-bottom: 25px;}
	#block-backnumber .d-flex {align-items: flex-start;}
	#block-backnumber .d-flex figure {width: 30%;padding: 10px;}
	#block-backnumber .bn-text {margin-left:20px;flex: 1;}
	#block-backnumber .num:before {content: none;}

}