@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500&family=Noto+Serif+JP&display=swap');
@font-face {
font-family: "bellmt";
  src: url("./Dup/img/bellmt.ttf") format("ttf"),url("./Dup/img/bellmt.eot") format("eot"),url("./Dup/img/bellmt.woff") format("woff"),url("./Dup/img/bellmt.woff2") format("woff2");
}

body{font-family: 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;font-weight: 300;}
.font_bold{font-weight: 500;}
.font_serif,.overlay .overlay-nav > ul li a,#page_title .en{font-family: 'Noto Serif JP', serif;font-weight: 400;}
.font1{font-family: "bellmt","sans-serif";}

/*--------------------------------
疑似要素にオブジェクト
--------------------------------*/
.line_b-c,#contents .con_box_item{position: relative;}
/*リピートなし*/
#main_img:after,.line_b-c:before,.frame1,.frame2,.frame3,.frame4{
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}

#main_img:after{
background-image: url(./Dup/img/catch.png);
background-size: 100%;
width: 43vw;
height: 22vw;
top: 50%;
left: 5%;
-ms-transform: translate(0,-50%);
-webkit-transform: translate(0,-50%);
transform: translate(0,-50%);
}

.line_b-c:before{
background-color: #78C387;
width: 70px;
height: 3px;
bottom: 0;
left: 50%;
-ms-transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
}

.frame1,.frame2,.frame3,.frame4{
background-image: url(./Dup/img/frame.png);
width: 30px;
height: 30px;
}
.frame1{top: 0;left: 0;}
.frame2{top: 0;right: 0;transform: scale(-1, 1);}
.frame3{bottom: 0;left: 0;transform: scale(1, -1);}
.frame4{bottom: 0;right: 0;transform: scale(-1, -1);}

#contents .box1 .frame2,#contents .box1 .frame4,
#contents .box3 .frame2,#contents .box3 .frame4{right: 10%;}
#contents .box2 .frame1,#contents .box2 .frame3{left: 10%;}
#contents .frame1,#contents .frame2{top: -50px;}
#contents .frame3,#contents .frame4{bottom: -50px;}

/*--------------------------------
全体
--------------------------------*/
header.border_so1-b{border-bottom: none;background-image: url(./Dup/img/head.png);}

#logo img.width_300-max{max-width: 250px;}
#loader_h{
    z-index: 100;
}

#nav_menu span.jp{display: none;}
.menu-trigger{
font-size: 18px;
width: 80px;
height: 50px;
text-align: center;
}
.close-trigger{
right: 30px;
top: 60%;
}

#main_img .scroll{bottom: 0;}

