@charset "utf-8";

body {
  font-family: 'Rounded Mplus 1c', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

html, body {
  margin: 0 !important;
  padding: 0 !important;
}

/* ==============================
   iPad用（〜1024px）
============================== */
@media (max-width: 1024px) {
html, body {
  margin: 0 !important;
  padding: 0 !important;
}
}

/* ==============================
   スマホ用（〜768px）
============================== */
@media (max-width: 768px) {
html, body {
  margin: 0 !important;
  padding: 0 !important;
}
}

/* ==============================
   改行
============================== */
.pcOn {
  display: inline;
}

.spOn {
  display: none;
}

/* ==============================
   スマホ（〜768px）
============================== */
@media (max-width: 768px) {
  .pcOn {
    display: none !important; /* PCだけ改行 */
  }
  .spOn {
    display: inline !important; /* スマホだけ改行 */
  }
}

/* ヘッダー全体 */
#site-header {
  background-color: #ffffff;
  padding: 20px 40px; /* 左右40pxはこの親で確保 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  box-sizing: border-box; /* paddingを含めて幅を計算 */
}

.header-inner {
  max-width: 1500px;
  width: 100%;          /* 親のpadding分を含む幅 */
  margin: 0 auto;       /* 左右中央寄せ */
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

/* ロゴ */
.logo img {
  height: 50px;
  width: auto;
  margin-left: 0; /* 左端にくっつける場合 */
  /* もしくは少しだけ余白を入れたい場合は margin-left: 10px; など */
}


/* ボタン */
.header-button .inquiry {
  font-family: 'Rounded Mplus 1c', sans-serif;
  font-size: 20px;       /* 小さめ */
  font-weight: 600;
  color: #ffffff;
  background-color: #e02f55;
  border: none;
  border-radius: 100px;
  padding: 12px 48px;
  cursor: pointer;
  display: inline-block;
  transition: 0.3s;
  text-align: center;
}


/* ヘッダー右側のSNSアイコン＋メール */
.header-button {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Instagramアイコン */
.header-button .header-instagram img,
.header-button .header-mail img {
  width: 50px;   /* アイコンサイズ */
  height: 50px;  /* アイコンサイズ */
  display: block;
  transition: 0.3s;
}

.header-icons {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-instagram:hover img,
.header-mail:hover img {
  opacity: 0.7; /* ホバー時少し暗く */
}

.header-tel {
  display: none;
}




/* ---------- iPad / スマホ共通（〜1024px） ---------- */
@media (max-width: 1024px) {
  .header-button .inquiry {
    font-size: 22px;
    padding: 14px 48px;   /* 文字サイズに合わせて少し調整 */
  }
}


/* ==============================
   iPad 以下（〜1024px）
============================== */
@media (max-width: 1024px) {
  #site-header {
    padding: 16px 24px;     /* 全体を少しコンパクトに */
  }

  .logo img {
    height: 44px;           /* ロゴ少し縮小 */
  }
}

/* ==============================
   スマホサイズ（〜768px）
============================== */
@media (max-width: 768px) {

  /* アイコン行のレイアウト（右寄せ） */
/* PC & iPad ではアイコン横並び */
.header-icons {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
  }

  /* 並び順：電話 → メール → インスタ */
  .header-tel { 
    order: 1; 
    display: block;   /* ← スマホだけ表示 */
  }
  .header-mail { order: 2; }
  .header-instagram { order: 3; }

  /* アイコンサイズ統一 */
  .header-icons img {
    width: 30px;
    height: 30px;
  }

  .header-button .inquiry {
    display: none !important;
  }

.header-tel img {
    width: 44px;
    height: 44px;
    margin-top: 4px;        /* 下げる */
    transform: translateX(5px); /* ← 右に5pxずらす */
  }
}





/* ================================
  h2見出し　装飾　
================================ */
h2 {
  display: flex;
  align-items: center;        /* 縦中央 */
  justify-content: center;    /* 横中央 */
  font-size: 32px;
  margin: 40px 0;             /* 上下余白 */
  position: relative;
  gap: 16px;                   /* テキストとアイコンの距離（左側） */
}

/* 左アイコン */
h2::before {
  content: "";
  width: 40px;                /* アイコン幅 */
  height: 40px;               /* アイコン高さ */
  background-image: url('../img/one-point_left.png');
  background-size: contain;
  background-repeat: no-repeat;
}

/* 右アイコン */
h2::after {
  content: "";
  width: 40px;
  height: 40px;
  background-image: url('../img/one-point_right.png');
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 32px;  /* 右側だけテキストから離す距離を調整 */
}

/* iPad まで（〜1024px）に適用 */
@media (max-width: 1024px) {
  h2 {
    font-size: 32px !important;
    font-weight: 600 !important;
  }
  h2::before,
  h2::after {
    width: 36px;
    height: 36px;
  }
  h2::after {
    margin-left: 24px;
  }
}

/* スマホ（〜768px）に適用 */
@media (max-width: 768px) {
  h2 {
    font-size: 25px !important;
    font-weight: 600 !important;
    gap: 1px !important;
  }
  h2::before,
  h2::after {
    width: 32px;
    height: 32px;
  }

  h2::before{
    margin-left: 20px;
  }

  h2::after {
    margin-left: 15px;
  }
}


/* ================================
   topスライダー セクション
================================ */

html, body {
  margin: 0 !important;
  padding: 0 !important;

}

#slider-bg {
  margin-top: 90px; /* ヘッダーの高さ分 */
  width: 100%;
  overflow: hidden;
  background: #000; /* 任意で背景色 */
  position: relative;
}

.slider-inner {
  display: flex;
  transition: transform 0.8s ease;
  width: calc(100vw * 2); /* 画像枚数が2枚の場合 */
}
.slide-image {
  width: 100vw;   /* 各画像は画面幅いっぱい */
  flex-shrink: 0;
  height: auto;
  vertical-align: bottom;
  line-height: 1.0em;
}

.sp-slider { display: none; }


@media (min-width: 601px) {
  .slide-pc {
    display: block;
  }
}

@media (max-width: 768px) {
  .pc-slider { display: none; }
  .sp-slider { display: flex; } /* 【修正】display: block; だった部分を display: flex; に変更 */
}

/* SP用（〜600px） */
@media (max-width: 600px) {
  .slide-pc {
    display: none !important;
  }
  .slide-sp {
    display: block;
  }

    .slider-inner {
    width: calc(100vw * 2); /* SP画像は2枚 */
  }

  .slide-image {
    width: 100vw;   /* 画面幅いっぱい */
    flex-shrink: 0;
  }
}

/* ================================
   Message セクション
================================ */
#Message-bg {
  background-color: #fff3d9;
  padding: 80px 20px;
}

