@charset "UTF-8";


/*----------------------------------------
	wrapper
-----------------------------------------*/



/*----------------------------------------
	main_visual
-----------------------------------------*/

.main_visual{
	 position: relative;
	margin: 0 auto;
	padding-top: 150px;
}

.main_visual .center{
	margin: 0 auto;
	text-align: center;
}
.main_visual .sp{
	display: none;
}
.main_visual .center li img{
	margin: 0 auto;
	text-align: center;
}
.main_visual h2{
	position: absolute;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	left:0;
	right: 0;
	top:15%;
	bottom:0;
	z-index: 10;
	width: 30%;
}

.main_visual .clowd{
	position: absolute;
	top:30%;
	left:20%;
	z-index: 10;
	width: 10%;
}

	/* Arrows */
.main_visual .slick-prev,
.main_visual .slick-next
{
    font-size: 0;
    line-height: 0;
top:auto;
    position: absolute;
	z-index: 99;
    bottom: -60px;
    display: block;
    width: 60px;
    height: 60px;
    padding: 0;
}
.main_visual .slick-prev:hover,
.main_visual .slick-prev:focus
{
    background: url("../img/top_main_arrow_l.png")no-repeat center center;
	background-size: 60px;
}
	
.main_visual .slick-next:hover,
.main_visual .slick-next:focus
{
    background: url("../img/top_main_arrow_r.png")no-repeat center center;
	background-size: 60px;
}
.main_visual .slick-prev
{
    left: 3%;
	background: url("../img/top_main_arrow_l.png")no-repeat center center;
	background-size: 60px;
}

.main_visual .slick-next
{
    right: 3%;
	background: url("../img/top_main_arrow_r.png")no-repeat center center;
	background-size: 60px;
}
/*----------------------------------------
	news
-----------------------------------------*/

.news{
	margin:8% auto 0 auto;
	background: #fff;
	padding:5% 10% 5% 10%;
}

.news dl{
	margin: 0 auto;
	max-width:1200px;
	background: #fff;
}
.news dt{
	font-weight: 700;
	font-size: 2.2rem;
}
.news dd{
	font-weight: 700;
	color:#ffad2b;
	border-bottom: 1px #777 solid;
	padding: 8px 0;
}
.news dd:last-child{
	border-bottom: none;
}
.news dd a{
	font-weight: 700;
	color:#ffad2b;
}

/*----------------------------------------
	aboutus
-----------------------------------------*/

.aboutus{
	margin: 0 auto;
	padding:15% 0 0 0;
	text-align: center;
	position: relative;
}
.aboutus .about_ill{
	margin: 0 auto;
	padding:10% 0 8% 0;
	position: relative;
}
.aboutus .copy{
	position: relative;
	margin: 0 auto;
}

.aboutus .aboutslide{
	display: none;
}
.aboutus .baloon{
	position: absolute;
	right: 63%;
	width: 20%;
	top:-90px;
}
.aboutus .about_ttl {
	position: absolute;
	left: 0;
	right: 0;
	margin:0 auto;
	display: flex;
	justify-content: center;
	z-index: 1;
}
.aboutus .about_ttl h3{
	text-align: left;
	padding:0 30px;
	font-size: calc(22px + 15 * (100vw - 360px) / 840); 
	letter-spacing: 0.3em;
	font-weight: 700;
}
.aboutus .about_area{
	position: relative;
}
.aboutus .about_area a{
	z-index: 2;
	position: absolute;
	display: block;
	background: url("../img/top_about_click01.png")no-repeat center center;
	background-size: contain;
	width: 4%;
	height: 4%;
}
.aboutus .about_area a:hover{ 
	opacity: 1;
	background: url("../img/top_about_click01_on.png")no-repeat center center;
	background-size: contain;
}
.aboutus .aboutbtn01{
	bottom:34%;
	right:20%;
}
.aboutus .aboutbtn02{
	top:34%;
	right:29%;
}
.aboutus .aboutbtn03{
	top:38%;
	left:37%;
}
.aboutus .aboutbtn04{
	top:46.5%;
	right:40.4%;
}
.aboutus .aboutbtn05{
	bottom:26%;
	left:41%;
}
.aboutus .aboutbtn06{
	bottom:40%;
	left:30.3%;
}
.aboutus .aboutbtn07{
	top:42.7%;
	right:46.5%;
}
.aboutus .aboutbtn08{
	top:44.5%;
	left:26.5%;
}
.aboutus .aboutbtn09{
	bottom:38%;
	left:21%;
}
.aboutus .aboutbtn10{
	bottom:40.5%;
	left:43%;
}
.aboutus .aboutbtn11{
	top:42%;
	right:22.5%;
}
.aboutus .aboutbtn12{
	top:54.3%;
	right:26.7%;
}
.aboutus .aboutbtn13{
	bottom:25%;
	right:26%;
}
.aboutus .aboutbtn14{
	bottom:20%;
	right:45.2%;
}
.aboutus .aboutbtn15{
	bottom:37%;
	right:39.4%;
}
.aboutus .aboutbtn16{
	top:51.5%;
	left:46.5%;
}

