/* =========================================================
   和室リフォーム専用CSS
   700px固定・完全新規作成版
========================================================= */

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

#jroom-reform-page{
  width:700px !important;
  min-width:700px !important;
  max-width:700px !important;
  margin:0 auto !important;
  padding:6px 43px 30px !important;
  background:#ffffff !important;
  color:#222222 !important;
  font-family:
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif !important;
  font-size:13px !important;
  line-height:1.45 !important;
  overflow:hidden !important;
}

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

#jroom-reform-page h1,
#jroom-reform-page h2,
#jroom-reform-page h3,
#jroom-reform-page p{
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
  word-break:normal !important;
}

/* メインタイトル */
#jroom-reform-page .jr-main-title{
  width:694px !important;
  margin:0 0 20px -40px !important;
  padding:5px 40px 7px !important;
  border:1px solid #bbbbbb !important;
  background:linear-gradient(to bottom,#ffffff 0%,#ffffff 48%,#eeeeee 100%) !important;
  box-shadow:0 3px 4px rgba(0,0,0,.45) !important;
  color:#555555 !important;
  font-size:27px !important;
  font-weight:400 !important;
  line-height:1.2 !important;
}

/* 最上部：画像左、文章右 */
#jroom-reform-page .jr-intro{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:flex-start !important;
  gap:20px !important;
  width:614px !important;
  margin:0 0 16px !important;
  padding:0 !important;
}

#jroom-reform-page .jr-intro-image{
  flex:0 0 130px !important;
  width:130px !important;
  min-width:130px !important;
  max-width:130px !important;
}

#jroom-reform-page .jr-intro-text{
  flex:1 1 auto !important;
  min-width:0 !important;
  padding-top:8px !important;
}

#jroom-reform-page .jr-intro-title{
  margin:0 0 8px !important;
  padding:0 !important;
  color:#5b9900 !important;
  font-size:29px !important;
  font-weight:700 !important;
  line-height:1.22 !important;
  white-space:nowrap !important;
}

#jroom-reform-page .jr-lead{
  margin:0 !important;
  padding:0 !important;
  font-size:14px !important;
  line-height:1.55 !important;
}

/* ベージュ見出し */
#jroom-reform-page .jr-beige-title{
  display:inline-block !important;
  min-width:217px !important;
  margin:0 0 10px !important;
  padding:4px 18px !important;
  background:#ead4b4 !important;
  color:#ffffff !important;
  font-size:23px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.35) !important;
}

/* 茶色見出し */
#jroom-reform-page .jr-brown-title{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  margin:14px 0 8px !important;
  color:#222222 !important;
  font-size:22px !important;
  font-weight:400 !important;
  line-height:1.25 !important;
}

#jroom-reform-page .jr-brown-title::before,
#jroom-reform-page .jr-brown-title::after{
  content:"" !important;
  flex:0 0 19px !important;
  width:19px !important;
  height:19px !important;
  background:#754a22 !important;
}

/* オレンジ小見出し */
#jroom-reform-page .jr-orange-label{
  display:block !important;
  margin:0 0 6px !important;
  color:#ef8b00 !important;
  font-size:18px !important;
  font-weight:700 !important;
  line-height:1.25 !important;
}

/* 共通グリッド */
#jroom-reform-page .jr-grid-2{
  display:grid !important;
  grid-template-columns:181px 181px !important;
  column-gap:36px !important;
  row-gap:18px !important;
  width:398px !important;
  align-items:start !important;
}

#jroom-reform-page .jr-grid-3{
  display:grid !important;
  grid-template-columns:181px 181px 181px !important;
  column-gap:36px !important;
  row-gap:18px !important;
  width:615px !important;
  align-items:start !important;
}

#jroom-reform-page .jr-grid-4{
  display:grid !important;
  grid-template-columns:141px 141px 141px 141px !important;
  column-gap:18px !important;
  row-gap:18px !important;
  width:615px !important;
  align-items:start !important;
}

#jroom-reform-page .jr-card{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}

#jroom-reform-page .jr-card img{
  width:100% !important;
  max-width:100% !important;
}

#jroom-reform-page .jr-item-title{
  position:relative !important;
  display:block !important;
  width:100% !important;
  margin:5px 0 3px !important;
  padding-left:13px !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
}

