@charset "utf-8";
/*------------------------------------------------------------
	先進的窓リノベ2026
------------------------------------------------------------*/
@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600;700;900&display=swap');


:root{
  --font-base: "Noto Sans JP", system-ui, -apple-system, "Segoe UI",
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
}
.mado, .mado *{
  box-sizing: border-box;
}


#pagePath {
    max-width: 1140px;
    margin: 0!important;
    padding: 0!important;
}

/* ===== Page base ===== */
.mado{
  width: 100%;
}
/* ===== 共通 inner ===== */
.mado-inner{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding-left:24px;
  padding-right:24px;
  box-sizing:border-box;
}

@media (min-width:900px){
  .mado-inner{
    padding-left:24px;
    padding-right:24px;
  }
}

/*------------------
	トップイメージ
-------------------*/
.mado-fv{
  width: 100%;
}

/* 中央寄せ：必要なら max 幅を変えられる */
.mado-fv__inner{
  width: 100%;
  margin: 0 auto;
}

/* 画像を “余白なし・比率維持” で表示 */
.mado-fv__picture{
  display: block;
  width: 100%;
}

.mado-fv__img{
  display: block;
  width: 100%;
  height: auto;
}

/*------------------
  お困りごとはありませんか？
-------------------*/

.mado-trouble{
  background:#cfe6ff;
  padding:34px 0 42px;
  overflow:hidden;

  /* 右固定タブ避け */
  padding-right:max(24px, env(safe-area-inset-right));
}
@media (min-width: 900px){
  .mado-trouble{
    padding-right:calc(90px + max(24px, env(safe-area-inset-right)));
  }
}

.mado-trouble__inner{
  position:relative;
}

/* ===== 見出し ===== */
.mado-trouble__head{
  text-align:center;
  margin:0 0 22px;
}

/* “文字＋イラスト” */
.mado-trouble__headIn{
  display:inline-flex;
  align-items:flex-start;
  justify-content:center;
  gap:14px;
}

/* h2 */
.mado-trouble__title{
  margin:0;
  text-align:center;
  font-family: var(--font-base);
  font-weight:600;
  font-size: clamp(32px, 3.2vw, 52px);
  letter-spacing:.06em;
  line-height:1.7;
}

/* 「お困りごと」だけ大きく */
.mado-trouble__accent{
  color:#2aa6d8;
  font-weight:700;
  font-size:1.25em;
}

/* イラスト */
.mado-trouble__illust{
  flex:0 0 auto;
  width:clamp(72px, 8vw, 110px);
  margin-top:2px;
}
.mado-trouble__illust img{
  display:block;
  width:100%;
  height:auto;
}

/* ===== 丸 ===== */
.mado-trouble__list{
  width:min(1100px, 100%);
  margin:0 auto;
  padding:0 24px;
  box-sizing:border-box;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:34px;
  justify-items:center;
}

.mado-trouble__item{
  width:100%;
  max-width:220px;
  aspect-ratio:1 / 1; 
  background:#fff;
  border-radius:50%;
  display:grid;
  place-items:center;
  text-align:center;
  padding:16px;
  box-sizing:border-box;
}

/* 丸内テキスト */
.mado-trouble__txt{
  margin:0;
  font-family: var(--font-base);
  font-weight:700;
  line-height:1.15;
  letter-spacing:.02em;
  font-size:clamp(17px, 1.5vw, 20px);
}

