﻿/*
Theme Name: tontonhouse
Theme URI: 
Author: Kaoru Tajima
Author URI: 
Description:麻雀クラブトントンハウスのテーマです。
Version: 1

*/


/*--------------------------------------------------------------
1.0 Normalize
--------------------------------------------------------------*/

html {
	font-family: 'Noto Serif JP', serif;
	line-height: 1.15;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-size:14px;
}

#wrapper{
	width:100%;
	overflow:hidden;
}

.for_sp{
	display:none;
}

body {
	width:100%;
  background:#fff;
  color:#000;
  font-size: 17px;
  line-height:1.7;
  letter-spacing: 0.04em;
  position: relative;
  padding:0;
  margin:0;
  
}

article,
aside,
footer,
header,
nav,
section {
	display: block;
}

#layout {
  padding-top: 110px;
  max-width:100%;
}

a {
	text-decoration:none;
  color:#021953;
  vertical-align:baseline;
	background:transparent;
}

a:active,
a:hover {
	text-decoration:underline;
}

strong {
	font-weight: bold;
}

table {
  width:100%;
}
.for_sp {
  display:none;
}
.unclickable{
  pointer-events: none;
}

.small {
	font-size: 12px;
}

img {
	vertical-align: top;
	max-width:100%;
	height:auto;
	margin:0;
	padding:0;
}

ul li,
ol li {
	list-style-type: none;
}

.inner {
	  width: 96%;
  max-width:1100px;
  margin: 0 auto;
  overllow:hidden;
  padding:0;

}


/*--------------------------------------------
  header
--------------------------------------------*/
#header {
  width:100%;
  position:fixed;
  top:0;
  overflow:hidden;
  background: #fff;
  padding: 5px 0 5px;
  z-index: 99999;
  border-bottom:solid 1px #021953;
}

h1{
	margin:0;
}
#hdr_inner {
  width:1100px;
  max-width:98%;
  margin: 0 auto;
  
}
#header .hdr_logo {
  float: left;
  margin:0;
  padding:0;
}
#header .hdr_logo a:hover {
  opacity: 0.8;
}

#tel {
  float: right;
  margin:20px 0 5px;
  vertical-align:top;
}



/*--------------------------------------------
  heading
--------------------------------------------*/

#headerimage{
	background-size:cover;
	padding:0 auto;
	width:100%;
	text-align:center;
}
#headerimage img{
	display:inline;
	margin:0 auto;
	float:none;
	width:100%;
	max-width:1200px;
}

h2.ttl_text {
  background-image:none;
 text-align:center;
  padding: 0;
  margin-top:30px;
}

h2.h2_text{
	font-size:35px;
	color:#fff;
	padding-left:10px;
	letter-spacing:3;
	background-color:#021953;
	font-weight:300;
}

h3.access{
	font-size:48px;
	color:#021953;
	text-shadow: 
0 0 50px #edf8ff, 
0 0 50px #edf8ff, 
0 0 80px #edf8ff;
}


h3.attention{
	margin-bottom:20px;
}

/*-------------------------------------
  sec_01
--------------------------------------*/

#sec_01 {
  width: 100%;
  padding:0;
  margin-bottom:20px;
  overflow:hidden;
}

.shopinner_list{
	display:block;
	width:100%;
	overflow:hidden;
	padding:0;
}

#sec_01 .shopinner_list li {
	display:inline-block;
  float: left;
  width: 30%;
  margin-right: 5%;
  position: relative;
  box-sizing: border-box;
}
#sec_01 .shopinner_list li:last-of-type {
  margin-right: 0;
}



/*--------------------------------------------
  shop_info
--------------------------------------------*/
#shop_info {
  width: 100%;
  padding: 0 0 20px;
  margin-top:30px;
}
#shop_info .ttl_01 {
  text-align: center;
  margin-bottom: 30px;
}
#shop_info .ttl_txt {
  margin-bottom: 50px;
}
#shop_info .shop_box {
  width: 100%;
  margin: 0 auto;
}
#shop_info table {
  margin-bottom: 30px;
  width:100%;
}

#shop_info th {
  width: 14%;
  background: #708090;
  color: #fff;
  font-size: 15px;
  font-weight: normal;
  text-align: center;
  letter-spacing:0.5em;
  padding: 12px 10px;
  box-sizing: border-box;
  position: relative;
 border:solid 1px #C5BDBE;
}

#shop_info td {
  width: 86%;
  background: #fff;
  padding: 12px 0 12px 30px;
  box-sizing: border-box;
 border:solid 1px #C5BDBE;
}

.visitor{

width:90%;
margin:10px auto;
padding:2% 2%;
border:dotted 2px #4b4a4a;
box-sizing:border-box;
	
}

.visitor p{
	padding:0 30px;
}



/*--------------------------------------------
  traffic_access
--------------------------------------------*/
#traffic_access {
  width:100%;
  padding: 40px 0 0;
  background: #fff;
}
#traffic_access .inner{
	text-align:center;
}