/*モーダルを開くボタン*/
.modal-open,.modal-open02,.modal-open03,.modal-open04,.modal-open05,.modal-open06,.modal-open07,.modal-open08,.modal-open09,.modal-open10,.modal-open11,.modal-open12,.modal-open13,.modal-open14,.modal-open15,.modal-open16{
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
}
/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container,.modal-container02,.modal-container03,.modal-container04,.modal-container05,.modal-container06,.modal-container07,.modal-container08,.modal-container09,.modal-container10,.modal-container11,.modal-container12,.modal-container13,.modal-container14,.modal-container15,.modal-container16{
  position: fixed;
  top: 0px;
	bottom:0;
	right: 0;
  left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0,0,0,50%);
  padding: 40px 20px;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  box-sizing: border-box;
	z-index: 99;
}
/*モーダル本体の擬似要素の指定*/
.modal-container:before,.modal-container02:before,.modal-container03:before,.modal-container04:before,.modal-container05:before,.modal-container06:before,.modal-container07:before,.modal-container08:before,.modal-container09:before,.modal-container10:before,.modal-container11:before,.modal-container12:before,.modal-container13:before,.modal-container14:before,.modal-container15:before,.modal-container16:before{
  content: "";
  display: inline-block;
  vertical-align: middle;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active,.modal-container02.active,.modal-container03.active,.modal-container04.active,.modal-container05.active,.modal-container06.active,.modal-container07.active,.modal-container08.active,.modal-container09.active,.modal-container10.active,.modal-container11.active,.modal-container12.active,.modal-container13.active,.modal-container14.active,.modal-container15.active,.modal-container16.active{
  opacity: 1;
  visibility: visible;
}
/*モーダル枠の指定*/
.modal-body,.modal-body02,.modal-body03,.modal-body04,.modal-body05,.modal-body06,.modal-body07,.modal-body08,.modal-body09,.modal-body10,.modal-body11,.modal-body12,.modal-body13,.modal-body14,.modal-body15,.modal-body16{
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 1200px;
  width: 90%;
}
/*モーダルを閉じるボタンの指定*/
.modal-close,.modal-close02,.modal-close03,.modal-close04,.modal-close05,.modal-close06,.modal-close07,.modal-close08,.modal-close09,.modal-close10,.modal-close11,.modal-close12,.modal-close13,.modal-close14,.modal-close15,.modal-close16{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -20px;
  right: -10px;
  width: 80px;
  height: 80px;
  font-size: 40px;
	font-weight: 700;
  color: #333;
  cursor: pointer;
	background: #f8f8ec;
	border:4px #333 solid;
	border-radius: 50%;
}
/*モーダル内のコンテンツの指定*/
.modal-content{
  background: #fff;
  text-align: left;
	border-radius: 50px;
  padding:50px 70px;
}
.modal-content .about_ico{
	display: flex;
	align-items: center;
	border-bottom: 1px #777 solid;
	padding-bottom: 30px;
	margin-bottom: 30px;
}
.modal-content .about_ico dl{
	margin-left: 20px;
}
.modal-content .about_ico dt{
	background: #ffdf2b;
	padding: 5px 10px;
	text-align: center;
	width: 180px;
	border:1px #333 solid;
	border-radius: 50px;
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.7;
	margin-bottom: 8px;
}
.modal-content .about_ico dd{
	font-weight: 700;
	font-size: 2.7rem;
	line-height: 1.7;
}
.modal-content .about_ex{
	display: flex;
	justify-content: space-between;
}
.modal-content .about_ex .pic{
	width:30%;
}
.modal-content .about_ex .txt{
	width:65%;
}
.modal-content .about_ex img{
	border-radius: 30px;
}

/*----------------------------------------
	curriculum
-----------------------------------------*/

.curriculum{
	padding:8% 0 10% 0;
	position: relative;
	text-align: center;
	margin: 0 auto;
}
.curriculum_ttl img{
	margin: 0 3% 0 0;
}
.curriculum .curriculum_btn{
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 5% 0 5% 0;
	text-align: left;
}
.curriculum .curriculum_btn a{
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px #333 solid;
	padding: 30px;
	border-radius: 30px;
	background: #ffdf2b;
	margin:25px 0 0 0;
	position: relative;
	text-align: left;
	width: 60%;
}
.curriculum .curriculum_btn .bn_pic{
	width: 35%;
}

.curriculum .curriculum_btn a p{
	width: 60%;
	line-height: 1.7;
	font-size: calc(7px + 8 * (100vw - 360px) / 840); 
}
.curriculum .curriculum_btn dl{
	text-align: left;
	margin: 0 0 0 7%;
}
.curriculum .curriculum_btn dt{
	font-weight: 700;
	font-size: calc(10px + 12 * (100vw - 360px) / 840); 
}

/*----------------------------------------
	labo
-----------------------------------------*/

.labo{
	margin: 0 auto;
	padding:10% 7% 10% 7%;
	text-align: center;
	position: relative;
	background: #ffdf2b;
}
.labo .ttl_area{
	position: relative;
}
.labo .labo_ttl{
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	margin: 0 auto;
	top:80%;
}

.labo .labo_container{
	margin: 150px 0 0 0;
	display: grid;
	gap: 60px;
	grid-template-columns: repeat(2,1fr);
	justify-content: space-between;
}
.labo .labo_box{
	background: #fff;
/*	background: #f8f8ec; */
}
.labo .labo_ttl_box{
	border-top:1px #333 solid;
	border-bottom:1px #333 solid;
	padding: 10px 0;
	background: #ffdf2b;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.labo .labo_ttl_box h4{
	font-size: calc(10px + 10 * (100vw - 360px) / 840); 
	font-weight: 700;
	line-height: 1.5;
}
.labo ul{
	display: flex;
	align-items: center;
}
.labo li{
	line-height: 1.5;
	font-size: 1.3rem;
	text-align: left;
	font-weight: 700;
	margin: 0 10px 0 0;
}
.labo dl{
	display: flex;
	align-items: center;
}
.labo dt{
	margin: 0 10px 0 0;
}
.labo .labo_box p{
	padding: 30px;
	text-align: left;
	background: #fff;
/*	background: #f8f8ec; */
}


/*----------------------------------------
	entry
-----------------------------------------*/

.entry{
	margin: 0 auto;
	padding:10% 7% 10% 7%;
	text-align: center;
	position: relative;
}
.entry .ttl_area{
	position: relative;
}

.entry .pic{
	margin: 6% 0;
}

.entry dl{
	text-align: center;
	margin: 0 auto;
}
.entry dt{
	text-align: left;
	font-weight: 700;
	font-size: 1.8rem;
	margin-bottom: 10px;
}
.entry dd{
	text-align: left;
}

.entry dd a{
	font-weight: 700;
	color:#ffad2b;
}

.entry .link{
	display: grid;
	grid-template-columns: 360px 360px;
	justify-content: center;
	gap:30px;
	margin-top: 40px;
}

/*media Queries タブレットサイズ（769px～1000px）のみで適応したいCSS -タブレットのみ
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 1050px) {
	
/*----------------------------------------
	aboutus
-----------------------------------------*/
.aboutus .baloon{
	position: absolute;
	left: 15%;
	width: 20%;
	top:-70px;
}

.aboutus .about_area a{
	z-index: 2;
	position: absolute;
	display: block;
	background: url("../img/top_about_click01.png")no-repeat center center;
	background-size: contain;
	width: 5%;
	height: 5%;
}
	
/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container,.modal-container02,.modal-container03,.modal-container04,.modal-container05,.modal-container06,.modal-container07,.modal-container08,.modal-container09,.modal-container10,.modal-container11,.modal-container12,.modal-container13,.modal-container14,.modal-container15,.modal-container16{
  padding: 40px 0px;
}


/*モーダル枠の指定*/
.modal-body,.modal-body02,.modal-body03,.modal-body04,.modal-body05,.modal-body06,.modal-body07,.modal-body08,.modal-body09,.modal-body10,.modal-body11,.modal-body12,.modal-body13,.modal-body14,.modal-body15,.modal-body16{
  width: 95%;
}
.modal-content .about_ico dt{
	font-size: 3.0rem;
}
.modal-content .about_ico dd{
	font-size: 2.2rem;
}
.modal-content .about_ico .ico{
	width: 150px;
}
.modal-content .about_ex .pic{
	width:40%;
}
.modal-content .about_ex .txt{
	width:55%;
	line-height: 2;
	font-size: 1.4rem;
}

}
/*media Queries スマートフォンサイズ（768px以下）で適応したいCSS - スマホ
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 768px) {

	

/*----------------------------------------
	main_visual
-----------------------------------------*/