/* 色 */
.mado-trouble .mado-trouble__red{ color:#e24a3b !important; }
.mado-trouble .mado-trouble__blue{ color:#2aa6d8 !important; }
.mado-trouble .mado-trouble__green{ color:#2db36a !important; }
.mado-trouble .mado-trouble__navy{ color:#1f4aa8 !important; }
.mado-trouble .mado-trouble__orange{ color:#f08a2a !important; }

.mado-trouble__blue,
.mado-trouble__green,
.mado-trouble__navy,
.mado-trouble__orange,
.mado-trouble__red{
  font-weight:900;
}

/* 強調サイズ差*/
.mado-trouble__item--warm .mado-trouble__red{ font-size:1.50em; line-height:1.05; }
.mado-trouble__item--mold .mado-trouble__blue,
.mado-trouble__item--mold .mado-trouble__green{ font-size:1.28em; line-height:1.05; }
.mado-trouble__item--cost .mado-trouble__navy{ font-size:1.52em; line-height:1.05; }
.mado-trouble__item--shock .mado-trouble__orange{ font-size:1.2em; line-height:1.05; }
.mado-trouble__item--shock .mado-trouble__txt{ line-height:1.12; }

/* ===== レスポンシブ：SPでも2列 ===== */
@media (max-width: 980px){
  .mado-trouble__list{
    grid-template-columns:repeat(2, minmax(0, 1fr)); /* ★minmax入れる */
    gap:22px;
  }
  .mado-trouble__item{
    max-width:240px;
  }
}

@media (max-width: 520px){
  /* 見出し*/
  .mado-trouble__head{
    text-align:left;
    padding:0 16px;
  }
  .mado-trouble__headIn{
    justify-content:flex-start;
  }
  .mado-trouble__title{
    font-size:clamp(18px, 4.2vw, 22px);
    text-align:left;
  }

  .mado-trouble__list{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
    padding:0 16px;
  }

  /* ★修正 */
  .mado-trouble__item{
    max-width:none;
    padding:12px;
  }

  .mado-trouble__txt{
    font-size:clamp(13px, 3.3vw, 16px);
  }
}

/*------------------
  原因は“窓”かもしれません / メリット
-------------------*/
.mado-cause{
  background:#fff;
  padding: 44px 0 54px;
}

.mado-cause__title{
  margin: 0 0 32px;
  text-align:center;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 52px);
  line-height: 1.45;
  letter-spacing: .04em;
  color:#111;
}

.mado-cause__win{
  color:#2aa6d8;
  font-weight: 900;
  font-size: 1.35em;
}

.mado-cause__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  align-items: center;
}

.mado-cause__sub{
  margin: 0 0 18px;
  font-family: var(--font-base);
  font-weight: 900;
  font-size: clamp(20px, 2vw, 34px);
  color:#1aa3d6;
  letter-spacing: .04em;
}

.mado-cause__list{
  margin: 0;
  padding: 0;
  list-style: none;
  display:grid;
  gap: 12px;
}

.mado-cause__item{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.45;
  color:#111;
}

.mado-cause__check{
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin-top: 1px;
}

.mado-cause__left{
  position: relative;
}

/* ★女性イラストを右横に配置 */
.mado-cause__woman{
  position: absolute;
  right: 0;
  bottom: 0px;
  width: clamp(100px, 12vw, 150px);
}

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

.mado-cause__window img{
  display:block;
  width:100%;
  height:auto;
  max-width: 520px;
  margin-left:auto;
}


/* ===== responsive ===== */
@media (max-width: 980px){
  .mado-cause{
    padding: 36px 0 44px;
  }
  .mado-cause__grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .mado-cause__title{
    text-align:left;
  }
  .mado-cause__window img{
    max-width: 520px;
    margin: 0 auto;
  }
  .mado-cause__woman{
    width: clamp(80px, 26vw, 160px);
	position: absolute;
	right: auto;	
	left:300px;
  }
}

@media (max-width: 520px){
  .mado-cause__woman{
    width: clamp(60px, 18vw, 90px);
	position: absolute;
	left: auto;	
	right:0;
  }
}

/*------------------
  暑さ7割・寒さ6割（テキスト帯）
-------------------*/
.mado-rate{
  background:#f7efe4; /* うすいベージュ */
  padding: 56px 0 60px;
}

.mado-rate__title{
  margin: 0 0 24px;
  text-align:center;
  font-family: var(--font-base);
  font-weight: 900;
  font-size: clamp(26px, 2.6vw, 44px);
  letter-spacing: .06em;
  line-height: 1.4;
  color:#111;
}

.mado-rate__lead{
  margin: 0 0 26px;
  text-align:center;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 2.0;
  color:#222;
}

.mado-rate__mid{
  margin: 0 0 18px;
  text-align:center;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 2.0;
  color:#222;
}

.mado-rate__accent{
  position: relative;
  color:#f08a2a;
  font-weight: 900;
  font-size: 2.0em;
  letter-spacing: .02em;
  display:inline-block;
  padding: 0 8px;
  z-index: 1;
}

.mado-rate__accent::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:6px;
  height:0.6em;
  background:#fff1a8;
  z-index:-1;
}

.mado-rate__desc{
  margin: 0 0 26px;
  text-align:center;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 2.0;
  color:#222;
}

.mado-rate__close{
  margin: 0;
  text-align:center;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: clamp(15px, 1.3vw, 18px);
  letter-spacing: .05em;
  line-height: 2.0;
  color:#222;
}

@media (max-width: 520px){
  /* タイトル少し軽く */
  .mado-rate__title{
    font-weight:700;
    line-height:1.35;
	text-align: left;
  }

  /* 説明文を読みやすく */
  .mado-rate__lead,
  .mado-rate__mid,
  .mado-rate__desc,
  .mado-rate__close{
    font-weight:500;
    line-height:1.75;
	text-align: left;
  }

  /* 強調テキスト少しだけ控えめ */
  .mado-rate__accent{
    font-size:1.7em; 
  }
.mado-rate__lead {
    margin: 0 0 10px;
}

}


/*------------------
  窓リフォームって？
-------------------*/
.mado-about{
  background:#fff;
  padding: 56px 0 64px;
}

.mado-about__head{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 28px;
  row-gap: 14px;
  align-items: center;
  justify-items: center;
  text-align: center;
  margin: 0 0 22px;
}

/* タイトル */
.mado-about__title{
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-family: var(--font-base);
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1.15;
  font-size: clamp(34px, 3.8vw, 56px);
  color: #2aa6d8;
}

/* サブ */
.mado-about__lead{
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-family: var(--font-base);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.35;
  font-size: clamp(20px, 2.3vw, 34px);
  color: #111;
}

/* ================================
   最短1日バッジ（1を主役に）
================================ */
.mado-badge{
  grid-column: 3;
  grid-row: 1 / 3;
  justify-self: end;
  align-self: center;
  width: 96px;
  height: 96px;
  border-radius: 12px;
  background:#ff6a00;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-family: var(--font-base);
  font-weight:900;
  text-align:center;
  line-height:1;
}

/* 「最短」 */
.badge-top{
  font-size:20px;
  letter-spacing:.05em;
  margin-bottom:6px;
}

/* 下段（1 + 日!） */
.badge-main{
  display:flex;
  align-items:flex-end;
  gap:2px;
}

/* 1 */
.badge-num{
  font-size:56px;
  line-height:0.9;
}

/* 日! */
.badge-day{
  font-size:18px;
  padding-bottom:6px;
  line-height:1;
}

@media (max-width:520px){
  .mado-about__head{
    grid-template-columns: 1fr auto auto;
    column-gap: 14px;
    row-gap: 10px;
    padding: 0 0;
    text-align:left;
    justify-items:start;
  }

  .mado-about__title{
    grid-column: 2;
    text-align:left;
    font-size: clamp(22px, 5.2vw, 34px);
    line-height:1.12;
  }

  .mado-about__lead{
    grid-column: 2;
    text-align:left;
    font-size: clamp(16px, 4.4vw, 22px);
  }

  .mado-badge{
    grid-column: 3;
    width:74px;
    height:74px;
  }

  .badge-top{ font-size:13px; }
  .badge-num{ font-size:40px; }
  .badge-day{ font-size:16px; padding-bottom:5px; }
}

/* 2カード */
.mado-about__cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 26px;
  align-items: stretch;
}

/* カード共通青枠 */
.mado-about__card{
  border: 2px solid #1aa3d6;
  border-radius: 10px;
  padding: 22px 22px 18px;
  background:#fff;
  min-height: 290px; /* 2枚目の“高さが揃う”感じ */
}

/* 見出し */
.mado-about__cardTitle{
  margin:0 0 12px;
  font-family: var(--font-base);
  font-weight: 900;
  font-size: clamp(22px, 2.0vw, 32px);
  letter-spacing:.04em;
}
.mado-about__cardTitle--blue{ color:#1aa3d6; }
.mado-about__cardTitle--green{ color:#33bba9; }

/* カード内レイアウト */
.mado-about__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

/* 右カード */
.mado-about__grid--right{
  grid-template-columns: 1.15fr .85fr;
}

/* 左列 */
.mado-about__left{
  display:flex;
  flex-direction:column;
  min-height: 210px;
}

.mado-about__txtSmall{
  margin: 6px 0 14px;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.9;
  color:#111;
}

.mado-about__txt{
  margin: 6px 0 0;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 2.0;
  color:#111;
}

/* 人物 */
.mado-about__workers{
  margin-top:auto; 
  width: min(220px, 100%);
}
.mado-about__workers img{
  width:100%;
  height:auto;
  display:block;
}

/* 右列 */
.mado-about__right{
  display:flex;
  justify-content:flex-end;
}

/* 窓 */
.mado-about__window{
  width: min(240px, 100%);
}
.mado-about__window img{
  width:100%;
  height:auto;
  display:block;
}

/* 夫婦 */
.mado-about__couple{
  width: min(250px, 100%);
}
.mado-about__couple img{
  width:100%;
  height:auto;
  display:block;
}

/* ===== responsive ===== */
@media (max-width: 980px){
  .mado-about{
    padding: 46px 0 52px;
  }
  .mado-about__badge{
    right: 0;
    top: -10px;
    width: 72px;
    height: 72px;
  }
  .mado-about__badgeNum{ font-size: 34px; }
  .mado-about__badgeTop{ font-size: 14px; }
  .mado-about__badgeBottom{ font-size: 16px; }

  .mado-about__cards{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .mado-about__card{
    min-height: unset;
  }
}

@media (max-width: 520px){
  .mado-about__card{
    padding: 18px 16px 14px;
  }
  .mado-about__grid,
  .mado-about__grid--right{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .mado-about__right{
    justify-content:flex-start;
  }

  .mado-about__workers{
    width: min(200px, 100%);
  }
  .mado-about__window,
  .mado-about__couple{
    width: min(200px, 100%);
  }
}

/* =========================
   カード：横だけ少しはみ出す（下ははみ出さない）
========================= */
.mado-about__card{
  position: relative;
  overflow: hidden;
}

.mado-about__illustBottom{
  position: absolute;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
}

/* 左カード */
.mado-about__card--left .mado-about__workers.mado-about__illustBottom{
  left: -12px;        /* ←横だけはみ出し */
  width: min(260px, 48%);
  max-width: 260px;
}

/* 右カード */
.mado-about__card--right .mado-about__couple.mado-about__illustBottom{
  right: -14px;       /* ←横だけはみ出し */
  width: min(300px, 56%);
  max-width: 300px;
}

/* 画像は下ピタ */
.mado-about__workers img,
.mado-about__couple img{
  display:block;
  width:100%;
  height:auto;
}

.mado-about__card--left{
  padding-bottom: 18px;
}
.mado-about__card--right{
  padding-bottom: 18px;
}

.mado-about__cardTitle{
  font-size: clamp(26px, 2.2vw, 36px); 
  line-height: 1.25;
  margin-bottom: 14px;
}

.mado-about__txtSmall{
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.9;
  font-weight: 600;
  margin-top: 10px;
}

.mado-about__txt{
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 2.0;
  font-weight: 600;
}

.mado-about__window{
  width: min(260px, 100%);
  margin-top: 6px;
}

.mado-about__card--left .mado-about__grid{
  grid-template-columns: 0.95fr 1.05fr;
  align-items: start;
}

.mado-about__card--right .mado-about__right{
  align-items: flex-end;
}

@media (max-width: 520px){
  .mado-about__grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .mado-about__card{
    padding: 18px 16px 16px !important;
    border-radius: 10px;
    overflow: hidden;
  }

  .mado-about__cardTitle{
    font-size: 24px !important;
    line-height: 1.25 !important;
    margin: 0 0 10px !important;
  }
  .mado-about__txt,
  .mado-about__txtSmall{
    font-size: 15px !important;
    line-height: 1.85 !important;
  }

  .mado-about__illustBottom{
    position: absolute !important;
    bottom: 0 !important;
    z-index: 2 !important;
    pointer-events: none;
  }

  .mado-about__card--left .mado-about__left{
    padding-bottom: 0px !important;
	min-height: 0px;
  }
  .mado-about__card--right .mado-about__left{
    padding-bottom: 140px !important;
	min-height: 140px;
  }

  /* 左カード：職人（左下） */
  .mado-about__card--left .mado-about__workers.mado-about__illustBottom{
    left: -10px !important;
    width: min(220px, 58%) !important; 
    max-width: 220px !important;
  }

  /* 左カード：窓（右下・人物の後ろ） */
  .mado-about__card--left .mado-about__windowWrap{
    position: absolute !important;
    right: -12px !important;
    bottom: 0 !important;
    width: min(240px, 66%) !important;
    max-width: 240px !important;
    z-index: 1 !important;
    pointer-events: none;
  }
  .mado-about__card--left .mado-about__window{
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  /* 右カード：夫婦（右下） */
  .mado-about__card--right .mado-about__couple.mado-about__illustBottom{
    right: -50px !important;
    width: min(260px, 72%) !important;
    max-width: 260px !important;
  }

  /* 画像 */
  .mado-about__window img {
    width: 90%;
    height: auto;
    display: block;
	margin:0 0 0 auto;
}
  .mado-about__workers img{
    display:block !important;
    width:100% !important;
    height:auto !important;
  }
  .mado-about__couple img{
    display:block !important;
    width:80% !important;
    height:auto !important;
  }  
}


/*------------------
  内窓でここまで変わる
-------------------*/
.mado-thermoOne{
  background:#fbf7ee;
  padding: 56px 0 64px;
  padding-right:max(24px, env(safe-area-inset-right));
}
@media (min-width: 900px){
  .mado-thermoOne{
    padding-right:calc(90px + max(24px, env(safe-area-inset-right)));
  }
}

.mado-thermoOne__title{
  margin:0 0 10px;
  text-align:center;
  font-family: var(--font-base);
  font-weight: 900;
  font-size: clamp(28px, 2.8vw, 48px);
  letter-spacing:.06em;
  color:#1aa3d6;
}

.mado-thermoOne__lead{
  margin:0 0 22px;
  text-align:center;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 22px);
  letter-spacing:.04em;
  color:#111;
}

.mado-thermoOne__figure{
  margin:0;
  background:#fff;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

.mado-thermoOne__pic{
  display:block;
}

.mado-thermoOne__img{
  display:block;
  width:100%;
  height:auto;
  border-radius: 10px;
}

.mado-thermoOne__cap{
  margin: 10px 0 0;
  text-align:right;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 13px;
  color:#444;
}

@media (max-width: 520px){
  .mado-thermoOne__figure{
    padding: 14px;
    border-radius: 12px;
  }
  .mado-thermoOne__cap{
    text-align:left;
  }
}

/*------------------
  こんな場所におすすめ！
-------------------*/
.mado-place{
  background:#fff;
  padding: 56px 0 64px;

  /* 右固定タブ避け（LP共通） */
  padding-right:max(24px, env(safe-area-inset-right));
}
@media (min-width: 900px){
  .mado-place{
    padding-right:calc(90px + max(24px, env(safe-area-inset-right)));
  }
}

.mado-place__title{
  margin:0 0 22px;
  text-align:center;
  font-family: var(--font-base);
  font-weight: 900;
  font-size: clamp(26px, 2.5vw, 44px);
  letter-spacing:.06em;
  color:#111;
}

/* 4枚並び（完成デザインに合わせる） */
.mado-place__grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

/* 角丸カード */
.mado-place__card{ margin:0; }

.mado-place__photo{
  position:relative;
  border-radius: 16px;
  overflow:hidden;
}

/* 画像 */
.mado-place__photo img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ★シャドウ */
.mado-place__photo::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.38);
  z-index:1;
  pointer-events:none;
}

/* ラベル文字（画像上） */
.mado-place__label{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  z-index:2;
  margin:0;
  padding:0 12px;
  color:#fff;
  font-family: var(--font-base);
  font-weight:900;
  font-size: clamp(14px, 1.6vw, 20px);
  max-width: 90%;
  text-align:center;
  line-height:1.2;
  word-break: keep-all; 
}
/* 下の説明 */
.mado-place__desc{
  margin: 10px 0 0;
  text-align:center;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.7;
  color:#222;
}

/* メリットいっぱい */
.mado-place__sub{
  margin: 26px 0 14px;
  text-align:center;
  font-family: var(--font-base);
  font-weight: 900;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing:.04em;
  color:#111;
}

/* メリット帯（画像） */
.mado-place__meritImg{
  width:100%;
  max-width: 980px;
  margin: 0 auto;
}
.mado-place__meritImg img{
  display:block;
  width:100%;
  height:auto;
}

.mado-place__label{
  font-size: clamp(13px, 1.4vw, 20px);
}

/* ===== responsive ===== */
@media (max-width: 980px){
  .mado-place__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px){
  .mado-place__title{ text-align:left; }
  .mado-place__desc{ text-align:left; }
  .mado-place__label{
    font-size: 16px;
  }
}


/*------------------
  先進的窓リノベ2026（補助金）
-------------------*/
.mado-subsidy{
  background:#fbf7ee; 
  padding: 56px 0 64px;

  /* 右固定タブ避け */
  padding-right:max(24px, env(safe-area-inset-right));
}
@media (min-width: 900px){
  .mado-subsidy{
    padding-right:calc(90px + max(24px, env(safe-area-inset-right)));
  }
}

.mado-subsidy__kicker{
  margin:0 0 12px;
  text-align:center;
  font-family: var(--font-base);
  font-weight: 900;
  font-size: clamp(18px, 1.7vw, 21px);
  letter-spacing:.06em;
  color:#111;
}

.mado-subsidy__title{
  margin:0 0 26px;
  text-align:center;
  font-family: var(--font-base);
  font-weight: 900;
  font-size: clamp(26px, 2.6vw, 44px);
  letter-spacing:.06em;
  color:#1aa3d6;
  line-height: 1.25;
}

.mado-subsidy__titleBracket{
  color:#1aa3d6;
  font-weight: 900;
}

.mado-subsidy__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: center;
}

.mado-subsidy__pic{
  display:block;
}
.mado-subsidy__pic img{
  display:block;
  width:100%;
  height:auto;
}

.mado-subsidy__pic--family{
  max-width: 520px;
  margin: 0 auto;
}
.mado-subsidy__pic--badge{
  max-width: 560px;
  margin: 0 auto;
}

.mado-subsidy__bottom{
  margin: 22px 0 0;
  text-align:center;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: clamp(20px, 2.0vw, 28px);
  letter-spacing:.06em;
  color:#79bc28;
}

.mado-subsidy__next{
  margin: 10px 0 0;
  text-align:center;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 13px;
  color:#333;
  opacity:.9;
}

/* ===== responsive ===== */
@media (max-width: 980px){
  .mado-subsidy__grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .mado-subsidy__pic--badge{
    max-width: 520px;
  }
}


/* =========================================
   商品券セクション
========================================= */

.mado-ticket{
  background:#fbf7ee;
  padding: 24px 0 60px; /* 上の余白を詰める */
  padding-right:max(24px, env(safe-area-inset-right));
}

@media (min-width: 900px){
  .mado-ticket{
    padding-right:calc(90px + max(24px, env(safe-area-inset-right)));
  }
}

/* ===== 罫線 ===== */
.mado-ticket__line{
  width:100%;
  max-width:760px;      /* 長すぎるのを防ぐ */
  margin: 0 auto 30px;  /* 下の余白少なめ */
}
.mado-ticket__line img{
  display:block;
  width:100%;
  height:auto;
}

/* ===== ＼深見工務店で使える／ ===== */
.mado-ticket__kicker{
  margin:0 0 8px;
  text-align:center;
  font-family: var(--font-base);
  font-weight:700;
  font-size: clamp(18px, 1.7vw, 21px);
  letter-spacing:.05em;
  color:#111;
}

/* ===== タイトル ===== */
.mado-ticket__title{
  margin:0 0 10px;
  text-align:center;
  font-family: var(--font-base);
  font-weight:900;
  font-size:clamp(26px, 2.8vw, 40px);
  letter-spacing:.06em;
  line-height:1.2;
  color:#1aa3d6;
}

.mado-ticket__titleBracket{
  font-weight:900;
  color:#1aa3d6;
}

/* ===== 説明文 ===== */
.mado-ticket__desc{
  margin:0 0 18px;
  text-align:center;
  font-family: var(--font-base);
  font-weight:600;
  font-size:18px;
  line-height:1.9;
  color:#333;
}

/* ===== 商品券画像 ===== */
.mado-ticket__card{
  width:min(580px, 82%); /* 大きすぎないサイズ */
  margin:-80px auto 16px;
}
.mado-ticket__card img{
  display:block;
  width:100%;
  height:auto;
}

/* ===== 赤文字 ===== */
.mado-ticket__shop{
  margin:0 0 14px;
  text-align:center;
  font-family: var(--font-base);
  font-weight:900;
  font-size:20px;
  letter-spacing:.06em;
  color:#e24a3b;
}

/* ===== 最下部太文字 ===== */
.mado-ticket__bottom{
  margin:0;
  text-align:center;
  font-family: var(--font-base);
  font-weight:900;
  font-size:clamp(20px, 2vw, 28px);
  letter-spacing:.06em;
  color:#111;
}

/* ===== SP調整 ===== */
@media (max-width: 520px){
  .mado-ticket{
    padding:20px 0 48px;
  }

  .mado-ticket__line{
    max-width:520px;
  }

  .mado-ticket__card{
    width:94%;
	margin:-60px auto 16px;
  }

  .mado-ticket__kicker{
    font-size:18px;
  }

  .mado-ticket__desc{
    font-size:13px;
  }
}


/* =========================================================
   MADO FLOW（STEP）
   ★STEP4とSTEP5は「高さ」で揃える完成版
========================================================= */

.mado-flow{
  background:#fdffc4;
  padding: 54px 0 60px;
  padding-right:max(24px, env(safe-area-inset-right));
}
@media (min-width: 900px){
  .mado-flow{
    padding-right:calc(90px + max(24px, env(safe-area-inset-right)));
  }
}

/* タイトル */
.mado-flow__title{
  margin: 0 0 34px;
  text-align:center;
  font-family: var(--font-base);
  font-weight: 900;
  font-size: clamp(22px, 2.4vw, 38px);
  line-height: 1.55;
  letter-spacing: .06em;
  color:#f08a2a;
}

/* 共通行 */
.mado-flow__row{
  display:flex;
  justify-content:center;
  gap: 22px;
}

/* =========================
   上段（1→2→3）
========================= */
.mado-flow__row--top{
  align-items:flex-start;
  margin-bottom: 28px;
}

.mado-flow__row--top .mado-flow__card{
  width: clamp(180px, 18vw, 230px);
}

.mado-flow__row--top .mado-flow__img img{
  width:100%;
  height:auto;
  display:block;
}

/* 上段矢印 */
.mado-flow__row--top .mado-flow__arrow{
  width: clamp(40px, 4vw, 60px);
  margin-top: clamp(50px, 5vw, 70px);
  flex:0 0 auto;
}
.mado-flow__arrow img{
  width:100%;
  height:auto;
  display:block;
}

/* =========================
   下段（→4→5）
   ★ここが重要
========================= */
.mado-flow__row--bottom{
  align-items: stretch; /* ← 高さを揃えるため */
}

/* STEP4 / STEP5 共通高さ */
.mado-flow__row--bottom .mado-flow__card{
  height: clamp(260px, 28vw, 340px); /* ← 高さで揃える */
  display:flex;
  align-items:center;
  justify-content:center;
}

/* STEP4幅 */
.mado-flow__row--bottom .mado-flow__card:not(.mado-flow__card--wide){
  width: clamp(190px, 20vw, 240px);
}

/* STEP5幅（横長だけど高さは同じ） */
.mado-flow__row--bottom .mado-flow__card--wide{
  width: clamp(280px, 34vw, 420px);
}

/* 画像は高さに合わせて収める */
.mado-flow__row--bottom .mado-flow__img,
.mado-flow__row--bottom .mado-flow__img img{
  width:100%;
  height:100%;
}

.mado-flow__row--bottom .mado-flow__img img{
  object-fit:contain; /* ← 画像を潰さず収める */
}

/* 下段矢印 */
.mado-flow__row--bottom .mado-flow__arrow{
  width: clamp(40px, 4vw, 60px);
  margin-top: clamp(80px, 7vw, 100px);
  flex:0 0 auto;
}

@media (max-width: 680px){

.mado-flow__row--top .mado-flow__arrow{
  width:20px;
  margin-top:10px;
  flex:0 0 auto;
}
.mado-flow__row--bottom .mado-flow__arrow{
  width:20px;
  margin-top: clamp(80px, 7vw, 100px);
  flex:0 0 auto;
}

.mado-flow__row--bottom .mado-flow__card {
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

  .mado-flow{
    padding: 44px 0 54px;
  }

  .mado-flow__title{
    margin-bottom: 22px;
  }

  .mado-flow__row--top,
  .mado-flow__row--bottom{
    gap: 10px;
  }

  .mado-flow__card{
    max-width:170px;
  }
.mado-flow__card.mado-flow__card--wide{
    max-width:200px;
  }
}


/* =========================================================
  お問い合わせ
========================================================= */

#mado-contact{
  background:#fff;
  padding:56px 0 64px;
  padding-right:max(24px, env(safe-area-inset-right));
}
@media (min-width: 900px){
  #mado-contact{
    padding-right:calc(90px + max(24px, env(safe-area-inset-right)));
  }
}

/* inner */
#mado-contact .mado-inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
  font-family: var(--font-base, "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif);
}

/* lead */
#mado-contact .mado-contact__lead{
  margin: 0 0 18px;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: .02em;
  color:#111;
  text-align:center;
}

/* boxes */
#mado-contact .mado-contact__box{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  padding:22px 18px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
}
#mado-contact .mado-contact__box + .mado-contact__box{ margin-top:18px; }

