/* リセットCSS */
html,body,div,h1,h2,h3, p, ul, li, img{
    margin: 0;
    padding: 0;
}
body{
    font-family: "UD デジタル 教科書体 NK","UD Digi Kyokasho NK","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
    font-size: 16px;
    line-height: 1.5;
    background-color:#FFF8F2;
}
li{
    list-style: none;
}
table{
    border-collapse: collapse;
    border-spacing: 0;
}
img{
    border: none;
    display: block;
    max-width: 100%;
    height: auto;
}
a{
    text-decoration: none;
}
/* ヘッダー（基準） */
header{
    position: relative; /*メニューの絶対配置の基準*/
}

/* ハンバーガーボタン（PCでは非表示） */
.hamburger{
    display: none;
}

/* ヘッダー */
.headerInner{
    width: 1000px;
    margin: 0 auto;
    padding: 16px 30px;  /* 上下左右余白 */
    display: flex;
    justify-content: flex-start;
    gap: 25px;
    align-items: center;            /* 縦位置を中央 */
}
.logo{
    float: left;
}
.gnav{
    margin-left: auto;
}
.gnav_list{
    display: flex;
    align-items: center;
    gap: 25px;
}
.gnav_btn {
    display: inline-block;
    width: 154px;
    padding: 5px 0;
    background-color: #F08300;
    font-size: 20px;
    color: #FFFFFF;
    border-radius: 9999px;
    font-weight: bold;
    transition: 0.3s;
    text-align: center;
}
.gnav_btn:hover{
    background-color:#e27912;
    transform: translateY(2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* ファーストビュー */
.hero img{
    width: 1400px;
    margin: 0 auto;
    display: block;
    position: relative;
    z-index: 1;
}
.hero{
    position: relative;
}
.hero_btn{
    position: absolute;
    top: 40%;
    left: 26%;
    z-index: 2;
}
.hero_btn a{
    display: block;
    width: 220px;
    padding: 10px 0;
    background-color: #F08300;
    font-size: 25px;
    color: #FFFFFF;
    border-radius: 9999px;
    font-weight: bold;
    transition: 0.3s;
    text-align: center;
}
.hero_btn a:hover{
    background-color: #e27912;
    transform: translateY(2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* 療育内容 */
.service{
    text-align: center;
    margin-top: 77px;
}
.service_title{
    font-size: 30px;
    font-weight: bold;
}
.service_lead{
    font-size: 23px;
    font-weight: 400;
    margin-top: 23px;
}
.service_image{
    margin-top: 23px;
}
.service_image img{
    width: 630px;
    height: 414px;
    margin: 0 auto;
    display: block;
}
/* プログラム内容 */
.program{
    margin-top: 77px;
}
.program_title{
    text-align: center;
    font-size: 30px;
    font-weight: bold;  
}
.program_row{
    margin: 66px auto 0;  /* 中央寄せ */
    max-width: 900px;  /* ← 行の幅を決める（ここ超大事） */
    display: flex;
    gap: 48px;  /* 92pxはデカいw(XDと同じではなく目視で確認) まず40くらい */
    justify-content: center;  /* 念のため中央寄せ */
    align-items: stretch;
}
.program_card{
    flex: 1;  /*横幅を均等に分ける*/
    background-color: #FFFFFF;
    border-radius: 16px;
    padding: 16px;  /* ← 中身の余白がないと全部左に寄る */
    box-sizing: border-box;  /*カードがはみ出さない*/
}
.program_card img{
    width: 100%;  /*幅は親に従え*/
    height: 230px;  /*高さはデザイン都合で決めていい*/
    margin: 0 auto;
    display: block;
    object-fit: cover;  /* 枠いっぱい・はみ出しカット（今回） */
}
/* ピンクのタイトルラベル */
.program_card_title{
    display: block;
    width: 100%;
    padding: 10px 0;
    background-color:#F7A7D3;
    color: #FFFFFF;
    border-radius: 9999px;
    font-weight: bold;
    transition: 0.3s;
    text-align: center;
    margin: 12px auto 0;  /*上　左右　下*/
    white-space: nowrap;
}
.program_text{
    margin: 12px auto 0;  /*ブロック自体を中央寄せ*/
    max-width: 300px; /*文字の横幅を決める*/
    text-align: left;  /*文字は左揃え*/
}
.program_list{
    padding-left: 22px;
    list-style: disc;
    list-style-position: outside;  /*黒丸を文字の内側に*/
    line-height: 1.8;
}
.program_list > li{
    display: list-item; /* これが効くと黒丸復活するケース多い */
    list-style: disc;
}
.program_subtitle{
    margin-top: 16px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}
.program_note{
    margin-top: 6px;
    font-size: 16px;
    color: #2F5D8C;
}
/* スタッフ紹介 */
.staff{
    margin-top: 77px;
}
.staff_title{
    text-align: center;
    font-size: 30px;
    font-weight: bold;  
}
.staff_row{
    margin: 66px auto 0;  /* 中央寄せ */
    max-width: 900px;  /* ← 行の幅を決める（ここ超大事） */
    display: flex;
    gap: 48px;  /* 92pxはデカいw(XDと同じではなく目視で確認) まず40くらい */
    justify-content: center;  /* 念のため中央寄せ */
    align-items: stretch;
    flex-wrap: wrap;   /* 横に入りきらなかったカードは次の段へ */
}
.staff_card{
    flex: 1;  /*横幅を均等に分ける*/
    background-color: #FFFFFF;
    border-radius: 16px;
    padding: 16px;  /* ← 中身の余白がないと全部左に寄る */
    box-sizing: border-box;  /*カードがはみ出さない*/
    flex: 0 0 calc(50% - 24px);  /*2つのカードを横並びにし、かつ要素間に隙間、伸びない縮まない、絶対2枚分の幅*/
    margin-bottom: 16px;
}
.staff_card img{
    width: 100%;  /*幅は親に従え*/
    height: 230px;  /*高さはデザイン都合で決めていい*/
    margin: 0 auto;
    display: block;
    object-fit: cover;  /* 枠いっぱい・はみ出しカット（今回） */
}
/* ピンクのタイトルラベル */
.staff_name{
    display: block;
    width: 100%;
    padding: 10px 0;
    background-color:#F7A7D3;
    color: #FFFFFF;
    border-radius: 9999px;
    font-weight: bold;
    transition: 0.3s;
    text-align: center;
    margin: 12px auto 0;  /*上　左右　下*/
    white-space: nowrap;
}
.staff_text{
    margin: 24px auto 16px;  /*ブロック自体を中央寄せ*/
    text-align: center;  /*文字は中央揃え*/
}
/* ご利用の流れ */
.flow{
    margin-top: 77px;
}
.flow_title{
    text-align: center;
    font-size: 30px;
    font-weight: bold;  
}
.flow_step{
    display: inline-flex;  /*横並び+中身を中央*/
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #F7931E;
    color: #FFFFFF;
    font-weight: bold;
    flex-direction: column;
    line-height: 1;
    gap: 2px;
}
.flow_list{
    max-width: 900px;
    margin: 66px auto 0;
    padding: 0;
}
.flow_text{
    flex: 1;
}
.flow_item_title{
    font-weight: bold;
    margin-bottom: 6px;
}
.flow_item{
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 24px;
}
.flow_step_label{
    font-size: 14px;
    line-height: 1;
}
.flow_step_num{
    font-size: 18px;
    line-height: 1;
}
/* アクセス */
.access{
    margin-top: 77px;
    margin-bottom: 100px;
}
.access_title{
    text-align: center;
    font-size: 30px;
    font-weight: bold;
}
.access_map{
    margin: 40px auto 56px;
    max-width: 600px;
    margin: 23px auto;
}
.access_map img{
    display: block;
    margin: 0 auto;  /*中央寄せ*/
}
.access_cta{
    margin-top: 40px;
    text-align: center;
}
.btn{
    display: inline-block;
    padding: 16px 40px;
    border-radius: 9999px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.25s ease-out;  /*見た目の変化をヌルッとさせる魔法*/
}
.btn_primary{
    background: #E2F09B;
    color: #333;
    font-size: 20px;
}
.btn_primary:hover{
    background-color: #d6eb86;
    transform: translateY(2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /*X軸、y軸、ぼかし、色→左右にずらさずほんのりしたに浮かせてやさしい影を落とす*/
}
/* フッター */
.footer{
    margin-top: 77px;
    border-top: 1px solid #f0f0f0;
}
.footer_inner{
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
.footer_top{
    display: flex;
    justify-content: space-between;
    gap: 40px;
}
.footer_nav{
    display: flex;
    gap: 40px;
    margin-top: 70px;
}
.footer_sns{
    display: flex;
    gap: 12px;
    margin-top: 70px;
}
.footer_bottom{
    margin-top: 40px;
    background-color: #F7A7D3;
    text-align: center;
    padding: 12px auto;
    color: #FFFFFF;
}
.sns_btn:hover img{
    transform: translateY(-2px); /*浮かせる感じ*/
    opacity: 0.8; /*透明度、少し薄くなる*/
}
.footer_brand{
    margin-top: 6px;
}
.footer_address{
    margin-top: 12px;
    margin-left: 15px;
}
header a{
    color: #2f5d8c;
    font-weight: 500;
}
header a:hover{
    color: #F08300;
}
.footer a{
    color: #2f5d8c;
}
.footer a:hover{
    opacity: 0.7;
}


/* =========================
   Mobile (768px)
========================= */
@media (max-width:768px){
    .headerInner{
        width: 100%;
        padding: 12px 16px;
    }
    .headerActions{
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .gnav_btn{
        display: inline-block;
        padding: 6px 14px;
        background-color: #F08300;
        color: #fff;
        border-radius: 9999px;
        font-size: 14px;
        font-weight: bold;
        margin-left: 0;
        margin-right: 8px;
        white-space: nowrap;
    }
    /* ハンバーガー表示 */
    .hamburger{
        display: inline-flex; /*ボタンとして自然に並びつつ、中身を整列したい*/
        align-items: center;  /*縦方向の中央揃え*/
        justify-content: center;  /*横方向の中央揃え*/
        width: 44px;
        height: 44px;
        background: transparent;  /*見た目は完全に自前で管理します*/
        border: none; /*変な枠線、フォーカス時の謎デザインを一旦ゼロにする*/
        cursor: pointer; /*クリックできるとわかる、スマホでは無視されるから副作用なし*/
        margin-left: auto;
        margin-right: 14px;
    }
    /* 三本線 */
    .hamburger__line{  /*真ん中の一本*/
        position: relative; /*疑似要素の基準点*/
        width: 26px;
        height: 2px;
        background: #333;
        display: block;
    }
    .hamburger__line::before,
    .hamburger__line::after{ /*上下の2本*/
        content: ""; /*疑似要素はcontentがないと存在できない*/
        position: absolute; /*自由に動かしたい、重ねたい*/
        left: 0; /*親の左端に揃える、横位置を完全一致させる*/
        width: 26px;
        height: 2px;
        background: #333;
    }
    .hamburger__line::before{ top: -8px;} /*後で回転するときtop基準の方が計算しやすい*/
    .hamburger__line::after{ top: 8px;}

    /* アニメ用：線の変化をヌルッと */
    .hamburger__line::before,
    .hamburger__line::after{
        transition: transform 0.25s ease, top 0.25s ease, opacity 0.2s ease;
    }

    /* 開いたら×にする */
    .hamburger.is-open .hamburger__line{
        background: transparent;  /*真ん中の線を消す*/
    }

    .hamburger.is-open .hamburger__line::before{
        top: 0;
        transform: rotate(45deg);
    }

    .hamburger.is-open .hamburger__line::after{
        top: 0;
        transform: rotate(-45deg);
    }

    /* メニューは普段閉じる */
    .gnav{
        display: none; /*最初は見せません*/
        position: fixed; /*画面基準で固定*/
        top: 60px; /*ヘッダーの下から表示*/
        left: 0;  /*左右を両画面に固定*/
        right: 0; /*両方指定するのがポイント*/
        width: 100vw; /*画面幅、親要素の幅に影響されない*/
        max-width: 100vw; /*謎の横スクロール対策*/
        background: #FFF8F2;
        padding: 0; /*余白は中の「.gnab_list a」に持たせる*/
        box-shadow: none; /*帯メニューなので影はいらない*/
        z-index: 1000; /*とにかく一番手前に出す*/
        overflow-x: hidden; /*横方向にはみ出したものを強制カット*/
    }

    /* リストが横にはみ出すのを防ぐ保険 */
    .gnav_list,.gnav_list li,.gnav_list a{
        width: 100%;
        box-sizing: border-box;
    }

    /* 開いたら表示 */
    .gnav.is-open{ display: block;}

    /* 縦並びにする */
    .gnav_list{
        display: flex;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 0;
    }

    /* 各リンク：行として押せるように */
    .gnav_list a{
        display: block; /*横一杯を押せる面にする*/
        padding: 14px 16px;
        font-weight: bold;
        border-top: 1px solid rgba(240, 131, 0, 0.4);
    }

    /* hover（PCでSP表示して確認する用） */
    .gnav_list a:hover{
        background: rgba(255, 255, 255, 0.12);
    }

.gnav_list li:last-child a{
    border-bottom: 1ps solid rgba(240, 131, 0, 0.4);
}

    /* SPではボタン枠のliを普通に見せるなら任意で調整 */
    .gnav_btn a{
        display: inline-block;
        padding: 10px 14px;
    }

    .hero_btn{
        top: 40%;
        left: 30%;
        transform: translateX(-50%);
    }

    .hero_btn a{
        width: auto;
        padding: 10px 20px;
        font-size: 16px;
    }

    .program_row{
        flex-direction: column;
        /* gap: 24px;     /* カード同士の縦間隔*/
        max-width: 100%;
        padding: 0 16px;  /* 両画面ベタ防止*/
    }

    .program_card_title{
        white-space: normal;
        line-height: 1.4;
        width: auto;           /*100％をやめる*/
        display: inline-block; /*中身サイズに*/
        margin:  12px auto 0;  /*親の中央へ*/
        padding: 12px 20px;
        text-align: center;
    }

    .program_card{
        width: 100%;
    }

    .staff_row{
        flex-direction: column;
        gap: 24px;
        padding: 0 16px;
    }

    .staff_card{
        flex: none;  /*これ超重要*/
        width: 100%;
    }

    .program_card img,
    .staff_card img{
        height: 260px;
        object-position: center 30%; /*顔が切れないように*/
    }

    .footer_nav a{
        white-space: nowrap;
    }

    .footer_top{
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .footer_sns{
        margin-top: 16px;
    }

    .flow,.service,.access_map{
        padding: 0 16px;
    }

}