/*
Theme Name: 祷造園 INORI ZOEN
Theme URI: https://inorizoen.site
Author: 祷造園
Description: 京都市の造園「祷造園」のオリジナルテーマ。デザイン・余白・配置・レスポンシブは制作時のHTML/CSSをそのまま使用しています。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: inori-zoen
*/

/* ============================================================
   1. ベーススタイル（制作時のHTMLから移植・変更なし）
   ============================================================ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;font-family:'Noto Sans JP',sans-serif;font-weight:400;font-size:clamp(15px,1.05vw,17px);line-height:1.9;color:var(--sumi);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;word-break:auto-phrase;line-break:strict;text-wrap:pretty;}
:root{
    --paper:#F2EEE4;--paper-2:#E8E2D3;--paper-hi:#FAF8F1;
    --sumi:#1B1A16;--sumi-soft:#2A2822;
    --ink-70:rgba(27,26,22,.66);--ink-45:rgba(27,26,22,.42);
    --paper-70:rgba(242,238,228,.72);--paper-45:rgba(242,238,228,.45);
    --midori:#22362A;--midori-2:#33503E;
    --beige:#C7BEAC;--line:rgba(27,26,22,.14);--line-lite:rgba(242,238,228,.16);
    --accent:#A8492E;
  }
img,svg{display:block;}
[data-hero] p{text-wrap:balance;}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--sumi);}
::selection{background:var(--midori);color:var(--paper);}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px;}
h1,h2,h3,p,figure,blockquote,ol,ul{margin:0;}
button,input,textarea,select{font-family:inherit;}
@keyframes heroKen{from{transform:scale(1.0);}to{transform:scale(1.09);}}
@keyframes loaderSeq{0%{opacity:1;}68%{opacity:1;}100%{opacity:0;visibility:hidden;}}
@keyframes loaderBar{0%{transform:scaleX(0);}62%{transform:scaleX(1);}100%{transform:scaleX(1);}}
@keyframes loaderFadeIn{0%{opacity:0;transform:translateY(8px);}28%{opacity:0;transform:translateY(8px);}62%{opacity:1;transform:translateY(0);}100%{opacity:1;}}
@keyframes scrollCue{0%{transform:translateY(-16px);opacity:0;}30%{opacity:1;}100%{transform:translateY(52px);opacity:0;}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}
[data-burger]{display:none;}
@media (max-width:900px){
    [data-desknav]{display:none!important;}
    [data-burger]{display:flex!important;}
    [data-grid2]{grid-template-columns:1fr!important;}
    [data-svc]{grid-template-columns:1fr!important;gap:22px!important;margin:44px auto!important;}
    [data-svc] figure{order:-1!important;}
    [data-sp-static]{position:static!important;inset:auto!important;transform:none!important;width:100%!important;max-width:100%!important;margin:0 0 18px 0!important;}
    [data-collage]{min-height:0!important;display:flex!important;flex-direction:column!important;}
    [data-sp-hide]{display:none!important;}
  }
@media (max-width:560px){
    [data-ctabtn]{display:flex!important;width:100%!important;justify-content:center!important;padding:18px 20px!important;font-size:.86rem!important;letter-spacing:.08em!important;}
    [data-intro]{padding-left:22px!important;padding-right:22px!important;}
    [data-cc]{font-size:clamp(1.45rem,6.2vw,2.05rem)!important;letter-spacing:.01em!important;line-height:1.65!important;}
    [data-cc-lg]{font-size:clamp(1.5rem,6.6vw,2.2rem)!important;letter-spacing:.02em!important;}
    [data-hero] h1 span{font-size:15vw!important;}
    [data-eyebrow] span{font-size:.8rem!important;letter-spacing:.1em!important;}
    [data-preview-toggle]{display:none!important;}
    [data-nb]{white-space:normal!important;}
  }
@media (max-height:640px){
    [data-sp-hide]{display:none!important;}
  }
body{margin:0;font-family:'Noto Sans JP',sans-serif;font-weight:400;font-size:clamp(15px,1.05vw,16px);line-height:1.85;color:var(--sumi);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;word-break:auto-phrase;line-break:strict;text-wrap:pretty;}
:root{
    --paper:#F2EEE4;--paper-2:#E8E2D3;--paper-hi:#FAF8F1;
    --sumi:#1B1A16;--sumi-soft:#2A2822;
    --ink-70:rgba(27,26,22,.7);--ink-45:rgba(27,26,22,.5);
    --paper-70:rgba(242,238,228,.76);--paper-45:rgba(242,238,228,.5);
    --midori:#22362A;--midori-2:#33503E;
    --beige:#C7BEAC;--line:rgba(27,26,22,.14);--line-lite:rgba(242,238,228,.16);
    --accent:#A8492E;
  }
h1,h2,h3,h4,p,figure,blockquote,ol,ul,dl,dd{margin:0;}
@media (max-width:900px){
    [data-desknav]{display:none!important;}
    [data-burger]{display:flex!important;}
    [data-grid2]{grid-template-columns:1fr!important;}
    [data-grid3]{grid-template-columns:1fr!important;}
    [data-svc]{grid-template-columns:1fr!important;gap:22px!important;margin:44px auto!important;}
    [data-svc] figure{order:-1!important;}
    [data-sp-static]{position:static!important;inset:auto!important;transform:none!important;width:100%!important;max-width:100%!important;margin:0 0 18px 0!important;}
    [data-collage]{min-height:0!important;display:flex!important;flex-direction:column!important;}
    [data-sp-hide]{display:none!important;}
    [data-bleedpad]{padding-left:22px!important;padding-right:22px!important;}
  }
@media (max-width:560px){
    [data-ctabtn]{display:flex!important;width:100%!important;justify-content:center!important;padding:18px 20px!important;font-size:.86rem!important;letter-spacing:.08em!important;}
    [data-cc]{font-size:clamp(1.45rem,6.2vw,2.05rem)!important;letter-spacing:.01em!important;line-height:1.65!important;}
    [data-nb]{white-space:normal!important;}
    [data-preview-toggle]{display:none!important;}
    [data-worklist]{grid-template-columns:1fr!important;}
    [data-workspan]{grid-column:auto!important;}
  }

/* ============================================================
   2. ホバー／フォーカス状態
   制作時はインラインで指定していたものをクラス化しています。
   インラインstyleより優先させるため !important を付与。
   ============================================================ */
