@charset "utf-8";
/* ===================
 reset
=================== */
@import 'html-5-reset-stylesheet.css';
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/css?family=Noto+Serif);
/* ===================
 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:#e2318c;
/*-webkit-user-select: none;*/
-webkit-text-size-adjust: 100%;
width: 100%;
min-width: 1200px;
font-size: 14px; font-size: 1.4rem;
-webkit-text-size-adjust: 100%;
background-image:url("../images/background_pattern.png");
}
*{
  -webkit-appearance: none;
}
@media only screen and (max-width: 768px) {
  body {
  min-width: 100%;
  }
}
/* ===================
 reset-add
=================== */
a:active {
color: #000;
}
a {
color:#5f5f5f;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: 1200px;
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 {
  margin-bottom: 20px;
}
header h1{
width: 40%;
max-width: 453px;
margin: 50px auto 80px;
}
.fat-nav ul{
margin:0 202px;
}
.fat-nav ul li{
float: left;
}
.fat-nav ul li a{
display: block;
height: 40px;
/*background:#fc0;*/
text-indent: -9999px;
}
.fat-nav ul li:first-child a{
width:88px;
background: url("../images/menu.png") no-repeat;
}
.fat-nav ul li:first-child a:hover{
background: url("../images/menu_hover.png") no-repeat;
}
.fat-nav ul li:nth-child(2) a{
width:133px;
background: url("../images/menu.png") no-repeat -88px 0;
}
.fat-nav ul li:nth-child(2) a:hover{
background: url("../images/menu_hover.png") no-repeat -88px 0;
}

.fat-nav ul li:nth-child(3) a{
width:179px;
background: url("../images/menu.png") no-repeat -221px 0;
}
.fat-nav ul li:nth-child(3) a:hover{
background: url("../images/menu_hover.png") no-repeat -221px 0;
}

.fat-nav ul li:nth-child(4) a{
width:262px;
background: url("../images/menu.png") no-repeat -400px 0;
}
.fat-nav ul li:nth-child(4) a:hover{
background: url("../images/menu_hover.png") no-repeat -400px 0;
}

.fat-nav ul li:nth-child(6) a{
width:123px;
background: url("../images/menu.png") no-repeat -662px 0;
}
.fat-nav ul li:nth-child(6) a:hover{
background: url("../images/menu_hover.png") no-repeat -662px 0;
}

  @media only screen and (max-width: 768px) {
      header h1{
      width: 60%;
      margin: 50px auto 10px;
      }

      .fat-nav ul{
        padding-top: 30px;
      margin:0 auto;
      }
      .fat-nav ul li{
      float: none;
      }

      .fat-nav ul li a{
      height: 62px;
      }

      .fat-nav ul li:first-child a{
      width:100%;
      background: url("../images/768_menu.png") no-repeat center 0;
      }
      .fat-nav ul li:first-child a:hover{
      background: url("../images/768_menu.png") no-repeat center 0;
      }
      .fat-nav ul li:nth-child(2) a{
      width:100%;
      background: url("../images/768_menu.png") no-repeat center -62px;
      }
      .fat-nav ul li:nth-child(2) a:hover{
      background: url("../images/768_menu.png") no-repeat center -62px;
      }

      .fat-nav ul li:nth-child(3) a{
      width:100%;
      background: url("../images/768_menu.png") no-repeat center -124px;
      }
      .fat-nav ul li:nth-child(3) a:hover{
      background: url("../images/768_menu.png") no-repeat center -124px;      
      }

      .fat-nav ul li:nth-child(4) a{
      width:100%;
      background: url("../images/768_menu.png") no-repeat center -186px;
      }
      .fat-nav ul li:nth-child(4) a:hover{
      background: url("../images/768_menu.png")  no-repeat center -186px;
      }

      .fat-nav ul li:nth-child(5) a{
      width:100%;
      background: url("../images/768_menu.png") no-repeat center -248px;
      }
      .fat-nav ul li:nth-child(5) a:hover{
      background: url("../images/768_menu.png") no-repeat center -248px;
      }

      .fat-nav ul li:nth-child(6) a{
      width:100%;
      background: url("../images/768_menu.png") no-repeat center -310px;
      }
      .fat-nav ul li:nth-child(6) a:hover{
      background: url("../images/768_menu.png") no-repeat center -310px;
      }
  }

/* ===================
 #slide
=================== */
.slider{
margin: 0;
}
.slider li{
position: relative;
}
.slider li a{
  display: block;
  padding-top: 70%;
  background-size: cover;
  }
.slider li a:after,
.slider p:after{
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.4);
transition: .5s;
}
.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: 0px;
left: 0;
background: rgba(255,255,255,.6);
color: #3e3a39;
padding: 20px 10px;
width:100%;
font-size: 16px;
}


