@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Questrial);

/*リセット*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, input, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, object, embed
{
margin: 0px; 
padding: 0px; 
border: 0px; 
outline: 0px; 
}

dl, dt, dd, ol, ul, li {
list-style:none;
}

img {
border: 0;
}

li {
list-style: none;
}

input,
button,
textarea,
select,
optgroup,
option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
b{ font-weight:bold}

/***************************************
 * Global
 ***************************************/

* {
  padding:0;
  margin: 0;
}

html {
  height: 100%;
}

body {
  font-family:'Questrial',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color:#00d8f2; 
  width:100%;
  height:100%;
  font-weight:100;
  position:relative;
  overflow-x: hidden;
}
#wrapper{
  width:100%;
  height:100%;
}
#img.aoe{
  background-image:url(../images/aoe0000.jpg);  
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:100%;
  background-color:black;
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  z-index:0;
}

#img{
  background-image:url(../images/shoko.jpg);  
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:100%;
  background-color:black;
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  z-index:0;
}

#img p.aoe{
position:relative; 
background:url(../images/aoe.png) no-repeat center top;
width:40%;
margin:0 auto;
height:100%;
background-size:100%;
z-index:1;
}
.sp_only{ display:none!important}
.pc_only{ display:block!important}

@media only screen and (max-width: 768px) {
.sp_only{ display:block!important}
.pc_only{ display:none!important}
#wrapper{ overflow:hidden}
#img{ background-size:cover; background-position:right bottom}
#img p.aoe{ width:80%; background-position:center bottom}
#img.aoe{
  background-position:center center;
  background-size:cover;
}
}


/* 点滅 */
.blinking{
-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}


/***************************************
 * Common
 ***************************************/


.clearfix:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;}
.clearfix { min-height: 1px;}
* html .clearfix { height: 1px; /*¥*//*/ height: auto; overflow: hidden;/**/}

a {
  color: #00d8f2;
  text-decoration:none;
}

img {
  vertical-align: bottom;
}

a:hover  { 
  text-decoration:none;
}

input, select, textarea {
  font-size: 100%;
}

button {
  padding: 5px 40px;
  border-radius: 5px;
  color: #fff;
  font-size: 90%;
  font-weight: bold;
  cursor: pointer;
}

.element2 {
  display: block;
}

.gray {
  background-color:#eeeeee;
}

.fl_left{ float:left}
.fl_right{ float:right}

.clear{ clear:both}

.sp_only{ display:none}

/***************************************
 * Layout
 ***************************************/
 
#contents {
  width: 100%;
  height:100%;
  position:relative;
  background-color:rgba(0,0,0,0.5);
  background-image:url(../images/koushi.png);
  z-index:10;
}

 
#contents.clap{ background-color:rgba(0,0,0,0.9); text-align:center} 
#contents.clap p{ padding-top:20px}
#contents.clap form{ width:30%; margin:10px auto; text-align:left}
#contents.clap form input,
#contents.clap form textarea{ display:block; padding:10px; width:100%; border:none; margin-bottom:10px}
#contents.clap form input[type="submit"]{ background:#00d8f2; color:white}

#contents.clap form a.back{ display:block; border:2px solid #00d8f2; padding:5px 0; color:#00d8f2; margin:20px 0; text-align:center}

@media only screen and (max-width: 768px) {
#contents{}
#contents.clap form{ width:95%;}
#contents.clap h1{ font-size:16px!important}
#contents.clap p{ padding:10px; text-align:left}
}

/*loader*/
#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #000;
  z-index: 200;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #00d8f2;
  z-index: 300;
}

/*==================
 * Header
 */

header {
text-align:center
 }


header h1 a {
font-size:30px;
display:block;
width:40%;
max-width:400px;
border-bottom:3px solid #00d8f2;
margin:0px auto 5px auto;
padding:20px 10px 0 10px;
letter-spacing:0.1em;
}
header h1 a span{ display:block; font-size:20px}
header p.code{ font-size:16px;}