.message-inner {
  max-width: 1200px;   /* 全体幅 */
  margin: 0 auto;      /* 中央揃え */
}

.message-content {
  display: flex;
  justify-content: center;   /* ★ 中央寄せに変更 */
  align-items: center;
  gap: 0px; 
  max-width: 1120px;                /* 間隔は自由に調整可 */
}

/* 左：テキスト */
.message-text h1 {
  color: #471200;
  font-weight: 600;
  font-size: 42px;      /* PC */
  line-height: 1.3;
  margin: 0;
  
}

/* 右：画像 */
.message-image-wrap img {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
}



/* ================================
   iPadサイズ（1024px以下）
================================ */
@media (max-width: 1024px) {
  .message-inner {
    max-width: 90%;
  }

  .message-content {
    justify-content: center; /* ★ 中央寄せ */
    gap: 20px;
  }

  .message-text h1 {
    font-size: 28px;
  }

  .message-image-wrap img {
    max-width: 400px;
  }
}

/* ================================
   スマホサイズ（768px以下）
================================ */
@media (max-width: 768px) {
  .message-inner {
    max-width: 95%;
  }

  .message-content {
    flex-direction: column; /* 縦並び */
    align-items: center;    /* 中央揃え */
    gap: 20px;
  }

  .message-text {
    text-align: center;     /* テキストも中央揃え */
  }

  .message-text h1 {
    font-size: 26px;
  }

  .message-image-wrap {
    display: flex;
    justify-content: center; /* 画像を中央揃え */
    width: 100%;
  }

  .message-image-wrap img {
    width: 80%;
    max-width: none;
    height: auto;
  }
}


/* ================================
   選ばれる理由
================================ */
/* セクション背景 */
#reason-bg {
  background-color: #f4f4f4;
  padding: 80px 0 0 0;
}

/* 見出し */
#reason-bg h2 {
  font-size: 43px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 60px;
}

/* コンテンツ幅と2カラム */
.reason-inner {
  display: flex;
  justify-content: space-between;
  max-width: 1200px; /* セクション全体の幅 */
  margin: 0 auto;
  gap: 40px;       /* 左右の間隔 */
  flex-wrap: wrap; /* 小さい画面で縦並び */
  width: 100%;
  box-sizing: border-box;
}

/* 左カラム */
.reason-left {
  flex: 0 0 700px;
  text-align: left;
  padding-left: 0px;
  box-sizing: border-box;
  position: relative;   /* ← 背景を敷くため追加 */
  z-index: 1;           /* ← テキストが前に来るように */
}
/* 背景 akita_bg を敷く */
.reason-left::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/akita_bg.png") no-repeat center;
  background-size: auto 100%;  /* ← 高さに合わせて横は自動 */
  background-position: center; /* 必要に応じて left / right に変更可 */
  opacity: 1;
  z-index: -1;
}

.reason-space {
  width: 100%;
  height: 30px;  /* 空白縦20px */
}

/* ポイント画像 */
.reason-left-image {
  width: 100px;
  height: auto;
  margin-bottom: 3px; /* 画像下は狭く */
}

/* ポイントテキスト */
.reason-left-text {
  font-size: 26px;
  font-weight: 500; /* Medium */
  line-height: 1.5;
  margin: 0 0 30px 0; /* 下だけ余白 */
}

/* 左カラムボタンwrap */
.reason-left-button {
  width: 100%;
  margin: 40px 0 0 0;     /* 上に余白 */
  padding-bottom: 100px;  /* 下の余白確保 */
  text-align: center;     /* センター揃え */
}

.reason-left-button .inquiry {
  font-size: 26px;        /* ボタン文字サイズ */
  padding: 12px 48px;     /* ボタン内余白 */
  font-family: 'Rounded Mplus 1c', sans-serif;
  font-weight: 800;
  color: #ffffff;
  background-color: #e02f55;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  display: inline-block;
  transition: 0.3s;
}

/* 右カラム */
/* 右側の画像を画面右端まで広げる */
.reason-right {
  flex: 1;
  margin-right: calc(50% - 50vw);
}

.reason-right .reason-image {
  width: 100%;
  height: 700px;
  object-fit: cover;
}

.reason-right .reason-image {
  display: block;       /* inline要素の余白を消す */
  margin: 0;            /* 余白の完全削除 */
  padding: 0;           /* 念のため */
}

/* キャッチコピー（PC） */
.reason-catch {
  font-size: 32px;
  font-weight: 700;       /* 必要なら変えてOK */
  margin-bottom: 10px;
  text-align: left;
}


/* iPadサイズ（〜1024px）用 */
@media (max-width: 1024px) {
  .reason-inner {
    flex-direction: column;   /* 左右から縦並びに変更 */
    gap: 40px;
  }
  #reason-bg {
    padding: 30px 0 0 0; /* iPad用に調整 */
  }

  .reason-left {
    flex: 0 0 100%;
    padding: 0 20px;          /* 左右余白確保 */
    box-sizing: border-box;
  }

  .reason-left-text,
  .reason-left-image {
    text-align: left;
    margin-left: 0;
  }

  .reason-left-button {
    text-align: center;
  }

  .reason-left-button .inquiry {
    font-size: 22px;
    padding: 10px 36px;
  }

  .reason-right {
    flex: 0 0 100%;
    margin: 0;                 /* 画面いっぱいに広げる */
  }

  .reason-right .reason-image {
    width: 100vw;              /* ビューポート幅いっぱい */
    height: auto;
    margin-left: calc(-50vw + 50%); /* 画面左端まで拡張 */
  }

    .reason-catch {
    font-size: 28px;
  }

}

