@charset "utf-8";

html{
	overflow-y: scroll;
	height:100%;
}

body {
    font-family: 'Garamond', 'Times New Roman', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'MS PMincho', 'メイリオ', Meiryo, serif;
    line-height: 1.7;
	height: 100%;
	width:100%;
	-webkit-text-size-adjust:100%;
    /*background:#FBFAF5;*/
}

#wrapper {
    /* 画像を常に天地左右の中央に配置 */
    background-position: center center;

    /* 画像をタイル状に繰り返し表示しない */
    background-repeat: no-repeat;

    /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
    background-attachment: fixed;

    /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
    background-size: cover;
}

#about #wrapper {
    background-image: url(../images/bg_about.jpg);
}

#room #wrapper {
    background-image: url(../images/bg_room.jpg);
}

#style #wrapper {
    background-image: url(../images/bg_style.jpg?20181020);
}

#cusine #wrapper {
    background-image: url(../images/bg_cusine.jpg);
}
/*--------------------------------------------------
	header
--------------------------------------------------*/
header {
    overflow: hidden;
    position: fixed;
    width: 100%;
    z-index: 100;
    background: url(../images/bg_header.png) repeat-x;
    height: 108px;
    line-height: 1;
}

#hcontents {
    width: 1024px;
    margin: 20px auto 30px;
}

#hcontents h1 {
    float: left;
    width: 180px;
    margin: 0 0 0 18px;
}

#hcontents h1 img {
    width:100%;
    height:auto;
}
/*#limit {
    text-align: center;
    letter-spacing: .25em;
    color: #cc6600;
    font-size: 120%;
    margin-top: 10px;
}

#limit-inner {
    width: 9em;
}

#limit-inner:before,
#limit-inner:after {
    content: "";
    border: 1px solid #cc6600;
    width: 10px;
    height: 10px;
    display: inline-block;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
}

#limit-inner:before {
    margin: 0 20px 0 0;
}

#limit-inner:after {
    margin: 0 0 0 20px;
}*/

#gnav {
    float: right;
    width: 784px;
    margin-right: 15px;
    display: table;
    margin-top: 12px;
}

#gnav li {
    list-style: none;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    font-size: 95%;
}

#gnav li#nav_about a{
    padding-bottom: 0.8em;
}

@-moz-document url-prefix() {
    #gnav li#nav_about a {
        padding-bottom: 0.55em;
    }
}

#gnav li#nav_contact {
    padding-left: 10px;
    width: 11.5em
}

#gnav li#nav_contact .btn-inner {
    display: block;
    padding: 15px 0 12px;
    background: rgba(162,146,48,1.0);
}

#gnav li #nav_contact_sp {
    display: none;
}
#gnav li a {
    text-decoration: none;
    color: #222;
    display: block;
}

#gnav li#nav_contact a {
    color: #fff;
}

#gnav li a:hover {
    opacity: 0.7;
}

#gnav li#nav_contact a:hover .btn-inner{
    background: rgba(162,146,48,0.7);
}

#about #nav_about a,
#room #nav_room a,
#style #nav_style a,
#cusine #nav_cusine a,
#gallery #nav_gallery a,
#price #nav_price a,
#access #nav_access a{
    color: brown;
}
/*--------------------------------------------------
	common layout
--------------------------------------------------*/
#box {
    position: relative;
    clear: both;
    overflow: hidden;
    width: 960px;
    margin: 0 auto 0;
    padding: 140px 32px 32px;
    background: rgba(255,255,255,0.9);
}

footer {
    overflow: hidden;
    position: relative;
    bottom: 0;
    /*background:rgba(34,38,82,0.96);*/
    background: #222659;
    width: 100%;
    text-align: center;
    padding: 10px 0 0;
}

.fcontents {
    margin: 10px;
}
footer p {
    text-align: center;
    color: #fff;
    font-size: small;
}

footer a {
    color: #fff;
}

/*--------------------------------------------------
	parts
--------------------------------------------------*/
#title {
    font-size: 180%;
    /*font-weight: normal;*/
    margin-bottom: 1em;
    /*-webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
    position: absolute;
    left: 70px;
    letter-spacing: 0.1em;*/
}

