@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,700i');
@import url('https://fonts.googleapis.com/css?family=Vast+Shadow');
@import url('https://fonts.googleapis.com/css?family=Fredericka+the+Great');
@import url('https://fonts.googleapis.com/css?family=Monoton');

body {
	margin: 0;
	padding: 0;
	background: #212121;
	color: #212121;
	font: 15px/1.86 "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	-webkit-text-size-adjust: 100%;
}
h1,h2,h3,h4,h5,h6 {
	margin: 0px;
	font-size: 100%;
	font-weight: normal;
	line-height: 1.66;
}
p {
	margin: 8px 0 24px 0;
}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
ol {
	margin: 0;
	padding: 0 0 0 16px;
}
dl,dt,dd {
	margin: 0px;
	padding: 0px;
}
a {
	text-decoration: none;
	transition: opacity 0.4s ease;
}
a:hover {
	opacity: 0.6;
}
a img {
	border: none;
}
img {
	width: auto\9;
	height: auto;
	max-width: 100%;
	border: 0;
	vertical-align: middle;
}
input,
button,
textarea {
	margin: 0;
	padding: 0;
	border-radius: 0;
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="submit"],
button,
textarea {
	margin: 0;
	padding: 0;
	-webkit-appearance: none;
}
.clearfix {
	zoom:1;
}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
#wrap {
	background: #fff;
}
.layout {
	position: relative;
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
}
.layout.min {
	max-width: 832px;
}
.material-icons {
	position: relative;
	top: -2px;
	font-size: inherit;
	vertical-align: middle;
}
.txtR {
	text-align: right !important;
}
.txtL {
	text-align: left !important;
}
.txtC {
	text-align: center !important;
}
@media (max-width: 1167px) {
.layout {
	width: auto;
	margin: 0 24px;
}
.layout.min {
	max-width: 832px;
	margin: 0 auto;
}
}
@media (max-width: 880px) {
.layout.min {
	width: auto;
	margin: 0 24px;
}
}
@media (max-width: 767px) {
body {
	font-size: 1
}
.layout, 
.layout.min{
	margin: 0 16px;
}
}



/*------------------------ header */
#header {
	height: 112px;
	border-bottom: 1px solid #e0e0e0;
}
#header .logo {
	width: 264px;
	padding-top: 16px;
}
#nav {
	position: absolute;
	top: 0;
	right: 0;
}
#nav li {
	display: table-cell;
	padding-left: 48px;
	font-size: 12px;
	font-weight: 500;
	text-align: center;
	line-height: 1.2;
}
#nav a {
	display: block;
	height: 112px;
	padding-top: 42px;
	box-sizing: border-box;
	border-bottom: 6px solid transparent;
	color: #616161;
}
#nav .cr a {
	border-bottom: 6px solid #ffc107;
}
#nav i {
	color: #ffc107;
	font-size: 22px;
}
#header .clearfix .ico{
    position: relative;
    top: -2px;
    vertical-align: middle;
    width: 22px;
    height: 22px;
}
#nav .h {
	display: block;
	color: #212121;
	font-size: 16px;
	font-weight: 700;
}
#nav .cr i {
	color: #ff9800;
}
#nav .cr .h {
	color: #ff9800;
}
.contactNav {
	position: absolute;
	top: 0;
	right: 0;
}
.contactNav ul {
	overflow: hidden;
	border-radius: 0 0 4px 4px;
}
.contactNav li {
	display: table-cell;
	vertical-align: top;
}
.contactNav a {
	overflow: hidden;
	display: block;
	padding: 0 8px;
	background: #f5f5f5;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	line-height: 32px;
}
.contactNav i {
	top: -1px;
	margin-right: 4px;
	font-size: 18px;
}
.contactNav .ico {
	display: inline-block;
	position: relative;
	top: -2px;
	width: 18px;
	margin-right: 4px;
}
.contactNav li:nth-child(1) a {
	padding-top: 2px;
	color: #4caf50;
	font-family: 'roboto', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
}
.contactNav li:nth-child(2) a {
	background: #4caf50;
}
.contactNav li:nth-child(3) a {
	background: #4caf50;
}
@media (max-width: 1167px) {
#header {
	height: auto;
}
#header .logo {
	padding-bottom: 16px;
}
#nav {
	display: none;
	position: relative;
	z-index: 10;
	top: 0;
	right: auto;
	margin: 0 -24px;
	background: #fff;
}
#nav li {
	display: block;
	padding: 0;
	border-top: 1px solid #e0e0e0;
	text-align: left;
	line-height: 1.3;
}
#nav a {
	position: relative;
	height: auto;
	padding: 16px 64px;
}
#nav a:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 24px;
	width: 8px;
	height: 8px;
	border-top: 2px solid #212121;
	border-right: 2px solid #212121;
	transform: translateY(-50%) rotate(45deg);
}
#nav .cr a {
	border: none;
}
#header .clearfix .ico {
	position: absolute;
	top: 50%;
	left: 24px;
	transform: translateY(-50%);
}
#header .btNav {
	position: absolute;
	top: 40px;
	right: 0;
	width: 32px;
	height: 24px;
}
#header .btNav span {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 4px;
	background: #212121;
	transform: translateY(-50%);
	transform-origin: center;
	transition: all 0.4s ease;
}
#header .btNav span:first-child {
	top: 0;
	transform: translateY(0);
}
#header .btNav span:last-child {
	top: 100%;
	transform: translateY(-100%);
}
#header .btNav.on span {
	opacity: 0;
}
#header .btNav.on span:first-child {
	opacity: 1;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}
#header .btNav.on span:last-child {
	opacity: 1;
	top: 50%;
	transform: translateY(-50%) rotate(-45deg);
}
.contactNav {
	position: fixed;
	z-index: 100;
	top: auto;
	bottom: 0;
	width: 100%;
}
.contactNav li {
	display: block;
	float: left;
	width: 100%;
}
.contactNav a {
	text-align: center;
}
.contactNav li:nth-child(1) {
	width: 100%;
}
.contactNav li:nth-child(2) a {
	line-height: 38px;
}
}
@media (max-width: 767px) {
#header .logo {
	width: 132px;
	padding: 8px 0;
}
#header .btNav {
	top: 20px;
	width: 20px;
	height: 16px;
}
#nav a {
	padding: 8px 64px;
}
.contactNav a {
	padding: 0;
	font-size: 14px;
	line-height: 40px;
}
}
@media (min-width: 1168px) {
#nav {
	display: block !important;
}
}




