@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100..900&family=M+PLUS+Rounded+1c:wght@400;500;700;800;900&family=Roboto:ital,wdth,wght@0,75..100,100..900;1,75..100,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');

/* 「M PLUS Rounded 1c」は、windowsで小さい文字がジャミるので、20px（2rem）以下の場合、下記を追記する。 */
/* transform: rotateZ(0.03deg); */	/* 小さい文字がジャミるのを防ぐ用 */

.m-plus-rounded-1c-regular {
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 400;
	font-style: normal;
}
.m-plus-rounded-1c-medium {
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 500;
	font-style: normal;
}
.m-plus-rounded-1c-bold {
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 700;
	font-style: normal;
}
.m-plus-rounded-1c-extrabold {
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 800;
	font-style: normal;
}
.m-plus-rounded-1c-black {
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 900;
	font-style: normal;
}

/* <weight>: Use a value from 100 to 900 */
.jost {
	font-family: "Jost", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}

/* <weight>: Use a value from 100 to 900 */
/* <width>: Use a value from 75 to 100 */
.roboto {
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	font-variation-settings: "wdth" 75;		/* "wdth" 75;	"wdth" 87.5;	"wdth" 100; */
}

.zen-maru-gothic-light {
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 300;
	font-style: normal;
}
.zen-maru-gothic-regular {
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 400;
	font-style: normal;
}
.zen-maru-gothic-medium {
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 500;
	font-style: normal;
}
.zen-maru-gothic-bold {
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
}
.zen-maru-gothic-black {
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 900;
	font-style: normal;
}

/*----------------------------
	common
------------------------------*/
html {
	font-size: 10px;
	color: #333;
}
@media (max-width: 1250px) {
	html {
		font-size: 0.8vw;
	}
}
@media (max-width: 768px) {
	html {
		font-size: 2.2222vw;/*450pxの時のベース*/
	}
}
body {
	overflow-wrap: anywhere;
}
main {
	/*margin: 0 auto;
	max-width: 100rem;*/
	font-size: 1.5rem;
	line-height: 1.5;
	color: #000;
	font-family: "Noto Sans CJK JP", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-feature-settings: "palt";
}
button, input, select, textarea {
	font: inherit;
	color: inherit;
	background: transparent;
	border: none;
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
button {
	cursor: pointer;
}
textarea {
	resize: vertical;
}
a {
	color: #333;
	text-decoration: none;
}
main a {
	color: #000;
}
a,
button {
	transition: opacity 0.3s ease-out;
}
a:hover,
button:hover {
	opacity: 0.7;
}
a:active,
a:focus,
button:active,
button:focus {
	opacity: 1;
}
img {
	max-width: 100%;
	height: auto;
}
img[src$=".svg"] {
	width: 100%;
	height: auto;
}
/* スクリーンリーダー用 */
.srOnly {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
/* for safari */
@supports (-webkit-hyphens: none) {
	[tabindex="-1"]:focus-visible {
		outline: none !important;
	}
}
.sp {
	display: none;
}
@media (max-width: 768px) {
	.sp {
		display: block;
	}
	.pc {
		display: none;
	}
}

/*----------------------------
	PC：左右固定表示
------------------------------*/
header,
footer {
	background: #fff;
	position: relative;
	z-index: 10;
}
main {
	display: flex;
	position: relative;
	background: #FFF0E1;
}
.contentsLeft {
	width: calc((100% - 45rem) / 2);
	order: 1;
}
.contentsRight {
	position: relative;
	width: calc((100% - 45rem) / 2);
	order: 3;
}
.contentsLeftInner {
	position: sticky;
	top: 0;
}
.contentsRightInner {
	position: sticky;
	top: 0;
}
.contentsMain {
	width: 45rem;
	order: 2;
	box-shadow: 0 0.1rem 2.5rem 0 #e3e3e3;
}
@media (max-width: 768px) {
	main {
		display: block;
	}
	.contentsMain {
		width: 100%;
		box-shadow: none;
	}
}

/* .contentsLeft */
.contentsLeft {
	font-family: "M PLUS Rounded 1c", sans-serif;
}
.contentsLeft .ttlPic {
	margin: 0 3.1rem 0 auto;
	width: 33.7rem;
}
.contentsLeft .ttlPic a {
	display: block;
}
.contentsLeft .ttlPic a p {
	text-align: center;
	color: #8DD7F7;
	font-size: 2.1rem;
	margin-top: 1.5rem;
	transform: rotateZ(0.03deg);	/* 小さい文字がジャミるのを防ぐ用 */
}

/* .contentsRight */
.contentsRight {
	font-family: "M PLUS Rounded 1c", sans-serif;
}
.contentsRight .navWrap {
	padding-top: 5rem;
	margin-left: 5.7rem;
	width: 17.5rem;
	color: #fff;
	font-size: 2.2rem;
	line-height: 1;
	text-align: center;
	transform: rotateZ(0.03deg);	/* 小さい文字がジャミるのを防ぐ用 */
}
.contentsRight .navWrap a {
	display: block;
	color: #fff;
}
.contentsRight .navWrap li + li {
	margin-top: 0.7rem;
}
.contentsRight .navWrap .navMain span {
	width: 100%;
	display: block;
	background: #8DD7F7;
	padding: 0.9rem 0;
	border-radius: 1.5rem;
	position: relative;
	margin-bottom: 1.5rem;
}
.contentsRight .navWrap .navMain span::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-top: 1.2rem solid #8DD7F7;
	border-right: 0.7rem solid transparent;
	border-left: 0.7rem solid transparent;
	left: 50%;
	bottom: -1.1rem;
	transform: translateX(-50%);
}
.contentsRight .navWrap .navMain.onlyNav a {
	background: #C7EAFB;
	padding: 0.9rem 0;
	border-radius: 1.5rem;
}
.contentsRight .navWrap .navMain.onlyNav.on a {
	background: #8DD7F7;
}
.contentsRight .navWrap .subNavList {
	width: 88%;
	font-size: 1.9rem;
	margin: 0 auto 2rem;
}
.contentsRight .navWrap .subNavList li a {
	padding: 0.7rem 0;
	border-radius: 1.3rem;
	background: #fff;
	color: #8DD7F7;
	border: 1px solid #8DD7F7;
}
.contentsRight .navWrap .subNavList li a.on {
	background: #8DD7F7;
	color: #fff;
}
.contentsRight .navWrap .topNav .subNavList li a {
	padding: 0.8rem 0;
	color: #fff;
	border: none;
}
.contentsRight .navWrap .topNav .subNavList li:nth-child(1) a {
	background: #78CCD0;
}
.contentsRight .navWrap .topNav .subNavList li:nth-child(2) a {
	background: #8ED8F8;
}
.contentsRight .navWrap .topNav .subNavList li:nth-child(3) a {
	background: #B7DA9B;
}
.contentsRight .navWrap .topNav .subNavList li:nth-child(4) a {
	background: #F8AA9E;
}
.contentsRight .navWrap .topNav .subNavList li:nth-child(5) a {
	background: #FFD57B;
}
.contentsRight .navWrap .topNav .subNavList li:nth-child(6) a {
	background: #C7B2D6;
	letter-spacing: -0.06em;
}

/* contentsMain */
.contentsMain .inner {
	padding: 0 2.5rem;
}

.txtRed {
	color: #FF0000;
}