* {
    box-sizing: border-box;
}

body {
    padding:0px;
    font-family: 'Meiryo','Yu Gothic','Hiragino kaku Gothic Pro';						 
    padding-top: 0px;	
	background-image:url("../img/back.jpg"); /*背景の設定*/
	background-repeat: repeat; /*背景の繰り返し*/
	background-attachment: fixed; /*背景の固定*/
	/* 背景をグラデーションにする場合はコチラを使用
    background: -webkit-linear-gradient(top right,#1051a8,#97c2fc);
    background: -moz-linear-gradient(top right,#1051a8,#97c2fc);
    background: -o-linear-gradient(top right,#1051a8,#97c2fc);
    background: -ms-linear-gradient(top right,#1051a8,#97c2fc);
	*/
}

.container {
    max-width: 960px; /*containerの最大幅*/
    margin:0 auto; /*containerの中央揃え*/
    color: #ffffff; /*文字の色*/
    padding: 10px 10px ; /*内側の余白*/
	background-color: rgba(0,45,127,0.5); /*背景色の設定*/
	/* 背景をグラデーションにする場合はコチラを使用（但し半透明は使えません） 
	background: -webkit-linear-gradient(top right,#1051a8,#97c2fc);
    background: -moz-linear-gradient(top right,#1051a8,#97c2fc);
    background: -o-linear-gradient(top right,#1051a8,#97c2fc);
    background: -ms-linear-gradient(top right,#1051a8,#97c2fc);
	*/
}

header img {
    width: 50%;
    max-width: 300px;
}

h1 {
    color: #ffffff;
    font-size: 150%;
    font-weight: bolder;
    display: block;
    padding: 5px 40px;
    margin-right: 20px;
    margin-left:20px;
    text-align: center;
    text-shadow: 2px 2px 1px rgba(0,0,0,1);
    box-shadow: 3px 3px 7px rgba(0,0,0,0.5);
    background: -webkit-linear-gradient(top right,#F7CC9D,#78552F);
    background: -moz-linear-gradient(top right,#F7CC9D,#78552F);
    background: -o-linear-gradient(top right,#F7CC9D,#78552F);
    background: -ms-linear-gradient(top right,#F7CC9D,#78552F);
}

@media(max-width:667px){
    h1 {
        font-size: 4vw;
        padding: 5px 20px;
    }
}

#photo img {
    display: inline-block;
    max-width: 380px;
    width: 95%;
	margin:0 5px;
    box-shadow: 3px 3px 8px rgba(0,0,0,0.5);
}

#poster img {
    max-width: 960px;
    width: 100%;
    
    display: block;
}

#day {
    clear: both;
    font-weight: bolder;
    padding: 20px;
	margin-left: 10px;
	margin-right: 10px;
    font-size: 110%;
    background-color: rgba(255,255,255,0.2);
    background: -webkit-linear-gradient(top right,rgba(0,0,0,0.3),rgba(0,0,0,0.8));
    background: -moz-linear-gradient(top right,rgba(0,0,0,0.3),rgba(0,0,0,0.7));
    background: -o-linear-gradient(top right,rgba(0,0,0,0.3),rgba(0,0,0,0.7));
    background: -ms-linear-gradient(top right,rgba(0,0,0,0.3),rgba(0,0,0,0.7));
    box-shadow: 3px 3px 8px rgba(50,50,50,0.7);
    max-width: 960px;
}

@media(max-width:667px){
    #day {
        font-size: 4vw;
        padding: 5px 20px;
    }
}

