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




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

@font-face {
	font-family:'DINPro-Regular';
	src:url('../../fonts/DINPro-Regular.eot');
	src:url('../../fonts/DINPro-Regular.eot?#iefix') format('embedded-opentype'),
	url('../../fonts/DINPro-Regular.woff2') format('woff2'),
	url('../../fonts/DINPro-Regular.woff') format('woff'),
	url('../../fonts/DINPro-Regular.ttf') format('truetype'),
	url('../../fonts/DINPro-Regular.svg#DINPro-Regular') format('svg');
}
@font-face {
	font-family:'DINPro-Medium';
	src:url('../../fonts/DINPro-Medium.eot');
	src:url('../../fonts/DINPro-Medium.eot?#iefix') format('embedded-opentype'),
	url('../../fonts/DINPro-Medium.woff2') format('woff2'),
	url('../../fonts/DINPro-Medium.woff') format('woff'),
	url('../../fonts/DINPro-Medium.ttf') format('truetype'),
	url('../../fonts/DINPro-Medium.svg#DINPro-Medium') format('svg');
}
@font-face {
	font-family:'DINPro-Bold';
	src:url('../../fonts/DINPro-Bold.eot');
	src:url('../../fonts/DINPro-Bold.eot?#iefix') format('embedded-opentype'),
	url('../../fonts/DINPro-Bold.woff2') format('woff2'),
	url('../../fonts/DINPro-Bold.woff') format('woff'),
	url('../../fonts/DINPro-Bold.ttf') format('truetype'),
	url('../../fonts/DINPro-Bold.svg#DINPro-Bold') format('svg');
}





/* ---------- 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.5s;
	        transition: all 0.5s;
}
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:#FFF;
	font-weight:400;
	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: #00002F;
}

.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.0s cubic-bezier(0.215, 0.61, 0.355, 1);	
	             transition:all 1.0s cubic-bezier(0.215, 0.61, 0.355, 1);
}
/* start */
.fade.delighter.started{
	opacity:1;
    top: 0;
}







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


#loader-bg{
    display:block;
    position:fixed;
    width:100%;
    height:100%;
    min-height:100%;
    top:0px;
    right:0px;
    background:#FFF;
    z-index:100;
    overflow:hidden;
}
/*#loader-bg.start{width: 0;}*/


#loader-bg02{
    display:block;
    position:fixed;
    width:100%;
    height:100%;
    min-height:100%;
    top:0px;
    right:0px;
    background:#FFF;
    z-index:30;
    overflow:hidden;
}



.pcOnly{display: block;}
.spOnly{display: none;}



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


.header{
	width: 100%;
	height: 63vw;
	max-height: 100%;
	position: relative;
	z-index: 50;
	overflow: hidden;
}
.header .logo{
	position: absolute;
	top: 20px;
	right: 20px;
	width: 120px;
	z-index: 12;
/*	-webkit-transition: all 1.5s cubic-bezier(0.5, 1, 0.89, 1) 3.0s;
	transition: all 1.5s cubic-bezier(0.5, 1, 0.89, 1) 3.0s;*/
}

.header .headerBK{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url("../images/mainimage_pc.jpg") center center;
	background-size: cover;
	z-index: 10;
	-webkit-transform:scale(1.15);
	transform:scale(1.15);
	-webkit-transition: all 6.0s cubic-bezier(0.25, 1, 0.5, 1);
	transition: all 6.0s cubic-bezier(0.25, 1, 0.5, 1);
}
.header.view .headerBK{
	-webkit-transform:scale(1.0);
	transform:scale(1.0);
}




.header .titleBox{
	position: absolute;
	left: 0;
	bottom: 0;
	background: #00002F;
	width: 34%;
	height: 0%;
	z-index: 20;
	-webkit-transition: all 1.0s cubic-bezier(0.25, 1, 0.5, 1);
	transition: all 1.0s cubic-bezier(0.25, 1, 0.5, 1);
}
.header .titleBox.view{height: 60%;}

