/* ##############################
    Created on : 2017/03/04, 04:11:21
    Author     : 高元 稔康
##############################  */


/* ##############################
	初期化～全体背景
##############################  */
html, body { width:100%; height:100%; padding:0; margin:0; overflow-x:hidden; min-height:100%; font-family:Artial, Verdana, sans-serif; background-color: #000; -webkit-overflow-scrolling: touch; }
ul, li { list-style: none; list-style-position: inside; }
.yellow_f {color: #ffff00;}
.green_f {color: #00ff00;}
.pink_f {color: #ff00ff;}
.s_font_red { color: #ff0033; font-size: 80%; font-weight: normal; }
.s_font_yellow { color: #ffff20; font-size: 80%; font-weight: normal; }
.s_font_pink { color: #ff07fa; font-size: 80%; font-weight: normal; }
.s_font_green { color: #00ff08; font-size: 80%; font-weight: normal; }


/* 部分共通設定 */
.harf_box { width: 50%; min-width: 320px; height: 100%; margin: 0; padding: 0; float: left; display: inline-block; overflow: hidden; }
.img_area { margin: auto; text-align: center; }
.img_area a { display: block; width: 100%; height: 100%; }
.img_area img { padding: 0; max-width: 100%; }
.harf_box p { padding: 0; margin: 0; font-size: 100%; line-height: 150%; }


/* スワイパー */
.mb60{ margin-bottom: 10px; }	
.swiper-container{ text-align: center; }
.swiper-container .swiper-slide img{ max-width: 100%; height: auto; }
/* トップライン */
#top_line {background: #b70002 url("../img/top_logo.png") no-repeat; color: #ffff00; height: 60px; width: 100%; margin: 0 0 10px 0; padding: 0; display: block; line-height: 28px; }
#top_line h1 {display: none;}
#top_line h2 {font-size: 80%; margin: 0; padding: 3px 10px; text-align: right;}
/* メニューバー */
#menu_bar{background-color: #b70002; color: #ffff00; height: 40px; width: 100%; margin: 0; padding: 0; display: block;}
#menu_bar ul { max-width: 980px; margin: auto; padding: 0; height: 40px; display: block;}
#menu_bar ul li { width: 25%; margin: 0; padding: 0; line-height: 40px; display: block; float: left; text-align: center; cursor: pointer;}
#menu_bar ul li a { color: #ffff00; width: 100%; height: 100%; display: block; text-decoration: none; font-size: 90%;}
#menu_bar ul li a:hover { color: #fff;}
/* メインエリア */
#main_area { max-width: 980px; display: block; margin: 0 auto; clear: both; overflow: hidden; }
/* リアルタイムコメント */
#now_comment_area { width: 100%; display: block; font-size: 100%; color: #ffffff; text-align: center; margin: 20px 0 10px 0 ; }
#realtime_comment h2 { width: 100%; font-size: 100%; text-align: center; color: #ffffff; border-bottom: 1px solid #ffff00; border-top: 1px solid #ffff00; margin: 10px auto 0 auto; line-height: 30px; }
/* インフォメーション */
#infomation { width: 100%; margin: 10px auto 20px; border-radius: 10px; padding: 0; color: #fff; display: block; overflow: hidden; }
#infomation h2 { margin: 10px 0; background-color: #b70002; color: #ffff00; line-height: 30px; padding: 0; text-indent: 10px; clear: both; display: block; color: #ffff00; font-size: 120%; overflow: hidden; }
.info_mes_box { display: block; margin: 20px; overflow: hidden; }
/* 料金システム */
#system { width: 90%; margin: 10px auto; border: 1px #ffff00 solid; border-radius: 10px; padding: 0; color: #fff; display: block; overflow: hidden; }
#system h2 { margin: 10px 0 5px 0; padding: 0; text-indent: 10px; clear: both; display: block; color: #ffff00; font-size: 120%; }
/* #system .harf_box p { margin: 0; padding: 0 0 10px 25px; font-size: 90%; line-height: 140%; } */
.harf_area { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); grid-auto-rows: 1fr; grid-gap: 5px; padding: 0; margin: 5px; }
.harf_area > div { width: 100%; min-width: 320px; padding: 5px; overflow: hidden; }
.harf_box p { margin: 0; padding: 0 0 10px 10px; font-size: 90%; line-height: 140%; }
.sys_index { font-size: 100%; color: #FC0; }
/* アルバム */
#album_area { width: 95%; margin: 10px auto 20px; text-align: center; padding: 0; color: #fff; display: block; overflow: hidden; }
#album_area h2 { font-size: 120%; line-height: 160%;}
#album_area h3 { margin: 10px 0; background-color: #b70002; color: #ffff00; line-height: 160%; padding: 0; text-align: center; clear: both; display: block; color: #ffff00; font-size: 100%; overflow: hidden; }
#album_area p { color: #ffffff; font-size: 80%; line-height: 90%;  padding: 0; text-align: center; }
#album_image_area { width: 100%;}
.album_box { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); grid-auto-rows: 1fr; grid-gap: 5px; padding: 0; margin: 5px; }
.album_box > div { border: 1px #333 solid; border-radius: 3px; overflow: hidden; min-width: 0; padding: 5px; }
/* スタッフ */
#staff { width: 90%; margin: 10px auto; padding: 0; color: #fff; display: block; overflow: hidden; }
#staff h2 { margin: 10px 0 5px 0; padding: 0; clear: both; display: block; color: #ffff00; font-size: 110%; text-align: center; }
.staff_prof { display: grid; grid-template-columns: repeat(auto-fit, 160px); grid-auto-rows: 1fr; grid-gap: 5px; padding: 0; margin: 5px; justify-content: center; }
.staff_prof > div { border: 1px #333 solid; border-radius: 5px; overflow: hidden; min-width: 0; padding: 5px; }
.staff_info h3 { font-size: 100%; color: #ffff00; line-height: 120%; text-align: center;}
.staff_info p { font-size: 70%; color: #ffffff; line-height: 110%; text-align: center;}
.staff_info img { width: 100%;}
/* マップ */
#map_space { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
#map_space iframe, #map_space object, #map_space embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#map_space h3, #map_space p { color:#000; }
#access_data { width: 90%; margin: 10px auto; padding: 0; color: #fff; display: block; overflow: hidden; }
#access_data h2 { margin: 10px 0 5px 0; padding: 0; text-indent: 10px; clear: both; display: block; color: #ffff00; font-size: 100%; }
#access_data ul { width: 100%; margin: 0; padding: 0;}
#access_data li { font-size: 80%; line-height: 120%; text-indent: 5%; }
/* リンク */
#link_page, #youtube { width: 90%; margin: 10px auto; padding: 0; color: #fff; display: block; overflow: hidden; }
#link_page h2 { margin: 10px 0 5px 0; padding: 0; border-top: 1px solid #ffff00; text-indent: 10px; clear: both; display: block; color: #ffff00; font-size: 100%; }
#youtube h2 { margin: 10px 0 5px 0; padding: 0; border-top: 1px solid #ffff00; text-align: center; clear: both; display: block; color: #ffff00; font-size: 100%; }
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#youtube p { text-align: center; font-size: 80%; }
.link_area { display: grid; grid-template-columns: repeat(auto-fit, 240px); grid-auto-rows: 1fr; grid-gap: 5px; padding: 0; margin: 5px; justify-content: center; }
.link_area > div { border: 1px #333 solid; border-radius: 5px; overflow: hidden; min-width: 0; padding: 5px; }
.link_box h3 { font-size: 80%; color: #ffff00; line-height: 100%; text-align: center;}
.link_box p { font-size: 70%; color: #ffffff; line-height: 100%; text-align: center;}
.link_box a, .link_box img { width: 100%;}
/* フッター */
#footer { width: 100%; height: 60px; font-size: 80%; color: #fff; background-color: #b70002; display: block; clear: both; overflow: hidden; text-align: center; line-height: 20px; }