@charset "utf-8";

/* ========================================================================================

Name: common.css

Description: Common Settings for Responsive Web Design

Update: 2016.03.08

======================================================================================== */

/* 全体共通
-------------------------------------------------- */
hrml {
	height:100%;
}

body {
	/*font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Times New Roman','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	font-size: 81%;
	line-height:1.85em;
	color: #333333;
	text-align:center;
	height:100%;
	letter-spacing:0.02em;
	position:relative;
}

a {
	color:#333333;
	overflow: hidden;
	outline: none;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

a:hover img {
	opacity:0.8;
}

* img {
	vertical-align:top;
}

.clearfix:after {
	content: "."; display: block; clear: both; height: 0; line-height: 0; font-size: 0; visibility: hidden;
}

.clearfix {
	_height: 1px; min-height: 1px;
	*zoom: 1;
}

* html .clearfix {
	height: 1%;
	display: inline-block;
}

.rollover:hover{
	opacity:0.7;
	filter: alpha(opacity=70);
}

/* IE8以下でレイアウトが大崩れしないように */
header,
footer,
main,
article,
section,
aside {
	display:block;
}


br.pc_only {
	display:inherit;
}

br.sp_only {
	display:none;
}



/* ヘッダーエリア
-------------------------------------------------- */
header {
	width:100%;
	max-width:820px;
	margin:0 auto;
	height:106px;
	text-align:left;
	position:relative;
}

header .logo {
	position:absolute;
	top:12px;
	left:0;
	width:115px;
	height:65px;
}

header h1 {
	position:absolute;
	top:40px;
	left:135px;
	width:250px;
	font-size:92%;
	line-height:1.5em;
}



/* フッターエリア
-------------------------------------------------- */
footer {
	clear:both;
	width:auto;
}

footer .copyright {
	font-size:85%;
}


/* コンテンツエリア
-------------------------------------------------- */
main {
	width:auto;
	border:1px #CCCCCC;
	border-top-style:solid;
	padding:15px 0 0;
}

main #main_inner {
	width:auto;
	max-width:820px;
	margin:0 auto 80px;
	text-align:left;
	padding:0;
}

.tbl_input {
	width:auto;
	background-color:#fff9f0;
	padding:30px 10px 30px 20px;
	margin-bottom:40px;
}

.tbl_input table {
	width:100%;
}

.tbl_input th,
.tbl_input td {
	padding:8px 10px 10px 10px;
}

.tbl_input th {
	width:24%;
}

.tbl_input .example {
	display:inline-block;
}

.tbl_input td .wd50 {
	width:50%;
}

.tbl_input td .comment {
	width:100%;
	font-size:115%;
}

.addr {
	width:100%;
}

.addr dt {
	width:8em;
	clear:both;
	float:left;
	padding:0 0 5px 0;
}

.addr dd {
	padding:0 0 5px 9em;
}

.need {
	font-size:85%;
	color:#CC0000;
	display:inline-block;
}

.attention {
	color:#CC0000;
}

#button {
	text-align:center;
}

#button a {
	display:inline-block;
	background:url(../images/common/icn_link01.gif) no-repeat 3em center;
	border:1px #CCCCCC solid;
	padding:10px 3em;
	text-indent:1em;
	font-weight:bold;
	font-size:115%;
	margin:0 8px;
}

.sysmsg {
	color:#C00;
	margin:10px 0 20px 0;
	font-weight:bold;
}

.comp_msg {
	margin-top:20px;
	padding:50px 20px;
	background-color:#fff5e4;
	border-radius: 8px;		/* CSS3草案 */
	-webkit-border-radius: 8px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 8px;	/* Firefox用 */
}

.comp_msg p {
	text-align:center;
	margin-bottom:20px;
}

/* ========================================================================================

 PC and Tablet
 
======================================================================================== */

/* ページ幅988px以上の場合
-------------------------------------------------- */
@media screen and (min-width: 1161px){


}

/* ページ幅768px to 987pxの場合
-------------------------------------------------- */
@media screen and (max-width: 980px){

body {
	padding:0 15px;
}

}

/* ========================================================================================

 SmartPhone
 
======================================================================================== */
@media screen and (max-width: 767px){

hrml {
	height:100%;
}

body {
	-webkit-text-size-adjust:100%;
	font-size:12px;
	line-height:1.42em;
	height:100%;
	position:relative;
	padding:0;
}

br.pc_only {
	display:none;
}

br.sp_only {
	display:inherit;
}

/* ヘッダーエリア
-------------------------------------------------- */
header {
	width:auto;
	margin:0;
	height:61px;
	text-align:left;
	position:relative;
}

header .logo {
	position:absolute;
	top:10px;
	left:12px;
	width:70px;
	height:40px;
}

header .logo img {
	width:100%;
}

header h1 {
	position:absolute;
	top:13px;
	left:95px;
	width:150px;
	font-size:83%;
	line-height:1.2em;
}



/* フッターエリア
-------------------------------------------------- */
footer {
	clear:both;
	width:auto;
}


footer #footer_inner02 .copyright {
	clear:both;
	position:inherit;
	top:auto;
	left:auto;
	text-align:center;
	padding:10px 0;
}


/* コンテンツエリア
-------------------------------------------------- */
main {
	width:auto;
	max-width:none;
	margin:0 auto 20px;
}

main #main_inner {
	width:auto;
	max-width:none;
	margin:0 15px 20px;
	text-align:left;
	padding:0 0 0 0;
}

.tbl_input {
	width:auto;
	background-color:#fff9f0;
	padding:10px 10px 30px 0;
	margin-bottom:40px;
}

.tbl_input table {
	width:100%;
}

.tbl_input th,
.tbl_input td {
	padding:8px 0 5px 10px;
}

.tbl_input th {
	width:28%;
}

.tbl_input .example {
	display:block;
}

.tbl_input td .wd50 {
	width:100%;
}

.tbl_input td .comment {
	width:100%;
	font-size:115%;
}

.addr {
	width:100%;
}

.addr dt {
	width:100%;
	clear:both;
	float:none;
	padding:0 0 5px 0;
}

.addr dd {
	padding:0 0 5px 0;
}

.need {
	font-size:85%;
	color:#CC0000;
	display:block;
}

.addr .need {
	display:inline;
}

.attention {
	color:#CC0000;
}

#button {
	text-align:center;
}

#button a {
	display:inline-block;
	background:url(../images/common/icn_link01.gif) no-repeat 3em center;
	border:1px #CCCCCC solid;
	padding:10px 3em;
	text-indent:1em;
	font-weight:bold;
	font-size:115%;
	margin:0px;
	width:10.5em;
}


.sysmsg {
	color:#C00;
	margin:10px 0 10px 0;
	font-weight:bold;
}

.comp_msg {
	margin-top:0px;
	padding:20px;
	background-color:#fff5e4;
	border-radius: 8px;		/* CSS3草案 */
	-webkit-border-radius: 8px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 8px;	/* Firefox用 */
}

.comp_msg p {
	text-align:left;
	margin-bottom:20px;
}




}