@charset "UTF-8";


html{
  overflow-y:scroll;
}

/* animation */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}


.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
animation-duration: 4s;animation-fill-mode: forwards;
	}
@keyframes fadeOut {
from {
    opacity: 1;
     transform: translateX(0);
}
to {
    opacity: 1;
    transform: translateX(-500px);
}
}


/* ローディングの背景部分のCSS */
.loader{
  background:#1bb;
  height:100%;
  left:0;
  position:fixed;
  top:0;
  width:100%;
  z-index:999;
}
 
.loading {
  font-size: 25px; text-align:center; position: absolute; bottom:20%; 
  font-family: 'Montserrat', sans-serif; right:20%;
  font-weight: 800; color:#fff;
}
.loading span {
  display: inline-block;
  margin: 0 -.05em;
}


/* code #5 */
.loading05 {
  perspective: 1000px;
}
.loading05 span {
  transform-origin: 50% 50% -25px;
  transform-style: preserve-3d;
  animation: loading05 1.6s infinite;
}
.loading05 span:nth-child(2) {
  animation-delay: 0.1s;
}
.loading05 span:nth-child(3) {
  animation-delay: 0.2s;
}
.loading05 span:nth-child(4) {
  animation-delay: 0.3s;
}
.loading05 span:nth-child(5) {
  animation-delay: 0.4s;
}
.loading05 span:nth-child(6) {
  animation-delay: 0.5s;
}
.loading05 span:nth-child(7) {
  animation-delay: 0.6s;
}

@keyframes loading05 {
  0% {
    transform: rotateX(-360deg);
  }
  70% {
    transform: rotateX(0);
  }
}


.spinner {
  margin: 100px auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: #fff;
  height: 100%;
  width: 6px;
  display: inline-block;
  
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}




.google{text-align: center; margin: 30px 8% 0 }
.google h2{font-size: 20px;font-weight: bold; margin-bottom: 10px}
.google h2 i{font-family: 'Oleo Script Swash Caps', cursive;  font-weight: normal;}
.ti-widget.ti-goog .ti-col-1 .ti-reviews-container, .ti-widget.ti-goog .ti-col-1 .ti-footer{margin-bottom: 0 !important}

@media screen and (max-width: 479px) {
.slideshowBox .onlinebana{width: 120px}
}


.slideshowBox{position: relative;}
.slideshowBox .onlinebana{width: 150px;
position: absolute;
bottom: -95px; right: 10px; z-index: 99}

.slideshowBox .onlinebana img{
  animation-name: anini;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;}

@keyframes anini {
    0% {
        transform: translate(0,0px);
    }

    100% {
        transform: translate(0,-15px)
    }
}

@media screen and (min-width: 980px) {
.slideshowBox .onlinebana{    width: 182px;
    position: absolute;
    bottom: -45px; right: -15px}

.google h2{font-size: 38px; margin-bottom: 20px}
.google{margin: 50px auto 0; max-width: 1200px;}
}



.slick-arrow{display: none !important}
.slideshow {
position: relative;
width: 100%;
overflow: hidden;
margin: 0 auto;
}



.infomationCont{ margin:50px 20px 0; text-align:center}
.infomationCont .heref{ text-align:center;}
.infomationCont h2{ text-align:center; margin:20px 0}
.infomationCont h2 img{ max-width:300px} 

