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

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@700&display=swap');

body{
    margin: 0;
    padding: 0;
    background-color: #fddcec;
    background-image: url("../images/event/kurowizTS2023_bg.jpg");
    }

/*---text---*/
p,li{
	font-size: 1em;
	line-height: 1.6em;
	color: #FFF;
	}

img{max-width: 100%;}

.small{font-size: 0.9em; line-height: 1.6em!important;}
.large{font-size: 1.6em; font-weight: bold;}
.center{text-align: center;}

br.on{display: none;}
br.off{display: block;}


@media only screen and (max-width: 480px) {
    p,li{font-size: 0.9em; line-height: 1.6em;}
    br.on{display: block;}
    br.off{display: none;}
    .small{font-size: 0.8em; line-height: 1.3em;}
    p > .small{line-height: 1.3em!important;}
    .center{text-align: left;}
    }
    
/*---link---*/
:hover{
	-webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all  0.8s ease;
	}

a{outline: none; text-decoration: none;}

p > a, li > a{color: #d1e7fc;}
p > a:hover, li > a:hover{color: #fff;}


/*---animation---*/
.fadeDown{
animation-name:fadeDownAnime;
animation-duration: 2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-50px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}



/*teaser
#teaserVisual{
    padding: 9em 0 0;
    background-image: url("../images/event/kurowizTS2023_teaser_bg.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    }

main{max-width: 1480px; margin: auto; padding-bottom: 9em; position: relative;}


h1{
	width: 100%;
	height: 0;
	margin: 0 0 0.5em;
	padding-top: 0;
	background: url("../images/event/kurowizTS2023_teaser_title.png") no-repeat;
	background-size: contain!important;
	overflow: hidden;
	display: inline-block;
	background-position: top center;
	}

    h1 + p{font-size: 1.4em; text-align: center; color: #FFF; font-family: 'Zen Kaku Gothic New', sans-serif;}


.wiz{width: 22.5%; top: -5em; right: 0.5em; position: absolute;}

p.copy{font-size: 0.8em; text-align: center; color: #FFF;}
p.copy br{display: none;}


@media only screen and (max-width: 860px) {
    #teaserVisual{padding: 9em 0 0; background-size: 250%;}
    h1{padding-top: 55%;}
    p.copy{font-size: 0.7em; text-align: left;}
    p.copy br{display: block;}
    .wiz{top: auto; bottom: -3em; right: 0;}
    }


@media only screen and (max-width: 480px) {
    .wiz{top: auto; bottom: 2em; right: 0;}
    main{padding-bottom: 7em;}
    }*/


/*----------NAVI------------*/
header{
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 999;
	font-family: 'Noto Serif JP';
	font-weight: bold;
	background: linear-gradient(to bottom, rgba(203,5,59,1.0) 0%,rgba(239,36,91,1.0) 100%);
	}

header ul{padding: 0;}
header ul,header li{list-style: none;}

#nav {
	width: 100%;
	max-width: 1480px;
	margin: auto;
	}

#nav > a {display: none;}
#nav li {position: relative;}
#nav li a {
	color: #FFF;
	display: block;
	}

#nav li a:active {}
#nav li span{font-size: 0.8em;}

/*first level*/
#nav .small{font-size: 0.8em!important;}

#nav > ul {
    margin: 0;
    padding: 0;
	display: flex;
	align-items: center;
	}

#nav > ul > li {flex: 0 1 14%;}

#nav > ul > li > a {
	padding: 1.5em 0.7em;
	font-size: 1.0em;
	line-height: 1.4em;
	text-align: center;
    display: block;
	}

#nav > ul > li > a:hover {background: rgba(255,255,255,0.25)}


@media only screen and (max-width: 860px) {

header{background: none; top: 0; bottom: auto;}
	
#nav > a {
	width: 3em;
	height: 3em;
    margin: 0;
	text-align: left;
	text-indent: -9999px;
	background-color: rgba(60,70,125,0.9);
	box-shadow: 0px 0px 6px 2px #FFF inset;
	position: relative;
	z-index: 999;
	}
	
