@charset "utf-8";

body {
  color: #222222;
}

a:link {
  color: #888888;
}
a:visited {
  color: #888888;
}
a:hover {
  color: rgba(136, 136, 136, 0.9);
}
a:active {
  color: rgba(136, 136, 136, 0.9);
}

.lb {
  padding-bottom: 3px;
}
.lb a:link {
  border-bottom: 1px solid #0073be;
}
.lb a:visited {
  border-bottom: 1px solid #0073be;
}
.lb a:hover {
  border-bottom: 3px double #be0014;
}
.lb a:active {
  border-bottom: 3px double #be0014;
}
.lb li {
  margin-bottom: 5px;
}
.lbh {
  padding-bottom: 1px;
}
.lbh a:hover {
  border-bottom: 1px solid #be0014;
}
.lbh a:active {
  border-bottom: 1px solid #be0014;
}
.lbh li {
  margin-bottom: 1px;
}

.nb a:link {
  border: none;
}
.nb a:visited {
  border: none;
}
.nb a:hover {
  border: none;
}
.nb a:active {
  border: none;
}

.intxt p {
  margin-bottom: 0.8em;
}

body.noscroll {
  overflow-y: hidden;
}

.preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 200;
  padding: 1%;
  box-sizing: border-box;
}

.preloader-outer {
  width: 100%;
  height: 100%;
  position: relative;
}

/* プリローダー外枠線*/
.preloader-outer:before,
.preloader-outer:after {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  background-color: #888;
  margin: auto;
}
.preloader-outer:before {
  left: 0;
}
.preloader-outer:after {
  right: 0;
}
.preloader-inner:before,
.preloader-inner:after {
  content: "";
  position: absolute;
  height: 0;
  width: 1px;
  background-color: #888;
  margin: auto;
}
.preloader-inner:before {
  bottom: 0;
}
.preloader-inner:after {
  top: 0;
}

/* .preloader-outer.on:before.preloader-outer.on:after { animation: 1.5s linear lineDraw1 forwards; }
.preloader-inner.on:before,.preloader-inner.on:after { animation: 1.5s linear lineDraw2 forwards; } */

.preloader-outer.on:before {
  animation: 0.5s linear lineDraw1 forwards;
}
.preloader-inner.on:after {
  animation: 0.5s linear lineDraw2 forwards;
}
.preloader-outer.on:after {
  animation: 0.5s linear lineDraw1 forwards;
}
.preloader-inner.on:before {
  animation: 0.5s linear lineDraw2 forwards;
}

/* プリローダー斜め線 */
.preloader-contents:before,
.preloader-contents:after {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  background-color: #888;
  top: 0;
}
.preloader-contents.on:before,
.preloader-contents.on:after {
  animation: 0.5s 0.5s linear lineDraw3 forwards;
}

.preloader-contents:before {
  transform-origin: left;
  left: 0;
  transform: rotate(31deg);
}
.preloader-contents:after {
  transform-origin: right;
  right: 0;
  transform: rotate(-31deg);
}

.preloader-outer:before {
  top: 0;
}
.preloader-outer:after {
  bottom: 0;
}
.preloader-inner:before {
  left: 0;
}
.preloader-inner:after {
  right: 0;
}

@keyframes lineDraw1 {
  100% {
    width: 100%;
  }
}
@keyframes lineDraw2 {
  100% {
    height: 100%;
  }
}
@keyframes lineDraw3 {
  100% {
    width: 58.3%;
  }
}

/* プリローダーロゴ部分 */
.preloader-logo {
  width: 167px;
  height: 176px;
  position: absolute;
  top: 67%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}
.preloader-logoColor {
  display: none;
}

#preloader-svg {
  width: 100%;
  height: 100%;
}
#preloader-rect {
  width: 100%;
  height: 100%;
}

.cls-1 {
  fill: none;
  stroke: #888;
  stroke-linejoin: round;
  stroke-width: 1px;
}
.cls-2 {
  filter: url(#filter);
}
.cls-3 {
  fill: #ddd;
}

#preloader-logo {
  fill: #b0b0b0;
}
#preloader-vessel {
  fill: #7b7b7b;
}
#preloader-hotels {
}

.topicpath {
  position: relative;
  width: 100%;
  font-size: 0.9em;
}
.topicpath ol {
  position: relative;
  width: 1200px;
  text-align: left;
  margin: 0 auto;
  padding: 1em 0;
}
.topicpath ol li {
  float: left;
}
.topicpath ol li em {
  padding: 0 0.5em;
}

.c0 {
  color: #000000 !important;
}
.c0 a {
  color: #000000 !important;
}
.c1 {
  color: #ffffff !important;
}
.c1 a {
  color: #ffffff !important;
}
.c2 {
  color: #888888 !important;
}
.c2 a {
  color: #888888 !important;
}
.c6 {
  color: #e47415 !important;
}
.c6 a {
  color: #e47415 !important;
}

.bg0 {
  background-color: #000000 !important;
}
a.bg0:hover {
  background-color: #ffffff !important;
}
.bg1 {
  background-color: #ffffff !important;
}
a.bg1:hover {
  background-color: #000000 !important;
}
.bg2 {
  background-color: #f8f8f8 !important;
}
a.bg2:hover {
  background-color: #cccccc !important;
}
.bg3 {
  background-color: #f9f9f9 !important;
}
a.bg2:hover {
  background-color: #cccccc !important;
}

.bg_stripe {
  background: url(../img/bg_stripe.png) repeat left top;
}

.notice {
  color: #e8383d;
}
.appeal {
  color: #6a609c;
}
.accent {
  color: #26499d;
}

/*
h1, h2, h3, h4, h5, h6, caption, dt { position:relative; line-height:1.3; }
h1 .en, h2 .en, h3 .en, h4 .en, h5 .en, h6 .en, caption .en, dt .en { font-family: 'Lusitana', serif; font-variant:small-caps; letter-spacing:0.05em; }
h1 .ja, h2 .ja, h3 .ja, h4 .ja, h5 .ja, h6 .ja, caption .ja, dt .ja { font-family:"NotoSerif","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "小塚明朝 Pro R", "Kozuka Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif; }
h1.mb, h2.mb, h3.mb, h4.mb, h5.mb, h6.mb, caption.mb, dt.mb { margin-bottom:1em; }
 */

.highlight {
  transition: 0.5s opacity ease-out;
}
.highlight:hover {
  opacity: 0.7;
}

.cf:after {
  clear: both;
}
.cf:before,
.cf:after {
  display: table;
  content: "";
}

table.flsp tr:first-child th,
table.flsp tr:first-child td {
  padding-top: 1em !important;
}
table.flsp tr:last-child th,
table.flsp tr:last-child td {
  padding-bottom: 1em !important;
}
table.col {
  border-collapse: collapse;
  border-spacing: 0;
}
table.sep {
  border-collapse: separate;
  border-spacing: 2px;
}

table.type1 {
  border-collapse: collapse;
  border-spacing: 0;
}
table.type1 th {
  color: #111111;
  background-color: #f9f9f9;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
}
table.type1 td {
  color: #111111; /* background-color:#ffffff; */
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
}

table.type2 {
  border-collapse: collapse;
  border-spacing: 0;
}
table.type2 th {
  text-align: center;
  color: #000000;
  background-color: #f5f5f5;
  border-top: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
}
table.type2 td {
  text-align: center;
  color: #000000; /* background-color:#ffffff; */
  border-bottom: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
}

th.bg1,
td.bg1 {
  color: #111111;
  background-color: #858298 !important;
}
th.bg2,
td.bg2 {
  color: #111111;
  background-color: #857770 !important;
}
th.bg3,
td.bg3 {
  color: #111111;
  background-color: #c7b65d !important;
}
th.bg4,
td.bg4 {
  color: #111111;
  background-color: #939393 !important;
}

/* .newsBtn */
.newsBtn,
.newsBtn:before {
  transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.newsBtn {
  font-family: "Lusitana", serif;
  position: fixed;
  top: 14px;
  left: 0;
  width: 40px;
  height: 90px;
  z-index: 100;
  font-size: 12px;
  letter-spacing: 3px;
  background-color: #fff;
  cursor: pointer;
  line-height: 1;
  box-sizing: border-box;
}
.newsBtn.on {
  border: solid 1px #ccc;
  border-left: none;
}
.newsBtn:before {
  content: "";
  width: 100%;
  height: 0;
  position: absolute;
  top: auto;
  bottom: 0;
  background-color: #000;
}
.newsBtn-txt {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  position: absolute;
  top: 52%;
  left: 47%;
  transform: translate(-50%, -50%);
}
.newsBtn:hover {
  color: #fff;
}
.newsBtn:hover:before {
  height: 100%;
  top: 0;
  bottom: auto;
}

#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span {
  width: 3px;
  height: 3px;
  margin: -5px 0px 0px -5px;
}

/* fullpage */
#fullpage {
  padding-right: 25vw;
}
.fullpageOuter {
  position: relative;
}
.fullpageOuter:before,
.fullpageOuter:after {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  content: "";
  z-index: 0;
}
.fullpageOuter:before {
  height: 100%;
  width: 14px;
}
.fullpageOuter:after {
  height: 14px;
  width: 100%;
}
#fp-nav ul li,
.fp-slidesNav ul li {
  margin: 0 0 7px 0;
  width: 7px;
  height: 7px;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
  background-color: transparent;
  border: solid 1px #222;
}
#fp-nav.left {
  left: 35px;
  margin-top: -20px !important;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
  width: 7px;
  height: 7px;
}
#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span {
  width: 7px;
  height: 7px;
  margin: -2px 0 0 -2px;
}
#fp-nav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li a.active span,
.fp-slidesNav ul li:hover a.active span {
  width: 7px;
  height: 7px;
  margin: -2px 0 0 -2px;
  background-color: #222;
}

.fp-slides {
  overflow-x: auto;
}

.fullpage-txtContents {
  position: absolute;
  top: 14%;
  left: 10%;
  z-index: 2;
}
.fullpage-txtContents.typeA {
  top: 13%;
  left: 9.5%;
}
.fullpage-txtContents.typeB {
  top: auto;
  left: auto;
  right: 7%;
  bottom: 9%;
}
.fullpage-img {
  width: 100%;
  height: auto;
}
.fullpage-txtImg {
  margin-bottom: 33px;
}
/* .fullpage-ttl { font-family: 'NotoSerif'; font-size: 3vw; line-height: 1.7; margin-bottom: 18px; letter-spacing: 4px; white-space: nowrap;} */
.fullpage-ttl {
  margin-bottom: 20px;
}
.fullpage-ttl.typeSVG1 {
  width: calc(652px / 2);
}
.fullpage-ttl.typeSVG2 {
  width: calc(773px / 2);
}
.fullpage-ttl.typeSVG3 {
  width: calc(1200px / 2);
  margin-bottom: 15px;
}
.fullpage-ttl.typeSVG4 {
  width: calc(1023px / 2);
}
.fullpage-ttl.typeSVG5 {
  width: calc(702px / 2);
}

.fullpage-ttl.typeSVGCampana {
  width: calc(976px / 2);
}
.fullpage-ttl.typeSVGInn {
  width: calc(1143px / 2);
}
.fullpage-ttl.typeSVGHotels {
  width: calc(938px / 2);
}

.fullpage-ttl.whiteTxt {
  color: #fff;
}
.fullpage-ttl span {
  word-break: keep-all;
}
.fullpage-txt {
  font-family: "NotoSerif";
  font-size: 1vw;
  line-height: 2.8;
  letter-spacing: 1px;
  margin-bottom: 27px;
  word-break: keep-all;
}
.bgWhite {
  background-color: #fff;
  display: inline-block;
  line-height: 1;
  padding: 3px 0 3px 2px;
}
.fullpage-txt.whiteTxt {
  color: #fff;
}

/* fullpage各画像 */
.fullpage-slide1 {
  background: url("../../img/top/main/pc/1/img.jpg") no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}
.fullpage-slide3 {
  background: url("../../img/top/main/pc/3/img.jpg") no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}
.fullpage-slide4 {
  background: url("../../img/top/main/pc/4/img.jpg") no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}
.fullpage-slide5 {
  background: url("../../img/top/main/pc/5/img.jpg") no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}
