@charset "UTF-8";
/* CSS Document */

/*reset
---------------------------------------------------------- */
html, body, div, h1, h2, h3, h4, p, ul, li, dl, dt, dd, small {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}

ul { list-style: none; }
a { text-decoration: none; }
img {
  border: 0;
  vertical-align: bottom;
}
a.tel {text-decoration: underline;}
article, aside, dialog, figure, footer, header,
main, menu, nav, section{display:block;}

/*font-size
---------------------------------------------------------- */
html { font-size: 62.5%; }
body { font-size: 16px; font-size: 1.6rem; }
h1 { font-size: 46px; font-size: 4.6rem; }
h2 { font-size: 24px; font-size: 2.4rem; }
h3 { font-size: 18px; font-size: 1.8rem; }
h4 { font-size: 16px; font-size: 1.6rem; }
p { font-size: 16px; font-size: 1.6rem; }
ul, li { font-size: 16px; font-size: 1.6rem; }
dl, dt, dd { font-size: 16px; font-size: 1.6rem; }
small { font-size: 14px; font-size: 1.4rem; }


/*commmon
----------------------------------------------------------------------------- */
.inner {
	width:960px;
	margin:0 auto;
	position:relative;
}
header {
	width:100%;
	background:#9dede3;
}
header h1 {
	position:absolute;
	top:50px;
	left:0;
	padding:10px;
	background:rgba(255,255,255,0.5);
}
header h1 a{
	display:block;
	color:#0e166c;
}
header p {
	position:absolute;
	top: 180px;
	right:0;
	color:#0e166c;
	padding:10px;
	line-height:1.3;
	background:rgba(255,255,255,0.5);
}
header p.desc {
	width:100%;
	position:absolute;
	top:4px;
	left:0;
	padding:0;
	color:#0e166c;
	background:none;
}
header img {
	padding-top:24px;
	width:100%;
	height:300px;
}
header p span {
    font-size: 1.6em;
    padding-left: 10px;
}
nav {
	width:100%;
	height:50px;
	background:#20b2aa;
}
nav ul {
	overflow:hidden;
}
nav ul li.current {
	background:#39c3bb;
}
nav ul li {
	width:192px;
	float:left;
	line-height:50px;
	text-align:center;
	border-right:1px solid #80e7df;
	box-sizing:border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box; 
}
nav ul li:first-child {
	border-left:1px solid #80e7df;
}
nav ul li a {
	color:#FFF;
	display:block;
}
nav ul li a:hover {
	background:#39c3bb;
}
nav ul li.contact {
	display:none;
}
.wrapper {
	width:940px;
	overflow:hidden;
	margin:20px auto;
	padding: 0 10px;
}
#contents {
	float:left;
	width:640px;
	margin-right:50px;
}
aside {
	width:250px;
	float:left;
}
aside #gmap {
	border:10px solid #FFF;
	box-shadow:0px 0px 2px #999;	
}
aside #info h3, aside #hours h3{
	height: 18px;
    padding: 6px 12px;
	color:#FFF;
	font-weight:500;
    border-top: 3px solid #f7ab39;
    border-bottom: 3px solid #f7ab39;
	background:url(../img/titleprange.png) no-repeat top left;
}
aside #hours h3{
	margin-top:40px;
}

