@charset "UTF-8";
@import url("grid.css");

:root { /* 色変更される場合は、#以降のカラーコードを変更してください IE非対応 */
    --base-color: #000;
    --link-color: #fff;
    /*--linkhover-color: #999;*/
    --linkhover-color: #333;
    --back-color: #f7f7f7;
    
    --border-color: #ccc;
    --white-color: #fff;
    --white-80-color: rgba(255,255,255,0.80);
    --black-80-color: rgba(0,0,0,0.80);
    --main-color: #fff;
}

img {
	max-width:100%;
	height: auto;/*高さ自動*/
}
a {
    display:block;
    color: var(--link-color);
    text-decoration-line: none;
}
a:hover { 
    color: var(--linkhover-color);
}
.con_naka a:not(.a_img) { 
    background-color: var(--black-80-color);
    padding: 0.5em 1em;
}
.con_naka a:hover { 
    background-color: var(--back-color);
}
/*中ページ*/
.con_naka{
    margin: 2em 0;
    color: #000000;
}

/*ヘッダー
-------------------------------------*/
header h1{
    margin-bottom: 0;
}
header li{
    margin-bottom: 0.5rem;
}
.header {
	display: flex;
    flex-direction: row;
    padding: 0.5rem 0 0 0;    
}
@media screen and (max-width: 768px){
    .header {
        padding: 0.25rem 0 0 0;    
    }
}
.header-box {
	margin-left: auto;
	margin-top: 8px;
    /*background: var(--header-box-back-color);*/
}
.header-box a{    
    color: #000000;
    display: inline-block;
}
.header-box_2{    
    background: var(--white-80-color);
    font-weight: 600;
}
.contact-button {
	padding: 1rem;
	/*border: 2px solid var(--base-color);*/
}
.h_nav .f_li{
    display: none;
}
nav ul {
	display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
	margin: 0rem 0 0 0;
}
nav li {
	flex: 1 0 auto;
}
nav li a {
    text-decoration: none;
    text-align: center;
    width: 100%;
}
nav a:hover {
    background-color: var(--back-color);   
}
nav a {
    padding: 0.5rem;
}

@media screen and (min-width: 768px){
/* PC時はMENUボタンを非表示 */
#open,#close {
    display: none !important;
}

#navi {
    display: block !important;
}
}

@media screen and (max-width: 768px){
.header {
	flex-direction: column;
    /*margin-bottom: 10px;*/
    margin-bottom: 0.25rem;
}
.header #open,#close  {
    position: absolute;
    top: 20px;
    right: 12px;
}
nav ul {
	flex-direction: column;
}
.header li {
	padding-top: 0;
}
/* スマホ時はMENUボタンを表示 */
#open {
    display: block;
    background: url(../img/button.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    border: none;
    position: absolute;
    /*top: 20px;*/
    top: 10px;
    right: 12px;
}
#close  {
    display: block;
    background: url(../img/button2.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    border: none;
    position: absolute;
    top: 20px;
    right: 12px;
}
/* スマホ時はメニューを非表示 */
#navi {
    display: none;
}
}
    
/*メイン画像
-------------------------------------*/
.mainimg {
    /*position: relative;
    top: 0;
    height: 500px;    */
}

.mainimg img {
    width: 100vw;
    /*object-fit: contain;*/
}
.sl{
    width: 100%;
    /*height: 800px;*/
}

/*スライドショー
---------------------------------------------*/
/*↓リンクが機能しなかった*/
/*.fadeslide {
	position: relative;	
	overflow: hidden;
	z-index: 0;
    aspect-ratio: 16 / 9;
    width: 100%;
}
@media screen and (max-width: 770px) {
    .fadeslide {
    }
}
.fadeslide div {
	position: absolute;
	top: 0;
	left: 0;
    width: 100%;
    height: 100%;
    
    display    : block;
    animation  : slideAnime 20s ease infinite;
    object-fit: cover;
    
}
.fadeslide img {
    width: 100vw
}

.fadeslide div:nth-of-type(1) {
    animation-delay: 0s;
    background: url("../img/mainimg_01.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.fadeslide div:nth-of-type(1) a{
    width: 100%;
    height: 100%;
    display: block;
}

.fadeslide div:nth-of-type(2) {
    animation-delay: 5s;
    background: url("../img/mainimg_02.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.fadeslide div:nth-of-type(3) {
    animation-delay: 10s;
    background: url("../img/mainimg_03.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.fadeslide div:nth-of-type(4) {
    animation-delay: 15s;
    background: url("../img/flow.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

@keyframes slideAnime{
   0% { opacity: 0 }
   2% { opacity: 1 }
  31% { opacity: 1 }
  33% { opacity: 0 }
 100% { opacity: 0 }
}*/







