@charset "UTF-8";
/* ============================
  Base / Reset
============================ */
*{ box-sizing:border-box; }

body{
  font-size:62.5%;
  font-family:YuGothic,"Yu Gothic medium","Hiragino Sans",Meiryo,"sans-serif";
  font-weight:normal;
  color:#000;
}

a{ text-decoration:underline; }
a:link, a:visited{ color:#39f; }
a:hover, a:active{ color:#f60; }

/* 段落：強い !important は外す（運用しやすく） */
p{ margin:0; padding:0; }

/* 連続する段落だけ余白（読みやすさ） */
.article p + p{ margin-top:1em; }

section{
  clear:both;
  overflow:auto;
}

/* 納品時非表示の、pdfダウンロード・コラム用 */
.is-hidden{
  display:none;
}
/* ============================
  Headings
============================ */
h2{
  margin:0.5em 0;
  font-size:2em;
  font-weight:bold;
  text-align:center;
  line-height: 1.2;
}

h3{
  margin:0.5em 0;
  padding:0.3em 0em;
  font-size:1.6em;
  line-height: 1.3;

  font-weight:bold;
}

h4{
  font-size:1.4em;
  font-weight:bold;
  color:#297a89;
}

h5{
  margin:0.5em 0;
  padding:0.1em;
  font-size:1.2em;
  font-weight:bold;
  border-bottom:1px dotted #ccc;
}

/* ============================
  Layout
============================ */
.main{ background-color:#ebf8fb; }

.article{
  background-color:#fff;
  font-size:20px;   /* シニア向け */
  line-height:1.9;  /* シニア向け */
}

.top_image_in,
.section_inr{
  width:950px;
  margin:0 auto;
}

.top_image_in{
  width:1500px;
  max-width:100%;
  margin:0 auto;
}

.section_inr{
  width:950px;
  max-width:100%;
  margin:0 auto;
}


/* ============================
  Header
============================ */
.header{
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 5000;
  background-color: rgba(235,248,251,0.8); /* ← 透過 */
  backdrop-filter: blur(6px);              /* ← うっすらぼかし（対応ブラウザのみ） */
  -webkit-backdrop-filter: blur(6px);
  overflow: auto;
}


.header_inr{
  max-width:1500px;
  margin:0 auto;
  padding:1em 0;
  overflow:hidden;
}

.header_logo{ width:40%; float:left; margin:0; }
.header_mail{ width:25%; float:right; margin:0 0.5em 0; }
.header_tel { width:25%; float:right; margin:0.2em 0 0; }

.header_logo img,
.header_mail img,
.header_tel img{ width:100%; }

/* ============================
  First View
============================ */
.top_image{
  background-image:url("../../images/tokuhan_sozoku/top_image_back.jpg");
  background-repeat:no-repeat;
  background-position:top center;
  height:auto;
}

.top_image_in img{ width:100%; }

/* ============================
  CTA
============================ */
.area_cta{
  background-image:url("../../images/tokuhan_sozoku/cta_bg_pc.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  height:auto;
  display:flex;
  align-items:center;
  padding:2em;
}

.area_cta_inr{
  padding:.5em 2em;
  overflow:auto;
}

.area_cta_inr_left{ float:left; width:48%; }
.area_cta_inr_right{ float:right; width:48%; }

.area_cta_inr_left img,
.area_cta_inr_right img{
  width:100%;
  display:block;
}

.cta_text{
  color:#fff;
  text-align:center;
  font-weight:bold;
  font-size:2em;
}

.bg-white .btn_pdf{
  display: block;
  text-align: center;
}

.bg-white .btn_pdf img{
  margin: 0 auto;
  width: 70%;
  display: inline-block;
}

.btn_pdf{
  display: inline-block;
  animation: floatBtn 3s ease-in-out infinite;
}

@keyframes floatBtn {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

.area_cta .bg-white{
  text-align: center;
}
.cta_tag{
  position: relative;
  display: inline-block;
  margin: 0 auto;
  padding: 8px 18px;
  border-radius: 999px;
  background: #fee577;
  font-weight: 700;
  text-align: center;
}

/* 下の三角 */
.cta_tag::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;              /* 三角の高さ分 */
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fee577;
}

.pdf_text{
  text-align:center;
  font-weight:bold;
  font-size:2em;
  line-height: 0.3;
  margin-bottom: 1em;
}
/* ============================
  Common Sections
============================ */
.section_gray{
  background:#f6f9f8;
  padding:1.5em 3em;
}

.section_white{
  background:#fff;
  padding:1.5em 3em;
}
.section_yellow{
  background:#FFF9E6;
  padding:1.5em 3em;

}
.section_inr.section_white{
  border-radius: 64px;
  margin: 1em auto;
}
.section_keisen{
  padding:1.5em 3em;
  background-color:#fff;
  background-image:
    linear-gradient(#eeeeee 1px, transparent 1px),
    linear-gradient(90deg, #eee 1px, transparent 1px);
  background-size: 12px 12px; /* マスの大きさ */
}
.section_green{
  position:relative;
  background-color:#ebf8fb;
  padding:1.5em 3em;
  overflow:visible;
}


/* ============================
  Trouble（悩み）
  ※ .row はこのセクションの左右並びで使用
============================ */
.row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:2em;
}

.row.reverse{ flex-direction:row-reverse; }

.trouble-left{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}

.trouble-right{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.trouble-right img{
  max-width:500px;
  width:100%;
  height:auto;
}

/* カード（縦積み） */
.trouble-card{
  background:#fff;
  border-radius:24px 0 24px 0;
  box-shadow:0 6px 20px rgba(0,0,0,0.08);
  padding:26px 22px;
  position:relative;
  line-height:1.8;
  text-align:center;
  margin-bottom:1em;
  max-width:400px;
  width:100%;
}

/* “ マーク */
.trouble-quote{
  position:absolute;
  top:-35px;
  left:50px;
  font-size:64px;
  font-weight:700;
  color:#297a89;
}

/* 点線アンダーライン */
.trouble-text{
  font-weight:bold;
  padding:8px 0;
  text-align:center;
  text-decoration-line:underline;
  text-decoration-style:dotted;
  text-decoration-thickness:1px;
  text-underline-offset:6px;
}

/* ============================
  Inheritance（相続の対象者）
============================ */
/* 吹き出し本体（中央） */
.fukidashi-center{
  position: relative;
  width: fit-content;
  margin: 0 auto 1em;     
  padding: 0em 1.4em;
  color: #297a89;
  font-weight: 700;
  text-align: center;
  border-bottom: 2px solid #297a89; 
}

/* ▼ ひし形（先端） */
.fukidashi-center::before{
  content:"";
  position:absolute;
  bottom:-7px;
  left:50%;
  width:12px;
  height:12px;
  background:#fff;
  border-bottom:2px solid #297a89;
  border-right:2px solid #297a89;
  transform:translateX(-50%) rotate(45deg);
  box-sizing:border-box;
}
/* アニメ */
.fuwa{
  opacity: 0;
  transform: translateY(12px);
}

.fuwa.is-show{
  animation: floatIn 0.8s ease-out forwards;
}

@keyframes floatIn{
  0%{ opacity:0; transform: translateY(12px); }
  100%{ opacity:1; transform: translateY(0); }
}



.left, .right{ flex:1; }

.right{ text-align:right; }
.right img{ width:100%; height:auto; }

.round img{ border-radius:32px; }

.yaji{ margin-top:2em; display:flex; justify-content:center; }
.yaji img{ display:block; margin:0 auto; }


/* ============================
  Calculator / Step（計算）
============================ */
.bg-white{
  background:#fff;
  border-radius:16px;
  padding:1em 2em 2em;
  margin:1em auto 2em;
  box-shadow:0 6px 20px rgba(0,0,0,0.08);
}

.step-row{
  display:flex;
  align-items:center;
  gap:12px;
}

.step-left{
  background:#297a89;
  color:#fff;
  font-weight:bold;
  padding:0.6em 1.2em;
  border-radius:50px;
  white-space:nowrap;
}

.step-right{ flex:1; }

.step-note-row{
  display:flex;
  align-items:center;
  gap:32px;
  margin-top: 1em;
  
}

.step-note-row.reverse{ flex-direction:row-reverse; }

.step-note-img,
.step-note-text{ flex:1; }

.step-note-img img{ width:100%; height:auto; }

/* 表ボタン */
.table-area{ 
  text-align:center; 
  margin:1em 0 0; 
}

.table-btn{
  background:#fff;
  color:#297a89;
  border:solid 2px #297a89;
  padding:0.8em 2.5em;
  font-size:1.1em;
  font-weight:bold;
  border-radius:50px;
  cursor:pointer;
}

.table-btn:hover{ opacity:0.85; }

.table-caption{
  margin-top:0.8em;
  font-size:0.9em;
  color:#555;
}

/* モーダル */
.modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
}

.modal.is-open{
  display:flex;
  align-items:center;
  justify-content:center;
}

.modal-bg{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.6);
}

.modal-content{
  position:relative;
  background:#fff;
  width:90%;
  max-width:900px;
  max-height:90%;
  padding:1em;
  border-radius:12px;
  overflow:auto;
  z-index:1;
}

.modal-close{
  position:absolute;
  top:8px;
  right:10px;
  font-size:24px;
  background:none;
  border:none;
  cursor:pointer;
}

.modal-title{
  text-align:center;
  font-weight:bold;
  margin-bottom:0.5em;
}

.modal-content img{ width:100%; height:auto; }

.modal-caption{
  text-align:center;
  font-size:0.8em;
  margin-top:0.5em;
}

/* ============================
  Speech（吹き出し）
============================ */
.speech-row{
  display:flex;
  align-items:center;
  gap:32px;
  margin-top:2em;
}

.speech{
  position:relative;
  background:#fff;
  border-radius:16px;
  padding:1.5em 2em;
  box-shadow:0 6px 20px rgba(0,0,0,0.08);
  flex:1;
}

.speech::after{
  content:"";
  position:absolute;
  right:-20px;
  top:50%;
  transform:translateY(-50%);
  border-width:10px;
  border-style:solid;
  border-color:transparent transparent transparent #fff;
}

.speech-img{
  flex:0 0 auto;
  text-align:center;
}

.speech-img img{
  width:100%;
  height:auto;
}

/* ============================
  Reason（試算が変わる理由）
  ※ .row を使わない前提（衝突回避）
============================ */
.balloon{
  display:inline-block;
  margin:0 auto 1em;
  padding:0.4em 1.2em;
  font-weight:bold;
  border-bottom:2px dotted #297a89;
  color:#297a89;
}

.green-linebox{
  border:2px solid #297a89;
  background:#fff;
  padding:1em 2em;
  margin:1.5em auto;
  border-radius:16px;
}

.row-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  margin-top:1em;
}

.row-inner.reverse{ flex-direction:row-reverse; }

/* ============================
  Strength（沢田工務店の強み）
============================ */
.section_green .tsuyomi_arrow{
  position:absolute;
  left:50%;
  top:-50px;
  transform:translateX(-50%);
  z-index:50;
}

.section_green .tsuyomi_arrow img{
  display:block;
  width:60px;
  opacity:1;
}

.intro{
  color:#297a89;
  border:#297a89 solid 2px;
  padding:0.8em 2.5em;
  margin:2em auto;
  font-size:1.1em;
  font-weight:bold;
  border-radius:50px;
  text-align:center;
}

/* プロフィールカード */
.profile-wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  
}



.profile-card{
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: .5em 1em;

}

.profile-card h5{
  text-align: center;
}

.profile-photo{
  margin: 0 0 12px;
  text-align: center; 
}

.profile-text {
  font-size: 0.8em;
}
.history-toggle,.readmore-toggle{
  display: block;
  margin: 4px auto 10px;
  padding: .2em 2em;
  color: #FFF;
  font-size: large;
  font-weight: bold;
  background-color: #297a89;
  border: none;
  border-radius: 24px;
}

/* ===== wrapper ===== */
.voice-slider-wrap{
  position:relative;
}

/* ===== slider ===== */
.voice-slider{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  gap:16px;
  padding:8px 48px 16px; /* ボタン分の余白 */
  scroll-behavior:smooth;
}

.voice-slider::-webkit-scrollbar{ height:8px; }
.voice-slider::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.2); border-radius:99px; }