.main_visual{
	 position: relative;
	margin: 0 auto;
	padding-top: 100px;
}

.main_visual .center{
	margin: 0 auto;
	text-align: center;
}
.main_visual .pc{
	display: none;
}
.main_visual .sp{
	display: block;
	width: 90%;
}
.main_visual .center li img{
	margin: 0 auto;
	text-align: center;
}
.main_visual h2{
	position: relative;
	margin:7% auto 0 auto;
	display: block;
	width: 65%;
}

.main_visual .clowd{
	position: absolute;
	top:18%;
	left: 5%;
	z-index: 10;
	width:90%;
}

	/* Arrows */
.main_visual .slick-prev,
.main_visual .slick-next
{
    font-size: 0;
    line-height: 0;
top:auto;
    position: absolute;
	z-index: 99;
    bottom: -30px;
    display: block;
    width: 64px;
    height: 40px;
    padding: 0;
}
.main_visual .slick-prev:hover,
.main_visual .slick-prev:focus
{
	background-size: 40px;
}
	
.main_visual .slick-next:hover,
.main_visual .slick-next:focus
{
	background-size: 40px;
}
.main_visual .slick-prev
{
    left: auto;
	right: 20%;
	background-size: 40px;
}

.main_visual .slick-next
{
    right: 3%;
	background-size: 40px;
}
/*----------------------------------------
	news
-----------------------------------------*/

