/*
 * site-app.css — misite (ASP.NET Core) 専用スタイル
 *
 * site.css（共通）を読み込んだ後に読み込むこと。
 * 順序: _Layout.cshtml で site.css → site-app.css
 *
 * ここに置けるのは misite のアプリ機能（注文フロー・原稿アップロード・
 * アカウント）のように、WordPress 側にページ自体が存在しないものだけ。
 * ヘッダー・フッターなど全ページ共通のパーツは、WordPress 側の
 * テンプレートがこのリポジトリに無く使用判定ができないため site.css に置く。
 */

/* 中身が画面幅からはみ出すとページ全体が横に広がり、幅100%のヘッダーの右側に余白ができるので、
   横方向のはみ出しは切り落とす。hidden だとスクロールコンテナになり position: sticky が効かなくなるため clip にする */
html,
body {
  overflow-x: clip;
}

/* ここから下の「row 関連追加」「カート関連」は misite のカート追加画面（Cart/Add・Checkout）専用のため
   site.css から移動した。site.css より後・site-app.css の他ルールより前、という元の読み込み順を保つため先頭に置く */

/* =============================================
   row 関連追加（画像付き選択肢の一覧）
   PC・タブレットは横5列、スマホは横4列のグリッド。横スクロールはしない
   ============================================= */
.row-slide {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding-bottom: 10px;
}

.row-slide-item {
  min-width: 0;
  border-color: var(--tailwind-color-default, rgba(0, 0, 0, .08));
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
}

/* クリック対象（画像＋名前） */
.rs-tile {
  position: relative;
}

/* 画像枠（旧 180×150 の比率） */
.rs-img {
  position: relative;
  aspect-ratio: 6 / 5;
}

/* 分類カードは重なったカードの背景画像の上に、左上寄せで一回り小さく画像を置く */
.rs-img--bun {
  background: url('/images/shiyoubun.png') no-repeat 0 0 / 100% 100%;
}

.rs-img--bun>.rs-img-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 83.33%;
  height: 83.33%;
}

.rs-label {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.rs-label .kakaku {
  display: block;
  text-align: right;
}

/* スマホは横4列。名前は隠し、ホバー／タップ（.is-peek）で吹き出し表示 */
@media (max-width: 576px) {
  .row-slide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .rs-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 20;
    width: max-content;
    max-width: 150%;
    margin: 0;
    padding: 6px 10px;
    border-radius: 6px;
    background: #3F1E12;
    color: #fff;
    font-size: 12px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
  }

  /* 吹き出しのしっぽ */
  .rs-label::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: #3F1E12;
  }

  .cart-add-box .rs-label .kakaku {
    color: #fff;
    text-align: center;
  }

  /* 吹き出し（濃い地）の中では赤・グレーが読みにくいので明るい色に */
  .cart-add-box .rs-label .kakaku.neb-moto {
    color: #ccc;
  }

  .cart-add-box .rs-label .kakaku.neb-price {
    color: #fff;
  }

  /* 開閉の矢印は枠線の色で状態がわかるので吹き出しでは出さない */
  .rs-label .bun-caret {
    display: none;
  }

  .row-slide-item.is-peek .rs-label,
  .rs-tile:focus-visible .rs-label {
    opacity: 1;
    visibility: visible;
  }

  .row-slide-item.is-peek {
    border-color: #3F1E12;
  }
}

@media (max-width: 576px) and (hover: hover) {
  .rs-tile:hover .rs-label {
    opacity: 1;
    visibility: visible;
  }
}

/* ============================================================
   カート関連
   ============================================================ */

.add-goods-title {
  color: black;
}

.option-label {
  font-weight: 700;
  padding-left: 12px;
  border-left: 3px solid #8f8f8f;
  padding-bottom: 8px;
  border-bottom: 0.5px solid #f0f0f0;
  margin-bottom: 1rem;
  margin-top: 2rem;
}

/* 必須オプション（OrderList の .opt-tag.required に合わせたオレンジ） */
.option-label.required-options {
  color: #ff7a45;
  border-left-color: #ff7a45;
  border-bottom-color: rgba(255, 122, 69, 0.3);
}

/* 任意オプション（OrderList の .opt-tag に合わせたブルー） */
.option-label.optional-options {
  color: #459cff;
  border-left-color: #459cff;
  border-bottom-color: rgba(69, 156, 255, 0.3);
}

/* --------------------------------------------------
   カート追加画面 オプションバー（必須はオレンジ系／任意は水色系）
   -------------------------------------------------- */