/* スマホサイズ（〜768px）用 */
@media (max-width: 768px) {
  .reason-inner {
    flex-direction: column;
    gap: 30px;
  }

    #reason-bg {
    padding: 20px 0 0 0; /* iPad用に調整 */
  }

  .reason-left {
    flex: 0 0 100%;
    padding: 0 16px;           /* 左右余白 */
    box-sizing: border-box;
  }

  .reason-left-text,
  .reason-left-image {
    text-align: left;
    margin-left: 0;
  }

  .reason-left-text {
    font-size: 20px;
  }

  .reason-left-button {
    text-align: center;
  }

  .reason-left-button .inquiry {
    font-size: 17px;
    padding: 20px 20px;
    text-align: center;
  }

  .reason-right {
    flex: 0 0 100%;
    margin: 0;
  }

  .reason-right .reason-image {
    width: 100vw;              /* ビューポート幅いっぱい */
    height: auto;
    margin-left: calc(-50vw + 50%);
  }

  .reason-catch {
    font-size: 24px;
  }

}




/* ================================
   あなたの心配はどこ？
================================ */

/* 背景用セクション（画面全体に広がる） */
#worry-bg {
  background-color: #fff3d9; /* 背景色 */
  width: 100%;
}

/* コンテンツ幅固定 */
#worry {
  width: 1200px;
  margin: 0 auto;           /* 左右中央揃え */
  box-sizing: border-box;
  padding: 20px 0;           /* 上下余白 */
}

/* h2スタイル */
#worry h2 {
  font-size: 43px;
  font-weight: 600; /* ExtraBold相当 */
  text-align: center; /* 中央揃え */
}

.white-board {
  position: relative;  /* ここで画像の基準を白板にする */
  width: 1200px;
  background-color: #ffffff;
  border-radius: 30px;
  box-sizing: border-box;
  margin: 20px auto;  /* 中央揃え */
  padding: 40px;
}

.board-content {
  display: flex;                /* 横並びに4つのカラム */
  justify-content: space-between;
  flex-wrap: wrap;              /* 小さい画面で折り返す */
}

.column {
  width: calc(25% - 15px);      /* 4カラム */
  text-align: center;           /* 中央揃え */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;       /* 縦並びにする */
  align-items: center;          /* 各要素中央揃え */
}

.column img {
  width: 230px;   /* 横幅300px */
  height: auto;   /* 高さは自動調整 */
  margin: 10px 0; /* 上下余白 */
}

.column h3 {
  font-size: 24px;
  font-weight: 500;
  color: #ffffff;
  background-color: #00bcdb;
  border-radius: 100px;   /* 角を丸く（ pill型 ） */
  padding: 5px 25px;
  display: inline-block;
  margin-bottom: 10px;
}

.column p {
  font-size: 20px;      /* 文字サイズ */
  font-weight: 600;     /* ExtraBold相当 */
  color: #e8941a;       /* テキストカラー */
  margin-top: 10px;     /* 上余白（任意） */
}

.inquiry-wrap {
  width: 1200px;
  margin: 80px auto 80px; /* 上80px 下80px */
  text-align: center;
}

.inquiry {
  font-family: 'Rounded Mplus 1c', sans-serif; /* フォント指定 */
  font-size: 30px;          /* 文字サイズ */
  font-weight: 600;         /* ExtraBold */
  color: #ffffff;           /* 白文字 */
  background-color: #e02f55; /* 背景色 */
  border: none;
  border-radius: 100px;     /* 角丸を丸くする */
  padding: 15px 60px;       /* 上下左右余白 */
  cursor: pointer;
  display: inline-block;    /* 中央揃えで背景サイズに沿う */
  text-align: center;       /* テキスト中央揃え */
  transition: 0.3s;
}

.inquiry:hover {
  background-color: #c11643; /* ホバー時少し濃く */
}

.family-image01 {
  position: absolute;
  top: 500px;        /* 位置は自由に調整 */
  left: 0%;         /* 中央揃え */
  transform: translateX(-50%);
  width: 180px;      /* 適宜調整 */
  z-index: 100;      /* 他より前に */
  pointer-events: none;
}

/* 絶対配置の基準に */
#worry {
  position: relative;
}


/* ==============================
   iPad用（〜1024px）
============================== */
@media (max-width: 1024px) {
  #worry {
    width: 100%;
    max-width: 1200px;      /* PCと同じ上限 */
    padding: 20px;           /* 左右余白確保 */
  }

  .white-board {
    width: 100%;
    padding: 30px 20px;
  }

  .board-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;               /* カラム間の隙間 */
  }

  .column {
    width: calc(25% - 15px); /* 4カラム維持 */
    margin-bottom: 20px;
  }

  .column img {
    width: 100%;
    height: auto;
  }

  .family-image01 {
    width: 100px;            /* iPadで少し小さめ */
    top: 590px;              /* PCより少し上に調整 */
    left: 10%;
    transform: translateX(-50%);
  }
}

/* ==============================
   スマホ用（〜768px）
============================== */
@media (max-width: 768px) {
  #worry {
    width: 100%;
    padding: 20px;           /* 左右余白確保 */
    box-sizing: border-box;   /* パディングを幅に含める */
  }

  .white-board {
    width: 100%;
    padding: 20px;           /* 左右余白 */
    box-sizing: border-box;
    margin-bottom: 90px;
  }

  .board-content {
    display: flex;
    flex-wrap: wrap;          /* 折返し */
    justify-content: space-between;
    gap: 20px;
    flex-direction: row;      /* ← 縦並び指定を解除 */
  }

  .column {
    width: calc(50% - 10px);  /* 2カラムに */
    margin-bottom: 0;
    text-align: center;
  }
  .column h3 {
  font-size: 18px;
  
}

.column p {
  font-size: 16px;    
}


  .column img {
    width: 100%;
    max-width: 280px;         /* 少し縮める */
    height: auto;
    margin: 10px auto;
  }

  /* 家族画像の位置をスマホ用に指定 */
  .family-image01 {
    width: 80px;            /* 小さめに */
    top: 870px;              /* 上からの位置を調整 */
    left: 15%;               /* 中央寄せ */
    transform: translateX(-50%);
  }

  .inquiry-wrap {
    width: 100%;
    padding: 0 16px;         /* 左右余白 */
    box-sizing: border-box;
  }
}


