@charset "UTF-8";
/* CSS PC/SP共通レイアウト */

#activity{
	font-size: 15px;
}





/* コンテンツ幅 */
#activity .contents{
	max-width:900px;
	width: 100%;
	margin:0 auto;
}

#activity .contents1{
	max-width:1100px;
	width: 100%;
	margin:0 auto;
}


/* タイトル */
#activity .title{
	width: 100%;
	height: 430px;
	background-image:url("../img/activity/img_activity_list_main.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: relative;
}

#activity .title div{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
	text-align: center;
}

#activity .title_01{
	color: #ffffff;
	font-size: 58px;
	font-weight: 600;
}





/* ラフティング */
#activity .activity_title{
	margin-top: 110px;
	text-align: center;
}

#activity .activity_title p{
	font-size: 30px;
	font-weight: 600;
}

#activity .img_title_border{
	margin-top: 20px;
}

#activity .text{
	text-align: center;
	margin-top: 40px;
}

#activity .activity_box{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	border-bottom: 1px solid #000000;
	padding-bottom: 120px;
}

#activity .activity_name{
	color: #00B4DC;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 8px;
	height:3em;
	line-height:1.4em;
	overflow:hidden;
}

#activity .activity_item ul{
	margin-top: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #000000;
	padding-bottom: 15px;
}

#activity .activity_item li p{
	color: #000000;
}

#activity .activity_item li p:hover{
	opacity: 0.8;
}

#activity .activity_text{
	font-size: 14px;
}

#activity .activity_item{
	width: 30%;
	margin-top: 100px;
}

#activity .message{
	text-align: center;
	margin-top: 50px;
	margin-bottom: 50px;
	width:100%;
	font-size: 18px;
}




/* トップへ戻るボタン */
#activity .top_btn{
	margin-top: 120px;
	margin-bottom: 140px;
}





/*--------------------------------------------------*
 *   みなかみのアクティビティ
 *--------------------------------------------------*/
/* タイトル */
#activity .title_main{
	width: 100%;
	height: 430px;
	background-image:url("../img/activity/img_activity_main.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: relative;
}

#activity .title_main div{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
	text-align: center;
}

#activity .title_activity_01{
	color: #ffffff;
	font-size: 58px;
	font-weight: 600;
}

#activity .title_activity_02{
	color: #ffffff;
	font-size: 34px;
	font-weight: 600;
}





/* テキスト */
#activity .season_activity_text{
	text-align: center;
	margin-top: 52px;
	margin-bottom: 90px;
	line-height: 32px;
}







/* ページ内ボタン */
#activity .page1{
	text-align: center;
	margin: 0px 20px;
}

#activity .page2{
	text-align: center;
	margin: 0px 20px;
}

#activity .page3{
	text-align: center;
	margin: 0px 20px;
}

#activity .access_btn{
	display: flex;
	justify-content: center;
	margin-bottom: -10px;
	align-items: flex-end;
	height: 80px;
}

#activity .page1:hover {
    content: url("../img/activity/page1_hover.png");
}

#activity .page2:hover {
    content: url("../img/activity/page2_hover.png");
}

#activity .page3:hover {
    content: url("../img/activity/page3_hover.png");
}





/* 四季タイトル */
#activity .title_18spa_02{
	text-align: center;
	font-size: 34px;
	font-weight: 600;
}

#activity .title_18spa_01{
	text-align: center;
	font-size: 14px;
	margin-top: 10px;
	display: flex;
    justify-content: center;
    align-items: center;
}

#activity .title_18spa_01::before,.title_18spa_01::after {
    content: "";
    height: 1px;
    width: 50px;
    background-color: #000000;
}

#activity .title_18spa_01::before {
    margin-right: 20px;
}

#activity .title_18spa_01::after {
    margin-left: 20px;
}





/* 春・夏・秋 */
#activity .season_box{
	background-color: #F0F0EC;
	padding-top: 100px;
	padding-bottom: 150px;
}

#activity .season_box_01{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 40px;
}

#activity .item_season_activity{
	width: 30%;
	margin-bottom: 80px;
}

#activity .item_season_activity img{
	margin-bottom: 5px;
}

#activity .item_activity_text_01{
	font-size: 16px;
	font-weight: 600;
}

#activity .btn_black_activity{
	margin-top: 15px;
	margin-top: auto;
}

#activity .bt_black_arrow_01{
	margin-left: 0px;
	margin-top: 10px;
	width: 100%;
}

#activity .img_01{
	text-align: center;
	margin-bottom: 140px;
}





/* スキー場 */
#activity .season_box_01::after{
	width: 30%;
	content: "";
	display: block;
}





/* バナー */
#activity .banner{
	margin-top: 50px;
	text-align: center;
}





/* トップへ戻るボタン */
#activity .top_btn_activity{
	margin-top: 120px;
	margin-bottom: 0px;
}



/*--------------------------------------------------*
 *   追加css(2026/04/14)
 *--------------------------------------------------*/
#activity .activity_box{
	justify-content: flex-start;
}
#activity .activity_item{
	margin-right: 5%;
}
#activity .activity_item:nth-child(3n){
	margin-right: 0%;
}
#activity .activity_item .thumbnail_img{
	text-align: center;
	width:266px;
	height:180px;
	background-color:#f0f0f0;
	overflow:hidden;
}
#activity .activity_item .thumbnail_img img{
	width: auto;
	height:100%;
	object-fit: cover;
}



