/****************************** alert ******************************/

.alert-secondary {
    color: #383d41;
    background-color: #f5f5f5;
    border-color: #d6d8db;
}


.alert-primary {
    color: #333;
    background-color: #eaf4fc;
    border-color: #d6d8db;
}
.alert-warning {
    color: #333;
    background-color: #fffaf0;
    border-color: #d6d8db;
}

.alert {
    position: relative;
    padding: 0.25rem 1.25rem;
	padding-top: 2rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}


/****************************** CMS一覧 ******************************/

@media screen and (min-width: 48em) {
  body.detail {
    margin-top: 145px!important;
  }
}


/* CMS用 */
#case h2 {
    padding: 0 2rem .5rem 2rem;
    margin: 1rem auto 1.5rem auto;
    border-bottom: 3px solid #0095d9;
}

.btn-toolbar .btn-group{
  margin: 0 5px 5px 0;
}

/* シンプルな矩形ボタン（背景 #1c305c） */
.btn-filter {
  background-color: #1c305c;
  border-color: #1c305c;
  color: #fff;
  border-radius: 0;            /* 角丸にしたければここを調整 */
  padding: 0.25rem .5rem;      /* お好みで微調整 */
  font-size: 1rem;
}

.btn-filter:hover,
.btn-filter:focus {
  background-color: #2a4382;   /* hover時 少しだけ明るく */
  border-color: #2a4382;
  color: #fff;
}

/* 先頭「全て表示」をデフォルトでハイライト */
.btn-filter.active {
  background-color: #f39800;   /* ハイライト用カラー（お好みで変更可） */
  border-color: #f39800;
  color: #fff;
}

/* リンクのデフォルト装飾を消す */
.case-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.case-card-link:hover {
  text-decoration: none;
  color: inherit;
}

/* カード */
.case-card {
  display: flex;
    flex-direction: column;
    height: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 0;
  transition: all 0.25s ease;
  text-align: center; /* ← 全テキスト中央寄せ */
}

.case-card-link {
  display: block;
}
/* hover時：影 + 少しだけ浮く */
.case-card-link:hover .case-card {
  box-shadow: 0 6px 15px rgba(0,0,0,0.18);
  transform: translateY(-3px);
}

/* カード本文を下寄せに整列 */
.case-card .card-body {
  padding: 10px;
  margin-top: auto;
}
.case-card .card-body p {
  line-height: 1.1;
}
/* タイトル帯 */
.case-card-title {
  background-color: #1c305c;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  text-align: center; /* 念のため指定 */
}

/* 画像比率固定（3:4 横長） */
.case-card-img-wrapper {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.case-card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 文字系 */
.case-card-address,
.case-card-name,
.case-card-date {
  text-align: center; /* 念のため明示 */
}
.case-card-address,
.case-card-name{
  font-size: 0.9rem;
  font-weight: 600;
}
.case-card-detail {
  font-size: 0.9rem;
  text-align: left;
}

@media (min-width: 48em) {
  .btn-toolbar .btn-group {
    width: 150px;
    margin: 0 15px 15px 0;
  }
  .btn-filter {
    padding: 0.5rem 1.2rem;
    font-size: 1.0rem;
  }


  .case-card-title {
    font-size: 1.1rem;
    padding: 0.5rem 0.75rem;
  }
  .case-card-detail {
    font-size: 1rem;
  }
  .case-card-address,
  .case-card-name{
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }
}



/****************************** CMS詳細 ******************************/

#case .case_category {
  font-size: 1.2rem;
  color: white;
  font-weight: bold;
  padding: 0.5rem 1.8rem;
  margin-bottom: 2rem;
  background-color: #1c305c;
  display: inline-block;
}




#case #sekou {
  padding: 15px;
  background: url("/assets/img/case_wall.jpg") repeat 0 0;
}

#case #sekou #roof h4 {
  background-color: #22b573;
}
#case #sekou #roof h5 {
  color: #22b573;
}
#case #sekou #roof h5 {
  border-color: #22b573;
}


