:target {
  scroll-margin-top: 120px;
}

/* PC 基本値（ここは好みで調整OK） */
.gcal-embed {
  position: relative;
  width: 100%;
  max-width: 1000px;   /* サイトの横幅に合わせて調整 */
  margin: 0 auto;
  overflow: hidden;    /* スマホ時のはみ出し対策 */
}

.gcal-iframe {
  width: 100%;
  height: 800px;       /* 月表示に合わせた見やすい高さ */
  border: 0;
}

/* タブレットくらい */
@media (max-width: 1024px) {
  .gcal-iframe { height: 720px; }
}

/* スマホ：縮小表示（はみ出し防止のため横幅を拡げるのがミソ） */
@media (max-width: 768px) {
  .gcal-iframe {
    transform: scale(0.70);     /* 90% に縮小（調整可） */
    transform-origin: 0 0;      /* 左上基準で縮小 */
    width: 143%;                /* 100 / 0.90 ≒ 111.1% → 少し余裕を持って 112% */
    height: 820px;              /* 縮小で小さくなる分を見越して少し高めに */
  }
}

/* さらに小さい端末向け：もう少し縮小 */
@media (max-width: 420px) {
  .gcal-iframe {
    transform: scale(0.65);     /* 85% に縮小 */
    width: 154%;                /* 100 / 0.85 ≒ 117.6% → 少し余裕を持って 118% */
    height: 840px;
  }
}

/* Googleカレンダー埋め込み用のレスポンシブ対応 */
.calendar-container {
  position: relative;
  width: 100%;
  padding-bottom: 75%; /* 縦横比を調整、スマホでは高さを自動可変に */
  height: 0;
  overflow: hidden;
}

.calendar-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}
/* ============================
   スマホ最適化（K-SOUND）
============================ */

/* スマホサイズ以下 */
@media screen and (max-width: 768px) {

    /* トップのメイン画像の縦幅制限 */
    .mainimg img {
        width: 100%;
        height: 45vh;      /* 表示高さを画面の45％に制限 */
        object-fit: cover; /* トリミングして自然に表示 */
    }

    /* 画像類は最大90%の幅で表示 */
    img {
        max-width: 90%;
        height: auto;
        margin: 0 auto;
        display: block;
    }

    /* 本文を読みやすくするための余白 */
    .contents, .companyinfobg, .greencall {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* サービス画像の均一縮小 */
    .likewater img {
        max-width: 85%;
    }

    /* 電話番号のボタンを押しやすく */
    .calltxt {
        font-size: 1.2em;
    }
}
@media screen and (max-width: 768px) {
    .mainimg img {
        width: 100% !important;
        height: 45vh !important;
        object-fit: cover !important;
    }
}
/* ============================
   スマホ最適化（トップ画像強制縮小）
============================ */
@media screen and (max-width: 768px) {
    .mainimg img {
        width: 100% !important;
        height: 45vh !important;
        object-fit: cover !important;
    }
}
/* =============================
   電話番号（PC：画像、SP：ボタン）
============================= */

/* PC版は画像を表示、SP版は非表示 */
.tel-pc {
    text-align: center;
    margin: 20px auto;
}
.tel-sp {
    display: none;
}

/* スマホ時だけボタンを表示 */
@media screen and (max-width: 768px) {
    .tel-pc {
        display: none;
    }
    .tel-sp {
        display: block;
        text-align: center;
        margin: 20px auto;
    }
    .tel-btn {
        display: block;
        background: #0a6;
        color: #fff;
        padding: 14px 0;
        border-radius: 10px;
        text-decoration: none;
        font-size: 1.3em;
        font-weight: bold;
        width: 80%;
        margin: 0 auto;
    }
}
/* ============================
   スマホ時のヘッダー崩れ防止
============================ */
@media screen and (max-width: 768px) {
  header nav {
    flex-direction: column;   /* ロゴの下にメニューを縦配置 */
    align-items: flex-start;
    height: auto;
    padding: 8px 0;
  }

  header .logo {
    margin-bottom: 6px;
  }

  header .nav-links {
    width: 100%;
    display: flex;
    flex-wrap: wrap;          /* 横幅に応じて気持ちよく折り返す */
    gap: 4px 12px;
  }

  header .nav-links a {
    margin-left: 0;           /* 左マージンをリセット */
    font-size: 0.9em;         /* 少しだけ文字を小さく */
  }
}
/* ロゴ画像と文字を横並びにする */
nav .logo {
  display: flex;
  align-items: center;  /* 縦位置をそろえる */
  gap: 10px;            /* 画像と文字のすき間 */
}

/* 念のため strong も横並びに */
nav .logo strong {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* ここまで既存のCSS */

.site-title {
  text-align: center;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 600;
  line-height: 1.4;
  margin: 40px 20px;
}

.site-catch {
  text-align: center;
  font-size: 1rem;
  color: #555;
  margin-bottom: 40px;
}
/* トップのリード文とキャッチコピー */
.lead {
  max-width: 900px;
  margin: 0 auto 24px;
  line-height: 1.8;
  font-size: 1rem;
  text-align: center;
}

.catchcopy {
  text-align: center;
  font-weight: bold;
  margin-bottom: 32px;
  font-size: 1.05rem;
  color: #0066aa;
}