@charset "utf-8";
/* CSS Document */
/* レスポンシブル設定は768px～ 1em = 16px*/


h1{font-size: 2rem;}
h2{font-size: 1.75rem; padding: .5em 0 .5em .5em; background: #EAEAEA; 
	border-top: 2px solid #000; border-bottom: 1px solid rgba(0,0,0,0.6); margin: 2em auto 30px;}
h3{font-size: 1.5rem; }

@media screen and (max-width: 1030px) {
	h1{font-size: 1.75rem;}
	h2{font-size: 1.55rem;}
	h3{font-size: 1.3rem;}
}


/* カダイトッパー Collection 一覧 */
.page_title{}
.page_title{background: #333333; width: 100%; padding: 1.5em 0;}
.page_title h1{color: #FFF; font-size: 2rem; font-weight: 700; line-height: 1.4em; text-align: left;
max-width: 1200px; width:calc(100% - 40px); margin: auto; }
.page_title h1 small{display: block; font-size: 16px; line-height: 1; padding-top: 16px;}

/* カダイトッパー Collection カテゴリ一覧 */
.page_title{}
.page_title{background: #333333; width: 100%; padding: 1.5em 0;}
.page_title p{color: #FFF; font-size: 2rem; font-weight: 700; line-height: 1.4em; text-align: left;
max-width: 1200px; width:calc(100% - 40px); margin: auto; }
.page_title p small{display: block; font-size: 16px; line-height: 1; padding-top: 16px;}



.lst_area{display: flex; flex-wrap: wrap; width: 100%;}
.lst_area .lst_area_item{width: calc(80% - 50px); margin-right: 50px;}
.lst_area .lst_area_item h1{margin-bottom: 1em;}

.lst_area #nav_menu_right_outline{width: calc(20% - 0px); }
.lst_area #nav_menu_right_outline #nav_menu_right{position: sticky; top:120px; margin-bottom: 50px;}

@media screen and (max-width: 768px) {
	.lst_area .lst_area_item{width: calc(100% - 0px); margin-right: auto;}
	.lst_area #nav_menu_right_outline{width: calc(100% - 0px);}
}



.lst_area .lst_area_item .changecase_lst{width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; margin-bottom: 50px;}
.lst_area .lst_area_item .changecase_lst .changecase_lst_item{width: calc(100% / 3 - 20px); padding-bottom: 65px; position: relative; background: #FFF; margin-bottom: 30px; margin-right: 30px;}

.lst_area .lst_area_item .changecase_lst .changecase_lst_item:nth-child(3n){margin-right: 0;}

@media screen and (max-width: 1100px) {
	.lst_area .lst_area_item .changecase_lst .changecase_lst_item{width: calc(100% / 2 - 10px); margin-right: 0;}
.lst_area .lst_area_item .changecase_lst{justify-content: space-between;}
	
}

@media screen and (max-width: 575px) {
	.lst_area .lst_area_item .changecase_lst .changecase_lst_item{width: calc(100% / 1 - 0px); padding-bottom: 65px; position: relative;}
}

.lst_area .lst_area_item .changecase_lst .changecase_lst_item a{color: #333;}
.lst_area .lst_area_item .changecase_lst .changecase_lst_item a:hover{text-decoration: none;}
.lst_area .lst_area_item .changecase_lst .changecase_lst_item h3{width: 100%; height: 180px; }
.lst_area .lst_area_item .changecase_lst .changecase_lst_item h3 + p{width: calc(100% - 40px); padding: 20px 20px; font-size: 1.125rem; line-height: 1.4; font-weight: 700; margin-bottom: 0; height: 4em;}

.lst_area .lst_area_item .changecase_lst .changecase_lst_item h3 img{width: 100%; height: 100%; object-fit: cover; border-radius: 6px 6px 0 0;}

@media screen and (max-width: 1100px) {
	.lst_area .lst_area_item .changecase_lst .changecase_lst_item h3{width: 100%; height: 250px; }
}
@media screen and (max-width: 768px) {
	.lst_area .lst_area_item .changecase_lst .changecase_lst_item h3 + p{height: auto;}
}


.lst_area .lst_area_item .changecase_lst .changecase_lst_item .category_detail{display: block; width: calc(100% - 40px); margin: auto 20px; background-color: orange; color: #FFF; font-weight: 700; margin-bottom: 0; text-align: center;}
.lst_area .lst_area_item .changecase_lst .changecase_lst_item .category{display: block; width: calc(100% - 40px); margin: auto 20px 20px; text-align: center; line-height: 1.2em;}
.lst_area .lst_area_item .changecase_lst .changecase_lst_item .trouble{display: block; width: calc(100% - 40px); margin: auto 20px; }
.lst_area .lst_area_item .changecase_lst .changecase_lst_item .trouble dt{display:inline-block; background-color: #5996c7; color: #FFF; text-align: center; font-size: 1rem; font-weight: 700; padding: 0px 10px; margin-bottom: 6px;}
.lst_area .lst_area_item .changecase_lst .changecase_lst_item .trouble dd{line-height: 1.6em;}

.lst_area .lst_area_item .changecase_lst .changecase_lst_item .link_detail{position: absolute; bottom: 10px; right: 10px; display: inline-block; font-size: 12px; padding: .25rem .5rem; background: #000; color: #FFF; line-height: 1.5;}


.lst_area .lst_area_item nav{margin: 50px auto;}
.lst_area .lst_area_item nav ul{width: 100%; display: flex; justify-content: center;}
.lst_area .lst_area_item nav ul li{width: 32px; height: 35px; border: 1px solid #ebebeb; border-left: 0; display: flex; justify-content: center; align-items: center; background: #000; color: #FFF;}
.lst_area .lst_area_item nav ul li:first-child{border-left: 1px solid #ebebeb; border-radius: 6px 0 0 6px;}
.lst_area .lst_area_item nav ul li:last-child{border-radius: 0 6px 6px 0;}

.lst_area .lst_area_item nav ul li a{background: #f9f9f9; width: 100%; height: 100%; color: #222; display: flex; justify-content: center; align-items: center; }
.lst_area .lst_area_item nav ul li a:hover{background: #efefef; cursor: pointer;}