@charset "UTF-8";
:root{--paper:#f5f3ea;--cream:#fffefa;--ink:#101116;--blue:#075cf6;--coral:#ff6846;--line:#d8d8d0}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-size:16px;line-height:1.85;letter-spacing:.02em;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit}
.site-header{height:78px;position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,5vw,64px);background:rgba(245,243,234,.95);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.wordmark{display:block}.wordmark img{display:block;width:auto;height:44px}
.site-header nav{display:flex;gap:2rem}.site-header nav a{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-decoration:none}.site-header nav a:hover,.site-header nav a[aria-current=page]{color:var(--blue)}
.blog-page{padding:0 clamp(24px,5vw,64px) clamp(100px,14vh,160px)}
.blog-hero{min-height:390px;display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr auto;align-items:end;padding:70px 0 54px;border-bottom:1px solid var(--ink)}
.blog-hero>p{grid-column:1/-1;align-self:start;margin:0;color:var(--blue);font-size:.75rem;font-weight:800;letter-spacing:.2em}
.blog-hero h1{margin:0;font-size:clamp(4rem,9vw,9rem);font-weight:400;line-height:.82;letter-spacing:-.1em}
.blog-hero>div{display:flex;align-items:baseline;gap:.7rem}.blog-hero strong{color:var(--blue);font-size:3rem;line-height:1}.blog-hero span{font-size:.75rem;font-weight:800;letter-spacing:.1em}
.blog-tools{display:flex;justify-content:flex-end;gap:1.5rem;padding:20px 0;border-bottom:1px solid var(--line)}.blog-tools a{color:#555a64;font-size:.75rem;font-weight:800;letter-spacing:.09em;text-decoration:none}.blog-tools a:hover{color:var(--blue)}
.featured-area{padding:clamp(44px,7vw,90px) 0;border-bottom:1px solid var(--ink)}.featured-area>p,.section-heading>p{margin:0 0 1.4rem;color:var(--blue);font-size:.75rem;font-weight:800;letter-spacing:.18em}
.featured-post{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);min-width:0;border:1px solid var(--line);background:var(--cream)}.featured-post .card-media{border-right:1px solid var(--line);border-bottom:0}.featured-post .card-body{padding:clamp(28px,4vw,58px)}.featured-post .card-body h2{font-size:clamp(2rem,4vw,4.3rem);line-height:1.25}.featured-post .card-body p{font-size:1rem}
.section-heading{display:flex;align-items:end;justify-content:space-between;padding:clamp(48px,7vw,86px) 0 30px}.section-heading>p{margin:0}.section-heading h2{margin:0;font-size:clamp(2.2rem,5vw,5rem);font-weight:400;line-height:1;letter-spacing:-.07em}.page-heading{padding-top:70px}
.post-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-left:1px solid var(--line)}
.post-card{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.card-media{display:block;aspect-ratio:16/9;overflow:hidden;background:#dfe9ff;border-bottom:1px solid var(--line)}
.card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}.card-media:hover img{transform:scale(1.025)}
.card-placeholder{height:100%;display:grid;place-items:center;color:var(--blue);font-size:6rem}
.card-body{display:flex;flex:1;flex-direction:column;padding:clamp(22px,3.2vw,40px);overflow-wrap:anywhere}
.card-body time{color:#666a73;font-size:.75rem;font-weight:800;letter-spacing:.12em}
.card-body h2{margin:1rem 0;font-size:clamp(1.45rem,2.6vw,2.3rem);line-height:1.45;letter-spacing:-.04em}.card-body h2 a{text-decoration:none}.card-body h2 a:hover{color:var(--blue)}
.card-body p{margin:0 0 2rem;color:#3d4049;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:1rem;line-height:2}
.read-more{margin-top:auto;color:var(--blue);font-size:.75rem;font-weight:800;letter-spacing:.1em;text-decoration:none}
.pagination{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.45rem;padding:56px 0 0}.pagination a,.pagination-current,.pagination-ellipsis{min-width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);font-size:.75rem;font-weight:800;text-decoration:none}.pagination a:hover{color:var(--cream);background:var(--blue);border-color:var(--blue)}.pagination-current{color:var(--cream);background:var(--ink);border-color:var(--ink)}.pagination-ellipsis{border-color:transparent}.pagination .pagination-edge{padding:0 1rem;width:auto}
.post-page{width:min(100% - 40px,880px);margin:0 auto;padding:55px 0 120px}
.breadcrumb{display:flex;gap:.6rem;margin-bottom:70px;color:#646872;font-size:.75rem;font-weight:800;letter-spacing:.08em}.breadcrumb a{text-decoration:none}.breadcrumb a:hover{color:var(--blue)}
.post-header{padding-bottom:44px;border-bottom:1px solid var(--ink)}
.post-label{margin:0 0 2.2rem;color:var(--blue);font-size:.75rem;font-weight:800;letter-spacing:.2em}
.post-header h1{margin:0;font-size:clamp(2.5rem,6vw,5.4rem);font-weight:400;line-height:1.3;letter-spacing:-.06em}
.post-meta{display:flex;gap:1.6rem;margin-top:2.5rem;color:#555a64;font-size:.75rem;font-weight:800;letter-spacing:.06em}
.post-content{padding-top:60px;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:16px;line-height:2.05;overflow-wrap:anywhere}
.post-content p{margin:0 0 1.65em}.post-content h2,.post-content h3,.post-content h4{font-family:Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;line-height:1.5}.post-content h2{margin:2.8em 0 1em;font-size:2rem}.post-content h3{margin:2.4em 0 1em;font-size:1.5rem}.post-content ul,.post-content ol{margin:0 0 2em;padding-left:1.5em}.post-content li{margin:.45em 0}.post-content hr{margin:3rem 0;border:0;border-top:1px solid var(--line)}.post-content code{padding:.12em .35em;background:#e7e4db;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}
.post-content a{color:var(--blue);text-underline-offset:.2em}.post-content figure{margin:3rem 0}.post-content figure img{display:block;width:100%;background:#e4e1d8}.post-content figcaption{padding-top:.7rem;color:#6d7179;font-family:Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-size:.75rem}.post-content blockquote{margin:2.5rem 0;padding:1rem 0 1rem 1.5rem;border-left:3px solid var(--blue)}
.video{position:relative;aspect-ratio:16/9;margin:3rem 0;background:#000}.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.article-navigation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:80px;border-top:1px solid var(--line);border-left:1px solid var(--line)}.article-navigation a{display:flex;flex-direction:column;gap:.7rem;min-width:0;padding:24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none}.article-navigation a:hover{color:var(--blue)}.article-navigation .older{text-align:right}.article-navigation span{color:var(--blue);font-size:.75rem;font-weight:800;letter-spacing:.08em}.article-navigation strong{font-size:1rem;line-height:1.6;overflow-wrap:anywhere}
.post-back{margin-top:80px;padding-top:24px;border-top:1px solid var(--line)}.post-back a{color:var(--blue);font-size:.75rem;font-weight:800;letter-spacing:.08em;text-decoration:none}
.archive-page{padding:55px clamp(24px,5vw,64px) clamp(100px,14vh,160px)}.archive-page>.breadcrumb{margin-bottom:60px}.archive-header{display:flex;align-items:end;gap:2rem;padding-bottom:50px;border-bottom:1px solid var(--ink)}.archive-header>p{align-self:start;margin:0 auto 0 0;color:var(--blue);font-size:.75rem;font-weight:800;letter-spacing:.18em}.archive-header h1{margin:0;font-size:clamp(3rem,7vw,7rem);font-weight:400;line-height:.9;letter-spacing:-.08em}.archive-header>span{font-size:.75rem;font-weight:800;white-space:nowrap}.year-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-left:1px solid var(--line)}.year-card{display:flex;align-items:baseline;justify-content:space-between;padding:clamp(28px,4vw,52px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none}.year-card:hover{color:var(--cream);background:var(--blue)}.year-card strong{font-size:clamp(2.4rem,5vw,5rem);font-weight:400;letter-spacing:-.06em}.year-card span{font-size:.75rem;font-weight:800}.archive-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}.archive-list li{display:grid;grid-template-columns:90px 1fr;gap:1rem;padding:22px 0;border-bottom:1px solid var(--line)}.archive-list time{color:#646872;font-size:.75rem;font-weight:800;letter-spacing:.08em}.archive-list a{font-size:16px;font-weight:700;line-height:1.6;text-decoration:none}.archive-list a:hover{color:var(--blue)}
footer{padding:3.5rem clamp(24px,5vw,64px);color:var(--cream);background:var(--ink)}footer>div{display:flex;justify-content:space-between;gap:1rem;font-size:.75rem;font-weight:800;letter-spacing:.06em}footer a{color:inherit;text-decoration:none}
@media(max-width:900px){.featured-post{grid-template-columns:1fr}.featured-post .card-media{border-right:0;border-bottom:1px solid var(--line)}.year-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.site-header{height:64px;padding:0 18px}.wordmark img{height:34px}.site-header nav{gap:1.1rem}.blog-page{padding-right:18px;padding-left:18px}.blog-hero{min-height:300px;grid-template-columns:1fr;padding-top:50px}.blog-hero>div{margin-top:2rem}.blog-tools{justify-content:flex-start;gap:1rem;overflow-x:auto}.section-heading{align-items:start;flex-direction:column;gap:1rem}.post-grid{grid-template-columns:1fr}.pagination{gap:.3rem}.pagination a,.pagination-current,.pagination-ellipsis{min-width:34px;height:34px}.pagination .pagination-edge{padding:0 .7rem}.post-page{width:min(100% - 36px,880px);padding-top:35px}.breadcrumb{margin-bottom:45px}.post-header h1{font-size:2.45rem}.post-meta{flex-direction:column;gap:.35rem}.post-content{padding-top:42px;font-size:1rem}.post-content figure,.video{margin:2.2rem 0}.article-navigation{grid-template-columns:1fr}.article-navigation .older{text-align:left}.archive-page{padding:35px 18px 100px}.archive-header{align-items:start;flex-direction:column;gap:1.25rem}.archive-header>p{margin:0}.year-grid{grid-template-columns:1fr}.archive-list li{grid-template-columns:68px 1fr;gap:.7rem}.archive-list a{font-size:1rem}footer>div{flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card-media img{transition:none}}


/* Shared editorial rhythm with the company site. */
:root { --gutter: max(6vw, calc((100vw - 1280px) / 2)); }
body { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; }
::selection { background: var(--blue); color: white; }
.site-header { min-height: 88px; height: auto; gap: 24px; padding: 20px var(--gutter); }
.wordmark img { width: 166px; height: auto; }
.site-header nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; font-weight: 500; letter-spacing: .025em; }
.blog-page { padding: 0 var(--gutter) 96px; }
.blog-hero { min-height: 300px; padding: 64px 0 40px; border-color: var(--line); }
.blog-hero h1 { font-size: clamp(3rem, 5.5vw, 5rem); line-height: 1.3; letter-spacing: -.06em; }
.blog-hero > p, .blog-hero span { font-weight: 500; letter-spacing: .1em; }
.blog-hero strong { font-size: 2.75rem; font-weight: 400; }
.blog-tools { justify-content: flex-start; gap: 32px; padding-block: 12px; }
.blog-tools a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; font-weight: 500; letter-spacing: .025em; white-space: nowrap; }
.featured-area { border-color: var(--line); }
.featured-area > p, .section-heading > p, .post-label { font-weight: 500; letter-spacing: .1em; }
.featured-post { border: 0; gap: 40px; background: transparent; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.featured-post .card-media { border: 0; align-self: start; }
.featured-post .card-body { padding: 0; }
.featured-post .card-body h2 { font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 1.6; }
.section-heading h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.4; letter-spacing: -.04em; }
.post-grid { border: 0; gap: 48px 36px; }
.post-card { border: 0; border-bottom: 1px solid var(--line); }
.card-body { padding: 24px 0 32px; }
.card-body h2 { font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 500; line-height: 1.65; }
.card-body p { font-family: inherit; font-size: 1rem; color: #575d68; }
.card-body time { font-weight: 400; }
.read-more, .post-back a { font-size: .875rem; font-weight: 500; }
.pagination a, .pagination-current, .pagination-ellipsis { min-width: 44px; height: 44px; font-size: .875rem; font-weight: 500; }
.post-header { border-color: var(--line); }
.post-header h1 { font-size: clamp(2rem, 4.3vw, 3.5rem); line-height: 1.55; letter-spacing: -.04em; }
.post-meta, .breadcrumb, .archive-list time { font-weight: 400; }
.post-content { font-family: inherit; font-size: 1rem; line-height: 2.05; }
.article-navigation strong { font-weight: 500; }
.archive-page { padding-inline: var(--gutter); }
.archive-header { border-color: var(--line); }
.archive-header h1 { font-size: clamp(2.8rem, 5vw, 4.5rem); line-height: 1.3; }
.archive-list a { font-weight: 500; }
footer { padding: 36px var(--gutter); background: var(--paper); color: #575d68; border-top: 1px solid var(--line); }
footer > div { font-size: .75rem; font-weight: 400; }
footer a { font-size: .875rem; }
@media (max-width: 900px) {
  .featured-post { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 720px) {
  :root { --gutter: 24px; }
  .site-header { min-height: 72px; gap: 16px; padding-block: 12px; }
  .wordmark img { width: 138px; }
  .site-header nav { gap: 16px; }
  .site-header nav a { font-size: .8125rem; }
  .blog-hero { min-height: 240px; grid-template-columns: 1fr auto; padding-top: 40px; }
  .blog-hero > div { margin-top: 0; }
  .blog-hero strong { font-size: 2.2rem; }
  .blog-tools { flex-wrap: wrap; gap: 8px 24px; }
  .post-grid { gap: 36px; }
  .post-page { width: calc(100% - 48px); }
  .post-content { font-size: 1rem; }
  .pagination a, .pagination-current, .pagination-ellipsis { min-width: 44px; height: 44px; }
}
@media (max-width: 380px) {
  :root { --gutter: 20px; }
  .site-header { gap: 12px; }
  .wordmark img { width: 122px; }
  .site-header nav { gap: 12px; }
}