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

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');

html {scroll-behavior: smooth;}

body{
	margin: 0;
	padding: 0;
    font-family: 'Noto Sans JP', sans-serif;
    }


.bg_pattern {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #fff;
	z-index: -1;
	}

.Paper {
	background-image:
    repeating-linear-gradient(to bottom,
      transparent 25px,
      rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
      transparent 27px,  transparent 51px, 
      rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
      transparent 53px,  transparent 77px, 
      rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
      transparent 79px,  transparent 103px, 
      rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
      transparent 105px,  transparent 129px, 
      rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px),

    repeating-linear-gradient(to right,
      transparent 25px,
      rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
      transparent 27px,  transparent 51px, 
      rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
      transparent 53px,  transparent 77px, 
      rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
      transparent 79px,  transparent 103px, 
      rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
      transparent 105px,  transparent 129px, 
      rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px);	}


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

img{max-width: 100%;}

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

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;}


/*--------navi--------*/
header{
    width: 100%;
    margin: 0;
    padding: 0;
    border-top: solid 5px;
	border-image: linear-gradient(to right, rgba(26,143,213,1) 0%, rgba(126,220,251,1) 100%) 1;
    display: flex;
    background: #FFF;
    position: fixed;
    top: 0;
    z-index: 9989;
    }

.title {
    width: 280px;
    margin: 0;
    padding: 0;
    text-align: center;
    background: linear-gradient(to bottom, rgba(26,143,213,1) 0%, rgba(126,220,251,1) 100%);
    border-bottom-right-radius: 20px;
    }

.title a{padding: 0.5em 0.25em; display: block;}
.title a > img{width: 90%; height: auto;}


.gNav {width: 100%; display: flex; flex-wrap: wrap;}
.LinkBlock{display: flex; flex-wrap: wrap; justify-content: flex-end;}
.gNav .gNav-menu{width: 80%; margin: auto;}
.LinkBlock{width: auto;}


.navi .btn-gNav {
    position: fixed;
    top: 8px;
    right: 20px;
    width: 40px;
    height: 40px;
    z-index: 12;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 400ms;
    }

.navi .btn-gNav span {
    position: absolute;
    width: 100%;
    height: 4px;
    background: #1a8fd5;
    border-radius: 10px;
    transition: all 400ms;
    }

.navi .btn-gNav span:nth-child(1) {top: 0;}
.navi .btn-gNav span:nth-child(2) {top: 15px;}
.navi .btn-gNav span:nth-child(3) {top: 30px;}

.navi .btn-gNav.open span:nth-child(1) {
    background: #ffffff;
    top: 6px;
    transform: rotate(-45deg);
    }

.navi .btn-gNav.open span:nth-child(2),
.navi .btn-gNav.open span:nth-child(3) {
    top: 6px;
    background: #ffffff;
    transform: rotate(45deg);
    }

.btn-gNav {display: none;}

.gNav .gNav-menu {display: flex; align-items: center;}

.gNav .gNav-menu li {
    flex: 0 1 16%;
    padding: 0;
    border-left: solid 2px #1a8fd5;
    text-align: center;
    }

    .gNav .gNav-menu li:first-child {border-left: none;}

.gNav .gNav-menu a{
    padding: 0.25em 0 0.35em;
    color: #1a8fd5;
    font-size: 0.9em;
    font-weight: bold;
    display: block;
    }

    .gNav .gNav-menu a:hover{color: #FFF; background: #1a8fd5;}



@media screen and (max-width: 1100px) {
	.title a > img{width: 70%; height: auto;}

	.btn-gNav {display: block;}
    
    .gNav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.95);
        font-size: 16px;
        box-sizing: border-box;
        z-index: 1;
        padding-top: 70px;
        transition: .3s;
        }
    

    .gNav.open {right: 0;}

    .gNav .gNav-menu {
        padding: 0;
        width: 100%;
        height: 100%;
        display: block;
        flex-direction: column;
        text-align: center;
        }

    .gNav .gNav-menu li {
        width: 86%;
        margin: auto;
        border-left: none;
        border-bottom: dotted 2px #1a8fd5;
        }
    
    .gNav .gNav-menu a{padding: 1.5em 0;}
    
    .LinkBlock{display: none;}
    
    }