/* ===================
 #main
=================== */
.main {
width: 656px;
float: left;
}
aside{
float: right;
width:280px;
}
@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%;
  float: none;
  }
}
/* ===================
 #top
=================== */
.contents{
padding: 50px 130px 50px 110px;
clear: both;
}
@media only screen and (max-width: 768px) {
  .contents{
  padding: 50px 2%;

  }
}
#blog-top ul{
padding-left: 20px;
padding-top:10px;
}

@media only screen and (max-width: 425px) {
    #blog-top ul{
  padding-left: 0;
  padding-top:10px;
  }
}

#blog-top li{
width: 49%;
/* height: 230px; */
margin: 0 0% 14px 0;
float:left;
position: relative;
letter-spacing: normal;
background-size: cover;
background-position: center center;
padding:5px;
}

@media only screen and (max-width: 425px) {
  #blog-top li{
  width: 100%;
  margin: 0 0% 14px 0;
  float:none;
  }
}

#blog-top li:nth-child(2n+1){
  margin-right:2%;
}

#blog-top li:nth-child(3n+1){
background-color: #ff0066;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
-webkit-background-size: 4px 4px;
}
#blog-top li:nth-child(3n+2){
background-color: #006633;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
-webkit-background-size: 4px 4px;
}
#blog-top li:nth-child(3n){
background-color: #ffcc33;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
-webkit-background-size: 4px 4px;
}
#blog-top li a{
display: block;
width: 100%;
}
#blog-top li a:hover{
background: rgba(255,255,255,.6);
transition: all .4s ease-in-out
}
#blog-top li div{
width:100%;
padding-top: 70%;
background-size: cover;
}
#blog-top li p{
color: #333333;
background: rgba(255,255,255,0.6);
position: absolute;
padding: 10px 5px 10px 10px;
font-size: 12px;
left: 5px;
bottom: 5px;
right: 5px;
}
#blog-top .btn,#blog .btn{
text-align:center;
margin: 0 auto;
position: relative;
}
#blog-top .btn{
margin: 0 auto;
}
.btn a{
display: block;
padding: 15px 0;
color: #666;
}
.btn a:hover{
  opacity: 0.3;
}
#t_tweet{
margin-bottom: 20px;
padding-left: 20px;
background-color: #fff;
}
#t_tweet iframe { width: 740px !important; }
@media all and (max-width: 768px) {
  #t_tweet{
  padding-left: 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: 14px;
}
footer p {
  padding-bottom: 20px;
}
#page-top {
position: fixed;
bottom: 20px;
right: 20px;
}
@media all and (min-width:769px){
  .sp {
  display: none;
  }
  .fat-nav {
      display: block !important;
  }
  body {
      overflow: visible !important;
  }
}
@media all and (max-width: 768px) {
  .pc {
  display: none;
  }
}

/* ===================
 バナー
=================== */

div#taw,div#timetable {
  color: #666;
  background: #FFF;
  margin-bottom: 20px;
}
div#taw p,div#timetable p {
  padding: 1.1rem;
}
div#taw >h4 {
  margin-top: -30px;
}

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

.banner01 img {
  margin-bottom: 20px;
  }

@media only screen and (max-width: 768px) {

  .banner01 img {
  float: right;width: 50%
  }

  .banner02 img {
  float: left;width: 50%
  }

  .banner{
  padding-bottom: 20px;
  }
}

@media only screen and (max-width: 425px) {

      .banner01 {
        text-align: center;
      }

      .banner02 {
        text-align: center;
      }


      .banner01 img {
        float: none;
        margin-bottom: 10px;
        width: 100%;
        }

      .banner02 img {
        float: none;
        width: 100%;
        }
}

/* ===================
 diaryページ
=================== */

h3.blog {
  display: block;
  padding-bottom: 10px;
}

@media only screen and (max-width: 425px) {
  h3.blog {
  display: block;
  padding-bottom: 8px;
  width:50%;
  }
}

.day {
  color: #5f5f5f;
}

article p{
  color: #5f5f5f;
}

article h4 {
    color: #ff0066;
}

article h4.h4_2 {
    color: #006633;
}

article h4.h4_3  {
  color: #f5be18;
}
#diary article{
    width: calc(100% - 20px);
    padding:5px;
    margin: 0 0 20px 20px;
    word-break: break-all;
}


@media only screen and (max-width: 425px) {
  #diary article{
      width: 100%;
      padding:5px;
      margin: 0 0 20px 0;
      word-break: break-all;
  }
}

