/* ============ Base ============ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;
  color:#1f3a5f;
  line-height:1.8;
  overflow-x:hidden;
  background:linear-gradient(180deg,
    #4d9bd0 0%,
    #66aedb 8%,
    #86c2e6 18%,
    #a8d3ee 30%,
    #c6e1f4 45%,
    #dceef9 60%,
    #ecf6fc 75%,
    #f7fbfe 88%,
    #ffffff 100%);
  background-attachment:scroll;
  min-height:100vh;
}

/* ============ Sky / Cloud background ============ */
.sky{
  position:absolute; top:0; left:0; right:0;
  height:100vh; z-index:-1;
  pointer-events:none; overflow:hidden;
}
.sky::after{
  content:""; position:absolute; top:-180px; right:-120px;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,247,210,.55) 0%,rgba(255,247,210,0) 70%);
  filter:blur(8px);
}

.cloud-layer{
  position:absolute; top:0; left:0; right:0;
  height:150vh; z-index:-1;
  pointer-events:none; overflow:hidden;
}
/* Irasutoya-style clouds — flat bottom + round bumps on top */
.cloud{
  position:absolute;
  background:#fff;
  border-radius:999px;   /* horizontal pill = flat bottom */
  opacity:.95;
  will-change:transform;
}
/* Left & middle bumps */
.cloud::before{
  content:"";
  position:absolute;
  background:#fff;
  border-radius:50%;
  width:62%; height:240%;
  top:-180%; left:10%;
  /* a second middle bump via box-shadow */
  box-shadow: 50% -10% 0 -8% #fff;
}
/* Right bump */
.cloud::after{
  content:"";
  position:absolute;
  background:#fff;
  border-radius:50%;
  width:46%; height:200%;
  top:-150%; right:8%;
}
.cloud.small{  width:90px;  height:24px; opacity:.85; }
.cloud.medium{ width:140px; height:32px; }
.cloud.large{  width:190px; height:42px; }

@keyframes drift-right{
  0%   { transform:translateX(-30vw) translateY(0); }
  50%  { transform:translateX(50vw) translateY(-10px); }
  100% { transform:translateX(130vw) translateY(0); }
}
@keyframes drift-left{
  0%   { transform:translateX(130vw) translateY(0); }
  50%  { transform:translateX(50vw) translateY(8px); }
  100% { transform:translateX(-30vw) translateY(0); }
}

.cloud.c1{ top:8%;  animation: drift-right 80s linear infinite; }
.cloud.c2{ top:18%; animation: drift-left  110s linear infinite; animation-delay:-30s; }
.cloud.c3{ top:32%; animation: drift-right 95s linear infinite; animation-delay:-50s; }
.cloud.c4{ top:48%; animation: drift-left  120s linear infinite; animation-delay:-15s; }
.cloud.c5{ top:62%; animation: drift-right 100s linear infinite; animation-delay:-70s; }
.cloud.c6{ top:78%; animation: drift-left  130s linear infinite; animation-delay:-40s; }

