@charset "UTF-8";
/* ゲーム画面(highlow.css)と同じ配色・書体・罫線 */
.hl14{
  --paper:#e8dcc0; --paper-2:#3a2216; --ink:#2b2724; --mid:#6d6557; --red:#a3302a;
  --f-latin:"Rye","Georgia",serif;
  --f-title:"Dela Gothic One","Hiragino Kaku Gothic StdN","Yu Gothic",sans-serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  background:var(--paper-2);color:var(--ink);
  font-family:var(--f-body);font-weight:500;font-size:15px;line-height:1.7;
  padding:20px 16px 40px;
}
.hl14 *{box-sizing:border-box;margin:0;padding:0}
.hl14-poster{
  position:relative;max-width:760px;margin:0 auto;background:var(--paper);
  padding:40px 24px 42px;display:flex;flex-direction:column;align-items:center;gap:48px;
  overflow:hidden;border-radius:2px;
  box-shadow:inset 0 0 80px rgba(110,60,30,.42),inset 0 0 14px rgba(58,34,22,.55),0 12px 30px rgba(0,0,0,.55);
}
.hl14-rule{display:flex;align-items:center;gap:10px;width:100%;max-width:420px;color:var(--mid);font-family:var(--f-latin);font-size:13px;letter-spacing:.14em;line-height:1;white-space:nowrap}
.hl14-rule::before,.hl14-rule::after{content:"";flex:1;height:5px;border-block:1.5px solid var(--mid)}
.hl14-rule img{width:30px;display:block}
 
/* HERO */
.hl14-hero{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;width:100%}
.hl14-hero__store{font-weight:700;font-size:13px;letter-spacing:.2em}
.hl14-eyebrow{font-family:var(--f-latin);font-size:13px;letter-spacing:.14em;color:var(--mid)}
.hl14-eyebrow b{font-weight:400;font-size:30px;color:var(--red);letter-spacing:0;margin-right:2px}
.hl14-marquee{font-family:var(--f-latin);font-size:clamp(40px,11vw,84px);line-height:1.05;margin:4px 0 8px;letter-spacing:.02em;color:var(--ink);text-shadow:2px 2px 0 var(--paper),5px 5px 0 var(--mid)}
.hl14-marquee_date {
    font-family: var(--f-latin);
    font-size: clamp(12px, 3.4vw, 30px);
    line-height: 1;
    margin: 16px 0 0 0;
    color: var(--ink);
    /* text-shadow: 2px 2px 0 var(--paper), 5px 5px 0 var(--mid); */
}
.hl14-hero h2{font-family:var(--f-title);font-weight:400;font-size:clamp(20px,4vw,30px);line-height:1.2;letter-spacing:.14em;border-block:2px solid var(--ink);padding:4px 16px;color:var(--ink)}
.hl14-hero__catch{font-family:var(--f-title);font-size:clamp(17px,4.4vw,24px);letter-spacing:.08em;margin-top:22px;line-height:1.5}
.hl14-hero__text{margin-top:20px;font-size:14px;max-width:30em}
p.hl14-lead {
    margin: 16px 0px 0 0;
    font-size: 14px;
    letter-spacing: 0;
}
.hl14-illust {
    width: 60%;
    max-width: 350px;
}
 
/* COUPON */
.hl14-coupon{margin-top:18px;width:100%;max-width:400px;padding:6px;border:3px double var(--ink);background:var(--paper)}
.hl14-coupon__in{border:2px dashed var(--ink);padding:12px 12px 14px}
.hl14-coupon__label{font-family:var(--f-latin);font-size:12px;letter-spacing:.16em;color:var(--mid)}
.hl14-coupon__price{font-family:var(--f-latin);font-size:clamp(46px,12vw,66px);line-height:1.1;color:var(--red)}
.hl14-coupon__price small{font-family:var(--f-title);font-size:.36em;margin:0 6px 0 2px}
.hl14-coupon__price em{font-style:normal;font-size:.55em;color:var(--ink)}
.hl14-coupon__jp{font-weight:900;font-size:14px}
 
/* SECTION */
.hl14-sec{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}
.hl14-sec__ttl{font-family:var(--f-title);font-weight:400;font-size:22px;letter-spacing:.14em;margin-bottom:14px;color:var(--ink)}
 
