@charset "Shift_JIS";

/* 要素リセット */
body{
	margin: 0;
	padding: 0;
	font-size: 16px;
	text-align:center;
	font-family: 'Noto Sans JP', sans-serif;
	color: #674b43; /* 標準文字色 */
	background-color: #f2ebd7;
 	line-height: 1.8;
}
/* Safari用ハック 文字サイズ調整 */
/*\*/
html:first-child body{
    font-size: 100%;
}
img{
  max-width: 100%;
  height: auto;
  margin: 0 0 10px 0;
}
/* 表紙ふわっ */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/*--------------------------------------------------------
  共通レイアウト設定
--------------------------------------------------------*/
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc{
	display: block !important;
}
.sp{
	display: none !important;
}
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc{
	display: none !important;
}
    .sp{
	display: block !important;
}
}
.wrap{
  display: flex;
  gap: 16px;
  align-item: center;
}
/* レスポンシブ1カラム２カラム */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.column{
  width: 100%;
}

@media (min-width: 1024px) {
  .column {
    width: calc(50% - 8.4px / 2);
  }
}
/* レスポンシブ1カラム３カラム */
.container1 {
  display: flex;
  flex-wrap: wrap;
}
.column1{
  width: 100%;
}

@media (min-width: 1024px) {
  .column1 {
    width: calc(100% / 3);
  }
}

/* パンくずリスト*/
.breadcrumb{
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: -10px;
	margin-left: 15px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	list-style-type: none;
	list-style-position: outside;
	font-size: 0.8rem;
}

.breadcrumb li{
  display: inline;/*横に並ぶように*/
  list-style: none;
 }

.breadcrumb li::after{
	/* >を表示*/
  content: '>';
  color: #555;
}

.breadcrumb li:last-child::after{
  content: '';
}

.breadcrumb li a{
  text-decoration: none;
  color: #52b5ee;/*色*/
}

.breadcrumb li a:hover{
  text-decoration: underline;
}
#hpb-container{
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	position: relative;
	background-color: #f2ebd7;
	background-image : url(bodyBg_5Ic.png);
	background-repeat: repeat-x;
	background-position: top center;
	width:100%;
	min-width:866px;
}
#hpb-header{
	height: 99px;
	width: 810px;
	margin-left:auto;
	margin-right:auto;
	color: #FFFFFF;
}

#hpb-inner{
	padding-top: 0px;
	padding-bottom:0px;
	width: 810px;
	margin-right: auto;
	margin-left: auto;
	clear: both;
	zoom: 1;
	position: relative;
}

#hpb-inner::after,
#hpb-header::after{
    content: ".";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

#hpb-nav{
	width:812px;
	height: 35px;
	position:absolute;
	top:0px;
	left:-1px;
	overflow: hidden;
	background-image : url(navBg_5Ic.png);
	background-repeat: no-repeat;
	background-position: center 1px;
}
* html #hpb-nav{
	position: relative;
}
/* 理由項目リスト */

ol.sample1{
	counter-reset: list;
	list-style-type: none;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	padding-top: 0em;
	padding-right: 0em;
	padding-bottom: 0em;
	padding-left: 1.5em;
	margin-left:15px;
}
ol.sample1 li{
	position: relative;
	line-height: 30px;
	margin-right: 0px;
	padding-left: 10px;
	font-weight: bold;
	background-color: #fef6f3;
	background-image: none;
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: 0% 0%;
	background-size: auto auto;
	background-origin: padding-box;
	background-clip: border-box;
	padding: 10px;
}
ol.sample1 li::before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -40px;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
  background: #F6A38B;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
ol.sample1 li::after{
  content:"";
  display: block;
  position: absolute;
  left: -10px;
  height: 0;
  width: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid #F6A38B;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
/* 追従ボタン */
.floating-banner{
  position: fixed;
  z-index: 999;
  bottom: 16px;
  right: 16px;
}

/* ノート風デザイン */
.note{
  background-color: #fff; /* 背景色 */
  background-image: linear-gradient(180deg, #ccc 1px, transparent 1px); /* 罫線の色と太さ  */
  background-size: 170% 2.5em; /* 行の高さ */
  line-height: 2.5em; /* 文字の高さ */
  padding-bottom: 1px; /* 最終行の下にも罫線を引く */
}
/* 関連記事 */
.connectionpost{
  background-color: #fff; /* 背景色 */
  background-image: linear-gradient(180deg, #ccc 1px, transparent 1px); /* 罫線の色と太さ  */
  background-size: 170% 2.5em; /* 行の高さ */
  line-height: 2.5em; /* 文字の高さ */
  padding-bottom: 1px; /* 最終行の下にも罫線を引く */
}
.post-photo{
	/* 背景色 */
	background-image: linear-gradient(180deg, #cccccc 1px, transparent 1px);/* 罫線の色と太さ  */
	background-size: 170% 2.5em;/* 行の高さ */
	line-height: 2.5em;/* 文字の高さ */
	padding-bottom: 1px;/* 最終行の下にも罫線を引く */
}

/* 目次 */
.toc-001{
	margin-bottom: 10px;
	padding-top: 1em;
	padding-right: 1em;
	padding-bottom: 2em;
	padding-left: 1em;
	border-width: 1px;
	border-style: solid;
	border-color: #999999;
	background-color: #f7f7f7;
	margin-top: 5px;
	margin-left: 5px;
	margin-right: 5px;
}

.toc-001 div{
    display: flex;
    align-items: center;
    margin: 0;
    padding: 5px 0;
}

.toc-001 div::before{
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: 5px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23333%22%3E%3Cpath%20d%3D%22M3.8%2017.2h-3c-.5%200-.8.4-.8.8v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8v-3c-.1-.4-.4-.8-.8-.8zm0-15h-3c-.5%200-.8.4-.8.8v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8V3c-.1-.4-.4-.8-.8-.8zm0%207.6h-3c-.5%200-.8.3-.8.7v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8v-3c-.1-.4-.4-.7-.8-.7zM23.2%2018h-15c-.4%200-.8.3-.8.8v1.5c0%20.4.3.8.8.8h15c.4%200%20.8-.3.8-.8v-1.5c0-.5-.3-.8-.8-.8zm0-15h-15c-.4%200-.7.3-.7.8v1.5c0%20.4.3.7.7.7h15c.5%200%20.8-.3.8-.8V3.8c0-.5-.3-.8-.8-.8zm0%207.5h-15c-.4%200-.8.3-.8.8v1.5c0%20.4.3.8.8.8h15c.4%200%20.8-.3.8-.8v-1.5c0-.5-.3-.8-.8-.8z%22%2F%3E%3C%2Fsvg%3E');
    content: '';
}

.toc-001 ol{
	list-style-type: decimal;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 2.0em;
	padding-bottom: 0px;
	padding-left: 2.0em;
	overflow: hidden;
	font-size: 1rem;
}

.toc-001 ol ol{
    margin-top: 5px;
}

.toc-001 li{
    padding: 5px 0;
}

.toc-001 a{
    color: #166c9d;
}
/*--------------------------------------------------------
  共通レイアウトパーツ設定
--------------------------------------------------------*/
/* ヘッダー内パーツ */
#hpb-headerMain{
    margin-top: 0;
    margin-right: 3px;
    margin-bottom: 0;
    margin-left: 3px;
    height: 25px;
    overflow: hidden;
}
#hpb-headerMain h1{
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 5px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	text-align: left;
	font-weight: bold;
	line-height: 7px;
	font-size: large;
	}

#hpb-headerLogo{
	width: 445px;
	float: left;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-left: 3px;
	height : 43px;
	font-size: 1.4rem;
	font-family: "BIZ UD明朝 Medium";
	font-weight: bold;
}

#hpb-headerLogo a{
	display: block;
	margin-top: 14px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	text-indent: -9999px;
	overflow: hidden;
	height: 44px;
	background-position: left center;
	background-repeat: no-repeat;
}

