/*
Template: jin
Theme Name: jin-child
Author: CrossPiece
Version: 1.00
*/

/*===================================================
 その他調整
===================================================*/

.af-link-div {
	text-align: center;
}

.af-caption-text{
    font-size: 16px;
    color: #585858;
}

.article_style2 .cps-post-box {
    padding: 20px;
    padding-left: 10px;
    padding-right: 10px;
}
.cps-post .cps-post-thumb img {
   width: 100%;
}

@media (min-width: 768px){
	#onecolumn760 {
    width: 85%;
}
}
@media(max-width: 767px) {
	#header #site-info {
    max-width: 90%;
}
}

.related-ad-area {
    background-color: #fff;
}

/*===================================================
 自作ショートコード 
===================================================*/


.osusume-box {
	background-color: #fffde7;
	border: 2px solid #fbc02d;
	border-radius: 10px;
	padding: 0 15px 30px 15px;
	margin-top: 20px;
}

.osusume-box-title {
	background-color: #fbc02d;
	padding: 10px;
	font-weight: bold;
	color: #fff;
	margin-top: -20px;
	text-align: center;
	font-size: 15px;
	border-radius: 5px;
	max-width: 300px;
}

.osusume-box-url {
	margin-top: 20px;
	margin-bottom:20px;
}

.osusume-box-url a {
	text-decoration: none;
	font-size: 20px;
	font-weight: bold;
	border-bottom: 2px solid #008db7;
}

.osusume-box-desc {
	
}


/*===================================================
 ピックアップエリア
===================================================*/

.pickups-area {
	max-width: 1200px;
	width:98%;
	margin: 0 auto;
	
}
.pickup-area-content {
	width: 47%;
	float: left;
}
.pickup-area-content img {
	margin-bottom:3px;
	width: 100%;
	height: auto;
}
.pickup-area-content:nth-child(odd) {
	margin-left: 2.5%;
	margin-right: 0.5%;
}
.pickup-area-content:nth-child(even) {
	margin-left: 0.5%;
	margin-right: 2.5%;
}

.pickup-area-content:after {
	display:block;
    clear:both;
    height:0px;
    content:"";
}

@media(min-width:840px) {
	.pickup-area-content {
	float: none;
}
	.pickups-area {
		margin-top:30px;
	margin-bottom:20px;
}
	.pickup-area-content img {
	margin-bottom:0px
}
	.pickup-area-content {
		width: 24%;
	}
.pickup-area-content:nth-child(odd) {
	margin-left: 0;
	margin-right: 0;
}
.pickup-area-content:nth-child(even) {
	margin-left: 0;
	margin-right: 0;
}
	.pickups-area {
	display: flex;
justify-content: space-between;
}


}


/*===================================================
 header部分のcss調整
===================================================*/


#header-color-graadtion {
	background: linear-gradient(180deg, #68EBFF 0%, #C0DF62 85%,#fff 95%, #fff 100%);
	padding-top: 40px;
	padding-bottom: 70px;
}

@media (max-width: 767px){
#header-box {
    padding-top:0px;
	}
	#navtoggle:checked + .sp-menu-open {
    position: fixed;
		z-index:5
}
	.sp-menu-box {
	  z-index: 3;
		background-color: #fffffff7
 }
	.fixed-content {
    margin-top: 0px;
 }
	ul.menu-box {
    height: 88%;
		padding: 10% 7%;
		
 }
}
#drawernav5 ul.menu-box li a {
    font-size: 10px!important;
}

/*===================================================
 footer部分のcss調整
===================================================*/

#footer-widget-area.footer_style2 #footer-widget-left .widgettitle {
	background:#0097a7;
  padding: 10px 20px;
  text-align: center;
  border-radius: 30px;
  font-size: 20px;
  font-weight: bold;
	border: none;
}
#footer-widget-area.footer_style2 #footer-widget-center .widgettitle {
	background: #00796b;
  padding: 10px 20px;
  text-align: center;
  border-radius: 30px;
  font-size: 20px;
  font-weight: bold;
	border: none;
}

#footer-widget-area.footer_style2 #footer-widget-right .widgettitle {
	background: #fbc02d;
  padding: 10px 20px;
  text-align: center;
  border-radius: 30px;
  font-size: 20px;
  font-weight: bold;
	border: none;
}

/*===================================================
問い合わせフォームのｃｓｓ調整
===================================================*/
.wpcf7-form input[type="submit"] {
	background: #3b4fa5
}
.wpcf7-form input[type="submit"]:hover {
	background: #10226f
}


/*===================================================
 ランキングでpadding-bottomを小さくする
===================================================*/
.ranking-info01 > p {
	padding-bottom: 0.5rem
}
/*===================================================
 サイドバーウィジェットのcss調整
===================================================*/
.af-sidebar-img-1 {
	border: 7px solid #ffcd44;
}

.af-sidebar-img-2 {
	border: 7px solid #ff7043;
}

.af-sidebar-img-3 {
	border: 7px solid #26a69a;
}

