/*
==================================================
シニア・介護向けリフォーム 共通CSS
対象ページ：
・トイレ
・浴室
・玄関
・その他
==================================================
*/

/* ==============================
   共通リセット・基本設定
============================== */

#senior-toilet-page,
#senior-toilet-page *,
#senior-bath-page,
#senior-bath-page *,
#senior-entrance-page,
#senior-entrance-page *,
#senior-other-page,
#senior-other-page *{
  box-sizing:border-box !important;
}

#senior-toilet-page,
#senior-bath-page,
#senior-entrance-page,
#senior-other-page{
  width:700px !important;
  max-width:100% !important;
  margin:0 auto !important;
  padding:30px 25px 70px !important;
  background:#ffffff !important;
  color:#333333 !important;
  font-family:
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif !important;
  line-height:1.7 !important;
}

/* ==============================
   共通メインタイトル
============================== */

#senior-toilet-page .st-main-title,
#senior-bath-page .sb-main-title,
#senior-entrance-page .se-main-title,
#senior-other-page .so-main-title{
  display:block !important;
  position:relative !important;
  width:100% !important;
  min-height:74px !important;
  margin:0 0 30px !important;
  padding:29px 15px 10px !important;
  border:0 !important;
  border-radius:0 !important;
  background:#703817 !important;
  background-image:none !important;
  color:#ffffff !important;
  text-align:center !important;
  overflow:visible !important;
}

#senior-toilet-page .st-main-title::before,
#senior-bath-page .sb-main-title::before,
#senior-entrance-page .se-main-title::before,
#senior-other-page .so-main-title::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  left:0 !important;
  width:100% !important;
  height:20px !important;
  background:#f03a1c !important;
}

#senior-toilet-page .st-main-title h1,
#senior-bath-page .sb-main-title h1,
#senior-entrance-page .se-main-title h1,
#senior-other-page .so-main-title h1{
  display:block !important;
  position:relative !important;
  width:100% !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  background-image:none !important;
  color:#ffffff !important;
  font-size:30px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
  letter-spacing:.02em !important;
  text-align:center !important;
  text-shadow:none !important;
  white-space:normal !important;
  overflow:visible !important;
}

/* ==============================
   共通セクション見出し
============================== */

#senior-toilet-page .st-section-label,
#senior-bath-page .sb-section-label,
#senior-entrance-page .se-section-label,
#senior-other-page .so-section-label{
  display:inline-block !important;
  max-width:100% !important;
  margin:0 0 18px 13px !important;
  padding:4px 14px 5px !important;
  border:0 !important;
  border-radius:0 !important;
  background:#4a4a4a !important;
  color:#ffffff !important;
  font-size:20px !important;
  font-weight:400 !important;
  line-height:1.3 !important;
  white-space:normal !important;
}

#senior-entrance-page .se-section-label,
#senior-other-page .so-section-label{
  width:269px !important;
}

/* ==============================
   共通ボックス見出し
============================== */

#senior-toilet-page .st-box-heading,
#senior-bath-page .sb-box-heading,
#senior-entrance-page .se-card-heading,
#senior-other-page .so-card-heading{
  display:block !important;
  position:relative !important;
  width:100% !important;
  height:auto !important;
  min-height:39px !important;
  margin:0 !important;
  padding:8px 8px 7px 29px !important;
  border:0 !important;
  border-bottom:1px solid #cccccc !important;
  border-radius:0 !important;
  background:linear-gradient(
    to bottom,
    #ffffff 0%,
    #f5f5f5 35%,
    #e3e3e3 100%
  ) !important;
  color:#333333 !important;
  font-size:14px !important;
  font-weight:400 !important;
  line-height:1.6 !important;
  text-align:left !important;
  white-space:normal !important;
  overflow:visible !important;
}

