@charset "UTF-8";

/* ==============================================
   モバイル向け（最大幅 480px）
   ============================================== */
@media screen and (max-width:480px) {
	#index .mv .mv_inner p {
		width: calc(100% - 40px);
		margin: 0 auto;
		padding: 20px 0 110px;
		text-align: center;
		font-weight: 600;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	#index section.index_tab .index_tab_box ul.tab_menu {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-bottom: 20px;
	}

	#index section.index_tab .index_tab_box ul.tab_menu li {
		font-size: 12px;
		font-weight: bold;
		text-align: center;
		color: #fff;
		padding: 12px 4px 18px 4px;
	}

	#index section.index_tab .index_tab_box ul.tab_menu li span,
	#index section.index_tab .index_tab_box ul.tab_menu li.checked span {
		background: linear-gradient(90deg, rgba(31, 169, 197, 1), rgba(52, 84, 197, 1));
		position: relative;
		padding: 15px 0;
		border-radius: 30px;
		width: 100%;
		display: flex;
		font-size: 15px;
		justify-content: center;
		align-items: center;
	}

	#index section.news h2 {
		font-size: 24px;
		color: #1F82C5;
		text-align: center;
		word-break: keep-all;
		overflow-wrap: anywhere;
		line-height: 1.4;
	}

	#index section.index_tab .tab_inner h3 {
		color: #fff;
		font-size: 16px;
		text-align: center;
		font-weight: bold;
		width: calc(100% - 40px);
		margin: 0 auto;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	#index section.news {
		margin-top: 20px;
	}

	#index section.news h3 {
		font-size: 18px;
		font-weight: bold;
		margin: 0 auto;
		text-align: center;
		letter-spacing: 0.04em;
		padding-bottom: 20px;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	#index section.news .news_list li a figure {
		position: relative;
		overflow: hidden;
		min-height: 198px;
		display: block;
	}

	#index section.news .news_list li a figure img {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		height: auto;
		width: 100%;
		max-width: 100%;
		display: block;
	}

	#index section.news .news_list li .news_d_inner .detail,
	#index section.news .news_list li .news_d_inner .detail+p {
		font-size: 17px;
		line-height: 1.4em;
		letter-spacing: 0.04em;
		color: #333333;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	#index section.news .news_bg {
		background-color: #F3F3F3;
		margin-top: -10px;
		padding-top: 0px;
	}

	#index section.news p.presented {
		color: #A2A2A2;
		font-size: 16px;
		text-align: right;
		padding: 10px 0 10px;
	}
}

/* ==============================================
   タブレット・PC向け（最小幅 481px 以上）
   ============================================== */
@media screen and (min-width : 481px) {
	header #logo {
		max-width: 258px;
		display: block;
		margin: 20px 20px;
		transition: .3s;
	}

	#index section.mv .inner h1+p {
		padding: 40px 20px 90px;
		text-align: center;
		font-size: 17px;
		line-height: 1.8em;
		display: block;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	#index section.index_tab .index_tab_top {
		background-color: #fff;
		border-radius: 8px;
		padding: 25px 20px;
		max-width: 700px;
		margin: -50px auto 0;
		text-align: center;
	}

	#index section.index_tab .index_tab_top h2 {
		font-size: 32px;
		background: linear-gradient(90deg, rgba(31, 169, 197, 1), rgba(52, 84, 197, 1));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		word-break: keep-all;
		overflow-wrap: anywhere;
		line-height: 1.4;
	}

	#index section.index_tab .index_tab_box ul.tab_menu {
		margin: 0 10px 0 14px;
	}

	#index section.index_tab .index_tab_box ul.tab_menu li {
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		color: #fff;
		padding: 12px 6px 38px 6px;
	}

	#index section.index_tab .tab_inner h3 {
		color: #fff;
		line-height: 1.8em;
		letter-spacing: 0.05em;
		font-size: 24px;
		text-align: center;
		padding: 0 20px;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	#index section.news h3 {
		font-size: 22px;
		letter-spacing: 0.05em;
		text-align: center;
		padding-bottom: 40px;
		padding-left: 20px;
		padding-right: 20px;
		line-height: 1.4;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	#index section.news p.presented {
		color: #A2A2A2;
		font-size: 16px;
		text-align: right;
		padding: 25px 0 25px;
		/* max-width:480px で上書きされる可能性あり */
	}
}