.af-sidebar-img-4 {
	border: 7px solid #5c6bc0;
}
.af-sidebar-title {
	text-align:center;
	font-size: 16px;
	font-weight: bold;
	margin-top:15px;
}
.af-sidebar-desc {
	text-align:center;
	font-size:14px;
	margin-top:15px;
}
.af-sidebar-button a {
	text-align:center;
	padding: 5px 16px;
	font-size:15px;
}

/*===================================================
 アフィリエイトボタンの調整
===================================================*/

.guide-buttons .color-button01 a {
		padding: 12px 20px;
    padding-bottom: 11px;
		font-size: 15px;
	}
	.guide-buttons .color-button02 a {
		padding: 12px 20px;
    padding-bottom: 11px;
		font-size: 15px;
	}

@media(min-width: 499px) {
	.guide-buttons .color-button01 a {
		padding: 12px 35px;
    padding-bottom: 11px;
		font-size: 18px;
	}
.guide-buttons .color-button02 a {
		padding: 12px 35px;
    padding-bottom: 11px;
		font-size: 18px;
	}
	}

@media(min-width: 765px) {
	
.guide-buttons .color-button01 a {
		padding: 12px 30px;
		font-size: 22px;
	margin-bottom: 10px;
	}
	.guide-buttons .color-button01:before {
		margin-bottom: 10px;
	}
	.guide-buttons .color-button02 a {
		padding: 12px 30px;
		font-size: 22px;
	}
}
/*===================================================
パンくずリストをトップに表示
===================================================*/
/* 更新日付表示を左寄せにする */
.cps-post .cps-post-header .cps-post-meta .cps-post-date-box {
text-align: left;
}

/* page-top-footerを非表示にする */
@media (max-width: 767px) {
.page-top-footer {
display: none;
}}
@media (min-width: 768px) {
.page-top-footer {
display: none;
}}
@media (min-width: 1024px) {
.page-top-footer {
display: none;
}}

/* breadcrumb */
#breadcrumb {
width: 100%;

position: relative; }

#breadcrumb:after {
content: “”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
@media (max-width: 767px) {
#breadcrumb:after {
background-color: rgba(0, 0, 0 ,0.4) !important; } }

#breadcrumb:after {
opacity: 0; }

#breadcrumb ul {
position: relative;
z-index: 1;
letter-spacing: 0;
margin: 0 auto;
display: block; }
@media (max-width: 767px) {
#breadcrumb ul {
padding: 0px;
margin-bottom: 20px;
margin-top: 0px;
font-size: 0.65rem; } }
@media (min-width: 768px) {
#breadcrumb ul {
width: 100%;
padding: 0px 0px;
margin-top: 15px;
margin-bottom: 30px;
font-size: 0.75rem;
font-weight: 300; } }
@media (min-width: 1200px) {
#breadcrumb ul {
width: 100%;
padding: 0px 0px;
margin-bottom: 30px;
} }

#breadcrumb ul li {
display: inline-block; }

#breadcrumb ul li a,
#breadcrumb ul li {
-webkit-transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease, opacity 0.3s ease, border 0.3s ease, padding 0.3s ease, left 0.3s ease, bottom 0.3s ease, box-shadow 0.3s ease;
transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease, opacity 0.3s ease, border 0.3s ease, padding 0.3s ease, left 0.3s ease, bottom 0.3s ease, box-shadow 0.3s ease; }
@media (max-width: 767px) {
#breadcrumb ul li a,
#breadcrumb ul li {
font-weight: 400;
color: rgba(0, 0, 0, 0.5) !important; } }
@media (min-width: 768px) {
#breadcrumb ul li a,
#breadcrumb ul li {
font-weight: 300;
color: rgba(0, 0, 0, 0.5) !important; } }

#breadcrumb ul li a:hover,
#breadcrumb ul li a.hover {
text-decoration: none;
-webkit-transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease, opacity 0.3s ease, border 0.3s ease, padding 0.3s ease, left 0.3s ease, bottom 0.3s ease, box-shadow 0.3s ease;
transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease, opacity 0.3s ease, border 0.3s ease, padding 0.3s ease, left 0.3s ease, bottom 0.3s ease, box-shadow 0.3s ease; }

#breadcrumb ul li .space {
margin-left: 7px;
margin-right: 7px; }

#breadcrumb .space-i {
margin-right: 3px; }

@media (min-width: 768px) {
#breadcrumb .fa-home.space-i {
margin-left: 5px;
margin-right: 15px;
font-size: 0.95rem;
line-height: 0;
display: inline-block;
-webkit-transition: color 0.4s ease, background 0.4s ease, transform 0.4s ease, opacity 0.4s ease, border 0.4s ease, padding 0.4s ease, left 0.4s ease, box-shadow 0.4s ease;
transition: color 0.4s ease, background 0.4s ease, transform 0.4s ease, opacity 0.4s ease, border 0.4s ease, padding 0.4s ease, left 0.4s ease, box-shadow 0.4s ease; }

