/* =========================================================
   LDKリフォーム専用CSS
   現在のHTML構造に合わせた修正版
========================================================= */

#ldk-reform-page,
#ldk-reform-page *{
  box-sizing:border-box !important;
}

#ldk-reform-page{
  width:700px !important;
  max-width:100% !important;
  margin:0 auto !important;
  padding:8px 42px 35px !important;
  background:#fff !important;
  color:#333 !important;
  font-family:"Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif !important;
  line-height:1.55 !important;
}

#ldk-reform-page img{
  display:block !important;
  float:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

/* メインタイトル */
#ldk-reform-page .ldk-main-title{
  width:calc(100% + 80px) !important;
  margin:0 -40px 18px !important;
  padding:6px 40px 7px !important;
  border:1px solid #ccc !important;
  background:linear-gradient(to bottom,#fff 0%,#fff 45%,#eee 100%) !important;
  box-shadow:0 3px 4px rgba(0,0,0,.4) !important;
  color:#555 !important;
  font-size:27px !important;
  font-weight:400 !important;
  line-height:1.25 !important;
}

/* 上部 */
#ldk-reform-page .ldk-intro{
  display:grid !important;
  grid-template-columns:130px minmax(0,1fr) !important;
  column-gap:24px !important;
  align-items:start !important;
  width:100% !important;
  margin:0 0 26px !important;
}

#ldk-reform-page .ldk-family-image{
  width:130px !important;
  min-width:130px !important;
  max-width:130px !important;
  height:auto !important;
}

#ldk-reform-page .ldk-intro-content{
  min-width:0 !important;
  padding-top:6px !important;
}

#ldk-reform-page .ldk-green-title{
  margin:0 0 8px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#57a000 !important;
  font-size:30px !important;
  font-weight:700 !important;
  line-height:1.25 !important;
}

#ldk-reform-page .ldk-orange-title{
  margin:0 0 6px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#f28a00 !important;
  font-size:25px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
}

#ldk-reform-page .ldk-red-title{
  position:relative !important;
  margin:0 0 10px !important;
  padding:0 0 0 27px !important;
  border:0 !important;
  background:transparent !important;
  color:#111 !important;
  font-size:24px !important;
  font-weight:700 !important;
  line-height:1.3 !important;
}

#ldk-reform-page .ldk-red-title::before{
  content:"" !important;
  position:absolute !important;
  top:4px !important;
  left:0 !important;
  width:21px !important;
  height:21px !important;
  background:#c80019 !important;
}

#ldk-reform-page .ldk-text,
#ldk-reform-page .ldk-card-text{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  color:#333 !important;
  font-size:14px !important;
  line-height:1.55 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}

#ldk-reform-page .ldk-section{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

#ldk-reform-page .ldk-section-lead{
  margin-bottom:12px !important;
}

/* 点線 */
#ldk-reform-page .ldk-divider{
  width:100% !important;
  height:10px !important;
  margin:18px 0 12px !important;
  background-image:radial-gradient(circle,#e5c69e 3px,transparent 4px) !important;
  background-size:10px 10px !important;
  background-repeat:repeat-x !important;
  background-position:left center !important;
  clear:both !important;
}

/* 茶色ラベル */
#ldk-reform-page .ldk-label{
  display:inline-block !important;
  min-width:182px !important;
  margin:0 0 14px !important;
  padding:5px 18px !important;
  background:#dcae70 !important;
  color:#fff !important;
  font-size:24px !important;
  font-weight:700 !important;
  line-height:1.25 !important;
  text-align:center !important;
  text-shadow:0 1px 2px rgba(0,0,0,.45) !important;
}

#ldk-reform-page .ldk-label-large{
  min-width:183px !important;
  margin-bottom:10px !important;
}

/* 内装写真 2列 */
#ldk-reform-page .ldk-style-grid{
  display:grid !important;
  grid-template-columns:repeat(2,293px) !important;
  column-gap:30px !important;
  row-gap:18px !important;
  width:616px !important;
  max-width:100% !important;
}

#ldk-reform-page .ldk-style-card{
  width:293px !important;
  min-width:293px !important;
  max-width:293px !important;
}

#ldk-reform-page .ldk-style-card > img{
  width:293px !important;
  min-width:293px !important;
  max-width:293px !important;
  height:209px !important;
  min-height:209px !important;
  max-height:209px !important;
  object-fit:cover !important;
  object-position:center !important;
}

/* 共通グリッド */
#ldk-reform-page .ldk-material-grid,
#ldk-reform-page .ldk-info-grid{
  display:grid !important;
  align-items:start !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

#ldk-reform-page .ldk-material-grid-3,
#ldk-reform-page .ldk-info-grid-3{
  grid-template-columns:repeat(3,180px) !important;
  column-gap:38px !important;
  row-gap:18px !important;
}

