@charset "utf-8";

.PC{display:block;}
.SP{display:none;}

.menu ul li a.menu_spot .menu_border { border-bottom:3px solid #FED631; }
@media screen and (max-width: 1120px) {
  .menu ul li a.menu_spot .menu_border { border-bottom:none; border-left:5px solid #FED631; }
}

.wrap { }
.top { width:100%; margin-bottom:50px; }
.top img { width:100%; }
.title {
padding: 20px 0 50px 0;
}

.contents .cate{justify-content: center;}
.contents .cate a{ width:22%; height:auto; display:inline-block; text-align:center; padding:20px 0; margin:10px; border-radius: 14px;box-shadow: 3px  3px 6px rgba(0,0,0,0.3);}
.contents .cate a strong { width:100%; font-size:18px; color:#FED631; display:inline-block;}
.contents .cate a span { width:100%; color:#fff; display:inline-block; letter-spacing:0.1em;}
.contents .cate { width:100%; display:flex; flex-wrap:wrap;  justify-content: center;}
.contents .cate img{height: 100px;}
.contents .annotation { text-align: center;}

.slider .cate_link  { width:100%; height:330px; display:inline-block;  margin:10px; background: url(../img/memo_pc.svg)no-repeat;
  background-size:contain;}


.spot_p {text-align:center;margin-bottom: 50px;}

/* 直した1101 */
/* .slider .cate_link div  { width:80%; margin: 20px 7% 20px 13%; } */

.slider .cate_link div  { width:70%; margin:30px auto 20px 18%; }
@media screen and (min-width:740px) {
  .slider .cate_link div  { width:60%; margin: 20px 10% 20px 10%; }
}

.slider .cate_link div img { width:auto; height: auto; max-width: 100%; max-height: 100%; margin:0 auto 10px auto; }
.slider .cate_link div strong { width:100%; font-size:16px; font-weight:bold; color:#000; font-weight:bold; text-align:left; display:inline-block; line-height:1.2;}

.slider .cate_link .slide_campaign { width: 90%; margin: 0; padding: 10px 5%; background: #FFFF00; }
.slider .cate_link div em { width: 100%; font-size:12px; line-height:1.5; font-weight:bold; font-style:normal; text-align:left; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}

.slider .cate_link div .sample_box {width:auto; max-width: 100%; max-height: 140px; margin:0 auto 10px auto; overflow: hidden;}
.sample_box img{transition:1s all;}
.slider .cate_link:hover .sample_box img{transform:scale(1.2,1.2);transition:1s all;}

.flag { width:100%; height:auto; display:inline-block;margin:0; }
.flag li { float:left; font-size:13px; margin-right:10px; line-height:1.5em; }
.flag .flag_1 { width:auto; height:20px; background:#F65E39; color:#fff; display:inline-block; padding:0 7px; line-height:20px; }/* 仁川 */
.flag .flag_2 { width:auto; height:20px; background:#1BA5D6; color:#fff; display:inline-block; padding:0 7px; line-height:20px;}/* 門戸厄神 */
.flag .flag_3 { width:auto; height:20px; background:#9FB92C; color:#fff; display:inline-block; padding:0 7px; line-height:20px;}/* 西宮北口 */
.flag .flag_type { width:auto; height:20px; background:#766654; color:#fff; border-radius:10px; padding:0 7px; line-height:20px;}


.ul_spot { width:100%; display:flex; margin:0 auto 50px auto; justify-content: space-between;}
@media screen and (min-width:740px) and ( max-width:1080px) {
  .slider .cate_link div img { width:100%; margin:0 0 0px 0; }
  .slider .cate_link div strong { width:100%; font-size:13px; font-weight:bold; color:#000; font-weight:bold; text-align:left; display:inline-block}
  .slider .cate_link div em { width:95%; background:#FFFF00; font-size:11px; font-weight:bold; font-style:normal; text-align:center;
  display:inline-block; line-height:1.7em; }


}

@media screen and (min-width:740px) {
  .ul_spot { margin-bottom:100px; }

}



.ul_spot li { width:33%; box-shadow: 3px  3px 6px rgba(0,0,0,0.3);}
.ul_spot li a { width:100%; }
.ul_spot li a img{ width:100%; }
.ul_spot li a img:hover{opacity: 0.5;}
.title_h2 { width:100%; display:block; margin:20px 0 0 0; text-align:center; font-weight:bold; font-size:16px; line-height:1.2; }
.nami_wrap { width:100%; height:100px; }
.namibox { width:100vw; height:auto; padding: 7vw 0 15vw 0;margin-top: 0;}
.namibox_bottom  { width:100vw; height:auto; padding:50px 0; }
.nami_wrap { width:100%; }

.tag { width:100%; display:flex; justify-content:center; flex-wrap: wrap;}
.tag a { width:auto; height:28px; display:inline-block; background:#fff; color:#766654; border-radius:14px; padding:0 7px; margin:0 5px 5px 0; border:1px solid #766654;}
.tag a:hover { background:#766654; color:#fff; border:1px solid #766654;;}

/*もっと見るボタン*/
a.newsBoxLink { width:240px; height:45px; display:block; margin:0px auto 0 auto; padding:0 40px 0 0; text-align:center; border:2px solid #000; border-radius:5px; position:relative; box-sizing:border-box; color:#000; font-weight:bold; line-height:42px; transition:0.3s;background:#fff; }
a.newsBoxLink:hover { background:#FED631; transition:0.3s; }
a.newsBoxLink::before { content: ""; display: block; position: absolute; top: 0; bottom: 0; right: 70px; margin: auto; width: 20px; height: 2px; background: #000; transition: .3s; }
a.newsBoxLink::after{ content: ""; display: block; position: absolute; top: 0; bottom: 0; right: 70px; margin: auto; width: 8px; height: 8px; border-left: 2px solid #000; border-bottom: 2px solid #000; transform: rotate(-135deg); transition: .3s; }
.wrap_grey2{width: 100%;background: url(../img/bg_grey2.png) repeat-x;background-size: 400px;height: 50px;}
.namibox_bottom{background: #f8f8f8;}

.footer_ill {
background: #f8f8f8;
}


/*マージンの調整*/
.margin0 { margin:0; }
.margintop0 { margin-top:0; }
.margintop10 { margin-top:10px; }
.margintop20 { margin-top:20px; }
.margintop50 { margin-top:50px; }
.marginbottom50 { margin-bottom:50px; }
.marginbottom0 { margin-bottom:0; }
.space50 { width:100%; height:50px; }
.float { float:left; }
.borderbottom0 { border-bottom:0; }
.center { width:100%; display:inline-block; text-align:center; }
.alignright{ text-align:right; }


/* メインビジュアル */
@keyframes boyon {
  0% {
    transform: scale(0) rotate(0deg);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
.top{position: relative;}
.top img{width: 100%;}
.top_bg{width: 100%;}
.top_title{position: absolute;width: 48vw;top: 19vw;right: 0;left: 0;margin: 0 auto;animation: boyon .7s ease-in-out 0.4s normal running both;}
.fukidashi{position: absolute;
  width: 16vw;
  top: 9vw;
  right: 31vw;
animation: boyon .7s ease-in-out 0.8s normal running both;}
.fukidashi img{animation: 2s yurayura infinite;animation-delay: 1s;}
.onde{position: absolute;
width: 80px;
top: 24vw;
left: 26vw;animation: boyon .5s ease-in-out 0.8s normal running both;}
@keyframes yurayura {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: rotate(5deg);
  }
}

.contents_kategori{margin-top: -5vw;}


.tag_bg { background: #f8f8f8;padding: 30px 0;}

/*検索窓*/
.center { width:100%; display:block; text-align:center; }
.kensakumado_in { width:650px; display:flex; margin:0 auto 50px auto; align-items: center;justify-content:space-between;}
.kensakumado_form { display:flex; justify-content:space-between; align-items:center; }
.kensakumado_button { background:#FED631; margin-left:20px; padding:10px 30px; border-radius:20px; font-weight:bold; font-size:16px; }
input[type="search"] {box-sizing: content-box;padding-left: 40px;height: 48px;
    width: 300px;
    border-radius: 24px;
    border: 1px solid #000;
    background: #fff url('../img/search03.png') 10px center no-repeat;
    transition: all 0.5s;
    text-align:left;}
  input[type="search"]:focus {
    background-color: #ffffff;
    border-color: #4d78b9;
    box-shadow: 0 0 5px 0 #4d78b9;
  }
  ::-webkit-input-placeholder { /* Chrome, Safari */
    color: #666666;
  }
  ::-moz-placeholder { /* Firefox */
    color: #666666;
  }
  :-ms-input-placeholder { /* IE */
    color: #666666;
  }


  /*ボタン*/
  .button_more{
    display:inline-block;
    background:#fff;
    height:38px;
    width: 190px;
    padding:10px 30px 10px 30px;
    text-align:center;
    color:#000;
    margin:5px auto 50px auto;
    border:1px solid;
    cursor:pointer;
    position: relative;
    text-decoration: none;
    border:2px solid #000;
    border-radius: 10px;
    display:flex; align-items: center;
}
.button_more::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    margin: auto;
    width: 20px;
    height: 2px;
    background: #000;
    transition: .3s;
}
.button_more::after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    margin: auto;
    width: 8px;
    height: 8px;
    border-left: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: rotate(-135deg);
    transition: .3s;
}
.button_more:hover::before{
    right: 10px;
    width: 30px;
}
.button_more:hover::after{
    right: 10px;
}


.footer_ill_wrap {background:#f8f8f8;}

/*お店の口コミのところのタイトル周り*/
.voice_wrap{background: #F8F8F8;display: flex;flex-direction: column;gap: 50px;}
.title_office{position: relative;margin-bottom: 0;padding: 0px 0 0px 0;}
.title_office svg{position: absolute;bottom: 0;width: 100%;z-index: -1;left: 0;right: 0;}


.contents_h2 { width:100%; margin:50px auto 0 auto; font-weight:bold; font-size:16px; }
.contents_p { width:100%; display:block; margin:20px auto 0 auto; }
.contents_p a { pointer-events:none; }


@media screen and (min-width: 740px and max-width: 1120px) {
 .ul_spot li { width:100%; }



}


@media screen and (max-width: 740px) {
  .PC{display:none}
  .SP{display:block;}

 .contents { width:95%; margin:0 2.5%; }
 .contents .cate{justify-content: space-between;}
 .contents .cate img { width:auto; height:80px;  }
 .contents .cate a { width:48%; height:auto; display:inline-block; text-align:center; padding:20px 0; margin:0px 0 20px 0;}
 .contents .cate_link  { width:80%; height:auto; display:inline-block; margin:0 10% 30px 10%; background: url(../img/memo_big.svg)no-repeat;padding-bottom:0px; }
 .ul_spot { flex-wrap:wrap; }
 .ul_spot li { width:100%; margin-bottom:50px; }
 .kensakumado_in { width:95%; display:flex; margin:0 auto 50px auto; align-items: center;justify-content:space-between;
  flex-wrap: wrap; text-align:center; }
 .kensakumado_in form { width:100%; text-align:center; justify-content: center;}
 .kensakumado_in span { width:100%; margin-bottom:20px; }
 .kensakumado_button { width:27.5%; margin-left:2.5%; padding:10px 0; box-sizing:border-box; }
 input[type="search"] { width: 70%; box-sizing:border-box; }
.title_img { width:auto; height:35px; }
 .slider .cate_link  {width: 90%;height: 51vh;display: inline-block;margin: 10px 5%;background: url(../img/memo_pc.svg)no-repeat;background-size: 100% 100%;}
}

@media screen and (max-width: 320px) {
  .slider .cate_link  {background-size: contain;background-position: center top;height: auto;}

}


  a.newsBoxLink { margin-top:0; }
  .slider {width:90%; height:auto; margin: 0 5% 0px 5%;}

.bread{margin-bottom: 0px;}
.namibox{background: none;padding-top: 0;}
.title_office{padding-top:0;}
.top {margin-bottom: 10px;}
  .spot_p{text-align:center;width: 90%;margin: 0 5% 30px 5%;}


}

@media screen and (max-width: 1120px) {
    .menu ul li .menu_spot_sp .menu_border { border-left:5px solid #FED631; }
    .menu ul li span.menu_spot_sp i.fa-plus { display:none; }
    .menu ul li .menu_spot_sub { display:block; height:auto; opacity:1; transition:0.3s; }
    .contents_h2 { margin:10px auto; }
    .contents_p { margin:10px auto 0 auto; }
    .contents_p a { pointer-events:auto; }
}


@media screen and (max-width: 320px){
  /* 直した1101 */
   /* .slider .cate_link  { width: 88%; height:51vh; display:inline-block;  margin:10px 6% 0 6%; background: url(../img/memo_pc.svg)no-repeat;
    background-size:contain;} */

    .slider .cate_link  { width: 90%; height:fit-content; display:inline-block;  margin:10px 5% 0 5%; background: url(../img/memo_pc.svg)no-repeat;
     background-size: 100% 100%;}

   .slider .cate_link div .sample_box {width:auto; height: auto; max-width: 100%; max-height: 120px; margin:0 auto 10px auto; overflow:hidden; }
   .flag { margin-bottom:0; }
   .flag .flag_1 { margin-bottom:10px; }/* 仁川 */
   .flag .flag_2 { margin-bottom:10px;}/* 門戸厄神 */
   .flag .flag_type { margin-bottom:10px;}


	  }