@charset "UTF-8";

/* ++++++++++++++++++++++++++++++
guide page
++++++++++++++++++++++++++++++ */
#mainTitle .ja-title small {
	display: inline-block;
	border-block: 1px solid #8246aa;
}
#lowerBox .wBox { box-sizing: border-box; }
@media screen and (min-width:769px), print{
	#mainTitle .ja-title small {
		font-size: 20px;
		line-height: 1.6;
		vertical-align: middle;
		margin-right: 10px;
		margin-bottom: 7px;
	}
	#mainHeader { padding-bottom: 350px; }
	#lowerBox .wBox {
		margin-top: -255px;
		padding-bottom: 400px;
	}
}
@media screen and (max-width:768px){
	#mainHeader { padding-bottom: 24px; }
	#mainTitle { height: auto; }
	#mainTitle .ja-title small {
		display: block;
		font-size: 10px;
		line-height: 2;
		width: fit-content;
		padding: 0 5px;
		margin-bottom: 10px;
	}
	#lowerBox .wBox { background: none; }
}

#worry::before {
	content: "";
	display: block;
	background: url(../images/guide/img_worry.svg) no-repeat center center;
	background-size: cover;
}
#worry .title { color: #6633cc; }
#worry .uLine { text-decoration: underline; }
@media screen and (min-width:769px), print{
	#worry {
		margin-top: -10px;
		position: relative;
	}
	#worry::before {
		width: 227px;
		height: 310px;
		right: 70px;
		bottom: 5px;
		position: absolute;
	}
	#worry .title { font-size: 24px; }
	#worry .list {
		font-size: 18px;
		margin-top: 27px;
	}
	#worry .list li + li { margin-top: 12px; }
}
@media screen and (max-width:768px){
	#worry::before {
		width: 325px;
		height: 174px;
		margin-top: -20px;
		background-image: url(../images/guide/img_worry_sp.svg);
	}
	#worry .title {
		color: #8246aa;
		font-size: 18px;
		margin-top: 15px;
	}
	#worry .list li {
		line-height: 24px;
		text-indent: -1em;
		padding-left: 1em;
		margin-top: 13px;
	}
}

#contents .box .title { color: #6633cc; }
#contents .box .note {
	border-block: 1px solid #e6e6e6;
	font-family: "Noto Sans JP", sans-serif;
}
#contents .box a { text-decoration: underline; }
#footText { color: #6633cc; }
#footText .link a {
	color: #fff;
	display: block;
	text-align: center;
	border: 1px solid #6633cc;
	background-color: #6633cc;
	font-family: "Noto Sans JP", sans-serif;
}
@media screen and (min-width:769px), print{
	#contents .block {
		display: flex;
		justify-content: space-between;
	}
	#contents .block { margin-top: 150px; }
	#contents .block .image { width: 270px; }
	#contents .box {
		margin-top: -0.7em;
		width: calc(100% - 320px);
	}
	#contents .box > * + * { margin-top: 13px; }
	#contents .box .title { font-size: 20px; }
	#contents .box .note {
		padding: 22px 0;
		margin-top: 25px;
	}
	#footText .title {
		font-size: 24px;
		margin-bottom: 35px;
	}
	#footText .link a {
		font-size: 18px;
		max-width: 500px;
		padding: 22px 0;
		border-radius: 10px;
		margin-top: 90px;
	}
	#footText .link a:hover {
		color: #6633cc;
		background-color: #fff;
	}
	#footText { margin-top: 120px; }
}
@media screen and (max-width:768px){
	#contents .block {
		padding-top: 70px;
		.image { padding: 0 37px; }
		.box {
			font-size: 12px;
			margin-top: 42px;
			& > * + * { margin-top: 11px; }
			.title { font-size: 15px; }
			.note {
				margin-top: 26px;
				padding-block: 26px;
			}
		}
	}
	#footText {
		margin-top: 90px;
		.title { font-size: 18px; }
		.text {
			font-size: 12px;
			margin-top: 33px;
		}
		.link a {
			font-size: 13.5px;
			border-radius: 7.5px;
			padding-block: 15px 14px;
			margin-top: 45px;
		}
	}
}