@import url(https://fonts.googleapis.com/css?family=EB+Garamond);
@charset "utf-8";
/* @group reset */
*{margin: 0;padding: 0; 
	font-size: 15px; font-family: Meiryo UI,verdana, arial, sans-serif;
	color: #333; line-height : 1.5}

body {-webkit-text-size-adjust: none;}

/* font size 
Large :18px ; Medium:15px; small: 13px;
147%,134%,120%,114%,107%,100%,94%,87%,80%,74%,67%;
*/

p, li {font-size: 94%;}

p {margin-bottom:1em;}
.small {font-size:74%; line-height:1em;}
*.small {line-height:2em;}

h1,h3,h3,h4,h5,h6 { margin-bottom : 12px;}

.wfGaramond {font-weight: normal;  font-family: 'EB Garamond', serif; -webkit-text-stroke: 0.3px #000;}
.serif { font-weight: normal;  font-family: serif; -webkit-text-stroke: 0.3px #000}

#top h1 {margin:0px; padding:0px; border:none;}
#index h1 { display: block; color: black; text-shadow: 0px 2px 2px #fff; text-align: center;
	font-size: 28px; margin-top: 24px;
	} 

#index h2 {font-size: 200%; color: black; border-left: 8px solid #666; padding-left: 8px; line-height:100%; margin-bottom: 24px; }

section.h3BgPlus {background: url(shared/images/h3Bg.gif) no-repeat top right; margin-bottom: 24px;}
.h3BgPlus h3 { display: block; width: 160px; height: 32px; 
	background: url(shared/images/h3Bg.gif) no-repeat top left; 
	padding: 4px 0px 0px 12px; text-shadow: 0px 1px 1px #fff;}

#top h2 {  font-weight: normal; 
	margin-bottom: 12px; padding-left: 8px; 
	border-left: 10px solid #666; line-height : 1.3333em;}

aside h3{ font-size : 80%; background:none; margin: 0px; padding: 0px;} 

a { text-decoration : none; color: #0000ff;}
a:hover, a:visited, a:active { color: #0000ff; }
ul, ol { list-style : none; }
img { vertical-align : middle; max-width : 100%;}
* {margin:0px; padding:0px;}

header,nav,section,article,aside,footer,adress {display:block; text-align:left; }
footer {background: #000;}

iframe {width: 100%; height: 540px; border: none;}

/* スマートフォン */

	#main {padding: 0px 12px;}
	
	#logoBox {margin: 0px;}
	img#logo {margin-top:18px;}
	#socialBtn {display:none;}
	#menuBox, #topImage {display: none;}
	 
	section.Recommend {width:100%; margin:0px 0px 12px 0px; padding: 0px; border: 1px solid #aaa; border-radius:6px; background: #eee;}
	a.amazon-img {float:left;}
	a.amazon-txt {display: block; overflow: hidden; text-shadow: 0px 1px 1px #fff;}
	a.amazon-img {margin: 12px;background:#ddd;}
	a.amazon-txt {margin: 12px 12px 12px 0px;padding: 0px;}
	h3.rcmnd {font-size:80%;}
	p.amazon-copy {font-size:74%; color: black;}
	
	#gotoPageTop {display: block; margin: 0px 0px 0px auto; width:148px;
	background: #aaa; border-top-left-radius: 6px; border-top-right-radius: 6px; 
	text-align: center; padding:4px; font-size: 80%; font-weight: bold; color: black; 
	text-shadow: 0px -1px 0px rgba(000,000,000,0.5), 0px 1px 0px rgba(255,255,255,0.8);}
	
	a.l-nav {display: block; text-decoration:none;padding: 8px; background-image:url(shared/images/nextTri.png); background-repeat: no-repeat; ; background-position: right center; color: black; border-bottom: 1px solid #aaa;}
	a.l-nav-last{border-bottom:none;}

	#menuBtn { display:block; text-align:center; margin: 12px 0px 12px auto; 
		width:48px; font-size: 11px; color: #ffffff; padding: 4px 8px;
		background: -moz-linear-gradient( top, #a3a3a3 0%, #3b3b3b 50%, #242424 50%, #000000);
		background: -webkit-gradient( linear, left top, left bottom,  from(#a3a3a3), color-stop(0.50, #3b3b3b), color-stop(0.50, #242424), to(#000000));
		-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
		border: 1px solid #000000;
		-moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.6);
		-webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.6);
		box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.6);
		text-shadow: 0px -1px 0px rgba(000,000,000,1), 0px 1px 0px rgba(255,255,255,0.2);
	}
	 a:link#menuBtn {color:#fff;}
	 
	 li {padding: 2px 0px 2px 12px; diplay: block;}
	 
	nav {background: #aaa; padding:12px;}
	#lowNavWrapper {display: block; background: #fff; 
		background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#ddd));
		background: -webkit-linear-gradient(#fff, #ddd);
		background: -moz-linear-gradient(#fff, #ddd);
		background: -ms-linear-gradient(#fff, #ddd);
		background: -o-linear-gradient(#fff, #ddd);
		background: linear-gradient(#fff, #ddd);
		padding:1px;
		-ms-border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;border-radius:6px;
		-moz-box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.5) ;
		-webkit-box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.5) ;
		-o-box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.5) ;
		-msbox-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.5) ;
		box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.5) ;
	 }
	.menuTitle { font-size:22px; color: #000; font-family: 'EB Garamond', serif;  margin:0px;line-height:1em;text-shadow: 1px 1px 0px #fff;  -webkit-text-stroke: 0.3px #000;}
	 
	footer { padding: 12px;text-align: center;}
	#footerLeft{line-height: 42px;margin-top: 12px;text-align: left;}
	#footerLeft,#footerRight {padding: 0px; color: #aaa; font-size: 74%;}
	
	#hotwill {font-size:200%; color: #aaa; font-weight: normal; font-family: 'EB Garamond', serif; margin:0px 0px 8px 0px; -webkit-text-stroke: 0.3px #aaa;}
	#tel, #telMain {display: block; width: 320px; font-size:18px; font-weight: bold; color: white;
		margin: 12px auto 12px auto;
		border: 2px solid #55A701;
		padding: 8px;
		text-align: center; width: 200px;
		-webkit-border-radius: 16px;
		-moz-border-radius: 16px;
		border-radius: 16px;
		background: #2E5A01;
		background: -webkit-gradient(linear, 0 0, 0 bottom, from(#2E5A01), to(#227A00));
		background: -webkit-linear-gradient(#2E5A01, #227A00);
		background: -moz-linear-gradient(#2E5A01, #227A00);
		background: -ms-linear-gradient(#2E5A01, #227A00);
		background: -o-linear-gradient(#2E5A01, #227A00);
		background: linear-gradient(#2E5A01, #227A00);
		text-shadow: 0px -1px 1px rgba(000,000,000,0.8), 0px 1px 1px rgba(255,255,255,0.8);
	}
	.tel:visited {color: #aaa;}
	
	#map {display: block; width: 320px; font-size:15px; font-weight: bold; color: white;
		margin: 0px auto 12px auto;
		border: 2px solid #E07700;
		padding: 8px;
		text-align: center; width: 200px;
		-webkit-border-radius: 16px;
		-moz-border-radius: 16px;
		border-radius: 16px;
		background: #702F01;
		background: -webkit-gradient(linear, 0 0, 0 bottom, from(#702F01), to(#AD5C01));
		background: -webkit-linear-gradient(#702F01, #AD5C01);
		background: -moz-linear-gradient(#702F01, #AD5C01);
		background: -ms-linear-gradient(#702F01, #AD5C01);
		background: -o-linear-gradient(#702F01, #AD5C01);
		background: linear-gradient(#702F01, #AD5C01);
		text-shadow: 0px -1px 1px rgba(000,000,000,0.8), 0px 1px 1px rgba(255,255,255,0.8);
	}

	#copyright {text-align: center; color: #ddd; font-size: 67%;}

	input, textarea { padding:2px; font-size: 100%;}
	a.btn{text-decoration: none; display:block; margin: 12px auto 0px auto;width: 96px; height: 32px; border: 0px; background: url(https://hotwill.jp/shared/img/btnBg01.gif);
	text-align: center; line-height: 32px; color: black; font-weight: bold; text-shadow: 1px 1px 0px #fff;}
	a.btn:hover {background: url(https://hotwill.jp/shared/img/btnBg01-hover.gif); color: #080;}
	a.btn:active {background: url(https://hotwill.jp/shared/img/btnBg01-active.gif);outline: none; color: #00f;}
	
	.error {font-size:10px; color: red; font-weight: bold;}

	#gmapArea {display:none;}
	
	form { margin-bottom: 16px;}
	
	#mbMenuBox { 
		position: absolute; z-index: 999; width: 100%; 
		box-sizing: border-box; padding: 8px; 
		background: #ccc; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3 );
		border-bottom: 1px solid #666;
	}

/* TAB,PAD系 */

@media screen and (min-width : 768px) {

	body {background: url(shared/images/bodyBg.gif ) repeat-x; }
	
	header {margin-bottom: 24px;}
	#menuBox, #topImage {display: block; }
	#main {padding: 0px;}
	#menuBtn, #topImageS {display: none;}

	#logoBox, article, aside, #gotoPageTopBox, #footerWapper,h1, iframe, #wrapper
	{margin: 0px auto; padding: 0px; width:736px; }

	#logoBox: { overflow: hidden; position: relative; zoom:1; }
	#logoBox { height:105px; text-align: left;}
	#socialBtn {display:block; margin: 0px;float:right;margin-top: 60px; width:60px;text-align: right;}
	.sBtn {display: inline;}
	img#logo {width: 240px;  float: left;}
	
	article {min-height: 260px;}
	
	#menuBox { height: 96px; text-align:center; margin: 0px auto; text-align: center;}

	#copyWrap {width: 736px; margin: 96px auto 0px auto; text-align:center;
				color: white; line-height:1.3em; text-shadow:0px 0px 5px #000;}
	#topImage {height:320px; border-top: 1px solid #fff; margin:0px auto;}
	h3#copy {margin: 0px 0px 12px 0px; font-size:24px; border: none; padding: 0px; font-family: 'EB Garamond', serif; font-weight: normal; -webkit-text-stroke: 0.3px #aaa; letter-spacing: 10px;}
	p#welcomeCopy { font-size:12px; letter-spacing: 4px;}

	#index h1 {border-top-left-radius: 0px; border-top-right-radius: 0px;}

	.linkHover, .linkHoverExt{display: block; border-radius: 2px;}
	.linkHover:hover, .linkHoverExt:hover{text-shadow: 0px 1px 1px #fff; cursor: pointer; }

	section.full {width: 100%; margin-bottom: 24px;}

	aside {overflow: hidden; position: relative; zoom:1;}
	section.Recommend { width:362px; margin: 0px 0px 12px 0px; }
	.l { clear: both; float: left; }
	.r { float: right;}
	
	#telMain {background:#cae1c9; color: #000; font-size: 300%; font-family: serif; font-weight: normal; width: 640px ; text-align: center; border: 4px solid #008800; text-shadow: 0px 2px 2px #fff;}
	
	.menuTitle {display: block;}
	 a.l-nav {display: block; text-align: center; border-radius: 12px;}

	nav { clear: both; border-top: 2px dotted #aaa; background: #aaa; padding:0px;}
	#lowNavWrapper {width:736px; margin:0px auto; background: none; border: none; box-shadow: none; }
	a.l-nav {display: inline-block; width:147px; margin:12px 0px; padding: 6px 0px; border: none; background: none; background:none;*display: inline; *zoom: 1; }
	
	footer {clear:both;}
	#footerWrapper {width:736px; margin: 0px auto; overflow: hidden; position: relative; zoom:1;}
	#footerLeft, #footerRight {float: left; width: 368px; margin: 24px 0px; text-align: left;padding}
	#footerLeft {text-align: left;}

	.twitter-share-button {width:96px!important;}
	
	#tel {background: none; border: none; 
		margin:0px; padding: 0px; font-size: 10px;  font-weight: normal;
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
		text-align: left;
	}

	#map {background: none; border: none; 
		margin:0px; padding: 4px; 
		font-size: 10px;  font-weight: normal;
		width: 160px;
		border: 1px solid #666;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
	}
	
	#map:hover {background: #333;}
	
	input, textarea { font-size:15px; padding: 4px; font-size: 15px; border: 1px solid #aaa; font-family: Meiryo UI,verdana, arial, sans-serif;border-radius: 3px;}
	input:hover, textarea:hover {border: 1px solid #666;}
	input  {border: 1px solid #aaa; }
	textarea { border: 1px solid #aaa; width: 50%;}

	
	dt {display:block; width:150px; float: left; clear: left; font-size: 12px;font-weight: bold; text-align:right; margin-right: 12px;}
	dd {display:block; margin-bottom: 12px;}

	form#frm {display: block; width: 99%; background: #ddd; padding: 24px 12px; }
	table#form { border-collapse: collapse; margin: 0px auto;}
	th,td {padding: 4px;}
	th {background: #666; color: white; font-size: 10px;border-bottom: 1px solid #fff; }
	td {background: #eee; }
	
	#gmapArea {display:block;}
}
/* PC */
@media screen and (min-width : 1024px) {

	#logoBox, #menuBox,#lowNavWrapper,#gotoPageTopBox,h1, iframe {width:960px; }
	#wrapper { overflow: hidden; position: relative; zoom:1; width:960px; margin: 0px auto; padding:0px;}

	article {width:614px; float: left;  margin: 0px 24px 0px 0px;}
	aside {width:322px;  float: left; margin: 0px}
	section {width: 614px; margin: 0px;}
	section.Recommend { width:320px;}
	
	article.full {width: 960px;}

	
	a.l-nav{width:192px;}

	#footerWrapper {width:960px;}
	#footerLeft {line-height: 36px;}
	#footerLeft, #footerRight {width: 480px;}
	
	#tel,#map {text-shadow: none;}
}