/* CSS for Bongo Acupuncture Clinic Website */
@charset "utf-8";
body {
    font-family: 'Noto Serif JP', serif; /* フォントを明朝体に更新 */
    background-color: rgb(249, 245, 243); /* メインコンテンツエリアの背景色 */
    padding-top: 4rem; /* 新しい固定ヘッダーの高さ分、上部にパディングを追加 */
    scroll-behavior: smooth; /* スムーズスクロールを有効にする */
}

.fixed-top-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4rem;
    background-color: rgb(233, 179, 180); /* 画像の背景色に設定 */
    padding: 0.5rem 1rem; /* パディングを調整 */
    z-index: 1001; /* サイドバーより手前に表示 */
    box-sizing: border-box; /* パディングを幅に含める */
}

.header-bg {
    width: 100%;
    height: 20rem;
    justify-content: center;
    align-items: center;

    background-color: white;
    background-image:
        url('../image/bg_sp_mv.png');
    background-size:
        contain;
    background-position:
        left -20% top;
    background-repeat:
        no-repeat;
}
.header-bg__bongo-sign {

    width: 100%;
    height: 100%;
    background:
        url(../image/bg_bongo_sign_centered.jpg);
        
    /* mask-image: url(../image/mask_scribble.png);
    mask-repeat: no-repeat;
    mask-position: 
        right top;
    mask-size: auto 100%; */

    /* background-image: url('../image/bg_bongo_sign.jpg'); */
    background-position:
        center center;
    background-size: cover;
    background-repeat: no-repeat;

    margin:0 auto;
    position: relative;
}
.header-bg__bongo-sign::before,
.header-bg__bongo-sign::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    z-index: 1;
}
.header-bg__bongo-sign::before {
    border-top: 2rem solid rgb(233, 179, 180);
    border-right: 2rem solid transparent;
    border-bottom: 2rem solid transparent;
    border-left: 2rem solid rgb(233, 179, 180);
    top:-0.8rem;
    left:-0.8rem;
}
.header-bg__bongo-sign::after {
    border-top: 2rem solid transparent;
    border-right: 2rem solid rgb(233, 179, 180);
    border-bottom: 2rem solid rgb(233, 179, 180);
    border-left: 2rem solid transparent;
    bottom:-0.8rem;
    right:-0.8rem;
}


.color-main {
    color: #5a3c28;
}
/* サイドバーのスタイル */
.sidebar {
    width: 12rem;
    background-color: rgb(233,179,180); /* サイドバーの背景色 */
    position: fixed; /* 画面に固定 */
    right: 0; /* 右端に配置 */
    left: auto; /* 左端は自動 */
    top: 0; /* 上端に配置 */
    height: 100%; /* 画面の高さ全体 */
    overflow-y: auto; /* 内容がはみ出したらスクロール可能にする */
    z-index: 1000; /* 他のコンテンツより手前に表示 */
    padding: 4rem 1rem 1rem 1rem;

    /* transition: transform 0.3s ease;
    transform: translateX(0); */

    box-shadow: -4px 0 16px rgba(0,0,0,0.08);
    transition:
        transform 0.4s cubic-bezier(.77,0,.18,1),
        opacity 0.3s cubic-bezier(.77,0,.18,1),
        box-shadow 0.3s;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;

}

.sidebar.slide-in {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    box-shadow: -8px 0 24px rgba(0,0,0,0.16);
    /* transform: translateX(0);
    transition: all 0.3s ease; */
}
.sidebar.hidden-sidebar {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    box-shadow: -4px 0 16px rgba(0,0,0,0.08);

    /* transform: translateX(100%);
    transition: all 0.3s ease; */
}

/* サイドバー内のリンクの文字色を白に設定 */
.sidebar nav ul li a {
    color: #ffffff; /* 文字色を白に設定 */
    display: block; /* aタグをブロック要素にして中央寄せとパディングを適用 */
    padding: 8px 0; /* 上下のパディング */
    text-align: center; /* テキストを中央寄せ */
}
/* サイドバー内のリンクのホバー時の文字色を調整 */
.sidebar nav ul ul li a:hover {
    color: #f0f0f0; /* ホバー時に少し明るい白に */
}
.sidebar nav ul li a .english-text {
    font-size: 1rem; /* 英語表記のフォントサイズを大きく */
    font-weight: 600; /* 太字 */
    text-transform: uppercase; /* 大文字に変換 */
}
.sidebar nav ul li a .japanese-text {
    font-size: 1rem; /* 日本語表記のフォントサイズを大きく */
}
.sidebar nav ul li a .line {
    display: block;
    height: 1px; /* 線の高さ */
    margin: 4px auto; /* 上下のマージンと中央寄せ */
}
.sidebar nav ul li a .white-line-sidebar {
    width: 50%; /* 白い線の幅 */
    background-color: #ffffff; /* 白い線 */
}
.sidebar nav ul li a .brown-line-sidebar {
    width: 30%; /* 茶色い線の幅 */
    background-color: rgb(90, 60, 40); /* 茶色い線 */
}