/*------------------------ footer */
#footer .btTop {
	position: relative;
	margin-bottom: 24px;
	padding-top: 48px;
	font-size: 12px;
	text-align: center;
	cursor: pointer;
	transition: opacity 0.4s ease;
}
#footer .btTop:hover {
	opacity: 0.6;
}
#footer .btTop:after {
	content: '';
	position: absolute;
	top: 24px;
	left: 50%;
	width: 16px;
	height: 16px;
	border-top: 4px solid #ff9800;
	border-left: 4px solid #ff9800;
	transform: translateX(-50%) rotate(45deg);
}
#footer .share {
	padding: 24px 0;
	border-top: 1px solid #e0e0e0;
}
#footer .share .h {
	color: #616161;
	font-size: 12px;
	text-align: center;
	line-height: 1.5;
}
#footer .share .h span {
	color: #212121;
	font-family: 'Fredericka the Great', cursive;
	font-size: 24px;
}
#footer .share .group {
	text-align: center;
}
#footer .share .group li {
	display: inline-block;
	width: 48px;
	margin:  0 8px;
}
#footer .information {
	padding-top: 24px;
	background: #616161;
	color: #fff;
}
#footer .information p {
	margin: 0;
}
#footer .information .logo {
	float: left;
	width: 28.5%;
	vertical-align: top;
}
#footer .information .logo img {
	width: 142px;
}
#footer .information .address {
	float: left;
	width: 48.5%;
	font-size: 14px;
	line-height: 1.5;
	vertical-align: top;
}
#footer .information .address .h {
	font-weight: 700;
}
#footer .information .address a {
	color: #fff;
}
#footer .information .address .info02 .ico img{
    width: 14px;
    height: 14px;
    padding-bottom: 2px;
}
#footer .information .address .info02 br {
	display: none;
}
#footer .information .address .info02 a:first-of-type{
    margin-right: 4px;
}
#footer .information .contact {
	float: right;
	width: 19.1%;
	vertical-align: top;
	text-align: right;
}
#footer .information .contact .phone {
	margin-bottom: 8px;
}
#footer .information .contact .phone a {
	display: inline-block;
	width: 160px;
	border-radius: 4px;
	background: #fff;
	color: #4caf50;
	font-family: 'roboto', sans-serif;
	font-size: 18px;
	font-weight: 500;
	text-align: center;
	line-height: 28px;
}
#footer .information .contact .ico {
	display: inline-block;
	width: 20px;
	margin-right: 4px;
}
#footer .information .contact .bt a {
	display: inline-block;
	position: relative;
	width: 160px;
	padding-left: 32px;
	box-sizing: border-box;
	border-radius: 4px;
	background: #4caf50;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	line-height: 28px;
}
#footer .information .contact .bt i {
	position: absolute;
	top: 0;
	left: 12px;
	font-size: 20px;
	line-height: 28px;
}
#footer p.copy {
	margin-top: 24px;
	background: #212121;
	font-size: 13px;
	text-align: center;
	line-height: 32px;
}
@media (max-width: 1167px) {
#footer {
	padding-bottom: 80px;
}
#footer .information .logo {
	float: none;
	width: auto;
	margin-bottom: 24px;
	text-align: center;
}
#footer .information .address {
	width: auto;
}
#footer .information .address .info02 br {
	display: inline;
}
#footer .information .contact {
	width: auto;
}
}
@media (max-width: 767px) {
#footer .share .h span {
	font-size: 18px;
}
#footer .information .logo {
	text-align: left;
}
#footer .information .logo img {
	width: 142px;
}
#footer .information .address {
	float: none;
	margin-bottom: 24px;
}
#footer .information .contact {
	display: none;
	float: none;
	text-align: left;
}
}



/* ---------------- content */
#contents h2 {
	position: relative;
	margin-bottom: 56px;
	padding-bottom: 16px;
	font-size: 24px;
	font-weight: 500;
	text-align: center;
}
#contents h2:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 112px;
	height: 4px;
	background: #ff9800;
	transform: translateX(-50%);
}
#contents h2 .min {
	color: #616161;
	font-size: 14px;
	font-weight: 400;
}
.blockGroup .block {
	margin-bottom: 24px;
}
.blockGroup .head {
	overflow: hidden;
	display: table;
	position: relative;
	width: 100%;
	/*margin-bottom: 24px;*/
	border-radius: 8px;
	line-height: 1.5;
}
.blockGroup .head .no {
	display: table-cell;
	width: 48px;
	height: 100%;
	background: #d4d4d4;
	color: #fff;
	font-family: 'roboto', sans-serif;
	font-size: 16px;
	font-weight: 700;
	font-style: italic;
	text-align: center;
	vertical-align: middle;
}
.blockGroup .head .num {
	font-size: 36px;
}
.blockGroup h3 {
	display: table-cell;
	height: 100%;
	padding: 8px 24px;
	background: #f5f5f5;
	font-size: 22px;
	font-weight: 700;
	vertical-align: middle;
}
.blockGroup.js_accordion .head {
	cursor: pointer;
}
.blockGroup.js_accordion .head:before {
	content: '';
	position: absolute;
	z-index: 2;
	top: 50%;
	right: 26px;
	width: 2px;
	height: 10px;
	background: #fff;
	transform: translate(50%, -50%);
	transition: all 0.4s ease;
}
.blockGroup.js_accordion .head:after {
	content: '';
	position: absolute;
	z-index: 2;
	top: 50%;
	right: 26px;
	width: 10px;
	height: 2px;
	background: #fff;
	transform: translate(50%, -50%);
	transition: all 0.4s ease;
}
.blockGroup.js_accordion h3 {
	padding-right: 48px;
}
.blockGroup.js_accordion h3:after {
	content: '';
	position: absolute;
	z-index: 1;
	top: 50%;
	right: 26px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid #d4d4d4;
	background: #d4d4d4;
	transform: translate(50%, -50%);
}
.blockGroup.js_accordion .head.on:before {
	height: 0;
}
.blockGroup.js_accordion .head.on:after {
	background: #d4d4d4;
}
.blockGroup.js_accordion .head.on h3 {
	background: #f5f5f5;
}
.blockGroup.js_accordion .head.on h3:after {
	background: none;
}
.blockGroup .body {
    padding-bottom: 24px;
	font-weight: 500;
}
.blockGroup.js_accordion .body {
	display: none;
    margin-top: 24px;
}
.blockGroup.js_accordion .body p{
    margin-top: 0;
}
.note {
	font-size: 14px;
	font-weight: 400;
}
.parallax {
	overflow: hidden;
	position: relative;
	height: 0;
	padding-top: 35.93%;
}
.parallax img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
@media (max-width: 767px) {
#contents h2 {
	margin-bottom: 40px;
	padding-bottom: 8px;
	font-size:  18px;
}
#contents h2:after {
	width: 80px;
	height: 2px;
}
.blockGroup .head .no {
	width: 32px;
	font-size: 14px;
}
.blockGroup .head .num {
	font-size: 18px;
}
.blockGroup h3 {
	padding: 4px 16px;
	font-size: 16px;
}
.blockGroup.js_accordion .head:before {
	right: 16px;
}
.blockGroup.js_accordion .head:after {
	right: 16px;
	width: 8px;
}
.blockGroup.js_accordion h3 {
	padding-right: 48px;
}
.blockGroup.js_accordion h3:after {
	right: 16px;
	width: 16px;
	height: 16px;
}
.blockGroup.js_accordion .head.on:before {
	height: 8px;
}
}



