@charset "UTF-8";


/*----------------------------------------*----------------------------------------
topimage
----------------------------------------*----------------------------------------*/

@media screen and (max-width: 767px) {
	#topimage { 
		position: relative;
		height:	180px;
	}
.txt-topimg_01{
font-size: 2rem;
	text-align: center;
	color: #fff;
	margin: -130px auto 100px auto;
}
#topimage .slick_slider{ margin-bottom: 0;}
	#topimage .slick-slide{  height:	180px;  }
	#topimage .slick-slide--01{
			background: url(img/topimage01.jpg) no-repeat 50% 0;
			background-size: cover !important;
	}	
		#topimage .slick-slide--02{
			background: url(img/topimage02.jpg) no-repeat 50% 0;
			background-size: cover !important;			
	}	
	#topimage .slick-slide--03{
			background: url(img/topimage03.jpg) no-repeat 50% 0;
			background-size: cover !important;	
	}		
	#topimage .slick-slide--04{
			background: url(img/topimage04.jpg) no-repeat 50% 0;
			background-size: cover !important;	
	}
	#topimage .slick-slide--05{
			background: url(img/topimage05.jpg) no-repeat 50% 0;
			background-size: cover !important;	
	}		
	
}
	
@media print, screen and (min-width: 768px) {
	#topimage { 
		position: relative;
		z-index: 1;
	}
	#topimage .slick_slider{
		margin-bottom: 0;
	}	
	#topimage .slick-slide--01{
			background: url(img/topimage01.jpg) no-repeat 50% 0;
			background-size: cover !important;	
	}	
		#topimage .slick-slide--02{
			background: url(img/topimage02.jpg) no-repeat 50% 0;
			background-size: cover !important;			
	}	
	#topimage .slick-slide--03{
			background: url(img/topimage03.jpg) no-repeat 50% 0;
			background-size: cover !important;	
	}		
	#topimage .slick-slide--04{
			background: url(img/topimage04.jpg) no-repeat 50% 0;
			background-size: cover !important;	
	}
	#topimage .slick-slide--05{
			background: url(img/topimage05.jpg) no-repeat 50% 0;
			background-size: cover !important;	
	}			

.txt-topimg_01{
background:url(img/txt-topimg_01.png) no-repeat 0 0;
	margin:auto;
	position: absolute;
	top: 0; bottom: 0;
	left: 0; right: 0;
width: 532px;
height: 49px;	
}


}

/*----------------------------------------*----------------------------------------
   common
----------------------------------------*----------------------------------------*/
p.description{ text-align: center; }
.card_photo .card_block{ padding: 0 !important; }

@media screen and (max-width: 767px) {
	.ebox_ht{ text-align: center; font-size: 2rem; font-weight: 600; position: relative; margin-top: 30px; }
	.ebox_ht:after{ display: block; content:""; border-left: 2px solid #cc0000; height: 25px; position: absolute; left:50%; top: -30px;}
.ebox:not(.ebox--bg) + .ebox:not(.ebox--bg), .ebox--bg + .ebox:not(.ebox--bg) {
    margin-top: 0; padding-top: 0;
}
}
	

/*----------------------------------------*----------------------------------------
   Intro
----------------------------------------*----------------------------------------*/
	#intro .lead{ background: #cc0000; color: #fff; }
@media screen and (max-width: 767px) {
		#intro .lead{ padding:15px 10px; }	
}

@media print, screen and (min-width: 768px) {
#intro h1.ebox_ht{
background: url(img/ttl-intro.png) no-repeat 50% 0;
height: 91px;
margin-bottom: 120px;
}
	#intro .container{ position: relative; display: block; }
	#intro .photo{ position: absolute; left: 10px; top: -60px; width: 470px; }
	#intro .lead{  width: 470px; padding: 50px 20px; margin-left: 470px;	}
}


/*----------------------------------------*----------------------------------------
    person
----------------------------------------*----------------------------------------*/
@media print, screen and (min-width: 768px) {
	#person .ebox:last-child{ margin-bottom: 0 !important; }
  #person h2.ebox_ht{ margin-bottom: 60px; text-align: center; font-weight: 600; font-size: 3rem;}		
	#person .box{ display: table; table-layout: fixed; width: 960px; position: relative;}
	#person .box_person{ width: 120px; display: table-cell; vertical-align: top; text-align: center; padding-top: 95px; }
	#person .box_person_b{ width: 200px; padding-top: 0; }	
	#person .box_person p{ padding-top: 45px; font-weight: 800; }
	#person .box_person_b p{ padding-top: 20px; font-size: 2.4rem; font-weight: 800; }	
	#person .box_person.creat p{ padding-top: 30px; }
	#person .box_person.music p{ padding-top: 20px;}
	#person .bg{ background-color: #ccc; height: 150px; display: block; width: 100%; position: absolute; bottom: -20px; margin-bottom: 20px; }
}

