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


@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500;700&family=Noto+Serif+JP:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yomogi&display=swap');

body{
    margin: 0;
    padding: 0;
    color: #FFF;
    background: #121212;
    font-family: 'Noto Sans JP', sans-serif;
    }

p,li,dt,dd{
    margin: 0;
    font-size: 1em;
    line-height: 1.6em;
    letter-spacing: 1px;
    }

.large{font-size: 1.6em;}
.small{font-size: 0.9em;}
.bold{font-weight: bold;}
.center{text-align: center;}
.yellow{color: #fff100;}

@media only screen and (max-width: 860px){.large{font-size: 1.4em;}}

a{color: #da0079; text-decoration: none;}
a:hover{color: #a3cad8;}
:hover{
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all  0.5s ease;
	}
a img:hover{opacity: 0.8;}

img{max-width: 100%;}


/*mainVisual*/
header{
    margin: 0;
    padding: 3% 0 45%;
    background: url("../images/nobolt/yorunazo3_bg.jpg") top center no-repeat;
    background-size: cover;
    position: relative;
    }

header p{
    margin: 0;
    position: absolute;
    top: 30px;
    left: 30px;
    }

h1{
    width: auto;
    height: 0;
	margin: 0 auto;
	padding-top: 48%;
	background-repeat: no-repeat;
	background-size: contain!important;
	overflow: hidden;
	display: block;
	background-position: center;
    background-image: url("../images/nobolt/yorunazo3_title10.png");
    }


@media only screen and (max-width: 860px){header p{width: 80px;} h1{padding-top: 60%;}}
@media only screen and (max-width: 480px){header{padding: 6% 0 70%;} header p{width: 60px; top: 15px; left: 15px;} h1{padding-top: 70%;}}

/*mainContents*/
main{
    width: 100%;
    max-width: 1380px;
    margin: 1em auto 0;
    }

section{margin: 0 1.5em; padding-bottom: 8%;}
@media only screen and (max-width: 480px){section{padding-bottom: 20%;}}


h2{
    margin: 0;
    padding: 0 0 0 0.5em;
    font-size: 1.4em;
    border-left: solid 10px #da0079;
    }

h3{
    margin: 1em 0 0.35em;
    padding: 0 0 0 15px;
    font-size: 1em;
    font-weight: bold;
    position: relative;
    }

h3:before{
	content: "";
    position: absolute;
    top: 0.25em;
    left: 0;
    width: 0;
    height: 0;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent transparent #da0079;
	}

table h3{margin: 0 0 0.35em;}
ul + h3{margin: 2em 0 0.35em;}


/*story*/

/*story*/
#story div{
    max-width: 860px;
    margin: auto;
    padding: 1em;
    background: url("../images/nobolt/yorunazo3_story_bg.jpg");
    }

#story div:last-child{background: none;}

#story article{
    padding: 2em 1em 1em;
    border: double 5px #4a3c34;
    text-align: center;
    }

#story article p{
    margin-bottom: 1em;
    font-size: 1.2em;
    line-height: 2em;
    font-family: 'Noto Serif JP', serif;
    color: #4a3c34;
    text-shadow: 1px 1px 2px #7d6d62;
    }

#story div:last-child p{margin-bottom: 1.5em;}
#story div:last-child p:last-child{max-width: 560px;}

#story br.sp{display: none;}