h2 {
    margin-top: 0;
    margin-bottom: 0px;
    color: #ffffff;
    text-shadow: 2px 2px 2px #000000;
    font-size: 125%;
    font-weight: bolder;
    padding: 5px 20px;
    display: inline-block;
    background: -webkit-linear-gradient(right,#333333,#2C2EA8);
    background: -moz-linear-gradient(right,#333333,#2C2EA8);
    background: -o-linear-gradient(right,#333333,#2C2EA8);
    background: -ms-linear-gradient(right,#333333,#2C2EA8);
}

.ouboform {
	padding: 0 5px;
	background: -webkit-linear-gradient(top right,rgba(0,0,0,0.3),rgba(0,0,0,0.7));
   	background: -moz-linear-gradient(top right,rgba(0,0,0,0.3),rgba(0,0,0,0.7));
   	background: -o-linear-gradient(top right,rgba(0,0,0,0.3),rgba(0,0,0,0.7));
   	background: -ms-linear-gradient(top right,rgba(0,0,0,0.3),rgba(0,0,0,0.7));
}

.oubo {
	margin-top: 20px;
	padding-top:20px;
	font-size: 125%;
	font-weight:bold;
	text-align: center;
}

#line {
	border:2px solid #0000ff;
}

.yellow {
    font-weight: bold;
    color: #FFE6A2;
    word-wrap: break-word;
    font-size: 20px;
}

.red {
    font-weight: bold;
    color: #ffa07a;
    word-wrap: break-word;
    font-size: 23px;
}

.green {
    font-weight: bold;
    color: #00ff7f;
    word-wrap: break-word;
    font-size: 30px;
}

#photo1 img {
    max-width: 350px;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}

#photo1 img {
    margin-right: 30px;
    margin-bottom: 30px;
}

h3 {
    margin-top: 0;
    margin-bottom: 0px;
    color: #ffffff;
    text-shadow: 2px 2px 2px #000000;
    font-size: 125%;
    font-weight: bolder;
    padding: 5px 20px;
    display: inline-block;
    background: -webkit-linear-gradient(right,#333333,#2C2EA8);
    background: -moz-linear-gradient(right,#333333,#2C2EA8);
    background: -o-linear-gradient(right,#333333,#2C2EA8);
    background: -ms-linear-gradient(right,#333333,#2C2EA8);
}

#subscExp {
    color: #000000;
    font-size: 90%;
    background-color: #ffffff;
    max-width: 440px;
    padding: 10px;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
    font-weight: bold;
}

#subscription1,#subscription2 {
    display:inline-block;
    margin: 50px auto;
    text-align: center;
    width: 100%;
}

#subscription1 a {
    border-radius: 15px;
    color: #ffffff;
    text-shadow: 2px 2px 2px #000000;
    font-size: 125%;
    font-weight: bolder;
    padding: 10px 20px;
    display: inline-block;
    border: 5px solid #A99B00;
    background: -webkit-linear-gradient(left,#006E0C,#00F5A0);
    background: -moz-linear-gradient(left,#006E0C,#00F5A0);
    background: -o-linear-gradient(left,#006E0C,#00F5A0);
    background: -ms-linear-gradient(left,#006E0C,#00F5A0);
    text-decoration: none;
    box-shadow: 3px 3px 5px rgba(255,255,255,1);
}

#subscription2 a {
    border-radius: 15px;
    color: #ffffff;
    text-shadow: 2px 2px 2px #000000;
    font-size: 125%;
    font-weight: bolder;
    padding: 10px 20px;
    display: inline-block;
    border: 5px solid #A37FFF;
    background: -webkit-linear-gradient(left,#00006A,#00ABFF);
    background: -moz-linear-gradient(left,#00006A,#00ABFF);
    background: -o-linear-gradient(left,#00006A,#00ABFF);
    background: -ms-linear-gradient(left,#00006A,#00ABFF);
    text-decoration: none;
    box-shadow: 3px 3px 5px rgba(255,255,255,1);
}

#subscription1:hover> a {
    display: inline-block;
    background: -webkit-linear-gradient(left,#FFA745,#FFCDB1);
    background: -moz-linear-gradient(left,#FFA745,#FFCDB1);
    background: -o-linear-gradient(left,#FFA745,#FFCDB1);
    background: -ms-linear-gradient(left,#FFA745,#FFCDB1);
}

#subscription2:hover> a {
    display: inline-block;
    background: -webkit-linear-gradient(left,#FFA745,#FFCDB1);
    background: -moz-linear-gradient(left,#FFA745,#FFCDB1);
    background: -o-linear-gradient(left,#FFA745,#FFCDB1);
    background: -ms-linear-gradient(left,#FFA745,#FFCDB1);
}

#exp img {
    max-width: 960px;
    width: 100%;
    display: block;
}

.attention {
    font-size: 100%;
    font-weight: bold;
    color: #FFE6A2;
}

.attentionR {
    font-size: 100%;
    font-weight: normal;
    color: #ffffff;
}

#until2 {
    font-size: 90%;
    font-weight: bolder;
    color: #ffffff;
    background-color: rgba(150,150,150,0.5);
    display: block;
    padding: 5px 15px;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    max-width: 500px;
    margin: 0 auto;
	margin-top: 50px;
}

#number {
    font-size: 150%;
    font-weight: bolder;
    color:blue;
    background-color:#ffffff;
    display: inline-block;
    padding: 1px 15px;
    text-shadow: 1px 1px 2px #666666;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    margin-top: 20px;
    margin-bottom: 0px;
}

#shipping {
    font-weight: bolder;
    color: red;
}

#list {
    margin-left: 2em;
    list-style:disc;
    font-size: 100%;
}

.subsc_end {
    font-weight: bold;
    color: red;
    font-size: 125%;
    text-indent: -1em;
    padding-left: 1em;
}

h4 {
    margin-bottom: 0;
    color: #ffffff;
    text-shadow: 2px 2px 2px #000000;
    font-size: 125%;
    font-weight: bolder;
    padding: 5px 20px;
    display: inline-block;
    background: -webkit-linear-gradient(left,#666666,#cccccc);
    background: -moz-linear-gradient(left,#666666,#cccccc);
    background: -o-linear-gradient(left,#666666,#cccccc);
    background: -ms-linear-gradient(left,#666666,#cccccc);
    box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
   
}



.text {
    background-color: rgba(150,150,150,0.3);
    max-width: 300px;
    padding: 5px 10px;
    font-weight: bold;
}

.text a:link {
    color: #ffffff;
    font-weight: normal;
}

@media(max-width:667px) {
    #number,#until {
        font-size: 4vw;
    }
    .text,#list li {
        font-size:  90%;
    }
    #subscription a {
    font-size: 120%;
    padding: 10px 10px;
    }
    h4 {
    font-size: 70%;
    }
    .text {
    font-size: 90%;    
    }
    .attention {
        font-size: 100%;
    }
    h2 {
        font-size: 100%;
    }
}

#oubo img {
    max-width: 600px;
    width: 100%;
}

.form {
	padding: 20px 10px;
	background-color: rgba(0,0,0,0.5); /*フォームエリアの色（黒の半透明）*/
	max-width: 800px; /*ファームエリアの幅*/
	margin:0 auto; /*フォームを画面の真ん中に*/
}

dl {
	width:90%;
	margin:0 auto;
}
dt,dd {
	margin:0;
	padding:0;
}
dd {
	padding-bottom:1em;
	padding-left:0.5em;
	border-bottom:1px dotted #fff;
	margin-top:0.5em;
	margin-bottom:1em;
}
dd input {
	width: 1em;
}
#radio {
	width: 5em;
}
#buttons {
	text-align:center; /*ボタンを縦に並べる準備*/
	max-width: 15em; /*ボタンを縦に並べる準備*/
	margin: 0 auto; /*ボタンの中央ぞろえ*/
	font-size: 90%; /*ボタンのフォントサイズ*/
	font-weight: bold; /*ボタンのフォントスタイル*/
}
#buttons li {
	display:inline-block;
	margin-top: 1em; /*ボタンの間隔*/
	margin-bottom: 1em; /*ボタンの間隔*/
	list-style: none;
}

#buttons li button {
	color: #fff;
	font-size: 115%;
	font-weight: bold;
	text-shadow: 1px 1px 1px rgba(0,0,0,1);
	padding: 10px 20px; /*ボタン内表示文字の余白*/
	border: solid 3px #db0a0a;
}

#submit {
	font-size: 150%;
	font-weight: bold;
	color: #fff;
	margin-left: 10px;
	margin-bottom: 50px;
	width: 10em;
	height: 3em;
	background: -webkit-linear-gradient(left,#006E0C,#00F5A0);
    background: -moz-linear-gradient(left,#006E0C,#00F5A0);
    background: -o-linear-gradient(left,#006E0C,#00F5A0);
    background: -ms-linear-gradient(left,#006E0C,#00F5A0);
}

#reset {
	font-size: 120%;
	font-weight: bold;
	color: #fff;
	margin-left: 10px;
	margin-bottom: 30px;
	width: 10em;
	height: 3em;
	background: -webkit-linear-gradient(left,#ec7122,#f2ab7d);
    background: -moz-linear-gradient(left,#ec7122,#f2ab7d);
    background: -o-linear-gradient(left,#ec7122,#f2ab7d);
    background: -ms-linear-gradient(left,#ec7122,#f2ab7d);
}

label {font-size: 110%;}
#name {width:12em;height:2em;margin-bottom: 30px;} /*お名前セルの大きさ*/
#mail,#addressLast,#event {width:20em;height:2em;margin-bottom: 30px;} /*メール、連絡先セルの大きさ*/
#address {width:48em;height:2em;margin-bottom: 10px;} /*住所セルの大きさ*/
#old {height:2em;margin-bottom: 30px;} /*年齢、枚数、車いすセルの大きさ*/

#wheelchair{margin-bottom: 30px;}
#request {width:48em;height:2em;margin-bottom: 100px;} /**/

@media(max-width:667px) {
	#request {width:100%;}
	#address {width:100%;}
}


textarea {width:15em;height:3em;} /*備考セルの大きさ*/