@charset "utf-8";

/* Fukuoka page redesign */

#contents{
    max-width:900px;
    margin:0 auto;
}

/* 見出しを福岡ページ専用に強める */
#contents .page_title{
    background:linear-gradient(90deg,#5a3b22,#8b6435);
    color:#fff;
    border:none;
    padding:16px 18px;
    margin:24px 0 18px;
    font-size:1.35em;
    box-shadow:0 3px 10px rgba(60,35,15,.18);
}

#contents .page_title:before{
    content:"";
    display:inline-block;
    width:7px;
    height:22px;
    background:#e6c27a;
    margin-right:10px;
    vertical-align:middle;
}

/* リード文 */
.area2_lead,
.area2_box{
    box-sizing:border-box;
    width:100%;
}


/* ボタン ここから */
.area2_btns{
    display:flex;
    gap:12px;
    margin:20px 0 26px;
}

.area2_btns a{
    flex:1;
    display:block;
    padding:12px 8px;
    background:linear-gradient(180deg,#fffaf0 0%,#f4e4c2 100%);
    border:1px solid #c7a66b;
    border-radius:5px;
    color:#4b2d1d;
    font-weight:bold;
    text-align:center;
    text-decoration:none;
    box-shadow:0 2px 5px rgba(0,0,0,.06);
}

.area2_btns a:hover{
    background:linear-gradient(180deg,#fffdf8 0%,#ecd3a6 100%);
}
/* ボタン ここまで */

/* 通常ボックス */
.area2_box{
    background:#fff;
    border:1px solid #d8c49c;
    border-radius:10px;
    padding:22px 24px;
    margin:22px 0 30px;
    line-height:2;
    box-shadow:0 5px 18px rgba(80,45,20,.08);
}

.area2_box p{
    margin:0 0 12px;
}

.area2_box p:last-child{
    margin-bottom:0;
}

.area2_box a{
    color:#7a431d;
    font-weight:bold;
}

/* エリアカード */
.area2_cards{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin:24px 0 34px;
}

.area2_card{
    display:block;
    min-height:140px;
    padding:22px 20px;
    background:linear-gradient(135deg,#fffdf8,#f3dfb3);
    border:1px solid #d1aa63;
    border-radius:12px;
    color:#4b2d1d;
    text-decoration:none;
    line-height:1.8;
    box-shadow:0 6px 18px rgba(70,40,15,.12);
    position:relative;
    overflow:hidden;
}

.area2_card:after{
    content:"AREA";
    position:absolute;
    right:-8px;
    bottom:-12px;
    font-size:2.8em;
    color:rgba(120,75,30,.08);
    font-weight:bold;
    letter-spacing:2px;
}

.area2_card strong{
    display:block;
    font-size:1.3em;
    margin-bottom:10px;
    color:#3c2316;
}

.area2_card strong:before{
    content:"";
    display:block;
    width:44px;
    height:4px;
    background:#9b6a2f;
    margin-bottom:12px;
}

.area2_card:hover{
    transform:translateY(-3px);
    box-shadow:0 9px 24px rgba(70,40,15,.18);
}

/* FAQ誘導 */
.area_faq_link{
    background:#fff7e6;
    border:1px solid #d8c49c;
    border-radius:8px;
    padding:14px;
    margin-top:14px;
}

.area_faq_link img,
.gray_bg_contact img{
    vertical-align:middle;
    margin-right:6px;
}

/* 予約ボックス */
.gray_bg_contact{
    background:#fcf8ec;
    border:2px solid #a97734;
    border-radius:12px;
    padding:22px 24px;
    margin:24px 0 32px;
    line-height:2;
    box-shadow:0 7px 22px rgba(80,45,20,.08);
}

.gray_bg_contact .red a{
    font-size:1.45em;
    font-weight:bold;
    color:#c40000;
    text-decoration:none;
}

/* スマホ幅調整 */
@media screen and (max-width: 640px){

    .area2_btns{
        display:flex;
        flex-direction:column;
        gap:10px;
    }

    .area2_btns a{
        width:100%;
        margin:0;
        box-sizing:border-box;
    }

    #container,
    #contents{
        width:94% !important;
        max-width:94% !important;
        margin-left:auto !important;
        margin-right:auto !important;
        box-sizing:border-box;
    }

    .area2_lead,
    .area2_box,
    .gray_bg_contact{
        width:100% !important;
        box-sizing:border-box;
    }

}
/* 福岡ページ専用ボタン */

.fukuoka_btn_wrap{

margin:30px 0;

}

.fukuoka_btn{

display:block;

background:#f8f3e4;

border:1px solid #c8b277;

border-radius:8px;

padding:22px;

margin-bottom:12px;

text-align:center;

font-size:1.15em;

font-weight:bold;

color:#5a3b22;

text-decoration:none;

transition:.25s;

box-sizing:border-box;

}

.fukuoka_btn:hover{

background:#efe4c3;

transform:translateY(-2px);

box-shadow:0 4px 10px rgba(0,0,0,.08);

}

.fukuoka_btn:after{

content:" ›";

font-size:1.2em;

margin-left:8px;

color:#b58b45;

}
/* 福岡ページ専用 横並びボタン */

.fukuoka_btn_wrap{
    display:flex;
    gap:12px;
    margin:30px 0;
}

.fukuoka_btn{
    flex:1;
    display:block;
    background:#f8f3e4;
    border:1px solid #c8b277;
    border-radius:8px;
    padding:20px 10px;
    text-align:center;
    font-size:1.05em;
    font-weight:bold;
    color:#5a3b22;
    text-decoration:none;
    box-sizing:border-box;
}

.fukuoka_btn:hover{
    background:#efe4c3;
}

.fukuoka_btn:after{
    content:" ›";
    font-size:1.2em;
    margin-left:8px;
    color:#b58b45;
}

/* スマホは縦並び */
@media screen and (max-width:640px){

    .fukuoka_btn_wrap{
        display:block;
    }

    .fukuoka_btn{
        margin-bottom:10px;
    }

}
.area-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  padding:0;
  margin:18px 0 0;
  list-style:none;
}

.area-grid li{
  background:#fff;
  border:1px solid #d8c8aa;
  padding:12px 16px;
  border-radius:4px;
  box-sizing:border-box;
}

.area-grid li:before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  background:#b89052;
  border-radius:50%;
  margin-right:10px;
  vertical-align:middle;
}
.hotel_photo{
    margin:0 0 18px;
    text-align:center;
}

.hotel_photo img{
    width:100%;
    max-width:760px;
    height:auto;
    border-radius:6px;
    display:block;
    margin:0 auto;
}
/* 福岡ページ ホテルリンク一覧 */

.hotel-link-list{
    list-style:none;
    margin:22px 0 0;
    padding:0;
}

.hotel-link-list li{
    margin:0;
    padding:0;
    border-bottom:1px solid #e2d5bb;
}

.hotel-link-list li:last-child{
    border-bottom:none;
}

.hotel-link-list a{
    display:block;
    padding:12px 8px;
    color:#743b12;
    text-decoration:none;
    line-height:1.7;
    box-sizing:border-box;
}

.hotel-link-list a:hover{
    background:#fff9ed;
    text-decoration:none;
}

.hotel-link-list img{
    width:auto;
    height:auto;
    margin-right:7px;
    vertical-align:middle;
}

.hotel-link-list strong{
    vertical-align:middle;
}