@charset "utf-8";
/* ===================
 reset
=================== */
@import 'html-5-reset-stylesheet.css';
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400i,700');
@import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css');
/* ===================
 font-family
=================== */
html{
font-size: 62.5%;
}
body{
font-family : -apple-system, "BlinkMacSystemFont", "Noto Sans Japanese", "Yu Gothic" , "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", osaka, sans-serif;
line-height:1.4;
color:#fff;
/*-webkit-user-select: none;*/
-webkit-text-size-adjust: 100%;
width: 100%;
min-width: 1140px;
font-size: 14px; font-size: 1.4rem;
-webkit-text-size-adjust: 100%;
/*
background:url(../img/bg.jpg) center/cover no-repeat fixed;
*/
background-color:#000;
}
*{
  -webkit-appearance: none;
}
@media only screen and (max-width: 768px) {
  body {
  min-width: 100%;
  }
}
.fat-nav li,#blog-top h3,#blog h3,
#onair h3,#onair h4,#taw h3,.btn{
font-family: 'Josefin Sans', sans-serif;
}
/* ===================
 reset-add
=================== */
a:active {
color: #000;
}
a {
color:#fff;text-decoration: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
transition: .5s;
}
ol, ul {
list-style: none;
}
img {
max-width:100%;
vertical-align: bottom;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
box-sizing: border-box;
}
/* ===================
 common
=================== */
.nest {
width: 1140px;
margin: 0 auto;
}
.cf:after {
content: "";
clear: both;
display: block;
}
@media only screen and (max-width: 768px) {
  .nest {
  width: 100%;
  }
}
header h1 a:hover,header h1 + p a:hover,#page-top a:hover,
footer li a:hover,#recipe article + p a:hover{
opacity: .6;
}
/* ===================
 header
=================== */
header {
  height: auto;
}

header.index_head {
  height: auto;
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* 左右中央寄せ */
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;

  /* 上下中央寄せ */
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
header h1{
width: 40%;
max-width: 500px;
margin: 50px auto 80px;
}
header h1.h1{
width: 300px;
margin: 50px auto 80px;
}
.slider{
margin: 50px 20px 0;
}
.slider li{
position: relative;
}
.slider li a:after,
.slider p:after{
position: absolute;
top: 0;
left: 20px;
content: '';
width: calc(100% - 40px);
height: 100%;
background-color: rgba(0,0,0,.5);
transition: .5s;
}
.slider p:after{
position: absolute;
top: 0;
left: 0;
content: '';
width: 20px;
height: 100%;
background-color: rgba(0,0,0,.5);
}
.slider li a:hover:after,
li.slick-active a:after,
li.slick-active p:after{
background: none
}
.slider li img{
text-align: center;
margin: 0 auto;
}
.slider p{
position: absolute;
display: inline-block;
bottom: 20px;
left: 0;
background: #000;
color: #00A0E9;
padding: 10px;
margin-right: 50px;
}

.fat-nav ul{
margin: 0 20px;
letter-spacing: -0.4em;
}
.fat-nav li{
width: 16.16%;
margin: 0 0.6% 0 0;
text-align: center;
display: inline-block;
letter-spacing: normal
}
.fat-nav li:last-child{
margin-right: 0;
}
.fat-nav li a {
position: relative;
display: block;
transition: .3s;
border-top: 3px solid #ccc;
padding: 10px 0;
}
@media only screen and (min-width: 769px) {
  .fat-nav li a::after {
  position: absolute;
  top: -3px;
  left: 0;
  content: '';
  width: 0;
  height: 3px;
  background-color: #00A0E9;
  transition: .5s;
  text-shadow: 0 0 5px #fff,0 0 10px #fff;
  }
  .fat-nav li a:hover{
  color: #00A0E9;
  }
  .fat-nav li a:hover::after {
  width: 100%;
  }
}
@media only screen and (max-width: 768px) {
  header h1{
  width: 80%;
  float: none;
  margin: 0 10%;
  }
  header h1 img{
  width: 100%;
  }
  .fat-nav .sp{
  width: 200px;
  margin: 60px auto;
  }
  .fat-nav ul{
  margin: 40px 0;
  }
  .fat-nav li{
  width: 100%;
  font-size: 18px
  }
  .fat-nav li a {
  padding: 20px 0;
  border: none
  }
}
/* ===================
 #main
=================== */
.main {
width: 67.5%;
float: left;
}
aside{
width: 24.56%;
margin-right: 20px;
float: right;
}
@media only screen and (max-width: 768px) {
  .main,aside{
  width: 90%;
  margin: 0 5%;
  float: none;
  }
  aside{
  padding-top: 50px;
  width: 80%;
  margin: 0 10%;
  }
}
/* ===================
 #top
=================== */
.contents{
padding: 50px 0;
}
#taw {
  padding-top: 5rem;
}
#blog-top h3,#blog h3,
#onair h3,#taw h3{
font-size: 22px;
font-weight: normal;
position: relative;
letter-spacing: .1em;
margin: 40px 0 50px 20px;
}
#onair h3,#taw h3{
margin-left: 0;
}
#blog-top h3:before,#blog h3:before,
#onair h3:before,#taw h3:before{
content: '';
position: absolute;
top: -40px;
width: 26px;
height: 26px;
background:url(../img/blog-icon.png) 0 0 no-repeat;
background-size: cover;
}
#onair h3:before,#taw h3:before{
background:url(../img/onair-icon.png) 0 0 no-repeat;
background-size: cover;
}
#blog-top h3:after,#blog h3:after,
#onair h3:after,#taw h3:after{
content: '';
position: absolute;
top: 42px;
left: 0;
width: 26px;
height: 1px;
background: #fff;
}
#blog-top ul{
padding-left: 20px;
letter-spacing: -4em
}
#blog-top li{
width: 45.33%;
height: 246px;
margin: 0 8% 35px 0;
display: inline-block;
position: relative;
letter-spacing: normal;
background-size: cover;
background-position: center center;
}
#blog-top li:nth-child(2n){
margin-right: 0
}
#blog-top li:after,
.btn a:after{
content: '';
position: absolute;
top: 8px;
left: 6px;
width: 100%;
height: 100%;
z-index: -2;
border-right: 2px solid #00A0E9;
border-bottom: 2px solid #00A0E9;
}
.btn a:after{
top: 9px;
left: calc(10% + 4px);
width: 90%;
height: 90%;
}
#onair .btn a:after{
top: 8px;
}
#blog-top li a{
display: block;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.2);
transition: all .4s ease-in-out
}
#blog-top li a:hover{
background: rgba(0,160,233,0.5);
transition: all .4s ease-in-out
}
#blog-top li p{
color: #FFF;
background: #000;
position: absolute;
padding: 10px;
margin-right: 40px;
left: -5px;
bottom: 10px;
}
#blog-top .btn,#blog .btn,
#onair .btn{
width: 260px;
border: 2px solid #00A0E9;
text-align:center;
font-size: 17px;
font-weight: 400;
font-style: italic;
margin: 0 auto;
position: relative;
}
#blog-top .btn{
margin: 30px auto 0;
}
#onair .btn{
width: 200px;
font-size: 14px;
}
.btn a{
display: block;
padding: 15px 0;
color: #00A0E9;
}
#onair .btn a{
padding: 7px 0 5px;
}
.btn a:hover{
background: #00A0E9;
color: #fff;
}
#onair h4{
color:#191919;
background: #00A0E9;
margin: 0 10px;
padding: 12px 0 6px;
text-align: center;
letter-spacing: .1em;
}
#onair li{
padding: 16px 10px 10px 34px;
background:url(../img/onair-li-icon.png) 7px 50% no-repeat;
}
#onair li:nth-child(2n){
background:rgba(0,160,233,0.15) url(../img/onair-li-icon.png) 7px 50% no-repeat;
}
.scroll_area {
height:300px; overflow:auto;
margin-bottom: 15px;
}
#t_tweet{
width: 100%;
margin: 40px 0 20px;
}