/* STEPS */
.hl14-steps{list-style:none;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hl14-step{text-align:center;padding:16px 12px 18px;border:3px double var(--ink)}
.hl14-label{font-family:var(--f-latin);font-size:12px;letter-spacing:.16em;color:var(--mid)}
.hl14-step__no{font-family:var(--f-latin);font-size:34px;line-height:1.1;color:var(--ink)}
.hl14-step__art{height:104px;display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 0 12px}
.hl14-step__ttl{font-weight:900;font-size:16px}
.hl14-step__txt{font-size:13px;margin-top:6px;text-align:left}
.hl14-vs{font-family:var(--f-latin);font-size:16px;letter-spacing:.1em}
 
/* CARD(仮のCSSカード。ゲームのカード画像 <img> に差し替え可) */
.hl14-card{width:58px;aspect-ratio:5/7;border-radius:7px;background:#f3ead4;/*box-shadow:2px 3px 0 rgba(59,48,31,.35);*/display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--f-latin);font-size:24px;line-height:1;color:var(--ink);position:relative;flex:none}
.hl14-card i{font-style:normal;font-family:serif;font-size:15px;margin-top:4px}
.hl14-card.is-red{color:var(--red)}
/*.hl14-card.is-back{background:var(--ink);background-image:repeating-linear-gradient(45deg,rgba(232,220,192,.22) 0 1.5px,transparent 1.5px 7px),repeating-linear-gradient(-45deg,rgba(232,220,192,.22) 0 1.5px,transparent 1.5px 7px);box-shadow:inset 0 0 0 4px #f3ead4,2px 3px 0 rgba(59,48,31,.35)}*/
.hl14-card.is-back {
    background-image: url(https://www.marumitsu.jp/game/cards/back.png);
    background-size: cover;
}
.hl14-card.is-pick{transform:translateY(-6px) rotate(-2deg)}
.hl14-card.is-sm{width:46px;font-size:18px}
.hl14-card.is-sm i{font-size:12px}
.hl14-card.is-joker{font-size:9px;letter-spacing:.04em}
.hl14-win{position:absolute;right:-20px;top:-12px;transform:rotate(10deg);font-family:var(--f-latin);font-size:13px;color:var(--red);border:2px solid var(--red);padding:3px 6px;background:var(--paper)}
.hl14-card.hl14-card-7{background-image: url(https://www.marumitsu.jp/game/cards/7.png);
    background-size: cover;}
    .hl14-card.hl14-card-k{background-image: url(https://www.marumitsu.jp/game/cards/13.png);
    background-size: cover;}
 
/* RANK */
.hl14-rank{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px}
.hl14-rank span{font-family:var(--f-latin);color:var(--mid);font-size:14px}
.hl14-rank__cap{display:flex;justify-content:space-between;width:100%;max-width:440px;margin-top:6px}
.hl14-small{font-size:12px;color:var(--mid)}
 
/* CTA */
.hl14-btn{display:inline-block;font-family:var(--f-body);font-weight:900;font-size:18px;letter-spacing:.1em;border:3px solid var(--ink);border-radius:4px;padding:14px 40px;background:var(--ink);color:var(--paper) !important;text-decoration:none !important;box-shadow:3px 3px 0 var(--mid)}
.hl14-btn:hover{transform:translate(-1px,-1px)}
.hl14-footline{font-family:var(--f-latin);font-size:clamp(14px,4vw,19px);letter-spacing:.08em;text-align:center;margin-top:14px}
 
/* INFO */
.hl14-info{width:100%;max-width:560px;display:grid;grid-template-columns:130px 1fr;border-top:2px solid var(--ink);font-size:14px}
.hl14-info dt,.hl14-info dd{padding:12px 8px;border-bottom:1.5px solid var(--mid)}
.hl14-info dt{font-weight:900}
.hl14-notes{list-style:none;width:100%;max-width:560px;margin-top:10px;font-size:12px;color:var(--mid)}
.hl14-notes li{padding-left:1em;text-indent:-1em}
.hl14-notes li::before{content:"※"}

.hl14-table {
  width: 100%;
  max-width: 560px;
  margin: 0 auto 28px;
  border-collapse: collapse;
  font-family: "Zen Kaku Gothic New", sans-serif;
}
.hl14-table th {
  padding: 10px 8px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-align: center;
}
.hl14-table td {
  padding: 12px 8px;
  border-bottom: 1px dashed currentColor;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}
.hl14-table__no { font-family: "Rye", serif; letter-spacing: .05em; }
.hl14-table__act { width: 9.5em; }
.hl14-table__empty { padding: 24px 8px; opacity: .6; }

/* 表の中のボタンは小さく */
.hl14-table .hl14-btn {
  display: inline-block;
  width: 8em;
  min-width: 0;
  margin: 0;
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  box-sizing: border-box;
}

/* 状態ラベル(ボタンと同じ幅・高さ) */
.hl14-state {
  display: inline-block;
  width: 8em;
  padding: 8px 0;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.3;
  box-sizing: border-box;
}
.hl14-state.is-none { border-style: dashed; opacity: .45; }
.hl14-state.is-done { opacity: .7; }
.hl14-state.is-won  { background: #b8322a; border-color: #b8322a; color: #fff; } /* ★色は調整 */

.hl14-form { margin: 0; }
button.hl14-btn {
  border: 0;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

@media (max-width: 480px) {
  .hl14-table th, .hl14-table td { padding: 10px 4px; font-size: 12px; }
  .hl14-table .hl14-btn, .hl14-state { width: 7em; font-size: 12px; }
}

@media (max-width:680px){
  .hl14-poster{padding:36px 16px 38px;gap:24px}
  .hl14-steps{grid-template-columns:1fr}
  .hl14-step__txt{text-align:center}
  .hl14-info{grid-template-columns:1fr}
  .hl14-info dt{border-bottom:0;padding-bottom:0}
  .hl14-info dd{padding-top:2px}
  .hl14-card.is-sm{width:36px;font-size:14px;border-radius:5px}
  .hl14-card.is-joker{font-size:7px}
  .hl14-rank{gap:2px}
  .hl14-rank span{font-size:11px}
}

/* ラッキードロー — ゲーム部分(highlow.css のゲーム卓を hl14 ページ用に移植)
 * ポスター枠・タイトル・ボタン・ラベルは aniver-ver2.css(.hl14-*)側を使います。
 * ストアのテーマと衝突しないよう、クラス名はすべて hlg- 始まりにしています。 */
.hlg{
  --paper:#e8dcc0; --ink:#2b2724; --mid:#6d6557; --red:#a3302a;
  --f-title:"Dela Gothic One","Hiragino Kaku Gothic StdN","Yu Gothic",sans-serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  width:100%;margin:0 0 24px;color:var(--ink);font-family:var(--f-body)
}
.hlg *{box-sizing:border-box}
.hlg-stage{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.hlg-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.hlg-msg{font-weight:900;font-size:17px;line-height:1.7;text-align:center;min-height:1.7em;margin:0;text-wrap:balance}
.hlg-hidden{display:none !important}

/* カード(裏表2枚の画像を重ねてめくる) */
.hlg-card{--w:74px;display:block;width:var(--w);aspect-ratio:5/7;max-width:100%;min-width:0;margin:0;padding:0;perspective:800px;
  background:none;border:0;box-shadow:none;font:inherit;color:inherit;-webkit-appearance:none;appearance:none}
.hlg-card.hlg-lg{--w:96px}
.hlg-card.hlg-sm{--w:52px}
button.hlg-card{cursor:pointer}
button.hlg-card:disabled{cursor:default}
button.hlg-card:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:8px}
.hlg-inner{position:relative;width:100%;height:100%;transition:transform .55s cubic-bezier(.3,.7,.2,1);transform-style:preserve-3d}
.hlg-card.hlg-up .hlg-inner{transform:rotateY(180deg)}
.hlg-inner img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:7px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:2px 3px 0 rgba(59,48,31,.35)}
.hlg-inner img.hlg-face{transform:rotateY(180deg)}
.hlg-card.hlg-pickable:hover .hlg-inner{transform:translateY(-6px) rotate(-2deg)}
.hlg-card.hlg-chosen{filter:drop-shadow(0 6px 8px rgba(59,48,31,.45))}
.hlg-card.hlg-dim{opacity:.5}

/* ボタン(見た目は .hl14-btn。button要素用の補正のみ) */
button.hlg-btn{font-family:var(--f-body);cursor:pointer;-webkit-appearance:none;appearance:none}

/* 結果 */
.hlg-result{width:100%;max-width:400px;text-align:center;padding:16px;display:flex;flex-direction:column;gap:8px;align-items:center;
  border:3px double var(--ink);background:var(--paper)}
.hlg-result h3{font-family:var(--f-title);font-weight:400;font-size:24px;line-height:1.3;margin:0;padding:0;border:0;color:var(--ink)}
.hlg-result p{margin:0}
.hlg-result img{max-width:160px;height:auto}
.hlg-coupon{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;align-items:center;border:2px dashed var(--ink);padding:8px 12px;
  font-family:ui-monospace,Menlo,monospace;font-size:18px;letter-spacing:.08em;user-select:all}
.hlg-copy{font-family:var(--f-body);font-size:12px;line-height:1.6;border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  border-radius:3px;padding:2px 8px;cursor:pointer;-webkit-appearance:none;appearance:none}
.hlg-note{font-size:12px;line-height:1.7;color:var(--mid)}
.hlg-back{font-size:13px;font-weight:700;color:var(--ink);text-decoration:underline}

.hlg-mail{font-family:var(--f-body);font-weight:700;font-size:13px;line-height:1.6;border:2px solid var(--ink);background:var(--ink);color:var(--paper);
  border-radius:3px;padding:6px 16px;cursor:pointer;-webkit-appearance:none;appearance:none}
.hlg-mail:disabled{opacity:.6;cursor:default}

p.hl14-notice {
    border: solid 2px;
    padding: 16px;
}

@media (max-width:420px){
  .hlg-card.hlg-lg{--w:84px}
  .hlg-card.hlg-sm{--w:40px}
  .hlg-row{gap:6px}
}
@media (prefers-reduced-motion:reduce){.hlg-inner{transition:none}}