@charset "utf-8";


/*-------------------------------
    共通パーツ
-------------------------------*/

body {
    color: #333333;
    background-color: #f7f7f7;
    font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", yugothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
    font-size: 1.1em;
    line-height: 1.5;
  }
  
  section {
    padding: 30px 0;
  }
  
  .container, .page-container {
    width: 95%;
    margin: 0 auto;
  }
  
  a {
    text-decoration: none;
    color: #d64a4a;
  }
  
  a:hover {
    color: #af2c2c;
  }
  
  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  
  img {
    width: 100%;
  }

  .btn-center {
    display: inline-flex;
    justify-content: center;
  }
  
  #goto-page-top {
    position: fixed;
    bottom: 40px;
    right: 30px;
    font-size: 32px;
    line-height: 1;
    z-index: 99;
  }
  
  #goto-page-top a {
    background: #d64a4a;
    color: #fff;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
    text-decoration: none;
    width: 50px;
    height: 50px;
    padding: 9px 0;
    text-align: center;
    display: block;
    border-radius: 90px;
  }
  
  #goto-page-top a:hover {
    text-decoration: none;
    opacity: .5;
  }

  .page-right {
    margin: 20px;
  }

  .page-left {
    background-color: #fff;
    border-radius: 10px;
  }

  .mw-1200 {
    max-width: 1200px;
    margin: 0 auto;
  }

  .page-left .h2-box h2, .special .h2-box h2, .h3-box h3 {
    font-family: 'Sawarabi Mincho', serif;
    font-size: 1.5em;
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    padding: 0 70px;
  }
  
  .page-left .h2-box h2::before, .page-left .h2-box h2::after, .special .h2-box h2::before, .special .h2-box h2::after, .about-h1 h1::before, .about-h1 h1::after, .shop-list-h3 h3::before, .shop-list-h3 h3::after, .h3-box h3::before, .h3-box h3::after {
    position: absolute;
    content: url(https://ebaed1.claudeassets.com/20241214072414im_/https://ramenmap-fukuokashi-hakataku.com/img/logo-line.png);
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }
  
  .page-left .h2-box h2::before, .special .h2-box h2::before, .about-h1 h1::before, .shop-list-h3 h3::before, .h3-box h3::before {
    left: 0;
  }
  
  .page-left .h2-box h2::after, .special .h2-box h2::after, .about-h1 h1::after, .shop-list-h3 h3::after, .h3-box h3::after {
    right: 0;
  }

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

    /*-------------------------------
        共通パーツ
    -------------------------------*/
    .container {
      max-width: 1200px;
      width: 100%;
    }

    section {
      padding: 50px 0;
    }
    .pc-none {
      display: none;
    }
    #goto-page-top {
      bottom: 40px;
      right: 40px;
    }

    .index-contents {
      padding: 20px;
    }
  }

  @media screen and (min-width:950px) {
    .page-right {
      width: 30%;
    }

    .page-left {
      width: 70%;
    }

    .pc-flex {
      display: flex;
    }

    #goto-page-top {
      bottom: 100px;
      right: 20px;
    }
  }

  @media screen and (min-width:1200px) {
    #goto-page-top {
      right: calc(50% - 550px);
    }
  }




/*-------------------------------
    見出し
-------------------------------*/

.h2-box, .h3-box {
    display: flex;
    justify-content: center;
  }
  
  h2 {
    font-weight: 700;
  }
  
  h2 img {
    width: 100%;
    margin-bottom: 30px;
  }
  
  h4 {
    font-size: 1.2em;
  }
  
  