aside #info p, aside #hours dl {
    padding: 8px 10px;
    line-height: 1.4;
}
aside #hours dt {
	float:left;
	padding-bottom:8px;
}
aside #hours dd {
	padding-left:100px;
	padding-bottom:8px;
}
footer {
	clear:both;
	padding:10px 0;
	color:#f2f2f2;
	font-weight:100;
	background:#4e2f06;
}
footer p{
	line-height:1.4;
}
footer #left, footer #middle, footer #right {
	float:left;
	
}
footer #left, footer #middle {
	width:320px;
}
footer #left p, footer #middle p {
	letter-spacing:2px;	
}
footer #right {
	width:250px;
}
footer #left h5 {
    font-size: 40px;
    margin:0 0 12px;
}
footer #middle {
	margin-right:50px;
}
footer #middlesp {
	display:none;
}
footer #right p.phone {
    height: 50px;
    margin-bottom: 10px;
    line-height: 1.2;
	text-align:center;
    box-shadow: 1px 1px 2px #999;
    border-radius: 10px;
    background: url(../img/phonebtn.png) no-repeat top left;
}
footer #right p.phone span{
	font-size:20px;
}
footer #right p.mail {
    height: 50px;
    margin-bottom: 10px;
    line-height: 1.4;
	text-align:center;
    box-shadow: 1px 1px 2px #999;
    border-radius: 10px;
    background: url(../img/mailbtn.png) no-repeat top left;
}
footer #right a {
	height: 46px;
	padding: 4px 2px 0px 50px;
    color: #FFF;
	display:block;
}
footer #right p:hover {
	opacity:0.9;
}
footer p.copyright {
	clear:both;
	padding-top: 20px;
	text-align:center;
}

/*toTop button
---------------------------------------------------------- */
#toTop a{
  display:block;
  position:fixed;
  right:20px;
  bottom:26px;
  opacity:0.8;
  z-index: 1;
}
#toTop a:hover {
  opacity:1.0;
}

/*home
----------------------------------------------------------------------------- */
#contents #news {
	padding:10px;
	margin-bottom:30px;
	box-shadow:2px 2px 2px #CCC;
	border:2px solid #996c33;
}
#contents p.latestnews {
    width: 80px;
    margin-bottom: 10px;
    padding-left: 10px;
    font-size: 18px;
    line-height: 1.4;
    text-shadow: 1px 1px #CCC;
    border-left: 5px solid brown;
    border-bottom: 1px solid brown;
}
#contents .grbg {
	height: 40px;
    padding: 6px 10px;
	margin-bottom:20px;
    background: #00a5aa;
    box-shadow: 2px 2px 2px #CCC;
}
#contents h2 {
	width: 620px;
    height: 40px;
    padding: 8px 0 8px 16px;
	color:#FFF;
    border: 1px solid #cce198;
    box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box; 
    background: #00a5aa;
}
#contents p {
	padding-left:16px;
	line-height:1.6;
}
#contents #welcome {
	margin-bottom:40px;
}

/*about
----------------------------------------------------------------------------- */
#contents #greeting {
	overflow:hidden;
}
#contents #greeting .portrait, #contents #greeting p.aisatsu {
	/*float:left;*/
}
#contents #greeting .portrait {
	margin-bottom:10px;
	text-align: center;
}
#contents #greeting p.aisatsu {
	/*width:66.75%;*/
	margin-bottom:20px;
	padding-left: 0;
}
#contents #greeting .portrait img{
	/*margin-left:2px;*/
	border:5px solid #FFF;
	box-shadow:0px 0px 2px #999;
}
#contents #greeting table {
	clear:both;
	width:640px;
	margin-bottom:40px;
	border:1px solid #CCC;
	border-collapse:collapse;
}
#contents #greeting table caption{
	background:#FAA14D;
	padding: 4px 0 4px 0px;
}
#contents #greeting th{
	float:left;
	width:200px;
	padding:4px 0;
	text-align:center;
	font-size:16px;
	font-weight:normal;
	border-top:1px solid #CCC;
}
#contents #greeting td{
	width:440px;
	padding: 4px 0 4px 20px;
	border-top:1px solid #CCC;
	border-left:1px solid #CCC;
}
#contents #greeting th.profile{
	border-top:none;
}
#contents #greeting td.profile{
	border-top:none;
}
#contents #atmosphere ul {
	overflow:hidden;
}
#contents #atmosphere ul li {
    float: left;
    margin-top: 1px;
    margin-left: 4.125px;
    margin-bottom: 5px;
    border: 5px solid #f7f7f7;
    box-shadow: 0px 0px 1px #999;
}
#contents #atmosphere ul li.lefty{
	margin-left:1px;
}

