@charset "UTF-8";

html, body{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
a{
	color: #000;
	font-weight: bold;
}
a:hover{
	color: #000;
	opacity: 0.7;
}
ul li{
	display: inline-block;
}
.wrap{
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
.contents{
	width: 100%;
	max-width: 896px;
	margin: 0 auto;
	position: relative;
}
.main_ttl{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	position: relative;	
}

.head{
	background-color: #e60012;
	text-align: right;
}




/* キャンペーン */

.cam_space{
	position: relative;
	width: 94%;
	margin: 0 auto;
}

.cam_space img{
	width: 100%;
}

.cam_btn_01{
	position: absolute;
	width: 35%;
	top: 47%;
    right: 9%;
}

.cam_btn_02{
	position: absolute;
    width: 45%;
	top: 55.5%;
    left: 5.4%;
}

.cam_btn_03{
	position: absolute;
    width: 45%;
	top: 55.5%;
   right: 5.4%;
}

.cam_btn_04{
	position: absolute;
    width: 45%;
	top: 58.9%;
    left: 5.4%;
}

.cam_btn_05{
	position: absolute;
    width: 45%;
	top: 58.9%;
	right: 5.4%;
}

.cam_btn_06{
	position: absolute;
    width: 45%;
	top: 62.3%;
    left: 5.4%;
}

.cam_btn_07{
	position: absolute;
    width: 45%;
	top: 62.3%;
	right: 5.4%;
}

.cam_btn_08{
	position: absolute;
    width: 45%;
	top: 65.7%;
    left: 5.4%;
}
.cam_btn_09{
	position: absolute;
    width: 45%;
	top: 65.7%;
	right: 5.4%;
}

.cam_btn_10{
	position: absolute;
    width: 45%;
	top: 69.1%;
    left: 5.4%;
}
.cam_btn_11{
	position: absolute;
    width: 45%;
	top: 69.1%;
	right: 5.4%;
}

.cam_btn_12{
	position: absolute;
    width: 45%;
	top: 72.5%;
    left: 5.4%;
}
.cam_btn_13{
	position: absolute;
    width: 45%;
	top: 72.5%;
	right: 5.4%;
}

.cam_btn_14{
	position: absolute;
    width: 45%;
	top: 75.9%;
    left: 5.4%;
}
.cam_btn_15{
	position: absolute;
    width: 45%;
	top: 75.9%;
	right: 5.4%;
}

.cam_btn_16{
	position: absolute;
	width: 35%;
	bottom: 3.2%;
    right: 9%;
}


.cam_btn_17{
	position: absolute;
    width: 45%;
	top: 44.5%;
    left: 5.4%;
}

.cam_btn_18{
	position: absolute;
    width: 45%;
	top: 44.5%;
	right: 5.4%;
}

.cam_btn_19{
	position: absolute;
    width: 45%;
	top: 51.5%;
    left: 5.4%;
}

.cam_btn_20{
	position: absolute;
    width: 45%;
	top: 51.5%;
	right: 5.4%;
}

.cam_btn_21{
	position: absolute;
    width: 45%;
	top: 58.5%;
    left: 5.4%;
}

.cam_btn_22{
	position: absolute;
    width: 45%;
	top: 58.5%;
	right: 5.4%;
}

.cam_btn_23{
	position: absolute;
    width: 45%;
	top: 73.5%;
	left: 5.4%;
}

.cam_btn_24{
	position: absolute;
    width: 45%;
	top: 73.5%;
	right: 5.4%;
}

.cam_btn_25{
	position: absolute;
    width: 45%;
	top: 80.5%;
    left: 5.4%;
}

.cam_btn_26{
	position: absolute;
    width: 45%;
	top: 80.5%;
	right: 5.4%;
}

.cam_btn_27{
	position: absolute;
    width: 45%;
	top: 87.5%;
    left: 5.4%;
}

.cam_btn_28{
	position: absolute;
    width: 45%;
	top: 87.5%;
   right: 5.4%;
}














@media (max-width: 650px){
	/* キャンペーン */
	.cam_space{
		width: 100%;
	}

	}


/* キャンペーン */





.mat5{
	margin-top: 5%;
}



.pab180{
	padding-bottom: 180px;
}

.pab_8{
	padding-bottom: 20%;
}

.pab12{
	padding-bottom:12%;
}

.pat10{
	padding-top: 10px;
}

.pat20{
	padding-top: 20px;
}

.mab15{
	margin-bottom: 15px;
}

.mab36{
	margin-bottom: 36px;
}
.mab20{
	margin-bottom: 20px;
}

.mab180{
	margin-bottom: 180px;
}

.mab_8{
	margin-bottom: 8%;
}

.mab10{
	margin-bottom: 10px;
}
.mat20{
	margin-top: 20px;
}

.mat56{
	margin-top: 56px;
}

.mat66{
	margin-top: 66px;
}

.mat_2{
	margin-top: 2%;
}

.mab_5{
	margin-bottom: 5%;
}
.box{
	text-align: right;
	position: absolute;
	bottom: 15px;
	right: 15px;
	vertical-align: bottom;
	width: 100%;
}
.box2{
	text-align: right;
	position: absolute;
	bottom: 15px;
	right: 20%;
	vertical-align: bottom;
	width: 100%;
}
.box3{
	text-align: left;
	position: absolute;
	bottom: 10px;
	left: 0;
	vertical-align: bottom;
	width: 100%;
}
.video_image{
	vertical-align:bottom;
}
.box .video_image{
	position: relative;
	width:310px;
	height:170px;
	margin: 0;
	padding: 0;
	margin-right: 15px;
}
.mobile-youtube{
	display: none;
}

.video_image{
  display: inline-block;
}
.video_image a:after {
    content: url(../images/youtube_social_icon_red.png);
    position: absolute;
    top: 50%;
    left: 42%;
  cursor: pointer;
}

.main__yellow{
	background-color: #FFF100;
}

.contents__logo{
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
	
/* トップ */
.main_2409{
	position: relative;
}

.main_2409__de{
	position: absolute;
	bottom: 2%;
	right: 0%;
}

.main_2409__de img {
	width: 100%;
	float: right;
}


.course_po{
	position: relative;
}

.course_a,.course_b,.course_you,.course_c,.course_d{
	position: absolute;	
}

.course_a{
	bottom: 5%;
	width: 50%;
	right: 5%
}

.course_b{
	bottom: 6%;
	width: 50%;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.course_c{
	bottom: 39%;
	left: 3%
}

.course_d{
	bottom: 3%;	
	left: 3%;
}

.course_you{
	bottom: 20%;
	width: 45%;
	
}

.sma a{
	font-size: 17px;
}

.sma_02 a{
	font-size: 16px;
}



@media (max-width: 896px) {
    img {
        width: 100%;
    }
    .wrap:not(.main){
    	padding: 0 10px; 
    }
    .here{
    	max-width: 136px;
    	width: 17%;
	}
	ul li{
		width: 46%;
		margin-right: 0.5%;
	}
	ul li:last-child{
		margin-right: 0;
	}
	
	.contents__logo{
		justify-content: center;
	}

	.main_banner img{
	width: 50%;
	margin: 0 auto;
}

.head_con{
	width: 70%;
}

.head_con{
	width: 100%;
	padding: 1% 0;
}

.sma a{
	font-size: 15px;
}

.sma_02 a{
	font-size: 14px;
}

	
}/* @media閉じタグ */




@media (max-width: 650px) {
	.main_banner img{
		width: 70%;
	}




	
}/* @media閉じタグ */

@media (max-width: 999px) {
    .main_ttl img {
        width: 100%;
    }

	.main_2409__de img {
		width: 45vw;
		float: right;
	}

	/* 変更部分追加いたしました。 */
	.main__yellow img{
		width: 48%;
	}
	
	
	.course_a{
		width: 30%;
		right: 16%;
		bottom: 6%;
	}
	
	.course_b{
		width: 40%;
	}
	
	.course_c{
		width: 60%;
        left: 3%;
        bottom: 39%;
	}

	.course_d{
		width: 61%;
        left: 3%;
        bottom: 3%;
	}
	
	.course_you{
		width: 40%;
		left: 2%;
	}

}/* @media閉じタグ */

@media (max-width: 768px) {
	.box,
	.box2{
		position: absolute;
		bottom: 10px;
		right: 20%;
	}
    .box .video_image{
    	display: none;
	}
	.mobile-youtube{
		display: block;
	}
	.mab36{
		margin-bottom: 26px;
	}

	.contents__logo{
		justify-content: center;
	}

}/* @media閉じタグ */



.col2 li{
	width: 49%;
	margin-right: 0.5%;
}
.col2 li:last-child{
	margin-right: 0;
}
@media (max-width: 768px) {
	.col3 li{
		width: 32%;
		margin-right: 0.5%;
		text-align: left;
	}
	.col3 li:last-child{
		margin-right: 0;
	}
}/* @media閉じタグ */

.office {
	text-align: left;
/*	font-size: 20px;*/
/* 
	font-size: 19px; */
}
.office li {
	width: 32%;
	margin-right: 0.5%;
	text-align: left;
	font-size: 18px;
    /* line-height: 2; */
	padding-left: 2%;
	line-height: 1.5;
	white-space:nowrap;
}
.office li:nth-child(3n) {
	margin-right: 0;
}
.office li a:before{
  content: '\0266a';
  padding-right: 7px;

}

.office__sub{
	font-size: 15px;
	line-height: 1;
	vertical-align: top;
	padding-left: 27px;
}

.contents__blue{
	color: #1CA1E0;
}

.contents__green{
	color: #80B90F;
}


.contents__red{
	color: #D43934;
}

.contents__pink{
	color: #F26191;
}

.contents__yellow{
	color: #F7AC10;
}


@media (max-width: 768px) {
	
	.office li {
		width: 49%;
		margin-right: 0;
		padding-left: 7%;
	}

	.office li:nth-child(2n){
		padding-left: 4%;
	}

	.sma a{
		font-size: 17px;
	}

	.sma_02 a{
		font-size: 15px;
	}
	

}/* @media閉じタグ */

@media (max-width: 650px){

	
	
	.office li {
		padding-left: 5%;
		font-size: 12px;
	}

	.sma a{
		font-size: 10px;
	}

	.sma_02 a{
		font-size: 8.5px;
	}
	

	.office li:nth-child(2n){
		padding-left: 2%;
	}

	.office__sub{
		font-size: 8px;
		padding-left: 20px;
	}

	.mat56{
		margin-top: 22px;
	}

	.mat66{
		margin-top: 30px;
	}

	.pat10{
		padding-top: 3px;
	}
	
	
	
}

.tuji{
	vertical-align: middle;
	padding-bottom: 0.2em;
	width: 17px;
}

@media (max-width: 896px) {
	.tuji{
		width: 8%;
	}
}/* @media閉じタグ */
@media (max-width: 768px) {
	.tuji{
		width: 16px;
	}
}/* @media閉じタグ */


@media (max-width: 650px) {
	.tuji{
		width: 10px;
	}
}/* @media閉じタグ */



.red a{
	color: #ff0000;
}



#pageTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
}
#pageTop a {
  display: block;
  z-index: 999;
  padding: 10px 0 0 1px;
  border-radius: 40px;
  width: 45px;
  height: 45px;
  background-color: #8fc31f;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  line-height: 0.9em;
  text-align: center;
}
@media (max-width: 768px) {
	#pageTop {
	  position: fixed;
	  bottom: 15px;
	  right: 15px;
	}
}/* @media閉じタグ */