/* ---------------- headBlock */
.headBlock {
	padding: 32px 0;
}
.headBlock .h {
	color: #616161;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	line-height: 1.5;
}
.headBlock .h i {
	color: #ffc107;
	font-size: 48px;
}
.headBlock .h span {
	display: block;
	color: #212121;
	font-family: 'Vast Shadow', cursive;
	font-size: 34px;
}
@media (max-width: 767px) {
.headBlock .h {
	font-size: 14px;
}
.headBlock .h i {
	font-size: 32px;
}
.headBlock .h img{
    width: 32px;
    height: 32px;
}
.headBlock .h span {
	font-size: 24px;
}
}



/* ---------------- leadBlock */
.leadBlock {
	margin-bottom: 40px;
	padding: 24px 0;
	background: #ffeb3b;
}
.lessonArea .leadBlock {
	margin-bottom: 0;
}
.leadBlock .copy {
	color: #e91e63;
	font-size: 16px;
	text-align: center;
}
.leadBlock .copy span {
	display: inline-block;
	padding: 0 8px;
	border-radius: 4px;
	background: #fff;
	font-weight: 500;
	line-height: 32px;
}
.leadBlock .h {
	font-size: 30px;
	font-weight: 300;
	text-align: center;
}
.leadBlock .h strong {
	font-weight: 500;
}
.leadBlock .body {
	position: relative;
	min-height: 234px;
	padding-left: 246px;
	font-size: 16px;
	font-weight: 500;
}
.leadBlock .img {
	position: absolute;
	top: 50%;
	left: 0;
	width: 180px;
	transform: translateY(-50%);
}
@media (max-width: 767px) {
.leadBlock .copy {
	font-size: 15px;
}
.leadBlock .copy span {
	padding: 4px 8px;
	line-height: inherit;
}
.leadBlock .h {
	font-size: 16px;
}
.leadBlock .body {
	min-height: 0;
	padding-left: 0;
	font-size: 15px;
}
.leadBlock .img {
	position: static;
	margin: 0 auto 15px;
	transform: translateX(0);
}
}



/* ---------------- newsArea */
.newsArea {
	padding-bottom: 72px;
}
.newsArea .timeline01 {
	width: 400px;
	float: left;
	border: 1px solid #e8ebee;
	box-sizing: border-box;
}
.newsArea .timeline02 {
	overflow: auto;
	width: 400px;
	height: 500px;
	float: right;
	box-sizing: border-box;
}
@media (max-width: 1024px) {
.newsArea .layout.min {
	max-width: 712px;
}
.newsArea .timeline01 {
	width: 340px;
}
.newsArea .timeline02 {
	width: 340px;
}
}
@media (max-width: 767px) {
.newsArea .timeline01 {
	float: none;
	width: 288px;
	margin: 0 auto 24px;
}
.newsArea .timeline02 {
	float: none;
	width: 288px;
	margin: 0 auto;
}
}



/* ---------------- aboutArea */
.aboutArea .leadBlock {
	margin-bottom: 0;
}
.aboutArea .greeting {
	margin-bottom: 40px;
	padding-top: 40px;
}
.aboutArea .greeting .img {
	position: absolute;
	top: 0;
	left: 0;
	width: 288px;
}
.aboutArea .greeting .body {
	position: relative;
	min-height: 384px;
	padding-left: 352px;
}
.aboutArea .greeting .body .profile {
	font-size: 14px;
}
.aboutArea .greeting .body .name {
	font-size: 24px;
}
.aboutArea .feature {
	margin-bottom: 0;
	padding-top: 40px;
}
.aboutArea .feature h2 .num {
	color: #00bcd4;
}
.aboutArea .feature h2:after {
	background: #00bcd4 !important;
}
.aboutArea .feature .head {
	background: #e0f7fa;
}
.aboutArea .feature .head .no {
	background: #00bcd4;
}
.aboutArea .feature .catch {
	display: inline-block;
	margin-bottom: 8px;
	padding: 0 16px;
	border-radius: 4px;
	background: #f5f5f5;
	color: #00bcd4;
	line-height: 32px;
}
.aboutArea .feature h3 {
	background: #e0f7fa;
	color: #00bcd4;
}
.aboutArea .gallery {
	padding: 40px 0 16px;
	background: #f5f5f5;
}
.aboutArea .gallery ul {
	display: flex;
	flex-wrap: wrap;
	margin-left: -3%;
}
.aboutArea .gallery li {
	width: 30%;
	margin: 0 0 24px 3%;
}
@media (max-width: 767px) {
.aboutArea .feature {
	padding-top: 0;
}
.aboutArea .greeting .body {
	padding-left: 0;
}
.aboutArea .greeting .img {
	position: static;
	width: 180px;
	margin: 0 auto 24px;
}
.aboutArea .greeting .body .name {
	font-size: 18px;
}
.aboutArea .feature .block {
	margin-bottom: 0;
}
.aboutArea .gallery {
	padding: 40px 0 32px;
}
.aboutArea .gallery li {
	width: 47%;
	margin: 0 0 8px 3%;
}
}



/* ---------------- lessonArea */
.lessonArea .campaign h2:after {
	background: #f06292 !important;
}
.lessonArea .campaign {
	padding-top: 40px;
}
.lessonArea .campaign .lead {
	margin-bottom: 40px;
	padding: 24px 24px 40px;
	background: #f06292;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	line-height: 1.5;
}
.lessonArea .campaign .lead .headArea {
	margin: 16px 0;
}
.lessonArea .campaign .lead .headArea .sub {
	margin-bottom: 8px;
	font-weight: 900;
}
.lessonArea .campaign .lead .headArea h2 {
	margin-bottom: 0!important;
	font-weight: 900!important;
}
.lessonArea .campaign .lead .max {
	font-size: 24px;
	font-weight: 700;
}
.lessonArea .campaign .lead .w500 {
	font-weight: 500;
}
.lessonArea .campaign .lead .price {
	font-size: 30px;
}
.lessonArea .campaign .lead .detail {
	max-width: 832px;
	margin: 0 auto;
	padding: 24px 56px 1px;
	box-sizing: border-box;
	border-radius: 8px;
	background: #fff;
	color: #212121;
	font-weight: 700;
}
.lessonArea .campaign .lead .detail strong {
	font-weight: 500;
}
.lessonArea .campaign .lead .detail .color {
	color: #e91e63;
}
.lessonArea .campaign .lead .detail .d-lead {
	text-align: center;
}
.lessonArea .campaign .lead .detail .secWrap {
	margin-bottom: 32px;
}
.lessonArea .campaign .lead .detail .sec {
	padding: 24px 32px 8px;
	border: 4px solid #f06292;
	border-radius: 8px;
}
.lessonArea .campaign .lead .detail .sec h3 {
	display: inline-block;
	margin: 10px 0 14px;
	padding: 4px 32px;
	background: #f06292;
	border-radius: 8px;
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}
.lessonArea .campaign .lead .detail .sec .itemGroup {
	display: flex;
	justify-content: space-between;
	margin: 36px 0 24px;
}
.lessonArea .campaign .lead .detail .sec .item {
	position: relative;
	/* width: 192px; */
	width: calc((100% - 72px) / 3);
	margin: 0;
	background: #fce4ec;
	border-radius: 8px;
	box-sizing: border-box;
}
.lessonArea .campaign .lead .detail .sec .item:not(:last-child):after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: -30px;
	width: 24px;
	height: 24px;
	background: url(/img/ico_plus.svg) no-repeat center / 24px;
	transform: translateY(-50%);
}
.lessonArea .campaign .lead .detail .sec h4 {
	display: block;
	position: relative;
	top: -10px;
	width: 134px;
	margin: 0 auto;
	background: #f06292;
	border-radius: 6px;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	white-space: nowrap;
}
.lessonArea .campaign .lead .detail .sec .item p {
	margin-top: 4px;
	color: #e91e63;
	font-size: 18px;
}
.lessonArea .campaign .lead .detail .sec .item p:first-of-type {
	min-height: 42px;
	margin-bottom: 10px;
	line-height: 1.2;
}
.lessonArea .campaign .lead .detail .sec .fs13 { font-size: 13px; }
.lessonArea .campaign .lead .detail .sec .fs16 { font-size: 16px; }
.lessonArea .campaign .lead .detail .sec .fs28 { font-size: 28px; }

.lessonArea .campaign .lead .detail .sec .item .lsS {
	letter-spacing: -0.12em;
}
.lessonArea .campaign .lead .deals .max {
	font-size: 22px;
}
.lessonArea .campaign .lead .deals .max.yen {
	font-size: 28px;
}
.lessonArea .campaign .lead .detail .sec .item .mt10 {
	display: inline-block;
	margin-top: 10px;
}
.lessonArea .campaign .lead .detail .note {
	text-align: left;
}
.lessonArea .campaign .lead .detail br.spOnly {
	display: none;
}

.lessonArea .campaign .lead02 {
	margin-bottom: 53px;
	padding: 8px 16px;
	border: 4px solid #f06292;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
}
.lessonArea .campaign .lead02 .max {
	font-size: 24px;
	font-weight: 700;
}
.lessonArea .campaign .lead02 .color {
	color: #e91e63;
}
.lessonArea .campaign .txtBox {
	margin-bottom: 56px;
	padding: 24px 32px;
	border-radius: 8px;
	background: #fce4ec;
	color: #e91e63;
	font-size: 16px;
	font-weight: 500;
}
.lessonArea .campaign .txtBox p {
	margin: 0;
}
.lessonArea .campaign .item {
	margin-bottom: 48px;
}
.lessonArea .campaign .head {
	overflow: hidden;
	display: table;
	width: 100%;
	margin-bottom: 24px;
	background: #e0f7fa;
	border-radius: 8px;
	line-height: 1.5;
}
.lessonArea .campaign .head .no {
	width: 92px;
	background: #e91e63;
}
.lessonArea .campaign .head h3 {
	background: #f5f5f5;
	color: #e91e63;
}
.lessonArea .campaign .body {
	max-width: 608px;
	margin: 0 auto;
	font-weight: 500;
}
.lessonArea .campaign .contact {
	text-align: center;
}
.lessonArea .campaign .contact li {
	display: inline-block;
	margin: 0 16px;
	min-width: 256px;
}
.lessonArea .campaign .contact .h {
	margin-bottom: 8px;
	color: #616161;
	font-size: 14px;
	font-weight: 500;
}
.lessonArea .campaign .contact .phone {
	display: block;
	padding: 0 8px;
	border-radius: 4px;
	background: #f5f5f5;
	color: #4caf50;
	font-size: 24px;
	font-weight: 700;
	line-height: 48px;
}
.lessonArea .campaign .contact .phone .ico {
	display: inline-block;
	width: 24px;
	margin-right: 4px;
}
.lessonArea .campaign .contact .phone .ico img{
    padding-bottom: 4px;
}
.lessonArea .campaign .contact .bt {
	display: block;
	padding: 0 8px;
	border-radius: 4px;
	background: #4caf50;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 48px;
}
.lessonArea .campaign .contact .bt i {
	margin-right: 8px;
	font-size: 24px;
}
.lessonArea .lesson h2:after {
	background: #00bcd4 !important;
}
.lessonArea .lesson .kens9 {
	margin-bottom: 16px;
	color: #616161;
	font-size: 14px;
	text-align: center;
}
.lessonArea .lesson .kens9 .monoton {
	color: #00bcd4;
	font-family: 'Monoton', cursive;
	font-size: 40px;
}
.lessonArea .lesson .txtBox {
	margin-bottom: 56px;
	padding: 24px 32px;
	border-radius: 8px;
	background: #f5f5f5;
	color: #00bcd4;
	font-size: 16px;
	font-weight: 500;
}
.lessonArea .lesson .txtBox p {
	margin: 0;
}
.lessonArea .lesson .head .no {
	background: #00bcd4;
}
.lessonArea .lesson .head h3 {
	background: #e0f7fa;
	color: #00bcd4;
}
.lessonArea .lesson .head.on:after {
	background: #00bcd4;
}
.lessonArea .lesson h3:after {
	border-color: #00bcd4;
	background: #00bcd4;
}
.lessonArea .menu .head .no {
	background: #ff9800;
}
.lessonArea .menu .head h3 {
	background: #fff3e0;
	color: #ff9800;
}
.lessonArea .menu .head h3 .part {
	display: inline-block;
	margin-left: 16px;
	padding: 0 8px;
	border-radius: 4px;
	background: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 32px;
}
.lessonArea .menu .head.on:after {
	background: #ff9800;
}
.lessonArea .menu h3:after {
	border-color: #ff9800;
	background: #ff9800;
}
.lessonArea .price h2:after {
	background: #4caf50 !important;
}
.lessonArea .price .txtBox {
	margin-bottom: 56px;
	padding: 24px 32px;
	border-radius: 8px;
	background: #e8f5e9;
	color: #43a047;
	font-size: 16px;
	font-weight: 500;
}
.lessonArea .price .txtBox p {
	margin: 0;
}
.lessonArea .price .priceGroup {
	display: flex;
	flex-wrap: wrap;
}
.lessonArea .price .priceGroup .block {
	width: 48%;
	margin: 0 0 48px 3.6%;
}
.lessonArea .price .priceGroup .block:nth-child(odd) {
	margin-left: 0;
}
.lessonArea .price .priceGroup.even .block:nth-child(odd) {
	
	margin-left: 0;
}
.lessonArea .price .priceGroup.even .block:nth-child(even) {
	margin-left: 3.6%;
}
.lessonArea .price .priceGroup .head {
	margin-bottom: 32px;
	padding-bottom: 16px;
	border-bottom: 4px solid #a5d6a7;
	line-height: 1.5;
}
.lessonArea .price .priceGroup.course .head {
	border-bottom-color: #c5e1a5;
}
.lessonArea .price .priceGroup .shoulder {
	margin: 0;
	color: #616161;
	font-size: 14px;
}
.lessonArea .price .priceGroup h4 {
	color: #4caf50;
	font-size: 22px;
	font-weight: 700;
}
.lessonArea .price .priceGroup.course h4 {
	color: #8bc34a;
}
.lessonArea .price .priceGroup .itemGroup {
	border-top: 1px solid #e0e0e0;
}
.lessonArea .price .priceGroup .item {
	display: table;
	width: 100%;
	border-bottom: 1px solid #e0e0e0;
}
.lessonArea .price .priceGroup .item .h {
	display: table-cell;
	padding: 12px 0;
	text-align: left;
	vertical-align: middle;
}
.lessonArea .price .priceGroup.course .item .h {
	color: #8bc34a;
	font-size: 16px;
}
.lessonArea .price .priceGroup .item .course {
	display: inline-block;
	padding: 0 16px;
	background: #e8f5e9;
	border-radius: 8px;
	color: #4caf50;
	font-size: 16px;
	font-weight: 500;
	line-height: 40px;
}
.lessonArea .price .priceGroup .item .course .num {
	font-size: 24px;
	font-weight: 700;
}
.lessonArea .price .priceGroup .item .detail {
	display: table-cell;
	padding: 12px 0 12px 16px;
	color: #4caf50;
	font-size: 16px;
	font-weight: 500;
	text-align: right;
	line-height: 1.2;
	vertical-align: middle;
}
.lessonArea .price .priceGroup.course .item .detail {
	color: #8bc34a;
}
.lessonArea .price .priceGroup .item .detail .num {
	font-size: 28px;
	font-weight: 700;
}
.lessonArea .price .priceGroup .item .detail .min {
	color: #616161;
	font-size: 14px;
}
.lessonArea .price .priceGroup .block.special {
	width: 100%;
	margin-left: 0;
}
.lessonArea .price .priceGroup .photo {
	float: left;
	width: 48%;
	margin-bottom: 20px;
}
.lessonArea .price .priceGroup .bodyBlock {
	float: right;
	width: 48%;
	margin-bottom: 20px;
}
.lessonArea .price .priceGroup .bodyBlock .h {
	margin-bottom: 0;
	color: #4caf50;
	font-size: 16px;
	font-weight: 700;
}
.lessonArea .price .priceGroup .special .itemGroup {
	margin-bottom: 24px;
}
.lessonArea .price .priceGroup .special .course {
	padding: 8px 16px;
	line-height: 1.3;
}
.lessonArea .price .commentGroup {
	clear: both;
	border-top: 1px solid #e0e0e0;
	margin-bottom: 60px;
}
.lessonArea .price .commentGroup .item {
	display: flex;
	justify-content: space-between;
	padding: 32px 0;
}
.lessonArea .price .commentGroup .item:nth-child(odd) {
	flex-direction: row-reverse;
}
.lessonArea .price .commentGroup .img {
	width: 48%;
	margin-bottom: 0;
}
.lessonArea .price .commentGroup .body {
	width: 48%;
}
.lessonArea .price .commentGroup p {
	margin: 0;
}
.lessonArea .price .commentGroup p.h {
	display: block !important;
	margin-bottom: 8px;
	padding: 0 !important;
	color: #4caf50;
	font-weight: 700;
}