#mado-contact .mado-contact__boxTitle{
  margin:0 0 12px;
  font-weight:900;
  font-size: clamp(16px, 1.7vw, 20px);
  letter-spacing:.04em;
  color:#1aa3d6;
  text-align:center;
}

/* ttl */
#mado-contact .mado-contact__ttl{
  margin: 0 0 14px;
  font-size: clamp(20px, 2.6vw, 34px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .02em;
  color: #f59a00;
  text-align:center;
}

/* tel row */
#mado-contact .mado-contact__tel{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:0 0 10px;
}
#mado-contact .mado-contact__telIcon{
  width: clamp(26px, 3.2vw, 40px);
  display:block;
}
#mado-contact .mado-contact__telIcon img{ display:block; width:100%; height:auto; }

#mado-contact .mado-contact__telNum{
  display:inline-block;
  font-size: clamp(34px, 5.0vw, 58px);
  font-weight: 900;
  letter-spacing:.02em;
  line-height:1;
  color:#111;
  text-decoration:none;
}
#mado-contact .mado-contact__time{
  margin:0;
  font-size:14px;
  font-weight:700;
  color:#333;
  text-align:center;
}

/* -------------------------
   CF7
------------------------- */
#mado-contact .wpcf7{
  max-width: 980px !important;
  margin: 18px auto 0 !important;
  text-align:center;
}
#mado-contact .wpcf7 form{
  margin:0 !important;
}


