﻿/* 基本 */
@charset "utf-8";
/* /css/usrfiles/default/1886_TOP_base.css */

img { border-style: none; }
/* FORM styles */
form { display: inline; margin: 0px; padding: 0px; }
input { font-size: 14px; }
select { font-size: 14px; }
textarea { font-size: 14px; }

a:link{ text-decoration: underline; color: #006666;}
a:hover{ text-decoration: underline; color: #d17a7a; }
a:visited{ text-decoration: underline; color: #006666; }

body {
	font: 16px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	background-color: #ffffff;
	text-align: left;
}

#PAGE_BAK {
	margin: 0px;
	padding: 0px;
}
#PAGE_OUT {
	margin: 0px;
	padding: 0px;
}
#PAGE_BOX {
	text-align: left;
	border-style: none;
	background-color: #ffffff;
	min-width: 1020px;
	margin: 0 auto;
}
/* header */
header{
	margin: 0 0 2px 0;
	padding: 0px;
	font-size: 14px;
	line-height: 150%;
	text-align: left;
	vertical-align: top;
	box-shadow:0px 3px 2px -3px #cccccc;
}
#HEAD1 {
	border-bottom: 1px solid #cdcbcb;
}
#HEADINFO {
	display: block;
	width: 100%;
	color: #ffffff;
	background-color: #ccc;
}
#MEMO {
	text-align: right;
}
aside {
	width: 200px;
	margin-left: 10px;
	float: left;
	display: block;
}
main.def {
	width: 790px;
	padding: 0 10px;
	display: block;
	float: left;
}
/* header -> SITETITLE */
#SITETITLE {
	width: 465px;
}
/* header -> GNAVI */
#GNAVI {
	width: 530px;
}
#SPOT {
}
#KV {
	float: left;
	margin: 0px;
	padding: 0px;
	border-style: none;
	line-height: 150%;
	text-align: left;
	vertical-align: top;
 }
.links {
	color: #fff;
	background-image: url(/img/usrfiles/default/990_TOP_bg_links.jpg);
	background-position: bottom center;
	background-size: 100%;
}
/* FOOTER */
footer {
	color: #121212;
	margin: 30px 0 0;
	padding: 0px;
	border-style: none;
	font-size: 14px;
	line-height: 150%;
	text-align: left;
	vertical-align: top;
}
#PTOP {
	margin: 0px;
	padding: 0px;
	text-align: right;
}
#FOOT {
	margin: 0px;
	padding: 0px;
	border-top: 5px solid #ce0a0a ;
	border-bottom: 5px solid #ce0a0a ;
}
#FOOT2 {
    color: #fff;
    background-color: #333333;
}
#GFNAVI {
	padding: 0;
	margin: 10px;
 }
#COPY {
	margin: 0px;
	border-style: none;
	padding: 0px 0px;
	font-size: 80%;
	width: 100%;
	line-height: 150%;
	text-align: center;
	vertical-align: top;
	background-color: #beb9a8;
}
.w1020 {
	width: 1020px;
	margin: 0 auto;
}
/* --フォームスタイルの打消し-- */
input, button, textarea, select {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif !important ;
}
/* --フォームスタイルの指定-- */
input[type="text"],
textarea {
	outline: none;
	border: 1px solid #aaa;
	-webkit-transition: all .3s;
	transition: all .3s;
	background-color: #fff;
	border-radius: 2px;
	line-height: 200%;
}
input[type="text"]:focus,
textarea:focus {
	box-shadow: 0 0 7px #1abc9c;
	border: 1px solid #1abc9c;
}
select {
	width: auto;
	padding: 5px 20px 5px 5px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #999;
	background: #eee;
	background: url(/img/usrfiles/default/1886_TOP_arrow.png) right 50% no-repeat, -webkit-linear-gradient(top, #fff 0%,#efebe1 100%);
	background: url(/img/usrfiles/default/1886_TOP_arrow.png) right 50% no-repeat, linear-gradient(to bottom, #fff 0%,#efebe1 100%);
	background-size: 20px, 100%;
}
input[type="radio"],
input[type="checkbox"] {
	display: none;
}
label {
	position: relative;
	display: inline-block;
	padding: 3px 3px 3px 20px;
	cursor: pointer;
}
label::before,
label::after {
	position: absolute;
	content: '';
	top: 50%;
	border-radius: 100%;
	-webkit-transition: all .2s;
	transition: all .2s;
}
label::before {
	left: 0;
	width: 14px;
	height: 14px;
	margin-top: -8px;
	background: #f3f3f3;
	border: 1px solid #ccc;
}
label:hover::before {
	background: #fff;
}
label::after {
	opacity: 0;
	left: 4px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	background: #1abc9c;
	-webkit-transform: scale(2);
	transform: scale(2);
}
input[type="button"] {
	margin: 0 2px;
	padding: 0 2px;
	position: relative;
	background-color: #999;
	border-radius: 2px;
	color: #fff;
	line-height: 120%;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 3px 0 #777;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
input[type="button"]:hover {
	background-color: #31c8aa;
	box-shadow: 0 3px 0 #23a188;
}
input[type="button"]:active {
	top: 3px;
	box-shadow: none;
}
input[type="radio"]:checked + label::before {
	background: #fff;
	border: 1px solid #1abc9c;
}
input[type="radio"]:checked + label::after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

input[type="checkbox"]::after {
  opacity: 0;
  top: 50%;
  left: 3px;
  width: 8px;
  height: 4px;
  margin-top: -4px;
  border-left: 2px solid #3498db;
  border-bottom: 2px solid #3498db;
  -webkit-transform: rotate(-45deg) scale(.5);
  transform: rotate(-45deg) scale(.5);
}

input[type="checkbox"]:checked + label::before {
  background: #fff;
  border: 1px solid #3498db;
}
input[type="checkbox"]:checked + label::after {
  opacity: 1;
  -webkit-transform: rotate(-45deg) scale(1);
  transform: rotate(-45deg) scale(1);
}
input[type="submit"] {
	background-color: #d17a7a;
	border-radius: 3px;
	padding: 0.5em 2em;
	line-height: 200%;
	color: #fff;
}
input[type="submit"]:hover {
	background-color: #f05353;
	color: #fff;
}

/* --フォームスタイルの指定ここまで-- */

 /* ----------------- SP ------------------- */
@media screen and (max-width: 767px) {
.pcnone {
	display: block;
}
.spnone {
	display: none;
}
#CONTENTS {
	width: 100%;
	overflow: hidden;
}

header {
	height: auto;
}
#SITETITLE {
	width: 40%;
}
#SITETITLE img {
	float: left;
	height: auto;
	min-width: 200px;
	width: 100%;
}
#KV {
	width: 100%;
	height: auto;
}
#BODY {
	width: 100%;
	height: auto;
	padding-bottom: 30px;
}
aside {
	width: auto;
	margin: 0;	
}
aside.def {
	display:none;	
}
main.def {
	width: auto;
	padding: 10px;
}
#PTOP {
	max-width: 100%;
	height: auto;
}

