@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=Dela+Gothic+One&display=swap');


body{
    margin: 0;
    padding: 0;
    color: #FFF;
    background: #000;
    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: 7% 0;
    background: url("../images/nobolt/kinniku_jinsei_background.jpg") top -50px center no-repeat;
    background-size: cover;
    position: relative;
    }

header p.logo{
    width: 10%;
    margin: 0;
    position: absolute;
    top: 30px;
    left: 30px;
    }

header div.gameTitle{width: 50%; margin: 0;}

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

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

.anime {animation: poyon 1.2s;}

@keyframes poyon {
    0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
    15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
    30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
    50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
    70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
    100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
    }


@media only screen and (max-width: 860px){
    header{
        margin: 0;
        padding: 8% 0 70%;
        background: url("../images/nobolt/kinniku_jinsei_background_sp.jpg") bottom -50px right no-repeat;
        background-size: 102.5%;
        position: relative;
        }  

    header div.gameTitle{width: 80%; margin: 0 auto;}
    
    header p.logo{
        width: 15%;
        top: 15px;
        left: 15px;
        }
    }

@media only screen and (max-width: 480px){
    header{
        padding: 13% 0 77%;
        background: url("../images/nobolt/kinniku_jinsei_background_sp.jpg") bottom right no-repeat;
        background-size: 102.5%;
        }
    
    h1{margin: 0 auto 0.5em;}
    header div.gameTitle{width: 90%;}
    }



/*mainContents*/
main{
    width: 100%;
    margin: 0 auto;
    }

section{max-width: 1380px; margin: 0 auto; padding: 0 1.5em 8%;}
section:first-child{max-width: 100%!important;}
    
@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{margin-bottom: 8%; padding: 5em 1em; background: #f7ee12;}

.story > div:first-child{
    max-width: 1000px;
    margin: auto;
    padding: 1.5em;
    border: solid 5px #000;
    background: #FFF;
    position: relative;
    }

    .story > div:first-child p{margin-bottom: 1em; text-align: center; color: #000;}
    .story > div:first-child p:first-child{font-size: 2em; margin-bottom: 0.5em;}

.story > div:last-child{
    max-width: 800px;
    margin: 3em auto 0;
    padding: 1.5em;
    background: #FFF;
    border: dotted 5px #f67830;
    position: relative;
    }

    .story > div:last-child p{margin-bottom: 1em; color:#f67830; padding-left: 20%;}
    .story > div:last-child p:first-child{font-size: 2em; color:#f67830; border-bottom: solid 3px #f67830; margin-bottom: 0.5em; }


.story > div:first-child p:first-child,.story > div:last-child p:first-child{font-family: 'Dela Gothic One', cursive;}

.trophy{
    width: 14%;
    position: absolute;
    top: -15%;
    right: 2.5%;
    }

.pocket{
    width: 14%;
    position: absolute;
    top: -20%;
    left: 2%;
    transform:rotate(10deg);
    }

.sp{display: none;}


@media only screen and (max-width: 860px){
    .trophy{width: 16%; margin: 0 auto; padding-top: 1em; position: relative;}
    .pocket{width: 15%;}
    }

@media only screen and (max-width: 700px){
    .pocket{width: 20%; top: -8%;}
    .story > div:last-child p{padding-left: 28%;}
    }


@media only screen and (max-width: 480px){
    .trophy{width: 26%;}
    .pocket{width: 24%; top: -3%;}
    .story > div:last-child p{padding-left: 30%;}
    .sp{display: block;}
}


/*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: 100%; 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(255,255,255,0.25);}
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 #1877f2; background: #1877f2;}
	.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(24,119,242,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 8em;
	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;}