#mado-contact span.wpTxt{
margin-left: 5px;
 font-size: clamp(16px, 1.2vw, 18px);
line-height: 1.5;
vertical-align: middle;
}
#mado-contact p.addrRow , #mado-contact p.dateWish__ttl , #mado-contact .dateWish__col{
 font-size: clamp(16px, 1.2vw, 18px);
font-weight: bold;
margin-bottom: 10px;
}


/* table */
#mado-contact .wpcf7 table{
  width:100% !important;
  border-collapse: collapse;
  margin: 0 auto 22px;
}

#mado-contact .wpcf7 th{
  width: 160px;
  font-weight:800;
  white-space:nowrap;
  padding: 14px 12px;
  border-bottom: 1px solid rgba(0,0,0,.10);
  vertical-align: top;
 font-size: clamp(16px, 1.2vw, 18px);
}

#mado-contact .wpcf7 td{
  padding: 14px 12px;
  border-bottom: 1px solid rgba(0,0,0,.10);
  vertical-align: top;
 font-size: clamp(16px, 1.2vw, 18px);
 text-align:left; 
}

/* inputs */
#mado-contact .wpcf7 input[type="text"],
#mado-contact .wpcf7 input[type="email"],
#mado-contact .wpcf7 input[type="tel"],
#mado-contact .wpcf7 input[type="date"],
#mado-contact .wpcf7 textarea,
#mado-contact .wpcf7 select{
  width:100% !important;
  max-width: 640px;
  height:44px;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.18);
  border-radius:10px;
  box-sizing:border-box;
  background:#fff;
  font-size:14px;
  appearance:none;
  -webkit-appearance:none;
}
#mado-contact .wpcf7 textarea{
  height:160px;
  padding:12px;
  resize:vertical;
}
#mado-contact .wpcf7 .wid01{ max-width:240px !important; }

