*{box-sizing:border-box}
:root{
  --bg:#f5f0e6;
  --paper:#fffdf8;
  --ink:#151515;
  --muted:#746d64;
  --line:#d2c8bb;
  --yellow:#f0c43d;
  --salmon:#cc8b75;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  line-height:1.75;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{width:min(1480px,94vw);margin-inline:auto}
#about,#about-yomon,#start,#ranking{scroll-margin-top:105px}

/* HEADER */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(245,240,230,.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.head{
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}
.logo{
  font:900 46px/1 Georgia,serif;
  letter-spacing:-.06em;
}
.logo small{
  display:block;
  margin-top:8px;
  font:800 9px/1.2 sans-serif;
  letter-spacing:.13em;
}
.main-nav{
  display:flex;
  align-items:center;
  gap:31px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
}
.search-icon,.menu-icon{font-size:20px}

/* COMMON */
.eyebrow{
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:17px;
  border:1px solid var(--ink);
  padding:12px 17px;
  font-size:11px;
  font-weight:900;
}
.button.small{padding:10px 14px}
.button.dark{background:#111;color:#fff}
.new{
  display:inline-flex;
  align-items:center;
  background:var(--yellow);
  border-radius:999px;
  padding:5px 9px;
  font-size:9px;
  font-weight:900;
}

/* FIRST VIEW */
.first-view{
  display:grid;
  grid-template-columns:minmax(240px,.58fr) minmax(470px,1.20fr) minmax(260px,.60fr);
  gap:34px;
  align-items:start;
  padding:42px 0 58px;
  border-bottom:1px solid var(--line);
}
.intro-column{
  min-width:0;
  padding-top:12px;
}
.intro-column h1{
  margin:0 0 38px;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(56px,6.1vw,98px);
  line-height:1.08;
  letter-spacing:-.055em;
}
.intro-column h1 span{
  background:linear-gradient(transparent 72%,rgba(240,196,61,.8) 72%);
}
.intro-column h2{
  margin:0 0 28px;
  font-size:15px;
}
.intro-column p{
  margin:0 0 22px;
  max-width:390px;
  font-size:13px;
  line-height:2.05;
}

.main-cover{
  display:block;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--line);
  background:#ddd;
}
.main-cover img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

.editor-column{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:30px;
}
.editors-note{
  border-top:1px solid var(--ink);
  padding-top:18px;
}
.editors-note h2{
  margin:14px 0 20px;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:29px;
  line-height:1.45;
}
.editors-note>p{
  margin:0 0 20px;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:14px;
  line-height:2;
}
.mini-issue{
  display:grid;
  gap:10px;
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.mini-issue span{
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
}
.mini-issue strong{
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:21px;
}
.mini-issue .button{width:max-content}

.about-box{
  border-top:1px solid var(--line);
  padding-top:18px;
}
.about-box>img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  margin-bottom:16px;
  border:1px solid var(--line);
}
.about-box>p{
  margin:8px 0;
  font-size:11px;
  line-height:1.95;
}

/* SECTIONS */
.section{
  padding:56px 0;
  border-bottom:1px solid var(--line);
}
.section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:28px;
}
.heading-pair{
  display:flex;
  align-items:flex-end;
  gap:18px;
}
.section-heading h2{
  margin:0;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:42px;
  line-height:1.2;
}
.section-heading .heading-pair>span{
  padding-bottom:7px;
  color:var(--salmon);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
}
.section-heading>p{
  margin:0;
  font-size:11px;
  font-weight:800;
}
.section-heading.compact h2{font-size:28px}

/* IMAGE CARDS */
.start-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  align-items:start;
}
.pickup-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
  align-items:start;
}
.image-card{
  display:block;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--paper);
  transition:transform .2s ease,box-shadow .2s ease;
}
.image-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 30px rgba(45,35,25,.08);
}
.image-card img{
  display:block;
  width:100%;
  height:auto;
}

