﻿/* Y-2 r2: T05/T06/T08/T09 only. Load after saved base CSS. */
/* R2-5: shared section rhythm and heading hierarchy */
section.y2-top.part { padding:40px 0; margin-bottom:0; }
section.y2-top > .thisinner { width:calc(100% - 32px); max-width:1100px; margin-inline:auto; padding-inline:0; }
section.y2-top h2.line-title { margin-bottom:16px; padding:12px 20px; border-radius:6px; color:#fff; background:var(--color4); font-size:24px; font-weight:700; line-height:1.4; text-align:left; }
section.y2-top .y2-section-title { margin-bottom:24px; }
section.y2-top .y2-section-title h2.line-title { margin-bottom:8px; }
section.y2-top .y2-section-title > div { margin:0; color:var(--color9); font-size:16px; font-weight:700; line-height:1.5; text-transform:uppercase; }
section.y2-top .y2-more { display:flex; justify-content:center; margin-top:24px; }
section.y2-top .y2-more a.button.full { width:100%; max-width:400px; padding:16px 25px; border-radius:8px; font-size:16px; line-height:1.5; gap:8px; }
section.y2-top .y2-more a.button.full i { margin:0; }
/* R2-2/R2-7: one enclosure, dividers, full text width */
section.broken.y2-top > .thisinner > ul { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:16px; }
section.broken.y2-top > .thisinner > ul > li { width:auto; min-width:0; background:#EBF0F6; color:var(--color9); border-radius:6px; padding:12px 8px; align-items:center; }
section.broken.y2-top > .thisinner > ul > li.active { background:var(--color4); color:#fff; }
section.broken.y2-top > .thisinner > ul h3 { border-bottom:0; font-size:18px; font-weight:700; line-height:1.5; white-space:normal; }
section.broken.y2-top .broken-top { margin:0 0 16px; }
section.broken.y2-top .broken-top p { font-size:16px; line-height:1.7; }
section.broken.y2-top .broken_cases { border:1px solid #C8D4E4; border-radius:6px; padding:0; background:#fff; }
section.broken.y2-top .items-outer { margin:0; background:transparent; border:0; border-radius:0; }
section.broken.y2-top .items-outer + .items-outer { border-top:1px solid #C8D4E4; }
section.broken.y2-top .items-outer > .ttl { margin:0; background:transparent; color:var(--color4); border:0; border-radius:0; padding:16px 120px 16px 48px; font-size:16px; line-height:1.5; white-space:normal; }
section.broken.y2-top .items-outer > .ttl > span { position:absolute; left:16px; width:18px; height:18px; margin:0; flex-shrink:0; }
section.broken.y2-top .items-outer > .ttl::after { color:var(--color9); border:1px solid #8DB0D0; border-radius:6px; right:16px; }
section.broken.y2-top .items-outer > .ttl span::before,
section.broken.y2-top .items-outer > .ttl span::after { background:var(--color9); }
section.broken.y2-top .items-outer .h_item { padding:0 16px 16px; }
section.broken.y2-top .items-outer .items { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:0; }
section.broken.y2-top .items-outer figure { width:auto; padding:0; margin:0; min-width:0; }
section.broken.y2-top .items-outer figure img { width:100%; height:auto; border-radius:6px; }
/* R2-1/R2-6: grid replaces inherited mobile column/inline caption layout */
section.purchase.y2-top .banner-groups { margin-bottom:24px; padding:0; background:none; }
section.purchase.y2-top .banner-groups p { font-size:16px; line-height:1.7; }
section.purchase.y2-top .flows { margin-top:24px; }
section.purchase.y2-top .flows > .store-flow { width:100%; margin-bottom:32px; background:transparent; padding:0; display:block; }
section.purchase.y2-top .flows h3 { color:var(--color4); border-bottom:1px solid #8DB0D0; padding-bottom:8px; margin-bottom:16px; writing-mode:horizontal-tb; font-size:20px; line-height:1.5; }
section.purchase.y2-top .flow-step { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin:0; flex-direction:row; }
section.purchase.y2-top .flow-step .step-block { display:block; width:auto; min-width:0; margin:0; padding:0; background:transparent; border-radius:6px; writing-mode:horizontal-tb; }
section.purchase.y2-top .step-block:not([data-num])::before { content:none; }
section.purchase.y2-top .step-block a { display:block; width:100%; }
section.purchase.y2-top .step-block img { display:block; width:100%; height:auto; border-radius:6px; }
section.purchase.y2-top .flow-step .step-block .ttl { display:block; width:100%; margin:12px 0 0; padding:0; text-align:center; font-size:18px; line-height:1.5; white-space:normal; writing-mode:horizontal-tb; color:var(--color4); overflow-wrap:break-word; }
/* R2-3: uppercase label; remove reserved white band without hiding articles */
section.news.y2-top { background:var(--color10); }
section.news.y2-top .news-outer { margin:0; padding:0; }
section.news.y2-top .news-outer::before { display:none; }
section.news.y2-top .pediabox { background:transparent; padding-bottom:0; margin-bottom:0; }
section.news.y2-top .pediabox .item { border-radius:6px; background:transparent; }
section.news.y2-top .pediabox .feapic { border-radius:6px; }
/* R2-4: divider list, compact Q marker, unchanged disclosure bodies */
section.question.y2-top .question-content { font-size:16px; line-height:1.7; }
section.question.y2-top .question-content .question-para { margin-bottom:32px; }
section.question.y2-top .question-content .question-para:last-child { margin-bottom:0; }
section.question.y2-top .question-content .question-para > h3.ttl { color:var(--color4); font-size:20px; border-bottom:1px solid #8DB0D0; padding-bottom:8px; margin-bottom:0; letter-spacing:normal; text-align:left; line-height:1.5; }
section.question.y2-top .faq-list { margin-top:24px; }
section.question.y2-top .faq-list .list-qa .qa-item { border-radius:0; padding:0; margin:0; background:transparent; border-bottom:1px solid #C8D4E4; }
section.question.y2-top .question-content .ques_q { border:0; padding:16px 32px 16px 40px; min-height:0; color:var(--color4); font-size:18px; line-height:1.5; white-space:normal; overflow-wrap:break-word; }
section.question.y2-top .question-content .ques_q::before { content:attr(data-title); display:block; position:absolute; left:0; top:16px; width:28px; height:28px; line-height:28px; text-align:center; background:var(--color9); color:#fff; border-radius:6px; margin:0; font-size:16px; }
section.question.y2-top .question-content .ques_a { text-align:left; margin:0; padding:0 32px 16px 40px; border-radius:0; background:transparent; font-size:16px; line-height:1.7; overflow-wrap:break-word; }
@media (max-width:750px) {
  /* R2-7: mobile rhythm; remove T05 outer/inner blank areas */
  section.y2-top.part { padding:24px 0; }
  section.y2-top h2.line-title { padding:10px 12px; font-size:17px; }
  section.y2-top .y2-section-title { margin-bottom:16px; }
  section.y2-top .y2-section-title > div { font-size:14px; }
  section.y2-top .y2-more { margin-top:20px; }
  section.y2-top .y2-more a.button.full { max-width:300px; padding:13px 20px; font-size:14px; border-radius:8px; }
  section.broken.y2-top > .thisinner > ul { grid-template-columns:3fr 4fr 3fr; gap:6px; }
  section.broken.y2-top > .thisinner > ul > li { padding:10px 6px; }
  section.broken.y2-top > .thisinner > ul h3 { font-size:15px; }
  section.broken.y2-top .items-outer > .ttl { padding:14px 12px 14px 40px; }
  section.broken.y2-top .items-outer > .ttl > span { left:12px; }
  section.broken.y2-top .items-outer .h_item { padding:0 12px 14px; }
  section.broken.y2-top .items-outer .items { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  section.purchase.y2-top .banner-groups { margin-bottom:20px; }
  section.purchase.y2-top .flows { margin-top:20px; }
  section.purchase.y2-top .flows > .store-flow { margin-bottom:24px; }
  section.purchase.y2-top .flows h3 { font-size:18px; margin-bottom:12px; }
  section.purchase.y2-top .flow-step { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; }
  section.purchase.y2-top .flow-step .step-block .ttl { margin-top:8px; font-size:16px; }
  section.question.y2-top .question-content .question-para { margin-bottom:24px; }
  section.question.y2-top .question-content .question-para > h3.ttl { font-size:18px; }
  section.question.y2-top .question-content .ques_q { padding:14px 24px 14px 36px; font-size:16px; }
  section.question.y2-top .question-content .ques_q::before { top:14px; width:26px; height:26px; line-height:26px; }
  section.question.y2-top .question-content .ques_a { padding:0 24px 14px 36px; }
}

/* Y-3 FLOW r2: Astra dimensions; top-page purchase flows only. */
section.purchase.y2-top .flows { margin-bottom:24px; }
section.purchase.y2-top .flows > .store-flow { margin-bottom:32px; }
section.purchase.y2-top .flows > .store-flow:last-child { margin-bottom:0; }
section.purchase.y2-top .flows h3 {
  border-bottom:0; padding-bottom:0; margin-bottom:16px; font-weight:700;
}
section.purchase.y2-top .flows .flow-step {
  position:relative; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px;
}
section.purchase.y2-top .flows .flow-step .y3-flow-card {
  position:relative; box-sizing:border-box; height:160px; min-height:160px;
  padding:16px; background:#FFFFFF; border:1px solid #DCE4EE;
  border-radius:8px; box-shadow:none;
}
section.purchase.y2-top .flows .y3-flow-card figcaption { margin:0; padding:0; }
section.purchase.y2-top .flows .y3-flow-card a {
  display:block; width:100%; color:#14355D; text-decoration:none;
}
/* One caption link, with its name present once, covers the whole card. */
section.purchase.y2-top .flows .y3-flow-card a::after {
  content:""; position:absolute; inset:0; border-radius:8px; z-index:1;
}
section.purchase.y2-top .flows .y3-flow-card:focus-within {
  outline:2px solid #224995; outline-offset:3px;
}
section.purchase.y2-top .flows .y3-flow-upper {
  display:flex; align-items:center; justify-content:flex-start; gap:12px;
}
section.purchase.y2-top .flows .y3-flow-number {
  display:flex; align-items:baseline; gap:4px; flex:none; line-height:1;
  color:#14355D; white-space:nowrap;
}
section.purchase.y2-top .flows .y3-flow-number > span { font-size:14px; font-weight:700; }
section.purchase.y2-top .flows .y3-flow-number > b {
  font-size:28px; font-weight:700; font-variant-numeric:tabular-nums;
}
section.purchase.y2-top .flows .y3-flow-card img {
  display:block; flex:none; box-sizing:border-box; width:72px; height:72px;
  max-width:none; padding:8px; object-fit:contain; border-radius:0;
}
section.purchase.y2-top .flows .flow-step .y3-flow-card .ttl {
  display:block; margin:12px 0 0; padding:0; text-align:left;
  font-size:16px; font-weight:700; line-height:24px; color:#14355D;
  word-break:break-word; text-decoration:none;
}
section.purchase.y2-top .flows .y3-flow-word { white-space:nowrap; }
section.purchase.y2-top .flows .y3-flow-arrow,
section.purchase.y2-top .flows .y3-flow-return {
  position:absolute; fill:none; stroke:#71849D; stroke-width:1.5px;
  margin:0; overflow:visible; pointer-events:none; z-index:2;
}
section.purchase.y2-top .flows .y3-flow-arrow {
  right:-21px; top:50%; width:16px; height:12px; transform:translateY(-50%);
}
section.purchase.y2-top .flows .y3-flow-return { display:none; }
@media (max-width:750px) {
  section.purchase.y2-top .flows .flow-step {
    grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 24px;
  }
  section.purchase.y2-top .flows .flow-step .y3-flow-card {
    height:148px; min-height:148px; padding:12px;
  }
  section.purchase.y2-top .flows .y3-flow-card img { width:64px; height:64px; padding:4px; }
  section.purchase.y2-top .flows .y3-flow-word { display:block; }
  section.purchase.y2-top .flows .y3-flow-card:nth-child(2) .y3-flow-arrow { display:none; }
  /* From step 2 bottom-centre, through the row-gap midpoint, into step 3 top-centre. */
  section.purchase.y2-top .flows .y3-flow-return {
    display:block; top:148px; left:calc((100% - 24px)/4);
    width:calc((100% + 24px)/2); height:40px;
  }
}
