/*
Theme Name: 藤沢工業
Description: 藤沢工業オリジナルテーマ
Version: 1.1.0
*/
@charset "utf-8";
/*@import"./blocks/block-phototext1.css";
@import"./blocks/block-section_header1.css";*/

/************************************
** 追加背景セクション
************************************/
/*背景ナチュラル*/
.change-na {
    background: #fff7f3;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: -33px;
}
/*背景ネイビー*/
.change-nv {
    background: #003b5d;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: -33px;
}
/*背景青*/
.change-area {
    background: #fbfdff;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: -33px;
}
/*背景赤*/
.change-aka {
    background: #ffc9c9;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: -33px;
}
/*背景黄色*/
.change-yello {
    background: #ededaa;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: -33px;
}
/*背景グレー*/
.change-gray {
    background: #f5f5f5;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: -33px;
}
/*背景ブラック*/
.change-black {
    background: #0a0a0a;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: -33px;
}
/*背景ホワイト*/
.change-white {
    background: #fff;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: -33px;
}
/************************************
** youtubeレスポンシブ
************************************/
.youtube_wrap{
    padding-top: 56.25%;
    padding-bottom:10px;
    width: 100%;
    position: relative;
}
 
.youtube_wrap iframe{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
/************************************
** リンクカード変更
************************************/
.wp-embedded-content {
	width: 100%;
	max-width: 100%;
}
/************************************
** サポートフォーム用（スリム版）
** 対象ページに .page-botfom を付与
************************************/

/* 1) ベース */
html, body { max-width: 100vw; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

.page-botfom #chat-widget {
  font-family: 'Inter','Noto Sans JP',system-ui,-apple-system,Segoe UI,Roboto,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* テーマ上書き対策：チャット配下の左寄せ＆text-sm固定 */
.page-botfom #chat-widget :where(ul,li,label,input,textarea,button,select,div,p){
/* $00A0text-align: left !important;*/
  font-size: .875rem !important;   /* text-sm */
  line-height: 1.25rem !important;
}
/* --- Bot吹き出し専用クラス --- */
#chat-widget .text-sm2 {
  text-align: left !important;
  color: #374151 !important; /* gray-700 */
}
/* メッセージのスクロールバー */
.page-botfom #chat-container::-webkit-scrollbar{ width:6px; }
.page-botfom #chat-container::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius:3px; }
.page-botfom #chat-container::-webkit-scrollbar-thumb:hover{ background:#9ca3af; }

/* 2) アニメーション（低減設定尊重） */
@media (prefers-reduced-motion:no-preference){
  .bot-message,.user-message{ opacity:0; transform:translateY(12px); animation:fadeIn .35s forwards; }
  @keyframes fadeIn{ to{opacity:1; transform:translateY(0);} }
}
.message-bubble{ transition: box-shadow .25s ease, transform .2s ease; }

/* 3) カルーセル：スクロール無しの折返し（2列→4列） */
.page-botfom #chat-widget .carousel-container{
  display:grid; gap:12px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:1024px){
  .page-botfom #chat-widget .carousel-container{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* 4) マルチセレクトの見た目 */
.page-botfom #chat-widget label.ms-label{
  display:block; width:100%;
  border:1px solid #d1d5db !important; border-radius:.5rem;
  background:#fff !important; color:#374151 !important;
}
.page-botfom #chat-widget input[type="checkbox"].peer:checked + label.ms-label{
  border-color:#2563EB !important; background:#EFF6FF !important; color:#1D4ED8 !important;
}
.page-botfom #chat-widget label.ms-label:hover{ background:#F9FAFB !important; }

