@charset "UTF-8";
/* ----------------------------------------------------------------------------------
00 RESET
------------------------------------------------------------------------------------- */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
a, abbr, acronym, address, applet, article, aside, audio, 
b, big, blockquote, body, caption, canvas, center, cite, code,
dd, del, details, dfn, dialog, div, dl, dt, em, embed, 
fieldset, figcaption, figure, form, footer, 
header, hgroup, h1, h2, h3, h4, h5, h6, html, 
i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav,
object, ol, output, p, pre, q, ruby, 
s, samp, section, main, small, span, strike, strong, sub, summary, sup, 
tt, table, tbody, textarea, tfoot, thead, time, tr, th, td,u, ul, var, video {
	font-family: inherit;
	font-size: 103%;
	font-weight: inherit;
	font-style: inherit;
	vertical-align: baseline;
	white-space: normal;
	text-align: left;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
}
article, aside, details, figcaption, figure, footer, header, hgroup,menu, nav, section, main{ display: block; margin: 0; }
ol, ul { list-style: none;}
blockquote, q { quotes: none;}
table { border-collapse: collapse; border-spacing: 0;}
input::-moz-focus-inner { /* Firefoxのボーダーとパディングをリセット */
  border: 0;
  padding: 0;
}

/*====================================================
00 common
=====================================================*/
html { font: 62.5% / 1.231  Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;-webkit-font-smoothing: antialiased;}


@media only screen and (min-width: 960px){
	div#nav{
    	width:calc(100% - 420px);
    	text-align: right;
		padding-top: 10px
	}
	div#nav a{
		text-decoration: none;
		color:#000;
		font-weight: 700;
		font-size: 12px;
	}
}
@media only screen and (max-width: 959px) and (min-width: 768px){
	div#nav{
    	width:100%;
    	text-align: left;
		padding-top: 10px
	}
	div#nav a{
		text-decoration: none;
		color:#000;
		font-weight: 700;
		font-size: 12px;
	}
}
@media only screen and (max-width: 999px){
	div#nav a{
		text-decoration: none;
		color:#000;
		font-weight: 700;
		font-size: 12px;
		margin: 25px 5%;
	}
}

@media only screen and (max-width:767px) {
div#header{padding-top:15px;}
div#header h1{ margin:0 5% ;padding:15px 0 20px 0;}
div#header h1 img{ width:100%; height:auto;}
}
@media only screen and (min-width:768px) and (max-width:959px) {
div#header-wrapper{ width:96%; margin:0 auto; position:relative;}
div#header{padding-top:15px;}
div#header h1 { width:420px; }
div#header h1 img{ width:420px; height:auto;}
div#header p{ position:absolute; top:25px; right:0;}
#nav ul:before { content:""; display:inline-block; padding:0;}
#nav ul li{ float:left; margin:12px 25px 0 0; }
#nav ul li a{ display:inline-block;}
#nav ul li a{ color:#000; text-decoration:none;}
#nav ul li a:hover{ color:#227CD4;}
}
@media only screen and (min-width:960px) and (max-width:999px) {
div#header-wrapper{ width:96%; margin:0 auto; position:relative;}
div#header{padding-top:15px;}
div#header h1 { width:420px; }
div#header h1 img{ width:100%; height:auto;}
div#header p{ position:absolute; top:25px; right:0;}
#nav ul:before { content:""; display:inline-block; padding:0;}
#nav ul li{ float:left; margin:12px 25px 0 0; }
#nav ul li a{ display:inline-block;}
#nav ul li a{ color:#000; text-decoration:none;}
#nav ul li a:hover{ color:#227CD4;}
}
@media only screen and (min-width:1000px) {
div#header-wrapper{ width:100%; background: rgba(255,255,255, .7); position:fixed; top:0; left:0; z-index:10000; height:60px;}
div#header{ width:1000px; margin:0 auto; display:table; padding-top:15px; position:relative;}
div#header h1,
div#header #nav{ display:table-cell; vertical-align:top;}
#nav ul li a{ color:#000; text-decoration:none;}
#nav ul li a:hover{ color:#227CD4;}
div#header h1 { width:420px; }
div#header p{ position:absolute; top:17px; right:0;}
#nav ul:before { content:""; display:inline-block; padding:0;}
#nav ul li{ float:left; margin:12px 0 0 25px; }
#nav ul li a{ display:inline-block;}
}




/*====================================================
00 Menu
=====================================================*/
@media only screen and (max-width:767px) {
#nav h2{
	width:100%; 
	background:#000;
	display:block;
	cursor:pointer;
	clear:both;
	font-size:14px;
	padding:10px 0;
	text-align:center;
	display:block;
	color:#FFF;
	font-weight:700;
}
#nav ul li{ margin:0; border-bottom:#000000 dotted 1px; padding:1px 0}
#nav ul li a{ display:block; padding:15px 0 15px 15px;}
#nav ul li a{ color:#000; text-decoration:none;}
#nav ul li a:hover{ color:#fff; background:#227CD4;}
}
@media only screen and (min-width:768px) and (max-width:959px) {.mobile-only { display:none;}}
@media only screen and (min-width:960px) {.mobile-only { display:none;}}





