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

#modelcourse{
	font-size: 15px;
}





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

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





/* メインビジュアル */
#modelcourse .main{
	width: 100%;
	height: 430px;
	background-image:url("../img/modelcourse/img_main.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#modelcourse .main p{
	color: #ffffff;
}

#modelcourse .main_text_01{
	font-size: 45px;
	font-weight: 600;
	line-height: 65px;
	letter-spacing: 5px;
	padding-top: 50px;
}

#modelcourse .main_text_02{
	font-size: 27px;
	margin-top: 70px;
}





/* タイトル */
#modelcourse .title{
	text-align: center;
	font-size: 30px;
	font-weight: 600;
	margin: 110px 0px;
	margin-bottom: 70px;
}





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

#modelcourse .page2{
	text-align: center;
	margin: 0px 40px;
}

#modelcourse .page3{
	text-align: center;
	margin: 0px 40px;
}

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

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

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

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




/* モデルコース */
#modelcourse .modelcourse{
	background-color: #F0F0EC;
	padding-top: 100px;
}

#modelcourse .course_title{
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	margin-top: 5px;
	height:48px;
	overflow: hidden;
}

#modelcourse .course_time{
	font-size: 14px;
	margin-top: 15px;
	border-bottom: 1px solid #B3B3B3;
	padding-bottom: 3px;
}

#modelcourse .area_01{
	display: flex;
	align-items: center;
}

#modelcourse .area_text{
	margin-left: 8px;
}

#modelcourse .course_box{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#modelcourse .course_item{
	width: 22%;
	margin-bottom: 75px;
	color: #000000;
}

#modelcourse .course_item .img_course{
	margin-top: 10px;
	text-align: center;
	width:200px;
	height: 200px;
	overflow: hidden;
}
#modelcourse .course_item .img_course img{
	width: auto;
	height: 100%;
	object-fit: cover;
}





/* ページネーション */
#modelcourse .pagination_news{
    display: flex;
	justify-content: center;
    align-items: center;
    gap: 0 24px;
	margin-top: 100px;
	font-size: 16px;
	border-bottom: 1px solid #000000;
	padding-bottom: 80px;
}

#modelcourse .pagination_news a{
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000000;
}

#modelcourse .pagination_news a:hover{
    opacity: 0.7;
}

#modelcourse .pagination_news a:not(:hover){
    text-decoration: none;
}

#modelcourse .pagination_news .current a{
    background-color: #000000;
    color: #ffffff;
    pointer-events: none;
	width: 26px;
    height: 26px;
}

#modelcourse .prev{
	margin-right: 50px;
}

#modelcourse .next{
	margin-left: 50px;
}





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










/*--------------------------------------------------*
 *   モデルコース詳細
 *--------------------------------------------------*/
/* メインビジュアル */
#modelcourse .main_01{
	width: 100%;
	height: 570px;
	background-image:url("../img/modelcourse/img_main_detail_back.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	padding-top: 70px;
}
#modelcourse .main_01 .thumb_img{
	border-radius:20px;
	height:400px;
	overflow: hidden;
	box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.1);
}
#modelcourse .main_01 .thumb_img img{
	width: auto;
	height: 100%;
	object-fit: cover;
}

#modelcourse .main_01_box{
	display: flex;
	justify-content: space-between;
}

#modelcourse .main_text_box{
	width: 420px;
	margin-right: 40px;
}

#modelcourse .main_text_box p{
	color: #ffffff;
}

#modelcourse .main_text_a{
	font-size: 16px;
	font-weight: 600;
}

#modelcourse .main_text_b{
	font-size: 34px;
	font-weight: 600;
	line-height: 50px;
	margin-top: 10px;
}

#modelcourse .main_text_c{
	margin-top: 15px;
}

#modelcourse .main_text_area{
	display: flex;
	justify-content: flex-start;
	padding: 8px 0px;
}

#modelcourse .main_text_area img{
	margin-right: 10px;
}

#modelcourse .main_text_time{
	border-top: 3px dotted #ffffff;
	padding: 8px 0px;
}

