@charset "UTF-8";

body,div,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,address,blockquote,form,table,th,td{margin:0px;padding:0px;}table{width:100%;border-collapse:collapse;border-spacing:0;}th,td{padding:0;vertical-align:top;}img{vertical-align:top;border:none;}del{text-decoration:line-through;}em{font-style:normal;}sup{margin:0 1px;padding:0;vertical-align:text-top;font-size:11px;line-height:1em;}sub{margin:0 1px;padding:0;vertical-align:baseline;font-size:11px;line-height:1em;}


/* -------------------------------------------------------------------
	UI SETTING : basic
------------------------------------------------------------------- */
html { font-size: 62.5%; }
body { color:#333333; font-family:"メイリオ","ＭＳ Ｐゴシック",Osaka,sans-serif; text-align:center; background-color:#ffffff; }
a:link    { color:#0066FF; }
a:visited { color:#0066FF; }
a:active  { color:#0066FF; }
a:hover   { color:#FF9900; }
#head,#side,#foot { font-size:13px;line-height:1.5em; }
#head ul,#side ul,#foot ul,#head ol,#side ol,#foot ol,#head li,#side li,#foot li { margin:0;padding:0;list-style:none; }
#wrap{}

/* clearfix */
.clearfix:after { content:url(clearfix.gif);display:block;clear:both;height:0;visibility:hidden; }
.clearfix { min-height:1px; }
* html .clearfix { height:1px;/*\*//*/ height:auto; overflow:hidden; /**/ }


/* -------------------------------------------------------------------
	UI SETTING : head
------------------------------------------------------------------- */

#outer-head { border-bottom:8px solid #0f9c48; background:url(../img/logo-bg.jpg) left top repeat-x; }
#head {	width:620px; max-width:100%; margin:0px auto; text-align:left;}


/* -------------------------------------------------------------------
	UI SETTING : main image
------------------------------------------------------------------- */

#outer-mainimage { clear:both; }
#mainimage { width:860px; margin:0 auto; padding:10px 0 0 0; }


/* -------------------------------------------------------------------
	UI SETTING : main
------------------------------------------------------------------- */

#outer-main{ clear:both;width:600px;max-width:100%;margin:0 auto; padding:0 10px; box-sizing:border-box;}
#main {width:620px; max-width:100%; margin:0 auto; padding:0 0 30px 0;}


/* -------------------------------------------------------------------
	UI SETTING : cont
------------------------------------------------------------------- */

#cont { width:620px; max-width:100%; margin:1.5em 0 0 0; text-align:left;}


/* -------------------------------------------------------------------
	UI SETTING : foot
------------------------------------------------------------------- */

#outer-foot { border-top:1px solid #d4d4d4; background:url(../img/foot-bg.gif) left top repeat-x; background-size:contain; }
#foot {	width:620px; max-width:100%; margin:0 auto; padding:0 0 10px 0; text-align:left;}
	#foot p#copyright { text-align:center; font-size:12px; line-height:1.5em; color:#999999;}


/* -------------------------------------------------------------------
	CONT : general
------------------------------------------------------------------- */

#cont p,#cont ul,#cont ol,#cont dl { margin-top:1em; }
#cont p,#cont li,#cont dt,#cont dd,#cont th,#cont td { font-size:13px;line-height:2.5rem; }
#cont p,#cont li,#cont dt,#cont dd,#cont th { text-align:justify; }
#cont ul,#cont ol { padding-left:24px; }
#cont li { margin-top:4px; }
#cont dl dt{ margin-top:1em;}
#cont dl dd{ margin-top:0.2em;}
#cont h1{
	padding:5px 10px;
	border-bottom:1px solid #cccccc;
	border-right:1px solid #cccccc;
	font-size:14px;line-height:1.2em;
	background-color:#0f9c48;
	color:#fff }
#cont h2{
	margin-top:2em; padding:0 0 0px 7px;
	background-color:#ffffff;
	border-left:4px solid #cccccc;
	border-bottom:1px solid #cccccc;
	font-size:16px;line-height:1.5em;font-weight:normal;color:#393939; }
#cont h3{
	margin-top:1.5em;
	font-size:15px;line-height:1.5em; color:#5f5f5f; }
#cont h4{
	margin-top:1.3em;
	font-size:14px;line-height:1.5em;color:#5f5f5f; }


/* -------------------------------------------------------------------
	CONT : element
------------------------------------------------------------------- */

/* catch copy */
#cont .catch{font-size:16px;line-height:1.5em;color:#333333;font-weight:bold; }

/* caption */
#cont .caption{margin-top:6px;text-align:center;font-size:11px;line-height:1.3em; }

/* table */
#cont .table-a,#cont .table-a p,#cont .table-a li { line-height:1.4em; }
#cont .table-a {
	margin-top:1em;
	empty-cells:show;
	border-top:solid 1px #e5e5e5;
	border-left:solid 1px #e5e5e5;}
	#cont .table-a th,
	#cont .table-a td {
		padding:8px 10px;
		border-right:1px solid #e5e5e5;
		border-bottom:1px solid #e5e5e5;}
	#cont .table-a th { background-color:#f9f9f9;font-weight:normal;width:25%;white-space:nowrap; }

#cont .sp00 { margin-top:0; }
#cont .sp05 { margin-top:0.5em; }
#cont .sp10 { margin-top:1em; }
#cont .sp15 { margin-top:1.5em; }
#cont .sp20 { margin-top:2em; }

#cont .a-right { text-align:right; }
#cont .a-center{ text-align:center; }

#cont td.w-img  { width:1%;}
#cont td.w-img-l{ width:1%;padding-right:20px; }
#cont td.w-img-r{ width:1%;padding-left:20px; }

#cont ul.clear-ulmark,
#cont ol.clear-ulmark { margin-left:0;padding-left:0;list-style:none; }

#cont .kome { padding-left:1em; text-indent:-1em; }

#cont noscript p{color:#ff3300; font-weight:bold; font-size:14px; text-align:center;}

/* icon class */
#cont .icon-blank { display:inline-block;padding-left:17px;background:url(../img/icon-blank.gif) no-repeat 0px 2px; }

/* input */
#cont input{ display:inline-block; margin:0 3px 0 0; width: auto; vertical-align:-2px;}
#cont input[type="text"],
#cont input[type="number"],
#cont input:not([type]){ border:1px solid #ccc; }
#cont input.long{ width:98%; }
#cont input.short{ width:250px; }
#cont input.veryshort{ width:120px; }
#cont input.veryveryshort{ width:80px; }
#cont input[type=number]{
	width:60px;
}

#cont input.active  { ime-mode:active; }
#cont input.disable { ime-mode:disabled; }

#cont textarea{ width:99%; height:5em; border:1px solid #ccc; font-size:100%; }
#cont textarea[rows="24"]{ height:30em; }

#cont label{
	display:inline-block;
	width: auto; padding:0 0 0 0;
	white-space:nowrap;}
#cont label input{ margin-right:5px; vertical-align:-2px;}

/* box */
#cont div.box-a {
	margin-top:1.1em; padding:0 15px 14px 15px;
	border:solid 1px #cccccc;}

	#cont .box-a dl{}
	#cont .box-a dl dt{ margin-top:1em; font-size:14px;}
	#cont .box-a dl dd{ margin-top:0.4em;}

	#cont div.box-a p.check-agree{ text-align:center; font-size:14px; font-weight:bold;}


#cont p.notice{ margin-top:2em;}

#cont em{ color:#d00301;}
#cont p.submit{ text-align:center; margin-top:3em;}
#cont p.ctrl{display:none;}

#cont .err_mes{
	background-color:#FF3333;
	color:#fff;
	padding:0 5px;
	line-height:2rem;
	margin-top:3px;
	display:inline-block;
	border-radius:2px;
	clear:both;
}
#cont .err_mes:before{
	content: "";
	display:block;
}

#cont tr.hide{
	display:none;
}

@media (max-width: 640px) {
	#logo img{
		height:60px;
	}

	#outer-head {
	    border-bottom: 4px solid #1eb2e7;
		background-size:contain;
	}

	#cont h1{
		font-size:1.6rem;
		line-height:2.5rem;
	}

	#cont input[type=text],#cont input[type=number]{
		padding:3px;
		line-height:2.5rem;
		width:100%;
		box-sizing:border-box;
		border-radius:3px;
		border:1px #CCC solid;
	}

	#payment input[type=text],#recv-date-detail input[type=text],#recv-after-detail input[type=text]{
		width:auto;
	}
	#payment input[type=number],#recv-date-detail input[type=number],#recv-after-detail input[type=number]{
		width:60px;
	}


	#cont textarea{
		padding:3px;
		box-sizing:border-box;
		border-radius:3px;
		border:1px #CCC solid;
		width:100%;
	}

	#cont label{
		padding:5px 0;
	}

	table, tbody, thead, tfoot, tr, th, td {
		display: block;
	}
	#cont .table-a th {
		width:100%;
		box-sizing: border-box;
	}
}

