@charset "utf-8";

/* 身につく力- skills - */

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

	レイアウト

============================== */
.skills {
	background: url("../img/skills_bg.svg") no-repeat right top 120px / 100%;
}


@media only screen and (max-width: 767px){
	.skills {
		background: none;
	}

}

.skills h2 {
	text-align: center;
	width: fit-content;
	display:block;
	margin: 0 auto 50px auto;
	padding: 20px 40px;
	font-size: 1.4rem;
}

.skills h2 span {
	font-size: 1.8rem;
	font-weight: bold;
}

.skills h2 span span{
	font-size: 2rem;
	font-weight: bold;
}

@media only screen and (max-width: 767px){
	.skills h2 {
		padding: 20px 20px;
		margin-bottom: 10px;
	}

	.skills h2 span {
		font-size: 1.3rem;
	}
}


.skills_fivepowers h2 {
    text-align: center;
    background: url(../img/skills_h2.svg) no-repeat top right / 50px;
    width: fit-content;
    display: block;
    margin: 0 auto 100px auto;

}

.skills_fivepowers h2 span {
    font-size: 1.8rem;
    background: linear-gradient(transparent 60%, #FBED11 0%);
}

@media only screen and (max-width: 767px){
	.skills_fivepowers h2 {
		background: url(../img/skills_h2.svg) no-repeat top right -15px / 50px;
	}
}



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

	メイン画像

============================== */
/* .skills mv */
.skills .mv_ttl {
	background: url("../img/mv_skills_bg.jpg") no-repeat top center / cover ;
}





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

	スクールで身につく5つの力

============================== */
/* skills_fivepowers */
.skills_fivepowers h2 {
	margin-bottom: 70px;
}

.skills_fivepowers .txt {
	text-align: center;
	line-height: 2;
	margin-bottom: 120px;
}

.skills_fivepowers .txt p {
	margin-bottom: 40px;
}


@media only screen and (max-width: 767px){
/*	.skills_fivepowers .inner{
		width: 100%;
	}
*/

	.skills_fivepowers h2 {
		margin-bottom: 20px;
	}

	.skills_fivepowers .txt {
		text-align: left;
		margin-bottom: 60px;
	}

	.skills_fivepowers .txt p {
		margin-bottom: 20px;
	}
}

/* skill_figure */
.skill_figure {
text-align: center;
padding: 40px;
background-color: #F7F4E8;
border: solid 5px #fff;
outline: solid 20px #F7F4E8;
outline-offset: 0px;
border-radius: 20px;
margin-bottom: 120px;
}
@media only screen and (min-width: 768px){
.skill_figure h2.sp_disp{ display: none;}
}
@media only screen and (max-width: 767px){
.skill_figure { border-radius: 1.25vw; padding: 5% 0 10%; width: 100%; margin: 0 auto 10%; border: solid 2px #fff; outline: solid 2.5vw #F7F4E8;}
.skill_figure h2{ width: 66.66%; margin: 0 auto; padding: 0;}
.skill_figure ul{ display: flex; justify-content: center; flex-wrap: wrap; align-items: stretch;}
.skill_figure li{ width: 49%; margin: 0%;}
.skill_figure li:nth-child(3) { margin: 5%;}
.skill_figure li .txt{ margin-bottom: 0; font-size: 2.5vw; text-align: center; font-weight: bold;}
}

/* fivepowers_link */
.fivepowers_link {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: flex-start;
	width: 90%;
	margin: 0 auto;
	margin-bottom: 20px;
}

.fivepowers_link .img {
	width: 300px;
}

.fivepowers_link .fivepowers_link_R {
	width: 570px;
}

.fivepowers_link .fivepowers_link_R .txt {
	text-align: left;
	margin-bottom: 30px;
}

.fivepowers_link .fivepowers_link_R .txt p {
	margin-bottom: 10px;
	line-height: 1.5;
}


@media only screen and (max-width: 767px){
	.fivepowers_link .img {
		width: 100%;
	}
	
	.fivepowers_link .fivepowers_link_R {
		width: 100%;
	}
}


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

	ラージハート/みらぼ

============================== */
/* skills_bottom */
.skills_bottom {
	background: url("../../../asset/img/bg_stripe.jpg");
	padding: 85px 0;
}

.skills_lh_wrap {
	background-color: #fff;
	border-radius: 20px;
	padding: 60px;
	padding-bottom: 40px;
	margin-bottom: 50px;
}

.skills_lh {
	border: 1px solid #000;
	border-radius: 20px;
	padding: 0 60px 60px 60px;
	margin-bottom: 40px;
}

.skills_lh h2 {
	background-color: #A6D174;
	border-radius: 1000px;
	border: 10px solid #FFF;
	margin-right: -70px;
	margin-top: -30px;
}

.skills_lh_about {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
}

.skills_lh_about .img {
	width: 165px;
}

.skills_lh_about .txt {
	width: 525px;
}

.skills_lh_about .btn {
	margin-top: 30px;
}

.skills_lh ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
    margin: 20px auto;
}

.skills_lh_wrap .btn a {
	color: #73B51D;
	border: 2px solid #73B51D;
}


@media only screen and (max-width: 767px){
	.skills_bottom {
		padding-bottom: 40px;
	}

	.skills_lh_wrap {
		border-radius: 10px;
		padding: 10px;
	}
	
	.skills_lh {
		border-radius: 10px;
		padding: 0 10px 10px 10px;
		margin-bottom: 40px;
	}
    .skills_lh ul { margin: 5% auto;}
	
	.skills_lh h2 {
		font-size: 1rem;
		border: 5px solid #FFF;
		margin-right: -20px;
		margin-top: -25px;
		padding: 10px 20px;
	}
	
	.skills_lh_about {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
	}
	
	.skills_lh_about .img {
		width: 40%;
		margin: 0 auto;
		margin-bottom: 20px;
	}
	
	.skills_lh_about .txt {
		width: auto;
	}
}

.entry {
	background-color: #fff;
	width: 50%;
	padding: 25px;
}

.entry_img {
	margin-bottom: 20px;
	width: 340px;
	height: 200px;
	overflow: hidden ;
}

.entry_img img {
	margin-bottom: 20px;
	transition: all 0.2s ease 0s;

}

.entry_img img:hover {
	transform: scale(1.2);
}

.entry_date {
	margin-bottom: 15px;
}

.entry_date a {
	color: #999;
}

.entry_txt {
	margin-bottom: 30px;
}

.entry_txt a {
	color: #000;
}

.entry_cat {
	text-align: right;
}

.entry_cat a {
	display: inline-block;
	color: #FFF;
	padding: 5px 20px;	
	border-radius: 100px;
}

.entry_cat .cat01 {
	background-color: #FFC500;
}

.entry_cat .cat02 {
	background-color: #9BCB6C;
}

.entry_cat .cat03 {
	background-color: #78ABDC;
}

.entry_cat .cat04 {
	background-color: #B89FC9;
}

.entry_cat .cat05 {
	background-color: #ED7971;
}

.entry_cat .cat06 {
	background-color: #FFC500;
}

.entry_cat .cat07 {
	background-color: #9BCB6C;
}

.entry_cat .cat08 {
	background-color: #78ABDC;
}

.entry_cat .cat09 {
	background-color: #B89FC9;
}

.entry_cat .cat10 {
	background-color: #ED7971;
}


@media only screen and (max-width: 767px){
	.entry{
		width: 100%;
		padding: 10px;
	}

	.entry_img {
		width: 100%;
		height: auto;
	}
	.entry_img img {
		margin-bottom: 0;
	}
}



/* skills_bottom */
.skills_mirabo_wrap {
	background-color: #fff;
	border-radius: 20px;
	padding: 60px;
	padding-bottom: 40px;
}

.skills_mirabo {
	border: 1px solid #000;
	border-radius: 20px;
	padding: 0 60px 60px 60px;
	margin-bottom: 20px;
}

.skills_mirabo  h2 {
	background-color: #FFDB00;
	border-radius: 1000px;
	border: 10px solid #FFF;
	margin-left: -70px;
	margin-top: -30px;
}

.skills_mirabo_about {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
}

.skills_mirabo_about .txt {
	width: 525px;
}

.skills_mirabo_about .img {
	width: 160px;
}


@media only screen and (max-width: 767px){
	.skills_mirabo_wrap {
		border-radius: 10px;
		padding: 10px;
	}
	
	.skills_mirabo {
		border-radius: 10px;
		padding: 0 10px 10px 10px;
		margin-bottom: 0;
	}
	
	.skills_mirabo  h2 {
		font-size: 1rem;
		border: 5px solid #FFF;
		margin-left: -20px;
		margin-top: -25px;
		padding: 10px 20px;
	}

	.skills_mirabo_about .txt {
		width: 100%;
		order: 2;
	}
	
	.skills_mirabo_about .img {
  width: 40%;
  order: 1;
  margin: 0 auto 20px;
	}
}

.skills_mirabo_wrap .btn a {
	color: #ffdb00;
	border: 2px solid #ffdb00;
}





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

	関連するページ

============================== */
/* skills_contents */
.skills_contents {
	background-color: #F2F2F2;
	padding: 60px 0 80px 0;
}

.skills_contents h2 {
	font-weight: bold;
	font-size: 1.6rem;
	margin-bottom: 50px;
	background: none;
}

.skills_contents h2 p {
	font-size: 1.0rem;
	margin-top: 6px;
	color: #78ABDC;
}

.skills_contents ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
}

