/*

TemplateMo 548 Training Studio

https://templatemo.com/tm-548-training-studio

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. program
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");

@import url('https://fonts.googleapis.com/css2?family=Ibarra+Real+Nova:ital,wght@1,700&family=RocknRoll+One&display=swap');/*fglogo用*/
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/

@media screen and (min-width: 929px) {
	html {
		font-size: 75%;
	}
}
@media screen and (max-width: 928px) {
	html {
		font-size: 62.5%;
		background-size: contain;
		background-repeat: no-repeat;
		box-sizing: border-box;/* 画面揺れ対策 */

	}/*iphone対策*/
	img {
		max-width: 100%;
		height: auto;
	}/*iphone対策*/


}




html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

html {
	scroll-behavior: smooth;
	-webkit-appearance: none;/*iphone対策*/

	scroll-padding-top: 85px;/*スクロール位置調整*/
}


.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

html[xmlns] .clearfix {
	display: block;
}

* html .clearfix {
	height: 1%;
}

ul, li {
	padding: 0;
	margin: 0;
	list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
	display: block;

}

* {
	box-sizing: border-box;
}

html, body {
 /*  font-family: 'Ibarra Real Nova', serif;
	font-weight: 400;
	background-color: #fff;*/
	-ms-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	text-decoration: none !important;

}

@media screen and (max-width: 480px) {
	a{
		transition: transform .2s;
		&:active{
			transform: scale(.95);
		}
	}
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 0px;
	margin-bottom: 0px;
}

ul {
	margin-bottom: 0px;
}

p {
	font-size: 14px;
	line-height: 25px;
	color: #3d3d3d;
}




.font_fg{
	font-family: 'Ibarra Real Nova', serif;
}/*ジムロゴ用*/




/*
---------------------------------------------
global styles
---------------------------------------------
*/

html,
body {
/*background: #fff;*/
font-family: 'Poppins', sans-serif;

}

::selection {
	background: #2780ff;
	color: #fff;
}

::-moz-selection {
	background: #2780ff;
	color: #fff;
}

.section{
	background: #fff;
	margin:0;
	padding:40px 0;

}



@media screen and (max-width: 991px) {
	html, body {
		overflow-x: hidden;
	}
	.mobile-top-fix {
		margin-top: 30px;
		margin-bottom: 0px;
	}
	.mobile-bottom-fix {
		margin-bottom: 30px;
	}
	.mobile-bottom-fix-big {
		margin-bottom: 60px;
	}
}




.section-heading {
	text-align: center;
	margin:40px auto;
}

.section-heading h2 {
	font-size: 28px;
	font-weight: 800;
	color: #232d39;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 0px;
	margin-bottom: 0px;
}

.section-heading h2 em {
	font-style: normal;
	color: #2780ff;
}

.section-heading h3 {
	font-size: 1.8rem;
	font-weight: 800;
	color: #232d39;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 0px;
	margin-bottom: 10px;
}

.section-heading h3.bgdark {
	font-size: 1.8rem;
	font-weight: 800;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 0px;
	margin-bottom: 10px;
}

.section-heading img {
	margin: 20px auto;
}


.dark-bg h2 {
	color: #fff;
}

.dark-bg p {
	color: #fff;
}

.main-button a {
	display: inline-block;
	font-size: 15px;
	padding: 12px 20px;
	background-color: #2780ff;
	color: #fff;
	text-align: center;
	font-weight: 400;
	text-transform: uppercase;
	transition: all .3s;
}

.main-button a:hover {
	background-color: #000000;
}

/* btnデザイン　基本*/

/*まずはお決まりのボックスサイズ算出をborer-boxに */
*,
*:before,
*:after {
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
}

html {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;

}

.btn,
a.btn,
button.btn {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.5;
	position: relative;
	display: inline-block;
	padding: 1rem 4rem;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	letter-spacing: 0.1em;
	color: #212529;
	border-radius: 0.5rem;

}
/*
---------------------------------------------
header
---------------------------------------------
*/



.background-header {
	background: rgba(250,250,250,0.7) !important;
	height: 80px!important;
	position: fixed!important;
	top: 0px;
	left: 0px;
	right: 0px;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}/*スクロール後メニュー白背景*/

.background-header .logo,
.background-header .logo_fg,
.background-header .main-nav .nav li a {
	color: #232d39!important;
}

.background-header .main-nav .nav li:last-child a {
	color: #fff !important;
}

.background-header .main-nav .nav li:last-child a:hover {
	color: #fff!important;
}

.background-header .main-nav .nav li:hover a {
	color: #2780ff!important;
}

.background-header .nav li a.active {
	color: #2780ff!important;
}