@media only screen and (max-width: 768px) {
header h1 a{ font-size:20px; width:80%}
header h1 a span{ display:block; font-size:16px;}
header p.code{ font-size:14px; padding-left:20px}
}


a.twitter{
display:block;
background:url(../images/twitter.png) no-repeat;
width:50px;
height:50px;
position:absolute;
right:280px;
top:60px;
text-indent:-9999px;
z-index:100;
}
a.twitter:hover{ opacity:0.7}

section#time{
position:absolute;
right:130px;
top:40px;
text-align:right;
}

section#menu{
position:absolute;
right:24px;
top:40px;
text-align:right;
}

section#menu a{
display:block;
width:80px;
height:80px;
background:#00d8f2 url(../images/clock.png) no-repeat center 10px/60%;
color:white;
text-align:center;
font-size:12px;
padding-top:60px;
box-sizing:border-box;
}

section#menu_time.remodal{
max-width:100%;
height:100%;
background:#000;
}

section#menu_time.remodal ul{
display:flex;
flex-wrap:wrap;
padding-top:10%;
}
section#menu_time.remodal ul li{
width:25%;
text-align:center;
font-size:18px;
height:3em;
}

.remodal-wrapper{
padding:0}


section#time p.dates{ font-size:23px; text-align:justify;line-height:1em}
section#time p.time{ font-size:35px; padding-bottom:0px; margin-bottom:5px; border-bottom:3px solid #00d8f2; line-height:1.2em}
section#time p.time span.second{ font-size:80%;}

@media only screen and (max-width: 768px) {
a.twitter{
background:url(../images/twitter.png) no-repeat;
width:30px;
height:30px;
background-size:100%;
position:absolute;
left:10px;
top:10px;
text-indent:-9999px;
z-index:100;
}
section#time{
position:absolute;
left:10px;
top:120px;
text-align:left;
width:27%
}
section#time p.dates{ font-size:16px; text-align:justify;line-height:1em}
section#time p.time{ font-size:24px; padding-bottom:0px; margin-bottom:2px; border-bottom:3px solid #00d8f2; line-height:1.2em}
section#time p.time span.second{ font-size:80%;}

section#menu{
right:0;
top:0;
}
section#menu a{
width:60px;
height:60px;
padding-top:44px
}
section#menu_time.remodal h2{ font-size:18px}
section#menu_time.remodal ul li{
width:50%;
font-size:16px;
height:2em;
}

}

section#log{ position:absolute; right:0; top:200px; transition: transform .2s; font-size:12px; z-index:100}
body.ps-active section#log {
  transform: translateX(280px);
}
ul.panel{text-align:left;}
ul.panel li{padding-bottom:10px}


section#log a.tab{
background:url(../images/log_tab.png);
width:38px;
height:157px;
text-indent:-9999px;
display:block;
float:left;
}
body.ps-active section#log a.tab{
margin-right:280px;
}
section#log .panel{
display:none;
background:rgba(0,0,0,0.5);
width:240px;
padding:20px;
float:left;
transform: translateX(-280px);
min-height:200px;
}
section#log .panel.ps-active-panel{ display:block}

section#log .panel li{ padding-bottom:10px;}

section#secret a,
section#alert a{
position:absolute;
background:url(../images/alert.png) no-repeat;
width:119px;
height:119px;
text-indent:-9999px;
}
section#alert a:hover{ opacity:0.5}

section#secret a.diary{ left:32%; top:25%; width:5%; height:34%; background:none}
section#secret a.lineLink{ right:12%; bottom:11%; width:15%; height:15%; background:none}
section#secret a.album{ left:39%; bottom:0%; width:10%; height:25%; background:none}
section#secret a.music{ right:0; bottom:30%; width:10%; height:15%; background:none}

@media only screen and (max-width: 768px) {
section#log{ top:150px}
section#alert{ text-align:center; width:100%; position:absolute; top:60%;}
section#alert a{
position:relative;
display:inline-block;
background:none;
width:auto;
height:auto;
padding:5px 10px;
margin:10px;
border:2px solid #00d8f2;
text-indent:0;
left:auto!important;
right:auto!important;
top:auto!important;
bottom:auto!important;
}

