@charset "utf-8";
/*------------------------------------------------------------ */
body
{
color: #333333;
letter-spacing: 1px;
line-height: 1.8;
font-family: "Noto Serif JP", serif;
/*font-family: "Meie Script", cursive;*/
background: #f8f8f8;
}

img
{
vertical-align: bottom;
}

.main
{
position: relative;
}

header
{
width: 100%;
padding: 0.5rem 0;
position: absolute;
top: 0;
left: 0;
background:rgba(255,255,255,0.8);
}

header div
{
width: 1200px;
max-width: 90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

header div ul
{
display: flex;
}

header div ul li
{
margin-left: 1rem;
}

header+div
{
width: 400px;
max-width: 90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
position: absolute;
top: 25%;
left: 40%;
}

header+div a
{
width: 100%;
margin-top: 1rem;
padding: 1rem;
color: #fff;
text-decoration: none;
display: block;
text-align: center;
background:rgba(179,145,102,0.8);
border: 1px solid #9c7c40;
font-size: 1.2em;
position: relative;
}

header+div a:hover
{
opacity: 0.8;
}

header+div a:before {
  content: '';
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 12%;
  margin-top: -9px;
}
header+div a:after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #9c7c40;
  border-right: solid 2px #9c7c40;
  position: absolute;
  top: 45%;
  right: 13.5%;
  transform: rotate(45deg);
}



h2
{
padding-right: 1rem;
margin-bottom: 5rem;
color: #9a7e42;
text-align: center;
font-size: 4em;
font-family: "Meie Script", cursive;
}

h2 small
{
margin: -1rem 0 0 1rem;
font-size: 0.3em;
display: block;
font-family: "Noto Serif JP", serif;
}

.sec
{
width: 1200px;
max-width: 90%;
margin: 10rem auto 0 auto;
}