#traffic_access .inner h2{
	text-align:left;
}

#traffic_access .ttl_box {
  margin-bottom: 30px;
}
#traffic_access .txt_box a.map_link {
  font-size:20px;
  background-color:#6495ed;
  color:#fff;
  padding:15px 30px;
}

#traffic_access a.map_link:hover{
	text-decoration:none;
	background-color:#708090;
}

#traffic_access .txt_box{
	margin:30px auto 50px;
}

.access-image{
	overflow:hidden;
	background-image:url("/image/accessimg.jpg");
	width:100%;
	background-size:cover;
	background-repeat:no-repeat;
	padding:30px 0;
}


#traffic-access .access-box{
	padding:20px 0;
}

.access-image p{
	color:#021953;
	font-weight:bold;
	text-shadow: 
0 0 40px #fff, 
0 0 50px #fff, 
0 0 50px #fff;
}


/*--------------------------------------------
  korekiyo
--------------------------------------------*/

#korekiyo .inner{
	background-image:url("/image/img_back.jpg");
	background-repeat:no-repeat;
	background-size:auto;
	overflow:hidden;
		  width: 98%;
		  height:600px;
		  margin-top:50px;
  max-width:1300px;
}

#korekiyo p{
	float:right;
	display:block;
	padding-top:80px;
	padding-bottom:20px;
	padding-right:50px;
	vertical-align:central;
}

#korekiyo p .main{
	font-size:38px;
	font-weight:bold;
	text-shadow: 2px 2px 1px #fff;
}

#korekiyo p .sub{
	font-size:18px;
		text-shadow: 
0 0 40px #fff, 
0 0 50px #fff, 
0 0 50px #fff;
}

@media screen and (max-width:800px){
	#korekiyo p{
		padding-right:10px;
	}
	
}

/*--------------------------------------------
  footer
--------------------------------------------*/
#footer {
  width:100%;
  padding:0;
  margin:0;
  overflow:hidden;
  background:#021953;
 
}


#footer #copyright {
	width:100%;
	 background:#021953;
  color: #fff;
  font-size:14px;
  text-align: center;
  padding: 10px 0;
}

@media screen and (max-width:600px){
	
	/*--------------------------------------------
  header
--------------------------------------------*/

body{
	font-size:15px;
	width:100%;
	letter-spacing: 0.03em;
	line-height:1.5;
}

.for_pc{
	display:none;
}

.for_sp{
	display:inline-block;
}

#layout{
	padding-top:10px;
	padding-bottom:60px;
}


#header {
  width:100%;
  position:relative;
  top:0;
  overflow:hidden;
  padding: 0;
  z-index: 99999;
}

#hdr_inner {
  width: 98%;
  margin:10px 1%;
  text-align:center;
  
}
#header .hdr_logo {
	width:40%;
  margin:0 auto 2%;
  padding:0;
}

h2.h2_text{
	font-size:20px;
}

h3.access{
	font-size:25px;
}




#traffic_access .access-box p{
	width:80%;
	margin:0 auto;
	text-align:left;
	line-height:1.4;
	font-weight:normal;
}

#traffic_access .txt_box a.map_link {
  font-size:18px;
}

#shop_info td {
  padding: 12px 0 12px 15px;
}

.visitor{
line-hgith:1.5;
	
}

/*-------------------------------------
  sec_01
--------------------------------------*/

#sec_01 .shopinner_list li {
	display:block;
  float: none;
  width: 90%;
  text-align:center;
  max-width:400px;
  margin:10px auto;
  position: relative;
  box-sizing: border-box;
}

#sec_01.shopinner_list li .img_box{
	text-align:center;
	width:100%;
	max-width:300px;
}

#sec_01 .shopinner_list .txt_box{
	max-width:300px;
	margin:0 auto;
}

#sec_01 .shopinner_list .left_txt{
	text-align:left;
}

#sec_01 .shopinner_list li:last-of-type {
  margin:0 auto;
}


.tel_sp{
	width:100%;
	height:68px;
	display:block;
	text-align:center;
	background-color:#f7ba17;
	position:fixed;
	bottom:0;
	right:0;
	z-index:9999;

}
.tel_sp img{
	max-width:100%;
}

/*--------------------------------------------
  korekiyo
--------------------------------------------*/

#korekiyo .inner{
	background-size:auto 100%;
		  width: 100%;
		  height:320px;
		  margin-top:20px;
}

#korekiyo p{
	float:none;
	display:block;
	padding-top:20px;
	padding-left:20px;
	padding-bottom:30px;
	padding-right:20px;
	background:rgba(255,255,255,0.3);
	vertical-align:central;
}

#korekiyo p .main{
	font-size:28px;
	text-shadow:none;
}

#korekiyo p .sub{
	font-size:15px;
	text-shadow:none;
}


}