#breadcrumb .bcHome a:hover .fa-home {
color: #fff !important; }
#breadcrumb .bcHome span {
position: relative; }
#breadcrumb .bcHome span:before {
position: absolute;
content: “”;
width: 30px;
height: 30px;
border-radius: 20px;
background: #fff;
left: -38px;
top: -8px;
z-index: -1;
-webkit-transition: color 0.4s ease, background 0.4s ease, transform 0.4s ease, opacity 0.4s ease, border 0.4s ease, padding 0.4s ease, left 0.4s ease, box-shadow 0.4s ease;
transition: color 0.4s ease, background 0.4s ease, transform 0.4s ease, opacity 0.4s ease, border 0.4s ease, padding 0.4s ease, left 0.4s ease, box-shadow 0.4s ease;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.18); } }

/*===================================================
 トップページ用のｃｓｓ調整（親テーマのフォーマット化）
===================================================*/

#landing-page .cps-post-main {
	padding-top: 0px;
}
#landing-page .cps-post-main p {
	padding-bottom: 0px;
}

#landing-page .cps-post-box {
	padding: 0px
}
#landing-page #contents {
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
}
#landing-page #onecolumn960lp {
	margin-bottom: 0px;
}
@media (min-width: 1200px){
	#landing-page #contents {
		width: 100%;
	}
	#landing-page #onecolumn960lp {
    width: 100%;
	}
}

@media (max-width: 767px){
	#landing-page #onecolumn960lp {
    width: 100%;
    float: left;
    margin-left: 0px;
    margin-bottom: 0px;
	}
	#landing-page .cps-post-box {	
    padding: 0 0;
	}
}

/*===================================================
 トップページ用のｃｓｓ調整
===================================================*/


/* 全般 */
#landing-page {
	width: 100%;
}

.lp-section {
	width: 100%;
}

.lp-section .h2-style10 {
	width: 90%;
	margin: 0 auto;
	text-align: center;
}

.section-title {
	text-align: center;
	font-size: 16px;
}


/* パーツ */

.ribbon-title {
	display: inline-block;
    position: relative;
    height: 45px;
    vertical-align: middle;
    text-align: center;
    box-sizing: border-box;
	margin-bottom: 40px;
}

.ribbon-title:before{/*左側のリボン端*/
    content: '';
    position: absolute;
    width: 10px;
    bottom: -10px;
    left: -35px;
    z-index: 0;
    border: 20px solid #5c6bc0;
    border-left-color: transparent;/*山形に切り抜き*/
}

.ribbon-title:after{/*右側のリボン端*/
    content: '';
    position: absolute;
    width: 10px;
    bottom: -10px;
    right: -35px;
    z-index: 0;
    border: 20px solid #5c6bc0;
    border-right-color: transparent;/*山形に切り抜き*/
}
.ribbon-title h2{
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0 20px;
    line-height: 45px;
    font-size: 18px;
    color: #FFF;
	z-index: 1;
    background: #3949ab;/*真ん中の背景色*/
}
.ribbon-title h2:before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-right: solid 15px #283593;/*左の折り返し部分*/
}
.ribbon-title h2:after {
    position: absolute;
    content: '';
    top: 100%;
    right: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-left: solid 15px #283593;/*右の折り返し部分*/
}

.ribbon-title-yellow {
	display: inline-block;
    position: relative;
    height: 45px;
    vertical-align: middle;
    text-align: center;
    box-sizing: border-box;
	margin-bottom: 40px;
}

.ribbon-title-yellow:before{/*左側のリボン端*/
    content: '';
    position: absolute;
    width: 10px;
    bottom: -10px;
    left: -35px;
    z-index: 0;
    border: 20px solid #ffca28;
    border-left-color: transparent;/*山形に切り抜き*/
}

.ribbon-title-yellow:after{/*右側のリボン端*/
    content: '';
    position: absolute;
    width: 10px;
    bottom: -10px;
    right: -35px;
    z-index: 0;
    border: 20px solid #ffca28;
    border-right-color: transparent;/*山形に切り抜き*/
}
.ribbon-title-yellow h2{
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0 20px;
    line-height: 45px;
    font-size: 24px;
    color: #FFF;
	z-index: 1;
    background: #ffb300;/*真ん中の背景色*/
}
.ribbon-title-yellow h2:before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-right: solid 15px #ff8f00;/*左の折り返し部分*/
}
.ribbon-title-yellow h2:after {
    position: absolute;
    content: '';
    top: 100%;
    right: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-left: solid 15px #ff8f00;/*右の折り返し部分*/
}

