@charset "utf-8";

:root{
  --ink:#2f3135;
  --sub:#6e747b;
  --line:#dedbd2;
  --line-soft:#ece8df;
  --paper:#fffdf9;
  --cream:#f7f3ea;
  --blue:#7ea7c8;
  --blue-soft:#eef7fb;
  --green:#92ad73;
  --green-soft:#f3f8ee;
  --brown:#b38d6e;
  --brown-soft:#fbf5ee;
  --purple:#9291bf;
  --purple-soft:#f5f4fb;
  --nav:248px;
  --w:1180px;
}
*{box-sizing:border-box}
body{
  margin:0;
  color:var(--ink);
  font:15px/1.9 "Yu Mincho","YuMincho","Hiragino Mincho ProN","Meiryo",serif;
  letter-spacing:.03em;
  background:linear-gradient(180deg,#fbfaf6 0%,#f3efe6 100%);
}
a{color:#527ca7;text-decoration:underline;text-underline-offset:3px}
a:hover{color:#9b6a4e}
.site-header,.layout,footer{max-width:var(--w);margin-inline:auto;background:rgba(255,255,255,.84)}
.site-header{border-bottom:1px solid var(--line);box-shadow:0 8px 30px rgba(90,80,64,.08)}
.header-inner{position:relative;min-height:156px;padding:28px 36px;overflow:hidden;display:flex;align-items:center;gap:34px}
.brand{display:block;min-width:430px;position:relative;z-index:2}

.brand-type{margin:0 0 6px 5px;color:#78a7d2;font-size:1.55rem;line-height:1.2;font-weight:500;letter-spacing:.20em;text-shadow:0 1px 0 rgba(255,255,255,.9)}
.brand-name{font-size:3rem;line-height:1.15;color:#22252a;letter-spacing:.08em;white-space:nowrap;font-weight:400;text-shadow:0 1px 0 rgba(255,255,255,.8)}
.brand-sub{margin-top:10px;color:#8c8f94;font:14px/1.4 Georgia,serif;letter-spacing:.30em}
.header-copy{position:relative;z-index:2;max-width:320px;margin:0;color:#3f4247;font-size:1.08rem;line-height:2.05;border-left:1px solid #d4d1ca;padding-left:34px}
.header-scene{position:absolute;right:0;bottom:0;width:52%;height:100%;opacity:.9;background:
  radial-gradient(ellipse at 78% 24%,rgba(182,214,236,.55),transparent 34%),
  linear-gradient(160deg,transparent 0 40%,rgba(167,198,134,.35) 41% 45%,transparent 46%),
  linear-gradient(178deg,transparent 0 72%,rgba(137,174,107,.32) 73% 78%,transparent 79%),
  repeating-linear-gradient(90deg,transparent 0 38px,rgba(122,160,190,.18) 39px 41px,transparent 42px 80px);
}
.header-scene:before{content:"";position:absolute;right:4%;bottom:30%;width:76%;height:2px;background:#91b5d1;box-shadow:0 12px 0 rgba(145,181,209,.65),0 24px 0 rgba(145,181,209,.42);transform:skewX(-18deg)}
.header-scene:after{content:"";position:absolute;right:0;bottom:0;width:80%;height:46%;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.75))}
.layout{display:grid;grid-template-columns:var(--nav) 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 10px 28px rgba(90,80,64,.08)}
.sidebar{background:linear-gradient(180deg,#fffdf9,#f8f4eb);border-right:1px solid var(--line);min-height:680px}
.nav-section{border-bottom:1px solid var(--line-soft);padding:18px 22px}
.nav-title{display:flex;align-items:center;gap:12px;margin-bottom:10px;color:#2f3135;font-size:1.05rem;font-weight:600;letter-spacing:.05em}
.nav-icon{width:28px;text-align:center;color:#7ea7c8;font-family:"Meiryo",sans-serif;font-size:1.35rem}
.nav-list{margin:0;padding:0 0 0 46px;list-style:none}
.nav-list li{position:relative;border-top:1px solid var(--line-soft)}
.nav-list li:before{content:"›";position:absolute;left:-16px;top:7px;color:#9a9a9a}
.nav-list a{display:block;padding:7px 2px;color:#43464a;text-decoration:none}
.nav-list a:hover{color:#527ca7;background:rgba(126,167,200,.08)}
.content{background:rgba(255,255,255,.92);min-height:680px;padding:36px 40px 42px;overflow-x:auto}
h1{margin:0 0 22px;padding:0 0 13px;color:#25272b;font-size:1.55rem;font-weight:500;line-height:1.6;border-bottom:3px solid #8fb6d3;letter-spacing:.08em}
h2{margin:28px 0 12px;padding-left:14px;color:#303235;font-size:1.15rem;font-weight:500;border-left:5px solid #8fb6d3;line-height:1.6}
h3{margin:0 0 10px;color:#527ca7;font-size:1.25rem;font-weight:500}.top-lead{display:grid;grid-template-columns:1fr 360px;gap:30px;align-items:center;margin-bottom:30px}.top-lead p{margin:0;font-size:1.05rem;line-height:2.1}.watercolor-panel{height:185px;border-radius:6px;background:radial-gradient(circle at 24% 34%,#a9c783 0 8%,transparent 9%),radial-gradient(circle at 16% 58%,rgba(169,199,131,.5) 0 16%,transparent 17%),linear-gradient(165deg,transparent 0 46%,rgba(126,167,200,.28) 47% 52%,transparent 53%),linear-gradient(175deg,rgba(255,255,255,0) 0 60%,rgba(145,181,209,.22) 61% 75%,transparent 76%),linear-gradient(180deg,#f5fbff,#fbfff7);border:1px solid #edf0ee;box-shadow:inset 0 0 30px rgba(255,255,255,.9)}
.news-block{margin:20px 0 30px}.news-list{display:grid;grid-template-columns:120px 1fr;margin:0;border-top:1px solid var(--line)}.news-list dt,.news-list dd{margin:0;padding:8px 10px;border-bottom:1px solid var(--line)}.news-list dt{font-family:Georgia,serif;color:#575a5d}.news-list dd{color:#527ca7;text-decoration:underline;text-underline-offset:3px}.service-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:26px 0}.service-card{min-height:170px;padding:22px 18px;text-align:center;border:1px solid var(--line);background:#fff;border-radius:2px}.service-card p{margin:0 0 18px;text-align:left}.service-card .more{display:inline-block;padding:5px 24px;border:1px solid currentColor;font-size:.9rem}.service-card.blue{background:var(--blue-soft);color:#527ca7}.service-card.green{background:var(--green-soft);color:#6e8d4f}.service-card.brown{background:var(--brown-soft);color:#9b6a4e}.service-card.purple{background:var(--purple-soft);color:#6867a0}
strong{font-weight:600;color:#222}img{max-width:100%;height:auto}table{width:100%;border-collapse:collapse;margin:14px 0 24px;background:#fff;border:1px solid #cbc7bd;font-family:"Meiryo","Yu Gothic",sans-serif;font-size:14px;letter-spacing:0}th,td{border:1px solid #cbc7bd;padding:8px 10px;vertical-align:top}th,table tr:first-child td{background:#f2f7fb;color:#333;font-weight:600}td:empty::after,th:empty::after{content:"\00a0"}
footer{padding:17px 34px;color:#77716c;font-size:12px;text-align:right;border-top:0;background:#f7f3ea}

/* ===== スマホ対応：PCの体裁を保ったまま、幅が狭い時だけ見やすく切替 ===== */
@media (max-width:850px){
  :root{
    --nav:100%;
  }

  body{
    font-size:14px;
    line-height:1.85;
    letter-spacing:.02em;
    background:#fbfaf6;
  }

  .site-header,
  .layout,
  footer{
    width:100%;
    max-width:none;
    margin:0;
  }

  .site-header{
    box-shadow:0 4px 18px rgba(90,80,64,.08);
  }

  .header-inner{
    display:block;
    min-height:auto;
    padding:24px 18px 28px;
    text-align:center;
  }

  .brand{
    display:block;
    min-width:0;
    width:100%;
    margin:0 auto;
  }

  .brand-type{
    margin:0 0 7px;
    font-size:1.05rem;
    letter-spacing:.14em;
    color:#78a7d2;
    white-space:normal;
  }

  .brand-name{
    font-size:2rem;
    line-height:1.25;
    letter-spacing:.06em;
    white-space:normal;
  }

  .brand-sub{
    margin-top:8px;
    font-size:11px;
    letter-spacing:.20em;
    word-break:keep-all;
  }

  .header-copy{
    max-width:none;
    margin:18px auto 0;
    padding:14px 12px 0;
    border-left:0;
    border-top:1px solid #d4d1ca;
    font-size:.95rem;
    line-height:1.8;
  }

  .header-scene{
    width:100%;
    height:100%;
    opacity:.22;
  }

  .layout{
    display:block;
    border-top:1px solid var(--line);
  }

  .sidebar{
    min-height:0;
    border-right:0;
    border-bottom:1px solid var(--line);
    background:#fffdf9;
  }

  .sidebar::before{
    content:"MENU";
    display:block;
    padding:10px 18px;
    color:#6e747b;
    font:12px/1.4 Georgia,serif;
    letter-spacing:.22em;
    background:#f7f3ea;
    border-bottom:1px solid var(--line-soft);
  }

  .nav-section{
    padding:12px 16px;
  }

  .nav-title{
    margin-bottom:6px;
    font-size:.98rem;
  }

  .nav-icon{
    width:24px;
    font-size:1.1rem;
  }

  .nav-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px 10px;
    padding-left:0;
  }

  .nav-list li{
    border-top:0;
  }

  .nav-list li::before{
    display:none;
  }

  .nav-list a{
    padding:8px 10px;
    border:1px solid var(--line-soft);
    border-radius:8px;
    background:rgba(255,255,255,.72);
    font-size:.92rem;
    text-align:left;
  }

  .content{
    min-height:0;
    padding:24px 16px 32px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  h1{
    font-size:1.28rem;
    line-height:1.55;
    margin-bottom:18px;
  }

  h2{
    font-size:1.05rem;
  }

  .top-lead{
    display:block;
    margin-bottom:24px;
  }

  .top-lead p{
    font-size:1rem;
    line-height:1.9;
  }

  .watercolor-panel{
    height:150px;
    margin-top:18px;
  }

  img{
    max-width:100%;
    height:auto;
  }

  table{
    min-width:640px;
    font-size:13px;
  }

  th,td{
    padding:7px 8px;
  }

  footer{
    padding:14px 16px;
    text-align:center;
  }
}

@media (max-width:520px){
  .brand-name{
    font-size:1.65rem;
  }

  .brand-type{
    font-size:.95rem;
  }

  .brand-sub{
    font-size:10px;
    letter-spacing:.14em;
  }

  .nav-list{
    grid-template-columns:1fr;
  }

  .content{
    padding-inline:14px;
  }

  table{
    min-width:560px;
  }
}