.row.form-group.opt-bar {
  border-left: 4px solid #c9ccd1;
  padding-left: 8px;
}

.row.form-group.opt-bar--required {
  background: #fdefe7;
  border-left-color: #e8845a;
}

.row.form-group.opt-bar--required .control-label {
  color: #a24e23;
  font-weight: 700;
}

.row.form-group.opt-bar--optional {
  background: #eaf4ff;
  border-left-color: #459cff;
}

.row.form-group.opt-bar--optional .control-label {
  color: #1f5fa8;
  font-weight: 700;
}

/* --------------------------------------------------
   商品仕様の分割選択（帯は「サイズ・印刷」で1本、プルダウンは左寄せで横並び）
   -------------------------------------------------- */
/* スマホ幅で折り返した時にプルダウン同士がくっつかないよう縦の間隔を空ける */
.shiyou-split {
  row-gap: 0.5rem;
}

/* --------------------------------------------------
   カート追加画面 文字サイズ・濃さ（全体的に淡泊／文字が小さいとの指摘対応）
   -------------------------------------------------- */
.cart-add-box {
  color: #2E1A12;
}

.cart-add-box .form-group label,
.cart-add-box .control-label {
  font-size: 15px;
  font-weight: 700;
  color: #3F1E12;
}

.cart-add-box .option-label {
  font-size: 16px;
  font-weight: 800;
}

.cart-add-box .form-select,
.cart-add-box .form-control {
  font-size: 15px;
  font-weight: 600;
  color: #2E1A12;
  border-color: #C4BDB3;
}

.cart-add-box .row-slide-item {
  font-size: 14px;
  font-weight: 600;
  color: #2E1A12;
}

.cart-add-box .kakaku {
  font-size: 14px;
  font-weight: 700;
  color: #3F1E12;
}

/*
 * 値引き中の単価（カート追加・カート・注文確認）
 * 元の単価は小さくグレーの取り消し線、値引き後の単価は赤。価格表（KakakuList の .kakaku-neb）と同じ色
 */
.neb-moto,
.cart-add-box .kakaku.neb-moto {
  margin-right: 4px;
  font-size: .8em;
  font-weight: 400;
  color: #999;
  text-decoration: line-through;
}

.neb-price,
.cart-add-box .kakaku.neb-price {
  font-weight: 700;
  color: #e50012;
}

/* 単価表ボタンが薄すぎて見えないため輪郭と文字を濃く */
.cart-add-box .btn-outline-light {
  background-color: #fff;
  border-color: #C4BDB3;
  color: #5A4A42;
  font-weight: 600;
}

.cart-add-box .btn-outline-light:hover {
  background-color: #f6f2ec;
  border-color: #a99f93;
  color: #3F1E12;
}

.cart-add-box .total-unit-price,
.cart-add-box .total-price {
  color: #3F1E12;
}

.cart-add-box .upload-zone-text,
.cart-add-box .upload-status {
  font-size: 14px;
  font-weight: 600;
}

/* 数量欄のインラインエラー */
.qty-error {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #b8322e;
}

/* --------------------------------------------------
   注意事項カード
   -------------------------------------------------- */
.notice-card {
  margin: 1.5rem 0;
  padding: 14px 16px;
  border: 1px solid #E4DCD0;
  border-radius: 12px;
  background: #FFFBF6;
  box-shadow: 0 1px 2px rgba(63, 30, 18, 0.05);
}

.notice-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: #3F1E12;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #EFE7DA;
}

.notice-card-title .bi {
  color: #E8845A;
}

.notice-card-list {
  margin: 0;
  padding-left: 1.4em;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  color: #4A3A32;
}

.notice-card-list>li+li {
  margin-top: 4px;
}

/* --------------------------------------------------
   仕様分類カードのカラーチップ（一目で何色あるかわかるように）
   -------------------------------------------------- */
.shiyou-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 4px 0 2px;
}

.shiyou-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  flex: 0 0 auto;
}

.shiyou-swatch-more {
  font-size: 11px;
  line-height: 1;
  color: #777;
}

/* --------------------------------------------------
   画像で選ぶ欄（閉じているときの選択中表示）
   スマホでも横幅いっぱいにせず、右側に価格・単価表を並べる
   （site.css の .row.deatils>.col-auto:not(.ms-auto) の全幅指定を打ち消す）
   -------------------------------------------------- */
.deatils-pic-img {
  position: relative;
  width: 180px;
  height: 150px;
}

@media (max-width: 767.98px) {
  .row.deatils>.col-auto.deatils-pic {
    flex: 0 1 auto;
  }

  .row.deatils>.deatils-pic~.ms-auto.col-auto {
    margin-top: 0;
  }
}

