/* スマホ・タブレット表示時（768px以下）の設定 */
@media screen and (max-width: 768px) {
  /* 1. ベース（画面全体）の横幅を100%にする */
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden; /* 横スクロールを予防 */
  }

  /* 2. サイト全体を包んでいるラッパー要素（よくあるクラス名）を広げる */
  #page,
  #wrapper,
  #container,
  .site,
  .main-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
  }

  /* 3. 黒い背景のコンテンツエリア（area_1など）を横幅いっぱいに */
  .area_1,
  .regist_d01 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .regist_d01 table tbody tr {
    display: flex;
    flex-direction: column;
  }

  .demo-table-cell-left {
    width: 80% !important;
    margin: 0 auto;
  }

  .demo-table-cell-right {
    width: 80% !important;
    margin: 0 auto;
  }

  .regist_d01 table {
    padding: 0 20px;
  }

  .demo-text-body {
    font-size: 15px;
  }

  .demo-bottom-photos {
    gap: 19px;
    flex-direction: column;
    width: 80%;
    margin: 0 auto;
  }

  .regist_d01 p {
    font-size: 15px;
    width: 94%;
    margin: 14px auto;
  }
}

/* ==========================================
   スマホ表示時の固定幅リセット＆レスポンシブ化
   ========================================== */
@media screen and (max-width: 768px) {
  /* 1. 全体枠の固定980pxを強制解除して画面内に収める */
  #header_wrap > div,
  .main_visual_area > div,
  #mainmenu_wrap > div,
  #container {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2. ヘッダー画像・メイン画像を画面幅にフィットさせる */
  .main_visual_area img,
  #header img,
  #logo_area img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 3. PC用メインメニュー（画像の横並び）を縦並びまたは調整 */
  #mainmenu ul {
    display: flex !important;
    flex-direction: column !important; /* スマホでは縦並びにする */
    align-items: center !important;
  }

  #mainmenu ul li {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 5px !important;
  }

  #mainmenu ul li img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 4. ヘッダーの右側住所・電話番号の横幅オーバーを調整 */
  #header_utility,
  #header_navi {
    float: none !important;
    text-align: left !important;
    width: 100% !important;
    padding-left: 10px;
  }

  .wpsbc-container[data-columns] .wpsbc-calendars {
    display: flex;
    justify-content: center;
  }

  #three_maincolumn {
    margin: 0;
  }

  #rightbnr li {
    text-align: center !important;
  }

  #rightbnr li img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ==========================================
   footer
   ========================================== */

/* スマホ表示時：フッターのレスポンシブ調整 */
@media screen and (max-width: 768px) {
  /* 1. 外枠と内部の幅を100%にして余白を調整 */
  #footer_wrap,
  #footer {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
    text-align: center !important; /* 全体を中央寄せ */
  }

  /* 2. ナビゲーションリンクの調整 */
  #footer_navi {
    font-size: 14px !important;
    line-height: 1.8 !important;
    margin: 15px auto !important;
    word-break: break-all;
    color: #fff;
  }

  #footer_navi a {
    display: inline-block; /* タップしやすいように適度な領域を確保 */
    padding: 3px 5px;
  }

  /* 3. コピーライト表記の調整 */
  #copyright {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  #footer a {
    color: #fff;
  }
}

/* ==========================================
   table
   ========================================== */

