/*
Theme Name: Madori Second Opinion
Theme URI: https://www.libwork.co.jp/
Author: Lib Work
Author URI: https://www.libwork.co.jp/
Description: 間取りセカンドオピニオン診断 LP 専用テーマ（ショートコード埋め込み対応）。
Version: 1.0.1
Text Domain: madori-second-opinion
*/
/* =========================
   LW Second Opinion - Form UI
   ========================= */

.lw-so-wrap{
  /* brand palette (logo: blue + pink) */
  --so-bg:#f7f9ff;
  --so-card:#ffffff;
  --so-border:#e5e7eb;
  --so-text:#0b1b3a;
  --so-muted:#55637a;
  --so-primary:#2F80ED;   /* blue */
  --so-accent:#E83B78;    /* pink */

  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif;
  color: var(--so-text);
  line-height: 1.65;
  max-width: 920px;
  margin: 28px auto;
  padding: 16px;
  background: var(--so-bg);
  border-radius: 18px;
}
@media (max-width: 640px){
  .lw-so-wrap{ margin: 16px auto; padding: 12px; border-radius: 16px; }
}

.lw-so-wrap *{ box-sizing: border-box; }

.lw-so-card{

}
.lw-so-card + .lw-so-card{ margin-top: 16px; }

.lw-so-card h3{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .01em;
}

.lw-so-note{
  color: var(--so-muted);
  font-size: 13px;
  line-height: 1.7;
}

/* ラベル：少し大きめ＋太字で視認性UP */
.lw-so-label{
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  margin: 14px 0 6px;
}