@media screen and (max-width: 767px) {
#person .box{ display: block; text-align: center; margin:0 auto; width: 100%; padding-bottom: 20px; }
	#person .box_person{ width: 33.33333%; float: left; padding: 0 5px; margin-top: 0; margin-bottom: 0; font-size: 1.4rem;}
	#person .box_person p{ margin: 10px 0 0 0; padding: 0; }
	#person .box_person_b{ width: 100%; clear: both; display: block; }
	#person .box_person_b img{ width: 40%; }
	#person .freshman,
	#person .music,
	#person .creat{ margin-top: -20px; }
	#person .toy{ margin-top: 10px; }
	#person .creat{ font-size: 1.2rem; }
	
}
/*----------------------------------------*----------------------------------------
    number
----------------------------------------*----------------------------------------*/
#number .card{ background: #fff; border: 3px #ccc solid; }
#number .img_number{ text-align: center; }
#number h3.number_ht{ font-size: 2.4rem; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif; text-align: center; font-weight: 800;  }
#number .number_a{ text-align: center; line-height: 1; font-size: 2.2rem; font-weight: 600;}
#number .number_a span{ font-size: 7rem; font-weight: 700; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;}
/*  number01 */
#number .number01{  background: #ccf1f7; }
#number .number01 .number_a{ color: #00b9d8; }
/*  number02 */
#number .number02{  background: #ffead7;}
#number .number02 .number_a{ color: #ff9537; }
/*  number03 */
#number .number03{  background: #ccf3dd; }
#number .number03 .number_a{ color: #02c255; }

#number .number02 .img_number{ background: url(img/im_number02.jpg) no-repeat 0 0; height: 100%; background-size: cover; }
#number .number03 .img_number{ background: url(img/im_number03.jpg) no-repeat left center; height: 100%; background-size: cover; }

	#number .card p{ text-align: center; padding-top: 12px;	}

@media screen and (max-width: 767px) {
	#number .number01, #number .number02, #number .number03{ padding: 20px 0 0 0; }	
  #number  h2.ebox_ht:after{ display: none; }	
  #number  h2.ebox_ht{ border-radius: 10px; background-color: #fff; padding: 15px; margin:0 auto 25px auto; }	
  #number .number01 h2.ebox_ht{	border: 3px solid #00b9d8; color:  #00b9d8; }	
  #number .number02 h2.ebox_ht	{	border: 3px solid #ff9537; color: #ff9537; }
  #number .number03 h2.ebox_ht	{	border: 3px solid #02c255; color: #02c255; }
	#number h3.number_ht{ font-size: 1.8rem; margin-bottom: 10px; }
	#number .number_a{ margin-bottom: 10px; }	
	#number .number_a span{ font-size: 4rem; }
	#number .clearfix{ margin-bottom: 0; }
  #number .number02 .img_number,
  #number .number03 .img_number{ height: 160px; }	
	#number .row{ margin-bottom: 0; }	
	#number .beginner img{ margin-top: -30px; }
	#number .box_event ul li{ display: block; background: rgba(204,243,221,.6); padding: 10px; margin-bottom: 5px; font-size: 1.2rem;}
  #number .number03 .img_number{ background-position: center center; background-size: cover; }	
}

@media print, screen and (min-width: 768px) {
	#number.ebox{ margin-top: 0 !important; padding-top: 0; }
	#number h1.ebox_ht{ background: url(img/ttl-number.png) no-repeat 50% 0; height: 91px; margin-bottom: 30px;}
	/* number01-03*/
	#number .number01, #number .number02, #number .number03{ padding: 52px 0; }
	#number .number01 h2.ebox_ht{ background: url(img/ttl-number01.png) no-repeat 50% 0; height: 80px; margin-bottom: 42px;}
	#number .number02 h2.ebox_ht{ background: url(img/ttl-number02.png) no-repeat 50% 0; height: 80px; margin-bottom: 42px; }	
	#number .number03 h2.ebox_ht{ background: url(img/ttl-number03.png) no-repeat 50% 0; height: 80px; margin-bottom: 42px; }
	#number .box_event{ text-align: center; }	
	#number .box_event ul li{ background: rgba(204,243,221,.6); padding: 15px; font-size: 1.3rem; margin-right: 10px; margin-bottom: 15px; width: 180px; float: left; text-align: center; }
	#number .box_event li span{ font-size: 2.2rem; display: block; }	
	}

/*----------------------------------------*----------------------------------------
    jobs
----------------------------------------*----------------------------------------*/

