@charset "UTF-8";

img{width:100%;}

a{color:#000000;
  text-decoration: none;
  }

a:hover{color:hotpink;
              font-weight:bold;}

.rogo{width:300px;
      height:80px;
      margin:-30px auto;}

/* ｃｓｓのみスライドショーここから */
/* ｃｓｓのみスライドショーここから */
/* ｃｓｓのみスライドショーここから */
.slide{
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
  margin: 25px auto;}

/* タブレット向け以上のスライドショーレイアウトの指定ここから：520px～960px */
@media only screen and (min-width:520px) {
.slide{
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
  margin: 25px auto;}    
    
}
/* タブレット向け以上のスライドショーレイアウトの指定ここまで：520px */

.item1, .item2, .item3 ,.item4{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

.item1{
  animation: slide1 20s infinite;
}
.item2{
  animation: slide2 20s infinite;
}
.item3{
  animation: slide3 20s infinite;
}
.item4{
  animation: slide4 20s infinite;
}

@keyframes slide1 {
  0% {opacity: 1; transform: scale(1.0);}
  20% {opacity: 1;}
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(1.1);}
  90% {opacity: 0}
  100% {opacity: 1; transform: scale(1.0);}
}

@keyframes slide2 {
  0% {opacity: 0;}
  30% {opacity: 0; transform: scale(1.1);}
  40% {opacity: 1;}
  50% {opacity: 1;}
  60% {opacity: 0; transform: scale(1.0);}
  100% {opacity: 0;}
}

@keyframes slide3 {
  0% {opacity: 0;}
  50% {opacity: 0;  transform: scale(1.0);}
  60% {opacity: 1;}
  70% {opacity: 1;}
  90% {opacity: 0; transform: scale(1.1);}
  100% {opacity: 0;}
}

@keyframes slide4 {
  0% {opacity: 0;}
  70% {opacity: 0; transform: scale(1.1);}
  80% {opacity: 1;}
  90% {opacity: 1;}
  100% {opacity: 0; transform: scale(1.0);}
}
/* ｃｓｓのみスライドショーここまで */
/* ｃｓｓのみスライドショーここまで */
/* ｃｓｓのみスライドショーここまで */


/* 見出しのななめ表示のための背景設定 */
header{
	width: 100%;
    max-width: 500px;
    text-align: center;
    margin:20px auto;
	height : 80px;
	padding: 2px;
	position: relative;}

/* 見出しのななめ表示　文字部分の設定 */
header h1 small{
	position: absolute;
	top: 80px;
	left: 15%;
	font-size: 20px;
	transform: rotate(-13deg);}

/* 見出しの色付き背景の設定 */
h1 small{
  position: relative;
  display: inline-block;
  height: 14px;
  margin-left: 0px;
  padding: 3px 5px 14px 5px;
  color: #fff;
  background: #ffd700;}


/* ハンバーガーメニューここから */
/* ハンバーガーメニュー　htmlとcssのみで実装 ----------------------------------------------------------- */

/* ハンバーガーメニュー　htmlとcssのみで実装 ----------------------------------------------------------- */
#gnav-btn {
    color: white;
    background:url("../images/sozai/menubutton_imgpink.jpg") ;
    background-size:100%;
    background-repeat:no-repeat;
    padding: 20px;
    font-size: 10px;
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 100;
    border: solid 1px white;
    border-radius: 3px;
  }
  #gnav-input:checked ~ #gnav-content {
    top: 0;
  }
#gnav-input{display:none;}


  #gnav-content {
    position: fixed;/* ハンバーガーメニューをクリックしていない状態でのメニュー部分の非表示スタイル */
    top: -130%;
    left: 0;
    z-index: 10;
    transition: 0.3s;
    width: 100%;
    font-weight: bold;
  }
  .humb-menu__title {
    margin-top: 10px;
    padding: 0.4rem;
    color:white;
  }
  .humb-menu label {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem;
    cursor: pointer;
    border-top: 0.5px solid #c7c5c5;
    color:white;
    background-color: hotpink;
  }