#hpb-headerExtra1{
    width: 215px;
    margin-top: -15px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    padding-top: 0px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    float: right;
}
#hpb-headerExtra1 p.tel{
    /* 電話番号の文字設定 */
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
    padding-top: 10px;
    padding-right: 6px;
    padding-bottom: 5px;
    padding-left: 0;
    font-size: 100%;
	font-weight: bold;
    line-height: 19px;
    text-align: center;
}

#hpb-headerExtra1 p.tel span{
	/* 電話番号の「TEL」文字設定 */
    display: block;
	text-align: center;
	font-size: 10px;
	color: #FFFFFF;
	background-image : url(tel_5Ic.png);
	background-repeat: no-repeat;
	background-position: center center;
	font-weight: bold;
	padding-top: 1px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
}

#hpb-headerExtra1 p.address{
    /* 住所文字設定 */
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
    padding-top: 0px;
    padding-right: 6px;
    padding-bottom: 0;
    padding-left: 0;
    line-height: 19px;
    text-align: center;
    font-size: 0.8em;
}

#hpb-headerExtra2 {
}


/* =========================
   フッター全体
========================= */
#hpb-footer{
    background: #b19f7d;
}

#hpb-footerMain{
    padding: 20px;
    max-width: 1100px;
    margin: 0 auto;
    color: #fff;
}
/* =========================
   情報＋マップ横並び
========================= */
#footer-info-map{
    display: flex;
    justify-content: space-between;
    gap: 4%;
    margin-bottom: 40px;
}

.footer-info-box,
.footer-map-box{
    width: 48%;
}

.footer-info-box h3{
    font-size:20px;
    margin-bottom: 15px;
}
.footer-info-box h3 span{
    font-size:16px;
}
.footer-info-box p{
    margin-bottom: 8px;
    font-size:14px;
    line-height: 1.6;
   text-align:left;
}

.footer-info-box a{
    color: #674b43;
    font-weight: bold;
    text-decoration: underline;
}
.copyright{
    text-align: center;
    font-size: 0.9em;
    margin-top: 20px;
}
/* マップ */
.footer-map-box iframe{
    border-radius: 5px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
#hpb-footerExtra1{
    max-width: 1100px;
    margin: 0 auto;
}

/* フッターナビ全体 */
#hpb-footerExtra1 ul{
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
    display: flex;       
    flex-wrap: wrap;
}

#hpb-footerExtra1 li{
    display: inline-block;
    line-height: 2.0;
    padding-right: 10px;
    width: auto;
    font-size:15px;
    box-sizing: border-box;
}
#hpb-footerMain a{
    color: #fff;
    text-decoration: none;
}
/* =========================
   予約ボタン
========================= */

.footer-buttons{
    margin-top: 25px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.footerbtn{
    display: inline-block;
    padding: 10px 15px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    font-size: 16px;
    transition: 0.3s ease;
    min-width: 160px;
    text-align: center;
}

/* 電話*/
.btn-phone{
    background: #eb6100;
}
.btn-phone::before{
    content: "\f095"; /* 電話 */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 8px;
}
.btn-phone:hover {
    opacity: 0.85;
}

/* ネット予約 */
.btn-web{
    background: #37b3ac;
}
.btn-web::before{
    content: "\f274"; /* Font Awesome カレンダーアイコン (fas fa-calendar-check) */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 8px;
  }
.btn-web:hover {
    opacity: 0.85;
}
/* =========================
   スマホ対応
========================= */
@media (max-width: 768px) {

    #footer-info-map {
        flex-direction: column;
    }

    .footer-info-box,
    .footer-map-box{
        width: 100%;
    }

    .footer-map-box{
        margin-top: 25px;
    }
    #hpb-footerExtra1 li{
        width: 50%;      /* 2列 */
        padding-right: 10px;
    }
}
* html #hpb-footerExtra1 li{
    display: inline; /* for IE6 */
}

*:first-child + html #hpb-footerExtra1 li{
    display: inline; /* for IE7 */
}

#hpb-footerExtra1 li a{
	color:#FFFFFF;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 1px;
	padding-left: 13px;
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	background-image : url(fpoint_5Ic.png);
	background-repeat: no-repeat;
	background-position: left center;

}

#hpb-footerExtra1 a:link{
	text-decoration: none;
}
#hpb-footerExtra1 a:hover{
	text-decoration: none;
}
#hpb-footerExtra1 a:active{
	text-decoration: none;
}

#hpb-footerExtra2 {
}

/* サイドブロック内パーツ */

/* バナー */
#banner{
    width: 235px;
}
#banner ul{
    margin-top: 0;
    margin-right: 0px;
    margin-bottom: 0;
    margin-left: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    list-style-type: none;
}
#banner li{
    display: block;
	padding-bottom:0px;
}

#banner li a{
    display: block;
    width: 235px;
    height: 70px;
    margin-left: auto;
    margin-right: auto;
    text-indent: -9999px;
    overflow: hidden;
}


/* 店舗情報 */
#shopinfo{
    width: 215px;
	padding-top: 18px;
	padding-bottom: 0;
	background-color:#FFFFFF;
	margin-top:20px;
	background-image : url(shopBgtop_5Ic.png);
	background-repeat: no-repeat;
	background-position: center top;
}

#shopinfo h3{
	text-align:left;
	font-size: 14px;
	font-weight: bold;
	color: #674b43;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 10px;
	padding-right: 15px;
	padding-bottom: 0px;
	padding-left: 15px;
	text-transform:uppercase;
}
#shopinfo h3 span.ja{
	display:none;
}
#shopinfo h4{
    font-weight: bold;
    padding-left: 15px;
    font-size: 12px;
    padding-top: 5px;
    padding-bottom: 2px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	color:#666666;
}

#shopinfo p{
	color:#666666;
	padding-top:2px;
	padding-left: 15px;
	padding-right:15px;
	padding-bottom:15px;
	margin-top:0;
	margin-bottom: 0;
	line-height:1.6;
	background-image : url(shopBgBottom_5Ic.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}

#shopinfo img {
}

/*--------------------------------------------------------
  ナビゲーションデザイン設定
--------------------------------------------------------*/

/* ナビゲーション */
#hpb-nav ul{
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0;
	padding-right: 1px;
	padding-bottom: 0;
	padding-left: 1px;
	width:810px;
	height: 35px;
}
#hpb-nav ul::after{
    content: ".";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

#hpb-nav li{
    display: block;
    width: 135px;
	float:left;
}

#hpb-nav li a{
    display: block;
	color:#FFFFFF;
	overflow:hidden;
}

