@charset "utf-8";

/* CSS Document */

@media screen and (max-width:1007px) {
  .closing2{font-size: 2px;}
  .vivant a{font-size: 20px;}
  .vivant img{width: 100%;}
  .spNone {
    display: none;
  }
  html {
    width: 100%;
    height: 100%;
    font-size: 12px;
  }
  body {
    width: 100%;
    height: 100%;
    font-size: 1rem;
    overflow-x: hidden;
  }
  img {
    display: block;
    max-width: 100%;
    width: auto;
  }
  /* header */
  .header {
    height: 100%;
    padding-top: 6em;
    box-sizing: border-box;
  }

  .headerContents {
    width: 100%;
    height: 6em;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 997;
  }

  .header .slide {
    width: 100%;
    height: 100%;
  }
  .header .side {
    width: 3em;
    position: absolute;
    top: 8em;
    right: 0;
    z-index: 996;
  }
  .header nav {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    background: rgba(201, 160, 99, 0.9);
    z-index: 998;
    color: #FFF;
  }
  .header nav ul {
    height: 25.5em;
    width: 100%;
    margin: auto;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
  }
  .header nav ul ul {
    position: inherit;
    height: 12.5em;
    width: 9.75em;
  }

  .header nav li a {
    border-bottom: 1px solid rgba(255,255,255, 0.12);
  }
  .header nav li:first-child {
    border-bottom: 1px solid rgba(255,255,255, 0.12);
  }
  .header nav li:first-child span.title {
    display: none;
  }
  .header nav li:first-child span {
    display: block;
    margin-bottom: 0.5em;
    padding: 1em 0 0;
    border-top: 1px solid rgba(255,255,255, 0.12);
  }
  .header nav li:first-child li span {
    border: none;
    display: inherit;
    padding: 0;
    margin: 0;
  }
  .header nav li img {
    display: none;
  }
  .header nav li li a {
    padding: 0.5em 0;
  }
  .header .h1 img {
    height: 4em;
    position: absolute;
    left: 1.5em;
    top: 1em;
  }
  .header .menu {
    width: 3rem;
    height: 3rem;
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 999;
  }
  .header .menu span {
    display: block;
    width: 100%;
    height: 2px;
    background: #000;
    transition: 0.5s;
  }
  .header .menu .span {
    position: absolute;
    top: calc(50% - 9px);
    left: 0;
  }
  .header .menu .span2 {
    position: absolute;
    bottom: calc(50% - 1px);
    left: 0;
    opacity: 1;
  }
  .header .menu .span3 {
    position: absolute;
    bottom: calc(50% - 9px);
    left: 0;
  }
  .header .menu.open .span {
    background: #fff;
    top: calc(50% - 1px);
    transform: rotate(45deg);
  }
  .header .menu.open .span2 {
    opacity: 0;
  }
  .header .menu.open .span3 {
    background: #fff;
    bottom: calc(50% - 1px);
    transform: rotate(-45deg);
  }
    .goto img {
        width: 30%;
    }
    .amazon img {
        width: 30%;
    }
  /* footer */
  .footer {
    padding: 3em 0;
    text-align: center;
  }
  .footer .left {
    background: url(../img/foot_logo.png) center top / 11em no-repeat;
    padding-top: 7em;
  }
  .footer p.copylight {
    font-size: 80%;
  }
  .footer .right {
    display: none;
  }
  /* common */
  .contents {
    margin: 0 1.5em;
  }
  .link a {
    width: 14em;
    font-size: 80%;
  }
  .explanation {
    right: 1.5rem;
    font-size: 80%;
  }
  .plan dl {
    margin-bottom: 1.5em;
  }
  .plan dl:last-child {
    margin-bottom: 0;
  }
  .plan dl dd a {
    font-size: 90%;
  }
  .subPage {
    height: 100%;
  }
  .subPage .ancestor img {
    width: 4.5em;
    padding-top: 6em;
  }
  .subPage .lead {
    padding: 1.5rem 0 6em;
    background-size: contain;
  }
  .subPage .lead .pan {
    right: 1.5em;
  }
  .subPage .lead .catch {
    margin: -0.5em 1.5rem;
  }
  .pan {
    display: none;
  }
  .pageNav {
    display: none;
  }
	.post{
		margin: 0 1.5em;
	}
    
    

  #google_translate_element{
    max-width: 100%;
    position: absolute;
    bottom: 1rem;
    right: calc(50% - 6rem);
    box-sizing: border-box;
    z-index: 99;
  }
  .goog-te-gadget-simple {
    /*
    background-color: #fff;
    border-left: 1px solid #d5d5d5;
    border-top: 1px solid #9b9b9b;
    border-bottom: 1px solid #e8e8e8;
    border-right: 1px solid #d5d5d5;
    font-size: 10pt;
    display: inline-block;
    padding-top: 1px;
    padding-bottom: 2px;
    cursor: pointer;
    zoom: 1;
    */
    width: 12em;
    display: inline-block;
    text-align: center;
    padding: 0.5em;
    box-sizing: border-box;
    background-color: #fff;
  }
  .goog-te-gadget-simple img{
    display: inline-block;
  }
    .campaign3 {
        width: 100%
    }
  /* index */
  #index .header .slide .thum ul {
    top: 7px;
  }

  #index .header .catch img {
    width: calc(100% / 3);
    max-width: 183px;
    position: absolute;
    top: calc(25% + 14px);
    right: 0;
    left: 0;
    margin: auto;
    z-index: 98;
  }
  #index .header .slide .image li:nth-child(3){
    background-position: 25% center;
  }
  #index h2 img {
    height: 2em;
  }
  #index .a {
    padding: 3em 1.5em 0;
  }
  #index .a .body {
    margin: 0;
  }
  #index .a .text p {
    line-height: 1.75;
    text-align: left;
    margin: -0.375em 0;
  }
  /*

	#index .a .a01 .left{
		padding-top: 5.5em;
		margin-bottom: 1.5em;
		background: url(../img/okuizumo.png) top center / 205px no-repeat;
	}

	#index .a .a01 .left p{
		font-size: 80%;
	}

	#index .a .a01 .right ul{
		text-align: center;
	}

	#index .a .a01 .right li {
		display: inline-block;
		margin-right: 1em;
	}

	#index .a .a02 .left{
		margin-bottom: 2.5em;
	}

	#index .a .a02 .detail img{
		width: 100%;
	}

	#index .a .a02 .category img{
		display: none;
	}

	#index .a .a02 .right .detail span{
		margin-bottom: 2em;
	}

	#index .a dt{
		float: left;
		width: calc(7.25em - 1em);
		height: calc(7.25em - 1em);
		padding: .5em;
		margin: 0 1em 1.5em 0;
	}

	#index .a .facebook dt{
		margin: 0 1em 3em 0;
	}

	#index .a dt img{
		width: calc(100% - 1em);
	}

	#index .a .facebook img{
		width:100%;
	}

	#index .a dt .fb{
		width: 40%;
	}

	#index .a .title{
		display: block;
		margin-bottom: 1.25em;
		font-size: 80%;
	}

	#index .a dd{
		float: right;
		width: calc(100% - 8.25em);
		margin: -.25em 0;
		line-height: 1.5;
	}
	*/
  #index .b {
    padding: 3em 0 0;
  }
  #index .b .body {
    margin: 0 1.5em;
  }
  #index .b .slide {
    width: 100%;
    height: calc((100vw - 3em) / 3);
  }
  #index .b .slide .title img {
    width: 7.5%;
    max-width: 70px;
  }
  #index .b .exp {
    margin-bottom: 3em;
  }
  #index .b .exp .text {}
  #index .b .exp .text2 {}
  #index .c .left {
    padding: 3em 1.5rem;
    position: relative;
    background: url(../img/sdw03.png) top 4.5em left / 2px repeat-x;
  }
  #index .c .right {
    padding: 3em 1.5rem 0;
    position: relative;
    background: url(../img/sdw03.png) top 4.5em left / 2px repeat-x;
  }
  #index .c .body {
    padding: 3em 0;
  }
  #index .c dd {
    margin: 1.125em 0 0;
    line-height: 1.75;
    letter-spacing: 0.2em;
  }
  #index .c .body4 {
    margin: 0 1.5rem;
  }
  #index .d {
    margin: 1em 1.5em 3em;
  }
  #index .d img{
    width: 100%;
  }
  #index .c .body2 {
    margin: 0 1.5rem 1.5em;
    position: relative;
  }
  #index .c h3 {
    font-size: 150%;
    margin-bottom: 0.5rem;
  }
  #index .c table {
    margin-bottom: 1.5rem;
    border-top: 1px solid rgba(201, 160, 99, 0.48);
  }
  #index .c td {
    line-height: 1.5;
    padding: 0.75em 0;
    border-bottom: 1px solid rgba(201, 160, 99, 0.48);
  }
  #index .c td .date {
    width: 5em;
    float: left;
  }
  #index .c td .text {
    width: calc(100% - 5em);
    float: left;
  }
  #index .c .text2 {
    position: absolute;
    top: 0px;
    right: 0px;
  }

  #index .banner ul{
    text-align: center;
    margin-top: 3rem;
  }

  #index .banner li{
    width: calc((100% - 1rem) / 3);
    float: left;
    margin: 0.5rem 0.5rem 0 0;
  }

  #index .banner li:nth-child(3n){
    margin-right: 0;
  }

  #index .banner li:nth-child(3n+1){
    clear: both;
  }

  #index .banner li:nth-child(-n+3){
    margin-top: 0;
  }
  /* access */
  #access #map {
    height: 25em;
  }
  #access #access02 .left {
    margin-bottom: 3em;
  }

  #access #access03 iframe{
    max-width: 100%;
    height: calc((100vw - 3rem) * 0.5625);
    margin-bottom: 1.5rem;
  }

  #access #access03 iframe:nth-child(2n){
    margin-bottom: 0;
  }
  /* contact */
  #contact .contents .right {
    margin: 4em 0 6em;
  }
  #contact .contents .left img {
    height: 2.5em;
  }
  #contact .contents .right p.text {
    font-size: 80%;
  }
  /* day */
  #day .contents div img {
    width: 100%;
  }
  #day h2 {
    letter-spacing: 0.1em;
  }
  #day .contents .text {
    text-align: left;
  }
  #day .d01 .body2 .right, #day .d01 .body3 {
    margin-top: 2em;
  }
  #day .d01 .body3 {
    margin-bottom: 1.5em;
  }
  #day .d01 .body3 .left {
    margin-bottom: 2em;
  }
  #day .contents table {
  }
  #day .d04 .right {
    margin-top: 2.5em;
  }
  #day .d05 .left {
    margin-bottom: 3em;
  }
  #day .time {
  }
  /*  enkai */

  #enkai .contents .text{
    text-align: left;
  }
  #enkai .contents .e04 img {
    width: 100%;
    margin: 0 auto 1.5em;
  }
  #enkai .contents table {
  }
  /*  inn */
  #inn .contents div img {
    width: 100%;
  }
  #inn .contents .catch {
    margin: -0.375em 0 calc(1em + -0.375em);
    line-height: 1.75;
    font-size: 125%;
  }
  #inn .contents .slide .image{
    width: 100%;
    height: auto;
    padding-top: 55.8%;
  }
  #inn .contents .slide .image li{
    width: 100%;
    height: auto;
    padding-top: 55.8%;
  }
  /* onsen */
  #inn .contents .o01 .right {
    margin: 1.5em 0;
  }
  #inn .o01 .left, #inn .o01 .right {
    margin-bottom: 1.5em;
  }
  #inn .contents .o02 li {
    margin: 1.5em 0 0;
  }
  #inn .contents .o02 .image3 {
    margin-bottom: 3rem;
  }
  #inn .o04 .body img {
    margin: 1.5em auto 0;
  }
  #inn .o04 table {
    width: 100%;
  }
  #inn .o04 table th {
    width: 7.5em;
  }
  #inn .o04 table th, #inn .o04 table td {
    font-size: 80%;
    letter-spacing: 0.05em;
  }
  /* room */
  #inn .r01 .text, #inn .r02 .text, #inn .r03 .text {
    display: block;
    margin-bottom: 1.5em;
  }
  #inn .att .body {
    margin: 0 1.5em 0;
    padding: 3em 0 5em;
  }
  /* guide */
  #guide .contents2 .body:not(#guide0) {
    margin: 0 1.5em 6em;
    background-image: none !important;
  }
  #guide0 {
    height: calc(100vh - 6em);
    background-position: 90% center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 6em;
  }
  #guide0 .text2 {
		display: block;
    width: calc(100% - 3em);
    color: #fff;
    line-height: 2;
    letter-spacing: 0.2em;
    text-align: center;
		position: absolute;
		bottom: 1rem;
		left: 1.5rem;
  }
  #guide .contents2 {
  }
  #guide .contents2 .text .span {
    text-align: center;
  }
  #guide .contents2 .text .span2 {
    text-align: center;
  }
  #guide .contents2 .text .span3 {
    display: block;
    line-height: 1.75;
    margin: -0.375em 0;
  }
  #guide .contents2 .text .span3 a {
    display: block;
    margin-top: 1em;
  }
  #guide .contents2 .image2 {
    display: block;
    padding-top: 37.5%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 1.5em;
  }

  #guide .a dd{
  	text-align: left;
  }

  #news .lead{
    padding-top: 3rem;

  }

  #news video{
    margin: 0 0 3em;
  }
    
    
}