/* 2026-11-02 不具合の修正 (元の common.css / content.css は圧縮されているので、上書きをこのファイルにまとめる) */

/* ご注文手続き「お問い合わせ」: textarea はページの文字の指定を受け継がないため、ほかの項目にそろえる */
#lower.order .shopping .message textarea {
    font-family: inherit;
    font-size: 1.4rem;
    line-height: 1.7;
    color: #525263;
}

/* ご注文内容確認「お問い合わせ」: ほかの項目と同じ文字で表示する */
#lower.order .shopping .message .message__text {
    margin-left: 20px;
    font-size: 1.6rem;
    line-height: 1.7;
    color: #525263;
    word-break: break-all;
}

/* ヘッダーの検索窓: 虫眼鏡が入力欄の右端に食い込み、文字と重なっていた */
.header .search #search-text:focus {
    padding-right: 44px;
    background-size: 18px 18px;
    background-position: right 16px center;
}
.header .search #search-text::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}

/* ===== 2026-11-04 お問い合わせ (/contact/・/contact/confirm) のレイアウト ===== */

/* 入力画面「確認画面へ」: ページと同じ文字に (ボタンだけ Arial になっていた)。ボタンはサイト共通で角丸なし (2026-11-04 ユーザー指示) */
#lower.contact form .btn-area .btn {
    font-family: inherit;
    border-radius: 0;
}
@media (max-width: 750px) {
    /* スマホで width: 80% が付き、文字がボタンの右にはみ出していた。文字の大きさも確認画面のボタン (14px) にそろえる (スマホだけ 17px だった) */
    #lower.contact form .btn-area .btn {
        width: auto;
        font-size: 14px;
    }
}

/* 確認画面: 項目の並びと線を入力画面 (表) にそろえる。PC は左に項目名 35%、スマホは項目名の下に値 */
#lower.contact .ec-borderedDefs dl {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    border-top: none !important;
}
#lower.contact .ec-borderedDefs dl:first-child {
    border-top: 1px solid #000 !important;
}
#lower.contact .ec-borderedDefs dt {
    width: 35%;
    margin: 0 !important;
    padding: 3rem 0 3rem 4rem;
    border-bottom: 1px solid #000;
    font-weight: 700;
}
#lower.contact .ec-borderedDefs dt p {
    font-weight: 700;
}
#lower.contact .ec-borderedDefs dd {
    width: 65%;
    margin: 0 !important;
    padding: 3rem 0;
    border-bottom: 1px solid #000;
    word-break: break-all;
}
@media (max-width: 750px) {
    #lower.contact .ec-borderedDefs dt {
        width: 100%;
        padding: 3rem 0 1rem;
        border-bottom: none;
    }
    #lower.contact .ec-borderedDefs dd {
        width: 100%;
        padding: 0 0 3rem;
    }
}

/* 確認画面のボタン: 文字の太さを入力画面にそろえ、角丸なしで中央に並べる */
#lower.contact .ec-registerRole__actions .ec-off4Grid__cell {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 50px 0 35px;
}
#lower.contact .ec-registerRole__actions .ec-off4Grid__cell a,
#lower.contact .ec-registerRole__actions .ec-off4Grid__cell button {
    display: inline-block;
    margin: 0 !important;
    padding: 17px 60px !important;
    font-family: inherit;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.5;
    border-radius: 0;
    text-align: center;
}
@media (max-width: 750px) {
    #lower.contact .ec-registerRole__actions .ec-off4Grid__cell {
        flex-direction: column;
    }
    #lower.contact .ec-registerRole__actions .ec-off4Grid__cell a,
    #lower.contact .ec-registerRole__actions .ec-off4Grid__cell button {
        width: 100%;
        max-width: 320px;
        padding: 17px 20px !important;
    }
}

/* 2026-11-04 お問い合わせ完了「TOPページへ」: 文字の大きさ・太さを確認画面のボタンにそろえる (スマホだけ 17px だった)。角丸なし */
#lower.contact_done .btn a {
    padding: 17px 60px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    border-radius: 0;
}
@media (max-width: 750px) {
    #lower.contact_done .btn a {
        width: 100%;
        max-width: 320px;
        padding: 17px 20px;
        font-size: 14px;
        text-align: center;
    }
}