#FOOT2 table { /*CALibサイトマップ部品使用時*/
	width: 100%; 
	border-collapse: collapse; 
}
#FOOT2 table th { 
	background: none; 
	color: white; 
	font-weight: bold; 
}
#FOOT2 table td, th { 
	padding: 6px; 
	text-align: left; 
}
#FOOT2 table td {
	width:auto !important;
}
#FOOT2 table td div div {
	background: none;
}
#FOOT2 a.FOOT2_link {
	display: block;
	letter-spacing: 0;
	line-height: 150%;
	text-align: center;
}
#FOOT2 a.FOOT2_link:link {
	color: #57647b;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
}
#FOOT2 a.FOOT2_link:visited {
	color: #57647b;
}
#FOOT2 a.FOOT2_link:hover {
	color: #3791d4;
	text-decoration: underline;
}
#FOOT2 table td div div img{ /*CALibサイトマップ部品使用時アイコン打消し*/
	visibility: hidden !important;
	height: -1px !important;
	margin: 0;
	padding: 0;
}
.w1020 {
	width: auto;
	margin: 0;
}
}/* spのためのcss */

	#MENUT {
	display: none;
	}

/* SP版メニュ */	 
	@media screen and (min-width : 768px) {
	#MENUT {
	display: block;
	}
	.slicknav_menu {
	display: none;
	}
	}


/* テーブル用 */
	@media only screen and (max-width: 767px) {

	#FOOT2 table, #FOOT2 thead, #FOOT2 tbody, #FOOT2 th, #FOOT2 td, #FOOT2 tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	#FOOT2 thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	#FOOT2 tr {
		display:block;
	}
	
	#FOOT2 td { 
	/* Behave	like a "row" */
		border: none;
	border-bottom: 1px solid #7B8C81; 
	position: relative;
	}
	
	#FOOT2 td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}

	/*Label the data*/
	td:nth-of-type(1):before { content: ""; }
	td:nth-of-type(2):before { content: ""; }
	td:nth-of-type(3):before { content: ""; }
	td:nth-of-type(4):before { content: ""; }
	}



/* ----------------- PC and iPad ------------------- */
@media screen and (min-width: 768px) {
.pcnone {
	display: none;
}
.spnone {
	display: block;
}
#CONTENTS {
	width: 100%;
	margin: 0px auto;
	}

/* header */
header {
	width: 100%;
	height: auto;
	overflow: hidden;
}
/* header -> SITETITLE */
#SITETITLE {
	width: auto;
}

#MENUT {
	height: 0;
	visibility: hidden;
	padding: 0;
	margin: 0;
	margin: -1px 0;
}
#MENUV > div {
	display: none;
}
/* KV */
#KV {
	width: 100%;
 }

/* BODY */
#BODY {
	width: 100%;
	display: inline-block;
 }
/* PTOP */
#PTOP {
	width: 100%;
 }
/* FOOTER */
#FOOTER {
	width: 100%;
}
main #BODY section article > div {
	width: 1020px;
	margin: 0 auto;
}
main.def #BODY section article > div {
	width: auto;
	margin: 0;
}
}/* pcのためのcss */

/* alletc */
.dnone {
	display: none;
}
.fleft {
	float: left;
}
.fright {
	float: right;
}
.fclear {
	float: right;
}
.textc {
	text-align: center;
}
.textl {
	text-align: left;
}
.textr {
	text-align: right;
}
.hidebox {
	display: none !important;
}
.viewbox {
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}
* html .clearfix {
	height: 1px;
	/*¥*//*/
	height: auto;
	overflow: hidden;
	/**/
}