.infomationCont ul{text-align:left; padding-bottom:30px}
.infomationCont li{	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s; margin-bottom:10px}
.infomationCont li:hover{ background: #fff }
.infomationCont .thumbnail img{ margin-bottom:10px; width:100%; height:auto}
.infomationCont li:last-child .thumbnail img{ margin-bottom:0}
.infomationCont li .snip1352{ margin-bottom:0}
.infomationCont .comeBox{line-height:1.4em; letter-spacing:1px}
.infomationCont li:last-child .comeBox{ margin-bottom:0}
.infomationCont p{ font-size:11px; margin-top:-5px}
.infomationCont p span{color:#3b3134; display:inline-block; padding-right:10px; font-size:13px; }
.infomationCont h4{ color:#3b3134; font-size:14px; padding-top:8px; line-height:1.6em; display:inline-block}


.meritBox{ text-align:center;}
.meritBox h2{ max-width:1200px; text-align:center; color:#3b3134; font-size:28px;letter-spacing:1px; font-weight:bold;line-height:1.2em}
.meritBox .reki{margin-bottom: 20px}
.meritBox h2 em{ font-weight:bold}
.meritBox h2 i{font-family: 'Oleo Script Swash Caps', cursive; font-weight:normal}
.meritBox h2 span{ display:block; line-height:1.8em}
.meritBox li{ margin-bottom:30px}
.membersBox li:nth-child(3), .membersBox li:last-child{ margin-bottom:0}
.meritBox li h3{ margin-bottom:15px}
.meritBox li span{ display: block; text-align:right; font-size:11px}

.meritBox li:last-child{ font-size:11px}


.bgfff{background: #fff}
.four{text-align: center; margin: 80px auto 50px; padding: 0 10px; max-width: 640px}
.four .fourbox{background: #f3f1ea;}
.four h2{font-size: 26px; font-weight: bold; z-index: 1; position: relative;}
.four dl{margin-top: -10px; padding: 30px 20px;}
.four dd{text-align: left; margin-top: 20px}
.four dd li{margin-bottom: 15px}
.four dd h3{font-size: 16px; margin-bottom: 5px; }
.four dd h3 i{font-size: 10px; font-family: 'Oleo Script Swash Caps', cursive;
    font-weight: normal;
}
.four dd h3 em{font-size: 12px}
.four dd h3 strong{background: linear-gradient(transparent 60%, #ff6 60%); font-weight: bold}
.four dd h3 .inpa{color: #ff6666}


.kabebox img{width: 100%}
.kabebox{ background: #f3f1ea; padding: 70px 30px 40px}
.kabebox h2{text-align: center}
.kabebox h2 img{ max-width: 408px; margin-bottom: 20px}
.kabebox .text01{ font-size: 1.7rem; text-align: center; line-height: 1.8}
.kabebox .line{text-align: center;line-height: 1.8}
.kabebox .line span{background:linear-gradient(transparent 60%, #ff6 60%); font-size: 1.7rem; font-weight: bold}

.kabebox h3{ font-size: 26px; font-weight: bold; text-align: center; padding-top: 30px; position: relative}
.kabebox h3:after{ content: "";
    display: inline-block;
    background: url( "../img/top/kabeline01.png");
    background-size:356px 15px;
    width: 356px;
    height: 15px;
    position: absolute;
    left: -320px;}
.kabebox h3:before{ content: "";
    display: inline-block;
    background: url( "../img/top/kabeline02.png");
    background-size:356px 15px;
    width: 70px;
    height: 15px;
    position: absolute;
    right: -30px;}	
	
.kabebox .kabe02 h3:after{bottom: 15px}	
.kabebox .kabe02 h3:before{bottom: 15px}	


.kabebox h3 img{width:20px; vertical-align: middle; margin-right: 10px; margin-top: -8px}


.kabebox .subtext{margin: 15px 0}

.kabebox .kabemove{position: relative}
.kabebox .leftm{position: absolute;
    width: 100%;
    top: 25px;
}
.kabebox .rightm{position: absolute;
    left: 50%;
    width: 400px;
    top: 25px;
    z-index: 1;
    margin-left: 90px;}	


.kabebox li{text-align: center; margin-bottom: 20px}
.kabebox li .fuki{position: relative; display: inline-block;  margin: 1em 0;
  padding: 17px 10px 10px;
  min-width: 200px;
  width: 100%;
  font-size: 16px;
  border: solid 1px #000;}
.kabebox li .fuki:before {
  content: "";
  position: absolute;
  bottom: -26px;
  left: 50%;
  margin-left: -16px;
  border: 13px solid transparent;
  border-top: 15px solid #f3f1ea;
  z-index: 2;
}
/* 下に載せる三角アイコン */
.kabebox li .fuki:after {
  content: "";
  position: absolute;
  bottom: -29px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #000;
  z-index: 1;
}  
  
.kabebox li h4{font-size: 18px;
    font-weight: bold;
    line-height: 1.5;}
.kabebox .saportt{color:#0ba899; background: #f3f1ea; padding: 0 15px 10px;font-size: 11px;
    width: 250px; margin: -30px auto 0; }
.kabebox .saportt img{width:76px; vertical-align: middle; margin-right: 5px; }

.kabebox .pic01{margin-top: -10px}
.kabebox .hosoku{padding: 10px 0 0; text-align: left; font-size: 12px}
.kabebox li:first-child{margin-right: 10%}
.kabebox li:nth-child(2){margin-left: 5%;}
.kabebox li:last-child{margin-left: 10%}

.bgall{text-align: center}


.membersBox{ padding-top:50px}
.membersBox h2{ max-width:1200px; text-align:center; color:#3b3134; font-size:25px;letter-spacing:1px;font-family:my; 
margin-bottom:10px; font-weight:bold}
.membersBox h2 i{font-family: 'Oleo Script Swash Caps', cursive; font-weight:normal}
.membersBox h2 span{ display:block; padding-top:8px;font-weight:bold;line-height:1.4em;}
.membersBox h2 em{font-weight: bold}
.membersBox h2 strong{ font-weight:bold}
.membersBox .sub{ font-weight:bold; line-height:1.6em; margin-bottom:20px}
.membersBox li{ width:48%; float:left; margin-right:4% ;font-weight:bold; margin-bottom:25px;font-size:13px; text-align:center}
.membersBox li:nth-child(2),.membersBox li:nth-child(4){ margin-right:0}
.membersBox li:nth-child(2) h3, .membersBox li:last-child h3{ color:#f73282;}
.membersBox ul h3{ color:#36b1f7; font-size:16px; line-height:1.5em; margin:5px 0; font-weight:bold; text-align:center}
.membersBox li p{ text-align:left}

.meritBox li:first-child .text01{ line-height:1.4em; margin-bottom:10px; font-size:11px ; text-align: left}

.dateday{ text-align:right; font-size:11px}


.coursBox{ background:url(../img/dod_bg.png) repeat; margin-top:40px; padding:40px 0 20px}
.coursBox h2 em{ font-weight:bold}
.coursBox h2{ max-width:1200px; text-align:center; color:#3b3134; font-size:26px;letter-spacing:1px; font-weight:bold;line-height:1.2em}
.coursBox h2 i, .blogBox h2 i{font-family: 'Oleo Script Swash Caps', cursive; font-weight:normal}
.coursBox h2 span, .blogBox h2 span{ display:block; line-height:1.4em; font-weight:bold}

.coursBox ul.mainPln{ max-width:574px; margin:0 auto}
.coursBox ul.mainPln li{ margin-bottom:20px}
/*---------------*/
/***** Layla *****/
/*---------------*/

.grid {
	position: relative;
	margin: 0 auto;
	list-style: none;
	text-align: center;
}

/* Common style */
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%;
	background: #3085a3;
	text-align: center;
	cursor: pointer;
	
}

.grid figure img {
	position: relative;
	display: block;
	max-width: 100%;
	opacity: 0.6;
}

.grid figure h3{ text-align:center !important; width:100%; font-size:11px;	top:15%; margin-left:-10px;
	position: absolute}
.grid figure h3 img{width:100%; max-width:274px;opacity: 1; margin:0 auto; height:auto}


.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;

}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}

figure,figcaption{ display:block; margin:0}
figure.effect-layla {
	background: #000;
}



figure.effect-layla figcaption {
	padding: 10px;
}

figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after {
	position: absolute;
	content: '';
	opacity: 0;
}

figure.effect-layla figcaption::before {
	top: 10px;
	right: 20px;
	bottom: 10px;
	left:20px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}

figure.effect-layla figcaption::after {
	top: 10px;
	right: 20px;
	bottom: 10px;
	left: 20px;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	-webkit-transform: scale(1,0);
	transform: scale(1,0);
	-webkit-transform-origin: 100% 0;
	transform-origin: 100% 0;
}

figure.effect-layla h2 {
	padding-top: 26%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-layla p {
	padding: 0.5em 2em;
	text-transform: none;
	opacity: 0;
	-webkit-transform: translate3d(0,-10px,0);
	transform: translate3d(0,-10px,0);
}

figure.effect-layla img {
		-webkit-transform: scale(1);	
	transform: scale(1);	
}

figure.effect-layla img,
figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after,
figure.effect-layla p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	
}

figure.effect-layla:hover img {
	opacity: 0.7;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-layla:hover figcaption::before,
figure.effect-layla:hover figcaption::after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-layla:hover h2,
figure.effect-layla:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-layla:hover figcaption::after,
figure.effect-layla:hover h2,
figure.effect-layla:hover p,
figure.effect-layla:hover img {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}
	.grid figure {
		display: inline-block;
		float: none;
		margin: 10px auto 0;
		width: 100%;
	}


.subPlan{ background:#fff; padding:20px;max-width:574px; margin:0 auto 40px}
.subPlan h4{font-weight:bold; font-size:24px; color:#3b3134; line-height:1.4em; margin-bottom:10px}

.subPlan li{ margin-bottom:20px}
.subPlan li:last-child{ margin-bottom:0px}
.subPlan .ptext01{ text-align:center; font-weight:bold; margin-bottom:10px}
.subPlan .ptext01 span{ font-family: 'Oleo Script Swash Caps', cursive; font-weight:normal} 
.subPlan h5{ font-weight:bold; font-size:18px;margin-bottom:10px}
.subPlan h5 span{ font-weight:bold}


.voiceBox{ margin-top:50px}
.voiceBox a{text-decoration: none; color:#000; }
.voiceBox a:hover{ color:#ff6666; }

.voiceBox h2{ max-width:1200px; text-align:center; color:#07bcab; font-size:26px;letter-spacing:1px;font-family:my; 
margin-bottom:10px; font-weight:bold}
.voiceBox h2 a{color:#3b3134;
-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all  0.6s ease; display:block;}
.voiceBox h2 a:hover{color:#ff6666;}
.voiceBox h2 span{ display:block; padding-top:8px;font-weight:bold;line-height:1.2em;}
.voiceBox h2 i{font-family: 'Oleo Script Swash Caps', cursive; font-weight:normal}
.voiceBox p.sub{ font-weight:bold; line-height:1.6em; margin-bottom:20px;text-align:center;}

.voiceBox li{ width:48%; float:left; margin:0 4% 20px 0}
.voiceBox li:nth-child(even){ margin-right:0}
.voiceBox li:last-child{ margin-bottom:40px}
.voiceBox .cate{ color:#303030; font-size:12px; line-height:1.4em; margin-bottom:5px}
.voiceBox li img{ width:100%; height:100%; }
.voiceBox .contBox{ max-width:1200px; margin:0 auto}
.voiceBox .snip1352{ max-height:110px}




.blogBox h2{ max-width:1200px; text-align:center; color:#07bcab; font-size:26px;letter-spacing:1px; font-weight:bold;line-height:1.2em;margin-bottom:10px}
.blogBox h2 a{color:#3b3134; text-decoration:none;
-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all  0.6s ease; display:block;}
.blogBox h2 a:hover{color:#ff6666;}
.blogBox h2 img{vertical-align:middle;}

ul.catList{ margin:0; padding:0 2% 0 0; text-align:left; border:none; background:#fff; max-height:250px; overflow: auto}

.bcont{ max-height:250px;}
.bcont li{	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s; margin-bottom:0px;
	 background:#fff; border-bottom: dashed 1px #ccc; width:100%}
.bcont li:hover{ background: #fff ; border:none !important}
.bcont .thumbnail{ float: left; width:20%; }
.bcont .thumbnail img{  width:100%; height:auto; }
.bcont li:last-child .thumbnail img{ }
.bcont li .snip1352{ margin-bottom:10px;min-width:60px; min-height:60px; max-width:100px; max-height:100px}
.bcont .comeBox{float: right; width:78%; line-height:1.4em; letter-spacing:1px}
.bcont li:last-child .comeBox{ margin-bottom:0}
.bcont p{ font-size:11px; margin-top:-5px}
.bcont p span{color:#3b3134; display:inline-block; padding-right:10px; font-size:13px; border:none !important }
.bcont h4{ color:#3b3134; font-size:12px; padding-top:8px; line-height:1.6em}

.bcont{ height:200px; overflow-y: scroll;}

/*スクロールバーの横幅指定*/
.bcont::-webkit-scrollbar {
    width: 10px;
}
/*スクロールバーの背景色・角丸指定*/
.bcont::-webkit-scrollbar-track {
  border-radius: 10px;
	background: #f2f2f2;
}
/*スクロールバーの色・角丸指定*/
.bcont::-webkit-scrollbar-thumb {
  border-radius: 10px;
	background:#281919;
}




.amebaBox{ background:#eeece5; padding:5px; border:1px solid #dddbd4; margin-top:40px}
.amebaBox span{ display:block}
.amebaBox .amebaBoxin{ background:#fff; padding:20px}
.amebaBox li a{ display:block; border-bottom:1px dashed #ccc; padding:10px 0; margin-bottom:5px; font-size:12px; line-height:1.6em  }
.amebaBox li:first-child a{ padding-top:0}
.amebaBox li time{ font-size:11px; letter-spacing:3px}
.amebaBox h4{ text-align:center}
.amebaBox h4 img{ width:230px}


.profBox{ margin-top:50px}
.profBox h2{color:#3b3134; font-size:24px;letter-spacing:1px; font-weight:bold;line-height:1.6em;margin:10px 0}
.profBox p.pcno{ text-align:center; color:#000}



@media screen and (min-width: 300px) and (max-width: 479px) { 
.cyachi{ padding-left: 20px; font-size:16px !important; line-height:1.8em; padding-top:30px; font-weight:bold}


.infomationCont h4{ font-size:13px}


.meritBox li:first-child h3 img{ width:100%; max-width:229px}
.meritBox li:first-child p img{ width:100%;max-width:328px;}

.meritBox li:last-child h3 img{ width:100%; max-width:228px}
.meritBox li:last-child p img{width:100%; max-width:170px}




}


@media screen and (max-width: 419px) {
.meritBox h2 em{ display:block; font-weight:bold}


.grid figure h3 span{ display:none}

.voiceBox li img{min-height:110px;}

}

@media screen and (min-width: 420px) {
.coursBox .no420{ display:none}
}

@media screen and (max-width: 479px) {
.infomationCont h2 img{ max-width:214px}
.infomationCont .thumbnail{ width:80px; height:80px}
.infomationCont li{ margin-bottom:15px}




}

@media screen and (min-width: 480px) {
.cyachi{ padding-left: 20px; font-size:22px; line-height:1.8em; padding-top:30px; font-weight:bold}
	
	
.meritBox li:first-child h3 img{ width:100%; max-width:340px}
.meritBox li:first-child p img{ width:100%;max-width:500px;}
.meritBox li:nth-child(2) h3 img{ width:100%; max-width:460px}
.meritBox li:nth-child(2) p img{ width:100%; max-width:540px}
.meritBox li:last-child h3 img{ width:100%; max-width:408px}
.meritBox li:last-child p img{width:100%; max-width:220px}



.grid figure h3 span{ font-size:14px; letter-spacing:2px; margin-top:5px;display:block}

}


@media screen and (max-width: 540px) {



.membersBox h2{ letter-spacing:-1px; font-size:24px}

}

	
@media screen and (max-width: 639px) {

.infomationCont h2{ margin:20px 0 0}
.infomationCont ul{ max-height:150px; overflow-y: scroll; padding-right:15px; padding-top:5px; margin-bottom:30px;}
.infomationCont p.no640{font-family: 'Oleo Script Swash Caps', cursive; font-weight:normal; font-size:28px}	
.infomationCont li{ margin-bottom:10px; padding:10px 0; border-bottom:1px dashed #DDDDDD}

.kabebox .kabe02 h3{line-height: 1}


/*スクロールバーの横幅指定*/
.infomationCont ul::-webkit-scrollbar {
    width: 10px;
}
/*スクロールバーの背景色・角丸指定*/
.infomationCont ul::-webkit-scrollbar-track {
  border-radius: 10px;
	background: #f2f2f2;
}
/*スクロールバーの色・角丸指定*/
.infomationCont ul::-webkit-scrollbar-thumb {
  border-radius: 10px;
	background:#281919;
}

.meritBox{ padding-bottom:30px !important}

.meritBox li:last-child .text01,.meritBox li:nth-child(2) .text01{text-align: center; font-size: 16px}

.four dd h3{font-size:20px; line-height: 1.4; }
.four dd h3 i{font-size:22px }
.four dd h3 i span{display: none}


/*ドロップダウン*/
/*ボックス全体*/

.sample-accordion input {
  display: none;
}

.subPlan h4 { text-align:center}
.subPlan h4 span { display:block}



.sample-accordion label {
  display: block;  transition: 0.2s;
  cursor: pointer;
  box-sizing: border-box;
}
.sample-accordion label:before {
    content: '\f105';
    font-family: 'Font Awesome 5 Free';font-weight: 900;
 font-size:30px; color:#07bdac; position: absolute; right:0; top:35%;
}



.sample-accordion .ac-cont {
  transition: 0.2s;
  height: 0;
  overflow: hidden;

  padding: 0 10px;
  box-sizing: border-box;
}


.sample-accordion input:checked + .ac-cont {
  height: auto;
  padding: 10px;
  box-sizing: border-box;
}




.membersBox h2 span{ letter-spacing:normal}
.membersBox h2 strong{ display:block}

.membersBox li{ width:47%; margin-right:6%}


.subPlan h4{ font-size:17px}
.subPlan h5 { display:block; text-align:center}
.subPlan h5 span{ display:block; }

.voiceBox li{ width:47%; margin-right:6%}


.bcont{height:165px;}
.tabs A{ font-size:13px;}

}


@media screen and (min-width:640px) {
input{ display:none}	
.nokai{display: none}



.infomationCont .thumbnail{ float: left; width:20%}
.infomationCont .comeBox{float: right; width:75%; line-height:1.4em; letter-spacing:1px}	

.meritBox li:last-child p.text01{ font-size:13px; margin-bottom:10px}




.membersBox .sub{line-height:1.8em; margin-bottom:30px; font-size:16px; text-align:center}

.voiceBox p.sub{line-height:1.8em; margin-bottom:20px; font-size:16px; text-align:center}
.voiceBox .snip1352{ max-height:200px}

.grid figure h3 span{ font-size:14px; letter-spacing:2px; margin-top:20px; display:block}


.amebaBox{ margin-top:60px}

.bcont .thumbnail{width:18%;}
.bcont .comeBox{width:80%;}

}


@media screen and (max-width: 749px) {
body{ line-height:1.6em}	

	
}

@media screen and (min-width: 750px) {
.subPlan h5{ text-align:center}

.voiceBox .snip1352{ max-height:230px}

.bcont .thumbnail{width:18%;}
.bcont .comeBox{width:82%;}


}


@media screen and (max-width: 840px) {
	.coursBox ul.mainPln li:last-child{ margin-bottom:40px}
}

@media screen and (min-width: 850px) {
.contBox ul.mainPln{ max-width:1200px}
.contBox ul.mainPln li{ width:48%; float:left; margin-right:4%}
.contBox ul.mainPln li:last-child{  margin-right:0%; margin-bottom:30px}
.grid figure h3 span{ font-size:13px; letter-spacing:1px; margin-top:0px;}

.subPlan h4{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center; /* for no-flexbox browsers */
	margin-bottom:20px
}

.subPlan h4:before,
.subPlan h4:after {
    border-top: 1px solid;
    content: "";
    display: inline; /* for IE */
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex: 1;
    flex-grow: 1;
}

.subPlan h4:before {
    margin-right: 0.5em;
}

.subPlan h4:after {
    margin-left: 0.5em;
}

.subPlan{ max-width:1200px}
.subPlan li{ width:31%; float:left; margin-right:3%}
.subPlan li:last-child{ width:32%; float:left; margin-right:0%}


.bcont .thumbnail{width:15%;}
.bcont .comeBox{width:85%;}

}

@media screen and (max-width: 979px) {

	
.infomationCont .pcno img{ max-width:500px; width:100%}
.infomationCont li:nth-child(5),.infomationCont li:nth-child(6){display:none;}
	
.meritBox{ padding:0px 20px; margin-top:0px;}


.nextstep{ min-height:50px !important}



.membersBox ul{ max-width:800px; margin:0 auto}
.profBox{margin-top:0;}
.profBox h2{ text-align:center;}
.profBox p.pcno{ padding-top:0px;}
.profBox p{ padding-top:30px;}
}

@media screen and (min-width: 980px) {
.infomationCont h4{ font-size:13px}
	
.contBoxSBg{ background:url(../img/giza_bg_pc.png) repeat-x bottom}


.infomationCont h2{margin: -37px 0 20PX;}

.meritBox ul{margin-left: 5%}
.meritBox li:last-child p.text01{ font-size:13px; line-height:1.4em; margin-bottom:20px}
.meritBox li:first-child p.text01{ line-height:1.4em; margin-bottom:20px}
.meritBox li:first-chila span{ padding-top:10px}
	
.meritBox{ margin-top:55px;margin: 70px auto 0;max-width: 1200px;}
.meritBox h2{ font-size:40px; margin-bottom:0px;}
.meritBox .reki{margin-bottom:40px }

.meritBox h2 i ,.meritBox h2 span{ display:inline-block}
.meritBox h2 i{ padding-right:8px; font-size:18px; letter-spacing:normal}
.meritBox h2 span{ font-size:18px;padding-right:8px; }

.meritBox li{ float:left; text-align:center}
.meritBox li:first-child{ width:30%; }
.meritBox li:nth-child(2){ width:40%; padding:0;
 background-image:url(../img/merit_dod.png),url(../img/merit_dod.png);
 background-repeat: no-repeat, no-repeat;
 background-position:5% top, 95% top; }
.meritBox li:last-child{ width:20%; margin-bottom:70px}

.meritBox li img{ width:100%}
.meritBox li:first-child h3 {    margin-bottom: 5px;}
.meritBox li:first-child h3 img{ max-width:349px; padding-bottom: 7px; }
.meritBox li:first-child p img{ max-width:356px;}
.meritBox li:nth-child(2) h3 img{ max-width:330px; margin-top: -15px}
.meritBox li:nth-child(2) p img{ max-width:370px; }
.meritBox li:last-child h3 img{ max-width:228px}
.meritBox li:last-child p img{ max-width:170px}


.four{max-width: 1100px;}
.four .contBox{width: auto!important}
.four h2{font-size: 38px}
.four dl{ display: flex; flex-direction:row-reverse; justify-content: space-between; padding: 50px}
.four dt{width: 40%}
.four dd{width: 56%}
.four dd h3{font-size: 22px}
.four dd h3 span{font-size: 16px}
.four dd h3 i { font-size: 22px;}
.four dd p{font-size: 14px}
.four dd h3 em {
    font-size: 14px;
    font-weight: bold;
}
.four dd h3 .inpa { font-size: 22px;}



.contBoxS{ padding:0 20px; max-width:1200px; margin:45px auto 0}
.contBoxS .slideshowBox{ float:left; width:58%}
.contBoxS .infomationCont{ float: right; width:38%; margin:0}

.infomationCont h2 img{ width:214px; margin-top:40px}
.infomationCont ul{ max-height:365px; overflow-y: scroll; padding-right:10px}

/*スクロールバーの横幅指定*/
.infomationCont ul::-webkit-scrollbar {
    width: 10px;
}
/*スクロールバーの背景色・角丸指定*/
.infomationCont ul::-webkit-scrollbar-track {
  border-radius: 10px;
	background: #f2f2f2;
}
/*スクロールバーの色・角丸指定*/
.infomationCont ul::-webkit-scrollbar-thumb {
  border-radius: 10px;
	background:#281919;
}



.kabebox{padding: 100px 0 40px}
.kabeboxIn{max-width: 1100px; margin: 0 auto}
.kabebox .text01{font-size: 18px;letter-spacing: 2px;}
.kabebox .line{font-size: 18px ; letter-spacing: 2px}

.kabebox h2{ position: relative}
.kabebox h2:after{content: "";
    display: inline-block; position: absolute; background: url("../img/top/tle.png") no-repeat left top; 
background-size:50px 80px; top: 0;
    left: 250px; width: 50px; height: 80px;}
.kabebox h2:before{content: "";
    display: inline-block; position: absolute; background: url("../img/top/tri.png") no-repeat left top; 
background-size:50px 80px; top: 0;
    right: 250px; width: 50px; height: 80px;}	
	
	

.kabebox h3{font-size: 40px;padding-top: 50px ; letter-spacing: 2px}
.kabebox h3:after{    background: url(../img/top/kabeline03.png);
    background-size: 300px 16px; width: 300px;  height: 16px; position: absolute; left: 0px; bottom:10px }
.kabebox h3:before{    background: url(../img/top/kabeline02.png);
    background-size: 380px 16px; width: 300px;  height: 16px; position: absolute; right: 0px; bottom:10px}
	
.kabebox .kabe02 h3:after{    background: url(../img/top/kabeline04.png);
    background-size: 220px 16px; width: 220px;  height: 16px; position: absolute; left: 0px; bottom:10px}
.kabebox .kabe02 h3:before{    background: url(../img/top/kabeline02.png);
    background-size: 380px 16px; width: 220px;  height: 16px; position: absolute; right: 0px; bottom:10px}	
	
	
.kabebox .subtext{text-align: center}
.kabebox .saportt{font-size: 12px}
.kabebox li h4{font-size: 20px}
.kabebox .hosoku{font-size: 13px}
.kabebox li .fuki{padding-bottom: 15px}

.kabebox li{width: 30%; margin-right: 5%; float: left}
.kabebox li:first-child{margin-right: 5%;}
.kabebox li:nth-child(2){ margin-right: 5%; margin-left: 0}
.kabebox li:last-child{ margin-right: 0%; margin-left: 0}
.kabebox img{max-width: 328px}

.bgall{background: url( "../img/top/kabepicpc.jpg") no-repeat center bottom; background-size: cover; position: relative; min-height:280px }
.bgall p{  font-size: 20px;
    color: #fff;
    font-weight: bold;
    width: 380px;
    position: absolute;
    top: 52px;
    left: 50%;
    margin-left: -450px;
    line-height: 1.8;
    letter-spacing: 2px;}

.membersBox{ padding-top:80px}
.membersBox h2{ font-size:38px; margin-bottom:20px}
.membersBox h2 span{ display:inline-block}
.membersBox .sub{ font-size:18px}

.membersBox li{ width:22%; margin-right:4%; margin-bottom:50px; }
.membersBox li:nth-child(2){ margin-right:4%; }
.membersBox li:last-child{ margin-right:0%}
.dateday{ margin-bottom:70px}



.coursBox h2, .blogBox h2{ font-size:38px; margin-bottom:35px}
.blogBox h2{ margin-top:80px; margin-bottom:5px}

.voiceBox h2 span, .coursBox h2 span, .blogBox h2 span{ display:inline-block}


.coursBox{ margin-top:80px; padding-top:60px; padding-bottom:40px}


.voiceBox{ margin-top:90px}
.voiceBox h2{ font-size:38px;}
.voiceBox p.sub{ font-size:18px; margin-bottom:30px}
.voiceBox li{ width:22%; margin-right:4%}
.voiceBox li:nth-child(even){margin-right:4%}
.voiceBox li:last-child{ margin-right:0}
.voiceBox h3{ font-size:13px;}
.voiceBox .snip1352{ max-height:150px}

.tabs UL.horizontal{ margin:0 0 15px 0;}
.blogcont{ background:#fff;}
.clumnBox{ width:100%}
.bcont{ height:auto; overflow-y:auto;}
.bcont h4{letter-spacing:normal;}
.bcont a{ padding:0;}
.bcont .comeBox{ width:74%}
.bcont li{ width:32%; float:left; margin-right:2%; border-bottom:none; margin-bottom:70px;}
.bcont li:last-child{margin-right:0%;}
.bcont li .snip1352{width:100px}
.bcont .comeBox{width:62%}

.profBox{ margin-top:0px}
.profBox .contBox{ background:url(../img/top/prof_bg.jpg) no-repeat right top; border:5px solid #dad5cb}
.profBox h2{ padding:30px 20px 40px}
.profBox p{ padding:0 20px 40px;
text-shadow: 2px  2px 3px #fff,
            -2px  2px 3px #fff,
             2px -2px 3px #fff,
            -2px -2px 3px #fff;
			width:80%; color:#000}


}
@media screen and (min-width: 1048px) {
.bcont .comeBox{ width:65%}
}



@media screen and (min-width: 1140px) {
.bcont .comeBox{ width:68%}




}

@media screen and (min-width: 1200px) {
.bcont .comeBox{ width:70%}

}




@media screen and (min-width: 1210px) {
	
	
.contBoxS{ padding:0px}
.contBoxS .slideshowBox{ float:left; width:740px}
.contBoxS .infomationCont{ float: right; width:420px; margin:0}

.infomationCont ul{ max-height:509px; background:#fff ; padding-left:20px}



.meritBox li:first-child{ width:394px; padding-right:40px; background:url(../img/merit_dod.png) no-repeat right top;}

.meritBox li:first-child img{padding-bottom:7px}
.meritBox li:nth-child(2){ width:400px; padding:0; margin:0; background:none; }
.meritBox li:last-child{ padding-left:20px; background:url(../img/merit_dod.png) no-repeat left top ; width: 300px;}





.voiceBox li{ margin-bottom:80px}
.voiceBox .snip1352{ max-height:180px}

.subPlan{ padding:30px}
.subPlan li{ width:328px;}
.subPlan li:last-child{ width:415px;}
.subPlan .ptext02{ font-size:13px}

.profBox h2{ padding:30px 0 20px 120px; font-size:33px; letter-spacing:2px}
.profBox p{ width:850px; margin-left:100px; font-size:16px}


}