@charset "utf-8";
.newsContent{
	width: calc(100% + 12px);
	margin-left: -12px;
}
@media screen and (max-width: 767px){
	.newsContent{
		width: calc(100% + var(--sp-size-24));
		margin-left: calc(var(--sp-size-24) * -1);
	}	
}
/*-----------------------------------------------
 * NEWS - lists
-------------------------------------------------*/
.newsLists{
	position: relative;
}
.newsLists:before,
.articleTitle:before{
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin-top: 16px;
   margin-left: 12px;
   background-color: #FFF;
}
.newsList{
   width: 100%;
   position: relative;
   z-index: 2;
}
.newsList:last-child:after{
   content: '';
   position: absolute;
   bottom: 0;
   left: 12px;
   right: 0;
   border-bottom: 2px solid var(--color-main-brown);
}
.newsList__link,
.articleTitle{
   width: 100%;
   position: relative;
   display: block;
   text-decoration: none;
   line-height: 1;
}
.newsList:last-child .newsList__link{
   padding-bottom: 12px;
}
.newsList__link:before,
.articleTitle:after{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   margin-top: 16px;
   height: 2px;
   width: 100%;
   background-color: var(--color-main-brown);
}
.newsList__date,
.articleTitle__date{
   display: inline-block;
   line-height: 1;
   padding: 10px 26px;
   background-color: #fff;
   font-family: var(--font-en);
   color: var(--color-main-red);
   position: relative;
   z-index: 2;
}
.newsList__date:before,
.articleTitle__date:before{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   border-top: 2px solid var(--color-main-brown);
   border-bottom: 2px solid var(--color-main-brown);
}
.newsList__title,
.articleTitle__title{
   padding: 20px 72px 20px 32px;
   line-height: 1;
   position: relative;
}
.newsList__title_txt,
.articleTitle__title_txt{
   line-height: 1.5;
   color: #222;
}
.newsList__title_txt > span{
   line-height: 1;
   position: relative;
}
.newsList__title:after{
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   margin-top: auto;
   margin-bottom: auto;
   margin-right: 16px;
   width: 13px;
   height: 32px;
   -webkit-mask: url(../img/common/arrow_r.svg) no-repeat center / contain;
   mask: url(../img/common/arrow_r.svg) no-repeat center / contain;
   background-color: var(--color-main-red);
}

@media (hover: hover) and (pointer: fine){
   .newsList__title_txt{
	   transition: .3s ease;
   }
   .newsList__title_txt span{
	   background: linear-gradient(var(--color-main-red), var(--color-main-red)) right bottom / 0 100% no-repeat;
	   transition: background-size .4s ease;
   }
   .newsList__title:after{
	   transition: .3s ease;
   }
   .newsList__link:hover .newsList__title_txt span {
	   background-position: left bottom;
	   background-size: 100% 100%;
   }
   .newsList__link:hover .newsList__title_txt{
	   color: #FFF;
	   transition-delay: .1s;
   }
   .newsList__link:hover .newsList__title:after{
	   transition-delay: .2s;
	   transform: translateX(50%);
   }
}

@media screen and (max-width: 767px){
	#news .contentIn{
		margin-top: min(calc(76 / var(--min-ww) * 100vw), 76px);
		padding-left: min(calc(48 / var(--min-ww) * 100vw), 48px);
		padding-right: min(calc(48 / var(--min-ww) * 100vw), 48px);
	}
	.newsLists:before,
	.articleTitle:before{
		margin-top: var(--sp-size-24);
		margin-left: var(--sp-size-24);
	}
	.newsList:last-child:after{
		left: var(--sp-size-24);
		border-width: var(--sp-size-4);
	}
	.newsList:last-child .newsList__link{
		padding-bottom: var(--sp-size-20);
	}
	.newsList__link:before,
	.articleTitle:after{
		margin-top: var(--sp-size-20);
		height: var(--sp-size-4);
	}
	.newsList__date,
	.articleTitle__date{
		padding: var(--sp-size-12) min(calc(40 / var(--min-ww) * 100vw), 40px);;
	}
	.newsList__date:before,
	.articleTitle__date:before{
		border-width: var(--sp-size-4);
	}
	.newsList__title,
	.articleTitle__title{
		padding-top: var(--sp-size-20);
		padding-right: var(--sp-size-72);
		padding-bottom: var(--sp-size-20);
		padding-left: var(--sp-size-48);
	}
	.newsList__title_txt,
	.articleTitle__title_txt{
		-webkit-line-clamp: 2;
		line-height: 1.6667;
	}
	.newsList__title:after{
		width: var(--sp-size-20);
		height: var(--sp-size-48);
		margin-right: var(--sp-size-24);
	}
}


/**
* scrAni - set
**/
.newsLists{
	opacity: 0;
	transition: .4s ease;
}
.newsList__title{
	opacity: 0;
	transform: translateY(10%);
	transition: .4s ease;
}