/* 5) CF7：1→2カラムグリッド化（このHTML構造前提） */
.page-botfom :is(#chat-widget,#options-container) form.wpcf7-form > p{
  display:grid !important; grid-template-columns:1fr; gap:12px; margin:0 !important; text-align:left !important; padding-bottom:8px;
}
.page-botfom :is(#chat-widget,#options-container) form.wpcf7-form > p > br{ display:none !important; }

/* 入力系共通 */
.page-botfom :is(#chat-widget,#options-container) form.wpcf7-form :is(input[type="text"],input[type="email"],input[type="tel"],select,textarea){
  width:100%; background:#fff; border:1px solid #d1d5db; border-radius:8px; padding:10px 12px;
  font-size:14px; line-height:1.4; color:#111827; transition:border-color .15s ease, box-shadow .15s ease;
}
.page-botfom :is(#chat-widget,#options-container) form.wpcf7-form :is(input,select,textarea):focus{
  border-color:#2563eb; outline:none; box-shadow:0 0 0 2px rgba(37,99,235,.2);
}

/* 全幅（段落内ぶち抜き）にしたいフィールド */
.page-botfom :is(#chat-widget,#options-container) form.wpcf7-form > p
  .wpcf7-form-control-wrap[data-name="your-prefecture"],
.page-botfom :is(#chat-widget,#options-container) form.wpcf7-form > p
  .wpcf7-form-control-wrap[data-name="your-inquiry"]{ grid-column:1 / -1; }

/* hidden context は非表示 */
.page-botfom :is(#chat-widget,#options-container) form.wpcf7-form input[type="hidden"][name="context"]{ display:none !important; }

/* 送信ボタン：中央・全幅扱い */
.page-botfom :is(#chat-widget,#options-container) form.wpcf7-form input.wpcf7-submit{
  grid-column:1 / -1; justify-self:center; display:inline-block;
  background:#2563eb; color:#fff; font-weight:700; border:0; border-radius:8px;
  padding:12px 28px; cursor:pointer; font-size:15px; transition:background-color .2s ease; margin-top:6px;
}
.page-botfom :is(#chat-widget,#options-container) form.wpcf7-form input.wpcf7-submit:hover{ background:#1d4ed8; }

/* レスポンスボックスもぶち抜き */
.page-botfom :is(#chat-widget,#options-container) form.wpcf7-form .wpcf7-response-output{ grid-column:1 / -1; }

/* PCで2カラムに */
@media (min-width:768px){
  .page-botfom :is(#chat-widget,#options-container) form.wpcf7-form > p{ grid-template-columns:repeat(2,1fr); }
}

/* 6) 都道府県セレクトの矢印 */
.page-botfom :is(#chat-widget,#options-container) select.p-contactForm__select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='%236b7280' xmlns='http://www.w3.org/2000/svg'%3E<path fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 011.06 1.06l-4.24 4.25a.75.75 0 01-1.06 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
}
.page-botfom :is(#chat-widget,#options-container) select.p-contactForm__select:invalid{ color:#6b7280; }
.page-botfom :is(#chat-widget,#options-container) select.p-contactForm__select:not(:invalid){ color:#111827; }

/* 7) ページ配色（背景：薄グレー／チャット：白／フッター：薄グレー） */
.page-botfom{ background:#f3f4f6 !important; }

.page-botfom #chat-widget{
  display:flex; flex-direction:column; width:100%; max-width:100vw; min-height:50dvh;
  border-radius:.75rem; background:#fff !important; box-shadow:0 2px 8px rgba(0,0,0,.06); overflow:hidden;
}

.page-botfom #chat-container{ background:#fff !important; color:#111827; padding:1rem 1.5rem; }
.page-botfom :is(#chat-widget header,#chat-widget footer,#options-container){
  background:#fff !important; border-top:1px solid #e5e7eb !important;
}
.page-botfom #options-container{ background:#f9fafb !important; padding:1.5rem; }
.page-botfom #options-container form.wpcf7-form{
  background:#fff; border:1px solid #e5e7eb; border-radius:.75rem; box-shadow:0 1px 3px rgba(0,0,0,.08); padding:1.25rem 1.5rem;
}
@media (max-width:767px){
  .page-botfom #options-container{ padding:1rem; }
  .page-botfom #options-container form.wpcf7-form{ padding:1rem; }
}

/* 8) 共通フッター（右寄せ） */
.page-botfom .chat-footer-common{
  background:#f3f4f6; border-top:1px solid #e5e7eb; padding:1.5rem 0; margin-top:2rem; text-align:right;
}
.page-botfom .chat-footer-common .footer-inner{ max-width:960px; margin:0 auto; padding:0 1rem; }
.page-botfom .chat-footer-common .footer-text{ color:#6b7280; font-size:.8125rem; letter-spacing:.02em; }
/* 吹き出しの左側に「既読」を出す */
.user-message {
  position: relative;
  padding-left: 48px; /* 既読用の余白を確保 */
}

.user-message .message-bubble {
  position: relative;
  overflow: visible;
}

/* 既読マークの基本位置：バブルの左外（縦センター） */
.user-message .user-receipt {
  position: absolute;
  right: calc(100% + 8px);  /* バブルの左外8px */
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  line-height: 1;
  color: #9ca3af;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, color 0.3s ease;
}

/* 表示状態 */
.user-message .user-receipt.show {
  opacity: 1;
  color: #6b7280; /* gray-500 */
}
/* ブランド情報のカラムレイアウト調整 */
.p-brand-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 画像と画像の間の余白。お好みで調整してください */
  justify-content: space-between;
}

.p-brand-columns .wp-block-column {
  flex: 1; /* 3つの要素を均等な幅にします */
  min-width: 22%; /* 3カラムを維持するための最小幅 */
}

/* スマホ用の設定（画面幅が768px以下の場合） */
@media screen and (max-width: 768px) {
  .p-brand-columns {
    flex-direction: column; /* 縦並びに変更 */
  }
  .p-brand-columns .wp-block-column {
    min-width: 100%; /* 横幅いっぱいに広げる */
  }
}
.p-TopMore_link {
  text-align: center;
  display: flex;
  justify-content: center;
}
/* フォーム全体のラッパー */
.p-contact-wrapper {
  max-width: 800px;
  margin: 0 auto;
  font-family: "Noto Sans JP", sans-serif;
  color: #333;
}

.p-contact-intro {
  text-align: center;
  margin-bottom: 2rem;
  line-height: 1.8;
}

/* グルーピング設定 */
.p-contact-group {
  border: none;
  background: #f9f9f9;
  padding: 2rem;
  margin-bottom: 2rem;
  border-radius: 8px;
}

.p-contact-group__title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 1rem;
  border-bottom: 2px solid #2c3e50;
  padding-bottom: 0.5rem;
  width: 100%;
}

/* テーブルスタイル */
.p-contact-table {
  width: 100%;
  border-collapse: collapse;
}

.p-contact-table th,
.p-contact-table td {
  padding: 1.2rem 1rem;
  border-bottom: 1px solid #e0e0e0;
  vertical-align: middle;
}

.p-contact-table th {
  width: 30%;
  text-align: left;
  font-weight: bold;
}

/* 入力フィールド共通 */
.p-contact-table input[type="text"],
.p-contact-table input[type="email"],
.p-contact-table textarea,
.c-select-wrap select {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.p-contact-table textarea {
  min-height: 150px;
  resize: vertical;
}

/* 必須バッジ */
.c-badge--require {
  display: inline-block;
  background-color: #e74c3c;
  color: #fff;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ラジオボタン・チェックボックスをボタンスタイルに */
.c-radio-buttons .wpcf7-list-item,
.c-checkbox-buttons .wpcf7-list-item {
  display: inline-block;
  margin: 0 10px 10px 0;
}

.c-radio-buttons input[type="radio"],
.c-checkbox-buttons input[type="checkbox"] {
  display: none; /* デフォルトの丸や四角を消す */
}

.c-radio-buttons label,
.c-checkbox-buttons label {
  display: block;
  padding: 10px 20px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 選択時のスタイル */
.c-radio-buttons input:checked + span.wpcf7-list-item-label,
.c-checkbox-buttons input:checked + span.wpcf7-list-item-label {
  color: #fff;
}
.c-radio-buttons input:checked ~ *, /* CF7の構造対策 */
.c-radio-buttons input:checked + .wpcf7-list-item-label::before {
  /* ここはテーマによってDOM構造が変わるため簡易的な対応 */
}
/* CF7のDOM構造に合わせたボタンハイライト */
.c-radio-buttons .wpcf7-list-item label:has(input:checked),
.c-checkbox-buttons .wpcf7-list-item label:has(input:checked) {
    background-color: #2c3e50;
    color: #fff;
    border-color: #2c3e50;
}


/* 氏名入力欄 */
.p-contact-name {
  display: flex;
  gap: 10px;
}
.p-contact-name span {
  flex: 1;
}

/* 注記 */
.c-note {
  font-size: 0.85rem;
  color: #666;
  margin-top: 5px;
}

/* 同意・送信ボタン */
.p-contact-agree {
  text-align: center;
  margin: 2rem 0;
  padding: 1.5rem;
  background: #f1f8ff;
  border-radius: 8px;
}
.p-contact-agree__text {
  font-size: 0.85rem;
  color: #666;
  margin-top: 10px;
}

.p-contact-submit {
  text-align: center;
}
.p-contact-submit input[type="submit"] {
  background-color: #2c3e50;
  color: #fff;
  padding: 15px 60px;
  font-size: 1.1rem;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: opacity 0.3s;
}
.p-contact-submit input[type="submit"]:hover {
  opacity: 0.8;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .p-contact-table th,
  .p-contact-table td {
    display: block;
    width: 100%;
    border-bottom: none;
    padding: 0.5rem 0;
  }
  .p-contact-table tr {
    display: block;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }
}
/* =========================================================
   ヒアリングシート（LP用）専用CSS
========================================================= */
/*
.p-contact-wrapper { max-width: 800px; margin: 0 auto; font-family: sans-serif; color: #333; }
.p-contact-intro { text-align: center; margin-bottom: 20px; line-height: 1.6; }
.p-contact-title { text-align: center; font-size: 24px; border-bottom: 2px solid #2c3e50; padding-bottom: 10px; margin-bottom: 30px; }
.p-contact-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
.p-contact-table th, .p-contact-table td { padding: 15px; border-bottom: 1px solid #ddd; vertical-align: middle; }
.p-contact-table th { width: 30%; text-align: left; background: #f9f9f9; }
.c-badge--require { background: #e74c3c; color: #fff; font-size: 12px; padding: 2px 6px; border-radius: 3px; margin-left: 5px; }
.p-contact-name { display: flex; gap: 10px; }
.p-contact-name span { flex: 1; }
.p-contact-table input[type="text"], .p-contact-table input[type="email"], .p-contact-table textarea, .c-select-wrap select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.c-radio-group .wpcf7-list-item, .c-checkbox-group .wpcf7-list-item { display: inline-block; margin: 0 10px 10px 0; }
.c-radio-group input[type="radio"], .c-checkbox-group input[type="checkbox"] { display: none; }
.c-radio-group label, .c-checkbox-group label { display: block; padding: 8px 15px; background: #fff; border: 1px solid #ccc; border-radius: 20px; cursor: pointer; font-size: 14px; }
.wpcf7-list-item label:has(input:checked) { background: #2c3e50; color: #fff; border-color: #2c3e50; }
.c-note { font-size: 12px; color: #666; margin-top: 5px; }
.p-contact-agree { text-align: center; background: #f1f5f9; padding: 20px; border-radius: 8px; margin-bottom: 30px; }
.p-contact-submit { text-align: center; }
.p-contact-submit input[type="submit"] { background: #2c3e50; color: #fff; padding: 15px 60px; font-size: 18px; border: none; border-radius: 30px; cursor: pointer; }
*/
@media (max-width: 768px) {
  .p-contact-table th, .p-contact-table td { display: block; width: 100%; }
  .p-contact-name { flex-direction: column; }
}
/* フォーム上部の画像用スタイル */
.p-contact-header-image {
    text-align: center; 
    margin-bottom: 30px;
    width: 100%;
}

.p-contact-header-image img {
    max-width: 40%;
    height: auto;
    border-radius: 8px;
    
    /* ▼ここから追加：強制的に中央寄せにする指定▼ */
    display: block !important;
    margin: 0 auto !important; 
}