@charset "utf-8";

/* 未来アスリート
========================================== */
.ath_mv{margin-bottom: 80px;}
.ath_mv img{
	width: 100%;
	height: auto;
}
@media screen and (max-width:599px){
	.ath_mv{margin-bottom: 50px;}
}

.ath_intro{
	display: flex;
	align-items: center;
	margin: 60px auto 80px;
	padding: 3% 30% 3% 5%;
	width: 1200px;
	background: url(../images/athsupport/intro_bg.jpg) right top/contain no-repeat;
	aspect-ratio: 120/46;
}
.ath_intro .title{
	margin-bottom: 30px;
	width: 75%;}
.ath_intro .title img{width: 100%;height: auto;}
.ath_intro p{
	text-shadow :3px 3px 5px #fff,
	-3px 3px 5px #fff,
	3px -3px 5px #fff,
	-3px -3px 5px #fff,
	0 0 8px #fff,0 0 10px #fff;
}

@media screen and (max-width:1200px){
	.ath_intro{
		padding: 6% 35% 6% 5%;
		width: 100%;
		background-size:cover;
		aspect-ratio:auto;
	}
}
@media screen and (max-width:768px){
	.ath_intro{
		margin: 40px auto 80px;
		padding: 20px 30% 20px 20px;
	}
}

@media screen and (max-width:599px){
	.ath_intro{
		margin: 0 auto 60px;
		padding:30px 20px;
		background: url(../images/athsupport/intro_bg_sp.jpg) right bottom/cover no-repeat;
	}
}