.overlay:before{
background-image: url(./Dup/img/bg.jpg);
background-size: cover;
opacity: 0.3;
}
.overlay div.overlay-nav{padding-top: 50px;}
.more .more_item{background: #000000;border-color: #000000;}
.more .more_item:before{display: none;}
.more .more_item:after{
height: 100%;
left: -5%;
top: 0;
height: 100%;
background: #cccccc;
}
.more .more_item:hover{border-color: #cccccc;}
.more .more_item:hover:after{
left: 0;
width: 100%;
}

.blur{background: rgba(255,255,255,0.85);}


footer #footer_info.bg_color3{background-color: #ededed;}
footer #footer_info .map{display: none;}
#logo2 img.width_200-max{max-width: 150px;}
footer .info_txt{padding-top: 50px;padding-bottom: 50px;}
#footer_nav li a,#footertxt,#h1txt{color: #333;}
#footer_nav li a::after{background: #78C387;}

footer .scr{color: #000000;}
footer .scroll_d > span{background-color: rgba(0,0,0,0.5);}
footer .scroll_d > span::before{background-color: #78C387;}


/* 閉じるボタン付き追従バナー */
.fix_banner{
	max-width: 400px;
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 9;
	transition: 0.5s;
}
.fix_banner .close_bt{
	position: absolute;
	bottom: 113px;
    right: 382px;
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	transition: 0.5s;
	border: solid 2px #78C387;
	z-index: 11;
	cursor: pointer;
}
.fix_banner .close_bt:hover{opacity: 0.7;}
.fix_banner .close_bt span{
	position: relative;
	display: block;
	width: 30px;
	height: 30px;
}
.fix_banner .close_bt span:before,.fix_banner .close_bt span:after{
	content: "";
	display: block;
	background-color: #78C387;
	height: 4px;
	width: 20px;
	position: absolute;
	top:50%;
	left: 50%;
}
.fix_banner .close_bt span:before{
	-ms-transform: translate(-50%,-50%) rotate(-45deg);
	-webkit-transform: translate(-50%,-50%) rotate(-45deg);
	transform: translate(-50%,-50%) rotate(-45deg);
}
.fix_banner .close_bt span:after{
	-ms-transform: translate(-50%,-50%) rotate(45deg);
	-webkit-transform: translate(-50%,-50%) rotate(45deg);
	transform: translate(-50%,-50%) rotate(45deg);
}
.fix_banner.close{right: -450px;}
.fix_banner.close2{right: -450px;}

@media  screen and (max-width: 768px){
.fix_banner{max-width: 300px;}
.fix_banner .close_bt{bottom: 80px;right: 280px;}
}

@media  screen and (max-width: 667px){
.fix_banner{max-width: 250px;bottom: 10px;}
.fix_banner .close_bt{
	width: 25px;
	height: 25px;
	bottom: 40px;
	right: 230px;
}
.fix_banner .close_bt span{
	width: 25px;
	height: 25px;
}
}
/*--------------------------------
TOP
--------------------------------*/
#main_img:before{background-color: transparent;}

.top_title h2{color: #000000;}
.top_title h2 > span:before{
background-color: #78C387;
width: 3px
}

/* VIDEO */
#video{ height: 400px; }
#video video,#video2 video{
	height: auto;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
@media  screen and (max-width: 1600px){
	#video video,#video2 video{
		width: auto!important;
		height: 100%;
	}
}
/*タブレット*/
@media  screen and (max-width: 768px){
	#video,#video2{ height: 300px; }
	#video video,#video2 video{
		width: 100%!important;
		height: auto;
	}
}
/*スマホ*/
@media  screen and (max-width: 768px){
	#video,#video2{ height: 200px; }
}

#intro .intro_img3{margin-left: auto;}

#contents .con_title{font-size: 40px;}
.modal-box .inner{scrollbar-width: none;}

/* loopslider */
.loopSliderWrap{
    top: 0;
    left: 0;
    height: 500px;
}
.loopSlider {
    margin: 0 auto;
    height: 500px;
    text-align: left;
    position: relative;
    overflow: hidden;
}
.loopSlider ul {
    height:500px;
    float: left;
    overflow: hidden;
}
.loopSlider ul li {
    width: 500px;
    height: 500px;
    float: left;
    display: inline;
    overflow: hidden;
	position: relative;
	box-sizing: border-box;
}
.loopSliderWrap:after {
    content: "";
    display: none;
    clear: none;
}
@media screen and (max-width: 768px){
	/* loopslider */
	.loopSliderWrap{height: 300px;}
	.loopSlider{height: 300px;}
	.loopSlider ul{height:300px;}
	.loopSlider ul li {
		width: 300px;
		height: 300px;
	}
}
@media screen and (max-width: 667px){
	/* loopslider */
	.loopSliderWrap,.top_title{height: 200px;}
	.loopSlider{height: 200px;}
	.loopSlider ul{height: 200px;}
	.loopSlider ul li {
		width: 200px;
		height: 200px;
	}
}

/* TOP お知らせ */
.topcms_news_type2 .cate_box {
	width: 46.33333%!important;
	margin-right: 1.5%;
	margin-left: 1.5%;
	cursor: pointer;
	border-bottom: 1px solid #ddd;
	margin-bottom: 30px;
	box-shadow: 0 6px 12px rgb(0 0 0 / 0);
	/* padding: 20px; */
	/* border-radius: 20px; */
	/* background-color: #f5f5f5; */
}
.topcms_news_type2 .cate_box:hover {
	transform: translateY(-5px);
}
.topcms_news_type2 .cate_box .box_item {
	cursor: pointer;
}
.topcms_news_type2 .txt_height {
	height: 5em
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.topcms_news_type2 .cate_box {width: 100%!important;}
.topcms_news_type2 .txt_height {height: 3em}
}

/* TOP コース紹介 */

/*--------------------------------
下層
--------------------------------*/
#page_title{padding-left: 30px;}
#page_title .page_title_box,#page_title .en:before{left: 0;}
#page_title .page_title_box,#page_title .en{display: block;}

#page_title .en{
font-size: 40px;
top: 30px;
left: 30px;
padding-left: 25px;
}
#page_title .en:before{
background-color: #78C387;
width: 3px;
height: 170px;
top: -100px;
}
#page_title .jp{
color: #000000;
top: 90px;
left: -2px;
}
#page_title.txt_white{color: #000000;}

.cate_list li a:before{display: none;}

/*スマホ用（667px以下）*/
@media  screen and (max-width: 667px){

#page_title .en{
font-size: 24px;
top: 10px;
left: 10px;
padding-left: 20px;
}
#page_title .en:before{
height: 100px;
top: -65px;
}
#page_title .jp{top: 55px;left: -10px;}

}

