@charset "UTF-8";
/* ==========================================================================
   amata_reskin.css — 標準画面の見た目(body.amata-reskin 起点)
   ========================================================================== */

/* 1. 文字色 =============================================================== */

body.amata-reskin :is(.ec-role, .ec-registerRole, .ec-registerCompleteRole, .ec-forgotRole, .ec-forgetCompleteRole,
    .ec-contactRole, .ec-contactConfirmRole, .ec-contactCompleteRole, .ec-mypageRole, .ec-editRole,
    .ec-cartRole) {
    color: var(--amata-ink);
}

/* 2. ページ見出し ========================================================= */
/* .amata-about__ttl(amata_about.css)と同じ見た目 */

body.amata-reskin .ec-pageHeader h1 {
    margin: 0 0 24px;
    padding: 0 0 16px;
    border: 0;
    border-bottom: 1px solid var(--amata-line);
    color: var(--amata-ink);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.4;
}

/* 3. 入力行 =============================================================== */

body.amata-reskin .ec-borderedDefs {
    border-top-color: var(--amata-line);
    border-top-style: solid;
}

/* 上下の余白を広げる */
body.amata-reskin .ec-borderedDefs dl {
    padding-block: 28px 12px;
    border-bottom-color: var(--amata-line);
    border-bottom-style: solid;
}

body.amata-reskin .ec-label {
    color: var(--amata-ink);
}

/* 必須は赤のピル */
body.amata-reskin .ec-required {
    padding: 2px 8px;
    border-radius: var(--amata-radius-pill);
    background: var(--amata-red);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    vertical-align: 1px;
}

/* 入力例(入力欄の上) */
body.amata-reskin .amata-form-hint {
    margin: 0 0 6px;
    color: var(--amata-ink-soft);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* 入力欄の上の注意 */
body.amata-reskin .amata-form-note {
    margin: 0 0 6px;
    color: var(--amata-ink);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.5;
}

/* 確認画面の説明文の下の余白 */
body.amata-reskin form > p:has(+ .ec-borderedDefs) {
    margin-bottom: 24px;
}

/* 4. 入力欄 =============================================================== */

body.amata-reskin :is(.ec-input, .ec-halfInput, .ec-zipInput, .ec-telInput, .ec-select, .ec-birth)
    :is(input:not([type=radio], [type=checkbox]), select, textarea) {
    min-height: 48px;
    padding-inline: 14px;
    border-radius: var(--amata-radius);
    background-color: #fff;
    color: var(--amata-ink);
    font-size: 1rem;
}

/* 1行の入力欄とプルダウンは高さ固定、textarea は縦にだけ伸ばす */
body.amata-reskin :is(.ec-input, .ec-halfInput, .ec-zipInput, .ec-telInput, .ec-select, .ec-birth)
    :is(input:not([type=radio], [type=checkbox]), select) {
    height: 48px;
}

body.amata-reskin .ec-input textarea {
    height: 200px;
    padding-block: 12px;
    line-height: 1.7;
    resize: vertical;
}

body.amata-reskin :is(.ec-input, .ec-halfInput, .ec-zipInput, .ec-telInput, .ec-select, .ec-birth)
    :is(input, select, textarea):focus {
    border-color: var(--amata-teal);
}

/* プルダウンの矢印 */
/* 詳細度を上の指定とそろえる */
body.amata-reskin :is(.ec-select, .ec-birth) select:not([multiple]) {
    appearance: none;
    padding-right: 40px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--amata-ink-soft) 50%),
        linear-gradient(135deg, var(--amata-ink-soft) 50%, transparent 50%);
    background-position:
        calc(100% - 21px) 50%,
        calc(100% - 16px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}

/* 姓・名のエラーは他の項目と同じく全幅で出す */
body.amata-reskin .ec-halfInput .ec-errorMessage {
    display: block;
    width: auto;
    margin-left: 0;
}

/* 生年月日: 欄と単位の組の途中で折り返さない */
body.amata-reskin .ec-birth .amata-birth-item {
    display: inline-flex;
    align-items: center;
    margin: 0 16px 8px 0;
    white-space: nowrap;
}

