@charset "utf-8";


/*全体の設定
---------------------------------------------------------------------------*/
body{
	color: #333;	/*全体の文字色*/
	background: #eee;/*背景色、背景画像の読み込み*/
	margin: 0px;
	padding: 0px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 14px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img:not(.banner) {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 90%;border-spacing: 0;}
iframe {width: 100%;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #333;	/*リンクテキストの色*/
	transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
a:hover {
	color: #001ada;			/*マウスオン時の文字色（全体）*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}



/*メインコンテンツ
---------------------------------------------------------------------------*/
#main {
	margin: 60px auto 30px auto;
	max-width: 900px;		/*メインコンテンツ幅*/
	background: #FFF;	/*背景色*/
	padding: 15px;	/*ボックス内の余白*/
	border: 1px solid #CCC;	/*枠線の幅、線種、色*/
}
/*mainコンテンツのh2タグの設定*/
#main h2 {
	clear: both;
	margin-bottom: 20px;	/*見出しの下にとるスペース*/
	color: #FFF;		/*文字色*/
	padding: 7px 20px;	/*上下、左右への余白*/
	background: #7f03c7;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background: url(../images/arrow2.png) no-repeat right center, linear-gradient(#950dd4, #4a018f);		/*背景画像の読み込み,グラデーション*/
	box-shadow: 1px 2px 5px #ccc;	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
}
/*mainコンテンツのh3タグの設定*/
#main h3 {
	clear: both;
	margin-bottom: 20px;	/*見出しの下にとるスペース*/
	background: #FFF;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background:linear-gradient(#FFF, #f4f4f4 49%, #e8e8e8 50%, #FFF 100%);	/*グラデーション*/
	box-shadow: 1px 2px 5px #e2e2e2;	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
	padding: 4px 20px 4px 10px;	/*上、右、下、左へのボックス内の余白*/
	border: 1px solid #CCC;	/*枠線の幅、線種、色*/
}




/*フッター設定
---------------------------------------------------------------------------*/
footer {
	clear: both;
	margin-bottom: 30px;
	text-align: center;
	color: #777777;			/*文字色*/
	background: #DDDDDD;	/*背景色（古いブラウザだとここの色のみが出ます）*/
}
footer a {
	text-decoration: none;
	color: #777777;
}
footer a:hover {
	color: #FFF;
}
footer .pr {display: block;font-size: 80%;}




/*入力欄サイズ・装飾
---------------------------------------------------------------------------*/
/* プレースホルダー色*/
::placeholder{
	color: #b6b6b6;
}

/* テキストボックス*/
.ws,.wm,.wl{
    padding: 0.5em;          /* 内側の余白量 */
    height: 18px;           /* 高さ */
    font-size: 16px;          /* 文字サイズ */
}
.ws{
	width: 150px;
}
.wm{
	width: 300px;
}
.wl{
	width: 350px;
}


/* セレクトボックス*/
.se{
height: 40px;
font-size: 16px;          /* 文字サイズ */
}


/* フォーカス*/
input,select{
border:1px #818181 solid;
outline: 0;
	}
	
input:focus,select:focus{
background-color: rgb(255, 243, 243);
border: 2px rgb(252, 90, 130)solid;

}
/* スピンボタン削除 */
/* Chrome, Safari */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}




/*テーブル１
---------------------------------------------------------------------------*/
.ta1 {
	width: 100%;
	margin: 0 auto 20px;
}
.ta1, .ta1 td, .ta1 th{
	
	border: 1px solid #CCC;	/*テーブルの枠線の幅、線種、色*/
	padding: 10px 15px;	/*ボックス内の余白*/
	word-break: break-all;
}
/*テーブル１行目に入った見出し部分*/
.ta1 th.tamidashi{
	width: auto;
	text-align: left;
	color: #FFF;	/*文字色*/
	background: #333;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background: linear-gradient(#4b4b4b, #333);	/*グラデーション*/
}
/*tdで中央ぞろえしたいとき*/
.ta1 td.cyuo{
	text-align: center;
}