/*fee
----------------------------------------------------------------------------- */
#contents .fee  {
	margin-bottom: 40px;
}
#contents .fee table  {
	border-collapse:collapse;
	border:2px solid #CCC;
	margin:10px 0;
}
#contents .fee table td {
	border-bottom:1px solid #CCC;
	border-left:1px solid #CCC;
}
#contents .fee table th {
	width:140px;
	border-bottom:1px solid #CCC;
}
#contents .fee table th{
	padding:0px 10px;
	line-height: 1.2;
}
#contents .fee table td {
	width:420px;
	padding: 10px 30px;
	line-height:1.6;	
}
#contents #fee1 table th {
	background:#e2effc;
}
#contents #fee2 table th {
	background:#ffefff;
}

#contents #appointment .grbg {
	margin-top:30px;
}

/*access
----------------------------------------------------------------------------- */
#contents #access table  {
	border-collapse:collapse;
	border:2px solid #CCC;
	margin-bottom:40px;
}
#contents #access table td {
	border-bottom:1px solid #CCC;
	border-left:1px solid #CCC;
}
#contents #access table th {
	width:180px;
	border-bottom:1px solid #CCC;
	background:#f0ebdf;
}
#contents #access table th{
	padding:0px 10px;
}
#contents #access table td {
	width:380px;
	padding: 10px 30px;
	line-height:1.6;	
}
#contents #gmap {
	margin:20px 0;
	border:10px solid #FFF;
	box-shadow:0px 0px 2px #999;	
}
#contents #bicycle {
    height: 234px;
    background: url(../img/bicycle.png) no-repeat bottom right;
}

/*english
----------------------------------------------------------------------------- */
#contents #english table  {
	border-collapse:collapse;
	border:2px solid #CCC;
	margin:20px 0;
}
#contents #english table td {
	border-bottom:1px solid #CCC;
	border-left:1px solid #CCC;
}
#contents #english table th {
	width:180px;
	border-bottom:1px solid #CCC;
	background:#f0ebdf;
}
#contents #english table th{
	padding:0px 10px;
}
#contents #english table td {
	width:380px;
	padding: 10px 30px;
	line-height:1.6;
}

/*contact
----------------------------------------------------------------------------- */
#contents #contact form,
#contents #confirm form {
	width:640px;
}
#contents #contact form table,
#contents #confirm form table {
	width:100%;
	border-collapse:collapse;
	margin:20px 0;
}
#contents #contact form table td,
#contents #confirm form table td {
	border-bottom:1px dotted #CCC;
}
#contents #contact form table th,
#contents #confirm form table th {
	width:180px;
	padding:10px 10px;
	border-bottom:1px dotted #CCC;
}
#contents #contact form table td,
#contents #confirm form table td {
	width:380px;
	padding: 10px 20px;
	line-height:1.6;
}	

/*mail
----------------------------------------------------------------------------- */
#contents #confirm p.error_messe{
	margin:5px 0;
	color:red;
}

/*thanks
----------------------------------------------------------------------------- */
#contents p.thanksname {
	text-align:right;
	margin: 2% 18%;
}

@media screen and (max-width: 768px) {
.inner {
	width:98%;
}
nav ul li {
	width:20%;
}
#contents {
	width:68%;
	margin-right:2%;
}
#contents h2 {
	width:100%;
}
#contents #gmap iframe{
	width:100%;
}
#contents #greeting .portrait, #contents #greeting p.aisatsu {
    float: none;
}
#contents #greeting .portrait {
    width: 100%;
    text-align: center;
}
#contents #greeting .portrait img {
	width: 95%;
}
#contents #greeting p.aisatsu {
	width: 96%;
    padding-left: 0;
    margin: 0 auto 20px;
}
#contents #greeting table {
	width:100%;
}
#contents #greeting th{
    width: 100%;
}
#contents #greeting td{
	width:75%;
	padding: 4px 10px;
}
#contents #atmosphere ul li, #contents #atmosphere ul li.lefty {
	width: 46.5%;
	margin:0 0 1% 0;
}
#contents #atmosphere ul li:nth-child(odd) {
	margin:0 1% 0 1%;
}
#contents #atmosphere ul li img{
	width:100%;
}
#contents #contact form,
#contents #confirm form {
	width:100%;
}
#contents #contact form table,
#contents #confirm form table{
	width:100%;
}
#contents #contact form table th,
#contents #confirm form table th {
	width:20%;
}
#contents #contact form table td,
#contents #confirm form table td {
	width:20%;
}
#contents #fee table th {
    width: 30%;
}
#contents #bicycle  {
	height: 290px;
    background-position: bottom right;
}
#contents .grbg.eng h2 {
	font-size:20px;
}
aside {
	width:30%;
}
aside #info, aside #hours {
	width:100%;
}
aside #gmap iframe{
	width:100%;
}
footer {
	width:100%;
	padding:10px 0;
}
footer #left, footer #middle {
	width: 33%;
	margin-right:2%;
}
footer #right {
	width:30%;
}
footer #right p {
	font-size:12px;
}
footer #right p.phone span {
	font-size:18px;
}
br.sp {
	display:none;
}

}