@media (min-width: 499px){
	.ribbon-title-yellow {
	display: inline-block;
    position: relative;
    height: 45px;
    vertical-align: middle;
    text-align: center;
    box-sizing: border-box;
	margin-bottom: 70px;
}

.ribbon-title-yellow:before{/*左側のリボン端*/
    content: '';
    position: absolute;
    width: 10px;
    bottom: -20px;
    left: -35px;
    z-index: 0;
    border: 20px solid #ffca28;
    border-left-color: transparent;/*山形に切り抜き*/
}

.ribbon-title-yellow:after{/*右側のリボン端*/
    content: '';
    position: absolute;
    width: 10px;
    bottom: -20px;
    right: -35px;
    z-index: 0;
    border: 20px solid #ffca28;
    border-right-color: transparent;/*山形に切り抜き*/
}
.ribbon-title-yellow h2{
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 5px 20px;
    line-height: 45px;
    font-size: 42px;
    color: #FFF;
	z-index: 1;
    background: #ffb300;/*真ん中の背景色*/
}
.ribbon-title-yellow h2:before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-right: solid 15px #ff8f00;/*左の折り返し部分*/
}
.ribbon-title-yellow h2:after {
    position: absolute;
    content: '';
    top: 100%;
    right: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-left: solid 15px #ff8f00;/*右の折り返し部分*/
}
}
@media (min-width: 765px){
	.ribbon-title-yellow {
	display: inline-block;
    position: relative;
    height: 45px;
    vertical-align: middle;
    text-align: center;
    box-sizing: border-box;
	margin-bottom: 110px;
}

.ribbon-title-yellow:before{/*左側のリボン端*/
    content: '';
    position: absolute;
    width: 10px;
    bottom: -40px;
    left: -49px;
    z-index: 0;
    border: 26px solid #ffca28;
    border-left-color: transparent;/*山形に切り抜き*/
}

.ribbon-title-yellow:after{/*右側のリボン端*/
    content: '';
    position: absolute;
    width: 10px;
    bottom: -40px;
    right: -49px;
    z-index: 0;
    border: 26px solid #ffca28;
    border-right-color: transparent;/*山形に切り抜き*/
}
.ribbon-title-yellow h2{
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 15px 20px;
    line-height: 45px;
    font-size: 54px;
    color: #FFF;
	z-index: 1;
    background: #ffb300;/*真ん中の背景色*/
}
.ribbon-title-yellow h2:before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-right: solid 15px #ff8f00;/*左の折り返し部分*/
}
.ribbon-title-yellow h2:after {
    position: absolute;
    content: '';
    top: 100%;
    right: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-left: solid 15px #ff8f00;/*右の折り返し部分*/
}
}
/* アイキャッチセクション */