/* REQUEST */
.request-card{
  display:grid;
  grid-template-columns:120px 1fr auto;
  gap:28px;
  align-items:center;
  margin-top:24px;
  padding:24px 26px;
  border:1px solid var(--line);
  background:#fff8e7;
}
.request-card h3{
  margin:0 0 6px;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:22px;
}
.request-card p{
  margin:0;
  font-size:12px;
}

/* PILLARS */
.pillars{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
}
.pillar{
  min-width:0;
  padding-right:24px;
  border-right:1px solid var(--line);
}
.pillar:last-child{
  padding-right:0;
  border-right:0;
}
.pillar-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:7px;
}
.pillar-title h2{
  margin:0;
  font-size:30px;
}
.pillar-image{
  overflow:hidden;
  margin-top:18px;
  aspect-ratio:16/10;
  border:1px solid var(--line);
}
.pillar-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.pillar h3{
  margin:14px 0 5px;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:22px;
}
.pillar p{
  font-size:11px;
  color:var(--muted);
}
.text-link{
  font-size:11px;
  font-weight:900;
  border-bottom:1px solid;
}

/* BOTTOM */
.bottom-grid{
  display:grid;
  grid-template-columns:.9fr 1.25fr .9fr;
  gap:30px;
  align-items:start;
}
.ranking ol{
  list-style:none;
  padding:0;
  margin:0;
}
.ranking li{
  display:grid;
  grid-template-columns:28px 1fr auto;
  gap:12px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.ranking li b{
  background:var(--yellow);
  text-align:center;
}
.ranking li span{font-size:12px}
.ranking li small{
  font-size:10px;
  color:var(--muted);
}
.back-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:9px;
}
.back-cover{
  display:flex;
  align-items:flex-end;
  aspect-ratio:3/4;
  padding:12px;
  border:1px solid var(--line);
  background:linear-gradient(145deg,#cad7dd,#efe1c8);
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:10px;
}
.whats-next{
  padding:25px;
  background:#dbe5e3;
}
.whats-next h3{
  margin:7px 0;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:27px;
}
.whats-next p{font-size:11px}

/* FOOTER */
footer{
  background:#111;
  color:#fff;
}
.footer-inner{
  min-height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  font-size:9px;
}
.footer-logo{
  font:900 30px Georgia,serif;
}
.footer-links{
  display:flex;
  gap:22px;
}

/* TABLET */
@media(max-width:1100px){
  .main-nav a:not(.search-icon){display:none}

  .first-view{
    grid-template-columns:1fr 1fr;
  }
  .intro-column{grid-column:1}
  .main-cover{grid-column:2}
  .editor-column{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .pickup-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .bottom-grid{
    grid-template-columns:1fr;
  }
}

/* MOBILE */
@media(max-width:760px){
  .wrap{
    width:min(94vw,620px);
  }
  .head{
    min-height:70px;
  }
  .logo{
    font-size:37px;
  }

  .first-view{
    grid-template-columns:1fr;
    padding-top:28px;
  }
  .intro-column,
  .main-cover,
  .editor-column{
    grid-column:auto;
  }
  .editor-column{
    display:block;
  }
  .about-box{
    margin-top:28px;
  }
  .intro-column h1{
    font-size:58px;
  }

  .section{
    padding:44px 0;
  }
  .section-heading{
    display:block;
  }
  .heading-pair{
    display:block;
  }
  .section-heading h2{
    font-size:34px;
  }
  .section-heading .heading-pair>span{
    display:block;
    margin-top:6px;
  }
  .section-heading>p{
    margin-top:10px;
  }

  .start-grid,
  .pickup-grid,
  .pillars{
    grid-template-columns:1fr;
  }

  .pillar{
    padding:0 0 28px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .request-card{
    grid-template-columns:1fr;
  }

  .footer-inner{
    flex-direction:column;
    justify-content:center;
    padding:20px 0;
  }
}