.header-area {
	position: absolute;
	top: 0;
	left: 0;
	right:0;
	z-index: 100;
	width: 100%;
	height: 80px;
	background: rgba(255,255,255,0.6);
	-webkit-transition: all .5s ease 0s;
	-moz-transition: all .5s ease 0s;
	-o-transition: all .5s ease 0s;
	transition: all .5s ease 0s;
	margin: 0 auto:

}

.header-area .main-nav {
	display:flex;
	width: 100%;
	min-height: 80px;
	background: transparent;
	margin: 0 auto;
	line-height: 1.5;

}

.header-area .main-nav .logo {
	line-height: 80px;
	color: #fff;
	font-size: 32px;
	font-weight: 800;
	text-transform: uppercase;
	float: left;
	-webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
}

.header-area .main-nav .logo em {
	font-style: normal;
	color: #2780ff;
	font-weight: 900;
}

.header-area .main-nav .logo_fg {
display:flex;

/*	font-family: 'Ibarra Real Nova', serif;*/
/*	color: #0e0e0e;*/
/*	font-size: 3.5rem;*/
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
padding: 0;
}

.header-area .main-nav .tel {
	display: none;
}

/*.header-area .main-nav .logo_fg::before {
	content: "";
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	background: url("../../fg_img/fg_mark.png") no-repeat;
	background-size: contain;
	padding-right: 8px;
	transform:translateY(20%);
}*/

/*------------menu2------*/

/* ナビゲーションメニュー */
.nav-menu2 {
	background-color: #333; /* メニューの背景色 */
	color: #fff; /* メニューテキストの色 */
}
.menu-list {
	display: flex;
	justify-content: center; /* メニューアイテムを中央揃えに */
}
.menu-item {
	background-color: #333; /* メニューアイテムの背景色 */
	border-left: 1px solid #fff; /* メニューアイテムの左ボーダー */
	position: relative;
	transition: background-color .3s; /* 背景色の変化をアニメーション化 */
	padding: 0 10px;
}
.menu-item:last-child {
	border-right: 1px solid #fff; /* 最後のメニューアイテムの右ボーダー */
}

/* メニューアイテムのホバースタイル */
.menu-item:hover .drop-menu-list {
	transform: scaleY(1); /* ドロップダウンメニューの表示 */
}
.menu-item:hover {
	background-color: #696969; /* メニューアイテムのホバー時の背景色 */
	transition: background-color .3s; /* 背景色の変化をアニメーション化 */
}
.drop-menu-item:hover {
	opacity: .8; /* ドロップダウンメニューアイテムのホバー時の不透明度 */
	transition: opacity .3s; /* 不透明度の変化をアニメーション化 */
}

.menu-item a {
	align-items: center;
	color: #fff; /* メニューアイテム内のリンクテキストの色 */
	display: flex;
	height: 50px;
	justify-content: center;
	text-decoration: none; /* リンクの下線を非表示 */
	width: 120px;
}


/* ドロップダウンメニュー */
.drop-menu {
	position: relative;
}
.drop-menu-list {
	left: 0;
	position: absolute;
	top: 100%;
	transform: scaleY(0); /* ドロップダウンメニューの非表示 */
	transform-origin: center top; /* 変形を適応する基準を設定 */
	transition: transform .3s; /* 表示の変化をアニメーション化 */
	width: max-content;
	z-index: 1;
}
.drop-menu-item {
	background-color: #696969; /* ドロップダウンメニューの背景色 */
	transition: opacity .3s; /* 不透明度の変化をアニメーション化 */
}

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

/*---------------menu3----*/

#menu3 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: end;
	margint: 0;
	width: calc(( 100% / 2 ) + 40px);

}

#menu3-btn {
	display: none;
}

#menu3-content {
	margin: 0;
	list-style-type: none;
}

#menu3-content > li {
	position: relative;
	float: left;
	-webkit-transition: all 0.2s;
	transition: all 0.2s;


}

#menu3-content > li > a {
	display: block;
	padding: 20px 25px;
	line-height: 40px;
	font-size: 15px;
	text-decoration: none;

	color: #fff; /* メニューテキストの色 */
}

#menu3-content > li > a:hover {
	background-color: rgb(0 0 0 / .6); /* メニューの背景色 */
	color: #00bfff; /* メニューテキストの色 */
}



#menu3-content > li > a > .blogicon-chevron-down {
	margin-right: 5px;
}

#menu3-content > li > ul.second-content {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	padding-left: 0;
	list-style-type: none;
	-webkit-box-shadow: 1px 1px 7px #bbb;
	box-shadow: 1px 1px 7px #bbb;
}

#menu3-content > li:hover > ul.second-content {
	visibility: visible;
	opacity: 1;
	-webkit-transition: opacity 0.2s, visibility 0.2s;
	transition: opacity 0.2s, visibility 0.2s;
}

#menu-content > li > ul.second-content > li {
	text-align: center;
	width: 100%;
}