#senior-toilet-page .st-box-heading::before,
#senior-bath-page .sb-box-heading::before,
#senior-entrance-page .se-card-heading::before,
#senior-other-page .so-card-heading::before{
  content:"" !important;
  position:absolute !important;
  top:5px !important;
  bottom:5px !important;
  left:9px !important;
  width:4px !important;
  height:auto !important;
  background:#1878bf !important;
  box-shadow:1px 0 0 #95beda !important;
}

/* ==============================
   トイレ・浴室 共通上段ボックス
============================== */

#senior-toilet-page .st-feature-box,
#senior-bath-page .sb-feature-box{
  display:block !important;
  width:100% !important;
  margin:0 0 28px !important;
  padding:0 !important;
  border:1px solid #d8d8d8 !important;
  border-radius:0 !important;
  background:#ffffff !important;
  overflow:visible !important;
}

#senior-toilet-page .st-feature-content{
  display:grid !important;
  grid-template-columns:160px 28px 172px minmax(0,1fr) !important;
  column-gap:14px !important;
  align-items:start !important;
  width:100% !important;
  margin:0 !important;
  padding:22px 17px 24px !important;
}

#senior-bath-page .sb-feature-content{
  display:grid !important;
  grid-template-columns:172px 28px 172px minmax(0,1fr) !important;
  column-gap:14px !important;
  align-items:start !important;
  width:100% !important;
  margin:0 !important;
  padding:22px 17px 24px !important;
}

#senior-toilet-page .st-feature-image,
#senior-bath-page .sb-feature-image{
  display:block !important;
  width:100% !important;
  height:224px !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
}

/* 矢印 */

#senior-toilet-page .st-change-arrow,
#senior-bath-page .sb-change-arrow{
  display:block !important;
  position:relative !important;
  width:28px !important;
  height:44px !important;
  margin:90px auto 0 !important;
  padding:0 !important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.2)) !important;
}

#senior-toilet-page .st-change-arrow::before,
#senior-bath-page .sb-change-arrow::before{
  content:"" !important;
  position:absolute !important;
  top:14px !important;
  left:0 !important;
  width:15px !important;
  height:16px !important;
  border-top:1px solid #aaaaaa !important;
  border-bottom:1px solid #aaaaaa !important;
  border-left:1px solid #aaaaaa !important;
  background:#ffffff !important;
}

#senior-toilet-page .st-change-arrow::after,
#senior-bath-page .sb-change-arrow::after{
  content:"" !important;
  position:absolute !important;
  top:7px !important;
  right:0 !important;
  width:0 !important;
  height:0 !important;
  border-top:15px solid transparent !important;
  border-bottom:15px solid transparent !important;
  border-left:16px solid #ffffff !important;
  filter:drop-shadow(1px 0 0 #aaaaaa) !important;
}

#senior-toilet-page .st-feature-text,
#senior-toilet-page .st-feature-text p,
#senior-bath-page .sb-feature-text,
#senior-bath-page .sb-feature-text p{
  display:block !important;
  min-width:0 !important;
  width:100% !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  color:#333333 !important;
  font-size:12px !important;
  line-height:1.6 !important;
  white-space:normal !important;
  overflow:visible !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}

/* ==============================
   トイレ・浴室 3列カード
============================== */

#senior-toilet-page .st-card-grid,
#senior-bath-page .sb-card-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  column-gap:22px !important;
  row-gap:29px !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  align-items:stretch !important;
}

#senior-toilet-page .st-card,
#senior-bath-page .sb-card{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid #d8d8d8 !important;
  border-radius:0 !important;
  background:#ffffff !important;
  overflow:visible !important;
}

#senior-toilet-page .st-card-image-wrap,
#senior-bath-page .sb-card-image-wrap{
  display:block !important;
  width:calc(100% - 30px) !important;
  height:202px !important;
  margin:9px 15px 0 !important;
  padding:0 !important;
  background:#f5f5f5 !important;
  overflow:hidden !important;
}

