/*
Theme Name: coecoco Blog
Theme URI: https://coecoco.com/
Author: graciauto
Author URI: https://graciauto.jp/
Description: coecoco Beautyのサービスサイトとつながるブログテーマ。
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: coecoco-blog
*/
:root { color-scheme: light; --ink:#0b3457; --muted:#486175; --line:#dfe8ed; --aqua:#0d879b; }
* { box-sizing:border-box; }
html { background:#fff; scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:#fff; color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; line-height:1.8; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-underline-offset:5px; }
button,input,textarea,select { font:inherit; }
a,button { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid #168bad; outline-offset:4px; }
.screen-reader-text { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-header-inner { margin-inline:auto; }
.site-header-logo,.site-footer-brand > a { display:inline-flex; text-decoration:none; }
.site-header-nav { align-items:center; }
.site-header-nav a { color:#2c4a61; font-weight:700; text-decoration:none; }
.site-header-nav a:hover,.site-header-nav a[aria-current] { color:#047f9f; }
.site-header-cta { display:inline-flex; align-items:center; justify-content:space-between; padding:9px 16px; font-weight:750; text-decoration:none; }
.site-mobile-menu[hidden] { display:none !important; }
.site-menu-toggle .menu-label { font-size:13px; }
.site-footer-brand .brand-logo-image { filter:brightness(0) invert(1); }
.site-footer-brand p { margin:19px 0 0; }
.site-breadcrumb { overflow-wrap:anywhere; }
.blog-main { width:min(100% - 64px,1240px); margin:0 auto; padding:42px 0 100px; }
.blog-heading { padding-bottom:44px; max-width:900px; }
.blog-eyebrow { color:#078397; font-size:13px; font-weight:700; letter-spacing:.16em; margin:0 0 22px; }
.blog-heading h1 { margin:0; font-size:clamp(32px,4.4vw,58px); font-weight:750; line-height:1.5; letter-spacing:-.035em; }
.blog-heading h1 span { color:#0878a4; background:linear-gradient(105deg,#0872c8,#099b9f); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.blog-lead { font-size:17px; line-height:1.9; color:var(--muted); margin:20px 0 0; }
.mobile-break { display:none; }
.blog-categories { display:flex; flex-wrap:wrap; gap:10px; padding:0 0 32px; }
.blog-category-filter { display:inline-flex; align-items:center; padding:8px 18px; border:1px solid var(--line); border-radius:30px; font-size:14px; text-decoration:none; transition:background .15s; }
.blog-category-filter.is-current { background:var(--ink); border-color:var(--ink); color:white; }
.blog-category-filter:hover:not(.is-current) { background:#eef7fa; }
.blog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:46px 28px; }
.blog-card { min-width:0; }
.blog-card-image { display:block; aspect-ratio:3/2; overflow:hidden; border-radius:20px; background:#eff6f8; }
.blog-card-image > img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.blog-card-image:hover > img { transform:scale(1.025); }
.blog-card-placeholder { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:linear-gradient(135deg,#f3f8fa,#e4f4f5); }
.blog-card-placeholder img { width:48%; }
.blog-card-placeholder > span { color:#3b697b; font-size:11px; letter-spacing:.18em; }
.blog-card-body { padding:18px 2px 0; }
.blog-card-meta,.blog-article-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; font-size:13px; color:var(--muted); }
.blog-card-meta time { font-variant-numeric:tabular-nums; }
.blog-category { font-size:12px; padding:2px 9px; border-radius:6px; background:#eaf5f7; color:#09677d; text-decoration:none; }
.blog-card h2 { font-size:21px; line-height:1.65; letter-spacing:-.015em; margin:12px 0 10px; overflow-wrap:anywhere; }
.blog-card h2 a { text-decoration:none; }
.blog-card h2 a:hover { text-decoration:underline; }
.blog-card-body > p { font-size:15px; color:var(--muted); line-height:1.85; margin:0; overflow-wrap:anywhere; }
.blog-read-more { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 0 12px; margin-top:6px; border-bottom:1px solid var(--line); text-decoration:none; font-size:14px; font-weight:650; }
.blog-read-more span { color:var(--aqua); font-size:21px; }
.pagination { padding-top:54px; }
.pagination .nav-links { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }
.page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; border:1px solid var(--line); border-radius:10px; padding:5px 13px; font-size:14px; text-decoration:none; }
.page-numbers.current { background:var(--ink); border-color:var(--ink); color:#fff; }
.page-numbers.dots { border-color:transparent; }
.blog-empty { padding:64px 40px; border:1px solid var(--line); border-radius:24px; text-align:center; background:#f8fbfc; }
.blog-empty h1,.blog-empty h2 { font-size:clamp(22px,3vw,30px); line-height:1.7; margin:0 0 16px; }
.blog-empty p { color:var(--muted); font-size:16px; margin:0 auto 28px; }
.blog-button { display:inline-flex; align-items:center; justify-content:center; gap:28px; min-height:50px; padding:12px 24px; border:1px solid var(--ink); border-radius:10px; color:var(--ink); text-decoration:none; font-size:15px; font-weight:650; }
.blog-button:hover { background:#eaf5f7; }
.blog-single { max-width:1000px; padding-top:32px; }
.blog-article-heading { max-width:820px; margin:0 auto 38px; }
.blog-article-categories { display:flex; flex-wrap:wrap; gap:8px; }
.blog-article-heading h1 { font-size:clamp(28px,3.4vw,44px); line-height:1.55; letter-spacing:-.025em; margin:18px 0 24px; overflow-wrap:anywhere; }
.blog-article-meta { font-size:14px; }
.blog-article-cover { width:100%; margin:0 0 48px; }
.blog-article-cover img { width:100%; height:auto; max-height:650px; object-fit:contain; border-radius:24px; }
.blog-content { max-width:780px; margin:0 auto; font-size:17px; line-height:2; color:#203e54; overflow-wrap:anywhere; }
.blog-content > :first-child { margin-top:0; }
.blog-content p { margin:0 0 1.7em; }
.blog-content h2 { margin:2.6em 0 1em; font-size:28px; line-height:1.6; color:var(--ink); letter-spacing:-.015em; }
.blog-content h3 { margin:2em 0 .8em; font-size:22px; line-height:1.6; color:var(--ink); }
.blog-content h4 { margin:1.8em 0 .8em; font-size:19px; line-height:1.7; }
.blog-content a { color:#067892; }
.blog-content li { margin:.45em 0; }
.blog-content ul,.blog-content ol { padding-left:1.6em; margin:1.5em 0; }
.blog-content blockquote { margin:2em 0; padding:24px 28px; background:#eff7f9; border:0; border-radius:16px; }
.blog-content blockquote p:last-child { margin:0; }
.blog-content figure { margin:2em 0; }
.blog-content img { height:auto; border-radius:16px; }
.blog-content figcaption { font-size:13px; color:var(--muted); text-align:center; line-height:1.7; }
.blog-content table { width:100%; border-collapse:collapse; font-size:15px; }
.blog-content .wp-block-table { overflow-x:auto; }
.blog-content td,.blog-content th { padding:12px 16px; border:1px solid var(--line); }
.blog-content th { background:#eef6f9; font-weight:650; }
.blog-content pre { padding:20px; overflow-x:auto; border-radius:12px; background:#edf4f7; font-size:14px; }
.blog-content iframe { max-width:100%; }
.blog-content .wp-block-button__link { border-radius:10px; background:var(--ink); color:#fff; }
.blog-content input[type=password] { display:block; max-width:100%; border:1px solid var(--line); border-radius:8px; padding:10px; }
.blog-content input[type=submit] { color:white; background:var(--ink); border:0; border-radius:8px; padding:12px 24px; }
.blog-article-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; padding-top:36px; margin:64px auto 0; max-width:780px; border-top:1px solid var(--line); }
.blog-text-link { font-size:15px; font-weight:650; }
.blog-content-pages { display:flex; flex-wrap:wrap; gap:16px; }
.blog-content .alignwide { width:calc(100% + 80px); max-width:calc(100% + 80px); margin-left:-40px; }
@media(max-width:1050px) { .blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) {
  .blog-main { width:calc(100% - 40px); padding:28px 0 64px; }
  .blog-heading { padding-bottom:30px; }
  .blog-eyebrow { font-size:12px; margin-bottom:18px; }
  .blog-heading h1 { font-size:clamp(28px,7.6vw,42px); line-height:1.6; }
  .blog-lead { font-size:16px; margin-top:16px; }
  .mobile-break { display:block; }
  .blog-grid { gap:38px 22px; }
  .blog-empty { padding:40px 22px; }
  .blog-card h2 { font-size:20px; }
  .blog-category-filter { padding:7px 14px; }
  .blog-article-heading { margin-bottom:28px; }
  .blog-article-heading h1 { font-size:28px; line-height:1.6; margin-top:14px; }
  .blog-article-meta { font-size:13px; gap:5px 12px; }
  .blog-article-cover { margin-bottom:32px; }
  .blog-article-cover img { border-radius:18px; }
  .blog-content { font-size:16px; }
  .blog-content h2 { font-size:24px; }
  .blog-content h3 { font-size:20px; }
  .blog-content .alignwide { width:100%; max-width:100%; margin-left:0; }
  .blog-article-bottom { margin-top:44px; flex-direction:column; align-items:stretch; }
  .blog-text-link { text-align:center; }
}
@media(max-width:580px) { .blog-grid { grid-template-columns:minmax(0,1fr); } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }