@charset "Shift-JIS";


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


	p.text {
		font-size: 0.8125rem;
		line-height: 1.9;
		text-align: justify;
	}


	main div.inner {
		/* max-width: 1230px; */
	}


	/* -------------------------------------------------------------------------------------------
	*
	* mainVisual
	*
	* ----------------------------------------------------------------------------------------- */

	#mainVisual h2 {
		width: 100vw;
		margin: 0 auto;
	}

	#mainVisual p.announce {
		background-color: var(--color-blue);
		/*padding: 26px 0;*/
		padding: 34px 0;
		text-align: center;
	}

	#mainVisual p.announce picture {
		display: inline-block;
		vertical-align: top;
		width: 670px;
	}

	#mainVisual div.info {
		padding: 26px 0;
		text-align: center;
		background-color: #004ea2;
		color: #ffffff;
	}

	#mainVisual div.info p.lead {
		font-size: 1.125rem;
		margin: 0 0 20px 0;
	}

	#mainVisual div.info p.text {
		font-size: 0.875rem;
		margin: 0 0 20px 0;
		line-height: 1;
		line-height: 1.9;
		text-align: center;
	}

	#mainVisual div.info p.text a {
		color: #ffffff;
		text-decoration: underline;
	}

	#mainVisual div.info a.btn {
		display: inline-block;
		position: relative;
		font-size: 0.875rem;
		padding: 0.625rem 3.5rem;
		background-color: #ffffff;
		color: #004ea2;
	}

	#mainVisual div.info a.btn::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		right: 0.5625rem;
		bottom: 0;
		margin: auto;
		width: 0;
		height: 0;
		border-left: 0.3rem solid #004ea2;
		border-top: 0.2rem solid transparent;
		border-bottom: 0.2rem solid transparent;
	}

	#mainVisual p.comment {
		max-width: 900px;
		/*padding: 20px 0;*/
		padding: 0 0 40px 0;
		margin: 0 auto;
		line-height: 1.6;
		font-size: 0.75rem;
		text-align: center;
	}

	#mainVisual p.comment a {
		text-decoration: underline;
	}





	/* -------------------------------------------------------------------------------------------
	*
	* contents
	*
	* ----------------------------------------------------------------------------------------- */

	#contents {
		background-color: unset;
		background-image: url(../img/bg_pc.png);
		background-repeat: no-repeat;
		background-position: top center;
		background-size: cover;
		padding: 130px 0;
	}

	#contents .menu {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		max-width: 1024px;
		margin: 0 auto;
		gap: 18px;
	}

	#contents .menu section {
		background-color: #ffffff;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 30px 20px;
		display: flex;
	}

	#contents .menu section.flow {
		justify-content: space-between;
		-webkit-flex: 0 1 100%;
		flex: 0 1 100%;
	}

	#contents .menu section:not(.flow) {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 18px;
		width: calc((100% - 36px) / 3);
	}

	#contents .menu section.flow .menu_unit {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		width: 52.734%;
	}

	#contents .menu section h3 {
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--color-blue);
		font-size: 1.222rem;
		flex: 1;
		line-height: 1.4;
		padding: 0 0 0.8rem 0;
		position: relative;
		text-align: center;
	}

	#contents .menu section h3::after {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 78px;
		height: 4px;
		border-radius: 20px;
		background: linear-gradient(90deg, #57C4F5 0%, #0580F2 100%);
	}

	#contents .menu section .menu_img:not(.sp) {
		background-color: var(--color-light-blue);
		box-sizing: border-box;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		padding: 16px;
	}

	#contents .menu section.flow .menu_img:not(.sp) {
		box-sizing: border-box;
		width: 47.266%;
		max-width: 484px;
	}

	#contents .menu section .menu_img:not(.sp) img {
		max-width: 100%;
		height: auto;
	}

	#contents .menu section .menu_text {
		display: flex;
		font-size: 1rem;
		flex: 1;
		line-height: 1.6;
		text-align: left;
	}

	#contents .menu section.flow .menu_text {
		margin: 0 0 18px 0;
	}

	#contents .menu section .menu_comment {
		position: relative;
		background: var(--color-blue);
		border-radius: 100px;
		padding: 9px 18px;
		margin: 16px 0 24px 0;
		color: #ffffff;
		font-size: 0.889em;
		text-align: left;
	}

	#contents .menu section .menu_comment::after {
		content: '';
		position: absolute;
		bottom: -16px;
		left: 0;
		right: 0;
		margin: auto;
		width: 0;
		height: 0;
		border: 8px solid transparent;
		border-top: 10px solid var(--color-blue);
	}

	#contents .menu section.flow .btn {
		/* width: 284px; */
		width: 16rem;
	}

	html.fzL #contents .menu section:not(.flow) .btn {
		height: 4.2rem;
	}
	html.fzL #contents .menu section:not(.flow) .btn::after {
		right: 0.5rem;
	}








	/* -------------------------------------------------------------------------------------------
	*
	* news
	*
	* ----------------------------------------------------------------------------------------- */

	#news {
		background-color: var(--color-lower-base);
		padding: 36px 0;
	}

	#news dl {
		display: flex;
		gap: 66px;
		width: 100%;
		max-width: 1024px;
		margin: 0 auto;
		font-size: 0;
	}

	#news dl dt p {
		/*margin: 5rem 0 0 0;*/
		margin: 18px 0 0 0;
		font-size: 1.556rem;
		position: relative;
		display: inline-block;
		vertical-align: top;
		color: #0755a9;
	}

	#news dl dd {
		display: inline-block;
		vertical-align: middle;
		width: 80%;
		box-sizing: border-box;
	}

	#news dl dd ul li {
		display: flex;
		flex-direction: column;
		padding: 18px 0;
		position: relative;
		text-align: left;
		width: 100%;
	}

	#news dl dd ul li a {
		display: flex;
		flex-direction: column;
		position: relative;
	}
	#news dl dd ul li a::after {
		content: '';
		display: inline-block;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 39px;
		height: 39px;
		background-image: url(../../common/img/icon_arrow_thin.svg);
		background-size: contain;
		background-repeat: no-repeat;
	}

	#news dl dd ul li:nth-of-type(n+2)::before {
		content: '';
		display: block;
		width: 100%;
		height: 1px;
		background-image: url(../../common/img/dot_line_horizontal.png);
		background-repeat: repeat-x;
		background-position: 0 0;
		background-size: auto 100%;
		position: absolute;
		top: 0;
		left: 0;
	}


	#news dl dd ul li p {
		display: inline-block;
		vertical-align: top;
		text-align: left;
	}

	#news dl dd ul li p.date {
		color: var(--color-blue);
		font-size: 0.778rem;
		margin: 0 0 8px 0;
	}

	#news dl dd ul li p.text {
		font-size: 0.889rem;
		line-height: 1.6;
		text-align: left;
	}

	#news dl dd ul li a p.text {
		padding: 0 4rem 0 0;
	}


}

