/* =========================================================================
   kosimizu.net 共通の見た目

   トップは piyotto のイラスト、/apps/ は Kosimizu の事業。
   名前は分けるが、見た目は1つのサイトとして通す。
   紺（#1a1a2e）の帯は privacy.html と tools.kosimizu.net にも共通。
   ========================================================================= */
:root{
  --navy:#1a1a2e;
  --navy2:#16213e;
  --navy-hover:#2d2d5e;
  --card:#f4f7fc;
  --line:#e0e6f0;
  --text:#333;
  --text2:#555;
  --text3:#666;
  --muted:#7a8aaa;
  --nav-fg:#cdd5e0;
  --accent:#eb2d45;
  --sans:'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}
*{margin:0; padding:0; box-sizing:border-box}
body{font-family:var(--sans); color:var(--text); background:#fff; line-height:1.7}
img{max-width:100%; height:auto}

.site-header{background:var(--navy); color:#fff; padding:34px 20px 26px; text-align:center}
.site-header h1{font-size:2rem; letter-spacing:.08em; margin-bottom:8px}
.site-header h1 a{color:#fff; text-decoration:none}
.site-header p{font-size:.9rem; color:#aab4c8; letter-spacing:.04em}

.site-nav{background:var(--navy2); display:flex; justify-content:center;
          gap:28px; padding:12px 20px; flex-wrap:wrap}
.site-nav a{color:var(--nav-fg); text-decoration:none; font-size:.86rem;
            letter-spacing:.04em; transition:color .2s}
.site-nav a:hover, .site-nav a[aria-current="page"]{color:#fff}

.site-footer{background:var(--navy); color:var(--muted); text-align:center;
             padding:24px 20px; font-size:.8rem}
.site-footer a{color:#aab4c8; text-decoration:none}
.site-footer a:hover{color:#fff}
.site-footer .links{margin-bottom:8px}
.site-footer .links a{margin:0 12px}

section{max-width:900px; margin:0 auto; padding:48px 24px}
section h2{font-size:1.4rem; color:var(--navy); margin-bottom:20px;
           padding-bottom:9px; border-bottom:2px solid var(--line)}
section p{line-height:1.9; color:var(--text2); font-size:.95rem}
.divider{background:#f0f4fa}

/* 本文中のリンク。指定を忘れるとブラウザ既定の青のままになり、
   紺と赤の配色の中でそこだけ浮く。帯とボタンは別に色を持つので外す。 */
section a:not(.btn){
  color:var(--navy); text-decoration:underline;
  text-underline-offset:2px; text-decoration-thickness:1px;
}
section a:not(.btn):hover{color:var(--accent)}

.btn{display:inline-block; background:var(--navy); color:#fff; padding:11px 26px;
     border-radius:6px; text-decoration:none; font-size:.89rem; letter-spacing:.04em;
     transition:background .2s; border:none; cursor:pointer; font-family:inherit}
.btn:hover{background:var(--navy-hover)}

/* /apps/ 用のカード */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px; margin-top:6px}
.card{background:var(--card); border-radius:10px; padding:26px 24px;
      display:flex; flex-direction:column; gap:12px}
.card .icon{font-size:1.9rem}
.card h3{font-size:1.05rem; color:var(--navy)}
.card p{font-size:.89rem; line-height:1.8; color:var(--text3); flex:1 1 auto}
.card .btn{align-self:flex-start}

.wide-card{background:var(--card); border-radius:10px; padding:28px 24px;
           display:flex; align-items:center; justify-content:space-between;
           gap:20px; flex-wrap:wrap}
.wide-card h3{font-size:1.05rem; color:var(--navy); margin-bottom:10px}
.wide-card p{font-size:.9rem; line-height:1.8; color:var(--text3)}
.wide-card .btn{flex-shrink:0}

.contact-box{background:var(--card); border-radius:10px; padding:32px; text-align:center}
.contact-box p{margin-bottom:16px}

@media (max-width:700px){
  .site-header{padding:22px 16px 18px}
  .site-header h1{font-size:1.5rem; margin-bottom:5px}
  .site-header p{font-size:.8rem}
  .site-nav{gap:14px; padding:9px 14px}
  .site-nav a{font-size:.78rem}
  .site-footer{padding:18px 16px}
  section{padding:32px 18px}
}

/* 印刷（営業先へPDFで送るとき）。帯と操作系を落として紙に収める */
@media print{
  .site-nav, .site-footer, .no-print, .askbar, #cover{display:none !important}
  .site-header{background:none; color:#000; padding:0 0 12px; text-align:left}
  .site-header h1, .site-header h1 a{color:#000}
  .site-header p{color:#444}
  body{line-height:1.5}
  section{padding:12px 0; max-width:none}
  .gallery{grid-template-columns:repeat(3,1fr) !important}
  a{color:#000; text-decoration:none}
}