#case .main-heading {
  font-size: 1.5rem;
  letter-spacing: 0.5rem;
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  margin: 0;
  border-radius: 10px;
}
#case .sub-heading {
  font-size: 1rem;
  margin: 0 0 10px;
  color: #007bbb;
  font-weight: bold;
  padding: 3px 12px;
  background-color: #FFF;
  border: #007bbb solid 2px;
  border-radius: 8px;
}

/* 矢印＋画像1のラッパー */
#case .sub-image-wrapper {
  position: relative;
  display: inline-block; /* 画像にフィットさせる */
}

/* 画像1のすぐ上に矢印を配置（小見出しにかぶるが前面） */
#case .arrow-img {
  position: absolute;
  width: 50px;
  height: 50px;
  bottom: 100%;        /* 画像ブロックのちょうど上端 */
  right: -20px;            /* 画像右端に揃える */
  margin-bottom: -10px;/* “くっつける”ために少し食い込ませる */
  z-index: 10;         /* 小見出しより前面に表示 */
}

#case .sub-image{
  border: 5px solid white;
  margin-left: 0;
}




/* 画像共通 */
#case .sub-image img {
  display: block;
  width: 100%;
  height: auto;
}

#case .main-heading, #case .sub-heading {
  align-self: flex-start;  /* ← これだけでフル幅にならない */
  display: inline-block;   /* お好みで */
}


@media (min-width: 48em) {
#case #sekou {
    padding: 40px;
  }
#case .main-heading {
    font-size: 3rem;
    letter-spacing: 1rem;
    padding: 1rem 1rem 1rem 2rem;
    border-radius: 20px;
  }

  #case .sub-heading {
    font-size: 2rem;
    margin: 0 0 20px 0;
    padding: 6px 24px;
    border-radius: 16px;
  }
    #case .col_after .sub-heading {
      margin: 0 0 20px 40px;
    }
  #case .arrow-img {
    width: 130px;
    height: 130px;
    bottom: 100%;        /* 画像ブロックのちょうど上端 */
    right: -60px;            /* 画像右端に揃える */
    margin-bottom: -5px;/* “くっつける”ために少し食い込ませる */
  }
  #case .sub-image {
    border: 10px solid white;
  }
    #case .col_after .sub-image {
      margin-left: 40px;
      margin-bottom: 5px;
    }

  #cs_index nav.nav-initial {
    overflow: visible !important;
    height: auto !important;
  }
}






/* アクティブページの背景色・文字色を上書き */
#paging-wrap .page-item.active .page-link {
  background-color: #1c305c !important; /* 好きな色 */
  border-color: #1c305c !important;
  color: #fff !important;
}

/* 通常のページ番号 */
#paging-wrap .page-link {
  color: #1c305c !important; /* 好きな色 */
  border-color: #ddd; /* 任意 */
}

/* ホバー */
#paging-wrap .page-link:hover {
  background-color: #1c305c !important;
  border-color: #1c305c !important;
  color: #fff !important;
}
#paging-wrap .disabled {
  display: none;
}

/* 施工事例一覧ボタン */
.btn-case-list {
  background-color: #1c305c;
  color: #fff;
  padding: 0.75rem 2.5rem;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 10px;
  text-decoration: none;
  display: inline-block;
}

.btn-case-list:hover {
  background-color: #162648; /* 少し濃くしてホバー感 */
  color: #fff;
  text-decoration: none;
}


div#cs_detail .table tr td {
  font-size: 0.9rem;
  padding: 0 0;
  padding-top: 1rem;
}

        tbody {
            display: flex;
            flex-direction: column;
        }

        tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }

        #cs_detail_1009 {
            order: 1;
        }

        #cs_detail_1008 {
            order: 2;
        }

div#cs_detail .table tr#cs_detail_1003 td,
div#cs_detail .table tr#cs_detail_1004 td,
div#cs_detail .table tr#cs_detail_1006 td,
div#cs_detail .table tr#cs_detail_1007 td,
div#cs_detail .table tr#cs_detail_1009 td {
  padding-top: 0;
  border: none;
}

@media (min-width: 48em) {
  div#cs_detail .table tr td {
    font-size: 1.1rem;
    padding: 0 1rem;
    padding-top: 1rem;
  }
}