.header .titleBox h1{
	width: 80%;
	margin: 5% 0 0 15%;
	position: relative;
	opacity: 0;

	-webkit-transition: all 2.0s 0.5s;
	transition: all 2.0s 0.5s;
}
.header .titleBox.view h1{opacity: 1;left: 0;}















.main{
	width: 100%;
	overflow:hidden;
	background: -webkit-linear-gradient(top, #5B5618, #773A24);
	background: linear-gradient(to bottom, #5B5618, #773A24);
	padding-bottom: 300px;
}


.lead{
	width: 95%;
	margin: 0 auto;
	text-align: center;
}
.lead .copy{
	width: 100%;
	text-align: center;
	font-size: 19px;
	letter-spacing: 0.08em;
	line-height: 2.4;
	font-weight: 400;
	padding: 140px 0 100px;
}
.lead .copy br.res{display: none;}





.lead .allItem{
	width: 100%;
	text-align: center;
}
.lead .allItem a{
	display: inline-block;
	border: 1px solid #FFF;
	line-height: 1;
	font-family:'DINPro-Bold';
	color: #FFF;
	position: relative;
}
.lead .allItem a:before{
	content: "";
	position: absolute;
	z-index: 5;
	top: 0;
	left: 0;
	bottom: 0;
	width: 0%;
	opacity: 0;
	background: -webkit-linear-gradient(right, #644C1B, #773A24);
	background: linear-gradient(to left, #644C1B, #773A24);
	-webkit-transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
	transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.lead .allItem .left{
	float: left;
	font-size: 35px;
	color: #FFF;
	vertical-align: middle;
	padding: 15px 40px;
	border-right: 1px solid #FFF;
	position: relative;
	z-index: 10;
}
.lead .allItem .left span{
	font-size: 40%;
	vertical-align:top;
	padding: 0.4em 0 0 0.1em;
	display: inline-block;
}
.lead .allItem .right{
	float: right;
	font-size: 28px;
	position: relative;
	z-index: 10;
	padding: 18px 25px 0 25px;
}
.lead .allItem .right span{
	display: inline-block;
	padding-right: 20px;
	position: relative;
}
.lead .allItem .right span:after{
	content: "";
	position: absolute;
	top: 25%;
	right: 0;
	width: 12px;
	height: 12px;
	border-bottom: solid 4px #FFF;  
    border-right: solid 4px #FFF;  
    -webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}

@media(min-width:769px) {
.lead .allItem a:hover:before{width:100%;opacity: 1;}
}






.scene{
	width: 92%;
	max-width: 1400px;
	margin: 350px auto 0;
}

/*.scene.s01{margin-top: 250px;}*/


.scene .scTitle{
	width: 100%;
	position: relative;
	opacity: 0;
	-webkit-transition:all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) ;
	             transition:all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) ;
}
.scene .scTitle.leftIn,
.scene .scTitle.leftIn.delighter{left: 5%;}
.scene .scTitle.leftIn.delighter.started{left: 0;opacity: 1;}
.scene .scTitle.rightIn,
.scene .scTitle.rightIn.delighter{right: 5%;}
.scene .scTitle.rightIn.delighter.started{right: 0;opacity: 1;}




.scene.odd .scTitle{text-align: left;}
.scene.even .scTitle{text-align: right;}

.scene .scTitle h2{
	width: 570px;
	display: inline-block;
}
.scene.even .scTitle .titleInner{
	display: inline-block;
	text-align: left;
}
.scene .scTitle .copy{
	font-size: 17px;
	letter-spacing: 0.08em;
	line-height: 2.0;
	padding-top: 2.0em;
	white-space: nowrap
}




.scene .scImage{
	width: 83%;
	margin: 5% 0 0;
}
.scene.odd .scImage{margin-left: 17%;}

.scene .scImage .zoomIn{
	position: relative;
	overflow: hidden;
}


.scene .scImage .zoomIn img,
.scene .scImage .zoomIn.delighter img{
	position: relative;
	-webkit-transform:scale(1.2);
	transform:scale(1.2);
	opacity: 0;
	-webkit-transition: all 4.0s cubic-bezier(0.25, 1, 0.5, 1) , opacity 1.3s;
	transition: all 4.0s cubic-bezier(0.25, 1, 0.5, 1) , opacity 1.3s;
}
.scene .scImage .zoomIn.delighter.started img{
	-webkit-transform:scale(1.0);
	transform:scale(1.0);
	opacity: 1;
}







.scene .scStyle{
	width: 100%;
	margin: 10% 0;
}
.scene .scStyle .styleImage{
	width: 50%;
}
.scene.odd .scStyle .styleImage{float: left;}
.scene.even .scStyle .styleImage{float: right;}


.scene .scStyle .styleItem{
	width: 50%;
	position: relative;
	padding-top: 71.3%;
}
.scene.odd .scStyle .styleItem{float: right;}
.scene.even .scStyle .styleItem{float: left;}

.scene .scStyle .styleItem .itemBox{
	width: 65%;
	max-width: 380px;
	position: absolute;
	top: 50%;
	left: 54%;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}
.scene.even .scStyle .styleItem .itemBox{
	left: 46%;

}





.scene .moreItems{
	width: 100%;
}
.scene .moreItems .moreLeft{
	width: 50%;
	float: left;
	position: relative;
}
.scene .moreItems .moreRight{
	width: 50%;
	float: right;
	position: relative;
}



.scene .moreItems .itemBox{
	width: 65%;
	max-width: 380px;
}

.scene.odd .moreItems .moreRight .itemBox{
	position: absolute;
	top: 0%;
	left: 54%;
	-webkit-transform:translateX(-50%);
	transform:translateX(-50%);
}
.scene.odd .moreItems .moreLeft .itemBox{
	float: right;
}


.scene.even .moreItems .moreLeft .itemBox{
	position: absolute;
	top: 0%;
	left: 46%;
	-webkit-transform:translateX(-50%);
	transform:translateX(-50%);
}







.itemBox .item{
	width: 100%;
}
.itemBox .item .flatshot{
	width: 100%;
	overflow: hidden;
	background: #FFF;
}
.itemBox .item .flatshot a{
	position: relative;
	overflow: hidden;
	display: block;
	background: #FFF;
}
.itemBox .item .flatshot a img{
	position: relative;
	-webkit-transform:scale(1.0);
	transform:scale(1.0);
	-webkit-transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
	transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

@media(min-width:769px) {
.itemBox .item .flatshot a:hover img{
	-webkit-transform:scale(1.05);
	transform:scale(1.05);
}
}

.itemBox .item .copy{
	width: 100%;
	margin: 1.5em 0;
	letter-spacing: 0.05em;
	line-height: 1.9;
	font-size: 16px;
}
.itemBox .item .copy br{display: none;}
.itemBox .item h3{
	font-family:'DINPro-Medium';
	font-size: 20px;
	line-height: 1.3;
}
.itemBox .item h3 span{
	font-size: 50%;
	vertical-align:top;
	padding: 0.3em 0 0 0.1em;
	display: inline-block;
}
.itemBox .item h4{
	font-family:'DINPro-Regular';
	font-size: 15px;
	line-height: 1.3;
	margin-top: 0.5em;
}
.itemBox .item h4 span{
	font-size: 13px;
	padding-left: 0.3em;
}

.itemBox .item .buy{
	margin-top: 20px;
}
.itemBox .item .buy a{
	font-family:'DINPro-Medium';
	font-size: 16px;
	line-height: 1.0;
	color: #FFF;
	position: relative;
	padding-bottom: 8px;
}
.itemBox .item .buy a span{
	display: inline-block;
	vertical-align: middle;
	position:relative;
	margin-left: 0.5em;
}
.itemBox .item .buy a span:before{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: #FFF;
}
.itemBox .item .buy a span:after{
	content: "";
	position: absolute;
	left: 0;
	bottom: -5px;
	width: 0%;
	height: 1px;
	background: #FFF;
	-webkit-transition: width 0.5s cubic-bezier(0.76, 0, 0.24, 1);
	transition: width 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.itemBox .item .buy a i{
	width: 28px;
	display: inline-block;
	vertical-align: middle;
}

@media(min-width:769px) {
.itemBox .item .buy a:hover span:after{width:100%;}
}

.itemBox .item .coming{
	font-family:'DINPro-Medium';
	font-size: 15px;
	line-height: 1.0;
	display: inline-block;
	padding: 3px;
	margin-top: 20px;
	border: 1px solid rgba(255,255,255,0.5);
}








.fp60th{
	width: 100%;
	position:relative;
	padding-top:calc(350px + 14%);
	background: url("../images/60thbk_pc.jpg") center center;
	background-size: cover;
}

.fp60th .cover,
.fp60th.delighter .cover{
	position: absolute;
	top: -1px;
	bottom: 0;
	right: 0;
	width: 100%;
	z-index: 10;
	background: #773A24;
	-webkit-transition: width 1.8s cubic-bezier(0.76, 0, 0.24, 1);
	transition: width 1.8s cubic-bezier(0.76, 0, 0.24, 1);
}

.fp60th.delighter.started .cover{width: 0;}







.fp60th .inner,
.fp60th.delighter .inner{
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	top: 55%;
	opacity: 0;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	-webkit-transition: all 1.5s cubic-bezier(0.25, 1, 0.5, 1) 1.2s;
	transition: all 1.5s cubic-bezier(0.25, 1, 0.5, 1) 1.2s;
}
.fp60th.delighter.started .inner{
	top: 50%;
	opacity: 1;
}


.fp60th h2{
	width: 240px;
	margin: 0 auto;
}
.fp60th .viewMore{
	text-align: center;
	margin-top: 35px;
}

.fp60th .viewMore a{
	font-family:'DINPro-Bold';
	font-size: 25px;
	line-height: 1.0;
	color: #FFF;
	letter-spacing: 0.02em;
	display: inline-block;
	padding: 0.5em 2.0em;
	border: 1px solid #FFF;
	background: rgba(0,0,47,0.3);
	border-radius:13px;
}
@media(min-width:769px) {
.fp60th .viewMore a:hover{background: #FFF;color:#00002F;}
}



.footer{
	width: 100%;
	color: #FFF;
	padding:250px 0 50px;
}
.footer .logo{
	width: 150px;
	margin: 0 auto;
}
.footer .copyright{
	text-align: center;
	font-family:'DINPro-Regular';
	font-size: 14px;
	margin-top: 30px;
}





/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


@media(min-width:1500px) {

.header .titleBox{width: 30%;}
.header .titleBox.view{height: 55%;}

.fp60th h2{width: 260px;}

}


@media(max-width:1100px) {

.header .titleBox{width: 38%;}
.header .titleBox.view{height: 55%;}

.main{padding-bottom: 250px;}

.lead .copy{font-size: 18px;}
.lead .allItem .left{font-size: 32px;}
.lead .allItem .right{font-size: 26px;}
.lead .allItem .right span:after{width: 11px;height: 11px;}

.scene{margin-top: 300px;}
.scene .scTitle h2{width: 520px;}

.scene .moreItems .itemBox{width: 70%;}
.itemBox .item .copy{font-size: 15px;}
.itemBox .item h3{font-size: 19px;}


.fp60th{padding-top:calc(320px + 14%);}
.fp60th h2{width: 210px;}
.fp60th .viewMore{margin-top: 30px;}
.fp60th .viewMore a{font-size: 23px;}

}




@media(max-width:900px) {

.header .logo{top: 15px;right: 15px;width: 100px;}

.main{padding-bottom: 23%;}

.lead .copy{font-size: 17px;padding: 16% 0 10%;}
.lead .copy br.res{display: block;}

.lead .allItem .left{font-size: 29px;}
.lead .allItem .right{font-size: 23px;}
.lead .allItem .right span:after{width: 10px;height: 10px;}

.scene{margin-top: 25%;}
.scene .scTitle h2{width: 470px;}
.scene .scTitle .copy{font-size: 16px;}

.scene .scImage{margin-top: 7%;}
.scene .scStyle{margin: 13% 0;}
.scene.s01 .scStyle{margin-bottom: 0;}
.scene .scStyle .styleImage{width: 55%;}
.scene .scStyle .styleItem{width: 45%;padding-top: 78.5%;}
.scene .scStyle .styleItem .itemBox{width: 80%;}

.itemBox .item .copy{font-size: 14px;margin: 1.2em 0;}
.itemBox .item h3{font-size: 17px;}
.itemBox .item h4{font-size: 14px;}
.itemBox .item .buy{margin-top: 17px;}
.itemBox .item .buy a{font-size: 15px;padding-bottom: 8px;}
.itemBox .item .coming{font-size: 14px;margin-top: 17px;}

.scene .moreItems .itemBox{width: 80%;}
.scene .moreItems .moreLeft{width: 45%;margin-left: 2.5%;}
.scene .moreItems .moreRight{width: 45%;margin-right: 2.5%;}
.scene.odd .moreItems .moreRight .itemBox{left: 0;position: relative;-webkit-transform:none;transform:none;}
.scene.odd .moreItems .moreLeft .itemBox{float: none;}
.scene.even .moreItems .moreLeft .itemBox{left: 0;position: relative;-webkit-transform:none;transform:none;}
.scene .moreItems .itemBox{margin: 0 auto;}

.fp60th{padding-top:calc(280px + 13%);}
.fp60th h2{width: 190px;}
.fp60th .viewMore{margin-top: 30px;}
.fp60th .viewMore a{font-size: 20px;}

.footer{padding:22% 0 30px;}
.footer .logo{width: 130px;}
.footer .copyright{font-size: 13px;}

}



@media(max-width:768px) {

.header{height: 100vw;}
.header .headerBK{background-image: url("../images/mainimage_sp.jpg");}
.header .logo{top: 15px;right: 15px;width: 90px;}

.header .titleBox{width: 50%;}
.header .titleBox.view{height: 35%;}
.header .titleBox h1{width: 86%;margin: 7% 0 0 7%;}


.main{padding-bottom: 28%;}

.lead .allItem .left{font-size: 27px;}
.lead .allItem .right{font-size: 21px;padding: 19px 25px 0 25px;}
.lead .allItem .right span:after{width: 8px;height: 8px;}


.scene{width: 100%;margin-top: 30%;}

.scene .scTitle{width: 90%;margin: 0 auto;}
.scene .scTitle h2{width: 440px;}

.scene .scImage{width: 87%;}
.scene.odd .scImage{margin-left: 13%;}


.scene .scStyle{margin: 15% 0 0;}
.scene .scStyle .styleImage{width: 75%;margin: 0 auto;}
.scene.odd .scStyle .styleImage{float: none;}
.scene.even .scStyle .styleImage{float: none;}


.scene .scStyle .styleItem{width: 90%;padding-top:0%;margin: 15% auto 0;}
.scene.odd .scStyle .styleItem{float: none;}
.scene.even .scStyle .styleItem{float: none;}


.scene .scStyle .styleItem .itemBox{
	width: 100%;
	max-width: none;
	position:relative;
	margin: 0 auto;
	top: 0%;
	left: 0%;
	-webkit-transform:none;
	transform:none;
}
.scene.even .scStyle .styleItem .itemBox{left: 0%;}


.scene .moreItems{width: 90%;margin: 0 auto;}

.scene .moreItems .moreLeft{width: 100%;float: none;margin: 13% auto 0;}
.scene .moreItems .moreRight{width: 100%;float: none;margin: 13% auto 0;}
.scene .moreItems .itemBox{width: 100%;margin: 0 auto;max-width: none;}

.itemBox .item{text-align: center;}
.itemBox .item .flatshot{width: 65%;max-width: 380px;margin: 0 auto;}
.itemBox .item .copy{font-size: 15px;margin: 1.5em 0 1.6em;}
.itemBox .item .copy br{display: block;}
.itemBox .item h3{text-align: center;}
.itemBox .item h4{text-align: center;}

.itemBox .item .buy{text-align: center;}


.fp60th{padding-top:calc(280px + 22%);background-image: url("../images/60thbk_sp.jpg");}
.fp60th h2{width: 170px;}
.fp60th .viewMore{margin-top: 25px;}
.fp60th .viewMore a{font-size: 19px;border-radius:10px;}

}








@media(max-width:720px) {

.wide{display: none;}


.header{height: 120vw;}
.header .logo{top: 12px;left: 10px;right: auto;}

.header .titleBox{width: 58%;}
.header .titleBox.view{height: 34%;}
.header .titleBox h1{width: 86%;margin: 7% 0 0 7%;}


.main{padding-bottom: 35%;}


.lead .copy{font-size: 16px;padding: 18% 0 10%;}
.lead .allItem .left{font-size: 24px;padding: 15px 27px;}
.lead .allItem .right{font-size: 19px;padding: 18px 20px 0 20px;}
.lead .allItem .right span{padding-right: 15px;}
.lead .allItem .right span:after{width: 8px;height: 8px;border-width: 3px;}


.scene{margin-top: 33%;}

.scene .scTitle{width: 85%;}
.scene .scTitle h2{width: 90%;}

.scene .scTitle .copy{white-space:normal;font-size: 16px;}
.scene .scTitle .copy br{display: none;}

.scene .scImage{width: 100%;margin-top: 12%;}
.scene.odd .scImage{margin-left: 0%;}


.footer{padding:30% 0 30px;}
.footer .logo{width: 120px;}
.footer .copyright{font-size: 12px;}


}







@media(max-width:460px) {

.header{height: 130vw;}
.header .logo{top: 10px;left: 5px;width: 70px;}

.header .titleBox{width: 63%;}

.main{padding-bottom: 45%;}


.lead{width: 88%;}
.lead .copy{font-size: 15px;padding: 22% 0 12%;text-align: left;line-height: 2.2;letter-spacing: 0.04em;}
.lead .copy br{display: none;}
.lead .copy br.res{display: none;}
.lead .copy br.fix{display: block;}



.lead .allItem a{width: 100%;}
.lead .allItem .left{font-size: 5.3vw;padding: 4.0vw 3.5vw;}
.lead .allItem .right{font-size: 4.8vw;padding: 4.4vw 4.0vw 0 0;}
.lead .allItem .right span{padding-right: 3.5vw;}
.lead .allItem .right span:after{top: 22%;width: 2vw;height: 2vw;}


.scene{margin-top: 43%;}
.scene.s01{margin-top: 35%;}

.scene .scTitle{width: 88%;}
.scene .scTitle h2{width: 94%;}
.scene .scTitle .copy{font-size: 14px;padding-top: 1.7em;}

.scene .scImage{margin-top: 14%;}

.scene .scStyle{margin-top: 20%;}
.scene .scStyle .styleImage{width: 87%;}

.scene .scStyle .styleItem{margin-top: 20%;}

.scene .moreItems .moreLeft{margin-top: 20%;}
.scene .moreItems .moreRight{margin-top: 20%;}

.itemBox .item .flatshot{width: 80%;max-width: none;}
.itemBox .item .copy{font-size: 14px;}
.itemBox .item .copy br{display: block;}
.itemBox .item h3{font-size: 16px;}
.itemBox .item h4{font-size: 13px;}

.fp60th h2{width: 150px;}
.fp60th .viewMore a{font-size: 18px;}


.footer{padding:40% 0 30px;}
.footer .logo{width: 100px;}
.footer .copyright{font-size: 12px;margin-top: 20px;}

}





@media(max-width:345px) {

.lead{width: 88%;}
.lead .copy{font-size: 14px;line-height: 2.1;}
.lead .allItem .right span:after{border-width: 2px;}

.scene .scTitle .copy{font-size: 13px;}

.itemBox .item .flatshot{width: 85%;}
.itemBox .item .copy{font-size: 13px;}
.itemBox .item h3{font-size: 15px;}
.itemBox .item h4{font-size: 12px;}

.itemBox .item .buy a{font-size: 14px;}
.itemBox .item .coming{font-size: 13px;}

.fp60th h2{width: 130px;}
.fp60th .viewMore a{font-size: 17px;}


}