/* 標準の select の余白を外す */
body.amata-reskin .ec-birth .amata-birth-item select {
    margin: 0;
}

body.amata-reskin .ec-birth .amata-birth-unit {
    margin: 0 0 0 8px;
}

/* ラジオボタンと文字の組の途中で折り返さない */
body.amata-reskin .amata-radio-item {
    display: inline-flex;
    align-items: center;
    margin: 0 20px 8px 0;
    white-space: nowrap;
}

body.amata-reskin .amata-radio-item input {
    margin: 0 6px 0 0;
}

body.amata-reskin .amata-radio-item label {
    margin: 0;
}

body.amata-reskin :is(input[type=radio], input[type=checkbox]) {
    accent-color: var(--amata-teal);
}

/* 5. リンク =============================================================== */

body.amata-reskin .ec-link {
    color: var(--amata-teal);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.amata-reskin .ec-link:hover {
    color: var(--amata-ink);
}

/* 同意のチェックとボタンの間 */
body.amata-reskin .ec-registerRole__actions .ec-checkbox {
    margin-bottom: 24px;
}

/* 6. ボタン ============================================================== */

body.amata-reskin :is(.ec-blockBtn--action, .ec-blockBtn--cancel) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 360px);
    height: auto;
    min-height: 60px;
    margin-inline: auto;
    padding: 0 20px;
    border-radius: var(--amata-radius-pill);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    transition:
        transform  var(--amata-dur-fast) var(--amata-ease-out),
        box-shadow var(--amata-dur-fast) var(--amata-ease-out);
}

body.amata-reskin .ec-blockBtn--action {
    border: 0;
    background: var(--amata-grad);
    box-shadow: var(--amata-shadow-1);
    color: #fff;
}

body.amata-reskin .ec-blockBtn--cancel {
    border: 1px solid var(--amata-line);
    background: #fff;
    box-shadow: none;
    color: var(--amata-ink-soft);
}

/* 縦に並ぶ2つ目 */
body.amata-reskin :is(.ec-blockBtn--action, .ec-blockBtn--cancel) + :is(.ec-blockBtn--action, .ec-blockBtn--cancel) {
    margin-top: 16px;
}

body.amata-reskin .ec-blockBtn--action:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: var(--amata-shadow-2);
    color: #fff;
}

body.amata-reskin .ec-blockBtn--cancel:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: var(--amata-shadow-1);
    color: var(--amata-ink);
}

body.amata-reskin :is(.ec-blockBtn--action, .ec-blockBtn--cancel):active:not(:disabled) {
    transform: translateY(-1px) scale(0.98);
}

body.amata-reskin :is(.ec-blockBtn--action, .ec-blockBtn--cancel):focus-visible {
    outline: 3px solid var(--amata-teal);
    outline-offset: 2px;
}

/* 無効状態(お気に入り追加済みと同じ色) */
body.amata-reskin :is(.ec-blockBtn--action, .ec-blockBtn--cancel):is(:disabled, .disabled) {
    border: 1px solid var(--amata-line);
    background: var(--amata-bg-tint-1);
    box-shadow: none;
    opacity: 1;
    color: #8a9595;
    cursor: default;
}

/* 6-A. ログイン ========================================================= */

body.amata-reskin .ec-login {
    border-radius: var(--amata-radius);
    background: var(--amata-bg-tint-1);
}

/* 入力欄の見出し */
body.amata-reskin .amata-field-label {
    display: block;
    margin: 0 0 6px;
    color: var(--amata-ink);
    font-size: 0.92rem;
    font-weight: 700;
}

body.amata-reskin .ec-login .ec-input input + .amata-field-label {
    margin-top: 16px;
}

body.amata-reskin .ec-login__link {
    margin-bottom: 8px;
}

/* パスワード再設定の完了後に出るお知らせ */
body.amata-reskin .amata-login-notice {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: var(--amata-radius);
    background: var(--amata-bg-tint-2);
    color: var(--amata-ink);
    font-size: 0.92rem;
}