.top-section {
	background:linear-gradient(180deg, #68EBFF 0%, #C0DF62 80%, #fff 95%);
	padding-bottom: 40px;
	/*background:linear-gradient(180deg, #3949ab 0%, #3949ab 90%, #6d4c41 90%, #6d4c41 93%, #fb8c00 93%, #fb8c00 96%, #ffb300 96%, #ffb300 99%, #fdd835 99%, #fdd835 100%)*/
/* 	background-image: url("https://child-english.club/wp-content/uploads/2018/10/top-image.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center; */
}
.top-section img {
	display: block;
	margin: 0 auto;
	padding: 30px 30px;
	width: 90%;
	max-width: 750px;
}

/* ピックアップセクション */
.pickups-section {
	max-width: 1200px;
	width:98%;
	margin: -30px auto 0;
	
}
.lp-pickup-content {
	width: 47%;
	float: left;
}
.lp-pickup-content img {
	margin-bottom:3px
}
.lp-pickup-content:nth-child(odd) {
	margin-left: 2.5%;
	margin-right: 0.5%;
}
.lp-pickup-content:nth-child(even) {
	margin-left: 0.5%;
	margin-right: 2.5%;
}

.pickups-section:after {
	display:block;
    clear:both;
    height:0px;
    content:"";
}

@media(min-width:840px) {
	.top-section img {
		width: 95%;
    padding-top: 50px;
    padding-bottom: 70px;
	}
		.lp-pickup-content {
	float: none;
}
	.pickups-section {
		margin-top:0px;
	margin-bottom:60px;
}
	.lp-pickup-content img {
	margin-bottom:0px
}
	.lp-pickup-content {
		width: 24%;
	}
.lp-pickup-content:nth-child(odd) {
	margin-left: 0;
	margin-right: 0;
}
.lp-pickup-content:nth-child(even) {
	margin-left: 0;
	margin-right: 0;
}
	.pickups-section {
	display: flex;
justify-content: space-between;
}


}



/* イントロセクション */
.lp-intro-section {
	width: 90%;
	margin: 30px auto 80px;
	max-width: 750px;
}
.lp-intro-title {
	text-align: center;
	position: relative;
	z-index: 1;
}

.lp-intro-title h2 {
	font-size: 24px;
	color: #fff;
	background-color:#57b3ba;
	display: inline;
	padding: 10px 20px;
}
.lp-intro-description {
	position: relative;
	background-color: #ecf6f7;
	margin-top: -10px;
	padding: 30px 20px 30px;
	z-index: 0;
	border: 2.5px dashed #57b3ba;
	text-align:center;
}
.lp-intro-description p {
	line-height: 2rem;
}

@media(min-width: 765px) {
	.lp-intro-section {
		margin-bottom: 100px;
	}
	.lp-intro-title h2 {
	font-size: 32px;
	color: #fff;
	background-color:#57b3ba;
	display: inline;
	padding: 10px 20px;
}
.lp-intro-description {
	width: 85%;
	margin: 0 auto;
	position: relative;
	background-color: #ecf6f7;
	margin-top: -20px;
	padding: 40px 20px 30px;
	z-index: 0;
	border: 2.5px dashed #57b3ba;
	text-align:center;
	font-size: 20px;
}
.lp-intro-description p {
	line-height: 2rem;
}
}

/* 診断セクション */
.diagnosis-section {
	width: 100%;
	margin: 20px auto 0;
	background: linear-gradient(180deg, #FFF 0%, #FFF 10%, #00897b 13%,#00897b 100%);
}


.lp-diagnosis-pic {
	margin-top: 60px;
	margin: 60px auto 60px;
	width: 90%;
	max-width: 750px;
}

.lp-diagnosis-intro {
	color: #fff;
	text-align: center;
	width: 70%;
	margin: 0 auto 50px;
	max-width: 750px;
	font-size:18px;
}
@media(min-width:400px) {
	.lp-diagnosis-intro {
		font-size:20px;
	}
}

@media(min-width:765px) {
	.lp-diagnosis-intro {
	color: #fff;
	text-align: center;
	width: 70%;
	margin: 0 auto 50px;
		font-size: 24px;
}
}

/*===================================================
 yes-no-クエスチョンのｃｓｓ調整
===================================================*/

#lp-yn-chart {
	width: 90%;
	margin: 0 auto;
	padding-bottom: 100px;
	max-width: 750px;
}
.yn-chart-content {
	border: 0.5px solid #000;
	margin: 0 auto;
	border-radius: 5px;
	padding: 20px 5px 20px;
	background-color: #eceff1;
}
.yn-chart-title {
	text-align: center;
	font-size: 36px;
	font-weight: bold;
}

.yn-chart-description {
	border: 0.5px dashed #000;
	text-align:center;
	margin: 0 auto;
	font-size: 14px;
	margin-top: 20px;
	padding: 60px 10px;
	width: 90%;
	background-color: #fff;
}
.yn-chart-buttons {
	text-align: center;
	display: flex;
	justify-content: center;
}
.yn-chart-buttons a {
	margin-top: 32px;
	font-size: 14px;
	padding: 8px 16px;
}
.yn-third-button a {
	font-size: 14px;
	padding: 8px 48px;
}
@keyframes yn-question-show{
    from{
				margin-left: 100px;
        opacity: 0;
    }
    to{
				margin-left: 5%;
        opacity: 1;
    }
}
.yn-hide {
	display: none;
}
.yn-show {
	display: block;
	
	animation: yn-question-show 0.2s ease-in-out 0s;
}
.yn-result {
	width: 95%;
	margin: -20px auto 30px;
	background-color: #f9a825;
	border: 1.5px solid #fff176;
	padding: 20px 10px;
}
p.yn-result-title{
	text-align: center;
	font-weight: bold;
	font-size: 30px;
	color: #fff;
	width: 80%;
	background-color:#f57f17;
	margin: 0 auto 20px;
}
p.yn-result-description {
	text-align: center;
	font-size: 18px;
	color: #fff;
}

@media(min-width: 765px) {
	.yn-chart-title {
	text-align: center;
	font-size: 42px;
	font-weight: bold;
}

.yn-chart-description {
	border: 0.5px dashed #000;
	text-align:center;
	margin: 0 auto;
	font-size: 20px;
	margin-top: 20px;
	padding: 60px 10px;
	width: 90%;
	background-color: #fff;
}
.yn-chart-buttons {
	text-align: center;
	display: flex;
	 justify-content: center;
	margin-bottom: 25px;
}
.yn-chart-buttons a {
	margin-top: 32px;
	font-size: 20px;
	padding: 8px 16px;
}
	.yn-third-button a {
	font-size: 20px;
	padding: 8px 48px;
}
}

/*===================================================
 ローディングのcss
===================================================*/

.sk-circle {
  margin: 30px auto;
  width: 40px;
  height: 40px;
  position: relative;
}
.sk-circle .sk-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-circle .sk-child:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
          animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg); }
.sk-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg); }
.sk-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg); }
.sk-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg); }
.sk-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg); }
.sk-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg); }
.sk-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg); }
.sk-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg); }
.sk-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg); }
.sk-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); }
.sk-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); }
.sk-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; }
.sk-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; }
.sk-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; }
.sk-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; }
.sk-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; }
.sk-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; }
.sk-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; }
.sk-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s; }
.sk-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s; }
.sk-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s; }
.sk-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s; }

@-webkit-keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}



/* おすすめセクション */

.osusume-section {
	background-color: #3b4675;
	padding-bottom: 30px;
}

.lp-section-separator {
	margin-bottom: 70px;
	margin-top: -20px;
}