/*----------main----------*/
main{margin: 0; padding: 0;}
main > section{max-width: 1480px; margin: auto; padding: 0;}
main#TOP > section:first-child{max-width: inherit;}

#TOP{
    background-image: url("../images/event/tsBlueArchive_mainVisual.webp");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    }

#Category{
    background-image: url("../images/event/tsBlueArchive_category_bg.webp");
    background-repeat: no-repeat;
    background-position: top 70px center;
    background-size: contain;
    }

@media only screen and (max-width: 1100px) {#TOP{background-position: top 50px center; background-size: 120%;}}
@media only screen and (max-width: 480px) {#TOP{background-size: 145%;} #Category{background-position: top 74px center;}}



.oshirase{padding: 1em 1.5em; border: double 6px #e00012;}
.str{margin-top: 1.5em; font-weight: bold;}
.red{color: #e00012;}
.oshirase a{color: #d51a6e;}
.oshirase a:hover{color: #d34886;}


/*MAIN VISUAL*/
.mainVisual div{padding-top: 45%; padding-bottom: 3em;}
#Category{padding-top: 45%;}

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

	.mainVisual h1 + p{width: 80%; max-width: 900px; margin: 1em auto;}

    #Category .mainVisual h1{
        padding-top: 24%;
        background: url("../images/event/sagaTS2024_category_h1.png") no-repeat;
        background-position: top center;
        }

@media only screen and (max-width: 1100px) {.mainVisual div{padding-top: 65%;} .mainVisual h1 + p{width: 65%;}}
@media only screen and (max-width: 860px) {.mainVisual div{padding-top: 75%;} .mainVisual h1{padding-top: 19%;} #Category{padding-top: 55%;}}
@media only screen and (max-width: 480px) {.mainVisual div{padding-top: 90%; padding-bottom: 1.5em;}}

/*Category*/
#eventDetails{padding: 0 1em 10%;}
#eventDetails > div{
    padding: 1em;
	border: solid 5px #1a8fd5;
	border-radius: 10px;
    background: #FFF;
    }

#eventDetails h2{
	margin: 1.5em 0;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.8em;
	font-weight: 700;
	text-align: center;
	color: #1a8fd5;
	}

#eventDetails h2::before,
#eventDetails h2::after {
	content: '';
	width: 70px;
	height: 3px;
	background-color: rgba(26,143,213,0.5);
	}

#eventDetails h2::before {margin-right: 20px;}
#eventDetails h2::after {margin-left: 20px;}
h2 + p{margin: 1em auto 2em; text-align: center;}

@media only screen and (max-width: 860px) {#eventDetails{padding: 0 1em 15%;}}
@media only screen and (max-width: 480px) {#eventDetails{padding: 0 1em 25%;}}
    
    
#eventDetails h3{
    padding: 0.35em 0.5em 0.35em 2.5em;
    color: #FFF;
	border-radius: 10px;
    background-image: url("../images/event/kurowizTS2021_h3_mark.png");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: left 10px center;
    background-color: #1a8fd5;
    }
    
    #eventDetails h3 br{display: none;}
    #seal h3,#ensei h3{margin-top: 5em;}
    .LinkButton + h3{margin: 3em 0 0;}
    article + h3{margin: 3em 0 0;}

@media only screen and (max-width: 480px) {
    #eventDetails h3{padding: 0.35em 0.5em 0.5em 35px; font-size: 0.9em; line-height: 1.6em; background-size: 20px auto; background-position: left 10px top 11px;}
    #eventDetails h3 br{display: block;}
    }


#eventDetails h4{
    margin: 2.5em 0 1em;
    padding: 0.3em 0.65em 0.5em;
    font-size: 1em;
    color: #1a8fd5;
    border-left: solid 12px #1a8fd5;
    border-bottom: solid 2px #1a8fd5;
    }

    #eventDetails h4 + p{margin-left: 1.5em;}
    #eventDetails .FlexBox h4{margin: 0 0 1em!important;}


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


#eventDetails h5{
    margin: 0 0 1em;
    padding: 0.15em 0.5em 0.5em 0.75em;
    font-size: 1em;
    color: #727171;
    border-left: 4mm ridge rgba(126,220,251,0.75);
	border-bottom: solid 1px #ccc;
    }

@media only screen and (max-width: 860px) {#eventDetails h5{font-size: 0.9em;} .collabo h5 br{display: none;}}

#eventDetails h6{
    margin: -0.5em 0 1em;
    padding: 0;
    font-size: 0.8em;
    color: #FFF;
    text-align: right;
    }

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

.notes{padding: 1em;}
h4 + .notes{padding: 0 1em 1em;}
.notes p{font-size: 0.8em; margin: 0 0 0.25em;}

.ann{font-size: 0.8em; margin: 0 1.5em;}

.ColaboDetails > article, #ensei article{padding: 0 1em;}

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

.ticket{margin: 1.5em 1.5em 3em;}
.online_date{padding: 0 1em 3em;}


/*STORE*/
.storeList{padding-bottom: 2em; display: flex; flex-wrap: wrap;}
.storeList article{flex: 0 1 48%; margin: 0 1%; border-bottom: dotted 3px rgba(126,220,251,1);}

.storeList a{padding: 1.5em; display: block;}

.storeList article:hover{background-color: rgba(126,220,251,0.15);}

.storeList p{margin: 0 0 0.25em;}
.storeList p:first-child{font-weight: bold;}

.storeList a > p:nth-child(2){font-size: 0.8em;}


.tag{margin: 0.5em 0 0.25em; display: flex; flex-wrap: wrap;}
.tag p{
    max-width: 110px;
    flex: 0 1 32%;
    margin: auto 1% 0.5em 0;
    padding: 0.35em 0.5em;
    border: solid 1px #727171;
    border-radius: 30px;
    font-size: 0.7em;
    text-align: center;
    }

.tag p:first-child{
	flex: 0 1 100%;
	max-width: inherit;
	margin: 0;
	padding: 0.5em 0.5em 0.5em 0;
	text-align: left;
	border: none;
	color: #1a8fd5;
	}

.special .tag p:first-child{flex: 0 1 100%; max-width: inherit; margin: auto 1% 0.5em 0;}


.ex{margin: 0; padding: 1em 0 0.5em 0; color: #e00016;}

@media only screen and (max-width: 1310px) {.storeList{ display: block;}}
    
@media only screen and (max-width: 480px) {
    .storeList a{padding: 1em 1em 0.65em;}
    .storeList p{font-size: 0.8em;}
    .tag p{font-size: 0.65em; margin-bottom: 0.35em;}
    .tag p:first-child{max-width: 100%; flex: 0 1 100%;}
    }


/*LinkButton*/
.LinkButton{margin: 1em 0 5em;}

.LinkButton a {
    max-width: 400px;
    margin: 0;
    padding: 6px 35px 6px 25px;
    background: #d51a6e;
    border: solid 2px #FFF;
    border-radius: 25px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 0.9em;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-weight: bold;
    }

.LinkButton a:after {
    content: "";
    position: absolute;
    top: 50%;
    bottom: 0;
    right: 2rem;
    font-size: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: right 0.3s;
    width: 6px;
    height: 6px;
    border-top: solid 3px currentColor;
    border-right: solid 3px currentColor;
    transform: translateY(-50%) rotate(45deg);
    }

.LinkButton a:hover {background: #e45796; color:#FFF;}
.LinkButton a:hover:after {right: 1.4rem;}

#TS_NIKKE .LinkButton a,.file a{max-width: 860px; margin: auto;}
.more a{margin: auto;}

.soon a{margin: 1em auto; color: #94b1c2; background: none; border: solid 2px #94b1c2;}
.soon a:hover{color: #94b1c2; background: none;}
.soon a:after{border-top: none; border-right: none;}


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

.block02 div,.block02 p{flex: 0 1 48%; margin: 0 1% 1em;}
.block03 div,.block03 p{flex: 0 1 32%; margin: 0 0.5% 1em;}
#Prize .block03 div,#Prize .block03 p{flex: 0 1 30%; margin: 0 auto 1em;}
.online .block03 div{flex: 0 1 30%; margin: 0 auto 2em;}
.block04 div,.block04 p{flex: 0 1 23%; margin: 0 auto;}
.block05 div,.block05 p{flex: 0 1 19%; margin: 0 auto 0.75em;}
.block07 div,.block07 p{flex: 0 1 14%; 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,.block02 p{flex: 0 1 100%; margin: 0 auto 2em;}
	.block03 div,.block03 p{flex: 0 1 48%; margin: 0 auto 2em;}
	#Prize .block03 div,#Prize .block03 p{flex: 0 1 45%; margin: 0 auto 2em;}
	.online .block03 div{flex: 0 1 45%; margin: 0 2.5% 2em;}
    .block04 div,.block04 p{flex: 0 1 48%; margin: 0 auto 2em;}
    .block05 div,.block05 p{flex: 0 1 24%; margin: 0 0.5% 0.35em;}
    .block07 div,.block07 p{flex: 0 1 24%; margin: 0 0.5% 0.45em;}
	.block10 div,.block10 p{flex: 0 1 24%; margin: 0 auto 0.25em;}
    }

@media only screen and (max-width: 480px) {
	#Prize .block03 div,#Prize .block03 p{flex: 0 1 96%;}
	.online .block03 div{flex: 0 1 96%; margin: 0 auto 2em;}
	.block04 div,.block04 p{flex: 0 1 96%;}
    .block05 div,.block05 p{flex: 0 1 49%; margin: 0 0.5% 0.25em;}
    .block07 div,.block07 p{margin: 0 0.5% 0.25em;}
    }
    

/*Food Drink*/
.crepe{text-align: center;}
@media only screen and (max-width: 860px) {}


/*Campaign*/
#Campaign{margin-top: 10em; padding: 1em!important;}
#postCard{padding-top: 7em;}


/*goods*/
.price {
  position: relative;
  padding-left: 8.5em;
}

.price span {
  position: absolute;
	font-size: 0.8em;
  top: 0;
  left: 0;
  padding: 0 2rem;
  color: #FFF;
  background: #1a8fd5;
}

.price span:after {
  position: absolute;
  top: calc(50% - 7px);
  right: -11px;
  width: 0;
  height: 0;
  content: '';
  border-width: 7px 0 7px 12px;
  border-style: solid;
  border-color: transparent transparent transparent #1a8fd5;
}


/*---footer---*/
footer{
    padding: 3em 1.5em 6em;
	color: #727171;
	display: block;
    }

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

   
    ul.taitoLink{margin: 1em 0 0; padding: 0 0 2em; border-bottom: solid 1px rgba(114,113,113,0.25);}
	
	ul.taitoLink li{
		font-size: 1.0em;
		margin-right: 1.0em;
		display: inline-block;
		}
	
	ul.taitoLink a{color: #727171;}
	ul.taitoLink a:hover{color: #1a8fd5;}

footer p:first-child{
	margin-bottom: 4em;
	font-size: 0.8em;
	color: #727171;
	}

footer p:last-child{
	margin-top: 2em;
	font-size: 0.8em;
	color: #727171;
	text-align: center;
	}

@media only screen and (max-width: 480px) {
    footer{padding: 10% 1.5em 25%;}
    ul.taitoLink li{font-size: 0.9em;}
    }


/*SNS*/
#shareBox {
	width: 100%!important;
	max-width: 100%!important;
    margin: 0!important;
    padding-bottom: 10%;
	text-align: center;
	position: relative;
	}

	.shareButtons {
		position: absolute;
        top: 0;
		bottom: 0;
		left: calc(47% - 75px);
		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;
		}

    .mainVisual #shareBox {margin-top: 3em;}
    .mainVisual .shareButtons{left: calc(43% - 75px);}

	.shareButtons > div> a {
		display: block;
		width: 45px!important;
		height: 45px!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) {#shareBox {margin: 15% 0 30%;} .mainVisual #shareBox{display: none;} .shareButtons {left: calc(44% - 75px);}}
@media only screen and (max-width: 480px) {#shareBox {margin: 30% 0 50%;} .shareButtons {left: calc(40% - 75px);}}

@media only screen and (max-width: 860px) {#shareBox {padding-bottom: 8em;} .shareButtons {left: calc(37.5% - 40px);}}
@media only screen and (max-width: 480px) {.shareButtons {left: calc(30% - 40px);}}