@charset "utf-8";

/*----------------------------
	common
------------------------------*/
html {
	font-size: 10px;
}
@media (max-width: 1250px) {
	html {
		font-size: 10px;
	}
}
@media (max-width: 768px) {
	html {
		font-size: 2.2222vw;/*450pxの時のベース*/
	}
}

header,
footer {
	position: static;
}
.contentsMain {
	box-shadow: none;
}


/* フェードイン用 */
.fadeIn01,
.fadeIn02,
.fadeIn03,
.fadeIn04,
.fadeIn05,
.fadeIn06 {
	opacity: 0;
}

main {
	display: block;
	background: none;
}
.bgYellow {
	background: #FFF0E1;
}
.contentsMain {
	width: 100%;
	padding-bottom: 5.5rem;
}
.contentsMain .inner,
.noticeWrap .inner {
	max-width: 45rem;
	margin: 0 auto;
	padding: 0 2.5rem;
	position: relative;
}
@media (max-width: 768px) {
	.contentsMain .inner {
		max-width: 100%;
	}
}

h1 {
	font-size: 3.8rem;
	text-align: center;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #83CCD2;
	padding-top: 3.5rem;
}


/*----------------------------
	TOP
------------------------------*/
.contentsMainTop {
	padding-bottom: 10rem;
}

.lead {
	text-align: center;
	font-size: 1.5rem;
	line-height: 2;
	margin: 2.5rem -1.5rem 0;
}

/* icon */
.contentsMain .icon01 {
	content: "";
	position: absolute;
	width: 9.7rem;
	height: 8.5rem;
	top: -1.8rem;
	left: 1.5rem;
}
.contentsMain .icon02 {
	content: "";
	position: absolute;
	width: 6.8rem;
	height: 7.95rem;
	bottom: -4.9rem;
	left: 3.6rem;
}
.contentsMain .icon03 {
	content: "";
	position: absolute;
	width: 8.75rem;
	height: 10rem;
	bottom: -7rem;
	right: 2.4rem;
}

/* btnStart */
.btnStart {
	text-align: center;
	margin: 4rem auto 0;
	width: 22rem;
	position: relative;
}
.btnStart a {
	background: #fff;
	border: solid 1px #5B7D99;
	color: #5B7D99;
	display: block;
	padding: 1.9rem 0.7rem 1.9rem 2rem;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.3;
	border-radius: 5rem;
	box-shadow: 0.1rem 0.3rem 0.3rem rgba(0, 0, 0, 0.3);
	transition: .3s;
}
.btnStart a:hover {
	transform: translateY(0.3rem);
	box-shadow: none;
	opacity: 1;
}


/*----------------------------
	qWrap
------------------------------*/
.qWrap {
	margin-top: 4rem;
	background: #fff;
	border: 2px solid #83CCD2;
	border-radius: 2rem;
	position: relative;
	padding: 4rem 0.5rem 4.5rem;
	font-family: "M PLUS Rounded 1c", sans-serif;
}
.qWrap .qNum {
	position: absolute;
	top: -2.5rem;
	left: 50%;
	transform: translateX(-50%);
	background: #83CCD2;
	color: #fff;
	font-size: 2.2rem;
	min-width: 5rem;
	height: 5rem;
	border-radius: 50%;
	text-align: center;
	line-height: 4.6rem;
	font-family: "Zen Maru Gothic", sans-serif;
	letter-spacing: 0.05em;
	padding: 0 0.5rem;
}
.qWrap h2 {
	font-size: 1.9rem;
	line-height: 1.5;
	text-align: center;
	color: #5B7D99;
	font-weight: 500;
	letter-spacing: 0.05em;
	transform: rotateZ(0.03deg);	/* 小さい文字がジャミるのを防ぐ用 */
}

/* qBtn */
.qBtn {
	text-align: center;
	margin: 2.2rem auto 0;
	width: 84%;
	position: relative;
}
.qBtn li + li {
	margin-top: 3rem;
}
.qBtn a {
	background: #fff;
	border: solid 1px #83CCD2;
	color: #83CCD2;
	display: block;
	width: 100%;
	padding: 1.5rem 0.2em;
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1.3;
	border-radius: 5rem;
	box-shadow: 0.1rem 0.3rem 0.3rem rgba(0, 0, 0, 0.3);
	transition: .3s;
	transform: rotateZ(0.03deg);	/* 小さい文字がジャミるのを防ぐ用 */
}
.qBtn a:hover {
	transform: rotateZ(0.03deg) translateY(0.3rem);
	box-shadow: none;
	opacity: 1;
}
.qBtn .letterSpacing04 a {
	letter-spacing: -0.04em;
}
.qBtn .txtMany a {
	width: 110%;
	margin-left: -5%;
}

/* icon */
.qWrapIcon01 {
	content: "";
	position: absolute;
	width: 8.8rem;
	height: 6.55rem;
	top: -4.2rem;
	left: -1rem;
}
.qWrapIcon02 {
	content: "";
	position: absolute;
	width: 5.25rem;
	height: 5.25rem;
	bottom: -2.2rem;
	right: 0.9rem;
}


/*----------------------------
	answerWrap
------------------------------*/
.answerWrap {
	margin-top: 4rem;
	background: #fff;
	border: 2px solid #83CCD2;
	border-radius: 2rem;
	position: relative;
	padding: 4rem 0.5rem 3rem;
	font-family: "M PLUS Rounded 1c", sans-serif;
}
.contentsMain .bgYellow .inner {
	padding-bottom: 5.5rem;
}
.answerWrap h2 {
	position: absolute;
	top: -2.5rem;
	left: 50%;
	transform: translateX(-50%);
	background: #83CCD2;
	color: #fff;
	font-size: 2.2rem;
	font-weight: 500;
	min-width: 10rem;
	height: 5rem;
	border-radius: 5rem;
	text-align: center;
	line-height: 4.6rem;
	font-family: "Zen Maru Gothic", sans-serif;
	letter-spacing: 0.05em;
}
.answerWrap .txtLead,
.answerWrap .itemName {
	font-size: 1.9rem;
	line-height: 1.5;
	text-align: center;
	color: #5B7D99;
	font-weight: 500;
	letter-spacing: 0.05em;
	transform: rotateZ(0.03deg);	/* 小さい文字がジャミるのを防ぐ用 */
}
.answerWrap .itemName {
	margin-top: 1rem;
}
.answerWrap .pic {
	text-align: center;
	margin: 1rem auto 0;
	width: 90.673575%;
}

/* onlineStore */
.answerWrap .onlineStore {
	margin: 1.5rem auto 0;
	text-align: center;
}
.answerWrap .onlineStore a {
	display: inline-block;
	font-size: 1.3rem;
	line-height: 1;
	font-weight: 300;
	color: #83CCD2;
	text-align: center;
	border: solid 1px #83CCD2;
	padding: 0.5rem 2.2rem 0.6rem 1.8rem;
	position: relative;
	border-radius: 2rem;
	font-family: "Noto Sans CJK JP", sans-serif;
}
.answerWrap .onlineStore a::after {
	content: "";
	border-top: solid 1px #83CCD2;
	border-right: solid 1px #83CCD2;
	width: 0.6rem;
	height: 0.6rem;
	transform: rotate(45deg);
	position: absolute;
	top: calc(50% - 0.3rem);
	right: 0.9rem;
}

/* btnToTop */
.contentsMain .btnToTop {
	margin-top: 5rem;
}
.btnToTop {
	text-align: center;
	margin: 6rem auto 0;
	width: 22rem;
	position: relative;
}
.btnToTop + .btnToTop {
	margin-top: 3rem;
}
.btnToTop a {
	background: #fff;
	border: solid 1px #5B7D99;
	color: #5B7D99;
	display: block;
	padding: 1.4rem 1rem 1.5rem;
	font-size: 1.8rem;
	letter-spacing: 0.04em;
	line-height: 1.3;
	border-radius: 2.5rem;
}
.btnToTop a span {
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 600;
}

/*----------------------------
	noticeWrap
------------------------------*/
.noticeWrap {
	padding: 6rem 0;
}
.noticeWrap p {
	font-size: 1.45rem;
	line-height: 1.66;
	text-align: justify;
}