/* IMPORT CSS */
@import url("grid.css");

img {
	max-width:100%;
	height: auto;/*高さ自動*/
}
a {
    display:block;
    color: #000;
    text-decoration-line: none;
}
a:hover { 
    color: #999;
}

/*ヘッダー
-------------------------------------*/
.header {
	display: flex;
    flex-direction: row;
    padding: 2rem 0 0 0;
  transition: .3s;
  background-color: rgba(255,255,255,0);
}
.header-box {
	margin-left: auto;
	margin-top: 8px;
}
.contact-button {
	padding: 1rem;
	border: 2px solid #000;
}



.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  background-color: rgba(255,255,255,0.95);
  -webkit-transition: all .4s ease 0s,background .6s ease .2s;
  transition: all .4s ease 0s,background .6s ease .2s;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  height: 10px;
}



nav ul {
    background-color: rgba(255,255,255,0.95);
	display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
	margin: 1rem 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: #f7f7f7;    
}
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;
}
.header #open,#close  {
    position: absolute;
    top: 20px;
    right: 12px;
}
nav ul {
	flex-direction: column;
}
.header li {
	padding-top: 0;
}
/* スマホ時はMENUボタンを表示 */
#open,#close  {
    display: block;
    width: 40px;
    border: none;
    position: absolute;
    top: 20px;
    right: 12px;
}
/* スマホ時はメニューを非表示 */
#navi {
    display: none;
}
}
    






/*アコーディオンメニュー1
-------------------------------------*/

/*ボックス全体1*/
.accbox1 {
    margin: 2em 0;
    padding: 0;
    max-width: 90%
}

/*ラベル*/
.accbox1 label {
    display: block;
    margin: 1.5px 0;
    padding : 13px 12px;
    color: #ffffff;
    font-weight: bold;
    background: #3292B3;
    cursor :pointer;
    transition: all 0.5s;
border-radius: 15px;
}

/*アイコンを表示*/
.accbox1 label:before {
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    padding-right: 8px;
}

/*ラベルホバー時*/
.accbox1 label:hover {
    background :#39A7CC;
}

/*チェックは隠す*/
.accbox1 input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox1 .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    background: #fff5eb;
    opacity: 1;
}

.accbox1 .accshow p {
    margin: 15px 10px}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f078';
}



/*アコーディオンメニュー11
-------------------------------------*/

/*ボックス全体11*/
.accbox11 {
    margin: 2em 0;
    padding: 0;
    max-width: 90%
}

/*ラベル*/
.accbox11 label {
    display: block;
    margin: 1.5px 0;
    padding : 13px 12px;
    color: #ffffff;
    font-weight: bold;
    background: #3292B3;
    cursor :pointer;
    transition: all 0.5s;
border-radius: 15px;
}

/*アイコンを表示*/
.accbox11 label:before {
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    padding-right: 8px;
}

/*ラベルホバー時*/
.accbox11 label:hover {
    background :#39A7CC;
}

/*チェックは隠す*/
.accbox11 input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox11 .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    background: #fff5eb;
    opacity: 1;
}

.accbox11 .accshow p {
    margin: 15px 10px}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f078';
}






/*アコーディオンメニュー2
-------------------------------------*/

/*ボックス全体2*/
.accbox2 {
    margin: 2em 0;
    padding: 0;
    max-width: 90%
}

/*ラベル*/
.accbox2 label {
    display: block;
    margin: 1.5px 0;
    padding : 13px 12px;
    color: #ffffff;
    font-weight: bold;
    background: #E68E29;
    cursor :pointer;
    transition: all 0.5s;
border-radius: 15px;
}

/*アイコンを表示*/
.accbox2 label:before {
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    padding-right: 8px;
}

/*ラベルホバー時*/
.accbox2 label:hover {
    background :#f5962d;
}

/*チェックは隠す*/
.accbox2 input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox2 .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    background: #f5962d;
    opacity: 1;
}

.accbox2 .accshow p {
    margin: 15px 10px}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f078';
}



/*アコーディオンメニュー3
-------------------------------------*/

/*ボックス全体3*/
.accbox3 {
    margin: 2em 0;
    padding: 0;
    max-width: 90%
}

/*ラベル*/
.accbox3 label {
    display: block;
    margin: 1.5px 0;
    padding : 13px 12px;
    color: #ffffff;
    font-weight: bold;
    background: #56B332;
    cursor :pointer;
    transition: all 0.5s;
border-radius: 15px;
}

/*アイコンを表示*/
.accbox3 label:before {
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    padding-right: 8px;
}

/*ラベルホバー時*/
.accbox3 label:hover {
    background :#64D23A;
}

/*チェックは隠す*/
.accbox3 input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox3 .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    background: #fff5eb;
    opacity: 1;
}

.accbox3 .accshow p {
    margin: 15px 10px}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f078';
}



/*アコーディオンメニュー4
-------------------------------------*/

/*ボックス全体4*/
.accbox4 {
    margin: 2em 0;
    padding: 0;
    max-width: 90%
}

/*ラベル*/
.accbox4 label {
    display: block;
    margin: 1.5px 0;
    padding : 13px 12px;
    color: #ffffff;
    font-weight: bold;
    background: #772E99;
    cursor :pointer;
    transition: all 0.5s;
border-radius: 15px;
}

/*アイコンを表示*/
.accbox4 label:before {
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    padding-right: 8px;
}

/*ラベルホバー時*/
.accbox4 label:hover {
    background :#8B36B3;
}

/*チェックは隠す*/
.accbox4 input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox4 .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    background: #fff5eb;
    opacity: 1;
}

.accbox4 .accshow p {
    margin: 15px 10px}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f078';
}



/*アコーディオンメニュー40
-------------------------------------*/