.osusume-content {
	background-color: #fff;
	border: 2px dashed #ff80ab;
	width: 90%;
	margin: 0 auto 30px;
	padding:40px 10px;
	max-width: 750px;
}
.osusume-copy {
	position: relative;
	width: 95%;
	margin: 0 auto;
	padding: 20px 20px;
	border: 2px solid #9fa8da;
	border-radius: 10px;
	text-align: center;
	font-weight: bold;
}
.osusume-copy:before {
	content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}
.osusume-copy:after {
	content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #9fa8da;
  z-index: 1;
}
.osusume-title h3{
	text-align: center;
	font-weight: bold;
	margin-top:  40px;
	margin-bottom: 30px;
	font-size: 20px;
}
.osusume-pic {
	margin-bottom: 40px;
	text-align:center;
}
.osusume-content .color-button01 a {
		padding: 12px 20px;
    padding-bottom: 11px;
		font-size: 15px;
	}
	.osusume-content .color-button02 a {
		padding: 12px 20px;
    padding-bottom: 11px;
		font-size: 15px;
	}

.osusume-after-pickups {
	width: 95%;
	margin: 0 auto;
}

.osusume-after-title {
	text-align: center;
	margin: 30px 0 30px;
	font-weight: bold;
}

.osusume-after-pickup {
	
}

@media(min-width: 499px) {
	.osusume-content .color-button01 a {
		padding: 12px 35px;
    padding-bottom: 11px;
		font-size: 18px;
	}
	.osusume-content .color-button02 a {
		padding: 12px 35px;
    padding-bottom: 11px;
		font-size: 18px;
	}
	}

@media(min-width: 765px) {
	.osusume-copy {
	position: relative;
	width: 95%;
	margin: 0 auto;
	padding: 20px 20px;
	border: 2px solid #9fa8da;
	border-radius: 10px;
	text-align: center;
	font-weight: bold;
	font-size: 24px;
}
.osusume-copy:before {
	content: "";
  position: absolute;
  bottom: -41px;
  left: 50%;
  margin-left: -16px;
  border: 24px solid transparent;
  border-top: 24px solid #FFF;
  z-index: 2;
}
.osusume-copy:after {
	content: "";
  position: absolute;
  bottom: -47px;
  left: 50%;
  margin-left: -16px;
  border: 24px solid transparent;
  border-top: 24px solid #9fa8da;
  z-index: 1;
}
.osusume-title h3{
	text-align: center;
	font-weight: bold;
	margin-top:  60px;
	margin-bottom: 50px;
	font-size: 32px;
}
.osusume-pic {
	margin-bottom: 40px;
	text-align:center;
}
	.osusume-table {
		width: 90%;
		margin: 0 auto;
		margin-bottom: 45px;
	}
.osusume-content .color-button01 a {
		padding: 12px 30px;
		font-size: 22px;
	margin-bottom: 10px;
	}
	.osusume-content .color-button01:before {
		margin-bottom: 10px;
	}
	.osusume-content .color-button02 a {
		padding: 12px 30px;
		font-size: 22px;
	}
}
@media(min-width: 560px) {
	.osusume-after-pickups {
	display: flex;
	justify-content: space-between;
 }

.osusume-after-pickup {
	width: 32%;
}
}

/* ランキングセクション */


.ranking-section {
	max-width: 960px;
	margin: 0 auto;
}
.lp-rank-summary {
	max-width: 700px;
	margin: 0 auto;
}
.lp-title-wrapper {
	display:block;
	text-align: center;
	padding-bottom: 30px;
}
.ranking-section .lp-rank-image img {
	display: block;
	margin: 0 auto;
}

.lp-ranking-box {
	float: left;
	width: 50%;
}
.lp-ranking-box-last {
	clear: both;
	margin: 0 auto;
	width: 50%;
	padding-top: 40px;
	padding-bottom: 0px;
}
.ranking-content-1 {
	width: 90%;
	margin-left: 6.6%;
	margin-right: 3.3%;
}
.ranking-content-2 {
	width: 90%;
	margin-left: 3.3%;
	margin-right: 6.6%;
}
.ranking-content-3 {
	width: 90%;
	margin: 0 auto;
}
.ranking-content {
	width:80%;
	margin: 0 auto;
}

.lp-rank1-title {
	position: relative;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 24px;
	background-color: #E5B237;
	color: #fff;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	padding: 8px 10px;
	border-radius: 5%;
	border-bottom: 3px solid #e53935;
}
.lp-rank2-title {
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 24px;
	background-color: #C0C0C0;
	color: #fff;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	padding: 8px 10px;
	border-radius: 5%;
	border-bottom: 3px solid #3949ab;
}
.lp-rank3-title {
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 24px;
	background-color: #874642;
	color: #fff;
	color: #fff;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	padding: 8px 10px;
	border-radius: 5%;
	border-bottom: 3px solid #00897b;
}

.lp-rank-info {
	margin-top: 24px;
}
.lp-rank-info  a {
	display: block;
	margin-top: 20px;
}

.lp-rank-details {
}

.lp-rank-detail {
	width: 95%;
	margin: 0 auto;
}
.lp-rank-detail .lp-material-pic img {
		display: block;
		margin: 30px auto;
}