/* ================================
   人気モデル徹底比較
================================ */
/* セクション背景 */
#securityCamera-bg {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  background-color: #d7f7ff;
}

#securityCamera-bg h2 {
  font-size: 43px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 40px;
}

/* 内側白いブレッドボード */
.securityCamera-board {
  width: 1200px;
  background-color: #ffffff;
  border-radius: 30px;
  border: 2px solid #000000;
  box-sizing: border-box;
  padding: 40px;
  margin-bottom: 50px;
}

/* 2カラム配置 */
.sc-container {
  display: grid;
  grid-template-columns: 60% 40%;
  align-items: center;
  gap: 80px;
}

/* 左テキスト */
.sc-left {
  text-align: left;
  font-family: 'Rounded Mplus 1c', sans-serif;
}

/* オレンジ帯 */
.sc-tag {
  font-size: 24px;
  font-weight: 600;
  display: inline-block;
  background-color: #e8941a;
  color: #fff;
  padding: 2px 14px;
  margin-top: 0;
  margin-bottom: 0px;
  border-radius: 4px;
}

/* メインタイトル */
.sc-title {
  font-size: 36px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 15px;
  line-height: 1.4;
}

/* 価格と注意書き */
.sc-price {
  font-size: 34px;
  color: #e02f55;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.sc-note {
  font-size: 24px;
  font-weight: 600;
  color: #e02f55;
  margin-top: 0;
}

/* 右画像 */
.sc-right {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.sc-right img {
  width: 80%;
  height: auto;
  display: block;
  object-fit: contain;
  margin-right: 40px;
}

/* 説明文1カラム */
.sc-desc {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  margin-top: 0px;
  margin-bottom: 6px !important;
  text-align: left;
}

/* 主な特徴 */
.sc-feature-title {
  font-size: 24px;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 8px;
  text-align: left;
}

.sc-feature-wrap {
  padding-top: 1px;
}

.sc-feature-label {
  font-size: 20px;
  font-weight: 600;
  background: #000;
  color: #fff;
  padding: 8px 14px;
  display: inline-block;
  border-radius: 6px;
  margin-bottom: 4px;
  margin-top: 0;
}

/* テキスト */
.sc-feature-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  margin-top: 0;
  text-align: left;
}

.sc-models {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: center;
  justify-items: center;
  padding-top: 30px;
}

.sc-model-item img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
}

/* ボタンwrap */
.inquiry-wrap {
  width: 1200px;
  margin: 80px auto 0;
  padding-bottom: 100px;
  text-align: center;
}

/* =========================================
   iPad専用（768px〜1024px）
========================================= */
/* iPad用（768px〜1024px） */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .securityCamera-board {
    width: 95%;        /* ボード全体の幅 */
    padding: 30px;
    align-items: center;
    margin: 0 auto 50px auto; /* 中央寄せ */
  }


  .inquiry-wrap {
    width: 90%;
  }

    .sc-tag {
    font-size: 22px;   /* iPad用に少し小さく */
    padding: 2px 12px; /* タグのバランスも微調整 */
  }

  .sc-title {
    font-size: 30px;   /* 少し小さめに調整 */
    line-height: 1.3;
  }

  .sc-price {
    font-size: 28px;
    line-height: 1.2;
  }

  .sc-container {
    gap: 60px;
  }

  /* iPadでも4カラム表示、右側に余白を作る */
  .sc-models {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px; /* カラム間の余白 */
    width: 100%; 
    margin: 0 auto; 
    padding-top: 30px;
    justify-items: center;
  }

  .sc-model-item img {
    width: 100%;
    height: auto;
    display: block;
  }
  .sc-note {
    font-size: 20px;   /* iPad用に少し小さく */
  }
}

/* ================================
   スマホ用（767px以下）
================================ */
@media screen and (max-width: 767px) {
  #securityCamera-bg {
    padding: 0 20px 20px 20px;
  }

  #securityCamera-bg h2 {
    font-size: 28px;
  }

      .sc-tag {
    font-size: 18px;   /* iPad用に少し小さく */
    padding: 2px 12px; /* タグのバランスも微調整 */
  }

  .securityCamera-board {
    width: 100%;
    padding: 20px;
    margin-bottom: 40px;
  }

  .sc-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .sc-right img {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
  }

  .sc-models {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .inquiry-wrap a.inquiry {
    padding: 20px 15px;
    font-size: 17px;
  }

    .sc-title {
    font-size: 23px;   /* スマホ向けにさらに小さく */
    line-height: 1.2;
    margin-top: 20px;
  }

  .sc-price {
    font-size: 24px;
    line-height: 1.1;
  }

   .sc-note {
    font-size: 22px;   /* スマホ向けにさらに小さく */
  }

  .sc-models {
    grid-template-columns: repeat(2, 1fr); /* 2カラムに変更 */
    gap: 10px; /* カラム間の隙間を少し追加 */
    justify-items: start; /* 右側に空きを作る場合 */
  }

  /* 画像サイズは幅100%でOK */
  .sc-model-item img {
    width: 100%;
  }

  /* 空の4つ目ブロックは非表示にして右側の空きを自然に */
  .sc-model-item:nth-child(4) {
    display: none;
  }
}




/* ================================
   導入の流れ
================================ */

#IntroductionFlow-bg {
  background: #f4f4f4;
  width: 100%;
  padding: 80px 0;
}

.IntroductionFlow {
  max-width: 1440px;
  margin: 0 auto;
  text-align: center;
}

/* H2 */
.Flow-h2 {
  font-size: 43px;
  font-weight: 600;
  margin-bottom: 40px;
}

/* H3 */
.Flow-h3 {
  font-size: 32px;
  font-weight: 500; /* Medium */
  margin-bottom: 40px;
}

/* Image */
.Flow-img img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 40px auto;
}

/* ボタンwrap */
.inquiry-wrap {
  width: 100%;           /* 幅を画面幅に合わせる */
  max-width: 1200px;     /* 最大幅はPC用に制限 */
  margin: 80px auto 0;   /* 上に余白、中央揃え */
  text-align: center;    /* ボタン中央揃え */
  padding: 0 20px;       /* 画面端に余白を確保 */
}