/* 2カラム：flex → grid に置き換え（自然に折り返す） */
.lw-so-row{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.lw-so-row > div{ min-width: 0; }

/* 入力群 */
.lw-so-wrap .lw-so-input,
.lw-so-wrap .lw-so-textarea{
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  color: var(--so-text);
  font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .05s ease;
}
.lw-so-wrap .lw-so-textarea{
  min-height: 160px;
  resize: vertical;
  line-height: 1.6;
}
.lw-so-wrap input::placeholder,
.lw-so-wrap textarea::placeholder{ color:#9ca3af; }

.lw-so-wrap input:focus,
.lw-so-wrap textarea:focus,
.lw-so-wrap select:focus{
  outline: none;
  border-color: #111827;
  box-shadow: 0 0 0 4px rgba(17,24,39,.12);
}

.lw-so-wrap input:disabled,
.lw-so-wrap textarea:disabled,
.lw-so-wrap select:disabled{
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

/* select の見た目（最低限） */
.lw-so-wrap select.lw-so-input{
  padding-right: 40px;
}

/* file input をそれっぽく */
.lw-so-wrap input[type="file"]{
  width: 100%;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  padding: 10px;
  background: #fff;
  font-size: 14px;
}
.lw-so-wrap input[type="file"]::file-selector-button{
  border: 1px solid #111827;
  background: #111827;
  color: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  margin-right: 10px;
  cursor: pointer;
}
.lw-so-wrap input[type="file"]::file-selector-button:hover{
  filter: brightness(1.08);
}
/* Safari 向け */
.lw-so-wrap input[type="file"]::-webkit-file-upload-button{
  border: 1px solid #111827;
  background: #111827;
  color: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  margin-right: 10px;
  cursor: pointer;
}

/* ボタン */
.lw-so-btn{
  appearance: none;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 13px 18px;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .05s ease, filter .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.lw-so-btn-primary{
  background: var(--so-primary);
  color: #fff;
  box-shadow: 0 10px 20px rgba(17,24,39,.12);
}
.lw-so-btn-primary:hover{ filter: brightness(1.07); }
.lw-so-btn:active{ transform: translateY(1px); }
.lw-so-btn[disabled],
.lw-so-btn[aria-disabled="true"]{
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* アラート */
.lw-so-error, .lw-so-success{
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  margin-top: 12px;
}
.lw-so-error{
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #7f1d1d;
}
.lw-so-success{
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #14532d;
}

/* ローディング */
.lw-so-overlay{
  background: rgba(248,250,252,.85);
  backdrop-filter: saturate(180%) blur(6px);
}
.lw-so-overlay-inner{
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
}
.lw-so-spinner{ border-top-color: #111827; }

/* 結果テーブルも読みやすく（AI結果の table{border:1px!important;} を上書き） */
.lw-so-card table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--so-border) !important;
  border-radius: 12px;
  overflow: hidden;
  margin: 10px 0 14px;
}
.lw-so-card th, .lw-so-card td{
  padding: 10px;
  border-bottom: 1px solid var(--so-border);
  border-right: 1px solid var(--so-border);
  vertical-align: top;
  font-size: 14px;
}
.lw-so-card tr:last-child th,
.lw-so-card tr:last-child td{ border-bottom: 0; }
.lw-so-card th:last-child,
.lw-so-card td:last-child{ border-right: 0; }
.lw-so-card th{
  background: #f9fafb;
  font-weight: 800;
  width: 28%;
}
.lw-so-card h2{
  font-size: 16px;
  margin: 18px 0 8px;
}
.lw-so-card ul{ padding-left: 18px; margin: 8px 0 12px; }
.lw-so-card a{
  color: #111827;
  text-decoration: underline;
  text-underline-offset: 3px;
}







/* =========================
   Modern UI (Override)
   ========================= */

.lw-so-wrap{
  --so-bg: #f7f9ff;
  --so-card: rgba(255,255,255,.92);
  --so-border: rgba(11,27,58,.10);
  --so-text: #0b1b3a;
  --so-muted: rgba(11,27,58,.60);
  --so-primary: #2F80ED;   /* blue */
  --so-accent: #E83B78;    /* pink */
  --so-ring: rgba(47,128,237,.22);

  background: radial-gradient(1200px 600px at 15% -10%, rgba(232,59,120,.08), transparent 60%),
              radial-gradient(1000px 600px at 100% 0%, rgba(47,128,237,.10), transparent 55%),
              var(--so-bg);
  border: 1px solid rgba(11,27,58,.08);
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(11,27,58,.08);
  padding: 18px;
}

@media (max-width: 640px){
  .lw-so-wrap{ padding: 14px; border-radius: 18px; }
}

.lw-so-card{
  background: var(--so-card);
  border: 1px solid var(--so-border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 14px 36px rgba(11,27,58,.08);
  backdrop-filter: blur(6px);
}

.lw-so-card h3{
  font-size: 18px;
  letter-spacing: .01em;
  margin: 0 0 12px;
}

.lw-so-note{
  color: var(--so-muted);
  font-size: 13px;
  line-height: 1.8;
}

/* 余白：height:10px をやめるための「積み上げ」 */
.lw-so-stack > * + *{ margin-top: 14px; }
.lw-so-stack-tight > * + *{ margin-top: 10px; }

.lw-so-section{
  border: 1px solid rgba(11,27,58,.08);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255,255,255,.72);
}
.lw-so-section-title{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin: 0 0 10px;
}
.lw-so-section-title .t{
  font-weight: 900;
  font-size: 14px;
  color: var(--so-text);
}
.lw-so-section-title .s{
  font-size: 12px;
  color: var(--so-muted);
}

/* label */
.lw-so-label{
  display:flex;
  align-items:center;
  gap:8px;
  margin: 0 0 7px;
  font-size: 13px;
  font-weight: 800;
  color: var(--so-text);
}
.lw-so-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size: 11px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(11,27,58,.12);
  background: rgba(11,27,58,.06);
  color: rgba(11,27,58,.78);
}
.lw-so-badge.req{
  background: #111827;
  border-color: #111827;
  color: #fff;
}

/* grid */
.lw-so-row{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* inputs */
.lw-so-wrap .lw-so-input,
.lw-so-wrap .lw-so-textarea{
  width: 100%;
  border: 1px solid rgba(11,27,58,.14);
  border-radius: 14px;
  padding: 12px 12px;
  background: rgba(255,255,255,.92);
  color: var(--so-text);
  font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease, background .15s ease;
}

.lw-so-wrap .lw-so-textarea{
  min-height: 170px;
  resize: vertical;
  line-height: 1.7;
}

.lw-so-wrap input::placeholder,
.lw-so-wrap textarea::placeholder{
  color: rgba(11,27,58,.35);
}

.lw-so-wrap input:focus,
.lw-so-wrap textarea:focus,
.lw-so-wrap select:focus{
  outline: none;
  border-color: rgba(17,24,39,.55);
  box-shadow: 0 0 0 6px var(--so-ring);
  background: #fff;
}

.lw-so-wrap input:active,
.lw-so-wrap textarea:active{
  transform: translateY(1px);
}

/* select：右側の矢印を今風に */
.lw-so-wrap select.lw-so-input{
  appearance: none;
  padding-right: 44px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(11,27,58,.55) 50%),
    linear-gradient(135deg, rgba(11,27,58,.55) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 20px) calc(50% - 3px),
    calc(100% - 14px) calc(50% - 3px),
    calc(100% - 44px) 50%;
  background-size: 6px 6px, 6px 6px, 1px 22px;
  background-repeat: no-repeat;
}

/* file input */
.lw-so-wrap input[type="file"]{
  width: 100%;
  border: 1px dashed rgba(11,27,58,.22);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,.90);
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lw-so-wrap input[type="file"]:hover{
  border-color: rgba(11,27,58,.35);
}
.lw-so-wrap input[type="file"]:focus{
  outline: none;
  box-shadow: 0 0 0 6px var(--so-ring);
}

.lw-so-wrap input[type="file"]::file-selector-button{
  border: 1px solid rgba(11,27,58,.16);
  background: rgba(11,27,58,.06);
  color: var(--so-text);
  padding: 10px 12px;
  border-radius: 12px;
  margin-right: 10px;
  cursor: pointer;
  font-weight: 800;
}
.lw-so-wrap input[type="file"]::file-selector-button:hover{
  background: rgba(11,27,58,.10);
}

/* button */
.lw-so-btn{
  border-radius: 16px;
  padding: 14px 18px;
  font-weight: 900;
  letter-spacing: .02em;
}
.lw-so-btn-primary{
  background: linear-gradient(180deg, #111827, #0b1220);
  color: #fff;
  box-shadow: 0 16px 34px rgba(11,27,58,.18);
}
.lw-so-btn-primary:hover{ filter: brightness(1.06); }
.lw-so-btn-primary:active{ transform: translateY(1px); }

/* submit：スマホはフル幅に */
@media (max-width: 640px){
  .lw-so-btn{ width:100%; }
}

/* helper text（説明文をもう少し今風に） */
.lw-so-help{
  color: var(--so-muted);
  font-size: 12px;
  line-height: 1.7;
  margin-top: 6px;
}


/*
Theme Name: Madori Second Opinion
Theme URI: https://www.libwork.co.jp/
Author: Lib Work
Author URI: https://www.libwork.co.jp/
Description: 間取りセカンドオピニオン診断 LP 専用テーマ（ショートコード埋め込み対応）。
Version: 2.0.0
Text Domain: madori-second-opinion
*/

/* =========================
   Modern UI (Friendly & Clean)
   Based on the new Blue/Pink Logo
   ========================= */

.lw-so-wrap {
  /* 新しいロゴに基づいたパレット */
  --so-bg: #ffffff;
  --so-card: #ffffff;
  --so-border: #e2e8f0; /* slate-200 */
  --so-text: #334155;   /* slate-700 */
  --so-muted: #64748b;  /* slate-500 */
  
  --so-primary: #0ea5e9;   /* Sky Blue (Logo Main) */
  --so-primary-hover: #0284c7;
  --so-accent: #ec4899;    /* Pink (Logo Accent) */
  --so-accent-hover: #db2777;
  
  --so-ring: rgba(14, 165, 233, 0.25); /* Focus ring color */

  /* 親しみやすい丸みのあるデザイン */
  font-family: "Noto Sans JP", sans-serif;
  color: var(--so-text);
  line-height: 1.65;
  max-width: 800px; /* 少し幅を狭めて読みやすく */
  margin: 0 auto;
  padding: 24px;
  background: #f8fafc; /* 背景を少しグレーにしてカードを目立たせる */
  border-radius: 24px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

@media (max-width: 640px) {
  .lw-so-wrap { padding: 16px; border-radius: 16px; background: transparent; box-shadow: none; }
}

.lw-so-wrap * { box-sizing: border-box; }

/* カードスタイル */
.lw-so-card {
  background: var(--so-card);
  border: 1px solid var(--so-border);
  border-radius: 20px; /* 丸みを強く */
  padding: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}
.lw-so-card + .lw-so-card { margin-top: 20px; }

.lw-so-card h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--so-text);
  font-family: "Zen Maru Gothic", sans-serif; /* 見出しは丸ゴシック */
}

/* ラベル */
.lw-so-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--so-text);
  margin: 16px 0 8px;
}
.lw-so-label span.req {
  background: var(--so-accent);
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 6px;
  margin-left: 6px;
  vertical-align: middle;
}

/* グリッドレイアウト */
.lw-so-row {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* 入力フィールド */
.lw-so-wrap .lw-so-input,
.lw-so-wrap .lw-so-textarea {
  width: 100%;
  border: 2px solid #e2e8f0; /* 枠線を少し太く優しく */
  border-radius: 12px;
  padding: 12px 16px;
  background: #f8fafc;
  color: var(--so-text);
  font-size: 16px; /* スマホでズームしないサイズ */
  transition: all 0.2s ease;
}

.lw-so-wrap .lw-so-textarea {
  min-height: 120px;
  resize: vertical;
}

.lw-so-wrap input::placeholder,
.lw-so-wrap textarea::placeholder { color: #94a3b8; }

.lw-so-wrap input:focus,
.lw-so-wrap textarea:focus,
.lw-so-wrap select:focus {
  outline: none;
  border-color: var(--so-primary);
  background: #fff;
  box-shadow: 0 0 0 4px var(--so-ring);
}

/* ファイル入力 */
.lw-so-wrap input[type="file"] {
  border: 2px dashed #cbd5e1;
  background: #f1f5f9;
  padding: 16px;
  text-align: center;
  cursor: pointer;
}
.lw-so-wrap input[type="file"]::file-selector-button {
  background: var(--so-primary);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  margin-right: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}
.lw-so-wrap input[type="file"]::file-selector-button:hover {
  background: var(--so-primary-hover);
}

/* ボタン */
.lw-so-btn {
  appearance: none;
  border: none;
  border-radius: 50px; /* 完全な角丸 */
  padding: 16px 32px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s;
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 24px auto 0;
  text-align: center;
}

.lw-so-btn-primary {
  /* ピンクのグラデーションでCTAを強調 */
  background: linear-gradient(135deg, var(--so-accent) 0%, var(--so-accent-hover) 100%);
  color: #fff;
  box-shadow: 0 10px 20px -5px rgba(236, 72, 153, 0.4);
}
.lw-so-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 25px -5px rgba(236, 72, 153, 0.5);
}
.lw-so-btn-primary:active {
  transform: translateY(1px);
}

/* テーブルスタイル（診断結果用） */
.lw-so-card table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--so-border);
  border-radius: 12px;
  overflow: hidden;
  margin: 16px 0;
}
.lw-so-card th {
  background: var(--so-primary);
  color: #fff;
  font-weight: bold;
  padding: 10px;
  text-align: left;
}
.lw-so-card td {
  padding: 10px;
  border-bottom: 1px solid var(--so-border);
}
.lw-so-card tr:last-child td { border-bottom: none; }