.about ul
{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

.about ul li
{
width: 48%;
}

.about ul li h3
{
font-size: 2em;
display: block;
margin-bottom: 2rem;
}

.about ul li p
{
margin-top: 1rem;
}

.menu
{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.menu .menu_list
{
width: 20%;
background: #f6f0e2;
text-align: center;
margin-bottom: 1rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.menu .menu_list h4
{
color: #9a7e42;
font-size: 3.5em;
line-height: 1;
font-family: "Meie Script", cursive;
padding-right: 20px;
}

.menu .menu_list h4+small
{
display: block;
margin-top: -0.5rem;
}

.menu .menu_list+li
{
width: 79%;
margin-bottom: 1rem;
}

.menu .menu_list+li ul
{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.menu .menu_list+li ul li
{
width: 49%;
margin-bottom: 0.5rem;
font-size: 0.8em;
}


/* スライダー全体の囲み設定（矢印の位置基準） */
.b_a {
    position: relative;
    padding: 0 50px; /* 左右に矢印が乗るスペースを空ける */
    margin: 0 auto;
    list-style: none;
}

/* 各スライドの調整 */
.b_a li {
    margin: 0 10px; /* スライド同士の隙間 */
    outline: none;
}

.b_a li img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px; /* 画像の角丸（必要に応じて） */
}

.b_a li p {
    margin-top: 10px;
    font-size: 0.9rem;
    color: #333;
    text-align: left;
}

/* 共通：オリジナルの丸型矢印デザイン */
.b_a .slick-prev,
.b_a .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background-color: #c5b38a; /* 画像のようなゴールド・ベージュ系 */
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
}

.b_a .slick-prev:hover,
.b_a .slick-next:hover {
    background-color: #a8966d; /* ホバー時に少し暗く */
}

/* 矢印の左右の配置位置 */
.b_a .slick-prev {
    left: 0;
}

.b_a .slick-next {
    right: 0;
}

/* --- スマホ用の微調整 --- */
@media screen and (max-width: 767px) {
    .b_a {
        padding: 0; /* スマホ時は全幅で見せるためパディングをリセット */
    }
    
    /* センターモード時に中央じゃないスライドの透明度を下げて引き立たせる場合（お好みで） */
    .b_a .slick-slide {
        opacity: 0.5;
        transition: opacity 0.3s;
    }
    .b_a .slick-center {
        opacity: 1;
    }
    
    /* スマホ時の矢印の位置を写真の上に被せる */
    .b_a .slick-prev {
        left: 10px;
    }
    .b_a .slick-next {
        right: 10px;
    }
}



/* アコーディオン全体の枠組み */
.faq-accordion {
    max-width: 1000px; /* 必要に応じて調整してください */
    margin: 0 auto;
}

/* 質問（タイトル）のスタイル */
.faq-accordion dt {
    position: relative;
    padding: 15px 50px 15px 55px; /* 左右のアイコン分の余白 */
    background-color: #f6f0e2;   /* 薄いベージュ背景 */
    color: #4a4a4a;
    font-size: 1rem;
    cursor: pointer;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    transition: background-color 0.3s;
}

/* 質問「Q」アイコン（before） */
.faq-accordion dt::before {
    content: "Q";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-color: #bfa77a; /* Qの丸背景（ゴールド） */
    color: #fff;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: serif;
}

/* 右端の「＋」「ー」アイコン（after） */
.faq-accordion dt::after {
    content: "＋";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #bfa77a;
    font-size: 1.2rem;
    font-weight: 300;
}

/* 開いている状態（.is-open）の「ー」切り替え */
.faq-accordion dt.is-open::after {
    content: "ー";
}

/* 回答（中身）のスタイル */
.faq-accordion dd {
    position: relative;
    padding: 15px 20px 25px 55px; /* 左側はQアイコンの位置と揃える */
    margin: 0 0 10px 0;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.7;
    display: none; /* 初期状態は非表示（jQueryで制御） */
}

/* 回答「A」アイコン（before） */
.faq-accordion dd::before {
    content: "A";
    position: absolute;
    left: 22px;
    top: 15px; /* padding-topと同じ位置に固定 */
    color: #bfa77a; /* Aは背景なしのゴールド文字 */
    font-size: 1.2rem;
    font-weight: bold;
    font-family: serif;
}


.staff
{
text-align: center;
}

.staff p
{
margin-top: 1rem;
}

.staff small
{
display: block;
}


/* --- 共通・PC用の設定 --- */
.shop-info-list {
    display: grid;
    /* 左（項目）を25%、右（内容）を75%の幅で2カラムに並べる */
    grid-template-columns: 25% 75%; 
    width: 100%;
    max-width: 900px; /* 全体の最大幅（必要に応じて調整してください） */
    margin: 0 auto;
    padding: 0;
    list-style: none;
    border-top: 1px solid #ccc; /* 一番上の線 */
    border-left: 1px solid #ccc; /* 一番左の線 */
}

.shop-info-list li {
    padding: 20px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
    border-right: 1px solid #ccc;  /* 右側の線 */
    border-bottom: 1px solid #ccc; /* 下側の線 */
    box-sizing: border-box;
}

/* 奇数番目のli（住所、営業時間などの項目名）のスタイル */
.shop-info-list li:nth-child(odd) {
    background-color: #fafafa; /* 項目側の薄いグレー背景 */
    text-align: center;         /* 文字を中央揃え */
    display: flex;
    align-items: center;        /* 上下中央揃え */
    justify-content: center;
}

/* 偶数番目のli（住所データ、アクセス詳細などの内容）のスタイル */
.shop-info-list li:nth-child(even) {
    background-color: #fff;    /* 内容側は白背景 */
    text-align: left;          /* 文字を左揃え */
}


/* --- スマホ用（767px以下）の設定 --- */
@media screen and (max-width: 767px) {
    .shop-info-list {
        /* スマホ時は1カラム（縦並び）に変更 */
        grid-template-columns: 100%;
        border-right: 1px solid #ccc; /* スマホ時は右側の線を親に持たせる */
    }

    .shop-info-list li {
        padding: 12px 15px; /* スマホ用に余白を少し狭く */
    }

    /* スマホ時の項目名（上側） */
    .shop-info-list li:nth-child(odd) {
        justify-content: flex-start; /* 左揃えにする */
        border-bottom: none;          /* 項目と内容の間の線を消す（一体感を出すため） */
        font-weight: bold;            /* 項目名を少し見やすく */
        padding-bottom: 5px;          /* 下の隙間を少し詰める */
    }
    
    /* スマホ時の内容（下側） */
    .shop-info-list li:nth-child(even) {
        padding-top: 5px; /* 上の隙間を少し詰める */
    }
}



.accsess iframe
{
margin-bottom: 2rem;
}



.accsess+div
{
text-align: center;
margin: 5rem 0;
}


.accsess+div a
{
width: 350px;
margin: 1rem auto 2rem auto;
padding: 1rem;
color: #fff;
text-decoration: none;
display: block;
text-align: center;
background:rgba(179,145,102,0.8);
border: 1px solid #9c7c40;
font-size: 1.2em;
position: relative;
}

.accsess+div a:hover
{
opacity: 0.8;
}

.accsess+div a:before {
  content: '';
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 12%;
  margin-top: -9px;
}
.accsess+div a:after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #9c7c40;
  border-right: solid 2px #9c7c40;
  position: absolute;
  top: 45%;
  right: 14%;
  transform: rotate(45deg);
}

.pconly
{
display: block;
}

.sponly
{
display: none;
}


@media screen and (max-width:769px) {
.pconly
{
display: none;
}

.sponly
{
display: block;
}

img
{
max-width: 100%;
}

header div
{
display: block;
font-size: 0.8em;
text-align: center;
}

header + div
{
left: 5%;
}

header + div img
{
max-width: 100%;
}

.sec
{
margin-top: 5rem;
}

.sec h2
{
font-size: 3em;
}

.about ul
{
display: block;
}

.about ul li
{
width: 100%;
}

.about ul li:first-child
{
margin-bottom: 1rem;
}

.about ul li h3
{
font-size: 1.5em;
}

.menu
{
display: block;
}

.menu .menu_list
{
width: 100%;
padding: 1rem 0;
}

.menu .menu_list h4
{
font-size: 2em;
}

.menu .menu_list + li
{
width: 100%;
}

.accsess+div
{
width: 80%;
margin: 5rem auto 3rem auto;
}

.accsess+div img
{
width: 50%;
}
.accsess+div a
{
width:100%;
}


header + div a::after ,.accsess+div a:after
{
right: 14%;
}




}