#modelcourse .main_text_area_box{
	border-top: 1px solid #ffffff; 
	border-bottom: 1px solid #ffffff;
	margin-top: 25px;
}

/* シェアボタン */
#modelcourse .btn_share_box{
	display: flex;
	justify-content: flex-start;
	margin-top: 15px;
}

#modelcourse .btn_share{
	display: flex;
	align-items: center;
	background-color: #000000;
	border-radius: 50px;
	width: 76px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 10px;
	margin-right: 24px;
}

#modelcourse .btn_share p{
	margin-left: 5px;
	font-size: 12px;
	color: #ffffff;
}





/* 紹介スポット一覧 */
#modelcourse .spot_list{
	background-color: #F0F0EC;
	border-radius: 30px;
	padding: 30px 40px;
	margin-top: 70px;
	margin-bottom: 70px;
}

#modelcourse .spot_title_01{
	font-size: 28px;
	font-weight: 600;
}

#modelcourse .spot_title_02{
	font-size: 14px;
}

#modelcourse .border{
	width: auto;
	height: 25px;
	border-right: 1px solid #000000;
	margin: 0px 20px;
}

#modelcourse .spot_title_box{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	border-bottom: 1px solid #000000;
	padding-bottom: 10px;
}

#modelcourse .check{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 10px;
	width: 50%;
}

#modelcourse .check p{
	font-weight: 600;
}

#modelcourse .check img{
	margin-right: 10px;
	margin-top: 3px;
}

#modelcourse .check_box{
	display: flex;
	flex-wrap: wrap;
	margin-top: 30px;
}





/* 流れ */
#modelcourse .flow{
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-left: 40px;
}

#modelcourse .flow_spot_item{
	display: flex;
	justify-content: space-between;
}

#modelcourse .item_01{
	margin-top: 53px;
}

#modelcourse .item_02{
	margin-top: 75px;
}

#modelcourse .item_03{
	margin-top: 83px;
}

#modelcourse .item_04{
	margin-top: 93px;
}

#modelcourse .item_05{
	margin-top: 90px;
}

#modelcourse .item_06{
	margin-top: 98px;
}

#modelcourse .item_07{
	margin-top: 85px;
}

#modelcourse .flow_text_box{
	width: 340px;
	margin-right: 20px;
}

#modelcourse .flow_spot_title{
	font-size: 18px;
	font-weight: 600;
	color: #00B4DC;
	margin-bottom: 15px;
}

#modelcourse .border_01{
	width: 25px;
	height: auto;
	border-top: 1px solid #000000;
	margin-right: 15px;
}

#modelcourse .border_02{
	width: 25px;
	height: auto;
	border-top: 1px solid #000000;
	margin-top: -13px;
	margin-right: 10px;
}

#modelcourse .flow_spot_title_box{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-left: -35px;
}

#modelcourse .img_flow_02{
	margin-bottom: 20px;
}

#modelcourse .btn_link{
	margin-top: 60px;
}

#modelcourse .btn_link_01{
	margin-top: 90px;
	margin-bottom: 90px;
}

#modelcourse .img_wave{
	text-align: center;
}

#modelcourse .flow_01{
		margin-left: 50px;
	}





/* トップへ戻るボタン */
#modelcourse .top_btn_01{
	margin-top: 100px;
	margin-bottom: 140px;
}



/*--------------------------------------------------*
 *   追加css(2026/04/14)
 *--------------------------------------------------*/
#modelcourse .course_box{
	justify-content: flex-start;
}
#modelcourse .course_item{
	margin-right: 4%;
}
#modelcourse .course_item:nth-child(4n){
	margin-right: 0%;
}



/*--------------------------------------------------*
 *   2026/04/20追加css
 *--------------------------------------------------*/
