/*
 * PINK ACTION DAYS
 *
 * The design is carried by the artwork, so every section is one full-width image
 * rendered from the Canva page at its native aspect ratio. Nothing is re-laid-out,
 * which is what keeps the original typefaces intact.
 *
 * The only live markup is what has to respond to input: the CTA hotspots on the
 * images, and the BREAST CANCER FACT accordion, which swaps a question image for
 * its answer image in place.
 */

:root {
  --bg:    #fcf0f4;   /* the page tint, sampled from the artwork        */
  --pink:  #d45385;   /* CTA pill                                       */
  --navy:  #003c64;
  --focus: #006e92;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  min-width: 320px;
  margin: 0;
  color: var(--navy);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", "Yu Gothic", sans-serif;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 10;
  padding: .6em 1em;
  background: #fff;
  color: var(--pink);
  border-radius: 0 0 8px 8px;
}
.skip-link:focus { top: 0; }

.wrap { width: min(100% - 2.5rem, 1100px); margin-inline: auto; }

/* ------------------------------------------------------------- the sections */
.sec { position: relative; }
.sec__img { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------- CTA hotspots ----
   The buttons are painted into the artwork, so the link is a transparent box on
   top of one. Percentages track the image box, which never crops.            */
.hit {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border-radius: 999px;
}
.hit--sp { display: none; }

@media (max-width: 767px) {
  .hit--pc { display: none; }
  .hit--sp { display: block; }
}

/* ---------------------------------------------------------------- footer --- */
.footer { position: relative; }
.social, .footer__logo, .footer__credit { display: none; }

/* ----------------------------------------------------------- company -------
   The sponsor wall. Sponsor logos are real markup, so the two text lines are real
   text too and the frames are drawn in CSS. Nothing here is absolutely placed:
   the wall grows on its own as sponsors are added (a script tops the last row up
   with empty frames), so the section height is just its content.               */

.company {
  position: relative;
  padding: 5.2vw 0 12vw;
  background: #fef2f7;              /* the phone sheet is a flat tint */
}
.company__bg { display: none; }   /* phones get the flat tint, not the desktop wash */
/* a column so the phone sheet can put the note above the wall, the desktop below */
.company__inner { position: relative; display: flex; flex-direction: column; }

.company__ttl { order: 0; width: 84.3%; margin: 0 auto; }
.company__ttl img { display: block; width: 100%; height: auto; }

.company__sub {
  position: relative;
  order: 1;
  width: fit-content;
  margin: 11.25vw auto 0;
  color: #004a98;
  font-weight: 700;
  font-size: 4.63vw;
  line-height: 1.4;
  white-space: nowrap;
}
/* the rules flank 賛同企業 on the phone sheet */
.company__sub::before,
.company__sub::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 26.6vw;
  height: 2px;
  background: #e785b2;
  transform: translateY(-50%);
}
.company__sub::before { right: calc(100% + 4.4vw); }
.company__sub::after  { left:  calc(100% + 4.4vw); }

.company__note {
  order: 2;                        /* phones draw it above the wall */
  width: 72%;
  margin: 9.88vw auto 0;
  color: #004a98;
  font-weight: 700;
  font-size: 3.32vw;
  line-height: 1.45;
  text-align: center;
}

.company__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.12vw 2.34vw;
  order: 3;
  margin: 13.13vw 2.78% 0;
  padding: 0;
  list-style: none;
}
.company__cell {
  display: grid;
  place-items: center;
  min-height: 0;
  aspect-ratio: 408 / 224;           /* the sheet's frame, so rows keep their shape */
}
/* A frame with no sponsor in it yet. Put a logo in the <li> and drop this class —
   the dashed box goes, the cell stays in the grid. */
