@charset "utf-8";
/*-----------------------------------------------
 * NEWS
-------------------------------------------------*/
.cont_h2--deco.-news{
	width: 107px;
	height: 93px;
	top: 0;
	left: 0;
	margin-left: 160px;
	margin-top: -90px;
	background-image: url(../img/common/deco_h2-bg1.png);
}


#news .contentIn__ContIn{
	width: 100%;/* 880 */
}
.newsListsWrap{
	width: 100%;
}
.newsLists{
	padding-bottom: 10px;
}
.newsList{
	position: relative;
}
.newsList:not(:last-child){
	margin-bottom: 24px;
}
.newsList:before{
	content: '';
	position: absolute;
	top: 10px;
	left: 10px;
	width: 100%;
	height: 100%;
	clip-path: polygon(100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 0);
	background-image: linear-gradient( 90deg, rgb(181,255,255) 0%, rgb(255,245,90) 100%);
}
.newsList__link{
	display: block;
	text-decoration: none;
	position: relative;
	display: flex;
	clip-path: polygon(100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 0);
	background-color: #fff;
}
.newsList__link--date{
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 24px 20px;
	text-align: center;
	font-family: var(--font-en);
	position: relative;
}
.newsList__link--date:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-right: 1px solid #ccc;
}
.newsList__link--date > span{
	display: block;
	text-align: center;
	line-height: 1.5;
}
.newsList__link--date_y{
	order: 1;
	color: #ccc;
}
.newsList__link--date_md{
	color: var(--color-pink);
}
.newsList__title{
	padding: 20px;
	color: #222;
}
.newsList__title--txt{
	display: block;
	line-height: 2;
}
.newsList__linkFrames{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.newsList__linkFrame{
	position: absolute;
}
.newsList__linkFrame.-tl{
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	border-top: 1px solid #040000;
	border-left: 1px solid #040000;
}
.newsList__linkFrame.-rb{
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
.newsList__linkFrame.-rb:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 20px;
	right: 0;
	border-right: 1px solid #040000;
}
.newsList__linkFrame.-rb:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 20px;
	border-bottom: 1px solid #040000;
}
.newsList__linkFrame.-rbSide{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 20px;
	height: 20px;
}
.newsList__linkFrame.-rbSide:before{
	content: '';
	width: 141.4212%;
	height: 1px;
	border-bottom: 1px solid #000;
	position: absolute;
	top: 0;
	right: -3px;
	bottom: 0;
	margin: auto;
	transform: rotate(-45deg);
}



.newsListsWrap .com_linkBtn{
	margin-top: 80px;
}
#news .contentBG__earring.-sizeM{
	top: 0;
	right: -41px;
	margin-top: 32px;
}


@media screen and (max-width: 960px){
	#news .contentIn__ContIn{
		flex-direction: column;
	}
	.newsListsWrap{
		width: 100%;
	}
}

@media (hover: hover) and (pointer: fine){
	.newsList__link{
		transition: transform .4s ease;
	}
	.newsList__link:hover{
		transform: translate(5px,5px);
	}
	.newsList__title--txt > span{
		background: linear-gradient(var(--color-yellow), var(--color-yellow)) right bottom / 0 40% no-repeat;
		transition: background-size .4s ease;
	}
	.newsList__link:hover .newsList__title--txt > span {
        background-position: left bottom;
        background-size: 100% 40%;
    }
}


@media screen and (max-width: 767px){
	.cont_h2--deco.-news{
		width: calc(107 / var(--vwcalc));
		height: calc(93 / var(--vwcalc));
		margin-left: calc(224 / var(--vwcalc));
		margin-top: calc(-72 / var(--vwcalc));
	}

	.newsLists{
		padding-bottom: var(--sp-size-16);
	}
	
	.newsList:before{
		top: var(--sp-size-16);
		left: var(--sp-size-16);
		clip-path: polygon(100% 0, 100% calc(100% - var(--sp-size-24)), calc(100% - var(--sp-size-24)) 100%, 0 100%, 0 0);
	}
	.newsList__link{
		clip-path: polygon(100% 0, 100% calc(100% - var(--sp-size-24)), calc(100% - var(--sp-size-24)) 100%, 0 100%, 0 0);
	}
	.newsList__link--date{
		padding: var(--sp-size-32) var(--sp-size-16);
	}
	.newsList__link--date:after{
		border-right-width: var(--sp-size-2);
	}
	.newsList__title{
		padding: var(--sp-size-20);
	}
	.newsList__linkFrame.-tl,
	.newsList__linkFrame.-rb:before,
	.newsList__linkFrame.-rb:after{
		border-width: var(--sp-size-2);
	}
	.newsList__linkFrame.-rb:before{
		bottom: var(--sp-size-24);
	}
	.newsList__linkFrame.-rb:after{
		right: var(--sp-size-24);
	}
	.newsList__linkFrame.-rbSide{
		width: var(--sp-size-24);
		height: var(--sp-size-24);
	}
	.newsList__linkFrame.-rbSide:before{
		width: var(--sp-size-40);
		height: var(--sp-size-2);
		border-bottom-width: var(--sp-size-2);
		right: calc(-5 / var(--vwcalc));
	}

	.newsListsWrap .com_linkBtn{
		margin-top: var(--sp-size-96);
	}

	#news .contentBG__earring.-sizeM{
		right: calc(-68 / var(--vwcalc));/* -41 */
		margin-top: var(--sp-size-72);
	}
}