/* 2026-11-04 商品一覧・タグ・カテゴリのページャー: スマホでは「1 … 前 今 次 … 最後」だけにする (NEXT が 2 段目に落ちていた) */
.pager__container .sp-dots {
    display: none;
}
@media (max-width: 750px) {
    .pager__container .is-far,
    .pager__container .pc-dots {
        display: none;
    }
    .pager__container .sp-dots {
        display: inline-block;
    }
    /* PREV の右 45px・NEXT の左 37px の余白も詰める */
    .pager__container .pager__container--list {
        margin-left: 4px;
        margin-right: 4px;
    }
    .pager__container .prev {
        margin-right: 10px;
    }
    .pager__container .next {
        margin-left: 10px;
    }
}

/* 2026-11-04 商品詳細 (スマホ): ボタンとボタンの間に余白 (「お問い合わせ」と「お気に入り」がくっついていた)。最後の一文を左寄せに */
@media (max-width: 750px) {
    #products .cart-btn > * + *,
    .cart-btn > * + * {
        margin-top: 10px;
    }
    #lower.itemDetail .notes__lasttxt,
    .notes__lasttxt {
        text-align: left;
    }
}

/* スマホの商品一覧: 商品名の行間が詰まりすぎていたので 1.5 に (2026-11-04) */
@media (max-width: 750px) {
    .item__container--list .name {
        line-height: 1.5;
    }
}

/* マイページの購入履歴 (スマホ): 注文の情報 (historyRole__header) と商品 (historyRole__detail) の間に余白 (2026-11-04) */
@media only screen and (max-width: 767px) {
    .historyRole .historyRole__detail {
        margin-top: 15px;
    }
}

/* お気に入り (スマホ): 商品名・価格の文字の大きさと行間を商品一覧 (/products/) にそろえる (2026-11-04) */
@media (max-width: 750px) {
    #lower.favorite .items__container--list .name {
        font-size: 14px;
        line-height: 1.5;
    }
    #lower.favorite .items__container--list .price {
        font-size: 12px;
    }
}

/* スマホの商品一覧・検索結果・カテゴリ・タグ: 商品の幅を max-width:200px で止めず、2 列いっぱいに広げて中央にそろえる。
   列の間・行の間はお気に入り (#lower.favorite .items__container--list) と同じ 20px / 40px (2026-11-04) */
@media (max-width: 750px) {
    #category .newitem .item__container,
    #products .newitem .item__container,
    #lower.tag .item__container {
        gap: 40px 20px;
    }
    #category .newitem .item__container--list,
    #products .newitem .item__container--list,
    #lower.tag .item__container--list {
        max-width: 100%;
    }
}

/* PC でも同じ: 商品の幅を max-width:200px で止めると列の中で左に寄り、一覧が中央に見えない。
   列いっぱいに広げる (お気に入り #lower.favorite と同じ考え方)。トップの新着商品も同じ (2026-11-04) */
#home .newitem .item__container--list,
#category .newitem .item__container--list,
#products .newitem .item__container--list,
#lower.tag .item__container--list {
    max-width: 100%;
}

/* ---- 2026-11-06 公開前チェックの指摘 ---- */

/* お知らせ・特集の本文の太字: 本文の文字が細いので bolder では見分けがつかなかった */
strong, b { font-weight: 700; }

/* スマホの検索窓: 虫眼鏡の位置に送信ボタンを重ねる。入力した文字・消去の × が虫眼鏡に重ならないよう右に余白 */
.searchbox form[role=search] { position: relative; }
.searchbox form[role=search] input[type=search] { padding-right: 46px; }
/* サイト共通の送信ボタン (黒・余白 17px 60px) が効かないよう、詳しく指定する */
.searchbox form[role=search] button.searchbox__submit {
    position: absolute;
    top: 0;
    right: 0;
    width: 46px;
    min-width: 0;
    height: 100%;
    max-height: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

/* PC のヘッダーの検索窓: 入力欄 (#search-text) が開いている (フォーカス中) ときだけ、右の虫眼鏡の位置に送信ボタンを重ねる。
   閉じているときは入力欄そのものが虫眼鏡のアイコンなので、ボタンは出さない */
.header .search.pc form[role=search] { position: relative; }
.header .search.pc form[role=search] button.searchbox__submit--pc {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.header .search.pc form[role=search]:focus-within button.searchbox__submit--pc { display: block; }