main section h2.sub-title{text-align:center;font-size:2.4rem;margin-bottom:30px}main section.mph{z-index:0;position:relative;text-align:center;padding-top:200px;background-size:cover;background-position:center;height:600px;line-height:2.4em;background-image:url(../img/pc/ogicafe_top_01.jpg)}@media (max-width: 768px){main section.mph{height:200px;padding-top:90px}}main section.mph p.en{font-size:3.2rem;font-family:arial, sans-serif;font-weight:600;color:#fff;margin-bottom:5px}main section.mph h1.main-title{font-size:3.2rem;color:#fff}main section.block{background-color:#fff;padding:50px 0;background-color:#fff}@media (max-width: 768px){main section.block{padding:25px 0}}main section.block .row div{margin-bottom:20px}main section.block .row div img{width:100%;height:auto;transition:opacity 0.5s}main section.block .row div img:hover{opacity:.8}@media only screen and (max-width: 768px){main section h2.sub-title{font-size:1.8rem;margin-bottom:10px}main section.mph{z-index:0;position:relative;text-align:center;padding-top:200px;background-size:cover;background-position:center;height:400px;line-height:2.4em;background-image:url(../img/sp/ogicafe_top_sp.jpg)}}@media only screen and (max-width: 768px) and (max-width: 768px){main section.mph{height:200px;padding-top:90px}}@media only screen and (max-width: 768px){main section.mph p.en{font-size:1.6rem;line-height:1em;margin-bottom:5px}main section.mph h1.main-title{font-size:1.7rem;line-height:1em}main section.block{background-color:#fff;padding:50px 0;background-color:#fff}}@media only screen and (max-width: 768px) and (max-width: 768px){main section.block{padding:25px 0}}@media only screen and (max-width: 768px){main section.block .row div{margin-bottom:10px}}

/* 元々あった一般画像用のスタイル */
.block .row .col-6 img {
    width: 100%;
    height: 250px;       
    object-fit: cover;   
}

/* -------------------------------------------
   以下、今回のレイアウト（左にQR・右に地図）専用スタイル
------------------------------------------- */

/* 左右のレイアウトを綺麗に整えるベース設定 */
.style-change-row {
    display: flex;
    align-items: center; /* 左右の要素の縦の中心を揃える */
    margin-top: 40px;    /* 上の画像グループとの余白 */
    margin-bottom: 40px; /* 下部との余白 */
}

/* タイトルの文字デザイン */
.sns-title, .map-title {
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 1.4rem;
    text-align: center;
    color: #333;
}

/* 左枠：QRコードを横に2つ並べる設定 */
.qr-flex-box {
    display: flex;
    justify-content: center;
    gap: 30px; /* QRコード同士の横のすき間 */
}

.qr-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-size: 1.2rem;
}

/* 左枠：QRコード画像を一回り大きく固定 */
html body main section.block .container .row .col-6 .qr-flex-box a img.qr-img {
    width: 140px !important;    /* 110pxから140pxに大きく変更 */
    height: 140px !important;   /* 110pxから140pxに大きく変更 */
    object-fit: contain !important;
    margin-bottom: 8px;
    transition: opacity 0.3s;
}
html body main section.block .container .row .col-6 .qr-flex-box a img.qr-img:hover {
    opacity: 0.7;
}

/* 右枠：地図画像が途切れず全体が収まるように少し小さく調整 */
html body main section.block .container .row .col-6 img.map-img {
    width: auto !important;         /* 横幅の強制引き伸ばしを防止 */
    max-width: 100% !important;     /* 枠からはみ出さないように制限 */
    height: auto !important;        /* 縦横比を崩さず自動調整 */
    max-height: 200px !important;   /* 最大高さを250pxから200pxに縮小（これで全体が収まります） */
    object-fit: contain !important; /* 画像が欠けるのを防ぐ */
    margin: 0 auto;
    display: block;
}

/* スマホ表示（画面幅768px以下）の時のレスポンシブ対応 */
@media (max-width: 768px) {
    .style-change-row {
        flex-direction: column; /* スマホでは縦並びにする */
        gap: 35px;
    }
    .left-content-box, .right-content-box {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}