#modelcourse .img_start {
	margin-bottom: 10px;
}
#modelcourse .img_goal {
	margin-top: 10px;
}
#modelcourse .flow_list {
	background: url("../img/modelcourse/img_line_dottred.png") repeat-y 62px top;
	padding-top: 40px;
}
#modelcourse .flow_list .time {
	font-size: 16px;
	background: url("../img/modelcourse/icon_circle.png") no-repeat left top;
	margin-left: 32px;
	padding: 20px 0px 80px 70px;
	position: relative;
}
#modelcourse .flow_list .time span {
	display: block;
	background: url("../img/modelcourse/img_line_time.png") no-repeat left center;
	padding-left: 40px;
}
#modelcourse .flow_list .inside {
	display: -webkit-box;
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 80px;
}
#modelcourse .flow_list .inside .photo_pc {
	width: 402px;
}
#modelcourse .flow_list .inside .photo_pc img {
	padding-top: 20px;
}
#modelcourse .flow_list .inside .box {
	width: calc(100% - 402px);
	padding-right: 40px;
}
#modelcourse .flow_list .inside .box .number {
	display: -webkit-box;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 10px;
	margin-left: 32px;
}
#modelcourse .flow_list .inside .box .number .square {
	width: 72px;
	height: 72px;
	font-size: 26px;
	color: #00b4dc;
	font-weight: 800;
	text-align: center;
	background: url("../img/modelcourse/icon_square.png") no-repeat left top;
	padding-top: 10px;
}
#modelcourse .flow_list .inside .box .number .spot_name {
	width: calc(100% - 72px);
	font-size: 18px;
	color: #00b4dc;
	font-weight: 600;
	line-height: 1.6;
	background: url("../img/modelcourse/img_line_time.png") no-repeat left 36px;
	padding-top: 20px;
	padding-left: 36px;
}
#modelcourse .flow_list .inside .box .memo {
	font-size: 15px;
	margin-bottom: 50px;
	margin-left: 140px;
}
#modelcourse .flow_list .inside .box .bt_black_arrow {
	margin-left: 140px;
}



