:root{
  --nc-blue:#4da6ff;
  --nc-text:#222;
  --nc-muted:#64748b;
  --nc-bg:#ffffff;
  --nc-max:1100px;
  --nc-pad:20px;
  --nc-radius:10px;
}
*{box-sizing:border-box}
body{margin:0;color:var(--nc-text);background:var(--nc-bg);line-height:1.7;font-family:'Noto Sans JP',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI','Hiragino Kaku Gothic ProN','Meiryo',sans-serif}

.nc-hero{min-height:520px;background-size:cover;background-position:center;display:flex;align-items:center}
.nc-hero__inner{max-width:var(--nc-max);margin:0 auto;padding:60px var(--nc-pad)}
.nc-hero__title{font-size:clamp(24px,4.5vw,44px);margin:0 0 10px;color:#ffffff;text-shadow:0 0 8px rgba(0,0,0,.5)}


.nc-hero__lead{margin:0 0 18px;color:#f5f5f5;var(--nc-muted);font-size:clamp(14px,2.2vw,18px)}
.nc-hero__cta{display:inline-block;padding:12px 20px;background:var(--nc-blue);color:#fff;border-radius:8px;text-decoration:none;font-weight:700}





.nc-container{max-width:var(--nc-max);margin:40px auto;padding:0 var(--nc-pad)}
.nc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.nc-card{background:#f7fbff;border:1px solid #e6f2ff;border-radius:var(--nc-radius);padding:22px;text-align:center}
.nc-card__title{margin:8px 0 6px;font-size:18px}
.nc-card__text{margin:0;color:var(--nc-muted);font-size:14px}

@media (max-width:800px){
  .nc-hero__inner{padding:28px var(--nc-pad)}
}

.primary-navigation {
    background-color: rgba(255, 255, 255, 0.7); /* 背景を少し透明にする */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* 下線を薄い色にする */
    padding: 0; /* 上下の余白を減らす */
}

.primary-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.primary-navigation li a {
    text-decoration: none;
    color: var(--nc-text);
    font-weight: bold;
    padding: 5px 10px;
    display: block;
}

.primary-navigation li a:hover {
    color: var(--nc-blue);
}


.nc-card__icon img {
    width: 35px; /* ここに好きな幅のピクセル値を入力 */
    height: auto; /* 高さを自動にすることで、縦横比を維持 */
}

.site-branding {
    text-align: center;
    padding: 0; /* ここで余白を設定 */
}

.nc-pr {
    background-color: #f7f7f7;
    padding: 60px 0;
    text-align: center;
}

.pr-headline {
    font-size: clamp(20px, 3vw, 32px);
    margin-bottom: 20px;
    color: #333;
}

.pr-text {
    max-width: 800px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.8;
    color: var(--nc-muted);
    text-align: left;
}

.site-footer {
    text-align: center;
    padding: 20px 0;
    background-color: #333; /* 背景色を濃いグレーに */
    color: #fff; /* 文字色を白に */
    font-size: 14px;
}

.site-footer a {
    color: #fff;
    text-decoration: none;
}