#ldk-reform-page .ldk-info-grid-4{
  grid-template-columns:repeat(4,141px) !important;
  column-gap:17px !important;
  row-gap:18px !important;
}

#ldk-reform-page .ldk-material-card,
#ldk-reform-page .ldk-info-card{
  display:block !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
}

/* 緑の項目名 */
#ldk-reform-page .ldk-item-name{
  display:block !important;
  position:relative !important;
  width:100% !important;
  margin:5px 0 3px !important;
  padding:0 0 0 16px !important;
  color:#222 !important;
  font-size:15px !important;
  font-weight:400 !important;
  line-height:1.35 !important;
  clear:both !important;
}

#ldk-reform-page .ldk-item-name::before{
  content:"" !important;
  position:absolute !important;
  top:3px !important;
  left:0 !important;
  width:12px !important;
  height:14px !important;
  background:#59a000 !important;
}

/* 床材 */
#ldk-reform-page .ldk-material-card{
  width:180px !important;
}

#ldk-reform-page .ldk-material-card > img{
  width:180px !important;
  min-width:180px !important;
  max-width:180px !important;
  height:139px !important;
  min-height:139px !important;
  max-height:139px !important;
  object-fit:cover !important;
}

/* 壁・窓 */
#ldk-reform-page .ldk-info-grid-4 > .ldk-info-card{
  width:141px !important;
}

#ldk-reform-page .ldk-info-grid-4 > .ldk-info-card > img{
  width:141px !important;
  min-width:141px !important;
  max-width:141px !important;
  height:100px !important;
  min-height:100px !important;
  max-height:100px !important;
  object-fit:cover !important;
}

/* 収納 */
#ldk-reform-page .ldk-info-grid-3 > .ldk-info-card{
  width:180px !important;
}

#ldk-reform-page .ldk-info-grid-3 > .ldk-info-card > img{
  width:180px !important;
  min-width:180px !important;
  max-width:180px !important;
  height:129px !important;
  min-height:129px !important;
  max-height:129px !important;
  object-fit:cover !important;
}

#ldk-reform-page .ldk-info-card .ldk-card-text{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  font-size:13px !important;
  line-height:1.45 !important;
  clear:both !important;
}

/* イラスト */
#ldk-reform-page .ldk-illustration-wrap{
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  width:180px !important;
  min-height:165px !important;
}

#ldk-reform-page .ldk-illustration-wrap > img{
  width:auto !important;
  max-width:150px !important;
  height:auto !important;
  max-height:155px !important;
}

/* 最下部：現在のHTML構造に対応 */
#ldk-reform-page .ldk-bottom-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  row-gap:22px !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

#ldk-reform-page .ldk-floor-heating{
  display:grid !important;
  grid-template-columns:180px minmax(0,1fr) !important;
  grid-template-areas:
    "title title"
    "image text" !important;
  column-gap:22px !important;
  align-items:start !important;
  width:100% !important;
}

#ldk-reform-page .ldk-floor-heating .ldk-red-title{
  grid-area:title !important;
}

#ldk-reform-page .ldk-floor-heating > img{
  grid-area:image !important;
  width:180px !important;
  min-width:180px !important;
  max-width:180px !important;
  height:132px !important;
  min-height:132px !important;
  max-height:132px !important;
  object-fit:cover !important;
}

#ldk-reform-page .ldk-floor-heating > .ldk-card-text{
  grid-area:text !important;
  padding-top:4px !important;
}

#ldk-reform-page .ldk-layout-change{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 140px !important;
  grid-template-areas:
    "label woman"
    "text woman"
    "button woman" !important;
  column-gap:24px !important;
  align-items:end !important;
  width:100% !important;
  min-height:170px !important;
}

#ldk-reform-page .ldk-layout-change .ldk-label{
  grid-area:label !important;
  justify-self:start !important;
}

#ldk-reform-page .ldk-layout-change .ldk-text{
  grid-area:text !important;
}

#ldk-reform-page .ldk-layout-change .ldk-kitchen-button{
  grid-area:button !important;
}

#ldk-reform-page .ldk-kitchen-woman{
  grid-area:woman !important;
  width:140px !important;
  min-width:140px !important;
  max-width:140px !important;
  height:auto !important;
  align-self:end !important;
}

#ldk-reform-page a.ldk-kitchen-button{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:140px !important;
  height:60px !important;
  margin:10px 0 0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:7px !important;
  background:#f39200 !important;
  color:#fff !important;
  font-size:18px !important;
  font-weight:700 !important;
  line-height:1 !important;
  text-align:center !important;
  text-decoration:none !important;
}

#ldk-reform-page a.ldk-kitchen-button:hover{
  opacity:.85 !important;
}