@media screen and (max-width: 640px) {
body {
	overflow:auto;
}
.inner.spnav {
		width:100%;
}
header p {
	font-size:12px;
}
header p {
    position: absolute;
    top: 200px;
    right: 0;
}	
header p.desc {
	font-size:10px;
}
nav {
	height:153px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box; 
}
nav ul {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box; 
}
nav ul li {
	width:50%;
	height:51px;
}
nav ul li.contact {
	display:block;
}
nav ul li:first-child {
	border-left:none;
}
nav ul li:nth-child(even) {
	border-right:none;
}
nav ul li:nth-child(-n+4) {
border-bottom:1px solid #80e7df;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box; 
}
.wrapper {
	padding:0 0 0 0;
}
#contents {
	margin-bottom:30px;
	margin-right:0;
	width:100%;
	float:none;
}
#contents .fee table th {
	width:30%;
	padding:0 6px;
}
#contents #gmap {
    margin: 20px auto;
    width: 92%;
}
#contents #access table td {
	padding:1.5%;
}
#contents #bicycle {
    height: 310px;
	background-position: bottom center;
}
#contents #atmosphere ul li, #contents #atmosphere ul li.lefty {
	width:45.5%;
}
#contents #english table td {
	padding:10px;
}
#contents #contact form,
#contents #confirm form {
	width:100%;
	margin:0 auto;
}
#contents #contact form table,
#contents #confirm form table {
	width:100%;
	margin:0 auto;
	box-sizing:border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box; 
	border-top: 1px solid #CCC;
	border-left: 1px solid #CCC;
	border-right: 1px solid #CCC;
}
#contents #contact form table th,
#contents #confirm form table th {
    width: auto;
    display: block;
	text-align:left;
	line-height:1.6;
	background: #eee;
}
#contents #contact form table td,
#contents #confirm form table td {
    width: auto;
    display: block;
	border-bottom: 1px solid #CCC;
}
#contents .grbg.eng h2 {
    font-size: 14px;
    line-height: 22px;
	padding: 8px 0 8px 8px;
}
aside {
	float:none;
	width:100%;
}
aside #info h3, aside #hours h3 {
	background-repeat: repeat-x;
}
aside #gmap{
	width: 92%;
    margin: 0 auto;
}
aside #hours h3 {
    margin-top: 20px;
}
footer .wrapper.inner{
	margin:0 auto;
}
footer #left {
	float:none;
	width:98%;
	margin-bottom:10px;
}
footer #middle {
	display:none;
}
footer #middlesp {
	display:block;
	margin-bottom:10px;
}
footer #left p, footer #middlesp p{
	font-size:14px;
}
footer #right {
    padding: 0 2%;
	width:auto;
}
footer #right p {
	float:none;
    margin-left: 8%;
    width: 100%;
	font-size:16px;
}
footer #right p.phone {
	margin-right:0;
}
footer #right p.phone span {
	font-size:20px;
}
footer p.copyright {
	padding-top:10px;
}
br.sp {
	display:block;
}
br.spnone {
	display:none;
}
}