/* =========================
   Flow (ご利用の流れ) images
   ========================= */
.so-flow-img{
  width: 100%;
  max-width: 240px;
  height: 140px;
  display: block;
  margin: 0 auto;
  object-fit: contain; /* 画像の欠けを防ぐ */
  border-radius: 16px;
  border: 1px solid rgba(226,232,240,.9);
  background: #fff;
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}
@media (min-width: 768px){
  .so-flow-img{ height: 160px; }
}




/* セル内の改行ルールを「読みやすく」 */
.lw-so-card th,
.lw-so-card td{
  white-space: normal;        /* 折り返しOK */
  word-break: normal;         /* 1文字ずつ折らない */
  overflow-wrap: anywhere;    /* 長い英数字だけ必要に応じて折る */
  line-height: 1.6;
}

/* 見出し列が細くなりすぎるのを防ぐ（任意） */
.lw-so-card th{
  min-width: 120px;
  width: auto;                /* 既存の width:28% を実質無効化 */
}
@media (max-width: 640px){
  .lw-so-card th:nth-child(3),
  .lw-so-card td:nth-child(3){ min-width: 90px; }   /* 判定 */
  .lw-so-card th:nth-child(4),
  .lw-so-card td:nth-child(4){ min-width: 180px; }  /* 理由 */
  .lw-so-card th:nth-child(5),
  .lw-so-card td:nth-child(5){ min-width: 220px; }  /* 代替案 */
  .lw-so-card th:nth-child(6),
  .lw-so-card td:nth-child(6){ min-width: 220px; }  /* コメント */
}


