/* iPhone アプリ（問題集）の入口（2026-10-22 本人決定。現状/2026-10-21_iPhoneアプリの入口_すり合わせ）。
   紹介ページ（about.html）の最初の画面と一番下、マイページ（account.html）のカード。PC の左のメニューの QR は nav-compact.css。
   バッジは Apple の配る絵をそのまま使う（色・形・文字を変えない）。画面では高さ 40px 以上、周りに高さの 1/4 以上の余白。
   iPhone アプリの中（data-web-only を native-app-role.js が消す）と Mac アプリ（html.is-desktop）では出さない。 */
html.is-native [data-appstore-entry],html.is-desktop [data-appstore-entry]{display:none!important}

.ase-badge{display:inline-block;line-height:0;border-radius:9px;flex:none}
.ase-badge img{display:block;height:44px;width:auto}
.ase-badge:focus-visible{outline:3px solid #6535b5;outline-offset:4px}

/* 紹介ページの最初の画面: スマホはボタンとリンクの下にバッジだけ（案A）、PC は注の下に1行＋バッジ＋QR（案B） */
.ase-hero{margin:0}
.ase-hero--sp{display:none}
.ase-hero--pc{display:flex;justify-content:center;align-items:center;gap:20px;margin:16px 0 0}
.ase-hero__text{display:flex;flex-direction:column;align-items:center;gap:8px}
.ase-hero__lead{margin:0;font-size:14px;font-weight:700;line-height:1.5;color:#3b332d}
.ase-qr{display:block;width:96px;height:96px;padding:5px;box-sizing:content-box;background:#fff;border:1px solid #efd9ba;border-radius:10px}
@media(max-width:650px){
  .ase-hero--sp{display:flex;justify-content:center;padding:11px 0 0}
  .ase-hero--pc{display:none}
}

/* 紹介ページの一番下: 締めのカードの中、細い線の下に1行＋バッジ（案B）と、Apple の商標の一文 */
.closing{flex-wrap:wrap}
.ase-closing{flex:1 0 100%;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:0;padding-top:20px;border-top:1px solid #efd9ba}
.ase-closing__lead{margin:0!important;font-size:15px;font-weight:700;color:#3b332d!important}
.ase-credit{flex:1 0 100%;margin:0!important;font-size:12px;line-height:1.6}
@media(max-width:650px){
  .ase-closing{flex-direction:column;align-items:flex-start;gap:10px}
}

/* マイページ: メニューの下の別のカード（案C）。アイコン＋名前と1行。バッジは右、狭い幅では名前の下 */
.ase-card{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:12px 16px;background:#f7f2ff!important;border-color:#e4d8f7!important}
.ase-card__icon{display:block;width:56px;height:56px;border-radius:13px;grid-row:1 / span 2}
.ase-card__text{min-width:0}
.ase-card__note span{display:inline-block}
.ase-card .ase-card__title,.dpg-scr section.ase-card h2.ase-card__title{margin:0;padding:0;font-size:17px;line-height:1.4;font-weight:800;letter-spacing:0}
.ase-card .ase-card__note{margin:2px 0 0!important;font-size:14px;line-height:1.55;color:#65594d}

.ase-card .ase-badge{grid-column:3;grid-row:1 / span 2}
@media(max-width:560px){
  .ase-card{grid-template-columns:56px minmax(0,1fr)}
  .ase-card .ase-badge{grid-column:2;grid-row:2;justify-self:start}
  .ase-card__icon{grid-row:1 / span 2;align-self:start}
}

/* PC の紹介ページの最初の画面は、絵の上に文を重ねる形（about.css の .art-hero）。入口の行は絵（りんご）の上に来るので、
   白い札に載せて読めるようにし、吹き出し（.hero-callout）は右下へ下げる。前は注「同梱の過去問と英単語は…」の後ろ半分が
   吹き出しの下に隠れていた（2026-10-22 本人「直す」。注の文はそのまま）。 */
@media(min-width:651px){
  .ase-hero--pc{width:max-content;max-width:100%;margin:14px auto 0;padding:10px 14px;background:rgb(255 254 250 / 94%);border:1px solid #efd9ba;border-radius:16px;box-shadow:0 6px 20px rgb(41 38 34 / 8%)}
  .ase-hero--pc .ase-qr{border:0;padding:0;width:96px;height:96px}
  .art-hero{min-height:auto}
  .art-hero .hero-art{object-position:center top}
  .art-hero .hero-callout{top:5%;bottom:auto;left:2.5%;right:auto;transform:rotate(-3deg)}
}
@media(max-width:300px){
  .ase-card{grid-template-columns:minmax(0,1fr)}
  .ase-card__icon{grid-row:auto;width:44px;height:44px;border-radius:10px}
  .ase-card .ase-badge{grid-column:1;grid-row:auto}
}