/*ボックス全体4*/
.accbox40 {
    margin: 2em 0;
    padding: 0;
    max-width: 90%
}

/*ラベル*/
.accbox40 label {
    display: block;
    margin: 1.5px 0;
    padding : 13px 12px;
    color: #ffffff;
    font-weight: bold;
    background: #772E99;
    cursor :pointer;
    transition: all 0.5s;
border-radius: 15px;
}

/*アイコンを表示*/
.accbox40 label:before {
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    padding-right: 8px;
}

/*ラベルホバー時*/
.accbox40 label:hover {
    background :#8B36B3;
}

/*チェックは隠す*/
.accbox40 input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox40 .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    background: #fff5eb;
    opacity: 1;
}

.accbox40 .accshow p {
    margin: 15px 10px}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f078';
}



/*アコーディオンメニュー5
-------------------------------------*/

/*ボックス全体5*/
.accbox5 {
    margin: 2em 0;
    padding: 0;
    max-width: 90%
}

/*ラベル*/
.accbox5 label {
    display: block;
    margin: 1.5px 0;
    padding : 13px 12px;
    color: #ffffff;
    font-weight: bold;
    background: #d8ca26;
    cursor :pointer;
    transition: all 0.5s;
border-radius: 15px;
}

/*アイコンを表示*/
.accbox5 label:before {
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    padding-right: 8px;
}

/*ラベルホバー時*/
.accbox5 label:hover {
    background :#e6d722;
}

/*チェックは隠す*/
.accbox5 input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox5 .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    background: #fff5eb;
    opacity: 1;
}

.accbox5 .accshow p {
    margin: 15px 10px}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f078';
}



/*アコーディオンメニュー50
-------------------------------------*/

/*ボックス全体50*/
.accbox50 {
    margin: 2em 0;
    padding: 0;
    max-width: 90%
}

/*ラベル*/
.accbox50 label {
    display: block;
    margin: 1.5px 0;
    padding : 13px 12px;
    color: #ffffff;
    font-weight: bold;
    background: #d8ca26;
    cursor :pointer;
    transition: all 0.5s;
border-radius: 15px;
}

/*アイコンを表示*/
.accbox50 label:before {
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    padding-right: 8px;
}

/*ラベルホバー時*/
.accbox50 label:hover {
    background :#e6d722;
}

/*チェックは隠す*/
.accbox50 input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox50 .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    background: #fff5eb;
    opacity: 1;
}

.accbox50 .accshow p {
    margin: 15px 10px}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f078';
}






/*アコーディオンメニュー6
-------------------------------------*/

/*ボックス全体6*/
.accbox6 {
    margin: 2em 0;
    padding: 0;
    max-width: 90%
}

/*ラベル*/
.accbox6 label {
    display: block;
    margin: 1.5px 0;
    padding : 13px 12px;
    color: #ffffff;
    font-weight: bold;
    background: #800000;
    cursor :pointer;
    transition: all 0.5s;
border-radius: 15px;
}

/*アイコンを表示*/
.accbox6 label:before {
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    padding-right: 8px;
}

/*ラベルホバー時*/
.accbox6 label:hover {
    background :#b22222;
}

/*チェックは隠す*/
.accbox6 input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox6 .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    background: #fff5eb;
    opacity: 1;
}

.accbox6 .accshow p {
    margin: 15px 10px}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f078';
}



/*アコーディオンメニュー7
-------------------------------------*/

/*ボックス全体7*/
.accbox7 {
    margin: 2em 0;
    padding: 0;
    max-width: 90%
}

/*ラベル*/
.accbox7 label {
    display: block;
    margin: 1.5px 0;
    padding : 13px 12px;
    color: #ffffff;
    font-weight: bold;
    background: #800000;
    cursor :pointer;
    transition: all 0.5s;
border-radius: 15px;
}

/*アイコンを表示*/
.accbox7 label:before {
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    padding-right: 8px;
}

/*ラベルホバー時*/
.accbox7 label:hover {
    background :#b22222;
}

/*チェックは隠す*/
.accbox7 input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox7 .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    background: #fff5eb;
    opacity: 1;
}

.accbox7 .accshow p {
    margin: 15px 10px}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f078';
}

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


























/*メイン画像
-------------------------------------*/
.mainimg img {
    width: 100vw;
}

/*メインコンテンツ
-------------------------------------*/
main {
    margin: 5rem 0 0 0;
}
section {
	margin: 5rem 0;
	padding: 3rem 0;
}
.gray-back {
	background-color: #f4f4f4;
}

.effect {

    box-shadow: 0 3px 18px -4px rgba(0, 0, 0, 0.8);

}


/*キャッチコピー
-------------------------------------*/
.catch {
    text-align: center;
width:95%;
}
.catch h2 {
    padding-bottom: 1rem;
}
.under {
    border-bottom: 0.4rem solid #000;
    padding:0 1rem 1rem 1rem;
}
.center {
	text-align: center;
	margin-bottom: 4rem;
}

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

/*フッター
-------------------------------------*/
footer {
    background-color: #f7f7f7;
    padding: 5rem 0;
}
footer h4 {
    border-bottom: 3px solid #ccc;
}

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

/*コピーライト
-------------------------------------*/
.copyright {
    text-align: center;
    padding: 1rem 0;
    background-color: #000;
}
.copyright a {
    color: #fff;
    text-decoration: none;
	display: inline;
}

/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
    position: fixed;
    bottom: 15px;
    right: 15px;
}
#pagetop a {
    border-radius: 10px 10px 10px 10px;
    display: block;
background-color: rgba( 0, 0, 0, 0.35 );
    color: #fff;
    width: 45px;
    padding: 10px 5px;
    text-align: center;
}
#pagetop a:hover {
background-color: rgba( 0, 0, 0, 0.15 );
}

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