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

/*リセット*/
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:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color:#555; 
  width:100%;
  height:100%;
  font-weight:100;
  position:relative;
  overflow-x: hidden;
}
#wrapper{
  width:100%;
  height:100%;
  position:relative
}





/***************************************
 * 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;
  background:none;
}

.element2 {
  display: block;
}

.gray {
  background-color:#eeeeee;
}

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

.clear{ clear:both}

.sp_only{ display:block}
.pc_only{ display:none}

/***************************************
 * Layout
 ***************************************/

/*==================
 * Header
 */
 
header{background:#003f8c; position:absolute; left:0; top:0; height:40px; width:100%}
header #attention{ overflow: hidden; text-align:center; font-size:11px; padding:10px 0 10px 50px}
div.pc{ /*position:relative*/}
header p.scroll{ color:white; white-space:nowrap; margin:0 0 0 100%; width:200%; text-align:left;}
header div.headwrap:before{
 content:"!";
 line-height:25px;
 box-sizing:border-box;
 text-align:center;
 width:25px;
 height:25px;
 border-radius:20px; 
 -moz-border-radius:20px;
 -webkit-border-radius:20px;
 background:white;
 color:#ff7200;
 position:absolute;
 left:7px;
 top:7px;
 font-size:20px
}
h1{
/*background-image:url(../images/title_back.jpg),url(../images/logo.png);
background-repeat:no-repeat,no-repeat;
background-position:center bottom,center center;
background-size: cover,60%;*/
height:18vh; text-indent:-9999px;
background:url(../images/logo.png) no-repeat center center; background-size:60%
}
div.back{ padding-top:40px}

@media only screen and (min-width: 769px) {
div.pc{ width:1000px; margin:0 auto}
div.headwrap{ width:1000px; margin:0 auto;position:relative}
div.back{ background:url(../images/title_back.jpg) no-repeat center bottom; background-size:cover;}
h1{ background-size:auto; height:300px}
.sp_only{ display:none!important}
.pc_only{ display:block!important}
}

section#menu{
position:absolute;
right:0;
top:0;
text-align:right;
z-index:100;
}


section#menu a{
display:block;

width:60px;
height:60px;
padding-top:44px;

background:#ff7200 url(../images/clock.png) no-repeat center 10px/60%;
color:white;
text-align:center;
font-size:12px;
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:100%;
font-size:14px;
text-align:center;
height:2em;
}
section#menu_time.remodal ul li a{
color:#ff7200;
}

section#menu_time.remodal h2{ font-size:18px}


.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#nowon{ background:#ff7200; padding:0px}
section#nowon div.play{ width:35%; text-align:center; float:left; padding:10px 0 10px 10px; margin-bottom:0px}
section#nowon div.play p.nowonair{ background:white; color:#ff7200; text-align:center; padding:2px 0; width:100%; position:relative;font-size:16px; margin-bottom:15px; font-weight:bold}
section#nowon div.play p.nowonair:after{
content: "";
position: absolute;
bottom: -10px; left: 50%;
margin-left: -10px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #fff transparent transparent transparent;
}
section#nowon div.play a.onairLink{
display:block;
margin:0 auto;
background:white;
width:75px;
height:75px;
text-align:center;
padding:10px;
box-sizing:border-box;
border-radius:45px; 
-moz-border-radius:45px;
-webkit-border-radius:45px;
font-size:40px;
color:#ff7200;
}

section#nowon div.programName{ float:right; width:55%; font-size:12px; padding:10px 10px 10px 0; box-sizing:border-box; color:white}
section#nowon div.programName h3{ font-size:18px}
section#nowon div.programName p.times{ font-size:16px; padding-bottom:10px}

section#nowon div.bottom{ background:#efefef; padding:0}
section#nowon div.bottom a.mailBt{ width:68%;background:#003f8c url(../images/mail.png) no-repeat 7% center; color:white; font-size:18px; text-align:center; padding:10px 0 10px 15px; box-sizing:border-box; background-size:10%; display:block; margin:10px; float:left; height:45px;
border-radius:25px; 
 -moz-border-radius:25px;
 -webkit-border-radius:25px;}