/* ==============================================
   タブレット向け（最小幅 481px ～ 最大幅 980px）
   ============================================== */
@media screen and (min-width:481px) and (max-width:980px) {
	#index section.mv .inner h1 span.big {
		font-size: 68px;
		background: linear-gradient(90deg, rgba(31, 169, 197, 1), rgba(52, 84, 197, 1));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	#index section.news h2 {
		font-size: 24px;
		color: #1F82C5;
		text-align: center;
		word-break: keep-all;
		overflow-wrap: anywhere;
		background-color: #F3F3F3;
		width: 100%;
		margin: 0 auto;
		padding-top: 30px;
		border-radius: 8px 8px 0 0;
		margin-bottom: -10px;
	}

	#index section.index_tab .tab_inner h3 {
		color: #fff;
		font-size: 20px;
		text-align: center;
		font-weight: bold;
		width: calc(100% - 40px);
		margin: 0 auto;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	#index section.index_tab .tab_inner .intab_menu.pc {
		display: block;
		flex-wrap: inherit;
		justify-content: inherit;
		width: 100%;
		margin: 20px auto 0;
	}

	#index section.index_tab .tab_inner .intab_menu.pc li{
		padding: 0 20px;
	}

	#index section.news .news_list li a figure img {
		height: auto;
	}

	#index section.news .news_list li {
		width: 378px;
		display: block;
		background-color: #fff;
		box-shadow: 6px 6px 8px 6px rgba(0, 0, 0, .1);
		transition: .3s;
		max-width: 100%;
		padding-bottom: 80px;
		position: relative;
	}

	#index section.index_tab .index_tab_box ul.tab_menu li span,
	#index section.index_tab .index_tab_box ul.tab_menu li.checked span {
		background: linear-gradient(90deg, rgba(31, 169, 197, 1), rgba(52, 84, 197, 1));
		position: relative;
		padding: 15px 0;
		border-radius: 30px;
		width: 100%;
		display: flex;
		font-size: 15px;
		justify-content: center;
		align-items: center;
	}
}

/* ==============================================
   特定のタブレット向け（最小幅 481px ～ 最大幅 640px）
   ============================================== */
@media screen and (min-width:481px) and (max-width:640px) {
	#index section.index_tab .tab_inner .intab_menu.pc li {
		width: 100%;
		margin-bottom: 20px;
	}

	#index section.index_tab .tab_inner .intab_menu.pc li a {
		width: 100%;
		text-align: center;
		display: flex;
		background-color: #fff;
		border-radius: 40px;
		padding: 20px 0;
		text-align: center;
		box-sizing: border-box;
		transition: .3s;
	}

	#index section.news {
		margin-top: 50px;
	}
}

/* ==============================================
   より大きなタブレット向け（最小幅 641px ～ 最大幅 980px）
   ============================================== */
@media screen and (min-width:641px) and (max-width:980px) {
	#index section.index_tab .tab_inner .intab_menu.pc {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		margin: 20px auto 0;
	}

	#index section.index_tab .tab_inner .intab_menu.pc li {
		width: calc(100% / 3);
		margin-bottom: 20px;
	}

	#index section.index_tab .tab_inner .intab_menu.pc li a {
		width: 100%;
		text-align: center;
		display: flex;
		background-color: #fff;
		border-radius: 40px;
		padding: 20px 0;
		text-align: center;
		box-sizing: border-box;
		transition: .3s;
	}

	#index section.news {
		margin-top: 70px;
	}
}