@charset "utf-8";

/* ------------------------------
 ヘッダー・メイン・フッター調整（PC）
------------------------------ */
.header {
	position: static;
	margin-bottom: 40px;
}
.headerBlock.is-before-scrolled {
	box-shadow: none;
}
.footer {
	padding: 0 0 60px;
}
.contactBlock {
	position: relative;
	padding: 120px 0;
	background-color: #fff;
}
.contactBlock::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 546px;
	height: 347px;
	background: url(../img/contact_bg01.png) no-repeat 0 0 / cover;
}
.contactBlock::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 56px;
	left: 0;
	width: 299px;
	height: 398px;
	background: url(../img/contact_bg02.png) no-repeat 0 0 / cover;
}
.contactBlock > * {
	position: relative;
	z-index: 1;
}
.infoBlock > img {
	width: 170px;
    height: 52px;
}
.copyright {
	text-align: center;
}
.sideBtn {
	position: fixed;
}
.sideBtn a {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #c11920;
	color: #fff;
	font-weight: bold;
}
.sideBtn a span {
	display: block;
}
.sideBtn a span::before {
	content: "";
	display: inline-block;
	width: 28px;
	height: 19px;
	background: url(../img/icon_mail.svg) no-repeat 0 0 / cover;
}
@media print, screen and (min-width: 768px) {
	body {
		background-image: none;
		background-color: #fff;
	}
	.headerBlock {
		justify-content: center;
	}
	.contents3min .inBlock {
		width: 100%;
	}
	.infoBlock {
		justify-content: center;
		column-gap: 32px;
		padding-top: 60px;
	}
	.sideBtn {
		top: 160px;
		right: 0;
	}
	.sideBtn a {
		width: 90px;
		height: 210px;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
		font-size: 1.8rem;
		writing-mode: vertical-rl;
	}
	.sideBtn a span {
		display: block;
	}
	.sideBtn a span::before {
		margin-bottom: 10px;
	}
	.js-btn-pagetop {
		bottom: 40px !important;
	}
}
/* ------------------------------
 ヘッダー・メイン・フッター調整（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	body {
		background-image: none;
		background-color: #fff;
	}
	.header {
		margin-bottom: 30px;
	}
	.logoBlock {
		position: static;
	}
	.logoBox {
		justify-content: center;
		margin-left: 0;
		background-color: #fff;
	}
	.footer {
		padding: 0 0 100px;
	}
	.contactBlock {
		padding: 60px 0;
	}
	.contactBlock::before {
		width: 138px;
		height: 88px;
	}
	.contactBlock::after {
		bottom: 18px;
		width: 120px;
		height: 160px;
	}
	.infoBlock {
		padding-top: 50px;
	}
	.infoBlock > img {
		width: 150px;
		height: 46px;
		margin-bottom: 20px;
	}
	.info address {
		text-align: center;
	}
	.info address span {
		display: block;
	}
	.sideBtn {
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 200;
	}
	.sideBtn a {
		width: 250px;
		height: 60px;
		margin: 0 auto;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
	}
	.sideBtn a span::before {
		margin: 0 1em 4px 0;
		vertical-align: middle;
	}
	.js-btn-pagetop {
		bottom: 80px !important;
	}
}

/* ------------------------------
 漫画（PC）
------------------------------ */
h1 {
	font-weight: bold;
}
.f45 {
	font-size: 4.5rem;
}
.f45::before {
	content: "/";
	display: inline-block;
	margin-right: .25em;
	transform: scaleX(-1);
}
.f45::after {
	content: "/";
	display: inline-block;
}
@media print, screen and (min-width: 768px) {
	.comicsBlock {
		display: flex;
		flex-wrap: wrap;
		width: 1140px;
		margin-bottom: 80px;
	}
	.comicsBlock .cms_image {
		width: 562px;
	}
	.comicsBlock .cms_image.panel1 {
		order: 1;
		margin-bottom: 31px;
		margin-right: 16px;
	}
	.comicsBlock .cms_image.panel2 {
		order: 2;
		margin-bottom: 31px;
	}
	.comicsBlock .cms_image.panel3 {
		order: 3;
		margin-bottom: 23px;
		margin-right: 16px;
	}
	.comicsBlock .cms_image.panel4 {
		order: 4;
		margin-bottom: 23px;
	}
	.comicsBlock .cms_image.panel5 {
		order: 5;
		margin-bottom: 0px;
		margin-right: 16px;
	}
	.comicsBlock .cms_image.panel6 {
		order: 6;
		margin-bottom: 0px;
	}
}
/* ------------------------------
 漫画（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.comicsBlock {
		width: 90%;
		margin-bottom: 30px;
	}
	.comicsBlock .cms_image:first-child {
		margin-bottom: 16px;
	}
	.comicsBlock .cms_image:nth-child(2) {
		margin-bottom: 13px;
	}
	.comicsBlock .cms_image:nth-child(3) {
		margin-bottom: 5px;
	}
	.comicsBlock .cms_image:nth-child(4) {
		margin-bottom: 8px;
	}
	.comicsBlock .cms_image:nth-child(5) {
		margin-bottom: 9px;
	}
	.cms_text.f24 {
		margin-bottom: 10px;
	}
	.cms_text.f45 {
		margin-bottom: 15px;
	}
	.f45 {
		font-size: 3rem;
	}
}

/* ------------------------------
 見出し（PC）
------------------------------ */
.contents3min h2,
.contactBlock h2 {
	margin-bottom: 35px;
	font-size: 2.5rem;
	line-height: 1;
	text-align: center;
}
.contents3min h2 span,
.contactBlock h2 span {
	display: block;
	margin-bottom: 14px;
	font-family: 'Poppins', sans-serif;
	font-size: 6.2rem;
	font-weight: 600;
}
.contents3min h2::after,
.contactBlock h2::after {
	content: "";
	display: block;
	width: 40px;
	height: 12px;
	margin: 22px auto 0;
	background: url(../img/h1_decoration.svg) no-repeat 0 0 / cover;
}
.contents3min h3,
.contactBlock h3 {
	margin-bottom: 50px;
	font-size: 3rem;
	line-height: 1.6;
	font-weight: bold;
	text-align: center;
}
.contents3min h4 {
	margin-bottom: 40px;
	font-size: 2rem;
	line-height: 1;
	font-weight: bold;
}
@media print, screen and (min-width: 768px) {
}
/* ------------------------------
 見出し（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.contents3min h2,
	.contactBlock h2  {
		margin-bottom: 20px;
		font-size: 1.7rem;
	}
	.contents3min h2 span,
	.contactBlock h2 span {
		margin-bottom: 8px;
		font-size: 3.5rem;
	}
	.contents3min h2::after,
	.contactBlock h2::after {
		width: 30px;
		height: 9px;
		margin: 10px auto 0;
	}
	.contents3min h3,
	.contactBlock h3 {
		margin-bottom: 30px;
		font-size: 2.2rem;
	}
	.contents3min h4 {
		margin-bottom: 30px;
		font-size: 1.8rem;
	}
}
@media screen and (max-width: 359px) {
}

/* ------------------------------
 特長（PC）
------------------------------ */
.aboutBlock {
	position: relative;
	padding: 120px 0;
	background-color: #f5f3f0;
	background-image:
		radial-gradient(#fff 10%, transparent 10%),
		radial-gradient(#fff 10%, transparent 10%);
	background-size: 18px 18px;
	background-position: 0 0, 9px 9px;
}
.aboutBlock::before {
	content: "";
	display: block;
	position: absolute;
	top: -172px;
	left: 50%;
	width: 170px;
	height: 172px;
	margin-left: -370px;
	background: url(../img/img_giraffe_sp.png) no-repeat 0 0 / cover;
}
.aboutBlock::after {
	content: "";
	display: block;
	position: absolute;
	top: -72px;
	right: 50%;
	width: 156px;
	height: 80px;
	margin-right: -353px;
	background: url(../img/img_squirrel.png) no-repeat 0 0 / cover;
}
.cms_block.featureBlock {
	margin-bottom: 0;
}
.cms_block.featureBlock::after {
	content: none;
}
.featureBlock {
	display: flex;
}
.featureBlock .cms_image {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin-bottom: 0;
}
.featureBlock .cms_image img {
	width: 100%;
	height: auto;
}
.featureBlock .cms_image .cms_caption_b {
	display: inline-block;
	position: absolute;
	margin: 0;
	color: #fff;
	font-size: 2.8rem;
	line-height: 1.5;
	font-weight: bold;
	text-align: center;
}
.featureBlock .cms_image .cms_caption_b > p {
	font-family: 'Poppins', sans-serif;
	font-size: 5rem;
	font-weight: 600;
}
@media print, screen and (min-width: 768px) {
	.cms_block.featureBlock {
		margin-top: -60px;
	}
	.featureBlock .cms_image {
		width: 25%;
	}
	.featureBlock .cms_image .cms_caption_b > span {
		display: block;
	}
}
@media print, screen and (min-width: 1664px) {
	.featureBlock .cms_image .cms_caption_b > span {
		display: inline-block;
	}
}
/* ------------------------------
 特長（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.cms_block.aboutBlock {
		margin-top: 128px;
	}
	.aboutBlock {
		padding: 60px 5% 40px;
	}
	.aboutBlock::before {
		top: -97px;
		left: 9%;
		width: 90px;
		height: 97px;
		margin-left: 0;
	}
	.aboutBlock::after {
		top: -38px;
		right: 8.3%;
		width: 80px;
		height: 41px;
		margin-right: 0;
	}
	.contents3min .aboutBlock h3 span {
		display: inline-block;
		margin: 0 -.5em;
	}
	.cms_block.featureBlock {
		flex-wrap: wrap;
		margin-top: -40px;
	}
	.featureBlock .cms_image {
		width: 50%;
	}
	.featureBlock .cms_image .cms_caption_b {
		font-size: 1.6rem;
		padding: 0 .5em;
	}
	.featureBlock .cms_image .cms_caption_b > p {
		font-size: 3rem;
	}
	.featureBlock .cms_image .cms_caption_b > span {
		display: block;
	}
}

/* ------------------------------
 講座（PC）
------------------------------ */
.courseBlock {
	position: relative;
	margin-bottom: 0;
	padding: 120px 0 100px;
	background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f5f5f5 calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), #f5f5f5 calc(100% - 1px));
	background-size: 30px 30px;
	background-repeat: repeat;
	background-position: center center;
	text-align: center;
}
.courseBlock::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: calc(50% + 245px);
	width: 348px;
	height: 168px;
	background: url(../img/course_bg01.png) no-repeat 0 0 / cover;
}
.courseBlock::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 457px;
	height: 390px;
	background: url(../img/course_bg02.png) no-repeat 0 0 / cover;
}
.courseBlock > * {
	position: relative;
	z-index: 1;
}
.courseSeries ul {
	display: flex;
	column-gap: 35px;
}
.courseSeries ul li {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 200px;
	height: 200px;
	padding-left: 0;
	border-radius: 50%;
	background: rgb(229,131,127);
	background: radial-gradient(circle, rgba(229,131,127,1) 0%, rgba(195,111,108,1) 100%);
	color: #fff;
	line-height: 1.5;
	font-weight: bold;
}
.courseSeries ul li::before {
	content: none;
}
.courseSeries ul li:nth-child(2) {
	background: rgb(224,65,57);
	background: radial-gradient(circle, rgba(224,65,57,1) 0%, rgba(187,56,51,1) 100%);
}
.courseSeries ul li:nth-child(3) {
	background: rgb(157,95,170);
	background: radial-gradient(circle, rgba(157,95,170,1) 0%, rgba(97,66,132,1) 100%);
}
.courseSeries ul li:nth-child(4) {
	background: rgb(116,146,208);
	background: radial-gradient(circle, rgba(116,146,208,1) 0%, rgba(75,104,163,1) 100%);
}
.courseSeries ul li:nth-child(5) {
	background: rgb(108,120,137);
	background: radial-gradient(circle, rgba(108,120,137,1) 0%, rgba(65,81,104,1) 100%);
}
.courseSeries ul li > p {
	font-size: 1.5rem;
}
.courseSeries ul li > p + p {
	margin-top: 5px;
	font-size: 2rem;
}
@media print, screen and (min-width: 768px) {
	.courseSeries {
		width: 1140px;
		margin: 0 auto 50px;
	}
}
/* ------------------------------
 講座（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.courseBlock {
		padding: 60px 5%;
	}
	.courseBlock::before {
		left: calc(50% + 24px);
		width: 108px;
		height: 52px;
	}
	.courseBlock::after {
		width: 180px;
		height: 154px;
	}
	.courseSeries ul {
		flex-direction: column;
		align-items: center;
		row-gap: 30px;
	}
	.courseBlock .f45 {
		position: relative;
		font-size: 2.5rem;
		line-height: 1.3;
	}
	.courseBlock .f45 span {
		display: block;
	}
	.courseBlock .f45::before {
		display: block;
		position: absolute;
		top: 0;
		left: 5%;
		font-size: 5.5rem;
		line-height: 65px;
		font-weight: 100;
	}
	.courseBlock .f45::after {
		display: block;
		position: absolute;
		top: 0;
		right: 5%;
		font-size: 5.5rem;
		line-height: 65px;
		font-weight: 100;
	}
}
@media screen and (max-width: 390px) {
	.courseBlock .f45::before {
		left: 2.5%;
	}
	.courseBlock .f45::after {
		right: 2.5%;
	}
}
@media screen and (max-width: 375px) {
	.courseBlock .f45::before {
		left: 0;
	}
	.courseBlock .f45::after {
		right: 0;
	}
}
@media screen and (max-width: 360px) {
	.courseBlock .f45::before {
		left: -2.5%;
	}
	.courseBlock .f45::after {
		right: -2.5%;
	}
}

/* ------------------------------
 講師（PC）
------------------------------ */
.teacherBlock01,
.teacherBlock02,
.teacherBlock03 {
	margin-bottom: 0;
	background-color: #f7e1d8;
	text-align: center;
}
.teacherBlock01 {
	position: relative;
	padding: 120px 0 50px;
}
.teacherBlock01::after {
	content: "";
	display: block;
	position: absolute;
	top: 122px;
	left: calc(50% + 286px);
	width: 288px;
	height: 176px;
	background: url(../img/img_squirrel_full.png) no-repeat 0 0 / cover;
}
.teacherBlock01 h3 {
	margin-bottom: 0;
}
.teacherBlock02 {
	padding-bottom: 50px;
}
.teacherBlock02 .cms_image img {
	width: 150px;
	height: 150px;
	border-radius: 50%;
}
.teacherBlock02 .cms_text {
	position: relative;
	padding: 25px 35px;
	border-radius: 15px;
	background-color: #fff;
	text-align: left;
	filter: drop-shadow(0 0 15px rgba(0,0,0,.08));
}
.teacherBlock02 .cms_text::before {
	content: "";
	display: block;
	position: absolute;
}
.teacherBlock02 .cms_text p {
	margin-bottom: 10px;
	font-size: 1.9rem;
	line-height: 1.6;
	font-weight: bold;
}
.teacherBlock03 {
	padding-bottom: 100px;
}
@media print, screen and (min-width: 768px) {
	.teacherBlock02 {
		display: flex;
		align-items: center;
		padding-left: calc(50% - 570px);
		padding-right: calc(50% - 570px);
	}
	.teacherBlock02 .cms_image {
		width: 150px;
		margin-bottom: 0;
		margin-right: 39px;
	}
	.teacherBlock02 .cms_text {
		width: 346px;
		min-height: 182px;
		margin-bottom: 0;
	}
	.teacherBlock02 .cms_text::before {
		top: 82px;
		left: -15px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 9px 15.6px 9px 0;
		border-color: transparent #fff transparent transparent;
	}
	.teacherBlock02 .cms_text + .cms_image {
		margin-left: 70px;
	}
}
/* ------------------------------
 講座（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.teacherBlock01 {
		padding: 60px 5% 40px;
	}
	.teacherBlock01::after {
		top: 70px;
		left: calc(50% + 75px);
		width: 80px;
		height: 78px;
		background: url(../img/img_squirrel_full_sp.png) no-repeat 0 0 / cover;
	}
	.teacherBlock01 h3 span {
		display: block;
	}
	/* .teacherBlock02 .cms_image {
		display: flex;
		justify-content: center;
		align-items: center;
		column-gap: 20px;
	} */
	.teacherBlock02 .cms_image img {
		width: 200px;
		height: 200px;
	}
	.teacherBlock02 .cms_text {
		width: 82.6%;
		margin-left: 8.7%;
		margin-right: 8.7%;
		padding: 24px 25px 22px;
	}
	.teacherBlock02 .cms_text::before {
		top: -18px;
		left: 0;
		right: 0;
		width:0;
		height:0;
		margin: 0 auto;
		border-style:solid;
		border-width: 0 13px 18px 13px;
		border-color: transparent transparent #FFFFFF transparent;
	}
	.teacherBlock02 .cms_text p {
		margin-bottom: 10px;
		font-size: 1.7rem;
	}
	.teacherBlock02 .cms_text + .cms_image {
		margin-top: 50px;
	}
	.teacherBlock03 {
		padding: 0 5% 60px;
	}
	.teacherBlock03 .f45 {
		position: relative;
		font-size: 2.5rem;
		line-height: 1.3;
	}
	.teacherBlock03 .f45 span {
		display: block;
	}
	.teacherBlock03 .f45::before {
		display: block;
		position: absolute;
		top: 0;
		left: 10%;
		font-size: 5.5rem;
		line-height: 65px;
		font-weight: 100;
	}
	.teacherBlock03 .f45::after {
		display: block;
		position: absolute;
		top: 0;
		right: 10%;
		font-size: 5.5rem;
		line-height: 65px;
		font-weight: 100;
	}
}
@media screen and (max-width: 390px) {
	.teacherBlock03 .f45::before {
		left: 7.5%;
	}
	.teacherBlock03 .f45::after {
		right: 7.5%;
	}
}
@media screen and (max-width: 375px) {
	.teacherBlock03 .f45::before {
		left: 5%;
	}
	.teacherBlock03 .f45::after {
		right: 5%;
	}
}
@media screen and (max-width: 360px) {
	.teacherBlock03 .f45::before {
		left: 2.5%;
	}
	.teacherBlock03 .f45::after {
		right: 2.5%;
	}
}