@charset "utf-8";
/* === Index ==========

1. Common
2. Header
3. Order
4. Section
    4-1. Media
    4-2. Sales force
    4-3. Recommend
	4-4. Subscription
	4-5. Contents
	4-6. Voice
	4-7. Teacher 
	4-8. Faq
	4-9. Message
5. Footer

==================== */


/* ====================

    1. Common

==================== */

body {
	background: url("../images/header_bg_pc.png") right top no-repeat, url("../images/body_bg_pc.jpg") center top no-repeat;
}
@media screen and (max-width: 667px) {
	body {
		background: url("../images/body_bg_sp.jpg") center top no-repeat;
		background-size: 100%;
	}
}

.innerBox, .orderInner, .request {
	width: 980px;
	margin: 0 auto;
}
@media screen and (max-width: 667px) {
	.innerBox, .request { width: 94%; }
}

/* line-height Reset */
header h2, section h2 img {
	line-height: 0;
}

h2 {
	margin: 0 0 4.5rem;
	color: #444;
	font-size: 3.6rem;
	font-family: "Hiragino Mincho ProN", YuMincho, "Yu Mincho", "serif";
	font-weight: normal;
	line-height: 1.3;
}
@media screen and (max-width: 667px) {
	h2 {
		margin: 0 0 3rem;
		font-size: 2.4rem;
	}
}

section h2 img {
	display: block;
	margin: 0 0 2.5rem;
}
@media screen and (max-width: 667px) {
	section h2 img {
		width: 24%;
		margin: 0 0 1.5rem;
	}
}

section h2 span {
	display: block;
	margin: 0 auto 0.5rem;
}

/* h2 centering */
.recomm h2, .contents h2, .price h2, .voice h2, .teacher h2, .faq h2, .media h2, .recommdat h2 {
	text-align: center; }

.recomm h2 img, .contents h2 img, .price h2 img, .voice h2 img,
.teacher h2 img, .faq h2 img, .media h2 img, .recommdat h2 img {
	margin: 0 auto 2.5rem;
}

h3, h4, h5, h6, p, li, th, td, dt, dd {
	font-family: "Hiragino Kaku Gothic ProN", Meiryo, "Hiragino Sans", "sans-serif";
}

p, li, th, td, dt, dd {
	color: #444;
	font-size: 1.8rem;
}
@media screen and (max-width: 667px) {
	p, li, th, td, dt, dd { font-size: 1.6rem; }
}

li {
	list-style: none;
	line-height: 1.5;
}

p { line-height: 1.7; }

.f10 { font-size: 1rem; }
.f12 { font-size: 1.2rem; }
.f14 { font-size: 1.4rem; }
.f16 { font-size: 1.6rem; }
.f18 { font-size: 1.8rem; }
.f20 { font-size: 2rem; }
.f22 { font-size: 2.2rem; }
.f24 { font-size: 2.4rem; }
.f26 { font-size: 2.6rem; }
.f28 { font-size: 2.8rem; }
.f36 { font-size: 3.6rem; }
@media screen and (max-width: 667px) {
	.f12 { font-size: 1rem; }
	.f14 { font-size: 1.2rem; }
	.f16 { font-size: 1.4rem; }
	.f18 { font-size: 1.6rem; }
	.f20 { font-size: 1.8rem; }
	.f22 { font-size: 2rem; }
	.f24 { font-size: 2.2rem; }
	.f26 { font-size: 2.4rem; }
	.f28 { font-size: 2.6rem; }
	.f36 { font-size: 2.8rem; }
}

