/* 基本リセット */
body, h2, h3, p {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    line-height: 1.6;
    color: #333;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
}

/* イエローエリア全体の調整 */
/* --- メインビジュアルエリアの修正 --- */

/* --- 25行目付近の背景色を更新 --- */

.hero-section {
    background-color: rgb(255, 245, 126); /* 新しい黄色に更新 */
    width: 100%;
    height: 1080px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-container {
    position: relative;
    width: 100%;
    max-width: 1920px;
    height: 100%;
    /* コンテナ自体を中央に固定 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* --- 70行目付近（PC版のメイン設定）に追加 --- */

.hero-text {
    font-size: 2.8rem;       /* 3.5remから少し絞って上品に */
    letter-spacing: 0.4em;   /* 間隔を広げて、横の広がりを強調 */
    margin-bottom: 40px;     /* ロゴとの間隔を広げて呼吸させる */
    z-index: 10;
}
/* 中央のロゴとテキストの塊を正しく配置 */
.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    /* 画面中央付近に配置 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-subtext {
    font-size: 42px; /* 少し大きくしました */
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    letter-spacing: 0.1em;
    font-weight: bold;
}

.main-logo {
    width: 700px; /* junior.pngのサイズに合わせて調整してください */
    height: auto;
}

/* 楽器の配置（絶対配置で固定） */
.instrument {
    position: absolute;
    z-index: 1;
}

/* --- メインビジュアル内の画像調整 --- */

/* ホルン（左側）の調整 */
/* --- 85行目付近：ホルン（左）の調整 --- */
/* --- 85行目付近：ホルン（左）の調整 --- */
.horn {
    /* 現在の 28% から、サックス（32%〜35%）に負けないサイズに拡大 */
    width: 35%; 
    height: auto;
    position: absolute;
    /* 大きくなった分、少し左端の外に逃がして、文字との間隔を保ちます */
    left: -6%;   
    /* 高さは現状の 42% を維持、または少し調整 */
    top: 42%;    
    transform: translateY(-50%);
    z-index: 1;
}

/* サクソフォン（右側）の調整 */
sax {
    /* ホルンとのバランスを見て 35%〜40% 程度に */
    width: 35%; 
    height: auto;
    position: absolute;
    right: 10px;  /* 右からの位置 */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

/* 楽器が小さくなった分、中央のロゴが目立つように調整が必要な場合 */
.hero-logo, .main-logo {
    width: 650px;            /* 24インチモニターで最も美しく見えるサイズに固定 */
    margin-top: -20px;
}

.sax {
    width: 494px;
    height: auto;
    /* 右側に寄せて中央から少し浮かす */
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* 以降のセクション（Green以降）は以前のままでOKです */
/* キャッチコピーエリア (Green) */
.catch-section {
    background-color: #009b85; /* ラフの緑色 */
    color: #000;
    padding: 60px 0;
}

.catch-section h2 {
    font-size: 42px;
    margin-bottom: 30px;
    font-weight: bold;
}

.intro-text {
    /* 1. 箱の最大幅をしっかり広げます（1200px程度） */
    max-width: 1200px; 
    
    /* 2. 幅を自動調整にしつつ、中央に配置 */
    width: fit-content;
    margin: 0 auto;
    
    /* 3. 中身は左揃え */
    text-align: left;
    
    /* 4. 念のため、単語の途中で強制改行されないように設定 */
    word-break: normal;
    overflow-wrap: normal;
}

.intro-text p {
    font-size: 20px;
    line-height: 1.8;
    margin-bottom: 24px;
    /* 改行をブラウザに任せ、可能な限り1行を長く保つ */
    white-space: nowrap; 
}

/* 画面が小さいスマホなどの時は、はみ出さないように自動改行に戻す設定 */
@media (max-width: 1200px) {
    .intro-text p {
        white-space: normal;
    }
}

/* 詳細説明エリア */
/* --- 白い詳細エリアの調整 --- */
.info-section {
    padding: 60px 0;
    background-color: #fff;
    width: 100%;
}

/* --- 白い詳細エリアの最終調整 --- */

/* --- 白い詳細エリアの最終調整（改行防止版） --- */

.detail-box {
    max-width: 1300px; /* 余裕を持って幅を広げます */
    width: 95%;
    margin: 0 auto;
    text-align: left;
}

.detail-box p {
    font-size: 16px;
    line-height: 2.0; /* 行間を少し広げると、よりラフの印象に近づきます */
    margin-bottom: 24px;
    
    /* 以下の3点セットで「勝手な改行」をブロックします */
    white-space: nowrap;      /* 基本的に折り返さない */
    display: block;           /* ブロックとして扱う */
}

/* 画面が狭いスマホなどで、横に突き抜けないための設定 */
@media (max-width: 1200px) {
    .detail-box p {
        white-space: normal;  /* 画面幅が1200px以下の時は自動改行を許可 */
        word-break: keep-all; /* ただし、単語の途中では切らない */
    }
}
.contact-info {
    margin-top: 40px;
    text-align: center;
    font-weight: bold;
}

/* 指導陣エリア */
/* 指導陣カード全体のスタイル */
/* 指導陣のグリッド：幅を少し広げ、余裕を持たせる */
/* 指導陣のグリッド：カード間の隙間を広げる */
./* 指導陣のグリッド：ここですべての列を強制的に均等にします */
.instructor-grid {
    display: grid;
    /* 1fr（均等な1つの枠）を4つ並べるという指定です */
    grid-template-columns: 1fr 1fr 1fr 1fr; 
    
    gap: 30px; 
    max-width: 1200px; 
    margin: 0 auto 40px;
    width: 100%; /* 親要素に対して100%広がるようにします */
}

/* --- 指導陣エリア：横4列・縦2列のグリッド設定 --- */
.instructor-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px; /* 30pxから20pxに少し詰めると、カード1枚の幅が広がります */
    max-width: 1200px;
    width: 95%;
    margin: 0 auto 50px;
}

/* --- カード自体の設定 --- */
.instr-card {
    border: 1px solid #2e5ea8;
    /* 左右の余白を 12px から 8px に減らして、文字が使える幅を広げます */
    padding: 15px 8px; 
    text-align: left;
    color: #2e5ea8;
    min-height: 110px; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
}

/* 所属・肩書き：1文字落ちを防ぐための微調整 */
.instr-card .desc {
    /* 10.5px から 10px にほんの少しだけ小さくします */
    font-size: 10px; 
    line-height: 1.4;
    display: block;
    
    /* 単語の途中で改行させない */
    word-break: keep-all; 
    overflow-wrap: normal;
    
    /* 文字の間隔を少しだけ詰め、1行に入る文字数を増やします */
    letter-spacing: -0.02em; 
}

/* 楽器名も少し詰めます */
.instr-card .part {
    font-size: 12px;
    margin-bottom: 3px;
}

/* 氏名も少しだけサイズ調整 */
.instr-card .name {
    font-size: 19px;
    font-weight: bold;
    margin-bottom: 6px;
    white-space: nowrap;
}

.more-info-box {
    border: 1px solid #2e5ea8;
    border-radius: 40px; /* 角を丸く */
    display: inline-block;
    padding: 15px 50px;
    color: #2e5ea8;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
}

.profile-link {
    display: block;
    color: #ff3366; /* ピンク色 */
    font-size: 12px;
    text-decoration: underline;
    margin-top: 5px;
}

/* --- 応募ボタンエリアの調整 --- */
.btn-area {
    /* 上の要素（Click to profilesの枠）との距離を広げます */
    margin-top: 80px; 
    
    /* 下側にページが終わるための余白も作っておきます */
    margin-bottom: 100px; 
    
    text-align: center;
}

<div class="btn-area">
    <a href="oubo/oubo.html">
        <img src="oubo.png" alt="応募はこちら" class="apply-btn">
    </a>
</div>

/* 簡易レスポンシブ (画面が狭い時) */
@media (max-width: 1200px) {
    .hero-section { height: auto; padding: 100px 0; }
    .horn, .sax { position: relative; width: 40%; height: auto; transform: none; left: auto; right: auto; margin: 20px; }
    .instructor-grid { grid-template-columns: repeat(2, 1fr); }
}
/* --- 指導陣セクションタイトルの調整 --- */
.section-title {
    color: #2e5ea8;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    
    /* カードとの距離を離すために数値をアップ（40pxから70pxへ） */
    margin-top: 80px;    /* 上のテキストとの距離 */
    margin-bottom: 70px; /* 下のカードとの距離 */
    
    /* もし文字の間隔もラフに合わせるなら */
    letter-spacing: 0.1em;
}

/* カード内の名前リンクのスタイル */
.instr-card .name a {
    color: inherit; /* 親要素の色（#2e5ea8）を引き継ぐ */
    text-decoration: none; /* 最初は下線を消しておく */
}

.instr-card .name a:hover {
    text-decoration: underline; /* マウスを乗せた時だけ下線を表示 */
    opacity: 0.8; /* わずかに薄くして「クリックできる」ことを伝える */
}
.bottom-action-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-top: 50px;
    width: 100%;
}
/* --- スマートフォン向け設定 (画面幅768px以下) --- */
@media (max-width: 768px) {
    
    /* 1. メインビジュアルの調整 */
    .hero-container {
        height: auto;
        padding: 40px 10px;
        position: relative;
        overflow: hidden;
    }

    /* 楽器を少し小さくして、端に寄せるか背景に薄く配置 */
    .horn, .sax {
        width: 25%; 
        opacity: 0.6; /* 文字を読みやすくするために少し薄くするのも手です */
    }

    /* 2. 指導陣のグリッドを「2列」または「1列」にする */
    .instructor-grid {
        grid-template-columns: repeat(2, 1fr); /* 2列にする場合 */
        /* もっとゆったりさせたい場合は repeat(1, 1fr) にしてください */
        gap: 15px;
        padding: 0 15px;
    }

    /* 3. 「その他〜」のボックスとボタンの幅を調整 */
    .more-info-box {
        width: 90%;
        padding: 15px 20px;
        border-radius: 25px; /* 角丸を少し控えめに */
    }

    .apply-btn {
        width: 80%; /* 応募ボタンを画面に合わせて適度な大きさに */
        height: auto;
    }
}
/* --- すべての要素の基本設定 --- */
* {
    box-sizing: border-box; /* 枠線や余白を幅に含める設定（はみ出し防止） */
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* 横スクロールを強制的に禁止する */
}

/* --- 400行目以降：ここから差し替え --- */

/* 1. PC・スマホ共通設定 */
img {
    max-width: 100%;
    height: auto;
}

/* 下部エリア（その他〜と応募ボタン）をPCでもスマホでも中央に */
.bottom-action-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-top: 50px;
    width: 100%;
    text-align: center;
}