#hpb-nav li span{
    display: block;
    line-height: 35px;
    font-size: 14px;
    font-weight: bold;
	text-align:center;
	padding-left:0px;
	padding-top:0px;
    display: block;
}

#hpb-nav a:link, #hpb-nav a:visited{
	background-image: url(nav_5Ic.png);
	background-position: left top;
	background-repeat: no-repeat;
	text-decoration: none;
	font-weight: bold;
}
#hpb-nav a:hover,
#hpb-nav a:active{
    background-image : url(nav_5Ic_on.png);
    background-position: left top;
    background-repeat: no-repeat;
    text-decoration: none;
}

/*--------------------------------------------------------
  基本パーツデザイン設定
--------------------------------------------------------*/
/* リンク文字色 */
a:link{
	color: #4169e1;
	text-decoration:underline;
	font-weight: 600;
}
a:visited{
	color: #660099;
	text-decoration:underline;
	font-weight: 600;
}
a:hover{
	color: #ff7043;
	text-decoration: none;
}
a:active{
	color: #551a8b;
	text-decoration:underline;
}
/* リンク文字色2 */
.a1:link{
	color: #674b43;
	text-decoration:underline;
	font-weight: bold;
}
.a1:visited{
	color: #674b43;
	text-decoration:underline;
}
.a1:hover{
	color: #ff7043;
	text-decoration: none;
}
.a1:active{
	color: #674b43;
	text-decoration:underline;
}
    /*リンクボタン */
.btn, a.btn, button.btn{
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	position: relative;
	display: inline-block;
	padding-top: 1rem;
	padding-right: 2rem;
	padding-bottom: 1rem;
	padding-left: 2rem;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	letter-spacing: 0.1em;
	color: white;
	border-top-left-radius: 0.5rem 0.5rem;
	border-top-right-radius: 0.5rem 0.5rem;
	border-bottom-right-radius: 0.5rem 0.5rem;
	border-bottom-left-radius: 0.5rem 0.5rem;
}
    /* 別ページジャンプボタン*/
.btn--jump, a.btn--jump{
	color: #ffffff;
	background-color: #008062;
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #003327;
	font-size: 20px;
}
.btn--jump:hover, a:hover.btn--jump{
	margin-top: 3px;
	color: #ffffff;
	background-color: #008062;
	background-image: none;
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: 0% 0%;
	background-size: auto auto;
	background-origin: padding-box;
	background-clip: border-box;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #008062;
}
a.btn--shadow{
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}
    /* ネット予約ボタン*/
a.btn--orange{
	color: #ffffff;
	background-color: #eb6100;
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #b84c00;
	font-size: 18px;
}
a:hover.btn--orange{
  margin-top: 3px;
  color: #fff;
  background: #f56500;
  border-bottom: 2px solid #b84c00;
}
a.btn--shadow{
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}
    /* 電話・ネット予約ボタン*/
a.btn-c{
	width: 100%;
	font-size: 1.5rem;
	position: relative;
	padding-top: 0.5rem;
	padding-right: 1.5rem;
	padding-bottom: 0.5rem;
	padding-left: 1.5rem;
}
a.btn-z{
  position: relative;
  display: inline-flex;     /* ← これが安定 */
  align-items: center;      /* ← 縦中央 */
  padding: 12px 40px 12px 28px;
	font-size: 1.0rem;
	margin: 20px 0px;
	color: #fff;
	background: #f56500;
}
.btn-z::after{
  content: "";
  display: inline-block;
  position: absolute;
  right: 16px;           /* 右側配置 */
  top: 50%;              /* 真ん中基準 */
  transform: translateY(-50%); /* 完全中央 */
  margin-left: 8px;
  border-left: 12px solid #ffffff; /* 三角の色 */
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
a.btn-x{
	color : #674b43;
	position: relative;
	font-size: 1.0rem;
	padding: 10px 15px;
	background: #ded2b1;
}
/*今すぐ予約ボタン*/
a.btn--circle{
	border-radius: 50%;
	width: 100px;
	height: 100px;
	padding: 0;
	color: #ffffff;
	background-color: #008062;
	font-size: 1.0rem;
	-webkit-box-shadow: 0 5px 0 #003327;
 	box-shadow: 0 5px 0 #003327;
}
a:hover.btn--circle{
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  -webkit-box-shadow: 0 2px 0 #008062;
  box-shadow: 0 2px 0 #008062;
}
/* 電話・予約バナー */
/* 初期は非表示 */
.fixed-call-banner{
  display: none;
}

/* スマホのみ表示 */
@media screen and (max-width: 767px) {
  .fixed-call-banner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    padding: 10px;
    z-index: 9999;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.15);
    gap: 10px;
  }

  .fixed-call-banner .call-button{
    flex: 1;
    text-align: center;
    padding: 10px 0;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    transition: opacity 0.3s ease;
    color: #ffffff;
    position: relative;
  }

  .fixed-call-banner .call-button:hover {
    opacity: 0.85;
  }

.fixed-call-banner .call-button.call-tel{
  background-color: #eb6100;
}

.fixed-call-banner .call-button.call-net{
  background-color: #37b3ac;
}
  /* ::before にアイコンを追加 */
  .call-button.call-tel::before{
    content: "\f095"; /* Font Awesome 電話アイコン (fas fa-phone) */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 8px;
  }

  .call-button.call-net::before{
    content: "\f274"; /* Font Awesome カレンダーアイコン (fas fa-calendar-check) */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 8px;
  }
}
/* 訪問お問い合わせボタン*/
.fixed-call-banner{
  display: none;
}

/* スマホ（767px以下）で表示 */
@media screen and (max-width: 767px) {
  .fixed-call-banner{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff; /* バナー背景（白） */
    padding: 10px;
    z-index: 9999;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.15);
  }

  .fixed-call-banner .call-button{
    display: inline-block;
    background-color: #eb6100; /* ボタン背景：オレンジ */
    color: #ffffff !important; /* ← これで白文字を強制 */
    padding: 12px 20px;
    border-radius: 4px;           /* 角丸*/
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none !important;
    transition: background-color 0.3s ease;
  }

  .fixed-call-banner .call-button:hover{
    background-color: #cc5000; /* ホバー時の濃いオレンジ */
    color: #ffffff !important; /* 念のため白文字を維持 */
  }
}
/* 矢印風-------------------------------*/
.more-btn{
  --more-btn-color:#674b43;/*矢印と文字の色*/
	font-size: 1.2rem;
  text-align: right;/*ボタン右寄せ*/
}

.more-btn a{
	position: relative;/*位置（ここを基準に）*/
	padding-top: 0px;
	padding-right: 1.0em;
	padding-bottom: 0px;
	padding-left: 0.5em;/*内側余白調整（上右下左）*/color: var(--more-btn-color);/*リンク文字色*/
	text-decoration: none;/*リンク下線を消す*/
	outline-width: medium;
	outline-style: none;
	outline-color: black;/*枠線を消す*/
}

.more-btn a::before,
.more-btn a::after{
	content: ''; /*矢印部分作成*/
	position: absolute; /*位置（下線と矢印を配置する）*/
	background: var(--more-btn-color); /*矢印の色*/
	height: 1px; /*線の太さ*/
	transition: all .3s; /*なめらかな動き*/
}

