@charset "UTF-8";
/* CSS Document */


@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@600&display=swap');
/*
font-family: 'Noto Sans JP', sans-serif;
Medium 600
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
/*
font-family: 'Roboto', sans-serif;
Regular 400
Medium 500
*/


/* ---------- RESET ---------- */


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
dl, dt, dd, b, u, i, center,
ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, textarea, input {
  margin:0;
  padding:0;
  border:0;
  font-size: 100%;
  font:inherit;
  vertical-align: baseline;
  text-decoration:none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul, li {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
input, textarea, button{
  -webkit-apparence:none;
  border:none;
  background: none;
  outline: none;
}
input:focus, textarea:focus{
  -webkit-apparence:none;
  outline: none;
  border:none;
}
img{
	border:none;
	outline:none;
	vertical-align:top;
	font-size:0;
	line-height:0;
}
img a{
	border:none;
	outline: none;
}
a:focus{
	outline:none;
}
hr {
  height:0;
  margin:0;
  padding:0;
  border:0;
}
h1, h2, h3, h4, h5, h6, p{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-decoration:none;
}

input, textarea, button{
  -webkit-apparence:none;
  border:none;
  background: none;
  outline: none;
}
a{
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	    -ms-transition: all 0.3s;
	        transition: all 0.3s;
}
a.nohover:hover {
  opacity: 1.0;
}

img{
	width:100%;
	height:auto;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	transform:translate3d(0,0,0);
}
*{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-box-shadow:none;
    box-shadow:none;   
    outline:none;
	box-sizing:border-box;
	margin:0;
	padding:0;
}
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-box-shadow: none;
    box-shadow: none;   
    outline: none;
}

html,body{
	height: 100%;
	min-height:100%;
	z-index:1;
	position:relative;
}
body{
	color:#182545;
	font-family: 'Noto Sans JP','ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'メイリオ', 'Meiryo', Arial, Meiryo, "MS PGothic", sans-serif;
	-webkit-text-size-adjust: 100%;
	font-size: 14px;
    line-height: 1.7;
	background: #E6E6E6;
}

.clear:after,
ul:after,
li:after,
dl:after{
	  content: "";
	  display: table;
	  float:none;
	  clear: both;
}





/* ---------------------------------------------------------- */


/* standard */
.fade,
.fade.delighter{
	opacity:0;
    position: relative;
    top: 40px;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	will-change: transform,animation,position;
	-webkit-transition:all 1.2s cubic-bezier(0.33, 1, 0.68, 1);	
	             transition:all 1.2s cubic-bezier(0.33, 1, 0.68, 1);
}
/* start */
.fade.delighter.started{
	opacity:1;
    top: 0;
}

/* ---------------------------------------------------------------------------- */


#loader-bg{
    display:block;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    right:0px;
    z-index:1000;
    overflow:hidden;
}



/* ---------------------------------------------------------------------------- */




/* マスクで現れる */
.imageMask{
	width:100%;
	box-sizing:border-box;
	z-index:5;
	position: relative;
}
header .imageMask{position: absolute;top: 0;bottom: 0;left: 0;}


.main-image{}

.main-image .main-image-motion{
	width:100%;
	height:100%;
	position:absolute;
	background-color:#182545;
	z-index:100;
	left:0;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	will-change: transform,animation,position;
	-webkit-transition: width 0.8s cubic-bezier(0.32, 0, 0.67, 0);
	             transition: width 0.8s cubic-bezier(0.32, 0, 0.67, 0);
}

.main-image .imageBox {
	/*visibility: hidden;*/
	opacity: 0;
	-webkit-transform:scale(1.15);
	transform:scale(1.15);
	-webkit-transition: opacity 0.8s,transform 1.4s cubic-bezier(0.33, 1, 0.68, 1);
	             transition: opacity 0.8s,transform 1.4s cubic-bezier(0.33, 1, 0.68, 1);
}