#jobs .media_lead { border: 3px solid #ccc; border-radius: 10px; }
#jobs .box_jobs{ margin-bottom: 5px;}
#jobs .box_jobs.red{ border: 5px solid #f85550; }
#jobs .box_jobs.orange{ border: 5px solid #ff9537;}
#jobs .box_jobs.yellow{ border: 5px solid #ffd200;}
#jobs .box_jobs.green{ border: 5px solid #02c255;}
#jobs .box_jobs.blue{ border: 5px solid #00b9d8;}
#jobs .box_jobs.purple{ border:5px solid #7a58a2;}

#jobs .box_jobs h2{ margin-bottom: 0; }	
#jobs h2.jobs_ht{ color: #fff; position: relative;}
#jobs h2.jobs_ht i{ line-height: 1;	
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -.5em; }
#jobs .box_jobs.red h2{ background:#f85550; }
#jobs .box_jobs.orange h2{ background: #ff9537;}
#jobs .box_jobs.yellow h2{ background: #ffd200;}
#jobs .box_jobs.green h2{ background: #02c255;}
#jobs .box_jobs.blue h2{ background:#00b9d8;}
#jobs .box_jobs.purple h2{ background: #7a58a2;}

#jobs .box_jobs.red h3{ color: #f85550; }
#jobs .box_jobs.orange h3{ color: #ff9537;}
#jobs .box_jobs.green h3{ color: #02c255;}
#jobs .box_jobs.blue h3{ color: #00b9d8;}
#jobs .box_jobs.purple h3{ color: #7a58a2;}

#jobs .box_jobs .content_block{ padding:15px; }
#jobs .ps{ text-align: center; padding: 15px 0; font-weight: 600; margin-top: 50px; font-size: 3.4rem;} 

@media screen and (max-width: 767px) {
	#jobs.ebox{ padding-bottom: 20px; }
	#jobs .media_body{ padding: 15px 10px 0 15px;}
	.media-pc .media_object--right{ margin-top:0px !important;}
	#jobs h2.jobs_ht{ font-size: 1.4rem; padding: 5px 40px 5px 10px; }	
	#jobs .img_jobs{ padding:0 10px 15px 10px;}	
	#jobs .img_jobs img{ margin:15px auto 0;  }
	#jobs .content_block{ display: none; }
	#jobs .ps{ font-size: 1.4rem; padding: 15px 8px; margin-top: 20px;}
}

@media print, screen and (min-width: 768px) {
	#jobs h2.jobs_ht{ color: #fff; 	font-family: 'Noto Sans Japanese', sans-serif; font-size: 2.0rem; padding: 10px 0 16px 20px; position: relative; }
	#jobs.ebox{ margin-top: 0; padding-top: 0; margin-bottom: 80px; }
  #jobs h1.ebox_ht{ background: url(img/ttl-jobs.png) no-repeat 50% 0; height: 91px; margin-bottom: 40px; }	
	#jobs .media_body{ padding: 20px 0 15px 20px;}
	#jobs .img_jobs{ display: block; width: 536px; float: left; margin: 25px 20px 25px 0;}
	#jobs #accordion .img_jobs{ width: 270px;}
	#jobs h3{ font-weight: 700; margin-top: 20px;}
	#jobs .content_block{ display: none; overflow: hidden; }	
	#jobs .txt_jobs{ display: block; overflow: hidden; }
	}

/*----------------------------------------*----------------------------------------
    voice
----------------------------------------*----------------------------------------*/
#voice { background: #66d5e8; }
#voice .container{position: relative;}
#voice .media_object img{ border-radius: 50%; }
#voice .box_r, #voice .box_l{  border-radius: 10px; padding:10px 35px 10px 30px;}

#voice .voice_box p{ margin-bottom: 0; margin-top: 0;}

#voice .bg-bluet-l{ background: #99e3f0; }
#voice .balloon--b{ display: block; padding: 5px 15px; border-radius: 4px; width: 340px;
	position: absolute; top: -60px; right: 3px; text-align: center; font-size: 1.4rem;}
#voice .balloon--b::after {
    border-color: #99e3f0 transparent transparent transparent;
	bottom: -15px;
left: 96%;
margin-left: -10px;
border-width: 15px 8px 0 8px;
}

@media screen and (max-width: 767px) {
	#voice.ebox{  padding: 1px 0; }	
	#voice .box_l{ width: 88%; margin-bottom: 20px; margin-left: 20px;}
	#voice .box_r{  width: 92%; }
  #voice .box_r, #voice .box_l{padding:10px 15px;}	
  #voice img{ width: 60px; }	
	#voice .media{ padding-bottom: 0; margin-bottom: 10px; }
}