.more-btn a::before{
  bottom: -10px; /*下からの距離*/
  left: 0%; /*左からの距離*/
  width: 100%; /*ボタンの幅*/
}

.more-btn a::after{
  bottom: -5px; /*下からの距離*/
  right: 0%; /*右からの距離*/
  width: 15px; /*矢印部分の幅*/
  transform: rotate(35deg);
}
/*マウスオーバー時の動き*/
.more-btn a:hover::before{
	left: 10%;
}

.more-btn a:hover::after{
	right: 90%;
}

/* スタッフ紹介コンテナ（常に縦並び） */
.staff-container{
  display: block;
  max-width: 800px;
  margin: 0 auto;
  padding: 10px 0;
}

/* スタッフ1人分のカード */
.staff-card{
  padding: 20px 0;
  margin-bottom: 24px;
}

/* ヘッダー：画像＋名前を横並び＆中央揃え */
.staff-header{
  display: flex;
  align-items: center;
  justify-content: center; /* ← 中央揃え */
  gap: 20px;
  margin-bottom: 16px;
}
/* 名前（画像横に中央揃えで表示） */
.staff-header h3{
  font-size: 1.6em;
  color: #674b43;
  margin: 0;
}
.staff-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.staff-info p{
  margin: 4px 0 0;
}
/* 似顔絵画像 */
.staff-photo{
  width: 150px;
  height: 150px;
  border-radius: 5px;
  object-fit: cover;
  border: 2px solid #674b43;
}

/* セクション見出し（コメント、特技など） */
.staff-card h4{
  font-size: 1.2em;
  color: #008062;
  margin-top: 16px;
  margin-bottom: 6px;
  text-align: left;
  display: flex;
  align-items: center;
}

/* 見出し前のアイコン */
.staff-card h4 i{
  margin-right: 8px;
  color: #008062;
}

/* テキスト本文 */
.staff-card p{
  font-size: 1em;
  line-height: 1.6;
  color: #333;
  margin: 0 0 10px;
  text-align: left;
}
/*囲み枠*/
.box-text-notice{
	position: relative;
	border-width: 3px 0px;
	border-style: double;
	border-color: #da4033;
	margin-top: 40px;
	margin-bottom: 20px;
	padding: 40px 10px 30px 10px;
}
.box-text-notice::before{
    content: "重要！";
    position: absolute;
    background-color: #f4f4f4;
    color: #da4033;
    font-weight: bold;
    left: 20px;
    top: -23px;
    padding: 10px;
}

.box-text-point{
	position: relative;
	border-width: 3px;
	border-style: solid;
	border-color: #003333;
	border-top-left-radius: 5px 5px;
	border-top-right-radius: 5px 5px;
	border-bottom-right-radius: 5px 5px;
	border-bottom-left-radius: 5px 5px;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
	padding-top: 30px;
	padding-right: 20px;
	padding-bottom: 30px;
	padding-left: 20px;
	background-color: white;
}
.box-text-point::before{
    content: "POINT";
    position: absolute;
    background-color: #f4f4f4;
    color: #033;
    font-weight: bold;
    left: 20px;
    top: -23px;
    padding: 10px;
}

.box-text-memo{
	position: relative;
	border-width: 3px;
	border-style: dashed;
	border-color: #000055;
	border-top-left-radius: 5px 5px;
	border-top-right-radius: 5px 5px;
	border-bottom-right-radius: 5px 5px;
	border-bottom-left-radius: 5px 5px;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 5px;
	padding-left: 20px;
	background-color: white;
}
.box-text-memo::before{
    content: "MEMO";
    position: absolute;
    background-color: #f4f4f4;
    color: #000055;
    font-weight: bold;
    left: 20px;
    top: -23px;
    padding: 10px;
}
/* チャット風吹き出し */
.balloon5{
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

.balloon5 .faceicon{
  float: left;
  margin-right: -90px;
  width: 80px;
}

.balloon5 .faceicon img{
  width: 100%;
  height: auto;
  border: solid 2px #5ab9ff;
  border-radius: 50%;
}

.balloon5 .chatting{
  width: 100%;
}

.says{
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 105px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 2px solid #5ab9ff; /* 吹き出し本体の枠線 */
}
.says::before{
  content: "";
  position: absolute;
  top: 22px;             /* しっぽの縦位置（微調整可） */
  left: -14px;           /* 吹き出しからの距離 */
  border-style: solid;
  border-width: 6px 14px 6px 0; /* 上 右 下 左 → 上下を細く、右を長く */
  border-color: transparent #5ab9ff transparent transparent;
}
.says::after{
  content: "";
  position: absolute;
  top: 22px;
  left: -12px;
  border-style: solid;
  border-width: 5px 12px 4px 0; /* 外側より1px小さくする */
  border-color: transparent #fff transparent transparent;
}
.says p{
  margin: 0;
  padding: 0;
}
/* 記事一覧リンク */
/* 横スクロール型にする */
.listA .container{
  display: flex;
  flex-wrap: nowrap;      /* 折り返さない */
  overflow-x: auto;       /* 横スクロール */
  gap: 1px;              /* カード間の余白（marginより管理しやすい） */
  padding: 0px;          /* 端の余白 */
  -webkit-overflow-scrolling: touch;
}

/* カード幅を固定 */
.listA article{
  flex: 0 0 300px;        /* 幅300px固定 */
  display: flex;
}
.listA h2{
  font-size: 18px;
}

.listA p{
	font-size: 1rem;
	opacity: 0.8;
	font-weight: bold;
}

.listA .photo{
  min-height: 150px;
  background-position: center;
  background-size: cover;
}

.listA a{
	flex: 1;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	display: block;
	border-width: 1px;
	border-style: solid;
	border-color: #dddddd;
	color: inherit;
	text-decoration: none;
	background-color: white;
}

.listA a:hover {
  opacity: 0.8;
}

.listA .text{
  margin: 10px;
}
#hpb-skip{
    /* ヘッダースキップの非表示 */
    height: 0px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-indent: -9999px;
}
p{
    margin: 0.2em 0 1.2em;
    padding: 0 1em;
    line-height: 1.9;
    font-size: 16px; /* PC基準 */
}

@media (max-width: 768px) {
    p{
        font-size: 15px;
        line-height: 1.8;
    }
}
p.large{
	color: #c28100;
	font-weight: bold;
	font-size:1.1em;
}
p.indent{
    padding-left: 15px;
}
b, strong{
  font-weight: 600;
}

.left{
    float: left;
}
.right{
    float: right;
}
/* 白背景 画像シャドー付き*/
.p1{
  background-color: #ffffff;
  padding: 20px;
  border-radius: 6px;
  margin-bottom: 2em;
}

.p1 img{
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
  width: 100%;
  height: auto;
}

