@import url(sanitize.css);
@import url(menu.css);


*{
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-webkit-text-size-adjust: 100%;
	text-decoration: none;
	text-shadow: none;
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

html{
	height: 100%;
}

html,body{
	min-height: 100%;
}

body{
	font-family:  "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	word-wrap:break-word;
	opacity: 0;
	color: #000;
	font-size: 14px;
	min-width: 980px;
}
@media screen and (max-width: 640px){
	body{
		min-width: 100%;
	}
}

/* element
---------------------*/
a{
	color: #000;
	-webkit-transition: all .3s;
		 -moz-transition: all .3s;
			-ms-transition: all .3s;
			 -o-transition: all .3s;
					transition: all .3s;
}
a:active,a:hover,
a:visited{
	color: #000;
}
a.on{
	opacity: 0.7;
}
ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

p{
	margin: 0 0 20px;
}
.page #main p{
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 170%;
	letter-spacing: 1px;
}
figure{
	margin: 0;
}

table th,table td{
	vertical-align: top;
	font-size: 16px;
	text-align: left;
}
table th{
	/*width: 120px;*/
}
table td{
	padding: 3px 0 20px 20px;
}
table th h3{
	margin: 0;
}
table th img{
}

@media screen and (max-width: 640px){
	table tr{
	}
	table th{
		display: list-item;
		margin-bottom: 20px;
	}
	table td{
		display: list-item;
		padding: 5px 10px 20px 10px;
	}
}

/* Util
---------------------*/
.serif{
	font-family:  "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
.clear{}
.float{overflow: hidden;}
.float .left{float: left;}
.float .right{float: right;}
.float .col2{width: 50%; padding: 0 10px;}
.float .span6{width: 60%; padding: 0 10px;}
.float .span4{width: 40%; padding: 0 10px;}
.indent{text-indent: 1em !important;}
.mb0{margin-bottom: 0px !important;}
.mb20{margin-bottom: 20px !important;}
.mb30{margin-bottom: 30px !important;}
.mb40{margin-bottom: 40px !important;}
.mb50{margin-bottom: 50px !important;}
.mb60{margin-bottom: 60px !important;}
.mt10{margin-top: 10px !important;}
.mt20{margin-top: 20px !important;}
.mt30{margin-top: 30px !important;}
.mt40{margin-top: 40px !important;}
.mt50{margin-top: 50px !important;}
.bold{font-weight: bold !important;}
.w-auto{width: auto !important;}
.tac{text-align: center;}
.tal{text-align: left !important;}
.note{font-size: 14px !important;}

@media screen and (max-width: 640px){

	.float{overflow: hidden;}
	.float .left{float: none;}
	.float .right{float: none;}
	.float .col2{width: 100%; padding: 0 10px;}
	.float .span6{width: 100%; padding: 0 10px;}
	.float .span4{width: 100%; padding: 0 10px;}
	.w100{width: 100%;}
}


/* Base element style
---------------------*/
ul{
	list-style: none;
}

@media screen and (max-width: 640px){
}


/* Base layout style
---------------------*/
#wrap{
	width: 100%;
	/*min-width: 1024px;*/
}

.box{
	width: 980px;
	margin: 0 auto;
	overflow: hidden;
}

.w1024{
	width: 1024px;
}

@media screen and (max-width: 640px){
	#wrap{
		width: 100%;
		min-width: 100%;
	}
	.box{
		width: 100%;
		padding: 0 10px;
	}
}


/*  Footer
---------------------*/
#footer{
}


/*  フォーム
---------------------*/

form {
  /* Just to center the form on the page */
  margin: 0 auto;
  width: 400px;

  /* To see the limits of the form */
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

div + div {
  margin-top: 1em;
}

label {
  /* To make sure that all label have the same size and are properly align */
  display: inline-block;
  width: 90px;
  text-align: right;
}

input, textarea {
  /* To make sure that all text field have the same font settings
     By default, textarea are set with a monospace font */
  font: 1em sans-serif;

  /* To give the same size to all text field */
  width: 300px;

  -moz-box-sizing: border-box;
       box-sizing: border-box;

  /* To harmonize the look & feel of text field border */
  border: 1px solid #999;
}

input:focus, textarea:focus {
  /* To give a little highligh on active elements */
  border-color: #000;
}

textarea {
  /* To properly align multiline text field with their label */
  vertical-align: top;

  /* To give enough room to type some text */
  height: 5em;

  /* To allow users to resize any textarea vertically
     It works only on Chrome, Firefox and Safari */
  resize: vertical;
}

.button {
  /* To position the buttons to the same position of the text fields */
  padding-left: 90px; /* same size as the label elements */
}

button {
  /* This extra magin represent the same space as the space between
     the labels and their text fields */
  margin-left: .5em;
}