/* 6-B. パスワード再発行 =================================================== */

/* ボタンの上の余白 */
body.amata-reskin .ec-forgotRole .ec-off4Grid {
    margin-top: 32px;
}

/* 6-C. お問い合わせ ===================================================== */

/* 上余白(標準の .ec-registerRole__actions と同じ) */
body.amata-reskin :is(.ec-contactRole, .ec-contactConfirmRole, .ec-editRole) .ec-RegisterRole__actions {
    padding-top: 20px;
}

/* 6-D. マイページ ======================================================= */
/* マイページのメニュー(PC はタブ、SP は2列) */

body.amata-reskin .amata-mypage-nav ul {
    display: flex;
    margin: 0 0 24px;
    padding: 0;
    border-bottom: 1px solid var(--amata-line);
    list-style: none;
}

body.amata-reskin .amata-mypage-nav li {
    flex: 1 1 0;
}

body.amata-reskin .amata-mypage-nav a {
    display: block;
    margin-bottom: -1px;
    padding: 14px 8px;
    border-bottom: 3px solid transparent;
    color: var(--amata-ink-soft);
    font-size: 0.92rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: color var(--amata-dur-fast) var(--amata-ease-out);
}

body.amata-reskin .amata-mypage-nav a:hover {
    color: var(--amata-ink);
    text-decoration: none;
}

body.amata-reskin .amata-mypage-nav a[aria-current="page"] {
    border-bottom: 3px solid;
    border-image: var(--amata-grad) 1;
    color: var(--amata-ink);
}

body.amata-reskin .amata-mypage-welcome {
    margin: 0 0 24px;
    color: var(--amata-ink-soft);
    font-size: 0.92rem;
}

body.amata-reskin .amata-mypage-welcome p {
    margin: 0;
}

/* 履歴が無いとき(カートが空のときにも使う) */
body.amata-reskin .amata-mypage-empty {
    padding: 40px 20px;
    border-radius: var(--amata-radius);
    background: var(--amata-bg-tint-1);
    color: var(--amata-ink);
    text-align: center;
}

body.amata-reskin .amata-mypage-empty p {
    margin: 0 0 20px;
}

/* お届け先一覧 */
body.amata-reskin .amata-address-count {
    margin: 0 0 16px;
    color: var(--amata-ink-soft);
    font-size: 0.92rem;
}

body.amata-reskin .amata-address-list {
    display: grid;
    gap: 12px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

body.amata-reskin .amata-address-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border: 1px solid var(--amata-line);
    border-radius: var(--amata-radius);
    background: #fff;
}

body.amata-reskin .amata-address-item__body {
    flex: 1 1 auto;
    color: var(--amata-ink);
    line-height: 1.8;
}

body.amata-reskin .amata-address-item__name {
    font-weight: 700;
}

body.amata-reskin .amata-address-item__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 16px;
}

body.amata-reskin .amata-address-item__edit {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 20px;
    border: 1px solid var(--amata-line);
    border-radius: var(--amata-radius-pill);
    background: #fff;
    color: var(--amata-ink);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
}

body.amata-reskin .amata-address-item__edit:hover {
    box-shadow: var(--amata-shadow-1);
    color: var(--amata-ink);
    text-decoration: none;
}

body.amata-reskin .amata-address-item__delete {
    color: var(--amata-ink-soft);
    font-size: 0.92rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.amata-reskin .amata-address-item__delete:hover {
    color: var(--amata-ink);
}

/* お気に入り一覧 */
body.amata-reskin .amata-favorite-count {
    margin: 0 0 16px;
    color: var(--amata-ink-soft);
    font-size: 0.92rem;
}

body.amata-reskin .amata-favorite-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 20px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

body.amata-reskin .amata-favorite-item {
    position: relative;
}

body.amata-reskin .amata-favorite-item__link {
    display: block;
    color: var(--amata-ink);
    text-decoration: none;
    transition: transform var(--amata-dur-fast) var(--amata-ease-out);
}

body.amata-reskin .amata-favorite-item__link:hover {
    transform: translateY(-4px);
    color: var(--amata-ink);
    text-decoration: none;
}

body.amata-reskin .amata-favorite-item__image {
    display: block;
    aspect-ratio: 1 / 1;
    margin: 0 0 10px;
    overflow: hidden;
    border: 1px solid var(--amata-line);
    border-radius: var(--amata-radius);
    background: var(--amata-bg-tint-1);
}

body.amata-reskin .amata-favorite-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--amata-dur-fast) var(--amata-ease-out);
}