@media print, screen and (min-width: 768px) {
  #voice.ebox{ margin-top: 0; padding-top: 0; padding-bottom: 60px; }	
	#voice h1.ebox_ht{
background: url(img/ttl-voice.png) no-repeat 50% 0;
height: 91px;
margin-bottom: 40px;
	}	
  #voice img{ width: 60px; }		
	#voice .box_r{ width: 400px; float:  right;}
	#voice .box_l{ width: 500px; margin-left: 20px; }	
	#voice .media{ margin-bottom: 0;}
	#voice .container{ margin-top: 20px; }
	#voice .voice_box{
	  position: relative;
	overflow-y: scroll;
	height: 400px;
	}
	
	#voice .media{ 	width: 100%; table-layout: fixed; padding-bottom: 10px; }
	#voice .media_body{ width: auto; }
	#voice .voice_box .media_object{
		width: 60px !important;
	}	
	#voice .im_boss img{ margin-left: 20px; }
}


@media screen and (max-width: 767px) {
#voice .container{ margin-top: 40px; padding-bottom: 30px; margin-bottom: 10px; }	
	
}

/*----------------------------------------*----------------------------------------
    offer
----------------------------------------*----------------------------------------*/
#offer table.table-basic{ border-collapse: separate; color: #666; }
#offer .table-basic th{ background-color: #f0f0f0; }
#offer .table-basic tr:nth-child(even) th{ background-color: #e8e8e8; }
#offer .table-basic td{ background-color:#f7f7f7;}
#offer .table-basic th, #offer .table-basic td { border-bottom:2px solid #fff; border-right: 2px solid #fff; border-left: none; border-top: none; padding: 15px;}
#offer .btn::before {
    right: 20px;
    font-size: 2rem;
	line-height: 1;
}
#offer .btn.hellowork{ background: #ffd200; color: #444; }
@media screen and (max-width: 767px) {
#offer .table-basic.table-responsive{ border-top: none; }
	#offer .btn{ padding: 15px 21px 12px 15px; }
	#offer .btn i{ margin-right: 0px; margin-left: 10px; }	
#offer .btn::before {
    font-size: 1.2rem;
	right: 15px;
	line-height: 1.2;
}	
}

@media print, screen and (min-width: 768px) {
	#offer.ebox{ margin-top: 0; padding-top: 0; }
#offer h1.ebox_ht{
background: url(img/ttl-offer.png) no-repeat 50% 0;
height: 91px;
margin-bottom: 45px;
}	
	#offer .table-basic th{ width: 128px; letter-spacing: 2px; }
	#offer .btn{ font-size: 2.0rem;  width: 460px; text-align: left;}	
	#offer .btn i{ margin-right: 140px; margin-left: 10px; }
}


/*----------------------------------------*----------------------------------------
    access
----------------------------------------*----------------------------------------*/

#access .access_ht{ font-size: 2.4rem; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif; text-align: center; font-weight: 800;  }
#access .access_a{ text-align: center; line-height: 1; font-size: 2rem; font-weight: 600; color:#cc0000;}
#access .access_a span{ font-size: 10rem; font-weight: 700; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;}	
#access .card { border: solid 3px #ccc; background-color: #fff;  }

#access .map_photo{ background: url(img/im_mapphoto.jpg) no-repeat 50% 50%; background-size: auto 100%; height: 400px; }


#googlemap {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 45%;
}

#googlemap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 767px) {
	#access.ebox{ padding-top: 20px; margin-bottom: 0; }	
	#access .access_ht{ font-size: 1.8rem;}
	#access .access_a span{ font-size: 4rem; }
  #access .map_photo{ background: url(img/im_mapphoto_sp.jpg) no-repeat 95% 50%; background-size: cover; height: 300px; }
  #access #map{ height: 300px; }
  #access #googlemap{ height: 500px !important; padding-top : 0 !important;}	
	#access .liquid .col{ margin:0; padding: 0; }	
	#access .row{ margin: 0; padding: 0; }
	#access .col{ padding-right: 0; padding-left: 0; }
}

@media print, screen and (min-width: 768px) {
#access.ebox{ padding-top: 0; }	
#access.ebox:last-child { margin-bottom: 0 !important; }	
#access h1.ebox_ht{
background: url(img/ttl-access.png) no-repeat 50% 0;
height: 91px;
margin-bottom: 30px;
}
#access .row.liquid{ margin-left: 0; margin-right: 0;  }	
#access .liquid .col{ padding-right: 0; padding-left: 0; }
#access .map_photo{ height: 400px !important; }	
#access #googlemap{ height: 400px !important; }		
}	




@media all and (max-width: 767px) {
  #googlemap { padding-top: 100%; }
}

@media screen and (min-width: 768px) {
  #googlemap { padding-top: 40%; }
}