@media only screen and (max-width: 860px){#story article p{font-size: 1em;} #story div:last-child p:last-child{max-width: 420px;}}
@media only screen and (max-width: 480px){
    #story article p{font-size: 0.9em;}
    #story div:last-child p{margin-bottom: 0.5em;}
    #story div:last-child p:last-child{max-width: 270px;}
    #story br.sp{display: block;}
    #story br.sp_none{display: none;}

    }


/*movie*/
.movie div{
	width: 94%;
	margin:0 auto;
	padding-top:  52.8%;
	position: relative;
	}

.movie iframe{
	width: 100% !important;
	height: 100% !important;
	top: 0;
	left: 0;
	position: absolute;
	}


/*table*/
table{width: 90%; margin: 1.5em auto 1.5em 0; border-collapse: collapse; border: solid 1px #FFF;}
th{width: 10em; padding: 0.75em; line-height: 1.8em; border-right: solid 1px #FFF; border-bottom: solid 1px #FFF; background: rgba(0,0,0,0.2);}
td{padding: 0.75em 1em; border-bottom: solid 1px #FFF;}

table ul{margin: 0.25em 0 0; padding: 0;}
table li{list-style: none; padding-bottom: 0.5em;}

@media only screen and (max-width: 860px){table{width: 100%; margin: 1.5em 0;} th{width: auto; border-right: none; border-bottom: dotted 2px #FFF;} th br{display: none;} th,td{display: block;} tr:last-child td{border-bottom: none;}}


/*list*/
ul{margin: 0.75em 1em; padding: 0;}
li{padding-bottom: 0.5em;}

li a{color: #ffff00; font-weight: bold; text-decoration: underline;}
li a:hover{color: #ffd800;}


/*LinkButton*/
.LinkButton{
	width: 100%;
	margin: 0.5em auto 0;
	text-align: center;
	font-weight: bold;
	}

.LinkButton a{
	padding: 0.45em;
	border-radius: 20px;
	color: #FFF;
	display: block;
    box-shadow: 0px 0px 8px 2px #feaec8 inset;
    background: -moz-linear-gradient(top,  #fd5392 0%, #f86f64 100%);
    background: -webkit-linear-gradient(top,  #fd5392 0%,#f86f64 100%);
    background: linear-gradient(to bottom,  #fd5392 0%,#f86f64 100%);
	}
	
.LinkButton a:hover{box-shadow: 0px 0px 8px 2px #feaec8 inset,0px 0px 8px 2px #feaec8 inset,0px 0px 8px 2px #feaec8 inset,0px 0px 8px 2px #feaec8 inset,0px 0px 8px 2px #feaec8 inset;}

table .LinkButton{max-width: 300px; margin: 0.5em 0;}
.lsize{max-width: 800px; font-size: 1.4em;}
.lsize a{border-radius: 40px;}
.lsize br{display: none;}

@media only screen and (max-width: 480px){.lsize{font-size: 1.2em;} .lsize br{display: block;}}

/*FAQ*/
dt{padding-bottom: 0.35em;}
dd{padding: 0.35em 0 3em; border-top: solid 1px #da0079;}


/*SNS*/
.sns ul{margin: 12% 0 8%; padding: 0; text-align: center;}
	
.sns li{
	width: 60px;
	height: 60px;
	display: inline-block;
    padding-bottom: 0;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	margin-left: 2%;
	margin-right: 2%;
	text-align: center;
	list-style-type: none;
	}
		
	.fb{border: solid 2px #3b579d; background: #3b579d;}
	.tw{border: solid 2px #55acee; background: #55acee;}
	.ln{border: solid 2px #00cc00; background: #00cc00;}
	.insta{border: solid 2px #CF2E92; background: #CF2E92;}

	.fb:hover{background: rgba(59,87,157,0.7);}
	.tw:hover{background: rgba(85,172,238,0.7);}
	.ln:hover{background: rgba(0,204,0,0.7);}
	.insta:hover{background: rgba(207,46,146,0.7);}

.sns ul img{padding-top: 20.5%;}



/*footer*/
footer{
	padding: 3em 0 2em;
	color: #FFF;
	background: rgba(0,0,0,0.5);
	}

footer > article{
	max-width: 1380px;
	margin: auto;
	padding: 0 1em 1em;
	}


ul.taitoLink{margin: 1em 0; padding: 0 0 0;}
	
ul.taitoLink li{
	font-size: 1.0em;
	margin-right: 1.0em;
	display: inline-block;
	}
	
ul.taitoLink a{color: #FFF; font-weight: 400!important; text-decoration: none;}
ul.taitoLink a:hover{color: #7ecef4;}


footer article p:last-child{
	margin-top: 2em;
	padding-top: 2em;
	font-size:0.8em;
	color: #FFF;
	text-align: center;
	border-top: solid 1px #313131;
	}


@media only screen and (max-width: 480px){
    .sns ul{margin: 30% 0;}
    .sns li{width:45px;	height:45px;}
    .sns ul img{width: 26px!important; height: auto!important; padding-top: 19.5%;}
    ul.taitoLink li{display: block; margin-bottom: 0.5em;}
    }


/*-----yoyaku-----*/
.reservLink{
    width: 100%;
	max-width: 650px;
	height: auto;
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 99;
	}

.reservLink a{display: block;}





/**/
/*Anser*/
.nazoLink{max-width: 500px; margin: auto; text-align: center;}
.nazoLink img{width: 40%;}
.nazoLink a{
    padding: 1em 0 0.75em;
    display: block;
    border: solid 1px #FFF;
    border-radius: 100px;
    }

.anser{
    max-width: 480px;
    margin: 1em auto 0;
    padding: 1em;
    border: solid 1px #FFF;
    border-left: solid 5px #FFF;
    font-family: 'Yomogi', cursive;
    text-align: center;
    }


.cp_box *, .cp_box *:before, .cp_box *:after {-webkit-box-sizing: border-box; box-sizing: border-box;}
.cp_box {position: relative;}

.cp_box label {
	position: absolute;
	z-index: 1;
	bottom: 0;
	width: 100%;
	height: 60px;
	cursor: pointer;
	text-align: center;
	background: #121212;
    }

.cp_box input:checked + label {background: inherit;}
.cp_box label:after {
    font-size: 0.8em;
	line-height: 2rem;
	position: absolute;
	z-index: 2;
	bottom: 20px;
	left: 50%;
	width: 11.5rem;
	content: '答えをみる？';
	transform: translate(-50%, 0);
	letter-spacing: 0.05em;
	color: #ffffff;
    }

.cp_box input {display: none;}

.cp_box .cp_container {
	overflow: hidden;
	height: 60px; 
	transition: all 0.5s;
    }

.cp_box input:checked + label:after {content: '✕ 閉じる';}
.cp_box input:checked ~ .cp_container {height: auto; padding-bottom: 70px; transition: all 0.5s;}

.ss_box{display: flex;}
.ss_box p{flex: 0 1 48%; margin: 1em 1% 0; text-align: center;}


@media only screen and (max-width: 480px) {
    .nazoLink{margin: 0 auto 1em;}
    
    .cp_box label {height: 30px;}
    .cp_box label:after {bottom: 8px;}
    .cp_box .cp_container {height: 30px;}
    
    .ss_box{display: block;}
    }