/* スマホ表示時：工賃表（fee-table）をシュッとコンパクトに収める */
@media screen and (max-width: 768px) {
  /* コンテナ全体の余白調整 */
  .fee-table-container {
    width: 90% !important;
    overflow-x: auto; /* 万が一溢れても横スクロール可能に */
    margin: 10px auto;
  }

  /* 表全体のスタイル */
  .fee-table {
    width: 100% !important;
    border-collapse: collapse;
    font-size: 13px !important; /* 文字サイズを少し小さくして収まりを良くする */
  }

  /* セル（マス目）の無駄な余白をギュッと詰める */
  .fee-table th,
  .fee-table td {
    padding: 12px 10px !important; /* 上下左右の余白を小さく */
    line-height: 1.4 !important;
    border-bottom: 1px solid #444; /* 見やすい区切り線 */
  }

  /* 左側（作業項目）の文字間隔を詰めて通常に戻す */
  .fee-table td:first-child {
    text-align: left !important;
    letter-spacing: normal !important; /* 「ヘ ッ ド ユ ニ ッ ト」の広がっている間隔をリセット */
    word-break: break-all;
  }

  /* 右側（金額）の調整 */
  .fee-table td:last-child {
    text-align: right !important; /* 金額は右寄せ */
    white-space: nowrap; /* 金額の「￥5,000〜」が変な場所で改行されるのを防止 */
    font-weight: bold;
  }

  .fee-notes {
    margin: 20px;
    padding: 0;
  }

  .fee-notes p {
    font-size: 14px;
  }

  .soudankai-img-wrap {
    display: flex;
    justify-content: center;
  }

  .regist_d01 ul li {
    text-align: justify;
    width: 90%;
    margin: 0 auto;
  }

  .contest-result-body p {
    width: 90%;
    margin: 0 auto;
    font-size: 15px;
  }

  .contest-result-img-group {
    width: 90%;
  }

  .pioneer-contest-2col-p {
    font-size: 17px;
  }
  .pioneer-contest-2col-rank-large {
    font-size: 22px;
  }

  .morel-democar-img-group-3,
  .morel-democar-img-group-2 {
    width: 90%;
  }

  .morel-democar-body p {
    width: 90%;
    margin: 0 auto;
  }

  .tweeter-install-card {
    width: 90%;
  }

  .tweeter-install-intro p {
    margin: 25px auto;
    font-size: 15px;
    width: 90%;
    text-align: justify;
  }

  .tweeter-install-footer {
    margin: 30px auto;
    width: 90%;
    font-size: 15px;
    text-align: justify;
  }

  table {
    border-top: none;
    border-left: none;
  }

  .contact-form-container {
    width: 90%;
  }

  ul#centerbnrs {
    width: 90%;
  }

  .introduction_area {
    width: 95%;
    margin: 0 auto;
  }

  #news_area .bloc_body {
    width: 90%;
    margin: 0 auto;
  }
  #leftbnr {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
  }

  #mainmenu_wrap {
    padding: 0 !important;
  }

  div#undercolumn_greeting .left_area {
    float: inherit;
    margin-right: none;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .clearfix p {
    width: 98%;
    margin: 0 auto;
    text-align: justify;
  }

  div#undercolumn_aboutus {
    width: 90%;
    margin: 40px auto;
  }
}

.install-gallery {
  display: flex;
  margin: 20px 0;
  width: 100%;
  flex-wrap: wrap;
}

.install-gallery img {
  width: 25%;
}

@media screen and (max-width: 768px) {
  .install-gallery img {
    width: 50%;
  }
}

/* 口コミエリア全体を白枠カード風にする */
#voice {
  max-width: 800px;
  margin: 30px auto;
  padding: 30px;
  background-color: #ffffff;
  color: #333333;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* 見出しの文字色を調整 */
#voice h2 {
  color: #111111 !important;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 18px;
  margin-bottom: 20px;
  margin-top: 12px;
  font-size: 1.7rem;
}

/* 入力フォームのラベル（文字）を見やすく黒にする */
.glsr-form label,
.glsr-form .glsr-label {
  color: #333333 !important;
  font-weight: bold;
}

/* 入力欄の背景色と枠線 */
.glsr-form input[type="text"],
.glsr-form textarea {
  background-color: #f9f9f9 !important;
  color: #333333 !important;
  border: 1px solid #ccc !important;
  border-radius: 6px;
  padding: 10px;
}

/* 送信ボタンの装飾 */
.glsr-form button[type="submit"] {
  background-color: #0073aa !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px;
  padding: 12px 24px;
  font-size: 16px;
  cursor: pointer;
}

.glsr-form button[type="submit"]:hover {
  background-color: #005177 !important;
}

/* ラベル内の元テキストを非表示にして、日本語テキストを表示 */

/* 1. 総合評価 */
.glsr-field-rating .glsr-label span {
  display: none !important;
}
.glsr-field-rating .glsr-label::before {
  content: "総合評価" !important;
}

/* 2. レビューのタイトル */
.glsr-field-text[data-field="title"] .glsr-label span {
  display: none !important;
}
.glsr-field-text[data-field="title"] .glsr-label::before {
  content: "レビューのタイトル" !important;
}

/* 3. レビュー内容 */
.glsr-field-textarea[data-field="content"] .glsr-label span {
  display: none !important;
}
.glsr-field-textarea[data-field="content"] .glsr-label::before {
  content: "レビュー内容" !important;
}