/* checkbox */
#mado-contact .wpcf7 .row-check.checkbox{
  margin: 16px 0 10px;
  font-size:13px;
  line-height:1.7;
}
#mado-contact .wpcf7 .row-check.checkbox input[type="checkbox"]{
  width:18px;
  height:18px;
  margin-right:8px;
  vertical-align:middle;
}

/* submit */
#mado-contact .wpcf7 .submit{
  margin: 0;
  padding: 0;
  list-style:none;
  text-align:center;
}
#mado-contact .wpcf7 .submit input[type="submit"]{
  width:160px;
  padding:12px 0;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.55);
  background:#fff;
  cursor:pointer;
  font-weight:900;
   font-size: clamp(16px, 1.2vw, 18px);
}

/* logo */
#mado-contact .mado-contact__brand{
  margin-top:22px;
  display:flex;
  justify-content:center;
}
#mado-contact .mado-contact__logo{
  width:60%;
  height:auto;
  display:block;
  margin:20px auto;
}

/* SP */
@media (max-width: 767px){
  #mado-contact{ padding:44px 0 52px; }

  #mado-contact .wpcf7 th,
  #mado-contact .wpcf7 td{
    display:block;
    width:100% !important;
    padding: 12px 0;
    border-bottom:none;
  }
  #mado-contact .wpcf7 td{
    padding-top:0;
    padding-bottom:16px;
    border-bottom:1px solid rgba(0,0,0,.10);
  }

  #mado-contact .wpcf7 input[type="text"],
  #mado-contact .wpcf7 input[type="email"],
  #mado-contact .wpcf7 input[type="tel"],
  #mado-contact .wpcf7 input[type="date"],
  #mado-contact .wpcf7 textarea,
  #mado-contact .wpcf7 select{
    max-width:100%;
    height:40px;
  }
  #mado-contact .wpcf7 textarea{ height:170px; }
  #mado-contact .wpcf7 .wid01{ max-width:100% !important; }
  
   #mado-contact .wpcf7 th{
    font-size: 16px !important;
  }

  #mado-contact p.addrRow,
  #mado-contact p.dateWish__ttl,
  #mado-contact .dateWish__col{
    font-size: 16px !important;
  }

  #mado-contact .wpcf7 table{
    font-size: 16px !important;
  } 
  
}