/* スマホレイアウト */
@media (max-width: 1024px) {
	
	#modelcourse{
		font-size: 14px;
	}
	
	
	
	
	
	/* コンテンツ幅 */
	#modelcourse .contents{
		max-width:900px;
		width: 100%;
		margin:0 auto;
		padding: 0px 15px;
	}
	
	#modelcourse .contents1{
		max-width:1000px;
		width: 100%;
		margin:0 auto;
		padding: 0px 15px;
	}
	
	
	
	
	
	/* メインビジュアル */
	#modelcourse .main{
		width: 100%;
		height: auto;
		background-image:none;
	}
	
	#modelcourse .main_text_01{
		font-size: 28px;
		line-height: 24px;
		letter-spacing: 0px;
		padding-top: 20px;
		text-align: center;
		position: static;
	}

	#modelcourse .main_text_02{
		font-size: 22px;
		margin-top: 10px;
		padding-bottom: 20px;
		text-align: center;
		position: static;
	}
	
	#modelcourse .main_sp{
		width: 100%;
		height: auto;
		background-image:url("../img/modelcourse/img_main_01_sp.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}
	
	#modelcourse .img_main_sp{
		width: 100%;
		height: 250px;
		background-image:url("../img/modelcourse/img_main_sp.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}


	
	
	
	/* タイトル */
	#modelcourse .title{
		font-size: 22px;
		margin: 40px 0px;
		margin-bottom: 20px;
	}
	
	
	
	
	
	/* ページ内ボタン */
	#modelcourse .page1{
		text-align: center;
		margin: 0px 15px;
	}

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

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

	#modelcourse .modelcourses_btn{
		display: flex;
		justify-content: center;
		margin-bottom: -12px;
		align-items: flex-end;
		height: 80px;
	}

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

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

	#modelcourse .page3:hover,
	#modelcourse .page3.active {
		content: url("../img/modelcourse/page3_hover_sp.png");
	}
	
	
	
	
	
	/* モデルコース */
	#modelcourse .modelcourse{
		background-color: #F0F0EC;
		padding-top: 40px;
	}

	#modelcourse .course_title{
		font-size: 14px;
		height:48px;
		overflow: hidden;
	}

	#modelcourse .course_time{
		font-size: 12px;
		margin-top: 10px;
		padding-bottom: 5px;
	}
	
	#modelcourse .area_text{
		margin-left: 5px;
	}

	#modelcourse .course_box{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	#modelcourse .course_item{
		width: 46%;
		margin-bottom: 45px;
	}
	#modelcourse .course_item .img_course{
		margin-top: 10px;
		text-align: center;
		width:100%;
		height: 160px;
		overflow: hidden;
	}
	#modelcourse .course_item .img_course img{
		width: auto;
		height: 100%;
		object-fit: cover;
	}
	
	
	
	
	
	/* ページネーション */
	#modelcourse .pagination_news{
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0 24px;
		margin-top: 10px;
		font-size: 16px;
		border-bottom: none;
		padding-bottom: 30px;
	}

	#modelcourse .pagination_news a{
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #000000;
	}

	#modelcourse .pagination_news a:hover{
		opacity: 0.7;
	}

	#modelcourse .pagination_news a:not(:hover){
		text-decoration: none;
	}

	#modelcourse .pagination_news .current a{
		background-color: #00C8DC;
		color: #ffffff;
		pointer-events: none;
		width: 26px;
		height: 26px;
	}

	#modelcourse .prev{
		margin-right: 0px;
	}

	#modelcourse .next{
		margin-left: 0px;
	}

	
	
	
	
	/* トップへ戻るボタン */
	#modelcourse .top_btn{
		margin-top: 65px;
		margin-bottom: 65px;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*--------------------------------------------------*
	 *   モデルコース詳細
	 *--------------------------------------------------*/
	/* メインビジュアル */
	#modelcourse .main_01{
		width: 100%;
		height: auto;
		background-image:url("../img/modelcourse/img_main_detail_back.png");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		padding-top: 0px;
		padding-bottom: 40px;
	}
	
	#modelcourse .img_main_detail_sp{
		width: 100%;
		height: 255px;
		background-image:url("../img/modelcourse/img_main_detail_sp.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}

	#modelcourse .main_01_box{
		display: block;
	}

	#modelcourse .main_text_box{
		width: 100%;
		margin-right: 40px;
		margin-top: 30px;
	}

	#modelcourse .main_text_box p{
		color: #ffffff;
	}

	#modelcourse .main_text_a{
		font-size: 16px;
		text-align: center;
	}

	#modelcourse .main_text_b{
		font-size: 22px;
		line-height: 30px;
		margin-top: 15px;
		text-align: center;
	}

	#modelcourse .main_text_c{
		font-size: 14px;
		margin-top: 25px;
	}

	#modelcourse .main_text_area{
		display: flex;
		justify-content: flex-start;
		padding: 8px 0px;
	}

	#modelcourse .main_text_area img{
		margin-right: 10px;
	}

	#modelcourse .main_text_time{
		border-top: 2px dotted #ffffff;
		padding: 8px 0px;
	}

	#modelcourse .main_text_area_box{
		border-top: 1px solid #ffffff; 
		border-bottom: 1px solid #ffffff;
		margin-top: 25px;
	}

	/* シェアボタン */
	#modelcourse .btn_share_box{
		display: flex;
		justify-content: center;
		margin-top: 40px;
	}

	#modelcourse .btn_share{
		display: flex;
		margin-right: 10px;
		margin-left: 10px;
	}
	
	
	
	
	
	/* 紹介スポット一覧 */
	#modelcourse .spot_list{
		border-radius: 20px;
		padding: 30px 25px;
		margin-top: 30px;
		padding-bottom: 20px;
		margin-bottom: 50px;
	}

	#modelcourse .spot_title_01{
		font-size: 22px;
	}

	#modelcourse .spot_title_02{
		font-size: 12px;
	}

	#modelcourse .border{
		display: none;
	}

	#modelcourse .spot_title_box{
		display: block;
		padding-bottom: 20px;
		text-align: center;
	}

	#modelcourse .check{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 10px;
		width: 100%;
	}

	#modelcourse .check img{
		margin-right: 5px;
		margin-top: 3px;
	}

	#modelcourse .check_box{
		display: block;
		margin-top: 20px;
	}
	
	
	
	
	
	/* 流れ */
	#modelcourse .flow{
		display: flex;
		justify-content: space-between;
		padding-left: 0px;
	}

	#modelcourse .flow_spot_item{
		display: block;
		margin-left: 0px;
	}

	#modelcourse .item_01{
		margin-top: 32px;
	}

	#modelcourse .item_02{
		margin-top: 55px;
	}

	#modelcourse .item_03{
		margin-top: 65px;
	}

	#modelcourse .item_04{
		margin-top: 53px;
	}

	#modelcourse .item_05{
		margin-top: 68px;
	}

	#modelcourse .item_06{
		margin-top: 53px;
	}

	#modelcourse .item_07{
		margin-top: 63px;
	}

	#modelcourse .flow_text_box{
		width: 100%;
		margin-right: 0px;
	}

	#modelcourse .flow_spot_title{
		font-size: 14px;
		font-weight: 600;
		color: #00B4DC;
		margin-bottom: 15px;
	}

	#modelcourse .border_01{
		width: 25px;
		height: auto;
		border-top: 1px solid #000000;
		margin-right: 15px;
	}

	#modelcourse .border_02{
		width: 25px;
		height: auto;
		border-top: 1px solid #000000;
		margin-top: -13px;
		margin-right: 10px;
	}

	#modelcourse .flow_spot_title_box{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-left: -35px;
	}

	#modelcourse .img_flow_02{
		margin-bottom: 20px;
	}

	#modelcourse .btn_link{
		margin-top: 30px;
	}

	#modelcourse .btn_link_01{
		margin-top: 70px;
		margin-bottom: 70px;
	}

	#modelcourse .img_wave{
		text-align: center;
	}

	#modelcourse .img_flow img{
		max-width: 200px;
		
	}
	
	#modelcourse .flow_text{
		margin-top: 15px;
	}
	
	#modelcourse .img_start{
		margin-left: -25px;
	}
	
	#modelcourse .img_goal{
		margin-left: -25px;
	}
	
	
	
	
	
	/* トップへ戻るボタン */
	#modelcourse .top_btn_01{
		margin-top: 70px;
		margin-bottom: 70px;
	}