#box h2 {
    font-size: 140%;
    margin-bottom: 0.5em;
}

table{
	border:1px solid #ccc;
	margin:0 0 15px;
	clear:both;
}

th{
	padding:5px 10px 3px;
	background:#EEEEDD;
	border-bottom:1px solid #ccc;
	text-align:left;
    font-weight: normal;
    font-size: small;
}


td{
	padding:5px 10px 3px;
	border-bottom:1px solid #ccc;
	background:#fff;
    font-size: small;
}

ol{
	counter-reset:li;
	list-style-type:none;
	*list-style-type: decimal; 
}

.list{
	margin:0 0 10px;
	float:left;
	overflow:hidden;
}

.list dt{
	margin-bottom:0.5em;
	font-weight:normal;
}

.list dt{
	background:url(../images/icon_list.gif) no-repeat left 0.6em;
	padding-left:14px;
	margin-bottom:0.15em;
	float:left;
	width:15em;
	clear:both;
}

.list dd{
	margin:0 0 0.2em 18em;
}

.list li{
	background:url(../images/icon_list.gif) no-repeat left 0.6em;
	padding-left:14px;
	margin-bottom:0.15em;
}

.br-sp {
    display: inline;
}

.small {
    font-size: 80%;
}

.x-small {
    font-size: 60%;
}

.italic {
    font-style: italic;
    opacity: 0.5;
}

.clear {
    clear: both;
}

.clearfix {
    zoom: 1;
    /*for IE 5.5-7
}

.clearfix:after {
    /*for modern browser*/
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}
.center {
    text-align:center;
}
.large {
    font-size: 120%;
}
.photo img {
    border-radius: 50%;
}
.attention {
    color: red;
    font-weight: bold;
}
/*--------------------------------------------------
	index
--------------------------------------------------*/
#top-wrapper {
    position: relative;
}

.img-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 66.66% 0 0;
}

.img-wrapper::before {
    content: '';
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

.img-wrapper img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#top-wrapper p {
    position: absolute;
    left: 0;
    top: 0;
    right: 60%;
    bottom: 0;
    margin: auto;
    z-index: 50;
    width: 168px;
    height: 420px;
}

#top-wrapper p img {
    width:100%;
    height:auto;
}
.block {
    display: flex;
    justify-content: center;
    align-items: center;
    -js-display: flex;
    background: #222;
}

.block:nth-child(odd) {
    flex-direction: row-reverse;
}

.txt-area,
.photo-area {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
    text-align: center;
    height: 100%;
}

.photo-area img {
    max-width: 100%;
    height: auto;
    line-height: 1;
    vertical-align: bottom;
}

.txt-area {
    color: #fff;
}

.txt-content {
    display: block;
}
.txt-area h2 {
    font-size: 180%;
    line-height: 1.4;
    letter-spacing: .1em;
    margin-bottom: 1em;
}

.txt-area h2 ruby rt {
    font-size: 0.25em;
}
.btn {
    padding: 20px 0;
    width: 50%;
    border: 1px solid #fff;
    margin: 0 auto;
}

a.link_top{
    color: #fff;
    text-decoration: none;
    width: 100%;
    height: auto;
    text-align: center;
    display: block;
    margin: -15.5% 0;
    padding: 16% 0;
}

a.link_top:hover {
    opacity: 0.7;
}
/*--------------------------------------------------
	about
--------------------------------------------------*/
#aboutwrap {
    /*margin-bottom: 40px;*/
    /*width: 780px;*/
}
#aboutwrap p {
    margin-bottom: 1em;
}

#aboutcontents {
    width: 40em;
    margin-bottom: 40px;
    float: left;
}

/*--------------------------------------------------
	style
--------------------------------------------------*/
.stylewrap {
    overflow: hidden;
    margin-bottom: 60px;
}
.headeing{
    position: relative;
    background: #000;
    width: 20%;
    height: 20%;
    padding: 15% 5% ;
    border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    margin-right: 3.3%;
    float: left;
    clear:left;
}

.headeing h2 {
    position: absolute;
    left: 0;
    top: 50%;
    margin: -.75em 0 0;
    width: 100%;
    text-align: center;
    color: #fff;
}

