@charset "UTF-8";

main.article_area{
	background:url("../../shared/img/index_bk.webp");
	background-repeat: repeat-y;
	background-size:100%;
	background-attachment: fixed;
}

.article_box{
	margin:120px auto 80px;
	max-width: 1260px;
	padding:0 30px;
}

.article_root{
	display:flex;
	flex-wrap: wrap;
	padding:15px 5px;
	gap:0 18px;
}
.article_root a{
	position: relative;
    color: #fff;
    font-size: 13px;
    letter-spacing: -0.02em;
    font-weight: 500;
    border: #ff8793 2px solid;
    background-color: #ff8793;
    border-radius: 2px;
    padding: 2px 10px;
    transition: .2s;
}
.article_root a::after{
	content:"";
	position:absolute;
	top:50%;
	right:-13px;
	transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-top: 1px solid #222;
    border-right: 1px solid #222;
}
.article_root a:last-child::after{
	content:none;
}

@media only screen and (min-width: 768px) {
	.article_root a:hover{
		background-color:rgba(255,255,255,0);
		color:#ff8793;
	}
}


article{
    border-radius: 20px;
	background-color:#fff;
    filter: drop-shadow(1px 1px 8px rgba(0, 0, 0,.2));
}

.article_head_box{
	padding:20px 35px 10px;
}

.article_date{
	text-align:left;
	font-weight:500;
}

.article_title{
	
}

.article_title h1{
	text-align:left;
	font-weight:600;
	font-size:32px;
}

.article_top_img{
	line-height:0;
}

.article_text_box{
	margin: auto;
	max-width:1100px;
	padding:60px 50px 30px;
}

.article_text_box p{
	text-align:left;
	font-size:18px;
	letter-spacing:0.04em;
	line-height:1.5em;
	padding-bottom:20px;
}

.article_text_box p a{
	color:#ff7387;
	text-decoration: underline;
}

.article_text_box h2{
	text-align:left;
	font-weight:600;
	font-size:26px;
	padding-bottom:20px;
}

.article_img{
	margin:auto;
	padding-bottom:20px;
}

.article_img.double{
	display: flex;
	flex-wrap: wrap;
}
.article_img.double img{width:50%;}

.article_img.max_800{max-width:800px;}
.article_img.max_700{max-width:700px;}
.article_img.max_600{max-width:600px;}
.article_img.max_500{max-width:500px;}

.article_text_box p span.yellow{background:linear-gradient(to bottom,rgba(255,255,255,0) 50%,#FFEF00 50%);}


/*=================================
 SP
==================================*/
@media only screen and (max-width: 767px) {
	.article_box{margin:70px auto 40px;}
	.article_title h1{line-height:1.2em;}
}


@media only screen and (max-width: 680px) {
	
	.article_text_box h2{font-size: 23px;}
	.article_text_box p{font-size:16px;}

	.article_top_img{
		position:relative;
		aspect-ratio:3 / 2;
		width:100%;
		height:auto;
		overflow:hidden;
	}
	
	.article_top_img img{
		position: absolute;
		top:50%;
		left:50%;
		transform:translateX(-50%) translateY(-50%);
		width:auto;
		height:100%;
	}
}

@media only screen and (max-width: 520px) {
	.article_box{margin:8vw auto 0;padding:0;}
	.article_root{padding:10px 13px;}
	article{filter:none;}
	.article_text_box{padding:8vw 30px 3vw;}
	.article_text_box h2{line-height:1.2em;}
	.article_text_box p{padding-bottom:15px;}
	
	.article_img.double img{width:100%;}
	
}