/*--------------------------------------------------*
 *   追加css(2026/04/14)
 *--------------------------------------------------*/
#modelcourse .course_item{
	margin-right: 8%;
}
#modelcourse .course_item:nth-child(2n){
	margin-right: 0%;
}



/*--------------------------------------------------*
 *   2026/04/20追加css
 *--------------------------------------------------*/
#modelcourse .img_start {
	margin-bottom: 5px;
}
#modelcourse .img_goal {
	margin-top: 5px;
}
#modelcourse .flow_list {
	background: url("../img/modelcourse/img_line_dottred.png") repeat-y 10px top;
	background-size: 6px auto;
	padding-top: 30px;
}
#modelcourse .flow_list .time {
	font-size: 14px;
	background-size: 40px;
	margin-left: -8px;
	padding: 8px 0px 40px 45px;
}
#modelcourse .flow_list .inside {
	display: block;
	flex-wrap: nowrap;
	padding-bottom: 40px;
}
#modelcourse .flow_list .inside .photo_sp {
	margin-left: 75px;
}
#modelcourse .flow_list .inside .photo_sp img {
	padding-bottom: 16px;
}
#modelcourse .flow_list .inside .box {
	width: 100%;
	padding-right: 0px;
}
#modelcourse .flow_list .inside .box .number {
	margin-left: -12px;
}
#modelcourse .flow_list .inside .box .number .square {
	width: 50px;
	height: 50px;
	font-size: 18px;
	background-size: 50px;
}
#modelcourse .flow_list .inside .box .number .spot_name {
	width: calc(100% - 50px);
	font-size: 16px;
	background: url("../img/modelcourse/img_line_time.png") no-repeat left 22px;
	padding-top: 10px;
}
#modelcourse .flow_list .inside .box .memo {
	font-size: 14px;
	margin-bottom: 20px;
	margin-left: 75px;
}
#modelcourse .flow_list .inside .box .bt_black_arrow {
	margin-left: 75px;
}

}