@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&family=Zen+Antique+Soft&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gajraj+One&family=Merriweather:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Reggae+One&display=swap');


body{
    margin: 0;
    padding: 0;
    }

img{max-width: 100%;}

p{
    font-size: 1em;
    line-height: 1.6em;
    font-family: 'Sawarabi Gothic', sans-serif;
    }

header, .catchcopy p, h2, h3, h4, #splash_logo p, #Message p,#history_menu li,.timeline-001__title,.cast h5,.profile h6{color: #313131; font-family: 'Zen Antique Soft', serif;}
.taito_innar h2, .taito_innar p{color: #FFF;}
.taito_innar h2,.TaitoHistory{font-family: 'Reggae One', cursive;}
.taito_innar .TaitoHistory{font-family: 'Zen Antique Soft', serif;}
.warning .staff_only, .staff_only_tp .staff_only{font-family: 'Sawarabi Gothic', sans-serif;}


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

:hover{
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all  0.5s ease;
	}

.center{text-align: center;}
.bold{font-weight: bold;}



/*-----page_Animation-----*/
#splash {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background-image: url("../images/special/70th_background.jpg");
    background-repeat: repeat;
    background-size: auto;
    background-position: top left;
    text-align:center;
    color:#fff;
    }

    .taito_innar #splash {
        background-image: url("../images/special/70th_taito_background.jpg");
        background-repeat: repeat;
        background-size: auto;
        background-position: top left;
        }


/*loading_Animation*/
#splash_logo {
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

    .cssload-thecube {
        width: 70px;
        height: 70px;
        margin: 0 auto;
        position: relative;
        transform: rotateZ(45deg);
        }

    .cssload-thecube .cssload-cube {position: relative;	transform: rotateZ(45deg);}
    .cssload-thecube .cssload-cube {
        float: left;
        width: 50%;
        height: 50%;
        position: relative;
        transform: scale(1.1);
        }

    .cssload-thecube .cssload-cube:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(230,0,18);
        animation: cssload-fold-thecube 2.76s infinite linear both;
        transform-origin: 100% 100%;
        }

    .cssload-thecube .cssload-c2 {transform: scale(1.1) rotateZ(90deg);}
    .cssload-thecube .cssload-c3 {transform: scale(1.1) rotateZ(180deg);}
    .cssload-thecube .cssload-c4 {transform: scale(1.1) rotateZ(270deg);}
    .cssload-thecube .cssload-c2:before {animation-delay: 0.35s;}
    .cssload-thecube .cssload-c3:before {animation-delay: 0.69s;}
    .cssload-thecube .cssload-c4:before {animation-delay: 1.04s;}

    #splash_logo p{padding-top: 1em;}
    .taito_innar #splash_logo p{color: #FFF;}


@keyframes cssload-fold-thecube {
    0%, 10% {transform: perspective(136px) rotateX(-180deg); opacity: 0;}
    25%,75% {transform: perspective(136px) rotateX(0deg); opacity: 1;}
    90%,100% {transform: perspective(136px) rotateY(180deg); opacity: 0;}
    }


/*----------Layout----------*/
#container{
    width: 100%;
    background-image: url("../images/special/70th_background.jpg");
    background-repeat: repeat;
    background-size: auto;
    background-position: top left;
    }

.taito_innar #container{
    background-image: url("../images/special/70th_taito_background.jpg");
    background-repeat: repeat;
    background-size: auto;
    background-position: top left;
    }

.FlexBox{display: flex; flex-wrap: wrap;}
.block02 article{flex: 0 1 48%; margin: 0.5em 1%;}
.block03 div{flex: 0 1 31%!important; margin: 0.5em auto 0.5em 0!important;}
.block04 article{flex: 0 1 23%; margin: 0.5em 1%;}

