/*
 * usces_cart.css - 子テーマ
 * 商品詳細ページ・カートページのスタイル改修
 * Welcart Basicの親テーマCSS後に読み込まれる
 */

/* =============================================
   商品詳細ページ全体
   ============================================= */
.single-post #primary.site-content,
.single #primary.site-content {
    width: 100%;
    max-width: 100%;
}

#itempage {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    padding: 0 0 40px;
}

/* =============================================
   商品画像
   ============================================= */
#img-box {
    flex: 0 0 45%;
    max-width: 45%;
}
#img-box .itemimg {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #DDE3E8;
    background: #F7F9FB;
}
#img-box .itemimg img {
    width: 100%;
    height: auto;
    display: block;
}
#img-box .itemsubimg {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
#img-box .itemsubimg a {
    flex: 0 0 calc(25% - 6px);
    border: 1px solid #DDE3E8;
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.2s;
}
#img-box .itemsubimg a:hover {
    border-color: #1769AA;
}
#img-box .itemsubimg img {
    width: 100%;
    height: auto;
}

/* =============================================
   商品情報エリア
   ============================================= */
.detail-box {
    flex: 1;
    min-width: 0;
}
.item-header {
    margin-bottom: 4px;
}
h1.item_page_title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #263238;
    line-height: 1.35;
    margin: 0 0 16px;
}
.detail-box .item-name {
    font-size: 22px;
    font-weight: 800;
    color: #263238;
    line-height: 1.35;
    margin-bottom: 8px;
}
.detail-box .itemcode {
    font-size: 12px;
    color: #66727D;
    margin-bottom: 16px;
}
.detail-box .item-description {
    font-size: 14px;
    line-height: 1.8;
    color: #263238;
    margin-bottom: 20px;
}
.detail-box .item-description h2,
.detail-box .item-description h3 {
    font-size: 17px;
    font-weight: 700;
    color: #0C447C;
    margin: 24px 0 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid #EAF3FA;
}
.detail-box .item-description ul,
.detail-box .item-description ol {
    padding-left: 20px;
    margin: 12px 0;
}
.detail-box .item-description li {
    margin-bottom: 6px;
    line-height: 1.7;
}
.detail-box .item-description table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 14px;
}
.detail-box .item-description table th,
.detail-box .item-description table td {
    padding: 10px 14px;
    border: 1px solid #DDE3E8;
    text-align: left;
}
.detail-box .item-description table th {
    background: #F7F9FB;
    font-weight: 600;
    color: #0C447C;
    white-space: nowrap;
    width: 120px;
}

/* =============================================
   CTA ボタン（購入 + サンプル）
   ============================================= */
.ma-pd__cta-buttons {
    display: flex;
    gap: 12px;
    margin: 20px 0;
    flex-wrap: wrap;
}
.ma-pd__cta-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 180px;
    background: #E67E22;
    color: #fff;
    -webkit-text-fill-color: #fff !important;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-weight: 700;
    padding: 14px 24px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 2px 8px rgba(230,126,34,0.25);
}
.ma-pd__cta-buy:hover {
    background: #d35400;
    color: #fff;
    -webkit-text-fill-color: #fff !important;
    transform: translateY(-1px);
}
.ma-pd__cta-sample {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 180px;
    background: transparent;
    color: #0C447C;
    -webkit-text-fill-color: #0C447C !important;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-weight: 700;
    padding: 14px 24px;
    border-radius: 8px;
    border: 2px solid #0C447C;
    text-decoration: none;
    transition: all 0.2s;
}
.ma-pd__cta-sample:hover {
    background: #0C447C;
    color: #fff;
    -webkit-text-fill-color: #fff !important;
}

/* =============================================
   購入フォーム
   ============================================= */
