/* Theme Name: Arkhe Child Template: arkhe Description: Arkheテーマの子テーマ Author: あなたの名前 Version: 1.0 */ /* ============================== 基本トークン（色・角丸・影） ================================= */ :root{ --c-bg:#e6edf3; /* 背景（淡い青みグレー） */ --c-fg:#2e2e2e; /* 文字色 */ --c-accent:#5ca3c9; /* アクセント（リンク/ボタン） */ --c-accent-ink:#103346; --c-muted:#7a889a; /* 補助テキスト */ --c-border:#e1e8ef; /* 枠線 */ --c-card:#ffffff; /* カード背景 */ --radius-sm:.5rem; --radius-md:.8rem; --radius-xl:1.25rem; --shadow-sm:0 2px 10px rgba(16,40,66,.06); --shadow-md:0 6px 18px rgba(16,40,66,.08); } /* ============================== ベース ================================= */ html{scroll-behavior:smooth;} body{ background:var(--c-bg); color:var(--c-fg); font-family:'Noto Sans JP',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; line-height:1.8; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } img{max-width:100%;height:auto;vertical-align:middle;border-style:none;} a{color:var(--c-accent);text-decoration:none;} a:hover{text-decoration:underline;} /* Arkheの幅を邪魔しない汎用ラッパー */ .container{width:min(1100px,92%);margin-inline:auto;} /* ============================== タイポグラフィ ================================= */ h1,h2,h3{font-family:'Poppins',sans-serif;line-height:1.25;margin:0 0 .6rem;} h1{font-size:clamp(2rem,5vw,3rem);color:var(--c-accent);} h2{font-size:clamp(1.4rem,3.2vw,2rem);} h3{font-size:clamp(1.2rem,2.6vw,1.4rem);} p{margin:.6rem 0;color:var(--c-fg);} small,.muted{color:var(--c-muted);} /* ============================== セクション & レイアウト ================================= */ .section{padding:6rem 0;} .section--tight{padding:3.5rem 0;} .text-center{text-align:center;} .grid{display:grid;gap:1.2rem;} @media (min-width:768px){ .grid--2{grid-template-columns:repeat(2,1fr);} .grid--3{grid-template-columns:repeat(3,1fr);} } /* ============================== カード ================================= */ .card{ background:var(--c-card); border:1px solid var(--c-border); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm); padding:1.4rem; } .card:hover{box-shadow:var(--shadow-md);transition:box-shadow .25s ease;} /* ============================== ボタン ================================= */ .btn{ display:inline-block; padding:.85em 1.2em; border-radius:999px; background:var(--c-accent); color:var(--c-accent-ink); font-weight:600; line-height:1; transition:transform .12s ease,opacity .2s ease; } .btn:hover{opacity:.9;text-decoration:none;} .btn:active{transform:translateY(1px);} .btn--ghost{ background:transparent;border:1px solid var(--c-accent);color:var(--c-accent); } /* ============================== 画像・作品一覧（簡易） ================================= */ .work-thumb{overflow:hidden;border-radius:var(--radius-md);border:1px solid var(--c-border);background:#fff;} .work-thumb img{display:block;width:100%;height:auto;} /* ============================== ヘッダーの軽い読みやすさ向上（Arkhe想定） ※ 子テーマに header.php を置く/置かないどちらでも安全 ================================= */ .l-header{backdrop-filter:saturate(140%) blur(4px);} .is-scrolled .l-header{background:rgba(255,255,255,.7);} /* ============================== フォーム（Contact最小スタイル） ================================= */ input[type="text"],input[type="email"],textarea{ width:100%;padding:.8rem 1rem;border:1px solid var(--c-border); border-radius:var(--radius-sm);background:#fff;outline:none; } input:focus,textarea:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(92,163,201,.15);} textarea{min-height:9rem;} /* ============================== アニメ（JSなしでも見える設計） - デフォルト表示：.reveal は表示（アクセシブル） - JS導入時： を付けるとアニメ有効 ================================= */ .reveal{opacity:1;transform:none;} body.has-reveal .reveal{ opacity:0;transform:translateY(10px); transition:opacity .6s ease, transform .6s ease; } body.has-reveal .reveal.is-in{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){ body.has-reveal .reveal, body.has-reveal .reveal.is-in{transition:none;} } /* ============================== ユーティリティ ================================= */ .mt-0{margin-top:0!important;} .mb-0{margin-bottom:0!important;} .mt-1{margin-top:.5rem!important;} .mb-1{margin-bottom:.5rem!important;} .mt-2{margin-top:1rem!important;} .mb-2{margin-bottom:1rem!important;} .mt-3{margin-top:1.5rem!important;} .mb-3{margin-bottom:1.5rem!important;} .center{margin-inline:auto;} .max-48{max-width:48rem;} .round{border-radius:var(--radius-md);} /* ============================== ヒーロー例（必要なら使う） ================================= */ .hero{padding:6rem 0;text-align:center;} .hero .lead{color:var(--c-muted);max-width:48rem;margin:.5rem auto 0;} /* ============================== Hero visual version ================================= */ .hero--visual{ position:relative; min-height:90vh; display:flex; align-items:center; justify-content:center; color:#fff; text-align:center; background:url('https://placehold.jp/1500x1000.png') center/cover no-repeat; } .hero--visual::before{ content:""; position:absolute; inset:0; background:rgba(16,30,45,.45); /* 半透明オーバーレイ（暗めトーン） */ } .hero__inner{ position:relative; z-index:1; max-width:700px; margin:auto; padding:0 1rem; } .hero--visual h1{ color:#fff; font-size:clamp(2.4rem,6vw,3.6rem); margin-bottom:.8rem; } .hero--visual .lead{ color:#e9eef3; font-size:1.1rem; } /* プリロード版：画像が読めたら .is-hero-ready で発火 */ .hero--visual{ opacity:0; transform:translateY(6px); } .is-hero-ready .hero--visual{ animation:heroIn .9s ease-out .05s forwards; } .hero__inner{ opacity:0; transform:translateY(4px); } .is-hero-ready .hero__inner{ animation:heroText .9s ease-out .25s forwards; } @keyframes heroIn{ to{ opacity:1; transform:none; } } @keyframes heroText{ to{ opacity:1; transform:none; } }