#menu3-content > li > ul.second-content > li > a {
	display: block;
	line-height: 40px;
	color: #000;
	font-size: 0.8em;
	text-decoration: none;
	padding: 5px 9px;
	background-color: rgb(255 255 255 / .6); /* メニューの背景色 */

}

#menu3-content > li > ul.second-content > li > a:hover {
	background: #eee;
	color: #000;
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
}

@media screen and (max-width: 960px) {
	nav.menu3 {
		position: fixed;
		top: 0;
		left: -300px;
		bottom: 0;
		width: 60%;
		background: #fff;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
		z-index: 3;
		opacity: 0;
	}
	.open nav.menu3 {
		left: 0;
		opacity: 1;
	}
	nav.menu3 .inner {
		padding: 25px;
	}
	nav.menu3 .inner ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	nav.menu3 .inner ul li {
		position: relative;
		margin: 0;
	}
	nav.menu3 .inner ul li a {
		display: block;
		color: #333;
		font-size: 14px;
		text-decoration: none;
		-webkit-transition-duration: 0.2s;
		transition-duration: 0.2s;
	}
	.toggle_btn2 {
		display: block;
		position: fixed;
		top: 30px;
		right: 30px;
		width: 30px;
		height: 30px;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
		cursor: pointer;
		z-index: 3;
	}
	.toggle_btn2 span {
		position: absolute;
		left: 0;
		width: 30px;
		height: 1px;
		background-color: #333;
		border-radius: 4px;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
	}
	.toggle_btn2 span:nth-child(1) {
		top: 4px;
	}
	.toggle_btn2 span:nth-child(2) {
		top: 14px;
	}
	.toggle_btn2 span:nth-child(3) {
		bottom: 4px;
	}
	.open .toggle_btn2 span {
		background-color: #fff;
	}
	.open .toggle_btn2 span:nth-child(1) {
		-webkit-transform: translateY(10px) rotate(-315deg);
		transform: translateY(10px) rotate(-45deg);
	}
	.open .toggle_btn2 span:nth-child(2) {
		opacity: 0;
	}
	.open .toggle_btn2 span:nth-child(3) {
		-webkit-transform: translateY(-10px) rotate(315deg);
		transform: translateY(-10px) rotate(45deg);
	}
	#mask {
		display: none;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
	}
	.open #mask {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0.5;
		z-index: 2;
		cursor: pointer;
	}
	#menu3-content > li {
		width: 100%;
		margin-bottom: 15px;
	}
	#menu3-content > li:hover {
		background: none;
	}
	#menu3-content > li > a {
		height: 100%;
		padding: 0px;
		font-size: 100%;
		border-bottom: 1px solid #000;
	}
	#menu3-content > li > ul.second-content {
		visibility: visible;
		opacity: 1;
		width: 100%;
		position: relative;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	#menu3-content > li > ul.second-content > li {
		width: 100%;
		text-align-last: left;
	}
	#menu3-content > li > ul.second-content > li > a {
		padding-left: 15px;
	}
	#menu3-content > li > ul.second-content > li > a:hover {
		background: none;
	}
}

@media screen and (max-width: 480px) {
	#menu3-content > li > a {
		font-size: 1.5em;
		background-color: rgb(0 0 0 / .6); /* メニューの背景色 */
	}

	#menu3-content > li > ul.second-content > li > a {

		font-size: 12px;

	}


}
/*-----------------*/


/*ヘッダーロゴ↓*/
.header_name{
	display:flex;
	align-items:center;
	gap:10px;
	height: 80px;
	width: 80%;
}


.header_name .header_name_logo a{
/*	display:block;*/
transition:.2s
margin: 0;
padding: 0;
height: 80px;
transform:translateY(25%);

}

@media(min-width: 1400px){
	.header_name{
		height: 80px;
		width: auto;
	}

	.header_name .header_name_logo a{
		transform:translateY(10%);

	}
}


.header_name .header_name_logo a img{
	display:block;
	height:50px
}

@media(hover: hover)and (pointer: fine){
	.header_name .header_name_logo a:hover{
		opacity:.6
	}
}
.header_name .header_name_catchcopy{
	display:none;
}

@media(min-width: 1025px){
	.header_name .header_name_catchcopy{
		display:block;
		font-weight:bold;
		font-size:1rem;
		letter-spacing:0.1em;
		color:#fff;
		mix-blend-mode:difference;
		height: 80px;
		line-height: 1;
		transform:translateY(30%);

	}

}

.header_name_catchcopy_sp{
	display:none;
}

@media(max-width: 1024px){

	.header_name_catchcopy_sp{
		display:block;
		font-weight:bold;
		font-size:30%;
		letter-spacing:0.1em;
		line-height: 1;
		color:#fff;
		padding-top:5px;

	}
}

/*▲ロゴの横にテキスト表示*/




.header-area .main-nav .nav {
	margin-left:20px;
	background-color: transparent;
	-webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	position: relative;
	z-index: 1000;
	transform:translateX(20%);/*メニューが増えたら調整*/
}

