/*
Theme Name: Log Architect Design
Theme URI: https://example.com/
Author: .Log architect design
Description: 設計事務所向けのミニマルな白基調テーマ。NEWS / BLOG / WORKS / ABOUT / VISION / CONTACT 構成。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: log-architect
*/

:root{
  --bg:#ffffff; --ink:#222222; --sub:#8a8a8a; --line:#e8e8e6; --soft:#f5f5f3;
  --sans:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --latin:"Jost","Helvetica Neue",Arial,sans-serif;
  --wrap:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;line-height:2;font-size:15px;letter-spacing:.06em;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:opacity .25s}
a:hover{opacity:.55}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.screen-reader-text{position:absolute;left:-9999px}

/* header: 右上にInstagramと三本線のみ。屋号はメインビジュアル中央 */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);color:var(--ink)}
.site-header .wrap{display:flex;align-items:center;justify-content:flex-end;gap:14px;height:72px;max-width:none;padding:0 22px;position:relative;z-index:61}
.hd-ig{position:relative;z-index:62;display:flex;align-items:center;justify-content:center;width:40px;height:40px}
.nav-toggle{z-index:62;background:none;border:0;width:40px;height:40px;cursor:pointer;padding:0;position:relative;color:inherit}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:6px;right:6px;height:1px;background:currentColor;transition:transform .25s,opacity .25s}
.nav-toggle span{top:19px}
.nav-toggle span::before{top:-8px;left:0;right:0}
.nav-toggle span::after{top:8px;left:0;right:0}
.nav-open .nav-toggle span{background:transparent}
.nav-open .nav-toggle span::before{transform:translateY(8px) rotate(45deg)}
.nav-open .nav-toggle span::after{transform:translateY(-8px) rotate(-45deg)}
.nav{position:fixed;inset:0;z-index:60;display:none}
.nav-open .nav{display:flex}
.nav-open{overflow:hidden}
.nav-open .site-header,.nav-open.home .site-header{color:var(--ink)}
.nav-panel{width:78%;max-width:440px;height:100%;overflow-y:auto;background:#fff;color:var(--ink)}
.nav-dim{flex:1;background:rgba(255,255,255,.65)}
.nav-brand{display:flex;align-items:center;justify-content:center;height:150px;padding:0 24px;font-family:var(--latin);font-weight:300;font-size:20px;letter-spacing:.12em;text-align:center}
.nav-brand img{max-height:56px;max-width:100%;width:auto}
.nav ul{list-style:none;margin:0;padding:0;border-bottom:1px solid #444}
.nav li{margin:0;border-top:1px solid #444}
.nav a{display:block;color:var(--ink);padding:20px 32px;font-family:var(--latin);font-weight:300;font-size:15px;letter-spacing:.16em}
.nav-sns a{border-top:1px solid #444}
.nav-sns a:first-child{border-top:0}
.nav-sns a:last-child{border-bottom:1px solid #444}
.home .site-header{position:absolute;left:0;right:0;background:transparent}
.home:not(.nav-open) .site-header{color:#fff}
.home.no-hero-img:not(.nav-open) .site-header{color:var(--ink)}

/* hero */
.hero{position:relative;height:100vh;height:100svh;min-height:480px;background:var(--soft);overflow:hidden}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.6s ease}
.hero-slide.is-active{opacity:1}
.hero-empty{position:absolute;inset:0;background:linear-gradient(135deg,#f3f3f1,#e4e4e1)}
.hero-caption{position:absolute;left:0;right:0;bottom:44px;color:#fff;text-shadow:0 0 18px rgba(0,0,0,.35)}
.hero-caption span{font-family:var(--latin);font-weight:300;font-size:clamp(22px,3.4vw,38px);letter-spacing:.2em}
.no-img .hero-caption{color:var(--ink);text-shadow:none}

.hero-logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;color:#fff;text-shadow:0 0 22px rgba(0,0,0,.35)}
.hero-logo img{max-width:70%;height:auto}
.hero-logo span{font-family:var(--latin);font-weight:300;font-size:clamp(26px,4.6vw,54px);letter-spacing:.22em}
.hero.no-img .hero-logo{color:var(--ink);text-shadow:none}

.hero--band{height:56vh;min-height:300px}

/* sections */
.lead{padding:110px 0;text-align:center}
.lead p{margin:0 auto;max-width:620px;font-size:16px;line-height:2.6;font-weight:300}
.section{padding:70px 0;border-top:1px solid var(--line)}
.section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:34px}
.section-head h2,.page-title{font-family:var(--latin);font-weight:300;font-size:26px;letter-spacing:.22em;margin:0;text-transform:lowercase}
.more{font-family:var(--latin);font-size:13px;letter-spacing:.18em;color:var(--sub)}
.list{list-style:none;margin:0;padding:0}
.list li{border-bottom:1px solid var(--line)}
.list a{display:flex;gap:28px;padding:16px 0}
.list time{font-family:var(--latin);color:var(--sub);min-width:96px;font-size:14px}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px;align-items:start}
.card-img{aspect-ratio:3/2;background:var(--soft);overflow:hidden}
.card-img.is-empty{aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;color:#d3d3cf;font-family:var(--latin);font-weight:300;font-size:20px;letter-spacing:.2em}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card a:hover{opacity:1}
.card a:hover img{transform:scale(1.03)}
.card h3{font-weight:400;font-size:15px;color:#666;text-align:center;margin:16px 0 0;line-height:1.8}

/* pages */
.page-main{padding:90px 0 120px}
.page-title{margin-bottom:8px}
.page-sub{color:var(--sub);font-size:14px;margin:0 0 48px}
.entry{max-width:720px}
.entry h2{font-weight:500;font-size:20px;margin:2.4em 0 .8em}
.entry h3{font-weight:500;font-size:17px;margin:2em 0 .6em}
.entry p{margin:0 0 1.6em}
.entry table{border-collapse:collapse;width:100%;margin:1.6em 0}
.entry th,.entry td{padding:14px 8px;border-bottom:1px solid var(--line);text-align:left;font-weight:400;vertical-align:top}
.entry th{width:28%;color:var(--sub)}
.post-meta{font-family:var(--latin);color:var(--sub);font-size:14px;margin-bottom:10px}
.single-title{font-weight:400;font-size:24px;line-height:1.7;margin:0 0 36px}
.single-thumb{margin-bottom:40px}
.pager{display:flex;justify-content:space-between;margin-top:80px;padding-top:24px;border-top:1px solid var(--line);font-size:14px}
.pagination{margin-top:60px;font-family:var(--latin)}
.pagination .page-numbers{display:inline-block;padding:0 12px;color:var(--sub)}
.pagination .current{color:var(--ink);border-bottom:1px solid var(--ink)}

/* 写真スライダー（投稿内の最初のギャラリー） */
.lad-slider-wrap{position:relative;margin:0 0 48px}
.entry .wp-block-gallery.lad-slider{display:flex!important;flex-wrap:nowrap!important;gap:0!important;margin:0!important;overflow-x:auto;overflow-y:hidden;align-items:flex-start!important;transition:height .3s ease;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;background:var(--soft)}
.lad-slider::-webkit-scrollbar{display:none}
.entry .lad-slider figure.wp-block-image{display:block!important;flex:0 0 100%!important;width:100%!important;max-width:100%!important;height:auto!important;margin:0!important;scroll-snap-align:start}
.lad-slider a{display:block}
.lad-slider img{display:block;flex:none!important;width:100%!important;height:auto!important;max-height:78vh;object-fit:contain!important;margin:0 auto}
.lad-slider figcaption{display:none!important}
.lad-arrow{position:absolute;top:calc(50% - 14px);transform:translateY(-50%);width:48px;height:64px;border:0;background:rgba(255,255,255,.7);cursor:pointer;font-size:0;z-index:2}
.lad-arrow::before{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-top:1px solid var(--ink);border-right:1px solid var(--ink)}
.lad-prev{left:0}.lad-prev::before{transform:translate(-30%,-50%) rotate(-135deg)}
.lad-next{right:0}.lad-next::before{transform:translate(-70%,-50%) rotate(45deg)}
.lad-arrow:hover{background:#fff}
.lad-count{margin-top:10px;text-align:right;font-family:var(--latin);font-size:13px;color:var(--sub);letter-spacing:.14em}
.single .entry{max-width:none}
.single .entry>*:not(.lad-slider-wrap){max-width:720px}
@media (max-width:780px){.lad-arrow{width:36px;height:48px}}

/* 一覧ページの見出し（中央寄せ） */
.category .page-title,.category .page-sub{text-align:center}
.category .page-title{margin-bottom:6px}
.category .page-title::before{content:"／";margin-right:.7em;font-weight:200}
.category .page-title::after{content:"／";margin-left:.7em;font-weight:200}
.category .page-sub{margin-bottom:64px}
.category .grid{gap:48px 40px}
.category .pagination{text-align:center}

/* form */
.lad-form label{display:block;margin-bottom:26px;font-size:14px}
.lad-form input[type=text],.lad-form input[type=email],.lad-form textarea{width:100%;margin-top:8px;padding:12px 0;border:0;border-bottom:1px solid #bbb;background:transparent;font:inherit;border-radius:0}
.lad-form textarea{height:180px;border:1px solid #bbb;padding:12px}
.lad-form input:focus,.lad-form textarea:focus{outline:0;border-color:var(--ink)}
.lad-form button{font-family:var(--latin);letter-spacing:.2em;background:var(--ink);color:#fff;border:0;padding:16px 56px;cursor:pointer;font-size:14px}
.lad-form button:hover{opacity:.7}
.lad-hp{position:absolute;left:-9999px}
.lad-msg{padding:16px 20px;background:var(--soft);margin-bottom:30px}

/* footer */
.site-footer{border-top:1px solid var(--line);padding:70px 0 40px;font-size:13px;color:#555}
.footer-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.footer-name{font-family:var(--latin);font-size:17px;letter-spacing:.12em;color:var(--ink);margin-bottom:14px}
.footer-links{display:flex;gap:26px;font-family:var(--latin);letter-spacing:.16em}
.copy{margin-top:56px;font-family:var(--latin);color:var(--sub);font-size:12px}

@media (max-width:780px){
  body{font-size:14px}
  .lead{padding:70px 0}
  .grid{grid-template-columns:1fr 1fr;gap:28px 16px}
  .list a{flex-direction:column;gap:0}
  .page-main{padding:56px 0 80px}
}
@media (max-width:1024px){
  .card-img{aspect-ratio:auto}
  .card-img img{height:auto;object-fit:initial}
}
@media (max-width:600px){.grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}


/* PC（1025px以上）：左にロゴ、右にメニューを常時表示。三本線なし */
@media (min-width:1025px){
  .site-header .wrap{padding:0 40px;gap:0}
  .nav-toggle{display:none}
  .site-header .nav{position:static;inset:auto;z-index:auto;display:block;background:none}
  .nav-panel{width:auto;max-width:none;height:auto;overflow:visible;background:none;color:inherit}
  .nav-brand,.nav-sns,.nav-dim{display:none}
  .nav ul{display:flex;gap:34px;text-align:left;border:0}
  .nav li{border:0}
  .nav a{color:inherit;padding:0;font-size:13px;letter-spacing:.18em;text-transform:lowercase}
  .hd-ig{margin-left:34px}
}