.blu, .recomm li strong { color: #078; }
.org { color: #f70; }
.gry { color: #aaa; }

.centering { text-align: center; }
.txtRight { text-align: right; }

.marker { background:linear-gradient(transparent 60%, #ffff00 60%); }

.sp { display: none; }
@media screen and (max-width: 667px) {
	.sp { display: block; }
	
	img {
		width: 100%;
		height: auto;
	}
}


/* Slider */
.sliderArea {
	width: 980px;
	margin: 0 auto;
}
@media screen and (max-width: 667px) {
	.sliderArea {
		width: 100%!important;
		padding: 0 25px;
	}
}

.slick-prev, .slick-next { z-index: 1; }

.slick-prev:before, .slick-next:before { color: #000; }

.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}

.draggable > div {
	display: flex;
	justify-content: space-between;
}

.slick-active { opacity: 1; }

.slick-current { opacity: 1; }

.thumb { margin: 20px 0 0; }

.thumb .slick-slide { cursor: pointer; }

.thumb .slick-slide:hover { opacity: .7; }




/* ====================

    2. Header

==================== */

header {
	display: flex;
	flex-direction: column;
	padding: 2rem 0;
}
@media screen and (max-width: 667px) {
	header {
		padding: 1.8rem 0 0;
		background: none;
	}
	header.innerBox { width: 100%; }
}

h1 {
	order: 1;
	margin: 0 0 3rem;
}
@media screen and (max-width: 667px) {
	h1 { margin: 0; }
}

.siteLogo { margin-right: 2rem; }
@media screen and (max-width: 667px) {
	.siteLogo { margin-right: 1rem; }
}

.subCatch {
	order: 2;
	margin: 0 0 2.2rem;
}
@media screen and (max-width: 667px) {
	.subCatch { margin: 0; }
}

header .orderInner { order: 3; }



/* ====================

	3. Order

==================== */

/* Header Order */
.headOrder {
	order: 4;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	margin: 0 auto 6rem;
	padding: 0 0 3rem;
	background-color: rgba(255, 255, 255, 0.5);
}
@media screen and (max-width: 667px) {
	.headOrder {
		width: 88%;
		margin: 0 auto 3rem;
	}
}

.headOrder > div {
	order: 3;
	width: 520px;
}
@media screen and (max-width: 667px) {
	.headOrder > div { padding: 0 0 1rem; }
}

.headOrder h2 { margin: 0 0 1rem; }
@media screen and (max-width: 667px) {
	.headOrder h2 { margin: 0 5% 2rem; }
}

.headOrder h2 picture img { margin: 0 auto; }
@media screen and (max-width: 667px) {
	.headOrder h2 picture img { width: 100%; }
}

.headOrder .orderCatch {
	order: 1;
	width: 100%;
	margin-bottom: 4rem;
	padding: 2rem 0;
	text-align: center;
	line-height: 0;
	background-color: rgba(0,85,102,0.7);
}
@media screen and (max-width: 667px) {
	.headOrder .orderCatch {
		margin-bottom: 3rem;
		padding: 1rem 0;
	}
}

.headOrder > figure {
	order: 2;
	padding: 2rem 4rem;
}
@media screen and (max-width: 667px) {
	.headOrder > figure { padding: 0 4rem 2rem; }
}


/* Order */
.order {
	padding: 6rem 0;
	background: url("../images/body_bg_pc.jpg") center top no-repeat;
}
@media screen and (max-width: 667px) {
	.order {
		padding: 1rem 0 4rem;
		background-size: cover;
	}
	
	.orderInner { width: 88%; }
}

.order h2 { margin: 0 auto 3.8rem; }
@media screen and (max-width: 667px) {
	.order h2 { margin: 0 auto 1rem; }
}

.order h2 picture img { margin: 0 auto; }
@media screen and (max-width: 667px) {
	.order h2 picture img { width: 100%; }
}

.orderInner h3 {
	padding: 2rem 0;
	text-align: center;
	line-height: 0;
	background-color: rgba(0,85,102,0.7);
}
@media screen and (max-width: 667px) {
	.orderInner h3 { padding: 0; }
}

.orderInner > div { 
	padding: 4rem 7rem 6rem;
	background-color: #fff;
}
@media screen and (max-width: 667px) {
	.orderInner > div { padding: 1rem 0; }
}

.orderInner p { text-align: center; }

.orderInner .trialPrice { margin: 1rem 0 2.6rem; }
@media screen and (max-width: 667px) {
	.orderInner .trialPrice { margin: 1rem 0 1.6rem; }
}

.orderInner ul {
	display: flex;
	justify-content: space-between;
}
@media screen and (max-width: 667px) {
	.orderInner ul { flex-direction: column; }
}

.orderInner li {
	width: 410px;
	border: 1px solid #078;
}
@media screen and (max-width: 667px) {
	.orderInner li {
		width: 94%;
		margin: 0 auto;
	}
	.orderInner li:first-child { margin-bottom: 5rem; }
}

.orderInner h4 {
	margin: -2.5rem auto 3rem;
	color: #fff;
	font-size: 2.4rem;
	font-weight: normal;
	text-align: center;
}
@media screen and (max-width: 667px) {
	.orderInner h4 {
		margin: -2.5rem auto 2rem;
		font-size: 2rem;
	}
}

.orderInner h4 span {
	display: inline-block;
	width: 240px;
	padding: 0.6rem 0 0.5rem;
	background-color: #078;
}
@media screen and (max-width: 667px) {
	.orderInner h4 span { width: 200px; }
}

.orderInner ul {
	padding: 0 0 6rem;
	background: url("../images/arrow_btm_org.png") center bottom no-repeat;
}
@media screen and (max-width: 667px) {
	.orderInner ul {
		padding: 0 0 4.5rem;
		background-size: 14%;
	}
}

.orderInner li:first-child { position: relative; }

.orderInner li:first-child p {
	margin: 0 0 3.8rem 11.6rem;
	text-align: left;
	line-height: 1.3;
}
@media screen and (max-width: 667px) {
	.orderInner li:first-child p { font-size: 1.4rem; }
}

.orderInner li:first-child p strong {
	display: inline-block;
	padding-top: 1.3rem;
}
@media screen and (max-width: 667px) {
	.orderInner li:first-child p strong { font-size: 1.6rem; }
}

.orderInner li:first-child picture {
	position: absolute;
	top: 20px;
	left: -40px;
}
@media screen and (max-width: 667px) {
	.orderInner li:first-child picture {
		top: 15px;
		left: 5px;
	}
	.orderInner li:first-child picture img { width: 80%; }
}

.orderInner li:last-child strong {
	display: block;
}

.orderInner li:last-child p:nth-child(2) {
	background: url("../images/order_bene02_bg_pc.png") center center no-repeat;
}
@media screen and (max-width: 667px) {
	.orderInner li:last-child p:nth-child(2) { font-size: 1.4rem; }
}

.attn {
	margin-left: 1em;
	color: #999;
	font-size: 1.2rem;
	text-indent: -1em;
}
@media screen and (max-width: 667px) {
	.attn {
		width: 58%;
		margin: 0 auto 2rem;
		font-size: 1rem;
		text-align: left!important;
	}
}

.attn:before { content: "※"; }

@media screen and (max-width: 667px) {
	.btn {
		width: 90%;
		margin: 0 auto;
	}
}





/* ====================

    4. Section

==================== */

/* --- 4-1. Media ------ */
.media { background: url("../images/bg_media.jpg") center top no-repeat; }

.media .innerBox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 8rem;
	background-color: rgba(255, 255, 255, 0.8);
}
@media screen and (max-width: 667px) {
	.media .innerBox {
		padding: 5% 5% 10%;
	}
}

.media h2 { width: 100%; }
@media screen and (max-width: 667px) {
	.media h2 { margin-bottom: 0; }
}

.media h3 {
	margin: 0 0 0.5rem;
	padding: 0 0 0.2rem;
	color: #078;
	font-size: 2.4rem;
	font-family: "Hiragino Mincho ProN", YuMincho, "Yu Mincho", "serif";
	border-bottom: 1px solid #078;
}
@media screen and (max-width: 667px) {
	.media h3 {
		width: 100%;
		margin: 3rem 0 1rem;
		font-size: 2.2rem;
	}
}

.media .innerBox > div { width: 440px; }
@media screen and (max-width: 667px) {
	.media .innerBox > div { width: 100%; }
}

.media ul { margin-bottom: 3rem; }
@media screen and (max-width: 667px) {
	.media ul { margin-bottom: 1rem; }
}

.media li:before {
	content: "●";
	color: #078;
	font-size: 1.4rem;
	position: relative;
	top: -2px;
}

.media li {
	margin-bottom: 1rem;
	padding-left: 1.4rem;
	text-indent: -1.4rem;
}

.media .innerBox > figure { width: 360px; }
@media screen and (max-width: 667px) {
	.media .innerBox > figure {
		width: 100%;
		margin-top: 3rem;
	}
}

.media .innerBox > figure img {
	display: block;
	margin: 0 auto 1rem;
	line-height: 0;
}

@media screen and (max-width: 667px) {
	.media .innerBox > figure img:nth-child(2) { width: auto; }
}

.media .innerBox > figure img:last-child { margin-bottom: 0; }


/* --- 4-2. Sales force ------ */
.sales {
	padding: 0 0 7.6rem;
	background: url("../images/salesforce_bg_pc.jpg") center top no-repeat;
}
@media screen and (max-width: 667px) {
	.sales {
		padding: 0 0 5rem;
		background-size: cover;
	}
}

.sales .innerBox {
	display: flex;
	align-items: flex-start;
}
@media screen and (max-width: 667px) {
	.sales .innerBox { flex-direction: column; }
}

.salesTxt {
	padding: 8rem 6rem 4.7rem;
	background-color: #fff;
}
@media screen and (max-width: 667px) {
	.salesTxt { padding: 4rem 3rem; }
}

.salesTxt p { margin-bottom: 2.5rem; }
@media screen and (max-width: 667px) {
	.salesTxt p:last-child { margin-bottom: 0; }
}

.sales picture { margin: 260px 0 0 -40px; }
@media screen and (max-width: 667px) {
	.sales picture { margin: 0 auto; }
}



/* --- 4-3. Recommend ------ */
.recomm {
	padding: 8rem 0;
	background-color: rgba(0, 85, 102, 0.7);
}
@media screen and (max-width: 667px) {
	.recomm { padding: 4rem 0; }
}

.recomm h2, .recomm p { color: #fff; }

.recomm ul {
	margin: 0 auto 5.2rem;
	padding: 6rem 6rem 6rem 40rem;
	background: url("../images/recom_bg_pc.png") center top no-repeat;
}
@media screen and (max-width: 667px) {
	.recomm ul {
		margin: 0 auto 3rem;
		padding: 2rem;
		background-image: none;
		background-color: #fff;
	}
}

.recomm li {
	padding: 0.9rem 0 0.9rem 6rem;
	font-size: 2rem;
	background: url("../images/check_blu.png") 24px 15px no-repeat;
	border-bottom: 1px dashed #ddd;
}
@media screen and (max-width: 667px) {
	.recomm li {
		padding: 0.9rem 0 0.9rem 4.5rem;
		font-size: 1.8rem;
		background-position: 10px 14px;
	}
}

.recomm li:first-child { border-top: 1px dashed #ddd; }

.arrowBtm {
	margin-bottom: 2rem;
	padding-bottom: 5.8rem;
	background: url("../images/arrow_btm_blu.png") center bottom no-repeat;
}
@media screen and (max-width: 667px) {
	.arrowBtm {
		padding-bottom: 4.8rem;
		font-size: 1.6rem;
		background-size: 14%;
	}
	
	.recomm > p.f24 { font-size: 2rem; }
}



/* --- 4-4. Subscription ------ */
.subscription {
	padding: 8rem 0;
	background: url("../images/subscription_bg_pc.png") center top no-repeat;
	background-color: #fcf9f6;
}
@media screen and (max-width: 667px) {
	.subscription {
		padding: 3rem 0 4rem;
		background: url("../images/subscription_bg_sp.png") center top no-repeat;
		background-size: 100%;
		background-color: #fcf9f6;
	}
}

.subscription h2 { margin-bottom: 8rem; }
.subscription h2 img { margin: 0 auto 2.5rem; }
.subscription h2 picture { margin: 0 auto; }
@media screen and (max-width: 667px) {
	.subscription h2 { margin-bottom: 3rem; }
	.subscription h2 picture img { width: 100%; }
}

.subscription li {
	display: flex;
	justify-content: space-between;
	margin: 0 0 10rem;
}
.subscription li:nth-child(even) { flex-direction: row-reverse; }
@media screen and (max-width: 667px) {
	.subscription li, .subscription li:nth-child(even) {
		flex-direction: column;
		margin: 0 0 3rem;
	}
}

.subscription li:last-child { margin: 0; }

.subscription li div { width: 720px; }
@media screen and (max-width: 667px) {
	.subscription li div { width: 100%; }
}

.subscription li:nth-child(odd) div {
	padding: 6rem 10rem 5.3rem 6rem;
	background: url("../images/bg_triangle_left_blu.png") left top no-repeat;
	background-color: #fff;
}
@media screen and (max-width: 667px) {
	.subscription li:nth-child(odd) div { padding: 3rem; }
}

.subscription li:nth-child(even) div {
	margin-left: -10rem;
	padding: 6rem 6rem 5.3rem 10rem;
	background: url("../images/bg_triangle_right_blu.png") right top no-repeat;
	background-color: #fff;
}
@media screen and (max-width: 667px) {
	.subscription li:nth-child(even) div {
		margin: 0;
		padding: 3rem;
	}
}

.subscription li h3 {
	margin: 0 0 2.3rem;
	color: #078;
	font-size: 2.8rem;
	font-weight: normal;
	background-repeat: no-repeat;
	border-bottom: 1px solid #078;
}
@media screen and (max-width: 667px) {
	.subscription li h3 { font-size: 2rem; }
}

.subscription li:nth-child(odd) h3 {
	padding: 0 0 2.1rem 12.5rem;
	background-position: 0 0;
}
.subscription li:nth-child(even) h3 {
	padding: 0 0 2.1rem 17rem;
	background-position: 40px 0;
}
@media screen and (max-width: 667px) {
	.subscription li:nth-child(odd) h3, .subscription li:nth-child(even) h3 {
		padding: 1rem 0 1.1rem 2rem;
		background-position: 0 0;
		background-size: 12%;
	}
}

.subscription li:nth-child(1) h3 { background-image: url("../images/subscription_ic01.png"); }
.subscription li:nth-child(2) h3 { background-image: url("../images/subscription_ic02.png"); }
.subscription li:nth-child(3) h3 { background-image: url("../images/subscription_ic03.png"); }
.subscription li:nth-child(4) h3 { background-image: url("../images/subscription_ic04.png"); }
.subscription li:nth-child(5) h3 { background-image: url("../images/subscription_ic05.png"); }
.subscription li:nth-child(6) h3 { background-image: url("../images/subscription_ic06.png"); }
.subscription li:nth-child(7) h3 { background-image: url("../images/subscription_ic07.png"); }
@media screen and (max-width: 667px) {
	.subscription li:nth-child(1) h3 br, .subscription li:nth-child(5) h3 br {
		display: none;
	}
}

.subscription li:nth-child(odd) p { margin-right: 4rem; }
.subscription li:nth-child(even) p { margin-left: 4rem; }
@media screen and (max-width: 667px) {
	.subscription li:nth-child(odd) p, .subscription li:nth-child(even) p {
		margin: 0 0 3rem;
	}
}

.subscription li figure {
	margin-top: -4rem;
	z-index: 1;
}
.subscription li:nth-child(odd) figure { margin-left: -10rem; }
@media screen and (max-width: 667px) {
	.subscription li figure, .subscription li:nth-child(odd) figure {
		width: 70%;
		margin: -4rem auto 0;
	}
}




/* --- 4-5. Contents & Price ------ */
.contents {
	padding: 4rem 0 6rem;
	background: url("../images/contents_bg01_pc.png") center top no-repeat, url("../images/contents_bg02_pc.png") center bottom no-repeat;
	background-color: #fcfcfc;
}
@media screen and (max-width: 667px) {
	.contents {
		padding: 3rem 0 4rem;
		background: url("../images/contents_bg01_sp.png") center top no-repeat, url("../images/contents_bg02_sp.png") center bottom no-repeat;
		background-size: 100%;
		background-color: #fcfcfc;
	}
}

.contents h2 {
	margin: 0;
	padding: 4rem 0 2.2rem;
	background: url("../images/contents_h_bg_pc.png") center top no-repeat;
}
@media screen and (max-width: 667px) {
	.contents h2 {
		padding: 1rem 0 0.8rem;
		background: url("../images/contents_h_bg_sp.png") center top no-repeat;
		background-size: 100%;
	}
	.contents h2 img { width: 70%; }
}

.contents h3 {
	margin: 0 auto 4rem;
	text-align: center;
}
@media screen and (max-width: 667px) {
	.contents h3 {
		width: 90%;
		margin: 0 auto 2rem;
		font-size: 2.2rem;
	}
}

.contents h4 {
	margin: 0 auto 1rem;
	color: #078;
	font-size: 1.8rem;
	font-weight: bold;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
@media screen and (max-width: 667px) {
}

.contents .innerBox {
	margin-bottom: 5rem;
	padding: 5rem 0 4rem;
	background: url("../images/bg_triangle_left_blu.png") left top no-repeat;
	background-color: #fff;
}
@media screen and (max-width: 667px) {
	.contents .innerBox {
		margin-bottom: 0;
		padding: 3rem 0;
		background-size: 8%;
	}
}

.conSeminar, .conSales {
	width: 760px;
	margin: 0 auto 4rem;
}
@media screen and (max-width: 667px) {
	.conSeminar, .conSales {
		width: 94%;
		margin: 0 auto 3rem;
	}
}

.conSeminar li {
	padding: 1.5rem 0 1.4rem 6.4rem;
	font-size: 2rem;
	background: url("../images/check_pen.png") 30px 16px no-repeat;
	border-bottom: 1px solid #ddd;
}
@media screen and (max-width: 667px) {
	.conSeminar li {
		padding: 1.5rem 0 1.4rem 4.4rem;
		font-size: 1.8rem;
		background-position: 10px 16px;
	}
}

.conSeminar li:first-child { border-top: 1px solid #ddd; }

.conSales p {
	margin-bottom: 2.5rem;
}


/* Request */
@media screen and (max-width: 667px) {
	.request { padding-bottom: 2rem; }
}

.request h3 {
	margin: 0 5%;
	padding: 2rem 0;
	color: #fff;
	font-size: 2.8rem;
	font-weight: normal;
	text-align: center;
	background-color: #078;
}
@media screen and (max-width: 667px) {
	.request h3 {
		padding: 1.5rem 0;
		font-size: 1.8rem;
	}
}

.reqBox01 {
	display: flex;
	margin: 0 5% 1rem;
	border: 1px solid #078;
}
@media screen and (max-width: 667px) {
	.reqBox01 { flex-wrap: wrap; }
}

.reqBox01 li {
	width: 245px;
	padding: 3rem 0 2rem;
	font-size: 1.6rem;
	text-align: center;
}
@media screen and (max-width: 667px) {
	.reqBox01 li {
		width: 50%;
		font-size: 1.4rem;
		background-image: none;
	}
}

.reqBox01 li:nth-child(odd) { background-color: rgba(0, 119, 136, 0.05); }
@media screen and (max-width: 667px) {
	.reqBox01 li:nth-child(1), .reqBox01 li:nth-child(4) { background-color: rgba(0, 119, 136, 0.05); }
	.reqBox01 li:nth-child(2), .reqBox01 li:nth-child(3) { background-color: #fff; }
}

.reqBox01 li img {
	display: block;
	margin: 0 auto 1rem;
}
@media screen and (max-width: 667px) {
	.reqBox01 li img { width: auto; }
}

.reqBox02 { margin: 0 5%; }

.reqBox02 li:before { content: "※"; }

.reqBox02 li {
	padding-left: 1em;
	font-size: 1.4rem;
	text-indent: -1em;
}
@media screen and (max-width: 667px) {
	.reqBox02 li { font-size: 1.4rem; }
}





/* --- 4-6. Voice ------ */
.voice {
	padding: 8rem 0 4rem;
	background-color: #fcf9f6;
}

.voice ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 980px;
	margin: 0 auto;
}
@media screen and (max-width: 667px) {
	.voice ul {
		width: 94%;
	}
}

.voice ul:nth-child(2) { margin-bottom: 4rem; }

.voice li {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 4rem;
	padding: 4rem 4rem 2rem;
	background-color: #fff;
}
@media screen and (max-width: 667px) {
	.voice li { padding: 5%; }
}

.voice .column2 {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}
@media screen and (max-width: 667px) {
	.voice .column2 {
		flex-direction: column-reverse;
	}
}

.voice .columnR { width: 720px; }
@media screen and (max-width: 667px) {
	.voice .columnR { width: 100%; }
}

.voice .columnL {
	width: 150px;
	margin-right: 4rem;
}
@media screen and (max-width: 667px) {
	.voice .columnL {
		width: 100%;
		margin: 0 auto;
	}
}

.voice li h3 {
	margin: 0 0 2.3rem;
	color: #078;
	font-size: 2.8rem;
}
@media screen and (max-width: 667px) {
	.voice li h3 { font-size: 2rem; }
}

.voice li dl {
	margin: 0 0 3rem;
	border-bottom: 1px solid #ddd;
}

.voice li dt {
	float: left;
	padding: 1.5rem 0;
	color: #fff;
	text-align: center;
}

.voice li dt span {
	display: inline-block;
	width: 100px;
	background-color: #444;
}

.voice li dd {
	padding: 1.5rem 0 1.5rem 12rem;
	border-top: 1px solid #ddd;
}

.voice li p { margin-bottom: 2rem; }

.voice li figure { margin: 0 2rem 1.3rem 0; }
@media screen and (max-width: 667px) {
	.voice li figure {
		width: 50%;
		margin: 0 auto;
	}
}

.voice .columnL p { line-height: 1.3; }
@media screen and (max-width: 667px) {
	.voice .columnL p { text-align: center; }
}



/* --- 4-7. Teacher & Recommendation ------ */
.teacher {
	padding: 8rem 0;
	background: url("../images/teacher_bg_pc.png") center top no-repeat;
	background-color: #056;
}

.recommdat {
	padding: 8rem 0 7.1rem;
	background: url("../images/bg_recom.jpg") center bottom no-repeat;
}
@media screen and (max-width: 667px) {
	.recommdat { padding: 0 0 3.1rem; }
}

.teacher h2 {
	margin-bottom: 12rem;
	color: #fff;
}
@media screen and (max-width: 667px) {
	.teacher h2 { margin-bottom: 4rem; }
}

.recommdat h2 { margin-bottom: 12rem; }
@media screen and (max-width: 667px) {
	.recommdat h2 { margin-bottom: 4rem; }
}

.recommdat p.blu { line-height: 1.3; }

.profile {
	display: flex;
	flex-direction: row-reverse;
	margin-bottom: 4rem;
}
@media screen and (max-width: 667px) {
	.profile { flex-direction: column-reverse; }
}

.profile div {
	margin-left: -6rem;
	padding: 8rem 12rem;
	background-color: #fff;
}
@media screen and (max-width: 667px) {
	.profile div {
		margin: 0 auto;
		padding:  3rem 3rem 8rem;
	}
}

.profile h3 {
	margin: 0 0 2rem;
	padding: 0 0 1.1rem;
	font-size: 2.8rem;
	font-weight: normal;
	border-bottom: 1px solid #078;
}
@media screen and (max-width: 667px) {
	.profile h3 { font-size: 2.2rem; }
}

.profile h4 {
	color: #078;
	font-size: 1.6rem;
}

.profile p.f16 { margin-bottom: 4.6rem; }
@media screen and (max-width: 667px) {
	.profile p.f16 { margin-bottom: 3rem; }
}

.profile p { margin-bottom: 2.5rem; }

.profile p:last-child { margin-bottom: 0; }

.profile figure {
	margin: -6rem 0 0;
	z-index: 1;
}
@media screen and (max-width: 667px) {
	.profile figure {
		width: 70%;
		margin: 0 auto 2rem;
	}
	.recommdat .profile figure { margin: 0 auto; }
}

.tmember {
	display: flex;
	justify-content: space-between;
	margin-bottom: 6rem;
	padding: 4rem;
	background-color: rgba(255, 255, 255, 0.8);
}
@media screen and (max-width: 667px) {
	.tmember {
		flex-direction: column;
		width: 70%;
		margin-bottom: 4rem;
		padding: 3rem;
	}
}

.tmember li {
	display: flex;
	flex-direction: column;
	width: 30%;
}
@media screen and (max-width: 667px) {
	.tmember li {
		width: 100%;
		margin: 0 auto 2rem;
	}
	.tmember li:last-child { margin: 0 auto; }
}

.tmember h4 {
	order: 2;
	margin: 0 0 1rem;
	font-size: 2.4rem;
	font-weight: normal;
	text-align: center;
}
@media screen and (max-width: 667px) {
	.tmember h4 { font-size: 2rem; }
}

.tmember h4 span { display: block; }

.tmember figure { order: 1; }

.tmember .detailBtn { order: 3; }

.detailBtn { width: 100%; }

.detailBtn a {
	display: block;
	padding: 1.3rem 0 1.4rem;
	color: #078;
	text-align: center;
	text-decoration: none;
	border: 1px solid #078;
	border-radius: 30px;
}

.detailBtn a:hover {
	color: #fff;
	background-color: #078;
}

.tmember li img { width: 100%; }

.teacher .f28 { color: #fff; }
@media screen and (max-width: 667px) {
	.teacher .f28 { margin: 0 4%; }
}

.profile .actualResults {
	margin: 0 auto;
	padding: 3rem;
	background-color: rgba(0,119,136,0.1);
}

.profile .actualResults ul { margin-bottom: 2rem; }

.profile .actualResults ul:last-child { margin-bottom: 0; }

.profile .actualResults li:before {
	content: "●";
	color: #078;
	font-size: 1.2rem;
	margin-right: 2px;
}

.profile .actualResults li {
	padding-left: 1em;
	font-size: 1.4rem;
	text-indent: -1em;
}




/* --- 4-8. Faq ------ */
.faq {
	padding: 8rem 0;
	background-color: #fcf9f6;
}
@media screen and (max-width: 667px) {
	.faq { padding: 4rem 0; }
}

/*------------------------------

ここからアコーディオンのCSS

------------------------------*/
/* チェックボックスを非表示にする */
.accordion-hidden{
  display: none;
}

.accordion {
  width: 760px;
  max-width: 100%;
}
@media screen and (max-width: 667px) {
	.accordion {
		width: 94%;
		margin: 0 auto;
	}
}

/* 見出しボタン部分 */
.accordion-open {
	display: block;
	margin: 0 0 1rem;
	padding: 2.6rem 2rem 2.6rem 8rem;
	color: #fff;
	font-size: 1.8rem;
	font-weight: bold;
	background: url("../images/ic_q.png") 20px 20px no-repeat;
	background-color: #078;
	cursor: pointer;
	position: relative;
}

/* ＋アイコン */
.accordion-open::before,
.accordion-open::after {
  content: '';
  width: 20px;
  height: 3px;
  background: #fff;
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
}

/* アイコンのー */
.accordion-open::after {
  transform: translateY(-50%) rotate(90deg);
  transition: .5s;
}

/* アコーディオンが開いたらーに */
.accordion-hidden:checked+.accordion-open:after {
  transform: translateY(-50%) rotate(0);
}

/* アコーディオン中身部分 */
.accordion-inner {
	display: block;
	height: 0;
	overflow: hidden;
	padding: 0;
	font-size: 1.8rem;
	opacity: 0;
	transition: 0.5s;
	/* 表示速度の設定 */
	background: url("../images/ic_a.png") 20px 20px no-repeat;
	cursor: pointer;
}

/* チェックボックスにチェックが入ったら中身部分を表示する */
.accordion-hidden:checked+.accordion-open+.accordion-inner {
	height: auto;
	opacity: 1;
	/* padding: 10px; */
	padding: 2.6rem 2rem 2.6rem 8rem;
}




/* --- 4-9. Message ------ */
.message {
	padding: 8rem 0;
	background: url("../images/message_bg_pc.jpg") center top no-repeat;
}
@media screen and (max-width: 667px) {
	.message {
		padding: 4rem 0;
		background: url("../images/message_bg_sp.jpg") center top no-repeat;
		background-size: 100%;
	}
	.message .innerBox { width: 100%; }
}

.message h2 {
	display: flex;
	align-items: center;
	height: 480px;
	background: url("../images/message_h2_bg_pc.png") right top no-repeat;
}
@media screen and (max-width: 667px) {
	.message h2 {
		height: auto;
		margin: 4rem 0;
		background: none;
	}
	.message h2 img { width: 100%; }
}

.message p {
	width: 640px;
	margin: 0 auto 2.5rem;
}
@media screen and (max-width: 667px) {
	.message p {
		width: 94%;
		margin: 0 auto;
	}
}

.message p:last-child { margin-bottom: 0; }



/* SP Btn */
.btm {
	position: fixed;
	bottom: 0;
	width: 100%;
	text-align: right;
}
.btm img { width: 25%; }
@media screen and (max-width: 667px) {
	.btm {
		right: 0;
		left: 0;
		text-align: center;
	}
	.btm img {
		margin: 0 auto;
		width: 94%;
	}
}


/* ====================

    5. Footer

==================== */

footer {
	padding: 5rem 0;
	background-color: #056;
}
@media screen and (max-width: 667px) {
	footer { padding: 5rem 0 11rem; }
}

footer ul {
	display: flex;
	justify-content: center;
	margin: 0 auto 2rem;
}
@media screen and (max-width: 667px) {
	footer ul {
		flex-direction: column;
		width: 80%;
	}
}

footer li:first-child { border-left: 1px solid #fff; }
footer li {	border-right: 1px solid #fff; }
@media screen and (max-width: 667px) {
	footer li:first-child {
		border-left: none;
		border-top: 1px solid #fff;
	}
	footer li {
		border-right: none;
		border-bottom: 1px solid #fff;
	}
}

footer li a {
	display: inline-block;
	padding: 0 1em;
	color: #fff;
	font-size: 1.4rem;
	text-decoration: none;
}
@media screen and (max-width: 667px) {
	footer li a { padding: 0.7rem 1rem; }
}

footer p {
	color: #fff;
	font-size: 1.2rem;
	text-align: center;
}