/* 狭いスマホでは画像を一回り小さくして横に収める */
@media (max-width: 400px) {
  .deatils-pic-img {
    width: 140px;
    height: 117px;
  }
}

/* --------------------------------------------------
   仕様分類（カラー等）のアコーディオン展開
   分類カードをクリックすると、その分類のカラー等をカードの直後に並べる
   -------------------------------------------------- */
.row-slide-item.bun-card.is-open {
  border-color: #e8845a;
  box-shadow: 0 0 0 1px #e8845a;
}

/* 開いているときは矢印を上向きにして「閉じられる」ことを示す */
.bun-card .bun-caret {
  transition: transform 0.2s ease;
}

.bun-card.is-open .bun-caret {
  transform: rotate(180deg);
}

/* 展開された中身は分類カードの一員とわかるよう淡い色を敷く */
.row-slide-item.bun-child {
  background: #fdf3ec;
  border-color: #f2c9b1;
}

/* --------------------------------------------------
   段階表示（仕様題名がカンマ区切りのオプション）
   段ごとに見出しを付けてカードを並べる
   -------------------------------------------------- */
.tier-head {
  margin: 4px 0 6px;
  padding-left: 8px;
  border-left: 3px solid #e8845a;
  font-size: 13px;
  font-weight: 700;
  color: #3F1E12;
}

/* --------------------------------------------------
   カートに追加できない理由の表示
   -------------------------------------------------- */
.cart-alert {
  margin: 1.5rem 0 1rem;
  padding: 14px 16px;
  border: 1px solid #F1C4C2;
  border-left: 5px solid #D9423C;
  border-radius: var(--radius-8, 8px);
  background: #FDEEEE;
}

.cart-alert-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: #B8322E;
  margin-bottom: 6px;
}

.cart-alert-list {
  margin: 0;
  padding-left: 1.4em;
  font-size: 14px;
  font-weight: 600;
  color: #7A2420;
}

.cart-alert-list>li {
  margin-top: 2px;
}

/* =============================================
   カート画面（Cart/Index）
   カード外のボタン（全ての商品を削除・見積書・続けて買い物をする）の左端を、
   カード内のボタン（注文内容の変更など）の左端に揃える。
   値は site.css の .order-card の padding（16px）と合わせること
   ============================================= */
.cart-bulk-actions,
.cart-bulk-note,
.next-order-btn {
  padding-left: 16px;
  padding-right: 16px;
}

/* 注文ボタン（ログイン・会員登録して注文／注文する）だけ文字が細く小さく見えるため、
   隣の「会員登録しないで注文する」（site.css で font-weight: 700）と太さを揃える。
   右上サマリー・下部固定バー（JSで複製）どちらにも効くよう .cart-order-actions で指定 */
.cart-order-actions .btn-primary {
  font-weight: 700;
}

/* =============================================
   ORDER / QUOTE STEP BAR
   ============================================= */
.mi-stepbar {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  margin: 0.5rem 0 1.5rem;
}

.mi-step {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding-top: 0.6rem;
  border-top: 3px solid #d9dadc;
}

.mi-step-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: #d9dadc;
  color: #fff;
  margin-bottom: 0.35rem;
}

.mi-step-icon {
  font-size: 1.35rem;
  line-height: 1;
  color: #b7b8ba;
}

.mi-step-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: #b7b8ba;
  margin-top: 0.2rem;
  white-space: nowrap;
}

.mi-step-arrow {
  flex: 0 0 auto;
  padding-top: 1.55rem;
  color: #ccc;
  font-size: 1rem;
}

.mi-step-done {
  border-top-color: #222;
}

.mi-step-done .mi-step-badge {
  background: #222;
}

.mi-step-done .mi-step-icon,
.mi-step-done .mi-step-label {
  color: #222;
}

.mi-step-current {
  border-top-color: var(--btn-primary-bg);
}

.mi-step-current .mi-step-badge {
  background: var(--btn-primary-bg);
}

.mi-step-current .mi-step-icon,
.mi-step-current .mi-step-label {
  color: var(--btn-primary-bg);
}

.mi-step-arrow-done,
.mi-step-arrow-current {
  color: #222;
}

@media (max-width: 480px) {
  .mi-step-badge {
    font-size: 0.58rem;
    padding: 0.08rem 0.45rem;
  }

  .mi-step-icon {
    font-size: 1.1rem;
  }

  .mi-step-label {
    font-size: 0.66rem;
  }
}