.stylecontents {
    width: 66.66%;
    float: left;
}

.stylecontents img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

/*--------------------------------------------------
	room
--------------------------------------------------*/
.map_room {
    overflow: hidden;
    margin-bottom: 40px;
    margin-left: 20px;
}
.map_room img {
    width: 100%;
}
.area_room {
    margin-bottom: 10px;
}
.comment {
    margin-left: 95px;
}
.comment dl dt {
    float: left;
    clear: left;
    width: 7em;
    margin-left: -0.5em;
}
.comment dl dd {
    margin-bottom: 1em;
    padding-left: 7em;
}

.comment dl dt a:hover {
    text-decoration: none;
}

/*--------------------------------------------------
    cusine
--------------------------------------------------*/
.box_cusine {
    -js-display: flex;
    display: flex;
    padding-left: 2%;
}
.box_center {   
    width: 32%;
    order: 2;
    padding: 0 1%;
}
.box_center h1 {
    margin-top: 60px;
}
.box_left {
    width: 32%;
    order: 1;
}
.box_right {
    width: 32%;
    order: 3;
}
.box_cusine img,
.box_cusine-2 img {
    max-width: 100%;
}
.box_cusine-2 {
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
    padding-left: 2%;
}
.box_seconds {
    width: 32%;
}
.box_seconds:nth-child(2),
.box_seconds:nth-child(5) {
    padding: 0 1%;
}
/*--------------------------------------------------
	gallery
--------------------------------------------------*/
#grid-wrapper {
    position:relative;
    max-width: 1200px;
    margin: 0 auto;
}
.grid {
    width: 100%;
    margin: 0 auto;
    line-height: 0;
    padding:108px 0 0;
/*
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 320px 160px 160px auto;
*/
}

.grid-item {
    margin: 0 auto;
    width: 240px;
    height: 160px;
}

.grid-item--width2 { width:  480px; }
.grid-item--height2 { height: 320px; }
.grid-item--height2-2 { height: 320px; }

.grid-item a:hover {
    opacity: 0.7;
}

/*--------------------------------------------------
    price
--------------------------------------------------*/
.pricewrap {
    display: flex;
    justify-content:space-between;
}
.pricecol {
    width: 48.5%;
    
}
.pricewrap table {
    width: 100%;
    text-align: left;
    margin-bottom: 2em;
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

.pricewrap th {
    width: 9em;
}
.pricewrap td.yen {
    text-align:right;
    width: 6.5em;
}

/*--------------------------------------------------
	access
--------------------------------------------------*/
section.access{
	
}

section.access p{
	margin-bottom:10px;
}

#map_canvas{
	width:400px;
	height:400px;
	margin:0 0 30px 0;
	border:1px solid #ccc;
}

.info{
	float:left;
	width:460px;
    margin:0 40px 40px 0;
}

.info h2{
	margin-bottom:0;
    line-height: 1.2;
    margin-bottom: 0.75em !important;
}

.info h3{
	margin-bottom:5px;
}

/*--------------------------------------------------
	contact
--------------------------------------------------*/
#ban_tel {
    margin-bottom: 20px;
}
.message {
    margin-bottom: 40px;
}
#formWrap {
	width:900px;
/*	margin:10px auto;*/
	line-height:120%;
	/*font-size:90%;*/
}

#appli-jinja #formWrap {
	width:800px;
}

#formWrap h2{
	margin:0 0 20px;
	text-align:center;
}
#formWrap h3{
	font-family:"Times New Roman","ヒラギノ明朝 ProN W3", "HiraMinProN", "HG明朝E", "メイリオ", Meiryo, serif;
	background:url(../images/icon_heading.png) no-repeat left top;
	line-height:1.2;
}

#formWrap table.formTable p {
	margin:0 0 5px;
	padding:0;
	font-size:13px;
}

table.formTable {
	margin:10px auto 20px;
	border-collapse:collapse;
	width:900px;
	table-layout: fixed;
}

table.formTable td, table.formTable th {
	border:1px solid #eee;
	padding:12px 12px 8px;
	font-size:100%;
}