@media only screen and (max-width: 860px) {#Message .FlexBox{display: block;} .FlexBox{display: block;} .movieDetail .block02 article{margin: 0.5em 0;}}
@media only screen and (max-width: 480px) {
    #Anv_Movie .block04 article{flex: 0 1 48%; margin: 0.5em 1%;}
    #Movie .block03 div{flex: 0 1 100%!important; margin: 0!important;}
    }


/*nav*/
.header{
    width: 100%;
    height: 65px;
    position: fixed;
    left: 0;
    top: 0;
    border-bottom: double 5px #e60012; background: #FFF;    
    background: #FFF;
    z-index: 9999;
    }

    .header_inner {position: relative; padding: 15px;}


h1{
    width: 160px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 20px;
    }
    
    .logo p{margin: 0;}


@media only screen and (max-width: 860px) {
    .nav {
        position: fixed;
        right: -320px;
        top: 0;
        width: 320px;
        height: 100vh;
        padding-top: 60px;
        background-color: #c5a07d;
        transition: all .6s;
        z-index: 999;
        overflow-y: auto;
        }
    
    .hamburger {
        position: absolute;
        right: 0;
        top: 0;
        width: 70px;
        height: 60px;
        cursor: pointer;
        z-index: 9999;
        background: #c5a07d;
        }
    
    .nav_list {
        margin: 0;
        padding: 0;
        list-style: none;
        }
    
    .nav_item {
        text-align: center;
        padding: 0 14px;
        }
    
    .nav_item a {
        display: block;
        padding: 0.75em 0;
        border-bottom: 1px dotted #FFF;
        text-decoration: none;
        color: #FFF;
        }
    
          .nav_item a:hover {color: #c5a07d; background-color: #eee;}
    
    .hamburger_border {
        width: 36px;
        height: 2px;
        position: absolute;
        left: 17px;
        background-color: #FFF;
        transition: all .6s;
        }
    
        .hamburger_border_top {top: 20px;}
        .hamburger_border_center {top: 30px;}
        .hamburger_border_bottom {top: 40px;}
    
    .red_bg {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        z-index: 100;
        background-color: #FFF;
        opacity: 0;
        visibility: hidden;
        transition: all .6s;
        cursor: pointer;
        }

    /*open*/
    .nav-open .nav {right: 0;}
    .nav-open .red_bg {opacity: .8; visibility: visible;}
    .nav-open .hamburger_border_top {transform: rotate(45deg); top: 30px;}
    .nav-open .hamburger_border_center {width: 0; left: 50%;}
    .nav-open .hamburger_border_bottom {transform: rotate(-45deg); top: 30px;}
    }


@media only screen and (min-width: 859px) {
    .header_inner{
        width: 100%;
        max-width: 1480px;
        padding: 0 30px;
        margin-left: auto;
        margin-right: auto;
        }

    .nav_list{
        width: 50%;
        margin: 0 0 0 auto;
        display: flex;
        text-align: center;
        }
    
    .nav_list li{flex: 0 1 25%;}
    .nav_list li a{padding: 1.15em 0; display: block; color: #e00016;}
    .nav_list li a:hover{color: #FFF; background: #e00016;}
    }



/*---main---*/
main{
    background-image: url("../images/special/70th_teaser_kinpaku02.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 40%;
    position: relative;
    }

#TAITO_History main,#Anv_Message main,#Anv_Movie main{
    padding-top: 10em;
    padding-bottom: 10em;
    background-image: url("../images/special/70th_teaser_kinpaku01.png"),url("../images/special/70th_teaser_kinpaku02.png");
    background-repeat: no-repeat;
    background-position: top left, bottom right;
    background-size: 40%;
    }

main section{max-width: 1580px; margin: auto; padding: 0 1.5em;}
#Top main section:first-child{width: 100%; max-width: 100%; margin: 65px auto 0; padding: 0;}


/*mainVisual*/
#mainVisual{height: 90vh; position: relative;}

.video-wrap{width: 100%; position: absolute; z-index: 1;}

.video-wrap img, 
.video-wrap video,
.video-wrap iframe {
    width: 100%;
	height: 100%;
	height: 90vh;
    margin: auto;
    min-width: 100%;
	min-height: 90vh;
    object-fit: cover;
    object-position: center;
    }

@media only screen and (max-width: 860px) {
    #mainVisual{width: 100%; height: 45vh;}
    
    .video-wrap img,
    .video-wrap video,
    .video-wrap iframe {height: 45vh; min-height: 45vh;}
    }

.catchcopy{padding: 10% 0;}
.catchcopy p{text-align: center;}
.catchcopy p:first-child{margin: 0; font-size: 2em; letter-spacing: 1px; padding-left: 0.75em;}
.catchcopy p.since{margin: 0.25em 0 0; color: #787878; letter-spacing: 4px;}

@media only screen and (max-width: 860px) {
    .catchcopy{padding: 20% 0;}
    .catchcopy p:first-child{font-size: 1.6em;}
    }

h2 {
    margin: 0 0 4.5em;
    padding: 1em;
	position: relative;
	text-align: center;
    font-size: 1.8em;
    letter-spacing: 1px;
	}

h2:before {
	position: absolute;
	content: '';
	background: #e00016;
	bottom: 0;
	left: calc(50% - 40px);
	width: 80px;
	height: 3px;
    }

    #Movie h2 {margin: 0 0 1em;}

h2.THistory {position: relative; margin: 0 auto 3em;}

h2.THistory span {
    width: 70px;
    height: 70px;
    padding-top: 5px; 
    font-size: 1.6em;
    line-height: 1.2em;
    text-align: center;
    position: absolute;
    top: 15%;
    left: calc(50% - 195px);
    color: #fff;
    border-radius: 50%;
    background: #e00016;
    }

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

@media only screen and (max-width: 480px) {
    h2.THistory span {
        line-height: 1.1em;
        left: calc(50% - 195px);
        }
    }

h3{margin: 1em; position: relative;}
h3 span{padding-left: 2em;}

.spinner {
    position: absolute;
    width: 25px;
    height: 25px;
    top: 25%;
	left: 0;
    }

.spinner:after, .spinner:before {
    position: absolute;
    content: "";
    border: 2px solid #e60012;
    width: 24px;
    height: 24px;
    }

.spinner:after {animation: spinner1 10s linear infinite;}
.spinner:before {
	width: 33px;
	height: 33px;
	margin-left: -4.5px;
	margin-top: -4.5px;
	animation: spinner2 10s linear infinite;
    }

@keyframes spinner1 {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
    }

@keyframes spinner2 {
	from {transform: rotate(0deg);}
	to {transform: rotate(-360deg);}
    }


#TAITO_History h4{
    padding: 0.25em 0.5em;
    border: solid 1px #195ca0;
    color: #195ca0;
    font-weight: normal;
    }

    #TAITO_History h4 > span{font-size: 1.2em;}
    #TAITO_History h4 > span.notes{padding-left: 5px; font-size: 0.9em!important;}

    #TAITO_History h4 > br{display: none;}
    .taito_innar h4{border: solid 1px #e00016!important; color: #e00016!important;}


@media only screen and (max-width: 860px) {
    main{background-size: 65%;}
    #TAITO_History main,#Anv_Message main,#Anv_Movie main{background-size: 65%;}
    #mainVisual{padding: 20% 0;}
    #TAITO_History h4 > br{display: block;}
    }

@media only screen and (max-width: 490px) {
    main{background-size: 80%;}
    #TAITO_History main,#Anv_Message main,#Anv_Movie main{background-size: 80%;}
    #mainVisual{padding: 30% 0;}
    }


/*Slider*/
.slide-items {
    width: 98%;
    margin: 2em auto;
    padding: 0;
    }

.slide-items li {margin-right: 5px; margin-left: 5px;}
.slide-items img {width: 100%; object-fit: cover; aspect-ratio: 16 / 9;}

@media only screen and (max-width: 860px) {.slide-items img {aspect-ratio: 4 / 3;}}



/*topics*/
#Topics{padding: 7em 1.5em 10em;}
.TopicsList{display: flex; flex-wrap: wrap;}
.TopicsList article{
    flex: 0 1 31%;
    margin: 1em 1%;
    padding-bottom: 1em;
    align-items: center;
    background: #FFF;
    border-radius: 10px 10px;
    box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.25);
    }

.TopicsList article > a{display: block;}
.TopicsList article p:first-child{margin: 0;}
.TopicsList article p:first-child img{width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px 10px 0 0;}

.topics_date{
    margin: 0.85em 1em;
    padding-left: 0.5em;
    border-left: solid 8px #e00016;
    color: #e00016;
    font-weight: bold;
    }

.topics_txt{margin: 0 1em; font-size: 0.9em; color: #313131;}


@media only screen and (max-width: 860px) {.TopicsList article{flex: 0 1 48%;}}
@media only screen and (max-width: 480px) {.TopicsList{display: block;}}



/*Message*/
#Message{padding-bottom: 15%;}

#Message article{
    margin: 1em 1%;
    padding: 1em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: #FFF;
    border-radius: 10px;
    box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.25);
    }
#Message article > div:first-child{flex: 0 1 25%; margin: 1% 2% 1% 1%;}
#Message article > div:last-child{flex: 0 1 70%; margin: 1%;}

#Message p{font-size: 0.9em;}
#Message p.corp{padding-top: 1.5em; font-size: 0.8em; text-align: right;}

br.pc{display: block;}

#Message article p > a{color: #195ca2;}
#Message article p > a:hover{color: #5488bd;}

@media only screen and (max-width: 500px) {
    #Message{padding-bottom: 25%;}
    #Message article{margin: 1em 1% 2em; padding: 1.5em; display: block;}
    #Message article > div:first-child{width: 80%; margin: 1% auto;}
    #Message p{font-size: 0.8em;}
    #Message p.corp{padding-top: 0.5em; font-size: 0.75em; text-align: left;}
    br.pc{display: none;}
    }


/*Link*/
.LinkButton a {
    display: block;
    position: relative;
    margin: 0 auto;
    padding: 1em 2em;
    max-width: 400px;
    color: #FFF;
    font-size: 0.9em;
    font-weight: 700;
    text-align: center;
    background-color: #e60012;
    border-radius: 30px 0 30px 30px;
    transition: 0.3s;
    }

.LinkButton a::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent #FFF transparent transparent;
    transition: 0.3s;
    }

.LinkButton a:hover {text-decoration: none; background-color: #e8303f;}
.LinkButton a:hover::after {top: 8px; right: 8px;}

.timeline-001__section .LinkButton a {margin: 0 0 1em; padding: 1em 1.5em;}
#History_part02 .timeline-001__section .LinkButton a {margin: 1.5em 0 1em; padding: 1em 1.5em;}
#History_part02 .LinkButton a{max-width: 500px;}
.music .LinkButton a, .m_play .LinkButton a{background-color: #300878;}
.music .LinkButton a:hover, .m_play .LinkButton a:hover{background-color: #512997;}

.webLinks{display: flex; flex-wrap: wrap;}
.webLinks div{flex: 0 1 46%; margin: 0 auto;}
@media only screen and (max-width: 480px) {.webLinks{display: block;}}


/*twitter*/
.widget{max-width: 860px; margin: 0 auto 2em;}
.twiLink a{background-color: #1da1f2;}
.twiLink a:hover{background-color: #4eb4f2;}



/*history*/
#TAITO_History main > section{max-width: 1280px; padding: 0.5em 1.5em 5em 2.5em;}


#history_menu{border-bottom: solid 3px #e00016; margin-bottom: 6em;}
#history_menu ul{margin: 0; padding: 0; display: flex; list-style: none;}
#history_menu li{flex: 0 1 50%; text-align: center; border: solid 1px #e00016;}
#history_menu a{padding: 0.5em; display: block; font-weight: 400; color: #e00016; background: rgba(255,255,255,0.5);}
#history_menu a:hover{color: #FFF; background: #e00016;}

#History_part01 #history_menu li:first-child a{color: #FFF; background: #e00016;}
#History_part02 #history_menu li:nth-child(2) a{color: #FFF; background: #e00016;}

.taito_innar #history_menu a{background: rgba(0,0,0,0.5);}
.taito_innar #history_menu a:hover{color: #FFF; background: #e00016;}

#TAITO_History h2 + p{margin-bottom: 5em; color: #434343;}

@media only screen and (max-width: 480px) {
    #history_menu li{font-size: 0.8em;}
    #TAITO_History h2 + p{font-size: 0.9em;}
    }



.timeline-001__section {position: relative; padding: 0 1.5em 1.5em 3.5em;}

.timeline-001__section:not(:last-child)::before,
.timeline-001__section::after {position: absolute; content: '';}

.timeline-001__section:not(:last-child)::before {
    width: 7px;
    height: 110%;
    top: 0;
    left: 13px;
    transform: translateX(-50%);
    background-color: #195ca0;
    }

    .Layout::before {height: 10%!important;}
    .taito_innar .timeline-001__section:not(:last-child)::before {height: 105%; background-color: #e00016;}


.timeline-001__section::after {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle, #175c9d, #175c9d 6px, #fff 7px, #fff 9px, #175c9d 10px, #175c9d);
    top: 1.25em;
    left: 0;
    }

    .taito_innar .timeline-001__section::after {background: radial-gradient(circle, #e00016, #e00016 6px, #000 7px, #000 9px, #e00016 10px, #e00016);}


.timeline-001__label {
    margin-bottom: 0.1em;
    color: #195ca2;
    font-size: 2.5em;
    font-family: 'Merriweather', serif;
    position: relative;
    }

    .timeline-001__label span{
        padding-left: 0.5em;
        font-size: 0.45em;
        color: #839bbf;
        font-family: 'Zen Antique Soft', serif;
        }

    .timeline-001__label::before {
        position: absolute;
	    content: '';
	    top: 53%;
	    width: 20px;
	    left: -30px;
	    height: 2px;
	    border-top: solid 2px #195ca2;
        }

    .taito_innar .timeline-001__label {color: #e00016;}
    .taito_innar .timeline-001__label span{color: #e19fa5;}
    .taito_innar .timeline-001__label::before {border-top: solid 2px #e00016;}
    .ztt span{font-size: 0.28em;}

    @media only screen and (max-width: 490px) {.timeline-001__label {font-size: 2.25em;}}

.timeline-001__date{
    max-width: 80px;
    padding: 0.15em 0.35em;
    border-radius: 5px;
    text-align: center;
    color: #FFF;
    background: #195ca2;
    font-family: 'Zen Antique Soft', serif;
    }

    .taito_innar .timeline-001__date {background: #e00016;}


.timeline-001__title {
    margin: 0 auto 0.5em;
    color: #333333;
    font-size: 1.05em;
    font-weight: 400;
    }
    
    .taito_innar .timeline-001__title {color: #FFF;}
    .multiple{margin-top: 1.8em;}

.timeline-001__content {padding-left: 1.25em; border-bottom: dashed 1px #c6cdd3; padding-bottom: 1.5em;}
.timeline-001__content p{font-size: 0.9em; color: #434343;}
.timeline-001__content p > a{color: #195ca2;}
.timeline-001__content p > a:hover{color: #5488bd;}

.taito_innar .timeline-001__content p{color: #FFF;}
.taito_innar .timeline-001__content p > a{color: #e00016;}
.taito_innar .timeline-001__content p > a:hover{color: #e19fa5;}

.staff_only {position: relative; padding-left: 50px; font-family: 'Reggae One', cursive;}

.staff_only:before {
    width: 35px;
    height: 35px;
    padding-top: 2px;
    line-height: 35px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 50%;
    content: url("../images/special/70th_spaceinvaders.png");
    background: #e00016;
    border-radius: 50%;
    transform: translateY(-50%);
    }

.staff_only:after {
    content: '';
    display: block;
    position: absolute;
    left: 30px;
    height: 0;
    width: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 12px solid #e00016;
    top: 50%;
    transform: translateY(-50%);
    }

.staff_only_tp .staff_only:before {top: 1em;}
.staff_only_tp .staff_only:after {top: 1em;}
    
.sp_topics {
    max-width: 940px;
    margin-top: 3em;
    position: relative;
    padding: 0.5em 1em 0.5em;
    border: 3px solid #cad9e9;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    }

.sp_topics:before {
    height: 24px;
    padding: 0.25em 1.5em 1.8em;
    content: 'Special topics';
    color: #195ca2;
    font-size: 0.9em;
    font-weight: bold;
    font-family: 'Merriweather', serif;
    position: absolute;
    top: -30px;
    left: -3px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: #cad9e9;
    }


.staff_only_tp {
    max-width: 940px;
    margin-top: 3em;
    position: relative;
    padding: 0.5em 1em 0.5em;
    border: 3px solid #f8b0b7;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    }

.staff_only_tp:before {
    height: 24px;
    padding: 0.1em 1em 1.6em;
    content: 'Special topics';
    color: #e00016;
    font-size: 1.1em;
    font-family: 'Reggae One', cursive;
    font-weight: 400;
    position: absolute;
    top: -32px;
    left: -3px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: #f8b0b7;
    }


/*Photo*/
.photo{width: 80%;}

.photo_layout01{padding-top: 0.5em; display: flex;}
    .photo_layout01 p:first-child{flex: 0 1 13%; margin: 0;}
    .photo_layout01 p:last-child{flex: 0 1 83%; margin: 0 2%;}

.photo_layout02{display: flex;}
    .photo_layout02 > p:first-child{flex: 0 1 72%; margin: 0;}
    .photo_layout02 > p:last-child{flex: 0 1 24%; margin: 0 2%;}
    .photo_layout02 > div:first-child{flex: 0 1 62%; margin: 0;}
    .photo_layout02 > div:last-child{flex: 0 1 34%; margin: 0 2%;}

.photo_layout03{padding-top: 0.5em; display: flex;}
    .photo_layout03 p:first-child{flex: 0 1 15%; margin: 0;}
    .photo_layout03 p:last-child{flex: 0 1 81%; margin: 0 2%;}

.photo_layout04{padding-top: 0.5em; display: flex;}
    .photo_layout04 p:first-child{flex: 0 1 81%; margin: 0;}
    .photo_layout04 p:last-child{flex: 0 1 15%; margin: 0 2%;}

.photo_layout05{padding-top: 0.5em; display: flex;}
.photo_layout05__block{padding-top: 0.5em; display: flex;}
    .photo_layout05 p:first-child{flex: 0 1 30%; margin: 0;}
    .photo_layout05 p:last-child{flex: 0 1 66%; margin: 0 2%;}
    .photo_layout05 div:first-child{flex: 0 1 30%; margin: 0;}
    .photo_layout05 div:last-child{flex: 0 1 66%; margin: 0 2%;}
    .photo_layout05__block > div:first-child{flex: 0 1 70%; margin: 0;}
    .photo_layout05__block > div:last-child{flex: 0 1 26%; margin: 0 2%;}

.photo_layout06{padding: 1em 0; display: flex; flex-wrap: wrap; align-items: center;}
    .photo_layout06 p{flex: 0 1 32%; margin: 0 auto;}

.photo_layout07{padding: 1em 0; display: flex; flex-wrap: wrap;}
    .photo_layout07 p{flex: 0 1 23%; margin: 0 1%;}

.photo_layout08{padding: 1em 0; display: flex; flex-wrap: wrap;}
    .photo_layout08 p{flex: 0 1 23%; margin: 0 1%;}
    .photo_layout08 p:last-child{flex: 0 1 30.5%; margin: 0 1%;}

.photo_layout09{padding: 1em 0; display: flex; flex-wrap: wrap;}
    .photo_layout09 p{flex: 0 1 44.5%; margin: 0 1%;}
    .photo_layout09 p:last-child{flex: 0 1 20%; margin: 0 1%;}

.photo_layout10{padding: 1em 0; display: flex; flex-wrap: wrap;}
    .photo_layout10 p{flex: 0 1 32%; margin: 0 1%;}
    .photo_layout10 p:last-child{flex: 0 1 35%; margin: 0 1%;}

.photo_layout11{padding: 1em 0; display: flex; flex-wrap: wrap;}
    .photo_layout11 p{flex: 0 1 35%; margin: 0 1%;}
    .photo_layout11 p:last-child{flex: 0 1 33.8%; margin: 0 1%;}

.photo_layout12{padding: 1em 0; display: flex; flex-wrap: wrap;}
    .photo_layout12 p{flex: 0 1 33%; margin: 0 1%;}
    .photo_layout12 p:last-child{flex: 0 1 32%; margin: 0 1%;}

.photo_layout13{max-width: 700px; padding: 2.5em 0 1em; display: flex; flex-wrap: wrap;}
    .photo_layout13 p{flex: 0 1 46%; margin: 0 2%;}
    .photo_layout13 p:last-child{flex: 0 1 100%; margin: 1em 0.65em;}

.photo_layout14{padding: 2.5em 0; display: flex; flex-wrap: wrap;}
    .photo_layout14 p{flex: 0 1 25.5%; margin: 0 1%;}
    .photo_layout14 p:last-child{flex: 0 1 44.5%; margin: 0 1%;}



@media only screen and (min-width: 521px) {.timeline-001__content {align-items: center; gap: 0 15px;}}

@media only screen and (max-width: 860px) {
    .photo{width: 90%; margin: auto;}
    .photo_layout01 p:first-child{flex: 0 1 29%; margin: 0;}
    .photo_layout01 p:last-child{flex: 0 1 63%; margin: 0 4%;}

    .photo_layout02{display: block;}
    .photo_layout02 > p:last-child{width: 90%; margin: 1.5em auto 0;}
    .photo_layout02 > div:last-child{width: 100%; margin: 1em auto;}
    .photo_layout02 > div:last-child p{text-align: center;}
    .photo_layout02 .middle{width: 70%!important; margin: 1.5em auto 0!important;}

    .photo_layout03 p:first-child{flex: 0 1 40%; margin: 0;}
    .photo_layout03 p:last-child{flex: 0 1 54%; margin: 0 3%;}

    .photo_layout04{align-items: flex-start;}
    .photo_layout04 p:first-child{flex: 0 1 54%; margin: 0;}
    .photo_layout04 p:last-child{flex: 0 1 40%; margin: 0 3%;}

    .photo_layout05 p:first-child{flex: 0 1 40%; margin: 0;}
    .photo_layout05 p:last-child{flex: 0 1 54%; margin: 0 3%;}
    .photo_layout05 div:first-child{flex: 0 1 40%; margin: 0;}
    .photo_layout05 div:last-child{flex: 0 1 54%; margin: 0 3%;}
    
    .photo_layout05__block{display: block; padding-top: 0;}
    .photo_layout05__block > div:last-child{width: 55%; margin: 1.5em auto 0;}
    .photo_layout05__block .large{width: 100%!important; margin: 1.5em auto 0!important; text-align: center;}
    
    .photo_layout06 p:first-child{flex: 0 1 100%; margin: 1em 0.65em;}
    .photo_layout06 p{flex: 0 1 46%; margin: 0 2%;}
    
    .photo_layout07 p{flex: 0 1 48%; margin: 0 1% 0.5em;}
    
    .photo_layout08 p{flex: 0 1 41.5%; margin: 0 1%;}
    .photo_layout08 p:last-child{flex: 0 1 54.5%; margin: 0 1%;}
    
    .photo_layout09 p{flex: 0 1 66%; margin: 0 1%;}
    .photo_layout09 p:last-child{flex: 0 1 30%; margin: 0 1%;}
	
    .photo_layout10 p{flex: 0 1 46%; margin: 0 1%;}
    .photo_layout10 p:last-child{flex: 0 1 50%; margin: 0 1%;}
	
    .photo_layout11 p{flex: 0 1 49%; margin: 0 1%;}
    .photo_layout11 p:last-child{flex: 0 1 47%; margin: 0 1%;}
	
	.photo_layout12 p{flex: 0 1 49%; margin: 0 1%;}
	.photo_layout12 p:last-child{flex: 0 1 47%; margin: 0 1%;}

    }

/*music*/
.music{display: flex;}
.music div{flex: 0 1 31%; margin: 0 auto;}
@media only screen and (max-width: 860px) {.music{display: block;}}


/*movie*/
.history_movie{max-width: 700px; padding-top: 1em;}
.sp_topics + .history_movie{margin-top: 1.5em;}

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



/*Link*/
.TaitoHistory{display: block; position: absolute; top: 60px; right: 12px;}
.TaitoHistory a {
    display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 240px;
	margin: auto;
	padding: 0.5em 0 0.5em 0.5em;
	font-weight: bold;
	border: 2px solid #0072e5;
	background: #0072e5;
	color: #fff;
	border-radius: 5px;
	transition: 0.5s;
	animation: move_d 2.5s 3;
	box-shadow: 0 5px 0 rgba(0,79,158,1);
	position: relative;
    font-size: 0.9em;
    }

@keyframes move_d {
    10% {box-shadow: 0 5px 0 rgba(0,79,158,1); top: 0px;}
    20% {box-shadow: 0 0 0 rgba(0,79,158,1); top: 5px;}
    30% {box-shadow: 0 5px 0 rgba(0,79,158,1); top: 0px;}
    40% {box-shadow: 0 0 0 rgba(0,79,158,1); top: 5px;}
    50% {box-shadow: 0 5px 0 rgba(0,79,158,1); top: 0px;}
    }

.TaitoHistory a:hover {
	color: #0072e5;
	background: #fff;
	border: 2px solid #0072e5;
    }

    .taito_innar .TaitoHistory a{
        border: 2px solid #e00016;
        background: #e00016;
        animation: move_d 2.5s 1;
        box-shadow: 0 5px 0 rgba(162,0,16,1);
        }

    .taito_innar .TaitoHistory a:hover {
        color: #e00016;
        background: #fff;
        border: 2px solid #e00016;
        }
        

/*warning*/
.warning{
    max-width: 760px;
    margin: 0 auto 5em;
    padding: 1.5em;
    border: double 5px #FFDD00;
    font-family: 'Zen Antique Soft', serif!important;
    }

.warning:last-child{margin: 8em auto 5em;}


@media only screen and (max-width: 490px) {
    #TAITO_History main > section{padding: 0.5em 1.5em 7em 1.5em;}
    .timeline-001__section {position: relative; padding: 0 0.5em 1.5em 3.5em;}
    .warning p{font-size: 0.9em;}
    }

/*SPECIAL MOVIE*/
.NEW_movie, .movieDetail{padding-bottom: 5em;}
.movieDetail p{color: #313131;}

.character, .movieArchive{display: flex; flex-wrap: wrap;}
.movieArchive article{flex: 0 1 31%; margin: 1em 1%;}
.character article{flex: 0 1 31%; margin: 1em 1%; padding-bottom: 1em;}
.cast article{margin: 1em 1% 2em; padding: 1em 1.5em;}

.character article, .cast article{
    align-items: center;
    background: #FFF;
    border-radius: 10px 10px;
    box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.25);
    }

.character article p:first-child{margin: 0;}
.character article p:first-child img{width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px 10px 0 0;}

.cast > article > div{display: flex; flex-wrap: wrap;}
.cast > article > div div:first-child{flex: 0 1 30%;}
.cast > article > div div:last-child{flex: 0 1 66%; margin: 0 2%;}

.movieDetail h4{padding: 0.5em; border-bottom: solid 2px #e00016;}
.character h4{margin: 0.5em 1em 0;}
.cast h4{margin: 1em 0 0;}

.cast h5{margin: 2em 0 0 0.5em; padding: 0 0 0 0.5em; font-size: 1em; border-left: solid 8px #e00016;}
.cast h4 + h5{margin: 1em 0 0 0.5em;}

.character h4 + p, p.cv{margin: 0; padding-top: 0.25em; font-size: 0.8em; text-align: right;}
.character h4 + p{padding-right: 1.5em;}
.character p:last-child{margin: 1em 1.5em 0;}

.profile{padding: 1em 0;}
.profile h6{margin: 0; padding: 0 0 0.25em; font-size: 0.9em; border-bottom: dotted 1px #aaaaaa;}
.profile p{font-size: 0.8em;}

.profile a{color: #195ca2;}
.profile a:hover{color: #5488bd;}

.credit div{margin: 0.5em 1% 0.5em 0!important;}


@media only screen and (max-width: 860px) {
    .movieArchive article{flex: 0 1 48%; margin: 1em 1%;}

    .character{display: block;}
    .character article{flex: 0 1 48%;}
    .cast > article > div{display: block;}
    .credit div:first-child{padding-bottom: 1.5em;}
    }

/*SNS*/
#shareBox {
	width: 100%!important;
    max-width: 1580px;
    margin: 0 auto;
    padding-top: 15%;
    padding-bottom: 15%;
	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: 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 {padding-top: 55%; padding-bottom: 0;}
    .shareButtons {top: 55%; left: 50%; transform: translateY(-55%) translateX(-50%);}
    }

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

/*FOOTER*/
footer{
	padding: 3em 0 4em;
	color: #FFF;
	display: block;
	background: rgba(0,0,0,0.07);
    }

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

   
    footer p:first-child{font-size: 0.8em; margin-bottom: 3em;}
    .taito_innar footer{background: rgba(255,255,255,0.5);}


	ul.taitoLink{margin: 1em 0 0; padding: 0 0 2em; border-bottom: solid 1px #d0d0d0;}
	
	ul.taitoLink li{
		font-size: 1.0em;
		margin-right: 1.0em;
		display: inline-block;
		}
	
	ul.taitoLink a{color: #707070;}
	ul.taitoLink a:hover{color: #5a5a5a;}

    .taito_innar ul.taitoLink a{color:#212121;}
	.taito_innar ul.taitoLink a:hover{color: #525252;}

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

    .taito_innar footer p:last-child{color: #212121;}

@media only screen and (max-width: 490px) {
    ul.taitoLink li{font-size: 0.9em;}
    }





/*-----animation-----*/
.fadeUp{
    animation-name: fadeUpAnime;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
    }

@keyframes fadeUpAnime{
    from {
        opacity: 0;
        transform: translateY(20px);
        }
    
    to {
        opacity: 1;
        transform: translateY(0);
        }
    }


.flipRightTop{
    animation-name: flipRightTopAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
    }

@keyframes flipRightTopAnime{
    from {
        transform: translate(-20px,80px) rotate(25deg);
        opacity: 0;
        }
    
    to {
        transform: translate(0,1) rotate(0deg);
        opacity: 1;
        }
    }


/* 左上へ */
.flipLeftTop{
    animation-name:flipLeftTopAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
    }

@keyframes flipLeftTopAnime{
    from {transform: translate(-20px,80px) rotate(-15deg); opacity: 0;}
    to {transform: translate(0,0) rotate(0deg); opacity: 1;}
    }


.fadeUpTrigger,.flipRightTopTrigger,.flipLeftTopTrigger{opacity: 0;}



/*modal*/
.nazo_hint{
    max-width: 32px;
    position: absolute;
    right: 60px;
    bottom: 2.4%;
    z-index: 99;
    }

.nazo_hint img{width: 32px; height: auto;}

@media only screen and (max-width: 1100px) {.nazo_hint{bottom: 1.2%;}}

.modal-wrapper {
    z-index: 999;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    text-align: center;
    }

.modal-wrapper:not(:target) {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
    }

.modal-wrapper:target {
    opacity: 1;
    visibility: visible;
    transition: opacity .4s, visibility .4s;
    }

.modal-wrapper::after {
    display: inline-block;
    height: 100%;
    margin-left: -.05em;
    vertical-align: middle;
    content: ""
    }

.modal-wrapper .modal-window {
    box-sizing: border-box;
    display: inline-block;
    z-index: 20;
    position: relative;
    width: 90%;
    max-width: 800px;
    padding: 0;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 0 30px rgba(0, 0, 0, .6);
    vertical-align: middle;
    }

.modal-wrapper .modal-window .modal-cont {
  max-height: 80vh;
  overflow-y: auto;
  text-align: left
}

.modal_title {
  font-size: 1.5em;
	position: relative;
	overflow: hidden;
  padding: 0;
}

.modal_title::before,
.modal_title::after{
	content: "";
	position: absolute;
	bottom: 0;
}

.modal-cont p {
  margin: 0;
}

.modal-overlay {
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .8)
}

.modal-wrapper .modal-close {
  z-index: 20;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 35px;
  color: #95979c !important;
  font-size: 30px;
  font-weight: 700;
  line-height: 35px;
  text-align: center;
  text-decoration: none;
  text-indent: 0
}

.modal-wrapper .modal-close:hover {
  color: #2b2e38 !important
}


/*20230822追加*/
.youtube {
  margin: 0 auto;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

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