﻿@charset "utf-8";

/*////////////////////////////////////////////////////////

css/top_style.css

/////////////////////////////////////////////////////////*/

/* ----------------------------------------------- 
	
	1: body 
		: ローディング
		: slider 
		: 最新情報
		: character
		: content
		: mein

	2: Font
		: link
	
	3: select
	
	4: footer
	
	
 ----------------------------------------------- */

 /* --------------------------------------------
1: body
-------------------------------------------- */
.animationBody{background-image:url(../img/animation/shabon5_pc.png);background-repeat:repeat;}
#anim{margin-top:100px;}

/*ローディング*/
#load{width: 100%;text-align: center;display: block;background-color: #FFF;height: 100vh;z-index: 1000;}

#loader-bg {display: none;position: fixed;width: 100%;height: 100%;top: 0px;left: 0px;background: #FFF;z-index: 1000;}
#loader {display: none;position: fixed;top: 50%;left: 50%;width: 200px;height: 200px;margin-top: -100px;margin-left: -100px;text-align: center;color: #fff;z-index: 2;z-index: 1000;}

/*slider*/
.slider li {
  display: none; /*読み込み時は非表示*/
}
.bx-viewport .slider li {
  display: block !important; /*JSが読み込まれたら表示*/
}
#slider{width:100%;}
.fotorama__nav-wrap{ display:block; width:100%;}
.fotorama__wrap .fotorama__grab{ display:none;}
.fotorama__wrap * img{ width:100%;}

