//* --- ベース設定 --- */
:root {
    --main-color: #F3A7AC; /* ロゴのピンク */
    --text-color: #5d4a44; /* ダークブラウン */
    --bg-light: #fcf8f8;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans JP', sans-serif;
    color: #5d4a44;
    background-color: #f5eff1;
    word-wrap: break-word; /* 長いURLなどの改行対策 */
}
.wrapper{
    min-height: 100vh;
    position: relative;/*←相対位置*/
    padding-bottom: 100px;/*←footerの高さ*/
    box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
    background-color: #FFF;
    margin-top:20px;
}

/* --- ヘッダー（レスポンシブ） --- */
.header {
    text-align: center;
    padding-top:50px;
}

.logo img {
    width: 100%;
    max-width: 500px; /* PCサイズ */
    height: auto;
}

h1 {
    font-size: clamp(1.1rem, 5vw, 1.6rem); /* 画面幅に合わせて伸縮 */
    margin: 20px 0 10px;
    background-color: #F3A7AC;
    color:#FFF;
    font-weight: normal;
    margin-top:40px;
    padding:5px;
}
h1 span{
    display: inline;
}

/* --- メインコンテンツ --- */
.info-section {
    background-color: var(--bg-light);
    padding: 5%;
    border-radius: 12px;
}

.info-grid {
    display: flex;
    flex-wrap: wrap; /* 折り返しを許可 */
    gap: 30px;
}

.subjects { flex: 1 1 200px; }
.hours { flex: 1 1 400px; }

/* --- 診療テーブル（スマホ対策） --- */
.table-wrapper {
    width: 100%;
    overflow-x: auto; /* スマホで表がはみ出たら横スクロール可能に */
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    min-width: 500px; /* テーブルが潰れすぎないように保持 */
    border-collapse: collapse;
    background: #fff;
    font-size: 0.9rem;
}
th {
    background-color: #fde9ea;
    padding: 12px 2px;
}

th, td {
    padding: 12px 8px;
    border: 1px solid #bfb9b3;
    text-align: center;
}
td span{
    display:inline;
}


/* アクセスセクション全体のコンテナ */
.access-section {
    padding: 40px 5%;
    border-top: 1px solid #eee;
}

.access-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px; /* 情報と地図の間隔 */
}

/* テキスト情報エリア */
.address-info {
    flex: 1;
    text-align: left;
}

.address-info h3 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: #5d4a44;
}

.address-info p {
    margin-bottom: 15px;
}
.address-info p span{
    display: inline-block;
}

.tel-link {
    font-size: 1.7rem;
    font-weight: bold;
    color: #ce4a68;
    text-decoration: none;
}

/* 地図エリア */
.map-box {
    flex: 2;
    width: 100%;
    height: 350px;
    min-width: 300px;
    background: #eee;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0; /* 下部の隙間消し */
}
.map-box iframe{
    width: 100%;
    height: calc(100vh + 120px);
    margin-top: -170px;
}

/* Instagramボタン周り */
.sns-box {
    margin-top: 30px;
}
.insta-button {
    display: inline-block;
    padding: 15px 50px;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #bc1888);
    color: #fff;
    text-decoration: none;
    border-radius: 15px;
    font-weight: bold;
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.insta-button:hover {
    opacity: 0.7;
}
.insta-caption{
    padding-left: 20px;
}

.insta-caption {
    font-size: 0.8rem;
    color: #999;
    margin-top: 8px;
}
footer{
    width: 100%;
    position: absolute;/*←絶対位置*/
    bottom: 0; /*下に固定*/
}
.foot-copy{
    margin-top:50px;
}
.foot-copy .foot-copywrite{
    background-color:#F3A7AC;
    color:#FFF;
    font-size:10px;
    text-align:center;
    padding:15px;
}

/* --- レスポンシブ設定（スマホ対応） --- */
@media (max-width: 768px) {
    .header{
        padding-top:0;
    }
    h1 span{
    display: inline-block;
    }
    .info-section,.access-section {
        padding:20px 0;
    }
    .info-grid {
        gap:10px;
    }
    table{
        min-width:100%;
    }
    th, td {
    padding: 5px 5px;
    }
    td span{
        display: none;
    }
    .access-container {
        flex-direction: column; /* 縦並びに変更 */
        gap: 30px;
    }

    .address-info {
        text-align: center; /* スマホでは中央寄せ */
        width: 100%;
    }
    .address-info p span{
    display: inline;
    }

    .map-box {
        order: 2; /* 住所の後に地図を表示 */
        height: 300px;
    }
    .map-box iframe{
    height: calc(70vh + 80px);
    }

    .sns-box {
        order: 3; /* 地図の後にインスタボタンを表示（お好みで調整可） */
        margin-top: 20px;
    }
    .insta-caption{
    padding-left: 0;
    }
}