@media only screen and (max-width:999px) {
#top-art{ width:100%;}
#clock{ display:table; width:90%; margin:0 auto; padding:100px 0 120px 0;}
}
@media only screen and (min-width:1000px) {
#top-art{ width:100%; height:500px;}
#clock{ display:table; width:1000px; margin:0 auto; padding-top:160px;}
}
#clock img{ visibility:hidden;}
.timesart{ display:table-cell;}
.visivle{ visibility:visible!important; text-align:center;}
img.visivle{ width:100%; height:auto;}



#thumblist ul{ width:100%;}
#thumblist ul li{cursor:pointer; line-height:0;}
@media only screen and (max-width:767px) {#thumblist ul li{ float:left; width:50%;}}
@media only screen and (min-width:768px) and (max-width:959px) {#thumblist ul li{ float:left; width:25%;}	}
@media only screen and (min-width:960px) and (max-width:999px) {#thumblist ul li{ float:left; width:25%;}	}
@media only screen and (min-width:1000px) {#thumblist ul li{ float:left; width:25%;}	}

#thumblist ul li img{width:100%; height:auto;}


#footer{ clear:both;}
#footer .footer_wrapper{ background:#FFF; border-top: 1px solid #000; }


@media only screen and (max-width:767px) {.footer_inner{margin:0 5%}.footer_inner .hgroup h2 img{ width:100%; height:auto;}}
@media only screen and (min-width:768px) and (max-width:959px) {}
@media only screen and (min-width:960px) and (max-width:999px) {}
@media only screen and (min-width:1000px) {#footer .footer_wrapper .footer_inner{ width:1000px; margin:0 auto; padding:30px 0 20px 0; }}
/*footer_inner*/
.footer_inner .hgroup{ float:left;}
.footer_inner .hgroup address{ font-size:0.8125em; }
ul#footer-navi{ float:right; display:table;}
ul#footer-navi li{ display:table-cell; font-size:0.8125em; }
ul#footer-navi li{padding:10px 18px 10px 14px; background:url(../img/common/icon/triangle.gif) no-repeat left center;}
ul#footer-navi li a{ text-decoration:none;}
ul#footer-navi li a:link{color:#333333;}
ul#footer-navi li a:visited {color:#333333;}
ul#footer-navi li a:hover,
ul#footer-navi li a:active,
ul#footer-navi li a:focus {color: #F00;}
#footer .tel{ padding-right:15px;}
#footer #footer-copyright{ text-align:left; clear:both; font-size:0.750em; padding:15px 0 0 0; }

/* TOPへ戻る*/
#page-top {position: fixed;bottom:46px; right:20px;}
#page-top a { width: 65px; display: block;}




@media only screen and (max-width:767px) {
section{
	width:96%;
}
}
@media only screen and (min-width:768px) and (max-width:959px) {
section{
	width:580px;
}
}
@media only screen and (min-width:960px) and (max-width:999px) {
section{
	width:580px;
}
}
@media only screen and (min-width:1000px) {
section{
	width:580px;
}
}
section{
	margin:0 auto;
	padding-bottom: 50px;
}
section+section{
	padding-bottom: 100px;
}
section h2{
	font-size: 16px;
	font-weight: 700;
	padding-bottom: 25px;
}
section p{
	font-size: 14px;
	line-height: 1.8;
}
section p span{
	font-size: 12px;
	line-height: 1.6;
	display: block;
	text-align: right;
}
section p a:link{color:#333333;}
section p a:visited {color:#333333;}
section p a:hover,
section p a:active{color: #F00;}




#wrapper{
	max-width:1000px;
}
@media screen and (min-width: 641px) {
#wrapper{
	margin: 80px auto 30px auto;
}
}
@media screen and (max-width: 640px) {
#wrapper{
	margin: 60px auto 30px auto;
}
}
/*====================================================
特定商取引法に基づく表記
=====================================================*/
#law-contents table {
  table-layout: fixed;
  width: 100%;
  margin: 20px auto;
}
#law-contents th {
  background: #f4f4f4;
  border-bottom: solid 1px #ccc;
  color: #fff;
  padding: 20px;
  width: 200px;
  text-align: left;
  color: #333;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.6;
}
#law-contents td {
  font-size: 1.3rem;
  line-height: 1.6;
  border-bottom: solid 1px #ccc;
  padding: 20px;
  word-wrap: break-word;
}

@media screen and (max-width: 640px) {
  #law-contents table {
    width: 100%;
  }
  #law-contents table th,
#law-contents table td {
    display: block;
    width: 100%;
  }
  #law-contents tr:last-child td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
}
}