table.formTable th {
	font-weight:normal;
	width: 28%;
	text-align:left;
	vertical-align:top;
}

.m-alert{
	padding: 0px 5px;
	float: right;
	background-color:#cd4860;
	color: #FFF;
	margin: 0px;
	font-weight: normal;
	font-size: 85%;
	border-radius: 3px;
}
input.checkbox, input.radio{
	top:-2px;
	margin-right:4px;
	position:relative;
	border:none;
}
input.bottom{
	margin-bottom:5px;
}
input.required,
select.required,
textarea.required{
	/*background:#ffdddd;*/
}

input:focus,
label:hover{
	background:#ffea98;
}

label:hover{
	border-radius:5px;
	cursor:pointer;
}

select{
	margin:-5px 4px 5px 0;
    font-size:16px;
}
table.formTable td ul li{
	margin-bottom:5px;
    list-style: none;
}
table.formTable td ul li:last-child{
	margin-bottom:0;
}

table.formTable td.error input , 
table.formTable td.error textarea , 
table.formTable td.error label {
    background:#FFCCCC;
}
* html table.formTable td.error label {
    background:none;
}
*+html table.formTable td.error label{
    background:none;
}
table.formTable td p.error{
    margin:0;
    color:red;
    font-weight:bold;
    margin-bottom:1em;
}
table.formTable td dl dt{
	float:left;
	width:6em;
	clear:both;
}

input[type="text"],
textarea{
	padding:2px 4px;
}
input[type="submit"],
input[type="reset"],
input[type="button"]{
	font-size: 100%;
    padding: 0.2em 0.4em;
    background: #eee;
    color: #333;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 0 1px rgba(0,0,0,.2);
    border: 1px solid #ccc;
    text-shadow: -1px 1px 0 rgba(255,255,255,1);
}

@media all and (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto;
    }
    header {
        width: 100%;
        height: 108px;
        position: inherit;
    }
    #hcontents {
        width: 100%;
        margin: 3% 0 0;
    }
    #hcontents h1 {
        width: 20%;
        margin: 0 3% 0 2%;
    }
    #limit {
        padding-top: 0.5%;
    }
    #gnav {
        float: right;
        width: 73%;
        /*background: none;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;*/
        margin: 0.75% 2% 0 0;
    }
    #gnav li {
        font-size: 86%;
        vertical-align: middle;
    }
    #gnav li a {
        display: block;
        font-weight: bold;
        padding: 0;
        line-height: 1.2;
    }
    .br-sp {
        display: block;
    }
    #gnav li#nav_contact {
        color: #fff;
        padding-left: 1%;
        width: auto;
    }
    #gnav li#nav_contact a {
        line-height: 1.3;
    }

    #gnav li#nav_contact .btn-inner {
        padding: 6px 0 4px;
    }
}