/*.fullpage-slide6 { background: url('../../img/top/main/pc/6/anime.gif') no-repeat left bottom; -webkit-background-size: cover; background-size: cover; position: relative;}*/
.fullpage-slide6 {
  position: relative;
  overflow: hidden;
}
.home-slider {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 75vw;
  height: auto;
}
.slider {
  opacity: 0;
  transition: opacity 0.3s linear;
}
.slider.slick-initialized {
  opacity: 1;
}
.home-slider .slide-item {
  width: 75vw !important;
  height: 100vh !important;
  background-size: cover !important;
  background-position: left center !important;
}
.slick-slide {
  outline: none;
}
.home-slider .slick-slide img {
  width: 100%;
  height: auto;
}
.slider .slick-slide {
  top: 14px !important;
}
#thumbnail_slider {
  position: absolute;
  bottom: 3px;
  left: 15px;
}
#thumbnail_slider li {
  width: 60px !important;
  margin-right: 8px !important;
  position: relative;
}
#thumbnail_slider li:after {
  display: block;
  content: "";
  position: absolute;
  margin: auto;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
}
#thumbnail_slider .slick-current.slick-active li:after {
  display: none;
}
#thumbnail_slider .slick-track {
  transform: translate3d(0, 0px, 0px) !important;
}

/* コロナバナー追加 2020/9/2 */
.fullpage-slide7 {
  transition: 0.5s opacity ease-out;
  background: url("../../img/top/main/pc/7/img.jpg") no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}
/* コロナバナー追加 2020/9/2 */
.fullpage-slide7:hover {
  opacity: 0.4;
  transition: 0.5s opacity ease-out;
}

/* ベストレートバナー追加 */
.fullpage-slide8 {
  background: url("../../img/top/main/pc/8/8.png") no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  .fullpage-slide8 {
    background: url("../../img/top/main/sumaho/8_sp.png") no-repeat;
    -webkit-background-size: cover;
    background-size: contain;
  }
}

.fullpage-view-contents1 {
  background: url("../../img/top/main/pc/2/campana/1.jpg") no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}
.fullpage-view-contents2 {
  background: url("../../img/top/main/pc/2/inn/1.jpg") no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}
.fullpage-view-contents3 {
  background: url("../../img/top/main/pc/2/hotels/1.jpg") no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}
.fullpage-campana {
  background: url("../../img/top/main/pc/2/campana/2.jpg") no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}
.fullpage-inn {
  background: url("../../img/top/main/pc/2/inn/2.jpg") no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}
