@charset "UTF-8";
/* 必要要素の初期設定 　　　200414.css　表示ページ用のCSS　*/
html {
	font-size: 62.5%;
	text-align:left;
	/* 62.5%を指定すると「1.0 rem = 10px」 */
}
.HTML5{
	margin : 0 ;
	width : 100%;/*autoから変更、枠いっぱいになることを期待して変更*/
	text_aligin : center;
}
#main_name{
	font-size: 2rem;
}
/* ここからボックスの設定 */
.box1 {	/* 家紋ロゴとネーム住所などを横並びにするための2つを包むdiv */
	padding : 10px 0px 10px 0px ;		/*内側の余白　上　右　下　左*/
	-moz-box-sizing : border-box;		/*firefoxのための記述*/
	-webkit-box-sizing : border-box;	/*iPhoneなどSafari系統のための記述*/
	box-sizing : border-box;			/*paddingを設定するとはみ出すので、全部ひっくるめた範囲で*/
	/*width : auto;	 100%にしていたら微妙に横にはみ出していたのでautoに */
	background-color: #000000;/*#fee*/
	text-align:left;
	border-color: #faa;
	color: #fff;
}
.box1A {	/* 家紋に対する */
	-moz-box-sizing : border-box;		/*firefoxのための記述*/
	-webkit-box-sizing : border-box;	/*iPhoneなどSafari系統のための記述*/
	box-sizing : border-box;			/*paddingを設定するとはみ出すので、全部ひっくるめた範囲で*/
	padding :10px 10px 10px 10px ;	/* 内側の余白　上　右　下　左 */
	float :left;
}
.box1B{	/* 家紋の後の住所とネームを包むdiv */
	-moz-box-sizing : border-box;		/*firefoxのための記述*/
	-webkit-box-sizing : border-box;	/*iPhoneなどSafari系統のための記述*/
	box-sizing : border-box;			/*paddingを設定するとはみ出すので、全部ひっくるめた範囲で*/
	padding :10px 10px 10px 10px ;	/* 内側の余白　上　右　下　左 　家紋とネームの距離を離している*/
	float :left;
	color : #ffffff;
}
.box1B:after{	/*  */
	clear :both;
	display:block;
	content:""	;	/*これがないと回り込みを解除できない*/
	background-color : #ffffff;/*ff00ee*/
}
.box1:after{	/*  */
	clear :both;
	display:block;
	content:""		/*これがないと回り込みを解除できない*/
}
.boxB{	/*メインbox2画面と予約box3を内包する */
	padding : 0% ;	
	-moz-box-sizing : border-box;		/*firefoxのための記述*/
	-webkit-box-sizing : border-box;	/*iPhoneなどSafari系統のための記述*/
	box-sizing : border-box;			/*paddingを設定するとはみ出すので、全部ひっくるめた範囲で*/
}
.box2{	/*メイン画面 */
	padding : 1% ;	/*内側の余白　上　右　下　左*/
	-moz-box-sizing : border-box;		/*firefoxのための記述*/
	-webkit-box-sizing : border-box;	/*iPhoneなどSafari系統のための記述*/
	box-sizing : border-box;			/*paddingを設定するとはみ出すので、全部ひっくるめた範囲で*/
	font-size: 1.4rem;	/*  */
	border-color: #e0e03d;
	color: black; /**/
	background-color: #fff;/*#ffe*/
}
.box3{	/* 予約画面 */
	padding : 1% ;	/*内側の余白　上　右　下　左*/
	-moz-box-sizing : border-box;		/*firefoxのための記述*/
	-webkit-box-sizing : border-box;	/*iPhoneなどSafari系統のための記述*/
	box-sizing : border-box;			/*paddingを設定するとはみ出すので、全部ひっくるめた範囲で*/
	border-color: #65c4cf;
	color: black;/* #65c4cf*/
	background-color: #fff;/*#edf2f3*/
}
.box4{	/*新規会員登録画面*/
	/*padding : 10px 10px 10px 10px ;	内側の余白　上　右　下　左*/
	padding : 1% ;	/*内側の余白　上　右　下　左*/
	-moz-box-sizing : border-box;		/*firefoxのための記述*/
	-webkit-box-sizing : border-box;	/*iPhoneなどSafari系統のための記述*/
	box-sizing : border-box;			/*paddingを設定するとはみ出すので、全部ひっくるめた範囲で*/
	border-color: #b236ab;
	background-color : #ffffff;
	color: black;
}
.boxA:after{	/*  */
	clear :both;
	display:block;
	content:""	;	/*これがないと回り込みを解除できない*/
	background-color : #ffffff;/* ff00ee */
}
	.box0{ 	/*（フッター.box00以外の）すべてのdivを包む全体 */
	/* font-size: 2rem;	 */
	/* position: relative;	 */
	/*color :red;*/
	box-sizing : border-box;			/*paddingを設定するとはみ出すので、全部ひっくるめた範囲で*/
}
.box00{ 	/* フッター上  */
	background-color : #ffffff;	/* eeee00 */
	font-size: 2rem;	/*  */
	/* position: relative; */
	color :black;
	box-sizing : border-box;			/*paddingを設定するとはみ出すので、全部ひっくるめた範囲で*/
}
.box000{ 	/* フッター */
	background-color : #ffffff;
	font-size: 2rem;	/*  */
	/* position: absolute; */
	color:black;/*red*/
	box-sizing : border-box;	/*paddingを設定するとはみ出すので、全部ひっくるめた範囲で*/
}
/* ボックスの設定の終了 */
	.price {
		text-align: right;
	}