body.amata-reskin .amata-favorite-item__link:hover .amata-favorite-item__image img {
    opacity: 0.85;
}

body.amata-reskin .amata-favorite-item__name {
    display: block;
    margin: 0 0 4px;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.4;
}

body.amata-reskin .amata-favorite-item__price {
    display: block;
    color: var(--amata-red);
    font-size: 1rem;
    font-weight: 700;
}

/* 削除ボタン(白地の丸に ×) */
body.amata-reskin .amata-favorite-item__remove {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--amata-line);
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--amata-shadow-1);
    color: var(--amata-ink-soft);
}

body.amata-reskin .amata-favorite-item__remove:hover {
    color: var(--amata-ink);
}

body.amata-reskin .amata-favorite-item__remove svg {
    width: 16px;
    height: 16px;
}

/* 退会の注意(入力・確認) */
body.amata-reskin .amata-withdraw {
    margin: 0 0 32px;
    padding: 32px 24px;
    border-radius: var(--amata-radius);
    background: var(--amata-bg-tint-1);
    color: var(--amata-ink);
    text-align: center;
}

body.amata-reskin .amata-withdraw__title {
    margin: 0 0 12px;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.5;
}

body.amata-reskin .amata-withdraw__text {
    margin: 0;
    line-height: 1.9;
}

/* 6-E. カート ============================================================ */

/* ステップ表示(丸は 36px) */
body.amata-reskin .ec-progress .ec-progress__item:after {
    top: 17px;
    height: 2px;
    background: var(--amata-line);
}

body.amata-reskin .ec-progress .ec-progress__number {
    width: 36px;
    height: 36px;
    border: 1px solid var(--amata-line);
    border-radius: 50%;
    background: #fff;
    color: var(--amata-ink-soft);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 34px;
}

body.amata-reskin .ec-progress .ec-progress__label {
    color: var(--amata-ink-soft);
    font-weight: 700;
}

body.amata-reskin .ec-progress .is-complete .ec-progress__number {
    border-color: transparent;
    background: var(--amata-grad);
    color: #fff;
}

body.amata-reskin .ec-progress .is-complete .ec-progress__label {
    color: var(--amata-ink);
}

/* 金額は赤の太字 */
body.amata-reskin .ec-cartRole .ec-cartRole__totalText strong,
body.amata-reskin .ec-cartRole .ec-cartRole__totalAmount {
    color: var(--amata-red);
    font-weight: 700;
}

body.amata-reskin .ec-cartHeader,
body.amata-reskin .ec-cartHeader .ec-cartHeader__label {
    background: var(--amata-bg-tint-1);
    color: var(--amata-ink);
    font-size: 0.92rem;
}

body.amata-reskin .ec-cartRow :is(.ec-cartRow__delColumn, .ec-cartRow__contentColumn, .ec-cartRow__amountColumn, .ec-cartRow__subtotalColumn) {
    border-bottom: 1px solid var(--amata-line);
}

body.amata-reskin .ec-cartRow .ec-cartRow__img img {
    border: 1px solid var(--amata-line);
    border-radius: var(--amata-radius);
}

body.amata-reskin .ec-cartRow .ec-cartRow__name a {
    color: var(--amata-ink);
    text-decoration: none;
}

body.amata-reskin .ec-cartRow .ec-cartRow__name a:hover {
    color: var(--amata-teal);
    text-decoration: underline;
}