.header-area .main-nav .nav li {
	padding-left: 20px;
	padding-right: 20px;
	text-align: center;
}

.header-area .main-nav .nav li a {
	font-weight: 500;
	font-size: 13px;
	color: #fff;
	-webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	height: 80px;
	letter-spacing: 1px;

}

.header-area .main-nav .nav li a span{
	font-size:1.2rem;
	color: #0e0e0e;

}



/*.header-area .main-nav .nav li:last-child a {
	display: inline-block;
	font-size: 13px;
	padding: 11px 17px;
	background-color: #000000;
	color: #fff;
	text-align: center;
	font-weight: 400;
	letter-spacing: 0px;
	text-transform: uppercase;
	transition: all .3s;
	height: auto;
	line-height: 20px;
}

.header-area .main-nav .nav li:last-child a:hover {
	background-color: #000000;
	opacity: 1;
}*/

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
	color: #40e0d0!important;
	opacity: 1;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
	color: #2780ff!important;
	opacity: 1;
}

.header-area .main-nav .menu-trigger {
	cursor: pointer;
	display: block;
	position: absolute;
	top: 23px;
	width: 32px;
	height: 40px;
	text-indent: -9999em;
	z-index: 99;
	right: 40px;
	display: none;
}/*menu-trigger　スマホ用ハンバーグ*/

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
	background-color: #1e1e1e;
	display: block;
	position: absolute;
	width: 30px;
	height: 2px;
	left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
	background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
	background-color: #1e1e1e;
	display: block;
	position: absolute;
	width: 30px;
	height: 2px;
	left: 0;
	width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
	background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
	content: "";
}

.header-area .main-nav .menu-trigger span {
	top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
	-moz-transform-origin: 33% 100%;
	-ms-transform-origin: 33% 100%;
	-webkit-transform-origin: 33% 100%;
	transform-origin: 33% 100%;
	top: -10px;
	z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
	-moz-transform-origin: 33% 0;
	-ms-transform-origin: 33% 0;
	-webkit-transform-origin: 33% 0;
	transform-origin: 33% 0;
	top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
	background-color: transparent;
	width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
	-moz-transform: translateY(6px) translateX(1px) rotate(45deg);
	-ms-transform: translateY(6px) translateX(1px) rotate(45deg);
	-webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
	transform: translateY(6px) translateX(1px) rotate(45deg);
	background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
	background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
	-moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
	-ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
	-webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
	transform: translateY(-6px) translateX(1px) rotate(-45deg);
	background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
	background-color: #1e1e1e;
}

.header-area.header-sticky {
	min-height: 80px;
}

.header-area.header-sticky .nav {
/*  margin-top: 20px !important;*/
align-items:center;
}

.header-area.header-sticky .nav li a.active {
	color: #2780ff;
}

@media screen and (max-width: 1200px) {
	.header-area .main-nav .nav li {
		padding-left: 12px;
		padding-right: 12px;
	}
	.header-area .main-nav:before {
		display: none;
	}


}


