@charset "utf-8";
/*------------------------  case  ------------------------*/


/*-----  title  -----*/
#case .title_content { padding: 0 5%; }
#case .title_content .title_block { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 150px; font-weight: 700; line-height: 1.3; text-align: center; z-index: 101; }
#case .title_content .title { font-size: 32px; }


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

 #case .title_content {}
 #case .title_content .title_block { height: 84px; }
 #case .title_content .title { font-size: 24px; }

}



/*-----  case index  -----*/
#case .case_idx { padding: 30px 5% 80px; border-top: 1px solid #e6e6e6; }

#case .case_idx .case_block { display: flex; justify-content: space-between; flex-direction: row; padding: 50px 0 40px; }
#case .case_idx .case_block:nth-of-type(2n) { flex-direction: row-reverse; }
#case .case_idx .case_block .img_block { flex-basis: 47%; }
#case .case_idx .case_block .txt_block { flex-basis: 47%; }
#case .case_idx .case_block .txt_block .cat { margin: 0 0 14px; font-weight: 700; font-size: 26px; line-height: 1.3; }
#case .case_idx .case_block .txt_block .txt { margin: 0 0 20px; font-size: 15px; line-height: 1.6; }
#case .case_idx .btn_block { display: flex; justify-content: center; margin: 50px auto 0; padding: 50px 0 0; border-top: 1px solid #e6e6e6; }
#case .case_idx .btn_block .case_btn { margin: 0 15px; width: 200px; }

#case .case_group { position: relative; padding: 20px 0 34px; border-top: 1px solid #e6e6e6; font-weight: 500; font-size: 16px; line-height: 1.4; }
#case .case_group .group {}
#case .case_group .group .list { padding: 5px 0; }
#case .case_group .group .list .link { position: relative; padding: 0 0 0 24px; }
#case .case_group .group .list .link::before { content: ''; position: absolute; top: 4px; left: 0; width: 16px; height: 16px; background: #a00e14; border-radius: 2px; }
#case .case_group .group .list .link::after { content: ''; position: absolute; top: 9px; left: 4px; width: 6px; height: 6px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); }
#case .case_group .label { position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; padding: 6px 0 6px; width: 100%; font-weight: 700; font-size: 14px; color: #a00e14; white-space: nowrap; text-align: center; cursor: pointer; }
#case .case_group .label::before { content: 'もっと見る';  }
#case .case_group .label.open::before { content: '閉じる'; }
#case .case_group .label:hover { opacity: .7; }
#case .case_group .label .icon_label { position: relative; margin: 0 0 0 5px; width: 11px; height: 11px; }
#case .case_group .label .icon_label .bar { display: block; position: absolute; width: 11px; height: 1px ; left: 0; background: #a00e14; transition: .3s; }
#case .case_group .label .icon_label .bar:nth-of-type(1) { top: 5px; }
#case .case_group .label .icon_label .bar:nth-of-type(2) { top: 5px; transform: rotate(90deg); }
#case .case_group .label.open .icon_label .bar:nth-of-type(1) {}
#case .case_group .label.open .icon_label .bar:nth-of-type(2) { transform: rotate(0); }
#case .case_group .more { display: none; }


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

 #case .case_idx { padding: 10px 5% 40px; }

 #case .case_idx .case_block { display: block; padding: 30px 0 0; }
 #case .case_idx .case_block .img_block { margin: 0 0 18px; }
 #case .case_idx .case_block .txt_block .cat { margin: 0 0 10px; font-size: 20px; }
 #case .case_idx .case_block .txt_block .txt { margin: 0 0 18px; font-size: 14px; }
 #case .case_idx .btn_block { margin: 20px auto 0; padding: 30px 0 0; }
 #case .case_idx .btn_block .case_btn { margin: 0 6px; width: 180px; }

 #case .case_group { padding: 10px 0 34px; font-size: 15px; }
 #case .case_group .group .list .link { padding: 0 0 0 21px; }
 #case .case_group .group .list .link::before { width: 15px; height: 15px; }
 #case .case_group .group .list .link::after { width: 5px; height: 5px; }


}