section#nowon div.bottom a.rs{ width:25%; height:100%; display:block; float:right; background:url(../images/rs_normal.jpg) no-repeat; background-size:cover; text-align:center; height:65px; box-sizing:border-box; color:white; line-height:1.2em; font-size:11px}
section#nowon div.bottom a.rs p{padding:5px 0 0 0;box-sizing:border-box; height:100%; margin:0; background:rgba(0,0,0,0.5)}
section#nowon div.bottom a.rs img{ width:40%}

section#nowon div.bottom a.rs.midnight{background-image:url(../images/kuriya_shinya.jpg);}
section#nowon div.bottom a.rs.midnight2{background-image:url(../images/kuriya_shinya2.jpg);}

@media only screen and (min-width: 769px) {
section#nowon div.play{padding:30px 0}
section#nowon div.play p.nowonair{ width:50%; margin:0 auto 20px auto; padding:5px 0; font-size:18px}
section#nowon div.play a.onairLink{ width:120px; height:120px;
border-radius:65px; 
-moz-border-radius:65px;
-webkit-border-radius:65px;
padding:15px;
font-size:60px;}
section#nowon div.programName{ padding:30px; font-size:16px; width:65%}
section#nowon div.programName h3{ font-size:24px; padding-bottom:3px; margin-bottom:10px}
section#nowon div.programName p.times{ font-weight:bold}
section#nowon div.programName img{ float:right; padding-left:20px;}
section#nowon div.bottom div.pc{ width:800px}
section#nowon div.bottom a.mailBt{ background-position:22% center; background-size:7%; height:70px; line-height:70px; padding:0; font-size:18px; font-weight:bold; width:60%; margin-top:40px;
border-radius:65px; 
-moz-border-radius:65px;
-webkit-border-radius:65px;}
section#nowon div.bottom a.rs{ width:30%; height:150px}
section#nowon div.bottom a.rs p{padding:45px 0 0 0;box-sizing:border-box; height:100%; margin:0; background:rgba(0,0,0,0.5); font-size:20px}
section#nowon div.bottom a.rs img{ width:auto; padding-top:10px}

section#menu{
right:24px;
top:40px;
}
section#menu a{
padding-top:60px;
width:80px;
height:80px;
}
section#menu_time.remodal h2{ font-size:22px}
section#menu_time.remodal ul li{
width:33%;
font-size:18px;
height:3em;
font-size:14px;
}
}


.none{display:none!important}

section#banner{ padding:10px}
section#banner img{ width:100%}

@media only screen and (min-width: 769px) {
section#banner{ text-align:center; padding:30px 0}
section#banner img{ width:auto}
}

section#program{ padding:10px 0 70px 0}

section#program h2{ font-size:22px; text-align:center; border-bottom:2px solid #ff7200; color:#ff7200;}

section#program ul li{ padding:10px; border-bottom:1px solid #ccc;}
section#program ul li:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;}
section#program ul li img.prPh{ float:right; width:60px}
section#program ul li p.time{ background:url(../images/time.png) no-repeat left center; background-size:15px; margin-bottom:10px; display:inline-block; padding-left:18px; font-size:12px}
section#program ul li p.title{ font-size:18px}

section#program ul li.now{ background:#efefef}
section#program ul li.now p.time:after{
content:"NOW ON AIR";
background:#ff7200;
padding:2px 10px;
margin-left:10px;
color:white;
font-size:12px;
}

@media only screen and (min-width: 769px) {
section#program{ padding:20px 0 40px 0}
section#program h2{width:1000px; margin:20px auto 0px auto}
section#program ul{ width:1000px; margin:0 auto}
section#program ul li{ width:50%; float:left; box-sizing:border-box; padding:20px 20px; min-height:141px}
section#program ul li{ border-right:1px dotted #ccc}
section#program ul li p.time{ font-size:14px; margin-top:10px}
section#program ul li p.title{ font-size:20px}
section#program ul li img.prPh{ float:right; width:100px}
}

footer{ display:none}