@media screen and (max-width: 767px) {
	.header-area .main-nav .logo,
	.header-area .main-nav .logo_fg {
		color: #1e1e1e;
/*		font-size: 200%;*/
}

.header-area .main-nav .tel {
	display: flex;
	align-items:center;
	width: 40%;
}


	/*.header-area .main-nav .logo_fg::before {
		content: "";
		display: inline-block;
		width: 1em;
		height: 1em;
		background: url("../../fg_img/fg_mark.png") no-repeat;
		background-size: contain;
		margin-right: 8px;
		transform:translateY(20%);
	}*/


	.header-area.header-sticky .nav li a:hover,
	.header-area.header-sticky .nav li a.active {
		color: #2780ff!important;
		opacity: 1;
	}
	.header-area {
/*		background-color: #f7f7f7;*/
padding: 0px 15px;
height: 80px;
box-shadow: none;
text-align: center;
}
.header-area .container {
	padding: 0px;
}
.header-area .logo,
.header-area .logo_fg {
	margin-left: 10px;
}
.header-area .menu-trigger {
	display: block !important;
}
.header-area .main-nav {
	overflow: hidden;
}

.header-area .main-nav .nav {
	width: 100%;
	display: none;
	-webkit-transition: all 0s ease 0s;
	-moz-transition: all 0s ease 0s;
	-o-transition: all 0s ease 0s;
	transition: all 0s ease 0s;
	margin-left: 0px;
	transform:translateX(0);
}

/*  .header-area .main-nav .nav li:first-child {
		width: 100%;
		border-top: 1px solid #eee;
	}
	.header-area .main-nav .nav li:last-child {
		background-color: #2780ff;
		color: #fff;
	}
	.header-area .main-nav .nav li:last-child a {
		background-color: #2780ff!important;
	}
	.header-area .main-nav .nav li:last-child a:hover,
	.header-area .main-nav .nav li:last-child:hover a {
		background-color: #2780ff!important;
		color: #fff!important;
	}*/
	.header-area.header-sticky .nav {
		margin-top: 50px !important;
	}
	.header-area .main-nav .nav li {
		width: 100%;
		background: #fff;
		border-bottom: 1px solid #eee;
		padding-left: 0px !important;
		padding-right: 0px !important;
/*		margin-bottom:5px;*/

}
.header-area .main-nav .nav li a {
	height: 50px !important;
	line-height: 50px !important;
	padding: 0.1em 2em !important;
	border: none !important;
	background: #f7f7f7 !important;
	color: #232d39 !important;

	display: block;
}

.header-area .main-nav .nav li a span{
	font-size:1.5rem;
	color: #0e0e0e;
	font-family:’Hiragino Kaku Gothic ProN’, Meiryo, sans-serif;
}


/*  .header-area .main-nav .nav li:last-child a {
		color: #0e0e0e!important;
	}*/
	.header-area .main-nav .nav li a:hover {
		background: #eee !important;
		color: #2780ff!important;

	}



	.header-area .main-nav .nav li.submenu ul {
		position: relative;
		visibility: inherit;
		opacity: 1;
		z-index: 1;
		transform: translateY(0%);
		transition-delay: 0s, 0s, 0.3s;
		top: 0px;
		width: 100%;
		box-shadow: none;
		height: 0px;
	}
	.header-area .main-nav .nav li.submenu ul li a {
		font-size: 1.5rem;
		font-weight: 400;
	}
	.header-area .main-nav .nav li.submenu ul li a:hover:before {
		width: 0px;
	}
	.header-area .main-nav .nav li.submenu ul.active {
		height: auto !important;
	}
	.header-area .main-nav .nav li.submenu:after {
		color: #3B566E;
		right: 25px;
		font-size: 1.5rem;
		top: 15px;
	}
	.header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
		height: 0px;
	}

	.header-area .main-nav {
		display: block;/*flex解除*/
	}
}

/* media screen and (▲max-width: 767px)終わり */



/*==================================================
　5-3-1 中心から外に線が伸びる（下部）
===================================*/

.header-area .main-nav .nav li a{
	/*線の基点とするためrelativeを指定*/
	position: relative;
}


.header-area .main-nav .nav li a::after {
	content: '';
	/*絶対配置で線の位置を決める*/
	position: absolute;
	bottom: -5px;
	left: 10%;
	/*線の形状*/
	width: 100%;
	height: 2px;
	background:#0481A2;
	/*アニメーションの指定*/
	transition: all .3s;
	transform: scale(0, 1);/*X方向0、Y方向1*/
	transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
.header-area .main-nav .nav li.current a::after,
.header-area .main-nav .nav li a:hover::after {
	transform: scale(1.5, 0.8);/*X方向にスケール拡大*/
}



/*
---------------------------------------------
banner
---------------------------------------------
*/

.main-banner {
	position: relative;
	margin: 0 auto 50px auto;
	padding: 0;

}

#bg-video {
	display: block;
	min-width: 100%;
	min-height: 75vh;
	max-width: 100%;
	max-height: 100vh;
	object-fit: cover;
}




#bg-video::-webkit-media-controls {
	display: none !important;
}

.video-overlay {
	position: absolute;
	/*background-color: rgba(0,0,0,0.5);*/
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	margin:0;
}



.main-banner .caption {
	text-align: center;
	position: absolute;
	width: 80%;
	left: 50%;
	top: 45%;
	transform: translate(-50%,-50%);
}



.main-banner .caption h1 {
	font-size: 6vw;
	text-transform: uppercase;
	font-weight: 800;
	color: #f0f0f0;
	text-shadow: 0 0 25px #000;
	letter-spacing: 1px;
	line-height:150%;
}
.main-banner .caption h2 {
	font-size: 4vw;
	text-transform: uppercase;
	font-weight: 800;
	color: #f0f0f0;
	text-shadow: 0 0 25px #000;
	letter-spacing: 1px;
	line-height:150%;
}

.main-banner .caption h1 em {
	font-style: normal;
	color: #2780ff;
	font-weight: 900;
}


.main-banner .caption h1.campaign_bnr img {

	width:280px;
	max-width: 100%;
	height: auto;
	margin:-10% auto 0;
	padding:0;

}



.main-banner .caption h6 {
	margin: 0px;
	font-size: 2rem;
	/*text-transform: uppercase;*/
	font-weight: 500;
	color: #fff;
	letter-spacing: 0.5px;
}

.main-banner .bottom-center {
	position: absolute;
	width: 100%;
	margin: 0;
	padding: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);

	text-align: center;
	font-weight: 800;
	color: #fff100;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 80%;
	z-index:10;
}

