/*
Theme Name: SUN Moving Center
Theme URI: https://sun-moving.jp/
Author: SUN Moving Center
Description: 株式会社SUN引越センター オリジナルWordPressテーマ。既存HTMLサイトをWordPressテーマ化したものです。
Version: 1.7.2
Text Domain: sun-moving-center
*/


/* ======================================================================
   1. 共通スタイル（全ページ共通：ヘッダー・ヒーロー・カラー変数など）
   ====================================================================== */
  :root{
    --sky-700:#0E7FB0;
    --sky-600:#159FDB;
    --sky-500:#4CC6F0;
    --sky-400:#7FDAF7;
    --sky-300:#B3E9FB;
    --sky-100:#EAFAFF;
    --sky-050:#F5FCFF;

    --orange-600:#F26E00;
    --orange-500:#FF9500;
    --orange-400:#FFB443;
    --orange-100:#FFEFD9;

    --white:#ffffff;
    --ink-900:#2E2620;
    --ink-700:#5E5044;
    --ink-500:#8A7C6E;

    --font-display:'Shippori Antique B1', serif;
    --font-body:'Zen Kaku Gothic New', sans-serif;
    --font-mono:'JetBrains Mono', monospace;

    --maxw:1180px;
    --edge: clamp(20px, 5vw, 64px);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }

  body{
    font-family:var(--font-body);
    color:var(--ink-900);
    background:var(--sky-050);
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  img,svg{display:block; max-width:100%;}
  a{color:inherit; text-decoration:none;}
  ul,ol{list-style:none;}

  .wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--edge); padding-right:var(--edge);}

  .eyebrow{
    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    font-weight:700;
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--orange-600);
  }
  .eyebrow::before{
    content:"";
    width:22px; height:2px;
    background:currentColor;
    border-radius:2px;
    display:inline-block;
  }

  h1,h2,h3{font-family:var(--font-display); font-weight:400; letter-spacing:0.01em;}

  /* ============ MASCOT ============ */
  .mascot-img{
    -webkit-user-drag:none;
    user-select:none;
    image-rendering:-webkit-optimize-contrast;
  }
  .bob{ animation:bob 4.5s ease-in-out infinite; }
  @keyframes bob{
    0%,100%{transform:translateY(0) rotate(-1.5deg);}
    50%{transform:translateY(-16px) rotate(1.5deg);}
  }

  /* ============ HEADER ============ */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:16px var(--edge);
    display:flex; align-items:center; justify-content:space-between;
    background:rgba(255,255,255,0.97);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    isolation:isolate;
    transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
    border-bottom:1px solid rgba(15,23,42,.05);
  }
  header.scrolled{
    background:rgba(255,255,255,0.94);
    padding:10px var(--edge);
    box-shadow:0 8px 30px rgba(76,198,240,0.18);
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    color:var(--ink-900);
    font-family:var(--font-display);
    font-size:1.15rem;
  }
  .brand .sunmark{
    width:38px;height:38px;border-radius:50%;
    background:var(--white);
    box-shadow:0 4px 14px rgba(255,149,0,0.35);
    flex-shrink:0;
    overflow:hidden;
    border:2px solid var(--orange-400);
  }
  .brand .sunmark img{width:100%; height:100%; object-fit:cover; transform:scale(1.5) translateY(6%);}
  .brand small{
    display:block; font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.15em; color:var(--sky-600); font-weight:700;
  }
  nav.desktop-nav{display:flex; gap:26px; flex-wrap:nowrap;}
  nav.desktop-nav a{
    color:var(--ink-700); font-size:0.86rem; letter-spacing:0.03em; position:relative; padding:4px 0; font-weight:500;
    white-space:nowrap;
  }
  nav.desktop-nav a::after{
    content:""; position:absolute; left:0; bottom:0; width:0%; height:2px; background:var(--orange-500); border-radius:2px;
    transition:width .3s ease;
  }
  nav.desktop-nav a:hover::after{width:100%;}
  .header-cta{
    display:flex; align-items:center; gap:14px;
  }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:12px 26px;
    border-radius:100px;
    font-size:0.85rem; font-weight:700; letter-spacing:0.03em;
    border:2px solid transparent;
    cursor:pointer;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
    white-space:nowrap;
    font-family:var(--font-body);
  }
  .btn-primary{
    background:linear-gradient(120deg, var(--orange-500), var(--orange-600));
    color:var(--white);
    box-shadow:0 10px 24px rgba(255,149,0,0.35);
  }
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(255,149,0,0.45);}
  .btn-ghost{
    background:var(--white); border-color:var(--sky-300); color:var(--sky-700);
  }
  .btn-ghost:hover{background:var(--sky-100); border-color:var(--sky-500);}
  .btn-sky{
    background:linear-gradient(120deg, var(--sky-500), var(--sky-600));
    color:var(--white);
    box-shadow:0 10px 24px rgba(21,159,219,0.35);
  }
  .btn-sky:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(21,159,219,0.45);}

  .menu-toggle{
    display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;
  }
  .menu-toggle span{width:24px; height:2px; background:var(--ink-900); border-radius:2px; display:block;}

  /* ============ HERO ============ */
  .hero{
    position:relative;
    min-height:100vh;
    background:linear-gradient(180deg, var(--sky-500) 0%, var(--sky-300) 55%, var(--sky-100) 100%);
    overflow:hidden;
    display:flex; flex-direction:column; justify-content:center;
    padding-top:120px;
    padding-bottom:60px;
  }
  .cloud{
    position:absolute;
    background:var(--white);
    border-radius:100px;
    opacity:0.9;
    filter:drop-shadow(0 6px 14px rgba(21,159,219,0.15));
  }
  .cloud::before, .cloud::after{
    content:""; position:absolute; background:var(--white); border-radius:50%;
  }
  .c1{width:110px; height:36px; top:6%; left:6%;}
  .c1::before{width:64px; height:64px; top:-34px; left:16px;}
  .c1::after{width:44px; height:44px; top:-22px; left:76px;}
  .c2{width:100px; height:36px; top:24%; right:12%; opacity:0.75;}
  .c2::before{width:50px; height:50px; top:-26px; left:10px;}
  .c2::after{width:34px; height:34px; top:-16px; left:56px;}
  .c3{width:180px; height:54px; bottom:16%; left:4%; opacity:0.7;}
  .c3::before{width:74px; height:74px; top:-40px; left:24px;}
  .c3::after{width:50px; height:50px; top:-24px; left:104px;}
  .c4{width:90px; height:32px; bottom:30%; right:6%; opacity:0.6;}
  .c4::before{width:44px; height:44px; top:-22px; left:10px;}
  .c4::after{width:30px; height:30px; top:-14px; left:48px;}
  .float-slow{animation:floatx 22s ease-in-out infinite;}
  .float-slow2{animation:floatx 28s ease-in-out infinite reverse;}
  @keyframes floatx{
    0%,100%{transform:translateX(0);}
    50%{transform:translateX(28px);}
  }

  .hero-content{
    position:relative; z-index:2;
    max-width:var(--maxw); margin:0 auto; width:100%;
    padding-left:var(--edge); padding-right:var(--edge);
    display:grid; grid-template-columns:1.1fr 0.9fr; align-items:center; gap:20px;
  }
  .hero-text, .hero-visual{min-width:0;}
  .hero-text .eyebrow{margin-bottom:20px;}
  .hero-title{
    color:var(--ink-900);
    font-size:clamp(2.2rem, 4.6vw, 3.6rem);
    line-height:1.3;
    margin-bottom:22px;
    text-shadow:0 2px 0 rgba(255,255,255,0.5);
  }
  .hero-title em{
    font-style:normal;
    color:var(--orange-600);
  }
  .hero-sub{
    color:var(--ink-700);
    font-size:1.03rem;
    max-width:520px;
    margin-bottom:36px;
  }
  .hero-actions{display:flex; gap:16px; flex-wrap:wrap;}
  .hero-visual{position:relative; display:flex; align-items:center; justify-content:center;}
  .mascot-hero-frame{
    position:relative;
    width:360px;
    max-width:80vw;
    margin:0 auto;
  }
  .mascot-hero-frame img{
    width:100%; height:auto; max-width:100%; border-radius:50%;
    box-shadow:0 30px 60px rgba(21,159,219,0.35), 0 0 0 10px rgba(255,255,255,0.7);
  }
  .mascot-badge{
    position:absolute; top:-6px; right:6%;
    background:var(--white);
    color:var(--orange-600);
    font-family:var(--font-mono);
    font-weight:700;
    font-size:0.72rem;
    padding:8px 14px;
    border-radius:100px;
    box-shadow:0 8px 20px rgba(0,0,0,0.12);
    border:2px solid var(--orange-400);
  }
  .scroll-cue{
    position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
    color:var(--sky-700); font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.2em;
    display:flex; flex-direction:column; align-items:center; gap:8px; z-index:2;
  }
  .scroll-cue .line{width:1px; height:34px; background:linear-gradient(180deg, var(--sky-600), transparent); animation:pulse 2s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:0.3;} 50%{opacity:1;}}

  /* ============ ANNOUNCEMENT BAR ============ */
  .announce{
    background:linear-gradient(90deg, var(--orange-500), var(--orange-600));
    color:var(--white);
    padding:14px var(--edge);
    text-align:center;
    font-size:0.85rem;
    font-weight:500;
    position:relative; z-index:3;
  }
  .announce b{font-weight:900;}

  /* ============ SECTION GENERIC ============ */
  section{padding:clamp(64px, 10vw, 128px) 0;}
  .section-head{max-width:640px; margin-bottom:56px;}
  .section-head .eyebrow{margin-bottom:18px;}
  .section-head h2{font-size:clamp(1.8rem, 3.4vw, 2.6rem); color:var(--ink-900);}
  .section-head p{margin-top:16px; color:var(--ink-700); font-size:1rem;}
  .on-blue .section-head h2, .on-blue .section-head p{color:var(--white);}
  .on-blue .section-head .eyebrow{color:var(--orange-100);}
  .on-blue .section-head p{color:rgba(255,255,255,0.88);}

  .bg-white{background:var(--white);}
  .bg-sky-100{background:var(--sky-100);}
  .bg-sky-deep{background:linear-gradient(135deg, var(--sky-600), var(--sky-700)); color:var(--white);}
  .bg-orange{background:linear-gradient(135deg, var(--orange-500), var(--orange-600)); color:var(--white);}

  /* ============ ABOUT ============ */
  .about-grid{
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:start;
  }
  .about-copy p{color:var(--ink-700); margin-bottom:18px; font-size:1rem;}
  .rename-card{
    background:var(--sky-100);
    border:2px dashed var(--sky-400);
    border-radius:18px;
    padding:24px 28px;
    display:flex; align-items:center; gap:18px;
    margin-top:28px;
    flex-wrap:wrap;
  }
  .rename-card .old, .rename-card .new{font-family:var(--font-mono); font-size:0.95rem;}
  .rename-card .old{color:var(--ink-500); text-decoration:line-through;}
  .rename-card .new{color:var(--orange-600); font-weight:700;}
  .rename-card .arrow{color:var(--orange-500); font-size:1.2rem;}

  .fact-list{
    display:grid; gap:0;
    border-top:1px solid var(--sky-300);
    position:relative;
  }
  .fact-list li{
    display:flex; justify-content:space-between; gap:20px;
    padding:20px 0;
    border-bottom:1px solid var(--sky-300);
  }
  .fact-list .k{font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.08em; color:var(--sky-700); text-transform:uppercase; padding-top:3px; font-weight:700;}
  .fact-list .v{font-size:1.02rem; text-align:right; max-width:60%;}

  /* ============ SERVICES ============ */
  .service-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:20px;
  }
  .service-card{
    display:block;
    color:inherit;
    background:var(--white);
    border:1px solid var(--sky-300);
    border-radius:20px;
    padding:34px 28px;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  .service-card:hover{transform:translateY(-6px); box-shadow:0 18px 34px rgba(21,159,219,0.18); border-color:var(--sky-500);}
  .service-icon{
    width:50px; height:50px; border-radius:14px;
    background:linear-gradient(135deg, var(--orange-400), var(--orange-600));
    display:flex; align-items:center; justify-content:center;
    margin-bottom:22px;
  }
  .service-icon svg{width:25px; height:25px; stroke:white; fill:none; stroke-width:1.6;}
  .service-card h3{font-size:1.18rem; margin-bottom:10px; color:var(--ink-900);}
  .service-card p{font-size:0.92rem; color:var(--ink-700);}

  /* ============ WHY ============ */
  .why-row{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px;
  }
  .why-card{padding:32px 26px; background:rgba(255,255,255,0.14); border-radius:18px; border:1px solid rgba(255,255,255,0.28);}
  .why-card .num{font-family:var(--font-mono); color:var(--orange-100); font-size:0.72rem; letter-spacing:0.1em; margin-bottom:16px; display:block; font-weight:700;}
  .why-card h3{font-size:1.1rem; color:var(--white); margin-bottom:10px; font-family:var(--font-body); font-weight:700;}
  .why-card p{font-size:0.9rem; color:rgba(255,255,255,0.85);}

  /* ============ FLOW (route motif) ============ */
  .flow-list{position:relative; padding-left:52px;}
  .flow-list::before{
    content:"";
    position:absolute; left:15px; top:10px; bottom:10px; width:0;
    border-left:3px dashed var(--sky-400);
  }
  .flow-item{position:relative; padding-bottom:48px;}
  .flow-item:last-child{padding-bottom:0;}
  .flow-dot{
    position:absolute; left:-52px; top:2px;
    width:32px; height:32px; border-radius:50%;
    background:var(--white); border:2px solid var(--orange-500);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:0.75rem; font-weight:700; color:var(--orange-600);
  }
  .flow-item h3{font-size:1.12rem; margin-bottom:8px;}
  .flow-item p{color:var(--ink-700); font-size:0.94rem; max-width:520px;}

  /* ============ GALLERY (INSTAGRAM) ============ */
  .instagram-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; align-items:start;}
  .instagram-card{background:var(--white); border-radius:18px; overflow:hidden; box-shadow:0 8px 24px rgba(15,23,42,.08); min-width:0;}
  .instagram-card .instagram-media{margin:0 auto !important; min-width:0 !important; width:calc(100% - 2px) !important; border:0 !important;}
  .instagram-card .instagram-media > div{max-width:100% !important;}
  .sns-tabs{display:flex; gap:10px; margin-bottom:32px;}
  .sns-tab{
    padding:9px 20px; border-radius:100px; font-size:0.82rem; font-weight:700;
    border:2px solid var(--sky-300); color:var(--sky-700); cursor:pointer; background:var(--white);
    font-family:var(--font-body);
  }
  .sns-tab.active{background:var(--orange-500); color:var(--white); border-color:var(--orange-500);}
  .sns-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px;
  }
  .sns-card{
    background:var(--white);
    border:1px solid var(--sky-300);
    border-radius:16px;
    overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .sns-card:hover{transform:translateY(-6px); box-shadow:0 16px 34px rgba(21,159,219,0.18);}
  .sns-thumb{
    aspect-ratio:4/5;
    background:linear-gradient(135deg, var(--sky-100), var(--sky-300));
    display:flex; align-items:center; justify-content:center;
    position:relative;
  }
  .sns-thumb .placeholder-icon{width:38px; height:38px; opacity:0.4;}
  .sns-badge{
    position:absolute; top:12px; left:12px;
    padding:5px 10px; border-radius:100px;
    font-family:var(--font-mono); font-size:0.62rem; font-weight:700; letter-spacing:0.05em;
    color:white; display:flex; align-items:center; gap:6px;
  }
  .sns-badge.ig{background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af);}
  .sns-badge.tt{background:#111;}
  .sns-caption{padding:16px 18px;}
  .sns-caption p{font-size:0.85rem; color:var(--ink-700);}
  .sns-note{
    margin-top:28px; padding:20px 24px; border-radius:14px;
    background:var(--sky-100); font-size:0.86rem; color:var(--ink-700); border:1px solid var(--sky-300);
  }

/* ============ GOOGLE REVIEWS ============ */
.google-summary{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:22px;
  max-width:920px;
  margin:0 auto 30px;
  padding:18px 22px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(15,23,42,.08);
  border-radius:20px;
  box-shadow:0 14px 36px rgba(15,23,42,.07);
}
.google-summary-label{display:flex;align-items:center;gap:11px;font-weight:700;font-size:.9rem;white-space:nowrap;}
.google-summary-badge{width:38px;height:38px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font:800 1.25rem Arial,sans-serif;color:#4285f4;background:#fff;border:1px solid rgba(66,133,244,.16);box-shadow:0 4px 12px rgba(66,133,244,.08);}
.google-summary-score{display:flex;align-items:center;gap:12px;min-width:0;}
.google-rating-number{font-size:2.1rem;font-weight:800;line-height:1;color:var(--ink-900);}
.google-rating-stars,.google-review-stars{letter-spacing:.06em;color:#f4b400;}
.google-rating-stars{font-size:1.05rem;white-space:nowrap;}
.google-review-count{color:var(--ink-500);font-size:.84rem;white-space:nowrap;}
.google-reviews-wrap{position:relative;display:flex;align-items:center;gap:14px;}
.google-reviews-slider{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3);
  gap:24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
  flex:1;padding:6px 3px 18px;min-width:0;
}
.google-reviews-slider::-webkit-scrollbar{display:none;}
.google-review-card{
  position:relative;display:flex;flex-direction:column;min-width:0;min-height:300px;scroll-snap-align:start;
  background:var(--white);border:1px solid rgba(15,23,42,.09);border-radius:20px;padding:25px 24px 22px;
  box-shadow:0 14px 34px rgba(15,23,42,.08);overflow:hidden;
}
.google-review-card::before{content:"“";position:absolute;top:7px;right:18px;font:400 4rem Georgia,serif;line-height:1;color:rgba(66,133,244,.10);}
.google-review-card::after{content:"Google";position:absolute;right:20px;bottom:19px;font:700 .67rem Arial,sans-serif;color:#4285f4;letter-spacing:-.02em;opacity:.8;}
.google-review-top{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-right:25px;}
.google-review-top time{margin-left:auto;font-size:.74rem;color:var(--ink-500);white-space:nowrap;}
.google-review-stars{font-size:.86rem;line-height:1;white-space:nowrap;}
.google-review-author{font-weight:700;margin-bottom:12px;font-size:.9rem;color:var(--ink-900);}
.google-review-author a{color:inherit;text-decoration:none;}
.google-review-author a:hover{text-decoration:underline;}
.google-review-text-wrap{position:relative;margin:0;min-height:0;}
.google-review-text{margin:0;line-height:1.78;color:var(--ink-700);font-size:.88rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden;padding-right:0;}
.google-review-text.is-expanded{display:block;-webkit-line-clamp:unset;overflow:visible;}
.google-review-expand{display:none;position:absolute;right:0;bottom:0;margin:0;border:0;padding:0 0 0 28px;color:#4285f4;background:linear-gradient(90deg,rgba(255,255,255,0),var(--white) 42%);font:700 .88rem/1.78 var(--font-body, inherit);cursor:pointer;text-decoration:none;z-index:2;}
.google-review-expand:hover{color:#1967d2;text-decoration:underline;text-underline-offset:2px;}
.google-review-expand.is-visible{display:inline-block;}
.google-review-expand-close{display:none;}
.google-review-expand.is-expanded{position:static;display:block;margin-top:5px;padding:0;background:none;font-size:.78rem;line-height:1.5;text-decoration:underline;text-underline-offset:2px;}
.google-review-expand.is-expanded .google-review-expand-more{display:none;}
.google-review-expand.is-expanded .google-review-expand-close{display:inline;}
.google-review-source{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding:5px 9px;font-size:.64rem;color:#4285f4;text-decoration:none;font-weight:700;border-radius:999px;background:#f1f6ff;border:1px solid #e1ebff;width:max-content;position:relative;z-index:2;}
.google-review-source::after{content:'↗';font-size:.9rem;}
.google-review-source:hover{background:#e8f0fe;}
.google-reviews-nav{flex:0 0 44px;width:44px;height:44px;align-self:center;border:1px solid rgba(14,127,176,.18);border-radius:50%;background:var(--white);color:var(--sky-700);font-size:1.7rem;line-height:1;cursor:pointer;box-shadow:0 8px 20px rgba(15,23,42,.08);transition:transform .2s ease,background .2s ease,color .2s ease;}
.google-reviews-nav:hover{transform:translateY(-2px);background:var(--sky-700);color:var(--white);}
.google-attribution{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin:18px auto 0;color:var(--ink-500);font-size:.72rem;text-align:center;}
.google-wordmark{font-family:Arial,sans-serif;font-weight:700;font-size:.95rem;letter-spacing:-.04em;color:#4285f4;}
.google-review-link{text-align:center;margin-top:22px;}
.google-search-review-btn{
  padding:9px 17px;
  font-size:.76rem;
  border:1px solid rgba(66,133,244,.22);
  background:#f1f6ff;
  color:#2563eb;
  box-shadow:none;
  gap:7px;
}
.google-search-review-btn span{font-size:.9rem;line-height:1;}
.google-search-review-btn:hover{transform:translateY(-1px);background:#e8f0fe;border-color:rgba(66,133,244,.34);box-shadow:0 7px 16px rgba(66,133,244,.12);}

.google-reviews-empty{text-align:center;padding:28px;border:1px dashed rgba(15,23,42,.15);border-radius:18px;color:var(--ink-500);}
.google-reviews-error{margin:0 auto 24px;padding:16px;border:1px solid rgba(220,38,38,.2);border-radius:14px;background:#fff7f7;color:#991b1b;font-size:.85rem;}
@media (max-width:980px){
  .google-summary{grid-template-columns:1fr auto;}
  .google-summary-label{grid-column:1 / -1;}
  .google-reviews-slider{grid-auto-columns:calc((100% - 24px)/2);gap:16px;}
}
@media (max-width:620px){
  .google-summary{grid-template-columns:1fr;padding:17px 18px;gap:12px;}
  .google-summary-label{grid-column:auto;}
  .google-summary-score{gap:9px;}
  .google-rating-number{font-size:1.85rem;}
  .google-reviews-wrap{gap:7px;}
  .google-reviews-nav{flex-basis:36px;width:36px;height:36px;font-size:1.45rem;}
  .google-reviews-slider{grid-auto-columns:100%;gap:12px;padding-left:1px;padding-right:1px;}
  .google-review-card{min-height:285px;padding:21px 20px 20px;}
}

/* Instagram official embeds: stack on narrower screens so the official card remains readable. */
@media(max-width:900px){.instagram-grid{grid-template-columns:1fr;}}

/* ============ AREA ============ */
.area-wrap{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.pref-list{display:flex; flex-wrap:wrap; gap:10px;}
.pref-chip{
  padding:8px 16px; border-radius:100px; font-size:0.82rem;
  background:rgba(255,255,255,0.16); color:var(--white); border:1px solid rgba(255,255,255,0.35);
}
.pref-chip.main{background:var(--white); border-color:transparent; font-weight:700; color:var(--sky-700);}

/* ============ CTA ============ */
.cta-section{position:relative; overflow:hidden; text-align:center;}
.cta-section h2{font-size:clamp(1.9rem,4vw,2.8rem); margin-bottom:18px; position:relative; color:var(--white);}
.cta-section p{color:rgba(255,255,255,0.9); margin-bottom:36px; position:relative;}
.cta-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative;}
.cta-actions .btn-primary{background:var(--white); color:var(--orange-600); box-shadow:0 10px 24px rgba(0,0,0,0.15);}
.cta-actions .btn-ghost{background:transparent; border-color:rgba(255,255,255,0.6); color:var(--white);}
.cta-actions .btn-ghost:hover{background:rgba(255,255,255,0.15);}
.cta-phone{margin-top:36px; font-family:var(--font-mono); font-size:1.6rem; font-weight:700; letter-spacing:0.03em; position:relative; color:var(--white);}
.cta-phone span{display:block; font-family:var(--font-body); font-size:0.75rem; color:rgba(255,255,255,0.75); letter-spacing:0.1em; margin-bottom:6px;}
.cta-mascot{width:150px; margin:0 auto 8px;}

/* ============ FOOTER ============ */
footer{background:var(--sky-700); color:rgba(255,255,255,0.78); padding:60px 0 30px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:50px;}
.footer-brand .brand{margin-bottom:14px; color:var(--white);}
.footer-brand p{font-size:0.86rem; max-width:320px; color:rgba(255,255,255,0.68);}
.footer-col h4{font-size:0.8rem; letter-spacing:0.08em; color:var(--orange-100); margin-bottom:16px; font-family:var(--font-mono); text-transform:uppercase;}
.footer-col li{margin-bottom:10px; font-size:0.88rem;}
.footer-col a:hover{color:var(--white);}
.sns-icons{display:flex; gap:12px; margin-top:18px;}
.sns-icons a{width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,0.3); display:flex; align-items:center; justify-content:center;}
.sns-icons a:hover{border-color:var(--orange-400); background:rgba(255,149,0,0.18);}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.2); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:0.78rem;}

/* LINE official account in footer */
.footer-line{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:22px;
  padding:16px;
  max-width:430px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(255,255,255,.06);
}
.footer-line-copy{
  display:flex;
  flex:1 1 auto;
  min-width:0;
  flex-direction:column;
  gap:6px;
}
.footer-line-copy strong{
  color:var(--white);
  font-size:.9rem;
  line-height:1.4;
}
.footer-line-copy span{
  color:rgba(255,255,255,.66);
  font-size:.72rem;
  line-height:1.55;
}
.footer-line-button{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  margin-top:3px;
  padding:0;
  border:0;
  background:transparent;
}
.footer-line-button img{
  display:block;
  width:auto;
  height:36px;
  max-width:100%;
}
.footer-line-qr{
  flex:0 0 auto;
  display:block;
  width:116px;
  height:116px;
  padding:6px;
  border-radius:10px;
  background:#fff;
  box-sizing:border-box;
  transition:transform .18s ease, box-shadow .18s ease;
}
.footer-line-qr:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}
.footer-line-qr img{
  display:block;
  width:100%;
  height:100%;
}
@media (max-width:900px){
  .footer-line{
    max-width:100%;
    width:100%;
    box-sizing:border-box;
  }
}
@media (max-width:520px){
  .footer-line{
    align-items:flex-start;
    gap:14px;
    padding:14px;
  }
  .footer-line-qr{
    width:94px;
    height:94px;
  }
  .footer-line-copy span{font-size:.68rem;}
}


/* ============ REVEAL ANIM ============ */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ============ MOBILE ============ */
@media (max-width:900px){
  .about-grid, .area-wrap{grid-template-columns:1fr; gap:40px;}
  .footer-grid{grid-template-columns:1fr; gap:36px;}
  .hero-content{grid-template-columns:1fr; text-align:center;}
  .hero-sub{margin-left:auto; margin-right:auto;}
  .hero-actions{justify-content:center;}
  .hero-visual{order:-1;}
}

/* ============ CONTACT PAGE ============ */
.contact-layout{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);
  gap:34px;
  align-items:start;
}
.contact-form{
  background:var(--white);
  border:1px solid rgba(15,23,42,.08);
  border-radius:24px;
  padding:32px;
  box-shadow:0 18px 48px rgba(15,23,42,.07);
}
.contact-form-intro{display:flex;gap:14px;align-items:flex-start;margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid rgba(15,23,42,.08)}
.form-step{font:700 .7rem var(--font-mono);letter-spacing:.08em;color:var(--white);background:var(--sky-700);border-radius:999px;padding:5px 9px;margin-top:2px}
.contact-form-intro strong{display:block;font-size:1rem;margin-bottom:2px}
.contact-form-intro p{font-size:.78rem;color:var(--ink-500);margin:0}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-row{margin-bottom:20px}
.form-row label{display:flex;align-items:center;gap:7px;font-weight:700;font-size:.82rem;margin-bottom:8px;color:var(--ink-900)}
.req{font-size:.64rem;font-weight:700;color:#d95b00;background:#fff0df;border-radius:999px;padding:3px 7px}
.optional{font-size:.64rem;font-weight:500;color:var(--ink-500);background:var(--sky-100);border-radius:999px;padding:3px 7px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid #d8e0e5;background:#fbfdfe;border-radius:12px;padding:12px 14px;font:500 .88rem/1.5 var(--font-body);color:var(--ink-900);outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.contact-form input,.contact-form select{height:48px}
.contact-form textarea{min-height:170px;resize:vertical}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#a8b0b6}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{background:#fff;border-color:var(--sky-500);box-shadow:0 0 0 4px rgba(76,198,240,.13)}
.form-submit{margin-top:4px;min-width:220px;justify-content:center}
.form-submit span{font-size:1rem}
.form-privacy{font-size:.72rem;color:var(--ink-500);margin-top:13px}
.form-error{margin:0 0 18px;padding:12px 14px;border-radius:12px;background:#fff5f5;border:1px solid #ffd4d4;color:#a33b3b;font-size:.82rem}
.form-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.contact-info-card{background:linear-gradient(145deg,#fff,#f4fbff);border:1px solid rgba(15,23,42,.08);border-radius:24px;padding:28px;box-shadow:0 18px 48px rgba(15,23,42,.06)}
.contact-info-card h3{font-size:1.35rem;margin-bottom:22px}
.contact-info-row{display:flex;gap:13px;align-items:center;padding:16px 0;border-top:1px solid rgba(15,23,42,.08)}
.contact-info-icon{width:42px;height:42px;flex:0 0 42px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--sky-100);color:var(--sky-700)}
.contact-info-icon svg{width:21px;height:21px;max-width:21px;max-height:21px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.clabel{font:700 .67rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500);margin-bottom:2px}
.cvalue{font-weight:700;font-size:.9rem;color:var(--ink-900)}
.note-box{margin-top:16px;border:1px solid rgba(21,159,219,.16);background:#f4fbff;border-radius:16px;padding:16px 18px;color:var(--ink-700);font-size:.75rem;line-height:1.75}
.note-box strong{color:var(--sky-700);font-size:.8rem}
.contact-complete-card{position:relative;max-width:760px;margin:10px auto 42px;text-align:center;background:linear-gradient(180deg,#fff 0%,#fff 76%,#f7fcff 100%);border:1px solid rgba(15,23,42,.08);border-radius:30px;padding:54px 42px 46px;box-shadow:0 24px 70px rgba(15,23,42,.10);overflow:hidden}
.contact-complete-card::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--sky-500),#8edcf8,var(--orange-500))}
.contact-complete-top{display:flex;flex-direction:column;align-items:center;gap:12px}
.contact-complete-icon{width:74px;height:74px;margin:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#eaf9ff,#eaf8f0);color:#1688b8;box-shadow:0 10px 28px rgba(21,159,219,.12);border:1px solid rgba(21,159,219,.12)}
.contact-complete-icon svg{display:block;width:36px;height:36px;max-width:36px;max-height:36px}
.contact-complete-badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 11px;border-radius:999px;background:var(--sky-100);color:var(--sky-700);font:700 .66rem var(--font-mono);letter-spacing:.12em}
.contact-complete-card h2{font-size:clamp(1.65rem,3vw,2.2rem);line-height:1.45;margin:22px 0 10px;color:var(--ink-900)}
.contact-complete-lead{max-width:560px!important;margin:0 auto!important;color:var(--ink-900)!important;font-size:1rem!important;font-weight:700}
.contact-complete-note{max-width:560px!important;margin:8px auto 0!important;color:var(--ink-500)!important;font-size:.86rem!important;line-height:1.9}
.contact-complete-divider{width:100%;max-width:500px;height:1px;background:rgba(15,23,42,.08);margin:28px auto 22px}
.contact-complete-info{display:flex;align-items:center;justify-content:center;gap:8px 12px;flex-wrap:wrap;font-size:.78rem;color:var(--ink-500)}
.contact-complete-info span{font:700 .66rem var(--font-mono);letter-spacing:.08em;color:var(--sky-700);background:var(--sky-100);padding:5px 8px;border-radius:999px}
.contact-complete-info strong{color:var(--ink-900);font-size:.82rem}
.contact-complete-info a{color:var(--ink-900);font-weight:700;text-decoration:none}
.contact-complete-info a:hover{text-decoration:underline}
.contact-complete-info small{width:100%;font-size:.7rem;color:var(--ink-500)}
.contact-complete-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:30px}
.contact-complete-actions .btn{min-height:46px}
.contact-complete-actions .btn span{margin-left:5px}
@media(max-width:900px){.contact-layout{grid-template-columns:1fr}.contact-form{padding:24px}.contact-info-card{padding:24px}}
@media(max-width:620px){.form-grid-2{grid-template-columns:1fr;gap:0}.contact-form{padding:20px;border-radius:20px}.contact-info-card{border-radius:20px}.contact-complete-card{padding:44px 20px 34px;border-radius:24px}.contact-complete-card h2{font-size:1.5rem}.contact-complete-actions{flex-direction:column}.contact-complete-actions .btn{width:100%;justify-content:center}.contact-complete-info{gap:7px}.contact-complete-note{font-size:.82rem!important}.form-submit{width:100%}}

/* ======================================================================
   SEO content pages
   ====================================================================== */
.seo-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.seo-service-card{display:flex;flex-direction:column;min-height:250px;padding:28px;border:1px solid rgba(15,23,42,.08);border-radius:22px;background:var(--white);box-shadow:0 12px 34px rgba(15,23,42,.06);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.seo-service-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(15,23,42,.10);border-color:rgba(21,159,219,.25);}
.seo-service-num{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;color:var(--orange-600);font-weight:700;}
.seo-service-card h3{font-size:1.45rem;margin:14px 0 10px;}
.seo-service-card p{color:var(--ink-700);font-size:.92rem;line-height:1.85;}
.seo-service-more{margin-top:auto;padding-top:22px;color:var(--sky-700);font-weight:700;font-size:.84rem;}
.seo-prose{max-width:860px;margin:0 auto;font-size:1rem;line-height:2.05;color:var(--ink-700);}
.seo-prose p+p{margin-top:20px;}
.seo-price-note{margin:32px auto 0;max-width:860px;padding:24px 26px;border-radius:18px;background:var(--orange-100);border:1px solid rgba(242,110,0,.12);}
.seo-price-note strong{display:block;margin-bottom:8px;color:var(--orange-600);font-size:1rem;}
.seo-price-note p{font-weight:700;line-height:1.8;}
.seo-price-note small{display:block;margin-top:8px;color:var(--ink-500);line-height:1.7;}
.seo-steps{max-width:900px;margin:0 auto;display:grid;gap:14px;}
.seo-steps li{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start;padding:22px 24px;border:1px solid rgba(15,23,42,.08);border-radius:18px;background:var(--white);}
.seo-steps li>b{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--sky-100);color:var(--sky-700);font-family:var(--font-mono);font-size:.78rem;}
.seo-steps h3{font-size:1.2rem;margin-bottom:4px;}
.seo-steps p{color:var(--ink-700);font-size:.9rem;}
.faq-layout{max-width:920px;margin:0 auto;display:grid;gap:72px;}
.faq-list{display:grid;gap:12px;}
.faq-item{background:var(--white);border:1px solid rgba(15,23,42,.08);border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(15,23,42,.04);}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;cursor:pointer;font-weight:700;list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary span{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--sky-100);color:var(--sky-700);font-size:1.1rem;font-weight:400;transition:transform .2s ease;}
.faq-item[open] summary span{transform:rotate(45deg);}
.faq-answer{padding:0 22px 20px;color:var(--ink-700);line-height:1.9;}
.area-seo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
.area-seo-grid>a{display:block;padding:34px;border-radius:22px;background:var(--sky-050);border:1px solid rgba(21,159,219,.12);transition:transform .25s ease,box-shadow .25s ease;}
.area-seo-grid>a:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(15,23,42,.08);}
.area-seo-grid h2{margin:12px 0 10px;font-size:1.7rem;}
.area-seo-grid p{color:var(--ink-700);line-height:1.9;}
.area-seo-grid>a>span:last-child{display:block;margin-top:22px;color:var(--sky-700);font-weight:700;font-size:.85rem;}
.company-location-card{max-width:720px;margin:0 auto;padding:38px;border-radius:24px;background:var(--sky-050);border:1px solid rgba(21,159,219,.14);}
.company-location-card h2{font-size:1.8rem;margin:14px 0;}
.company-location-card p{color:var(--ink-700);line-height:1.9;}
.company-location-card>a{display:inline-block;margin-top:16px;color:var(--sky-700);font-weight:700;}
@media (max-width:980px){.seo-service-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:700px){.seo-service-grid,.area-seo-grid{grid-template-columns:1fr;}.seo-service-card{min-height:0;}.seo-steps li{grid-template-columns:48px 1fr;padding:18px;}.seo-steps li>b{width:42px;height:42px}.faq-layout{gap:50px;}.faq-item summary{padding:17px 18px;}.faq-answer{padding:0 18px 18px;}}

/* Home section navigation */
html { scroll-behavior: smooth; }
#service, #about, #why, #gallery, #voice, #area, #contact { scroll-margin-top: 96px; }
@media (max-width: 900px) {
  #service, #about, #why, #gallery, #voice, #area, #contact { scroll-margin-top: 78px; }
}
.area-section-link { margin-top: 28px; }
.home-faq-link-section .section-head { text-align: center; }
.home-faq-link-section .section-head .btn { margin-top: 18px; }


/* ======================================================================
   MOBILE HEADER / NAV v2
   The desktop navigation is completely disabled below 900px. The mobile
   menu is an independent full-screen overlay with a scrollable side panel.
   ====================================================================== */
.mobile-nav{display:none;}

@media (max-width:900px){
  header#siteHeader{
    height:68px;
    min-height:68px;
    padding:10px 16px;
    gap:10px;
    z-index:10000;
  }
  header#siteHeader.scrolled{
    height:62px;
    min-height:62px;
    padding:7px 16px;
  }

  header#siteHeader .brand{
    flex:1 1 auto;
    min-width:0;
    max-width:calc(100% - 58px);
    gap:8px;
    font-size:.92rem;
    line-height:1.15;
  }
  header#siteHeader .brand > span:last-child{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  header#siteHeader .brand small{
    margin-top:2px;
    font-size:.45rem;
    letter-spacing:.10em;
    white-space:nowrap;
  }
  header#siteHeader .brand .sunmark{
    width:36px;
    height:36px;
  }

  header#siteHeader nav.desktop-nav{display:none !important;}
  header#siteHeader .header-cta{flex:0 0 auto;gap:0;margin:0;}
  header#siteHeader .header-cta > .btn{display:none !important;}
  header#siteHeader .menu-toggle{
    display:flex !important;
    width:44px;
    height:44px;
    padding:9px;
    align-items:center;
    justify-content:center;
    gap:5px;
    border:1px solid rgba(21,159,219,.18);
    border-radius:12px;
    background:var(--sky-100);
    box-shadow:0 6px 18px rgba(21,159,219,.12);
    -webkit-tap-highlight-color:transparent;
  }
  header#siteHeader .menu-toggle span{
    width:23px;
    height:2px;
    flex:0 0 2px;
    background:var(--ink-900);
  }

  body.sun-menu-open{overflow:hidden;}

  .mobile-nav{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:flex-end;
    align-items:stretch;
    padding:0;
    margin:0;
    background:rgba(15,23,42,.42);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    z-index:9999;
    transition:opacity .22s ease, visibility .22s ease;
  }
  .mobile-nav.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .mobile-nav-panel{
    width:min(88vw,360px);
    height:100%;
    min-height:100%;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    background:var(--white);
    padding:calc(18px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom));
    box-shadow:-18px 0 50px rgba(15,23,42,.18);
    transform:translateX(100%);
    transition:transform .26s ease;
  }
  .mobile-nav.open .mobile-nav-panel{transform:translateX(0);}
  .mobile-nav-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:44px;
    padding-bottom:14px;
    border-bottom:1px solid rgba(15,23,42,.08);
    margin-bottom:10px;
  }
  .mobile-nav-head > span{
    font:700 .72rem var(--font-mono);
    letter-spacing:.18em;
    color:var(--sky-700);
  }
  .mobile-nav .close-btn{
    display:flex;
    width:42px;
    height:42px;
    align-items:center;
    justify-content:center;
    padding:0;
    border:0;
    border-radius:12px;
    background:var(--sky-100);
    color:var(--ink-900);
    font:400 30px/1 Arial,sans-serif;
    cursor:pointer;
  }
  .mobile-nav-links{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .mobile-nav-links a{
    display:flex;
    align-items:center;
    min-height:48px;
    padding:10px 10px;
    border-bottom:1px solid rgba(15,23,42,.07);
    color:var(--ink-900);
    font-size:.92rem;
    font-weight:700;
  }
  .mobile-nav-links a::after{
    content:'›';
    margin-left:auto;
    color:var(--sky-600);
    font-size:1.2rem;
    line-height:1;
  }
  .mobile-nav-cta{
    width:100%;
    min-height:48px;
    justify-content:center;
    margin-top:18px;
  }
}

@media (min-width:901px){
  .mobile-nav{display:none !important;}
}

@media (max-width:420px){
  header#siteHeader .brand{font-size:.84rem;}
  header#siteHeader .brand small{font-size:.40rem;letter-spacing:.08em;}
  .mobile-nav-panel{width:min(91vw,350px);padding-left:18px;padding-right:18px;}
}
