/* ======================================================= */
/* スクールネームセットページ専用スタイル */
/* ======================================================= */

/* ページタイトルビジュアル */
.page-header-visual {
    text-align: center;
    margin-bottom: 20px;
}
.page-header-visual img {
    max-width: 100%;
    height: auto;
}

/* 注意書き情報（最少受注単位など）*/
.info-notice {
    font-size: 0.8em;
    padding: 10px 0;
    margin: 10px 0 20px;
    text-align: left;
    border-bottom: 1px solid #ccc;
}
.info-notice .bullet {
    color: gray;
    margin-right: 5px;
}

/* 各製品タイプセクション */
.product-type-section {
    margin-bottom: 40px;
}

.type-header {
    display: flex;
    align-items: flex-end;
    gap: 15px;
    margin-bottom: 10px;
}
.type-header img {
    max-width: 170px; /* 画像幅を固定 */
    height: auto;
}
.type-header .type-link {
    font-size: 0.9em;
    white-space: nowrap;
}
.type-header .type-catchphrase {
    color: #cc0000;
    font-size: 1.1em;
    font-weight: bold;
    margin: 0;
}

.type-description {
    margin-bottom: 15px;
    font-size: 0.95em;
}
.type-description .small-text {
    font-size: 0.8em;
    color: #696969;
}

.set-intro {
    font-size: 0.9em;
    text-align: right;
}

/* 各セットアイテムのレイアウト */
.product-set-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 20px 0;
}
.set-image {
    flex-shrink: 0;
    max-width: 180px; /* 画像の元の幅 */
}
.set-image img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #ddd;
}
.set-details {
    flex-grow: 1;
}
.set-title {
    font-size: 1.4em;
    margin: 0 0 5px;
}
.set-size {
    font-size: 0.9em;
    margin: 0 0 10px;
}
.set-content-title {
    font-weight: bold;
    margin: 10px 0 0;
}
.set-content {
    font-size: 0.9em;
    margin: 5px 0 15px;
}

/* 注文ボタンエリア */
.order-link-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.order-link-btn img {
    max-width: 191px; /* 注文書ボタンの最大幅 */
    height: auto;
}

/* ページ内リンク */
.product-links-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8em;
    padding: 10px 0;
}
.page-nav-links {
    text-align: right;
    white-space: nowrap;
}

/* サイズ表セクション */
.size-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.size-header img {
    max-width: 170px;
    height: auto;
}
.size-notice {
    font-size: 0.85em;
    margin: 0;
}

/* サイズ表画像（レスポンシブコンテナは共通CSSで定義済み）*/
.responsive-table-container img {
    width: 100%;
    height: auto;
    /* 元の画像が585pxなので、幅いっぱいにする */
}

/* 使用上の注意 */
.usage-notes {
    margin-top: 20px;
    font-size: 0.9em;
}
.usage-notes ul {
    padding-left: 20px;
}

/* ページ最下部ナビ */
.page-bottom-nav {
    text-align: center;
    margin: 40px 0 20px;
}
.page-bottom-nav img {
    margin-bottom: 10px;
    max-width: 34px;
}
.page-bottom-nav p {
    margin: 0;
}


/* ======================================================= */
/* スマホ対応 (Max-width: 650px) */
/* ======================================================= */
@media (max-width: 650px) {
    
    /* 製品セットアイテムを縦積み */
    .product-set-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .set-details {
        text-align: left;
    }
    
    .set-image {
        max-width: 80%; /* スマホで見やすいサイズに調整 */
        margin-bottom: 15px;
    }

    /* 注文ボタンエリアを中央寄せ */
    .order-link-group {
        justify-content: center;
    }

    /* ページ内リンク */
    .product-links-bottom {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    .page-nav-links {
        text-align: center;
        white-space: normal;
    }
    
    /* サイズ表ヘッダー */
    .size-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .size-header img {
        margin-bottom: 10px;
    }
    .size-notice {
        text-align: center;
    }
}