/* scrAni - ani */
.content.is-ani .newsLists{
	opacity: 1;
	transition-delay: 1s;
}
.content.is-ani .newsList__title{
	opacity: 1;
	transform: translateY(0%);
	transition-delay: 1.41s;
}

.wp-pagenaviWrap{
	opacity: 0;
	transform: translateY(10%);
	transition: .4s ease;
}
.content.is-ani .wp-pagenaviWrap{
	opacity: 1;
	transform: translateY(0%);
	transition-delay: 1.41s;
}


/*-----------------------------------------------
 * NEWS - detail
-------------------------------------------------*/
.articleTitle{
	width: calc(100% + 12px);
	margin-left: -12px;
}
.articleTitle__title{
	padding-left: 52px;
	padding-right: 40px;
	padding-bottom: 32px;
	line-height: 1.6;
	font-size: 20px;
}
.articleTitle__title:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 12px;
	right: 0;
	border-bottom: 2px solid var(--color-main-brown);
}
.articleContentIn{
	margin-top: 40px;
	padding: 16px 5.4055% 40px;
	line-height: 2;
	word-break: break-all;
}


/* htag */
.articleContentIn h1,
.articleContentIn h2,
.articleContentIn h3,
.articleContentIn h4{
	font-size: 18px;
	font-weight: 900;
	position: relative;
	padding-bottom: 4px;
	line-height: 1.6;
	margin-top: 24px;
	color: var(--color-main-brown);
}
.articleContentIn h1 .htag_txt,
.articleContentIn h2 .htag_txt,
.articleContentIn h3 .htag_txt,
.articleContentIn h4 .htag_txt{
	position: relative;
	background: linear-gradient(0deg, rgba(var(--color-main-red-rgb),60%), rgba(var(--color-main-red-rgb),60%) 30%, transparent 30%);
}
.articleContentIn h5,
.articleContentIn h6{
	font-weight: 500;
	line-height: 1.6;
	margin-top: 24px;
}
.articleContentIn h5 .htag_txt,
.articleContentIn h6 .htag_txt{
	display: inline-block;
	position: relative;
	border: 2px solid var(--color-main-red);
	padding: 0.175em 0.5em;
}

/* pre */
.articleContentIn  pre{
	margin-top: 24px;
}

/* p */
.articleContentIn p {
	margin-top: 24px;
}
.articleContentIn p.center{
	text-align: center;
}
.articleContentIn p.right{
	text-align: right;
}


/* a */
.articleContentIn a {
	color: var(--color-main-red);
	font-weight: 700;
}


/* img */
.articleContentIn img {
	height: auto!important;
	max-width: 100%;
}
.articleContentIn img.aligncenter{
	display: block;
	margin: 0 auto;
}
.articleContentIn img.alignright{
	display: block;
	margin-left: auto;
}


/* youtube */
.youtubeWrap{
	max-width: 100%;
	margin: 0 auto;
}
.youtubeInWrap{
	display: block;
	width: 100%;
	position: relative;
	padding-top: 56.25%;
	margin: auto;
}
.youtubeWrap iframe[src*="youtube"]{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 767px){
	.articleContentIn{
		margin-top: var(--sp-size-48);
		padding: var(--sp-size-12) var(--sp-size-24) var(--sp-size-48);
	}
	.articleTitle{
		width: calc(100% + var(--sp-size-24));
		margin-left: calc(var(--sp-size-24) * -1);
	}
	.articleTitle__title{
		padding-left: var(--sp-size-48);
		padding-right: var(--sp-size-24);
		padding-bottom: var(--sp-size-40);
		font-size: var(--sp-size-28);
		line-height: 1.7143;
	}
	.articleTitle__title:after{
		left: var(--sp-size-24);
		border-width: var(--sp-size-4);
	}

	.articleContentIn h1,
	.articleContentIn h2,
	.articleContentIn h3,
	.articleContentIn h4{
		font-size: var(--sp-size-26);
		margin-top: var(--sp-size-36);
	}
	.articleContentIn h5,
	.articleContentIn h6{
		margin-top: var(--sp-size-36);
	}
	.articleContentIn pre,
	.articleContentIn p {
		margin-top: var(--sp-size-36);
	}
}


/**
* scrAni - set
**/
.articleTitle{
	opacity: 0;
	transition: .3s ease;
}
.articleContentIn{
	opacity: 0;
	transform: scale(90%);
	transition: .6s ease;
	transform-origin: center top;
}
.articleContentIn__cont{
	opacity: 0;
	transition: .4s ease;
}

.btn_linkWrap{
	opacity: 0;
	transform: translateY(10%);
	transition: .4s ease;
}

/* scrAni - ani */
.content.is-ani .articleTitle{
	opacity: 1;
	transition-delay: 1s;
}

.content.is-ani .articleContentIn{
	transition-delay: 1s;
	opacity: 1;
	transform: scale(100%);
}
.content.is-ani .articleContentIn__cont{
	transition-delay: 1.65s;
	opacity: 1;
}


.content.is-ani .btn_linkWrap{
	opacity: 1;
	transform: translateY(0%);
	transition-delay: 1.3s;
}