/* スマートフォン */
@media screen and (max-width:640px){

  #ldk-reform-page{
    width:100% !important;
    padding:8px 14px 35px !important;
  }

  #ldk-reform-page .ldk-main-title{
    width:100% !important;
    margin:0 0 18px !important;
    padding:7px 14px !important;
    font-size:23px !important;
  }

  #ldk-reform-page .ldk-intro{
    grid-template-columns:110px minmax(0,1fr) !important;
    column-gap:16px !important;
  }

  #ldk-reform-page .ldk-family-image{
    width:110px !important;
    min-width:110px !important;
    max-width:110px !important;
  }

  #ldk-reform-page .ldk-green-title,
  #ldk-reform-page .ldk-orange-title{
    font-size:22px !important;
  }

  #ldk-reform-page .ldk-style-grid,
  #ldk-reform-page .ldk-material-grid-3,
  #ldk-reform-page .ldk-info-grid-3,
  #ldk-reform-page .ldk-info-grid-4{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    column-gap:16px !important;
    row-gap:20px !important;
    width:100% !important;
  }

  #ldk-reform-page .ldk-style-card,
  #ldk-reform-page .ldk-material-card,
  #ldk-reform-page .ldk-info-grid-3 > .ldk-info-card,
  #ldk-reform-page .ldk-info-grid-4 > .ldk-info-card{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }

  #ldk-reform-page .ldk-style-card > img,
  #ldk-reform-page .ldk-material-card > img,
  #ldk-reform-page .ldk-info-grid-3 > .ldk-info-card > img,
  #ldk-reform-page .ldk-info-grid-4 > .ldk-info-card > img{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    object-fit:cover !important;
  }

  #ldk-reform-page .ldk-style-card > img{
    aspect-ratio:293 / 209 !important;
  }

  #ldk-reform-page .ldk-material-card > img{
    aspect-ratio:180 / 139 !important;
  }

  #ldk-reform-page .ldk-info-grid-3 > .ldk-info-card > img{
    aspect-ratio:180 / 129 !important;
  }

  #ldk-reform-page .ldk-info-grid-4 > .ldk-info-card > img{
    aspect-ratio:141 / 100 !important;
  }

  #ldk-reform-page .ldk-floor-heating{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "title"
      "image"
      "text" !important;
    row-gap:12px !important;
  }

  #ldk-reform-page .ldk-floor-heating > img{
    width:100% !important;
    min-width:0 !important;
    max-width:360px !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 auto !important;
    aspect-ratio:180 / 132 !important;
  }

  #ldk-reform-page .ldk-layout-change{
    grid-template-columns:minmax(0,1fr) 120px !important;
    grid-template-areas:
      "label woman"
      "text woman"
      "button woman" !important;
    column-gap:16px !important;
  }

  #ldk-reform-page .ldk-kitchen-woman{
    width:120px !important;
    min-width:120px !important;
    max-width:120px !important;
  }
}

@media screen and (max-width:420px){

  #ldk-reform-page .ldk-intro{
    grid-template-columns:90px minmax(0,1fr) !important;
    column-gap:12px !important;
  }

  #ldk-reform-page .ldk-family-image{
    width:90px !important;
    min-width:90px !important;
    max-width:90px !important;
  }

  #ldk-reform-page .ldk-green-title{
    font-size:19px !important;
  }

  #ldk-reform-page .ldk-style-grid,
  #ldk-reform-page .ldk-material-grid-3,
  #ldk-reform-page .ldk-info-grid-3,
  #ldk-reform-page .ldk-info-grid-4{
    grid-template-columns:1fr !important;
  }

  #ldk-reform-page .ldk-label{
    width:100% !important;
  }

  #ldk-reform-page .ldk-layout-change{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "label"
      "text"
      "button"
      "woman" !important;
    row-gap:12px !important;
  }

  #ldk-reform-page .ldk-kitchen-woman{
    width:140px !important;
    min-width:140px !important;
    max-width:140px !important;
    margin:0 auto !important;
  }
}
/* =========================================================
   LDKページ 最終位置修正
   このコードを専用CSSの一番最後に追加
========================================================= */

/* ---------------------------------------------------------
   1. ページ上部
   家族画像を左、見出し・説明文を右に固定
--------------------------------------------------------- */

body #ldk-reform-page > section.ldk-intro{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:24px !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 0 26px !important;
  padding:0 !important;
}

body #ldk-reform-page > section.ldk-intro > img.ldk-family-image{
  display:block !important;
  flex:0 0 130px !important;
  width:130px !important;
  min-width:130px !important;
  max-width:130px !important;
  height:auto !important;
  margin:0 !important;
}

body #ldk-reform-page > section.ldk-intro > div.ldk-intro-content{
  display:block !important;
  flex:1 1 auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  margin:0 !important;
  padding:6px 0 0 !important;
}