/* ============ Header ============ */
header{
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  background:rgba(255,255,255,.92);    /* TKCロゴの白背景となじむよう、より白く */
  border-bottom:1px solid rgba(255,255,255,.9);
  box-shadow:0 4px 24px rgba(120,170,210,.12);
}
.header-inner{
  max-width:1200px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 24px;
  flex-wrap:wrap; gap:12px;
}
.brand{ display:flex; align-items:center; gap:14px; text-decoration:none;}
.brand .tkc-logo{
  height:48px; width:auto; display:block;
  filter:drop-shadow(0 1px 2px rgba(120,170,210,.25));
}
.brand .text-wrap{ display:flex; flex-direction:column; }
.brand .ja{ font-size:1.2rem; font-weight:700; color:#1a4d80; letter-spacing:.05em; }
.brand .en{ font-size:.7rem; color:#6b9bc4; letter-spacing:.15em; }
.header-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tel-top{
  font-weight:700; color:#1a4d80; text-decoration:none;
  background:rgba(255,255,255,.7); padding:8px 16px; border-radius:999px;
  border:1px solid rgba(143,191,228,.4);
  transition:all .3s ease;
}
.tel-top:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(120,170,210,.3); background:#fff; }

/* Header contact-form CTA — sits next to the phone */
.contact-top{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:700; color:#fff; text-decoration:none;
  padding:9px 18px; border-radius:999px;
  background:linear-gradient(135deg,#4ba3e0 0%,#2e7fc4 100%);
  box-shadow:0 6px 18px rgba(46,127,196,.32), inset 0 1px 0 rgba(255,255,255,.4);
  transition:all .3s ease;
  font-size:.92rem;
  letter-spacing:.03em;
}
.contact-top:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(46,127,196,.45), inset 0 1px 0 rgba(255,255,255,.5);
}
/* Sunlight theme variant */
body.theme-sunlight .contact-top{
  background:linear-gradient(135deg,#f5b942 0%,#e0a015 100%);
  box-shadow:0 6px 18px rgba(200,140,30,.35), inset 0 1px 0 rgba(255,255,255,.5);
}
body.theme-sunlight .contact-top:hover{
  box-shadow:0 10px 22px rgba(200,140,30,.5), inset 0 1px 0 rgba(255,255,255,.6);
}

nav ul{ list-style:none; display:flex; gap:6px; flex-wrap:wrap; }
nav a{
  display:block; padding:8px 16px;
  color:#1a4d80; text-decoration:none; font-size:.95rem; font-weight:600;
  border-radius:999px;
  transition:all .35s ease;
  position:relative;
}
nav a:hover{ background:rgba(255,255,255,.8); transform:translateY(-2px); box-shadow:0 4px 14px rgba(120,170,210,.25); }
nav a.current{ background:rgba(255,255,255,.85); box-shadow:inset 0 0 0 1px rgba(126,192,232,.5); }

/* ============ Hero ============ */
.hero{
  min-height:88vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:80px 24px 100px;
  position:relative;
}
.badge{
  display:inline-block;
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(231,243,255,.8));
  color:#1a4d80; padding:8px 22px; border-radius:999px;
  font-size:.85rem; font-weight:600; letter-spacing:.12em;
  box-shadow:0 4px 16px rgba(120,170,210,.2);
  margin-bottom:30px;
}
.hero h1, .hero h2{
  font-size:clamp(1.6rem, 3.4vw, 2.8rem);
  color:#0e3a66;
  font-weight:700;
  line-height:1.5;
  margin-bottom:18px;
  text-shadow:0 2px 18px rgba(255,255,255,.6);
}
.hero h2{
  color:#1a4d80;
  margin-bottom:48px;
}
/* For sub-pages: smaller hero */
.hero.sub{ min-height:50vh; padding:60px 24px 80px; }
.hero.sub h1{ font-size:clamp(1.8rem, 4vw, 3rem); }
.hero.sub .lead{
  font-size:clamp(1rem, 1.6vw, 1.2rem);
  color:#1a4d80;
  max-width:760px; margin:0 auto;
}

/* Premium button */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:18px 38px;
  color:#fff;
  background:linear-gradient(135deg,#4ba3e0 0%,#2e7fc4 100%);
  border:none; border-radius:999px;
  font-size:1.05rem; font-weight:700; letter-spacing:.05em;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(46,127,196,.35), inset 0 1px 0 rgba(255,255,255,.4);
  transition:all .4s cubic-bezier(.2,.8,.2,1);
  position:relative;
  overflow:hidden;
}
.btn::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,#5cb5f0 0%,#3a93d9 100%);
  opacity:0; transition:opacity .4s ease;
}
.btn span{ position:relative; z-index:1; }
.btn:hover{
  transform:translateY(-5px) scale(1.02);
  box-shadow:0 18px 40px rgba(46,127,196,.5), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn:hover::before{ opacity:1; }
.btn:active{ transform:translateY(-2px) scale(1.0); }

/* ============ Sections ============ */
section{ padding:90px 24px; position:relative; }
.container{ max-width:1080px; margin:0 auto; }

.section-title{ text-align:center; margin-bottom:60px; }
.section-title h2{
  font-size:clamp(1.6rem,3vw,2.2rem);
  color:#0e3a66; font-weight:700; letter-spacing:.05em;
  margin-bottom:6px;
}
.section-title .en{
  color:#7aaad1; font-size:.85rem; letter-spacing:.4em; font-weight:600;
}
.section-title::after{
  content:""; display:block; width:60px; height:3px;
  background:linear-gradient(90deg,#7ec0e8,#3a93d9);
  border-radius:3px; margin:18px auto 0;
}

.card{
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:24px;
  padding:40px;
  box-shadow:0 12px 40px rgba(120,170,210,.15);
}
.card + .card{ margin-top:24px; }
.card p{ font-size:1.02rem; color:#2d5780; }
.card p + p{ margin-top:14px; }

/* Profile / data table */
.profile-table{ width:100%; border-collapse:separate; border-spacing:0; margin-top:10px; }
.profile-table th, .profile-table td{
  padding:18px 20px;
  text-align:left;
  border-bottom:1px solid rgba(143,191,228,.25);
  vertical-align:top;
}
.profile-table th{
  width:30%;
  color:#1a4d80; font-weight:700;
  background:rgba(231,243,255,.4);
  border-radius:10px 0 0 10px;
}
.profile-table td{ color:#2d5780; }
.profile-table tr:last-child th, .profile-table tr:last-child td{ border-bottom:none; }

/* Comparison tables (sharoshi) */
.compare-table{ width:100%; border-collapse:separate; border-spacing:0; }
.compare-table th, .compare-table td{
  padding:14px 16px;
  text-align:left;
  border-bottom:1px solid rgba(143,191,228,.25);
  font-size:.95rem;
}
.compare-table thead th{
  background:rgba(126,192,232,.18);
  color:#0e3a66; font-weight:700;
  text-align:center;
}
.compare-table td.num, .compare-table th.num{ text-align:center; }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td{ border-bottom:none; }
.compare-table tbody th{
  width:46%;
  color:#1a4d80; font-weight:600;
  background:rgba(231,243,255,.3);
}

/* Service cards */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px;
}
.service-card{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:22px;
  padding:36px 26px;
  text-align:center;
  text-decoration:none;
  color:#1a4d80;
  transition:all .45s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 8px 26px rgba(120,170,210,.15);
  position:relative;
  overflow:hidden;
}
.service-card::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(126,192,232,.2),rgba(58,147,217,.1));
  opacity:0; transition:opacity .45s ease;
}
.service-card > *{ position:relative; z-index:1; }
.service-card:hover{
  transform:translateY(-10px);
  box-shadow:0 22px 44px rgba(46,127,196,.25);
  border-color:rgba(126,192,232,.6);
}
.service-card:hover::before{ opacity:1; }
.service-card .icon{
  font-size:2.4rem; display:block; margin-bottom:14px;
  transition:transform .45s ease;
}
.service-card:hover .icon{ transform:scale(1.15) translateY(-4px); }
.service-card h3{ font-size:1.15rem; margin-bottom:8px; color:#0e3a66; }
.service-card p{ font-size:.92rem; color:#5577a3; }

/* Point cards (4 highlights on gyomu) */
.point-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px;
}
.point-card{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:22px;
  padding:32px 26px;
  box-shadow:0 8px 26px rgba(120,170,210,.15);
  transition:all .4s ease;
}
.point-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 38px rgba(46,127,196,.22);
}
.point-card .icon{ font-size:2rem; display:block; margin-bottom:12px; }
.point-card h3{ font-size:1.1rem; color:#0e3a66; margin-bottom:10px; }
.point-card p{ font-size:.95rem; color:#2d5780; }

/* Numbered detail list */
.detail-list{ display:grid; gap:20px; }
.detail-item{
  display:grid; grid-template-columns:auto 1fr; gap:22px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:20px;
  padding:26px 30px;
  box-shadow:0 8px 22px rgba(120,170,210,.12);
  transition:all .4s ease;
}
.detail-item:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(46,127,196,.18); }
.detail-item .num{
  width:54px; height:54px; border-radius:50%;
  background:linear-gradient(135deg,#4ba3e0,#2e7fc4);
  color:#fff; font-weight:700; font-size:1.3rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(46,127,196,.35);
  flex-shrink:0;
}
.detail-item .body h3{
  color:#0e3a66; font-size:1.15rem; margin-bottom:8px;
}
.detail-item .body p{ color:#2d5780; }

/* Price plan cards (gyomu, shinkoku) */
.plan-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
}
.plan-card{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:24px;
  padding:36px 28px;
  text-align:center;
  box-shadow:0 10px 28px rgba(120,170,210,.18);
  position:relative;
  transition:all .4s ease;
}
.plan-card:hover{ transform:translateY(-6px); box-shadow:0 18px 38px rgba(46,127,196,.25); }
.plan-card h3{
  color:#0e3a66; font-size:1.25rem; margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:2px solid rgba(126,192,232,.4);
}
.plan-card .price{
  font-size:1.8rem; color:#1a4d80; font-weight:700;
  margin:10px 0 6px;
}
.plan-card .price .unit{ font-size:1rem; font-weight:500; color:#5577a3;}

/* Side-by-side 個人/法人 price layout */
.plan-card .price-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:14px 0 10px;
}
.plan-card .price-item{
  text-align:center;
  padding:14px 8px;
  border-radius:14px;
  background:rgba(231,243,255,.4);
  border:1px solid rgba(126,192,232,.25);
}
.plan-card .price-label{
  display:block;
  font-size:.85rem;
  color:#5577a3;
  font-weight:600;
  margin-bottom:4px;
  letter-spacing:.05em;
}
.plan-card .price-val{
  display:block;
  font-size:1.55rem;
  color:#1a4d80;
  font-weight:700;
  line-height:1.25;
}
.plan-card .price-val .unit{
  display:block;
  font-size:.85rem;
  font-weight:500;
  color:#5577a3;
  margin-top:2px;
}
@media (max-width:480px){
  .plan-card .price-row{ gap:10px; }
  .plan-card .price-val{ font-size:1.25rem; }
}

/* Single-line plan price (個人 264,000円 ／ 法人 330,000円 ／年) */
.plan-price-line{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:center;
  gap:4px 6px;
  margin:18px 0 4px;
  color:#1a4d80;
  font-weight:700;
}
.plan-price-line .kind{
  font-size:.78rem;
  color:#5577a3;
  font-weight:600;
  letter-spacing:.05em;
  margin-right:2px;
}
.plan-price-line .amt{
  font-size:1.5rem;
  letter-spacing:.01em;
}
.plan-price-line .sep{
  color:#7aaad1;
  font-weight:400;
  margin:0 4px;
  font-size:1.2rem;
}
.plan-price-line .per{
  font-size:.95rem;
  font-weight:500;
  color:#5577a3;
  margin-left:6px;
}
@media (max-width:480px){
  .plan-price-line .amt{ font-size:1.2rem; }
  .plan-price-line{ gap:2px 4px; }
}

/* 「決算料・年末調整料 0円」を料金の下に強調表示 */
.plan-highlight{
  text-align:center;
  font-size:1.05rem;
  font-weight:700;
  color:#0e3a66;
  background:rgba(126,192,232,.15);
  padding:10px 16px;
  border-radius:10px;
  margin:14px auto 18px;
  border:1px dashed rgba(126,192,232,.45);
}

/* 「（税抜）」表記をカード右下に揃える */
.tax-note{
  display:block;
  text-align:right;
  font-size:.82rem;
  color:#5577a3;
  margin-top:18px;
  padding-top:12px;
  border-top:1px dashed rgba(126,192,232,.35);
}
.plan-card .note{ font-size:.85rem; color:#5577a3; margin-bottom:14px; }
.plan-card .desc{ font-size:.95rem; color:#2d5780; margin:10px 0 16px; }
.plan-card ul{
  list-style:none; padding:0; text-align:left;
  border-top:1px dashed rgba(126,192,232,.4);
  padding-top:14px;
}
.plan-card ul li{
  font-size:.93rem; color:#2d5780;
  padding:6px 0 6px 22px;
  position:relative;
}
.plan-card ul li::before{
  content:"✓"; position:absolute; left:0; top:6px;
  color:#3a93d9; font-weight:700;
}

/* ============ Contact form ============ */
.contact-form{ display:grid; gap:18px; }
.form-row{ display:grid; gap:8px; }
/* minmax(0, 1fr) guarantees columns stay exactly equal width regardless of
   inner content length (e.g. label text differences) */
.form-row.two{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:18px;
  align-items:start;
}
.form-row label{
  font-weight:700; color:#1a4d80; font-size:.95rem;
  display:flex; align-items:center; gap:8px;
}
.form-row .required{
  display:inline-block; font-size:.7rem; color:#fff;
  background:#d24a4a; padding:2px 8px; border-radius:4px;
  letter-spacing:.05em;
}
.form-row .optional{
  display:inline-block; font-size:.7rem; color:#5577a3;
  background:rgba(143,191,228,.25); padding:2px 8px; border-radius:4px;
}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row select,
.form-row textarea{
  width:100%;
  min-width:0;          /* allow shrink within grid columns */
  display:block;
  box-sizing:border-box;
  padding:13px 16px;
  font-size:1rem;
  font-family:inherit;
  color:#1a4d80;
  background:rgba(255,255,255,.85);
  border:1.5px solid rgba(143,191,228,.5);
  border-radius:12px;
  transition:all .25s ease;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  outline:none;
  border-color:#3a93d9;
  background:#fff;
  box-shadow:0 0 0 4px rgba(126,192,232,.25);
}
.form-row textarea{ min-height:160px; resize:vertical; line-height:1.7; }
.form-row .hint{ font-size:.8rem; color:#5577a3; }

.privacy-box{
  background:rgba(231,243,255,.5);
  border:1px solid rgba(143,191,228,.3);
  border-radius:14px;
  padding:18px 22px;
  font-size:.88rem;
  color:#2d5780;
  line-height:1.75;
}
.privacy-box h4{ color:#0e3a66; margin-bottom:8px; }
.privacy-check{
  display:flex; align-items:flex-start; gap:10px;
  padding:8px 0;
  cursor:pointer;
  font-size:.95rem; color:#2d5780;
}
.privacy-check input{
  margin-top:5px;
  width:18px; height:18px;
  accent-color:#3a93d9;
  cursor:pointer;
}
.form-submit{ text-align:center; margin-top:10px; }
.form-submit button{ font-family:inherit; cursor:pointer; }

@media (max-width:600px){
  .form-row.two{ grid-template-columns:1fr; }
}

/* Note block */
.note-block{
  background:rgba(231,243,255,.55);
  border-left:4px solid #7ec0e8;
  border-radius:0 14px 14px 0;
  padding:18px 22px;
  margin-top:24px;
  color:#2d5780;
  font-size:.94rem;
}
.note-block p + p{ margin-top:8px; }

/* Access */
.access-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.access-info h3{
  color:#0e3a66; margin-bottom:10px; font-size:1.1rem;
  padding-bottom:8px; border-bottom:2px solid rgba(126,192,232,.4);
}
.access-info p{ color:#2d5780; margin-bottom:18px; }
.map-wrap{
  border-radius:20px; overflow:hidden;
  box-shadow:0 12px 30px rgba(120,170,210,.25);
  border:3px solid rgba(255,255,255,.9);
}
.map-wrap iframe{ width:100%; height:320px; border:0; display:block; }

/* Footer */
footer{
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(186,219,243,.5));
  padding:40px 24px 30px;
  text-align:center;
  color:#3568a0;
  font-size:.88rem;
}
footer .addr{ margin-bottom:12px; }

/* ============ Scroll reveal ============ */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 1s ease, transform 1s cubic-bezier(.2,.8,.2,1);
  will-change:opacity,transform;
}
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal.delay-1{ transition-delay:.12s; }
.reveal.delay-2{ transition-delay:.24s; }
.reveal.delay-3{ transition-delay:.36s; }
.reveal.delay-4{ transition-delay:.48s; }

/* Wide-screen helper for tables that overflow on mobile */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:12px;
}

/* ============ Responsive ============ */
@media (max-width:900px){
  .header-inner{ justify-content:center; padding:12px 16px; }
  nav{ order:3; width:100%; }
  nav ul{ justify-content:center; }
  .tel-top{ order:2; }
}

@media (max-width:768px){
  /* Header */
  .header-inner{ padding:10px 12px; gap:8px; }
  .brand{ gap:10px; }
  .brand .tkc-logo{ height:40px; }
  .brand .ja{ font-size:1.0rem; letter-spacing:.03em; }
  .brand .en{ font-size:.6rem; letter-spacing:.1em; }
  .tel-top{ font-size:.82rem; padding:6px 12px; }
  nav a{ font-size:.8rem; padding:6px 10px; }

  /* Hero */
  .hero{ min-height:78vh; padding:60px 16px 80px; }
  .hero h1, .hero h2{ font-size:1.45rem; line-height:1.45; margin-bottom:14px; }
  .hero h2{ margin-bottom:32px; }
  .hero.sub{ min-height:42vh; padding:48px 16px 60px; }
  .hero.sub h1{ font-size:1.7rem; }
  .hero.sub .lead{ font-size:1rem; padding:0 6px; }
  .badge{ font-size:.78rem; padding:6px 18px; }
  .btn{ padding:14px 26px; font-size:.95rem; }

  /* Sections */
  section{ padding:60px 16px; }
  .section-title{ margin-bottom:40px; }
  .section-title h2{ font-size:1.4rem; }
  .section-title .en{ font-size:.72rem; letter-spacing:.3em; }
  .card{ padding:24px 18px; border-radius:18px; }

  /* Tables — narrower padding & font, plus horizontal scroll for wide tables */
  .profile-table th, .profile-table td{ font-size:.88rem; padding:12px 10px; display:block; width:100% !important; border-radius:0 !important;}
  .profile-table th{
    background:rgba(231,243,255,.55);
    border-bottom:none;
    border-radius:8px 8px 0 0 !important;
    padding-bottom:6px;
  }
  .profile-table td{
    padding-top:8px;
    border-bottom:1px solid rgba(143,191,228,.25);
  }
  .profile-table tr:last-child td{ border-bottom:none; }

  .compare-table{ font-size:.82rem; min-width:420px; }
  .compare-table th, .compare-table td{ padding:10px 8px; }
  .compare-table tbody th{ width:auto; }

  /* Plans */
  .plan-grid{ gap:18px; }
  .plan-card{ padding:28px 22px; }
  .plan-card h3{ font-size:1.1rem; }
  .plan-card .price{ font-size:1.4rem; }

  /* Details */
  .detail-item{ grid-template-columns:1fr; gap:12px; padding:22px 20px; }
  .detail-item .num{ margin:0 auto; width:46px; height:46px; font-size:1.15rem;}
  .detail-item .body{ text-align:center; }

  /* Service / point cards */
  .services-grid, .point-grid{ gap:16px; }
  .service-card, .point-card{ padding:26px 20px; }

  /* Access */
  .access-grid{ grid-template-columns:1fr; gap:24px; }
  .map-wrap iframe{ height:260px; }
}

/* Smartphone — extra tight */
@media (max-width:480px){
  .brand .en{ display:none; }
  .tel-top{ font-size:.78rem; padding:6px 10px; }
  .hero h1, .hero h2{ font-size:1.25rem; }
  .hero.sub h1{ font-size:1.45rem; }
  .section-title h2{ font-size:1.25rem; }
  .plan-card .price{ font-size:1.25rem; }
  .plan-card .price .unit{ font-size:.85rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ====================================================
   Sunlight theme — applied to the body of sharoshi.html
   Warm cream/yellow at top, fades to white going down.
   ==================================================== */
/* Lemon-yellow palette — base color #ffff99, fading to white */
body.theme-sunlight{
  background:linear-gradient(180deg,
    #ffff99 0%,
    #ffffae 12%,
    #ffffc2 25%,
    #ffffd4 40%,
    #ffffe4 55%,
    #ffffee 70%,
    #fffff6 85%,
    #ffffff 100%);
}
body.theme-sunlight .sky::after{
  /* Cool lemon glow */
  top:-220px; right:auto; left:50%; transform:translateX(-50%);
  width:900px; height:900px;
  background:radial-gradient(circle,rgba(255,255,180,.7) 0%,rgba(255,255,180,0) 70%);
}
/* Sharoshi page uses the same white clouds as the other pages */
body.theme-sunlight .badge{
  background:linear-gradient(135deg,#fffaeb,#fff5d0);
  color:#7a5b00;
  box-shadow:0 4px 16px rgba(220,180,60,.25);
}
body.theme-sunlight .hero h1, body.theme-sunlight .hero h2{ color:#5a4200; }
body.theme-sunlight .hero .lead{ color:#7a5b00; }
body.theme-sunlight nav a{ color:#7a5b00; }
body.theme-sunlight nav a:hover, body.theme-sunlight nav a.current{
  background:rgba(255,255,255,.85);
  box-shadow:0 4px 14px rgba(220,180,60,.25);
}
body.theme-sunlight .brand .ja{ color:#7a5b00; }
body.theme-sunlight .brand .en{ color:#b89740; }
body.theme-sunlight .tel-top{
  color:#7a5b00;
  border-color:rgba(220,180,60,.45);
}
body.theme-sunlight .tel-top:hover{ box-shadow:0 6px 18px rgba(220,180,60,.3); }
body.theme-sunlight header{
  background:rgba(255,255,255,.92);    /* TKCロゴの白背景に合わせて白寄りに */
  border-bottom:1px solid rgba(255,250,220,.9);
  box-shadow:0 4px 24px rgba(220,180,60,.12);
}
body.theme-sunlight .section-title h2{ color:#5a4200; }
body.theme-sunlight .section-title .en{ color:#c79b30; }
body.theme-sunlight .section-title::after{
  background:linear-gradient(90deg,#ffd96b,#e0a922);
}
body.theme-sunlight .card{
  background:rgba(255,253,242,.78);
  border:1px solid rgba(255,250,225,.95);
  box-shadow:0 12px 40px rgba(220,180,60,.15);
}
body.theme-sunlight .card p,
body.theme-sunlight .access-info p,
body.theme-sunlight .profile-table td,
body.theme-sunlight .compare-table td,
body.theme-sunlight .detail-item .body p,
body.theme-sunlight .point-card p,
body.theme-sunlight .service-card p,
body.theme-sunlight .plan-card .desc{ color:#6a4d00; }
body.theme-sunlight .profile-table th{
  background:rgba(255,243,200,.55);
  color:#7a5b00;
}
body.theme-sunlight .profile-table th,
body.theme-sunlight .profile-table td,
body.theme-sunlight .compare-table th,
body.theme-sunlight .compare-table td{
  border-bottom-color:rgba(220,180,60,.25);
}
body.theme-sunlight .compare-table thead th{
  background:rgba(255,225,130,.35);
  color:#5a4200;
}
body.theme-sunlight .compare-table tbody th{
  background:rgba(255,243,200,.45);
  color:#7a5b00;
}
body.theme-sunlight .access-info h3{
  color:#5a4200;
  border-bottom-color:rgba(220,180,60,.45);
}
body.theme-sunlight .btn{
  background:linear-gradient(135deg,#f5b942 0%,#e0a015 100%);
  box-shadow:0 10px 30px rgba(200,140,30,.4), inset 0 1px 0 rgba(255,255,255,.5);
}
body.theme-sunlight .btn::before{
  background:linear-gradient(135deg,#ffc758 0%,#f0ad28 100%);
}
body.theme-sunlight .btn:hover{
  box-shadow:0 18px 40px rgba(200,140,30,.5), inset 0 1px 0 rgba(255,255,255,.6);
}
body.theme-sunlight .service-card, body.theme-sunlight .point-card,
body.theme-sunlight .detail-item, body.theme-sunlight .plan-card{
  background:rgba(255,253,242,.82);
  border:1px solid rgba(255,250,225,.95);
  box-shadow:0 8px 26px rgba(220,180,60,.15);
  color:#5a4200;
}
body.theme-sunlight .service-card{ color:#5a4200; }
body.theme-sunlight .service-card:hover{
  box-shadow:0 22px 44px rgba(200,140,30,.25);
  border-color:rgba(245,185,66,.5);
}
body.theme-sunlight .service-card::before{
  background:linear-gradient(135deg,rgba(255,217,107,.25),rgba(224,169,34,.12));
}
body.theme-sunlight .service-card h3,
body.theme-sunlight .point-card h3,
body.theme-sunlight .detail-item .body h3,
body.theme-sunlight .plan-card h3{ color:#5a4200; }
body.theme-sunlight .point-card:hover,
body.theme-sunlight .detail-item:hover,
body.theme-sunlight .plan-card:hover{
  box-shadow:0 18px 38px rgba(200,140,30,.22);
}
body.theme-sunlight .detail-item .num{
  background:linear-gradient(135deg,#f5b942,#e0a015);
  box-shadow:0 6px 14px rgba(200,140,30,.35);
}
body.theme-sunlight .plan-card .price{ color:#7a5b00; }
body.theme-sunlight .plan-card .price .unit,
body.theme-sunlight .plan-card .note,
body.theme-sunlight .service-card p,
body.theme-sunlight .point-card p{ color:#8a6a1a; }
body.theme-sunlight .plan-card ul li::before{ color:#e0a015; }
body.theme-sunlight .plan-card h3{ border-bottom-color:rgba(220,180,60,.4); }
body.theme-sunlight .plan-card ul{ border-top-color:rgba(220,180,60,.4); }
body.theme-sunlight .note-block{
  background:rgba(255,245,205,.55);
  border-left-color:#f5b942;
  color:#6a4d00;
}
body.theme-sunlight footer{
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,245,205,.55));
  color:#7a5b00;
}

/* ==================================
   Grass + dandelion decoration (sub)
   Sits just above the footer
   ================================== */
.ground-deco{
  position:relative;
  width:100%;
  height:240px;          /* タンポポ全体が入る高さを確保 */
  margin-top:40px;
  overflow:visible;      /* 念のため切れないように */
  pointer-events:none;
}
.ground-deco > svg:first-child{
  /* 草の波の SVG は下端に貼り付け */
  position:absolute; bottom:0; left:0;
  width:100%; height:180px; display:block;
}
.ground-deco .dandelion{
  position:absolute;
  right:10px;            /* ぐっと右端へ */
  bottom:0;
  width:110px;           /* 控えめサイズ */
  height:132px;          /* viewBox 200x240 比 */
  animation: dandelion-sway 4s ease-in-out infinite;
  transform-origin:bottom center;
}
@keyframes dandelion-sway{
  0%,100%{ transform:rotate(-2deg); }
  50%   { transform:rotate(2deg); }
}
@media (max-width:768px){
  .ground-deco{ height:200px; }
  .ground-deco > svg:first-child{ height:150px; }
  .ground-deco .dandelion{ width:90px; height:108px; right:8px; }
}
@media (max-width:480px){
  .ground-deco{ height:170px; }
  .ground-deco > svg:first-child{ height:120px; }
  .ground-deco .dandelion{ width:70px; height:84px; right:6px; }
}