.company__cell--empty {
  border: 2px dashed #d3a3bf;
  border-radius: max(8px, 1.6vw);
}
/* A filled cell. White plate, as asked, so every logo sits on its own tile. */
.company__cell:not(.company__cell--empty) {
  background: #fff;
  border-radius: max(8px, 1.6vw);
}
.company__logo {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.company__logo img {
  display: block;
  max-width: 84%;
  max-height: 84%;
  object-fit: contain;
}
.company__cell:not(.company__cell--empty):focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }

@media only screen and (min-width: 769px) {
  .company { padding: 6.87vw 0 8vw; }
  .company__bg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .company__inner { position: relative; }
  .company__ttl { width: 47.03%; }
  .company__sub { margin-top: 6.18vw; font-size: 1.875vw; }
  .company__note {
    order: 3;                        /* desktop draws it under the wall */
    width: auto;
    margin: 4.7vw 7.54% 0 auto;      /* right-aligned, as the sheet has it */
    font-size: 1.354vw;
    text-align: right;
    white-space: nowrap;
  }
  .company__sub::before,
  .company__sub::after { width: 8.98vw; }
  .company__sub::before { right: calc(100% + 5.27vw); }
  .company__sub::after  { left:  calc(100% + 5.27vw); }
  .company__grid {
    order: 2;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.484vw 1.172vw;
    margin: 8.65vw 6.48% 0 6.37%;
  }
  .company__cell { aspect-ratio: 419 / 156; }
  .company__cell--empty,
  .company__cell:not(.company__cell--empty) { border-radius: max(6px, .55vw); }
}
@media only screen and (min-width: 1920px) {
  .company__sub  { font-size: 36px; }
  .company__note { font-size: 26px; }
}

/* --------------------------------------------------- breast cancer fact ----
   01–03 are the smaopi implementation, lifted as-is from https://www.smaopi.com so
   the type, spacing and +/− control match the original. 04 follows it. Their sheet
   is mobile-first across four breakpoints and sized in vw, so it scales here too. */

.fact-head { display: block; width: 100%; height: auto; }