.news{
	margin: 20% 0 0 0;
	padding:8%;
}

.news dl{
	margin: 0 auto;
}
.news dt{
	font-weight: 700;
	font-size: 1.8rem;
}
.news dd{
	font-weight: 700;
line-height:1.7;
font-size:  1.4rem;

}
.news dd:last-child{
	background: none;
}
	
/*----------------------------------------
	aboutus
-----------------------------------------*/

.aboutus{
	padding:20% 0 0 0;
	position: relative;
}

.aboutus .baloon{
	width: 46%;
	position: absolute;
	padding: 0;
	left:10%;
	top:0px;
}
.aboutus .about_area{
	display: none;
}

.aboutus .about_ttl {
	margin:0 auto;
	padding:35% 0 0 0;
}
.aboutus .copy{
	position: absolute;
	display: block;
	left:0;
	right: 0;
}
.aboutus .copy:after{
	content: "";
	width: 0%;
	display: none;
}
.aboutus .about_sp_ill{
	padding: 50% 0 0 0;
}

.aboutus .aboutslide{
	display: block;
	padding:5% 0 5% 0;
	background: #ffdf2b;
}
	
.aboutus .aboutslide .slide{
	margin: 0 15px;
	box-sizing: border-box;
  background: #fff;
  text-align: left;
	border-radius: 30px;
  padding:30px 28px;
}
.aboutus .aboutslide .slide .about_ico{
	border-bottom: 1px #777 solid;
	padding-bottom: 30px;
	margin-bottom: 30px;
}
.aboutus .aboutslide .slide .about_ico .ico img{
	padding: 10px;
	text-align: center;
	margin: 0 auto;
	max-width: 130px;
}
.aboutus .aboutslide .slide .about_ico dt{
	background: #ffdf2b;
	padding: 2px 10px;
	text-align: center;
	width: 160px;
	border:1px #333 solid;
	border-radius: 50px;
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1.7;
	margin:8px auto;
}
.aboutus .aboutslide .slide .about_ico dd{
	font-weight: 700;
	line-height: 1.7;
	text-align: center;
}
.aboutus .aboutslide .about_ex .pic{
	margin:0 auto 30px auto;
	text-align: center;
}
.aboutus .aboutslide .about_ex .pic img{
	margin:0 auto;
	text-align: center;
}
.aboutus .aboutslide .about_ex .txt{
	font-size: 1.3rem;
	line-height: 1.7;
}
.aboutus .aboutslide .about_ex img{
	border-radius: 20px;
}

	/* Arrows */