.lp-rank-detail p {
	margin-bottom: 20px;
	line-height: 1.8em;
}
.lp-rank-detail h3 {
	text-align: center;
	font-size: 19px;
	font-weight: bold;
}
.lp-rank-detail .simple-box5 {
	margin-top: 20px;
	margin-bottom: 0px;
	padding: 30px 15px;
}
.lp-rank-detail .simple-box4 {
	padding: 20px 15px 10px;
}
.lp-rank-detail .lp-material-pic {
	margin-top: 30px;
	margin-bottom: 30px;
}

.lp-rank-detail-copy {
		text-align: center;
	  font-weight: bold;
		font-size: 22px;
		margin-top: 32px;
    margin-bottom: 32px;
	}
.lp-pic-bottom-right {
	width: 80%;
	margin: 0 auto;
	text-align: right;
	
}
.lp-pic-bottom-right img {
	width: 50%;
	margin-bottom: 0px;
	max-width: 200px;
}
.lp-pic-bottom-center {
	display: block;
	width: 80%;
	margin: 0 auto -50px;
	text-align: center;
	margin-top: 50px;
}



/* 教材一覧セクション */

.materials-section {
	margin-bottom: 120px;
}

.materials-section h2 {
	font-size: 28px;
	text-align:center;
	margin-bottom: 80px;
}
.materials-title-first-letter {
	font-size: 36px;
	color:#f9a825
}
.materials-intro {
	width: 80%;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 80px;
	max-width: 750px;
}
.materials-contents {
	width: 80%;
	margin: 0 auto;
	text-align: center;
}
.material-link {
	border: 1px solid #000;
	border-radius: 5px;
	padding: 12px 15px;
	margin-bottom:10px;
}
.material-link a {
	text-decoration: none;
	font-size:13px;
}

@media(min-width: 760px) {
	.materials-intro {
	font-size: 18px;
		}
	.materials-contents {
	width: 90%;
	margin: 0 auto;
	text-align: center;
		max-width: 750px;
}
.material-link {
	float: left;
	width: 45%;
	border: 1px solid #000;
	border-radius: 5px;
	padding: 15px 15px;
	margin-bottom:10px;
	font-size: 16px;
}
.material-link:nth-child(odd) {
	margin-left:3%;
	margin-right:2%;
}
	.material-link:nth-child(even) {
	margin-left:2%;
	margin-right:3%;
}
.materials-contents:after {
	display:block;
    clear:both;
    height:0px;
    visibility:hidden;
    content:".";
}
	.materials-title-first-letter {
	font-size: 48px;
}
	.materials-section h2 {
	font-size: 40px;	
}
}

/* サイト案内セクション */

.guide-section {
	margin-bottom: 80px;
}

.guide-section .simple-box3 {
	width: 80%;
	margin: 0 auto;
	margin-bottom: 70px;
	max-width: 750px;
}
.guide-section p.guide-intro {
	text-align:center;
	margin-bottom: 20px;
}

.guide-section h2 {
	font-size: 28px;
	text-align:center;
	margin-bottom: 40px;
}
.guide-title-first-letter {
	font-size: 36px;
	color:#00695c
}

.guide-contents:after {
	display:block;
    clear:both;
    height:0px;
    visibility:hidden;
    content:".";
}
.guide-contents {
	max-width: 960px;
}
.guide-content {
	width:50%;
	float:left;
}

.guide-content-detail {
	margin: 0 auto;
	width:80%;
}
.guide-content-detail h3 {
	font-size: 14px;
	text-align:center;
	margin-bottom:20px;
}
.guide-content-detail a {
	font-size: 12px;
}
.guide-contents .guide-content:nth-child(1) {
	height: 450px;
}
.guide-contents .guide-content:nth-child(2) {
	height: 450px;
}
.guide-contents .guide-content:nth-child(3) {
	height: 380px;
}
.guide-contents .guide-content:nth-child(4) {
	height: 380px;
}
.guide-contents .guide-content:nth-child(5) {
	height: 300px;
}
.guide-contents .guide-content:nth-child(6) {
	height: 300px;
}

@media(min-width: 499px) {
	.guide-contents .guide-content:nth-child(1) {
	height: 500px;
}
.guide-contents .guide-content:nth-child(2) {
	height: 500px;
}
}

@media(min-width: 750px) {
	
	
	.guide-contents {
		width: 90%;
		margin: 0 auto;
	}
	.guide-title-first-letter {
	font-size: 48px;
}
	.guide-section .simple-box3 {
	font-size: 18px;
}
	.guide-section h2 {
	font-size: 40px;	
}
	.guide-content {
	width:33.333%;
	float:left;
}

.guide-content-detail {
	margin: 0 auto;
	width:80%;
}
.guide-content-detail h3 {
	font-size: 18px;
	text-align:center;
	margin-bottom:20px;
}
.guide-content-detail a {
	font-size: 14px;
}
.guide-contents .guide-content:nth-child(1) {
	height: 540px;
}
.guide-contents .guide-content:nth-child(2) {
	height: 540px;
}
.guide-contents .guide-content:nth-child(3) {
	height: 540px;
}
.guide-contents .guide-content:nth-child(4) {
	height: 300px;
}
.guide-contents .guide-content:nth-child(5) {
	height: 300px;
}
.guide-contents .guide-content:nth-child(6) {
	height: 300px;
}
}
/* 英語教育ノウハウセクション */