/* フォーム要素へのアクセス
input{
	width :30%;
	
}*/
.kkk{/**/
		width : 98%;
		background-color:#ffeeff;
	}
/*.kkk > p {
	font-size: 1rem;
}*/
input[type=submit],
input[type=reset],
input[type=text],
input[type=password],
input[type=tel],
input[type=number],
input[type=email],
input[type=select]{
	width :auto;
	padding :2px;
	font-size:1.8rem;	/*Safariで有効*/
}
#jyuusho1{				/*県名のセレクトボックス*/
	width :auto;
	font-size:1.8rem;
}
#jyuusho1 :hover{		/*県名のセレクトボックスにカーソルが乗っかった時　　　無効*/
	border-color:green;
	border-style:solid;
}
#aaa{			/* 効かない */
	background-color:red;
	text-align: center ;
}
#ZZZZ{				/*日付のセレクトボックス*/
	width :auto;
	font-size:1.5rem;
}
#kensakukunn{			/* 日にちのセレクトボックスの　　決定ボタン　　 */
	width :auto;	/* 20px効かない */
	font-size: 2rem;	/*  */
}
#submitA ,#submitC{		/* 「予約を登録する」ボタン「予約内容を表示する」ボタン */
	width :auto;		/* 幅を指定するより、autoの方が、全部表示する(Chrome)*/
	/* hight :20px;		効かない */
	font-size: 2rem;	/*  */
	/* padding 2px		 Safariのエラーコンソールを表示にエラーと出た*/
}
.box1B p{	/* 住所と電話番号 */
	padding :0;
	margin :0;
}
.box1B h1 a{	/* 高橋写真館 */
	font-size: 40px;
	font-size: 4.0rem;
	padding :0;
	margin-bottom :0;
	text-decoration :none;
	color: #ffffff;/* 背景（.box1）を黒にした場合の文字色*/     /*　　ここで色がやっと変わった*/
}

.menu {	/* メニューのナビゲーション */
	margin : 2px;		/*この数字を大きくすると、見た目が、オレンジ色の要素の周りに隙間ができた*/
	/*	background-color : #ffffff ;.menu ul　.menu li a　.menu li a:hover　.menu ul:after　.menu liなどを設定しても横並びのメニューが実現しなかったが、これを設定したら、横並びメニューになった。*/
		color: #ffffff;
}
.menu {	/*  */
	margin : 0;
	padding : 0;
	list-style-type : none;
	color: #ffffff;
}
.menu  li{	/* 効いてない？？？？ */
	width :auto;
}
.menu li a{
	display : block ;
	padding-left : 15px;	 /*リストの左側に余白を作る */
	font-size : 18px ;
/*	text-decoration : none;  アンダーラインを消す*/
	color : #ffffff;	メニューのリストの色　トップへ　会社案内など
		
}
.menu li a:hover{
	opacity :0.8;
	 background-color : #eeeeee;	/* */
}
.box4 h1{		/* 新規会員登録 */
	margin : 0;
	padding : 0;
	/*background-color:red; 範囲を調べるために*/
}
.box4 h2{		/* 及び、会員登録の変更 */
	/* margin : 0 0 15px 0;		上　右　下　左 */
	padding : 0;
	/*background-color:blue; 範囲を調べるために*/
}
label{
	font-size: 1.8rem;	/* 牧野式では、1.4remで14pxにするとあったが、なんか小さく感じたので変更 */
}
legend{
	font-size: 1.6rem;	/* 牧野式では、1.4remで14pxにするとあったが、なんか小さく感じたので変更 */
}
p{
	font-size: 1.4rem;	/* 牧野式では、1.4remで14pxにするとあったが、なんか小さく感じたので変更 */
}
.h1{
	font-size: 4.0rem;
	line-height :4.0rem;
}
.h2{
	font-size: 2.4rem;
	margin-bottom : 0;
	line-height :3.0rem;
}
.h3{
	font-size: 2.0rem;
	margin-bottom : 0;
}
.errorM {		/* なぜか効かない */
	color: black;	/*無効?????*/
	/*text-decoration-style:double ;*/
}