body.amata-reskin .ec-cartRow .ec-cartRow__unitPrice {
    color: var(--amata-ink-soft);
    font-weight: 400;
}

body.amata-reskin .ec-cartRow .ec-cartRow__amountColumn :is(.ec-cartRow__amountUpButton, .ec-cartRow__amountDownButton, .ec-cartRow__amountDownButtonDisabled) {
    border: 1px solid var(--amata-line);
    background: #fff;
}

body.amata-reskin .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled {
    opacity: 0.5;
}

body.amata-reskin .ec-cartRow .ec-cartRow__sutbtotal {
    font-weight: 700;
}

/* 「全て削除」(CartClearV42 が差し込むリンク。位置はプラグイン側) */
body.amata-reskin .ec-cart-clear {
    color: var(--amata-ink-soft);
    font-size: 0.92rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

body.amata-reskin .ec-cart-clear:hover {
    color: var(--amata-ink);
}

/* 7. 完了画面 ============================================================= */
/* 見出し下の線なし・見出しは h1 より小さく */

body.amata-reskin .ec-reportHeading {
    margin: 32px 0 20px;
    border-top: 0;
    color: var(--amata-ink);
    font-size: 1.35rem;
}

body.amata-reskin .ec-reportHeading h2 {
    font-size: inherit;
    line-height: 1.5;
}

body.amata-reskin .ec-reportDescription {
    line-height: 1.9;
}

/* 左右の余白(標準に指定が無い) */
body.amata-reskin .ec-forgetCompleteRole {
    padding-inline: 20px;
}

/* 8. レスポンシブ ========================================================= */

@media (max-width: 991px) {

    body.amata-reskin .ec-pageHeader h1 {
        margin-bottom: 20px;
        font-size: 1.35rem;
    }

    body.amata-reskin .ec-reportHeading {
        margin-top: 24px;
        font-size: 1.15rem;
    }

    body.amata-reskin .amata-mypage-nav ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        border-bottom: 0;
    }

    body.amata-reskin .amata-mypage-nav a,
    body.amata-reskin .amata-mypage-nav a[aria-current="page"] {
        margin: 0;
        padding: 12px 8px;
        border: 1px solid var(--amata-line);
        border-image: none;
        border-radius: var(--amata-radius);
    }

    body.amata-reskin .amata-mypage-nav a[aria-current="page"] {
        border-color: var(--amata-teal);
        background: var(--amata-bg-tint-2);
    }

    body.amata-reskin .amata-address-item {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }

    body.amata-reskin .amata-address-item__actions {
        justify-content: flex-end;
    }

    body.amata-reskin .amata-favorite-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 12px;
    }

    body.amata-reskin .amata-withdraw {
        padding: 24px 16px;
    }

    body.amata-reskin :is(.ec-blockBtn--action, .ec-blockBtn--cancel) {
        width: min(80%, 320px);
    }

    /* ログイン: ボタンの下のリンク */
    body.amata-reskin .ec-login__actions {
        margin-bottom: 28px;
    }

    body.amata-reskin .ec-login__link {
        text-align: center;
    }
}

@media (max-width: 575px) {

    /* 生年月日を1行に収める */
    body.amata-reskin .ec-birth .amata-birth-item {
        margin-right: 12px;
    }

    body.amata-reskin .ec-birth select:not([multiple]) {
        padding-right: 30px;
        background-position:
            calc(100% - 17px) 50%,
            calc(100% - 12px) 50%;
    }
}

/* 9. モーション低減 ========================================================= */

@media (prefers-reduced-motion: reduce) {

    body.amata-reskin :is(.ec-blockBtn--action, .ec-blockBtn--cancel),
    body.amata-reskin .amata-mypage-nav a,
    body.amata-reskin .amata-favorite-item__link,
    body.amata-reskin .amata-favorite-item__image img {
        transition: none;
    }

    body.amata-reskin .amata-favorite-item__link:hover {
        transform: none;
    }

    body.amata-reskin :is(.ec-blockBtn--action, .ec-blockBtn--cancel):is(:hover, :active) {
        transform: none;
    }
}