.lessonArea .price h3 {
	margin-bottom: 56px;
	font-size: 24px;
	font-weight: 500;
	text-align: center;
}
.lessonArea .price h3 span {
	display: inline-block;
	padding: 0 8px;
	border-radius: 4px;
	background: #8bc34a;
	color: #fff;
	font-size: 14px;
	line-height: 27px;
}
.lessonArea .price .priceGroup dl {
	padding-top: 16px;
}
.lessonArea .price .priceGroup dt {
	display: inline-block;
	margin-bottom: 4px;
	padding: 0 16px;
	border-radius: 4px;
	background: #f5f5f5;
	color: #8bc34a;
	font-weight: 700;
	line-height: 32px;
}
.lessonArea .price .priceGroup dd {
	font-size: 14px;
	font-weight: 500;
}
.lessonArea .price .notePrice {
	margin: 0;
}
.lessonArea section.menu {
	padding: 40px 0;
}
.lessonArea section.lesson {
	padding: 40px 0;
}
@media (max-width: 900px) {
	.lessonArea .campaign .lead .detail {
		padding: 24px;
	}
	.lessonArea .campaign .lead .detail .sec .item p {
		font-size: 16px;
	}
}
@media (max-width: 767px) {
.lessonArea .campaign .lead {
	margin-bottom: 24px;
	padding: 8px 16px;
	font-size: 14px;
}
.lessonArea .campaign .lead .headArea .sub {
	margin-bottom: 4px;
}
.lessonArea .campaign .lead p {
	margin-bottom: 16px;
}
.lessonArea .campaign .lead .max {
	font-size: 18px;
}
.lessonArea .campaign .lead .price {
	font-size: 20px;
}
.lessonArea .campaign .lead .detail {
	margin-bottom: 8px;
	padding: 16px;
}
.lessonArea .campaign .lead .detail .sec {
	padding: 20px 10px 8px;
	border-width: 2px;
}
.lessonArea .campaign .lead .detail .sec .itemGroup {
	display: block;
}
.lessonArea .campaign .lead .detail .sec .item {
	width: auto;
	margin-bottom: 56px;
	padding: 0 10px 10px;
}
.lessonArea .campaign .lead .detail .sec .item:last-child {
	margin-bottom: 0;
}
.lessonArea .campaign .lead .detail .sec .item:not(:last-child):after {
	top: inherit;
	right: 50%;
	bottom: -35px;
	transform: translate(50%,0);
	background-size: 20px;
}
.lessonArea .campaign .lead .detail .sec h3 {
	display: block;
	padding: 8px;
	font-size: 16px;
}
.lessonArea .campaign .lead .detail .sec .item .lsS {
	letter-spacing: inherit;
}
.lessonArea .campaign .lead .deals .max {
	font-size: 18px;
}
.lessonArea .campaign .lead .detail .note {
	font-size: 13px;
}
.lessonArea .campaign .lead .detail br.spOnly {
	display: inline;
}

.lessonArea .campaign .lead02 {
	margin-bottom: 24px;
	font-size: 14px;
}
.lessonArea .campaign .lead02 .max {
	font-size: 18px;
}
.lessonArea .campaign .txtBox, 
.lessonArea .lesson .txtBox, 
.lessonArea .price .txtBox {
	margin-bottom: 32px;
	padding: 16px;
	font-size: 15px;
}
.lessonArea .campaign .head .no {
	width: 64px;
}
.lessonArea .campaign .contact li {
	margin-bottom: 24px;
}
.lessonArea .campaign .contact .phone {
	font-size: 18px;
	line-height: 40px;
}
.lessonArea .campaign .contact .phone .ico {
	width: 32px;
}
.lessonArea .campaign .contact .bt {
	font-size: 16px;
	line-height: 40px;
}
.lessonArea .price .priceGroup .block {
	width: 100%;
	margin: 0 0 32px 0 !important;
}
.lessonArea .price .priceGroup .head {
	margin-bottom: 16px;
	padding-bottom: 4px;
	border-bottom-width: 2px;
}
.lessonArea .price .priceGroup h4 {
	font-size: 16px;
}
.lessonArea .price .priceGroup .item .h {
	padding: 8px 0;
}
.lessonArea .price .priceGroup .item .course {
	padding: 0 8px;
	font-size: 14px;
	line-height: 32px;
}
.lessonArea .price .priceGroup .item .course .num {
	font-size: 18px;
}
.lessonArea .price .priceGroup .item .detail {
	font-size: 14px;
}
.lessonArea .price .priceGroup .item .detail .num {
	font-size: 18px;
}
.lessonArea .price h3 {
	margin-bottom: 40px;
	font-size: 18px;
}
.lessonArea .menu .head h3 .part {
	position: relative;
	top: -2px;
	font-size: 13px;
	line-height: 24px;
}
.lessonArea .price .priceGroup .photo {
	float: none;
	width: auto;
	margin-bottom: 16px;
}
.lessonArea .price .priceGroup .bodyBlock {
	float: none;
	width: auto;
	margin-bottom: 16px;
}
.lessonArea .price .priceGroup .bodyBlock .h {
	font-size: 16px;
}
.lessonArea .price .special .item .h {
	display: block;
}
.lessonArea .price .special .item .h br {
	display: none;
}
.lessonArea .price .special .item .detail {
	display: block;
	padding: 0;
	text-align: left;
}
.lessonArea .price .commentGroup {
	border: none;
	margin: 0;
}
.lessonArea .price .commentGroup .item {
	display: block;
	padding: 16px 0;
}
.lessonArea .price .commentGroup .img {
	width: auto;
	margin-bottom: 8px;
}.lessonArea .price .commentGroup .body {
	width: auto;
}
}