body #ldk-reform-page > section.ldk-intro > div.ldk-intro-content .ldk-green-title{
  display:block !important;
  width:auto !important;
  max-width:none !important;
  margin:0 0 8px !important;
  padding:0 !important;
  text-align:left !important;
  white-space:normal !important;
}

body #ldk-reform-page > section.ldk-intro > div.ldk-intro-content .ldk-text{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
  white-space:normal !important;
}


/* ---------------------------------------------------------
   2. 最下部全体
--------------------------------------------------------- */

body #ldk-reform-page > section.ldk-bottom-grid{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}


/* ---------------------------------------------------------
   3. 床暖房
   見出しの下で、写真を左・文章を右
--------------------------------------------------------- */

body #ldk-reform-page .ldk-floor-heating{
  display:grid !important;
  grid-template-columns:180px minmax(0,1fr) !important;
  grid-template-areas:
    "heading heading"
    "photo description" !important;
  column-gap:24px !important;
  row-gap:8px !important;
  align-items:start !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

body #ldk-reform-page .ldk-floor-heating > .ldk-red-title{
  grid-area:heading !important;
  width:100% !important;
  margin:0 0 2px !important;
}

body #ldk-reform-page .ldk-floor-heating > img{
  grid-area:photo !important;
  display:block !important;
  width:180px !important;
  min-width:180px !important;
  max-width:180px !important;
  height:132px !important;
  min-height:132px !important;
  max-height:132px !important;
  margin:0 !important;
  object-fit:cover !important;
}

body #ldk-reform-page .ldk-floor-heating > .ldk-card-text{
  grid-area:description !important;
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:4px 0 0 !important;
}


/* ---------------------------------------------------------
   4. 配置の変更
   左側に見出し・文章・ボタン、右側に女性イラスト
--------------------------------------------------------- */

body #ldk-reform-page .ldk-layout-change{
  display:block !important;
  position:relative !important;
  width:100% !important;
  min-height:185px !important;
  margin:24px 0 0 !important;
  padding:0 175px 0 0 !important;
}

body #ldk-reform-page .ldk-layout-change > .ldk-label{
  display:inline-block !important;
  width:auto !important;
  min-width:183px !important;
  margin:0 0 10px !important;
  padding:5px 18px !important;
}

body #ldk-reform-page .ldk-layout-change > .ldk-text{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

body #ldk-reform-page .ldk-layout-change > a.ldk-kitchen-button{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:140px !important;
  height:60px !important;
  margin:10px 0 0 !important;
  padding:0 !important;
  position:static !important;
  border:0 !important;
  border-radius:7px !important;
  background:#f39200 !important;
  color:#fff !important;
  font-size:18px !important;
  font-weight:700 !important;
  line-height:1 !important;
  text-align:center !important;
  text-decoration:none !important;
}

body #ldk-reform-page .ldk-layout-change > img.ldk-kitchen-woman{
  display:block !important;
  position:absolute !important;
  right:0 !important;
  bottom:0 !important;
  width:140px !important;
  min-width:140px !important;
  max-width:140px !important;
  height:auto !important;
  margin:0 !important;
}


/* ---------------------------------------------------------
   スマートフォン
--------------------------------------------------------- */

@media screen and (max-width:640px){

  body #ldk-reform-page > section.ldk-intro{
    gap:16px !important;
  }

  body #ldk-reform-page > section.ldk-intro > img.ldk-family-image{
    flex-basis:110px !important;
    width:110px !important;
    min-width:110px !important;
    max-width:110px !important;
  }

  body #ldk-reform-page .ldk-floor-heating{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "heading"
      "photo"
      "description" !important;
  }

  body #ldk-reform-page .ldk-floor-heating > img{
    width:100% !important;
    min-width:0 !important;
    max-width:360px !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 auto !important;
    aspect-ratio:180 / 132 !important;
  }

  body #ldk-reform-page .ldk-layout-change{
    min-height:165px !important;
    padding-right:145px !important;
  }

  body #ldk-reform-page .ldk-layout-change > img.ldk-kitchen-woman{
    width:120px !important;
    min-width:120px !important;
    max-width:120px !important;
  }
}

@media screen and (max-width:420px){

  body #ldk-reform-page > section.ldk-intro{
    display:grid !important;
    grid-template-columns:90px minmax(0,1fr) !important;
    gap:12px !important;
  }

  body #ldk-reform-page > section.ldk-intro > img.ldk-family-image{
    width:90px !important;
    min-width:90px !important;
    max-width:90px !important;
  }

  body #ldk-reform-page .ldk-layout-change{
    min-height:0 !important;
    padding-right:0 !important;
  }

  body #ldk-reform-page .ldk-layout-change > img.ldk-kitchen-woman{
    position:static !important;
    width:140px !important;
    min-width:140px !important;
    max-width:140px !important;
    margin:14px auto 0 !important;
  }
}