@charset "utf-8";
/* CSS Document */
@media all {
  body {
    margin: 0;
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    font-size: 13px;
    line-height: 1.5;
  }
  .en-serif, #firstview .title .open span, #firstview .title .start span, #sake-kurastories .titlebox h2, #access h2 {
    font-family: "Noto Serif Display", serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    font-variation-settings:
      "wdth"100;
    font-size: 11px;
  }
  .en-sans {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    font-variation-settings:
      "wdth"100;
    font-size: 11px;
  }
  main {
    background: #f5f4f2;
  }
  p, ul, ol, li, dl, dt, dd {
    margin: 0;
    padding: 0;
  }
  li {
    list-style: none;
  }
  a {
    text-decoration: none;
    color: #000;
  }
  h1, h2, h3, h4, th {
    font-weight: normal;
    margin: 0;
  }
  img {
    width: 100%;
    vertical-align: bottom;
  }
  * {
    box-sizing: border-box;
  }
  a {
    transition: .3s;
  }
  a:hover {
    opacity: .7;
  }
  .actn {
    opacity: 0;
    transform: translateY(100px);
    transition: 2s;
  }
  .actn.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .tolink {
    display: block;
    width: fit-content;
    padding: 0 30px 8px 20px;
    border-bottom: solid 1px #000;
    position: relative;
  }
  .tolink::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 10px;
    height: 10px;
    background: url(images/openlink.png) no-repeat;
    background-size: contain;
  }
  .tolink::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: url(images/access_nextbtn.png) no-repeat;
    background-size: contain;
  }
  #sightseeing .tolink, footer .box .tolink {
    color: #fff;
    margin: 0 auto;
    border-bottom: solid 1px #e8cec0;
  }
  #sightseeing .tolink {
    margin: 0 auto 40px;
  }
  footer .box .tolink {
    margin: 0 auto;
  }
  #sightseeing .tolink::before, footer .box .tolink::before {
    background: url(images/openlink_wht.png) no-repeat;
    background-size: contain;
  }
  #sightseeing .tolink::after, footer .box .tolink::after {
    background: url(images/sightseeing_nextbtn.png) no-repeat;
    background-size: contain;
  }
  #gnav {
    width: 100%;
    margin: 0 auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    position: fixed;
    top: -1px;
    left: 0;
    right: 0;
    z-index: 1000;
    transform: translateY(-100%);
    background: rgba(245, 244, 242, .9);
    padding: 17px;
  }
  #gnav.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  #gnav.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
  }
  #gnav .hotelname {
    position: absolute;
    top: 14px;
    left: 40px;
    color: #4a4a4a;
  }
  #gnav .hotelname .name {
    font-size: 16px;
    line-height: 1;
  }
  #gnav nav ul {
    display: flex;
    width: fit-content;
    margin: 0 auto;
  }
  #gnav nav ul li a {
    display: block;
    padding: 0 1em;
    color: #4a4a4a;
  }
  #gnav .language {
    display: block;
    position: absolute;
    top: 14px;
    right: 40px;
    color: #4a4a4a;
    padding-right: 20px;
    cursor: pointer;
  }
  #gnav .language::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 0;
    width: 14px;
    height: 14px;
    background: url("images/icon_langages_bk.png") no-repeat;
    background-size: contain;
  }
  #gnav .language dt {
    text-align: right;
  }
  #gnav .language dd {
    display: none;
  }
  #gnav .language.active dd {
    display: block;
    padding-top: 0.5em;
    transform: translateX(2rem);
    background: rgba(255, 255, 255, .8);
    margin-top: 5px;
  }
  #gnav .language.active dd a {
    display: block;
    padding: 0.5em 1em;
  }
  #gnav .hotelname .title-en {
    width: 136px;
    padding-top: 3px;
  }
  #gnav .hotelname .title-en img {
    vertical-align: top;
  }
  #firstview {
    width: 100%;
    position: relative;
  }
  #firstview .title {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 480px;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
  }
  #firstview .title h1 {
    font-size: 28px;
    font-weight: 500;
  }
  #firstview .title .title-en {
    width: 276px;
    margin: 0 auto;
    padding-bottom: 80px;
    position: relative;
    font-size: 20px;
  }
  #firstview .title .title-en::after {
    position: absolute;
    content: "";
    bottom: 31px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    background: url("images/kazari01.png") no-repeat;
    background-size: cover;
  }
  #firstview .title .text {
    font-size: 20px;
    font-weight: 500;
    color: #c1d5e5;
    padding-bottom: 20px;
  }
  #firstview .title .open {
    font-size: 70px;
    line-height: 1;
    color: #7db5db;
    padding-bottom: 10px;
  }
  #firstview .title .open span {
    font-size: 70px;
    color: #fff;
    padding: 0 5px;
  }
  #firstview .title .start span {
    font-size: 53px;
    padding-right: 5px;
  }
  #firstview .title .start strong {
    padding-left: 5px;
    font-weight: normal;
  }
  #firstview .title .enText {
    font-size: 11px;
    padding-bottom: 10px;
    letter-spacing: 1.5px;
    line-height: 2.0;
  }
  #firstview .title .enOpen {
    font-size: 20px;
  }
  #firstview .title .enOpen span {
    color: #7db5db;
  }
  #firstview .title .enOpen strong {
    color: #E8CEC0;
    font-weight: normal;
  }
  #firstview .global {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 40px;
  }
  #firstview .global nav ul {
    display: flex;
    width: fit-content;
    margin: 0 auto;
  }
  #firstview .global nav ul li a {
    display: block;
    font-size: 15px;
    padding: 0 1em;
    color: #fff;
  } /*
	#firstview .global .language{
		display: block;
		position: absolute;
		top: 40px;
		right: 40px;
		color: #fff;
		padding-right: 20px;
		cursor: pointer;
	}
	#firstview .global .language::after{
		content: "";
		position: absolute;
		top: 4px;
		right: 0;
		width: 14px;
		height: 14px;
		background: url("images/icon_langages_wt.png") no-repeat;
		background-size: contain;
	}
	#firstview .global .language dt{
		text-align: right;
	}
	#firstview .global .language dd{
		display: none;
		transition: .3s;
	}
	#firstview .global .language.active dd{
		display: block;
		padding-top: 0.5em;
		transform: translateX(1rem);
	}
	#firstview .global .language.active dd a{
		display: block;
		color: #fff;
		padding: 0.5em 0;
	}*/
  #introduction .textbox {
    color: #fff;
    background: url("images/intro_bg.jpg") no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    position: relative;
  }
  #introduction .textbox::before {
    position: absolute;
    content: "";
    top: 42px;
    left: -142px;
    width: 213px;
    height: 174px;
    background: url("images/intro_bird01.png") no-repeat;
    background-size: contain;
  }
  #introduction .textbox::after {
    position: absolute;
    content: "";
    bottom: 166px;
    right: 20px;
    width: 88px;
    height: 88px;
    background: url("images/intro_bird02.png") no-repeat;
    background-size: contain;
  }
  #introduction .textbox .box {
    padding: 0 14%;
  }
  #introduction .textbox .title {
    padding-bottom: 35px;
  }
  #introduction .textbox .title .textimage {
    width: 100%;
    max-width: 480px;
    padding-bottom: 25px;
  }
  #introduction .textbox .title h2 {
    font-size: 28px;
  }
  #introduction .textbox .text {
    font-size: 15px;
    line-height: 2;
    padding-bottom: 30px;
  }
  #introduction .textbox .en-sans {
    letter-spacing: .05em;
  }
  #introduction .textbox .en-sans .enText {
    font-size: 11px;
    line-height: 2;
    width: 100%;
    max-width: 480px;
  }
  #introduction .imagebox {
    display: flex;
    flex-direction: column;
  }
  #concept .box .titlebox .sticky .sub {
    color: #bcbcbc;
    font-size: 10px;
    padding-bottom: 20px;
  }
  #concept .box .titlebox .sticky h2 {
    font-size: 24px;
    color: #70650b;
    padding-bottom: 30px;
  }
  #concept .box .titlebox .sticky h2 .enText {
    font-size: 10px;
  }
  #concept .box .conceptbox li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10px;
    width: 38px;
    height: 38px;
    background: url("images/concept_symbol.png") no-repeat;
    background-size: cover;
  }
  #concept .box .conceptbox li .en-Text {
    color: #4a4a4a;
    line-height: 2;
    margin-bottom: 20px;
    font-size: 10px;
  }
  #concept .box .conceptbox li .image {
    margin-bottom: 20px;
  }
  #concept .areamap .image {
    mix-blend-mode: multiply;
  }
  #stay {
    padding: 40px 0 180px;
    background: url("images/stay_bg.png") no-repeat;
    background-size: contain;
    background-position: bottom;
  }
  #stay .title::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    background: url("images/kazari02.png") no-repeat;
    background-size: contain;
  }
  #stay .title .en-serif {
    font-size: 50px;
    font-weight: 500;
    color: #1b1b1b;
    margin-bottom: 30px;
  }
  #stay .title h2 {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .1em;
    color: #70650b;
  }
  #stay .title .enText {
    color: #4a4a4a;
  }
  #stay .mainimage {
    width: 100%;
    margin-bottom: 80px;
  }
  #stay .textbox h3 {
    font-size: 18px;
    font-weight: 500;
    color: #70650b;
    margin-bottom: 1em;
  }
  #stay .textbox .text {
    line-height: 2;
    color: #4a4a4a;
    margin-bottom: 1.5em;
  }
  #stay .box01 .textbox .en-box01, #stay .box02 .inbox .textbox .en-box02, #stay .box03 .textbox .en-box03 {
    width: 100%;
    max-width: 578px;
  }
  #sake-kurastories {
    background: url("images/rest_bg.jpg") no-repeat;
    background-size: cover;
    background-position: bottom;
  }
  #sake-kurastories .titlebox {
    width: 100%;
    position: relative;
    padding: 40px 0;
  }
  #sake-kurastories .titlebox h2 {
    display: block;
    font-size: 50px;
    font-weight: 500;
    color: #1b1b1b;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding: 28px 0;
    background-color: rgba(255, 255, 255, 0.2)
  }
  #sake-kurastories .titlebox h2::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    background: url("images/kazari02.png") no-repeat;
    background-size: contain;
  }
  #kura {
    width: 100%;
  }
  #kura .textbox .text {
    line-height: 2;
    margin-bottom: 40px;
  }
  #sake-kurastories .areaMap {
    width: 100%;
  }
  #sake-kurastories .enText {
    color: #4a4a4a;
    line-height: 2;
    font-size: 10px;
  }
  #sake-kurastories .h3enText {
    color: #4a4a4a;
    line-height: 2;
    font-size: 14px;
    padding-bottom: 10px
  }
  .story .imagebox .image01 {
    width: 100%;
  }
  .story .textbox h3 {
    font-size: 20px;
    font-weight: 500;
    color: #1b1b1b;
    margin-bottom: 10px;
  }
  .story .textbox .text {
    line-height: 2;
    margin-bottom: 30px;
  }
  #kura .textbox .h3enText {
    color: #4a4a4a;
    line-height: 2;
    font-size: 14px;
    padding-bottom: 10px
  }
  #kura .textbox .enText {
    color: #4a4a4a;
    line-height: 2;
    font-size: 10px;
  }
  #Sengen-Shrine {
    background: url("images/shrine_bg.jpg") no-repeat;
    background-size: cover;
    background-position: top;
    padding: 60px 0 40px;
    text-align: center;
  }
  #Sengen-Shrine h3 {
    font-size: 20px;
    font-weight: 500;
    color: #1b1b1b;
    margin-bottom: 10px;
  }
  #Sengen-Shrine .text {
    font-size: 15px;
    line-height: 2;
    margin-bottom: 30px;
  }
  #Sengen-Shrine .h3enText {
    color: #4a4a4a;
    line-height: 2;
    font-size: 14px;
    padding-bottom: 10px;
  }
  #Sengen-Shrine .enText {
    color: #4a4a4a;
    line-height: 2;
    font-size: 10px;
    padding-bottom: 30px;
  }
  #Sengen-Shrine .image {
    width: calc(100% - 40px);
    max-width: 1000px;
    margin: 0 auto 40px;
  }
  #Sengen-Shrine .box {
    width: calc(100% - 40px);
    max-width: 900px;
    margin: 0 auto;
    display: flex;
  }
  #Sengen-Shrine .textbox {
    width: 70%;
    padding: 10px 20px 0 0;
  }
  #Sengen-Shrine .textbox .text {
    font-size: 15px;
    line-height: 2;
    margin-bottom: 30px;
    text-align: left;
  }
  #Sengen-Shrine .textbox .enText {
    color: #4a4a4a;
    line-height: 2;
    font-size: 10px;
    text-align: left;
  }
  #Sengen-Shrine .imagebox {
    width: 30%;
  }
  #access {
    background: url("images/access_bg.png") no-repeat;
    background-size: contain;
    background-position: top;
    padding: 120px 0 40px;
  }
  #access h2 {
    display: block;
    width: calc(100% - 320px);
    font-size: 50px;
    font-weight: 500;
    color: #1b1b1b;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding: 40px 0;
  }
  #access h2::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    background: url("images/kazari02.png") no-repeat;
    background-size: contain;
  }
  #access .maparea .mapbox iframe {
    -webkit-filter: brightness(100%) grayscale(100%);
    -ms-filter: brightness(100%) grayscale(100%);
    filter: brightness(100%) grayscale(100%);
  }
  #access .rootbox {
    width: calc(100% - 320px);
    margin: 0 auto;
    padding: 0 0 40px;
  }
  #access .rootbox dl {
    margin-bottom: 40px;
  }
  #access .rootbox dt {
    cursor: pointer;
    width: 100%;
    padding: 10px 70px 12px;
    position: relative;
    border: solid #ccc;
    border-width: 1px 0 1px 0;
  }
  #access .rootbox dl dt::before {
    position: absolute;
    content: "";
    top: 20px;
    left: 20px;
    width: 30px;
    height: 30px;
  }
  #access .rootbox dl#train dt::before {
    background: url(images/train_icon.png) no-repeat;
    background-size: contain;
  }
  #access .rootbox dl#car dt::before {
    background: url(images/car_icon.png) no-repeat;
    background-size: contain;
  }
  #access .rootbox dl dt::after {
    position: absolute;
    content: "+";
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 24px;
    color: #70650b;
    transition: .3s;
  }
  #access .rootbox dl dt.active::after {
    content: "";
    width: 10px;
    height: 2px;
    background-color: #70650b;
    transform: rotate(-180deg);
  }
  #access .rootbox dt .title {
    font-size: 18px;
    font-weight: 500;
  }
  #access .rootbox dd {
    width: calc(100% - 40px);
    max-width: 650px;
    margin: 0 auto;
    display: none;
    padding: 40px 0;
  }
  #access .rootbox dd .detail {
    line-height: 2;
    text-align: center;
    margin-bottom: 20px;
  }
  #access .rootbox dd .detail span {
    font-size: 15px;
    font-weight: 600;
  }
  #access .rootbox dd .tolink {
    margin: 0 auto 40px;
  }
  /*
	#sightseeing{
		padding: 100px 0 200px;
		background: url(images/sightseeing_bg.jpg) no-repeat;
		background-size: cover;
		text-align: center;
	}
	*/
  #sightseeing {
    position: relative;
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
    background-color: transparent;
    padding: 100px 0 200px;
    text-align: center;
  }
  #sightseeing::before {
    content: '';
    z-index: -1;
    inset: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background-image: url(images/sightseeing_bg.jpg);
    background-attachment: fixed;
  }
  #sightseeing h2 {
    display: block;
    font-size: 50px;
    letter-spacing: .1em;
    color: #fff;
    padding: 40px 0;
    position: relative;
  }
  #sightseeing h2::before {
    position: absolute;
    content: "";
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    background: url("images/kazari01.png") no-repeat;
    background-size: cover;
  }
  #sightseeing .title {
    font-size: 20px;
    color: #fff;
    margin-bottom: 20px;
  }
  #sightseeing .subtitle {
    color: #fff;
    margin-bottom: 40px;
  }
  #sightseeing .entitle {
    font-size: 15px;
    color: #fff;
    margin-bottom: 20px;
  }
  #sightseeing .ensubtitle {
    font-size: 10px;
    color: #fff;
    margin-bottom: 40px;
  }
  #sightseeing ul {
    width: calc(100% - 40px);
    max-width: 1112px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
  }
  #sightseeing ul li {
    width: calc(100% / 3);
    padding: 6px;
  }
  #sightseeing ul li .box {
    width: 100%;
    height: 100%;
    padding: 40px;
    background: #fff;
  }
  #sightseeing ul li .box .image {
    padding: 0 60px 20px;
  }
  #sightseeing ul li .box .name {
    font-size: 15px;
    font-weight: 500;
    color: #5b5baa;
    margin-bottom: 5px;
  }
  #sightseeing ul li .box .text {
    line-height: 2;
    letter-spacing: .05em;
    text-align: justify;
    color: #484848;
    margin-bottom: 10px;
  }
  #sightseeing ul li .box .enname {
    font-size: 15px;
    font-weight: 500;
    color: #5b5baa;
    margin-bottom: 5px;
  }
  #sightseeing ul li .box .entext {
    font-size: 10px;
    line-height: 2;
    letter-spacing: .05em;
    text-align: justify;
    color: #484848;
    margin-bottom: 5px;
  }
  #sightseeing ul li .box .time {
    font-size: 10px;
    color: #994a4a;
    margin-bottom: 20px;
  }
  #sightseeing ul li .box .en-spot {
    width: 100%;
    max-width: 369px;
    margin: 0 auto;
  }
  footer {
    width: 100%;
  }
  footer .box {
    width: 100%;
    background: url(images/information_bg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    padding: 140px 40px;
  }
  footer .box #information {
    margin: 0 auto 60px;
    color: #fff;
    text-align: center;
  }
  footer .box #information .hotelinfo .name {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 10px;
  }
  footer .box #information .hotelinfo .note {
    font-size: 18px;
    color: #7db5db;
    margin-bottom: 5px;
  }
  footer .box #information .hotelinfo .address {
    margin-bottom: 30px;
  }
  footer .box #information .hotelinfo .enname {
    font-size: 18px;
  }
  footer .attention {
    width: 100%;
    padding: 1rem;
    background-color: #fff;
    text-align: center;
  }
  footer .attention .text {
    font-size: 11px;
    margin-bottom: 5px;
  }
  footer .attention .enText {
    font-size: 10px
  }
}
@media (max-width: 1024px) {
  #gnav, #firstview .global {
    display: none;
  }
  #drawermenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 2;
  }
  #drawermenu::before {
    position: absolute;
    content: "";
    top: -60px;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: rgba(0, 0, 0, .5);
    transition: .3s;
  }
  #drawermenu.header-color::before {
    top: 0;
  }
  #drawermenu:has(.yss_active)::before {
    background-color: rgba(0, 0, 0, 0);
  }
  #drawermenu .language {
    display: block;
    position: absolute;
    top: 20px;
    left: calc(50% - 1rem);
    transform: translateX(-50%);
    color: #fff;
    width: 7.5rem;
    padding-right: 20px;
  }
  #drawermenu .language::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 0;
    width: 14px;
    height: 14px;
    background: url("images/icon_langages_wt.png") no-repeat;
    background-size: contain;
  }
  #drawermenu .language:has(+.yss_active) {
    color: #70650b;
  }
  #drawermenu .language:has(+.yss_active)::after {
    background: url("images/icon_langages_dw.png") no-repeat;
    background-size: contain;
  }
  #drawermenu .language dt {
    text-align: right;
  }
  #drawermenu .language dd {
    display: none;
    transition: .3s;
  }
  #drawermenu .language.active dd {
    display: block;
    padding-top: 0.5em;
    transform: translateX(2rem);
    background: rgba(255, 255, 255, .9);
    margin-top: 5px;
  }
  #drawermenu .language.active dd a {
    display: block;
    padding: 0.7em 1em;
    word-break: keep-all;
  }
  .yss_open {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 18px;
    color: #fff;
  }
  .yss_open::before {
    content: "MENU";
    position: absolute;
    top: 0;
    left: -3.7em;
    line-height: 1;
  }
  .yss_open.yss_active {
    color: #70650b;
  }
  .yss_open.yss_active::before {
    color: #70650b;
  }
  .yss_open.btn-trigger {
    position: absolute;
    width: 40px;
    height: 21px;
    cursor: pointer;
    padding-left: 6px;
  }
  .yss_open.btn-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
  }
  .yss_open.yss_active.btn-trigger span {
    background-color: #70650b;
  }
  .yss_open.btn-trigger, .yss_open.btn-trigger span {
    display: inline-block;
    transition: all .5s;
  }
  .yss_open.btn-trigger span:nth-of-type(1) {
    top: 0;
  }
  .yss_open.btn-trigger span:nth-of-type(2) {
    top: 10px;
  }
  .yss_open.btn-trigger span:nth-of-type(3) {
    bottom: 0;
  }
  .yss_open.yss_active.btn-trigger span:nth-of-type(1) {
    -webkit-transform: translateY(10px) rotate(30deg);
    transform: translateY(10px) rotate(30deg);
  }
  .yss_open.yss_active.btn-trigger span:nth-of-type(2) {
    opacity: 0;
  }
  .yss_open.yss_active.btn-trigger span:nth-of-type(3) {
    -webkit-transform: translateY(-10px) rotate(-30deg);
    transform: translateY(-10px) rotate(-30deg);
  }
  .yss_content {
    height: auto !important;
  }
  .yss_content nav {
    padding: 60px 40px 80px;
  }
  .yss_content nav ul {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .yss_content nav ul li {
    border-bottom: solid 1px #a4a4a4;
  }
  .yss_content nav ul li a {
    display: block;
    width: 100%;
    font-size: 24px;
    padding: 1.3em 3em 0.7em 0;
    position: relative;
  }
  .yss_content nav ul li a::after {
    position: absolute;
    content: ">";
    top: 50%;
    right: 0;
    transform: translateY(-30%);
    font-size: 16px;
  }
  #gnav .hotelname .tittle-en {
    width: 212px;
    margin: 0 auto;
  }
  #firstview .title {
    width: 100%;
    transform: translate(-50%, -45%);
  }
  #firstview .title h1 {
    font-size: 26px;
  }
  #firstview .title .title-en {
    width: 212px;
    padding-bottom: 50px;
  }
  #firstview .title .title-en::after {
    bottom: 18px;
    width: 14px;
    height: 14px;
  }
  #firstview .title .text {
    font-size: 16px;
  }
  #firstview .title .open {
    font-size: 50px;
  }
  #firstview .title .open span {
    font-size: 50px;
  }
  #firstview .title .start {
    font-size: 30px;
    padding-bottom: 30px;
  }
  #firstview .title .start span {
    font-size: 40px;
  }
  #firstview .title .enBox .enOpen {
    font-family: "Noto Serif Display", serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    font-variation-settings:
      "wdth"100;
    font-size: 22px;
  }
  #firstview .Offer {
    bottom: 13px;
    right: 13px;
  }
  #introduction .textbox {
    padding: 60px 0;
  }
  #introduction .textbox::before {
    top: 26px;
    left: -136px;
  }
  #introduction .textbox::after {
    right: 0;
    bottom: 25px;
  }
  #introduction .textbox .title h2 {
    font-size: 18px;
  }
  #introduction .textbox .en-sans {
    letter-spacing: .1em;
  }
  #introduction .imagebox {
    flex-direction: row;
  }
  #introduction .imagebox .image01, #introduction .imagebox .image02 {
    width: 50%;
    height: 50vw;
  }
  #introduction .imagebox .image01 img, #introduction .imagebox .image02 img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
  }
  #concept {
    padding: 40px 0;
    background: url("images/concept_bg.jpg") no-repeat;
    background-size: cover;
  }
  #concept .box .titlebox {
    width: 100%;
    padding: 0 40px;
  }
  #concept .box .titlebox .sticky {
    width: 100%;
  }
  #concept .box .conceptbox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 40px 40px 0;
  }
  #concept .box .conceptbox li {
    width: 100%;
    padding: 38px 0;
    position: relative;
  }
  #concept .box .conceptbox li::before {
    left: -7px;
    width: 30px;
    height: 30px;
  }
  #concept .box .conceptbox li h3 {
    font-size: 21px;
    color: #1b1b1b;
    margin-bottom: 0.5em;
  }
  #concept .box .conceptbox li .text {
    color: #4a4a4a;
    font-size: 15px;
    line-height: 2;
    margin-bottom: 20px;
  }
  #stay {
    padding: 40px 0 80px;
  }
  #stay .title {
    width: calc(100% - 40px);
    margin: 0 auto;
    position: relative;
    padding: 40px 0;
  }
  #stay .title h2 {
    font-size: 21px;
  }
  #stay .mainimage {
    margin-bottom: 40px;
  }
  #stay .notebox {
    width: calc(100% - 40px);
    margin: 0 auto 40px;
  }
  #stay .notebox .note {
    width: 100%;
    color: #4a4a4a;
    letter-spacing: .1em;
    line-height: 2;
    margin-bottom: 20px;
  }
  #stay .notebox .en-note {
    width: 100%;
    max-width: 535px;
  }
  #stay .box01 {
    width: 100%;
    margin: 0 auto 60px;
  }
  #stay .box01 .imagebox {
    width: 100%;
    padding-right: 30%;
  }
  #stay .box01 .textbox {
    width: calc(100% - 80px);
    margin: 30px auto 70px;
  }
  #stay .textbox h3 {
    font-size: 21px;
  }
  #stay .textbox .text {
    font-size: 15px;
  }
  #stay .box02 {
    width: 100%;
    margin-bottom: 40px;
  }
  #stay .box02 .inbox {
    width: calc(100% - 80px);
    margin: 0 auto;
  }
  #stay .box02 .inbox .imagebox {
    width: 100%;
    display: flex;
  }
  #stay .box02 .inbox .imagebox .image01 {
    width: 45%;
    transform: translate(0, 10px);
  }
  #stay .box02 .inbox .imagebox .image02 {
    width: 55%;
    transform: translate(20px, -30px);
  }
  #stay .box02 .inbox .textbox {
    width: 100%;
  }
  #stay .box03 {
    width: calc(100% - 80px);
    margin: 0 auto;
  }
  #stay .box03 .imagebox {
    width: 100%;
    margin-bottom: 20px;
  }
  #stay .box03 .textbox {
    width: 100%;
  }
  #sake-kurastories {
    padding: 60px 0;
  }
  #sake-kurastories .titlebox {
    padding: 0 0 30px;
  }
  #sake-kurastories .titlebox .image {
    width: 100%;
  }
  #sake-kurastories .titlebox h2 {
    width: calc(100% - 40px);
    line-height: 1.2;
    padding: 40px 0 25px;
  }
  #kura {
    padding-bottom: 40px;
  }
  #kura .textbox {
    width: calc(100% - 40px);
    margin: 0 auto;
  }
  #kura .textbox h3 {
    font-size: 21px;
    color: #1b1b1b;
  }
  #kura .textbox .text {
    font-size: 15px;
    margin-bottom: 20px;
  }
  #kura .textbox .en-kura {
    width: 100%;
    max-width: 491px;
    margin-bottom: 20px;
  }
  #kura .image {
    width: calc(100% - 120px);
    margin: 0 auto;
  }
  #sake-kurastories .areaMap .image {
    width: 100%;
  }
  .story {
    padding: 40px 0 0;
  }
  .story .imagebox {
    width: 100%;
    margin-bottom: 20px;
  }
  .story .textbox {
    width: calc(100% - 40px);
    margin: 0 auto;
  }
  .story .textbox h3 {
    font-size: 21px;
  }
  .story .textbox .text {
    font-size: 15px;
  }
  .story .textbox .en-story {
    width: 100%;
    max-width: 494px;
    margin-bottom: 20px;
  }
  .story .textbox .image02 {
    width: calc(100% - 80px);
    margin: 0 auto;
    padding-top: 40px;
  }
  #Sengen-Shrine .box {
    flex-direction: column;
  }
  #Sengen-Shrine .textbox {
    width: 100%;
  }
  #Sengen-Shrine .imagebox {
    width: 40%;
    margin: 0 auto;
  }
  #access h2 {
    width: calc(100% - 40px);
  }
  #access .maparea {
    width: 100%;
    margin: 0 0 40px;
  }
  #access .maparea .textbox {
    width: calc(100% - 40px);
    margin: 0 auto;
    padding: 0 0 40px;
  }
  #access .maparea .textbox .title {
    font-size: 18px;
    color: #70650b;
    margin-bottom: 10px;
  }
  #access .maparea .textbox .address {
    font-size: 15px;
    color: #4a4a4a;
    margin-bottom: 30px;
  }
  #access .maparea .textbox .en-address {
    width: 13rem;
    margin-bottom: 30px;
  }
  #access .maparea .mapbox {
    width: 100%;
  }
  #access .maparea .mapbox iframe {
    height: 100vw;
  }
  #access .rootbox {
    width: calc(100% - 40px);
    padding: 0;
  }
  #access .rootbox dd {
    padding: 40px 0 0;
  }
  #access .rootbox dl#car dd .parking .image {
    width: 100%;
  }
  #access .rootbox dl#car dd .parking .textbox {
    width: 100%;
    padding: 10px 0;
  }
  #access .rootbox dl#car dd .parking .textbox .title {
    font-size: 18px;
  }
  #access .rootbox dl#car dd .parking .textbox .text {
    font-size: 15px;
  }
  #sightseeing {
    padding: 50px 0 100px;
  }
  #sightseeing h2 {
    font-size: 40px;
  }
  #sightseeing .title {
    font-size: 21px;
  }
  #sightseeing .subtitle {
    font-size: 15px;
  }
  #sightseeing .en-text {
    width: 100%;
    max-width: 619px;
    padding: 0 20px;
  }
  #sightseeing ul li {
    width: 100%;
    padding: 0 0 10px;
  }
  #sightseeing ul li .box {
    padding: 30px;
  }
  #sightseeing ul li .box .name {
    font-size: 18px;
  }
  #sightseeing ul li .box .text {
    font-size: 15px;
  }
  #sightseeing ul li .box .time {
    font-size: 12px;
  }
  footer .box {
    background: url(images/information_bg_sp.jpg) no-repeat;
    background-size: cover;
    background-position: top;
    padding: 100px 20px;
  }
  footer .box #information {
    width: 100%;
    margin: 0 auto 40px;
    flex-wrap: wrap;
  }
  footer .box #information .hotelinfo {
    width: 100%;
    padding-bottom: 60px;
  }
  footer .box #information .hotelinfo .name {
    font-size: 26px;
  }
  footer .box #information .hotelinfo .note {
    font-size: 20px;
  }
  footer .box #information .hotelinfo .address {
    font-size: 15px;
  }
  footer .box #information .hotelinfo .en-hotelinfo {
    width: 100%;
    max-width: 435px;
  }
  footer .box #information .inquiry {
    width: 100%;
  }
  footer .box #information .inquiry .title {
    font-size: 20px;
  }
  footer .box #information .inquiry .urlLink {
    font-size: 18px;
  }
  footer .box #information .inquiry .urlLink::after {
    top: 8px;
  }
  footer .box #information .inquiry .address {
    margin-bottom: 12px;
  }
  footer .box #information .inquiry .telfax {
    font-size: 17px;
  }
  footer .box #information .inquiry .en-inquiry {
    width: 100%;
    max-width: 380px;
  }
  footer .attention .text {
    font-size: 13px;
  }
  footer .attention .enText {
    font-size: 11px
  }
  .pc {
    display: none;
  }
}
@media screen and (min-width: 1025px) {
  #drawermenu .language {
    display: none;
  }
  #introduction {
    display: flex;
    flex-direction: row-reverse;
  }
  #introduction .textbox, #introduction .imagebox {
    width: 50%;
  }
  #concept {
    padding: 160px 130px 80px 170px;
    background: url("images/concept_bg.jpg") no-repeat;
    background-size: cover;
  }
  #concept .box {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 90px
  }
  #concept .box .titlebox {
    width: 27%;
    padding: 0 0 0 30px;
  }
  #concept .box .titlebox .sticky {
    width: 100%;
    position: sticky;
    top: 60px;
    left: 0;
  }
  #concept .box .conceptbox {
    width: 73%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 190px;
  }
  #concept .box .conceptbox li {
    width: 50%;
    padding: 55px 15px;
    position: relative;
  }
  #concept .box .conceptbox li.actn:nth-child(odd) {
    transform: translateY(30px);
  }
  #concept .box .conceptbox li.actn.visible:nth-child(odd) {
    transform: translateY(-70px);
  }
  #concept .box .conceptbox li h3 {
    font-size: 18px;
    font-weight: 500;
    color: #1b1b1b;
    margin-bottom: 0.5em;
  }
  #concept .box .conceptbox li .text {
    color: #4a4a4a;
    line-height: 2;
    margin-bottom: 20px;
  }
  #stay .title {
    width: calc(100% - 320px);
    margin: 0 auto;
    position: relative;
    padding: 40px 0;
  }
  #stay .notebox {
    width: calc(100% - 280px);
    max-width: 1000px;
    margin: 0 auto 80px;
    display: flex;
  }
  #stay .notebox .note {
    width: 53%;
    color: #4a4a4a;
    letter-spacing: .1em;
    line-height: 2;
  }
  #stay .notebox .en-note {
    width: 47%;
    padding: 7px 0 0 30px;
    color: #4a4a4a;
    line-height: 2;
    margin-bottom: 20px;
    font-size: 10px;
  }
  #stay .box01 {
    width: calc(100% - 40px);
    max-width: 1120px;
    margin: 0 auto 120px;
    display: flex;
  }
  #stay .box01 .imagebox {
    width: 640px;
  }
  #stay .box01 .textbox {
    width: calc(100% - 640px);
    padding: 40px 0 0 40px;
  }
  #stay .textbox .h3enText {
    color: #70650b;
    line-height: 2;
    font-size: 14px;
  }
  #stay .textbox .enText {
    color: #4a4a4a;
    line-height: 2;
    font-size: 10px;
  }
  #stay .box02 {
    width: 100%;
    position: relative;
    margin-bottom: 120px;
  }
  #stay .box02 .inbox {
    width: calc(100% - 320px);
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: row-reverse;
  }
  #stay .box02 .inbox .imagebox {
    width: 62%;
    padding: 0 13vw 0 60px;
  }
  #stay .box02 .inbox .textbox {
    width: 38%;
  }
  #stay .box02 .image02 {
    position: absolute;
    top: -170px;
    right: 0;
    width: 29vw;
  }
  #stay .box03 {
    width: calc(100% - 320px);
    max-width: 900px;
    margin: 0 auto;
    display: flex;
  }
  #stay .box03 .imagebox {
    width: 475px;
  }
  #stay .box03 .textbox {
    width: calc(100% - 475px);
    padding: 40px 0 0 40px;
  }
  #sake-kurastories {
    padding: 100px 0;
  }
  #sake-kurastories .titlebox .image {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
  }
  #sake-kurastories .titlebox h2 {
    width: calc(100% - 280px);
    max-width: 600px;
    margin: 0 0 0 13vh;
  }
  #kura .textbox {
    width: calc(100% - 280px);
    margin: 0 auto;
  }
  #kura .textbox h3 {
    font-size: 20px;
    font-weight: 500;
    color: #1b1b1b;
    margin-bottom: 0.7em;
  }
  #kura .image {
    width: 393px;
    transform: translateY(80px);
  }
  #sake-kurastories .areaMap {
    width: 63%;
    margin: 0 0 0 auto;
  }
  .story {
    padding: 80px 0;
    display: flex;
  }
  .reverse {
    flex-direction: row-reverse;
  }
  .story .imagebox {
    width: 50%;
  }
  .story .textbox {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-left: 60px;
    position: relative;
  }
  .story .textbox .en-story {
    width: 380px;
  }
  .story .textbox .image02 {
    position: absolute;
    width: 344px;
    top: 0;
    right: 0;
  }
  #access .maparea {
    width: calc(100% - 320px);
    margin: 0 auto 80px;
    display: flex;
  }
  #access .maparea .textbox {
    width: calc(100% - 872px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #access .maparea .textbox .title {
    font-size: 15px;
    font-weight: 500;
    color: #70650b;
    margin-bottom: 10px;
  }
  #access .maparea .textbox .address {
    color: #4a4a4a;
    margin-bottom: 30px;
  }
  #access .maparea .textbox .en-Title {
    font-size: 13px;
    font-weight: 500;
    color: #70650b;
    margin-bottom: 10px;
  }
  #access .maparea .textbox .en-address {
    font-size: 10px;
    width: 200px;
    margin-bottom: 30px;
  }
  #access .maparea .mapbox {
    width: 872px;
  }
  #access .rootbox dl#car dd ul {
    margin-bottom: 40px;
  }
  .sp {
    display: none;
  }
}
@media (min-width: 1550px) {
  .tolink {
    font-size: 15px;
  }
  #firstview .title {
    width: 620px;
  }
  #firstview .title h1 {
    font-size: 36px;
  }
  #firstview .title .title-en {
    width: 358px;
    padding-bottom: 104px;
  }
  #firstview .title .title-en::after {
    bottom: 40px;
    width: 23px;
    height: 23px;
  }
  #firstview .title .text {
    font-size: 26px;
  }
  #firstview .title .open {
    font-size: 91px;
  }
  #firstview .title .open span {
    font-size: 91px;
  }
  #firstview .title .start {
    font-size: 59px;
    padding-bottom: 26px;
  }
  #firstview .title .start span {
    font-size: 68px;
  }
  #firstview .title .enBox.pdpc {
    width: 620px;
  }
  #firstview .title .enBox .enOpen {
    font-family: "Noto Serif Display", serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    font-variation-settings:
      "wdth"100;
    font-size: 23px;
  }
  #firstview .global nav ul li a {
    font-size: 19px;
  }
  #introduction .textbox .title .textimage {
    max-width: 624px;
    padding-bottom: 32px;
  }
  #introduction .textbox .title h2 {
    font-size: 36px;
  }
  #introduction .textbox .text {
    font-size: 19px;
  }
  #introduction .textbox .intro_en {
    width: 650px;
  }
  #concept .box .titlebox .sticky .sub {
    font-size: 13px;
  }
  #concept .box .titlebox .sticky h2 {
    font-size: 31px;
  }
  #concept .box .conceptbox li h3 {
    font-size: 23px;
    color: #1b1b1b;
    margin-bottom: 0.5em;
  }
  #concept .box .conceptbox li .text {
    font-size: 17px;
  }
  #stay {
    padding: 2.1vw 0 12.5vw;
  }
  #stay .notebox {
    max-width: 1200px;
  }
  #stay .notebox .note {
    font-size: 17px;
  }
  #stay .textbox h3 {
    font-size: 23px;
  }
  #stay .textbox .text {
    font-size: 17px;
  }
  #stay .box01 {
    margin: 0 auto 8.3vw;
  }
  #stay .box02 {
    margin-bottom: 8.3vw;
  }
  #stay .box02 .inbox {
    max-width: 1200px;
  }
  #stay .box03 {
    max-width: 1200px;
  }
  #kura .textbox h3 {
    font-size: 26px;
  }
  #kura .textbox .text {
    font-size: 17px;
  }
  #kura .textbox .en-kura {
    width: 30rem;
  }
  .story .textbox h3 {
    font-size: 26px;
  }
  .story .textbox .text {
    font-size: 17px;
  }
  .story .textbox .en-story {
    width: 494px;
  }
  #access .rootbox dd .en-traintext {
    width: 620px;
  }
  #access .maparea .textbox .title {
    font-size: 19px;
  }
  #access .maparea .textbox .address {
    font-size: 17px;
  }
  #access .maparea .textbox .en-address {
    width: 260px;
  }
  #access .rootbox dt .title {
    font-size: 23px;
  }
  #access .rootbox dd .detail {
    font-size: 17px;
  }
  #access .rootbox dd .detail span {
    font-size: 19px;
  }
  #access .rootbox dl#car dd .parking {
    max-width: 1430px;
  }
  #access .rootbox dl#car dd .parking .box {
    max-width: 830px;
  }
  #access .rootbox dl#car dd .parking .textbox .title {
    font-size: 19px;
  }
  #access .rootbox dl#car dd .parking .textbox .text {
    font-size: 17px;
  }
  #sightseeing .title {
    font-size: 26px;
  }
  #sightseeing .subtitle {
    font-size: 17px;
  }
  #sightseeing .en-text {
    width: 619px;
  }
  #sightseeing ul {
    max-width: 1450px;
  }
  #sightseeing ul li {
    padding: 10px;
  }
  #sightseeing ul li .box .name {
    font-size: 19px;
  }
  #sightseeing ul li .box .text {
    font-size: 17px;
  }
  #sightseeing ul li .box .time {
    font-size: 13px;
  }
  footer .box #information {
    width: 1000px;
  }
  footer .box #information .hotelinfo .name {
    font-size: 31px;
  }
  footer .box #information .hotelinfo .note {
    font-size: 26px;
  }
  footer .box #information .hotelinfo .address {
    font-size: 19px;
  }
  footer .box #information .hotelinfo .en-hotelinfo {
    width: 435px;
  }
  footer .box #information .inquiry .title {
    font-size: 26px;
  }
  footer .box #information .inquiry .urlLink {
    font-size: 19px;
  }
  footer .box #information .inquiry .address {
    font-size: 17px;
  }
  footer .box #information .inquiry .telfax {
    font-size: 17px;
  }
  footer .box #information .inquiry .en-inquiry {
    width: 380px;
  }
  footer .attention .text {
    font-size: 13px;
  }
  footer .attention .enText {
    font-size: 11px
  }
}
@media screen and (min-width: 1024px) and (max-width: 1360px) {
  #introduction .textbox .title .textimage, #introduction .textbox .intro_en {
    max-width: 400px;
  }
  .story .textbox .image02 {
    position: absolute;
    width: 240px;
    top: -15%;
    right: 0;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1420px) {
  #access .maparea {
    flex-direction: column;
  }
  #access .maparea .textbox {
    width: fit-content;
    margin-bottom: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .sp {
    display: none;
  }
}