/*テーブル内の左側の見出し部分*/
.ta1 th{
	width: 20%;
	text-align: center;
	background: #e2e2e3;	/*背景色*/
}
/*左側ボックスに画像を入れた場合の設定*/
.ta1 th img {
	width: 100%;
}

@media (max-width: 768px) {
    .ta1 th, .ta1 td {
        display: block;
        width: 100%;
        box-sizing: border-box;
		border:0px;	/*テーブルの枠線の幅、線種、色*/
    }


    .ta1 th {
        text-align: left;
    }


	.ws,.wm,.wl{
		padding: 0.5em;          /* 内側の余白量 */
		height: 18px;           /* 高さ */
		font-size: 14px;          /* 文字サイズ */
	}
	.ws{
		width: 150px;
	}
	.wm{
		width: 280px;
	}
	.wl{
		width: 280px;
	}


}

/*submitボタンの設定
---------------------------------------------------------------------------*/
input[type="submit"],
input[type="button"],
input[type="reset"] {
	padding: 10px 20px;	/*ボタン内の余白*/
	margin-bottom: 20px;
	border: none;
	border-radius: 30px;	/*角丸のサイズ*/
	background: linear-gradient(#e497ab, #da6085);	/*グラデーション*/
	font-size: 12px;	/*文字サイズ*/
	border: 1px solid #af0049;
	font-weight:bold;
}
/*マウスオン時の設定*/
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover{
	background: linear-gradient(#aa0025, #800011);	/*背景色*/
	border: 1px solid #800006;
	color:#fff;
}


/*テーブル2
---------------------------------------------------------------------------*/
.ta2 {
	width: 100%;
	margin: 0 auto 20px;
}
.ta2, .ta2 td, .ta2 th{
	
	border: 1px solid #CCC;	/*テーブルの枠線の幅、線種、色*/
	padding: 10px 15px;	/*ボックス内の余白*/
	word-break: break-all;
}
/*テーブル１行目に入った見出し部分*/
.ta2 th.tamidashi{
	width: auto;
	text-align: left;
	color: #FFF;	/*文字色*/
	background: #333;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background: linear-gradient(#4b4b4b, #333);	/*グラデーション*/
}
/*テーブル内の左側の見出し部分*/
.ta2 th{
	width: 30%;
	text-align: left;
	background: #e2e2e3;	/*背景色*/
}
/*左側ボックスに画像を入れた場合の設定*/
.ta2 th img {
	width: 100%;
}

@media (max-width: 768px) {
    .ta2 th, .ta2 td {
        display: block;
        width: 100%;
        box-sizing: border-box;
		border:0px;	/*テーブルの枠線の幅、線種、色*/
    }


    .ta2 th {
        text-align: left;
    }


	.ws,.wm,.wl{
		padding: 0.5em;          /* 内側の余白量 */
		height: 18px;           /* 高さ */
		font-size: 16px;          /* 文字サイズ */
	}
	.ws{
		width: 150px;
	}
	.wm{
		width: 280px;
	}
	.wl{
		width: 350px;
	}


}

/*submitボタンの設定
---------------------------------------------------------------------------*/
input[type="submit"],
input[type="button"],
input[type="reset"] {
	padding: 10px 20px;	/*ボタン内の余白*/
	margin-bottom: 20px;
	border: none;
	border-radius: 30px;	/*角丸のサイズ*/
	background: linear-gradient(#e497ab, #da6085);	/*グラデーション*/
	font-size: 12px;	/*文字サイズ*/
	border: 1px solid #af0049;
	font-weight:bold;
}
/*マウスオン時の設定*/
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover{
	background: linear-gradient(#aa0025, #800011);	/*背景色*/
	border: 1px solid #800006;
	color:#fff;
}