/*-------------------------------
    ヘッダーメニュー
-------------------------------*/
  
  header {
    z-index: 100;
    position: fixed;
    width: 100%;
    height: 60px;
    background-color: #000000;
  }
  
  .header-logo {
    text-align: center;
    display: flex;
    justify-content: center;
  }
  
  .header-logo a {
    position: relative;
    padding: 0 100px;
  }
  
  .header-logo a img {
    height: 40px;
    margin-top: 10px;
  }
  
  .header-logo a::before, .header-logo a::after {
    position: absolute;
    content: url(https://8e77af.claudeassets.com/20241214072414im_/https://ramenmap-fukuokashi-hakataku.com/img/logo-border.png);
    top: 20px;
  }
  
  .header-logo a::before {
    left: 0;
  }
  
  .header-logo a::after {
    right: 0;
  }
  
  @media screen and (min-width:950px) {

    header {
      position: fixed;
      z-index: 200;
      height: 100px;
      top: 0;
      left: 0;
    }
    header {
      position: fixed;
      z-index: 200;
      height: 100px;
    }
    .header-logo a img {
      height: 60px;
      margin-top: 20px;
    }
    .header-logo a::before, .header-logo a::after {
      top: 40px;
    }
    h2 img {
      width: auto;
    }
  }




/*-------------------------------
    フッターメニュー
-------------------------------*/
  
  footer {
    background-color: #000000;
    padding: 50px 0 30px;
  }
  
  .footer-nav ul {
    display: block;
    margin-left: 10px;
  }
  
  .footer-nav ul li {
    margin-bottom: 10px;
    font-weight: bold;
    color: #ffffff;
  }
  
  .footer-nav ul li ul {
    margin-top: 10px;
    margin-right: 10px;
    display: flex;
    flex-wrap: wrap;
  }
  
  .footer-nav ul li ul li {
    margin-left: 10px;
    font-weight: normal;
  }
  
  .footer-nav ul li a, .footer-nav ul li ul li a {
    color: #ffffff;
  }
  
  .footer-nav ul li a:hover, .footer-nav ul li ul li a:hover {
    color: #af2c2c;
  }
  
  .footer-twetter {
    margin-top: 70px;
  }
  
  .for-dm {
    background-color: #fff;
    border-radius: 5px;
    margin-top: 30px;
    height: auto;
  }
  
  .for-dm img {
    width: 100%;
  }
  
  .for-dm-topimg {
    border-radius: 5px 5px 0 0;
  }
  
  .for-dm-box {
    padding: 10px;
  }
  
  .for-dm-box h3 {
    color: #fff;
    background-color: #000;
    font-size: .9em;
    display: inline-block;
    padding: 5px;
    margin-bottom: 15px;
  }
  
  .twitter-dm-button {
    margin-top: 10px;
  }
  
  .for-dm-box dl {
    margin-top: 30px;
    font-size: 0.9em;
  }
  
  .for-dm-box dl dt {
    border-bottom: #000 3px solid;
    margin-bottom: 10px;
  }
  
  .for-dm-box dl dd {
    font-size: 0.9em;
  }
  
  .for-dm-box p {
    font-size: 0.9em;
    font-weight: bold;
  }
  
  .copy-right {
    margin-top: 30px;
    text-align: center;
    color: #bbbbbb;
  }

  @media screen and (min-width:768px) {
    .footer-twetter {
      width: 400px;
      margin: 0 auto;
    }
    
  }

  @media screen and (min-width:950px) {

    .footer-contents {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }

    .footer-nav {
      width: 35%;
    }

    .footer-twetter {
      margin-top: 0;
      width: 30%;
      display: flex;
    }
    .for-dm {
      margin-left: 30px;
      margin-top: 0;
    }
    .for-dm-box {
      padding: 15px;
    }

    .footer-koukoku {
      width: 30%;
    }
  }



/*-------------------------------
    パンくずリスト
-------------------------------*/
  
  .breadcrumb-section {
    margin-top: 0;
    padding-top: 80px;
  }
  
  .breadcrumb-section .page-content {
    width: 100%;
  }
  
  .breadcrumb li {
    font-size: 0.9em;
  }
  
  .breadcrumb li a {
    color: #707070;
    text-decoration: none;
  }
  
  .breadcrumb .active {
    color: #333333;
  }

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

    .breadcrumb-section {
      padding: 80px 20px 0;
    }
    .breadcrumb-section .container {
      padding: 0;
    }
    
  }

  @media screen and (min-width:1000px) {

    .breadcrumb-section {
      padding: 130px 20px 0;
    }
    .breadcrumb-section .container {
      padding: 0;
    }
    
  }



