/*
Theme Name: Musicmusicologic Renewal
Theme URI: https://musicmusicologic.com/
Author: musicmusicologic
Description: 音楽批評誌のための白と黒を基調とした編集型WordPressテーマ。
Version: 2.1.3
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: musicmusicologic
*/


:root { --paper:#ffffff; --ink:#111111; --coral:#111111; --blue:#111111; --lime:#e9e9e5; --line:#c9c9c5; --soft:#f4f4f1; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.site-header { height:126px; display:flex; align-items:flex-end; justify-content:space-between; padding:0 5vw 26px; border-top:5px solid var(--ink); border-bottom:1px solid var(--ink); position:relative; z-index:10; background:#fff; }
.brand { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:29px; font-weight:700; line-height:.9; letter-spacing:-.08em; display:flex; flex-direction:column; }
.desktop-nav { display:flex; gap:34px; align-items:center; font-size:12px; font-weight:700; letter-spacing:.08em; }
.desktop-nav a { position:relative; }
.desktop-nav a:after { content:""; position:absolute; left:0; bottom:-7px; width:0; border-bottom:2px solid var(--ink); transition:.25s; }
.desktop-nav a:hover:after { width:100%; }
.mobile-menu { display:none; }
.hero { min-height:650px; display:grid; grid-template-columns:50% 50%; border-bottom:1px solid var(--ink); max-width:1440px; margin:auto; }
.hero-copy { padding:72px 5vw 65px; display:flex; flex-direction:column; align-items:flex-start; }
.eyebrow { font-size:10px; font-weight:800; letter-spacing:.17em; line-height:1.5; }
.hero h1 { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:clamp(44px,4.6vw,68px); line-height:1.2; letter-spacing:-.055em; margin:68px 0 28px; font-weight:500; }
.hero-lead { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:15px; line-height:2; margin:0 0 45px; }
.text-link,.section-all { font-size:12px; font-weight:700; border-bottom:1px solid; padding-bottom:6px; display:inline-flex; gap:35px; }
.hero-art { background:var(--soft); overflow:hidden; position:relative; min-height:580px; border-left:1px solid var(--ink); }
.hero-art:before { content:""; position:absolute; z-index:1; inset:7% -25% -35% 18%; border:1px solid rgba(255,255,255,.6); border-radius:50%; box-shadow:0 0 0 36px rgba(0,0,0,.06),0 0 0 37px rgba(255,255,255,.5),0 0 0 82px rgba(0,0,0,.06),0 0 0 83px rgba(255,255,255,.45),0 0 0 132px rgba(0,0,0,.06),0 0 0 133px rgba(255,255,255,.4); }
.hero-feature-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.disc { z-index:2; width:33%; aspect-ratio:1; border-radius:50%; background:var(--ink); position:absolute; top:32%; left:42%; display:grid; place-items:center; box-shadow:0 0 0 18px rgba(255,255,255,.15); }
.disc div { width:24%; aspect-ratio:1; border-radius:50%; background:#fff; border:8px solid var(--paper); }
.issue-mark { z-index:3; position:absolute; top:7%; right:6%; display:flex; flex-direction:column; align-items:flex-end; font-size:10px; letter-spacing:.15em; font-weight:800; background:#fff; padding:8px 12px; }
.issue-mark strong { font-size:48px; line-height:1; letter-spacing:-.08em; }
.section { padding:110px 5vw; border-bottom:1px solid var(--ink); }
.section-heading { display:grid; grid-template-columns:1fr 2fr 1fr; gap:50px; align-items:start; margin-bottom:70px; }
.section-index { display:block; font-family:Georgia,serif; font-size:54px; font-style:italic; margin-bottom:30px; }
.section-heading h2 { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:clamp(36px,4.3vw,60px); line-height:1.2; letter-spacing:-.055em; font-weight:500; margin:0; }
.section-heading>p { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:14px; line-height:2; margin:90px 0 0; }
.jpop-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:72px 42px; max-width:1080px; margin:0 auto; }
.story-card>a { display:block; position:relative; }
.story-art { aspect-ratio:16/9; overflow:hidden; position:relative; margin-bottom:18px; transition:transform .3s; border-radius:60px 60px 0 0; border:1px solid var(--ink); }
.story-card:hover .story-art { transform:translateY(-6px); }
.story-art>span { position:absolute; font:italic 88px Georgia,serif; opacity:.75; left:5%; bottom:-5%; z-index:2; }
.story-art i { position:absolute; display:block; width:55%; aspect-ratio:1; border:2px solid; border-radius:50%; right:-5%; top:10%; box-shadow:0 0 0 25px rgba(255,255,255,.12),0 0 0 55px rgba(255,255,255,.1); }
.story-art b { position:absolute; font-size:70px; right:12%; top:22%; transform:rotate(-12deg); }
.art-coral { background:var(--ink); color:#fff; }
.art-blue { background:#d8d8d4; color:var(--ink); }
.art-lime { background:var(--soft); }
.art-line { background:repeating-linear-gradient(135deg,#fff 0,#fff 13px,#111 14px,#111 15px); }
.art-line>span,.art-line>b { background:#fff; padding:0 8px; color:#111; }
.story-meta { display:flex; justify-content:space-between; font-size:9px; font-weight:800; letter-spacing:.12em; margin-bottom:16px; }
.story-card h3 { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:25px; line-height:1.55; margin:0 38px 10px 0; font-weight:600; }
.story-card p { font-size:12px; line-height:1.8; margin:0 40px 0 0; color:#57544d; }
.card-arrow { position:absolute; right:0; bottom:0; font-size:20px; }
.section-all { margin-top:60px; float:right; }
.section-jpop:after { content:""; display:block; clear:both; }
.ad-slot { min-height:220px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; border-bottom:1px solid var(--ink); background:var(--soft); color:#777; }
.ad-slot span { font-size:9px; font-weight:800; letter-spacing:.18em; }
.ad-slot p { margin:0; font:italic 13px Georgia,serif; }
.section-world { background:var(--ink); color:var(--paper); }
.horizontal { grid-template-columns:1fr 1.3fr 1fr; }
.world-list { border-top:1px solid #777; }
.world-list article { border-bottom:1px solid #777; }
.world-list a { min-height:155px; display:grid; grid-template-columns:110px 1.5fr 1fr 30px; gap:30px; align-items:center; transition:padding .25s, background .25s; }
.world-list a:hover { padding:0 18px; background:#222; }
.world-number { width:78px; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; font:italic 34px Georgia,serif; color:var(--ink); }
.world-1 { background:#fff; color:var(--ink); }.world-2 { background:var(--lime); }.world-3 { background:var(--blue); color:white; }
.world-list p { font-size:9px; letter-spacing:.14em; font-weight:800; }
.world-list h3 { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:23px; font-weight:500; margin:12px 0 0; }
.world-list strong { font-size:12px; letter-spacing:.12em; }
.bridge { background:var(--soft); padding:120px 5vw; border-bottom:1px solid var(--ink); display:grid; grid-template-columns:1fr 2.1fr; gap:8vw; }
.bridge-intro h2 { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:clamp(42px,5.4vw,78px); line-height:1.18; letter-spacing:-.05em; font-weight:500; margin:45px 0 28px; }
.bridge-intro>p:last-child { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; line-height:2; font-size:14px; }
.reading-path { display:grid; grid-template-columns:1fr 24px 1fr 24px 1fr; gap:14px; align-items:center; }
.reading-path article { min-height:320px; border:1px solid var(--ink); padding:22px; display:flex; flex-direction:column; transition:transform .25s,background .25s; }
.reading-path article:hover { transform:translateY(-8px); background:#fff; }
.reading-path span { font-size:9px; letter-spacing:.15em; font-weight:800; }
.reading-path b { font:italic 38px Georgia,serif; margin:28px 0 auto; }
.reading-path h3 { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:20px; line-height:1.5; }
.reading-path p { font-size:10px; margin:0; }
.reading-path>i { font-style:normal; text-align:center; }
.bridge-link { grid-column:2; justify-self:end; margin-top:40px; border-bottom:1px solid; padding-bottom:6px; font-size:11px; font-weight:700; display:flex; gap:30px; }
.deep-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid; border-left:1px solid; }
.deep-grid article { min-height:350px; border-right:1px solid; border-bottom:1px solid; }
.deep-grid a { height:100%; padding:22px; display:flex; flex-direction:column; transition:background .25s,color .25s; }
.deep-grid a:hover { background:var(--ink); color:white; }
.deep-top { display:flex; justify-content:space-between; font:italic 30px Georgia,serif; }
.deep-grid p { margin:65px 0 14px; font-size:10px; font-weight:800; letter-spacing:.14em; }
.deep-grid h3 { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:22px; line-height:1.55; margin:0; }
.deep-grid b { margin-top:auto; font-size:10px; }
.ad-slot-compact { min-height:150px; }
.latest-list { border-top:1px solid; }
.latest-list a { display:grid; grid-template-columns:130px 160px 1fr 30px; gap:20px; align-items:center; min-height:115px; border-bottom:1px solid; }
.latest-list time,.latest-list span { font-size:10px; font-weight:700; }
.latest-list h3 { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:20px; font-weight:500; }
.latest-more { display:flex; justify-content:flex-end; margin-top:42px; }
.newsletter { background:var(--ink); color:white; padding:110px 5vw; text-align:center; }
.newsletter h2 { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:clamp(38px,5vw,64px); font-weight:500; margin:35px 0 15px; }
.newsletter>p:not(.eyebrow) { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:14px; }
.newsletter form { max-width:570px; margin:50px auto 0; display:flex; border-bottom:1px solid white; }
.newsletter input { flex:1; padding:18px 4px; border:0; background:transparent; color:white; outline:none; }
.newsletter input::placeholder { color:#cbd2ff; }
.newsletter button { border:0; background:transparent; color:white; font-size:11px; font-weight:800; cursor:pointer; }
footer { background:var(--ink); color:var(--paper); padding:80px 4vw 30px; }
.footer-brand { font-size:42px; margin-bottom:25px; width:max-content; }
footer>p { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; }
footer nav { display:flex; gap:28px; flex-wrap:wrap; justify-content:flex-end; margin:70px 0; font-size:11px; font-weight:700; }
.footer-bottom { border-top:1px solid #555; padding-top:25px; display:flex; justify-content:space-between; font-size:9px; letter-spacing:.1em; }
.footer-bottom .footer-legal { display:flex; flex-direction:row; justify-content:flex-end; gap:18px; margin:0; font-size:inherit; font-weight:700; }

@media (max-width:900px) {
  .site-header { height:86px; }
  .desktop-nav { display:none; }
  .mobile-menu { display:block; }
  .mobile-menu summary { list-style:none; cursor:pointer; font-size:11px; font-weight:800; }
  .mobile-menu nav { position:absolute; top:86px; left:0; right:0; background:var(--ink); color:var(--paper); display:flex; flex-direction:column; padding:24px 4vw; gap:20px; }
  .hero { grid-template-columns:1fr; }
  .hero-copy { min-height:610px; }
  .hero-art { min-height:540px; }
  .section-heading,.horizontal { grid-template-columns:1fr; gap:25px; }
  .section-heading>p { margin:0; max-width:520px; }
  .jpop-grid { grid-template-columns:1fr 1fr; }
  .world-list a { grid-template-columns:85px 1fr 26px; }
  .world-list strong { display:none; }
  .bridge { grid-template-columns:1fr; }
  .bridge-intro { max-width:520px; }
  .bridge-link { grid-column:1; }
  .deep-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:600px) {
  .brand { font-size:20px; }
  .hero-copy { padding-top:48px; min-height:560px; }
  .hero h1 { margin-top:65px; }
  .hero-art { min-height:430px; }
  .section { padding:82px 5vw; }
  .section-index { font-size:40px; margin-bottom:15px; }
  .jpop-grid { grid-template-columns:1fr; gap:58px; }
  .story-card h3 { font-size:21px; }
  .ad-slot { min-height:170px; }
  .world-list a { min-height:135px; grid-template-columns:60px 1fr 20px; gap:14px; }
  .world-number { width:52px; font-size:24px; }
  .world-list h3 { font-size:18px; }
  .bridge { padding:82px 5vw; }
  .reading-path { grid-template-columns:1fr; }
  .reading-path>i { transform:rotate(90deg); }
  .reading-path article { min-height:230px; }
  .deep-grid { grid-template-columns:1fr; }
  .deep-grid article { min-height:270px; }
  .latest-list a { grid-template-columns:1fr 22px; padding:22px 0; gap:8px; }
  .latest-list time,.latest-list span { grid-column:1; }
  .latest-list h3 { grid-column:1; margin:6px 0; }
  .latest-list a>span:last-child { grid-column:2; grid-row:1/4; }
  .newsletter { padding:82px 5vw; }
  .page-masthead { padding-top:82px; }
  .page-content { padding-top:64px; font-size:16px; }
  .newsletter form { flex-direction:column; border:0; gap:12px; }
  .newsletter input { border-bottom:1px solid white; }
  .newsletter button { padding:16px; border:1px solid white; }
  footer nav { justify-content:flex-start; flex-direction:column; }
  .footer-bottom { flex-direction:column; gap:12px; }
  .footer-bottom .footer-legal { flex-direction:row; flex-wrap:wrap; justify-content:flex-start; gap:14px; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }

/* WordPress integration */
.desktop-nav .mml-menu,.mml-footer-menu { display:flex; gap:34px; margin:0; padding:0; list-style:none; }
.story-image { background:#eee; }
.story-image img,.archive-image img,.article-hero img { width:100%; height:100%; object-fit:cover; display:block; }
.story-image>span { color:#fff; text-shadow:0 1px 16px rgba(0,0,0,.55); }
.archive-shell { max-width:1280px; margin:0 auto; padding:110px 5vw 140px; }
.page-main { margin:0; }
.page-masthead { padding:110px max(5vw,calc((100vw - 1120px)/2)) 72px; border-bottom:1px solid var(--ink); }
.page-masthead h1 { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:clamp(46px,6.2vw,88px); font-weight:500; line-height:1.18; letter-spacing:-.055em; margin:34px 0 0; }
.page-content { max-width:760px; margin:0 auto; padding:90px 5vw 140px; font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:17px; line-height:2.15; }
.page-content > *:first-child { margin-top:0; }
.page-content a { text-decoration:underline; text-underline-offset:.2em; }
.page-content img { max-width:100%; height:auto; }
.article-main { margin:0; }
.article-masthead { padding:95px max(5vw,calc((100vw - 1120px)/2)) 80px; }
.article-labels { display:flex; justify-content:space-between; border-bottom:1px solid; padding-bottom:18px; font-size:9px; font-weight:800; letter-spacing:.14em; }
.article-masthead h1 { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:clamp(46px,6.8vw,100px); font-weight:500; line-height:1.15; letter-spacing:-.055em; margin:58px 0 38px; max-width:1100px; }
.article-masthead .article-deck { max-width:760px; }
.article-header { margin-bottom:60px; }
.article-header h1,.archive-header h1 { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:clamp(40px,5.3vw,76px); font-weight:500; line-height:1.25; letter-spacing:-.05em; margin:34px 0 28px; }
.article-deck,.archive-description { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:17px; line-height:2; max-width:720px; }
.article-byline { border-top:1px solid; margin-top:42px; padding-top:18px; display:flex; justify-content:space-between; font-size:10px; font-weight:700; letter-spacing:.1em; }
.article-visual { margin:0; border-top:1px solid; border-bottom:1px solid; background:#eee; }
.article-visual img { display:block; width:100%; height:min(68vw,780px); object-fit:cover; }
.article-layout { max-width:1120px; margin:0 auto; padding:110px 5vw 150px; display:grid; grid-template-columns:220px minmax(0,720px); gap:90px; align-items:start; }
.article-rail { position:sticky; top:35px; border-top:4px solid; padding-top:18px; }
.article-rail>p,.share-rail span { font-size:9px; font-weight:800; letter-spacing:.15em; }
.article-rail ol { margin:30px 0 55px; padding:0 0 0 18px; }
.article-rail li { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:12px; line-height:1.7; margin-bottom:14px; }
.article-rail-empty { margin:30px 0 55px; }
.share-rail { border-top:1px solid; padding-top:18px; display:flex; justify-content:space-between; }
.article-content { max-width:720px; font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:17px; line-height:2.15; }
.article-content h2 { font-size:32px; line-height:1.5; margin:3em 0 1em; }
.article-content h3 { font-size:23px; line-height:1.6; margin:2.5em 0 .8em; }
.article-content a { text-decoration:underline; text-underline-offset:4px; }
.article-content blockquote { margin:2.5em 0; padding:1px 0 1px 30px; border-left:4px solid; font-style:italic; }
.article-content img { max-width:100%; height:auto; }
.article-footer { max-width:720px; margin:70px auto 0; padding-top:20px; border-top:1px solid; font-size:11px; }
.post-navigation { max-width:1120px; margin:0 auto 100px; padding:30px 5vw; border-top:1px solid; display:flex; justify-content:space-between; gap:40px; font-size:12px; font-weight:700; }
.article-related { padding:110px 5vw; border-top:1px solid; }
.article-related>h2 { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:clamp(38px,5vw,68px); font-weight:500; margin:28px 0 60px; }
.article-related>div { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid; border-left:1px solid; }
.article-related a { min-height:330px; padding:22px; border-right:1px solid; border-bottom:1px solid; display:flex; flex-direction:column; }
.article-related a>span { font:italic 34px Georgia,serif; }
.article-related a>p { margin-top:65px; font-size:9px; font-weight:800; letter-spacing:.13em; }
.article-related h3 { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:21px; line-height:1.6; }
.article-related a>b { margin-top:auto; font-size:10px; }
.article-ad { min-height:180px; margin:0 0 75px; border:0; }
.archive-header { border-bottom:1px solid; padding-bottom:60px; margin-bottom:70px; }
.archive-content-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:65px; align-items:start; }
.archive-content-layout .archive-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.archive-browser { position:sticky; top:35px; border-top:4px solid var(--ink); padding-top:18px; }
.archive-browser>div+div { border-top:1px solid var(--ink); margin-top:42px; padding-top:38px; }
.archive-browser h2 { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:27px; font-weight:500; margin:13px 0 24px; }
.archive-browser ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px 16px; }
.archive-browser li { font-size:11px; line-height:1.5; }
.archive-browser a { display:inline-block; border-bottom:1px solid; padding-bottom:3px; }
.archive-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:70px 36px; }
.archive-card h2 { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:23px; line-height:1.55; font-weight:600; }
.archive-card>a>p:not(.eyebrow) { color:#57544d; font-size:12px; line-height:1.8; }
.archive-card time { font-size:9px; font-weight:700; letter-spacing:.1em; }
.archive-image { aspect-ratio:16/9; margin-bottom:18px; overflow:hidden; background:#eee; }
.navigation.pagination { margin-top:80px; }
.nav-links { display:flex; gap:10px; justify-content:center; }
.page-numbers { min-width:38px; height:38px; display:grid; place-items:center; border:1px solid; font-size:11px; }
.page-numbers.current { background:#111; color:#fff; }
.adsbygoogle { min-height:90px; }

@media (max-width:900px) {
  .archive-grid { grid-template-columns:1fr 1fr; }
  .archive-content-layout { grid-template-columns:1fr; }
  .archive-content-layout .archive-grid { grid-template-columns:1fr 1fr; }
  .archive-browser { position:static; display:grid; grid-template-columns:1fr 2fr; gap:45px; border-top:1px solid; border-bottom:1px solid; padding:45px 0; }
  .archive-browser>div+div { border-top:0; margin-top:0; padding-top:0; }
  .article-layout { grid-template-columns:1fr; gap:55px; padding-top:75px; }
  .article-rail { position:static; }
}
@media (max-width:600px) {
  .archive-grid { grid-template-columns:1fr; }
  .archive-content-layout .archive-grid { grid-template-columns:1fr; }
  .archive-browser { grid-template-columns:1fr; }
  .archive-shell { padding-top:75px; }
  .article-masthead { padding:75px 5vw 65px; }
  .article-masthead h1 { font-size:42px; line-height:1.22; margin-top:52px; overflow-wrap:anywhere; }
  .article-labels { gap:20px; }
  .article-content { font-size:16px; }
  .article-related>div { grid-template-columns:1fr; }
  .article-related a { min-height:250px; }
}