.aboutus .slick-prev,
.aboutus .slick-next
{
    font-size: 0;
    line-height: 0;
    position: absolute;
	z-index: 99;
	top:-2%;
    display: block;
    width: 50px;
    height: 50px;
    padding: 0;
}
.aboutus .slick-prev:hover,
.aboutus .slick-prev:focus
{
    background: url("../img/top_about_arrow_l.png")no-repeat center center;
	background-size: 50px;
}
	
.aboutus .slick-next:hover,
.aboutus .slick-next:focus
{
    background: url("../img/top_about_arrow_r.png")no-repeat center center;
	background-size: 50px;
}
.aboutus .slick-prev
{
    left: 30%;
	background: url("../img/top_about_arrow_l.png")no-repeat center center;
	background-size: 50px;
}

.aboutus .slick-next
{
    right: 30%;
	background: url("../img/top_about_arrow_r.png")no-repeat center center;
	background-size: 50px;
}

/*----------------------------------------
	curriculum
-----------------------------------------*/

.curriculum{
	padding:30% 0 0 0;
	position: relative;
	text-align: center;
	margin: 0 auto;
}
.curriculum_ttl{
	padding: 0px;
	position:relative;
	top:0;
	height: auto;
	margin: 0 5%;
}
.curriculum .curriculum_btn{
	display: block;
	margin: 10% 7% 0 7%;
	text-align: center;
}
.curriculum .curriculum_btn a{
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px #333 solid;
	padding: 30px;
	border-radius: 30px;
	background: #ffdf2b;
	margin:25px 0 0 0;
	position: relative;
	text-align: left;
	width:  auto;
}
.curriculum .curriculum_btn .bn_pic{
	width: 25%;
}

.curriculum .curriculum_btn a p{
	width: 70%;
	line-height: 1.7;
	font-size: calc(12px + 12 * (100vw - 360px) / 840); 
}
.curriculum .curriculum_btn dl{
	text-align: center;
	margin:7% 0 0 0;
}
.curriculum .curriculum_btn dt{
	font-weight: 700;
	font-size: calc(16px + 12 * (100vw - 360px) / 840); 
}

/*----------------------------------------
	labo
-----------------------------------------*/

.labo{
	margin: 25% auto 0 auto;
	padding:20% 0 15% 0%;
	text-align: center;
	position: relative;
}

.labo .labo_ttl{
	padding: 0px;
	position:relative;
	top:0;
	height: auto;
	margin: 0 0 15% 0;
}

.labo .labo_container{
	margin: 0;
	display: block;
}
.labo .labo_ttl_box{
	display: block;
	padding: 0;
}
.labo .labo_ttl_box h4{
	font-size: calc(18px + 12 * (100vw - 360px) / 840); 
	font-weight: 700;
	line-height: 1.5;
	border-bottom:1px #333 solid;
	padding: 10px 0;
}
.labo .labo_box p{
	padding:6% 8%;
	line-height: 2;
	text-align: left;
}
.labo .labo_box{
	margin: 0 0 15% 0;
}
.labo ul{
	justify-content: center;
	margin: 5% auto;
}
.labo li{
	line-height: 1.5;
	font-size: 1.3rem;
	width: auto;
}

/*----------------------------------------
	entry
-----------------------------------------*/

.entry{
	margin: 0 auto;
	padding:25% 0;
	text-align: center;
	position: relative;
}
.entry .entry_ttl{
	padding:5% 0 10% 0;
	text-align: center;
	margin: 0 auto;
}
.entry .entry_ttl img{
	text-align: center;
	margin: 0 auto;
	width: 70%;
}
.entry  .cap:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #fff8a9;
  z-index: 10;
}
.entry  .cap:after {
  content: "";
  position: absolute;
  bottom: -28px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #666;
  z-index: 0;
}
.entry .pic{
	margin: 6% 0;
}

.entry dl{
	margin: 0 auto 10% auto;
}
.entry dt{
	text-align: left;
	font-weight: 700;
	font-size: 1.6rem;
	margin-bottom: 10px;
}
.entry dd{
	font-size: 1.3rem;
}
.entry .link{
	display: block;
	margin-top: 40px;
}
.entry .link li:last-of-type{
	margin-top: 20px;
}
	
	
}/*解像度768px以下*/