/* =============================================
   原稿アップロード
   ============================================= */
.upload-zone {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  border: 1.5px dashed var(--c-border);
  border-radius: var(--radius-8);
  background: var(--c-surface);
  padding: var(--sp-16);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.upload-zone:hover,
.upload-zone.dragover {
  border-color: var(--c-accent);
  background: var(--c-surface-2);
}

.upload-zone-icon {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--c-accent);
  flex-shrink: 0;
}

.upload-zone-text {
  font-size: 0.85rem;
  color: var(--c-text-2);
}

.upload-zone-link {
  color: var(--c-accent-2);
  font-weight: 600;
  text-decoration: underline;
}

.upload-progress {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-8);
  background: var(--c-surface);
  padding: var(--sp-12) var(--sp-16);
}

.upload-progress-track {
  height: 6px;
  border-radius: var(--radius-oval);
  background: var(--c-surface-2);
  overflow: hidden;
}

.upload-progress-fill {
  height: 100%;
  background: var(--or-500);
  transition: width 0.2s var(--ease);
}

.upload-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-8);
  font-size: 0.8rem;
  color: var(--c-text-2);
}

.upload-cancel-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  padding: 0;
  color: var(--btn-danger-hover);
  font-size: 0.8rem;
  cursor: pointer;
}

.upload-cancel-btn:hover {
  text-decoration: underline;
}

.upload-status {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin-top: var(--sp-8);
  padding: var(--sp-8) var(--sp-12);
  border-radius: var(--radius-8);
  font-size: 0.85rem;
  color: var(--c-text-2);
  background: var(--c-surface);
}

.upload-status.is-done {
  color: var(--btn-success-hover);
  background: rgba(90, 158, 122, 0.08);
}

.upload-status.is-error {
  color: var(--btn-danger-hover);
  background: rgba(192, 90, 90, 0.08);
}

.upload-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin: var(--sp-8) 0;
}

.upload-inline-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-accent-2);
  border-radius: var(--radius-oval);
  padding: 4px 14px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.upload-inline-btn:hover {
  border-color: var(--c-accent);
  background: var(--c-surface-2);
}

.upload-progress--inline {
  flex: 1 1 220px;
  max-width: 320px;
  padding: var(--sp-8) var(--sp-12);
}

.upload-remove-btn {
  display: inline-flex;
  align-items: center;
  border: none;
  background: none;
  padding: 0;
  margin-left: auto;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
}

.upload-remove-btn:hover {
  opacity: 1;
}

/* ============================================================
   ログイン・アカウント系（Account / Member）の指摘反映
   ・文字が小さくて視認しづらい → 全体的に大きめ＋中央ぞろえ
   ・ボタンの色が薄くて見えない  → 塗りのある色に変更
   ・外部アカウント連携          → ブランドアイコン付きボタンに
   ・フッターとの間が詰まっている → 下側に余白を持たせる
   ============================================================ */

/* ---- 薄くて見えないという指摘の副ボタン（btn-light / btn-outline-light の置き換え）
       カート画面で採用した濃いティールに合わせる ---- */
.btn-quiet {
  background-color: #2F7B85 !important;
  border-color: #2F7B85 !important;
  color: #FFFDFD !important;
  font-weight: 700;
}

.btn-quiet:hover,
.btn-quiet:focus {
  background-color: #235F68 !important;
  border-color: #235F68 !important;
  color: #FFFDFD !important;
  box-shadow: none !important;
}

/* ---- ページ全体（1カラム・中央寄せ） ---- */
.auth-page {
  max-width: 560px;
  margin: 0 auto;
  /* フッターとの間に余裕を持たせる */
  padding-bottom: var(--s-8);
}

/* 入力欄が多いページ（会員登録・パスワード再設定など）は少し広めに */
.auth-page.auth-page-wide {
  max-width: 680px;
}

.auth-page-title {
  text-align: center;
  margin-bottom: var(--s-3);
}

.auth-page .auth-section + .auth-section {
  margin-top: var(--s-4);
}

/* 見出しはフォームの左端にそろえる（本文・ボタンは中央ぞろえ） */
.auth-section-title {
  font-size: clamp(0.95rem, 1.1vw + 0.6rem, 1.15rem);
  padding-top: 0;
  margin-bottom: var(--s-2);
}

/* 区切り線は薄すぎると見えないので少し濃くする */
.auth-divider {
  margin: var(--s-4) 0;
  border-top: 1px solid var(--c-border);
  opacity: 1;
}