.p1 p{
  margin: 0;
  padding: 0;
}
.time{
	margin-top: 0.6em;
	padding-right: 0.5em;
	padding-left: 1.2em;
	line-height: 1.6;
	text-align: right;
	color: #666666;
	font-weight: bold;
	font-size: 13px;
}
.time::before{
	color: #666666;/*アイコンの色*/
	font-family: "Font Awesome 5 Free";
	content: "\f2f9";/*アイコンのコード*/
	font-weight: 900;/*アイコンの種類*/
	margin-right: 8px;/*アイコン右の余白*/
}
.time::after{
	content: "更新";
	color: #666666;
	font-weight: bold;
	font-size: 13px;
	font-family: "ヒラギノ角ゴ",Meiryo,; 
	margin-left: 7px
;
}
/* 各セクション */
.section{
  padding: 30px 20px;
  background-color: #fffaf4;
  margin-bottom: 10px;
}
/* --- お客様の声--- */
.nyano-feedback-wrapper{
	display: flex;
flex-direction: column;
gap: 20px;
max-width: 700px;
margin: auto;
}

.nyano-feedback-card{
	display: flex;
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
align-items: flex-start;
flex-wrap: wrap;
}
.nyano-feedback-card:nth-child(odd){
	background-color: #fff6eb;
}
.nyano-feedback-card:nth-child(even){
	background-color: #edf7ff;
}

.nyano-profile{
	display: flex;
flex-direction: column;
align-items: center;
width: 100px;
margin-right: 15px;
}

.nyano-profile-image{
	width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
}

.nyano-profile-image img{
	width: 100%;
height: 100%;
object-fit: cover;
}

.nyano-profile-footer{
	margin-top: 10px;
font-size: 12px;
color: #666;
text-align: center;
}

.nyano-feedback-content {
flex: 1;
}

.nyano-feedback-content p{
	font-size: 14px;
line-height: 1.6;
color: #333;
text-align: left;
}

.nyano-feedback-content p span{
	font-weight: bold;
color: #e56b3c;
}

@media (max-width: 480px) {
.nyano-feedback-card{
	flex-direction: column;
align-items: center;
text-align: left;
}

.nyano-profile{
	margin-right: 0;
margin-bottom: 10px;
width: auto;
}

.nyano-feedback-content{
	text-align: left;
}
}
/* --- 腰痛タイプ診断カード --- */
.lbp-grid {
  display: grid;
  gap: 14px;
}

.lbp-card{
  position: relative;
  padding: 16px;
  background: #fff; 
  border-radius: 10px;
  border: 1px solid #eee;
  margin: 16px 0px;
}

.lbp-badge{
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.8em;
  font-weight: 700;
  color: #fff;
  background: #eb6100; 
}
.lbp-card h3{
  margin: 2px 0 6px;
  font-size: 1.2em;
}

.lbp-tags{
  display: inline-flex;    /* flexで横並びにする */
  flex-wrap: wrap;       /* 折り返し禁止 */
  gap: 6px;
  row-gap: 6px;
  margin: 6px 0 6px;
}

.lbp-tag{
  background: #f6efe5;
  border: 1px solid #ecdccc;
  border-radius: 999px;
  font-size: 0.8em;
  padding: 4px 8px;
  color: #7a635c;
}
.lbp-card ul{
  margin: 0 0 2px 0;
  padding: 0;
}

.lbp-card li{
  margin: 6px 0;
  font-size: 15px;
}
hr{
    width: 100%;
    height: 1px;
    margin-top: 5px;
    margin-right: auto;
    margin-bottom: 5px;
    margin-left: auto;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    clear: both;
    border-top-width: 1px;
    border-top-style: none;
    border-right-width: 1px;
    border-right-style: none;
    border-left-width: 1px;
    border-left-style: none;
    border-bottom-width: 1px;
    border-bottom-style: none;
}
/*蛍光マーカー アンダーライン*/
.yellow{
	background: linear-gradient(transparent 0%, #ffff00 0%);
	color : #000000;
}

h1{
	font-size: 150%;
	text-align: left;
	font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3";
}
/* 写真付きh1*/
.hero{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1em;
  margin-top:1.5em;
}

.hero h1{
  color: white;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.5);
  padding: 1em 2em;
  border-radius: 0.5em;
  max-width: 90%;
  line-height: 1.4;
}

/* スマホ対応 */
@media (max-width: 600px) {
  .hero h1{
    font-size: 1.5rem;
    padding: 0.8em 1.2em;
  }
}
.h1a{
	position: relative;
	background-color: #fffaf4;
	background-image: none;
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: 0% 0%;
	background-size: auto auto;
	background-origin: padding-box;
	background-clip: border-box;
	padding-top: 1rem;
	padding-right: 1rem;
	padding-bottom: 1rem;
	padding-left: 1.4rem;
	text-align: left;
	margin-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 1rem;
}
.h1a::before,.h1a::after{
	 
	content:'';
	width: 20px;
	height: 40px;
	position: absolute;
	display: inline-block;
}
.h1a::before{
	border-left: solid 3px #da5019;
	border-top: solid 3px #da5019;
	top:0;
	left: 0;
}
.h1a::after{
	border-right: solid 3px #da5019;
	border-bottom: solid 3px #da5019;
	bottom:0;
	right: 0;
}
.h1b{
    position: relative;
    padding: 1rem 1rem 1rem 1.5rem;
    border-radius: 30px;
    background-color: #deb887;
    color: white;
    font-weight: bold;
    font-size: 16px;
}

.h1b::before{
    position: absolute;
    top: 100%;
    left: 40px;
    height: 0;
    width: 0;
    border-style: solid;
    border-color: transparent;
    border-top-color: #deb887;
    border-width: 8px;
    content: "";
}
/* 画像オーバーレイ見出し */
.img-title{
  position: relative;
  width: 100%;
}

.img-title::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1;
}

.img-title img{
  width: 100%;
  height: auto;
  display: block;
}

.img-title h1, .img-title h2, .img-title h3{
  font-size: 1.4rem;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  z-index: 2; /* ← これ重要 */
  margin: 0;
 white-space: nowrap;
}
@media (min-width: 768px) {
  .img-title{
    width: 500px;
    margin: 0 auto;
  }
}
h2{
	margin: 10px 5px 20px;
	font-size: 140%;
	font-weight: 800;
	line-height: 1.4;
	font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3";
}
.h2z{
  margin-left:0;
  position: relative;
  padding: 1rem 0 0.5rem 0.5rem ;
  border-bottom: 6px solid #ffaf58;
  z-index: 1;
}
.h2z::first-letter{
  color: #DA5019;
  font-size:110%;
}
.h2z::before{
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 20%;
  height: 6px;
  content: '';
  background: #da5019;
  z-index: 2;
}
.hpb-layoutset-02 h2 span.ja{
	display: none;
}

h2 span.en{
	font-size: 1.4em;
	color: #FFF;
	font-weight: bold;
	text-transform: capitalize;
	display: block;
}
/* デザイン１ */
.h2a{
	padding-top: 0.5em;
	padding-right: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 0.5em;/*文字周りの余白*/
	color: #494949;/*文字色*/
	background-color: #fffaf4;
	background-image: none;
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: 0% 0%;
	background-size: auto auto;
	background-origin: padding-box;
	background-clip: border-box;/*背景色*/
	border-left-width: 5px;
	border-left-style: solid;
	border-left-color: #ffaf58;/*左線（実線 太さ 色）*/
}
/* 中央寄せライン*/
.h2c{
	font-family: BIZ ud明朝 medium;
	text-align: center;
	padding-top: 10px;
}
 
.h2c span{
     position: relative;
     display: inline-block;
     padding: 0 0.5em;
}
      