@media (max-width: 640px){
  .lw-so-card th:nth-child(3),
  .lw-so-card td:nth-child(3){ min-width: 90px; }   /* 判定 */
  .lw-so-card th:nth-child(4),
  .lw-so-card td:nth-child(4){ min-width: 180px; }  /* 理由 */
  .lw-so-card th:nth-child(5),
  .lw-so-card td:nth-child(5){ min-width: 220px; }  /* 代替案 */
  .lw-so-card th:nth-child(6),
  .lw-so-card td:nth-child(6){ min-width: 220px; }  /* コメント */
}

/* ===== 表：スマホで横スクロール＆1文字改行防止（最終版） ===== */
.so-table-scroll{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.so-table-scroll > table{
  width: max-content;
  min-width: 1100px;
  table-layout: auto;
  border-radius: 12px;
  overflow: hidden;
}

.lw-so-card th,
.lw-so-card td{
  white-space: normal;
  word-break: normal;      /* 1文字ずつ折らない */
  overflow-wrap: anywhere; /* 長い英数字だけ折る */
  line-height: 1.7;
}

.lw-so-card th{
  white-space: nowrap;     /* 見出しは折らない */
  min-width: 120px;
}

/* スマホは少し広めにして読みやすく */
@media (max-width: 640px){
  .so-table-scroll > table{ min-width: 1200px; }
  .lw-so-card th, .lw-so-card td{ font-size: 14px; padding: 10px 12px; }

  /* 必要なら列ごとの幅（②の表が6列前提） */
  .lw-so-card th:nth-child(4),
  .lw-so-card td:nth-child(4){ min-width: 180px; }  /* 理由 */
  .lw-so-card th:nth-child(5),
  .lw-so-card td:nth-child(5){ min-width: 220px; }  /* 代替案 */
  .lw-so-card th:nth-child(6),
  .lw-so-card td:nth-child(6){ min-width: 220px; }  /* コメント */
}
.py-3{
padding-left:1rem!important;}