/*-----------------------------------------------
 * ARTICLE 
-------------------------------------------------*/
.articleContent{
	width: 100%;
	position: relative;
}
.articleContent:before{
	content: '';
	position: absolute;
	top: 10px;
	left: 10px;
	width: 100%;
	height: 100%;
	background-image: linear-gradient( 90deg, rgb(181,255,255) 0%, rgb(255,245,90) 100%);
}
.articleTitle{
    position: relative;
    display: flex;
    background-color: #fff;
	border: 1px solid #040000;
	z-index: 2;
}
.articleTitle--title{
	padding: 40px;
	line-height: 2;
	color: #222;
	font-weight: 700;
	font-size: 18px;
}


.articleTitle--date{
	order: -1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px;
	text-align: center;
	font-family: var(--font-en);
	position: relative;
	flex-shrink: 0;
	font-weight: 500;
}
.articleTitle--date:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-right: 1px solid #ccc;
}
.articleTitle--date > span{
	display: block;
	text-align: center;
	line-height: 1.5;
}
.articleTitle--date_y{
	order: 1;
	color: #ccc;
}
.articleTitle--date_md{
	color: var(--color-pink);
}

@media screen and (max-width: 767px){
	.articleContent:before{
		top: var(--sp-size-16);
		left: var(--sp-size-16);
	}
	.articleTitle{
		border-width: var(--sp-size-2);
	}
	.articleTitle--title{
		padding: var(--sp-size-24);
		font-size: var(--sp-size-28);
	}

	.articleTitle--date{
		padding: var(--sp-size-32) var(--sp-size-24);
	}
	.articleTitle--date:after{
		border-right-width: var(--sp-size-2);
	}
}


/**
* ARTICLE CONTENT
**/
.articleContentIn{
	padding: 80px min(9.091%, 80px);
	border: 1px solid #040000;
	border-top: unset;
	position: relative;
	background-color: #FFF;
	line-height: 2;
	margin-top: -24px;
	word-break: break-all;
}


.articleContentIn h1,
.articleContentIn h2,
.articleContentIn h3,
.articleContentIn h4{
	font-size: 18px;
	font-weight: 500;
	position: relative;
	padding-bottom: 4px;
	line-height: 1.6;
	margin-top: 24px;
}
.articleContentIn h1 .htag_txt,
.articleContentIn h2 .htag_txt,
.articleContentIn h3 .htag_txt,
.articleContentIn h4 .htag_txt{
	display: inline;
	position: relative;
	background: linear-gradient(var(--color-yellow), var(--color-yellow)) right bottom / 100% 40% no-repeat;
}
.articleContentIn h5,
.articleContentIn h6{
	font-size: 18px;
	font-weight: 500;
	line-height: 2;
	margin-top: 24px;
	color: #000;
}
.articleContentIn h5 .htag_txt,
.articleContentIn h6 .htag_txt{
	display: inline;
	position: relative;
	background: linear-gradient(rgba(194, 173, 208, 30%), rgba(194, 173, 208, 30%)) right bottom / 100% 40% no-repeat;
}

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

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


/* a */
.articleContentIn a {
	color: var(--color-pink);
	font-weight: 500;
}


/* 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{
		border-width: var(--sp-size-2);
		padding: var(--sp-size-48);
		margin-top: calc(-32 / var(--vwcalc));
	}
	.articleContentIn h1,
	.articleContentIn h2,
	.articleContentIn h3,
	.articleContentIn h4,
	.articleContentIn h5,
	.articleContentIn h6{
		font-size: var(--sp-size-26);
		margin-top: var(--sp-size-32);
	}
	.articleContentIn pre,
	.articleContentIn p,
	.articleContentIn hr{
		margin-top: var(--sp-size-32);
	}
}


.com_linkBtn.-newsDetail{
	padding-top: 10px;
}
@media screen and (max-width: 767px){
	.com_linkBtn.-newsDetail{
		padding-top: var(--sp-size-16);
	}
}