/* ---------------- instructor */
.instructorArea .instructorGroup {
	padding-top: 30px;
}
.instructorArea .instructorGroup .block {
	margin-bottom: 80px;
}
.instructorArea .instructorGroup .block:after {
	content: '';
	display: block;
	clear: both;
}
.instructorArea .instructorGroup .img {
	float: left;
	width: 288px;
}
.instructorArea .instructorGroup .body {
	min-height: 384px;
	margin-left: 352px;
}
.instructorArea .instructorGroup .body-special {
	margin-left: 352px;
	width: 480px;
}
.instructorArea .instructorGroup .block:nth-child(even) .img {
	float: right;
}
.instructorArea .instructorGroup .block:nth-child(even) .body {
	margin-right: 352px;
	margin-left: 0;
}
.instructorArea .instructorGroup .name {
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 4px solid #9fa8da;
	color: #3f51b5;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
}
.instructorArea .instructorGroup .female .name {
	border-bottom-color: #f48fb1;
	color: #e91e63;
}
.instructorArea .instructorGroup .name .rub {
	font-size: 16px;
	font-weight: 500;
}
.instructorArea .instructorGroup .name .min {
	font-size: 18px;
	font-weight: 500;
}
.instructorArea .instructorGroup .name .min02 {
	font-size: 14px;
	font-weight: 500;
}
.instructorArea .instructorGroup .link {
	text-align: right;
}
.instructorArea .instructorGroup .female .link a {
	color: #e91e63;
}
.instructorArea .instructorGroup .female .link a:before {
	content: '';
	display: inline-block;
	border: 4px solid transparent;
	border-left: 6px solid #e91e63;
	vertical-align: middle;
}
.instructorArea .instructorGroup ul {
	list-style: disc;
	padding-left: 24px;
}
.instructorArea .partList {
	padding-left: 0 !important;
	margin-bottom: 16px;
}
.instructorArea .partList li {
	display: inline-block;
	margin: 0 8px 4px 0;
	padding: 0 8px;
	border-radius: 4px;
	background: #f5f5f5;
	color: #3f51b5;
	font-weight: 700;
	line-height: 32px;
}
.instructorArea .female .partList li {
	color: #e91e63;
}

.special-contents {
	margin-top: 40px;
}

.career-h {
	font-weight: 700;
	font-size: 18px;
	margin-bottom: 20px;
}

.artist-name {
	font-weight: 700;
	margin-bottom: 5px;
}


@media (max-width: 767px) {
.instructorArea .instructorGroup .block {
	margin-bottom: 32px;
}
.instructorArea .instructorGroup .img {
	float: none !important;
	width: 180px;
	margin: 0 auto 16px;
}
.instructorArea .instructorGroup .body {
	min-height: 0;
	margin: 0 !important;
}

.instructorArea .instructorGroup .body-special {
	min-height: 0;
	margin: 0 !important;
	width: 100%;
}

.instructorArea .instructorGroup .name {
	margin-bottom: 16px;
	padding-bottom: 8px;
	border-bottom-width: 2px;
	font-size: 18px;
	line-height: 1.3;
}
.instructorArea .instructorGroup .name .rub, 
.instructorArea .instructorGroup .name .min, 
.instructorArea .instructorGroup .name .min02 {
	font-size: 14px;
}
.instructorArea .instructorGroup ul {
	margin-bottom: 8px;
}
.instructorArea .partList li {
	font-size: 13px;
}
.career-h {
	font-size: 16px;
}
}



/* ---------------- qa */
.qaArea .head .no {
	background: #4caf50;
}
.qaArea .head h3 {
	background: #e8f5e9;
	color: #4caf50;
}
.qaArea .blockGroup.js_accordion .head.on:after {
	background: #4caf50;
}
.qaArea .blockGroup.js_accordion h3:after {
	border-color: #4caf50;
	background: #4caf50;
}
.qaArea .body {
	position: relative;
	padding-left: 80px;
}
.qaArea .body:before {
	content: 'A';
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	border-radius: 50%;
	background: #e8f5e9;
	color: #4caf50;
	font-family: 'roboto', sans-serif;
	font-size: 36px;
	font-weight: 700;
	font-style: italic;
	text-align: center;
	line-height: 48px;
}
@media (max-width: 767px) {
.qaArea .body {
	padding-left: 48px;
}
.qaArea .body:before {
	width: 32px;
	font-size: 18px;
	line-height: 32px;
}
}

