@charset "UTF-8";
@import url(../../css/reset.css);
@import url(../../css/common.css);
/* css/common.css */
.inner {
		max-width: 960px;
		width: 100%;
		margin: 0 auto;
}

@media (max-width: 780px) {
		.inner {
				max-width: 90vw;
				width: 100%;
				margin: 0 auto;
		}
}

#sub {
		box-sizing: border-box;
		top: 210px;
		left: calc(50vw + 272px);
		height: 100%;
		width: 208px;
		position: fixed;
		overflow: auto;
		padding: 0;
		z-index: 10;
}

#sub h2 {
		font-size: 18px;
		font-weight: 600;
		color: #fff;
		margin: 0 0 25px;
}

#sub ul {
		display: flex;
		border-left: 1px solid #fff;
		flex-wrap: wrap;
		align-items: flex-start;
		width: 100%;
}

#sub ul li a {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		width: 208px;
		margin-bottom: 15px;
}

#sub ul li a span {
		font-size: 15px;
		line-height: 1.7;
		padding-left: 15px;
		flex-basis: 42px;
		display: block;
		color: #fff;
}

#sub ul li a p {
		font-size: 14px;
		line-height: 1.7;
		flex-basis: 166px;
		display: block;
		color: #fff;
}

.hidden {
		display: none;
		/* 要素を非表示にする */
		animation: fade .2s ease-in-out forwards;
		pointer-events: none;
		/* 重要 */
}

@keyframes fade {
		from {
				opacity: 1;
		}
		to {
				opacity: 0;
		}
}

.contents {
		width: 704px;
		margin-right: 256px;
}

.contents .head_img {
		width: 640px;
		margin: 0 0 30px;
}

.contents .head_img img {
		max-width: 640px;
}

.contents h1 {
		font-size: 41px;
		color: #fff;
		margin: 0 0 10px;
}

.contents h6 {
		font-size: 15px;
		font-weight: 600;
		line-height: 1;
		color: #009FE8;
		margin-bottom: 50px;
}

.contents .ttl {
		background-image: url(../img/ttl_bg.svg);
		background-repeat: no-repeat;
		background-size: contain;
		width: 364px;
		height: 53px;
}

.contents .ttl h3 {
		font-size: 23px;
		color: #1349A6;
		padding: 11px 0 0 22px;
}

.contents .ttl h3 span {
		font-size: 26px;
		font-weight: 500;
}

.contents .recommend {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		width: 100%;
		align-items: flex-start;
		margin: 15px 0 50px;
}

.contents .recommend .icon {
		background-image: url(../img/recommend_icon.svg);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: top left;
		width: 41px;
		height: 45px;
		flex-basis: 48px;
		border-bottom: none;
		padding-bottom: 0;
		margin-bottom: 0;
}

.contents .recommend li {
		flex-basis: 656px;
		font-size: 21px;
		color: #fff;
		padding: 10px 0 15px 15px;
		margin-bottom: 10px;
		border-bottom: 2px dotted #fff;
}

.contents .laurel_lt {
		width: 704px;
		min-height: 192px;
		max-height: 255px;
		height: 100%;
		margin: 0 auto 40px;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
}

.contents .laurel_lt .laurel_bx {
		flex-basis: 96px;
		width: 96px;
		height: 88px;
		background-image: url("../img/laurel_g_bg.svg");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		position: relative;
}

.contents .laurel_lt .laurel_bx p {
		position: absolute;
		top: 48%;
		left: 50%;
		transform: translate(-50%, -52%);
		-webkit-transform: translate(-50%, -52%);
		-ms-transform: translate(-50%, -52%);
		font-size: 13px;
		text-align: center;
		white-space: nowrap;
		line-height: 1.2;
		color: #E8D472;
}

.contents .laurel_lt .laurel_bx p .osw {
		font-size: 31px;
		font-weight: 500;
		line-height: 1;
		color: #E8D472;
}

.contents .laurel_lt .summary {
		flex-basis: 575px;
		width: 575px;
		height: auto;
		background-color: #fff;
		padding: 33px 13px 20px 16px;
		position: relative;
}

.contents .laurel_lt .summary h5 span {
		font-size: 22px;
		color: #1349A6;
		padding-left: 16px;
		margin-bottom: 15px;
		display: block;
}

.contents .laurel_lt .summary p {
		font-size: 15px;
		line-height: 2.2;
		color: #2D2D2D;
		padding-right: 16px;
}

.contents .laurel_lt .summary:before {
		content: "";
		position: absolute;
		bottom: 0;
		left: -80px;
		background: white;
		background: linear-gradient(106deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, white 50%, white 100%);
		width: 80px;
		height: 100%;
		display: inline-block;
}

.contents h4 {
		font-size: 19px;
		background-color: #0A72C5;
		padding: 15px;
		color: #fff;
		margin: 0 0 25px;
		border-radius: 2px;
}

.contents p {
		font-size: 16px;
		line-height: 2.2;
		color: #fff;
}

.contents p a {
		text-decoration: underline;
		color: #fff;
}

.c1 {
		width: 100%;
		height: auto;
		margin: 0 auto;
		background-color: rgba(19, 73, 166, 0.94);
		position: relative;
		z-index: 5;
		padding: 150px 0 80px;
}

.c2 {
		width: 100%;
		height: auto;
		margin: 0 auto;
		background-color: rgba(14, 58, 145, 0.9);
		position: relative;
		z-index: 5;
		padding: 20px 0 50px;
}