tr{
	width : 98%;
	background-color:#eeeeee;
}
td{
	width : 100% ;
	text_aligin : center;
}
#name{
	width : 50% ;/*会員名の入力欄*/
}
#passward{
	width : 50% ;/*パスワードの入力欄*/
}

/* Media Queries による切り替え */
@media only screen and (min-width: 320px) {/* min-widthにするとレイアウトが変化するdevice-*/			/*　スマホ用　*/
.Timeup {
	width : 43% ;/**/
	height : 50px ;
	display : block;
	padding :1%;
	margin :1%;
	background-color:pink;
	border:solid;
	border-color :red;
	/*opacity : 0;		予約できる時間を現在時間が超えたので透過度を0にして表示しないようにしている*/
	display:none;		/*これにすると、要素自体がなくなる。*/
	border-radius:10px ;
	float :left;		/*float :leftとdisplay : block;を併用すると、2列にできる*/
}
.Timeup label{		/*時間経過後*/
	padding : 0.5em 0.5em 0.5em 0.5em;/*タッチする領域を広げる　上　右　下　左*/
	background-color : #efefef ;/*タッチする領域が判り易いように背景色を付ける*/
	border-radius : 10px ;
	border:solid;
	border-color :red;
	display : inline-block ;
	display:none;		/*これにすると、要素自体がなくなる。*/

	/*vertical-align :70%;反応せず*/
}
.error{				/**/
	width : 43% ;
	height : 50px ;
	display : block;/**/
	padding :1%;
	margin :1%;
	background-color:pink;
	border:solid;
	border-color :red;
	/*opacity : 0.5;*/
	border-radius:10px ;
	float :left;		/*float :leftとdisplay : block;を併用すると、2列にできる*/
}
.error label{			/**/
	padding : 0.5em 0.7em 0.5em 0.7em;/*タッチする領域を広げる*/
	background-color : #efefef ;/*タッチする領域が判り易いように背景色を付ける*/
	border-radius : 10px ;
	border:solid;
	border-color :red;
	display : inline-block ;
	/*vertical-align :70%;反応せず*/
}
.lightblue {		/*通常 　　各日の時間ごとのリスト*/
	width : 42% ;	/*ここが変更点　狭くしないと2列にならない　auto*/
	height : auto ;	/*50px*/
	display : block;/*display : block;にすると、表のように2列にならない1列になる*/
	padding :1%;	/*枠線の内側の余白　上　右　下　左*/ 
	margin :1%;		/*枠線の外側の余白　上　右　下　左*/ 
	background-color:lightblue;
	border-radius:10px ;
	border:solid;
	border-color :blue;
	float :left;	/*float :leftとdisplay : block;を併用すると、2列にできる*/
}
.lightblue label{		/*通常のラベル*/
	padding : 0.5em 0em 0.5em 0em;/*タッチする領域を広げる　上　右　下　左*/
	background-color : #efefef ;/*タッチする領域が判り易いように背景色を付ける*/
	border-radius : 10px ;
	border:solid;
	border-color :blue;
	display : inline-block ;
	/*vertical-align :70%;反応せず*/
}
/**/.lightblue:after{
	display : block;
	clear : both;/**/
	/*content:""		これがないと回り込みを解除できない*/
}

.midasi{
	text-align:center;
}
p.yasumi{
	text-align:center;
	border : 1px ;
	display : block;
	border-color: red;
	background-color:#ffa7a7;
	border-radius:8px ;
	box-shadow: 0 0 3px #ffffff ;
}
.doyou{	
	clear : both;
	border : 2px ;
	display : block;
	border-color: red;
	background-color:#a8a8ff; /**/
	border-radius:8px ;
	box-shadow: 0 0 3px #ffffff ;
}
.hutuu{
	clear : both;
	background-color:#ffa8ff; /**/
	display : block;
}
}
@media only screen and (min-width: 415px) {/* min-widthにするとレイアウトが変化するdevice- */
.Timeup {
	width : 44% ;
	height : 50px ;
	display : block;/**/
	padding :1%;
	margin :1%;
	background-color:pink;
	border:solid;
	border-color :red;
	/*opacity : 0;		予約できる時間を現在時間が超えたので透過度を0にして表示しないようにしている*/
	display:none;		/*これにすると、要素自体がなくなる。*/
	border-radius:10px ;
	float :left;		/*float :leftとdisplay : block;を併用すると、2列にできる*/
}
.box1A {	/* 家紋に対する */
	-moz-box-sizing : border-box;		/*firefoxのための記述*/
	-webkit-box-sizing : border-box;	/*iPhoneなどSafari系統のための記述*/
	box-sizing : border-box;			/*paddingを設定するとはみ出すので、全部ひっくるめた範囲で*/
	padding :20px 10px 0px 20px ;	/* 内側の余白　上　右　下　左 */
	float :left;
}
.box1B{	/* ロゴの後の住所とネームを包むdiv */
	-moz-box-sizing : border-box;		/*firefoxのための記述*/
	-webkit-box-sizing : border-box;	/*iPhoneなどSafari系統のための記述*/
	box-sizing : border-box;			/*paddingを設定するとはみ出すので、全部ひっくるめた範囲で*/
	padding :10px 30px 10px 20px ;	/* 内側の余白　上　右　下　左 　家紋とネームの距離を離している*/
	float :left;
}
.Timeup label{
	padding : 0.5em 0.7em 0.5em 0.6em;/*タッチする領域を広げる  内側の余白　上　右　下　左 　*/
	background-color : #efefef ;/*タッチする領域が判り易いように背景色を付ける*/
	border-radius : 10px ;
	border:solid;
	border-color :red;
	display : inline-block ;
	display:none;		/*これにすると、要素自体がなくなる。*/
	
	/*vertical-align :70%;反応せず*/
}
.error{
	width : 44% ;
	height : 50px ;
	display : block;/**/
	padding :1%;
	margin :1%;
	background-color:pink;
	border:solid;
	border-color :red;
	/*opacity : 0.5;*/
	border-radius:10px ;
	float :left;		/*float :leftとdisplay : block;を併用すると、2列にできる*/
}
.error label{
	padding : 0.5em 0.7em 0.5em 0.6em;/*タッチする領域を広げる  内側の余白　上　右　下　左 　*/
	background-color : #efefef ;/*タッチする領域が判り易いように背景色を付ける*/
	border-radius : 10px ;
	border:solid;
	border-color :red;
	display : inline-block ;
	/*vertical-align :70%;反応せず*/
}
.lightblue {
	width : 44% ;
	height : 50px ;
	display : block;/**/ /*display : block;にすると、表のように2列にならない1列になる*/
	padding :1%;/*枠線の内側の余白*/ 
	margin :1%;/*枠線の外側の余白*/ 
	background-color:lightblue;
	border-radius:10px ;
	border:solid;
	border-color :blue;
	float :left;	/*float :leftとdisplay : block;を併用すると、2列にできる*/
}
.lightblue label{
	/*margin-right : 0.2em ;*/
	padding : 0.5em 0.7em 0.5em 0.6em;/*タッチする領域を広げる  内側の余白　上　右　下　左 　*/
	background-color : #efefef ;/*タッチする領域が判り易いように背景色を付ける*/
	border-radius : 10px ;
	border:solid;
	border-color :blue;
	display : inline-block ;
	/*vertical-align :70%;反応せず*/
}
/**/.lightblue:after{
	display : block;
	clear : both;/**/
}
.midasi{
	text-align:center;
}
p.yasumi{
	text-align:center;
	border : 1px ;
	display : block;
	border-color: red;
	background-color:#ffa7a7;
	border-radius:8px ;
	box-shadow: 0 0 3px #ffffff ;
}
.doyou{	
	clear : both;
	border : 2px ;
	display : block;
	border-color: red;
	background-color:#a8a8ff; /**/
	border-radius:8px ;
	box-shadow: 0 0 3px #ffffff ;
}
.hutuu{
	clear : both;
	background-color:#ffa8ff; /**/
	display : block;
}
		.box1A {	/* 家紋に対する */		
			padding :10px 5px 10px 10px ;	/* 内側の余白　上　右　下　左 */
		}
		.box1B{	/* 家紋の後の住所とネームを包むdiv */
			padding :10px 10px 10px 5px ;	/* 内側の余白　上　右　下　左 */
		}
}
@media only screen and (min-width: 600px) {/* min-widthにするとレイアウトが変化するdevice- */
	/*.menu ul:after　.menu li　を使って、横並びメニューにしている。*/
.menu ul:after{
	clear :both;
	display:block;
	content:""		/*これがないと回り込みを解除できない*/
}
.menu li{
	float :left;
	width : auto		/*HTML5＆CSS3デザインブックには、*/
}
}
/* 以下は、/Applications/XAMPP/xamppfiles/htdocs/HTML5&CSS3sample/1/grid-guide-middle.cssより移植 */
/* BOX Aを枠で囲まない設定 */
.boxA	{border: none;
	background: none;
	line-height: normal;
	text-align: left}
/* ボックスの高さ */

@media (min-width: 600px) {
/*	line-height　　　1行の高さなので、無効にした。

*/
}
@media (min-width: 768px) {
}
#table_Oyasumi{
	width:100%
}
ul	{	list-style: none;}
td{
		text-align :center;
	}