#senior-toilet-page .st-card-image,
#senior-bath-page .sb-card-image{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
}

#senior-toilet-page .st-card-text,
#senior-bath-page .sb-card-text{
  display:block !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:8px 16px 12px !important;
  color:#333333 !important;
  font-size:12px !important;
  line-height:1.65 !important;
  white-space:normal !important;
  overflow:visible !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  text-overflow:clip !important;
  flex-grow:1 !important;
}

#senior-toilet-page .st-card-text{
  min-height:76px !important;
}

#senior-bath-page .sb-card-text{
  min-height:82px !important;
}

#senior-bath-page .sb-small-note{
  display:block !important;
  margin-top:3px !important;
  font-size:8px !important;
  line-height:1.4 !important;
}

/* ==============================
   玄関 2列カード
============================== */

#senior-entrance-page .se-card-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  column-gap:36px !important;
  row-gap:24px !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 0 26px !important;
  padding:0 13px !important;
  align-items:stretch !important;
}

#senior-entrance-page .se-card{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid #d8d8d8 !important;
  border-radius:0 !important;
  background:#ffffff !important;
  overflow:visible !important;
}

#senior-entrance-page .se-card-image-wrap{
  display:block !important;
  width:calc(100% - 52px) !important;
  height:166px !important;
  margin:10px 26px 0 !important;
  padding:0 !important;
  background:#f5f5f5 !important;
  overflow:hidden !important;
}

#senior-entrance-page .se-card-image{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
}

#senior-entrance-page .se-card-text{
  display:block !important;
  width:auto !important;
  height:auto !important;
  min-height:86px !important;
  margin:0 !important;
  padding:8px 26px 13px !important;
  color:#333333 !important;
  font-size:12px !important;
  line-height:1.65 !important;
  white-space:normal !important;
  overflow:visible !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  text-overflow:clip !important;
  flex-grow:1 !important;
}

/* ==============================
   その他 共通カード
============================== */

#senior-other-page .so-card{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid #d8d8d8 !important;
  border-radius:0 !important;
  background:#ffffff !important;
  overflow:visible !important;
}

#senior-other-page .so-card-image{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
}

#senior-other-page .so-card-text{
  display:block !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:8px 16px 12px !important;
  color:#333333 !important;
  font-size:12px !important;
  line-height:1.65 !important;
  white-space:normal !important;
  overflow:visible !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  text-overflow:clip !important;
  flex-grow:1 !important;
}

/* 階段：3列 */

#senior-other-page .so-stairs-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  column-gap:22px !important;
  row-gap:24px !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 0 46px !important;
  padding:0 13px !important;
  align-items:stretch !important;
}

#senior-other-page .so-stairs-grid .so-card-image-wrap{
  display:block !important;
  width:calc(100% - 30px) !important;
  height:202px !important;
  margin:10px 15px 0 !important;
  padding:0 !important;
  background:#f5f5f5 !important;
  overflow:hidden !important;
}

#senior-other-page .so-stairs-grid .so-card-text{
  min-height:74px !important;
}

/* 洗面：2列 */

#senior-other-page .so-wash-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  column-gap:36px !important;
  row-gap:24px !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 13px !important;
  align-items:stretch !important;
}

#senior-other-page .so-wash-grid .so-card-image-wrap{
  display:block !important;
  width:calc(100% - 52px) !important;
  height:168px !important;
  margin:10px 26px 0 !important;
  padding:0 !important;
  background:#f5f5f5 !important;
  overflow:hidden !important;
}

#senior-other-page .so-wash-grid .so-card-text{
  min-height:76px !important;
  padding-right:26px !important;
  padding-left:26px !important;
}