.main-banner .bottom-center .open {
	font-size: 10rem;/* font-size: 100px と同等 */
	margin-top: 35px;
}



.main-banner .ol_dot{
	position: fixed;
	top:0;
	left:0;
	bottom: 0;
	width:100%;
	height:100%;
	background:url("../../fg_img/dot.png");
	background-size:auto;
}

@media screen and (max-width: 928px) {
	.main-banner {
/*	 margin: 80px auto 0 auto;*/
padding:0;
/*	 height:700px;*/
}
.main-banner .bottom-center
.open {
	font-size:20rem
	margin-top: 0;
}
}/* ▲media screen and (max-width: 928px)終わり */

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

	.main-banner {
		position: relative;
		margin: 0;
		padding: 0;
	}

	.main-banner .caption {
		text-align: center;
		position: absolute;
		width: 80%;
		height:300px;
		left: 50%;
		top: 60%;
		transform: translate(-50%,-50%);
	}

	.main-banner .caption h1.campaign_bnr img {
		margin:0 auto;
		padding:0;

	}

	.main-banner .bottom-center {
		margin: 0;
		padding: 0;
		top: 350px;
		left: 50%;
		transform: translateX(-50%);
	}

}/* ▲media screen and (max-width: 798px)終わり */

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


	.main-banner {
		position: relative;
		margin: 0 auto -100px auto;
		padding: 0;

	}

	#bg-video {
		display: block;
		min-width: 100%;
		min-height: 60vh;
		max-width: 100%;
		max-height: 100vh;
		object-fit: cover;
	}

	.main-banner .caption h1.campaign_bnr img {
		margin:-50% auto;
		padding:0;


	}

	.main-banner .bottom-center {
		width: 100%;
		margin: 0 auto;
		padding: 0 5px;
		top:550px;
		left: 50%;
	}

	.main-banner .bottom-center .open {
		font-size:5rem;
		margin-top: 0;

	}


}/* media screen and (max-width: 480px)終わり */




/* 吹き出し */

/*h2.bal {
		position: relative;
		padding: 0 0.7rem;
		box-shadow: 5px 5px #fff100;
		border: 2px solid #fff100;
		color: #fff100;
		font-weight: bold;
		font-size: 10rem;
		text-align: center;
		width: 80%;
		margin: 0 auto;
		transform:translateY(-50%);
}

	h2.bal:before {
		position: absolute;
		top: 100%;
left : calc(50% – 25px) ;
left : -webkit-calc(50% – 25px) ;
		transform: skew(-25deg);
		height: 18px;
		width: 50px;
		border-right: 10px solid #fff100;
	 content: "";
}
*/




/*
---------------------------------------------
program
---------------------------------------------
*/

#program {
	padding-bottom: 80px;

}

.program-item {
	display: inline-block;
	margin-bottom: 60px;
}

.program-item .left-icon img {
	float: left;
	margin-right: 30px;
}

.program-item .right-content {
	display: inline;
}

.program-item .right-content h4 {
	margin-top: 0px;
	margin-bottom:  7px;
	letter-spacing: 0.25px;
	color: #232d39;
	/*font-size: 19px;*/
	font-weight: 600;
	text-transform: capitalize;
}

.program-item .right-content a.text-button {
	margin-top: 7px;
	display: inline-block;
	font-size: 13px;
	text-transform: uppercase;
	color: #2780ff;
	font-weight: 500;
}

/*
---------------------------------------------
subscribe
---------------------------------------------
*/

#call-to-action {
	padding: 120px 0px;

	background: #360033;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #0b8793, #360033);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #0b8793, #360033); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

	text-align: center;
}

.cta-content h2 {
	font-size: 1.6rem;
	text-transform: uppercase;
	font-weight: 800;
	color: #fff;
	letter-spacing: 1px;
}

.cta-content h2 em {
	font-style: normal;
	color: #2780ff;
}

.cta-content h3 {
	font-size: 1.5rem;
	font-weight: 800;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 0px;
	margin-bottom: 10px;
	line-height: 180%;
}

.cta-content p {
	font-size: 16px;
	color: #fff;
	margin: 15px 0px 25px 0px;
	line-height: 180%;
}



/*
--------------------------------------------
Our Classes
--------------------------------------------
*/

#our-classes {
	margin-bottom: 140px;
}