.voice-slider .profile-card{
  flex:0 0 100%;
  max-width:100%;
  scroll-snap-align:start;
  border:none;
  border-radius:12px;
  padding:1em 2em 2em;
  background:#ebf8fb;
}

.voice-slider .profile-photo img{ width:30%; }

.voice-slider .profile-card p{ font-size:1em; }

.voice-no{
  display:inline-block;
  margin:4px auto 10px;
  padding:.2em 2em;
  color:#fff;
  font-weight:bold;
  text-align:center;
  background:#309CA5;
  border-radius:24px;
}

.voice-slider{ cursor:grab; }
.voice-slider.is-dragging{ cursor:grabbing; user-select:none; }

.voice-slider.is-dragging{
  scroll-snap-type:none;
  scroll-behavior:auto;
}

/* ✅ ドラッグ中は誤クリック防止。ただしボタン/リンクは押せる */
.voice-slider.is-dragging *{ pointer-events:none; }
.voice-slider.is-dragging button,
.voice-slider.is-dragging a{
  pointer-events:auto;
}

.voice-slider{
  scroll-snap-type: x proximity; /* mandatory → proximity */
  scroll-behavior: auto;         /* smooth → auto */
  touch-action: pan-y;           /* これは維持 */
}

/*--------------------------------------------------
選ばれる理由 設定
-----------------------------------------------------*/


