@charset "UTF-8";
/* CSS Document */
/* スマホ用のCSSの次にPC用CSSを書いてください */


/*----------------------------
レイアウト

------------------------------*/
section#contents01{
	background-color: #ccefff;
	padding: 50px 20px 90px;
}

@media screen and (min-width: 769px) {/*@media screen and (min-width: 813px) */
	section#contents01{
	padding: 40px 100px 190px 40px;
	}
}/*@media おわり*/


/*--footer--*/
@media screen and (min-width: 769px) {/*@media screen and (min-width: 813px) */
		.footer{
		background-color:#ccefff; 
		padding-top:50px; 
	}
}/*@media おわり*/

/*----------------------------
トップページイメージ

------------------------------*/

#main_img{
	width: 100%;
	height: /*100vh*/500px;
	position: relative;
	background: -moz-linear-gradient(top, #fff 99%, #ccefff 100%);
	background: -webkit-linear-gradient(top, #fff 99%, #ccefff 100%);
	background: linear-gradient(to bottom, #fff 99%, #ccefff 100%);
}

p#main_aist{
	margin: 0;
	position: absolute;
	top: 10px;
	left: 10px;
}
p#main_aist a{
	display: block;
	background: url(../img/logo_sansouken01.svg) no-repeat 0/100px 60px;
	width: 100px;
	height: 60px;
}
p#main_aist a span{display: none;}

h1#site_ttl{
	background: url(../img/h1_logo01.svg) no-repeat center 0/ contain;
	margin:0 auto;
	width: 90%;
	height: 100px;
	position: absolute;
	right: 0;
	left: 0;
	top: 160px;
	z-index: 10;
  	animation-duration: 2s;/* アニメーション時間 */
  	animation-name: zoomIn;/* アニメーション名 */
	
}
h1#site_ttl span{
	visibility: hidden;
	
}

#main_img_bg{
	background: url( ../img/bg01.png) repeat 0 0/266px 266px fixed;
	height:500px;
	width: 100%;
	position: absolute;
	opacity: 0.3;
}

#main_bg_cloud01{
	background: url(../img/home/main_cloud01.png) repeat-x 0 10%/200%;
	height: 500px;
	width: 100%;
	position: absolute;
	animation: loop 500s linear infinite;

}

#main_bg_cloud02{
	background: url(../img/home/main_cloud02.png) repeat-x 0 10%/200%;
	height: 500px;
	width: 100%;
	position: absolute;
	animation: loop 100s linear infinite;

}

@keyframes loop {
from { background-position: 0 10%; }
    to { background-position: -1980px 10%; } /* 1980pxは使用した背景画像の長さ */
  
}



#main_bg_layer02{
	background: url(../img/home/main_layer02.png) repeat-x 0 bottom/200%;
	height: /*100vh*/500px;
	width: 100%;
	position: absolute;
	animation: loop2 140s linear infinite;
}
#main_bg_layer01{
	background: url(../img/home/main_layer01.png) repeat-x 0 bottom/200%;
	height: 500px;
	width: 100%;
	position: absolute;
	bottom: 0;
	animation: loop2 200s linear infinite;

}

@keyframes loop2 {
from { background-position: 0 bottom; }
    to { background-position: -1980px  bottom; } /* 1980pxは使用した背景画像の長さ */
  
}


/*#main_img_aris{
	background:  url(../img/home/main_aris01.png) no-repeat 0 bottom/contain;
	width: 36%;
	height: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
  	animation-duration: 1s;
  	animation-name: anime_aris;
}

@keyframes anime_aris {
	0% {
		opacity: 0;
		transform: translateX(-300px);
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: translateX(0);
	}
}


#main_img_teles{
	background:  url(../img/home/main_teles01.png) no-repeat 0 bottom/contain;
	width: 40%;
	height: 100%;
	position: absolute;
	right: 0;
	bottom: 0;
  	animation-duration: 1s;
  	animation-name: anime_teles;
	
}

@keyframes anime_teles{
	0% {
		opacity: 0;
		transform: translateX(300px);
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: translateX(0);
	}
}*/