.fadeslide {
	position: relative;	
	overflow: hidden;
	z-index: 0;
    aspect-ratio: 16 / 7;
    width: 100%;
    /*height: 800px;*/

}
.fadeslide .sl_name{
    position: absolute;
    bottom: 5em;
    /*left: 1em;*/
    font-size: 18px;
    color: var(--white-color);
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,1.00);
    width: 100%;
}
@media screen and (max-width: 768px){
    .fadeslide {
        /*height: 800px;*/
        aspect-ratio: 16 / 15;
    }
    .fadeslide .sl_name{
        font-size: 13px;
        bottom: 3em;
    }
}
.fadeslide .sl_ul > li {
	position: absolute;
	top: 0;
	left: 0;
    width: 100%;
    height: 100%;    
}
.fadeslide img {
    width: 100vw
}

.fadeslide .sl_ul > li:nth-of-type(1) {
	animation: fadeslide 20s 0s infinite both;    
	z-index: 6;
    background: url("../img/mainimg_01.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
/*.fadeslide .sl_ul > li:nth-of-type(1) a{
    width: 100%;
    height: 100%;
    display: block;
}*/

.fadeslide .sl_ul > li:nth-of-type(2) {
	animation: fadeslide 20s 5s infinite both;    
	z-index: 5;
    background: url("../img/mainimg_02.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.fadeslide .sl_ul > li:nth-of-type(3) {
	animation: fadeslide 20s 10s infinite both;    
	z-index: 4;
    background: url("../img/mainimg_03.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.fadeslide .sl_ul > li:nth-of-type(4) {
	animation: fadeslide 20s 15s infinite both;
	z-index: 3;
    background: url("../img/mainimg_04.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.sl_btn {
    background: #ffffff;
    padding: 0.3em 0.5em 0.5em 0.5em;
    color: #000000;
    width: 15em;
    height: 2em;
    /*margin: 0 0 0 1em;*/
    /*position: absolute;
    bottom: 0em;
    right: 35%;
    z-index: 9999*/;
    /*display: block;*/
    text-shadow: none;
    margin: 0 auto;
}
.sl_btn:hover{
    background: rgba(255,255,255,0.80);
}



/*.fadeslide div:nth-of-type(5) {
	animation: fadeslide 30s 20s infinite both;
	z-index: 2;
}

.fadeslide div:nth-of-type(6) {
	animation: fadeslide 30s 25s infinite both;
	z-index: 1;
}*/

@keyframes fadeslide {
	
    0% { left: 0; opacity: 0; }
	5% { left: 0; opacity: 1; }
	20% { left: 0; opacity: 1; }
	25% { left: 0; opacity: 0; }
	26% { left: 100%; opacity: 0; }
	100% { left: 100%; opacity: 0; }
    
}








    

/*メインコンテンツ
-------------------------------------*/
main {
    /*margin: 5rem 0 0 0;*/
    color: var(--main-color);
}
section {
	/*margin: 5rem 0;
	padding: 3rem 0;*/
}
.gray-back {
	background-color: var(--back-color);
}
.con{
    margin: 15rem 0;
	padding: 3rem 0;
    position: sticky;
    z-index: 2;
}
@media screen and (max-width: 768px){
    .con{
        margin: 7rem 0;
        padding: 1rem;
    }
}

/*キャッチコピー
-------------------------------------*/
.catch {
    text-align: center;
}
.catch h2 {
    padding-bottom: 1rem;
}
.under {
    border-bottom: 0.4rem solid var(--base-color);
    padding:0 1rem 1rem 1rem;
}
.center {
	text-align: center;
	margin-bottom: 4rem;
}

/*申し込みの流れ
-------------------------------------*/
.flow.row {
	margin-bottom: 3rem;
}

/*フッター
-------------------------------------*/
footer {
    background-color: var(--base-color); 
    padding: 5rem 0;
    text-align: center;
}
footer h1{
    width: 20%;
    margin: 0em 40% 1em 40%;
}
@media screen and (max-width: 768px){
    footer h1{
        width: 50%;
        margin: 0em 25% 1em 25%;
    }
}

footer h1 img {
    width: 100%;
}
footer h4 {
    border-bottom: 3px solid var(--border-color);
}
footer .header-box_2{
    font-size: 18px;
    padding: 0.4em 1em;
    margin: 0em 0.5em;
}

@media screen and (max-width: 768px){
    /*.f_nav {
        flex-direction: row;
    }
    .f_nav li{
        width: calc( 50% - 1em );
    }*/
}

/*お問い合わせ
-------------------------------------*/
.contact-box {
	border: 1px solid var(--border-color);
	text-align: center;
	padding: 2rem 0;
}
.table {
	margin: 4rem 0;
	width: 100%;
}
.table th {
	/*width: 250px;*/
}

/*コピーライト
-------------------------------------*/
.copyright {
    text-align: center;
    padding: 1rem 0;
    background-color: var(--base-color);
}
.copyright a {
    color: var(--white-color);
    text-decoration: none;
	display: inline;
}

/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
    position: fixed;
    bottom: 15px;
    right: 15px;
}
#pagetop a {
    display: block;
    background-color: var(--base-color);
    color: var(--white-color);
    width: 50px;
    padding: 10px 5px;
    text-align: center;
}
#pagetop a:hover {
    background-color: var(--link-color);
    color: var(--linkhover-color);
}

/* 幅768px以下の表示
-------------------------------------*/
@media screen and (max-width: 768px){
	
/*ヘッダー
-------------------------------------*/
.header-box:not(.footer-box) {
	display: none;
}	
/*お問い合わせ
-------------------------------------*/
.table th {
	/*width: 100%;*/
	display: block;
}	
.table td {
	display: block;
}
}

/*TOP
-------------------------------------*/
.osusume{
    text-align: center;
    margin: 0 0 0 0;
}
.osusume li{
    display: inline-block;
    width:  23%;
    margin: 2%;
    
}
@media screen and (max-width: 768px){
    .osusume li{
        width:  40%;
        margin: 2%;
    }
    
}
.osusume img{
    width: 100%;
}
/*news
-------------------------------------*/
.news-list{
  list-style: none outside;
  margin: 0;
  padding: 0;
    margin: 20px;
}
.news-list .item a{
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  text-decoration: none;
  /*color: #333;*/
  border-bottom: 1px solid #CCC;
  padding: 20px 20px;
}
.news-list .item:first-child a{
  border-top: 1px solid #CCC;
}
.news-list .item .date{
  margin: 0;
  min-width: 120px;
  font-size: 16px;
  color: #999;
  padding: 0 20px 0 0;
}
.news-list .item .title{
  margin: 0;
  width: 100%;
}
.news-list .item a:hover .title{
  /*color: var(--linkhover-color);*/
    color: #999;
}

@media screen and (max-width: 767px){
.news-list .item a{
  flex-wrap: wrap;
}
.news-list .item .date{
  min-width: 100px;
}
.news-list .item .title{
  margin-top: 10px;
}
}

/* 装飾 */
 
#news{
  box-sizing: border-box;
}
#news a{
  text-decoration: none;
}

