/** Shopify CDN: Minification failed

Line 52:2 Unexpected "{"
Line 52:3 Expected identifier but found "%"
Line 53:11 Unexpected "/"
Line 55:3 Expected identifier but found "%"
Line 99:2 Unexpected "{"
Line 99:3 Expected identifier but found "%"
Line 99:89 Expected identifier but found "%"
Line 107:2 Unexpected "{"
Line 107:3 Expected identifier but found "%"
Line 107:74 Expected identifier but found "%"
... and 26 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:coupon-list (INDEX:33) */
.coupon-list-wrap {
    --coupon-brand-bg: #faf8f2;
    --coupon-brand-green: #516857ff;
    --coupon-brand-green-dark: #2c4d34;
    --coupon-brand-text: #3a352c;
    --coupon-brand-border: #ddd6c4;
    --coupon-brand-accent: #8b7054ff;

    max-width: 1160px;
    margin: 0 auto;
    padding: 40px 16px;
    color: var(--coupon-brand-text);
  }
  .coupon-list-heading {
    text-align: center;
    margin-bottom: 28px;
    font-weight: 600;
    letter-spacing: 0.05em;
  }
  .coupon-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    align-items: start;
  }
  .coupon-card {
    background: var(--coupon-brand-bg);
    border: 1px solid var(--coupon-brand-border);
    border-radius: 16px;
    padding: 22px 22px 8px;
  }
  {%- comment -%}
    details/summaryのネイティブ機能でアコーディオン化。
    デフォルトの三角マーカーは消して、代わりに右端に矢印アイコンを出す。
  {%- endcomment -%}
  .coupon-card__header {
    margin: -22px -22px 0;
    padding: 22px 40px 14px 22px;
    cursor: pointer;
    list-style: none;
    position: relative;
  }
  .coupon-card__header::-webkit-details-marker {
    display: none;
  }
  .coupon-card__header::after {
    content: '';
    position: absolute;
    top: 26px;
    right: 22px;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--coupon-brand-green-dark);
    border-bottom: 2px solid var(--coupon-brand-green-dark);
    transform: rotate(45deg);
    transition: transform 0.2s;
  }
  .coupon-card[open] .coupon-card__header::after {
    transform: rotate(-135deg);
    top: 30px;
  }
  .coupon-card__name {
    margin: 0 0 8px;
    font-size: 1.3rem;
    color: var(--coupon-brand-green-dark);
  }
  .coupon-card__description {
    font-size: 1.08rem;
    color: #6b6455;
    margin: 0 0 10px;
    line-height: 1.55;
  }
  .coupon-card__expiry {
    font-size: 1.2rem;
    color: #d2691e;
    margin: 0;
  }

  {%- comment -%} チケット群のラップ（横長チケットを縦に並べる） {%- endcomment -%}
  .coupon-card__tickets {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 4px 0 20px;
  }

  {%- comment -%} カード最下部の注意事項（あれば表示） {%- endcomment -%}
  .coupon-card__attention {
    border-top: 1px dashed var(--coupon-brand-border);
    padding: 12px 0 16px;
  }
  .coupon-card__attention-heading {
    font-size: 1.18rem;
    font-weight: 450;
    color: #d2691e;
    margin: 0 0 4px;
  }
  .coupon-card__attention-body {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #8a8370;
    margin: 0;
  }

  {%- comment -%} チケット風レイアウト：縦帯スタブ(左)＋本体(右)、縦横比おおよそ1:3 {%- endcomment -%}
  .coupon-ticket {
    --ticket-accent-width: 40px;
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 1;
    min-height: 96px;
    display: flex;
    flex-direction: row;
    background: #fff;
    border: 1px solid var(--coupon-brand-border);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }
  .coupon-ticket__main {
    flex: 1;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 0;
  }
  {%- comment -%} 本体と縦帯の境目に点線を入れる（両チケット共通） {%- endcomment -%}
  .coupon-ticket__accent {
    flex: 0 0 var(--ticket-accent-width);
    background: var(--coupon-brand-green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-align: center;
    padding: 12px 6px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    line-height: 1.5;
    border-radius: 14px 0 0 14px;
    border-right: 2px dashed rgba(255, 255, 255, 0.6);
  }
  .coupon-ticket--online .coupon-ticket__accent {
    background: var(--coupon-brand-accent);
  }

  {%- comment -%}
    くぼみ：各チケットのマークアップに明示的なdiv要素として配置している
    （共通クラスへの疑似要素にすると、意図せず別要素に継承されるリスクがあるため、
    店舗・オンラインそれぞれのマークアップに個別に置く形にしている）
  {%- endcomment -%}
  .coupon-ticket__notch {
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--coupon-brand-bg);
    border: 1px solid var(--coupon-brand-border);
    border-radius: 50%;
    z-index: 2;
  }
  {%- comment -%}
    clip-pathで、チケットの内側にあたる半分だけを残す
    （外側の半分は見えなくてよいので、枠線ごと非表示にする）
  {%- endcomment -%}
  .coupon-ticket__notch--top {
    left: var(--ticket-accent-width);
    top: -9px;
    transform: translateX(-50%);
    clip-path: inset(50% 0 0 0);
  }
  .coupon-ticket__notch--bottom {
    left: var(--ticket-accent-width);
    bottom: -9px;
    transform: translateX(-50%);
    clip-path: inset(0 0 50% 0);
  }
  .coupon-ticket__notch--left {
    left: -9px;
    top: 50%;
    transform: translateY(-50%);
    clip-path: inset(0 0 0 50%);
  }
  .coupon-ticket__notch--right {
    right: -9px;
    top: 50%;
    transform: translateY(-50%);
    clip-path: inset(0 50% 0 0);
  }

  .coupon-ticket__idle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  {%- comment -%}
    class側のdisplay:flexが[hidden]のデフォルト非表示より優先されてしまうため、
    明示的に上書きしておく。
  {%- endcomment -%}
  .coupon-ticket__idle[hidden] {
    display: none;
  }
  .coupon-ticket__revealed {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .coupon-ticket__revealed[hidden] {
    display: none;
  }
  {%- comment -%}
    店舗チケットのrevealedは、券面サイズを変えずに収めるため縦積みにする
    （小さいサムネイルを表示し、実際のスキャンはタップでのフルスクリーン拡大表示を使う）。
  {%- endcomment -%}
  .coupon-ticket--store .coupon-ticket__revealed {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  .coupon-ticket__action-btn {
    display: block;
    width: 100%;
    max-width: 260px;
    border: none;
    background: var(--coupon-brand-green);
    color: #fff;
    border-radius: 8px;
    padding: 12px 8px;
    font-size: 1.1rem;
    line-height: 1.5;
    cursor: pointer;
  }
  .coupon-ticket--online .coupon-ticket__action-btn {
    background: var(--coupon-brand-accent);
  }
  .coupon-ticket__action-btn:hover {
    filter: brightness(0.92);
  }
  .coupon-ticket__action-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
  }

  .coupon-ticket__barcode {
    line-height: 0;
    width: 100%;
    padding: 0 8px;
  }
  .coupon-ticket__barcode img {
    height: 44px;
    width: 100%;
    cursor: pointer;
  }
  .coupon-ticket__countdown {
    text-align: center;
    font-size: 0.88rem;
    color: var(--coupon-brand-accent);
    margin: 0;
  }

  .coupon-ticket__code-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    background: #f4f1e8;
    border-radius: 6px;
    padding: 8px 10px;
    width: 100%;
    max-width: 220px;
  }
  .coupon-ticket__code {
    flex: 1;
    font-family: monospace;
    font-size: 1.1rem;
    letter-spacing: 0.03em;
    text-align: center;
    word-break: break-all;
  }
  .coupon-ticket__copy-btn {
    flex: 0 0 auto;
    border: none;
    background: var(--coupon-brand-green-dark);
    color: #fff;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 0.95rem;
    cursor: pointer;
  }

  .coupon-list-empty,
  .coupon-list-login-required {
    text-align: center;
    color: #8a8370;
    padding: 40px 0;
  }

  {%- comment -%} 確認モーダル {%- endcomment -%}
  .coupon-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(58, 53, 44, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
  }
  .coupon-modal-overlay[hidden] {
    display: none;
  }
  .coupon-modal {
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    max-width: 360px;
    width: 100%;
  }
  .coupon-modal__text {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--coupon-brand-text);
    margin: 0 0 20px;
    white-space: pre-line;
  }
  .coupon-modal__actions {
    display: flex;
    gap: 10px;
  }
  .coupon-modal__btn {
    flex: 1;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-size: 1.1rem;
    cursor: pointer;
  }
  .coupon-modal__btn--cancel {
    background: #eee;
    color: #555;
  }
  .coupon-modal__btn--confirm {
    background: var(--coupon-brand-green);
    color: #fff;
  }

  {%- comment -%} フルスクリーンバーコード表示（タップで拡大） {%- endcomment -%}
  .coupon-fullscreen {
    position: fixed;
    inset: 0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
  }
  .coupon-fullscreen[hidden] {
    display: none;
  }
  .coupon-fullscreen__image {
    max-width: 90%;
    max-height: 70vh;
  }
  .coupon-fullscreen__close {
    position: absolute;
    top: 20px;
    right: 20px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 1.1rem;
    cursor: pointer;
  }
/* END_SECTION:coupon-list */