.tips-section .kaisetsu-box3 a {
	color: white;
}





/* 特集セクション */

.features-section .jin-2column {
	display: flex;
    justify-content: space-evenly;
    margin-bottom: 10px;
}

.features-section .jin-2column-left, .features-section　.jin-2column-right {
	width: 45%;
	border-radius: 15%;
}
.features-section .jincol-h3 {
	font-size: 1rem;
}

/* コラム1 */

.column-top-pic{
	width: 75%;
	margin: 0 auto;
}

.column-content {
	width: 90%;
	margin: 0 auto;
}

#landing-page .column-content p {
	padding-bottom: 2rem;
}


.column1-section {
	margin: 0 auto;
	max-width: 960px;
}

.lp-pic-bottom-left {
	width: 80%;
	margin: 0 auto;
	text-align: right;
}
.lp-pic-bottom-left img {
	width: 50%;
	margin-bottom: 0px;
	max-width: 200px;
}
/* コラム2 */

.column2-section {
	margin: 0 auto;
	max-width: 960px;
}

/* おすすめセクション */

.recommend-section {
	padding-top: 50px;
	padding-bottom: 50px;
	background:linear-gradient(180deg, #fff 0%, #68EBFF 10%, #C0DF62 30%);
}

.recommend-section img {
	display: block;
	margin: 0 auto;
	width: 90%;
	margin-bottom: 60px;
	max-width: 700px;
}

.lp-ranking-box img {
	margin-bottom: 0px;
}
.lp-ranking-box-last img {
	margin-bottom: 0px;
}

/*===================================================
 iphone6+ より小さいデバイスでの調整
===================================================*/

@media (max-width: 400px){
	.ribbon-title h2 {
		font-size: 16px;
	}
	
	.ribbon-title:before{/*左側のリボン端*/
    display: none;
	}

	.ribbon-title:after{/*右側のリボン端*/
    display: none;
	}
	.lp-rank-detail .color-button01 a {
		padding: 12px 20px;
    padding-bottom: 11px;
		font-size: 15px;
	}
	.lp-rank-detail .color-button02 a {
		padding: 12px 20px;
    padding-bottom: 11px;
		font-size: 15px;
	}
	#landing-page .h2-style10 h2 {
		font-size: 19px;
	}
	#landing-page .h3-style02 h3 {
		font-size: 17px;
	}
}

/*===================================================
 iphone6+ より大きくてipadまでのデバイスでの調整
===================================================*/

@media (min-width: 760px){
	
	/*トップセクション*/
	

	
	
	/*ランキングセクション*/
	
	.lp-title-wrapper {
    padding-bottom: 45px;
    padding-top: 35px;
	}
	
	.ribbon-title h2 {
		font-size: 36px;
    line-height: 67px;
	}
	.ribbon-title {
		height: 67px;
	}
	.ribbon-title:before {
		border-width: 24px;
		left: -42px;
	}
	.ribbon-title:after {
		border-width: 24px;
		right: -42px;
	}
	.lp-rank1-title {
		width: 75%;
		font-size: 18px;
	}
	.lp-rank2-title {
		width: 75%;
		font-size: 18px;
	}
	.lp-rank3-title {
		width: 75%;
		font-size: 18px;
	}
	.lp-rank-info {
		width: 80%;
    margin: 24px auto;
	}
	.lp-ranking-box-last {
		padding-top: 60px;
		padding-bottom: 0px;
	}
	.lp-pic-bottom-right img {
		width: 30%;
		margin-bottom: -5px;
	}
	.lp-pic-bottom-left {
		text-align: right;
	}
	.lp-pic-bottom-left img {
		width: 40%;
		margin-bottom: -15px;
	}
	.lp-rank-detail .simple-box5 {
		padding-top: 40px;
		width: 95%;
	}
	.lp-rank-detail h3 {
		font-size: 26px;
    margin-top: 40px;
    margin-bottom: 7px;
	}
	.lp-rank-detail .lp-material-pic  {
		display: block;
		width: 600px;
		margin: 30px auto;
	}
	.lp-rank-detail-description {
		padding: 0px 40px;
		margin-bottom: 40px;
	}
	.lp-rank-detail .simple-box4 {
		margin-bottom: 35px;
	}
	.lp-rank-detail table {
		margin-right: auto;
		margin-left: auto;
	}
	.lp-rank-detail table.cps-table03 {
		width: 95%;
	}
	.lp-rank-detail .color-button01 {
		margin-top: 20px;
		margin-bottom: 20px;
	}
}
@import url("pickup-style.css");
/*===================================================
ipadより大きくてパソコン画面での調整
===================================================*