/*---サイドメニュー*/
.side_menu{
   list-style: none;
    padding: 0;
    margin: 0;
}
.menu .d_i_b img {
    height: 300px;
    width: auto;
}


/*------機材------*/
.c2_c1{
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}
.c2_c1 li{
    display: inline-block;
    width: 100%;
}
.c2_c1 img{
    width: 100%;
}
.c2_c1 h3{
    margin: 0 0 1em 0;
}
@media screen and (min-width: 768px) {
    .c2_c1 li:nth-child(even){
        width: calc(30% - 1em);
        margin: 0 0 1em 0;
    }
    .c2_c1 li:nth-child(odd){
		width: calc(70% - 1em);
        margin: 0 1em 1em 0;
    }
}
.h_align{
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
.h_align li:nth-child(odd){
    text-align: left;
}
/*プライスページボタン*/
.b_btn {
    list-style: none;
	width: 100%;
}
.b_btn li{
    display: inline-block;
    width: calc(50% - 1em);
	 white-space: nowrap;
	text-align: center;
}
.policy_block{
	margin: 0 0 5em 0;
}
.c2_c1_w50:not(.profile){
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}
.c2_c1_w50 > li{
    display: inline-block;
    width: 100%;
	vertical-align: top;
}
.c2_c1_w50 img{
    width: 100%;
}
.c2_c1_w50 h3{
    margin: 0 0 1em 0;
}
@media screen and (min-width: 768px) {
    .c2_c1_w50 > li{
        width: calc(50% - 1em);
        margin: 0 0 1em 0;
    }
    .c2_c1_w50 > li:nth-child(odd){
        margin: 0 1em 1em 0;
    }
}

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}
.f_s_12{
	font-size: 12px;
}
.f_s_14{
	font-size: 14px;
}
.f_s_15{
	font-size: 15px;
}
.f_s_18{
	font-size: 18px;
}
.f_s_20{
	font-size: 20px;
}
.f_s_30{
	font-size: 30px;
}
.l_h_90{
	line-height: 90%
}
.l_h_110{
	line-height: 110%
}
.m_b_10{
	margin-bottom: 10px;
}
.m_b_m10{
	margin-bottom: -10px;
}