.item-info {
    width: 100%;
    background: #F7F9FB;
    border: 1px solid #DDE3E8;
    border-radius: 12px;
    padding: 28px;
    margin-top: 8px;
}
.item-info .skuform {
    margin-bottom: 16px;
}
.item-info .skuform:last-of-type {
    margin-bottom: 0;
}
.item-info .skuname {
    font-size: 15px;
    font-weight: 700;
    color: #0C447C;
    margin-bottom: 12px;
}
.item-info .field {
    margin-bottom: 16px;
}
.item-info .zaikostatus {
    font-size: 13px;
    color: #66727D;
    margin-bottom: 8px;
}
.item-info .field_price {
    font-size: 28px;
    font-weight: 900;
    color: #0C447C;
    margin-bottom: 4px;
}
.item-info .field_cprice {
    font-size: 16px;
    color: #999;
    text-decoration: line-through;
    margin-right: 8px;
    font-weight: 400;
}
.item-info .c-box {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.item-info .quantity {
    font-size: 14px;
    color: #263238;
}
.item-info .quantity select,
.item-info .quantity input[type="number"] {
    padding: 8px 12px;
    border: 1px solid #DDE3E8;
    border-radius: 6px;
    font-size: 15px;
    width: 70px;
}

/* カートボタン */
.item-info .cart-button {
    flex: 1;
}
.item-info .cart-button input[type="submit"],
.item-info .cart-button .to-cart,
.item-info .cart-button button {
    display: block;
    width: 100%;
    background: #E67E22;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff !important;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 17px;
    font-weight: 700;
    padding: 16px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 2px 8px rgba(230,126,34,0.25);
}
.item-info .cart-button input[type="submit"]:hover,
.item-info .cart-button .to-cart:hover,
.item-info .cart-button button:hover {
    background: #d35400;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(230,126,34,0.35);
}
.item-info .itemsoldout {
    background: #fee2e2;
    color: #dc2626;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

/* オプション */
.item-info .item-option {
    margin: 12px 0;
}
.item-info .item-option dt {
    font-size: 13px;
    font-weight: 600;
    color: #263238;
    margin-bottom: 4px;
}
.item-info .item-option dd {
    margin: 0 0 12px;
}
.item-info .item-option select {
    padding: 8px 12px;
    border: 1px solid #DDE3E8;
    border-radius: 6px;
    font-size: 14px;
    width: 100%;
}

/* エラー */
.item-info .error_message {
    color: #dc2626;
    font-size: 13px;
    margin-top: 8px;
}

/* =============================================
   カスタムフィールド情報
   ============================================= */
.item-info .item_custom {
    margin-bottom: 20px;
}
.item-info .item_custom table {
    width: 100%;
    border-collapse: collapse;
}
.item-info .item_custom th,
.item-info .item_custom td {
    padding: 8px 12px;
    border: 1px solid #DDE3E8;
    font-size: 14px;
}
.item-info .item_custom th {
    background: #EAF3FA;
    font-weight: 600;
    color: #0C447C;
    width: 140px;
}

/* =============================================
   関連商品
   ============================================= */
.assistance {
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid #DDE3E8;
}
.assistance h3 {
    font-size: 20px;
    font-weight: 700;
    color: #263238;
    margin-bottom: 24px;
}
.assistance .cat-il {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.assistance article {
    background: #fff;
    border: 1px solid #DDE3E8;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}
.assistance article:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.assistance .itemimg img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}
.assistance .itemname {
    padding: 10px 12px 4px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
.assistance .itemname a { color: #263238; }
.assistance .itemprice {
    padding: 0 12px 12px;
    font-size: 14px;
    font-weight: 700;
    color: #0C447C;
}

/* =============================================
   カテゴリページ商品一覧
   ============================================= */
.cat-il.type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.cat-il article {
    background: #fff;
    border: 1px solid #DDE3E8;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}
.cat-il article:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.cat-il .itemimg {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #F7F9FB;
}
.cat-il .itemimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cat-il .itemname {
    padding: 12px 14px 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}
.cat-il .itemname a {
    color: #263238;
    text-decoration: none;
}
.cat-il .itemname a:hover { color: #0C447C; }
.cat-il .itemprice {
    padding: 4px 14px 14px;
    font-size: 16px;
    font-weight: 800;
    color: #0C447C;
}

/* =============================================
   カテゴリページ: バッジ・メタ
   ============================================= */
.ma-cat-header {
    margin-bottom: 24px;
}
.ma-cat-header .page-title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #263238;
}
.cat-il .itemimg {
    position: relative;
}
.ma-cat-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    gap: 4px;
    z-index: 1;
}
.ma-cat-meta {
    padding: 2px 14px 4px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.ma-cat-meta span {
    font-size: 11px;
    color: #66727D;
    background: #F7F9FB;
    padding: 2px 8px;
    border-radius: 3px;
}

/* =============================================
   ページネーション
   ============================================= */
.pagination_wrapper {
    margin: 40px 0;
    text-align: center;
}
.pagination_wrapper .page-numbers {
    display: inline-flex;
    list-style: none;
    gap: 4px;
    padding: 0;
    margin: 0;
}
.pagination_wrapper .page-numbers li a,
.pagination_wrapper .page-numbers li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 4px 10px;
    border: 1px solid #DDE3E8;
    border-radius: 6px;
    font-size: 14px;
    color: #263238;
    text-decoration: none;
    transition: all 0.2s;
}
.pagination_wrapper .page-numbers li a:hover {
    background: #EAF3FA;
    border-color: #1769AA;
    color: #0C447C;
}
.pagination_wrapper .page-numbers li .current {
    background: #0C447C;
    border-color: #0C447C;
    color: #fff;
}

/* =============================================
   カートページ
   ============================================= */
.cart_page .cart-btn input[type="submit"] {
    background: #E67E22;
    color: #fff;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    padding: 14px 32px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s;
}
.cart_page .cart-btn input[type="submit"]:hover {
    background: #d35400;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
    #itempage {
        flex-direction: column;
    }
    #img-box {
        flex: none;
        max-width: 100%;
    }
    .detail-box {
        width: 100%;
    }
    .item-info {
        padding: 20px;
    }
    .assistance .cat-il {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =============================================
   商品詳細: ヘッダー・バッジ
   ============================================= */
.ma-product-detail .ma-pd__header {
    margin-bottom: 16px;
}
.ma-pd__badges {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.ma-pd__title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #263238;
    line-height: 1.35;
    margin: 0 0 8px;
}
.ma-pd__value-prop {
    font-size: 16px;
    font-weight: 600;
    color: #0C447C;
    background: #EAF3FA;
    padding: 12px 20px;
    border-radius: 8px;
    margin: 0;
    border-left: 3px solid #0C447C;
}

/* =============================================
   商品詳細: スペックカード
   ============================================= */
.ma-pd__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}
.ma-pd__spec {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #F7F9FB;
    border: 1px solid #DDE3E8;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
}
.ma-pd__spec-label {
    color: #66727D;
    font-weight: 500;
}
.ma-pd__spec-value {
    color: #263238;
    font-weight: 600;
}

/* =============================================
   商品詳細: 収録内容タグ
   ============================================= */
.ma-pd__includes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 16px;
}
.ma-pd__includes-label {
    font-size: 13px;
    color: #66727D;
    font-weight: 500;
}
.ma-pd__include-tag {
    font-size: 12px;
    color: #3C8D72;
    border: 1px solid rgba(60,141,114,0.3);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}

/* =============================================
   商品詳細: この教材でできること
   ============================================= */
.ma-pd__can-do {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #DDE3E8;
}
.ma-pd__can-do-title {
    font-size: 15px;
    font-weight: 700;
    color: #0C447C;
    margin: 0 0 10px;
}
.ma-pd__can-do ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ma-pd__can-do li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.6;
}
.ma-pd__can-do li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #3C8D72;
    font-weight: 700;
}

/* =============================================
   商品詳細: 研修実施までの流れ
   ============================================= */
.ma-pd__flow {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #DDE3E8;
}
.ma-pd__flow-title {
    font-size: 14px;
    font-weight: 700;
    color: #0C447C;
    margin: 0 0 12px;
}
.ma-pd__flow-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ma-pd__flow-step {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #263238;
    background: #EAF3FA;
    padding: 8px 14px;
    border-radius: 6px;
}
.ma-pd__flow-step span {
    width: 22px;
    height: 22px;
    background: #0C447C;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ma-pd__flow-arrow {
    color: #66727D;
    font-size: 16px;
}

/* =============================================
   商品詳細: アップセル / 関連商品
   ============================================= */
.ma-pd__upsell,
.ma-pd__related {
    width: 100%;
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid #DDE3E8;
}
.ma-pd__upsell-title,
.ma-pd__related-title {
    font-size: 20px;
    font-weight: 700;
    color: #263238;
    margin: 0 0 24px;
}
.ma-pd__upsell-title {
    color: #0C447C;
}
.ma-pd__upsell-grid,
.ma-pd__related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 900px) {
    .ma-pd__upsell-grid,
    .ma-pd__related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    h1.item_page_title { font-size: 20px; }
    .ma-pd__title { font-size: 22px; }
    .item-info .field_price { font-size: 24px; }
    .item-info .cart-button input[type="submit"],
    .item-info .cart-button .to-cart { font-size: 16px; padding: 14px 20px; }
    .cat-il.type-grid { grid-template-columns: 1fr; }
    .assistance .cat-il { grid-template-columns: 1fr 1fr; }
    #img-box .itemsubimg a { flex: 0 0 calc(33.33% - 5px); }
    .ma-pd__flow-steps { flex-direction: column; align-items: stretch; }
    .ma-pd__flow-arrow { text-align: center; transform: rotate(90deg); }
    .ma-pd__upsell-grid,
    .ma-pd__related-grid { grid-template-columns: 1fr; }
    .ma-pd__specs { gap: 6px; }
    .ma-pd__spec { font-size: 12px; padding: 4px 10px; }
}