#diary article:nth-child(3n+1) {

    background-color: #ff0066;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #FFEFEF), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #FFEFEF),color-stop(.75, #FFEFEF), color-stop(.75, transparent),to(transparent));
    -webkit-background-size: 7px 7px;
}

#diary article:nth-child(2) {

    background-color: #006633;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #FFEFEF), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #FFEFEF),color-stop(.75, #FFEFEF), color-stop(.75, transparent),to(transparent));
    -webkit-background-size: 7px 7px;
}

#diary article:nth-child(3) {

    background-color: #ffcc33;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #FFEFEF), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #FFEFEF),color-stop(.75, #FFEFEF), color-stop(.75, transparent),to(transparent));
    -webkit-background-size: 7px 7px;
}

#diary article:nth-child(4){
  margin-top:20px;
}
.sns_area + img{
  margin-bottom: 10px;
}
.btn_area {
  padding-left:20px;
}

@media only screen and (max-width: 425px) {
  .btn_area {
    padding:0px;
  }
}

.btn_area li {
  float: left;

}

.btn_area li:last-child {
  float: right;
}
.btn_area li a{
width:166px;
display: block;

}
.btn a:hover{
  opacity: 0.3;
}
#onair {
  position: relative;
}

.contens_background{
    padding:20px;
    background-color: #fff;
}

@media only screen and (max-width: 375px) {
  .btn_area li a {
  display: block;
  width:120px;
  }

}



/* ===================
 twitter & facebook
=================== */
.sns_area {
  position: relative;
  top:-5px;
}


/* happiness club */
  .one-column {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
  }
  .ad-area {
    background-color: #000;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), 
      color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
    -webkit-background-size: 4px 4px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 2rem;
  }
  .inner-w {
    width: calc(100% - 10px);
    margin: 0 5px;
    padding: 0;
    background: #FFF;
    position: relative;
  }
  .inner-w h4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-left: 25%;
    font-size: 140%;
  }
  .ad-area h5:before {
    content: '商品名';
    background: #ff0066;
    padding: 0 3px 0 3px;
    float: left;
    color: #FFF;
    margin-left: 25%;
    margin-right: 5px;
  }
  .ad-area ul {
    width: 100%;
  }
  .ad-area ul li:nth-of-type(1){
    width: 20%;
    float: left;
    position: absolute;
    top: 0;
    left: 0;
  }
  .ad-area ul li:nth-of-type(1) img {
    width: 100%;
  }
  .ad-area ul li:nth-of-type(2){
    width: 100%;
    padding-left: 25%;
  }
  .ad-area ul li:nth-of-type(2) h4 {
    font-size: 140%;
    padding-top: 1rem;
    margin-bottom: 1rem;
  }
  .ad-area ul li:nth-of-type(2) p {
    margin-top: 2rem;
    padding-bottom: 1rem;
  }
  .ad-area ul li:nth-of-type(2) a.hpl {
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
/*
.ad-area ul li:nth-of-type(2) a.hpl img {
  width: 100%;
}
*/

/* ラベル部分 右上に表示 */
.ad-area .inner-w::before {
    content: "";
    top: 0;
    right: 0;
    border-bottom: 3em solid transparent;
    border-right: 3em solid #c12748; /* ラベルの色はここで変更 */
    position: absolute;
    z-index: 100;
}
.ad-area .inner-w::after {
    content: "[PR]";
    display: block;
    top: 5px;
    transform: rotate(45deg);
    color: #fff; /* 文字色はここで変更 */
    right: 0;
    position: absolute;
    z-index: 101;
}

@media only screen and (max-width: 768px){
  .one-column {
    width: 84%;
    margin: 8%;
  }
  .inner-w h4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-left: 10px;
    font-size: 140%;
  }
  .ad-area h5:before {
    margin-left: 10px;
    margin-right: 5px;
  }
  .ad-area ul {
    padding: 10px;
  }
  .ad-area ul li:nth-of-type(2) p {
    margin-top: 0;
    padding-bottom: 1rem;
  }
  .ad-area ul li:nth-of-type(1){
    width: 35%;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    position: relative;
  }
  .ad-area ul li:nth-of-type(2){
    width: 100%;
/*    padding-left: 32%; */
      padding: 0;
      min-height: 140px;
  }
  .ad-area ul li:nth-of-type(2) a.hpl {
    position: relative;
    bottom: auto;
    right: auto;
    width: 40%;
    display: block;
    margin-bottom: .5rem;
    padding: .5rem;
  }
}

.ad-area a {
  width: calc(100% - 10px);
  background: #ff0066;
  color: #FFF;
  border-radius: 6px;
  padding: 2px 5px;
  text-align: center;
  display: block;
  margin: 5px auto;
}