@charset "UTF-8";

/* //////////////////////////////////////////////////////////////////// */
/* ///// 全ページ共通CSS //////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////// */

/* ==================================================
font
================================================== */
html {font-size: 62.5%;}/*基本フォントサイズ10px*/

body {
color:#595757;
font-size: 10px; font-size: 1.0rem;
line-height:1.8;
letter-spacing:1px;

/*ゴシック系*/
font-family:"Work Sans","Helvetica Neue",Helvetica,"游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;

/*明朝系*/
/*font-family:"Times New Roman","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN",serif;*/
}
.serif{
	/*明朝系*/
font-family:"Times New Roman","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN",serif;
}

#wrapper {font-size:14px; font-size:1.4rem;}

/* ==================================================
link
================================================== */
a:link {color:#595757; text-decoration:none;}
a:visited {color:#595757; text-decoration:none;}
a:hover {color:#595757; text-decoration:none;}
a:active {color:#595757; text-decoration:none;}

img.csshover:hover,
a:hover img.csshover {
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
	cursor: pointer;
}
img.cursor:hover{
	cursor: pointer;
}

a { /* FireFoxのリンク選択時の点線を消す */
overflow: hidden;
outline: none;
}

img.csshover,a img, a {
	outline: none;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
a:active, a:hover, a:focus {
	outline-width: 0;
}
/* ==================================================
base (reset)
================================================== */
html {
margin:0;
padding:0;
}

body {
width:100%;
min-width:900px;/* サイトに応じて */
margin:0;
padding:0;
position:relative;
text-align:center;
}
.pc_only{
	display: block;
}
.sp_only{
	display: none;
}

@media screen and (max-width:640px){
body {
width: 100% !important;
min-width:100%;
background:#ffffff; /*Androidのブロック幅バグ回避*/
overflow-x: hidden;
}
.pc_only{
	display: none;
}
.sp_only{
	display: block;
}

}

#wrapper {
width:100%;
	min-width: 1000px;
}


@media screen and (max-width:640px){
#wrapper {
width:100%;
	min-width: 100%;
}
}


h1, h2, h3, h4, h5, h6, p {margin:0; padding:0; font-size:100%; font-weight:normal;}

ul, ol {margin:0; padding:0; vertical-align:baseline; background:transparent;}
ol, li {list-style:none;}

img {border:none; line-height:0; font-size:0; vertical-align:text-bottom;}
img, object, embed, video {max-width: 100%;}

a {
margin:0;
padding:0;
font-size:inherit;
background:transparent;
}

th, td {
font-style:normal;
font-weight:normal;
font-size:inherit;
empty-cells:show;
}

input, select {
vertical-align:middle;
}

input, textarea, select {
font-family:inherit;
font-size:inherit;
font-weight:inherit;
/*border:0;*/
}

pre {
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
word-wrap: break-word; /* IE 5.5+ */
}

* {
-webkit-box-sizing: border-box;/* ボックス内のwidth優先 */
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/* ==================================================
header
================================================== */

/* ==================================================
nav
================================================== */

/* ==================================================
contents
================================================== */
#container{
	width: 100%;
	margin: 0 auto;
}
/*#container h1{
	display: none;
}*/

/* PAGETOP
------------------------------ */

/* ==================================================
footer
================================================== */
#footer{
width: 90%;
min-width: 1000px;
margin: 0 auto;
	padding: 45px 0;
	position: relative;
}

#footer .top_btn{
position: absolute;
right: 0;
top: 38px;
}

#footer .copy{
	font-size: 1rem;
	color: #000;
	text-align: center;
}

@media screen and (max-width:640px){
#footer{
width: 100%;
min-width: 100%;
	padding: 70px 35px;
}
#footer .top_btn{
position: absolute;
right: 35px;
top: 64px;
}
#footer .copy{
	font-size: 1.4rem;
}
}
/* //////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////// */

/* ==================================================
6. other
================================================== */

/* --------------------------------------------------
class指定のみでマウスオーバー効果 (base_pc.js)
※fadeの透過時間は、base_pc.jsにて調節
-------------------------------------------------- */
.swap {} /*ON/OFF　　※同ディレクトリ内にある[ 同じimg名 + _on ]の画像に変わる*/
.swapfade {} /*ON/OFF　　※同ディレクトリ内にある[ 同じimg名 + _on ]の画像に変わる フェード効果付き*/
.fade {} /*半透過*/
.fadefix {} /*完全透過　　※要素の背景にON画像の設定必要*/

/* --------------------------------------------------
アニメーションスクロール
-------------------------------------------------- */
.scrollto {} /*jquery.scrollto.jsを利用*/

/* --------------------------------------------------
ブロック要素全体をクリックにて、ブロック要素内にあるリンク先へ遷移 (base_pc.js)
-------------------------------------------------- */
.clickable { cursor:pointer;}

/* --------------------------------------------------
clrfix
フロートした子要素しかもたない親ブロック要素の高さを確立する
-------------------------------------------------- */
/*親ブロック要素のclassにclrfixを追加*/
.clrfix:before,
.clrfix:after {
content:"";
display:table;
}
.clrfix:after { clear:both; }






/*--------------------------------------
margin
--------------------------------------*/
/*top*/
.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;}
.mt60{margin-top: 60px !important;}
.mt70{margin-top: 70px !important;}
.mt80{margin-top: 80px !important;}
.mt90{margin-top: 90px !important;}
.mt100{margin-top: 100px !important;}
/*bottom*/
.mb10{margin-bottom: 10px !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;}
.mb70{margin-bottom: 70px !important;}
.mb80{margin-bottom: 80px !important;}
.mb90{margin-bottom: 90px !important;}
.mb100{margin-bottom: 100px !important;}






/* //////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////// */