/* ギャラリー */
.g_type1 > div{justify-content: space-around;}
.g_type1 .modal_bt{cursor: pointer}
.g_type1 .modal_bg{top: 0;left: 0;background-color: rgba(0,0,0,0.5);z-index: 9998;}
.g_type1 .modal_box{max-height: 80%;overflow-y: auto;z-index: 9999;}
.g_type1 .close_bt{cursor: pointer}
.g_type1 .cate_box {position: relative;width: 22.99999%!important;margin: 0 1%;margin-bottom: 20px;overflow: hidden; }

@media all and (-ms-high-contrast:none){
.g_type1 .modal_box .box_txt2 a {padding: 8px 10px 2px;}
}

@media screen and (max-width: 768px){
.g_type1 .cate_box {width: 30.99999%!important;}
}
	
@media screen and (max-width: 667px){
.g_type1 .cate_box {width: 100%!important;}
}


/* コース紹介 */
#page5 .banner a,#page11 .banner a{
margin-left: auto;
margin-right: 0;
}

@media  screen and (max-width: 1500px){

#loader_h video{
width: auto!important;
height: 100%;
}

}

@media  screen and (max-width: 1400px){

.top_title h2.right{right: 20px;}
.top_title h2.left{left: 20px;}

}
@media  screen and (max-width: 1280px){

.pd_l-r10per {padding-left: 5%;padding-right: 5%;}
.top_title h2{font-size: 70px;top: 80px;}
.top_title .right > span:before{right: 25px;}
.top_title .left > span:before{left: 30px;}

}

/*タブレット用（768px以下）*/
@media  screen and (max-width: 768px){

#main_img:after{
width: 60vw;
height: 30vw;
}

.top_title h2{color: #ffffff;font-size: 50px;top: 50%;}

#contents .box1 .frame2,#contents .box1 .frame4,
#contents .box3 .frame2,#contents .box3 .frame4{right: 0;}
#contents .box2 .frame1,#contents .box2 .frame3{left: 0;}
#contents .frame1,#contents .frame2{top: -50px;}
#contents .frame3,#contents .frame4{bottom: -50px;}

#page5 .banner a,#page11 .banner a{
margin-left: auto;
margin-right: auto;
}

}

/*スマホ用（667px以下）*/
@media  screen and (max-width: 667px){

header{background-position: 600px center;}
#logo img.width_300-max{max-width: 170px;}
.menu-trigger{
font-size: 16px;
width: 71px;
height: 46px;
top: 53%;
}
.close-trigger{
right: 10px;
top: 70%;
}
.overlay:before{background-position: center right;}

footer .scroll{top: 0;}

#main_img:after{
width: 80vw;
height: 40vw;
top:50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

.top_title h2{font-size: 30px;}
#contents .con_photo.mg_b-50px_sp{margin-bottom: 70px;}

}

/*IE*/
@media all and (-ms-high-contrast: none) {}




/*--------------------------------
自動リンク
--------------------------------*/
/* color */
.linkStyle{color: #78C387; text-decoration: underline;}
.txt_color_nomal .linkStyle{color: #78C387;}
.txt_white .linkStyle{color: white;}
.txt_red .linkStyle{color: red;}

/*IEのみ*/
@media all and (-ms-high-contrast: none) {
.linkStyle{display: inline-block;}
}

/*--------------------------------
カラー
--------------------------------*/
body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: #333333;}
.txt_black,.hvr_txt_black:hover{color: black;}
.txt_white,.hvr_txt_white:hover{color: white;}
.txt_red,.hvr_txt_red:hover{color: red;}
.txt_color1,.hvr_txt_color1:hover{color: #78C387;} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #f2f5f3;} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #FAAF3C;} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #e3e0cf;} /* アクセントカラー2 */

/* background-color */
.bg_white,.hvr_bg_white:hover{background-color: white;} /* 白背景 */
.bg_black,.hvr_bg_black:hover{background-color: black;} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: #78C387;} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #f2f5f3;} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #FAAF3C;} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #e3e0cf;} /* アクセントカラー2 */
.bg_color_clear,.hvr_bg_color_clear:hover{background-color: transparent!important;}

/* border-color */
.border_white,.hvr_border_white:hover{border-color: white;}
.border_black,.hvr_border_black:hover{border-color: black;}
.border_color1,.hvr_border_color1:hover{border-color: #78C387;}
.border_color2,.hvr_border_color2:hover{border-color: #f2f5f3;}
.border_color3,.hvr_border_color3:hover{border-color: #FAAF3C;}
.border_color4,.hvr_border_color4:hover{border-color: #e3e0cf;}