@charset "utf-8";
/* CSS Document */

/*--------------------------------------------------------------------------------------------------- */
/* 共通----------------- */

.container.course #mainbg{letter-spacing:1px; font-family:'Zen Maru Gothic','游ゴシック','Yu Gothic', serif; color: #333;}

h1,h2,h3,h4{font-weight: bold;}
section{font-weight: bold;}
@media screen and (min-width: 600px){ /*PC*/
    .container.course #mainbg {min-width:960px;}
    .inner{ width: 960px; margin: 0 auto;position: relative; padding: 0;}
}
@media screen and (max-width:599px){ /*SP*/
    .container.course #mainbg{ width:100%;}
	.inner{ width: 94%; margin: 0 3%;}
}
.select_area h4{font-weight: lighter;}
.footer-navi h3 a{font-weight: lighter;}

/*----02卒業生ピックアップ----------------*/

section.voice{position: relative; background:url("../img/bg02.png") repeat top center; background-size: 100%;overflow: hidden;overflow: hidden; }
.voice h2{color:rgba(183,115,126,1.00);text-align:center;}
.voice .vlead{text-align: center; color:#837469; font-weight: bolder;}

.carousel {background-size: auto 100%; width: 100%; overflow: hidden;
	-moz-animation: loop 800s linear infinite; animation: loop 800s linear infinite;}
/*アニメーション*/
@keyframes loop {
	0% {background-position: 0 0; }
	100% {background-position: -13276px 0;}
}
.voice h2 b{display: inline;}
@media screen and (min-width: 600px){ /*PC*/
	.voice h2{font-size: 34px; line-height: 50px; padding: 40px 0 00px; margin: 0 auto;}
	.voice h2 b{font-size: 52px;}
	.voice h2 span{font-size: 12px;color: rgba(0,0,0,0.4); display: block; line-height: 20px;}
	.carousel{background: url(../img/voice02.png) repeat-x 0 0;height: 440px; background-size: auto 440px; z-index: 3;}
	.voice .vlead{padding: 30px 0 50px; font-size: 22px;}
	.voice .img01{opacity: 1; position: absolute; bottom:-30px; right:-00px; width: 150px;}
	.voice .img02{opacity: 1;position: absolute; top:-40px; left:40px; width: 180px;}
}
@media screen and (max-width: 599px){ /*SP*/
	.voice h2{font-size: 23px; line-height:35px; padding:10px 0 5px; margin:10px auto 0 auto;}
	.voice h2 b{font-size:40px;}
	.voice h2 span{font-size: 12px;color: rgba(0,0,0,0.4); display: block; line-height: 20px;}
	.carousel{background: url(../img/voice02.png) repeat-x 0 0;height:300px;background-size: auto 300px;}
	.voice .vlead{padding:5px 0 25px; font-size:16px; line-height: 24px;}
	.voice .img01{opacity: 1; position: absolute; bottom:-20px; right:-20px; width: 80px;}
	.voice .img02{opacity: 1;position: absolute; top:-40px; left:-40px; width: 120px;}
}



/*----03 体験者インデックス----------------*/

.voice_index h4{color:rgba(135,66,78,1.00);text-align: center; font-weight: bolder;}
.voice_index h4 b{color: rgba(135,66,78,0.60);}
.voice_index {overflow: hidden; }
.voice_index .box{ background-color: #eee; display: inline-block;filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.1));}
#slslide03{filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.1));}
.voice_index #slslide03 .text{-ms-writing-mode: tb-rl;writing-mode: vertical-rl; text-align: left;}
.voice_index a {color:#837469; text-decoration: none;position:relative; display: block; text-align:left;}
.voice_index a:hover{opacity: 0.7;}
.voice_index a .icon{position:absolute; background-color:rgba(183,115,126,0.70); color: #fff; font-size: 12px; line-height: 21px; height: 20px; width: 20px; border-radius: 50%; opacity: 0.2;}
@media screen and (min-width: 600px){ /*PC*/
	.voice_index { margin: 0 0 0px 0;}
	.voice_index .inner{ padding:40px 0 40px; overflow: hidden;}
	.voice_index h4{font-size: 18px; line-height:30px; margin: 00px auto 30px; padding:5px 0 10px 0;width: 500px;}
	.voice_index h4 b{font-size: 34px; line-height: 50px; }
	.voice_index .box{ margin:1%; width:22.5%;height: 185px;overflow: hidden;}
	.voice_index .box a{height: 185px; }
	.voice_index .text{position:absolute; top:20px; left:35px; font-size:16px; line-height: 24px; z-index: 1;}
	.voice_index .yearindex .box .text{-ms-writing-mode: tb-rl;writing-mode: vertical-rl; text-align: left;}
	.voice_index img{position:absolute;  top:-5px; right:0;width:90%; vertical-align: bottom;}
	.voice_index .icon{bottom:8px; left:8px;}
	.voice_index .icon span{ margin-left: 7px; margin-top:8px;}
}
@media screen and (max-width: 599px){ /*SP*/
	.voice_index{ margin: 0 0 0px 0;}
	.voice_index .inner{ padding: 20px 0 30px; margin: 0 auto; overflow: hidden;}
	.voice_index h4{width: 280px; font-size:14px; line-height:20px; margin: 00px auto 20px; padding:10px 0 10px 0; background-size:100%;}
	.voice_index h4 b{font-size: 28px; line-height: 34px; }
	.voice_index .yearindex .box{width: 100%; background-color: rgba(248,244,244,1.00);
	margin: 10px 0 0 0;overflow: hidden; height: 120px;}
	.voice_index .yearindex .box a{ height: 120px;}
	.voice_index .yearindex .box .text{position: absolute; left:135px; top:15px; font-size: 16px; line-height: 24px; z-index: 1;text-align: left;}
	.voice_index .yearindex img{width:120px; float: left;}
	.voice_index .yearindex .icon{bottom:8px; right:8px;  }
	.voice_index .yearindex .icon span{ margin-left: 7px; margin-top:8px;}
	
	#slslide03{width: 260px; margin: 0 auto;}
	.voice_index #slslide03 .box a{height: 200px}
	.voice_index #slslide03 .text{position:absolute; top:15px; left:45px; font-size: 16px; line-height: 24px; z-index: 1;}
	.voice_index #slslide03 img{position:absolute;  top:-5px; right:0;width:100%;}
	.voice_index #slslide03 .icon{bottom:8px; left:8px;  }
	.voice_index #slslide03 .icon span{ margin-left: 7px; margin-top:8px;}
	.voice_index .slick-prev, .voice_index .slick-next{ width: 6vmin; height: 6vmin;}
	.voice_index .slick-prev{ right: calc(100% - 2vmin);}
	.voice_index .slick-next{ left: calc(100% - 2vmin);}
	.voice_index .slick-dots { top: calc(100% + 4vmin);}
}

/*----年代選択----------------*/
.voice_select .inner{background-color: rgba(236,236,236,0.9); text-align:center;}
.voice_select select{font-weight: lighter;}
@media screen and (min-width: 600px){ /*PC*/
	.voice_select .inner{width:50%; padding:30px 0;overflow: hidden;}
	.voice_select select {font-size:18px; line-height: 26px; padding:6px 10px; margin: 5px;}
}
@media screen and (max-width: 599px){ /*SP*/
	.voice_select .inner{padding:20px; margin: 15px auto;}
	.voice_select select {font-size: 16px; line-height: 22px; padding:3px 5px; margin-top:10px;}
}


/*-----------------------------------------------*/
/*-----------------------------------------------*/
/*-----------------------------------------------*/

/*-------卒業生戻る----------------------------------------*/

a.back{position:fixed; left: 0;  text-decoration: none; color: #fff; background-color:#685141;display: block; z-index: 1000; }

@media screen and (min-width: 600px){ /*PC*/
	a.back{top:160px; padding:15px 5px; font-size: 14px; line-height: 20px;}
	a.back span{ margin-left: 4px;}	
}
@media screen and (max-width: 599px){ /*SP*/
	a.back{top:110px; padding:10px 5px; font-size: 10px; line-height: 14px;}
a.back span{ margin-left: 2px;}
}


/*----卒業生ヘッダー-------------------------------*/

.alumni .mainimg {background: #eee; overflow: hidden;}
.alumni .mainimg .a_main{ background-position: center top; background-repeat:  no-repeat;}
.alumni .mainimg .a_main .text{ position: relative;}
.alumni .mainimg .a_main h2{ color:rgba(183,115,126,1.00);text-align: left;text-shadow: 2px 2px 3px rgba(255,255,255,0.8);}
.alumni .mainimg .a_main .text01{text-align: left;color:rgba(0,0,0,0.20);}
.alumni .mainimg .a_main .name{text-align: left; color: rgba(0,0,0,0.50);}
@media screen and (min-width: 600px){ /*PC*/
    .alumni .mainimg .a_main{margin-top:0px; background-size: 1100px;}
	.alumni .mainimg .a_a_main .inner{margin-top: 20px; }
    .alumni .mainimg .a_main h2{padding: 0px 0; font-size:46px; line-height:70px;
		/* 縦書き
 		 -webkit-writing-mode: vertical-rl;
     	 -ms-writing-mode: tb-rl;
         writing-mode: vertical-rl; */ }
	.alumni .mainimg .a_main .text01{ font-size:18px; line-height:20px; margin-bottom: 20px;}
	.alumni .mainimg .a_main .text{padding:100px 0 120px 130px;}
	.alumni .mainimg .a_main .name{ padding-top: 30px; line-height: 40px; font-size:16px;}
	
	.a_main .img01{opacity: 0.9; position: absolute; bottom:-30px; right:-150px; width: 150px;}
	.a_main .img02{opacity: 0.8;position: absolute; top:-20px; left:00px; width: 200px;}
	.a_main .img03{opacity: 0.9;position: absolute; bottom:220px; left:-200px; width: 120px;}
	
}
@media screen and (max-width: 599px){ /*SP*/
	.alumni .mainimg .a_main{background-size: 152%;position: relative;}
	.alumni .mainimg .a_main .inner{overflow: hidden;}
	.alumni .mainimg .a_main h2{padding: 0px 0; font-size:21px; line-height:28px;}
	.alumni .mainimg .a_main .text{padding:36px 0 30px 20px;}
	.alumni .mainimg .a_main .name{font-size: 10px; line-height:16px; padding-top: 10px;}
	
	.a_main .img01{opacity: 1; position: absolute; bottom:10px; left:-30px; width: 60px;}
	.a_main .img02{opacity: 1;position: absolute; top:-40px; left:-20px; width: 120px;}
	.a_main .img03{display: none}
	
}


/*---卒業生動画----------------*/
.a_movie{;background:rgba(181,59,44,1.00)
/*linear-gradient(to bottom,#3c221b 0%,#623928 100%)
	linear-gradient(to bottom,rgba(202,175,140,0.5) 0%,rgba(252,242,235,0.5) 100%) 
	rgba(95,41,0,0.20) rgba(195,58,20,0.70) ,url("../img/bg02.png")*/;background:linear-gradient(to bottom,rgba(180,78,84,0.4) 0%,rgba(181,59,50,0.15) 100%),url("../img/bg02.png");
	background-size: cover;}

.a_movie .video {position: relative; height: 0; padding: 30px 0 56.25%; overflow: hidden;border: 12px solid rgba(255,255,255,0.45);}
.a_movie .video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

@media screen and (min-width: 600px){ /*PC*/
	.a_movie .inner {padding:40px 90px; overflow: hidden;}
	.a_movie .img01{opacity: 0.4; position: absolute; top:-50px; right:-30px; width: 150px;}
	.a_movie .img02{opacity: 0.6;position: absolute; bottom:-20px; left:-80px; width: 220px;}
}
@media screen and (max-width: 599px){ /*SP*/
	.a_movie{overflow: hidden;background-size:9%;position: relative;}
	.a_movie .inner{padding: 20px 0;}
	.a_movie .video {padding: 30px 0 45%;}
	.a_movie .img01{opacity: 0.8;position: absolute; top:-10px; right:-00px; width: 80px;}
	.a_movie .img02{opacity: 1;position: absolute; bottom:-20px; left:-20px; width: 120px;}
}

/*----卒業生コメント----------------*/

.a_comment .inner{overflow: hidden;text-align: left;}
.a_comment h3{color:#837469;}
.a_comment p{ font-weight: bold;}
#maincontents .inner .attention{padding-left: 15px; font-weight: normal; font-size:75%;}
@media screen and (min-width: 600px){ /*PC*/
	.a_comment .inner{ overflow: hidden; padding:70px 0 10px;}
	.a_comment img.spimg{display: none;}
	.a_comment img.pcimg{float: left; width: 39%; margin:0 30px 30px;}

	.a_comment h3{font-size:24px; line-height: 38px; margin:0px 0 20px 0;}
	.a_comment p{ display: block; font-size: 15px; line-height: 26px; padding-bottom: 55px;}
}
@media screen and (max-width: 599px){ /*SP*/
	.a_comment .inner{ padding: 0 8% 30px 8%; }
	.a_comment img.spimg{width:100%; margin: 15px auto;}
	.a_comment img.pcimg{display: none;}
	.a_comment h3{ font-size:17px; margin:25px 0 15px; line-height: 26px;}
	.a_comment p{}
}

/*----卒業生ランダムリスト----------------*/
section.list {background:url("../img/bg.png"); }
section.list .inner{ text-align: center;}
section.list .inner img{ vertical-align: top;}
section.list h3 b{color: rgba(255,255,255,0.4)}
section.list h3{color:#ffffff; background-color:rgba(183,115,126,1.00);display:inline-block;text-align: center; }
@media screen and (min-width: 600px){ /*PC*/
	
	section.list .inner{padding:30px 0 60px;}
	section.list h3{ margin:-50px auto 15px; font-size:14px; padding:28px 35px; line-height: 20px; }
	section.list h3 b{ font-size:34px; }
	#slslide_a{ padding:0 30px;}
	section.list .box{padding: 5px;}
	section.list .slick-prev, .list .slick-next{ width: 3vmin; height: 3vmin;top: calc(50% - 2vmin);}
	section.list .slick-prev{ right: calc(100% - 3vmin);}
	section.list .slick-next{ left: calc(100% - 3vmin);}
	section.list .slick-dots { top: calc(100% + 2vmin);}
}
@media screen and (max-width: 599px){ /*SP*/
	section.list h3{ margin: -30px auto 15px; font-size: 10px;padding: 18px 15px;line-height: 12px;}
	section.list h3 b{ font-size:24px; }
	section.list .inner{ margin: 0 auto; padding:15px 5% 40px; }
	section.list .slick-prev, .list .slick-next{ width: 6vmin; height: 6vmin;}
	section.list .slick-prev{ right: calc(100% - 3vmin);}
	section.list .slick-next{ left: calc(100% - 3vmin);}
	section.list  .slick-dots { top: calc(100% + 2vmin);}
}