@charset "utf-8";
/* CSS Document */
.width90 {
    width: 90%;
	margin: 0 auto;
}
.max_w1200{max-width: 1200px;}
a {text-decoration: none;}
@media screen and (max-width: 750px){
	.width90 {width: 100%;}
	.detail_page {font-size: 16px;}
}

/****基本設定****/
.detail_page .bg_color{background-color: #fdffda;}
.detail_page .contents_box{
	padding: 100px 8% 93px;
	border-radius: 30px;
	position: relative;
	text-align: left;
	margin-bottom: 65px;
}
@media screen and (max-width: 1120px){
	.detail_page .contents_box{
		padding: 100px 4% 50px;
	}
}
@media screen and (max-width: 750px){
	.detail_page .contents_box{
		padding: 100px 20px 50px;
		border-radius: 20px;
		margin-bottom: 50px;
	}
}


/****タグのデザイン****/
.detail_page .card_tag_design{
	padding: 15px 33px;
	background-color: #e9ebbe;
	border-radius: 0px 50px 50px 0px;
	display: flex;
	align-items: center;
	left: 0;
	margin-right: 24px;
}
.detail_page .card_tag_design_notice{background-color: #2aba6f;}
.detail_page .card_tag_design_feature{background-color: #eb739c;}
.detail_page .card_tag_design_site{background-color: #82dfd5;}
.detail_page .card_tag_design_other{background-color: #e9ebbe;}

.detail_page .category{
	position: absolute;
	display: flex;
	text-align: left;
	left: 0;
	top: 40px;
	align-items: center;
}
@media screen and (max-width: 750px){
	.detail_page .card_tag_design{margin-right: 13px;}
	.detail_page .category span{font-size: 18px;}
}

/****各見出し****/
.detail_page .h3_ttl,.topic_detail_content h3{
	color: #000000;
	margin-bottom: 15px;
	font-size: 40px;
}

.detail_page .h4_ttl,.topic_detail_content h4,.h5_ttl,.topic_detail_content h5{
	margin: 50px 0 20px;
	color: #e94119;
	font-size: 26px;
}

.detail_page .h5_ttl,.topic_detail_content h5{font-size: 20px;}
.detail_page .h5_ttl::before{
	content: "●";
	margin-right: 10px;
}
@media screen and (max-width: 1120px){
	.detail_page .h3_ttl,.topic_detail_content h3{
		font-size: 30px;
	}
	.detail_page .h4_ttl,.topic_detail_content h4,.h5_ttl,.topic_detail_content h5{
		margin: 30px 0 15px;
		font-size: 22px;
	}
}
@media screen and (max-width: 750px){
	.detail_page .h3_ttl,.topic_detail_content h3{
		margin-bottom: 20px;
		font-size: 20px;
	}
		.detail_page .h4_ttl,.topic_detail_content h4,.h5_ttl,.topic_detail_content h5{
		margin: 20px 0 15px;
		font-size: 18px;
	}
	.detail_page .h5_ttl,.topic_detail_content h5{font-size: 17px;}
}


/****イメージの設定****/
.detail_page .topic_detail_content img{
	display: block;
	width: 100%;
}

.detail_page .topic_detail_content .main_img{
	height: 650px;
    object-fit: contain;
}

.detail_page .topic_detail_content .img_yoko,.topic_detail_content .img_tate{margin: 30px auto 70px auto;}
.detail_page .topic_detail_content .img_yoko{
	max-width: 800px;
	max-height: 450px;
}
.detail_page .topic_detail_content .img_tate{
	max-width: 425px;
	max-height: 600px;
}
@media screen and (max-width: 750px){
	.detail_page .topic_detail_content .main_img{height: 350px;}
	
	.detail_page .topic_detail_content .img_yoko,.topic_detail_content .img_tate{margin: 25px auto 40px auto;}
}


/****横並び記事****/
.detail_page .column1,.column2{
	display: flex;
	justify-content: space-between;
	column-gap: 40px;
	row-gap: 40px;
	align-items: flex-start;
}
.detail_page .topic_detail_content .column_ch{width: 48%;}
@media screen and (max-width: 750px){
	.detail_page .column1{
		flex-direction: column;
		row-gap: 15px;
	}
	.detail_page .column1 .column_ch{width: 100%;}
	.detail_page .column2{
		flex-direction: column;
        row-gap: 20px;
		margin: 20px 0px 40px
	}
	.detail_page .column2 .column_ch{width: 100%;}
}



/****ol、ulリスト****/
.detail_page .topic_detail_content ol,
.detail_page .topic_detail_content ul {
	counter-reset: item;
	padding-left: 0;
	margin-bottom: 40px;
}
.detail_page .topic_detail_content ol li,
.detail_page .topic_detail_content ul li {
	list-style: none;
	counter-increment: item;
	padding-left: 1.2em; 
	position: relative;
	margin-bottom: 6px;
}
.detail_page .topic_detail_content ul li::before {
    content: "・";
    color: #e94119;
    position: absolute;
    left: -10px;   
    top: -13px;
	font-size: 30px;
}
.detail_page .topic_detail_content ol li::before {
    content: counter(item) ".";
    position: absolute;
    left: 0;   
    top: 0;
	color: #e94119;
	font-weight: bold;
}
@media screen and (max-width: 750px){
	.detail_page .topic_detail_content ol,
	.detail_page .topic_detail_content ul 
	{margin-bottom: 25px;}
}



/****tableリスト****/
.detail_page table{
	box-sizing: border-box;
	border-collapse: collapse;
	margin-top: 50px;
	width: 100%;
}
.detail_page tr{border-bottom: solid 1px #000000;}
.detail_page th{
	color: #ff6a00;
	background-color: #fff4ba;
	padding: 20px;
	width: 180px;
	vertical-align: middle;
}
.detail_page td{
	padding: 20px;
	background-color: #FFFFFF;
}
@media screen and (max-width: 750px){
	.detail_page table{margin-top: 30px;border-top: solid 1px #071533;}
	.detail_page th{
		padding: 15px;
		width: 100%;
		display: block;
	}
	.detail_page td{
		padding: 15px;
		display: block;
	}
}


/****もどるボタン****/
.btn{
	width: 370px;
	height: 80px;
	vertical-align: middle;
	color: #000;
	background-color: #fff;
	border-radius: 50px;
	margin: 0 auto;
    display: block;
	position: relative;
	border: 3px solid #000;
	transition: .3s ease-in-out;
	font-size: 30px;
	padding: 0 0 5px 33px;
}

.btn:hover{transform: scale(1.1,1.1);}
.btn::after{
	color: #fee300;
	background-color: #000;
	border-radius: 50px;
	position: absolute;
	width: 78px;
	line-height: 78px;
	top: -1px;
    font-size: 22px;
}
.btn_left::after{
	content: "◀";
    left: -1px;
}
@media screen and (max-width: 750px){
	.btn{
		width: 185px;
		height: 51px;
		font-size: 17px;
		padding: 0 0 5px 33px;
	}
	.btn::after{
		width: 47px;
        line-height: 47px;
		top: -1px;
		font-size: 14px;
	}
	.btn_left::after{
		content: "◀";
		left: -1px;
	}
}