/*
Theme Name: TakkuN Official
Theme URI: https://example.com
Author: Takumi Takano
Description: 白ベース・影なし。WHAT’S/ABOUT/ACTORスライド/EDITED CTA/SHOW CASE を含むトップテーマ。
Version: 1.0.0
Text Domain: takkun-official
*/
:root{ --max:1100px; --gap:20px; --muted:#6b7c93; }
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP","Hiragino Kaku Gothic ProN",YuGothic,Meiryo,sans-serif;color:#111;background:#fff;line-height:1.75}
/* Header & Nav */
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #eee}
.header-inner{max-width:var(--max);margin:auto;padding:12px var(--gap);display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:800;letter-spacing:.08em;font-size:20px;text-decoration:none;color:#111}
.nav-toggle{display:none;width:40px;height:40px;background:none;border:0;padding:0}
.nav-toggle span,.nav-toggle::before,.nav-toggle::after{content:"";display:block;height:2px;background:#111;margin:8px 0;transition:.2s}
.global-nav{display:flex}
.global-nav .menu{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.global-nav a{text-decoration:none;color:#111;font-size:14px}
.global-nav a:hover{text-decoration:underline}
@media (max-width:860px){
  .nav-toggle{display:block}
  .global-nav{position:fixed;inset:56px 0 0 0;background:#fff;padding:24px;border-top:1px solid #eee;display:none}
  .global-nav.is-open{display:block}
  .global-nav .menu{flex-direction:column;gap:14px}
}
/* Common */
.container{max-width:var(--max);margin:auto;padding:40px var(--gap)}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}
.section-title{margin:0;font-size:32px;font-weight:900;letter-spacing:.04em}
.more-link{font-size:14px;text-decoration:none;color:#111;white-space:nowrap}
.section-sub{color:var(--muted);margin:0 0 24px}
/* Hero */
.hero{position:relative}
.hero img{width:100%;height:auto;display:block}
.hero-title{position:absolute;left:24px;bottom:24px;color:#fff;font-weight:900;font-size:min(9vw,48px);letter-spacing:.08em;text-shadow:0 2px 10px rgba(0,0,0,.25)}
/* WHAT'S */
.whats{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--gap)}
@media (max-width:860px){ .whats{grid-template-columns:1fr} }
.whats-left img{width:100%;height:auto;border-radius:6px;display:block}
.post-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
@media (max-width:520px){ .post-grid{grid-template-columns:1fr} }
.card{display:block;color:inherit;text-decoration:none}
.thumb{width:100%;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#eee}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.meta{margin-top:8px;font-size:12px;color:var(--muted)}
.card-title{margin:4px 0 2px;font-weight:800;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.card-excerpt{margin:0;color:#333;font-size:13px;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
/* ABOUT */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--gap);align-items:start}
@media (max-width:900px){ .about{grid-template-columns:1fr} }
.about-block{column-count:3;column-gap:24px}
@media (max-width:1100px){ .about-block{column-count:2} }
@media (max-width:700px){ .about-block{column-count:1} }
.about-photo{border-radius:12px;overflow:hidden}
.about-photo img{width:100%;height:auto;display:block}
/* ACTOR Slider */
.actor-wrap{position:relative}
.actor-track{display:flex;gap:24px;overflow:hidden;scroll-behavior:smooth}
.actor-item{flex:0 0 220px}
.actor-item a{display:block}
.actor-item img{width:100%;height:auto;display:block}
.actor-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
.actor-btn{border:1px solid #ddd;background:#fff;padding:8px 12px;border-radius:8px;cursor:pointer}
/* CTA */
.banner{margin:40px 0}
.banner img{width:100%;height:auto;display:block;border-radius:10px}
/* SHOW CASE */
.show-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
@media (max-width:1024px){ .show-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:700px){ .show-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:430px){ .show-grid{grid-template-columns:1fr} }
/* Footer */
.footer{border-top:1px solid #eee;margin-top:40px}
.footer-inner{max-width:var(--max);margin:auto;padding:24px var(--gap);color:var(--muted);font-size:13px}
/* Title image */
.section-title img{display:block;max-width:100%;height:auto}


/* ===== Content (Lower pages) ===== */
.content{max-width:760px;margin:auto;padding:40px var(--gap)}
.article-header{margin:0 0 18px}
.article-title{margin:0 0 6px;font-size:clamp(22px,3.2vw,34px);font-weight:900;letter-spacing:.02em}
.article-meta{color:var(--muted);font-size:13px}
.eyecatch{margin:16px 0 24px;border-radius:10px;overflow:hidden}
.eyecatch img{width:100%;height:auto;display:block}
.post-content{color:#222}
.post-content h2{font-size:clamp(18px,2.6vw,26px);margin:28px 0 12px}
.post-content h3{font-size:clamp(16px,2.2vw,22px);margin:22px 0 10px}
.post-content p{margin:0 0 1.1em}
.post-content img, .post-content video{max-width:100%;height:auto}
.post-content figure{margin:1.2em 0}
.post-content blockquote{margin:1.2em 0;padding:12px 16px;background:#f7f7f9;border-left:3px solid #ddd}
.post-content pre, .post-content code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace}
.post-content table{width:100%;border-collapse:collapse;margin:1em 0;font-size:14px}
.post-content th, .post-content td{border:1px solid #e6e6e6;padding:8px}
.post-pager{display:flex;justify-content:space-between;gap:12px;margin-top:28px}
.post-pager a{font-size:14px;text-decoration:none;color:#111}
/* Responsive embed */
.embed-wrap{position:relative;width:100%;padding-top:56.25%;overflow:hidden;border-radius:10px;background:#000}
.embed-wrap iframe{position:absolute;inset:0;width:100%;height:100%}

/* ===== Header tweaks ===== */
.site-header{padding-top:env(safe-area-inset-top)}
.hero-title{font-size:clamp(22px,7vw,48px)}

/* ===== Actor slider: snap + touch area ===== */
.actor-track{scroll-snap-type:x mandatory}
.actor-item{scroll-snap-align:start}
.actor-btn{min-width:44px;min-height:36px}

/* ===== Tablet/Mobile spacing ===== */
@media (max-width:1024px){
  .container{padding:32px var(--gap)}
}
@media (max-width:700px){
  .container{padding:28px var(--gap)}
  .section-title{font-size:28px}
  .section-sub{font-size:14px}
  .header-inner{padding:10px var(--gap)}
}


/* Title: show text fallback when image fails */
.section-title{display:flex;align-items:center;gap:12px}
.section-title .title-text{display:none;font-weight:900}
/* About: vertical 3 items on left */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--gap);align-items:start}
.about-left{display:flex;flex-direction:column;gap:10px}
.about-heading{margin:0;font-size:clamp(18px,2.6vw,26px);font-weight:900}
.about-name{font-size:clamp(16px,2.2vw,20px);font-weight:700}
.about-intro{margin:0;line-height:1.8;color:#222}
@media (max-width:900px){ .about{grid-template-columns:1fr} }
/* Actor section green */
.section-actor{background:#e6f6ea}
.section-actor .container{padding-top:40px;padding-bottom:40px}


.about-title-img{display:block;max-width:100%;height:auto;margin:0 0 8px}