/*--------------画面サイズ640px以上の時-------------*/
@media screen and (min-width: 769px) {/*@media screen and (min-width: 813px) */
		#main_img{
			height: 100vh;
		}

		h1#site_ttl{
			background: url(../img/h1_logo01.svg) no-repeat center 0/ contain;
			margin:0 auto;
			width: 60%;
			height: 75vh;
			top:25%;
		}


		#main_img_bg{
			background: url( ../img/home/main_bg01.svg) repeat 0 0/266px 266px fixed;
			height: 100vh;
			width: 100%;

		}
	
	    #main_bg_cloud01{
	        background: url( ../img/home/main_cloud01.png) repeat-x 0 top/100%;
			height: 100Vh ;
			width: 100%;
			bottom: 0;
		
	}
	    #main_bg_cloud02{
	        background: url( ../img/home/main_cloud02.png) repeat-x 0 top/100%;
			height: 100Vh ;
			width: 100%;
			bottom: 0;
		
	}

		#main_bg_layer02{
			background: url(../img/home/main_layer02.png) repeat-x 0 bottom/100%;
			height: 100Vh;
			width: 100%;
			bottom: 0;
			
		}
		#main_bg_layer01{
			background: url(../img/home/main_layer01.png) repeat-x 0 bottom/100%;
			height: 100Vh;
			width: 100%;
			bottom: 0;
		}

		/*#main_img_aris{
			background:  url(../img/home/main_aris01.png) no-repeat 0 bottom/contain;
			width: 30%;
			height: 80%;
			max-height:744px;
			max-width: 490px;
			left: 10px;


		}
		#main_img_teles{
			background:  url(../img/home/main_teles01.png) no-repeat 0 bottom/contain;
			width: 30%;
			height: 80%;
			max-height: 731px;
			max-width: 554px;
			right: 80px;

		}*/



}/*@media おわり*/

/*----------------------------
スクロールアイコン　※PCサイズのみ

------------------------------*/
/*****スマホ非表示*****/
a.arrow-down{display: none;}

/*****pc*****/
@media screen and (min-width: 769px) {/*@media screen and (min-width: 813px) */
a.arrow-down{
  display: block;
  background-color: #ffec00;
  border-radius: 50%;
  border: 2px solid #0071bc;
  width:80px;
  height:80px;
  margin:0 0 0 -30px;
  position:absolute;
  left:47%;
  z-index: 20;
  bottom:0px;
  -webkit-animation: arrow 0.5s 1s infinite ease-out alternate;
}


a.arrow-down:hover{
   -webkit-animation-play-state: paused;
}
	
a.arrow-down span{
	display: none;		
}

a.arrow-down .left{
  position:absolute;
  height:10px;
  width:40px;
  background:#0071bc;
  -webkit-transform:rotate(240deg);
  top:59%;
  left:44%;
  -webkit-border-radius:4px;
  -webkit-transform-origin:5px 50%;
  -webkit-animation: leftArrow 0.5s 1s infinite ease-out alternate;
}

a.arrow-down .right{
  position:absolute;
  height:10px;
  width:40px;
  background:#0071bc;
  -webkit-transform:rotate(-60deg);
  top:59%;
  left:44%;
  -webkit-border-radius:4px;
  -webkit-transform-origin:5px 50%;
  -webkit-animation: rightArrow 0.5s 1s infinite ease-out alternate;
}

}/*@media おわり*/


@-webkit-keyframes arrow{
  0% {
    bottom:0px;
  }
  100%{
    bottom:40px;
  }
}


@-webkit-keyframes leftArrow{
  0% {
  }
  100%{
    -webkit-transform:rotate(225deg);
  }
}

@-webkit-keyframes rightArrow{
  0% {
  }
  100%{
    -webkit-transform:rotate(-45deg);
  }
}

/*----------------------------

トップページお知らせ

------------------------------*/
.top_notice_area a {
	padding: 10px;
	border: 2px solid #cf0010;
	display: block;
	background: #FFFFFF;
	border-radius: 5px;
	box-sizing: content-box;
	width: 100%;
	max-width: 640px;
	margin:3em auto 3em;
	text-decoration: none;
	box-shadow: 4px 4px #a4c7dd;
	text-align: center;
	box-sizing: border-box;
	font-size: 116%;
	color: #cf0010;
}

.top_notice_area a:hover {
	background-color: #ffdd88;
}

.top_update {
    padding: 8px 12px;
    margin: 3em auto 3em;
	width: 100%;
	max-width: 640px;
	display: block;
	text-align: center;
    border-top: solid 5px #0071bc;
    border-bottom: solid 5px #0071bc;
	list-style: none;
}
.top_update li {
    margin: 0; 
    padding: 0;
}

.top_update li a {
    text-decoration: none;
}

.top_update li a:hover {
	background-color: #ffdd88;
}
/*----------------------------

フレックスメニュー

------------------------------*/
.flexbox_menu {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.flexbox_menu a {
	padding: 10px;
	display: block;
	background: #FFFFFF;
	border-radius: 5px;
	box-sizing: content-box;
	width: 100%;
	margin-bottom: 3em;
	color: #333333;
	text-decoration: none;
	box-shadow: 4px 4px #a4c7dd;
}
.flexbox_menu a:hover {
	background-color: #ffdd88;
}
.flexbox_menu_innner {
	vertical-align: top;
}
.flexbox_menu article {
	height: 100%;
}
.flexbox_menu article figure {
	margin: 0 0 20px;
}
.flexbox_menu_innner p {
	margin: 0 0 1em;
}
.flexbox_menu article figure img {
	border-radius: 5px;
	width: 100%;
}
.flexbox_menu_odd {
	display: none;
}
.flexbox_menu_innner h2 {
	position: relative;
	top: -2em;
	left: -2em;
	width: 100%;
	background: #ffe266;
	padding: 0.5em;
	font-size: 130%;
	color: #474747;
	border-radius: 10px;
	margin-left: 2em;
	margin-bottom: -1em;/*余白打ち消し*/
	box-shadow: 4px 4px #ffca45;
}

.flexbox_menu_innner h2 span.sub{
	font-size: 62.5%;
	font-weight: normal;
	display: block;
}

.flexbox_menu_innner h2.lab:before {
	background: #ffffff url(../img/ico_flask01.svg) no-repeat center center/80%;
}

.flexbox_menu_innner h2.reading:before {
	background: #ffffff url(../img/ico_book01.svg) no-repeat center center/80%;
}

.flexbox_menu_innner h2.movie:before {
	background: #ffffff url(../img/ico_play01.svg) no-repeat center center/80%;
}

.flexbox_menu_innner h2.sansouken:before {
	background: #ffffff url(../img/ico_face01.svg) no-repeat center center/80%;
}

.flexbox_menu_innner h2.link:before {
	background: #ffffff url(../img/ico_link01.svg) no-repeat center center/80%;
}

.flexbox_menu_innner h2.live:before {
	background: #ffffff url(../img/ico_live.svg) no-repeat center center/80%;
}

.flexbox_menu_innner h2.newspaper:before {
	background: #ffffff url("../img/ico_newspaper.svg") no-repeat center center/76%;
}

/*------  PC用 -----*/
@media screen and (min-width: 769px) {/*@media screen and (min-width: 813px) */
.flexbox_menu a {
	margin: 1em 1em 2.5em;
	width: 40vw;
	flex-grow: 1;
}
.flexbox_menu article {
	display: table;
}
.flexbox_menu article figure {
	display: table-cell;
	width: 30%;
}
.flexbox_menu_innner {
	display: table-cell;
	width: 70%;
	padding-right: 1em;
}
	
.flexbox_menu_innner h2{
	padding: 0.5em 0.5em 0.5em 1.8em;	
}
	
.flexbox_menu_innner h2:before {
	content: "";
	background: #ffffff url(../img/ico_face01.svg) no-repeat center center/80%;
	display: inline-block;
	position: absolute;
	padding: 0em;
	color: red;
	font-weight: normal;
	width: 3em;
	text-align: center;
	height: 3em;
	left: -1.5em;
	top: 1.2em;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	border: solid 3px #ffe266;
	border-radius: 50%;
}

}/*@media おわり*/