/* 共通スタイルシート: assets/css/style.css */

/* ベースとなる色設定（ブルー系のテーマカラー） */
:root {
    --bs-primary: #336699; /* Bootstrapのprimaryカラーを上書き（濃いめのブルー） */
  }

  /* すべてのページに共通するカスタムスタイル */
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    /* 日本語を含む汎用的なフォントスタック */
    line-height: 1.6;
    color: #333;
  }

  /* 共通：画像は横幅100%、高さは自動 */
  .responsive-photo {
    width: 100%;
    height: auto;
    max-width: 600px; /* PCの時の上限サイズを設定 */
    display: block;
    margin: 0 auto;
  }

  /* スマホ専用 */
  @media (max-width: 767px) {
    /* ビル写真のサイズ変更 */
    img.home-image {
        height: 200px;          /* スマホでは少し高さを調整 */
        object-position: center center; /* 中央表示 */
    }
    /* 顔写真のサイズ変更 */
    .responsive-photo {
      max-width: 80%;
      margin-bottom: 20px;
    }
    /* 帳簿写真のサイズ変更 */
    img.service-image {
        height: 100px;          /* スマホでは少し高さを調整 */
        object-position: center center; /* 中央表示 */
    }
    /* 玄関の写真の写真サイズを変更 */
    #genkan-photo {
      max-width: 92%;
      margin-left: 15px;
    }
  }

  /* PC専用 */
  @media (min-width: 992px) {
    /* ビル写真のサイズ変更 */
    img.home-image {
        height: 600px;          /* スマホでは少し高さを調整 */
        object-position: center center; /* 中央表示 */
    }
    /* ナビゲーションバーのサイズ変更 */
    .navbar-brand {
      font-size: 1.5rem; /* 通常より少し大きめ */
    }
    /* 顔写真のサイズ変更 */
    .responsive-photo {
      max-width: 350px; /* PCでさらに大きくしたい場合 */
      margin-top: 20px;
    }
    /* 帳簿写真のサイズ変更 */
    img.service-image {
        height: 400px;
        object-position: center center; /* PCでも中央表示 */
    }
    /* 業務内容の文章を中央に配置 */
    .pc-center {
      text-align: center;
    }
    /* 玄関の写真の写真サイズを変更 */
    #genkan-photo {
        margin-left: 300px;
    }
  }

  h1, h2, h3, h4, h5, h6 {
    /* 見出しのマージン調整（必要に応じて） */
    margin-top: 1em;
    margin-bottom: 0.5em;
  }

  footer small {
    color: #666;
  }

  /* ナビバーのカスタム背景色（.bg-custom クラス用） */
  .bg-custom {
    background-color: #336699 !important;
  }

  /* メインコンテンツ内のリンクホバー時の色 */
  main a:hover {
    text-decoration: underline;
  }