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

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

img {
	max-width:100%;
	height:auto;/*高さ自動*/
}
a {
	color:var(--link-color);
	text-decoration-line:none;
}
a:hover { 
	color:var(--linkhover-color);
}


/*ヘッダー
-------------------------------------*/
.header {
/*
	display:flex;
	flex-direction:row;
*/
	padding:2rem 0 0 0;
}

nav ul {
	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:var(--back-color);   
}
nav a {
	display:block;
	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 {
	display:block;
	background:url(../img/button.png);
	background-repeat:no-repeat;
	background-size:contain;
	width:50px;
	height:50px;
	border:none;
	position:absolute;
	top:20px;
	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 img {
	width:100vw;
}

/*メインコンテンツ
-------------------------------------*/
main {
	margin:2rem;
}
section {
	margin:1rem 0;
	padding:1rem 0;
}
.gray-back {
	background-color:var(--back-color);
}

/*キャッチコピー
-------------------------------------*/
.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(--back-color); 
	padding:5rem 0;
}
footer h4 {
	border-bottom:3px solid var(--border-color);
}

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

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

/*ページトップへ戻るボタン
-------------------------------------*/
#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);
}

/* テキストエリアの横幅 */
.textarea-width {
	width:300px;
}

/* 枠の横幅 :*/
.waku {
	width:300px;
	border:solid #999 1px;
	padding:5px;
}


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

/* スマホ時は非表示 */
.sp-none {
	display:none;
}

/* スマホ時は画面幅の90% */
/* テキストエリアの横幅 */
.textarea-width {
	width:90vw;
}

.waku {
	width:90vw;
	border:solid #999 1px;
	padding:5px;
}


}

/*================================================
 *  その他
 ================================================*/
.left { text-align:left; }
.right { text-align:right; }
.center { text-align:center; }

.large { font-size:140%; }
.big { font-size:120%; }
.small { font-size:80%; }
.mini { font-size:60%; }

.red { color:red; }

/*================================================
 *  カーソルが乗ったとき指マークに変更する
 ================================================*/
.hand { cursor:pointer; }

/*================================================
 *  カーソルが乗ったとき文字色を変更する
 ================================================*/
.change-color:hover { color:#303af8 }

/*================================================
 *  英語タイトル
 ================================================*/
.title-english{
	font-size: 1.5em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
	font-weight: normal; /*フォントの太さ指定(normalは標準)*/
	font-family: 'Niconne', cursive; /*フォントの種類指定(左から優先順位)*/
	text-align: center; /*行の水平方向の揃え方(centerは中央揃え)*/
	line-height: 1; /*行の高さ指定(数値のみの場合はfont-sizeの倍数)*/
}

/*================================================
 *  ボタン風ラジオボタン
 ================================================*/
.button-radio input[type="radio"] {
  display:none; 
}
.button-radio label {
  display:inline-block;
  color:#000;
  background-color:#ddd;
  padding:5px 10px;
	border:solid #bbb 2px;
}
.button-radio input[type="radio"]:checked + label {
  background-color:#ff4500;

  color:#fff;
	border:solid 2px;
  border-color:#a0522d #ffa500 #ffa500 #a0522d;
}

/*================================================
 *  ボタン風チェックボックス
 ================================================*/
.button-checkbox input[type="checkbox"] {
  display:none; 
}
.button-checkbox label {
  display:inline-block;
  color:#000;
  background-color:#ddd;
  padding:5px 10px;
	border:solid #bbb 2px;
}
.button-checkbox input[type="checkbox"]:checked + label {
  background-color:#ff4500;
  color:#fff;
	border:solid 2px;
  border-color:#a0522d #ffa500 #ffa500 #a0522d;
}

/*================================================
 *  ボタン風ボックス
 ================================================*/
.button-box-off {
  color:#000;
  background-color:#ddd;
  padding:5px 10px;
	border:solid #bbb 2px;
}
.button-box-on {
  background-color:#ff4500;
  color:#fff;
  padding:5px 10px;
	border:solid 2px;
  border-color:#a0522d #ffa500 #ffa500 #a0522d;
}

/*================================================
 *  一覧表示table
 ================================================*/
.table-all { border-collapse:collapse; }
.td-all {
	border:solid 1px #999;
	padding:1px;
	margin:0px;
}