.h2c span::before, .h2c span::after{
     position: absolute;
     top: 50%;
     content: '';
     width: 1.5em;
     height: 1px;
     background-color: black;
}
 
.h2c span::before{
	left: 100%;
}
.h2c span::after{
	right: 100%;
}
h3{
	font-size: 130%;
	font-weight: bold;
	text-align: left;
	padding-top: 20px;
	clear: both;
	font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3";
}

.hpb-c-index{
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-indent: -9999px;
    background: none;
}
.h3z{
	position: relative;
	padding-left: 23px;/*アイコン分のスペース*/
	font-weight: bold;
}
.h3z::before{
  content: "■";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
	line-height: 1.4rem;
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
}
.h3y{
	font-weight: bold;
	padding-bottom:7px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-color: #cebab4;
}
/* 番号付き見出し */
.h3a{

	font-size: 1.5rem;
	position: relative;
	padding-bottom: 0.2rem;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #674b43;
	padding-top: 1.5rem;
	padding-left: 0.6rem;
}
.h3a span{
	font-family: 'Roboto', sans-serif;
	font-size: 2.5rem;
	line-height: 1rem;
	position: relative;
	bottom: 0rem;
	left: 0rem;
	padding-right: 10px;
	top: 0px;
	font-family: 游明朝;
}
/* 下線と１文字目色付き*/
.h3b{
	position: relative;
	padding-top: 1em;
	padding-right: 1em;
	padding-bottom: 0.2em;
	padding-left: 0.5em;
}
.h3b::first-letter{
	color: #da5019;
	font-size: 2rem;
}
.h3b::before{
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 100px;
  height: 5px;
  background: #DA5019;
  z-index: 1;
}
.h3b::after{
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  background: #FCECE5;
}
/* 背景色付き*/
.h3c{
	position: relative;padding: 8px 5px 8px calc(1em + 5px);
	color: #674b43;
	padding-left: 5px;
	padding-top: 20px;
}
.h3c::before{
	margin-right:10px;
	font-style: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	color: #da5019;
	content: '\f058';
}
.h2m, .h3m{
	font-family: "BIZ UD明朝 Medium";
}
 h4{
	font-size: 120%;
	font-weight: bold;
	text-align: left;
	padding-top: 10px;
       margin-bottom:10px;
	clear: both;
	font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3";
}
.h4a{
  position: relative;
  padding-left: 1.5em; /* アイコン分のスペース */
}
.h4a::before{
  content: "\f00c"; /* Font Awesomeのチェックアイコンコード */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  color: #674b43
;
}
h5{
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
	text-align: left;
	font-size: 110%;
	line-height: 1.2;

}
/* 関連記事見出し */
.h5a{
	position: relative;
	padding-left: 1.6em;/*アイコン分のスペース*/
	line-height: 1.4rem;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #2ca9e1;
	font-weight: bold;
	color: #2ca9e1;
}

.h5a::before{
  font-family: "Font Awesome 5 Free";
  content: "\f304";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1.2em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #2ca9e1; /*アイコン色*/
  font-weight: 900;
}
@media (max-width: 768px) {
    h1{
        font-size: 22px;
    }

    h2{
        font-size: 20px;
    }

    h3{
        font-size: 18px;
    }
}
/* スマホ：横スクロール */
.reason-scroll{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.reason-card{
	min-width: 92%;
	scroll-snap-align: start;
}
.reason-scroll p{
	background-color: #ffffff;
	padding: 15px;
}
@media (min-width: 1024px) {
  .reason-scroll{
    display: block;       /* 横並び解除 */
    overflow-x: visible;  /* 横スク解除 */
  }

  .reason-card{
    min-width: auto;
    width: 100%;
    margin-bottom: 20px;
  }
}
/* カウンター初期化 */
.reason-scroll {
  counter-reset: reason;
}

/* h3本体 */
.reason-card h3{
  position: relative;
  padding-left: 56px; /* 番号分の余白 */
  line-height: 1.4;
  background-color: #fef6f3;
}
.reason-card h3 span{
    color:#da5019;
}
/* 左の「1・2・3」 */
.reason-card h3::before{
  counter-increment: reason;
  content: counter(reason);

  position: absolute;
  left: 0;
  top: 0.2em;

  width: 40px;
  height: 40px;
  background: #f4a08a; /* 好きな色に */
  color: #fff;
  font-weight: bold;
  font-size: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 6px;
  flex-shrink: 0;
}
table{
    margin-top: 5px;
    margin-right: auto;
    margin-bottom: 5px;
    margin-left: 0px;
    border-collapse: collapse;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #e3bc7b;
}

table th{
	padding-top: 8px;
	padding-right: 15px;
	padding-bottom: 8px;
	padding-left: 8px;
	text-align: left;
	background-color: #ded2b1;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e3bc7b;
}

table td{
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    text-align: left;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #e3bc7b;
}
.table1{
	width: 100%;
	margin: 5px 0px;
	border-collapse: collapse;
	border-top-color: transparent;
	border-radius: 10px;
}

.table1 th{
	background-color: initial;
	padding: 8px 0px;
	text-align: left;
	width: 25%;
	color: #674b43;
	line-height: 4rem;
}
.table1 td{
  text-align: left;
  padding:7px 10px 7px 15px;
  width: 75%;
}
/*---------- スクロール可能なテーブル関連のCSS ----------*/
.table_box{
    display: block;
    overflow: auto;
}

.table_box th,
.table_box td{
    white-space: nowrap;
}

/* スクロールバー全体を対象にする */
.table_box::-webkit-scrollbar {
    width: 10px; /* スクロールバーの幅 */
    height: 10px; /* スクロールバーの高さ */
}

/* スクロールバーの背景部分をカスタマイズ */
.table_box::-webkit-scrollbar-track {
    background: #f1f1f1; /* スクロールバーの背景色 */
    border-radius: 5px; /* 角丸にする */
}

/* スクロールバーの操作部分をカスタマイズ */
.table_box::-webkit-scrollbar-thumb {
    background: #888; /* スクロールバーの操作部分の背景色 */
    border-radius: 5px; /* 角丸にする */
}

/* スクロールバーの操作部分にホバーした時のスタイル */
.table_box::-webkit-scrollbar-thumb:hover {
    background: #555; /* ホバー時のスクロールバーの操作部分の背景色 */
}
/* フォームパーツ設定 */
input.button{
    margin-top: 10px;
    margin-bottom: 15px;
}
/* 価格表示デザイン */
.fee{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;          /* ← 横3列固定の要 */
  border:2px solid #d8c28a;
  margin-top:34px;             /* ← 吹き出しの分だけ上に余白 */
}

.fee th,.fee td{
  border-left:2px solid #d8c28a;
  text-align:center;
}
.fee th:first-child,.fee td:first-child{
	border-left:none;
}

.fee th{
  position:relative;
  background:#e6dcc0;
  padding:18px 8px 5px;
  font-size:16px;
  font-weight:600;
}

/* 吹き出し（枠外） */
fee th{
  position:relative;
}

/* 吹き出し本体 */
.fee .fukidashi{
  position:absolute;
  top:-40px;
  left:50%;
  transform:translateX(-50%);
  width:90%;
  padding:6px;
  font-size:14px;
  font-weight:600;
  text-align:center;
  border:2px solid #674b43;
  background:#fff;
  white-space:nowrap;
}

/* 中のひし形 */
.fee .fukidashi::before{
  content:"";
  position:absolute;
  bottom:-5px;
  left:50%;
  width:12px;
  height:12px;
  background:#fffaf4;
  transform:translateX(-50%) rotate(135deg);
}

/* 枠線のひし形 */
.fee .fukidashi::after{
  content:"";
  position:absolute;
  bottom:-8px;
  left:50%;
  z-index:-1;
  width:12px;
  height:12px;
  border:2px solid;
  border-color:#333 #333 transparent transparent;
  background:#fff;
  transform:translateX(-50%) rotate(135deg);
}
/* 料金 */
.fee td{
  padding:12px 8px;
  background:#fff;
}

.fee .main{
  font-size:18px;
  font-weight:600;
  color:#e15a1a;
}

.fee .sub{
  font-size:13px;
}
textarea{
    width: 380px;
    height: 200px;
}

input.l{
    width: 380px;
}
input.m{
    width: 250px;
}
input.s{
    width: 50px;
}


/* メインコンテンツ内基本パーツ */
#hpb-main ul{
    margin-top: 1em;
    margin-right: 0;
    margin-bottom: 2em;
    margin-left: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    list-style-type: none;
}