#slider{width: 100%; height:auto;display: block;margin-bottom: 3.19vh;position: relative;z-index: 2;background: #FFF;}
nav.hot_topics{border: none;height: 30px;width: 100%;background-color: #d9ffff; position:relative;  }
p.hot_topics{width: 97%;font-size: 1em;padding: 0;position: absolute;top: 0.4em;left: 0.5em;}

.bx-wrapper {position: relative;padding: 0;*zoom: 1;}
.bx-wrapper img {width: 100%;display: block; height: auto;}
.bx-wrapper .bx-pager,.bx-wrapper .bx-controls-auto {position: absolute;bottom: -30px;width: 100%;}

/* LOADER */
.bx-wrapper .bx-loading {min-height: 50px;height: 100%;width: 100%;position: absolute;top: 0;left: 0;z-index: 2000;}

/* PAGER */
.bx-wrapper .bx-pager {text-align: center;font-size: .85em;font-family: Arial;	font-weight: bold;color: #666;padding-top: 35px;position: absolute;top: 0;width: 90%;left: 0;right: 0;margin: auto;}
.bx-wrapper .bx-pager .bx-pager-item,.bx-wrapper .bx-controls-auto .bx-controls-auto-item {display: inline-block;*zoom: 1;*display: inline;}
.bx-wrapper .bx-pager.bx-default-pager a {background: #c3e8f5;text-indent: -9999px;display: block;width:1.5vw;height: 1.5vw;margin: 0 5px;outline: 0;-moz-border-radius: 50px;
-webkit-border-radius: 50px;border-radius: 50px;}
.bx-wrapper .bx-pager.bx-default-pager a:hover,.bx-wrapper .bx-pager.bx-default-pager a.active {background: #6fcbeb;}

/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {left: 1.69%;background: url(../img/top_slider_prev.png) no-repeat 0 0;}
.bx-wrapper .bx-next {right: 1.69%;background: url(../img/top_slider_next.png) no-repeat 0 0;}
.bx-wrapper .bx-prev:hover {background-position: 0 0;}
.bx-wrapper .bx-next:hover {background-position: 0 0;}
.bx-controls{min-height: 70px;position: relative;z-index: 2;}
.bx-wrapper .bx-controls-direction a {position: absolute;top: 50%;margin-top: -16px;outline: 0;width: 51px;height: 51px;text-indent: -9999px;z-index: 9999;}
.bx-wrapper .bx-controls-direction a.disabled {display: none;}

/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {text-align: center;}
.bx-wrapper .bx-controls-auto .bx-start {display: block;text-indent: -9999px;width: 10px;height: 11px;outline: 0;background: url(../img/top_slider_prev.png) -86px -11px no-repeat;margin: 0 3px;}
.bx-wrapper .bx-controls-auto .bx-start:hover,.bx-wrapper .bx-controls-auto .bx-start.active {background-position: -86px 0;}
.bx-wrapper .bx-controls-auto .bx-stop {display: block;text-indent: -9999px;width: 9px;height: 11px;outline: 0;background: url(../img/controls.png) -86px -44px no-repeat;margin: 0 3px;}
.bx-wrapper .bx-controls-auto .bx-stop:hover,.bx-wrapper .bx-controls-auto .bx-stop.active {background-position: -86px -33px;}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {text-align: left;width: 80%;}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {right: 0;	width: 35px;}

/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {position: absolute;bottom: 0;left: 0;background: #666\9;background: rgba(80, 80, 80, 0.75);width: 100%;}
.bx-wrapper .bx-caption span {color: #fff;font-family: Arial;display: block;font-size: .85em;padding: 10px;}

/*navi*/

.navi_in_sp{display:none;}

/* ============= 最新情報 ============= */
#top_information{width: 100%;}
.top_information_wrapperin{width: 100%;position: relative;}
.top_informationin{z-index: 3;position:absolute;width: 70%;top:0;left:0;right:0;margin:auto;}
.top_informationin h2{margin: 0 auto;}
.top_informationin h2 img{width: 100%;}

.yousei{width:61%;position: absolute;top: 0;left: 0;}
.yousei img{width: 100%;max-width:479px;}

/*虹アニメーション*/
.niji2{overflow: hidden;width:31.25%;}
/*.niji2_anime:before{clear: both;animation: r_to_l_scroll 8s ease 0s 1 forwards normal;background: #fff;content: '';right: 0;pointer-events: none;position: absolute;bottom: 0;left: 0;top: 0;z-index: 1; box-shadow: 0 0 26px 20px #fff; max-width: 595px;}
@keyframes r_to_l_scroll{
    100%{
      transform: translateX(-100%);
    }
}*/

.niji2_anime{margin: auto;background-color: white;position:absolute;top:3rem;right:0;}
.niji2_anime img {width: 100%;max-width: 500px;
	animation-name: niji2_anime;
	-webkit-animation-name: niji2_anime;
	animation-duration: 2s;
	-webkit-animation-duration:2s;
	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;opacity: 0;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
}
.niji2_anime{overflow: hidden;}
.niji2_anime img:nth-child(1){display: block;margin: 0 auto;}
.niji2_anime img:nth-child(2){animation-delay:.2s;-webkit-animation-delay:.2s;position: absolute;top: 0;right: 0;}
.niji2_anime img:nth-child(3){animation-delay:.4s;-webkit-animation-delay:.4s;position: absolute;top: 0;right: 0;}
.niji2_anime img:nth-child(4){animation-delay:.6s;-webkit-animation-delay:.6s;position: absolute;top: 0;right: 0;}
.niji2_anime img:nth-child(5){animation-delay:.8s;-webkit-animation-delay:.8s;position: absolute;top: 0;right: 0;}
.niji2_anime img:nth-child(6){animation-delay:1s;-webkit-animation-delay:1s;position: absolute;top: 0;right: 0;}
.niji2_anime img:nth-child(7){animation-delay:1.2s;-webkit-animation-delay:1.2s;position: absolute;top: 0;right: 0;}
.niji2_anime img:nth-child(8){animation-delay:1.4s;-webkit-animation-delay:1.4s;position: absolute;top: 0;right: 0;}
.niji2_anime img:nth-child(9){animation-delay:1.6s;-webkit-animation-delay:1.6s;position: absolute;top: 0;right: 0;}
.niji2_anime img:nth-child(10){animation-delay:1.8s;-webkit-animation-delay:1.8s;position: absolute;top: 0;right: 0;}
.niji2_anime img:nth-child(11){animation-delay:2s;-webkit-animation-delay:2s;position: absolute;top: 0;right: 0;}
.niji2_anime img:nth-child(12){animation-delay:2.2s;-webkit-animation-delay:2.2s;position: absolute;top: 0;right: 0;}
@keyframes niji2_anime {
	0% {
		opacity: 0;
	}
	
	30% {
		opacity: 1;
	}

	70% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes niji2_anime {
	0% {
		opacity: 0;
	}
	
	30% {
		opacity: 1;
	}

	70% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

.h2_information_ttl_bg{width:70%;height: 2.98%;display: block;margin: 0 auto;}

#news{position: relative;z-index: 15;width: 100%;margin: 0 auto;margin-top: 6em;}
.date{color: #405d6a;}
@media only screen and (max-device-width: 600px), screen and (max-width: 990px) {#news{margin-top: 6em;}}
@media only screen and (max-device-width: 0), screen and (max-width: 400px) {#news{margin-top: -4em;}.top_informationin{margin-bottom: 4.5em;}}

.news_wrapper{text-align: center;margin: 0 auto;}
@media screen and (max-width:1500px){
.news_wrapper{margin-top: 1em;}
}
.news_top img{vertical-align: bottom;}
.newsin{z-index: 3;position: relative;margin-top: -5px;width:100%;
background-image: linear-gradient(#f6fbfd 2px, transparent 0),
                    linear-gradient(90deg, #f6fbfd 2px, transparent 0),
                    linear-gradient(#f6fbfd 1px, transparent 0),
                    linear-gradient(90deg, #f6fbfd 1px, transparent 0);
background-size: 40px 40px, 40px 40px, 20px 20px, 20px 20px;background-color: #FFF;margin: 0 auto;
}
.news_top:after{content:'';width:100%;margin: 0 auto;background: url(../img/news_line.png);background-repeat: repeat-x;background-position: bottom;visibility: inherit;height: 8px;}
.newsin:after{content: '';background: url(../img/news_line.png);background-repeat: repeat-x;background-position: bottom;width:100%;visibility: inherit;height: 8px;}

.news_list{max-width: 1600px;padding:1em 0;margin: 0 auto;}
#entry_list_more li{width:calc((100% - 7em) / 5 );display: inline-block;margin: .5em;text-align: left;vertical-align: top;}

#entry_list_more li .news{color:#ff6e6e;font-family: font_bold;}
#box_img a{display: block;overflow: hidden;}
#box_img img{transition: all 0.6s ease 0s;}
#box_img img:hover{cursor: pointer;transform: scale(1.1, 1.1);}
#entry_list_more li img{height: 100%;max-height: 300px;width: 100%;object-fit:contain;}
#more_btn{margin-top: 1em;}
#more_btn img{max-width: 142px;width: 100%;cursor: pointer;}
#close_btn{margin-top: 1em;}
#close_btn img{max-width: 142px;width: 100%;cursor: pointer;}
.news_top_time{padding: .5em;font-weight: bold;}
.title{display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;overflow: hidden;padding: 0 .5em;}

/*btn*/
.top_information_btn{max-width:93.33vw;}

/* ============= サンエックスキャラクターズ ============= */
#top_characters{width: 100%;height: auto;margin:1.25em auto 0 auto;}
.top_charactersin{width:100%;position: relative;z-index: 10;text-align: center;margin:0 auto;}
.top_charactersin h2 img{max-height: 340px;}

.niji3{overflow: hidden;width:19.63%;display: inline-block;vertical-align: top;position: absolute;top:0;left:0;}
.niji3_anime:before{animation: l_to_r_scroll 8s ease 0s 1 forwards normal;background: #fff;content: '';left: 0;pointer-events: none;position: absolute;bottom: 0;right: 0;top: 0;z-index: 1; box-shadow: 0 0 26px 20px #fff; max-width: 315px;}
@keyframes l_to_r_scroll{
    100%{
      transform: translateX(100%);
    }
}

.top_charactersin h2{width:70%;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;z-index: 2;}
.yousei2{width:7.41%;position:absolute;right:.5em;top: -10rem;}
.yousei2 img{max-width:107px;}


@media only screen and (max-device-width: 0px), screen and (max-width: 2000px){.yousei2{top: -8rem;}}
@media only screen and (max-device-width: 0px), screen and (max-width: 1400px){.yousei2{top: -7rem;}}
@media only screen and (max-device-width: 0px), screen and (max-width: 1200px){.yousei2{top: -6rem;}}
@media only screen and (max-device-width: 0px), screen and (max-width: 1100px){.yousei2{top: -5rem;}}
@media only screen and (max-device-width: 0px), screen and (max-width: 800px){.yousei2{top: -4rem;}}
@media only screen and (max-device-width: 0px), screen and (max-width: 769px){.yousei2{top: -3rem;}}
@media only screen and (max-device-width: 0px), screen and (max-width: 940px) {.yousei2{width:10.41%;}}

.h2_characters_ttl_bg{width:70%;height: 2.98%;}

.top_character_gallery{background: url(../img/top_line_dotted.png);background-repeat: repeat-x;position:relative;z-index: 11;width: 100%;padding-top: 10px;}


.top_character_gallery_wrapper{background: url(../img/top_line_dotted_bg.png);}
.character_galleryin{ max-width: 1600px;margin: 1em auto;text-align: center;padding:2.25% 1.25%;display: flex;padding-bottom: 1.25%;}
.character_galleryin li{display: inline-block;overflow: hidden;}
.character_galleryin li a{display: block;height: 100%;position: relative;}
.character_galleryin li a img{vertical-align: middle;}
.character_galleryin li:nth-child(1){width:30.02%;background-color: #FFF;border-radius: 20px;margin-right: 1.25%;}
.character_galleryin li:nth-child(1) img{max-width: 469px;}
.character_galleryin li:nth-child(2){width:30.02%;background-color: #FFF;border-radius: 20px;margin-right: 1.25%;}
.character_galleryin li:nth-child(2) img{max-width: 469px;}
.character_galleryin li:nth-child(3){width:38.09%;position: relative;display: -ms-flexbox;display: -webkit-box;display: -webkit-flex;display: flex;-ms-flex-wrap: wrap;-webkit-flex-wrap: wrap;flex-wrap: wrap;}
.character_galleryin li:nth-child(3) p{/*width: 48%;*/display: inline-block;background-color: #FFF;border-radius: 20px;width: calc((100% - 6%) / 3 );box-sizing: border-box;position: relative;}
.character_galleryin li:nth-child(3) p:nth-child(1),.character_galleryin li:nth-child(3) p:nth-child(2),.character_galleryin li:nth-child(3) p:nth-child(4),.character_galleryin li:nth-child(3) p:nth-child(5){margin-right: 2.58%;}
.character_galleryin li:nth-child(3) p:nth-child(1),.character_galleryin li:nth-child(3) p:nth-child(2),.character_galleryin li:nth-child(3) p:nth-child(3){margin-bottom: 2.58%;}
.character_galleryin li:nth-child(3) img{width: 100%;position: absolute;bottom: 0;top: 0;left: 0;margin: auto;}
.character_galleryin li:nth-child(3) p:nth-child(4) img{top: inherit;}
.top_character_gallery_image_sp{display: none;}
.character_galleryin li:nth-child(3) p:nth-child(3){position:inherit !important;}

@media only screen and (max-device-width: 0px), screen and (max-width: 800px) {.character_galleryin li:nth-child(3) p{width: 47%;}}
.character_galleryin li:nth-child(3) p:nth-child(1){margin-right: 2.58%;vertical-align: top;}
.character_galleryin li:nth-child(3) p:nth-child(2){vertical-align: top;}
.character_galleryin li:nth-child(3) p:nth-child(3){position: absolute;bottom: 0;left: 0;}
.character_galleryin li:nth-child(3) p:nth-child(4){/*position: absolute;*/bottom: 0;right: 0;}

.top_character_slider{padding: 1em 0;}
.btn1_slider2 .btn1wrapper{position: inherit;}


/*character_gallery_slider*/

.slick-prev{left: 2% !important;}
.slick-prev:before{display: block;width: 51px;height: 51px;outline: 0;background: url(../img/top_slider_prev.png) no-repeat;}
.slick-prev, .slick-next{width: 51px !important;height: 51px !important;}
.slick-next{right: 2% !important;font-size: 0 !important;}
.slick-next:before{display: block;width: 51px;height: 51px;outline: 0;background: url(../img/top_slider_next.png) no-repeat;margin: 0 3px;}
.slick-list{width: 85%;margin:0 auto !important;}
.slick-prev:before, .slick-next:before{font-size: 0 !important;}
.top_character_slider .slick-slide img{max-width: 140px;width: 100%;background-color: #FFF;border-radius: 100px;}
.top_character_slider .slick-slide{margin:.2em;}
.slick-slide{margin: 0 .2em;}

.yousei3{top:-3rem;}
@media only screen and (max-device-width: 0), screen and (max-width: 1000px){.yousei3{top:-2rem;}}
.yousei3{width:21.69%;position: absolute;left: 1rem;}
.yousei3 img{max-width: 167px;position: absolute;top: 0;bottom:0;left: 2rem;margin:auto;}

.niji4{overflow: hidden;position: absolute;right: 0;z-index: 1;text-align: right;}
@media only screen and (max-device-width: 1101px), screen and (max-width: 1200px){.niji4{width: 25%;}}
@media only screen and (max-device-width: 0), screen and (max-width: 1100px){.niji4{width: 30%;}}
.niji4 img{width: 100%;height: auto;}
.niji4_anime:before{clear: both;animation: r_to_l_scroll 8s ease 0s 1 forwards normal;background: #fff;content: '';right: 0;pointer-events: none;position: absolute;bottom: 0;left: 0;top: 0;z-index: 1; box-shadow: 0 0 26px 20px #fff; max-width: 350px;}
@keyframes r_to_l_scroll{
    100%{
      transform: translateX(-100%);
    }
}
@media only screen and (max-device-width: 0), screen and (max-width: 1100px){
.niji4 img{width: 70% !important;}
}
/* ============= content ============= */
.top_contents_wrapper{margin: 1.25em auto 0 auto;}
.top_contentsin_ttl{}
.top_contentsin{position: relative;}
.top_contentsin_ttl h2ttl{margin-left: 4%;}

.top_contentsin_ttl h2{z-index: 2;width: 70%;position:absolute;margin:auto;left:0;right:0;bottom:0;}
.top_contents_box{background: url(../img/top_line_dotted.png);background-repeat: repeat-x;position:relative;z-index: 2;width: 100%;padding-top: 10px;}
.top_contents_box_wrapper{background: url(../img/top_line_dotted_bg.png);margin: 1em auto;text-align:left;padding:2.25% 1.25%;padding-bottom: 1.25%;width: 100%;box-sizing: border-box;}
.top_contents_box1{margin: 0 auto;}
.top_contents_box1 li{display:inline-block;width: calc((100% - 8em) /6 );text-align: center;margin: .5em;overflow: hidden;border-radius: 20px;}
.top_contents_box1 img{width: 100%;max-width: 245px;background-color: #FFF;border-radius: 20px;}
.h2_contents_ttl_bg{width: 70%;height: 2.98%;text-align: center;margin: 0 auto;display: block;}

.multiple-items2 .slick-slide img{max-width: 300px;width: 100%;}
.multiple-items2 .slick-slider .slick-track, .slick-slider .slick-list{margin:0 .5em;}
.slick-track{padding: 1em 0;}

.sanx_event_slider .slick-slide{overflow: hidden;}


/* ============= サンエックスチャンネル ============= */
#top_sanxchannel{width: 100%;height: auto;margin: 1.25em auto 0 auto;}
.top_sanxchannel{background: url(../img/top_line_dotted.png);background-repeat: repeat-x;z-index: 2;width: 100%;padding-top: 10px;margin-top:0;position: relative;}


.top_sanxchannel_wrapper{background: url(../img/top_line_dotted_bg.png);}
.top_sanxchannelin{position: relative;margin: 0 auto;text-align: center;}
.niji5{overflow: hidden;width:19.63%;position: absolute;top: 0;left:0;}

@media only screen and (max-device-width: 801px), screen and (max-width: 1100px){.niji5_anime img{top: -1em;}}
@media only screen and (max-device-width: 0px), screen and (max-width: 800px){.niji5_anime img{top: -2em;}}
@media only screen and (max-device-width: 601px), screen and (max-width: 760px){.top_sanxchannel{top: 3em;}}
@media only screen and (max-device-width: 551px), screen and (max-width: 600px){.top_sanxchannel{top: 2.5em;}}
@media only screen and (max-device-width: 0px), screen and (max-width: 550px){.top_sanxchannel{top: 2em;}}
@media only screen and (max-device-width: 0px), screen and (max-width: 490px){.top_sanxchannel{top: 1.5em;}}

.niji5_anime:before{animation: l_to_r_scroll 8s ease 0s 1 forwards normal;background: #fff;content: '';left: 0;pointer-events: none;position: absolute;bottom: 0;right: 0;top: 0;z-index: 1; box-shadow: 0 0 26px 20px #fff; max-width: 315px;max-height: 340px;overflow: hidden;}
@keyframes l_to_r_scroll{
    100%{
      transform: translateX(100%);
    }
}

.top_sanxchannelin h2{width: 70%;z-index: 2;position: absolute;top: 0;left: 0;right: 0;margin: auto;}
.top_sanxchannelin h2 img{width: 100%;max-height: 340px;}
.yousei5{width: 100%;position: absolute;right:2rem;top:0;bottom:0;z-index: 3;margin:auto;}
.yousei5 img{position: absolute;top:0;bottom:0;margin:auto;right:2rem;max-width:100px;}
.moviein{display: table;margin: 0 auto;text-align: center;max-width: 1600px;width: 100%;padding-top: 3em;}
.moviein li{display: inline-table;width:40%;}
.moviein li:nth-child(2){margin-left:2%;}
.moviein li iframe{width: 100%;}
.top_sanxchannel_wrapper .btn2wrapper{padding:1.5em 0;}

.h2_sanxchannel_ttl_bg{width: 70%;height: 2.98%;}



/* ============= バナー ============= */
.top_banner_etc{width: 100%;margin: 0 auto;}
.top_banner_etc ul{padding: 0 1em;margin: 0 auto;box-sizing: border-box;}
.top_banner_etc ul li{display: inline-block;width: calc((100% - 10em) / 8);margin: .5em;box-sizing: border-box;overflow: hidden;}
.top_banner_etc ul li img{max-width: 175px;width:100%;}


/*
.niji1_2{position: absolute;top: 0;right: 0;width: 37.19%;}
.top_informationin{padding-top: 2.81vh;position: absolute;top: 0;left: 0;right: 0;margin: auto;z-index: 2;}
h2 img{max-width: 1295px;width: 100%;margin: 0 auto;display: block;}

.niji1_2in{position: relative;margin-top: 40px;}
.niji1_2disappear img{position: absolute;right: 0;top: 0;z-index:1;max-width: 595px;width:100%;}


.u-fade-type-up{
    opacity: 0;
}

.u-fade-type-up.is-active{
    opacity: 1;
}

.fadein1{opacity: 0;animation: fadein1 4s ease forwards;}

@keyframes fadein1{
    100% {  opacity: 1;}
}
.niji1_2_anime img:nth-child(1){-webkit-animation-delay: 0s;}
.niji1_2_anime img:nth-child(2){-webkit-animation-delay: .5s;}
.niji1_2_anime img:nth-child(3){-webkit-animation-delay: 1s;}
.niji1_2_anime img:nth-child(4){-webkit-animation-delay: 1.5s;}
.niji1_2_anime img:nth-child(5){-webkit-animation-delay: 2s;}
.niji1_2_anime img:nth-child(6){-webkit-animation-delay: 2.5s;}
.niji1_2_anime img:nth-child(7){-webkit-animation-delay: 3s;}
.niji1_2_anime img:nth-child(8){-webkit-animation-delay: 3.5s;}
.niji1_2_anime img:nth-child(9){-webkit-animation-delay: 4s;}
.niji1_2_anime img:nth-child(10){-webkit-animation-delay: 4.5s;}
.niji1_2_anime img:nth-child(11){-webkit-animation-delay: 5s;}


.content{position: relative;    z-index: 7;}
.fadein {    
    opacity: 0;
    animation: fadein 6s ease forwards;
}
@keyframes fadein {
    100% {  opacity: 1;}
}
 
/*以下遅延の指定*/
.txt01 {-webkit-animation-delay: 1s;}
.txt02 {-webkit-animation-delay: 4s;}
.txt03 {-webkit-animation-delay: 7s;}
.txt04 {-webkit-animation-delay: 10s;}
.txt05 {-webkit-animation-delay: 13s;}
.txt06 {-webkit-animation-delay: 16s;}

.fadein{position: absolute;right: 0;top: 0;z-index:1;}

/*.niji1_2_anime:before{animation: r_to_l 4s ease 0s 1 forwards normal;background: #fff;bottom: 0;content: '';left: 0;
pointer-events: none;position: absolute;right: 0;top: 0;z-index:1;box-shadow: 26px 0 26px #fff;}
@keyframes r_to_l{
    100%{
      transform: translateX(-100%);
    }
}*/

/*見出し*/
.h2ttl {
animation-name: h2ttl;
    animation-duration: 2s;
    animation-iteration-count: 1;
}
@keyframes h2ttl {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

@media screen and (max-height: 640px) {
.modal-content h1 {font-size:100%; margin-bottom:3px}
.modal-content p { margin:auto}
a.modal-close:hover {opacity:1}
}
@media screen and (max-width: 640px) {
.modal-content {padding:10px}
.modal-content img {max-height:inherit; width:100%; height:auto}
.modal-content p {font-size:75%; width:100%;}
a.modal-close:hover {opacity:1}
.modal-box{width: 96% !important;display: block;margin: 2% auto;float: none !important;}
.modal-box a{font-weight: normal;display: block;font-size: 85%;}
}
@media only screen and (max-device-width: 0), screen and (max-width: 768px){
.modal-content {padding: 3%;width: 90%;}

.modal_txt2{font-size: 120%;margin-top: 10%;}
.modal_txt4{margin: 2% auto !important;}
.modal_txt6{margin: 2% auto !important;}
}