.skills_contents li {
	width: 32%;
	background-color: #fff;
	border-radius: 20px;
}

.skills_contents li a {
	color: #000;
}

.skills_contents li a:hover {
	color: #999;
}

.skills_contents li img {
	border-radius: 20px 20px 0 0 ;
}

.skills_contents li h3 {
	padding: 25px 0;
	text-align: center;
}


@media only screen and (max-width: 767px){
	.skills_contents {
		padding: 40px 0 0 0;
	}

	.skills_contents li {
		width: 100%;
		margin-bottom: 40px;
	}
}





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

	関連サービス

============================== */
/* service */
.service {
	padding: 90px 0 60px;
}

.service h2 {
	font-weight: bold;
	font-size: 1.6rem;
	margin-bottom: 50px;
	background: none;
}

.service h2 p {
	font-size: 1.0rem;
	margin-top: 6px;
	color: #ED7971;
}

.service ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: stretch;
}

.service li {
	width: 310px;
	border: 2px solid #999;
	margin-bottom: 25px;
	transition: all 0.2s ease 0s;
}

.service li:hover {
	opacity: 0.5;
}

@media only screen and (max-width: 767px){
	.service {
		padding: 40px 0;
	}

	.service li {
		width: 100%;
	}
}



/*220808*/
.youtube{ position:relative; width:100%; padding-top:56.25% !important; margin: 0 auto;}
.youtube iframe{ position: absolute; top:0; right:0; width:100% !important; height:100% !important;}