@media all and (max-width: 640px) {
    body {
        /*    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
*/
    }
    /*--------------------------------------------------
        header
    --------------------------------------------------*/
    header {
        background-image: none;
        background-color: #fff;
        height: auto;
    }
    #sp-hcontents {
        display: flex;
        justify-content: center;
        align-items: center;
        -js-display: flex;
    }
    #sp-hcontents {
    	margin-bottom: 2%;
    }
    #hcontents h1 {
        width: 45%;
        border: none;
        padding: 0 0 0 0;
        margin:0 10% 0 5%;
        float: left;
    }
    #sp-nav {
        width: 48%;
        padding-right: 2%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        -js-display: flex;
    }
    #sp-nav li {
        list-style: none;
        vertical-align: middle;
        text-align: right;
    }
    #sp-nav li#h_contact {
        color: #fff;
        background: #a29230;
        text-align: center;
        padding: 4% 2.5% 3%;
        font-size: 0.75rem;
        margin: 0 0 0 1%;
        line-height: 1.3;
        width: 6em;
        font-weight: 600;
    }
    
    #sp-nav li#h_contact a {
        text-decoration: none;
        color: #fff;
    }

    .fa-purple:before {
        color: #fff;
        background: #a29230;
        padding: 18% 30%;
        font-size: 1.95rem;
    }
    #gnav {
        float: none;
        width: 100%;
        margin: 0;
        display:-webkit-box;
        display:-moz-box;
        display:-ms-flexbox;
        display:-webkit-flex;
        display:-moz-flex;
        display:flex;
        -webkit-box-lines:multiple;
        -moz-box-lines:multiple;
        -webkit-flex-wrap:wrap;
        -moz-flex-wrap:wrap;
        -ms-flex-wrap:wrap;
        flex-wrap:wrap;
        justify-content: center;
        background: #222;
    }
    #gnav li {
        width:24%;
        margin: 1% 0.5% 1%;
        font-size: 80%;
        text-align: center;
    }
    #gnav li:nth-child(-n+4) {
        margin-bottom: 0;
    }
    #gnav li#nav_about a,
    #gnav li#nav_style a,
    #gnav li#nav_contact_sp a{
        line-height: 1.3;
    }
    #gnav li#nav_contact,
    #gnav li#nav_contact_sp {
        display: none;
    }
    #gnav li a {
        display: block;
        background: #fff;
        padding: 2% 0 0;
        font-weight: bold;
        line-height:3.5;
    }
    #gnav li#nav_about a {
        padding:4% 0 3%;
    }
    #gnav li#nav_style a,
    #gnav li#nav_contact_sp a{
        padding:9% 0 7.5%;
    }
    #gnav li#nav_contact_sp a{
        background: #a29230;
        color: #fff;
    }
    #about li#nav_about a,
    #room li#nav_room a,
    #style li#nav_style a,
    #cusine li#nav_cusine a,
    #gallery li#nav_gallery a,
    #price li#nav_price a,
    #access li#nav_access a,
    #contact li#nav_contact_sp a{
        background: brown;
        color: #fff;
    }
    /*--------------------------------------------------
        common layout
    --------------------------------------------------*/
    #box {
        position: relative;
        clear: both;
        overflow: hidden;
        width: 90%;
        margin: 0 auto 0;
        padding: 5%;
        background: url(../images/bg_box.png);
    }


    footer p {
        clear: both;
        text-align: center;
        color: #fff;
        margin-bottom: 10px;
    }
    
    /*--------------------------------------------------
        parts
    --------------------------------------------------*/
    #title {
        text-align: center;
    }
    .photo {
        float: none;
        max-width: 300px;
        margin: 0 auto;
    }

    .photo img {
        margin-bottom: 25px;
        max-width: 100%;
    }
    
    .dis-pc {
        display: none;
    }
    
    .dis-sp {
        display: block;
        margin: 0 0 1.5em 0;
    }
    
    .column{
        float:lnone;
        width:100%;
    }
    
    .list dt{
        width:12.5em;
    }

    .list dd{
        margin:0 0 0.2em 13.5em;
    }

    /*--------------------------------------------------
        index
    --------------------------------------------------*/
    #top-wrapper p {
        width: 72px;
        height: 180px;
    }
    #top_btn {
        width: 96%;
        margin: 0 2%;
        overflow: hidden;
    }
    #topBtn {
        margin-top: 2%;
    }
    .block {
        display: inherit;
        width: 47%;
        margin: 0 2% 2%;
        height: auto;
        position: relative;
        float: left;
        background: #000;
    }
    .block:nth-child(5){
        display: inherit;
        width: 96% ;
        margin: 0 2% 2%;
        height: auto;
        position: relative;
        float: left;
        background: #000;
    }
    .block:nth-child(even) {
        margin-left: 0;
    }
    .txt-area,
    .photo-area {
        width: 100%;
    }
    .photo-area img {
        opacity: 0.7;
    }
    .block:nth-child(odd) {
        flex-direction: inherit;
    }
    .txt-area {
        padding: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
    .txt-content {
        position: absolute;
        top: 25%;
        text-align:center;
        width: 100%;
        height: auto;
    }
    .block:nth-child(5) .txt-content {
        top: 40%;
    }
    a.link_top {
        margin: 0;
        padding: 33% 0;
    }
    .txt-area h2 {
        font-size: 100%;
        z-index: 100;
        margin-bottom: 0;
        text-shadow: 1px 1px 3px #000;
    }
    .txt-area .btn {
        display: none;
    }

    /*--------------------------------------------------
        about
    --------------------------------------------------*/    
    #aboutcontents {
        width: 100%;
        float: none;
    }
    
    .map_room {
        margin-left: 0;
    }
    .map_room dl dt {
        float: none;
        clear: left;
        width: 100%;
    }
    .map_room dl dd {
        padding-left: 0;
    }
    .comment {
        margin-left: 0;
    }

    /*--------------------------------------------------
        style
    --------------------------------------------------*/
    .stylewrap {
        margin-bottom: 40px;
    }
    .headeing{
        position: inherit;
        background: none;
        height: inherit;
        width: inherit;
        padding: 0;
        border-radius: 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        float: none;
        clear:left;
        margin-right: 0;
        line-height: 1.7;
    }

    .headeing h2 {
        position: inherit;
        left: 0;
        top: 0;
        margin: 0;
        width: inherit;
        text-align: left;
        line-height: inherit;
        color: inherit;
    }

    .stylecontents {
        width: 100%;
        float: none;
    }

    /*--------------------------------------------------
        gallery
    --------------------------------------------------*/
    .grid {
        padding-top: 10px;
    }
    .grid-item {
        padding-bottom: 10px;
    }
    .grid-item--width2 { width:  240px; }
    .grid-item--height2 { height: 160px; }
    .grid-item--height2-2 { height: 320px; }

    /*--------------------------------------------------
        cusine
    --------------------------------------------------*/
    .box_cusine {
        flex-wrap: wrap;
    }
    .box_center {
        width: 100%;
        padding: 0;
    }
    .box_center h1 {
        margin-top: 0;
    }
    .box_left, .box_right, .box_seconds {
        width: 48%;
        padding:0 1%
    }

    .box_left {
        order: 2;
    }
    .box_center {
        order: 1;
        margin-top: 0;
    }

    /*--------------------------------------------------
        price
    --------------------------------------------------*/
    .pricewrap {
        display: inherit;
    }
    .pricecol {
        width: 100%;
        
    }
    .pricewrap table {
        width: 100%;
        text-align: left;
        margin-bottom: 2em;
        font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
    }

    .pricewrap th {
        width: 30%;
    }
    .pricewrap td.yen {
        text-align:right;
        width: 35%;
    }

    /*--------------------------------------------------
        acccess
    --------------------------------------------------*/   
    .info{
        float:none;
        width:100%;
        margin-bottom: 40px;
    }
    #map_canvas{
        width:100% !important;
        height:auto;
        margin:0 0 30px 0;
        border:1px solid #ccc;
    }

    /*--------------------------------------------------
        contact
    --------------------------------------------------*/
    #formWrap,
    table.formTable{
        width: 100%;
    }
    table.formTable td, table.formTable th {
        display: block;
        width: 92%;
        border: none;
    }
    input[type="text"],
    textarea  {
        font-size: 16px;
        width:97%;
    }
    .half input[type="text"]{
        width:40%;
    }
    input[type="submit"],
    input[type="reset"],
    input[type="button"]{
        width: 40%;
        margin: 0;
        padding: 5px;
        font-size: 16px;
        /*background:#ce6b69;
        color: #FFF;
        -webkit-appearance: none;
        border-radius: 5px;
        border:none;*/
    }
}
@media screen and (min-width: 768px) and (max-width: 979px) {
    #box {
        position: relative;
        padding-top: 0;
        max-width: 92%;
    }
    .grid {
        padding-top: 0;
    }
}

@media all and (min-width: 639px) {
    #sp-nav {
        display: none;
    }
    #gnav li#nav_contact_sp {
        display: none;
    }
}
@media only screen
and (min-device-width:768px) 
and (max-device-width:1024px) 
and (orientation:portrait){
    a.link_top{
        margin: -8% 0;
        padding: 9% 0;
    }
    #box {
        padding-top: 20px;
    }
    /*--------------------------------------------------
        acccess
    --------------------------------------------------*/   
    .info{
        float:none;
        width:100% !important;
        margin-bottom: 40px !important;
    }
    #map_canvas{
        width:100% !important;
        height:auto;
        margin:0 0 30px 0;
        border:1px solid #ccc;
    }
}