/***************************
    サイドバー
***************************/

/***************
    プロフィール
***************/

.profile {
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  background-color: #fff;
  text-align: center;
}

.profile .pro-img {
  width: 200px;
}

.profile .name {
  font-size: 26px;
  text-decoration: underline #D64A4A;
}

.profile .pro-text {
  font-size: 12px;
}




/***************
    ラーメンを探す
***************/

.search-box {
  padding: 20px 15px;
  background: #ffffff;
}

.page-search {
  background-image: url(https://9335e6.claudeassets.com/20241214072414im_/https://ramenmap-fukuokashi-hakataku.com/img/search-bgi.jpg);
  background-size: cover;
  padding-bottom: 20px;
  border-radius: 10px;
}

.page-search h2 {
  font-family: 'Sawarabi Mincho', serif;
  padding: 70px 0;
  margin-bottom: 0;
  color: #ffffff;
  font-weight: bold;
  text-shadow: 0px 0px 3px #333333;
}

.page-search h2::before, .page-search h2::after {
  content: none;
}

#search_form {
  margin-bottom: 90px;
  position: relative;
  width: 100%;
}

#sbox4 {
  height: 50px;
  width: 100%;
  padding: 0 20px;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 25px;
  outline: 0;
  background: #eee;
  font-size: 0.7em;
  border-style: none;
}

#sbtn4 {
  height: 50px;
  width: 50px;
  position: absolute;
  right: 0;
  top: 0;
  color: #707070;
  border: none;
  border-radius: 0 25px 25px 0;
  border-style: none;
}

#sbtn4 .fa-search {
  font-size: 20px;
  position: absolute;
  top: 30%;
  left: 25%;
}

#sbtn4:hover {
  color: #888;
}

.search-tag {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.search-tag li {
  margin-right: 5px;
  margin-bottom: 10px;
}

.search-tag li a {
  font-size: 0.8em;
  border: #d64a4a 1px solid;
  border-radius: 50px;
  padding: 5px 10px;
}

.search-tag li a:hover {
  color: #fff;
  background-color: #d64a4a;
}

.search-tag li a::before {
  content: "#";
}




/***************
    運営ポータル
***************/

.area-link {
  margin: 20px 0;
  padding: 20px;
  border-radius: 10px;
  background-color: #fff;
  text-align: center;
}

.area-link h2 {
  font-size: 1.5rem;
  padding-bottom: 20px;
}

.area-link .item {
  padding: 0 0 10px;
}







/***************
    喫煙マップ
***************/

  .kituen img {
    border-radius: 10px;
  }






/***************
    おすすめ記事
***************/

.osusume {
  padding: 20px;
  margin: 20px 0;
  border-radius: 10px;
  background-color: #fff;
  text-align: center;
}

.osusume h2 {
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.osusume li {
  padding-bottom: 10px;
  font-size: 14px;
}

.side-twitter {
  border: 1px solid #dddddd;
}



@media screen and (min-width:768px) {
  
  /*******
    サイドバー
  *******/
  .page-right {
    max-width: 400px;
    margin-left: 30px;
    margin: 0 auto;
  }
  
  .page-search {
    top: 150px;
    margin-bottom: 30px;
  }
}

@media screen and (min-width:1000px) {
  
  /*******
    サイドバー
  *******/
  .page-right {
    margin-left: 30px;
  }
  
}

/*
     FILE ARCHIVED ON 12:04:55 Aug 30, 2023 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 10:19:29 Oct 07, 2026.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.753
  exclusion.robots: 0.076
  exclusion.robots.policy: 0.062
  esindex: 0.01
  cdx.remote: 39.411
  LoadShardBlock: 269.556 (3)
  PetaboxLoader3.datanode: 78.905 (4)
  PetaboxLoader3.resolve: 306.819 (2)
  load_resource: 125.06
*/