/*--------------------------------------------------
よくある質問 設定
-----------------------------------------------------*/


/*--------------------------------------------------
会社情報 設定
-----------------------------------------------------*/

.message-area{
  position: relative;
  padding: 5em 1em;
  text-align: center;
  background: url("../../images/tokuhan_sozoku/bg_company.jpg") center / cover no-repeat;
  color: #fff;
}

/* 文字を読みやすくする薄い黒ベール */
.message-area::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
}

.message-area > *{
  position: relative;
  z-index: 1;
}


.company-section{
  padding: 1em 1em;
}
#company-section{
  scroll-margin-top: 350px; /* ヘッダーの高さ分。必要に応じて調整 */
}

.company-section h3{
  border-bottom: 2px solid #297a89;
  border-top: 2px solid #297a89;
  padding: .3em 0;
  margin: 1em auto;
  color:#297a89;
  text-align: center;
}

.company-profile{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px 24px;
}

.company-profile dt{
  font-weight: bold;
  color: #297a89;
}

.company-profile dd{
  margin: 0;
}

@media (max-width: 768px){
  .company-profile{
    grid-template-columns: 1fr;
  }

  .company-profile dt{
    margin-top: 1em;
  }
}



/*--------------------------------------------------
コラム 設定
-----------------------------------------------------*/
.section_column{
  padding: 1.5em 3em;
  background-color: #fff6d8;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.25),
    rgba(255,255,255,0.25) 8px,
    rgba(255,255,255,0) 8px,
    rgba(255,255,255,0) 16px
  );
}


