body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

header {
    background: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

header h1 {
    margin: 0;
    font-size: 2.5em;
}

nav {
    margin: 20px 0;
}

nav a {
    color: #fff;
    text-decoration: none;
    margin: 0 15px;
    font-weight: bold;
}

nav a:hover {
    text-decoration: underline;
}

section {
    padding: 20px;
    margin: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

footer {
    text-align: center;
    padding: 10px 0;
    background: #333;
    color: #fff;
    position: relative;
    bottom: 0;
    width: 100%;
}

h2 {
    color: #333;
}

.image-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.image-container img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

#hero {
    background-image: url('../assets/images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    text-align: center;
    padding: 100px 20px;
}

#services {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.service {
    flex: 1;
    margin: 10px;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.service img {
    width: 100%;
    border-radius: 8px;
}
.service-img{
    width:100%;
    aspect-ratio:16/9;   /* 例：横長ヒーローと合わせる */
    object-fit:cover;    /* はみ出す部分を中央トリミング */
    border-radius:8px;
  }
/* 横長のナビゲーションスタイル */
.horizontal-nav {
    background-color: #333;
    padding: 10px 20px;
}

.horizontal-nav ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
    margin: 0;
    padding: 0;
}

.horizontal-nav li {
    margin: 0 15px;
}

.horizontal-nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 5px 10px;
    transition: background-color 0.3s;
}

.horizontal-nav a:hover {
    background-color: #555;
    border-radius: 5px;
}

/* ヘッダー全体を薄く */
.site-header{
    display:flex;
    align-items:center;      /* 垂直中央で高さ最小化 */
    justify-content:space-between;
    padding:8px 4%;          /* 上下 8px 程度に縮小 */
    background:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,.06);
  }
  
  /* ロゴ画像を高さ指定で統一（幅は自動）*/
  .logo img{height:40px; width:auto;}
  
  /* 見出し余白リセット */
  .logo, .tagline{margin:0;}
  
  /* ナビを横並び */
  .main-nav ul{
    display:flex;
    gap:24px;
    list-style:none;
    margin:0;
    padding:0;
  }
  .main-nav a{
    font-weight:500;
    text-decoration:none;
    color:#222;
  }
  /* モバイルではハンバーガー控えめに例 */
  @media(max-width:640px){
    .tagline{display:none;}     /* キャッチコピー非表示で高さ確保 */
    .main-nav ul{gap:16px;}
  }
  /* --- ロゴ文字 --- */
.logo-text{
    font-family:'Montserrat','Noto Sans JP',sans-serif;
    font-weight:700;
    font-size:1.6rem;       /* ≒ 40 px 高さに合わせる */
    letter-spacing:.08em;
    margin:0;               /* 余白リセット */
    color:#222;             /* 明るい背景に合わせる */
    user-select:none;
  }
  /* ダークモード（またはヘッダーが暗色）のときは自動反転 */
  @media(prefers-color-scheme:dark){
    .logo-text{color:#fff;}
  }