/* 絶対配置の基準 */
.IntroductionFlow {
  position: relative;
}

/* 自由配置の画像 */
.family-image02 {
  position: absolute;
  top: -200px;            /* 上に少し出す：調整可 */
  left: 50%;             /* 中央揃え */
  transform: translateX(-50%);
  width: 300px;          /* サイズ調整どうぞ */
  z-index: 100;
  pointer-events: none;
}

/* ================================
   導入の流れ（レスポンシブ）
================================ */

/* iPad用（1024px以下） */
@media (max-width: 1024px) {
    #IntroductionFlow-bg {
    padding: 60px 0; 
  }

  .IntroductionFlow {
    max-width: 900px; 
    padding: 60px 20px;
  }

  /* H2 */
  .Flow-h2 {
    font-size: 36px;
    margin-bottom: 30px;
  }

  /* H3 */
  .Flow-h3 {
    font-size: 28px;
    margin-bottom: 30px;
  }

  /* 絶対配置の画像 */
  .family-image02 {
    width: 250px; /* 少し小さく */
    top: -150px;  /* 調整 */
  }

  /* 4STEP画像 */
  .Flow-img img {
    margin-bottom: 30px;
  }


}

/* スマホ用（768px以下） */
@media (max-width: 768px) {

  #IntroductionFlow-bg {
    padding: 20px 0; /* さらに狭く */
  }

  .IntroductionFlow {
    max-width: 100%;
    padding: 10px 20px;
  }

  /* H2 */
  .Flow-h2 {
    font-size: 28px;
    margin-bottom: 20px;
  }

  /* H3 */
  .Flow-h3 {
    font-size: 24px;
    margin-bottom: 20px;
  }

  /* 絶対配置の画像 */
  .family-image02 {
    width: 200px; /* 小さく */
    top: -90px;  /* 調整 */
  }

  /* 4STEP画像をスマホ用に切り替え */
  .Flow-img img {
    content: url("../img/4step_sp@2x.png");
    max-width: 50%;
    margin-bottom: 40px;
  }

}



/* ================================
   安心を
================================ */

/* 背景色 */
.peace-section {
  background-color: #fff3d9;
  padding: 100px 20px;
  font-family: 'Rounded Mplus 1c', sans-serif;
}

/* 最大幅センター + 背景画像敷くため relative */
.peace-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

/* 背景bearを背面に敷く */
.peace-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/bear.png") no-repeat center;
  background-size: 1000px auto; /* ← 横幅だけ指定 */
  opacity: 1;
  z-index: 1;
}

/* 2カラム並び */
.peace-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
  position: relative;
  z-index: 2; /* 背景より前へ */
}

/* 左 画像 */
.peace-image {
  flex: 0 0 40%; /* 40%固定 */
  position: relative;
  z-index: 2;
}
.peace-image img {
  width: 100%;
  height: auto;
}

/* 右 テキスト */
.peace-text {
  flex: 1;
  position: relative;
  z-index: 2;
}

/* メインタイトル */
.peace-main {
  font-size: 43px;
  font-weight: 600;
  color: #4c1400;
  line-height: 1.4;
  margin-bottom: 35px;
  display: block;
  text-align: left;
  position: relative;
  z-index: 2;
}

/* 装飾無効 */
.peace-main::before,
.peace-main::after {
  content: none;
}

/* サブ本文 */
.peace-sub {
  font-size: 28px;
  font-weight: 400;
  color: #4c1400;
  line-height: 1.6;
  margin-bottom: 45px;
  position: relative;
  z-index: 2;
}

.peace-section .inquiry-wrap {
  width: 100% !important;        /* 幅をテキスト領域に合わせる */
  text-align: left !important;   /* 左揃え。中央にする場合は center に */
  overflow: hidden !important;   /* はみ出し防止 */
}

/* a 装飾除去 */
a,
a:hover,
a:focus {
  text-decoration: none;
}

.peace-section {
  position: relative;
}

.family-image05 {
  position: absolute;
  top: -120px;         /* 位置は後で微調整可能 */
  left: 50%;
  transform: translateX(-50%);
  width: 320px;        /* 必要なら変更OK */
  z-index: 10;
  pointer-events: none;
}

/* iPad用（1024px以下） */
@media (max-width: 1024px) {
  .peace-inner {
    max-width: 900px;
    padding: 0 20px;
  }

  /* 左 画像 */
  .peace-image {
    flex: 0 0 40%; /* 幅はそのまま */
  }
  .peace-image img,
  .family-image05 {
    width: 80%;   /* iPad用サイズ */
  }

  /* テキストは左揃え */
  .peace-text {
    text-align: left;
  }

  /* メインタイトル・サブ本文 */
  .peace-main {
    font-size: 36px;
    line-height: 1.4;
  }
  .peace-sub {
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 35px;
  }

  /* ボタンwrap */
  .peace-btn-wrap {
    text-align: center; /* ボタンは中央 */
  }

  .inquiry {
    font-size: 22px;
    padding: 10px 36px;
  }

  /* 家族画像調整 */
  .family-image05 {
    top: -100px;
    width: 30%;
  }

    .inquiry-wrap {
    text-align: left;  /* iPadも左揃え */
  }

}

/* スマホ用（768px以下） */
@media (max-width: 768px) {
  .peace-inner {
    max-width: 100%;
    padding: 0 20px;
  }


  /* 左 画像 */
  .peace-image {
    display: flex;
    justify-content: center; /* 横方向中央 */
    flex: 0 0 100%;
    margin-bottom: 0px;
  }
  .peace-image img,
  .family-image05 {
    width: 70%;
  }

  /* テキストは左揃え */
  .peace-text {
    text-align: left;
  }

  /* メインタイトル・サブ本文 */
  .peace-main {
    font-size: 28px;
    line-height: 1.4;
    margin-bottom: 25px;
  }
  .peace-sub {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 25px;
  }

.peace-section .inquiry-wrap {
    text-align: center !important; /* SPは中央揃え */
  }

  /* 家族画像調整 */
  .family-image05 {
    top: -80px;
    width: 50%;
  }

  /* 2カラムを縦並びに */
  .peace-flex {
    flex-direction: column;
    gap: 20px;
  }
}