/* =========================================
   希望日時 横並び
========================================= */

#mado-contact .dateWish__col{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

/* 月日と時間を横並び */
#mado-contact .dateWish__col input[type="date"],
#mado-contact .dateWish__col select{
  width:260px !important;
  max-width:260px !important;
}




/* =========================================
   同意（acceptance）強制 横並び＆整形
   ※「最後に追記」推奨
========================================= */

#mado-contact .row-check.checkbox{
  max-width: 760px;
  margin: 22px auto 18px;
  padding: 0 10px;
  text-align: left !important;
}

/* CF7 acceptance本体（span） */
#mado-contact .row-check.checkbox .wpcf7-form-control.wpcf7-acceptance{
  display: block !important;
}

/* list-item 周りの余計なマージンを殺す */
#mado-contact .row-check.checkbox span.wpcf7-list-item{
  margin: 0 !important;
  display: block !important;
}

/* ★ここが本丸：label を flex にして、チェック＋文を横並び */
#mado-contact .row-check.checkbox span.wpcf7-list-item > label{
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  justify-content: flex-start !important;
  width: 100% !important;
  margin: 0 !important;
}

/* チェックボックスが「単独で上に行く」原因を潰す */
#mado-contact .row-check.checkbox input[type="checkbox"]{
  display: inline-block !important; /* block化を強制解除 */
  width: 20px !important;
  height: 20px !important;
  margin: 4px 0 0 !important;
  flex: 0 0 20px !important;
}

/* 文言（CF7はこれに入ることが多い） */
#mado-contact .row-check.checkbox .wpcf7-list-item-label{
  display: block !important;
  font-size: clamp(14px, 1vw, 16px) !important;
  line-height: 1.7 !important;
  letter-spacing: .02em;
}