.ih1:focus{left:8px !important;top:8px !important}
.ih2:hover{opacity:.5 !important}
.ih3:hover{background:var(--paper) !important;border-color:var(--paper) !important;color:var(--sumi) !important}
.ih4:hover{color:var(--accent) !important}
.ih5:hover{opacity:.6 !important}
.ih6:hover{background:var(--accent) !important}
.ih7:hover{color:var(--accent) !important;border-color:var(--accent) !important}
.ih8:hover{background:var(--accent) !important;color:var(--paper) !important}
.ih9:hover{color:var(--beige) !important;border-color:var(--beige) !important}
.ih10:hover{color:var(--paper) !important}
.ih11:hover{color:var(--beige) !important}
.ih12:hover{opacity:.55 !important}
.ih13:hover{background:var(--beige) !important;color:var(--sumi) !important}
.ih14:hover{background:var(--beige) !important}
.ih15:focus{border-color:var(--paper) !important;background:rgba(242,238,228,.1) !important}
.ih16:hover{background:rgba(242,238,228,.08) !important;border-color:var(--beige) !important}
.ih17:hover{background:var(--paper) !important;color:var(--sumi) !important}

/* WordPress 管理バー表示時に固定ヘッダーが隠れないように */
.admin-bar [data-header]{top:32px;}
@media (max-width:782px){ .admin-bar [data-header]{top:46px;} }

/* 現在開いているページのナビ表示 */
[data-navlink][data-current]{border-bottom:2px solid var(--accent);}
[data-navlink][data-cta][data-current]{border-bottom:0;box-shadow:0 0 0 3px rgba(242,238,228,.28);}

/* ---- スマートフォン最適化 ---- */
@media (max-width:560px){
  [data-menu]{justify-content:flex-start!important;padding:clamp(76px,20vw,96px) 24px 36px!important;}
  [data-menu] nav{gap:0!important;}
  [data-menu] nav a{font-size:1.55rem!important;line-height:1.2!important;gap:12px!important;align-items:center!important;padding:15px 0!important;min-height:0!important;border-bottom:1px solid var(--line);}
  [data-menu] nav a > span:first-child{font-size:.66rem!important;letter-spacing:.12em!important;flex:none;width:1.8em;}
  [data-menu] nav a > span:last-child{font-size:.78rem!important;letter-spacing:.04em!important;margin-left:auto;white-space:nowrap;color:var(--ink-45)!important;}
  [data-menu] > div:last-child{margin-top:26px!important;font-size:.84rem!important;line-height:1.9!important;}
  [data-menu] > div:last-child a[href^="tel:"]{font-size:1.3rem!important;}
  [data-hero]{min-height:clamp(290px,42vh,400px)!important;}
  [data-svc] figure,[data-collage] figure{aspect-ratio:4/3!important;}
  [data-worklist] figure{aspect-ratio:3/2!important;}
  [data-header]{padding:10px 18px!important;}
}
.ih18:hover{color:var(--beige);}