@charset "utf-8";
/* CSS Document */

/* 特長の説明用カードグループ bootstrapのカードグループを拡張*/
.card-group.feature-cards > .card{
  margin-bottom: 4rem;
  border: none;
  border-radius: 0;
}
.card-group.feature-cards > .card{
  flex-basis: 100%;
}

@media (min-width: 576px){
  .card-group.feature-cards > .card,
  .card-group.feature-cards > .card.col-sm-6,
  .card-group.feature-cards > .card.col-md-6,
  .card-group.feature-cards > .card.col-lg-6{
    flex-basis: 50%;
  }
  .card-group.feature-cards > .card.col-sm-12,
  .card-group.feature-cards > .card.col-12
  {
    flex-basis: 100%;
  }
}
@media (min-width: 768px){
  .card-group.feature-cards > .card{
    flex-basis: 33.3333%;
  }
  .card-group.feature-cards > .card.col-md-6,
  .card-group.feature-cards > .card.col-lg-6{
    flex-basis: 50%;
  }
  .card-group.feature-cards > .card.col-md-8,
  .card-group.feature-cards > .card.col-sm-8,
  .card-group.feature-cards > .card.col-8
  {
    flex-basis: 66.6666%;
  }
  .card-group.feature-cards > .card.col-md-12,
  .card-group.feature-cards > .card.col-sm-12,
  .card-group.feature-cards > .card.col-12
  {
    flex-basis: 100%;
  }
}

@media (min-width: 992px){
  .card-group.feature-cards.column-4 > .card,
  .card-group.feature-cards.column-4 > .card.col-lg-3
  {
    flex-basis: 25%;
  }
  .card-group.feature-cards > .card.col-lg-6{
    flex-basis: 50%;
  }
}
.card-group.feature-cards .card-body{
  padding-bottom: 1rem;
}
.card-group.feature-cards .card-footer{
  background-color: inherit;
  border-top: none;
}

/* ＊＊＊の特長 の背景に薄墨 */
.card-group.feature-cards > .card.light{
	background-color: #f8f9fa;
	border: solid 2px #ffffff;
}
/*  ＊＊＊の特長 の背景に白 */
.card-group.feature-cards > .card.white{
	background-color: #ffffff;
	border: solid 2px #ffffff;
}

/* 「配送のみのお客さま」の白いボタン */
.btn-outline-white {
  color: #424242;
	border-color: #424242;
	background-color: #FFF;
}
.btn-outline-white:hover {
    color: #424242;
    background-color: #CCC;
    border-color: #CCC;
}

/* ローカルナビと種類別・・・はこちらのボタン */
.localnavi .btn,
.btns .btn{
  font-weight: bold;
  display: block;
}

/* 種類別の・・のページはこちらで使う大きなボタン */
.btns .btn{
  padding: 3rem 1rem;
  font-size: 1.4rem;
}

/* 特大ボタン */
.btn-xl{
  font-size: 1.4rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-weight: bold;
}

/* ローカルナビ（ページ内目次）のスタイル定義 */
.localnavi{
  padding: .75rem;
  margin-bottom: 3rem;
}
.localnavi .btn{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  font-size: 1.2rem;
}
.localnavi .localnavi-list{
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
  list-style: none;
  padding: 0;
}

.localnavi-list .localnavi-item{
  list-style: none;
  padding: 0;
  max-width: 100%;
  flex: 0 0 100%;
  margin-bottom: 1rem;
  padding-left: 15px;
  padding-right: 15px;
}
/* .mb-3 */
@media (min-width: 992px){
.localnavi-list:not(.md-column) .localnavi-item{
  max-width: 50%;
  flex: 0 0 50%;
}
}

/* fontawesome */
.localnavi a::after,
.dl-spec-value::before{
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}
/* ローカルナビ（ページ内目次）につけるV */
.localnavi a::after{
  content: "\f107";
	margin-left: .75rem;
}


/* 「基本仕様」につける▲ */
.dl-spec-value::before{
	content: "\f04b";
	margin-right: .75rem;
}