#hpb-main ul li{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 15px;
	border-bottom: 1px dotted #e3bc7b;
	line-height: 1.6;
}

#hpb-main ul li::before{
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	background-color: #b99254; 
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 8px; /* ← 位置調整 */
}
#hpb-main .bx-wrapper .bx-viewport ul li{
  background-image: none;  /* 背景画像を削除 */
  padding:0
;
}
#hpb-main .news-list li{
  background-image: none;  /* 背景画像を削除 */
  width:100%;
  padding:10px;
 }
#hpb-main .news-list li::before{
	content: none;
}
/* お知らせ一覧 */
.news-list{
  list-style: none outside;
  margin: 0;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.5);
}

.news-list .item{
  display: flex;
  flex-wrap: wrap;
  padding: 10px 20px;
  border-bottom: 1px solid #ccc;
}

.news-list .item .date{
  min-width: 120px;
  font-size: 16px;
  color: #674b43;
  margin: 0;
  padding-right: 20px;
  padding-top:10px;
}

.news-list .item .title{
  flex: 1;
  font-size: 16px;
  margin: 0;
  padding:10px;
  color: #674b43;
}

.news-list .item .title a{
  text-decoration: none;
  font-weight: bold;
  color: #674b43;
}

.news-list .item .title a:hover{
  color: #00F;
}

@media screen and (min-width: 768px) {
  .news-list .item {
    flex-wrap: nowrap;
  }
}
*{
  box-sizing: border-box;
}
#hpb-main dl{
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 20px;
    margin-left: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}

#hpb-main dt{
	line-height: 1.6;
	font-weight: 600;
	padding-top: 8px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 3px;
	margin-top: 15px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-size: 110%;
}

#hpb-main dd{
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 15px;
	line-height: 1.8;
	color: #674b43;
	padding-left: 10px;
	border-radius: 6px
;
}

* html #hpb-main dd{
    height: 1%; /* for IE6 */
}

.qa-8 dt{
	margin-bottom: 1em;
	color: #674b43;
	font-weight: 400;
}

.qa-8 dt::before,
.qa-8 dd::before{
    margin-right: .4em;
}

.qa-8 dt::before{
	content: "Q.";
	color: #da5019;
}

.qa-8 dd{
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 1em;
	padding-right: 10px;
	padding-bottom: 1em;
	padding-left: 10px;
	background-color: #ffffff;
	color: #333333;
}

.qa-8 dd::before{
	content: "A.";
	color: #674b43;
	font-weight: bold;
}
@media (max-width: 768px) {
    .qa-8 dd{
        font-size: 15px;
        line-height: 1.8;
    }
}
#hpb-main img.left{
    margin-top: 5px;
    margin-right: 20px;
    margin-bottom: 10px;
    float: left;
}

#hpb-main img.right{
    margin-top: 5px;
    margin-bottom: 10px;
    margin-left: 20px;
    float: right;
}
/* メニューページ デザイン定義 */
#menu .item{
	width: 275px;
	float: left;
	margin-left: 1px;
	margin-right: 1px;
	margin-bottom: 25px;
	min-height: 135px;
}

* html #menu .item{
    height: 135px; /* for ie6 */
}

#menu .item h3{
    margin-left: 0;
    margin-right: auto;
	margin-bottom:5px;
}

#menu .item dl{
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 0;
    font-size: 0.95em;
}

#menu .item dt{
    width: 11em !important;
}

#menu .item dd{
    text-align: right;
    padding-left: 12.5em;
}

/* クーポン デザイン定義 */
#coupon{
	border-top-width: 4px;
	border-top-style: double;
	border-top-color: #e3bc7b;
	border-right-width: 4px;
	border-right-style: double;
	border-right-color: #e3bc7b;
	border-bottom-width: 4px;
	border-bottom-style: double;
	border-bottom-color: #e3bc7b;
	border-left-width: 4px;
	border-left-style: double;
	border-left-color: #e3bc7b;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 0px;
	padding-left: 0;
	margin-bottom: 30px;
	margin-left:10px;
	margin-right:10px;
}
#coupon-off{
	margin-left: 0px;
	padding-top: 15px;
}

#coupon-limit{
	padding-top: 20px;
	margin-left: 0px;
	padding-bottom: 20px;
}
#coupon-off h4,
#coupon-limit h4{
	float:left;
}
#coupon-off p,
#coupon-limit p{
	padding-left:150px;
}

.hpb-layoutset-02 #hpb-wrapper #coupon h3{
	padding-top: 25px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 20px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0px;
	margin-left: 0;
	border-left-style: none;
	text-align: left;
	font-size: 1.2em;
	background-color: #ded2b1;
}
#coupon::after{
    content: ".";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

#coupon h4{
    width: 110px;
    margin-right: auto;
    background-color: #e3bc7b;
    color: #ffffff;
    font-size: 1.1em;
    line-height: 1.2;
    font-weight: bold;
    border-bottom-width: 1px;
    border-bottom-style: none;
    text-align: center;
	margin-left:25px;
	margin-bottom:10px;
}

#coupon p{
    margin-bottom: 0;
	margin-left:23px;
}

#coupon hr{
    margin-top: 0;
    margin-bottom: 0;
}

/* アクセスマップ */

#access img{
	float:right;
	padding-left:10px;
	padding-bottom:10px;
}

/* ご予約 */

#contact form{
	padding-left:15px;
	padding-right:15px;
	text-align:center;
}
#contact form table{
	width:100%;
}
#contact form th,
#contact form td,
#contact form td input{
	text-align:left;
}

