/* =======================================

    Example CSS

    -----------------------------------------
    INDEX
    -----------------------------------------
    1.Base Structure

    2.Header
        2-1.Site Title
        2-2.Header Navi

    3.Globalnavi

    4.MainImage

    5.Topicpath

    6.Contents
    6-2.KASOUPAGE

    7.Footer


========================================== */


/* 1.Base Structure
========================================== */
/* 1-1.Body
    ---------------------------------------- */
body, html { background: url(../images/body_bg.png);}
body { width: 100%; font-size: 15px; color: #545454; line-height: 1.7; font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif; }
/* 1-3.commons
    ---------------------------------------- */
a:link, a:visited { color: #2C6FA5; text-decoration: none; }
a:hover { color: #3585C6; text-decoration: underline; }
a.opacity:hover img, a.opacity:active img { -moz-opacity: 0.7; opacity: 0.7; filter: alpha(opacity=70); }
img a { border: none; }
img.nofit { width: auto !important; }
.clear { clear: both; }
.over_hidden { overflow: hidden; }
.topmargin10 { margin-top: 10px !important; }
.topmargin20 { margin-top: 20px !important; }
.topmargin30 { margin-top: 30px !important; }
.topmargin40 { margin-top: 40px !important; }
.topmargin60 { margin-top: 60px !important; }
.bottommargin10 { margin-bottom: 10px !important; }
.bottommargin20 { margin-bottom: 20px !important; }
.bottommargin30 { margin-bottom: 30px !important; }
.bottommargin40 { margin-bottom: 40px !important; }
.bottommargin50 { margin-bottom: 50px !important; }
.bottommargin60 { margin-bottom: 60px !important; }
.price { color: #C09F47; font-size: 20px; font-weight: bold; font-family: Verdana, Helvetica, sans-serif; }
.gotop { text-align: right; margin: 20px 0 0 0; }
.border-top { border-top: 1px dotted #ccc; margin: 10px 0; padding: 10px 0; }
.border-bottom { border-bottom: 1px solid #555555; margin: 10px 0; padding: 10px 0; }
.unit { padding: 10px; overflow: hidden; }
.borderunit { padding: 10px; border-radius: 3px; border: 3px solid #ccc; }
.aside { margin: 5px; padding: 10px; background: #eee; font-size: 12px; border-radius: 3px; }
.borderunit-gold { border: 1px solid #B3A439; margin: 10px 0; padding: 10px; background: #fff; border-radius: 3px; }
.borderunit-white { border: 0px solid #fff; margin: 10px 0; padding: 10px; background: #fff; border-radius: 3px; }
/* 1-4.h
    ---------------------------------------- */
h1 { color: #876827; font-size:12px;}
#kasou h1{ width: 980px; margin:auto; }
h2 { color: #876827; font-size: 20px; line-height: 1.7; font-weight: normal; text-align:center; padding: 0 0 10px 0; margin: 50px 0 0 0; }
h2 small { color: #333; font-size: 12px; font-weight: normal; }
h3 { display:block; font-size: 38px; color: #876827; line-height: 1; margin: 80px auto 40px; text-align:center; font-family: Georgia, 'Droid Sans', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho ProN', 'MS P 明朝', 'MS PMincho', serif;}
h3 small { font-size: 18px; color: #CC0000; line-height: 1; }
h3.date { display:block; font-size: 38px; color: #876827; line-height: 1; margin: 10px auto 40px; text-align:left; font-family: Georgia, 'Droid Sans', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho ProN', 'MS P 明朝', 'MS PMincho', serif;}
h4 { font-size: 24px; color: #EC8B66; line-height: 1; margin: 50px auto 20px; background:url(../images/h4_bg.png) repeat-x top left; padding:15px 0 0 0;}
h5 { font-size: 20px; color: #876827; line-height: 1; font-weight: bold; }
h6 { font-size: 12px; color: #876827; line-height: 1; margin: 0px; font-weight: bold; }
/* 1-5.ol
    ---------------------------------------- */
/*ol*/
ol li { list-style-type: decimal; margin-left: 20px; }
/*===================================*/
/*dl*/
dl { overflow: hidden; }
dl dt { color: #009C86; font-weight: bold; background: url(../images/point_blue.jpg) no-repeat left center; padding: 0 0 0 10px; display:block; float:left;}
dl dd {display:block; padding: 0 0 0 8px;}
dl dd.line{ border-bottom: 1px dashed #000; clear:both; padding: 10px 0 0 0; margin: 0 0 10px 0;}
/*===================================*/
/*ul*/
ul.list { }
ul.list li { list-style-position: inside; list-style: disc; margin: 0 0 0 20px; }
.reccomend { overflow:hidden;}
.reccomend li{ font-size:16px; color:#ffffff; background:#F19899; list-style:none; display:block; border-radius:5px; width: 29%; margin:0 1% 0 0 ; float:left; text-align:center; padding:14px;}
/* 1-8.fonts
    ---------------------------------------- */
.c_black { color: #000; }
.c_white { color: #fff; }
.c_red { color: #CC0000; }
.c_pink { color: #E68D8F; }
.c_yellow { color: #F9BE35; }
.c_brown { color: #736A39; }
.c_blue { color: #4D7ABA; }
.c_bluelight { color: #88C7D1; }
.c_gray666 { color: #666; }
.c_gray999 { color: #999; }
.c_red_back { background: #F55127; color: #fff; padding: 5px; margin: 0 5px; border-radius: 3px; }
.f9 { font-size: 9px; }
.f10 { font-size: 10px; }
.f11 { font-size: 11px; }
.f12 { font-size: 12px; }
.f14 { font-size: 14px; }
.f16 { font-size: 16px; }
.f18 { font-size: 18px; line-height: 1.5; }
.f20 { font-size: 20px; line-height: 1.5; }
.f24 { font-size: 24px; line-height: 1.5; }
.f32 { font-size: 32px; line-height: 1.5; }
.f42 { font-size: 42px; line-height: 1.5; }
.fontbold { font-weight: bold; }
.center { text-align: center; }
.right { text-align: right; }
.left { text-align: left; }
.bgblue { background-color: #DDEEFF; }
.bgofwhite { background-color: #E8E3C4; }
.bggray { background-color: #eee; }
.mincho { font-family: Georgia, 'Droid Sans', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho ProN', 'MS P 明朝', 'MS PMincho', serif; }
.reed { margin: 10px 0 0 0; line-height: 1.4; color: #876827; text-align:center; font-size: 20px;}
.reed b {
    color: #e20b0b;
}

h2#title{ background: url(../images/kasou_h2.jpg) no-repeat center; background-size:cover; color: #ffffff; font-size: 2.0em; line-height: 1.5; letter-spacing: 1.5px; padding: 80px 0; margin: 0 0 0 0; text-align:center;}
h2#title img{ display:block; margin: auto;}
h2#title small{ color: #ffffff; display:block; font-size:0.5em;}


/* 2.Header
========================================== */
/* header */
/* This rule is ONLY for the front page header */
.home header {
    width: 100%;
    min-height:970px;
    position: relative;
    background-image:url(../images/main_image.jpg); /* HOMEページのメイン画像 */
    background-size: cover;
    background-repeat:no-repeat;
    background-position: top center;
}
/* This rule is for sub-page headers */
header#kasou {
    min-height:140px;
    background: #ffffff; /* デフォルトの背景色 */
    background-size: cover; /* 画像をカバー表示 */
    background-repeat: no-repeat;
    background-position: center center;
}

/* ★★★ 各ページのヘッダー画像をここで設定 ★★★ */
/* 各ページのbodyにWordPressが付与するクラス（例: .page-id-XX, .page-template-default, .single-post など）を利用します */

/* 例: Salonページ (page-id-XXは実際のIDに置き換えてください) */
body.page-id-2 header#kasou { /* 例: SalonページのIDが2の場合 */
    background-image: url('../images/header_salon.jpg'); /* Salonページのヘッダー画像 */
}

/* 例: Counselingページ */
body.page-id-3 header#kasou { /* 例: CounselingページのIDが3の場合 */
    background-image: url('../images/header_counseling.jpg');
}

/* 例: Menuページ */
body.page-id-4 header#kasou { /* 例: MenuページのIDが4の場合 */
    background-image: url('../images/header_menu.jpg');
}

/* 例: Style Galleryページ */
body.page-id-5 header#kasou { /* 例: Style GalleryページのIDが5の場合 */
    background-image: url('../images/header_style_gallery.jpg');
}

/* 例: Staffページ */
body.page-id-6 header#kasou { /* 例: StaffページのIDが6の場合 */
    background-image: url('../images/header_staff.jpg');
}

/* 例: Blog/Newsページ (ブログのトップページや投稿詳細ページなど) */
/* ブログのトップページ (固定ページをブログページに設定している場合) */
body.blog header#kasou, body.archive header#kasou {
    background-image: url('../images/header_blog.jpg'); /* ブログページのヘッダー画像 */
}
/* 個別の投稿ページ (single-postクラスが付与されます) */
body.single-post header#kasou {
    background-image: url('../images/header_blog.jpg'); /* 個別記事もブログと同じ画像 */
}


/* 3.Globalnavi
========================================== */

/* navの幅を広げます */
nav{ overflow:hidden; width:600px; /* ★★★ ここを調整： 420px -> 600px (新gnav幅 + 余裕) ★★★ */ margin:auto;}

#hlogo { float:left; width: 160px; padding:10px 0 0;}

ul#gnav {
    float: none;
    width: 586px; /* ★★★ ここを調整： (80px * 5) + (161px * 1) + (5px * 5) = 400 + 161 + 25 = 586px ★★★ */
    margin: 0 auto;
    padding:40px 0 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
}
ul#gnav li {
    float: none;
    display: block;
    margin: 0;
}


/* 通常時のナビゲーションリンクのスタイル (デフォルトのボタンサイズ) */
ul#gnav li a {
    display: block;
    width: 80px;  /* ★★★ 通常のボタン幅を1.5倍に： 53px -> 80px ★★★ */
    height: 62px; /* ★★★ 通常のボタン高さを1.5倍に： 41px -> 62px ★★★ */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    line-height: 0;
    font-size: 0;
    margin-right: 5px;
}
/* 最後のli要素には右マージンを適用しない */
ul#gnav li:last-child a {
    margin-right: 0;
}

/* ★★★ スタイルギャラリーのボタンのみ横幅を1.5倍に変更する ★★★ */
ul#gnav li:nth-child(5) a {
    width: 161px;  /* ★★★ スタイルギャラリーのボタン幅を1.5倍に： 107px -> 161px ★★★ */
    height: 62px; /* 高さはそのまま (41px -> 62px) */
}


/* 通常時のナビゲーションのimgタグのスタイル */
ul#gnav li a img.button {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    visibility: visible;
}

/* ★★★ スタイルギャラリーのimgタグのみ横幅を1.5倍に変更する ★★★ */
ul#gnav li:nth-child(5) a img.button {
    width: 161px; /* ★★★ スタイルギャラリーの画像の幅を1.5倍に： 107px -> 161px ★★★ */
    height: 62px; /* 高さはそのまま (41px -> 62px) */
}


/* ナビゲーションのアクティブな項目に対する画像切り替え (デフォルトのボタンサイズ) */
ul#gnav li.current-page a {
    display: block;
    width: 80px;  /* ★★★ 通常のアクティブボタン幅を1.5倍に： 53px -> 80px ★★★ */
    height: 62px; /* ★★★ 通常のアクティブボタン高さを1.5倍に： 41px -> 62px ★★★ */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    line-height: 0;
    font-size: 0;
    margin-right: 5px;
}
/* 最後のli要素には右マージンを適用しない */
ul#gnav li.current-page:last-child a {
    margin-right: 0;
}

/* ★★★ スタイルギャラリーのアクティブなボタンのみ横幅を1.5倍に変更する ★★★ */
ul#gnav li:nth-child(5).current-page a {
    width: 161px;  /* ★★★ スタイルギャラリーのアクティブボタン幅を1.5倍に： 107px -> 161px ★★★ */
    height: 62px; /* 高さはそのまま (41px -> 62px) */
}


/* アクティブな<li>内の<img>タグを完全に非表示にし、スペースを占有させないように修正 */
ul#gnav li.current-page a img.button {
    display: none;
}


/* 各アクティブページの背景画像を定義 */
/* 現在のパスはlayouts.cssからimagesへの相対パスです。必要に応じて調整してください。 */
ul#gnav li:nth-child(1).current-page a { /* Home (gnav_01_on.png) */
    background-image: url('../images/gnav_01_on.png');
}
ul#gnav li:nth-child(2).current-page a { /* Salon (gnav_02_on.png) */
    background-image: url('../images/gnav_02_on.png');
}
ul#gnav li:nth-child(3).current-page a { /* Counseling (gnav_03_on.png) */
    background-image: url('../images/gnav_03_on.png');
}
ul#gnav li:nth-child(4).current-page a { /* Menu (gnav_04_on.png) */
    background-image: url('../images/gnav_04_on.png');
}
ul#gnav li:nth-child(5).current-page a { /* Style Gallery (gnav_05_on.png) */
    background-image: url('../images/gnav_05_on.png');
}
ul#gnav li:nth-child(6).current-page a { /* Staff (gnav_06.png) */
    background-image: url('../images/gnav_06.png'); /* Staffページのアクティブ画像もgnav_06_on.pngがあれば変更してください */
}

ul#hicon{ float:left; width:150px; overflow: hidden; padding:40px 0 0;}
ul#hicon li { float: right; display: block; margin: 0 0 0 20px; }



/* 4.mainimages
========================================== */
#main_text { width:508px; height:421px; padding:10px 0 0 0; margin:auto; background-image: url(../images/main_text.png);  background-position:center center; background-repeat:no-repeat; text-align:center;}

#main_text h1{ display:block; width: 200px; margin:auto; color:#1DB290; text-align: center; padding: 330px 0 0 0;}


/* 4.mainimages----------161101追加
========================================== */

#top_tel{
    display: block;
    padding:10px;
    text-align: center;
    margin: auto;
    color:#7a5b1a;
}

/* 5.Footer
========================================== */
footer { width: 100%; background: url(../images/footer_bg.jpg); margin: 0 0 0 0; padding: 40px 0; color:#575748; font-size:12px;}

#footer_bg{ width:980px; margin:auto; overflow:hidden;}
#footer_bg .footerlogo {width: 90px; float:left;}
#footer_bg .footerinfo {width: 320px; float:left;}
#footer_bg .footernav {width: 570px; float:right;}
#footer_bg .footernav ul { overflow:hidden;}
#footer_bg .footernav ul li{ display: block; float:right; border-right:1px dashed #969696;}
#footer_bg .footernav ul li a{ display: block; padding: 25px 10px; color:#575748;}



#copy { padding: 10px 0;}
#copy p { width: 100%; color:#686859; display: block; margin: auto; font-size: 11px; text-align:center;}

#page-top { width:100%; text-align:right;}

/* 6.TOP Contents
========================================== */

#top_greeting { background:url(../images/top_greeting_bg1.png) no-repeat center center; width: 100%; min-height:514px; padding: 40px 0;}
#top_greeting p{ display:block; padding:210px 0 30px 0; width:100%; text-align:center; color:#856626;}
#top_greeting .top_greeting_btn{ width:100%; height:41px; text-align:center;}

#top_greeting1 { background:url(../images/top_greeting_bg1-1.png) no-repeat top center; width: 100%; min-height:514px;
    margin-top: 40px;}
#top_greeting1 p{ display:block; padding:210px 0 30px 0; width:100%; text-align:center; color:#856626;}
#top_greeting1 .top_greeting_btn{
    position: relative;
    background:url(../images/top_greeting_bg1-2.png) no-repeat top center;
    width:100%;
    height:254px;
    text-align:center;
    margin-bottom: 40px;
    margin-top: -50px;}
#top_greeting1 .top_greeting_btn img{
    margin-top: 70px;
    }

#top_cont_box3_bg { padding: 50px 0; background-image: url(../images/top_info_bg.jpg); background-size:cover; background-repeat:no-repeat;  background-position:top center;}
#top_cont_box3_bg .top_info_ttl{ width:980px; margin:auto; padding: 0  0 40px 0;}
#top_cont_box3_bg #top_cont_box3 {width: 900px; margin:auto; background: rgba(255,255,255,0.9); padding: 20px 40px;}
#top_cont_box3_bg #top_cont_box3 dl dt{ margin:0 10px 0 0;}

#top_cal { background:url(../images/top_cal_bg.png) repeat-x bottom left; padding:20px 0 60px;}
#top_cal_box{ width:980px; margin:auto;}
#top_cal_box >.ttl{ margin:40px 0;}
#top_cal_box caption{ text-align:center; font-family: Georgia, 'Droid Sans', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho ProN', 'MS P 明朝', 'MS PMincho', serif; font-size:34px; line-height:1;}
#top_cal_box caption p.small{ font-size:15px; line-height:1;}
#top_cal_box td:nth-child(7n){ border-right:0px dashed #333 !important; }
#top_cal_box .tll { border-bottom: 1px solid #000000;}
#top_cal_box td.holiday { background:url(../images/top_cal_yasumi.png) no-repeat center center;}


#topics{ background:url(../images/top_news_bg.jpg);}
#topics_inner{ width:980px; margin:auto; padding:20px 0 40px;}
#topics_inner .ttl{ text-align:center;}
#topics_inner .listbtn{ text-align: right;}

article .news_gumi { overflow:hidden; widht: 100%; padding: 10px 0 10px 0; border-bottom:1px dashed #000000;}
article ul.sellect80 { float:left; width: 70px; height:70px; padding: 0 0 0 10px; display:block; margin: 0 0 0 0;}
article .frame{ display:block; width: 70px; height:70px; overflow:hidden; background:#eeeeee;}
article .frame img{ width: 100%;}
article ul.news_right { float:left; display:block; margin: 0 0 0 10px;}
article .daytime { color:#876827;}
article a:link,#topics a:visited { color:#000000; text-decoration: none; }
article a:hover { color:#000000;text-decoration: underline; }
article a.opacity:hover img,#topics a.opacity:active img { -moz-opacity: 0.7; opacity: 0.7; filter: alpha(opacity=70); }
article .ttl{ text-align:center; margin: 0 0 20px 0;}

.topics_photo{ max-width:100%;}

#bnrarea { width: 980px; margin:auto; padding: 20px 0 0 0 ;}
#bnrarea .ttl { color:#C19537; font-family: Georgia, 'Droid Sans', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho ProN', 'MS P 明朝', 'MS PMincho', serif; border-bottom:1px solid #C19537; background:url(../images/top_bnrarea_ttl.png) no-repeat left center; padding: 0 0 0 15px; margin:10px 0;}
#bnrarea .bnrimg{ text-align:center;}
#bnrarea p{ color:#C19537; text-align:center; margin:10px 0 0 0;}

/* 7.Contents
========================================== */

section#contents{ width: 980px; margin: 10px auto 40px;}


.voice_box { margin: 0 0 10px 0; background:#FFFFFF; border-radius:5px; padding: 20px; color: #E68D8F;}
.name { font-weight:bold; font-size:12px; text-align:right;}

.ttl{ font-size:20px; color:#876827; margin:10px 0;}
.ttl2{ background:#876827; color:#ffffff; padding:2px 5px;}

.style .span4{ background:#eee;}
.style .span4 p{ padding: 2px 10px;}

.staffname{ font-size:32px; margin:10px 0 0; text-align:right;}
.staffname2{ font-size:32px; margin:10px 0 0;}
.staffname small,.staffname2 small{ display:block; font-size:16px;}
.staff th, .staff td{ border-right: 0px dashed #333 !important;}

#anshin10 {display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
flex-wrap: wrap;
    justify-content:space-between;}
#anshin10 .anshin_box{ border-radius:5px; border: 1px solid #C19537; padding: 30px 4%; width: 41%; margin: 15px 0 0 0;}
#anshin10 .anshin_box:nth-child(even){}
#anshin10 .anshin_box .anshin_ttl { overflow: hidden;}
#anshin10 .anshin_box .num{ background:#C19537; border-radius:50%; width:70px; height: 70px; color:#ffffff; float:left;}
#anshin10 .anshin_box .num span{ display:block; padding: 15px 10px 0; text-align: center; margin: 0; font-size:42px; line-height:1;}
#anshin10 .anshin_box .ttl_text { display:block; float:left; padding: 20px 0 0 5px; font-size:22px; width: 300px; color:#C19537; line-height:1;}
#anshin10 .anshin_box .text { display:block; margin:20px 0 0 0;}

#platinum {}
#platinum .platinum_box{ border-bottom: 1px solid #C19937; margin:0 0 20px 0; padding: 0 0 20px 0; display: flex;flex-flow: row wrap;justify-content:space-between;}
#platinum .platinum_box .naiyou{ width:50%;}
#platinum .platinum_box .image{ width:50%;}
#platinum .platinum_box .platinum_ttl { overflow: hidden;}
#platinum .platinum_box .num{ border: 1px solid #856626; border-radius:50%; width:70px; height: 70px; color:#856626; float:left;}
#platinum .platinum_box .num span{ display:block; padding: 15px 10px 0; text-align: center; margin: 0; font-size:42px; line-height:1;}
#platinum .platinum_box .ttl_text { display:block; float:left; padding: 15px 0 0 5px; font-size:22px; width: 400px; color:#856626; line-height:1.5; font-family: Georgia, 'Droid Sans', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho ProN', 'MS P 明朝', 'MS PMincho', serif;}
#platinum .platinum_box .text { clear:both; padding: 0 15px 0 70px; display:block; margin:20px 0 0 0; color:#856626;}

/*--------------------------------
headspaFlow
--------------------------------*/
#headspaFlow .platinum_box{ border-bottom: 1px solid #C19537; margin:0 0 20px 0; padding: 0 0 20px 0; display: flex;flex-flow: row wrap;justify-content:space-between;}
#headspaFlow .platinum_box .naiyou{ width:50%;}
#headspaFlow .platinum_box .image{ width:50%;}
#headspaFlow .platinum_box .platinum_ttl { overflow: hidden;}
#headspaFlow .platinum_box .num{ border: 1px solid #856626; border-radius:50%; width:70px; height: 70px; color:#856626; float:left;}
#headspaFlow .platinum_box .num span{ display:block; padding: 15px 10px 0; text-align: center; margin: 0; font-size:42px; line-height:1;}
#headspaFlow .platinum_box .ttl_text { display:block; float:left; padding: 15px 0 0 5px; font-size:22px; width: 400px; color:#856626; line-height:1.5; font-family: Georgia, 'Droid Sans', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho ProN', 'MS P 明朝', 'MS PMincho', serif;}
#headspaFlow .platinum_box .text { clear:both; padding: 0 15px 0 70px; display:block; margin:20px 0 0 0; color:#856626;}

/*---------------------------------
20151203追記
---------------------------------*/
#top_cont_box3 dd{
    padding-left:4em;
}

#map{
    width:100%;
    height:260px;
}
iframe.map{
    width:100%;
    height:260px;
}

/*---------------------------------
20160105追記
---------------------------------*/
.pageBtn{
    text-align:center;
}

.pageBtn a{
    display:inline-block;
    padding:8px 12px;
    background:#876827;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    color:#ffffff;
}

.pageBtn a:hover{
    background:#fff;
    color:#876827;
    text-decoration:none;
}

/*---------------------------------
20160426追記
---------------------------------*/
#topBanner{
    width:650px;
    margin:0 auto 30px;
    text-align:center;
    letter-spacing:-.4em;
}

#topBanner .ba02{
    width:100%;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    letter-spacing:normal;
    margin: 0 auto;
}

#topBanner .ba02 a{
    display:block;
    width:100%;
    -webkit-box-sizing:border-box;
    padding:15px 0;
    box-sizing:border-box;
    background:#866726;
    -webkit-border-radius:10px;
    border-radius:10px;
    color:#fff;
    margin:0 auto;
}

#topBanner .ba01{
    width:100%;
}

#topBanner .ba01 a img{
    margin:0 auto;
    -webkit-border-radius:10px;
    border-radius:10px;
    margin-bottom:10px;
}

#topBanner .ba01 a:hover{
    opacity: 0.7;
}


/* 161227  追加*/
#top_tel p{
    display: inline-block;
    width: 280px;
    vertical-align: top;
}

.style_h{
    min-height: 930px !important;
}
.reserve{
    margin: 30px auto;
    text-align: center;
}
.reserve_li{
    text-align: center;
    margin: 10px auto 30px;
}
.reserve_li li{
    display: inline-block;
    vertical-align: top;
    width: 320px;
}


/* 20170329追加 */
.menu th {
    width:85%;
    text-align:left;
}
.menu td {
    width:15%;
}

.menu .table-striped th span {
    font-size:0.8em;
    font-weight: normal;
    color:#fff;
    margin:5px 5px 0 0;
    padding:1px 5px;
    border-radius: 2px;
    background:#EC8B66;
    display:inline-block;
}
.menu .table-striped th span:first-of-type {
    background:#876827;
}


/* 180507 追記 */

.circle-bnr ul{
display:flex;
display:-webkit-flex;
-webkit-flex-wrap: wrap;
flex-wrap:wrap;
justify-content:center;
-webkit-justify-content:center;
}

.circle-bnr li{
    margin:  25px;
}

.top-circle-bnr{
    margin-top: 30px;
    margin-bottom: -15px;
}

.circle-bnr li a:hover{
    opacity: .7;
}

.menu-double-bnr{
    text-align: center;
    margin: 60px auto;
}
.menu-double-bnr li{
    display: inline-block;
    margin: 0 15px;
    list-style: none;
}

.menu-double-bnr a{
    height: auto;
    width: 100%;
    padding: 10px 15px;
    background: #000;
    border-radius: 3px;
    text-decoration: none;
    background: #1DB290;
    color: #fff;
    font-size: 1.05em;
    letter-spacing: .05em;
}

.menu-double-bnr + .circle-bnr{
    margin-top: -30px;
}



/* 20181102 追記 */
.ekitenBox{
width:100%;
}
.ekitenBox li >div{
width:50%;
float: left;
padding: 60px 0;
}
.bg-wht{
background: #fff;
}
.bg-gry{
background:#eeeeee;
}


/* 240509 追記 */
.style-gallery * {
    box-sizing: border-box;
}

.style-gallery-title {
    letter-spacing: .05em;
}

.style-gallery-container {
    max-width: 700px;
    margin: auto;
    overflow: hidden;
}

.style-gallery-wrap {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -25px -25px 0;
}

.style-gallery-item {
    width: 33.33333%;
    padding: 0 25px 25px 0;
}

.staff-reserve-btn {
    text-align: center;
}

.staff-reserve-btn a {
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    padding: 10px 15px;
    border-radius: 3px;
    text-decoration: none;
    background: #1DB290;
    color: #fff;
    font-size: 1.05em;
}

.page-nav * {
    box-sizing: border-box;
}

.page-nav {
    display: flex;
    justify-content: center;
}

.page-nav:first-of-type {
    margin-top: 80px;
}

.page-nav:last-of-type {
    margin-top: 40px;
}

.page-nav li {
    margin: 0 5px;
}

.page-nav a {
    display: block;
    padding: 10px 15px;
    line-height: 1.4;
    background: #876827;
    color: #fff;
    border: 1px solid #876827;
    border-radius: 4px;
}

.page-nav a:hover {
    color: #876827;
    border-color: #ddd;
    background-color: #eee;
    text-decoration: none;
}


/* ===============================================
    ブログカードのスタイル (トップページ)
    =============================================== */

/* 「#topics_inner」を追加して、スタイルの優先順位を上げる */
#topics_inner .blog-card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  overflow: hidden;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  text-align: left; /* 中央揃えを解除 */
}

#topics_inner .blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

#topics_inner .blog-card a.card-link {
  text-decoration: none;
  color: #333;
  display: block;
}

#topics_inner .blog-card .card-image img {
  width: 100%;
  height: auto;
  display: block;
}

#topics_inner .blog-card .card-content {
  padding: 15px;
}

/* h3の全般的なスタイルを上書きする */
#topics_inner .blog-card .card-title {
  font-size: 16px;
  font-weight: bold;
  font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif; /* 基本のフォントに戻す */
  text-align: left; /* 中央揃えを解除 */
  color: #545454;
  margin: 5px 0 0 0;
  line-height: 1.4;
  display: block;
}

#topics_inner .blog-card .card-date {
  font-size: 12px;
  color: #888;
}

/* ===============================================
    ブログ一覧ページのグリッドレイアウト（最優先）
    =============================================== */

/*
 * !important を使い、他のスタイルを強制的に上書きします。
 * また、既存の #contents ID をセレクタに追加して優先度を上げます。
*/

/* 全体のコンテナの幅を調整 */
#contents #blog-page-container {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* カードを横並びにするためのコンテナ */
#contents .blog-grid-row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: -15px !important;
  margin-right: -15px !important;
}

/* 個々のカードの幅と隙間を定義 */
#contents .blog-grid-item {
  box-sizing: border-box !important;
  width: 33.3333% !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  margin-bottom: 30px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* カード全体の高さを100%にする */
#contents .listing-item {
    height: 100% !important;
}

/* カード画像の高さを固定 */
#contents .listing-item .image {
    height: 200px !important;
    object-fit: cover !important;
}