/* サイズ選択 間口[mm]・奥行き[mm]・高さの色[mm] */
.size-chart-axis-w{color: #f7931e;}
.size-chart-axis-d{color: #603813;}
.size-chart-axis-h{color: #006837;}


/* スペック表記用スタイル */
.option-spec{
  list-style: none;
  display: flex;
  flex-direction:column;
  padding: 0;
}
.option-spec-item{
  list-style: none;
}
.option-spec-item > dl{
  display: flex;
  flex-direction: row;
  margin-bottom: 0;
  flex-wrap: nowrap;
}

@media screen and (min-width: 576px) and (max-width: 991.99999px){
  .option-spec-item.md-column > dl{
    flex-direction: inherit;
    flex-wrap: wrap;
  }
.option-spec-item.md-column > dl > dt.letter-2,
.option-spec-item.md-column > dl > dt.letter-3,
.option-spec-item.md-column > dl > dt.letter-4,
.option-spec-item.md-column > dl > dt.letter-5,
.option-spec-item.md-column > dl > dt.letter-6,
.option-spec-item.md-column > dl > dt.letter-7,
.option-spec-item.md-column > dl > dt.letter-8,
.option-spec-item.md-column > dl > dt.letter-9,
.option-spec-item.md-column > dl > dt.letter-10,
.option-spec-item.md-column > dl > dt.letter-11,
.option-spec-item.md-column > dl > dt.letter-12,
.option-spec-item.md-column > dl > dt.letter-13,
.option-spec-item.md-column > dl > dt.letter-14,
.option-spec-item.md-column > dl > dt.letter-15,
.option-spec-item.md-column > dl > dt.letter-16,
.option-spec-item.md-column > dl > dt.letter-17,
.option-spec-item.md-column > dl > dt.letter-18,
.option-spec-item.md-column > dl > dt.letter-19,
.option-spec-item.md-column > dl > dt.letter-20,
.option-spec-item.md-column > dl > dt.letter-21,
.option-spec-item.md-column > dl > dt.letter-22,
.option-spec-item.md-column > dl > dt.letter-23,
.option-spec-item.md-column > dl > dt.letter-24,
.option-spec-item.md-column > dl > dt.letter-25,
.option-spec-item.md-column > dl > dt.letter-26,
.option-spec-item.md-column > dl > dt.letter-27,
.option-spec-item.md-column > dl > dt.letter-28,
.option-spec-item.md-column > dl > dt.letter-29,
.option-spec-item.md-column > dl > dt.letter-30
{
    width: 100% !important;
    flex: 0 0 100% !important;
  }
.option-spec-item.md-column > dl > dt{
  text-align: left;
}

}

.option-spec-item > dl{
  flex-direction: row;
}
.option-spec-item > dl > dt{
  margin-right: .25rem;
  width: 2rem;
  flex: 0 0 2rem;
  text-align: right;
}

.option-spec-item > dl > dt.letter-2{  width: 3rem;  flex: 0 0 3rem;}
.option-spec-item > dl > dt.letter-3{  width: 4rem;  flex: 0 0 4rem;}
.option-spec-item > dl > dt.letter-4{  width: 5rem;  flex: 0 0 5rem;}
.option-spec-item > dl > dt.letter-5{  width: 6rem;  flex: 0 0 6rem;}
.option-spec-item > dl > dt.letter-6{  width: 7rem;  flex: 0 0 7rem;}
.option-spec-item > dl > dt.letter-7{  width: 8rem;  flex: 0 0 8rem;}
.option-spec-item > dl > dt.letter-8{  width: 9rem;  flex: 0 0 9rem;}
.option-spec-item > dl > dt.letter-9{  width: 10rem;  flex: 0 0 10rem;}
.option-spec-item > dl > dt.letter-10{  width: 11rem;  flex: 0 0 11rem;}
.option-spec-item > dl > dt.letter-11{  width: 12rem;  flex: 0 0 12rem;}
.option-spec-item > dl > dt.letter-12{  width: 13rem;  flex: 0 0 13rem;}
.option-spec-item > dl > dt.letter-13{  width: 14rem;  flex: 0 0 14rem;}
.option-spec-item > dl > dt.letter-14{  width: 15rem;  flex: 0 0 15rem;}
.option-spec-item > dl > dt.letter-15{  width: 16rem;  flex: 0 0 16rem;}
.option-spec-item > dl > dt.letter-16{  width: 17rem;  flex: 0 0 17rem;}
.option-spec-item > dl > dt.letter-17{  width: 18rem;  flex: 0 0 18rem;}
.option-spec-item > dl > dt.letter-18{  width: 19rem;  flex: 0 0 19rem;}
.option-spec-item > dl > dt.letter-19{  width: 20rem;  flex: 0 0 20rem;}
.option-spec-item > dl > dt.letter-20{  width: 21rem;  flex: 0 0 21rem;}
.option-spec-item > dl > dt.letter-21{  width: 22rem;  flex: 0 0 22rem;}
.option-spec-item > dl > dt.letter-22{  width: 23rem;  flex: 0 0 23rem;}
.option-spec-item > dl > dt.letter-23{  width: 24rem;  flex: 0 0 24rem;}
.option-spec-item > dl > dt.letter-24{  width: 25rem;  flex: 0 0 25rem;}
.option-spec-item > dl > dt.letter-25{  width: 26rem;  flex: 0 0 26rem;}
.option-spec-item > dl > dt.letter-26{  width: 27rem;  flex: 0 0 27rem;}
.option-spec-item > dl > dt.letter-27{  width: 28rem;  flex: 0 0 28rem;}
.option-spec-item > dl > dt.letter-28{  width: 29rem;  flex: 0 0 29rem;}
.option-spec-item > dl > dt.letter-29{  width: 30rem;  flex: 0 0 30rem;}
.option-spec-item > dl > dt.letter-30{  width: 31rem;  flex: 0 0 31rem;}

.option-spec-item > dl > dt::after{
  display: inline;
  content: "：";
}
.option-spec-item > dl dd{
  flex-grow: 1;
  margin-bottom: 0;
}

.ruby rt{
margin-top: -6px;
margin-bottom: -1px;
}

/* イナバ物置のトップ、特長の表示 例：「らくらく水平0～32mm」 */

.inaba-heading{
  border-bottom-width: 3px;
  border-bottom-style: solid;
  margin-bottom: 3rem;
}
.feature-badges{
  display: flex;
  list-style: none;
  flex-wrap: wrap;
}
.feature-badges .feature-badges-item{
  background-color: #298cd6;
  padding: .5rem;
  margin-right: .5rem;
  margin-left: .5rem;
  margin-bottom: 1rem;
  border-radius: .5rem;
  height: 60px;
  flex: 0 0 70px;
  max-width: 70px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.feature-badges-item .feature-badge-text{
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
  color: white;
}


/* POINT {数字} の丸バッジ */

.badge-point-number{
  position: relative;
  display: inline-block;
  color: #333;
  font-size: 30px;
  height: 48px;
  line-height: .3;
  text-align: center;
  padding: 1.5rem;
  background-color: #e6e5e4;
  border-radius: 2rem;
  font-weight: bold;
  margin-right: 1rem;
}
.badge-point-number::before{
  content: "POINT";
  position: absolute;
  top: 7px;
  font-size: 10px;
  left: 50%;
  transform: translateX(-50%);
}


/* シャッター物置： 地面のタイプを選ぶの「土間」「床」の文字を大きくする */
.choice-roof-label .type-letter{
  font-size: 2rem; font-weight: 800; margin-left: .5rem;
}

/* 特長のラベル：数字 */
.feature-num {
  margin-right: .25rem;
  border-radius: 0;
  color: #fff;
  background-color: #424242;
  display: inline-block;
  padding: .25em .8em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0;
}

/* イナバ物置　ドアカラー */

.inaba-door-color .bg-cg{background-color: #5f6269; color: white;}
.inaba-door-color .bg-jg{background-color: #bdc6a7; color: white;}
.inaba-door-color .bg-ps{background-color: #bebfc1; color: white;}
.inaba-door-color .bg-eb{background-color: #5d554a; color: white;}
.inaba-door-color .bg-gm{background-color: #727272; color: white;}
.inaba-door-color .bg-cs{background-color: #d9dadc}


/* ヨド物置 ドアカラー */
.yodo-door-color .bg-ss{background-color: #c6c8c7; color: white;}
.yodo-door-color .bg-pw{background-color: #eaeceb;}
.yodo-door-color .bg-sm{background-color: #2c303b; color: white;}
.yodo-door-color .bg-eg{background-color: #a0c1ac; color: white;}
.yodo-door-color .bg-mr{background-color: #c3adaf; color: white;}
.yodo-door-color .bg-dw{background-color: #554e44; color: white;}
.yodo-door-color .bg-cb{background-color: #d8d4d3;}
.yodo-door-color .bg-db{background-color: #725849; color: white;}