nav{ background:#ff7200; position:fixed; bottom:0; display:block; width:100%; z-index:1000}
nav ul{ padding:10px 0 0 0}
nav ul li{ float:left; width:25%; position:relative; height:50px;}
nav ul li:first-child{ width:25%}
nav ul li a{ display:block; color:white; text-align:center; box-sizing:border-box; padding-top:28px; font-size:12px}
nav ul li:first-child a{ display:block; width:80px; height:80px; background:rgba(0,63,140,0.8); padding:20px 0 10px 0; box-sizing:border-box; line-height:1em; margin-left:5px;
border-radius:50px; 
 -moz-border-radius:50px;
 -webkit-border-radius:50px;
 position:absolute; bottom:5px;}
nav ul li:first-child a strong{ font-size:30px; line-height:1em}
nav ul li:nth-child(2) a{ background:url(../images/blog.png) no-repeat center 3px; background-size:30%;}
nav ul li:nth-child(3) a{ background:url(../images/mail.png) no-repeat center 3px; background-size:30%;}
nav ul li:nth-child(4) a{ background:url(../images/twitter.png) no-repeat center top; background-size:30%;}

@media only screen and (min-width: 769px) {
nav{ background:rgba(255,255,255,0.5); position:relative; bottom:auto; z-index:1000}
nav ul{ width:600px; margin:10px auto 0px auto; padding:20px 0 10px 0;}
nav ul li{height:auto; text-align:center; /*border-right:1px solid #003f8c;*/ box-sizing:border-box}
nav ul li a{ color:#003f8c; font-weight:bold; background-image:none!important; font-size:15px; padding:5px 10px 0 10px; display:inline-block; vertical-align:middle;}
nav ul li:first-child{ border:none}
nav ul li:first-child a{ width:auto; height:auto;background:rgba(0,63,140,1); padding:10px; position:relative; color:white;
border-radius:10px; 
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 border:1px solid #fff}
 nav ul li a br{ display:none}
 nav ul li:first-child a strong{ font-size:16px; display:inline-block; padding-right:10px}
 nav ul li a:hover{ text-decoration:underline}

 footer{ display:block; background:#efefef}
 footer p{ width:1000px; margin:0 auto; padding:10px; text-align:center; font-size:12px}
}

.remodal-wrapper{ padding:0}
.remodal{ margin:0; height:100%}

section#booth{ padding:10% 0 0 0}
section#booth div.img{ width:100%; text-align:center}
section#booth div.img img{ width:100%}
section#booth div.img.on{ background:url(../images/radioStation_on.jpg) no-repeat right center; background-size:cover; height:400px}
section#booth div.img.off{ background:url(../images/radioStation_off.jpg) no-repeat right center; background-size:cover; height:400px}
section#booth div.img.on_sakura{ background:url(../images/radioStation_sakura_on.jpg) no-repeat right center; background-size:cover; height:400px}
section#booth div.img.off_sakura{ background:url(../images/radioStation_sakura_off.jpg) no-repeat right center; background-size:cover; height:400px}
section#booth div.img.on_sakura2{ background:url(../images/radioStation_sakura2_on.jpg) no-repeat right center; background-size:cover; height:400px}
section#booth div.img.off_sakura2{ background:url(../images/radioStation_sakura2_off.jpg) no-repeat right center; background-size:cover; height:400px}

@media only screen and (min-width: 769px) {
section#booth div.img img{ width:600px}
section#booth div.img.on,
section#booth div.img.off,
section#booth div.img.on_sakura,
section#booth div.img.off_sakura,
section#booth div.img.on_sakura2,
section#booth div.img.off_sakura2{ height:600px; width:800px; margin:0 auto}
}

section#line{ padding:10px; color:white; overflow:scroll}

section#line h3{
font-size:16px;
text-align:left;
}
section#line p.time{ text-align:left}

section#diary ul,
section#line ul{ text-align:left; padding-top:20px}
section#line ul h4{font-weight:bold; display:inline-block; padding-right:10px}
section#line ul li{
position: relative;
display:block;
padding:10px;
width: auto;
font-size:14px;
z-index: 0;
color:white;
 font-weight:normal;
}

section#line ul li.line {
display: flex;
align-items: center;
}

section#line ul li.line:after {
  content: "";
  flex-grow: 1;
  height: 1px; /* 線の太さ */
  background: #fff; /* 線の色 */
  width:100%;
  margin:20px 0;
}



div#diaryList div{ display:none}

section#line ul li{
min-width: 90%;
}

@media only screen and (min-width: 769px) {
.remodal{ max-width:100%;}
section#line{ padding:50px 0}
section#line h3,section#line p.time{ text-align:center}
section#line ul{ width:60%; margin:10px auto}
section#booth{ padding:5%}
section#booth div.img{height:100%; background-position:center center; background-size:auto;}
}