/* 4. お名前 */
.glsr-field-text[data-field="name"] .glsr-label span {
  display: none !important;
}
.glsr-field-text[data-field="name"] .glsr-label::before {
  content: "お名前" !important;
}

/* 5. チェックボックス（同意文章） */
.glsr-field-choice[data-field="terms"] label[for*="-terms-"] {
  font-size: 0 !important;
}
.glsr-field-choice[data-field="terms"] label[for*="-terms-"]::before {
  content: "このレビューは個人の感想・意見です" !important;
  font-size: 14px !important;
}

/* 6. 送信ボタン */
.glsr-button[type="submit"] {
  font-size: 0 !important;
}
.glsr-button[type="submit"]::before {
  content: "レビューを送信する" !important;
  font-size: 16px !important;
}

/* --- プレースホルダーの日本語化 --- */

/* 1. タイトル入力欄 */
.glsr-field-text[data-field="title"] input::placeholder {
  color: transparent !important;
}
.glsr-field-text[data-field="title"] input::-webkit-input-placeholder {
  color: transparent !important;
}
.glsr-field-text[data-field="title"] {
  position: relative !important;
}
.glsr-field-text[data-field="title"]::after {
  content: "タイトルを入力してください" !important;
  position: absolute !important;
  left: 14px !important;
  bottom: 12px !important;
  color: #888888 !important;
  font-size: 14px !important;
  pointer-events: none !important;
}
.glsr-field-text[data-field="title"]
  input:not(:placeholder-shown)
  + div
  + ::after,
.glsr-field-text[data-field="title"] input:focus + ::after {
  display: none !important;
}

/* 2. 本文入力欄 */
.glsr-field-textarea[data-field="content"] textarea::placeholder {
  color: transparent !important;
}
.glsr-field-textarea[data-field="content"] textarea::-webkit-input-placeholder {
  color: transparent !important;
}
.glsr-field-textarea[data-field="content"] {
  position: relative !important;
}
.glsr-field-textarea[data-field="content"]::after {
  content: "ご感想・ご意見をお聞かせください" !important;
  position: absolute !important;
  left: 14px !important;
  top: 40px !important;
  color: #888888 !important;
  font-size: 14px !important;
  pointer-events: none !important;
}

/* 3. お名前入力欄（ペンネーム案内） */
.glsr-field-text[data-field="name"] input::placeholder {
  color: transparent !important;
}
.glsr-field-text[data-field="name"] input::-webkit-input-placeholder {
  color: transparent !important;
}
.glsr-field-text[data-field="name"] {
  position: relative !important;
}
.glsr-field-text[data-field="name"]::after {
  content: "例：ペンネーム可（山田太郎）" !important;
  position: absolute !important;
  left: 14px !important;
  bottom: 12px !important;
  color: #888888 !important;
  font-size: 14px !important;
  pointer-events: none !important;
}

/* サイドバーのバナー群をレスポンシブ対応にする */
#rightbnr {
  width: 100%;
  max-width: 230px; /* PC表示時の最大幅（サイトに合わせて調整） */
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

#rightbnr li {
  width: 100%;
  margin-bottom: 10px; /* バナー同士の間隔 */
}

#rightbnr img {
  width: 100%;
  height: auto;
  display: block;
}

/* スマホ表示での崩れ・はみ出しを強制リセット */
@media screen and (max-width: 768px) {
  /* 記事エリア全体の幅を100%に固定 */
  article,
  .post_header,
  .post_content,
  .post_content p {
    max-width: 95% !important;
    width: auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* タイトルの見切れ（改行処理）の修正 */
  .post_header h1 {
    font-size: 18px !important; /* スマホ用に文字サイズを調整 */
    white-space: normal !important; /* 強制改行を許可 */
    word-break: break-all !important;
  }

  /* 画像のはみ出し・折り返しを完全に修正 */
  .post_content p img,
  .post_content img.alignleft {
    max-width: 90% !important;
    height: auto !important;
    float: none !important; /* 左寄せ・回り込みを解除 */
    display: block !important; /* インライン要素からブロック要素へ */
    margin: 10px auto !important; /* 中央寄せ */
  }
}

/* 外枠コンテナのはみ出しを強制リセット */
@media screen and (max-width: 768px) {
  body,
  main,
  article,
  .post_content {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}