/* ================================
   録画・機能概要
================================ */
#FunctionOverview-bg {
  display: flex;
  flex-direction: column; /* 縦に並べる */
  align-items: center;
  padding: 20px 0;
  background-color: #d7f7ff;
}

#FunctionOverview-bg h2 {
  font-size: 43px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 5px;
  margin-top: 100px;
}

#FunctionOverview-bg .overview-text {
  font-size: 18px;
  line-height: 1.8;
  color: #333;
  text-align: center;
  margin-bottom: 40px;
}

/* ボードを3列に並べる親 */
#FunctionOverview-bg .board-wrapper {
  width: 1200px;               /* 親幅 */
  display: flex;
  justify-content: space-between; /* 左右均等に間隔 */
}

/* ボード（カード）自体 */
#FunctionOverview-bg .securityCamera-board {
  width: 380px;
  background-color: #ffffff;
  border-radius: 30px;
  border: 2px solid #000000;
  box-sizing: border-box;
  padding: 40px;
  margin-bottom: 50px; /* 下の余白 */
}

/* ボード内オレンジ帯 */
#FunctionOverview-bg .securityCamera-board h5.sc-tag {
  font-size: 24px;
  font-weight: 600;
  display: inline-block;
  background-color: #e8941a;
  color: #fff;
  padding: 2px 14px;
  margin-top: 0;
  margin-bottom: 10px;
  border-radius: 4px;
}

/* ボード内タイトル */
#FunctionOverview-bg .securityCamera-board h3 {
  font-size: 32px;
  font-weight: 600; /* ExtraBold相当 */
  margin: 0 0 20px 0; /* 下に余白を追加 */
  text-align: left;  /* ボード内は左揃え */
}

/* ボード内画像 */
#FunctionOverview-bg .securityCamera-board .board-image {
  display: block;
  width: 60%;       /* 幅300px */
  margin: 20px auto;  /* 上下20px、左右中央揃え */
}

/* 機能概要ラッパー */
#FunctionOverview-bg .securityCamera-board .board-feature {
  margin-bottom: 25px; /* 下の余白 */
}

/* 機能タイトル */
#FunctionOverview-bg .securityCamera-board .feature-title {
  font-size: 20px;
  font-weight: 600; /* ExtraBold */
  color: #ea2100;
  margin: 0 0 5px 0; /* 下に少し余白 */
}

/* 機能テキスト */
#FunctionOverview-bg .securityCamera-board .feature-text {
  font-size: 18px;
  font-weight: 500; /* Medium */
  margin: 0;
}

/* 汎用スペーサー */
.spacer {
  width: 100%;    /* 横幅いっぱい */
  height: 50px;   /* デフォルト高さ（必要に応じて inline style で上書き可） */
}

/* ボタンwrap */
.inquiry-wrap {
  width: 1200px;
  margin: 80px auto 0; /* 下は0にして */
  padding-bottom: 100px; /* 下余白をpaddingで確保 */
  text-align: center;
}

#FunctionOverview-bg {
  position: relative;
}

.family-image04 {
  position: absolute;
  top: -120px;           /* 上へ重ねる量（調整可能） */
  left: 50%;
  transform: translateX(-50%);
  width: 240px;          /* サイズお好みで */
  z-index: 10;
  pointer-events: none;  /* リンク等を邪魔しない */
}

/* ================================
   録画・機能概要（レスポンシブ）
================================ */

/* iPad用（1024px以下） */
@media (max-width: 1024px) {
  #FunctionOverview-bg .board-wrapper {
    width: 90%; /* コンテンツ幅 */
    justify-content: space-between;
    flex-wrap: wrap; /* 余裕がなければ折り返し */
    gap: 0px;       /* ボード間隔 */
  }

  #FunctionOverview-bg .securityCamera-board {
    width: 32%;      /* 3列維持 */
    padding: 30px;   /* 内側余白を少し小さく */
  }

  #FunctionOverview-bg h2 {
    font-size: 36px;
    margin-top: 80px;
    margin-bottom: 20px;
  }

  #FunctionOverview-bg .overview-text {
    font-size: 16px;
    margin-bottom: 30px;
  }

  #FunctionOverview-bg .securityCamera-board h3 {
    font-size: 28px;
  }

  #FunctionOverview-bg .securityCamera-board h5.feature-title {
    font-size: 22px;
  }

  #FunctionOverview-bg .securityCamera-board .feature-text {
    font-size: 16px;
  }

  #FunctionOverview-bg .securityCamera-board .board-image  {
    width: 70%;  /* 画像サイズ調整 */
  }

  .family-image04 {
    width: 25%;
  }

  .inquiry-wrap {
    width: 100%;
    margin: 60px auto;
  }
}

/* スマホ用（768px以下） */
@media (max-width: 768px) {
  #FunctionOverview-bg .board-wrapper {
    flex-direction: column; /* 1カラムに */
    width: 100%;
    align-items: center;
    gap: 0px;              /* ボード間隔 */
  }

  #FunctionOverview-bg .securityCamera-board {
    width: 90%;              /* ボード幅 */
    padding: 25px;           /* 内側余白 */
  }

  #FunctionOverview-bg h2 {
    font-size: 28px;
    margin-top: 60px;
    margin-bottom: 15px;
  }

  #FunctionOverview-bg .overview-text {
    font-size: 14px;
    margin-bottom: 20px;
  }

  #FunctionOverview-bg .securityCamera-board h3 {
    font-size: 24px;
  }

  #FunctionOverview-bg .securityCamera-board h5.feature-title {
    font-size: 20px;
  }

  #FunctionOverview-bg .securityCamera-board .feature-text {
    font-size: 14px;
  }

  #FunctionOverview-bg .board-image {
    width: 70%;              /* 画像サイズ調整 */
    margin: 20px auto;       /* 中央揃え */
  }

  .family-image04 {
    width: 40%;
    left: 50%;
    transform: translateX(-50%);
  }

  .inquiry-wrap {
    width: 100%;
    margin: 40px auto;
  }
}









/* ================================
   FAQ
================================ */