/*voiceArea*/
.voiceArea{
	margin-top: 76px;
	margin-bottom: 78px;
}
#contents .voiceArea h2::after{
	background: #00bcd4;
}
#contents .voiceArea .txtGroup .txtBlock{
	margin-bottom: 60px;
	padding: 24px 30px 32px;
	border-radius: 10px;
	border: 2px solid #00bcd4;
	
}
#contents .voiceArea .txtGroup .txtBlock:last-of-type{
	margin-bottom: 0;
}
#contents .voiceArea .txtGroup .txtBlock .txt p{
	margin: 0 auto ;
	font-weight: 500;
}
#contents .voiceArea .txtGroup .txtBlock .tag{
	width: 80px;
	height: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 8px;
	background: #f5f5f5;
	color: #00bcd4;
	margin: 0 0 0 auto;
}
/* ---------------- contact */
.contactArea .contactGroup {
	display: flex;
	flex-wrap: wrap;
}
.contactArea .contactGroup li {
	width: 48%;
	margin-left: 3.6%;
	margin-bottom: 64px;
	text-align: center;
}
.contactArea .contactGroup li:nth-child(odd) {
	margin-left: 0;
}
.contactArea .contactGroup .h {
	margin-bottom: 16px;
	color: #616161;
	font-size: 16px;
	font-weight: 500;
}
.contactArea .contactGroup a {
	display: block;
	padding: 0 16px;
	border-radius: 4px;
	background: #f5f5f5;
	color: #212121;
	font-size: 18px;
	font-weight: 700;
	line-height: 64px;
}
.contactArea .contactGroup .ico {
	display: inline-block;
	width: 24px;
	margin-right: 4px;
}
.contactArea .contactGroup .ico img{
    padding-bottom: 4px;
}
.contactArea .contactGroup i {
	margin-right: 8px;
	color: #4caf50;
	font-size: 24px;
}
.contactArea .contactGroup .min {
	font-size: 16px;
	font-weight: 500;
}
.contactArea .contactGroup .tel, 
.contactArea .contactGroup .fax {
	margin: 0 8px;
}
.contactArea .contactGroup li:nth-child(1) a {
	color: #4caf50;
	font-size: 24px;
}
.contactArea .contactGroup li:nth-child(2) a {
	background: #4caf50;
	color: #fff;
}
.contactArea .contactGroup li:nth-child(2) i {
	color: #fff;
}
@media (max-width: 832px) {
.contactArea .contactGroup .tel, 
.contactArea .contactGroup .fax {
	display: block;
	margin: 0;
}
}
@media (max-width: 767px) {
.contactArea .contactGroup {
	display: block;
}
.contactArea .contactGroup li {
	width: auto;
	margin: 0 0 24px;
}
.contactArea .contactGroup .h {
	font-size: 14px;
}
.contactArea .contactGroup a {
	padding: 0 8px;
	font-size: 16px;
	line-height: 40px;
}
.contactArea .contactGroup .ico {
	width: 20px;
}
.contactArea .contactGroup .min {
	font-size: 14px;
}
.contactArea .contactGroup li:nth-child(1) a {
	font-size: 16px;
}
}


/* ---------------- access */
.accessArea .information {
	padding: 40px 0 64px;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
}
.accessArea .information p {
	margin: 0;
}
.accessArea .information .img {
	width: 224px;
	margin: 0 auto 64px;
}
.accessArea .information .name {
	margin-bottom: 16px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}
.accessArea .information .name .min {
	font-size: 14px;
}
.accessArea .information .info a {
	color: #212121;
}
.accessArea .information .info br {
	display: none;
}
.accessArea .information .ico {
	display: inline-block;
	width: 16px;
	margin-right: 2px;
}
.accessArea .information .ico img{
    padding-bottom: 2px;
}
.accessArea #map iframe {
	width: 100%;
	height: 358px;
	vertical-align: top;
}
.accessArea .accessGroup {
	padding: 26px 0;
	background: #f5f5f5;
}
.accessArea .accessGroup .layout {
	display: flex;
	justify-content: space-between;
}
.accessArea .accessGroup .mapImg {
	width: 48%;
	background: #fff;
	border-radius: 8px;
}
.accessArea .accessGroup .train {
	width: 48%;
	padding: 40px 24px;
	box-sizing: border-box;
	background: #fff;
	border-radius: 8px;
}
.accessArea .accessGroup .h {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
}
.accessArea .accessGroup .h i {
	margin-right: 4px;
	color: #616161;
	font-size: 22px;
}
.accessArea .accessGroup ul {
	list-style: disc;
	padding-left: 48px;
}
@media (max-width: 767px) {
.accessArea .information {
	padding-bottom: 24px;
}
.accessArea .information .img {
	width: 180px;
	margin-bottom: 24px;
}
.accessArea .information .address, 
.accessArea .information .info {
	text-align: left;
}
.accessArea .information .info br {
	display: inline;
}
.accessArea #map iframe {
	height: 240px;
}
.accessArea .accessGroup .layout {
	display: block;
}
.accessArea .accessGroup .mapImg {
	width: auto;
	margin-bottom: 16px;
}
.accessArea .accessGroup .train {
	width: auto;
	padding: 16px;
}
.accessArea .accessGroup ul {
	padding-left: 24px;
}
}



/* ---------------- hero */
.heroArea {
	position: relative;
	margin-bottom: 80px;
}
.heroArea .imgGroup {
	overflow: hidden;
	width: 100%;
}
.heroArea .imgGroup ul {
	position: relative;
	left: -100%;
}
.heroArea .imgGroup li {
	float: left;
}
.heroArea .imgGroup li img {
	width: 100%;
}
.heroArea .imgGroup li img.sp {
	display: none;
}
.heroArea .btPrev {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 0;
	width: 120px;
	height: 120px;
	margin-top: -60px;
	cursor: pointer;
	transition: opacity 0.4s ease;
}
.heroArea .btPrev:hover {
	opacity: 0.6;
}
.heroArea .btPrev:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	border-left: 7px solid #fff;
	border-bottom: 7px solid #fff;
	transform: rotate(45deg) translate(-50%, -50%);
	transform-origin: center;
}
.heroArea .btNext {
	position: absolute;
	z-index: 10;
	top: 50%;
	right: 0;
	width: 120px;
	height: 120px;
	margin-top: -60px;
	cursor: pointer;
	transition: opacity 0.4s ease;
}
.heroArea .btNext:hover {
	opacity: 0.6;
}
.heroArea .btNext:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 50%;
	width: 20px;
	height: 20px;
	border-top: 7px solid #fff;
	border-right: 7px solid #fff;
	transform: rotate(45deg) translate(-50%, -50%);
	transform-origin: center;
}
.heroArea .bt {
	position: absolute;
	bottom: -40px;
	left: 0;
	width: 100%;
	text-align: center;
}
.heroArea .bt li {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 0 4px;
	border-radius: 50%;
	background: #e0e0e0;
	cursor: pointer;
}
.heroArea .bt li.cr {
	background: #ffeb3b;
}
@media (max-width: 767px) {
.heroArea .imgGroup li img.pc {
	display: none;
}
.heroArea .imgGroup li img.sp {
	display: inline
}
.heroArea .btPrev, 
.heroArea .btNext {
	width: 40px;
	height: 40px;
	margin-top: -20px;
}
.heroArea .btPrev:after {
	width: 8px;
	height: 8px;
	border-left: 4px solid #fff;
	border-bottom: 4px solid #fff;
}
.heroArea .btNext:after {
	width: 8px;
	height: 8px;
	border-top: 4px solid #fff;
	border-right: 4px solid #fff;
}
}