#nav > a:before, #nav > a:after {
	position: absolute;
	border: 2px solid #fff;
	top: 35%;
	left: 25%;
	right: 25%;
	content: '';
	}
	
#nav > a:after {top: 60%;}
#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type {display: block;}
	
/*first level*/
#nav > ul {
	margin-top: -3.8em;
	padding-top: 8vh;
	height: 100vh;
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0.9);
	}
	
#nav:target > ul {display: block;}

#nav > ul > li {width: 94%; margin: auto; border-bottom: dotted 2px #4a6177;}
#nav > ul > li:last-child {border-bottom: none;}
	
#nav > ul > li > a {
	line-height: 1.4em;
	height: auto;
	text-align: center;
	padding: 1.5em 0.25em;
	}

#nav > ul > li > a:hover {color: #FFF;}
#nav > ul > li:not( :last-child ) > a {border-right: none;}
}



/*----mainVisual----*/
main > section{
    padding-top: 3.8em;
    position: relative;
    background: linear-gradient(to right, rgba(221,128,150,0) 40%,rgba(221,128,150,0.7) 100%);
    }

.mainVisual{
    background-image: url("../images/event/kurowizTS2023_mainVisual.jpg");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
    }

.logo{width: 15%; top: 4.8em; right: 15px; position: absolute;}


.mainVisual div{
    width: 40%;
    margin: 0 6% 0 auto;
    padding: 10% 0;
    }
   
.mainVisual h1{
	width: 100%;
	height: 0;
	margin: 0 0 1.5em;
	padding-top: 21.5%;
	background: url("../images/event/kurowizTS2023_logo.png") no-repeat;
	background-size: contain!important;
	overflow: hidden;
	display: inline-block;
	background-position: top center;
	}

.mainVisual h1 + p{
	width: 100%;
	height: 0;
	margin: 0 0 1em;
	padding-top: 17%;
	background: url("../images/event/kurowizTS2023_catchcopy.png") no-repeat;
	background-size: contain!important;
	overflow: hidden;
	display: inline-block;
	background-position: center top;
	}

.c_mainVisual{margin: 0; padding: 0;}

@media only screen and (max-width: 860px) {
    main > section{padding-top: 0; background: linear-gradient(to right, rgba(221,128,150,0) 0%,rgba(221,128,150,0.7) 100%);}
    .logo{width: 22%; top: -5px; right: 25px;}
    .mainVisual div{width: 90%; margin: auto; padding-top: 125%;}
    }

@media only screen and (max-width: 480px) {
    }