/* ---- 入力欄：小さくて読みづらいので大きめにする ---- */
.auth-page .form-floating > .form-control {
  height: 58px;
  font-size: 1rem;
}

.auth-page .form-floating > label {
  font-size: 0.95rem;
}

.auth-page .form-control,
.auth-page .form-select {
  font-size: 1rem;
}

.auth-page p,
.auth-page .auth-note,
.auth-page .form-check-label,
.auth-page label {
  font-size: 0.95rem;
}

.auth-page .text-danger {
  font-size: 0.9rem;
  font-weight: 700;
}

/* ---- 「次回ログインを省略」は中央ぞろえ ---- */
.auth-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: var(--s-2) 0 var(--s-3);
}

.auth-check .form-check-input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  flex: 0 0 auto;
}

.auth-check .form-check-label {
  margin: 0;
  cursor: pointer;
}

/* ---- ボタン：新規登録とログインを横並びで中央に ---- */
.auth-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.auth-actions .btn {
  flex: 1 1 200px;
  max-width: 260px;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0.7rem 1rem;
}

/* 1つしかないページ（登録・パスワードリセットなど）は大きめのボタンにする。
   横幅いっぱいだとPCでは横長すぎ、スマホでも間延びするので、360px・画面の85%までに抑える */
.auth-actions.auth-actions-single .btn {
  flex: 1 1 100%;
  max-width: min(360px, 85%);
}

/* 全幅(w-100)のボタンがPCで画面いっぱいに伸びて間延びしないよう上限を設ける。
   親を text-center にして中央に置く。主役のボタン(カートに追加など)は --main で少し広め */
.btn.mi-btn-cap {
  max-width: 260px;
}

/* スマホでも画面いっぱいだと間延びするので、端に少し余白を残す */
.btn.mi-btn-cap.mi-btn-cap--main {
  max-width: min(360px, 85%);
}

/* ---- リンク類（パスワードをお忘れの場合など） ---- */
.auth-link-row {
  margin-top: var(--s-3);
  text-align: center;
}

.auth-link-row a,
.auth-page .auth-note a {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-accent-2);
  text-decoration: underline;
}

.auth-link-row a:hover,
.auth-link-row a:focus,
.auth-page .auth-note a:hover,
.auth-page .auth-note a:focus {
  color: var(--btn-primary-bg);
}

.auth-note {
  margin-top: var(--s-2);
  line-height: 1.9;
}

.auth-page .auth-text {
  line-height: 1.9;
}

/* ---- 外部アカウント連携ボタン（アイコン付き） ---- */
.sns-btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.btn-sns {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1 1 220px;
  max-width: 280px;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.btn-sns::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* X（旧Twitter）：公式に合わせて黒地に白ロゴ */
.btn-sns-x {
  background-color: #000 !important;
  border: 1px solid #000 !important;
  color: #fff !important;
}

.btn-sns-x:hover,
.btn-sns-x:focus {
  background-color: #222 !important;
  border-color: #222 !important;
  color: #fff !important;
}

.btn-sns-x::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

/* Google：公式ガイドラインに合わせて白地＋カラーロゴ */
.btn-sns-google {
  background-color: #fff !important;
  border: 1px solid #dadce0 !important;
  color: #3c4043 !important;
}

.btn-sns-google:hover,
.btn-sns-google:focus {
  background-color: #f7f8f8 !important;
  border-color: #d2d5d9 !important;
  color: #3c4043 !important;
}

.btn-sns-google::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%234285F4' d='M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z'/%3E%3Cpath fill='%2334A853' d='M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z'/%3E%3Cpath fill='%23FBBC05' d='M11.69 28.18C11.25 26.86 11 25.45 11 24s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24s.85 6.91 2.34 9.88l7.35-5.7z'/%3E%3Cpath fill='%23EA4335' d='M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z'/%3E%3C/svg%3E");
}

/* 連携管理（Manage）では一覧の中に置くのでボタン幅を広げない */
.sns-btn-row.sns-btn-row-inline .btn-sns {
  flex: 0 0 auto;
  max-width: none;
}

@media (max-width: 575.98px) {

  /* 狭い画面では縦積みにして押しやすくする */
  .auth-actions .btn,
  .btn-sns {
    flex: 1 1 100%;
    max-width: none;
  }
}

/* ------------------------------------------------------------
   注文履歴・見積履歴のサムネイル一覧（Member/Index）
   4枚で折り返してしまい列の余白が余っていたので、
   1行あたりの枚数を増やす（50px × 7枚 ＋ gap-1 6つ分）
   ------------------------------------------------------------ */