div.music{ position:fixed; top:12px; right:40px; text-align:center;}
div.music p{font-size:11px; padding-bottom:5px;}
div.music button.music{ border:1px solid #fff; display:inline-block; padding:5px 10px; margin-right:5px}
div.music  button.music#play{}
section#music button:hover{ opacity:0.7}

div.stop{ padding:10% 0}
div.stop div.music{ position:relative; text-align:center; right:auto}
div.stop div.music p{ padding-bottom:5px;}
section#line div.stop h3{ text-align:center}

@media only screen and (min-width: 769px) {
/*div.music{ position:absolute; top:30px; right:10px; bottom:auto; margin-left:0; width:auto; text-align:right}*/
}

/*blog*/
#blog header{ background:#003f8c; padding:3px 10px;box-sizing:border-box}
#blog header a.home{ display:inline-block; background:url(../images/logo.png) no-repeat center center; width:22%; background-size:100%; text-indent:-9999px; padding:8px 0}
#blog h1{background: url(../images/blog_title.png) no-repeat center 80%;background-size:70%;height: 25vh;border-bottom:3px solid #003f8c;}
#blog #wrapper{ margin:10px; width:auto}
#blog #wrapper article{ border:1px solid #ccc; margin-bottom:20px}
#blog #wrapper article h2{ font-size:18px; color:#ff7200; padding:20px 0 0 20px;}
#blog #wrapper article p.category{ background:#003f8c; text-align:center; color:white; padding:10px; margin:1px 1px 20px 1px}
#blog #wrapper article p.date{ font-size:12px; color:#ff7200; text-align:right; padding-right:20px}
#blog #wrapper article div.entry { padding:20px}
#blog #wrapper article div.entry p{ padding-bottom:10px}
#blog #wrapper article img{ width:80%; margin:20px auto; display:block}

@media only screen and (min-width: 481px) {
#blog header{ padding:10px}
#blog header a.home{ width:100px; padding:10px 0; display:block; margin:0 auto}
}
@media only screen and (min-width: 769px) {
#blog h1{ background-size:auto; height:200px}
#blog #wrapper{ width:980px; margin:40px auto; height:auto}
#blog #wrapper article h2{ font-size:24px;}
#blog #wrapper article p.date{ font-size:16px}
#blog #wrapper article img{ width:400px;}
}

#clap h1{ border-top:20px solid #003f8c; border-bottom:1px solid #ccc;}
#clap div.none{ display:none}
#clap div.cont{ padding:20px 10px;}
#clap div.cont form{ padding:20px 0}
#clap div.cont input{-webkit-appearance : none}
#clap div.cont input#sub2{ border:1px solid #ccc; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; display:block;width:100%; box-sizing:border-box; padding:10px; margin-bottom:10px}
#clap div.cont textarea{border:1px solid #ccc; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; display:block; width:100%; box-sizing:border-box; padding:10px; margin-bottom:10px}
#clap div.cont input[type=submit]{ display:block; width:100%; box-sizing:border-box; margin:20px auto; background:#003f8c; color:white; padding:20px 0;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }
@media only screen and (min-width: 769px) {
#clap div.cont{ width:680px; margin:10px auto}
#clap div.cont input#sub2,
#clap div.cont textarea{ width:100%}
#clap div.cont input[type=submit]{ width:50%; font-size:20px}
}

/*last*/
#last{ background:url(../images/haikei.jpg) no-repeat center center; height:100%; position:relative; background-size:cover}
#img{ background:url(../images/yagen_1.png)no-repeat center bottom; background-size:cover; height:100%;}
#img.pat2{ background:url(../images/yagen_2.png)no-repeat center bottom; background-size:cover;}

.logo{ background:url(../images/logo.png) no-repeat center center; position:absolute; right:10px; top:10px; background-size:100%; width:100px; height:50px;}

p.rec{ display:inline-block; font-size:15px; padding:5px 10px; border:1px solid #F00; color:#F00; position:absolute; left:10px; top:10px}

@media only screen and (min-width: 769px) {
#last{ background:url(../images/haikei.jpg) no-repeat center center; height:100%; position:relative; background-size:cover}
#img,
#img.pat2{ background-size:contain;}
.logo{ width:200px; height:100px}
p.rec{ font-size:20px}
}