.more-info-box {
    border: 1px solid #2e5ea8;
    border-radius: 40px;
    display: inline-block;
    padding: 20px 50px;
    color: #2e5ea8;
    max-width: 800px;
}

/* 2. スマートフォン向け設定 (768px以下) */
/* --- 400行目以降のスマホ用設定を上書き --- */
/* 216行目から下を、この内容に丸ごと入れ替えてください */
@media screen and (max-width: 768px) {
    .hero-section {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 20px;
    }

    .hero-text {
        font-size: 1.1rem !important;
        letter-spacing: 0.1em !important;
        margin-bottom: 20px !important;
        z-index: 30 !important;
        /* ↓ nowrap（改行禁止）を normal（改行許可）に変更しました */
        white-space: normal !important; 
    }

    .hero-logo, .main-logo {
        width: 85% !important;
        height: auto;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        z-index: 10 !important;
    }

    /* --- フォームと文章をスマホの枠内に収める設定を追加 --- */
    .box_out, .box_in {
        width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box;
    }

    #form table, #form tbody, #form tr, #form td {
        display: block !important;
        width: 100% !important;
    }

    #form tr {
        margin-bottom: 15px;
        border-bottom: 1px solid #eee;
    }

    #form td {
        border: none !important;
        padding: 5px 0 !important;
    }

    #form input[type="text"],
    #form input[type="email"],
    #form select {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 文章が横に突き抜けるのを防ぐ設定 */
    p, div, span, td {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        display: block !important;
    }
}