.hininchi_movie{ text-align: center; margin: 40px auto 80px; padding: 40px 0; background: #edf4f9;}
.hininchi_movie h3{ text-align: center; margin-bottom: 20px; color: #0d3e84; font-size: 24px; font-weight: bold;}
.hininchi_movie_box{ width: 750px; margin: 0 auto;}
@media only screen and (max-width: 767px){
.hininchi_movie{ margin: 5% auto 10%; padding: 5%;}
.hininchi_movie h3{ margin-bottom: 5%; font-size: 3.5vw;}
.hininchi_movie_box{ width: 100%;}
}

@media only screen and (max-width: 767px){
.skills_mirabo_wrap:not(:last-child){ margin: 0 auto 5%;}
}

.mirabo_cap{ margin: 40px auto;}
.mirabo_cap ul{ display: flex; width: calc(100% + 20px); margin-left: -10px;}
.mirabo_cap ul li{ width: calc(50% - 20px); margin: 0 10px;}
.mirabo_cap p.att{ text-align: right; font-size: 12px; margin-top: 1em;}
@media only screen and (max-width: 767px){
.mirabo_cap{ margin: 5% auto;}
.mirabo_cap ul{ width: calc(100% + 2.5vw); margin-left: -1.25vw;}
.mirabo_cap ul li{ width: calc(50% - 2.5vw); margin: 0 1.25vw;}
.mirabo_cap p.att{ font-size: 2.5vw;}
}

.mirabo_movie{ margin: 0 auto;}
.mirabo_movie h3{ text-align: center; font-size: 24px; margin-bottom: 30px; position: relative;}
.mirabo_movie h3:after{ content: ""; width: 60px; height: 1px; background: #000; position: absolute; left: 0; right: 0; bottom: -10px; margin: auto;}
@media only screen and (max-width: 767px){
.mirabo_movie h3{ font-size: 3.5vw; margin-bottom: 5%;}
.mirabo_movie h3:after{ width: 10vw; bottom: -1.25vw;}
}