.color_red{
	color: #FF0000;
}

.heading04 {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 26px;
	text-align: center;
}

.heading04::before,
.heading04::after {
	content: '';
	width: 3px;
	height: 40px;
	background-color: #603A2A;
}

.heading04::before {
	margin-right: 30px;
	transform: rotate(-35deg)
}
.heading04::after {
	margin-left: 30px;
	transform: rotate(35deg)
}

.pc{
	display: none;
}
@media screen and (min-width: 768px) {
	.sp{
		display: none;
	}
	.pc{
		display:block;
	}
}


.c_d_red{
	color: #C80003;
}
.kyoucyou {
  position: relative;
  padding: 0.25em 1em!important;
  border-top: solid 2px black;
  border-bottom: solid 2px black;
	color: #C80003;
	text-align: center;
	font-size: 20px;
	display: inline-block;
	
	top: 5em;
   left: 50%;
   transform: translate(-50%,-50%);
	margin: 2em 0;
}
.kyoucyou:before, .kyoucyou:after {
  content: '';
  position: absolute;
  top: -7px;
  width: 2px;
  height: -webkit-calc(100% + 14px);
  height: calc(100% + 14px);
  background-color: black;
}
.kyoucyou:before {
  left: 7px;
}
.kyoucyou:after {
  right: 7px;
}
.top_10em{
	top: 8em;
}
@media screen and (min-width: 419px) {
	.kyoucyou {
		top: 4em;
	}
		.top_10em{
		top: 6em;
	}
}

@media screen and (min-width: 768px) {
	.kyoucyou {
		top: 2em;
	}
	.top_10em{
		top: 4em;
	}
}

.schedule_ul .kyoucyou{
	font-size: 1.6rem;
	line-height: 140%;
	top: 3em;
}
.schedule_ul .top_10em{
	top: 6em;
}
.schedule_ul .top_10em_2{
	top: 8em;
}
@media screen and (min-width: 768px) {
	.schedule_ul .kyoucyou{
		top: 4em;
	}
	.schedule_ul .top_10em{
		top: 9em;
	}
	.schedule_ul .top_10em_2{
		top: 10em;
	}
}
.hqs_suisyou {
  position: relative;
  color: #001E60;
  font-size: 15px;
  padding: 5px 0!important;
  text-align: center;
  margin: 1.5em 0;

}
.hqs_suisyou:before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 100px;
  height: 50px;
  border-radius: 50%;
  border: 4px solid #96A7CB;
  border-left-color: transparent;
  border-right-color: transparent;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.iza{
	font-size: 1.5rem;
	line-height: 140%;
}
@media screen and (min-width: 768px) {
	.iza{	
		font-size: 2.8rem;
	}
}
.schedule_ul .iza{
	font-size: 1.2rem;
}
@media screen and (min-width: 768px) {
	.schedule_ul .iza{
		font-size: 1.2rem;
	}
}