.history-thumbs {
  max-width: 374px;
}

@media (max-width: 767.98px) {

  /* 狭い画面は表がはみ出すので従来どおり4枚で折り返す */
  .history-thumbs {
    max-width: 212px;
  }
}

/* =============================================
   MEMBER MYPAGE (会員用ページ)
   ============================================= */

/* アカウント情報とその設定リンクを1枚のカードにまとめる。
   dl-horizontal 自体が枠線を持つので、カード内では枠を外す。 */
.member-account-card {
  border: 1px solid #ece6dd;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 1.5rem;
}

.member-account-card .member-account-id {
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* 長いメールアドレスでも横にはみ出さず折り返す */
.member-account-card .member-account-id dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {

  /* スマホは項目名と値を縦に並べ、値を左寄せにする */
  .member-account-card .member-account-id {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .member-account-card .member-account-id + .member-account-id {
    margin-top: 8px;
  }

  .member-account-card .member-account-id dd {
    text-align: left;
  }
}

.member-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f2ede6;
}

/* 要対応のご注文をまとめて知らせるバナー */
.member-todo {
  border: 1px solid #f0c9a0;
  border-left-width: 4px;
  border-radius: 12px;
  background-color: #fdf6ee;
  padding: 12px 16px;
  margin-bottom: 1.5rem;
}

.member-todo-title {
  margin: 0 0 0.5rem;
  font-weight: bold;
  color: #a1521a;
}

.member-todo-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.member-todo-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.25rem 0;
}

.member-todo-msg {
  color: #a1521a;
}

.member-todo-more {
  margin: 0.5rem 0 0;
  font-size: 0.9em;
}

/* 再注文のご案内(Member/Index, Order/Detail)。
   再注文ボタンが注文詳細の明細の中にしかなく認知されていなかったので、機能そのものを知らせる */
.member-reorder-guide {
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-accent);
  border-radius: 12px;
  background-color: var(--c-surface);
  padding: 12px 16px;
  margin-bottom: 1.5rem;
}

.member-reorder-guide-title {
  margin: 0 0 0.25rem;
  font-weight: bold;
  color: var(--c-accent-2);
}

.member-reorder-guide-text {
  margin: 0 0 0.5rem;
}

.member-reorder-guide-text:last-child {
  margin-bottom: 0;
}

/* 再注文ボタン。一覧の中でも見落とされないよう塗りつぶしにする */
.member-reorder-btn {
  background-color: var(--c-accent);
  border: 1px solid var(--c-accent);
  color: var(--c-white);
  white-space: nowrap;
}

.member-reorder-btn:hover,
.member-reorder-btn:focus {
  background-color: var(--c-accent-2);
  border-color: var(--c-accent-2);
  color: var(--c-white);
}

/* 注文履歴・見積履歴の番号リンク。サイト全体の a は文字色のまま下線なしで
   リンクだと分かりにくいので、ボタン(btn-quiet)と同じ色＋下線にする */
.member-no-link {
  color: #2F7B85;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.member-no-link:hover,
.member-no-link:focus {
  color: #235F68;
}

/* 注文履歴の「ご注文商品」。商品名の下に仕様名を小さく出す */
.member-order-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.member-order-items li + li {
  margin-top: 0.35rem;
}

.member-order-item-name {
  display: block;
}

.member-order-item-spec,
.member-order-item-hit,
.member-order-item-more {
  display: block;
  font-size: 0.85em;
  color: var(--c-text-2);
}

/* 検索キーワードに一致した部分 */
.member-order-table mark {
  padding: 0 1px;
  background-color: #fff0a8;
  color: inherit;
}

/* スマホでは5列の表が画面からはみ出し、ページ全体が横に広がっていたので、
   1件ずつのカードにして「項目名：値」を縦に並べる(項目名は td の data-label) */
@media (max-width: 767.98px) {

  .member-order-table thead {
    display: none;
  }

  .member-order-table,
  .member-order-table tbody,
  .member-order-table tr,
  .member-order-table td {
    display: block;
    width: 100%;
  }

  .member-order-table tr {
    border: 1px solid #ece6dd;
    border-radius: 12px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background-color: var(--c-white);
  }

  .member-order-table > :not(caption) > * > * {
    display: flex;
    gap: 0.75rem;
    padding: 6px 0;
    border-bottom: 1px solid #f2ede6;
    box-shadow: none;
    background-color: transparent;
    overflow-wrap: anywhere;
  }

  .member-order-table > :not(caption) > * > *:last-child {
    border-bottom: 0;
  }

  .member-order-table td::before {
    content: attr(data-label);
    flex: 0 0 6.5em;
    font-size: 0.85em;
    font-weight: bold;
    color: var(--c-text-2);
  }

  .member-order-table td > * {
    min-width: 0;
  }

  /* 画像はカード幅いっぱいまで並べてよい */
  .member-order-table .history-thumbs {
    max-width: none;
  }
}

/* 注文履歴・見積履歴の検索フォーム */
.member-search {
  border: 1px solid #ece6dd;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 1rem;
}

.member-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 1rem;
}

