@charset "utf-8";

main a{
	text-decoration: none;
	transition: .5s all;
}

ul li,
ol li{
	list-style: none;
}

main ol li{
	text-indent: -1em;
}

main img{
	width: 100%;
}

body{
	font-family: "Noto Sans JP", "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	width: 100%;
	margin: 0;
	padding: 0;
	font-weight: 400;
}

main p,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main a{
	margin-top: 0;
	margin-bottom: 0;
	font-family: "Noto Sans JP", "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}

/* ====================================================================================== 共通 */

body{
	background:#fff;
}

main .pc-only{ 
	display: none;
}

main .sp-only{
	display: block; 
}

:root{
	--blue: #DEEBFF;
}

main .bg_h1{
	background-color: var(--blue);
}

main h1{
	position: relative;
	text-align: left;
	font-size: 24px;
	line-height: 0.6;
}

main h2{
	position: relative;
	text-align: left;
	font-size: 24px;
	font-weight: 600;
	line-height: 0.6;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: solid 1px #CFCFCF;
}

main h2::after{
	position: absolute;
	bottom: -1px;
	content: "";
	display: block;
	height: 1px;
	width: 160px;
	background-color: #E60012;
}


/* ====================================================================================== SPレイアウト */

/* --------------------------------------------------------------- SP共通*/

main .bg_h1{
	padding: 24px 16px;
	margin-bottom: 60px;
}

main .container{
	margin: 0 16px;
}

main section{
	margin-bottom: 60px;
}

main section:last-child{
	margin-bottom: 80px;
}

main h3{
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 24px;
}


/* --------------------------------------------------------------- section_system*/

main .section_system .description{
	margin-bottom: 30px;
}


/* --------------------------------------------------------------- section_activity*/

main .section_activity h2{
	margin-bottom: 40px;
}

main .list_item{
	display: flex;
    flex-direction: column;
    align-items: center;
	margin-bottom: 40px;
}

main .list_item:last-child{
	margin-bottom: 0;
}

main .bg_h3_list{
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	width: 200px;
	aspect-ratio: 1 / 1;
	margin: 0 auto 20px;
	background-color: var(--blue);
	text-align: center;
}

main .bg_h3_list img{
	width: 30%;
	aspect-ratio: 1 / 1;
}

main .list_ol_activity{
	margin: 0 auto;
}

main .p_kurumin{
	margin-bottom: 20px;
}

main .img_kurumin{
	width: 30%;
}
main .container {
	width: auto;
}
.spNav .searchInput #SS_searchForm #SS_searchQuery {
	background:#fff;
}

/* ====================================================================================== PCレイアウト */

@media screen and (min-width:768px) {

	main .pc-only{
		display: block;
	}

	main .sp-only{
		display: none;
	}

	main .bg {
    	max-width: 800px;
	}

	main h1{
		font-size: 40px;
		width: 90%;
		max-width: 1146px;
		margin: 0 auto;
	}

	main .bg_h1{
		padding: 40px 0;
		margin-bottom: 80px;
	}
	
	main .container{
		width: 90%;
		max-width: 1146px;
		margin: 0 auto;
	}
	
	main section{
		margin-bottom: 80px;
	}
	
	main section:last-child{
		margin-bottom: 100px;
	}
	


/* --------------------------------------------------------------- section_system*/

	main .section_system .description{
		margin-bottom: 40px;
	}

	main .section_system img{
		display: block;
		max-width: 600px;
		margin: 0 auto;
	}

/* --------------------------------------------------------------- section_activity*/

	main .flexbox ul{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		column-gap: 20px;
	}

	main .list_item{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: calc((100% - 20px) / 2);
		margin-bottom: 40px;
	}

	main .list_item:last-child{
		margin-bottom: 0;
	}

	main .bg_h3_list{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-width: 200px;
		aspect-ratio: 1 / 1;
		margin: 0 40px 0 0;
	}

	main .bg_h3_list img{
		width: 30%;
		aspect-ratio: 1 / 1;
	}

	main .list_ol_activity{
		margin: 0 auto 0 0;
	}

	main .p_kurumin{
		margin: 0 40px 20px 0;
	}

	main .img_kurumin{
		width: 30%;
	}

	header nav#megaDropNav.pcNav .subNav {
		margin-bottom: 0 !important;
	}

	header .srchBox {
		padding: 4px 18px 0px !important;
	}
	header.fixed .srchBox_mn {
		width: 342px !important;
		height: 104px !important;
	}
	header.fixed .srchBox_mn .faqLink a {
		padding: 8px 12px !important;
	}

/* --------------------------------------------------------------- section_evaluation*/

	main .section_evaluation .description{
		margin-bottom: 15px;
	}

	main .section_evaluation img{
		display: block;
		max-width: 35%;
	}	
}