#jroom-reform-page .jr-item-title::before{
  content:"" !important;
  position:absolute !important;
  top:4px !important;
  left:0 !important;
  width:11px !important;
  height:11px !important;
  background:#69a800 !important;
}

#jroom-reform-page .jr-card-text{
  margin:0 !important;
  padding:0 !important;
  font-size:12px !important;
  line-height:1.38 !important;
}

/* 畳上段 */
#jroom-reform-page .jr-tatami-top{
  display:grid !important;
  grid-template-columns:181px 181px 181px !important;
  column-gap:36px !important;
  width:615px !important;
  align-items:start !important;
}

#jroom-reform-page .jr-tatami-diagram{
  align-self:end !important;
}

#jroom-reform-page .jr-tatami-diagram img{
  width:181px !important;
  height:136px !important;
  object-fit:contain !important;
}

/* 壁 */
#jroom-reform-page .jr-wall-grid{
  display:grid !important;
  grid-template-columns:181px 181px 120px !important;
  column-gap:36px !important;
  width:554px !important;
  align-items:start !important;
}

#jroom-reform-page .jr-wall-person{
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  width:120px !important;
  min-height:170px !important;
}

#jroom-reform-page .jr-wall-person img{
  width:95px !important;
  max-width:95px !important;
}

/* 窓 */
#jroom-reform-page .jr-window-grid{
  display:grid !important;
  grid-template-columns:181px 181px 120px !important;
  column-gap:36px !important;
  width:554px !important;
  align-items:start !important;
}

#jroom-reform-page .jr-window-person{
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  width:120px !important;
  min-height:160px !important;
}

#jroom-reform-page .jr-window-person img{
  width:100px !important;
  max-width:100px !important;
}

/* 点線 */
#jroom-reform-page .jr-divider{
  width:614px !important;
  height:8px !important;
  margin:18px 0 12px !important;
  background-image:radial-gradient(circle,#dfbd93 3px,transparent 3.5px) !important;
  background-size:10px 8px !important;
  background-repeat:repeat-x !important;
}


/* =========================================================
   2枚の画像に対して説明文を1つにするレイアウト
========================================================= */

/* 畳タイプ：2枚の琉球畳に共通説明 */
#jroom-reform-page .jr-tatami-type-grid{
  display:grid !important;
  grid-template-columns:181px 181px 181px !important;
  grid-template-areas:
    "standard ryukyu-a ryukyu-b"
    "standard ryukyu-text ryukyu-text" !important;
  column-gap:36px !important;
  row-gap:0 !important;
  width:615px !important;
  align-items:start !important;
}

#jroom-reform-page .jr-tatami-standard-card{
  grid-area:standard !important;
}

#jroom-reform-page .jr-tatami-ryukyu-a{
  grid-area:ryukyu-a !important;
}

#jroom-reform-page .jr-tatami-ryukyu-b{
  grid-area:ryukyu-b !important;
}

#jroom-reform-page .jr-tatami-shared-text{
  grid-area:ryukyu-text !important;
  width:398px !important;
  margin:4px 0 0 !important;
  padding:0 !important;
  font-size:12px !important;
  line-height:1.38 !important;
}

/* 収納：押入・吊り押入に共通説明 */
#jroom-reform-page .jr-storage-grid{
  display:grid !important;
  grid-template-columns:141px 141px 141px 141px !important;
  grid-template-areas:
    "oshiire hanging step floor"
    "shared shared step floor" !important;
  column-gap:18px !important;
  row-gap:0 !important;
  width:615px !important;
  align-items:start !important;
}

#jroom-reform-page .jr-storage-oshiire{
  grid-area:oshiire !important;
}

#jroom-reform-page .jr-storage-hanging{
  grid-area:hanging !important;
}

#jroom-reform-page .jr-storage-step{
  grid-area:step !important;
}

#jroom-reform-page .jr-storage-floor{
  grid-area:floor !important;
}

#jroom-reform-page .jr-storage-shared-text{
  grid-area:shared !important;
  width:300px !important;
  margin:4px 0 0 !important;
  padding:0 !important;
  font-size:12px !important;
  line-height:1.38 !important;
}