.scroll_area {
max-width: 274px;
overflow:auto;
}
@media only screen and (max-width: 768px) {
  .scroll_area {
  max-width: 100%;
  }
  #onair .btn{
  width: 260px;
  font-size: 17px;
  }
  #onair .btn a{
  padding: 15px 0;
  }
}
  @media only screen and (max-width: 425px) {
  #blog-top li{
  width: 92%;
  }
  #blog-top .btn,
  #onair .btn{
  width: 200px;
  font-size: 16px;
  }
iframe.twitter-timeline-rendered {
		width: 255px !important;
	}
}
/* ===================
 #blog
=================== */
#blog > div{
margin-bottom:50px;
border-bottom: 1px solid #666;
margin-left: 20px;
}
#blog h4{
color: #00A0E9;
font-size: 20px;
}
#blog h4 + p{
text-align: right;
padding-bottom: 20px;
margin-bottom:20px;
border-bottom: 2px solid #00A0E9;
}
#blog .right{
float: right;
margin-left: 20px;
margin-bottom: 20px;
}
#blog .btn{
width: 200px;
font-size: 15px;
float: left;
margin-left: 20px;
}
#blog .btn + p{
float: right
}
#blog .sns{
margin: 20px 0;
}
#blog .sns li{
display: inline-block
}
@media only screen and (max-width: 768px) {
  #blog > div{
  width: 94%;
  margin: 0 auto 50px;
  }
  #blog .btn + p{
  margin-right: 20px;
  }
  #blog .btn{
  width: 180px;
  }
}
@media only screen and (max-width: 425px) {
  #blog > div{
  width: 94%;
  margin: 0 auto 30px;
  }
  #blog .btn + p{
  margin-right: 20px;
  }
  #blog .btn{
  width: 100px;
  font-size: 13px;
  }
  #blog .btn a{
  padding: 10px 0;
  }
}
/* ===================
 footer
=================== */
footer{
text-align: center;
padding: 40px 0 30px 0;
position: relative;
}
footer li{
display: inline-block;
margin: 0 5px 20px;
}
footer li img{
max-height: 80px;
}
footer ul + p{
font-size: 12px;
}
#page-top {
position: fixed;
bottom: 20px;
right: 20px;
}
@media all and (min-width:769px){
  .sp {
  display: none;
  }
}
@media all and (max-width: 768px) {
  .pc {
  display: none;
  }
}

@media all and (min-width:769px){
  .sp {
  display: none;
  }
  .fat-nav {
      display: block !important;
  }
  body {
      overflow: visible !important;
  }
}
.fixed {
position: fixed;
top: 0;
width: 1140px;
padding-top: 20px;
z-index: 10000;
background:rgba(0,0,0,0.7);
transition: .3s;
}
/*全体*/
.timefree {
position: fixed;
top: 0;
margin: 2em 0;
padding: 0;
z-index: 9999;
}
.timefree label {
cursor :pointer;
}
.timefree input {
display: none;
}
.timefree img {
  max-width: 66px;
}
.timefree div{
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;
}
.timefree input:checked ~ div {
padding: 0;
height: auto;
opacity: 1;
}
.timefree li{
font-size: 12px;
border-bottom: 1px solid #000;
}
.timefree li a{
display: block;
background: #333;
padding: 10px 20px;
}
.timefree li a:hover{
color: #00A0E9;
background: #111;
}


ul#banner li {
  text-align: center;
  margin-bottom: 1rem;
}