/* ---------------- video */
.videoArea {
	padding-bottom: 72px;
}
.videoArea h2 {
	font-weight: 700!important;
}
.videoArea h2:after {
	background-color: #f0626c!important;
}
.videoArea .lead {
	margin-bottom: 56px;
	padding: 24px 36px;
	background: #f5f5f5;
	color: #f0626c;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.75;
}
.videoBlock {
	clear: both;
	position: relative;
	width: 100%;
	margin-bottom: 56px;
	padding-top: 56.25%;
}
.videoBlock iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.videoDetail {
	display: flex;
}
.videoDetail .img {
	margin-right: 40px;
}
.videoDetail .text {
	flex: 1;
	font-weight: 500;
}
.videoDetail p {
	margin-top: 0;
}
.videoDetail a {
	color: #ff0000;
}
.videoDetail .btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 256px;
	height: 48px;
	margin-left: auto;
	background: #ff0000;
	border-radius: 4px;
	color: #fff;
	font-weight: 700;
}
.videoDetail .btn a:before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-right: 4px;
	background: url(/img/ico_youtube_ch.png) no-repeat center / 24px;
}
@media (max-width: 1167px) {
}
@media (max-width: 767px) {
	.videoArea .lead {
		margin-bottom: 28px;
		padding: 16px;
		font-size: 14px;
	}
	.videoDetail {
		display: block;
	}
	.videoDetail .img {
		margin: 0 0 16px;
		text-align: center;
	}
	.videoDetail .btn a {
		margin: 0 auto;
	}
}



/* ---------------- banner */
.bannerArea {
	padding: 16px 0 1px;
	background: #f5f5f5;
}
.bannerArea ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.bannerArea li {
	width: 256px;
	margin: 0 16px 16px;
	text-align: center;
}
.banner02 {
	padding: 32px 0;
	text-align: center;
}
.banner02 img{
	max-width: 250px;
	width: 100%;
}
.campaign .banner02 {
	padding: 0 0 32px;
	text-align: center;
}
@media (max-width: 1167px) {
.bannerArea ul {
	width: 544px;
	margin: 0 auto;
}
}
@media (max-width: 767px) {
.bannerArea ul {
	width: 256px;
	padding-bottom: 8px;
}
.bannerArea li {
	margin-bottom: 8px;
}
}
 


/* ---------------- general */
.mb40 {
	margin-bottom: 40px;
}
.pt40 {
	padding-top: 40px;
}


/* ---------------- top-banner03 */

.banner03 {
    margin: 20px 0px 30px 0px;
}

.banner03 .head {
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 4px solid #a5d6a7;
    line-height: 1.5;
}

.banner03 h4 {
    color: #4caf50;
    font-size: 22px;
    font-weight: 700;
}

.banner03 .name {
    font-size: 24px;
}

.banner03 .shoulder {
    margin: 0;
}

.banner03 .h {
	text-align: right;
}

.banner03 .photo {
    float: left;
    width: 48%;
    margin-bottom: 20px;
}

.banner03 .bodyBlock {
    float: right;
    width: 48%;
    margin-bottom: 20px;
}

.banner03 .btn a{
	background: #4caf50;
    color: #fff;
	width: 256px;
	display: inline-block;
	border-radius: 4px;
	line-height: 48px;
    text-align: center;
}

.banner03 .btn {
	text-align: right;
}

.banner03 .p {
	color: #fff;
}

.banner03 .btn i {
    font-size: 24px;
    margin-right: 8px;
}

@media (max-width: 767px) {

.banner03 .head {
    margin-bottom: 16px;
    padding-bottom: 4px;
    border-bottom-width: 2px;
}

.banner03 .photo {
    float: none;
    width: auto;
    margin-bottom: 16px;
}

.banner03 .bodyBlock {
    float: none;
    width: auto;
    margin-bottom: 16px;
}

.banner03 .btn {
    margin-bottom: 16px;
    text-align: center;
}

.banner03 .h {
    font-size: 14px;
}

.banner03 .name {
    font-size: 18px;
}

.banner03 .p {
    margin: 8px 0 0px 0;
}

}

/* ---------------- noticeArea */
.noticeArea {
    margin-top: 72px;
	margin-bottom: 64px;
}
.noticeArea .lead {
	padding: 40px 16px;
	background: #ffeb3b;
	font-size: 24px;
	font-weight: 700;
	text-align: center;
	line-height: 1.5;
}
.noticeArea .imgBlock {
	margin-bottom: 40px;
}
.noticeArea .imgBlock img {
	width: 100%;
}
.noticeArea .blockGroup {
	margin-bottom: 40px;
}
.noticeArea .blockGroup .head .no {
	background-color: #ff9800;
}
.noticeArea .head h3 {
	padding-left: 36px;
	background: #fff3e0;
	color: #ff9800;
}
.noticeArea .fM {
	font-weight: 500;
	line-height: 1.86;
}
.noticeArea .note {
	display: inline-block;
	margin-top: 2px;
	font-size: 14px;
	font-weight: 400;
}
@media (max-width: 767px) {
	.noticeArea .lead {
		padding: 24px 16px;
		font-size: 16px;
	}
	.noticeArea .imgBlock {
		margin-bottom: 20px;
	}
	.noticeArea .blockGroup {
		margin-bottom: 20px;
	}
	.noticeArea .head h3 {
		padding-left: 16px;
	}
}


/*reasonArea*/
.reasonArea{
	padding-bottom: 96px;
}
#contents .reasonArea h2:after{
	background: #00bcd4;
}
.reasonArea .lead {
    padding: 24px 36px;
    background: #f5f5f5;
    color: #00bcd4;
    font-size: 16px;
    line-height: 1.75;
}
@media (max-width:767px){
	.reasonArea{
		padding-bottom: 72px;
	}
	.reasonArea .lead{
		padding: 16px;
		font-size: 14px;
	}
}
/*performanceArea*/
.performanceArea{
	padding-bottom: 96px;
}
.performanceArea .videoBlock{
	margin-bottom: 24px;
}
.performanceArea .content{
	margin-bottom: 50px;
}
.performanceArea .h{
	text-align: center;
	margin-bottom: 16px;
}
.performanceArea .h a{
	font-size: 16px;
	font-weight: 700;
	color: #e91e63;
	line-height: 1.5;

}
.performanceArea .flexArea{
	display: flex;
	gap: 78px;
}
.performanceArea .flexArea a{
	display: block;
	color: #e91e63;
}
.performanceArea .txtBox{
	display: flex;
	gap: 42px;
	align-items: center;
}
.performanceArea .txtBox .img{
	flex-shrink: 0;
}
.performanceArea .txtBox p{
	margin-bottom: 16px;
}
.performanceArea .txtBox p:last-of-type{
	margin-bottom: 0;
}
.performanceArea .txtBox .note{
	font-size: 14px;
	color: #616161;
	line-height: 1.71;
}
.performanceArea .imgBlock{
	margin-bottom: 24px;
}
.performanceArea .lead {
    padding: 24px 36px;
    background: #f5f5f5;
    color: #e91e63;
    font-size: 16px;
    line-height: 1.75;
}
@media (max-width:767px){
	.performanceArea{
		padding-bottom: 72px;
	}
	.performanceArea .lead{
		padding: 16px;
		font-size: 14px;
	}
	.performanceArea .flexArea{
		display: block;
	}
	.performanceArea .flexArea .item{
		margin-bottom: 16px;
	}
}