.faq-section {
  background-color: #f4f4f4;
  width: 100%;
  font-family: 'Rounded Mplus 1c', sans-serif;
  padding: 80px 20px 90px 20px;
}

.faq-inner {
  max-width: 1200px;  /* PCのみ固定幅 */
  margin: 0 auto;
}

/* 見出し */
.faq-title {
  font-size: 43px;
  margin-top: 70px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 50px;
}

/* FAQアイテム */
.faq-item {
  margin-bottom: 10px;
  position: relative;
}

.faq-question {
  position: relative;
  width: 100%;
  background: none;
  border: none;
  padding: 0px 30px 30px; /* ← 下余白を増やす */
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24px;
  font-weight: 600;
  color: #e8941a;
  font-family: 'Rounded Mplus 1c', sans-serif;
  overflow: visible;
}

.faq-question::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 10px; /* ← 底から少し上げる */
  display: block;  /* ← これが超重要 */
  height: 12px;
  background-image: url("../img/faq-line.svg");
  background-repeat: repeat-x;
  background-size: 16px 12px;
}

.faq-toggle {
  font-size: 40px;     /* ← 大きくする */
  font-weight: 600;    /* ← 太くする */
  line-height: 1;      /* ← 余計な上下余白をなくす */
  color: #000;         /* 黒色 */
  background: none;    /* 背景なし */
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;        /* 四角枠を消す */
  padding: 0;
  margin-left: 20px;   /* ← テキストとの間をあける（必要なら調整） */
  transition: transform 0.3s ease;
}

/* 開いたとき少し回転で動きをつける */
.faq-question.active .faq-toggle {
  transform: rotate(180deg);
}

.faq-answer {
  overflow: hidden;
  max-height: 0;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 8% 1fr;   /* ← 左幅を縮めた */
  gap: 20px;
  align-items: start;
  transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-answer.open {
  max-height: 500px;
  padding: 0px 20px;
  opacity: 1;
  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease; /* 開くときだけアニメーション */
}

.faq-left {
  font-weight: 800;           /* Qと同じ太さ */
  font-size: 24px;            /* Qと同じサイズ */
  color: #5da343;             /* 緑色 */
  padding-left: 10px;
}

.faq-right {
  font-size: 16px;
  line-height: 1.8;
}

.faq-inner {
  position: relative;
}

.family-image03 {
  position: absolute;
  top: -240px;             /* 上に重ねる量（調整OK） */
  left: 50%;              /* 中央配置 */
  transform: translateX(-50%);
  width: 230px;           /* 画像サイズ調整可能 */
  z-index: 10;
  pointer-events: none;   /* クリック無効：リンク邪魔しない */
}

/* ================================
   FAQ（iPad用）
================================ */
@media screen and (min-width: 767px) and (max-width: 1024px) {
  .faq-section {
    width: 100%;           /* 幅を画面いっぱいに */
    padding: 60px 20px 70px 20px; /* 上下の余白はそのまま、左右も20px */
    margin: 0;             /* 左右中央寄せ不要 */
    box-sizing: border-box; /* paddingを幅に含める */
  }


  .faq-title {
    font-size: 36px;      /* 見出し少し小さく */
    margin-top: 50px;
    margin-bottom: 40px;
  }

  .faq-question {
    font-size: 20px;      /* Qを少し小さく */
    padding: 0px 20px 20px;
  }

  .faq-toggle {
    font-size: 32px;      /* +ボタン少し小さく */
    margin-left: 15px;
  }

  .faq-answer {
    grid-template-columns: 10% 1fr;  /* 左幅微調整 */
    gap: 15px;
  }

  .faq-left {
    font-size: 20px;
    padding-left: 8px;
  }

  .faq-right {
    font-size: 14px;
    line-height: 1.6;
  }

  .faq-item {
    text-align: center;   /* アイテム全体は中央揃え */
  }

  .faq-text {
    text-align: left;     /* Qテキストは左揃え */
  }

  .family-image03 {
    width: 200px;         /* 画像サイズを少し縮小 */
    top: -170px;
  }

  .faq-answer .faq-left,
  .faq-answer .faq-right {
    text-align: left;  /* 左揃えにする */
  }

}

/* ================================
   FAQ（スマホ用）
================================ */
@media screen and (max-width: 768px) {
  .faq-section {
    width: 100%;          /* 画面幅いっぱい */
    padding: 0 15px 50px; /* 左右に余白を作る */
    margin: 0;            /* 左右の偏りなし */
    box-sizing: border-box; /* padding を幅に含める */
  }

  .faq-inner {
    max-width: 100%;      /* inner も幅いっぱいに */
    padding: 0;
  }

  .faq-section {
    max-width: 100%;    /* 画面幅いっぱい */
    padding: 40px 15px 50px 15px; /* 上下左右の余白調整 */
    margin: 0 auto;     /* 中央寄せ */
  }

  .faq-title {
    font-size: 28px;      /* 見出しをさらに小さく */
    margin-top: 40px;
    margin-bottom: 30px;
  }

  .faq-question {
    font-size: 18px;      /* Qを小さく */
    padding: 0px 15px 15px;
  }

  .faq-toggle {
    font-size: 28px;      /* +ボタンも小さく */
    margin-left: 1px;
    margin-bottom: 15px;
  }

  .faq-answer {
    grid-template-columns: 12% 1fr;  /* 左幅微調整 */
    gap: 12px;
  }

  .faq-left {
    font-size: 18px;
    padding-left: 6px;
  }

  .faq-right {
    font-size: 13px;
    line-height: 1.5;
  }

  .faq-item {
    text-align: center;   /* アイテム全体は中央揃え */
    font-size: 16px;
  }

  .faq-text {
    text-align: left;     /* Qテキストは左揃え */
    margin-bottom: 15px;
  }

  .family-image03 {
    width: 150px;         /* 画像サイズ縮小 */
    top: -140px;
  }

  .faq-answer .faq-left,
  .faq-answer .faq-right {
    text-align: left;  /* 左揃えにする */
  }

}




/* ================================
   共通お問い合わせボタン
================================ */
.inquiry-wrap {
  width: 1200px;
  margin: 60px auto 0;
  text-align: center;
}

.inquiry {
  font-family: 'Rounded Mplus 1c', sans-serif;
  font-size: 30px;
  font-weight: 600;
  color: #ffffff;
  background-color: #e02f55;
  border: none;
  border-radius: 100px;
  padding: 15px 60px;
  cursor: pointer;
  display: inline-block;
  transition: 0.3s;   /* アニメーション */
  text-decoration: none;
}

.inquiry:hover {
  transform: scale(1.04); /* ← 大きくなるだけ */
  background-color: #e02f55; /* ← 色は変えない */
}



/* ================================
   ボタン（レスポンシブ）
================================ */

/* iPad用（1024px以下） */
@media (max-width: 1024px) {
  .inquiry-wrap {
    width: 100%;        /* コンテンツ幅に合わせる */
    margin: 30px auto 80px;
    text-align: center; /* 中央揃え */
    padding: 0 20px;    /* 余白を確保 */
  }

  .inquiry {
    font-size: 22px;     /* iPad用文字サイズ */
    padding: 10px 36px;  /* iPad用ボタン内余白 */
    text-align: center;
  }
}

/* スマホ用（768px以下） */
@media (max-width: 768px) {
  .inquiry-wrap {
    width: 100%;        /* コンテンツ幅に合わせる */
    margin: 20px auto 50;
    text-align: center; /* 中央揃え */
    padding: 0 20px;    /* 余白を確保 */
     font-size: 17px;
  }

  .inquiry {
    width: 90%;        /* ボタンを画面幅の90%に */
    max-width: 400px;  /* 最大幅を設定（任意） */
    font-size: 20px;
    padding: 20px 10px;
    text-align: center;
  }
}

/* ================================
   電話アイコン付きボタン
================================ */
.inquiry-tel {
  display: inline-flex;          /* アイコンとテキストを横並び */
  align-items: center;
  gap: 10px;                     /* アイコンと文字の間隔 */
}

.inquiry-tel-icon {
  width: 30px;                   /* PC用サイズ */
  height: 30px;
  display: inline-block;
  object-fit: contain;
}

/* iPad用（〜1024px） */
@media (max-width: 1024px) {
  .inquiry-tel-icon {
    width: 24px;   /* iPad用サイズ */
    height: 24px;
  }
}

/* スマホ用（〜768px） */
@media (max-width: 768px) {
  .inquiry-tel-icon {
    width: 20px;   /* SP用サイズ */
    height: 20px;
  }
}




/* ================================
   フッター
================================ */
#site-footer {
  background-color: #fff3d9;
  padding: 60px 20px 20px 20px;
  font-family: 'Rounded Mplus 1c', sans-serif;
  box-sizing: border-box;
}