.fullpage-hotels {
  background: url("../../img/top/main/pc/2/hotels/2.jpg") no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

.fullpage-japan {
  position: absolute;
  bottom: 14vw;
  right: 4vw;
  width: 33vw;
}

/* .sideMenu */
.sideMenu {
  position: fixed;
  min-width: 310px;
  width: 25vw;
  height: 100%;
  top: 0;
  right: 0;
  background-color: #fff;
  z-index: 3;
  box-sizing: border-box;
  padding: 10px 14px 35px 10px;
}
.sideMenu-inner {
  width: 100%;
  height: 100%;
  position: relative;
}
/*.sideMenu-contents { width: 185px; height: 509px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}
*/
.sideMenu-contents {
  width: 185px;
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
/*.sideMenu-logo { width: calc(320px/2); height: calc(338px/2); margin: 0 auto 40px;}*/
.sideMenu-logo {
  max-width: calc(320px / 2);
  width: 16vh;
  margin: 0 auto 4vh;
}

/* .lang
.lang { color: #888; font-family: 'Lusitana', serif; font-size: 12px; line-height: 1; text-align: right; padding: 10px 0 0 0;  position: relative; letter-spacing: 1px; z-index: 10;}
.lang-txt { display: block; cursor: pointer; margin-bottom: 5px;}
.lang span { position: relative; }
.lang span:before { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 1px;background-color: #888; transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);}

.lang span:hover:before { width: 0; left: auto; right: 0;}
.multilingual { display: none; background-color: #f8f8f8; text-align: left; padding: 20px 25px; font-size: 10px; width: 145px; float: right; box-sizing: border-box; display: none;}
.multilingual a { color: #222; display: block; border-bottom: 1px solid #dadada; padding-bottom: 7px; margin-bottom: 7px; position: relative; z-index: 10; transition: .5s all ease-out;}
.multilingual a:hover { opacity: .5; }
.multilingual li:last-of-type a{ margin-bottom: 0; border-bottom: none; padding-bottom: 0;}
*/

/* ie marginの設定が別ブラウザと異なるため高さ指定 */
.sideMenu-links1 {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-align: left;
  font-size: 13px;
  line-height: 1;
  height: 146px;
}
.sideMenu-links1 li {
  margin-left: 29px;
  letter-spacing: 1.5px;
}
.sideMenu-links1 li:last-of-type {
  margin-left: 0;
}
.sideMenu-links1 a {
  color: #222;
  transition: 0.5s opacity ease-out;
}
.sideMenu-links1 a:hover {
  opacity: 0.4;
}

.sideMenu-links2 {
  width: 100%;
}
.sideMenu-links2 li {
  font-size: 0.7vw;
  box-sizing: border-box;
  float: left;
  width: 50%;
  text-align: center;
  border-right: 1px solid #888;
}
.sideMenu-links2 li:last-of-type {
  border-right: none;
}
.sideMenu-links2 a {
  color: #888;
  display: block;
  transition: 0.5s opacity ease-out;
}
.sideMenu-links2 a:hover {
  opacity: 0.4;
}

.sideMenu-links3 {
  /*margin-top: 5vh;*/
  font-size: 11px;
  text-align: center;
  position: absolute;
  bottom: 110px;
  margin: auto;
  left: 0;
  right: 0;
  width: 185px;
}
/*.sideMenu-links3 a {
    color: #221814; background: url('../img/logo_ref.png') no-repeat left center; background-size: 15px;padding: 5px 0 7px 20px;
    border-bottom: 4px double;letter-spacing: 1.5px;
}*/

.sideMenu-links3 a {
  color: #000;
  padding: 5px 0 15px;
  border-bottom: 4px double;
  letter-spacing: 1.5px;
}

/*.sideMenu-links3 a:after {
	content: url('../../common/img/icon_insta02.png');
	transform: scale(0.8);
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
}*/

.sideMenu-btns {
  margin: 0 auto 20px;
}

/* .copy */
.copy {
  font-size: 10px;
  color: #999;
  font-family: "Lusitana", serif;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

/* .btn */
.btn,
.btn:before,
.btn:after {
  transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* トップページ用のボタンスタイル */
.btn.top {
  width: 12.4vw;
  min-width: 215px;
}

.btn1 {
  position: relative;
  background-color: #000;
  color: #fff !important;
  text-align: center;
  letter-spacing: 1px;
  font-size: 0.8vw;
  padding: 10px 0;
  border: solid 1px #dcdcdc;
  display: block;
  box-sizing: border-box;
  cursor: pointer;
  z-index: 1;
}
.btn1.typeA {
  margin-bottom: 4px;
}
.btn1:before {
  content: "";
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  width: 0;
  height: 100%;
  background-color: #e9930e;
  z-index: -1;
}
.btn1:hover:before {
  width: 100%;
  right: auto;
  left: 0;
}

.btn2 {
  position: relative;
  background-color: #fff;
  color: #222 !important;
  text-align: center;
  letter-spacing: 1px;
  font-size: 12px;
  padding: 10px 0;
  border: solid 1px #c7c7c7;
  display: block;
  z-index: 1;
  transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
  width: 100%;
}
.btn2:before {
  content: "";
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  width: 0;
  height: 100%;
  background-color: #d9d9d9;
  z-index: -1;
}
.btn2:hover {
  border: solid 1px #d9d9d9;
}
.btn2:hover:before {
  width: 100%;
  right: auto;
  left: 0;
}

.btn3,
.reservation-btns1-inner .btn3 {
  color: #222 !important;
  border: solid 1px rgba(0, 0, 0, 0.4);
  display: block;
  box-sizing: border-box;
  padding: 16px 26px;
  font-size: 13px;
  position: relative;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.btn3:before,
.btn3:after {
  content: "";
  position: absolute;
}
.btn3:before {
  top: 0;
  left: auto;
  right: 0;
  width: 0;
  height: 100%;
  background-color: #000;
  z-index: -1;
}
.btn3:after {
  background: url("../img/arrow/arrow1.svg") no-repeat;
  width: calc(10px / 2);
  height: calc(18px / 2);
  -webkit-background-size: contain;
  background-size: contain;
  top: 50%;
  right: 10px;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.btn3:hover {
  color: #fff !important;
}
.btn3:hover:before {
  width: 100%;
  right: auto;
  left: 0;
}
.btn3:hover:after {
  background: url("../img/arrow/arrow2.svg") no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
}

.btn3.typeA {
  text-align: center;
}

.btn4 {
  color: #222 !important;
  display: block;
  box-sizing: border-box;
  padding: 16px 26px;
  font-size: 13px;
  position: relative;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.btn4:before,
.btn4:after,
.btn4 .border:before,
.btn4 .border:after {
  content: "";
  position: absolute;
  background-color: rgba(0, 0, 0, 0.4);
}

.btn4:before,
.btn4:after {
  width: 100%;
  height: 1px;
}
.btn4:before {
  top: 0;
  right: 0;
}
.btn4:after {
  bottom: 0;
  left: 0;
}

.btn4 .border:before,
.btn4 .border:after {
  width: 1px;
  height: 100%;
}
.btn4 .border:before {
  top: 0;
  left: 0;
}
.btn4 .border:after {
  bottom: 0;
  right: 0;
}

.btn4:hover:before {
  animation: btnBorderTopWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn4:before {
  animation: btnBorderTopWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn4:hover:after {
  animation: btnBorderBottomWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn4:after {
  animation: btnBorderBottomWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn4:hover .border:before {
  animation: btnBorderLeftWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.border:before {
  animation: btnBorderLeftWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn4:hover .border:after {
  animation: btnBorderRightWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.border:after {
  animation: btnBorderRightWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.btn4 .arrow:before {
  content: "";
  position: absolute;
  background: url("../img/arrow/arrow1.svg") no-repeat;
  width: calc(10px / 2);
  height: calc(18px / 2);
  -webkit-background-size: contain;
  background-size: contain;
  top: 50%;
  right: 10px;
  transform: translate(-50%, -50%);
  z-index: -1;
}

@keyframes btnBorderTopWidth {
  50% {
    right: 100%;
  }
  51% {
    right: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btnBorderTopWidth2 {
  50% {
    right: 100%;
  }
  51% {
    right: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btnBorderBottomWidth {
  50% {
    left: 100%;
  }
  51% {
    left: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btnBorderBottomWidth2 {
  50% {
    left: 100%;
  }
  51% {
    left: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btnBorderLeftWidth {
  50% {
    top: 100%;
  }
  51% {
    top: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes btnBorderLeftWidth2 {
  50% {
    top: 100%;
  }
  51% {
    top: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes btnBorderRightWidth {
  50% {
    bottom: 100%;
  }
  51% {
    bottom: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes btnBorderRightWidth2 {
  50% {
    bottom: 100%;
  }
  51% {
    bottom: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}

/* ベッセルホテルカンパーナ ホテルサイトへ */
.btn5 {
  color: #fff !important;
  background-color: #9a0031;
  display: block;
  box-sizing: border-box;
  padding: 16px 26px;
  font-size: 13px;
  position: relative;
  line-height: 1;
  position: relative;
  z-index: 1;
  border: solid 1px #9a0031;
}
.btn5:before,
.btn5:after {
  content: "";
  position: absolute;
}
.btn5:before {
  top: 0;
  left: auto;
  right: 0;
  width: 0;
  height: 100%;
  background-color: #000;
  z-index: -1;
}
.btn5:after {
  background: url("../img/arrow/arrow2.svg") no-repeat;
  width: calc(10px / 2);
  height: calc(18px / 2);
  -webkit-background-size: contain;
  background-size: contain;
  top: 50%;
  right: 10px;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.btn5:hover {
  background-color: rgba(255, 255, 255, 0.6);
  color: #000 !important;
}
.btn5:hover:after {
  background: url("../img/arrow/arrow1.svg") no-repeat;
  width: calc(10px / 2);
  height: calc(18px / 2);
  -webkit-background-size: contain;
  background-size: contain;
  top: 50%;
  right: 10px;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.btn6 {
  color: #fff !important;
  background-color: #000;
  display: block;
  box-sizing: border-box;
  padding: 16px 26px;
  font-size: 13px;
  position: relative;
  line-height: 1;
  position: relative;
  z-index: 1;
  border: solid 1px #000;
}
.btn6 span {
  display: block;
  line-height: 1;
}
.btn6:before,
.btn6:after {
  content: "";
  position: absolute;
}
.btn6:before {
  top: 0;
  left: auto;
  right: 0;
  width: 0;
  height: 100%;
  background-color: #000;
  z-index: -1;
}
.btn6:after {
  background: url("../img/arrow/arrow2.svg") no-repeat;
  width: calc(10px / 2);
  height: calc(18px / 2);
  -webkit-background-size: contain;
  background-size: contain;
  top: 50%;
  right: 10px;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.btn6:hover {
  background-color: #fff;
  border: 1px #555 solid;
  color: #555 !important;
}
.btn6:hover:after {
  background: url("../img/arrow/arrow1.svg") no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
}

.btn7 {
  color: #fff !important;
  background-color: #009944;
  display: block;
  box-sizing: border-box;
  padding: 16px 26px;
  font-size: 13px;
  position: relative;
  line-height: 1;
  position: relative;
  z-index: 1;
  border: solid 1px #009944;
}
.btn7:before,
.btn7:after {
  content: "";
  position: absolute;
}
.btn7:before {
  top: 0;
  left: auto;
  right: 0;
  width: 0;
  height: 100%;
  background-color: #000;
  z-index: -1;
}
.btn7:after {
  background: url("../img/arrow/arrow2.svg") no-repeat;
  width: calc(10px / 2);
  height: calc(18px / 2);
  -webkit-background-size: contain;
  background-size: contain;
  top: 50%;
  right: 10px;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.btn7:hover {
  background-color: rgba(255, 255, 255, 0.6);
  color: #000 !important;
}
.btn7:hover:after {
  background: url("../img/arrow/arrow1.svg") no-repeat;
  width: calc(10px / 2);
  height: calc(18px / 2);
  -webkit-background-size: contain;
  background-size: contain;
  top: 50%;
  right: 10px;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.btn8 {
  color: #fff !important;
  background-color: #1d2088;
  display: block;
  box-sizing: border-box;
  padding: 16px 26px;
  font-size: 13px;
  position: relative;
  line-height: 1;
  position: relative;
  z-index: 1;
  border: solid 1px #1d2088;
}
.btn8:before,
.btn8:after {
  content: "";
  position: absolute;
}
.btn8:before {
  top: 0;
  left: auto;
  right: 0;
  width: 0;
  height: 100%;
  background-color: #000;
  z-index: -1;
}
.btn8:after {
  background: url("../img/arrow/arrow2.svg") no-repeat;
  width: calc(10px / 2);
  height: calc(18px / 2);
  -webkit-background-size: contain;
  background-size: contain;
  top: 50%;
  right: 10px;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.btn8:hover {
  background-color: rgba(255, 255, 255, 0.6);
  color: #000 !important;
}
.btn8:hover:after {
  background: url("../img/arrow/arrow1.svg") no-repeat;
  width: calc(10px / 2);
  height: calc(18px / 2);
  -webkit-background-size: contain;
  background-size: contain;
}

.btn9 {
  color: #222 !important;
  display: block;
  box-sizing: border-box;
  padding: 16px 26px;
  font-size: 13px;
  position: relative;
  line-height: 1;
  position: relative;
  z-index: 1;
  background-color: #000;
  color: #fff !important;
  transition: 1s cubic-bezier(0.25, 0.1, 0.25, 1);
  overflow: hidden;
}
.btn9:before,
.btn9:after,
.btn9 .border:before,
.btn9 .border:after {
  content: "";
  position: absolute;
  background-color: #000;
}

.btn9:before,
.btn9:after {
  width: 100%;
  height: 1px;
}
.btn9:before {
  top: 0;
  left: 0;
}
.btn9:after {
  bottom: 0;
  right: 0;
}

.btn9 .border:before,
.btn9 .border:after {
  width: 1px;
  height: 100%;
}
.btn9 .border:before {
  bottom: 0;
  left: 0;
}
.btn9 .border:after {
  top: 0;
  right: 0;
}

.btn9:hover {
  background-color: rgba(255, 255, 255, 0);
  color: #000 !important;
}
.btn9:hover:before {
  animation: btnBorderTopWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn9:before {
  animation: btnBorderTopWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn9:hover:after {
  animation: btnBorderBottomWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn9:after {
  animation: btnBorderBottomWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn9:hover .border:before {
  animation: btnBorderLeftWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.border:before {
  animation: btnBorderLeftWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn9:hover .border:after {
  animation: btnBorderRightWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.border:after {
  animation: btnBorderRightWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.btn9 .arrow:before {
  content: "";
  position: absolute;
  background: url("../img/arrow/arrow2.svg") no-repeat;
  width: calc(10px / 2);
  height: calc(18px / 2);
  -webkit-background-size: contain;
  background-size: contain;
  top: 50%;
  right: 10px;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.btn9:hover .arrow:before {
  content: "";
  position: absolute;
  background: url("../img/arrow/arrow1.svg") no-repeat;
  width: calc(10px / 2);
  height: calc(18px / 2);
  -webkit-background-size: contain;
  background-size: contain;
  top: 50%;
  right: 10px;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.btn10 {
  color: #222 !important;
  display: block;
  box-sizing: border-box;
  padding: 16px 26px;
  font-size: 13px;
  position: relative;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.btn10:before,
.btn10:after,
.btn10 .border:before,
.btn10 .border:after {
  content: "";
  position: absolute;
  background-color: rgba(0, 0, 0, 0.4);
}
.btn10.btnRight {
  float: right;
}

.btn10:before,
.btn10:after {
  width: 100%;
  height: 1px;
}
.btn10:before {
  top: 0;
  left: 0;
}
.btn10:after {
  bottom: 0;
  right: 0;
}

.btn10 .border:before,
.btn10 .border:after {
  width: 1px;
  height: 100%;
}
.btn10 .border:before {
  bottom: 0;
  left: 0;
}
.btn10 .border:after {
  top: 0;
  right: 0;
}

.btn10:hover {
  background-color: #000;
  color: #fff !important;
}
.btn10:hover:before {
  animation: btn10BorderTopWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn10:before {
  animation: btn10BorderTopWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn10:hover:after {
  animation: btn10BorderBottomWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn10:after {
  animation: btn10BorderBottomWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1)
    forwards;
}
.btn10:hover .border:before {
  animation: btn10BorderLeftWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn10 .border:before {
  animation: btn10BorderLeftWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn10:hover .border:after {
  animation: btn10BorderRightWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn10 .border:after {
  animation: btn10BorderRightWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.btn10 .arrow:before {
  content: "";
  position: absolute;
  background: url("../img/arrow/arrow1.svg") no-repeat;
  width: calc(10px / 2);
  height: calc(18px / 2);
  -webkit-background-size: contain;
  background-size: contain;
  top: 50%;
  right: 10px;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.btn10:hover .arrow:before {
  background: url("../img/arrow/arrow2.svg") no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
}

@keyframes btn10BorderTopWidth {
  50% {
    left: 100%;
  }
  51% {
    left: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btn10BorderTopWidth2 {
  50% {
    left: 100%;
  }
  51% {
    left: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btn10BorderBottomWidth {
  50% {
    right: 100%;
  }
  51% {
    right: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btn10BorderBottomWidth2 {
  50% {
    right: 100%;
  }
  51% {
    right: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btn10BorderLeftWidth {
  50% {
    bottom: 100%;
  }
  51% {
    bottom: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes btn10BorderLeftWidth2 {
  50% {
    bottom: 100%;
  }
  51% {
    bottom: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes btn10BorderRightWidth {
  50% {
    top: 100%;
  }
  51% {
    top: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes btn10BorderRightWidth2 {
  50% {
    top: 100%;
  }
  51% {
    top: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}

.btn11 {
  color: #222 !important;
  display: block;
  box-sizing: border-box;
  padding: 16px 26px;
  font-size: 13px;
  position: relative;
  line-height: 1;
  position: relative;
  z-index: 1;
  background-color: #fff;
}
.btn11:before,
.btn11:after,
.btn11 .border:before,
.btn11 .border:after {
  content: "";
  position: absolute;
  background-color: rgba(0, 0, 0, 0.4);
}

.btn11:before,
.btn11:after {
  width: 100%;
  height: 1px;
}
.btn11:before {
  top: 0;
  left: 0;
}
.btn11:after {
  bottom: 0;
  right: 0;
}

.btn11 .border:before,
.btn11 .border:after {
  width: 1px;
  height: 100%;
}
.btn11 .border:before {
  bottom: 0;
  left: 0;
}
.btn11 .border:after {
  top: 0;
  right: 0;
}

.btn11:hover {
  color: #fff !important;
  background-color: #000;
}
.btn11:hover:before {
  animation: btn11BorderTopWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn11:before {
  animation: btn11BorderTopWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn11:hover:after {
  animation: btn11BorderBottomWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn11:after {
  animation: btn11BorderBottomWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1)
    forwards;
}
.btn11:hover .border:before {
  animation: btn11BorderLeftWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn11 .border:before {
  animation: btn11BorderLeftWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn11:hover .border:after {
  animation: btn11BorderRightWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn11 .border:after {
  animation: btn11BorderRightWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.btn11 .arrow:before {
  content: "";
  position: absolute;
  background: url("../img/arrow/arrow1.svg") no-repeat;
  width: calc(10px / 2);
  height: calc(18px / 2);
  -webkit-background-size: contain;
  background-size: contain;
  top: 50%;
  right: 10px;
  transform: translate(-50%, -50%);
  z-index: -1;
}

@keyframes btn11BorderTopWidth {
  50% {
    left: 100%;
  }
  51% {
    left: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btn11BorderTopWidth2 {
  50% {
    left: 100%;
  }
  51% {
    left: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btn11BorderBottomWidth {
  50% {
    right: 100%;
  }
  51% {
    right: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btn11BorderBottomWidth2 {
  50% {
    right: 100%;
  }
  51% {
    right: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btn11BorderLeftWidth {
  50% {
    bottom: 100%;
  }
  51% {
    bottom: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes btn11BorderLeftWidth2 {
  50% {
    bottom: 100%;
  }
  51% {
    bottom: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes btn11BorderRightWidth {
  50% {
    top: 100%;
  }
  51% {
    top: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes btn11BorderRightWidth2 {
  50% {
    top: 100%;
  }
  51% {
    top: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}

.btn12 {
  color: #fff !important;
  display: block;
  box-sizing: border-box;
  padding: 16px 26px;
  font-size: 13px;
  position: relative;
  line-height: 1;
  position: relative;
  z-index: 1;
  background-color: #9a0031;
}
.btn12:before,
.btn12:after,
.btn12 .border:before,
.btn12 .border:after {
  content: "";
  position: absolute;
  background-color: #9a0031;
}

.btn12:before,
.btn12:after {
  width: 100%;
  height: 1px;
}
.btn12:before {
  top: 0;
  left: 0;
}
.btn12:after {
  bottom: 0;
  right: 0;
}

.btn12 .border:before,
.btn12 .border:after {
  width: 1px;
  height: 100%;
}
.btn12 .border:before {
  bottom: 0;
  left: 0;
}
.btn12 .border:after {
  top: 0;
  right: 0;
}

.btn12:hover {
  color: #000 !important;
  background-color: transparent;
}
.btn12:hover:before {
  animation: btn12BorderTopWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn12:before {
  animation: btn12BorderTopWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn12:hover:after {
  animation: btn12BorderBottomWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn12:after {
  animation: btn12BorderBottomWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1)
    forwards;
}
.btn12:hover .border:before {
  animation: btn12BorderLeftWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn12 .border:before {
  animation: btn12BorderLeftWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn12:hover .border:after {
  animation: btn12BorderRightWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn12 .border:after {
  animation: btn12BorderRightWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.btn12 .arrow:before {
  content: "";
  position: absolute;
  background: url("../img/arrow/arrow2.svg") no-repeat;
  width: calc(10px / 2);
  height: calc(18px / 2);
  -webkit-background-size: contain;
  background-size: contain;
  top: 50%;
  right: 10px;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.btn12:hover .arrow:before {
  background: url("../img/arrow/arrow1.svg") no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
}

@keyframes btn12BorderTopWidth {
  50% {
    left: 100%;
  }
  51% {
    left: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btn12BorderTopWidth2 {
  50% {
    left: 100%;
  }
  51% {
    left: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btn12BorderBottomWidth {
  50% {
    right: 100%;
  }
  51% {
    right: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btn12BorderBottomWidth2 {
  50% {
    right: 100%;
  }
  51% {
    right: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btn12BorderLeftWidth {
  50% {
    bottom: 100%;
  }
  51% {
    bottom: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes btn12BorderLeftWidth2 {
  50% {
    bottom: 100%;
  }
  51% {
    bottom: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes btn12BorderRightWidth {
  50% {
    top: 100%;
  }
  51% {
    top: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes btn12BorderRightWidth2 {
  50% {
    top: 100%;
  }
  51% {
    top: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}

.btn13 {
  color: #fff !important;
  display: block;
  box-sizing: border-box;
  padding: 16px 26px;
  font-size: 13px;
  position: relative;
  line-height: 1;
  position: relative;
  z-index: 1;
  background-color: #009944;
}
.btn13:before,
.btn13:after,
.btn13 .border:before,
.btn13 .border:after {
  content: "";
  position: absolute;
  background-color: #009944;
}

.btn13:before,
.btn13:after {
  width: 100%;
  height: 1px;
}
.btn13:before {
  top: 0;
  left: 0;
}
.btn13:after {
  bottom: 0;
  right: 0;
}

.btn13 .border:before,
.btn13 .border:after {
  width: 1px;
  height: 100%;
}
.btn13 .border:before {
  bottom: 0;
  left: 0;
}
.btn13 .border:after {
  top: 0;
  right: 0;
}

.btn13:hover {
  color: #000 !important;
  background-color: transparent;
}
.btn13:hover:before {
  animation: btn13BorderTopWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn13:before {
  animation: btn13BorderTopWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn13:hover:after {
  animation: btn13BorderBottomWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn13:after {
  animation: btn13BorderBottomWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1)
    forwards;
}
.btn13:hover .border:before {
  animation: btn13BorderLeftWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn13 .border:before {
  animation: btn13BorderLeftWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn13:hover .border:after {
  animation: btn13BorderRightWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn13 .border:after {
  animation: btn13BorderRightWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.btn13 .arrow:before {
  content: "";
  position: absolute;
  background: url("../img/arrow/arrow2.svg") no-repeat;
  width: calc(10px / 2);
  height: calc(18px / 2);
  -webkit-background-size: contain;
  background-size: contain;
  top: 50%;
  right: 10px;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.btn13:hover .arrow:before {
  background: url("../img/arrow/arrow1.svg") no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
}

@keyframes btn13BorderTopWidth {
  50% {
    left: 100%;
  }
  51% {
    left: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btn13BorderTopWidth2 {
  50% {
    left: 100%;
  }
  51% {
    left: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btn13BorderBottomWidth {
  50% {
    right: 100%;
  }
  51% {
    right: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btn13BorderBottomWidth2 {
  50% {
    right: 100%;
  }
  51% {
    right: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btn13BorderLeftWidth {
  50% {
    bottom: 100%;
  }
  51% {
    bottom: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes btn13BorderLeftWidth2 {
  50% {
    bottom: 100%;
  }
  51% {
    bottom: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes btn13BorderRightWidth {
  50% {
    top: 100%;
  }
  51% {
    top: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes btn13BorderRightWidth2 {
  50% {
    top: 100%;
  }
  51% {
    top: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}

.btn14 {
  color: #fff !important;
  display: block;
  box-sizing: border-box;
  padding: 16px 26px;
  font-size: 13px;
  position: relative;
  line-height: 1;
  position: relative;
  z-index: 1;
  background-color: #1d2088;
}
.btn14:before,
.btn14:after,
.btn14 .border:before,
.btn14 .border:after {
  content: "";
  position: absolute;
  background-color: #1d2088;
}

.btn14:before,
.btn14:after {
  width: 100%;
  height: 1px;
}
.btn14:before {
  top: 0;
  left: 0;
}
.btn14:after {
  bottom: 0;
  right: 0;
}

.btn14 .border:before,
.btn14 .border:after {
  width: 1px;
  height: 100%;
}
.btn14 .border:before {
  bottom: 0;
  left: 0;
}
.btn14 .border:after {
  top: 0;
  right: 0;
}

.btn14:hover {
  color: #000 !important;
  background-color: transparent;
}
.btn14:hover:before {
  animation: btn14BorderTopWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn14:before {
  animation: btn14BorderTopWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn14:hover:after {
  animation: btn14BorderBottomWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn14:after {
  animation: btn14BorderBottomWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1)
    forwards;
}
.btn14:hover .border:before {
  animation: btn14BorderLeftWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn14 .border:before {
  animation: btn14BorderLeftWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn14:hover .border:after {
  animation: btn14BorderRightWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn14 .border:after {
  animation: btn14BorderRightWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.btn14 .arrow:before {
  content: "";
  position: absolute;
  background: url("../img/arrow/arrow2.svg") no-repeat;
  width: calc(10px / 2);
  height: calc(18px / 2);
  -webkit-background-size: contain;
  background-size: contain;
  top: 50%;
  right: 10px;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.btn14:hover .arrow:before {
  background: url("../img/arrow/arrow1.svg") no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
}

@keyframes btn14BorderTopWidth {
  50% {
    left: 100%;
  }
  51% {
    left: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btn14BorderTopWidth2 {
  50% {
    left: 100%;
  }
  51% {
    left: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btn14BorderBottomWidth {
  50% {
    right: 100%;
  }
  51% {
    right: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btn14BorderBottomWidth2 {
  50% {
    right: 100%;
  }
  51% {
    right: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btn14BorderLeftWidth {
  50% {
    bottom: 100%;
  }
  51% {
    bottom: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes btn14BorderLeftWidth2 {
  50% {
    bottom: 100%;
  }
  51% {
    bottom: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes btn14BorderRightWidth {
  50% {
    top: 100%;
  }
  51% {
    top: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes btn14BorderRightWidth2 {
  50% {
    top: 100%;
  }
  51% {
    top: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}

.btn15 {
  color: #fff !important;
  display: block;
  box-sizing: border-box;
  padding: 16px 26px;
  font-size: 13px;
  position: relative;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.btn15:before,
.btn15:after,
.btn15 .border:before,
.btn15 .border:after {
  content: "";
  position: absolute;
  background-color: rgba(255, 255, 255, 0.4);
}

.btn15:before,
.btn15:after {
  width: 100%;
  height: 1px;
}
.btn15:before {
  top: 0;
  left: 0;
}
.btn15:after {
  bottom: 0;
  right: 0;
}

.btn15 .border:before,
.btn15 .border:after {
  width: 1px;
  height: 100%;
}
.btn15 .border:before {
  bottom: 0;
  left: 0;
}
.btn15 .border:after {
  top: 0;
  right: 0;
}

.btn15:hover {
  background-color: #000;
  color: #fff;
}
.btn15:hover:before {
  animation: btn15BorderTopWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn15:before {
  animation: btn15BorderTopWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn15:hover:after {
  animation: btn15BorderBottomWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn15:after {
  animation: btn15BorderBottomWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1)
    forwards;
}
.btn15:hover .border:before {
  animation: btn15BorderLeftWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn15 .border:before {
  animation: btn15BorderLeftWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn15:hover .border:after {
  animation: btn15BorderRightWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.btn15 .border:after {
  animation: btn15BorderRightWidth2 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.btn15 .arrow:before {
  content: "";
  position: absolute;
  background: url("../img/arrow/arrow2.svg") no-repeat;
  width: calc(10px / 2);
  height: calc(18px / 2);
  -webkit-background-size: contain;
  background-size: contain;
  top: 50%;
  right: 10px;
  transform: translate(-50%, -50%);
  z-index: -1;
}

@keyframes btn15BorderTopWidth {
  50% {
    left: 100%;
  }
  51% {
    left: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btn15BorderTopWidth2 {
  50% {
    left: 100%;
  }
  51% {
    left: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btn15BorderBottomWidth {
  50% {
    right: 100%;
  }
  51% {
    right: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btn15BorderBottomWidth2 {
  50% {
    right: 100%;
  }
  51% {
    right: 0;
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes btn15BorderLeftWidth {
  50% {
    bottom: 100%;
  }
  51% {
    bottom: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes btn15BorderLeftWidth2 {
  50% {
    bottom: 100%;
  }
  51% {
    bottom: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes btn15BorderRightWidth {
  50% {
    top: 100%;
  }
  51% {
    top: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes btn15BorderRightWidth2 {
  50% {
    top: 100%;
  }
  51% {
    top: 0;
    height: 0;
  }
  100% {
    height: 100%;
  }
}

/* .link1 */
.link1 {
  color: #888 !important;
  padding-left: 1em;
  text-decoration: underline;
  position: relative;
  display: block;
  transition: 0.5s all ease-out;
}
.link1:before {
  content: "";
  position: absolute;
  background: url("../img/arrow/arrow1.svg") no-repeat;
  width: calc(10px / 2);
  height: calc(18px / 2);
  -webkit-background-size: contain;
  background-size: contain;
  top: 50%;
  left: 3px;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.link1.typeA:hover {
  opacity: 0.3;
  text-decoration: none;
}
.link1.typeA {
  margin-bottom: 10px;
  display: inline-block;
}

/* news */
.news {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 101;
}
.news-inner {
  box-sizing: border-box;
  padding: 4.9% 9.5%;
  height: 100%;
}
.news-ttl1 {
  margin-bottom: 13%;
  padding-left: 11%;
  letter-spacing: 1px;
  color: #222;
  line-height: 1;
  position: relative;
  font-size: 12px;
  cursor: pointer;
}
.news-ttl1 a {
  color: #222;
}
.news-ttl1 a:hover {
  color: #999;
}
.news-ttl1:before {
  content: "";
  width: calc(19px / 2);
  height: calc(19px / 2);
  background: url("../img/menu.png");
  position: absolute;
  top: -3px;
  left: -5px;
  transform: translate(50%, 50%);
  -webkit-background-size: contain;
  background-size: contain;
}
.news-ttl2 {
  font-size: 13px;
  color: #888;
  margin-bottom: 9%;
}
.news-menu {
  float: left;
  width: 19.5%;
  margin: 0.2% 8% 0 0;
}
.news-contents {
  float: left;
  width: 72.5%;
  height: 100%;
  overflow: hidden;
}
.news-contents-outer {
  height: 100%;
}
.news-menu-inner {
  border-top: solid 1px #dcdcdc;
  padding: 8% 0 0;
}

.news-list1 {
  font-size: 12px;
  line-height: 2;
  margin-bottom: 12%;
}
/* .news-list1 li{ margin-bottom: 9.5%; letter-spacing: 1px;} */
.news-list1 li {
  margin-bottom: 10px;
  letter-spacing: 1px;
}
.news-list1 li:last-of-type {
  margin-bottom: 0;
}
.news-list1 a {
  color: #222;
  position: relative;
  padding-left: 14px;
  transition: 0.5s color ease-out;
}
.news-list1 a:hover {
  color: #999;
}
/* .news-list1 a{ color: #222 ; position: relative; padding-left: 10%;} */
.news-list1 a:before {
  content: "";
  width: calc(7px / 2);
  height: calc(13px / 2);
  background: url("../img/arrow/arrow3.svg") no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
  position: absolute;
  top: 5px;
  left: 3px;
}
.news-list1.yearly a:after {
  content: "年";
}

.news-contents-inner {
  width: 28%;
  float: left;
  margin: 0 4% 4% 0;
  transition: 0.5s opacity ease-out; /*opacity: 0;*/
}
.news-contents-inner:hover {
  opacity: 0.5;
}
.news-contents-inner2 {
  margin-bottom: 4%;
}
.news-contents-img {
  border: 1px solid #efefef;
  box-sizing: border-box;
  margin-bottom: 3%;
}
.news-contents-date {
  font-size: 12px;
  float: left;
  margin-top: 2%;
  color: #888 !important;
}
.news-contents-label {
  font-size: 10px;
  float: right;
  background-color: #000;
  color: #fff;
  padding: 2.5% 6%;
  box-sizing: border-box;
  line-height: 1;
}
.news-contents-txt {
  font-size: 12px;
  line-height: 2;
  letter-spacing: 1px;
  color: #222 !important;
}

.news-contents .mCSB_scrollTools {
  right: -8px;
}
.news-contents .mCSB_inside > .mCSB_container {
  margin-right: 0;
  padding-bottom: 50px;
}
.news-contents .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 4px;
}
.news-contents .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
}
.news-contents .mCSB_scrollTools {
  width: 18px;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000 !important;
}
.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #efefef;
}

.contents_inner {
  clear: both;
  position: relative;
  widows: 96%;
}
.wp-pagenavi {
  display: table;
  margin: auto;
}
.wp-pagenavi span.pages {
  display: none;
}
.wp-pagenavi span {
  display: table-cell;
  color: #222222;
  padding: 0 10px;
}
.wp-pagenavi a {
  display: table-cell;
  color: #888888;
  padding: 0 10px;
}

.wp-pagenavi .crrent,
.wp-pagenavi .page {
  font-family: "Lusitana", serif;
}
.wp-pagenavi .previouspostslink {
  position: absolute;
  top: 65px;
  left: 0;
  font-family: "NotoSerif", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
    "游明朝", YuMincho, "小塚明朝 Pro R", "Kozuka Mincho Pro", "HGS明朝E",
    "ＭＳ Ｐ明朝", serif;
}
.wp-pagenavi .nextpostslink {
  position: absolute;
  top: 65px;
  right: 0;
  font-family: "NotoSerif", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
    "游明朝", YuMincho, "小塚明朝 Pro R", "Kozuka Mincho Pro", "HGS明朝E",
    "ＭＳ Ｐ明朝", serif;
}

/*.information_pager { border-bottom: 1px solid #dddddd; border-top: 1px solid #dddddd; }*/
.information_pager .information_pager_index {
  margin-top: 15px;
  margin-bottom: 15px;
}

/* .reservation */
.reservation {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 102;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 2% 12%; /*padding:4% 12%; */
  overflow-x: hidden;
  overflow-y: scroll;
}
.sumaho-reservation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 102;
}
.reservation-ttl {
  text-align: center;
  font-size: 40px;
  color: #000;
  font-family: "NotoSerif", serif;
  letter-spacing: 2px;
  margin-bottom: 7%;
}
.reservation-ttl1 {
  font-family: "NotoSerif", serif;
  font-size: 19px;
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 4.5%;
  color: #222;
}
.reservation-form {
  border: solid 1px #888;
  border-radius: 2px;
  box-sizing: border-box;
  padding: 4.2% 7%;
  margin: 0 auto 5%;
}
.reservation-txt1 {
  width: 40%;
  letter-spacing: 1px;
  margin: 2.5% 0 0 0;
  float: left;
  line-height: 1;
}
.reservation-txt2 {
  color: #222;
  line-height: 1.8;
  letter-spacing: 1px;
}
.reservation-txt2.typeA {
  margin-bottom: 2%;
}
.reservation-txt2.typeB {
  margin-bottom: 3%;
}
a.reservation-hotel-list {
  line-height: 1;
  color: #888;
  margin-top: 1.7%;
  display: inline-block;
  text-decoration: underline;
}

.bb_line {
  border-bottom: 1px solid #888;
  margin-bottom: 3%;
}
.both {
  clear: both;
}

.reservation-inner1 {
  float: left;
  width: 100%;
}

.reservation-inner1-mg {
  margin-bottom: 30px;
}

.reservation-inner2 {
  float: left;
  width: 48.5%;
}
.reservation-inner3 {
  float: left;
  width: 50%;
  padding-right: 4.6%;
  border-right: solid 1px #888;
  box-sizing: border-box;
}
.reservation-inner3:last-of-type {
  border: none;
  padding: 0 0 0 4.6%;
}

.reservation-kouku-select,
.reservation-input,
.reservation-input1 {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
}
.reservation-kouku-select::-ms-expand,
.reservation-input::-ms-expand,
.reservation-input1::-ms-expand {
  display: none;
}
.reservation-select {
  position: relative;
}
.reservation-select.typeA {
  width: 32.6%;
  margin-right: 1%;
  float: left;
}
.reservation-select.typeA:last-of-type {
  margin-right: 0;
}
.reservation-select:before {
  content: "";
  position: absolute;
  background: url(../img/arrow/arrow1.svg) no-repeat;
  width: calc(10px / 2);
  height: calc(18px / 2);
  -webkit-background-size: contain;
  background-size: contain;
  top: 35%;
  right: 50px;
  transform: translate(-50%, -50%);
  z-index: 1;
  transform: rotate(90deg);
}

.reservation-input,
.reservation-input1 {
  float: left;
  border: none;
  background-color: #f0f0f0;
  padding: 2% 4%;
  margin-bottom: 3%;
  box-sizing: border-box;
  font-size: 13px;
  letter-spacing: 2px;
  width: 60%;
  cursor: pointer;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
    "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo,
    "ＭＳ Ｐゴシック", sans-serif;
}
.reservation-input1 {
  width: 100%;
  padding: 12%;
}

.reservation-inner2 {
  margin-right: 0;
}

.reservation-input1.last {
  margin-right: 0;
}
/*.reservation-hotel { margin-bottom: 2%; }*/
.reservation-submit {
  text-align: center;
  background-color: #000;
  color: #fff;
  border-radius: 3px;
  padding: 2.3% 0;
}

.reservation-radios {
  float: left;
  width: 64%;
  margin-top: 2.5%;
}
.reservation-radios-inner {
  float: left;
  margin-right: 7%;
}
.reservation-radios li:last-of-type {
  margin-right: 0;
}
.reservation-submit {
  float: right;
  width: 36%;
  letter-spacing: 2px;
  cursor: pointer;
}
.reservation-radio-btn {
  margin: -2px 0 0 0;
  display: none;
}
.reservation-radio-label {
  position: relative;
  padding-left: 25px;
}
.reservation-radio-label:before,
.reservation-radio-label:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
}
.reservation-radio-label:before {
  width: 20px;
  height: 20px;
  background-color: #f0f0f0;
}
.reservation-radio-label:after {
  width: 0;
  height: 0;
  background-color: #000;
  top: 5px;
  left: 5px;
}
.reservation-radio-btn:checked + .reservation-radio-label:after {
  width: 10px;
  height: 10px;
}

.reservation-content {
  margin-bottom: 2%;
}

.reservation-btns1-flex {
  display: flex;
}

.reservation-btns1-inner {
  float: left;
  width: 48%;
  margin-right: 4%;
}
.reservation-btns1 .reservation-btns1-inner:last-of-type {
  margin-right: 0;
}

.reservation-kouku {
  background-color: #f0f0f0;
  padding: 4.5% 4.2% 4.5% 7%;
  box-sizing: border-box;
  border-radius: 3px;
  font-family: "NotoSerif";
  letter-spacing: 1px;
  width: 60%;
  float: left;
}
.reservation-select.koukuSelect {
  float: right;
  width: 71%;
  font-size: 13px;
  letter-spacing: 2px;
}
.reservation-kouku-select {
  border: solid 1px #999;
  border-radius: 3px;
  box-sizing: border-box;
  padding: 4% 5%;
  cursor: pointer;
  width: 100%;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
    "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo,
    "ＭＳ Ｐゴシック", sans-serif;
}
.reservation-kouku-txt {
  float: left;
  font-size: 1.3rem;
  margin-top: 3.5%;
}

.close-btn {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #f0f0f0;
  width: 54px;
  height: 54px;
  cursor: pointer;
}

.close-btn:before,
.close-btn:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 50%;
  height: 1px;
  background-color: #999;
}

.close-btn:before {
  transform: rotate(45deg);
}
.close-btn:after {
  transform: rotate(-45deg);
}

.section {
  overflow: hidden;
}
.section-inner {
  padding: 0 0 0 14px;
  position: relative;
  height: 100%;
}
.fullpage-view {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.fullpage-view.campane {
  background-color: rgba(253, 174, 200, 1);
}
.fullpage-view.vesselinn {
  background-color: rgba(154, 255, 199, 1);
}
.fullpage-view.hotels {
  background-color: rgba(176, 178, 255, 1);
}

/* .fullpage-view:after { content: 	''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(116,167,208,1); z-index: 1;	} */
.fullpage-view-outer {
  box-sizing: border-box;
}
/* .fullpage-view-contents { position: relative; width: 33.33%; float: left; height: 100vh; overflow: hidden;} */
.fullpage-view-contents {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  overflow: hidden;
  width: 33.33333333333333%;
  transition: 1.5s all ease-out;
}

.fullpage-view-contents1.on {
  width: 100%;
  z-index: 1;
}
.fullpage-view-contents2.off1 {
  width: 0;
  left: 100%;
}
.fullpage-view-contents3.off1 {
  width: 0;
  left: 100%;
}

.fullpage-view-contents2.on {
  width: 100%;
  left: 0;
  z-index: 1;
}
.fullpage-view-contents1.off2 {
  width: 0;
  left: 0;
}
.fullpage-view-contents3.off2 {
  width: 0;
  left: 100%;
}

.fullpage-view-contents3.on {
  width: 100%;
  left: 0;
  z-index: 1;
}
.fullpage-view-contents1.off3 {
  width: 0;
  left: 0;
}
.fullpage-view-contents2.off3 {
  width: 0;
  left: 0;
}

.fullpage-view-contents2 {
  left: 33.333333333333333%;
}
.fullpage-view-contents3 {
  left: calc(33.333333333333333% * 2);
}
.fullpage-view-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #fff;
  padding: 25px 0 22px 8%;
  box-sizing: border-box;
  line-height: 1;
  font-family: "Lusitana", serif;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
  font-size: 13px;
}
/* .fullpage-view-btn:hover { padding: 55px 0 40px 45px; } */
.fullpage-view-btn:before {
  content: "";
  width: 25%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.3);
  position: absolute;
  top: 50%;
  right: 0;
  transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.fullpage-view-btn:hover:before {
  width: 0;
}

.fullpage-view-btn.red {
  background-color: rgba(154, 0, 49, 0.6);
}
.fullpage-view-btn.green {
  background-color: rgba(0, 153, 68, 0.6);
}
.fullpage-view-btn.blue {
  background-color: rgba(29, 32, 136, 0.6);
}

.fullpage-view-hotels {
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.fullpage-view-hotels-inner {
  display: none;
  position: relative;
  height: 100vh;
}

.fullpage-vesselhotels-logo {
  float: left;
  margin-right: 14px;
}
.fullpage-campana-logo {
  width: calc(438px / 8);
  height: calc(500px / 8);
}
.fullpage-inn-logo {
  width: calc(436px / 8);
  height: calc(500px / 8);
}
.fullpage-hotel-logo {
  width: calc(437px / 8);
  height: calc(500px / 8);
}

.fullpage-logos {
  margin-bottom: 15px;
}
/* .fullpage-logo-txt { float: left; position: relative; bottom: 8px;} */
.fullpage-logo-txt {
  position: relative;
  display: table-cell;
  vertical-align: middle;
}
.fullpage-logo-txt .ja {
  color: #222;
  font-size: 1.4vw;
  font-family: "NotoSerif";
  letter-spacing: 2px;
}
.fullpage-logo-txt .en {
  color: #888;
  font-size: 1vw;
  font-family: "Lusitana", serif;
  letter-spacing: 2px;
}

.fullpage-back {
  color: #fff;
  position: absolute;
  bottom: 2.5%;
  left: 2.5%;
  font-family: "Lusitana", serif;
  letter-spacing: 2px;
  cursor: pointer;
  line-height: 1;
}

.fullpage-back.typeA {
  color: #888;
}

.fullpage-back:hover:before {
  width: 0;
}
.fullpage-back:before {
  content: "";
  position: absolute;
  width: 450%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5);
  top: 50%;
  right: -500%;
  z-index: 10;
  transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.fullpage-back.typeA:before {
  background-color: #888;
}

.fullpage-openInfo {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(233, 147, 14, 0.9);
  z-index: 1;
  color: #fff;
  height: auto;
  padding: 0.8em 0;
}
.fullpage-openInfo-ttl {
  font-family: "Lusitana", serif;
  font-size: 12px;
  letter-spacing: 2px;
  float: left;
  text-align: center;
  width: 18%;
  line-height: 1;
  position: relative;
  height: 100%;
}
.fullpage-openInfo-ttl span {
  border-bottom: solid 1px #222;
  padding-bottom: 5px;
  color: #222;
}
.fullpage-openInfo-txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.fullpage-openInfo-list {
  width: 82%;
  float: left;
  line-height: 2.2;
  letter-spacing: 1px;
  box-sizing: border-box;
  height: auto;
  display: table;
}
.fullpage-openInfo-list .slides {
  display: table-cell !important;
  vertical-align: middle;
}
.fullpage-openInfo-list li {
  position: relative;
  transition: 0.5s opacity ease-out;
}
.fullpage-openInfo-list li:hover {
  opacity: 0.5;
}
.fullpage-openInfo-list li:before {
  content: "";
  position: absolute;
  background: url("../img/arrow/arrow2.svg") no-repeat;
  width: calc(10px / 2);
  height: calc(18px / 2);
  -webkit-background-size: contain;
  background-size: contain;
  top: 50%;
  left: -18px;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.fullpage-openInfo-list a {
  color: #fff;
  display: block;
}
.sumaho-logo1 {
  display: none;
}
.fullpage-sumahoMenu {
  display: none;
}
.spbtn1 {
  display: none !important;
}
.sumaho-reservation {
  display: none;
}
.sumaho-menu {
  display: none;
}

.ui-widget-content {
  border: solid 1px #f0f0f0;
}
.ui-widget-header {
  background: #000;
  border: solid 1px #000;
}
.ui-datepicker-year,
.ui-datepicker-month {
  border: none;
}
.ui-datepicker select.ui-datepicker-year {
  margin: 0 5px 0 0;
}
.ui-datepicker select.ui-datepicker-month {
  margin: 0 0 0 5px;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  background: #000;
  border: solid 1px #000;
}

@media screen and (min-width: 1850px) {
  .fullpage-logo-txt {
    bottom: 5px;
  }
}

@media screen and (max-width: 1625px) {
  .btn10 {
    font-size: 13px;
  }
  .sideMenu-links1 {
    font-size: 13px;
  }
}

@media screen and (max-width: 1600px) {
  .btn1 {
    font-size: 12px;
  }
}

@media screen and (max-width: 1571px) {
  .sideMenu-links2 li {
    font-size: 11px;
  }
}

@media screen and (max-width: 1400px) {
  .fullpage-txt {
    font-size: 14px;
  }
}

@media screen and (max-width: 1280px) {
  /* プリローダーロゴ部分 */
  .preloader-logo {
    top: 55%;
  }
}

@media screen and (min-width: 1280px) and (max-height: 665px) {
  .sideMenu-contents {
    margin: 30px auto 0;
  }
  .reservation-ttl {
    margin-bottom: 2%;
  }
  .reservation-form {
    margin-bottom: 3%;
  }
  .reservation {
    padding: 2% 12%;
  }
  .preloader-logo {
    top: 63%;
  }
}

@media screen and (max-width: 600px) {
  #ui-datepicker-div {
    z-index: 1000 !important;
  }
  #ui-datepicker-div {
    font-size: 13px;
  }
}

@media screen and (max-width: 768px) {
  html {
    font-size: calc(100vw / 320);
  }
  /* .fullpageOuter *{ font-size: 150%; } */
  .preloader-contents:before,
  .preloader-contents:after {
    top: 25%;
  }
	.close-btn {
    width: 58px;
    height: 54px;
		position: fixed;
		right: 0;
		top: auto;
		bottom: 0;
		background-color: #000000;
		&:before,
		&:after{
			background-color: #ffffff;
			width: 40%;
			height: 2px;
		}
  }

  .sumaho-menu-logo {
    background: url("../img/logo1.jpg") no-repeat;
    width: calc(340 / 2 * 100vw / 320);
    height: calc(52 / 2 * 100vw / 320);
    -webkit-background-size: contain;
    background-size: contain;
  }
  .sumaho-menu-logo a {
    display: block;
    width: 100%;
    height: 100%;
  }
	.sumaho-menu-lang{
		display: none;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    width: 100%;
    height: 100%;
    z-index: 110;
    overflow-y: scroll;
	}
	.sumaho-menu-lang__header{
		padding: 20px;
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 6px;
		font-size: 15px;
		font-weight: bold;
	}
	.sumaho-menu-lang__body{
		margin-top: 20px;
		ul{
			display: flex;
			flex-direction: column;
			.wovn-switch-template{
				font-size: 15px;
				font-weight: bold;
				height: 56px;
				padding: 0 28px;
				display: flex;
				align-items: center;
				border-top: 1px solid #F0F0F0;
				position: relative;
				transition: all 0.3s;
				&:after{
						content: '';
						width: 15px;
						height: 11px;
						background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15.349" height="10.886" viewBox="0 0 15.349 10.886"><path d="M13.656,0,6.021,7.483,1.7,3.162,0,4.862l6.024,6.024L7.3,9.609l0,0L15.35,1.728Z"/></svg>') no-repeat center center;
						background-size: contain;
						position: absolute;
						top: 50%;
						right: 28px;
						transform: translateY(-50%) ;
						transition: none;
						opacity: 0;
					}
				&.selected{
					background-color: #F8F8F8;
					&:after{
						opacity: 1;
						transition: all 0.3s;
					}
				}
				&:last-of-type{
					border-bottom: 1px solid #F0F0F0;
				}
			}
		}
	}
  .sideMenu-links1 {
    -webkit-writing-mode: inherit;
    writing-mode: inherit;
    height: auto;
    margin-bottom: 7%;
  }
  .sideMenu-links1 li {
    margin-left: 0;
  }
  .sideMenu-links1 a {
    display: block;
    border-bottom: 1px solid #f0f0f0;
    padding: 6% 0;
    font-size: 14rem;
    font-weight: bold;
  }
  .sumaho-links1 li {
    position: relative;
    float: left;
    width: 45%;
    font-size: 12rem;
    padding: 0 0 0 1em;
    margin-bottom: 6%;
    box-sizing: border-box;
  }
  .sumaho-links1 li:nth-of-type(even) {
    width: 55%;
  }
  .sumaho-links1 a:before {
    content: "";
    width: calc(4 * 100vw / 320);
    height: calc(7.5 * 100vw / 320);
    background: url("../img/arrow/arrow4.svg") no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
  }
  .sumaho-links1 a {
    color: #222;
  }

  .link1.typeA {
    font-size: 12px;
  }

  .reservation-select.typeA {
    margin-right: 2%;
    width: 32%;
  }
  .reservation-inner2 {
    width: 100%;
  }
  .reservation-ttl {
    font-size: 20rem;
  }
  .reservation-calendar {
    margin-bottom: 2%;
  }
  .reservation-submit {
    width: 100%;
    border-radius: 0;
    padding: 5% 0;
    font-size: 14rem;
  }
  .sumaho-reservation {
    display: none;
    overflow: scroll;
  }
  .sumaho-reservation .reservation-btns1 {
    position: static;
    top: 12px;
    left: 15px;
    z-index: 103; /*width: 100%;*/
    padding: 0 8%;
  }
  .sumaho-reservation .reservation-inner1 {
    width: 100%;
    margin-right: 0;
  }
  .sumaho-reservation .reservation-input {
    width: 100%;
  }
  .reservation-input,
  .reservation-input1 {
    padding: 5% 4%;
    font-size: 11rem;
    border-radius: 5px;
    color: #888;
    width: 100%;
  }
  .reservation-input1 {
    padding: 15% 10%;
  }
  .sumaho-reservation .reservation {
    display: block;
    padding: 15% 8% 0;
    height: auto;
    position: relative;
  }
  .sumaho-reservation .reservation-outer {
    display: none;
  }
  .reservation-form {
    border: none;
    padding: 0;
    border-radius: 0;
    margin-bottom: 0;
  }
  .reservation-radios {
    display: none;
  }
  .reservation-ttl1 {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium",
      "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
      "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  }
  .reservation-txt1 {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    font-size: 15px;
  }
  .reservation-txt1.sp-none {
    display: none;
  }

  .bb_line {
    border-bottom: none;
  }

  .reservation-btns1-flex {
    display: block;
  }

  .reservation-btns1-inner {
    width: auto;
    margin-right: 3%;
    padding-right: 3%;
    border-right: none;
    margin-bottom: 20px;
  }
  .reservation-btns1-inner:last-of-type {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
  }
  .reservation-btns1-inner .btn3 {
    /*padding: 0; border:none;*/
    font-size: 12rem;
  }
  .reservation-btns1-inner .btn3:after {
    display: none;
  }
  a.reservation-hotel-list {
    display: none;
  }
  .reservation-kouku {
    padding: 6% 8%;
  }
  .reservation-kouku-select {
    width: 100%;
    float: none;
    border: solid 1px #999;
    color: #999;
    padding: 6% 5%;
    font-size: 11rem;
    background-color: #fff;
  }
  .reservation-select.koukuSelect {
    width: 100%;
  }
  .reservation-select:before {
    right: 15px;
    top: 55%;
  }
  .reservation-kouku-txt {
    margin-top: 0;
    margin-bottom: 4%;
    font-size: 14rem;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium",
      "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
      "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  }
  .reservation-close.close-btn {
    display: block;
  }
  /* 20220720追記 */
  .sumaho-reservation-close {
    z-index: 105;
  }
  #fullpage {
    padding-right: 0;
  }
  .sideMenu,
  .newsBtn {
    display: none;
  }
  .fullpageOuter:after {
    display: none;
  }
  .section-inner {
    padding: 0;
  }
  .fp-slidesNav {
    text-align: center;
  }
  .fullpage-sumahoMenu {
    display: flex;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 101;
    width: 100%;
		height: 54px;
    text-align: center;
    padding:0;
		border-top: 1px solid #DDDDDD;
		box-sizing: border-box;
		justify-content: center;
		align-items: center;

  }
  .fullpage-sumahoMenu:before {
    content: none;
    position: absolute;
    width: 1px;
    height: 60%;
    background-color: #ddd;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
  }
  .fullpage-sumahoMenu-btn {
    width: auto;
		height: 100%;
    float: none;
    color: #222;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 1px;
		position: relative;
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;

		&:first-child{
			flex-grow: 0;
			aspect-ratio: 58 / 55;
			&::after{
				content: "";
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 1px;
				height: 100%;
				background-color: #ddd;
			}
		}
		&:last-child{
			&::before{
				content: "";
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 1px;
				height: calc(36/55 * 100%);
				background-color: #ddd;
			}
		}
  }
  .fp-slidesNav.bottom {
    bottom: 61px;
  }
  .fp-slidesNav ul li {
    margin: 0 6px 0 0;
  }
  .fp-slidesNav ul li:last-of-type {
    margin-right: 0;
  }
  .fullpage-txtContents,
  .fullpage-txtContents.typeB {
    width: 100%;
    top: 42%;
    left: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-50%, -50%);
  }
  .fullpage-txtContents.typeA {
    top: 37%;
    left: 50%;
  }
  /* .fullpage-ttl { font-size: 30rem; text-align: center; letter-spacing: 5px; margin-bottom: 6%; line-height: 1.5;	} */
  .fullpage-txt {
    display: none;
  }
  .slide {
    position: relative;
  }

  .fp-controlArrow.fp-prev,
  .fp-controlArrow.fp-next {
    top: auto;
    bottom: 67px;
    margin-top: 0;
    border: none;
    width: 11%;
    height: 1px;
    background-color: #000;
    z-index: 5;
  }
  .fp-controlArrow.fp-prev {
    left: 22px;
  }
  .fp-controlArrow.fp-next {
    right: 22px;
  }

  .fp-controlArrow.fp-prev:before {
    left: -1px;
    transform: rotate(-45deg);
  }
  .fp-controlArrow.fp-next:before {
    right: -1px;
    transform: rotate(45deg);
  }

  .fp-controlArrow.fp-prev:before,
  .fp-controlArrow.fp-next:before {
    content: "";
    position: absolute;
    width: 23%;
    height: 1px;
    background-color: #000;
    top: -7px;
  }

  .sumaho-logo1 {
    display: block;
    width: calc(108 * 100vw / 640);
    height: calc(114 * 100vw / 640);
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 2%;
    /*right: 0;*/
    margin: auto;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
    padding: calc(17 * 100vw / 640) calc(24 * 100vw / 640)
      calc(21 * 100vw / 640) calc(24 * 100vw / 640);
    z-index: 10;
  }

  .spbtn {
    letter-spacing: 1px;
    font-size: 12px;
    padding: 0;
    background-color: transparent;
    color: #000 !important;
  }
  .spbtn:before,
  .spbtn:after {
    display: none;
  }
  .spbtn .border:before,
  .spbtn .border:after {
    display: none;
  }
  .spbtn .arrow:before {
    display: none;
  }
  .spbtn.spWhiteTxt {
    color: #fff !important;
  }
  .btn.top {
    width: 100%;
    text-align: center;
    font-size: 12rem;
  }
  .btn6 {
    border: none;
  }
  .btn6:hover {
    border: none;
    background-color: transparent;
  }

  .spbtn1 {
    position: relative;
    display: block !important;
    width: calc(25 * 100vw / 320);
    height: calc(25 * 100vw / 320);
    border-radius: 50%;
    background: #000;
    margin: 0 auto 15px;
  }
  .spbtn1.typeA {
    background-color: #fff;
  }
  .spbtn1:before {
    content: "";
    position: absolute;
    background: url("../img/arrow/arrow2.svg") no-repeat;
    width: calc(5 * 100vw / 320);
    height: calc(9 * 100vw / 320);
    -webkit-background-size: contain;
    background-size: contain;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transform: rotate(90deg);
  }
  .spbtn1.typeA:before {
    background: url("../img/arrow/arrow1.svg") no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
  }

  .fullpage-vesselhotels-logo {
    display: block;
    float: none;
    margin: 0 auto 5%; /*  width: calc(437px/8); height: calc(500px/8); */
    width: calc(112 * 100vw / 640);
    height: calc(131 * 100vw / 640);
  }
  /* .fullpage-logo-txt { text-align: center; float: none; margin-bottom: 5%;	} */
  .fullpage-logo-txt {
    text-align: center;
    margin-bottom: 5%;
    display: block;
  }

  .bgWhite {
    display: inline-block;
  }
  .fullpage-view-hotels {
    display: none;
  }
  .fullpage-openInfo-ttl {
    display: none;
  }
  .fullpage-openInfo-list {
    width: 100%;
    padding: 3% 8% 3% 3%;
    line-height: 1.5;
  }
  .fullpage-openInfo {
    height: auto;
  }

  .fullpage-openInfo-list .flex-direction-nav {
    display: block;
    top: 50%;
    right: 10px;
    position: absolute;
  }
  .fullpage-openInfo-list .flex-direction-nav .flex-prev {
    display: none;
  }
  .fullpage-openInfo-list .flex-direction-nav a:before {
    display: none;
  }
  .fullpage-openInfo-list .flex-direction-nav a {
    content: "";
    position: absolute;
    background: url("../img/arrow/arrow2.svg") no-repeat;
    width: calc(10px / 2);
    height: calc(18px / 2);
    -webkit-background-size: contain;
    background-size: contain;
    top: 0;
    right: 0;
    margin: 0;
  }
  .fullpage-openInfo-list li:before {
    display: none;
  }
  .fullpage-openInfo-list a {
    font-size: 12rem;
  }

  /* fullpage各画像 */
  .fullpage-slide1 {
    background: url("../../img/top/main/sumaho/1.jpg") no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
  }
  .fullpage-slide3 {
    background: url("../../img/top/main/sumaho/6.jpg") no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
  }
  .fullpage-slide4 {
    background: url("../../img/top/main/sumaho/7.jpg") no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
  }
  .fullpage-slide5 {
    background: url("../../img/top/main/sumaho/8.jpg") no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
  }
  /* コロナバナー追加 2020/9/2 */
  .fullpage-slide7 {
    background: #eeefef;
  }
  .fullpage-slide7:hover {
    opacity: 1;
    transition: 0.5s opacity ease-out;
  }
  /* コロナバナー追加 2020/9/2 */
  /*.fullpage-view { background: url('../../img/top/main/sumaho/sp_anime.gif') no-repeat center; -webkit-background-size: cover; background-size: cover; height: 100%;}*/
  .home-slider {
    width: auto;
    z-index: -100;
    height: 100vh;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    position: relative;
  }
  .home-slider .slide-item {
    width: 100vw !important;
    height: 100vh !important;
    background-size: cover !important;
    background-position: center !important;
  }
  .slider .slick-slide {
    top: 0 !important;
    width: 100vw !important;
  }
  #thumbnail_slider {
    position: absolute;
    bottom: 12vh;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
  }
  #thumbnail_slider li {
    margin: 0 !important;
    position: relative;
  }
  #thumbnail_slider .slick-slide {
    margin: 0 2px !important;
    width: 60px !important;
  }
  #thumbnail_slider .slick-track {
    width: 320px !important;
  }

  #bg-video {
    background: url("../../img/top/main/sumaho/sp_anime.jpg") no-repeat left
      bottom;
    background-size: cover;
    width: auto;
    height: 100vh;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
  }
  .fullpage-view-contents1 {
    display: none;
  }
  .fullpage-view-contents2 {
    display: none;
  }
  .fullpage-view-contents3 {
    display: none;
  }
  .fullpage-campana {
    background: url("../../img/top/main/sumaho/3.jpg") no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
  }
  .fullpage-inn {
    background: url("../../img/top/main/sumaho/4.jpg") no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
  }
  .fullpage-hotels {
    background: url("../../img/top/main/sumaho/2.jpg") no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
  }

  .btn5,
  .btn7,
  .btn8 {
    border: none;
  }
  .btn5:hover,
  .btn7:hover,
  .btn8:hover {
    background-color: transparent;
  }

  #fp-nav ul li,
  .fp-slidesNav ul li,
  #fp-nav ul li a.active span,
  #fp-nav ul li:hover a.active span,
  .fp-slidesNav ul li a.active span,
  .fp-slidesNav ul li:hover a.active span,
  #fp-nav ul li a span,
  .fp-slidesNav ul li a span {
    width: calc(3 * 100vw / 320);
    height: calc(3 * 100vw / 320);
  }
  .fullpage-openInfo-list {
    font-size: 1rem;
  }
  /* .fullpage-ttl { font-size: 24rem;} */
  .fullpage-logo-txt .ja {
    font-size: 15rem;
  }
  .fullpage-logo-txt .en {
    font-size: 10rem;
  }
  .fullpage-ttl.sumahoTypeA {
    text-align: left;
    padding-left: calc(49 * 100vw / 640);
  }

  .btn12:hover,
  .btn13:hover,
  .btn14:hover {
    background-color: transparent;
  }

  .fullpage-ttl {
    margin: 0 auto 6%;
    font-size: 0;
  }
  .fullpage-ttl.typeSVG5 {
    margin: 20% auto 6% 10%;
  }
  /* あなたと家族と街を愛する｡ */
  .fullpage-ttl.typeSVG1 {
    width: calc(424 * 100vw / 640);
  }
  /* 全国へ広がるベッセルホテルズ｡ */
  .fullpage-ttl.typeSVG2 {
    width: calc(509 * 100vw / 640);
  }
  /* 幸せは、朝ごはんから｡ */
  .fullpage-ttl.typeSVG3 {
    width: calc(403 * 100vw / 640);
    margin-bottom: 6%;
  }
  /* お客様のご利用シーンに合わせて */
  .fullpage-ttl.typeSVG4 {
    width: calc(426 * 100vw / 640);
  }
  .fullpage-ttl.typeSVG5 {
    width: calc(702 * 100vw / 640);
  }

  /* 自分と家族にご褒美を。 */
  .fullpage-ttl.typeSVGCampana {
    width: calc(364 * 100vw / 640);
  }
  /* 今日をおいしくはじめよう */
  .fullpage-ttl.typeSVGInn {
    width: calc(417 * 100vw / 640);
  }
  /* 家族サイズで旅しよう */
  .fullpage-ttl.typeSVGHotels {
    width: calc(374 * 100vw / 640);
  }
  /* お客様のご宿泊、心よりおまちしております｡ */
  .fullpage-ttl.typeSVG5 {
    width: calc(294 * 100vw / 640);
  }

  .btn10:hover {
    background-color: transparent;
    color: #000 !important;
  }
  .fullpage-logos {
    margin-bottom: 0;
  }
  .fullpage-openInfo {
    padding: 0;
  }
}

/* iPhone */
@media screen and (max-width: 414px) {
  .preloader {
    padding: 4%;
  }
  .fp-controlArrow.fp-prev:before,
  .fp-controlArrow.fp-next:before {
    content: "";
    position: absolute;
    width: 23%;
    height: 1px;
    background-color: #000;
    top: -3px;
  }
  .fp-controlArrow.fp-prev:before {
    left: 0;
  }
  .fp-controlArrow.fp-next:before {
    right: 0;
  }

  .reservation-inner1-mg {
    margin-bottom: 15px;
  }
  .reservation-btns1-inner {
    margin-bottom: 10px;
  }
}

@media screen and (min-width: 768px) and (max-height: 700px) {
  .sideMenu-contents {
    top: 0%;
  }
  .sideMenu-btns {
    margin: 5% auto;
  }
}

@media screen and (max-width: 768px) {
  .fullpage-reflink {
    position: absolute;
    bottom: 55px;
    left: 0;
    width: 100%;
  }
  .fullpage-reflink a {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    letter-spacing: 0.15px;
    padding: 15px 5%;
    display: block;
    font-size: 12px;
    box-sizing: border-box;
    position: relative;
  }
  .fullpage-reflink a:after {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
    right: 5%;
    width: 4px;
    height: 4px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}

.bnrjd {
  position: absolute;
  z-index: 999;
  bottom: 125px;
  left: 50px;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro",
    "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  /*background: #fff;*/
  background: #f7931e;
  padding: 3px;
  box-sizing: border-box;
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.1);
  width: 310px;
}

.bnrjd-in {
  padding: 15px 0;
  box-sizing: border-box;
  border: 1px solid #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;

  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.bnrjd-img {
  width: 22%;
  text-align: center;
}
.bnrjd-img img {
  max-width: 35px;
}

.bnrjd-txt {
  /* width: 78%;*/
  font-size: 12px;
  letter-spacing: 0.05em;
  margin: 0 auto;
}

/* ▼ キャンペーンバナー */
.bnrinfo {
  bottom: 40px;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro",
    "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  background: #fff;
}

.bnrinfo-in {
  border: 1px solid #c1a164;
  padding: 5px 0;
}

.bnrinfo-txt {
  font-size: 13px;
}

.bnrinfo-txt span {
  display: block;
  font-size: 11px;
}

@media screen and (max-width: 768px) {
  .bnrjd {
    bottom: 27%;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 310px;
  }

  .bnrinfo {
    bottom: auto;
    top: 1%;
    right: 0;
    left: auto;
    max-width: 170px;
    box-shadow: none;
    border: 1px solid #c1a164;
    border-right: none;
  }

  .bnrinfo-in {
    position: relative;
    border: none;
  }

  .bnrinfo-img {
    position: absolute;
    right: 0;
    width: 12%;
    top: 0;
  }

  .bnrinfo-txt {
    font-size: 13px;
  }

  .pc {
    display: none;
  }
  /*
.fullpage-bnrjdlink {
    position: absolute;
    bottom: 55px;
    left: 0;
    width: 100%;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.fullpage-bnrjdlink a {
    background: #c2a265;
    color: #fff;
    padding: 10px 0;
    display: block;
    font-size: 11px;
    box-sizing: border-box;
    position: relative;
    text-align: center;
    letter-spacing: .05em;
}
.fullpage-bnrjdlink a:after {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    content: "";
    right: 5%;
    width: 4px;
    height: 4px;
}*/
}

@media screen and (max-width: 414px) {
  .bnrinfo {
    max-width: 138px;
  }

  .bnrinfo-txt {
    font-size: 12px;
  }
}

/* ▼ スマホ用インスタアイコン */
.pc_insta {
  position: absolute;
  /*top: 4px;
	right: 95px;*/
  top: 15px;
  right: 150px;
  z-index: 999;
}

.sp_insta {
  display: none;
}

@media screen and (max-width: 768px) {
  .pc_insta {
    display: none;
  }
  .sp_insta {
    display: block;
    position: absolute;
    top: 1%;
    right: 0;
    z-index: 2;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.5);
  }
}

/*翻訳*/
/*SP 表示*/
@media screen and (max-width: 768px) {
  /*トップ*/
  html[lang="en"] .fullpage-ttl.typeSVG2 {
    width: 260px !important;
  }
  html[lang="en"] .fullpage-ttl.typeSVG3 {
    width: 240px !important;
  }
  html[lang="en"] .fullpage-ttl.typeSVG4 {
    width: 210px !important;
  }
  html[lang="en"] .fullpage-ttl.typeSVG5 {
    width: 260px !important;
  }
}

/*
2020/9/1追記 */
.Top_banner {
  position: absolute;
  z-index: 1;
  bottom: 50px;
  left: 50px;
  max-width: 330px;
}
.Top_banner img {
  max-width: 100%;
}
.sumaho-covid-bg {
  display: none;
}
.covid-title {
  display: none;
}
.covid-text {
  display: none;
}

@media screen and (max-width: 768px) {
  .Top_banner {
    bottom: 16%;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 330px;
  }
  .covid-slide {
    position: relative;
  }
  .sumaho-covid-bg {
    display: block;
    position: relative;
    bottom: 53px;
    width: 100%;
  }
  .covid-title {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    /*width: 76.5%;*/
    width: 70%;
  }
  .covid-text {
    display: block;
    position: absolute;
    width: 100%;
    /*padding: 4vw 0 11vw;*/
    background: #79ade0;
  }
  .covid-string {
    text-align: center;
    color: white;
    font-weight: bold;
    letter-spacing: 0.06em;
    font-size: 4.4vw;
    line-height: 1.7;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: bold;
  }
}

@media screen and (min-width: 760px) and (max-width: 768px) {
  .sumaho-covid-bg {
    bottom: 100px;
  }
  .covid-title {
    top: 40%;
  }
  .covid-text {
    bottom: 170px !important;
  }
}

/* ▼ Go To バナー */
.bnr-goto_pc {
  position: absolute;
  bottom: 14%;
  left: 3%;
  z-index: 2;
}

.section_openinfo .bnr-goto_pc {
  bottom: 25%;
}

.section_brand .bnr-goto_pc {
  bottom: 11%;
}

.bnr-goto_pc img {
  width: 47%;
}

.bnr-goto_pc a:hover {
  opacity: 0.7;
}

@media screen and (max-width: 768px) {
  .bnr-goto_pc {
    display: none;
  }
  .covid-text {
    /*background-color: #fbf840;*/
    background-color: #138ae5;
    text-shadow: 2px 2px 3px #222;
    z-index: 2;
  }
  .bnr-goto-in {
    background: url("../../common/img/potal_goto_parts.png") top repeat-x;
    background-size: 25%;
    padding: 6vw 0 11vw;
  }
  .covid-text-box {
    background-color: transparent;
    margin-top: 10px;
  }
  .covid-text-box .covid-string {
    font-size: 4.2vw;
  }
}

/* ▼ point バナー */
.bnr_goto02_pc {
  bottom: 4%;
}

/* ▼ scroll */
.Scroll_container {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform-origin: bottom right;
  -ms-transform-origin: bottom right;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  z-index: 9;
  position: absolute;
  /*bottom: 20.59375vw;*/
  bottom: 15%;
  left: -6.5vw;
  align-items: center;
  transform: rotate(-90deg);
  transform-origin: bottom right;
  color: #000;
  font-weight: 500;
  letter-spacing: 0.2rem;
}
@media screen and (max-width: 992px) {
  .Scroll_container {
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
.Scroll_container--line {
  z-index: 9;
  position: relative;
  overflow: hidden;
}
.Scroll_container--line:after {
  -webkit-animation: scroll-prompt 3s ease infinite;
  display: block;
  width: 2.1875vw;
  height: 1px;
  background: #000;
  animation: scroll-prompt 3s ease infinite;
  content: "";
}
@media screen and (max-width: 992px) {
  .Scroll_container--line:after {
    -webkit-animation: scroll-prompt-sp 3s ease infinite;
    width: 1px;
    height: 20px;
    margin: 0 auto;
    animation: scroll-prompt-sp 3s ease infinite;
  }
}

@-webkit-keyframes scroll-prompt {
  0% {
    -webkit-transform: translateX(3.90625vw);
    transform: translateX(3.90625vw);
  }
  100% {
    -webkit-transform: translateX(-2.34375vw);
    transform: translateX(-2.34375vw);
  }
}

@keyframes scroll-prompt {
  0% {
    -webkit-transform: translateX(3.90625vw);
    transform: translateX(3.90625vw);
  }
  100% {
    -webkit-transform: translateX(-2.34375vw);
    transform: translateX(-2.34375vw);
  }
}

@-webkit-keyframes scroll-prompt-sp {
  0% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}

@keyframes scroll-prompt-sp {
  0% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}
.Lp_Hero .Scroll_container--text {
  padding-left: 10px;
  overflow: hidden;
}
@media screen and (max-width: 1023px) {
  .Lp_Hero .Scroll_container--text {
    padding-bottom: 10px;
    padding-left: 0;
  }
}

/* .lang */
.lang {
  color: #888;
  font-family: "Lusitana", serif;
  font-size: 12px;
  line-height: 1;
  text-align: right;
  padding: 10px 0 0 0;
  position: absolute;
  top: 16px;
  right: 50px;
  letter-spacing: 1px;
  z-index: 10;
}
@media screen and (max-width: 768px) {
	.sumaho-menu-bottom{
		display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    /* right: 6%; */
		left: 9%;
    /*bottom: 9%;*/
    bottom: 2%;
    gap: 10px;
	}
	.lang {
		position: relative;
		top: auto;
		right: auto;
		padding: 0;
		/* margin-right: 18px; */

	}

	.sumaho-menu-langOpen{
		width: 100%;
		height: 100%;
	}
	.sp_menu_multilingual{
		display: flex;
		flex-direction: row;
    flex-wrap: wrap;
		column-gap: 11px;
    row-gap: 11px;
		color: #222222;
		font-size: 12px;
		font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro",
    "Hiragino Mincho Pro", "MS P明朝", "MS PMincho","Krub", serif;
    li{
      width: calc((100% - 44px) / 5);
      white-space: nowrap;
      text-align: left;
    }
	}
  .wovn-switch[data-value="th"] {
    font-family: "Krub", sans-serif;
  }
	.icon-instagram{
		text-align: right;
    /* margin-right: 9%;
    margin-top: 10%; */
	}
}
.lang-txt {
  display: block;
  cursor: pointer;
  margin-bottom: 5px;
  box-sizing: border-box;
  padding-right: 5px;
  position: relative;
}
/*
.lang-txt:after { content: ''; width: calc(7px/2); height: calc(13px/2); background: url('../img/arrow/arrow3.svg') no-repeat; position: absolute; top: 2px; right: -5px; -webkit-background-size: contain; background-size: contain; transform: rotate(90deg);}
.lang span { position: relative; }
.lang span:before { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 1px;background-color: #888; transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);}
.lang span:hover:before { width: 0; left: auto; right: 0;}
*/
.multilingual {
  display: none;
  background-color: #f8f8f8;
  text-align: left;
  padding: 20px 25px;
  font-size: 10px;
  width: 145px;
  box-sizing: border-box;
  display: none;
  position: absolute;
  top: 28px;
  left: -39px;
}
.multilingual a {
  color: #222;
  display: block;
  border-bottom: 1px solid #dadada;
  padding-bottom: 7px;
  margin-bottom: 7px;
  position: relative;
  z-index: 10;
  transition: 0.5s all ease-out;
}
.multilingual a:hover {
  opacity: 0.5;
}
.multilingual li:last-of-type a {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}
.multilingual li:hover {
  cursor: pointer;
}
/* 2023 ヘッダー改修 */
.lang {
  display: block;
}
@media screen and (min-width: 768px) {
  .lang {
    display: none;
  }
	#header_menu {
		top: 20px;
		border-top: none;
	}
}



.corporateMember {
  color: #888;
  font-size: 10px;
  line-height: 1;
  text-align: right;
  position: absolute;
  top: 44px;
  right: 26px;
  border: 1px solid #E0E0E0;
  width: 136px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
html[lang="th"] .corporateMember {
  top: 60px;
}
.corporateMember::before {
  content: "";
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  width: 0;
  height: 100%;
  background-color: #F7F8F8;
  z-index: -1;
  transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.corporateMember:hover::before {
  width: 100%;
  right: auto;
  left: 0;
}

.lang__pc {
  position: fixed;
  top: 150px;
  right: 0px;
  display: inline-block;
  width: 100%;
  max-width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  outline: none;
  transform: translate(50px, 0px);
  transition: transform 0.24s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.lang__pc.is-show {
  transform: translate(0px, 0px);
}
.lang__pc .wovn-languages {
  font-size: 11px;
  color: #000000;
}
.lang__pc .multilingual {
  display: block;
  top: 0;
  left: 0;
  width: 100px;
  font-size: 11px;
  padding: 0;
}
.lang__pc .multilingual li {
  font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho";
}
.lang__pc .multilingual li:hover {
  background-color: #EFEFEF;
}
.lang__pc .multilingual a {
	color: #000000;
  height: auto;
  padding-left: 12px;
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  height: 36px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/*ボタン内側の設定*/
.lang__pc .rotate__child {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: 0.5s;
  transform-origin: 50% 0 -50px;
}

.rotatefront .rotate__child:nth-child(1) {
  background: #878787;
  color: #FFFFFF;
  font-family: "Lusitana", serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  width: 42px;
  height: 122px;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotateY(0deg);
}

.rotatefront:hover .rotate__child:nth-child(1) {
  transform: rotateY(-90deg);
}

.rotatefront .rotate__child:nth-child(2) {
  background: #000;
  color: #fff;
  transform: rotateY(90deg);
}

.rotatefront:hover .rotate__child:nth-child(2) {
  transform: rotateY(0deg);
}


/* ポイントバナー */
.bnr_point_pc {
  position: absolute;
  bottom: 4%;
  right: 3%;
  text-align: right;
  display: inline-block;
}
.bnr_point_pc a {
  display: inline-block;
  width: 100%;
  height: 100%;
  width: 100%;
  transition: opacity 0.3s;
}
.bnr_point_pc a:hover {
  opacity: 0.7;
}
.bnr_point_pc a img {
  width: 47%;
}
.bnr_frusato_pc {
  bottom: 14%;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .bnr_point_pc {
    display: none;
  }
}
.sideMenu_bestrateCaption {
  font-size: 11px;
  color: #888;
  width: 100px;
  margin: 30px auto 10px;
  position: relative;
}
@media screen and (max-height: 750px) {
  .sideMenu_bestrateCaption {
    margin: 0px auto 5px;
  }
}
.sideMenu_bestrateCaption::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 87%;
  background: #888;
  position: absolute;
  top: 0;
  left: -15px;
  transform: rotate(-30deg);
}
.sideMenu_bestrateCaption::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 87%;
  background: #888;
  position: absolute;
  top: 0;
  right: -15px;
  transform: rotate(30deg);
}

/* sp ふるさと納税バナー */
.sp_bnr {
  display: none;
}
@media screen and (max-width: 768px) {
.sp_bnr {
  display: block;
  position: absolute;
  top: 9.5%;
  right: 0;
  z-index: 2;
  max-width: 150px;
}
.sp_bnr img {
  width: 100%;
  height: auto;
}
.sp_bnr02 {
  top: 15%;
}
}