.remodal-wrapper{ padding:0; width:100%; overflow:auto}
.remodal{ width:100%; height:100%; left:0; top:0; right:0; bottom:0; overflow:scroll; position:fixed; margin-bottom:0; padding:5%; text-align:left;}
.remodal.img{ width:100%; height:100%; background:rgba(0,0,0,0.8);}
.remodal.img img{ width:100%; padding-top:10%}

.remodal ul{ padding-top:20px}
.remodal ul li{ padding-bottom:10px;}

section#secret { width:100%; top:40%; position:absolute; text-align:center;}
section#secret a{
position:relative!important;
left:auto!important;
right:auto!important;
top:auto!important;
bottom:auto!important;
width:100px!important;
height:100px!important;
border-radius:52px;
-moz-border-radius:52px;
-webkit-border-radius:52px;
text-indent:-9999px;
border:2px solid #00d8f2;
display:inline-block;
margin:5px;
}
section#secret a.diary{ background:url(../images/sp_ic_diary.png) no-repeat center center!important}
section#secret a.lineLink{ background:url(../images/sp_ic_line.png) no-repeat center center}
section#secret a.album{ background:url(../images/sp_ic_album.png) no-repeat center center}
section#secret a.music{ display:none}
}

section#line{}
section#line h3{
background:rgba(255,255,255,0.2);
text-align:center;
padding:5px 10px;
width:40%;
font-size:12px;
font-weight:normal;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
margin:0 auto 10px auto;
}

section#diary ul,
section#line ul{ text-align:left}
section#line ul h4{ font-size:10px; font-weight:normal}
section#line ul li{
position: relative;
display: inline-block;
padding:10px;
width: auto;
min-width: 80%;
border: 1px solid #00d8f2;
font-size:12px;
background:#000;
z-index: 0;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
margin-bottom:10px
}
section#line ul li:before{
content: "";
position: absolute;
top: 50%; left: -8px;
margin-top: -9px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 9px 9px 9px 0;
border-color: transparent #000 transparent transparent;
z-index: 0;
}
section#line ul li:after{
content: "";
position: absolute;
top: 50%; left: -10px;
margin-top: -10px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #00d8f2 transparent transparent;
z-index: -1;
}

@media only screen and (max-width: 768px) {
section#line ul li{
min-width: 90%;
}

}

section#diary iframe{ width:100%; height:100%}

section#diary ul h4{ font-size:14px; font-weight:normal; padding:5px 10px}
section#diary ul li{ padding:0 10px 20px 10px;}

ul#diaryList li{ display:none}

section#music{ text-align:center; height:300px}
section#music p{ padding:20px 0 40px 0}
section#music button.music{ border:2px solid #00d8f2; display:inline-block; margin:10px; padding:30px;}
section#music button.music#play{ background:url(../images/play_bt.png) no-repeat center center}
section#music button.music#pause{ background:url(../images/pause_bt.png) no-repeat center center}
section#music button.music#stop{ background:url(../images/stop_bt.png) no-repeat center center}
section#music button:hover{ opacity:0.7}

section#foot{ width:100%; position:absolute; bottom:2%; z-index:20}
section#foot div#status{ font-size:16px; padding-bottom:5px; border-bottom:5px solid #ff0000; color:#ff0000; display:inline-block; margin-left:20px}
section#foot a.clap{ float:right; font-size:16px; padding:10px; border:2px solid #00d8f2; margin-right:20px}
section#foot a.clap:hover,
section#foot a.stop:hover{ background:rgba(255,255,255,0.2)}
section#foot a.stop{ display:inline-block; margin-right:20px;font-size:16px; padding:10px; border:2px solid #ff0000; margin-left:20px; color:#ff0000}


@media only screen and (max-width: 768px) {
section#foot{ text-align:center}
section#foot a.clap{ float:none; width:70%; margin:10px auto; font-size:14px; display:block;}
section#foot div#status{ font-size:14px;}
}