@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:#ff518e; 
  width:100%;
  height:100%;
  font-weight:100;
  position:relative;
  overflow-x: hidden;
}
#wrapper{
  width:100%;
  height:100%;
}
#img{
  /*background-attachment: fixed;*/
  background-repeat:no-repeat;
  background-position: center top;
  background-size: contain;
  background-color:black;
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  z-index:-1;
}
#img.midnight{background-image:url(../images/kuriya_shinya.jpg);}
#img.midnight2{background-image:url(../images/kuriya_shinya2.jpg);}
#img.morning{background-image:url(../images/kuriya_asa.jpg);}
#img.noon{background-image:url(../images/kuriya_hiru.jpg);}
#img.sunset{background-image:url(../images/kuriya_yuu.jpg);}
#img.night{background-image:url(../images/kuriya_yoru.jpg);}
#img.night_zoom{background-image:url(../images/kuriya_zoom.jpg);}
#img.night_letter{background-image:url(../images/kuriya_mitsutada.jpg);}
#img.night_letter2{background-image:url(../images/kuriya_mitsutada2.jpg);}
#img.night_letter3{background-image:url(../images/kuriya_tegami.jpg);}

#loader img{ width:40px}
.sp_only{ display:none!important}
.pc_only{ display:block!important}

a#all{ position:absolute; z-index:1000; top:0; left:0; width:100%; height:100%; display:block; cursor:pointer}
.none{display:none!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:20% bottom}
#img.night_letter{background-image:url(../images/kuriya_letter1_sp.jpg); background-position:left bottom; background-size:100%}
#img.night_letter2{background-image:url(../images/kuriya_letter2_sp.jpg); background-position:left bottom; background-size:cover}
#img.night_letter3{background-image:url(../images/kuriya_letter3_sp.jpg); background-position:center bottom; 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: #ff518e;
  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%;
  background-color:rgba(0,0,0,0.3);
  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:#ff518e; color:white}

#contents.clap form a.back{ display:block; border:2px solid #ff518e; 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: #ff518e;
  z-index: 300;
}

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

header {
text-align:center
 }


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

@media only screen and (max-width: 768px) {
header h1{ font-size:20px; width:80%}
header h1 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:#ff518e 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 #ff518e; 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 #ff518e; line-height:1.2em}
section#time p.time span.second{ font-size:80%;}
section#time{
position:absolute;
left:10px;
top:120px;
text-align:left;
width:27%
}

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: 23%;top: 28%;width: 15%;height: 20%;background:none;}
section#secret a.lineLink{left: 36%;top: 53%;width: 10%;height:15%;background:none;}
section#secret a.album{ right:50%; bottom:20%; width:15%; height:15%; background:none}
section#secret a.music{left: 24%;bottom: 20%;width: 11%;height: 20%;background:none;}

section#secret a.memo{left:43%;top: 18%;width:15%;height: 34%;background:none;}

@media only screen and (max-width: 768px) {
section#log{ top:60%}
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 #ff518e;
text-indent:0;
left:auto!important;
right:auto!important;
top:auto!important;
bottom:auto!important;}

section#secret a.diary{left: 23%;top: 28%;width: 15%;height: 20%;background:none;}
section#secret a.lineLink{left: 36%;top: 53%;width: 10%;height:15%;background:none;}
section#secret a.album{ right:50%; bottom:20%; width:15%; height:15%; background:none}
section#secret a.music{left: 24%;bottom: 20%;width: 11%;height: 20%;background:none;}

.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:90px!important;
height:90px!important;
border-radius:52px;
-moz-border-radius:52px;
-webkit-border-radius:52px;
text-indent:-9999px;
border:2px solid #ff518e;
display:inline-block;
margin:5px;
}
section#secret a.diary{ background:url(../images/sp_ic_diary.png) no-repeat center center}
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.memo{ background:url(../images/sp_ic_memo.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 #ff518e;
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 #ff518e transparent transparent;
z-index: -1;
}

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

}


section#memo{max-width:650px;height: 90%;background:none;}
section#memo div{background:url(../images/memo.png) no-repeat center center;width:600px;max-width:600px;height: 100%;position:relative;background-size:contain;}
section#memo div p{width:40%;height:365px;position:absolute;left:158px;top: 50%;margin-top: -190px;}
section#memo div p.ph{ width:80%; left:20px; top:50%; margin-top:-250px}
section#memo div p img{ width:100%}


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#letter iframe{ width:100%; height:100%}
section#letter ul h4{ font-size:14px; font-weight:normal; padding:5px 10px}
section#letter ul li{ padding:0 10px 20px 10px;}

ul#diaryList li,
ul#letterList li{ display:none}{ display:none}

section#music{ text-align:center; height:300px}
section#music p{ padding:20px 0 40px 0}
section#music button.music{ border:2px solid #ff518e; 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 #ff518e; display:inline-block; margin-left:20px}
section#foot a.clap{ float:right; font-size:16px; padding:10px; border:2px solid #ff518e; margin-right:20px}
section#foot a.clap:hover{ background:rgba(255,255,255,0.2)}

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#memo { width:100%; max-width:100%; min-height:100%; background-color:rgba(0,0,0,0.8) }
section#memo  div{ width:100%; max-width:100%; height:400px; min-height:400px; background-size:100%; background-position:center top; margin-top:40%}
section#memo div p{ width:auto; height:auto; left:24%; top:54%; width:45%}
section#memo div p.ph{ width:85%; left:6%; top:50%; margin-top:-219px}
section#memo div p img{ width:100%}
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;}
}