.p-home-about-list{position:relative;padding-top:5.71vw;padding-bottom:28.53333vw;background-color:#fcf3f1}
@media only screen and (min-width:769px){
.p-home-about-list{padding-top:0;padding-bottom:11.14583vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list{padding-top:0;padding-bottom:calc(114px + 100px)}
}
.p-home-about-list__marquee{position:absolute;left:0;top:11.33333vw;width:100%;height:36.53333vw;background:url(images/fact/about-marquee-1.svg)repeat-x;background-size:auto 100%;animation:anim-about-list-marquee-sp 6.5s linear infinite}
@media only screen and (min-width:769px){
.p-home-about-list__marquee{top:4.42708vw;height:14.27083vw;animation-name:anim-about-list-marquee-tb}
}
@media only screen and (min-width:1920px){
.p-home-about-list__marquee{top:84px;height:274px;animation-name:anim-about-list-marquee-pc}
}
.p-home-about-list__body{margin:0 4.8vw}
@media only screen and (min-width:769px){
.p-home-about-list__body{margin:0}
}
.p-home-about-list__sect{position:relative}
.p-home-about-list__sect:not(:first-child){margin-top:20.26667vw}
@media only screen and (min-width:769px){
.p-home-about-list__sect:not(:first-child){margin-top:5.10417vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:not(:first-child){margin-top:98px}
}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(1){margin-left:10.41667vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(1){margin-left:200px}
}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(2){margin-right:8.33333vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(2){margin-right:160px}
}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(3){margin-left:13.95833vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(3){margin-left:268px}
}
.p-home-about-list__sect__num{position:absolute;left:7.46667vw;top:-4.66667vw;z-index:1;color:#ecb4ab;font-size:15.33333vw;font-family:"etna",sans-serif;font-weight:700;line-height:1}
@media only screen and (min-width:769px){
.p-home-about-list__sect__num{top:-1.82292vw;font-size:5.98958vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect__num{top:-35px;font-size:115px}
}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(1) .p-home-about-list__sect__num{left:2.34375vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(1) .p-home-about-list__sect__num{left:45px}
}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(2) .p-home-about-list__sect__num{left:38.125vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(2) .p-home-about-list__sect__num{left:732px}
}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sect__num{left:2.34375vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sect__num{left:45px}
}
.p-home-about-list__sect__box{border-radius:8vw;overflow:hidden}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(2n+1) .p-home-about-list__sect__box{border-radius:3.125vw 0 0 3.125vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(2n+1) .p-home-about-list__sect__box{border-radius:60px 0 0 60px}
}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(2n) .p-home-about-list__sect__box{border-radius:0 3.125vw 3.125vw 0}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(2n) .p-home-about-list__sect__box{border-radius:0 60px 60px 0}
}
.p-home-about-list__sect__summary{position:relative;padding:14.66667vw 6.66667vw 22.13333vw;background-color:#fff;list-style:none;cursor:pointer}
@media only screen and (min-width:769px){
.p-home-about-list__sect__summary{padding:5.72917vw 0 5.20833vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect__summary{padding:110px 0 100px}
}
.p-home-about-list__sect__summary:after,.p-home-about-list__sect__summary:before{position:absolute;right:4.26667vw;bottom:3.2vw;width:16vw;height:16vw;background-repeat:no-repeat;background-size:100% 100%;content:""}
@media only screen and (min-width:769px){
.p-home-about-list__sect__summary:after,.p-home-about-list__sect__summary:before{bottom:auto;top:7.70833vw;width:6.25vw;height:6.25vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect__summary:after,.p-home-about-list__sect__summary:before{top:148px;width:120px;height:120px}
}
.p-home-about-list__sect__summary:before{background-image:url(images/fact/about-list-minus.svg)}
.p-home-about-list__sect__summary:after{background-image:url(images/fact/about-list-plus.svg);transition:transform .3s cubic-bezier(.215,.61,.355,1)}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(2n+1) .p-home-about-list__sect__summary:after,.p-home-about-list__sect:nth-child(2n+1) .p-home-about-list__sect__summary:before{right:auto;left:3.54167vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(2n+1) .p-home-about-list__sect__summary:after,.p-home-about-list__sect:nth-child(2n+1) .p-home-about-list__sect__summary:before{left:68px}
}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(2n) .p-home-about-list__sect__summary:after,.p-home-about-list__sect:nth-child(2n) .p-home-about-list__sect__summary:before{right:3.54167vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(2n) .p-home-about-list__sect__summary:after,.p-home-about-list__sect:nth-child(2n) .p-home-about-list__sect__summary:before{right:68px}
}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(1) .p-home-about-list__sect__summary{padding:5.72917vw 0 9.375vw 13.125vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(1) .p-home-about-list__sect__summary{padding:110px 0 180px 252px}
}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(2) .p-home-about-list__sect__summary{padding:6.66667vw 13.125vw 5.10417vw 38.02083vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(2) .p-home-about-list__sect__summary{padding:128px 252px 98px 730px}
}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sect__summary{padding:6.35417vw 0 5.10417vw 13.125vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sect__summary{padding:122px 0 98px 252px}
}
.p-home-about-list__sect.is-expanded .p-home-about-list__sect__summary:after{transform:rotate(90deg)}
.p-home-about-list__sect__ttl{color:#d31f5d;font-size:5.06667vw;font-weight:500;line-height:calc(58/40)}
@media only screen and (min-width:769px){
.p-home-about-list__sect__ttl{font-size:2.34375vw;line-height:calc(65/45)}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect__ttl{font-size:45px}
}
.p-home-about-list__sect__lead{margin-top:4.26667vw;color:#d31f5d;font-size:3.2vw;line-height:calc(35/24)}
@media only screen and (min-width:769px){
.p-home-about-list__sect__lead{margin-top:1.66667vw;font-size:max(14px,1.30208vw);line-height:calc(36/25)}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect__lead{margin-top:32px;font-size:25px}
}
.p-home-about-list__sect__illust{margin-top:8.53333vw}
.p-home-about-list__sect__illust>img,.p-home-about-list__sub__pic>img{vertical-align:top}
.p-home-about-list__sect:nth-child(1) .p-home-about-list__sect__illust{width:40.93333vw;margin-left:auto;margin-right:auto;margin-bottom:-22.13333vw}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(1) .p-home-about-list__sect__illust{position:absolute;left:62.75vw;bottom:0;width:16.04167vw;margin:0}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(1) .p-home-about-list__sect__illust{left:1250px;width:308px}
}
.p-home-about-list__sect:nth-child(2) .p-home-about-list__sect__illust{width:52.8vw;margin-left:auto;margin-right:auto}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(2) .p-home-about-list__sect__illust{position:absolute;left:11.875vw;top:5.3125vw;width:20.625vw;margin:0}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(2) .p-home-about-list__sect__illust{left:228px;top:102px;width:396px}
}
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sect__illust{width:81.33333vw;margin-left:-21.33333vw;margin-bottom:-22.13333vw}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sect__illust{position:absolute;left:55.625vw;bottom:0;width:31.875vw;margin:0}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sect__illust{left:1068px;width:612px}
}
.p-home-about-list__sect__body{display:none;padding:0 5.33333vw;background:url(images/fact/body-bg-2.png)center top;background-size:100vw auto}
@media only screen and (min-width:769px){
.p-home-about-list__sect__body{background-size:750px auto}
.p-home-about-list__sect:nth-child(1) .p-home-about-list__sect__body{padding-left:13.54167vw;padding-right:0}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(1) .p-home-about-list__sect__body{padding-left:260px}
}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(2) .p-home-about-list__sect__body{padding-left:0;padding-right:5vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(2) .p-home-about-list__sect__body{padding-right:180px}
}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sect__body{padding-left:13.33333vw;padding-right:0}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sect__body{padding-left:256px}
}
.p-home-about-list__sub{padding-top:8.53333vw;padding-bottom:8.53333vw}
@media only screen and (min-width:769px){
.p-home-about-list__sub{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}
}
.p-home-about-list__sub:not(:first-child){border-top:1px solid #fff}
.p-home-about-list__sub__txt{color:#fff;font-size:4vw;line-height:calc(50/30)}
@media only screen and (min-width:769px){
.p-home-about-list__sub__txt{font-size:1.30208vw;line-height:calc(50/25)}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sub__txt{font-size:25px}
}
.p-home-about-list__sub__txt small{display:block;font-size:3.2vw;margin-top:.5em}
.p-home-about-list__sub__txt small+small{margin-top:0}
@media only screen and (min-width:769px){
.p-home-about-list__sub__txt small{font-size:.9375vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sub__txt small{font-size:18px}
}
.p-home-about-list__sub__pic{margin-top:6.4vw;margin-left:auto;margin-right:auto}
@media only screen and (min-width:769px){
.p-home-about-list__sub__pic{-ms-flex:0 0 auto;flex:0 0 auto;margin:0}
}
.p-home-about-list__sub__pic.is-no-margin{margin-bottom:-8.53333vw}
@media only screen and (min-width:769px){
.p-home-about-list__sub__pic.is-no-margin{margin-bottom:0}
}
.p-home-about-list__sub__pic figcaption{margin-top:5.6vw;text-align:center;color:#fff;font-size:3.2vw;line-height:calc(40/24)}
@media only screen and (min-width:769px){
.p-home-about-list__sub__pic figcaption{margin-top:1.45833vw;font-size:.83333vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sub__pic figcaption{margin-top:28px;font-size:16px}
}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(1) .p-home-about-list__sub{padding-right:17.70833vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(1) .p-home-about-list__sub{padding-right:340px}
}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(1) .p-home-about-list__sub:nth-child(1){padding-top:4.58333vw;padding-bottom:4.58333vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(1) .p-home-about-list__sub:nth-child(1){padding-top:88px;padding-bottom:88px}
}
.p-home-about-list__sect:nth-child(1) .p-home-about-list__sub:nth-child(1) .p-home-about-list__sub__pic{width:50.93333vw}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(1) .p-home-about-list__sub:nth-child(1) .p-home-about-list__sub__pic{width:15.67708vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(1) .p-home-about-list__sub:nth-child(1) .p-home-about-list__sub__pic{width:301px}
}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(1) .p-home-about-list__sub:nth-child(2){padding-top:4.58333vw;padding-bottom:5.41667vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(1) .p-home-about-list__sub:nth-child(2){padding-top:88px;padding-bottom:104px}
}
.p-home-about-list__sect:nth-child(1) .p-home-about-list__sub:nth-child(2) .p-home-about-list__sub__pic{width:69.33333vw}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(1) .p-home-about-list__sub:nth-child(2) .p-home-about-list__sub__pic{width:27.08333vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(1) .p-home-about-list__sub:nth-child(2) .p-home-about-list__sub__pic{width:520px}
}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(2) .p-home-about-list__sub{padding-left:17.70833vw;padding-top:5.46875vw;padding-bottom:6.875vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(2) .p-home-about-list__sub{padding-left:340px;padding-top:105px;padding-bottom:132px}
}
.p-home-about-list__sect:nth-child(2) .p-home-about-list__sub:nth-child(1) .p-home-about-list__sub__pic{width:60.8vw}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(2) .p-home-about-list__sub:nth-child(1) .p-home-about-list__sub__pic{width:25vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(2) .p-home-about-list__sub:nth-child(1) .p-home-about-list__sub__pic{width:400px}
}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sub{padding-right:17.70833vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sub{padding-right:340px}
}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sub:nth-child(1){padding-top:5.10417vw;padding-bottom:6.04167vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sub:nth-child(1){padding-top:98px;padding-bottom:116px}
}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sub:nth-child(1) .p-home-about-list__sub__txt{margin-right:3.75vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sub:nth-child(1) .p-home-about-list__sub__txt{margin-right:72px}
}
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sub:nth-child(1) .p-home-about-list__sub__pic{width:65.06667vw}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sub:nth-child(1) .p-home-about-list__sub__pic{width:19.86979vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sub:nth-child(1) .p-home-about-list__sub__pic{width:381.5px}
}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sub:nth-child(2){padding-top:2.60417vw;padding-bottom:1.14583vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sub:nth-child(2){padding-top:50px;padding-bottom:22px}
}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sub:nth-child(2) .p-home-about-list__sub__txt{margin-top:1.45833vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sub:nth-child(2) .p-home-about-list__sub__txt{margin-top:28px}
}
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sub:nth-child(2) .p-home-about-list__sub__pic{width:54.4vw}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sub:nth-child(2) .p-home-about-list__sub__pic{width:11.25vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sub:nth-child(2) .p-home-about-list__sub__pic{width:216px}
}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sub:nth-child(3){padding-top:2.5vw;padding-bottom:3.4375vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sub:nth-child(3){padding-top:48px;padding-bottom:66px}
}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sub:nth-child(3) .p-home-about-list__sub__txt{margin-top:1.45833vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sub:nth-child(3) .p-home-about-list__sub__txt{margin-top:28px}
}
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sub:nth-child(3) .p-home-about-list__sub__pic{width:37.6vw}
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sub:nth-child(3) .p-home-about-list__sub__pic{width:10.15625vw}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(3) .p-home-about-list__sub:nth-child(3) .p-home-about-list__sub__pic{width:195px}
}

/* 04 is laid out like 02 — illustration left, copy right — and keeps the same gap
   on its right edge as 03 keeps on its left */
@media only screen and (min-width:769px){
.p-home-about-list__sect:nth-child(4){margin-left:0;margin-right:13.95833vw}
.p-home-about-list__sect:nth-child(4) .p-home-about-list__sect__num{left:38.125vw}
.p-home-about-list__sect:nth-child(4) .p-home-about-list__sect__summary{padding:6.66667vw 13.125vw 5.10417vw 38.02083vw}
.p-home-about-list__sect:nth-child(4) .p-home-about-list__sect__illust{position:absolute;left:11.875vw;top:5.3125vw;width:20.625vw;margin:0}
.p-home-about-list__sect:nth-child(4) .p-home-about-list__sect__body{padding-left:0;padding-right:5vw}
.p-home-about-list__sect:nth-child(4) .p-home-about-list__sub{padding-left:17.70833vw;padding-top:5.46875vw;padding-bottom:6.875vw}
/* the graph needs the room the copy does not, so it sits under it */
.p-home-about-list__sect:nth-child(4) .p-home-about-list__sub{display:block}
.p-home-about-list__sect:nth-child(4) .p-home-about-list__sub__pic{width:50vw;margin-top:2.6vw;margin-left:0}
}
@media only screen and (min-width:1920px){
.p-home-about-list__sect:nth-child(4){margin-right:268px}
.p-home-about-list__sect:nth-child(4) .p-home-about-list__sect__num{left:732px}
.p-home-about-list__sect:nth-child(4) .p-home-about-list__sect__summary{padding:128px 252px 98px 730px}
.p-home-about-list__sect:nth-child(4) .p-home-about-list__sect__illust{left:228px;top:102px;width:396px}
.p-home-about-list__sect:nth-child(4) .p-home-about-list__sect__body{padding-right:180px}
.p-home-about-list__sect:nth-child(4) .p-home-about-list__sub{padding-left:340px;padding-top:105px;padding-bottom:132px}
.p-home-about-list__sect:nth-child(4) .p-home-about-list__sub__pic{width:960px;margin-top:50px}
}

/* smaopi swaps the two svgs from its script; <details> already knows the state,
   so the plus layer just rotates — the same trick their own block uses */
.p-home-about-list__sect__body,
.p-home-about-list__sect.is-expanded .p-home-about-list__sect__body {
  display: none;
}
details[open] > .p-home-about-list__sect__body { display: block; }
.p-home-about-list__sect details[open] .p-home-about-list__sect__summary:after {
  transform: rotate(90deg);
}

/* the smaopi ribbon scrolls; keep it still here so the heading stays legible */
.fact-head { animation: none; }

/* ------------------------------------------------- mobile corrections --------
   smaopi's sheet places the illustrations absolutely from 769px up and relies on
   their own small-screen rules, which assume its own page furniture. Keep the
   artwork in flow on phones instead. */
@media only screen and (max-width: 768px) {
  .p-home-about-list__sect:nth-child(1) .p-home-about-list__sect__illust,
  .p-home-about-list__sect:nth-child(2) .p-home-about-list__sect__illust,
  .p-home-about-list__sect:nth-child(3) .p-home-about-list__sect__illust,
  .p-home-about-list__sect:nth-child(4) .p-home-about-list__sect__illust {
    position: static;
    width: 74%;
    margin: 1.4rem auto 0;
  }
  /* room for the 01 numeral, which sits just above the card, and a little air
     between the heading and the first card */
  .p-home-about-list__sect__summary { padding-top: 9vw; padding-bottom: 1.6rem; }
  /* their group spacing leaves big gaps at this width */
  .p-home-about-list__sect:not(:first-child) { margin-top: 3rem; }
  .p-home-about-list__sect:nth-child(1),
  .p-home-about-list__sect:nth-child(2),
  .p-home-about-list__sect:nth-child(3),
  .p-home-about-list__sect:nth-child(4) { margin-left: 0; margin-right: 0; }
  /* let the numeral ride the base rule (top:-4.67vw) instead of pulling it up */
  .p-home-about-list__sect__num { top: auto; }
  /* a touch more space between the heading image and the first card */
  .p-home-about-list__sect:first-child { margin-top: 4vw; }
}