@media screen and (max-width : 959px) {


	p.text {
		font-size: 0.8125rem;
		line-height: 1.9;
		text-align: justify;
	}


	div.inner {
		max-width: 1230px;
	}


	/* -------------------------------------------------------------------------------------------
	*
	* mainVisual
	*
	* ----------------------------------------------------------------------------------------- */

	#mainVisual {
		/* padding: 5vw 0 0 0; */
		background-color: #ffffff;
	}

	#mainVisual h2 {
		width: 100vw;
		margin: 0 auto;
	}

	#mainVisual p.announce {
		background-color: var(--color-blue);
		/*padding: 3vw 0 4vw 0;*/
		padding: 3vw 0;
		text-align: center;
	}

	#mainVisual p.announce picture {
		display: inline-block;
		vertical-align: top;
		width: 94.27vw;
	}

	#mainVisual div.info {
		padding: 6vw 0;
		text-align: center;
		background-color: #004ea2;
		color: #ffffff;
	}

	#mainVisual div.info p.lead {
		font-size: 1.125rem;
		margin: 0 0 1rem 0;
	}

	#mainVisual div.info p.text {
		font-size: 0.875rem;
		margin: 0 0 1rem 0;
		line-height: 1.4;
		text-align: center;
	}

	#mainVisual div.info p.text a {
		color: #ffffff;
		text-decoration: underline;
	}

	#mainVisual div.info a.btn {
		display: inline-block;
		position: relative;
		font-size: 0.875rem;
		padding: 1rem 0;
		width: 85vw;
		background-color: #ffffff;
		color: #004ea2;
	}

	#mainVisual div.info a.btn::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		right: 0.75rem;
		bottom: 0;
		margin: auto;
		width: 0;
		height: 0;
		border-left: 0.3rem solid #004ea2;
		border-top: 0.2rem solid transparent;
		border-bottom: 0.2rem solid transparent;
	}

	#mainVisual p.comment {
		max-width: 90vw;
		/*padding: 1rem 0;*/
		padding: 0 0 1.5rem 0;
		margin: 0 auto;
		line-height: 1.6;
		font-size: 0.75rem;
		text-align: center;
	}

	#mainVisual p.comment a {
		text-decoration: underline;
	}


	/* -------------------------------------------------------------------------------------------
	*
	* contents
	*
	* ----------------------------------------------------------------------------------------- */

	#contents {
		background-color: unset;
		background-image: url(../img/bg_sp.png);
		background-repeat: no-repeat;
		background-position: top center;
		background-size: cover;
		padding: 7.18vw;
	}

	#contents .menu {
		display: -webkit-flex;
		display: flex;
		flex-direction: column;
		max-width: 100%;
		margin: 0 auto;
		gap: 5.128vw;
	}

	#contents .menu section {
		background-color: #ffffff;
		border-radius: 5.128vw;
		box-sizing: border-box;
		padding: 7.69vw 5.128vw;
		display: flex;
	}

	#contents .menu section {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 4.615vw;
		width: 100%;
	}

	#contents .menu section.flow .menu_unit {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		width: 100%;
	}

	#contents .menu section h3 {
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--color-blue);
		font-size: 5.64vw;
		flex: 1;
		line-height: 1.4;
		padding: 0 0 0.8rem 0;
		margin: 0 0 0.2rem 0;
		position: relative;
		text-align: center;
	}

	#contents .menu section h3::after {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 19.744vw;
		height: 1.28vw;
		border-radius: 100vw;
		background: linear-gradient(90deg, #57C4F5 0%, #0580F2 100%);
	}

	#contents .menu section .menu_img:not(.pc) {
		background-color: var(--color-light-blue);
		box-sizing: border-box;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		padding: 16px;
	}


	#contents .menu section .menu_img:not(.pc) img {
		max-width: 100%;
		height: auto;
	}

	#contents .menu section .menu_text {
		display: flex;
		font-size: 4.1vw;
		flex: 1;
		line-height: 1.6;
		text-align: left;
	}

	#contents .menu section.flow .menu_text {
		margin: 4.6vw 0;
	}

	#contents .menu section .menu_comment {
		position: relative;
		background: var(--color-blue);
		border-radius: 100px;
		padding: 3.6vw 0;
		margin: 4vw 0 5vw 0;
		width: 100%;
		color: #ffffff;
		font-size: 4.1vw;
		line-height: 1.4;
		text-align: center;
	}

	#contents .menu section .menu_comment::after {
		content: '';
		position: absolute;
		bottom: -4vw;
		left: 0;
		right: 0;
		margin: auto;
		width: 0;
		height: 0;
		border: 2vw solid transparent;
		border-top: 3vw solid var(--color-blue);
	}





	/* -------------------------------------------------------------------------------------------
	*
	* news
	*
	* ----------------------------------------------------------------------------------------- */

	#news {
		background-color: var(--color-lower-base);
		padding: 15.4vw 0;
	}

	#news dl dt p {
		font-size: 7.18vw;
		position: relative;
		display: inline-block;
		vertical-align: top;
		color: #0755a9;
	}

	#news dl dd ul li {
		box-sizing: border-box;
		padding: 5.128vw 0 5.128vw 0;
		position: relative;
		text-align: left;
		width: 100%;
	}

	#news dl dd ul li a {
		display: flex;
		flex-direction: column;
		position: relative;
	}

	#news dl dd ul li a::after {
		content: '';
		display: inline-block;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 10vw;
		height: 10vw;
		background-image: url(../../common/img/icon_arrow_thin.svg);
		background-size: contain;
		background-repeat: no-repeat;
	}



	#news dl dd ul li:nth-of-type(n+2)::before {
		content: '';
		display: block;
		width: 100%;
		height: 0.2vw;
		background-image: url(../../common/img/dot_line_horizontal.png);
		background-repeat: repeat-x;
		background-position: 0 0;
		background-size: auto 0.2vw;
		position: absolute;
		top: 0;
		left: 0;
	}


	#news dl dd ul li p {
		display: inline-block;
		vertical-align: top;
		text-align: left;
	}

	#news dl dd ul li p.date {
		color: var(--color-blue);
		font-size: 3vw;
		margin: 0 0 0.5rem 0;
	}

	#news dl dd ul li p.text {
		font-size: 3.6vw;
	}

	#news dl dd ul li a p.text {
		padding: 0 16vw 0 0;
	}





}