/* スマホレイアウト */
@media (max-width: 1024px) {
	
	#activity{
		font-size: 14px;
	}





	/* コンテンツ幅 */
	#activity .contents{
		max-width:900px;
		width: 100%;
		margin:0 auto;
		padding: 0px 15px;
	}
	
	
	
	
	
	/* タイトル */
	#activity .title_01{
		font-size: 20px;
	}
	
	#activity .title{
		width: 100%;
		height: 430px;
		background-image:url("../img/activity/img_activity_list_main_sp.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		position: relative;
		margin-top: 30px;
	}
	
	
	
	
	
	/* ラフティング */
	#activity .activity_title{
		margin-top: 40px;
	}

	#activity .activity_title p{
		font-size: 22px;
	}

	#activity .img_title_border{
		margin-top: 15px;
	}

	#activity .text{
		margin-top: 30px;
		font-size: 15px;
	}
	
	#activity .activity_box{
		justify-content: center;
		padding-bottom: 80px;
	}

	#activity .activity_name{
		margin-bottom: 5px;
		height:auto
	}

	#activity .activity_item ul{
		margin-top: 5px;
		margin-bottom: 7px;
		padding-bottom: 8px;
	}

	#activity .activity_text{
		font-size: 12px;
	}

	#activity .activity_item{
		width: 100%;
		margin-top: 50px;
	}
	
	

	/* トップへ戻るボタン */
	#activity .top_btn{
		margin-top: 55px;
		margin-bottom: 70px;
	}
	
	
	
	
	
	/*--------------------------------------------------*
	 *   みなかみのアクティビティ
	 *--------------------------------------------------*/
	/* タイトル */
	#activity .title_main{
		width: 100%;
		height: auto;
		background-image: none;
		margin-top: 20px;
		position: static;
	}

	#activity .title_main div{
		position: static;
		top: 0%;
		left: 0%;
		-webkit-transform : translate(-0%,-0%);
		transform : translate(-0%,-0%);
		text-align: center;
	}

	#activity .title_activity_01{
		color: #000000;
		font-size: 26px;
		font-weight: 600;
	}

	#activity .title_activity_02{
		color: #000000;
		font-size: 22px;
		font-weight: 600;
	}
	
	#activity .img_activity_main_sp{
		text-align: center;
		margin-top: 20px;
	}

	
	
	
	
	/* テキスト */
	#activity .season_activity_text{
		text-align: center;
		margin-top: 52px;
		margin-bottom: 40px;
		line-height: 24px;
	}
	
	
	
	
	
	/* ページ内ボタン */
	#activity .page1{
		text-align: center;
		margin: 0px 15px;
	}

	#activity .page2{
		text-align: center;
		margin: 0px 15px;
	}

	#activity .page3{
		text-align: center;
		margin: 0px 15px;
	}

	#activity .access_btn{
		display: flex;
		justify-content: center;
		margin-bottom: -6px;
		align-items: flex-end;
		height: 80px;
	}

	#activity .page1:hover {
		content: url("../img/activity/page1_hover_sp.png")
	}

	#activity .page2:hover {
		content: url("../img/activity/page2_hover_sp.png");
	}

	#activity .page3:hover {
		content: url("../img/activity/page3_hover_sp.png");
	}
	
	
	
	
	
	/* 四季タイトル */
	#activity .title_18spa_02{
		font-size: 20px;
	}
	
	#activity .title_18spa_01{
		font-size: 12px;
		margin-top: 5px;
	}

	#activity .title_18spa_01::before,.title_18spa_01::after {
		width: 25px;
	}
	
	#activity .title_18spa_01::before {
		margin-right: 10px;
	}

	#activity .title_18spa_01::after {
		margin-left: 10px;
	}
	
	
	
	
	
	/* 春・夏・秋 */
	#activity .season_box{
		background-color: #F0F0EC;
		padding-top: 40px;
		padding-bottom: 80px;
	}

	#activity .season_box_01{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 28px;
	}

	#activity .item_season_activity{
		width: 48%;
		margin-bottom: 50px;
		display: flex;
		flex-direction: column;
	}

	#activity .item_season_activity img{
		margin-bottom: 5px;
	}

	#activity .item_activity_text_01{
		font-size: 15px;
		font-weight: 600;
		margin-bottom: 15px;
	}

	#activity .btn_black_activity{
		margin-top: 15px;
		margin-top: auto;
	}
	
	#activity .btn_black_18spa{
		margin-top: 15px;
		margin-top: auto;
		margin-left: -5px;
		margin-right: 5px;
	}
	
	#activity .bt_black_arrow{
		width: 100%;
	}
	
	#activity .bt_black_arrow a {
		height: 40px;
		font-size: 15px;
		background-size: 18px auto;
	}
	
	#activity .img_01{
		text-align: center;
		margin-bottom: 36px;
	}
	
	
	
	
	
	/* バナー */
	#activity .banner{
		margin-top: 0px;
	}
	
	
	
	
	
	/* トップへ戻るボタン */
	#activity .top_btn_activity{
		margin-top: 90px;
		margin-bottom: 0px;
	}



/*--------------------------------------------------*
 *   追加css(2026/04/14)
 *--------------------------------------------------*/
#activity .activity_item{
	margin-right: 0%;
}
#activity .activity_item .thumbnail_img{
	text-align: center;
	width:100%;
	height:180px;
	background-color:#f0f0f0;
	overflow:hidden;
}
#activity .activity_item .thumbnail_img img{
	width: auto;
	height:100%;
	object-fit: cover;
}

}