/*-----  case detail  -----*/
#case .case_detail { padding: 70px 5% 70px; border-top: 1px solid #e6e6e6; }
#case .case_detail .name_block { margin: 0 0 50px; padding: 0 0 30px; border-bottom: 1px solid #e6e6e6; }
#case .case_detail .name_block .cat { margin: 0 0 4px; font-weight: 700; font-size: 20px; line-height: 1.3; color: #a00e14; }
#case .case_detail .name_block .title { font-weight: 700; font-size: 26px; line-height: 1.4; }
#case .case_detail .case { display: flex; flex-direction: row-reverse; padding: 0 0 80px; border-bottom: 1px solid #e6e6e6; }

#case .case_detail .case_slide { padding: 0 0 0 60px; width: 44%; }
#case .case_detail .case_slide .case_slide_block { position: relative; padding: 0 40px; }
#case .case_detail .case_slide .swiper-button-prev,
#case .case_detail .case_slide .swiper-rtl .swiper-button-next { left: 8px; color: #a00e14; }
#case .case_detail .case_slide .swiper-button-next,
#case .case_detail .case_slide .swiper-rtl .swiper-button-prev { right: 8px; color: #a00e14; }
#case .case_detail .case_slide .slider-thumbnail { padding: 30px 10px 0; }
#case .case_detail .case_slide .slider-thumbnail .swiper-wrapper { flex-wrap: wrap; justify-content: center; }
#case .case_detail .case_slide .slider-thumbnail .swiper-slide { flex-basis: calc(100% / 5); padding: 4px; }
#case .case_detail .case_slide .slider-thumbnail img { cursor: pointer; }

#case .case_detail .case_txt { width: 56%; }
#case .case_detail .case_txt .table {}
#case .case_detail .case_txt .table .item { display: flex; padding: 0 0 22px; font-size: 15px; line-height: 1.5; }
#case .case_detail .case_txt .table .item:last-of-type { padding: 0; }
#case .case_detail .case_txt .table .name { flex-basis: 18%; font-weight: 500; }
#case .case_detail .case_txt .table .data { flex: 1; }
#case .case_detail .case_txt .table .pro { font-weight: 500; }
#case .case_detail .case_txt .table .pro:not(:last-of-type) { margin: 0 0 5px; }
#case .case_detail .case_txt .table .pro .link { position: relative; padding: 0 10px 0 0; color: #a00e14; }
#case .case_detail .case_txt .table .pro .link::after { content: ''; position: absolute; top: 50%; right: 0; width: 6px; height: 6px; border-top: 1px solid #a00e14; border-right: 1px solid #a00e14; transform: translate(0, -50%) rotate(45deg); }
#case .case_detail .case_txt .table .pro .link .ss { font-weight: 400; font-size: 13px; }

#case .case_detail .case_idx_btn { margin: 40px auto 0; width: 200px; }


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

 #case .case_detail { padding: 30px 5% 40px; }
 #case .case_detail .name_block { margin: 0 0 35px; padding: 0 0 16px; border-bottom: 1px solid #e6e6e6; }
 #case .case_detail .name_block .cat { margin: 0 0 2px; font-size: 16px; }
 #case .case_detail .name_block .name { font-size: 20px; }
 #case .case_detail .case { display: block; padding: 0 0 40px; }

 #case .case_detail .case_slide { padding: 0 0 35px; width: auto; }
 #case .case_detail .case_slide .slider-thumbnail { padding: 24px 10px 0; }

 #case .case_detail .case_txt { width: auto; }
 #case .case_detail .case_txt .table .item { display: block; padding: 0 0 20px; font-size: 14px; }
 #case .case_detail .case_txt .table .item:last-of-type { padding: 0; }
 #case .case_detail .case_txt .table .data { padding: 3px 0 0; }
 #case .case_detail .case_txt .table .pro { padding: 2px 0; }
 #case .case_detail .case_txt .table .pro:not(:last-of-type) { margin: 0; }

 #case .case_detail .case_idx_btn { margin: 26px auto 0; width: 180px; }

}