/* 2カラム */
.column_list{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:24px;
  margin-top:1em;
}


/* カード */
.column_item{
  background: #fff;
  border-radius: 16px;
  box-shadow:0 6px 20px rgba(0,0,0,0.08);
}

/* サムネ：参考サイト寄せ（横長） */
.column_thumb{
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.column_thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 見出し */
.column_ttl{
  font-size: 1em;
  padding: 1em;
  margin: .5em auto;

}

.column_item:hover{
  opacity: 0.9;
}
.column_list a{
  color: inherit;
  text-decoration: none;
}

/* ============================
  Checklist
============================ */
ul.checklist{
  border:1px solid #ccc;
  list-style:none;
  padding:1em .5em;

}

ul.checklist li{ 
  margin-bottom:0.5em; 
  font-weight: bold;
}

ul.checklist li:last-child{ margin-bottom:0; }


ul.checklist li{
  display: flex;
  align-items: flex-start;   /* ← 1行目の先頭に揃える */
  gap: 0.4em;
}

ul.checklist li i{
  margin-top: 0.4em;         /* ← 文字との微調整 */
  flex-shrink: 0;            /* ← 改行しても幅を取られない */
  color: #E50012;
}

ul.checklist li span{
  display: block;
}
/* ============================
  Table
============================ */
table{
  width:100%;
  border-top:1px solid #ccc;
  border-left:1px solid #ccc;
  margin:1em 0;
}

th, td{
  padding:0.5em;
  border-right:1px solid #ccc;
  border-bottom:1px solid #ccc;
}

th{
  background-color:#f0f0f0;
  font-weight:bold;
  text-align:center;
}

td{
  background-color:#fff;
  text-align:left;
}

.table_style_01{
  text-align:left;
  vertical-align:middle;
}



/* ============================
  QA
============================ */
.box_qa{
  background-color:#efefef;
  padding:1em;
  border-radius: 16px;
}

.box_qa_q{
  background-color:#fff;
  padding:1em 2em 1em 3em;
  border-bottom:1px solid #ccc;
  font-size:1.2em;
  font-weight:bold;
  color:#297a89;
  border-radius: 16px 16px 0 0;
}

.box_qa_a{
  background-color:#fff;
  padding:1em 2em 1em 3em;
  border-radius: 0 0 16px 16px ;
}

.box_qa_q p,
.box_qa_a p{ text-indent:-2em; }

/* ============================
  Footer
============================ */
.footer{
  background-color:#3D3C3C;
  padding:2em 0;
  text-align:center;
  font-size:1.4em;
  color:#fff;
}

.footer a{ color:#fff; }

/* ============================
  Responsive (<=768px)
============================ */
@media (max-width:768px){

 

  /* Modal */
  .modal-content{ padding:0.8em; }
  .table-btn{ width:100%; max-width:280px; }

  /* Speech */
  .speech-row{ flex-direction:column; }
  .speech{ order:1; }
  .speech-img{ order:2; }
  .speech::after{
    right:auto;
    left:50%;
    top:auto;
    bottom:-20px;
    transform:translateX(-50%);
    border-color:#fff transparent transparent transparent;
  }

  /* Reason：SPは画像上 */
  .row-inner,
  .row-inner.reverse{
    flex-direction:column-reverse;
  }
  .right{ text-align:center; }


}



/* ===== 相続LP フォーム専用 ===== */
.tokuhan-sozoku-wrap {
  font-size: 1rem;
  padding: 32px 24px; 
}
.tokuhan-sozoku-title {
  max-width: 720px;
  margin: 0 auto 24px;
  font-size: 2em;
  font-weight: 700;
  text-align: center;
  color: #333;
  line-height: 1.4;
}
.tokuhan-sozoku-form {
  max-width: 720px;
  margin: 0 auto;
}

.tokuhan-sozoku-field {
  margin-bottom: 20px;
}

.tokuhan-sozoku-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.tokuhan-sozoku-required {
  color: #c40000;
  font-size: 0.75em;
  margin-left: 6px;
}

.tokuhan-sozoku-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  border-radius: 6px; 
}


/* MW WP Form：フォーム内の入力欄を確実に指定 */
.tokuhan-sozoku-form input[type="text"],
.tokuhan-sozoku-form input[type="email"],
.tokuhan-sozoku-form input[type="tel"],
.tokuhan-sozoku-form input[type="number"],
.tokuhan-sozoku-form input[type="date"],
.tokuhan-sozoku-form input[type="password"],
.tokuhan-sozoku-form textarea,
.tokuhan-sozoku-form select{
  border: 1px solid #666 !important;
  background: #fff !important;
  border-radius: 6px;
  box-shadow: none !important;
}

/* フォーカス時 */
.tokuhan-sozoku-form input[type="text"]:focus,
.tokuhan-sozoku-form input[type="email"]:focus,
.tokuhan-sozoku-form input[type="tel"]:focus,
.tokuhan-sozoku-form textarea:focus,
.tokuhan-sozoku-form select:focus{
  outline: none !important;
  border-color: #E50012 !important;
  box-shadow: 0 0 0 3px rgba(229, 0, 18, 0.12) !important;
}

/* ===== 相続LP フォーム ボタン ===== */
.tokuhan-sozoku-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

/* ホバー */
.tokuhan-sozoku-btn-submit:hover {
  opacity: 0.9;
}

.tokuhan-sozoku-btn-back:hover {
  background: #E50012;
  color: #fff;
}

/* 送信ボタン（confirm/submit 両方） */
.tokuhan-sozoku-buttons .tokuhan-sozoku-btn-submit,
.tokuhan-sozoku-buttons input.tokuhan-sozoku-btn-submit,
.tokuhan-sozoku-buttons button.tokuhan-sozoku-btn-submit,
.tokuhan-sozoku-buttons .tokuhan-sozoku-btn-submit input,
.tokuhan-sozoku-buttons .tokuhan-sozoku-btn-submit button {
  background: #E50012 !important;
  color: #fff !important;
  border: 2px solid #E50012 !important;
  padding: 14px 28px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* 戻るボタン */
.tokuhan-sozoku-buttons .tokuhan-sozoku-btn-back,
.tokuhan-sozoku-buttons input.tokuhan-sozoku-btn-back,
.tokuhan-sozoku-buttons button.tokuhan-sozoku-btn-back,
.tokuhan-sozoku-buttons .tokuhan-sozoku-btn-back input,
.tokuhan-sozoku-buttons .tokuhan-sozoku-btn-back button {
  background: #fff !important;
  color: #E50012 !important;
  border: 2px solid #E50012 !important;
  padding: 14px 24px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* フォーム共用：完了画面の文章調整 */
.tokuhan-sozoku-form p {
  line-height: 1.9;
  margin: 0 0 14px;
  color: #333;
}

.tokuhan-sozoku-form input,
.tokuhan-sozoku-form textarea,
.tokuhan-sozoku-form select{
  box-sizing: border-box;
}