/*
Theme Name: KODOMOTABI Mobile
Theme URI: https://kodomotabi.com/
Author: KODOMOTABI
Description: 子連れ旅行の意思決定支援サイト向け、スマホ最優先の独自WordPressテーマ。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: kodomotabi
*/

:root{
  --kt-navy:#0d2b55;
  --kt-navy-deep:#062247;
  --kt-gold:#c98b2c;
  --kt-gold-soft:#e5c17c;
  --kt-green:#84bcaf;
  --kt-text:#163055;
  --kt-muted:#64748b;
  --kt-line:#e8edf4;
  --kt-bg:#f7f9fc;
  --kt-white:#fff;
  --kt-radius:18px;
  --kt-shadow:0 10px 30px rgba(13,43,85,.08);
  --kt-font-serif:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --kt-font-sans:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--kt-bg);color:var(--kt-text);font-family:var(--kt-font-sans);line-height:1.58;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button,input,textarea,select{font:inherit}
.kt-container{width:min(100% - 20px,1120px);margin-inline:auto}
.kt-section{padding:20px 0}
.kt-section-title{margin:0 0 12px;text-align:center;font-family:var(--kt-font-serif);font-size:20px;letter-spacing:.06em;color:var(--kt-navy)}
.kt-gold-number{color:var(--kt-gold)}
.kt-eyebrow{font-size:10px;letter-spacing:.14em;color:var(--kt-gold);font-weight:700}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(13,43,85,.08)}
.header-inner{height:52px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.site-branding{display:flex;align-items:center;min-width:0}
.custom-logo-link img{max-height:36px;width:auto}
.site-title{font-family:var(--kt-font-serif);font-size:18px;letter-spacing:.15em;color:var(--kt-navy);white-space:nowrap}
.menu-toggle{width:36px;height:36px;border:0;border-radius:12px;background:#fff;box-shadow:0 4px 14px rgba(13,43,85,.08);display:grid;place-items:center;color:var(--kt-navy)}
.menu-toggle span,.menu-toggle:before,.menu-toggle:after{content:"";display:block;width:18px;height:2px;background:currentColor;border-radius:3px;transition:.2s}
.menu-toggle span{margin:4px 0}
.primary-nav{display:none;position:absolute;top:52px;left:10px;right:10px;background:#fff;border:1px solid var(--kt-line);border-radius:13px;box-shadow:var(--kt-shadow);padding:7px}
.primary-nav.is-open{display:block}
.primary-nav ul{list-style:none;margin:0;padding:0}
.primary-nav a{display:block;padding:9px 11px;border-radius:8px;font-weight:700}
.primary-nav a:hover{background:var(--kt-bg)}

/* Hero */
.kt-hero{position:relative;overflow:hidden;background:linear-gradient(145deg,#fff 0%,#f7fbff 56%,#eef5fb 100%);border-bottom:1px solid var(--kt-line)}
.kt-hero:after{content:"";position:absolute;right:-80px;top:100px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(132,188,175,.23),rgba(132,188,175,0) 70%)}
.kt-hero-inner{position:relative;z-index:1;padding:22px 0 18px}
.kt-hero-copy{max-width:640px}
.kt-hero h1{margin:7px 0 8px;font-family:var(--kt-font-serif);font-size:34px;line-height:1.2;letter-spacing:.08em;color:var(--kt-navy)}
.kt-hero-lead{margin:0 0 11px;font-family:var(--kt-font-serif);font-size:17px;line-height:1.5;color:var(--kt-navy)}
.kt-hero-lead strong{color:var(--kt-gold);font-weight:600}
.kt-hero-desc{font-size:12px;color:#4a617e;margin:0 0 13px}
.kt-hero-actions{display:grid;grid-template-columns:1fr;gap:7px}
.kt-button{min-height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:9px;padding:0 17px;font-weight:700;letter-spacing:.04em;transition:.2s}
.kt-button--primary{background:var(--kt-navy-deep);color:#fff;box-shadow:0 10px 25px rgba(6,34,71,.2)}
.kt-button--ghost{background:#fff;border:1px solid var(--kt-navy);color:var(--kt-navy)}
.kt-hero-visual{margin-top:14px;position:relative;border-radius:17px;overflow:hidden;min-height:190px;background:linear-gradient(135deg,#dfeaf4,#f8fbfd);box-shadow:var(--kt-shadow)}
.kt-hero-visual img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.kt-hero-placeholder{min-height:190px;display:grid;place-items:center;text-align:center;padding:20px;color:#6c819c;font-size:11px}
.kt-badge{position:absolute;right:8px;bottom:8px;width:94px;height:94px;border-radius:50%;background:var(--kt-navy);color:#fff;border:2px solid var(--kt-gold);display:grid;place-items:center;text-align:center;padding:10px;font-family:var(--kt-font-serif);font-size:12px;line-height:1.4;transform:scale(.67);transform-origin:right bottom}

/* Decision steps */

.kt-pale-gold-section{background:#fffdf8}
.kt-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.kt-step{position:relative;background:#fff;border:1px solid var(--kt-line);border-radius:13px;padding:9px 4px;box-shadow:0 7px 20px rgba(13,43,85,.05);text-align:center}
.kt-step-num{font-family:var(--kt-font-serif);font-size:11px;color:var(--kt-gold)}
.kt-step:not(:last-child)::after{content:"＞";position:absolute;top:50%;right:-8px;transform:translate(50%,-50%);z-index:2;color:var(--kt-gold);font-family:var(--kt-font-serif);font-size:12px;font-weight:700}
.kt-step-icon{width:32px;height:32px;border-radius:9px;background:#f3f6fb;color:var(--kt-navy);display:grid;place-items:center;margin:7px auto;font-size:17px}
.kt-step h3{margin:0;font-family:var(--kt-font-serif);font-size:13px;color:var(--kt-navy)}
.kt-step p{margin:0;font-size:11px;color:var(--kt-muted);line-height:1.45}
.kt-wide-button{margin-top:9px}
.kt-wide-button .kt-button--ghost{background:var(--kt-navy);border:2px solid var(--kt-gold);color:#fff;font-family:var(--kt-font-serif)}

/* Metrics */
.kt-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kt-metric{background:#fff;border:1px solid var(--kt-line);border-radius:16px;padding:15px;text-align:center}
.kt-metric strong{display:block;font-family:var(--kt-font-serif);font-size:20px;color:var(--kt-navy);line-height:1.2}
.kt-metric span{font-size:12px;color:var(--kt-muted)}

/* Promise */
.kt-promise{background:linear-gradient(135deg,#f6f9fd,#eef5fb);border:1px solid #e4ebf4;border-radius:16px;padding:15px}
.kt-promise h2{margin:0 0 10px;font-family:var(--kt-font-serif);font-size:19px;line-height:1.45}
.kt-promise p{margin:0;color:var(--kt-navy);font-size:12px}
.kt-promise strong{color:var(--kt-gold)}

/* Principles */
.kt-principles-section{background:#fffdf8}
.kt-principles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.kt-principle{background:#fff;border-radius:13px;padding:11px;border:1px solid var(--kt-line)}
.kt-principle .icon{font-size:20px;color:var(--kt-navy)}
.kt-principle h3{font-family:var(--kt-font-serif);font-size:14px;margin:5px 0 3px}
.kt-principle p{font-size:11px;color:var(--kt-muted);margin:0}

/* Content */
.site-main article{background:#fff;border-radius:11px;padding:15px;margin:14px auto;box-shadow:var(--kt-shadow)}
.entry-title{font-family:var(--kt-font-serif);color:var(--kt-navy)}
.entry-content h2,.entry-content h3{font-family:var(--kt-font-serif);color:var(--kt-navy)}

/* Footer + mobile app nav */
.site-footer{background:var(--kt-navy-deep);color:#fff;padding:22px 0 76px;text-align:center}
.footer-brand{font-family:var(--kt-font-serif);letter-spacing:.18em;font-size:15px;color:var(--kt-gold)}
.footer-copy{font-size:10px;opacity:.72;margin-top:6px}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin-top:14px;font-size:10px}
.footer-links a{color:#fff}
.kt-app-nav{position:fixed;z-index:40;left:8px;right:8px;bottom:8px;height:56px;background:rgba(255,255,255,.96);backdrop-filter:blur(18px);border:1px solid rgba(13,43,85,.1);border-radius:16px;box-shadow:0 14px 35px rgba(13,43,85,.18);display:grid;grid-template-columns:repeat(3,1fr);padding:5px}
.kt-app-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:9px;color:#6b7c92;border-radius:11px}
.kt-app-nav a:first-child{background:#edf3f9;color:var(--kt-navy);font-weight:700}
.kt-app-nav b{font-size:16px;line-height:1}

@media(min-width:760px){
  .kt-container{width:min(100% - 48px,1120px)}
  .header-inner{height:82px}
  .menu-toggle{display:none}
  .primary-nav{display:block!important;position:static;background:transparent;border:0;box-shadow:none;padding:0}
  .primary-nav ul{display:flex;gap:14px}
  .primary-nav a{padding:8px 10px;font-size:14px}
  .kt-hero-inner{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:36px;padding:54px 0}
  .kt-hero h1{font-size:56px}
  .kt-hero-visual{margin:0;min-height:500px}
  .kt-hero-placeholder{min-height:500px}
  .kt-hero-actions{grid-template-columns:240px 200px}
  .kt-section{padding:50px 0}
  .kt-steps{grid-template-columns:repeat(4,1fr)}
  .kt-metrics{grid-template-columns:repeat(4,1fr)}
  .kt-principles{grid-template-columns:repeat(4,1fr)}
  .kt-app-nav{display:none}
  .site-footer{padding-bottom:36px}
}