/* ******************************************************************
 *	File name		: article.css
 *	Summary			: css base
 * ******************************************************************
 */

/* -----------------------------------------------------------------
   article base
----------------------------------------------------------------- */

.page_title{
	width:860px;
	max-width:100%;
	margin:0 auto 50px;
	padding:20px 20px 0;
	}
	.page_title p{
		font-size:1.5vw;
	}
	.page_title h2{
		font-size:2.3vw !important;
		line-height:3.0vw;
}

section{
	padding-bottom:70px !important;
}

#bdid_works_detail #main_contents > section{
	padding-bottom:calc(10vw + 70px) !important;
}

#bdid_news_detail footer::before{
	background:url(../../image/base/ft_bg.webp) no-repeat 0 0 #F2F2F2;
	background-size:cover;
}

/* --- responsive --- */
@media screen and (max-width:1100px){
	.page_title{
		margin:0 auto 20px;
	}
	.page_title p{
		font-size:1.3rem !important;
	}
	.page_title h2{
		font-size:2.0rem !important;
		line-height:1.5;
	}
}
@media screen and (max-width:640px){
	.page_title p{
		font-size:1.1rem !important;
	}
	.page_title h2{
		font-size:1.5rem !important;
	}
}
@media screen and (max-width:480px){
	.page_title p{
		font-size:1.0rem !important;
	}
	.page_title h2{
		font-size:1.3rem !important;
	}
}

/* -----------------------------------------------------------------
   article
----------------------------------------------------------------- */

article{
	position:relative;
	width:900px;
	max-width:100%;
	margin:0 auto;
	padding:40px 50px;
	background:#FFF;
	border-radius:30px;
}
@media screen and (max-width:767px){
	section:has(article){
		padding-top:30px;
	}
	article{
		padding:20px 20px;
	}
	article p{
		font-size:0.87rem;
		line-height:1.75;
	}
}

article figure{
	margin:0 0 40px;
}
article figure.flame img{
	border:1px solid rgba(0,0,0,0.5);
}

article .gallery{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	flex-wrap:wrap;
	margin:0 0 20px;
}
article .gallery figure{
	width:48%;
	margin:0 0 30px;
}
/* --- responsive --- */
@media screen and (max-width:767px){
	article .gallery figure{
		width:100%;
		margin:0 0 30px;
	}
}

/* -----------------------------------------------------------------
   prew_next_btn
----------------------------------------------------------------- */

#prew_next_btn{
	position:relative;
	width:260px;
	margin:80px auto 0;
}
#prew_next_btn #pnb_prew{
	position:absolute;
	top:0px;
	left:0px;
}
#prew_next_btn #pnb_back{
	font-size:20px;
	color:var(--base-color);
}
#prew_next_btn #pnb_next{
	position:absolute;
	top:0px;
	right:0px;
}

#prew_next_btn #pnb_prew,
#prew_next_btn #pnb_next{
	width:50px;
	height:50px;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;
	overflow:hidden;
	}
	#prew_next_btn #pnb_prew a,
	#prew_next_btn #pnb_next a{
		display:block;
		position:relative;
		width:100%;
		height:100%;
		text-indent:100%;
		white-space:nowrap;
		background:var(--base-color);
		border:1px solid var(--base-color);
		-moz-border-radius:50%;
		-webkit-border-radius:50%;
		border-radius:50%;
		transition-duration:0.5s;
		overflow:hidden;
		}
		#prew_next_btn #pnb_prew a:hover,
		#prew_next_btn #pnb_next a:hover{
			background:#FFF;
		}
		#prew_next_btn #pnb_prew a::before,
		#prew_next_btn #pnb_next a::before,
		#prew_next_btn #pnb_prew a::after,
		#prew_next_btn #pnb_next a::after{
			content:" ";
			position:absolute;
			transition-duration:0.5s;
		}
		#prew_next_btn #pnb_prew a::before,
		#prew_next_btn #pnb_next a::before{
			top:23px;
			left:15px;
			width:17px;
			height:2px;
			background:#FFF;
		}
		#prew_next_btn #pnb_prew a::after,
		#prew_next_btn #pnb_next a::after{
			top:18px;
			left:20px;
			width:10px;
			height:10px;
			border-top:2px solid #FFF;
			border-right:2px solid #FFF;
			transform:rotate(45deg);
		}
		#prew_next_btn #pnb_prew a{
			transform:rotate(180deg);
		}
		#prew_next_btn #pnb_prew a:hover::before,
		#prew_next_btn #pnb_next a:hover::before{
			background:var(--base-color);
		}
		#prew_next_btn #pnb_prew a:hover::after,
		#prew_next_btn #pnb_next a:hover::after{
			border-top:1px solid var(--base-color);
			border-right:1px solid var(--base-color);
}

#prew_next_btn #pnb_back a{
	display:-webkit-flex;
	display:flex;
	justify-content:center;
	align-items:center;
	width:120px;
	height:50px;
	margin:0 auto;
	font-weight:500;
	color:var(--base-color);
}

/* -----------------------------------------------------------------
   works
----------------------------------------------------------------- */

.key_image{
	position:relative;
	top:-40px;
	left:-50px;
	width:calc(100% + 100px);
	margin:0px;
	background-color:#EBECF2;
	border-radius:30px 30px 0 0;
	overflow:hidden;
}
/* --- responsive --- */
@media screen and (max-width:767px){
	.key_image{
		top:-20px;
		left:-20px;
		width:calc(100% + 40px);
	}
}

/* works_attr */
.works_attr{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 20px;
	margin-bottom:40px;
	}
	.works_attr p{
		margin: 0;
	}
	.works_attr .categ{
	  background-color:#196C19;
	  color:#fff;
	  padding:6px 14px;
	}
	.works_attr .date {
}

/* works_info */
.works_info{
	background-color: #F1F2F6;
	border:2px solid #3B4182;
	padding:40px;
	margin-bottom:40px;
}
.works_info .info_row{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	flex-wrap:wrap;
	margin-bottom:16px;
	padding-bottom:16px;
	border-bottom: 1px solid var(--base-color);
	}
	.works_info .info_row:last-child{
		border-bottom:none;
		margin-bottom:0px;
		padding-bottom:0;
}
.info_row h4{
	position:relative;
	width:150px;
	margin:0 !important;
	font-size: 1rem !important;
	font-weight:700 !important;
	color: var(--base-color);
}
.info_row h4 + div{
	width:calc(100% - 166px);
	margin: 0;
	font-size: 1rem !important;
	text-align:left;
	}
	.info_row h4 + div *{
		font-size: 1rem !important;
	}
	.info_row h4 + div ul{
		margin-bottom:0px;
	}
	.info_row h4 + div p:last-child{
		margin-bottom:0px !important;
	}
	.info_row h4 + div ul li:last-child{
		margin-bottom:0px !important;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	.works_info{
		padding:15px;
	}
	.works_info .info_row{
		display:block;
	}
	.works_info div{
		font-size:0.87rem !important;
	}
	.info_row h4{
		width:100%;
	}
	.info_row h4 + div{
		width:100%;
	}
	.info_row h4 + div *{
		font-size:0.87rem !important;
		line-height:1.75;
	}
	.info_row h4 + div li{
		margin-bottom:5px !important;
	}
}

/* -----------------------------------------------------------------
   other
----------------------------------------------------------------- */