/* =======================================================
  レスポンシブ設定
======================================================= */
@media screen and (max-width: 568px) {
	
	body{
		min-width: 100%;
	}
	
	/*--------------------------------------------------------
		共通レイアウト設定
	--------------------------------------------------------*/
	#hpb-container{
		background-image: none;
		min-width: 0;
	}
	#hpb-header{
		height: auto;
		width: 100%;
		padding-bottom: 10px;
		background-color: #247845;
	}
	#hpb-inner{
		width: 100%;
	}
	#hpb-footer{
		padding-top: 0;
		margin-top:0px;
		min-width: 0;
	}
	#hpb-nav{
		width: 100%;
		height: auto;
		position: relative;
		left: 0;
		background-image: none;
		background-color: #b99254;
		border-top-width: 1px;
		border-top-style: solid;
		border-top-color: #f2ebd7;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #f2ebd7;
	}
	
	/*--------------------------------------------------------
		共通レイアウトパーツ設定
	--------------------------------------------------------*/
	/* ヘッダー内パーツ */
	#hpb-headerMain{
		margin-right: 0;
		margin-left: 0;
		height: auto;
	}
	#hpb-headerMain h1{
		margin-left: 0;
		padding-top: 5px;
		padding-right: 5px;
		padding-bottom: 5px;
		padding-left: 5px;
		line-height: 1.4;
	}
	#hpb-headerLogo{
		width: 98%;
		float: none;
		margin-top: 10px;
		margin-left: auto;
		margin-bottom: 10px;
		margin-right: auto;
		height: auto;
	}
	#hpb-headerLogo a{
		margin-top: 0;
		max-width: 100%;
		background-size:contain;
		background-position: center top;
	}
	#hpb-headerExtra1{
		width: 98%;
    margin-top: 0;
		margin-left: auto;
		margin-right: 1%;
		float: none;
		text-align: right;
	}
	#hpb-headerExtra1 p.tel{
		padding-top: 0px;
		padding-right: 0;
    line-height: 1.4;
		display: inline-block;
		text-align: right;
	}
	#hpb-headerExtra1 p.tel span{
		display: block;
		background-image: none;
		padding-top: 3px;
		padding-right: 12px;
		padding-bottom: 3px;
		padding-left: 12px;
		background-color: #144126;
		-webkit-border-radius: 3px;
		border-radius: 3px;
	}
	#hpb-headerExtra1 p.address{
		padding-right: 0;
		line-height: 1.4;
		text-align: right;
	}
	
	/* サイドブロック内パーツ */
	/* バナー */
	#banner{
		width: 100%;
	}
	#banner li{
		max-width: 100%;
	}
	#banner li a{
		max-width: 100%;
	}
	#banner a#banner-blog{
		background-size: contain;
	}
	#banner a#banner-trip{
		background-size: contain;
	}
	#banner a#banner-card{
		background-size: contain;
	}
	#banner a#banner-reserve{
		background-size: contain;
	}
	
	/* 店舗情報 */
	#shopinfo{
		margin-left: auto;
		margin-bottom: 0px;
		margin-right: auto;
		max-width: 100%;
		background-image: none;
		border-radius: 5px;
		-webkit-border-radius: 5px;
	}
	#shopinfo h4{
		padding-right: 15px;
	}
	#shopinfo img.shopinfo-img{
		max-width: 100%;
		box-sizing: border-box;
	}
	#shopinfo p{
		background-image: none;
	}
	
	/*--------------------------------------------------------
		ナビゲーションデザイン設定
	--------------------------------------------------------*/
	#hpb-nav .hpb-c-index{
		width: 104px;
		height: 20px;
		
		background-position: top left;
		background-repeat: no-repeat;
		margin-left: 10px;
		margin-top: 10px ;
		margin-bottom: 10px;
		overflow: hidden;
		text-indent: -9999px;
		cursor: pointer;
	}
	#hpb-nav ul{
		padding-right: 0;
		padding-left: 0;
		width: 100%;
		height: auto;
		display: none;
	}
	#hpb-nav ul.toggled-on{
    		display: flex;
    		flex-wrap: wrap;
    		gap: 0;
	}
	#hpb-nav li{
		width: 50%;
    		float: none;
    		border-top: 1px solid #d4c3a8;
    		box-sizing: border-box;
	}
	#hpb-nav li a{
    	display: block;
    	line-height: 1.4;
    	padding: 10px;
    	text-align: center;
    	color: #fff;
    	transition: background-color 0.3s;
	}
	#hpb-nav li span.en{
		line-height: 1.4;
		text-align: left;
	}
	#hpb-nav a:link,
	#hpb-nav a:visited{
		background-image: none;
	}
	#hpb-nav a:hover,
	#hpb-nav a:active{
		background-image: none;
		background-color: #b19262;
	}
	
	/*--------------------------------------------------------
	  基本パーツデザイン設定
	--------------------------------------------------------*/
	p{
		padding-right: 0;
		padding-left: 0;
	}
	hr{
		box-sizing: border-box;
	}
	.hpb-layoutset-02 h2{
		background-size: cover;
		height: auto;
		line-height: 1.4;
		padding-top: 30px;
		padding-bottom: 10px;
		word-break: break-all;
	}
	h2 span.en{
		padding-top: 0;
		padding-right: 10px;
	}
	#hpb-wrapper h3{
		line-height: 1.4;
		padding-right: 7px;
	}
	h4{
		margin-right: 0;
		margin-left: 0;
		padding-right: 0;
		padding-left: 0;
		line-height: 1.4;
	}
	table{
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
	}
	
	/* フォームパーツ設定 */
	textarea{
		width: 96%;
	}
	input.l{
		width: 96%;
	}
	input.m{
		width: 60%;
	}
	input.s{
		width: 30%;
	}
	
	/* メインコンテンツ内基本パーツ */
	#hpb-main ul li{
		padding-right: 0;
	}
	#hpb-main dt{
		float: none;
		width: 100% !important;
		box-sizing: border-box;
	}
	#hpb-main dd{
		padding-right: 0;
		padding-left: 0;
	}
	#hpb-main img.left{
		margin-right: 0;
		float: none;
	}
	#hpb-main img.right{
		margin-left: 0;
		float: none;
	}
	
	/* メニューページ デザイン定義 */
	#menu .item{
		width: 100%;
		float: none;
		margin-left: 0;
		margin-right: 0;
		min-height: 0;
	}
	#menu .item h3{
		width: 100%;
		box-sizing: border-box;
	}
	#menu .item dt{
		width: 100% !important;
	}
	#menu .item dd{
		padding-left: 0;
	}

	/* クーポン デザイン定義 */
	#coupon{
		max-width: 100%;
		box-sizing: border-box;
	}
	
	#coupon-off{
		padding-right: 25px;
		padding-left: 25px;
	}
	
	#coupon-limit{
		padding-right: 25px;
		padding-left: 25px;
	}
	
	#coupon-off h4,
	#coupon-limit h4{
		float: none;
	}
	
	#coupon-off p,
	#coupon-limit p{
		padding-left: 0;
	}
	
	.hpb-layoutset-02 #hpb-wrapper #coupon h3{
		padding-right: 20px;
	}
	
	#coupon h4{
		line-height: 1.4;
		margin-left: 0px;
		max-width: 100%;
	}
	
	#coupon p{
		margin-left: 0px;
	}
	
	/* アクセスマップ */
	#access img{
		float: none;
		padding-left: 0;
	}
	
	/* ご予約 */
	#contact form{
		padding-left: 0;
		padding-right: 0;
	}
	#contact form th, #contact form td{
		padding-bottom: 5px;
	}
	#contact form td input{
		margin-bottom: 3px;
	}
	
}