/* カードタイトルのスタイル */
#contents .listing-item h4.title {
    font-size: 16px !important;
    text-align: left !important;
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif !important;
}


/* スマホ表示（レスポンシブ対応） */
@media (max-width: 980px) {
    /* ここに980px以下のスタイルを記述します（これまでのレスポンシブ対応部分） */
    /* nav の幅はモバイルでは100%に維持し、画像サイズも適切な比率に縮小 */
    nav {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    #hlogo {
        float: none;
        width: 100%;
        text-align: center;
        padding: 10px 0;
    }

    ul#gnav {
        float: none;
        width: 100%; /* モバイルでは幅を100%に */
        padding: 10px 0 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    ul#gnav li {
        float: none;
        margin: 5px 8px; /* モバイルでは適度なマージンを維持 */
        flex-shrink: 0;
    }

    /* レスポンシブ時のナビゲーションリンクのサイズ調整 (デフォルトのボタンサイズ) */
    ul#gnav li a {
        width: 80px;  /* 通常のボタン幅 */
        height: 62px; /* 通常のボタン高さ */
        background-size: contain;
    }

    /* ★★★ レスポンシブ時もスタイルギャラリーのボタンのみ横幅を1.5倍に変更する ★★★ */
    ul#gnav li:nth-child(5) a {
        width: 161px; /* スタイルギャラリーのボタン幅を1.5倍に */
        height: 62px; /* 高さはそのまま */
    }


    ul#hicon {
        float: none;
        width: 100%;
        padding: 10px 0;
        text-align: center;
    }

    ul#hicon li {
        float: none;
        display: inline-block;
        margin: 0 10px;
    }

    #main_text {
        width: 90%;
        background-size: contain;
        height: auto;
        padding-top: 50%;
    }

    #main_text h1 {
        width: 90%;
        padding-top: 15%;
        font-size: 10px;
    }

    .home header {
        min-height: auto;
        background-size: contain;
        background-position: top center;
    }

    #top_tel {
        padding: 5px;
    }

    #top_tel p {
        width: auto;
        display: block;
        text-align: center;
    }

    #top_tel img {
        width: 80%;
        max-width: 250px;
        height: auto;
    }

    #footer_bg {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    #footer_bg .footerlogo,
    #footer_bg .footerinfo,
    #footer_bg .footernav {
        float: none;
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }

    #footer_bg .footernav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    #footer_bg .footernav ul li {
        float: none;
        border-right: none;
        border-bottom: 1px dashed #969696;
        width: 100%;
        text-align: center;
    }
    #footer_bg .footernav ul li:last-child {
        border-bottom: none;
    }
    #footer_bg .footernav ul li a {
        padding: 10px;
    }


    /* 各セクションの幅調整 */
    section#contents {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    #top_cont_box3_bg .top_info_ttl {
        width: 100%;
        padding: 0 10px 20px;
        box-sizing: border-box;
    }

    #top_cont_box3_bg #top_cont_box3 {
        width: 95%;
        padding: 15px;
    }

    #top_cal_box {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #top_cal_box table {
        width: 100%;
        min-width: 320px;
        border-collapse: collapse;
    }
    #top_cal_box caption {
        font-size: 1.2em;
        white-space: nowrap;
    }
    #top_cal_box caption p.small {
        font-size: 0.8em;
    }
    #top_cal_box th,
    #top_cal_box td {
        font-size: 0.9em;
        padding: 5px;
        white-space: nowrap;
    }
    #top_cal_box td.holiday {
        background-size: 70% auto;
    }

    #topics_inner {
        width: 100%;
        padding: 20px 10px;
        box-sizing: border-box;
    }

    #bnrarea {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .reccomend li {
        width: 48%;
        margin: 0 1% 10px;
    }

    #anshin10 .anshin_box {
        width: 100%;
        padding: 20px 5%;
        margin: 10px 0;
    }
    #anshin10 .anshin_box .num {
        width: 50px;
        height: 50px;
    }
    #anshin10 .anshin_box .num span {
        font-size: 30px;
        padding: 8px 5px 0;
    }
    #anshin10 .anshin_box .ttl_text {
        width: calc(100% - 60px);
        font-size: 18px;
        padding: 10px 0 0 5px;
    }
    #anshin10 .anshin_box .text {
        padding: 0;
    }

    #platinum .platinum_box .naiyou,
    #platinum .platinum_box .image {
        width: 100%;
    }
    #platinum .platinum_box .image {
        margin-top: 20px;
    }
    #platinum .platinum_box .num {
        width: 50px;
        height: 50px;
    }
    #platinum .platinum_box .num span {
        font-size: 30px;
        padding: 8px 5px 0;
    }
    #platinum .platinum_box .ttl_text {
        width: calc(100% - 60px);
        font-size: 18px;
        padding: 10px 0 0 5px;
    }
    #platinum .platinum_box .text {
        padding: 0;
    }

    #headspaFlow .platinum_box .naiyou,
    #headspaFlow .platinum_box .image {
        width: 100%;
    }
    #headspaFlow .platinum_box .image {
        margin-top: 20px;
    }
    #headspaFlow .platinum_box .num {
        width: 50px;
        height: 50px;
    }
    #headspaFlow .platinum_box .num span {
        font-size: 30px;
        padding: 8px 5px 0;
    }
    #headspaFlow .platinum_box .ttl_text {
        width: calc(100% - 60px);
        font-size: 18px;
        padding: 10px 0 0 5px;
    }
    #headspaFlow .platinum_box .text {
        padding: 0;
    }

    /* 20151203追記 */
    #top_cont_box3 dd{
        padding-left:2em;
    }

    /* 20160426追記 */
    #topBanner{
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }
    #topBanner .ba02{
        width: 100%;
    }
    #topBanner .ba01{
        width: 100%;
    }


    /* 20181102 追記 */
    .ekitenBox li >div{
    width:100%;
    float: none;
    padding: 30px 0;
    }

    /* 240509 追記 */
    .style-gallery-item {
        width: 50%;
        padding: 0 15px 15px 0; /* Adjust padding for smaller screens */
    }
}

@media (max-width: 768px) {
  #contents .blog-grid-item {
    width: 50% !important;
  }
}

@media (max-width: 576px) {
  #contents .blog-grid-item {
    width: 100% !important;
  }
  .style-gallery-item {
      width: 100%;
      padding: 0 0 15px 0; /* Single column, adjust padding */
  }
}