@charset "utf-8";

/* =========================================================
wrapper
========================================================= */
#wrapper {
}
.area {
width: 100%;
/*min-width: 1130px;*/
}
.area-in {
box-sizing: border-box;
clear: both;
position: relative;
width: 100%;
max-width: 1000px;
min-width: 300px;
margin: 0 auto;
padding: 0 10px;
}
.area-in:before { content:""; display:table;}
.area-in:after { content:""; display:table; clear:both;}
.area-in { zoom:1;}
.area-in img {
width: 100%;
}
.area-in a {
transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-webkit-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
}
.area-in-box {
padding: 0;
}
/* =========================================================
container
========================================================= */
#container {
}
#container:before { content:""; display:table;}
#container:after { content:""; display:table; clear:both;}
#container { zoom:1;}
#container a:hover img {
opacity: 0.7;
}
.pagetop {
	position: fixed;
	bottom: -70px;
	right: 10px;
	transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-webkit-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	z-index: 999;
	opacity: 0.9;
}
.pagetop:hover {
opacity: 0.6;
}
.pagetop a {
position: absolute;
right: 0;
bottom: 0;
display: block;
width: 40px;
height: 40px;
background: #ff7f00;
text-indent: -9999px;
border-radius: 20px;
}
.pagetop a:before {
content: "";
position: absolute;
top: 30%;
right: 50%;
width: 15px;
height: 4px;
background: #fff;
transform: rotate(-45deg);
transform-origin: right top;
}
.pagetop a:after {
content: "";
position: absolute;
top: 30%;
right: 50%;
width: 4px;
height: 15px;
background: #fff;
transform: rotate(-45deg);
transform-origin: right top;
}
.pagetop.active {
	bottom: 10px;
}
/* =========================================================
header
========================================================= */
#header {
}
#gnav {
background: #ffaf4c;
}
#gnav ul {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
background: #ffaf4c;
}
#gnav ul li {
display: table-cell;
text-align: center;
vertical-align: middle;
height: 100%;
}
#gnav ul li:last-child {
background: #ffaf4c;
}
#gnav a {
padding: 10px 0;
text-decoration: none;
display: block;
color: #fff;
line-height: 1.2;
height: 100%;
}
/*
#gnav ul li:last-child {
background: #ff8000;
}
*/
#gnav ul li.active {
background: #ff8000;
}
#gnav a:hover {
background: #ff8000;
}
#header-tool {
background: #eee;
color: #999;
}
#header-tool .area-in {
display: table;
}
#header-tool .item {
display: table-cell;
width: 50%;
vertical-align: middle;
}
#header-tool .item.search dl {
display: table;
width: 100%;
}
#header-tool .item.search dl dt,
#header-tool .item.search dl dd {
display: table-cell;
vertical-align: middle;
box-sizing: border-box;
padding: 5px 0;
}
#header-tool .item.search dl dt {
width: 100px;
line-height: 1.2;
}
#header-tool .search-box {
display: table;
width: 100%;
max-width: 350px;
background: #fff;
border: 1px solid #ccc;
border-radius: 3px;
}
#header-tool .search-box .select,
#header-tool .search-box p {
display: table-cell;
vertical-align: middle;
}
#header-tool .search-box .select {
width: 100px;
}
#header-tool .search-box p.btn {
padding: 0;
text-align: center;
}
#header-tool .search-box p.btn input {
vertical-align: middle;
}
#header-tool .form .search-box select {
border: none;
padding: 0 20px 0 5px;
margin: 0;
width: 100px;
}
#header-tool .form .search-box select:focus {
outline: none;
}
#header-tool .form .search-box input[type="text"],
#header-tool .form .search-box input[type="password"] {
border: none;
padding: 3px 5px;
margin: 0;
}
#header-tool .form .search-box input[type="text"]:focus,
#header-tool .form .search-box input[type="password"]:focus {
outline: 1px solid #eee;
}
#header-tool .item.login dl {
display: table;
float: right;
}
#header-tool .item.login dl dt,
#header-tool .item.login dl dd {
display: table-cell;
vertical-align: middle;
box-sizing: border-box;
padding: 5px 0;
}
#header-tool .item.login dl dt {
width: 110px;
line-height: 1.0;
font-size: 95%;
}
#header-tool .item.login dl dt a {
font-size: 80%;
color: #999;
}
#header-tool .login-box {
display: table;
width: 100%;
}
#header-tool .login-box p {
display: table-cell;
}
#header-tool .form .login-box input[type="text"],
#header-tool .form .login-box input[type="password"] {
padding: 4px 5px;
margin: 0 5px 0 0;
width: 120px;
}
#header-in {
padding: 10px 0;
}
#header-in .area-in {
display: table;
}
#header-in .item {
display: table-cell;
vertical-align: middle;
}
#header-in #logo {
width: 360px;
}
#header-in #logo:before { content:""; display:table;}
#header-in #logo:after { content:""; display:table; clear:both;}
#header-in #logo { zoom:1;}
#header-in .logo-box .logo {
}
#header-in .logo-box {
float: left;
width: 230px;
}
#header-in .line-logo {
float: right;
width: 120px;
}
#header-in .line-logo img {
max-width: 120px;
}
#logo .text {
padding: 3px 0 0 5px;
font-size: 80%;
font-weight: normal;
font-weight: bold;
line-height: 1.2;
}
#header-in .tel {
}
#header-in .tel-box {
display: table;
float: right;
}
#header-in .tel-box .icon,
#header-in .tel-box p {
display: table-cell;
vertical-align: middle;
}
#header-in .tel-box .icon {
width: 30px;
}
#header-in .tel-box .icon img {
max-width: 30px;
}
#header-in .tel-box .text {
text-align: center;
color: #ffaf4c;
font-weight: bold;
font-size: 95%;
line-height: 1.2;
width: 100px;
}
#header-in .tel-box .tel {
color: #999;
font-size: 270%;
font-family: 'Oswald', sans-serif;
line-height: 1.2;
}
#header-in .tel-box .tel a {
color: #999;
text-decoration: none;
cursor: default;
}
#header-in .btn {
display: none;
}
/* =========================================================
footer
========================================================= */
#footer {
clear: both;
padding-bottom: 30px;
background: #eee;
}
.footer-nav {
background: #ffaf4c;
}
.footer-nav ul {
text-align: center;
padding: 10px;
}
.footer-nav li {
display: inline-block;
line-height: 1.2;
border-right: 1px solid rgba(255,255,255,0.6);
margin-right: 5px;
padding-right: 5px;
font-size: 85%;
}
.footer-nav li a {
text-decoration: none;
color: #fff;
}
.footer-nav li a:hover {
text-decoration: underline;
}
.footer-category {
margin-bottom: 30px;
}
.footer-category dt {
text-align: center;
color: #999;
font-size: 120%;
padding: 15px;
}
.footer-category dd ul {
box-sizing: border-box;
width: 100%;
border-left: 1px solid #ddd;
border-top: 1px solid #ddd;
}
.footer-category dd li {
float: left;
width: 20%;
line-height: 1.2;
text-align: center;
padding: 0;
font-size: 90%;
box-sizing: border-box;
background: #fff;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
color: #999;
}
.footer-category dd li a {
display: block;
padding: 7px 0;
color: #999;
text-decoration: none;
}
.footer-category dd li a:hover {
background: #fafafa;
}
#footer .text {
text-align: center;
color: #999;
padding: 3px;
line-height: 1.2;
font-size: 90%;
}
#footer .copy {
text-align: center;
color: #999;
padding: 3px;
line-height: 1.2;
font-size: 90%;
}
#contents_contact {
border-top: 3px solid #ff7f00;
background: #fff4d4;
padding: 0 0 20px 0;
}
#contents_contact .title {
background: #ff7f00;
color: #fff;
text-align: center;
padding: 15px;
font-size: 110%;
line-height: 1.2;
}
#contents_contact .text {
padding: 20px 10px 10px 10px;
text-align: center;
}
.contact_box {
display: table;
width: 90%;
margin: 0 auto;
}
.contact_box > * {
display: table-cell;
width: 50%;
padding: 10px;
vertical-align: top;
}
.contact_box .item > * {
padding: 10px;
background: #fff;
border-radius: 5px;
min-height: 120px;
}
.contact_box .tel {
}
.contact_box .tel_text {
text-align: center;
padding: 10px 10px 0 10px;
color: #65B403;
font-weight: bold;
font-size: 130%;
}
.contact_box .tel .icon {
width: 30px;
margin-right: 10px;
display: inline-block;
}
.contact_box .tel .num {
text-align: center;
padding: 0 10px 10px 10px;
}
.contact_box .tel .num a {
color: #999;
font-size: 300%;
font-family: 'Oswald', sans-serif;
line-height: 1.2;
text-decoration: none;
}
.contact_box .mail {
padding: 20px;
}
.contact_box .mail .btn {
display: table;
width: 100%;
height: 80px;
}
.contact_box .mail .btn a {
position: relative;
display: table-cell;
text-align: center;
background: #65b403;
padding: 10px 30px 10px 10px;
color: #fff;
vertical-align: middle;
text-decoration: none;
border-radius: 5px;
font-size: 130%;
font-weight: bold;
box-shadow: 3px 3px 1px rgba(0,0,0,0.1);
}
.contact_box .mail .btn a:hover {
filter: alpha(opacity=70);
-moz-opacity:0.70;
opacity:0.70;
text-decoration: none;
}
.contact_box .mail .btn a:before {
position: absolute;
top: 50%;
right: 20px;
content: "";
width: 15px;
height: 4px;
background: #fff;
transform: rotate(45deg);
transform-origin: right top;
}
.contact_box .mail .btn a:after {
position: absolute;
top: 50%;
right: 20px;
content: "";
width: 4px;
height: 15px;
background: #fff;
transform: rotate(45deg);
transform-origin: right top;
}
.pan {
padding: 10px 0 30px 0;
border-top: 1px solid #FFAF4C;
}
.pan ol {
font-size: 0;
}
.pan ol li {
display: inline-block;
font-size: 12px;
}
.pan ol li b {
font-weight: normal;
}
#bottompan {
display: none;
}
	@media screen and (max-width: 900px) {
	#header-tool .item.search {
	width: 45%;
	}
	#header-tool .item.login {
	width: 55%;
	}
	}
	@media screen and (max-width: 800px) {
	#header-tool .item.search {
	width: 40%;
	}
	#header-tool .item.login {
	width: 60%;
	}
	}
	@media screen and (max-width: 768px) {
	/* =========================================================
	wrapper
	========================================================= */
	.area {
	min-width: inherit;
	}
	.area-in {
	padding: 0;
	}
	.area-in-box {
	padding: 0 10px;
	}
	.area-in img {
	width: 100%;
	}
	/* =========================================================
	header
	========================================================= */
	#header-menu {
	display: none;
	}
	#gnav ul {
	display: block;
	height: auto;
	}
	#gnav ul li {
	display: block;
	text-align: left;
	height: auto;
	}
	#gnav ul li:last-child {
	background: #ffaf4c;
	}
	#gnav a {
	padding: 10px;
	height: auto;
	border: none;
	border-bottom: 1px solid #fff;
	}
	#header-tool .area-in {
	display: block;
	}
	#header-tool .item {
	display: block;
	width: auto!important;
	}
	#header-tool .item.search dl {
	display: block;
	}
	#header-tool .item.search dl dt,
	#header-tool .item.search dl dd {
	display: block;
	padding: 5px 10px 0 10px;
	}
	#header-tool .item.search dl dt {
	width: auto;
	line-height: 1.2;
	}
	#header-tool .search-box {
	display: table;
	width: 100%;
	max-width: none;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 3px;
	}
	#header-tool .search-box .select,
	#header-tool .search-box p {
	display: table-cell;
	vertical-align: middle;
	}
	#header-tool .search-box .select {
	width: 100px;
	}
	#header-tool .item.login dl {
	display: block;
	float: none;
	}
	#header-tool .item.login dl dt {
	display: block;
	padding: 5px 10px 0 10px;
	}
	#header-tool .item.login dl dd {
	display: block;
	padding: 5px 10px;
	}
	#header-tool .item.login dl dt {
	width: auto;
	}
	#header-tool .login-box {
	display: table;
	width: 100%;
	}
	#header-tool .login-box p {
	display: table-cell;
	}
	#header-tool .form .login-box input[type="text"],
	#header-tool .form .login-box input[type="password"] {
	padding: 4px 5px;
	margin: 0 5px 0 0;
	width: 97%;
	}
	#header-in {
	padding: 0;
	}
	#header-in .area-in {
	display: block;
	}
	#header-in .item {
	display: block;
	}
	#header-in .item.btn {
	width: 40px;
	height: 40px;
	position: absolute;
	right: 0;
	top: 6px;
	cursor: pointer;
	z-index: 999;
	}
	#header-in #logo {
	margin: 0 auto;
	padding: 5px;
	}
	#header-in #tel {
	background: #fafafa;
	}
	#header-in .tel-box .tel {
	font-size: 230%;
	}
	#header-in .tel-box {
	display: table;
	float: none;
	margin: 0 auto;
	width: 310px;
	padding: 5px 0;
	}
	.pagetop {
	width: 40px;
	height: 40px;
	line-height: 40px;
	}
	/* =========================================================
	footer
	========================================================= */
	#footer {
	}
	/*
	.footer-nav {
	display: none;
	}
	*/
	.footer-category dt {
	background: #999;
	color: #fff;
	padding: 10px;
	line-height: 1.2;
	}
	.footer-category dd li {
	width: 50%;
	}
	.contact_box {
	width: 100%;
	}
	.contact_box > * {
	display: block;
	width: 100%;
	padding: 5px 10px;
	vertical-align: top;
	}
	.contact_box .item > *:first-child {
	padding: 10px 10px;
	min-height: inherit;
	}
	#pan {
	display: none;
	}
	#bottompan {
	display: block;
	padding: 10px;
	}
	}
	@media screen and (max-width: 460px) {
	#header-in #logo {
	width: 260px;
	margin: 0;
	}
	#header-in .logo-box {
	width: 160px;
	}
	#header-in .line-logo {
	float: right;
	width: 85px;
	}
	#header-in .line-logo img {
	max-width: 100px;
	}
	#header-in .tel-box {
	display: table;
	float: none;
	margin: 0 auto;
	width: 310px;
	padding: 5px 0;
	}
	.footer-nav ul {
	padding: 0;
	}
	.footer-nav ul li {
	display: block;
	border: none;
	border-bottom: 1px solid rgba(255,255,255,0.6);
	margin-right: 0;
	padding-right: 0;
	text-align: left;
	}
	.footer-nav ul li:hover {
	}
	.footer-nav ul li a {
	padding: 10px;
	display: block;
	text-decoration: none;	
	}
	.footer-nav ul li a:hover {
	text-decoration: none;
	background: #ff8000;
	}
	.footer-category dd li {
	width: 100%;
	text-align: left;
	}
	.footer-category dd li a {
	padding: 7px 10px;
	}
	}