.member-search-row + .member-search-row {
  margin-top: 0.5rem;
}

.member-search-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  font-size: 0.9em;
}

.member-search-keyword {
  flex: 1 1 260px;
}

.member-search-range {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.member-search-buttons {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

.member-search-result {
  margin: 0 0 0.5rem;
  font-size: 0.9em;
  color: var(--c-text-2);
}

.member-search-empty {
  padding: 1rem 0;
  color: var(--c-text-2);
}

@media (max-width: 767.98px) {

  .member-search-field,
  .member-search-keyword {
    flex: 1 1 100%;
  }

  .member-search-buttons {
    margin-left: 0;
  }
}

/* ログアウトは履歴セクションとは別の操作なので、区切って離す */
.member-logout {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #f2ede6;
}

/* ── お届け先／配送先の一覧(Member/Address, Cart/Address) ──
   1件ずつカードにして「誰に・どこへ」を左、操作ボタンを右に置く。
   チップは住所側に置き、行ごとにボタンの高さがずれないようにする */
.mi-addrsel {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mi-addrsel__item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-8);
  background: var(--c-white);
}

.mi-addrsel__item--default {
  border-color: var(--btn-primary-bg);
  background: #FEF5F0;
}

/* デフォルトはチップとカードの淡い塗りで見分けられるようにする */
.mi-addrsel__badge {
  display: inline-block;
  margin-bottom: .4rem;
  padding: .1rem .7rem;
  border: 1px solid var(--c-text);
  border-radius: var(--radius-oval);
  color: var(--c-text);
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
}

.mi-addrsel__body {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.mi-addrsel__name {
  font-weight: 700;
  font-size: 1.05rem;
}

.mi-addrsel__kana,
.mi-addrsel__tel {
  color: var(--c-text-2);
  font-size: .85rem;
  font-weight: normal;
}

.mi-addrsel__act {
  flex: 0 0 auto;
  display: flex;
  gap: .5rem;
}

.mi-addrsel__act .btn {
  white-space: nowrap;
}

.mi-addrsel__add {
  margin-top: 1.5rem;
}

.mi-addrsel__foot {
  margin-top: 1.5rem;
}

.mi-addrsel__back {
  color: var(--c-text-2);
  text-decoration: none;
}

.mi-addrsel__back:hover {
  color: var(--c-text);
  text-decoration: underline;
}

/* SPはボタンを住所の下に全幅で置く */
@media (max-width: 767.98px) {
  .mi-addrsel__item {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
    padding: .875rem 1rem;
  }

  .mi-addrsel__act {
    flex-direction: column;
  }

  .mi-addrsel__act .btn,
  .mi-addrsel__add .btn {
    width: 100%;
  }
}

/* ── 以下 site.css から移設。mi- プレフィックスは misite 専用で
   WordPress 側(z_wordpress)では一度も使われていないため ── */

/* 入力フォーム系(ご注文入力・ご注文確認など)は横に広がりすぎないようにする
   （.mi-form-page はフォーム系ページにのみ置く） */
@media (min-width: 992px) {

  body:has(.mi-form-page) .container {
    max-width: 980px;
  }
}

/* ラベル横の補足(名称が長い場合は～ など) */
.mi-label-note {
  color: #777;
  font-size: 0.85em;
  font-weight: normal;
}

/* 送信ボタン:幅を抑えて文字を大きく */
.mi-submit-btn {
  width: 100%;
  max-width: 320px;
  font-size: 1.125rem;
  font-weight: bold;
  padding: 0.6rem 1.5rem;
}

/* ══════════════════════════════════════════════════════════════
   入力フォーム(Cart/Checkout・Member/Edit)
   もとは両ページの <style> に重複して書かれていたものを集約した。
   .mi-addr-section 系は両ページ共通、.mi-notice-* / .mi-kessai-grid /
   .mi-ryosyu-row / .mi-haisou-row / .mi-input-off / .mi-radio-off は
   現状 Cart/Checkout でのみ使用。
   ══════════════════════════════════════════════════════════════ */
.field-validation-error{font-size:clamp(0.625rem, 0.65vw + 0.25rem, 0.75rem);font-weight:700;}
.mi-notice-box{margin:10px 0;}
.mi-notice-scroll{max-height:320px;overflow-y:scroll;overflow-anchor:none;border:1px solid #ccc;background:#f9f9f9; font-size:0.85em;color:#555;scrollbar-width:auto;scrollbar-color:var(--btn-warning-bg) #e6e7e9;}
.mi-notice-scroll::-webkit-scrollbar{width:12px;}
.mi-notice-scroll::-webkit-scrollbar-track{background:#e6e7e9;border-radius:6px;}
.mi-notice-scroll::-webkit-scrollbar-thumb{background:var(--btn-warning-bg);border-radius:6px;border:2px solid #e6e7e9;}
.mi-notice-check{margin-top:6px;font-weight:bold;}
/* 住所入力エリア:コンパクト化＋スマホ縦長対応 */
/* 必須アイコンはラベルの右に表示し、フォーム項目は次の行に配置する */
.mi-addr-section .form-group,
.mi-required-group{
    display:flex;
    flex-direction:column;
    gap:.15rem;
    margin-top:.35rem;
    margin-bottom:.35rem;
    padding:.3rem .5rem;
}
.mi-addr-section .form-group>label,
.mi-required-group>label{
    margin-bottom:0;
    padding-top:.3rem;
}
.mi-addr-section .form-group .label-row,
.mi-required-group .label-row{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:.15rem .6rem;
}
.mi-addr-section .form-group .label-row>label,
.mi-required-group .label-row>label{
    flex:0 0 auto;
    margin-bottom:0;
    padding-top:.3rem;
}
.mi-addr-section .form-group>div,
.mi-required-group>div{
    width:100%;
}
.mi-addr-section .form-inline{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.35rem;
}
.mi-addr-section .form-inline .form-control,
.mi-addr-section .form-inline select.form-control{
    flex:1 1 120px;
    min-width:80px;
    width:auto;
    margin-bottom:0;
}
/* 郵便番号・都道府県:PCでは横並び、狭い画面ではform-group単位で折り返す */
.mi-addr-section .mi-addr-row{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:0 1rem;
}
.mi-addr-section .mi-addr-row>.form-group{
    flex:1 1 260px;
    min-width:240px;
}
/* input/selectのパディングを詰めて高さを揃える */
.mi-addr-section .form-control,
.mi-required-group .form-control{
    padding:.25rem .5rem;
    height:32px;
    line-height:1.4;
}
.zip-btn {
    padding: 6px;
}
/* 郵便番号・都道府県・市区町村町名のような短い項目を1行に詰める */
.mi-addr-section .mi-addr-row.mi-addr-row-3>.form-group{
    flex:1 1 200px;
    min-width:170px;
}
/* 決済方法:2個ずつの横並び(縦2行×横2列) */
.mi-kessai-grid{
    display:grid;
    grid-template-rows:repeat(2,auto);
    grid-auto-flow:column;
    gap:.1rem 1.5rem;
    justify-content:start;
}
.mi-kessai-grid>label{
    margin:0;
    white-space:nowrap;
}
/* 領収証の発行と宛名の横並び */
.mi-ryosyu-row{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:0 1rem;
}
.mi-ryosyu-row>.form-group:first-child{
    flex:0 0 auto;
    min-width:150px;
}
.mi-ryosyu-row>.form-group:last-child{
    flex:1 1 260px;
    min-width:220px;
}
/* 未チェック時の入力不可表示 */
.form-control.mi-input-off,
.form-control:disabled{
    background-color:#e9ecef;
    color:#888;
    cursor:not-allowed;
}
/* 発送についてのブロック */
.mi-haisou-row{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:0 1rem;
}
.mi-haisou-row>.form-group{
    flex:1 1 220px;
    min-width:190px;
}
.mi-radio-off{
    color:#999;
    text-decoration:line-through;
}

/* ── 配送先・お支払いなどの一覧(AddressList: ご注文の確認・注文詳細・見積詳細) ──
   PCでは項目名が左端・値が右端に離れて目で追いにくかったので、
   項目名を固定幅の列にして値をすぐ右に左寄せで並べる。スマホは従来どおり左右に振り分ける */
@media (min-width: 768px) {

  .dl-address-list > div {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 1.5rem;
  }

  .dl-address-list > div > dt {
    flex: 0 0 10em;
  }

  .dl-address-list > div > dd {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    overflow-wrap: anywhere;
  }
}