/*----mainContents----*/
.mainContents{background: #3d467e;}
.mainContents section{width: 100%; max-width: 1480px; margin: 0 auto; padding: 2em;}

.mainContents h2{
	width: 100%;
	height: 0;
	margin: 1em 0;
	padding-top: 92px;
	background-size: contain!important;
	overflow: hidden;
	display: inline-block;
    background-repeat: no-repeat;
	background-position: top center;
	}

    #TOP h2{background-image: url("../images/event/kurowizTS2021_store_h2.png");}
    #NAZO h2{background-image: url("../images/event/kurowizTS2023_nazo_h2.png");}
    #collabo h2{background-image: url("../images/event/kurowizTS2021_food_h2.png");}

    #Badge h2{background-image: url("../images/event/kurowizTS2021_badge_h2.png");}
    #online h2{background-image: url("../images/event/kurowizTS2021_goods_h2.png");}
    #SPECIAL h2{background-image: url("../images/event/kurowizTS2023_special_h2.png");}


    h2 + p{margin: 1em auto 2em; text-align: center;}

@media only screen and (max-width: 860px) {
    .mainContents{padding: 1em 1em 15%;}
    .mainContents section{padding: 2em 1em;}
    .mainContents h2{padding-top: 70px;}
    }
@media only screen and (max-width: 480px) {.mainContents{padding: 1em 1em 25%;} .mainContents h2{margin: 0.5em 0 0; padding-top: 19%;}}


.mainContents h3{
    padding: 0.35em 0.5em 0.35em 2.5em;
    color: #FFF;
    border-radius: 5px;
    background-image: url("../images/event/kurowizTS2021_h3_mark.png");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: left 10px center;
    background-color: #192250;
    }
    
    .LinkButton + h3{margin: 3em 0 0;}
    article + h3{margin: 3em 0 0;}


@media only screen and (max-width: 860px) {.mainContents h3{background-position: left 10px top 12px;}}

@media only screen and (max-width: 480px) {
    .mainContents h3{
        padding: 0.75em 0.5em 0.75em 2.5em;
        font-size: 1em;
        line-height: 1.3em;
        background-size: 25px 16px;
        background-position: left 10px top 15px;
        }
    }


.mainContents h4{
    margin: 2.5em 0 1em;
    padding: 0.15em 0.65em 0.25em;
    font-size: 1em;
    color: #FFF;
    border-left: solid 10px #8b92bd;
    border-bottom: solid 2px #8b92bd;
    }

    .mainContents .FlexBox h4{margin: 0 0 1em!important;}
    .online p + h4{margin: 1.5em 0 0.5em!important;}

@media only screen and (max-width: 480px) {.mainContents h4{line-height: 1.3em; padding: 0.15em 0.65em 0.35em;}}


.mainContents h5{
    margin: 0 0 1em;
    padding: 0.25em 0.5em;
    font-size: 1em;
    color: #FFF;
    border-bottom: dotted 3px rgba(255,255,255,0.5);
    }

    .mainContents h5.mark{
        margin: 0 0 1em;
        padding: 0.25em 0.5em 0.25em 2em;
        background: url("../images/event/kurowizTS2021_h4_mark.png") no-repeat left top 5px;
        }

    .online h5{margin: 0 0 0.5em!important; padding: 0.5em!important;}
    .online h5 + p{font-weight: bold; margin: 0; padding: 0 0.5em;}

@media only screen and (max-width: 860px) {.colabo h5 br{display: none;}}

.mainContents h6{
    margin: 1em 0;
    padding: 0 0 0 0.5em;
    font-size: 1em;
    color: #FFF;
    border-left: solid 10px #8b92bd;    
    }

.mainContents ul{margin: 1em 1.5em 0 2em; padding: 0 0 0.5em;}
.mainContents li{margin-bottom: 0.5em;}
.mainContents li > ul{margin: 0.5em 1em 1em 1.25em; padding: 0;}

.ColaboDetails > article{padding: 0 1em;}
@media only screen and (max-width: 860px) {.ColaboDetails > article{padding: 0 0.5em;}}

.event-info{padding-bottom: 3em;}
#online .event-info{padding-bottom: 1.5em;}
#SPECIAL .event-info{padding-bottom: 1.5em;}
@media only screen and (max-width: 480px) {#online .event-info{padding-bottom: 0;} #SPECIAL .event-info{padding-bottom: 0;}}

/*Linkbutton*/
.LinkButton{max-width: 800px; margin: 1em auto;}
.LinkButton a{
    padding: 0.65em 0.35em;
    color: #FFF;
    border-radius: 20px;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    display: block;
    background: rgba(203,5,59,1.0);
    }

    .LinkButton a:hover{background: #f02c61;}

.event-info .LinkButton{max-width: 600px; margin: 1em 0;}

/*movie*/
.pv{
	width:100% !important;
	margin: 0!important;
	padding-bottom:56.25%;
	position:relative;
	}

.pv iframe{
	width:100%;
	height:100%;
	top:0;
	right:0;
	position:absolute;
	}

    .kurowizTS_PV{max-width: 1280px; margin: auto; padding-top: 3em;}


/*STORE*/
.storeList{margin-bottom: 5em;}
.storeList + p{display: none;}

.store{display: flex; flex-wrap: wrap; padding-bottom: 2em;}
.store article{flex: 0 1 48%; margin: 0 1%; border-bottom: dotted 3px rgba(255,255,255,0.5);}

.store a{
    padding: 0.85em 0.75em 0.75em 2.5em;
    display: block;
    background: url("../images/event/kurowizTS2021_h4_mark.png") no-repeat left 8px top 14px;
    background-size: 22px 23px;
    }

.store article:hover{background-color: rgba(0,0,0,0.15);}

.store p{margin: 0 0 0.25em;}
.store p:first-child{font-weight: bold;}
.store p:last-child{font-size: 0.9em;}

#TOP .store{padding-top: 1em;}
#TOP .store p{font-size: 0.9em;}
#TOP .store p:first-child{font-size: 1em; font-weight: bold;}

@media only screen and (max-width: 860px) {
    .storeList{width: 100%; overflow-x: scroll; margin-bottom: 0;}
    .storeList img{max-width: 1280px!important;}
    .storeList + p{display: block; margin-bottom: 5em; text-align: right;}
    }

@media only screen and (max-width: 480px) {.store{display: block; margin-top: 0.5em;} #TOP .store p{font-size: 0.8em;} .storeList img{max-width: 1080px!important;}}


/*BOX*/
.FlexBox, .Cookie{display: flex; flex-wrap: wrap; align-items: flex-start;}
.real{align-items: center; font-family: 'Noto Serif JP';}
.block04{padding-bottom: 2em;}

.block02 div{flex: 0 1 48%; margin: 0 1% 1em;}

.block04 div{flex: 0 1 23%; margin: 0 auto;}
.block05 div{flex: 0 1 19%; margin: 0 auto 0.75em;}
.block07 div{flex: 0 1 14%; margin: 0 auto 0.25em;}
.block08 div,.block08 p{flex: 0 1 12%; margin: 0 auto 0.25em;}
.block10 div,.block10 p{flex: 0 1 9%; margin: 0 auto 0.25em;}

@media only screen and (max-width: 860px) {
    .block02 div{flex: 0 1 100%; margin: 0 auto 1em;}
    .block04 div{flex: 0 1 90%; margin: 0 auto 1em;}
    .block05 div{flex: 0 1 24%; margin: 0 0.5% 0.35em;}
    .block07 div{flex: 0 1 24%; margin: 0 0.5% 0.45em;}
    .block08 div,.block08 p{flex: 0 1 24%; margin: 0 0.5% 0.45em;}
    .block10 div,.block10 p{flex: 0 1 24%; margin: 0 0.5% 0.45em;}
    }

@media only screen and (max-width: 480px) {
    .block04 div{flex: 0 1 96%;}
    .block05 div{flex: 0 1 49%; margin: 0 0.5% 0.25em;}
    .block07 div{margin: 0 0.5% 0.25em;}
    }
    
/*Novelty*/
.card_common{
    max-width: 600px;
    margin: 3% auto 5%;
    padding: 0.5em 1em;
    text-align: center;
    background: #a32509;
    }

.coaster{width: 90%; margin: auto; display: flex; flex-wrap: wrap;}
.coaster p{flex: 0 1 31%; margin: 0 1% 2%; padding: 0;}

@media only screen and (max-width: 860px) {.coaster{width: 100%;} .coaster p{flex: 0 1 24%; margin: 0 0.5% 0.35em;}}
@media only screen and (max-width: 480px) {.card_common{padding: 0.25em 1em;} .coaster p{flex: 0 1 24%; margin: 0 0.5% 0.25em;}}


/*Nazotoki*/
.real div:last-child p{font-size: 1.1em; line-height: 1.8em;}

@media only screen and (max-width: 860px) {
    .real div:first-child{flex: 0 1 80%;}
    .real div:last-child{flex: 0 1 100%;}
    .real div:last-child p{font-size: 1em; line-height: 1.6em;}
    }

@media only screen and (max-width: 480px) {
    .real div:first-child{flex: 0 1 94%;}
    .real div:last-child{flex: 0 1 94%;}
    .real div:last-child p{font-size: 0.9em;}
    }

.nazo_notes{margin: 1em 1em 2.5em; padding: 1em 1em 0.5em; border: double 6px #FFF; background: rgba(0,0,0,0.1);}
.nazo_notes p{font-size: 1em; margin: 0 0 0.5em; text-align: center;}
.bold{font-weight: bold;}

@media only screen and (max-width: 860px) {.nazo_notes p{font-size: 0.9em;}}
@media only screen and (max-width: 480px) {.nazo_notes{margin: 1em 0.5em 2em;} .nazo_notes p{font-size: 0.8em; line-height: 1.4em;}}


/*STAR*/
.rate{position: relative; display: inline-block;}
.rate:before{content: "☆☆☆☆☆"; color: #ccc;}

.rate0-5:after,
.rate1:before,
.rate1:after,
.rate1-5:before,
.rate1-5:after,
.rate2:before,
.rate2:after,
.rate2-5:before,
.rate2-5:after,
.rate3:before,
.rate3:after,
.rate3-5:before,
.rate3-5:after,
.rate4:before,
.rate4:after,
.rate4-5:before,
.rate4-5:after,
.rate5:after{
    position: absolute;
    top: 0;
    left: 0;
    color: #FF0;
    overflow: hidden;
    height: 24px;
    }

.rate .rate0-5:after,
.rate .rate1-5:after,
.rate .rate2-5:after,
.rate .rate3-5:after,
.rate .rate4-5:after{
    width: 8px;
    content: "★";
    }

.rate .rate1:after, .rate .rate1-5:before{content: "★";}
.rate .rate1-5:after{left: 1em;}

.rate .rate2:after, .rate .rate2-5:before{content: "★★";}
.rate .rate2-5:after{left: 2em;}

.rate .rate3:after, .rate .rate3-5:before{content: "★★★";}
.rate .rate3-5:after{left: 3em;}

.rate .rate4:after, .rate .rate4-5:before{content: "★★★★";}
.rate .rate4-5:after{left: 4em;}

.rate .rate5:after{content: "★★★★★";}


/*Food Drink*/
.drinkInfo p{font-size: 0.8em; line-height: 1.4em; margin: 0 0 0.75em;}
.crepe{padding-top: 2.5em;}
@media only screen and (max-width: 860px) {.crepe{padding-top: 0;}}


/*----SNS----*/
#shareBox {
    margin: 0 auto;
    padding-top: 5%;
    padding-bottom: 5%;
	text-align: center;
	position: relative;
	}

	.shareButtons {
		position: absolute;
        top: 50%;
		bottom: 0;
		left: 50%;
        transform: translateY(-50%) translateX(-50%);
		display: flex;
		justify-content: space-between;
		width: 240px!important;
		height: auto;
		margin: 0px auto!important;
		padding: 0 0 35px!important;
		clear: none;
		z-index: 888;
		}

	.shareButtons > div> a {
		display: block;
		width: 40px!important;
		height: 40px!important;
        margin: 0 1em;
		background-size: contain;
		background: no-repeat top center;
		}

	.shareButtons>div.fbBtn a {background-image: url("https://www.taito.co.jp/Content/images/sns_ico_01_fb.svg");}
	.shareButtons>div.tweetBtn a {background-image: url("https://www.taito.co.jp/Content/images/sns_ico_02_tw.svg");}
	.shareButtons>div.lineBtn a {background-image: url("https://www.taito.co.jp/Content/images/sns_ico_03_line.svg");}


@media only screen and (max-width: 860px) {
    .shareButtons {top: 55%; left: 50%; transform: translateY(-55%) translateX(-50%);}
    }

@media only screen and (max-width: 490px) {
    #shareBox {padding-top: 0; padding-bottom: 20%;}
    .shareButtons {top: 60%; left: 50%; transform: translateY(-60%) translateX(-50%);}
    }

/*footer*/
footer{
	padding: 3em 0;
	color: #FFF;
	display: block;
	background: #374073;
	}

footer p{padding-bottom: 1em;}

footer > div{
	width: 100%;
	max-width: 1480px;
	margin: auto;
	padding: 0 1em 1em;
	}

	/*TATO Link*/
	ul.taitoLink{margin: 1em 0 0; padding: 0;}
	
	ul.taitoLink li{
		font-size: 0.8em;
		margin-right: 1.0em;
		display: inline-block;
		}
	
	ul.taitoLink a{color: #FFF;}
	ul.taitoLink a:hover{color: #7ecef4;}

footer p:last-child{
	margin-top: 2em;
	font-size:0.8em;
	color: #FFF;
    border-bottom: none;
	}

@media only screen and (max-width: 860px) {footer > div{padding: 5% 1em 1em;}}
@media only screen and (max-width: 480px) {footer > div{padding: 8% 1em 1em;}}