/*主な取り組み*/
.ath_athtag .title,
.ath_asteeda .title,
.ath_marines .title{
	letter-spacing: 2px;
	line-height: 1.3;
	margin-bottom: 1em;
	padding-bottom: 1.2em;
	border-bottom: 3px solid #02128c;
	text-align: center;
	font-size: 3rem;
}
.ath_athtag .title ruby rt{font-size: 1.2rem;ruby-align: center;}
.ath_asteeda .title{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.ath_marines .title{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	text-align: left;
	gap: 20px;
}
.ath_asteeda .title .logo{margin-right: 10px;}
.ath_athtag{
	display: flex;
	align-items: center;
	margin-top: 60px;
	margin-bottom: 80px;
	margin-right: calc((100vw - 1200px)/2);
	padding-right: 32%;
	padding-left: calc((100vw - 1200px)/2);
	background: url(../images/athsupport/initiative_athTag_bg.jpg) right top/contain no-repeat;
	aspect-ratio: 140/62;
}
.ath_athtag .logo{
	margin-bottom: 20px;
	text-align: center;}
.ath_athtag .logo img{max-width: 100%;height: auto;}
.ath_athtag p{
	line-height: 1.8;
	padding: 0 2em;
	text-shadow :3px 3px 5px #fff,
	-3px 3px 5px #fff,
	3px -3px 5px #fff,
	-3px -3px 5px #fff,
	0 0 8px #fff,0 0 10px #fff;
	font-size: 1.6rem;
}
.ath_asteeda{
	display: flex;
	align-items: center;
	margin-top: 60px;
	margin-bottom: 80px;
	margin-left: calc((100vw - 1200px)/2);
	padding-left: 32%;
	padding-right:calc((100vw - 1200px)/2);
	background: url(../images/athsupport/initiative_asteeda_bg.jpg) right top/contain no-repeat;
	aspect-ratio: 140/62;
}

.ath_asteeda p{
	line-height: 1.8;
	padding: 0 1em 2em 4em;
	text-shadow :3px 3px 5px #fff,
	-3px 3px 5px #fff,
	3px -3px 5px #fff,
	-3px -3px 5px #fff,
	0 0 8px #fff,0 0 10px #fff;
	font-size: 1.6rem;
}

.ath_asteeda .btn_more{margin-bottom: 0;}

.ath_marines{
	display: flex;
	align-items: center;
	margin-top: 60px;
	margin-bottom: 80px;
	margin-right: calc((100vw - 1200px)/2);
	padding-right: 32%;
	padding-left: calc((100vw - 1200px)/2);
	background: url(../images/athsupport/initiative_marines_bg.jpg) right top/contain no-repeat;
	aspect-ratio: 140/62;
}
.ath_marines p{
	line-height: 1.8;
	padding: 0 2em;
	text-shadow :3px 3px 5px #fff,
	-3px 3px 5px #fff,
	3px -3px 5px #fff,
	-3px -3px 5px #fff,
	0 0 8px #fff,0 0 10px #fff;
	font-size: 1.6rem;
}

@media screen and (max-width:1200px){
	.ath_athtag,
	.ath_asteeda,
	.ath_marines{
		margin: 0 0 60px;
	}
	.ath_athtag,
	.ath_marines{padding-left:30px;padding-right: 38%;}
	.ath_asteeda{padding-right:30px;}
	.ath_athtag .title,
	.ath_asteeda .title,
	.ath_marines .title{
		font-size: 2.4rem;
	}
	.ath_athtag p,
	.ath_asteeda p,
	.ath_marines p{padding: 1em 0;}

}

@media screen and (max-width:960px){
	.ath_athtag,
	.ath_asteeda,
	.ath_marines{
		padding:10% 5%;
	}
	.ath_athtag{
		background: url(../images/athsupport/initiative_athTag_bg_sp.jpg) right top/cover no-repeat;
		aspect-ratio: auto;
	}
	.ath_asteeda{
		background: url(../images/athsupport/initiative_asteeda_bg_sp.jpg) left top/cover no-repeat;
		aspect-ratio: auto;
	}
	.ath_marines{
		background: url(../images/athsupport/initiative_marines_bg_sp.jpg) right top/cover no-repeat;
		aspect-ratio: auto;
	}


	.ath_athtag .title,
	.ath_asteeda .title{
		width: 60%;
	}
	.ath_marines .title{
		width: 70%;
		font-size: 2.2rem;
	}
	.ath_asteeda .title{margin-left: auto;}
	.ath_athtag .title .text-block,
	.ath_asteeda .title .text-block{
		display: inline-block;
	}
	.ath_athtag .logo{width: 60%;}
	.ath_athtag .logo img{max-width: 60%;}
	.ath_asteeda .title .logo{margin-right:0;width: 100%;margin-bottom: 10px;}
	.ath_marines .logo img{max-width: 80%;height: auto;}

	.ath_marines p{padding: 1em 30% 0 0;}

}
@media screen and (max-width:768px){
	.ath_marines p{padding: 3em 0 1em;}
	.ath_marines .title{
		flex-direction: column;
		gap: 10px;
	}
}

@media screen and (max-width:599px){
	.ath_athtag .title,
	.ath_asteeda .title{font-size: 1.8rem;}
	.ath_marines .title{font-size: 1.7rem;}
	.ath_marines p{padding: 1em 0 1em;}
}


/*その他の応援活動*/
.ath_other{
	margin:0 auto 80px;
	max-width: 1200px;
}
.ath_other .otherWrap{
	display: flex;
	margin-top: 60px;
	gap: 60px;
}

.ath_other .otherWrap .box{
	padding: 3%;
	width: 50%;
	background-color: #e6ecf0;
}
.ath_other .otherWrap .box .title{
	line-height: 1.3;
	letter-spacing: 2px;
	margin-bottom: 1em;
	text-align: center;
	font-size: clamp(2rem, 2.933vw,3rem);
}
.ath_other .otherWrap .box .imgBox img{width: 100%;height: auto;}
.ath_other .otherWrap .box p{
	margin-top: 1em;
	font-size: 1.6rem;
}
@media screen and (max-width:1200px){
	.ath_other{padding: 0 30px;}
	.ath_other .otherWrap{gap: 30px;}
}
@media screen and (max-width:599px){
	.ath_other{padding: 0 20px;}
	.ath_other .otherWrap{
		flex-direction: column;
		gap: 30px;
	}
	.ath_other .otherWrap .box{
		padding: 3%;
		width: 100%;
	}
}

/*新着情報*/
.ath_news{
	display: flex;
	align-items: center;
	margin:0 auto 80px;
	max-width: 1200px;
	padding: 5%;
	box-sizing: border-box;
	border: 1px solid #02128c;
}
.ath_news .titleBox{width: 35%;padding-right: 50px;}
.ath_news .ath_newslist{width: 65%;}

.ath_news .titleBox .ttl_main{
	text-align: left;
	margin-bottom: 50px;
	padding: 0 1em;
}
.ath_news .titleBox .ttl_main span::after{
	left: 0;
	transform: translateX(0);
}
.ath_news .btn_more{margin-bottom: 0;}
.ath_news .btn_more a{
	display: block;
	padding: 20px 60px 20px 50px;}
.ath_news .btn_more.pcbtn{display: block;}
.ath_news .btn_more.spbtn{display: none;}

.ath_news .ath_newslist li{margin-bottom: 1em;}
.ath_news .ath_newslist li a{
	display: flex;
	text-decoration:none;
	color: #222;
}
.ath_news .ath_newslist li a:hover .title{
	text-decoration: underline;
}

.ath_news .ath_newslist li .category{
	position: relative;
	margin-bottom: 15px;

}
.ath_news .ath_newslist li .category::before{
	z-index: -1;
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 1px;
	background-color: #e5e5e5;
}
.ath_news .ath_newslist li .category span{
	line-height: 1;
	background-color: #02128c;
	color: #fff;
	margin-left: 20px;
	padding: .2em .5em;
	font-size: 1.6rem;
}
.ath_news .ath_newslist li a {padding-left: 20px;}
.ath_news .ath_newslist li a .date{width: 9em;}
.ath_news .ath_newslist li a .title{width: calc(100% - 9em);}

@media screen and (max-width:1200px){
	.ath_news{
		margin:0 30px 80px;
		width:calc(100% - 60px);
		padding: 3%;
	}
}
@media screen and (max-width:1000px){
	.ath_news{
		flex-direction: column;
		padding:20px;
	}
	.ath_news .titleBox .ttl_main{
		text-align: center;
		margin-bottom: 30px;
		margin-top: 1em;
		padding: 0 1em;
	}
	.ath_news .titleBox .ttl_main span::after{
		left: 50%;
		transform: translateX(-50%);
	}
	.ath_news .btn_more.pcbtn{display: none;}
	.ath_news .btn_more.spbtn{display: block;}
	.ath_news .titleBox{width: 100%;padding-right: 0;margin-bottom: 30px;}
	.ath_news .ath_newslist{width: 100%;margin-bottom: 30px;}
}

@media screen and (max-width:768px){
	.ath_news{
		margin:0 20px 50px;
		width:calc(100% - 40px);
		padding: 20px 20px 30px;
	}
}
@media screen and (max-width:599px){
	.ath_news .ath_newslist li a{
		display: block;
	}
	.ath_news .ath_newslist li .category span{font-size: 1.4rem;}
	.ath_news .ath_newslist li a .date{font-size: 1.4rem;margin-bottom: 0.5em;}
	.ath_news .ath_newslist li a .title{width:100%;}
}