/* AMU PLAZA KOKURA | A NEW 2026.9.10 RENEWAL OPEN LP */
:root{
  --content-max:1440px;
  --content-inner:1145px;
  --grid-width:1080px;
  --text:#111;
  --new:#e74141;
  --renewal:#2e7cac;
  --tag:#eaeaea;
  --border-dark:#000;
  --border-soft:#ddd;
  --focus:#2e7cac;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  color:var(--text);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.75;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font-family:inherit}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Site wrapper */
body{
  background-color:#fff;
  background-image:
    linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8)),
    url("paint-bg.webp");
  background-size:cover, cover;
  background-repeat:no-repeat, no-repeat;
  background-position:center center, center center;
  background-attachment:fixed, fixed;
}
.site{max-width:var(--content-max);margin:0 auto;position:relative;background:transparent;overflow:hidden}
.site > *{position:relative;z-index:1}
.site-inner{max-width:var(--content-inner);margin:0 auto;padding:80px 0 0}

/* === HERO === */
.hero{
  position:relative;
  width:100%;
  aspect-ratio:1145 / 562;
  margin-bottom:100px;
}
/* Desktop: wrappers are layout-transparent so children can absolutely position */
.hero-row{display:contents}

.hero-mv{
  position:absolute;
  left:calc(243 / 1145 * 100%);top:0;
  width:calc(682 / 1145 * 100%);
  aspect-ratio:682 / 496;
  background:url("mv-bg.webp") center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.hero-mv img{width:92%;height:auto;max-width:none}
.hero-side{position:absolute;left:calc(965 / 1145 * 100%);top:0;width:calc(28 / 1145 * 100%)}
.hero-side img{width:100%;height:auto;display:block}
.hero-date{position:absolute;left:0;top:calc(342 / 562 * 100%);width:calc(261 / 1145 * 100%)}
.hero-amu{position:absolute;left:calc(1047 / 1145 * 100%);top:calc(427 / 562 * 100%);width:calc(98 / 1145 * 100%)}

/* === LEAD === */
.lead{width:var(--grid-width);max-width:100%;margin:0 auto 80px;display:flex;flex-direction:column;gap:28px}
.lead-copy{margin:0;font-weight:700;font-size:20px;line-height:1.75}
.lead-copy span{display:block}
.lead-photos{display:flex;gap:20px}
.lead-photos img{flex:1 0 0;min-width:0;aspect-ratio:4096 / 2536;object-fit:cover;width:100%}

/* === TABS === */
.tabs-section{width:var(--grid-width);max-width:100%;margin:0 auto}
.tabs{display:flex;gap:12px;padding:0 40px;margin:0}
.tab{
  flex:1 1 0;min-width:0;height:80px;
  border:1px solid var(--border-dark);border-bottom:none;
  border-radius:12px 12px 0 0;
  background:#000;color:#fff;
  font-weight:700;
  font-size:clamp(13px, 2.2vw, 24px);
  line-height:1.3;
  letter-spacing:-.005em;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:keep-all;
  cursor:pointer;padding:6px 10px;
  transition:background-color .15s ease,color .15s ease;
}
.tab[aria-selected="true"]{background:#fff;color:#000}
.tab:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}

.panels{border:1px solid var(--border-dark);background:#fff;padding:40px;margin-top:-1px}
.panel[hidden]{display:none}

/* === CARD GRID === */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.card{
  position:relative;
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--border-dark);
  border-radius:12px;
  overflow:hidden;
}
.card--span2{grid-column:span 2}

.card-badge{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:12px;
  font-family:"Acumin Pro",Arial,sans-serif;
  font-weight:700;
  font-size:20px;
  line-height:1.3;
  color:#fff;
}
.card--new .card-badge{background:var(--new)}
.card--renewal .card-badge{background:var(--renewal)}

/* stamp is now an inline <img> inside .card-name */
.card-stamp{
  width:36px;height:36px;
  vertical-align:middle;
  margin-right:6px;
  flex-shrink:0;
}

.card-photo{
  position:relative;
  width:100%;
  aspect-ratio:1988/1085;
  overflow:hidden;
}
.card-photo img{width:100%;height:100%;object-fit:cover;object-position:center}

.card-cat{padding:12px;display:flex}
.card-cat > span{
  flex:1;
  background:var(--tag);
  padding:10px;
  font-weight:500;font-size:12px;line-height:1.8;
}

.card-body{display:flex;flex-direction:column;align-items:center;gap:16px;padding:0 12px 24px}
.card-logo{
  width:100%;height:80px;
  border:1px solid var(--border-soft);
  display:flex;align-items:center;justify-content:center;
  padding:8px;
}
.card-logo img{max-width:100%;max-height:60px;width:auto;height:auto}
.card-logo--tall{padding:6px}
.card-logo--tall img{max-height:68px}

.card-name{
  margin:0;
  min-height:36px;
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;
  gap:2px 6px;
  font-weight:700;font-size:20px;line-height:1.3;text-align:center;
  width:100%;
  word-break:auto-phrase;
  overflow-wrap:anywhere;
}
.card-name small{font-size:14px;font-weight:700}
.card-name .sub{display:block;font-size:12px;font-weight:500;margin-top:4px;color:#555}

/* Card BAYCREWS spans wider: logo image displayed wider */
.card--baycrews .card-logo{padding:20px}
.card--baycrews .card-logo img{max-height:none;height:auto;max-width:80%}

/* === FOOTER === */
.site-footer{
  padding:80px 0;
  display:flex;flex-direction:column;align-items:center;gap:55px;
  margin-top:100px;
}
.site-footer .footer-logo{width:105px;height:auto}
.site-footer small{font-size:14px;letter-spacing:.04em;line-height:1.8}

/* === RESPONSIVE === */
@media (max-width:1200px){
  .site-inner{padding:60px 32px 0}
  .hero{margin-bottom:72px}
}
@media (max-width:900px){
  .site-inner{padding:32px 20px 0}
  .hero{
    aspect-ratio:auto;
    display:block;
    margin-bottom:48px;
  }
  /* Rows: flex by default; override per row as needed */
  .hero-row{display:flex}

  /* Row 1: MV + side text（横並び・上揃え） */
  .hero-row--main{
    align-items:flex-start;
    gap:12px;
    justify-content:flex-start;
  }
  /* Row 2: date + AMU logo */
  .hero-row--sub{
    align-items:flex-end;
    gap:16px;
    justify-content:space-between;
    margin-top:-16px;
  }

  /* Individual sizes — 4種を自由に調整可能 */
  .hero-mv,.hero-side,.hero-date,.hero-amu{position:static}
  .hero-mv{
    width:92%;               /* MV サイズ */
    aspect-ratio:682 / 496;
    margin:0;
  }
  .hero-side{
    width:4%;                /* 「新しい、アミュと。」幅 */
    height:auto;
    margin:0 0 0 auto;       /* 右寄せ余白 */
  }
  .hero-date{
    width:42%;               /* 日付ブロック幅 */
    height:auto;
    margin:0;
  }
  .hero-amu{
    width:18%;               /* AMU ロゴ幅 */
    height:auto;
    margin:0;
  }
  .lead{margin-bottom:40px}
  .lead-copy{font-size:15px;line-height:1.85}
  .tabs{padding:0 12px;gap:6px}
  .tab{height:56px;border-radius:8px 8px 0 0}
  .panels{padding:16px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card--span2{grid-column:span 2}
  .card-badge{font-size:16px;padding:8px}
  .card-stamp{width:28px;height:28px;margin-right:4px}
  .card-cat{padding:8px}
  .card-cat > span{padding:8px;font-size:11px}
  .card-body{padding:0 10px 18px;gap:12px}
  .card-logo{height:64px;padding:6px}
  .card-logo img{max-height:48px}
  .card-name{font-size:15px;min-height:32px}
  .site-footer{padding:40px 20px;margin-top:60px;gap:32px}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .card--span2{grid-column:auto}
  .lead-photos{flex-direction:column;gap:12px}
  .lead-photos img{aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tab{transition:none}
}