.footer-inner {
  max-width: 1200px;  /* PC用コンテンツ幅 */
  margin: 0 auto;
  padding: 0 20px;    /* 余白を左右に20px */
}

/* ロゴ */
.footer-logo img {
  width: 220px;
  height: auto;
}

/* 左右並列の行（ロゴ含まず） */
.footer-row {
  display: grid;
  grid-template-columns: 400px 800px; /* 左400px / 右800px */
  align-items: start;
  margin-top: 30px;
}

/* -------------------------------
   左カラム（会社情報）
-------------------------------- */
.footer-left p {
  margin: 0 0 6px 0;
  font-size: 16px;       /* ← 左側のテキストサイズ */
  font-weight: 400;      /* ← 左側テキスト太さ */
  line-height: 1.6;
  color: #333;
}

/* -------------------------------
   右カラム（連絡先 / SNS）
-------------------------------- */
.footer-right {
  text-align: left;
}

.footer-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

/* アイコン */
.footer-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-right: 10px;
  display: block;
}

/* SNSアイコン */
.footer-sns img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-top: 6px;
}

/* 右側テキスト設定 */
.footer-right p {
  font-size: 18px;      /* ← ここで右カラムの文字サイズ指定 */
  font-weight: 600;     /* ← ここで右カラムの文字太さ指定 */
  line-height: 1.6;
  color: #333;
  margin: 0;
}

.footer-left p {
  margin: 0 0 6px 0;
  font-size: 16px;
  font-weight: 600;   /* ← 400から600へ変更（太字） */
  line-height: 1.3;
  color: #333;
}

/* コピーライト */
.footer-copyright {
  text-align: center;
  font-size: 15px;
  color: #333;
  margin-top: 40px;
}

.footer-item {
  white-space: nowrap; /* ← テキストを改行させない */
}

.footer-item a {
  display: flex;       /* SNSリンクも横並びに維持 */
  align-items: center; /* アイコンと文字の縦位置を中央揃え */
}

.footer-icon {
  width: 30px;      /* ← 3つ共通で高さ揃え */
  height: 30px;
  object-fit: contain;
  margin-right: 10px;
  display: block;
}

.footer-right a {
  text-decoration: none;  /* ← 下線非表示 */
  color: inherit;         /* ← 親の文字色を引き継ぐ */
}

.footer-right a:hover {
  opacity: 0.7;           /* ← 色は変えず、少しだけ反応 */
}


/* ================================
   iPad用（幅調整、ロゴ縮小）
================================ */
@media screen and (min-width: 767px) and (max-width: 1024px) {
  .footer-inner {
    max-width: 900px;
    padding: 0 20px;
  }

  .footer-row {
    grid-template-columns: 1fr 1fr; /* 左右カラムを比率で */
    gap: 20px;                      /* 必要に応じて */
  }

  .footer-logo img {
    width: 180px;  /* iPad用に少し縮小 */
  }
}


/* =============================
   SP（スマホ）
============================= */

@media screen and (max-width: 768px) {
  .footer-inner {
    max-width: 100%;
    padding: 0 15px;
  }

  .footer-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }

  .footer-logo img {
    width: 150px;
    height: auto;
  }

  .footer-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center; /* row全体のテキストも中央揃え */
    gap: 20px;
  }

  .footer-right,
  .footer-left {
    width: 100%;
    text-align: center; /* ← ここでテキストも中央揃え */
  }

  .footer-item {
    justify-content: center;
  }

  .footer-right p,
  .footer-left p {
    text-align: center; /* ← 個別の<p>も中央揃え */
    font-size: 16px;
  }
}