.main-image.mask-image .main-image-motion { width: 0;left: 0;}
.main-image.mask-image .imageBox { /*visibility: hidden;*/opacity: 0; }
.main-image.show-image .main-image-motion {
	width: 0;
	right: 0;
	left:inherit;
	/*opacity:1;*/
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	will-change: transform,animation,position;
	-webkit-transition: width 0.8s cubic-bezier(0.33, 1, 0.68, 1);
	             transition: width 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.main-image.show-image .imageBox {/*visibility:visible;*/
	opacity: 1;
	-webkit-transform:scale(1.0);
	transform:scale(1.0);
}

/*-----------------------------------------------*/




header{
	width: 100%;
	height: 100%;
	position: relative;
}
.headerIn{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 2.8%;
	right: 2.8%;
}

header .title{
	width: 240px;
	padding-top: 2.8vw;
	position: relative;
	left: 3%;
	opacity: 0;
	-webkit-transition: left 1.5s cubic-bezier(0.65, 0, 0.35, 1), opacity 1.0s 0.3s;
	transition: left 1.5s cubic-bezier(0.65, 0, 0.35, 1), opacity 1.0s 0.3s;
}
header .title.view{
	left: 0;
	opacity: 1;
}


header .title .season{
	width: 51%;
}
header .title .logo{
	width: 42%;
	margin-top: 18%;
}
@media(min-width:769px) {
header .title .logo a:hover{opacity: 0.5;}
}
header .title h1{
	width: 60%;
	margin-top: 18%;
}
header .title h2{
	width: 25%;
	margin-top: 18.5%;
}
header .title .seasonSP{display: none;}


header .headerImages{
	position: absolute;
	z-index: 10;
	top: 2.8vw;
	bottom: 2.8vw;
	right: 0;
	left: 240px;
}
header .headerImages .leftImage{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 49%;
	overflow: hidden;
}
header .headerImages .leftImage .imageBox{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: url("../images/main01_pc.jpg") top center no-repeat;
	background-size: cover;
}
header .headerImages .rightImage{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 49%;
	overflow: hidden;
}
header .headerImages .rightImage .imageBox{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: url("../images/main02_pc.jpg") top center no-repeat;
	background-size: cover;
}


/*-----------------------------------*/


article{
	width: 100%;
	overflow: hidden;
}



.setBox{
	width: 94.4%;
	margin: 1.4vw auto 0;
	position: relative;
}
.setBox .setImages{
	width: calc(100% - 240px);
	margin-left: 240px;
	position: relative;
	z-index: 10;
}
.setBox .setImages:after{
	content: "";
	display: table;
	float:none;
	clear: both;
}

.setBox .setImages .leftImage{width: 49%;float: left;position: relative;overflow: hidden;}
.setBox .setImages .rightImage{width: 49%;float: right;position: relative;overflow: hidden;}
.setBox .setImages .fullImage{width: 100%;position: relative;overflow: hidden;}


/*--------*/
.setImages .double ul{width: 100%;}
.setImages .double ul li{width: 100%;overflow: hidden;}
.setImages .double ul li:nth-child(1){margin-bottom: 4%;}

/*--------*/
.setImages .quarter ul{width: 100%;font-size: 0;}
.setImages .quarter ul li{width: 48%;display: inline-block;overflow: hidden;}
.setImages .quarter ul li:nth-child(1),
.setImages .quarter ul li:nth-child(3){margin-right: 4%;}
.setImages .quarter ul li:nth-child(1),
.setImages .quarter ul li:nth-child(2){margin-bottom: 4%;}




.setBox .imageBox{
	width: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;	
}



/*--------*/
.setBox.set01{margin-top: 0;}
.set01 .single .imageBox{padding-top: 128.3%;background-image: url("../images/set01main.jpg");}
.set01 .quarter li:nth-child(1) .imageBox{padding-top: 129.4%;background-image: url("../images/set01mini.jpg");}
.set01 .quarter li:nth-child(2) .imageBox{padding-top: 129.4%;background-image: url("../images/set01mini.jpg");}
.set01 .quarter li:nth-child(3) .imageBox{padding-top: 129.4%;background-image: url("../images/set01mini.jpg");}
.set01 .quarter li:nth-child(4) .imageBox{padding-top: 129.4%;background-image: url("../images/set01mini.jpg");}

.set02 .single .imageBox{padding-top: 128.3%;background-image: url("../images/set02main.jpg");}
.set02 .double li:nth-child(1) .imageBox{padding-top: 62.1%;background-image: url("../images/set02mini01.jpg");}
.set02 .double li:nth-child(2) .imageBox{padding-top: 62.1%;background-image: url("../images/set02mini02.jpg");}

.set03 .single .imageBox{padding-top: 62.9%;background-image: url("../images/set03main.jpg");}

.set04 .quarter li:nth-child(1) .imageBox{padding-top: 129.4%;background-image: url("../images/set04mini.jpg");}
.set04 .quarter li:nth-child(2) .imageBox{padding-top: 129.4%;background-image: url("../images/set04mini.jpg");}
.set04 .quarter li:nth-child(3) .imageBox{padding-top: 129.4%;background-image: url("../images/set04mini.jpg");}
.set04 .quarter li:nth-child(4) .imageBox{padding-top: 129.4%;background-image: url("../images/set04mini.jpg");}
.set04 .single .imageBox{padding-top: 128.3%;background-image: url("../images/set04main.jpg");}

.set05 .single.leftImage .imageBox{padding-top: 128.3%;background-image: url("../images/set05main01.jpg");}
.set05 .single.rightImage .imageBox{padding-top: 128.3%;background-image: url("../images/set05main02.jpg");}

.set06 .double li:nth-child(1) .imageBox{padding-top: 62.1%;background-image: url("../images/set06mini01.jpg");}
.set06 .double li:nth-child(2) .imageBox{padding-top: 62.1%;background-image: url("../images/set06mini02.jpg");}
.set06 .single .imageBox{padding-top: 128.3%;background-image: url("../images/set06main.jpg");}



/*-----------------------------------*/

.setBox .setSpec{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: calc(240px - 2.8vw);
	z-index: 5;
}
.setBox .setSpec .specBox{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
}
.setBox .setSpec .specBox .item{
	margin-top: 20%;
	opacity: 0;
	position: relative;
	top: -30px;
	-webkit-transition:all 0.6s cubic-bezier(0.33, 1, 0.68, 1);	
	transition:all 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}
.setBox .setSpec .specBox .item.fadeIn{
	opacity: 1;
	top: 0;
}







.setBox .setSpec .specBox a{
	color: #182545;
	line-height: 1.5;
	opacity: 1;
}
@media(min-width:769px) {
.setBox .setSpec .specBox a:hover{opacity: 0.5;}
}

.setBox .setSpec .specBox h3{
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 18px;
}
.setBox .setSpec .specBox h4{
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 12px;
}
.setBox .setSpec .specBox h4 span{
	font-weight: 400;
	padding-right: 0.5em;
}
.setBox .setSpec .specBox .button{
	width: 100%;
	font-size: 0;
	line-height: 1;
	padding: 6% 13.3%;
	margin-top: 8%;
}
.setBox .setSpec .specBox .button.store{background: #182545;}
.setBox .setSpec .specBox .button.campaign{border: 1px solid #182545;}




/*-----------------------------------*/


footer{
	width: 94.4%;
	padding: 2.8vw 0;
	margin: 0 auto;
	line-height: 1.2;
}
footer:after{
	  content: "";
	  display: table;
	  float:none;
	  clear: both;
}

footer .other{
	font-size: 10px;
	font-weight: 600;
	float: left;
}
footer .other span{
	font-size: 12px;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	padding-right: 0.7em;
}
footer .information{
	width: calc(100% - 240px);
	float: right;
	text-align: right;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	position: relative;
}
footer .information .copyright{
	font-weight: 400;
}
footer .information h3{
	font-weight: 500;
	position: absolute;
	top: 0;
	left: 0;
}







@media(min-width: 1500px) {

.headerIn{left: 2.5%;right: 2.5%;}
header .title{width: 245px;padding-top: 2.5vw;}
header .headerImages{top: 2.5vw;bottom: 2.5vw;left: 260px;}
header .headerImages .leftImage{width: 49.15%;}
header .headerImages .rightImage{width: 49.15%;}

/*----------------------*/

.setBox{width: 95%;margin-top: 1.25vw;}
.setBox .setImages{width: calc(100% - 260px);margin-left: 260px;}
.setBox .setImages .leftImage{width: 49.15%;}
.setBox .setImages .rightImage{width: 49.15%;}

.setImages .double ul li:nth-child(1){margin-bottom: 3.6%;}
.set02 .double li:nth-child(1) .imageBox{padding-top: 62.3%;}
.set02 .double li:nth-child(2) .imageBox{padding-top: 62.3%;}
.set06 .double li:nth-child(1) .imageBox{padding-top: 62.3%;}
.set06 .double li:nth-child(2) .imageBox{padding-top: 62.3%;}

.setImages .quarter ul li{width: 48.2%;}
.setImages .quarter ul li:nth-child(1),
.setImages .quarter ul li:nth-child(3){margin-right: 3.6%;}
.setImages .quarter ul li:nth-child(1),
.setImages .quarter ul li:nth-child(2){margin-bottom: 3.6%;}

.setBox .setSpec{width: calc(260px - 2.5vw);}

/*-----------------------------------*/

footer{width: 95%;padding: 2.5vw 0;}
footer .information{width: calc(100% - 260px);}

}



@media(max-width: 1100px) {

header .title{width: 215px;}
header .headerImages{left: 215px;}

/*-----------------------------------*/

.setBox .setImages{width: calc(100% - 215px);margin-left: 215px;}
.setBox .setSpec{width: calc(215px - 2.8vw);}
.setBox .setSpec .specBox h3{font-size: 16px;}
.setBox .setSpec .specBox h4{font-size: 11px;}
.setBox .setSpec .specBox .button{padding: 6% 12%;margin-top: 7%;}

/*-----------------------------------*/

footer .information{width: calc(100% - 215px);}

}


@media(max-width: 900px) {

header .title{width: 190px;}
header .headerImages{left: 190px;}

/*-----------------------------------*/

.setBox .setImages{width: calc(100% - 190px);margin-left: 190px;}
.setBox .setSpec .specBox .item{margin-top: 15%;}
.setBox .setSpec{width: calc(190px - 2.8vw);}
.setBox .setSpec .specBox h3{font-size: 15px;}
.setBox .setSpec .specBox .button{margin-top: 5%;}

/*-----------------------------------*/

footer .information{width: calc(100% - 190px);}

}



@media(max-width: 768px) {

.wide{display: none;}

header .imageMask{position: relative;}


/*-----------------------------------*/

header{height: auto;}
.headerIn{
	position:relative;
	left: 0;
	right: 0;
	width: 90%;
	margin: 0 auto;
}
header .title{
	width: 100%;
	padding-top: 5vw;
	left: 0%;
	top: -5vw;
	position: relative;
	-webkit-transition: top 1.5s cubic-bezier(0.65, 0, 0.35, 1), opacity 1.0s 0.4s;
	transition: top 1.5s cubic-bezier(0.65, 0, 0.35, 1), opacity 1.0s 0.4s;
}
header .title.view{left: 0;opacity: 1;top: 0;}

header .title .season{display: none;}
header .title .logo{width: 26%;margin-top: 0;}
header .title h1{width: 36%;margin-top: 10%;}
header .title h2{width: 15%;margin-top: 10%;}
header .title .seasonSP{
	display: block;
	position: absolute;
	width: 2.85%;
	top: 5vw;
	right: 0;
}

header .headerImages{
	position: relative;
	top:0;
	bottom:0;
	right: 0;
	left: 0;
}
header .headerImages .leftImage{position:relative;width: 100%;margin-top: 15%;}
header .headerImages .leftImage .imageBox{position:relative;padding-top: 128%;background-image: url("../images/main01_sp.jpg");}
header .headerImages .rightImage{position: relative;width: 100%;margin-top: 2.5%;}
header .headerImages .rightImage .imageBox{position: relative;padding-top: 128%;background-image: url("../images/main02_sp.jpg");}

/*-----------------------------------*/

.setBox{width: 90%;margin-top: 10vw;}
.setBox.set01{margin-top: 10vw;}


.setBox .setImages{
	width: 100%;
	margin-left: 0;
}
.setBox .setImages .leftImage{width: 100%;float:none;}
.setBox .setImages .rightImage{width: 100%;float: none;margin-top: 2.5vw;}
.setBox .setImages .fullImage{width: 100%;}


.setImages .double ul li:nth-child(1){margin-bottom: 2.5%;}

.setImages .quarter ul li{width: 48.75%;}
.setImages .quarter ul li:nth-child(1),
.setImages .quarter ul li:nth-child(3){margin-right: 2.5%;}
.setImages .quarter ul li:nth-child(1),
.setImages .quarter ul li:nth-child(2){margin-bottom: 2.5%;}


.set03 .single .imageBox{padding-top: 128%;background-image: url("../images/set03main_sp.jpg");}

/*--------------*/

.setBox .setSpec{position: relative;width: 100%;}
.setBox .setSpec .specBox{position: relative;font-size: 0;}
.setBox .setSpec .specBox .item{
	margin-top: 5%;
	top: 30px;
	width: 47.5%;
	display: inline-block;
	-webkit-transition:all 0.9s cubic-bezier(0.33, 1, 0.68, 1);	
	transition:all 0.9s cubic-bezier(0.33, 1, 0.68, 1);
}
.setBox .setSpec .specBox .item:nth-child(1){margin-right:5%; }

.setBox .setSpec .specBox h3{font-size: 23px;}
.setBox .setSpec .specBox h4{font-size: 16px;}
.setBox .setSpec .specBox .button{padding: 5% 18%;margin-top: 8%;}

/*-----------------------------------*/

footer{width: 90%;padding: 5vw 0;}
footer .other{font-size: 15px;float: none;}
footer .other span{font-size: 16px;}
footer .information{
	width: 100%;
	float: none;
	text-align: left;
	font-size: 16px;
	margin-top: 10vw;
}
footer .information h3{display: none;}


}


@media(max-width: 630px) {

header .title{padding-top: 7vw;}
header .title .seasonSP{top: 7vw;}

/*-----------------------------------*/

.setBox .setSpec .specBox h3{font-size: 20px;}
.setBox .setSpec .specBox h4{font-size: 14px;}
.setBox .setSpec .specBox .button{padding: 6% 17%;margin-top: 8%;}

/*-----------------------------------*/

footer{padding: 7vw 0;}
footer .other{font-size: 14px;}
footer .other span{font-size: 15px;}
footer .information{font-size: 14px;}

}




@media(max-width: 540px) {

header .title{padding-top: 7.5vw;}
header .title .logo{width: 29%;}
header .title h1{width: 41%;margin-top: 13%;}
header .title h2{width: 18%;margin-top: 13.5%;}

header .title .seasonSP{top: 7.5vw;width: 3.5%;}

/*-----------------------------------*/


.setImages .double ul li:nth-child(1){margin-bottom: 2.6%;}


.setImages .quarter ul li{width: 48.65%;}
.setImages .quarter ul li:nth-child(1),
.setImages .quarter ul li:nth-child(3){margin-right: 2.7%;}
.setImages .quarter ul li:nth-child(1),
.setImages .quarter ul li:nth-child(2){margin-bottom: 2.7%;}

.setBox .setSpec .specBox h3{font-size: 3.8vw;}
.setBox .setSpec .specBox h4{font-size: 2.7vw;}
.setBox .setSpec .specBox .button{padding: 6% 13%;margin-top: 8%;}

footer .other{font-size: 13px;}
footer .other span{font-size: 14px;}
footer .information{font-size: 13px;}


}





@media(max-width: 470px) {

footer .other{font-size: 11px;}
footer .other span{font-size: 12px;}
footer .information{font-size: 11px;}


}