/* サイドバー開閉ボタンのアニメーション例 */
#toggle-sidebar {
    transition: background 0.2s, box-shadow 0.2s, transform 0.3s;
}
#toggle-sidebar:active {
    transform: scale(0.95) rotate(-5deg);
}
.scroll-target{
    scroll-margin-top: 4rem; /* ヘッダーの高さ分、スクロール位置を調整 */
}

.greeting {
    background-image: url('../image/bg_bongo_pastel.png');
    background-size: 60%;
    background-position: center right; /* 右側中央に配置 */
    background-repeat: no-repeat; /* 追加：画像の繰り返しを防ぐ */
    background-color: rgb(251,249,248);
}
/* 挨拶タイトルのスタイル */
.greeting-title {
    color: rgb(90, 60, 40); /* 茶色い文字色 */
    position: relative;
    z-index: 1;
    display: inline-block;
    padding-right: 1rem;
}
.greeting-title::after {
    content: '';
    position:absolute;
    bottom: -0.7rem; /* 線とテキストの間のスペース */
    left: 0;
    width: 100%; /* 線の幅 */
    height: 40%; /* 線の高さ */
    display: block;
    background-color: #ffffff; /* 白い線 */
    margin: 0.5rem auto; /* 上下のマージンと中央寄せ */
    border-right:rgb(90, 60, 40) 2px solid; /* 右側に茶色い線を追加 */
    border-bottom:rgb(90, 60, 40) 2px solid; /* 右側に茶色い線を追加 */
    z-index: -1;
}

.image-bongo {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像のアスペクト比を維持しつつ、要素のサイズに合わせる */
    display: block;
    border-radius: 2rem; /* 角丸 */
    margin: 0 auto; /* 中央寄せ */
    box-shadow: 0.5rem 0.5rem white;
}

/* メニュータイトルの背景帯スタイル */
.menu-title-strip {
    color: rgb(213, 87, 0);
    font-family: Noto Sans Japan, sans-serif; /* フォントをNoto Sansに設定 */
    margin-bottom: 1rem; /* 下のマージン */
    display: block; /* 背景がテキストの幅に合わせるように */
    position: relative; /* 擬似要素のために相対位置を設定 */
    z-index: 1; /* 他の要素より前面に表示 */
}
.menu-title-strip::after {
    content: '';
    position: absolute;
    background-color: rgb(249, 245, 243);
    display: block;
    margin: -1rem 0 0 0.5rem; /* 上下のマージンと中央寄せ */
    width: 100%; /* 幅を100%に */
    height: 1.5rem;
    z-index: -1; /* 他の要素より前面に表示 */
}

.bg-main {
    background-color: rgb(233, 179, 180); 
}

/* フッターのスタイル */
.footer-custom {
    background-color: rgb(233, 179, 180); /* 画像の背景色に設定 */
    color: #ffffff; /* 文字色を白に設定 */
    padding: 16px 24px; /* 上下のパディングを調整 */
    display: flex; /* Flexboxで内容を配置 */
    justify-content: space-between; /* 両端寄せ */
    align-items: center; /* 垂直方向中央寄せ */
    width: 100%; /* 幅を100%に設定 */
    box-sizing: border-box; /* パディングを幅に含める */
}

/* セクションタイトルの共通スタイル */
.section-title-en {
    color: rgb(90, 60, 40); /* 共通の文字色 */
    font-size: 2.25rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    text-align: center;
    margin-bottom: 0; /* デフォルトのマージンを削除 */
}

.section-title-lines-and-jp {
    display: flex;
    flex-direction: column;
    align-items: center; /* 水平方向中央寄せ */
    margin-bottom: 2rem; /* mb-8相当 */
}

.section-line {
    width: 25%; /* 線の幅を調整 */
    height: 1px;
    margin: 4px 0; /* 線とテキスト間の垂直方向のスペース */
}

.white-line {
    background-color: #ffffff; /* 白い線 */
}

.brown-line {
    background-color: rgb(90, 60, 40); /* 茶色い線 */
    width: 20%; /* 短い茶色い線 */
}

.section-title-jp {
    color: rgb(90, 60, 40); /* 共通の文字色 */
    font-size: 1.125rem; /* text-lg */
    text-align: center;
    margin-top: 1rem; /* 線からのスペース */
}


/* Google Map iframe のスタイル */
.google-map-iframe {
    width: 100%;
    height: 100%; /* 地図の高さ */
    border: 0; /* デフォルトのボーダーを削除 */
    border-radius: 0.5rem; /* rounded-lg に相当 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md に相当 */
}

/* フェードイン・フェードアウトのスタイル */
.fade {
    pointer-events: none;
}
.show {
    animation: fadeIn 0.5s;
    pointer-events: auto;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Responsive styles */
@media (min-width: 768px) {
    body {
        padding-right: 12rem; /* サイドバーの幅分、右側にパディングを追加 */
    }
    body.inquiry-body {
        padding-right: 0;
    }
    .sidebar {
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        box-shadow: none;
        position: fixed;
        right: 0;
        left: auto;
    }
}
@media (max-width: 767px) {
    .sidebar {
        transform: translateX(100%);
    }
    .sidebar.slide-in {
        transform: translateX(0);
    }
    .sidebar.hidden-sidebar {
        transform: translateX(100%);
    }
}