@charset "UTF-8";

/************************************************************************************
RESET
*************************************************************************************/
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset, figure {margin: 0;	padding: 0;}

img, fieldset {	border: 0;}

/* set img max-width */
img {
	max-width: 100%;
	height: auto;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
/* audio */
audio {	max-width: 100%;}
/* iframes and objects max-width */
iframe, object {max-width: 100%;}

/************************************************************************************
GENERAL STYLING
*************************************************************************************/
*{box-sizing:border-box;}
html {-webkit-font-smoothing: antialiased;height:100%; font-size:62.5%;}
body {
	word-wrap: break-word;
	background-color: #fff;
	color:#231815;
	font-size:17px; font-size:1.7rem;
	font-family:'Noto Sans JP','Hiragino Kaku Gothic Pro',Meiryo,sans-serif;
	font-weight:400;
	line-height:1.7;
	letter-spacing:0.5px;
	-webkit-text-size-adjust: 100% !important;
}
a {
	color: #231815;
	text-decoration: none;
	outline: none;
	display:inline-block;
}
a:hover,a:active,a:focus{text-decoration:none;outline:none;}
a[href ^= "tel"]{cursor:default;}
p {margin: 1.2em 0 0;padding: 0;}
p:first-of-type{margin-top:0;}

/* LIST
================================================ */
ul, ol {
    list-style:none;
	margin: 0;
	padding: 0;
	line-height: 140%;
}
li {
	margin: 0 0 .5em 0;
	padding: 0;
}

/* HEADINGS
================================================ */
h1, h2, h3, h4, h5, h6 {
	line-height: 1;
	margin:0; padding:0;
	word-wrap: normal;
}

/************************************************************************************
Common
*************************************************************************************/
.jp, .cn{display:none;}

.onlypc{display:block;}
.onlysp{display:none;}

/************************************************************************************
Contents
*************************************************************************************/
/* body */
#bodywrap{
	background:center center / cover url('images/bodywrap-bg2.jpg') fixed  no-repeat;
}
#bodywrap #body{
	position:relative;
	width:490px;
	left: calc(50% - 245px);
}
/* main */
#main .inner{background:url('images/ppjersey-movie-bg.jpg') no-repeat center / cover;width:490px; height:306px;}
#main video{width:100%;}

/* contents-1 */
#contents-1{
	position:relative;
	background:center top / cover url('images/cn1-bg.jpg') no-repeat;
}
#contents-1 .nav{
	position:absolute;
	top:30px;
	display:flex;
	justify-content:space-between;
	width:100%;
	padding:0 3vw;
}
#contents-1 .nav li{
	cursor:pointer;
	background:center center / auto 14px no-repeat url('images/nav-en.svg') #555555;
	text-indent:-9999px;
	width:27%; /* width:32%; */
	height:35px;
	border-radius:40px;
	box-shadow: 4px 4px 5px #ddd inset;
}
#contents-1 .nav li.nav-en{background-image:url('images/nav-en-on.svg');}
#contents-1 .nav li.nav-cn{background-image:url('images/nav-cn-on.svg');}
#contents-1 .nav li.nav-jp{background-image:url('images/nav-jp-on.svg');}
#contents-1 .nav li:hover,
#contents-1 .nav li.nav-on,
#contents-1 .nav li.fst-on{background-color:#d8d8d8; box-shadow:4px 4px 5px #999 inset;}
#contents-1 .nav li.nav-en:hover,
#contents-1 .nav li.nav-en-on,
#contents-1 .nav li.fst-on{background-image:url('images/nav-en.svg');}
#contents-1 .nav li.nav-cn:hover,
#contents-1 .nav li.nav-cn-on{background-image:url('images/nav-cn.svg');}
#contents-1 .nav li.nav-jp:hover,
#contents-1 .nav li.nav-jp-on{background-image:url('images/nav-jp.svg');}
#contents-1 .nav li.soundtoggle{
	width:13%; margin-left:2%;
	background:url('images/soundoff.svg') center 52% / auto 20px no-repeat #d8d8d8;
	
	box-shadow:4px 4px 5px #999 inset;
}
#contents-1 .nav li.soundtoggle.soundon{
	background:url('images/soundon-re.svg') center 52% / auto 20px no-repeat #555;
	box-shadow: 4px 4px 5px #ddd inset;
}


/* contents-2 */
#contents-2{
	background:center top / cover url('images/cn2-bg.jpg') repeat;
}
#contents-2 figure{padding-bottom:40px;}
#contents-2 figure img{width:100%;}
#contents-2 figure.arw{padding-bottom:0;}
#contents-2 figure.arw::after{
	content:'';
	display:inline-block;
	height:100px; width:100%;
	background:center center / 100% auto url('images/cn2-arrow.svg') no-repeat;
}

/* contents-3 */
#contents-3{
	background:center top / cover url('images/cn3-bg.jpg') no-repeat;
}

/* contents-4 */
#contents-4{
	background:center bottom / cover url('images/cn4-bg.jpg') no-repeat;
}

/* contents-5 */
#contents-5{
	background:center top / cover url('images/cn5-bg.jpg') no-repeat;
}

/* contact-btn */
.contact-btn{position:relative;}
.contact-btn a img{
	opacity:1;
	transition:all ease 0.5s;
}
.contact-btn a img:hover{opacity:0.7;}
.contact-btn-bg{vertical-align:top;}
.contact-btn-button{
	position:absolute;
	left:calc(50% - 140px);
	top:calc(50% - 26px);
	width:280px; height:auto;
}

/************************************************************************************
Footer
*************************************************************************************/
#footer{
	background:center top / 490px auto url('images/footer-bg-re.jpg') no-repeat;
}
#footer p{text-align:center;}
#footer p a{color:#fff; height:60px; line-height:60px; opacity:1; transition:all ease 0.5s;}
#footer p a:hover{opacity:0.7;}
.back-top{
	display:block;
	opacity:0;
	position:fixed;
	right:calc(50% - 320px)	; bottom:50px;
	width:50px; height:91px;
	text-indent:-9999px;
	background:url('images/back-top.svg') no-repeat center / contain;
	transition:all ease 0.5s;
}
.back-top-show{
	opacity:1;
}
/************************************************************************************
for smartphone
*************************************************************************************/

@media screen and (max-width: 680px) {
/* general */
	body{line-height:1.4;position:relative;}
	input{display:inline-block; margin-bottom:10px; font-size:17px; font-size:1.7rem;}
	a{color:inherit;}
/* common */
.onlypc{display:none;}
.onlysp{display:block;}
/* body */
#bodywrap #body{
	width:100%;
	left:auto;
}
#main .inner{background:url('images/ppjersey-movie-sp-bg.jpg') no-repeat center / cover;width:100%; height: auto; aspect-ratio: 1.1 / 1; }
#contents-1 .nav li{background-size: auto 12px; background-position:center 52%;}
#contents-1 .nav li.soundtoggle,
#contents-1 .nav li.soundtoggle.soundon{background-size:auto 18px;}
#contents-1 img{padding-top:10px;}
.contact-btn-button{
	width:230px; height:auto;
	top:calc(50% - 21px);
	left:calc(50% - 115px);
}
#footer p a{font-size:13px; font-size:1.3rem;}
.back-top{right:30px; bottom:30px;}


}