label a{padding-left: 50px;
        text-decoration: none; 
        color:white;}

label a:hover{padding-left: 50px;
        text-decoration: none; 
        color:darkgrey;}
/* ハンバーガーメニューここまで */


.topimg{width:100%;
        max-width: 600px;
        margin:0 auto;}



/*ピックアップ見出しなどタイトルここから*/

.midashiimgbox{width:90%;
           margin:40px auto -18px auto;}

.imgtitle{
    display: block;
    width:100%;
    max-width: 400px;
    margin:-15px auto 0 auto;}


/*グルメ案内ボックスここから*/
.gourumetbox{width:88%;
            max-width: 400px;
            margin:30px auto 0 auto;}

.food{width:96%;
      margin:10px auto;
      height:130px;
      font-size:13px;}

.food .leftbox{width:30%;
               max-width: 130px;
               float:left;}
.food .rightbox{width:60%;
                float:left;
                padding:1px 0 10px 18px;}
.food small{color:hotpink;font-weight: bold;}





/*おすすめ推薦ボックスここから*/
.recommendbox{width:90%;
            max-width: 450px;
            margin:30px auto 0 auto;
            height:280px;}
.oneofrecommend{width:45%;
                height:230px;
                margin-left: 15px;
                float:left;
                background-color: ghostwhite;}

.uebox{width:80%;
      margin:4px auto;
      height:130px;
      padding:5px;}

.shitabox{font-size:13px;
 margin-top:-45px;
 padding:15px;
 font-size:10px;}

.shitabox small{color:hotpink;font-weight: bold;}


/*リクルート雑誌出演者募集ここから*/
.rectuitimgbox{width:86%;
               max-width: 400px;
               margin:15px auto;}





/*テキストの破線枠ここから*/
.box6 {
    padding: 1.5em 1em;
    margin: 2em 0;
    background: #eee8aa;
    border: dashed 2px #000;/*点線*/
}
.box6 p {
    margin: 0　auto; 
    padding: 0;
    line-height: 1.6;
}

/*テキストの破線枠ここまで*/









.topicbox{width:100%;
  max-width: 500px;
  margin:0 auto;
  line-height: 1.5;
  background-color: ghostwhite;}

.midashi h5{font-size:15px;
color:000;
font-weight: bold;
text-align: center;
line-height: 1.5;}


/* かぎかっこをつけた見出し設定ここから */
h5 {
  display: block;
  width:55%;
  max-width: 350px;
  margin: 0 auto;
  position: relative;
  padding: 1em 2em;
  text-align: center;}
h5:before,
h5:after {
  position: absolute;
  content: '';}
h5:after {
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  border-top: 2px solid #000;
  border-left: 2px solid #000;}
h5:before {
  right: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;}
/* かぎかっこをつけた見出し設定ここまで */


.shop1,.shop2{width:80%;
       padding:15px;
       margin:15px auto;
       background-color: white;}

.name{font-size:15px;}

.adress{font-size:15px;}

.shopshortinfo{
    width:100%;
    height:120px;}

.shopimage{width:35%;
           float:left;}

.taste{width:60%;
       float:right;
       padding:10px 0 10px 0px;}

.linkinfo{
    width:80%;
    margin:0 auto;
    padding:5px 10px;
    text-align: center;
    color:white;
    font-weight:bold;
    background-color: navy;}

.banner{width:90%;max-width: 400px;
margin:20px auto;}


footer{
    margin-top:25px;
    font-size:12px;}

.footerlink{width:70%;
            height:70px;
            margin:0 auto 0 auto;}

footer article{width:45%;
               margin:0 1.5% 0 1.5%;
               font-size:12px;
               float:left;
               text-align: center;
               border: solid hotpink 2px;
                }