#tabs ul {
	margin: 0;
	padding: 0;
}
#tabs ul li {
	margin-bottom: 30px;
	display: inline-block;
	width: 100%;
}
#tabs ul li:last-child {
	margin-bottom: 0px;
}
#tabs ul li a {
	text-transform: capitalize;
	width: 100%;
	padding: 30px 30px;
	display: inline-block;
	background-color: #fff;
	box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
	border-radius: 5px;
	font-size: 19px;
	color: #232d39;
	letter-spacing: 0.5px;
	font-weight: 600;
	transition: all 0.3s;
}
#tabs .main-rounded-button a {
	text-align: center;
	padding: 20px 30px;
	width: 100%;
	border-radius: 5px;
	display: inline-block;
	box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
	color: #fff;
	font-size: 19px;
	letter-spacing: 0.5px;
	font-weight: 600;
	background-color: #2780ff;
}
#tabs .main-rounded-button a:hover {
	background-color: #000000;
}
#tabs ul li a img {
	max-width: 100%;
	margin-right: 20px;
}
#tabs ul .ui-tabs-active span {
	background: #faf5b2;
	border: #faf5b2;
	line-height: 90px;
	border-bottom: none;
}
#tabs ul .ui-tabs-active a {
	color: #2780ff;
}
#tabs ul .ui-tabs-active span {
	color: #1e1e1e;
}
.tabs-content {
	margin-left: 30px;
	text-align: left;
	display: inline-block;
	transition: all 0.3s;
}
.tabs-content img {
	max-width: 100%;
	overflow: hidden;
	border-radius: 5px;
}
.tabs-content h4 {
	font-size: 23px;
	font-weight: 700;
	color: #232d39;
	letter-spacing: 0.5px;
	margin-bottom: 20px;
	margin-top: 30px;
}
.tabs-content p {
	font-size: 14px;
	color: #7a7a7a;
	margin-bottom: 28px;
}


/*
---------------------------------------------
schedule
---------------------------------------------
*/

#schedule_org {
	padding: 0px 0px 140px 0px;
	/*background-image: url("../images/schedule-bg.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;*/
	background: #314755; /* fallback for old browsers */
	background: -webkit-linear-gradient(to bottom, #314755, #26a0da); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to bottom, #314755, #26a0da); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#schedule_org table {
	width: 100%;
	text-align: center;
	border: 1px solid #fff;
}

#schedule_org table tbody {
	border-top: 1px solid #fff;
}

#schedule_org table tbody tr {
	border-bottom: 1px solid #fff;
}

#schedule_org table tbody tr td {
	border-right: 1px solid #fff;
	height: 100px;
}

#schedule_org table tr td {
	color: #fff;
	font-size: 13px;
	text-transform: capitalize;
	font-weight: 500;
	letter-spacing: 0.25px;
}

.schedule-table.filtering .ts-item {
	opacity: 0;
	transition: all 0.5s;
}

.schedule-table.filtering .ts-item.show {
	opacity: 1;
	transition: all 0.5s;
}

#schedule_org .filters {
	margin-bottom: 40px;
}
#schedule_org .filters ul {
	padding: 0;
	text-align: center;
}
#schedule_org .filters ul li {
	list-style: none;
	display: inline;
	cursor: pointer;
	position: relative;
	margin-right: 10px;
	font-size: 15px;
	font-weight: 500;
	color: #fff;
	text-transform: capitalize;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
#schedule_org .filters ul li:after {
	content: "/";
	margin-left: 10px;
	color: #fff;
}
#schedule_org .filters ul li:last-child {
	margin-right: 0px;
}
#schedule_org .filters ul li:last-child::after {
	display: none;
}
#schedule_org .filters ul li.active,
#schedule_org .filters ul li:hover {
	color: #2780ff;
}
#schedule_org .filters-content {
	margin-top: 50px;
}
#schedule_org .filters-content .show {
	opacity: 1;
	visibility: visible;
	transition: all 350ms;
}
#schedule_org .filters-content .hide {
	opacity: 0;
	visibility: hidden;
	transition: all 350ms;
}


/*
---------------------------------------------
trainers
---------------------------------------------
*/

#trainers .trainer-item {
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
	padding: 40px;
}

#trainers .trainer-item img {
	width: 100%;
	border-radius: 5px;
}

#trainers .trainer-item span {
	font-size: 13px;
	font-weight: 500;
	color: #2780ff;
	display: inline-block;
	margin-top: 25px;
	margin-bottom: 10px;
}

#trainers .trainer-item h4 {
	font-size: 19px;
	font-weight: 600;
	color: #232d39;
	letter-spacing: 0.5px;
	margin-bottom: 18px;
}

#trainers .trainer-item p {
	margin-bottom: 20px;
}

#trainers .trainer-item ul.social-icons li {
	display: inline-block;
	margin-right: 12px;
	font-size: 15px;
}

#trainers .trainer-item ul.social-icons li:last-child {
	margin-right: 0px;
}

#trainers .trainer-item ul.social-icons li a {
	color: #232d39;
	transition: all .3s;
}

#trainers .trainer-item ul.social-icons li a:hover {
	color: #2780ff;
}


/*
---------------------------------------------
contact
---------------------------------------------
*/

#contact-us {
	padding: 0;
	background:rgba( 0, 0, 0, 0.8 );
	height: 82em;
}

