@charset 'UTF-8';

/*----------------------------------------

	+ article
		+ .inner
			- .title
			- .links

-----------------------------------------*/

article {
	background: linear-gradient(#f2f4fb 0%, #d9f0f9 15%, #d9f0f9 100%);
}

article>div {
	max-width: 1280px;
	width: 100%;
	height: inherit;
	margin: auto;
	background-image: url(../img/i_p01.webp);
	background-position: right bottom -1px;
	background-size: 580px auto;
	background-repeat: no-repeat;
}

.inner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto auto 1fr;
	gap: 50px 11.23%;
	max-width: 1069px;
	width: 83.52%;
	margin: auto;
	padding: 82px 0 80px;
}

.title {
	grid-area: 1 / 2 / 2 / 3;
	width: calc(100% + 16%);
}

.title h1 {
	position: relative;
	letter-spacing: 0.03em;
}

.title h1 span {
	display: inline-block;
}

.text {
	grid-area: 2 / 2 / 3 / 3;
	width: 100%;
}

.text p {
	letter-spacing: 0.03em;
	text-align: justify;
}

.text p+p {
	margin-top: 36px;
}

.text li {
	color: #0979CC;
}

.links {
	grid-area: 1 / 1 / 4 / 2;
	width: 100%;
	position: relative;
	padding-block-start: 115px;
	padding-inline-start: 6px;
}

.links::before {
	content: '';
	display: block;
	position: absolute;
	right: 0;
	top: 35px;
	width: 100vw;
	height: 1px;
	background-color: var(--color_pointgold);
}


.links ul li+li {
	margin-top: 20px;
}

.links ul li a.btn-box {
	position: relative;
}

/* hover */
@media (hover: hover) {
	.links ul li a.btn-box::before {
		content: '';
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0 solid var(--color_pointgold);
		transition: opacity .2s ease-out, border .2s ease-out;
	}

	.links ul li a.btn-box:hover::before {
		opacity: 1;
		border: 7px solid var(--color_pointgold);
		transition: opacity .2s ease-out, border .2s ease-out;
	}
}

.btn-box[target="_blank"]::after {
	content: '';
	width: 30px;
	height: 30px;
	background-image: url(../../img/c_ic_browser_basicblue.svg);
	background-position: center;
	background-size: 40px 40px;
	background-repeat: no-repeat;
}

@media screen and (min-width: 769px) and (max-width: 1100px) {
	.inner {
		gap: 50px;
	}

	.title h1 {
		font-size: 3rem;
	}

	.links ul li a {
		font-size: 1.6rem;
	}
}

@media screen and (max-width: 768px) {
	article>div {
		background-size: contain;
	}

	.inner {
		display: block;
		width: 89.7%;
		max-height: 100%;
		padding: 11.28vw 0 73.067vw;
	}

	.title,
	.text,
	.links {
		transform: unset;
		max-width: 100%;
		width: 100%;
		margin: auto;
	}

	.title {
		padding-bottom: 20vw;
	}

	.title h1::after {
		content: '';
		display: block;
		position: absolute;
		width: 100vw;
		height: 1px;
		background-color: var(--color_pointgold);
		right: 0.75em;
		bottom: -9.23vw;
	}

	.text p+p {
		margin-top: 2em;
	}

	.links {
		padding-block-start: 10vw;
		padding-inline-start: 0;
	}

	.links::before {
		display: none;
	}

	.links ul {
		width: 100%;
	}

	.links ul a {
		width: 100%;
	}

	.btn-box[target="_blank"]::after {
		min-width: 6vw;
		width: 6vw;
		min-height: 6vw;
		height: 6vw;
		background-size: 8.4vw 8.4vw;
	}
}