.c2 .inner .contents .ttl {
		margin: -42px 0 18px;
}

.c3 {
		width: 100%;
		height: auto;
		margin: 0 auto;
		background-color: rgba(19, 73, 166, 0.94);
		position: relative;
		z-index: 5;
		padding: 80px 0 80px;
}

.c3 .inner .contents .ttl {
		margin: 0 0 18px;
}

.s4 {
		background-color: rgba(14, 58, 145, 0.9) !important;
}

@media (max-width: 780px) {
		.contents {
				width: 90vw;
				margin-right: 0;
		}
		.contents .head_img {
				width: 90vw;
				margin: 0 0 30px;
		}
		.contents .head_img img {
				max-width: 100%;
		}
		.contents h1 {
				font-size: 6.15385vw;
				color: #fff;
				margin: 0 0 2.5vw;
		}
		.contents h6 {
				font-size: 2.17949vw;
				font-weight: 600;
				line-height: 1;
				color: #009FE8;
				margin-bottom: 8vw;
		}
		.contents .ttl {
				background-image: url(../img/ttl_bg.svg);
				background-repeat: no-repeat;
				background-size: contain;
				width: 65vw;
				height: 9.5vw;
		}
		.contents .ttl h3 {
				font-size: 3.84615vw;
				color: #1349A6;
				padding: 2.5vw 0 0 4vw;
		}
		.contents .ttl h3 span {
				font-size: 4.35897vw;
		}
		.contents .recommend {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				width: 100%;
				align-items: flex-start;
				margin: 2vw 0 10vw;
		}
		.contents .recommend .icon {
				background-image: url(../img/recommend_icon.svg);
				background-repeat: no-repeat;
				background-size: contain;
				background-position: top left;
				width: 7vw;
				height: 7.5vw;
				flex-basis: 10vw;
				border-bottom: none;
				padding-bottom: 0;
				margin-bottom: 0;
		}
		.contents .recommend li {
				flex-basis: 80vw;
				font-size: 3.58974vw;
				line-height: 1.7;
				color: #fff;
				padding: 0 0 2.5vw 0;
				margin-bottom: 2.5vw;
				border-bottom: 2px dotted #fff;
		}
		.contents .laurel_lt {
				width: 90vw;
				max-height: 100%;
				height: 100%;
				min-height: 36.923vw;
				margin: 0 auto 8vw;
				position: relative;
				background-color: #rgba 255, 255, 255, 0;
				border-radius: 1.02564vw;
				box-sizing: border-box;
		}
		.contents .laurel_lt .laurel_bx {
				width: 16.2vw;
				height: 15vw;
				background-image: url("../img/laurel_g_bg.svg");
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center;
				position: absolute;
				top: 0;
				left: 0;
		}
		.contents .laurel_lt .laurel_bx p {
				position: absolute;
				top: 48%;
				left: 50%;
				transform: translate(-50%, -52%);
				-webkit-transform: translate(-50%, -52%);
				-ms-transform: translate(-50%, -52%);
				font-size: 2.05128vw;
				text-align: center;
				white-space: nowrap;
				line-height: 1.2;
				color: #E8D472;
		}
		.contents .laurel_lt .laurel_bx p .osw {
				font-size: 4.74359vw;
				font-weight: 500;
				line-height: 1;
				color: #E8D472;
		}
		.contents .laurel_lt .summary {
				width: 90vw;
				position: static;
				min-height: 100%;
				max-height: 100%;
				height: 100%;
				padding: 0 0 0;
				margin-bottom: 0;
				background-color: rgba(255, 255, 255, 0);
		}
		.contents .laurel_lt .summary h5 {
				padding: 0 0 0 20vw;
				margin-bottom: 0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 15vw;
		}
		.contents .laurel_lt .summary h5 span {
				font-size: 4.10256vw;
				line-height: 1.6;
				color: #fff;
				padding-left: 0;
				margin-bottom: 0;
				display: block;
		}
		.contents .laurel_lt .summary p {
				font-size: 3.33333vw;
				line-height: 2.2;
				color: #2D2D2D;
				margin-top: 3vw;
				background-color: #fff;
				border-radius: 1.02564vw;
				padding: 5vw;
		}
		.contents .laurel_lt .summary:before {
				content: none;
		}
		.contents h4 {
				font-size: 3.33333vw;
				background-color: #0A72C5;
				line-height: 1.6;
				padding: 3vw;
				color: #fff;
				margin: 0 0 4vw;
				border-radius: 0.25641vw;
		}
		.contents p {
				font-size: 3.33333vw;
				line-height: 1.9;
				color: #fff;
		}
		.c1 {
				width: 100%;
				height: auto;
				margin: 0 auto;
				background-color: rgba(19, 73, 166, 0.94);
				position: relative;
				z-index: 5;
				padding: 26vw 0 10vw;
		}
		.c2 {
				width: 100%;
				height: auto;
				margin: 0 auto;
				background-color: rgba(14, 58, 145, 0.9);
				position: relative;
				z-index: 5;
				padding: 3vw 0 5vw;
		}
		.c2 .inner .contents .ttl {
				margin: -9.5vw 0 3vw;
		}
		.c3 {
				width: 100%;
				height: auto;
				margin: 0 auto;
				background-color: rgba(19, 73, 166, 0.94);
				position: relative;
				z-index: 5;
				padding: 10vw 0 10vw;
		}
		.c3 .inner .contents .ttl {
				margin: 0 0 18px;
		}
		.s4 {
				background-color: rgba(14, 58, 145, 0.9) !important;
		}
}