/* ==============================
   スマートフォン共通
============================== */

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

  #senior-toilet-page,
  #senior-bath-page,
  #senior-entrance-page,
  #senior-other-page{
    width:100% !important;
    padding:20px 14px 45px !important;
  }

  #senior-toilet-page .st-main-title,
  #senior-bath-page .sb-main-title,
  #senior-entrance-page .se-main-title,
  #senior-other-page .so-main-title{
    min-height:0 !important;
    margin-bottom:22px !important;
    padding:23px 8px 8px !important;
  }

  #senior-toilet-page .st-main-title::before,
  #senior-bath-page .sb-main-title::before,
  #senior-entrance-page .se-main-title::before,
  #senior-other-page .so-main-title::before{
    height:14px !important;
  }

  #senior-toilet-page .st-main-title h1,
  #senior-bath-page .sb-main-title h1,
  #senior-entrance-page .se-main-title h1,
  #senior-other-page .so-main-title h1{
    font-size:clamp(20px,5.8vw,30px) !important;
  }

  #senior-toilet-page .st-section-label,
  #senior-bath-page .sb-section-label,
  #senior-entrance-page .se-section-label,
  #senior-other-page .so-section-label{
    width:auto !important;
    margin-left:0 !important;
    font-size:17px !important;
  }

  #senior-toilet-page .st-box-heading,
  #senior-bath-page .sb-box-heading,
  #senior-entrance-page .se-card-heading,
  #senior-other-page .so-card-heading{
    font-size:15px !important;
  }

  /* トイレ・浴室 上段 */

  #senior-toilet-page .st-feature-content,
  #senior-bath-page .sb-feature-content{
    grid-template-columns:1fr !important;
    row-gap:15px !important;
    padding:16px !important;
  }

  #senior-toilet-page .st-feature-image,
  #senior-bath-page .sb-feature-image{
    width:100% !important;
    height:auto !important;
    max-height:430px !important;
    object-fit:contain !important;
  }

  #senior-toilet-page .st-change-arrow,
  #senior-bath-page .sb-change-arrow{
    width:28px !important;
    height:38px !important;
    margin:0 auto !important;
    transform:rotate(90deg) !important;
  }

  #senior-toilet-page .st-feature-text,
  #senior-toilet-page .st-feature-text p,
  #senior-bath-page .sb-feature-text,
  #senior-bath-page .sb-feature-text p{
    font-size:14px !important;
  }

  /* 全カードを1列に */

  #senior-toilet-page .st-card-grid,
  #senior-bath-page .sb-card-grid,
  #senior-entrance-page .se-card-grid,
  #senior-other-page .so-stairs-grid,
  #senior-other-page .so-wash-grid{
    grid-template-columns:1fr !important;
    gap:20px !important;
    padding:0 !important;
  }

  #senior-other-page .so-stairs-grid{
    margin-bottom:34px !important;
  }

  /* カード画像 */

  #senior-toilet-page .st-card-image-wrap,
  #senior-bath-page .sb-card-image-wrap,
  #senior-entrance-page .se-card-image-wrap,
  #senior-other-page .so-stairs-grid .so-card-image-wrap,
  #senior-other-page .so-wash-grid .so-card-image-wrap{
    width:calc(100% - 30px) !important;
    height:auto !important;
    margin:10px 15px 0 !important;
    aspect-ratio:4 / 3 !important;
  }

  #senior-toilet-page .st-card-image,
  #senior-bath-page .sb-card-image,
  #senior-entrance-page .se-card-image,
  #senior-other-page .so-card-image{
    object-fit:contain !important;
    background:#f5f5f5 !important;
  }

  /* カード本文 */

  #senior-toilet-page .st-card-text,
  #senior-bath-page .sb-card-text,
  #senior-entrance-page .se-card-text,
  #senior-other-page .so-stairs-grid .so-card-text,
  #senior-other-page .so-wash-grid .so-card-text{
    min-height:0 !important;
    padding:8px 16px 13px !important;
    font-size:14px !important;
  }

  #senior-bath-page .sb-small-note{
    font-size:10px !important;
  }
}