#contact-us .container-fluid .col-lg-6 {
	padding: 0px;
}

#contact-us iframe {
	width: 100%;
	height: 81em;
}




#contact-us .contact-form {
	margin: 0 auto;
	padding: 15px 0;



}

/*

#contact-us .contact-form #contact {
	background-color: #fff;
	padding: 40px;
	border-radius: 5px;
}

.contact-form input,
.contact-form textarea {
	color: #7a7a7a;
	font-size: 13px;
	border: 1px solid #ddd;
	background-color: #fff;
	width: 100%;
	height: 40px;
	outline: none;
	line-height: 40px;
	padding: 0px 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin-bottom: 30px;
}

.contact-form textarea {
	height: 150px;
	resize: none;
}

.contact-form ::-webkit-input-placeholder { /* Edge */
	color: #7a7a7a;
}

.contact-form :-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #7a7a7a;
}

.contact-form ::placeholder {
	color: #7a7a7a;
}

.contact-form button {
	display: inline-block;
	font-size: 13px;
	padding: 11px 17px;
	background-color: rgba(39, 128, 255, 0.7 );
	color: #fff;
	text-align: center;
	font-weight: 400;
	text-transform: uppercase;
	transition: all .3s;
	border: none;
	outline: none;
	margin-top: -8px;
	line-height:150%;
}

.contact-form button:hover {
	background-color: #000000;
}

*/


/*
---------------------------------------------
footer
---------------------------------------------
*/

/*
footer {
	text-align: center;
	padding: 30px 0px;
}

footer p {
	color: #232d39;
	font-size: 13px;
}

footer p a {
	cursor: pointer;
	color: #2780ff;
}

footer p a:hover {
	color: #2780ff;
}
*/

/*
---------------------------------------------
preloader
---------------------------------------------
*/

.js-preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #232d39;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	opacity: 1;
	visibility: visible;
	z-index: 9999;
	-webkit-transition: opacity 0.25s ease;
	transition: opacity 0.25s ease;
}

.js-preloader.loaded {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

@-webkit-keyframes dot {
	50% {
		-webkit-transform: translateX(96px);
		transform: translateX(96px);
	}
}

@keyframes dot {
	50% {
		-webkit-transform: translateX(96px);
		transform: translateX(96px);
	}
}

@-webkit-keyframes dots {
	50% {
		-webkit-transform: translateX(-31px);
		transform: translateX(-31px);
	}
}

@keyframes dots {
	50% {
		-webkit-transform: translateX(-31px);
		transform: translateX(-31px);
	}
}

.preloader-inner {
	position: relative;
	width: 142px;
	height: 40px;
	background: #232d39;
}

.preloader-inner .dot {
	position: absolute;
	width: 16px;
	height: 16px;
	top: 12px;
	left: 15px;
	background: #fff;
	border-radius: 50%;
	-webkit-transform: translateX(0);
	transform: translateX(0);
	-webkit-animation: dot 2.8s infinite;
	animation: dot 2.8s infinite;
}

.preloader-inner .dots {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	margin-top: 40px;
	-webkit-animation: dots 2.8s infinite;
	animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
	display: block;
	float: left;
	width: 16px;
	height: 16px;
	margin-left: 16px;
	background: #fff;
	border-radius: 50%;
}

/*
---------------------------------------------
responsive
---------------------------------------------
*/


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

	.video- {

/*background-color: rgba(0,0,0,0.5);*/
min-height: 100%;

}

.main-banner .caption h1 {
	font-size: 9vw;
}

.main-banner .caption h6 {
	font-size: 200%;
	margin-bottom:30px;
}

.main-banner .bottom-center {

	font-size: 5rem;/* font-size: 50px と同等 */
	margin-top:-15%;

}

#program {
	padding-bottom: 110px;
}
#program .program-item {
	margin-bottom: 30px;
}
#our-classes .tabs-content {
	margin-left: 0px;
	margin-top: 30px;
}
.trainer-item {
	margin-bottom: 30px;
}
 /* #contact-us #map {
		margin-bottom: -7px;
	}*/
	#contact-us .contact-form {
		padding: 10px;
	}
	#contact-us .contact-form #contact {
		padding: 10px;
	}

	#contact-us {
		height: 100%;
	}


	 /*#contact-us iframe {
	width: 100%;
	height: 100%;
 aspect-ratio: 16/9; //アスペクト比（縦横比）を指定
}*/

}

.map {
	height: 0;
	overflow: hidden;
	padding-top: 56.25%;
	position: relative;
	margin-top: 50px;
}

.map iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}



@media screen and (min-width: 481px) {
	div.greetingSP{
		display:none;
	}
}

@media screen and (max-width: 480px) {
	div.greetingPC{
		display:none;

	}
}

@media screen and (max-width: 450px) {
	.feature-item .right-content a.text-button {
		margin-left: 130px;
	}
}