/* TOP画像 */
#store1-top {
    background-image: url('../img/store1/top1.jpg'); /* 画像のURLを指定 */
}
#store2-top {
    background-image: url('../img/store2/top.jpg'); /* 画像のURLを指定 */
}
#store3-top {
    background-image: url('../img/store3/top.jpg'); /* 画像のURLを指定 */
}
#store4-top {
    background-image: url('../img/store4/top.jpg'); /* 画像のURLを指定 */
}

.store-top{
    width: 100%;
    height: auto;
    max-height: 1080px; /* 最大高さを設定 */
    object-fit: cover; /* 画像のアスペクト比を維持しつつ、要素のサイズに合わせる */
    background-repeat: no-repeat; /* 背景画像を一回だけ表示 */
    background-size: cover; /* 画像を要素全体に伸ばす（アスペクト比維持） */
    background-position: center top; /* 画像の上部を表示し、水平方向は中央 */
    display: flex; /* 左右に配置 */
    height: 100vh; /* 画面全体の高さに設定 */
    margin-left: 150px; /* PC表示時にサイドバー分の余白を追加 */
    width: calc(100% - 150px); /* サイドバーを除いた幅を計算 */
    position: relative; /* 子要素の絶対位置配置のために相対位置を設定 */
}

#store1-center {
    background-image: url('../img/store1/center.jpg'); /* 画像のURLを指定 */
}

#store2-center {
    background-image: url('../img/store2/center.jpg'); /* 画像のURLを指定 */
}

#store3-center {
    background-image: url('../img/store3/center.jpg'); /* 画像のURLを指定 */
}
#store4-center {
    background-image: url('../img/store4/center.jpg'); /* 画像のURLを指定 */
}


.store-center{
    width: 100%;
    height: auto;
    max-height: 1080px; /* 最大高さを設定 */
    object-fit: cover; /* 画像のアスペクト比を維持しつつ、要素のサイズに合わせる */
    background-repeat: no-repeat; /* 背景画像を一回だけ表示 */
    background-size: cover; /* 画像を要素全体に伸ばす（アスペクト比維持） */
    background-position: center top; /* 画像の上部を表示し、水平方向は中央 */
    display: flex; /* 左右に配置 */
    height: 100vh; /* 画面全体の高さに設定 */
    margin-left: 150px; /* PC表示時にサイドバー分の余白を追加 */
    width: calc(100% - 150px); /* サイドバーを除いた幅を計算 */
}

.store_logo{
    max-width: 100px;
    height: auto; /* 比率を保つためにheightをautoに設定 */
    width: auto; /* 幅も自動調整 */
    margin: 20px auto 10px auto;
    display: block;
    object-fit: contain; /* 画像の比率を維持 */
}

.store-top-logo {
    max-width: 200px;
    height: auto; /* 比率を保つためにheightをautoに設定 */
    width: auto; /* 幅も自動調整 */
    position: absolute; /* 絶対位置で配置 */
    top: 20px; /* 上から20pxの位置 */
    right: 20px; /* 右から20pxの位置 */
    object-fit: contain; /* 画像の比率を維持 */
    z-index: 10; /* 他の要素より前面に表示 */
}

/* store1-center-textのスタイル */
.store-center-text {
    position: relative;
    background: white;
    border-radius: 10px;
    padding: 40px 30px;
    margin: 40px;
    text-align: center;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 外側をぼかすマスク効果 */
    -webkit-mask: 
        linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-composite: intersect;
    mask: 
        linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
    mask-composite: intersect;
}

.store-center-text::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.05); /* 内側から外側に向かって薄くぼかす */
    pointer-events: none;
    z-index: 1;
}

.store-center-text > * {
    position: relative;
    z-index: 2; /* コンテンツを疑似要素より前面に */
}

.store-center-text pre {
    text-align: center; /* preタグ内のテキストも中央寄せ */
    font-family: "Noto Serif JP", serif; /* フォントファミリーを統一 */
    white-space: pre-wrap; /* 改行を保持しつつ、長い行は折り返す */
    line-height: 1.6; /* 行間を調整 */
}

/* store1-info（店舗情報）のスタイル */
#store1-info {
    background-color: #A30000; /* サイドバーと同じ色 */
    color: white; /* 文字色を白 */
    padding: 40px 20px;
    margin-left: 150px; /* PC表示時にサイドバー分の余白を追加 */
    width: calc(100% - 150px); /* サイドバーを除いた幅を計算 */
    display: flex; /* 横並びに配置 */
    justify-content: space-around; /* 3分割で均等配置 */
    align-items: flex-start;
    text-align: center;
}

#store1-info > div {
    flex: 1; /* 各項目を均等に配分 */
    padding: 0 20px;
    line-height: 1.6;
}

#store1-info br {
    margin-bottom: 10px;
}

#store1-info span {
    font-size: 0.9rem; /* 注意書きを少し小さく */
    opacity: 0.9;
}

.info-head {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 8px;
    display: inline-block;
}

/* store1-map（Googleマップ）のスタイル */
#store1-map {
    margin-left: 150px; /* PC表示時にサイドバー分の余白を追加 */
    width: calc(100% - 150px); /* サイドバーを除いた幅を計算 */
    height: 400px; /* マップの高さを設定 */
    padding:0px;
}

#store1-map iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* スマホ表示時の調整 */
@media (max-width: 767.98px) {
    #store1-top {
        margin-left: 0; /* スマホではサイドバーがないので余白を削除 */
        width: 100%; /* 全幅表示 */
    }
    
    #store1-center {
        margin-left: 0;
        width: 100%;
    }
    
    #store1-info {
        margin-left: 0; /* スマホではサイドバーがないので余白を削除 */
        width: 100%; /* 全幅表示 */
        flex-direction: column; /* 縦並びに変更 */
        text-align: left;
    }
    
    #store1-info > div {
        margin-bottom: 20px;
        padding: 0 10px;
    }
    
    #store1-map {
        margin-left: 0;
        width: 100%;
        height: 300px; /* スマホでは少し低く */
    }
}