@charset "utf-8";
/* CSS Document */
@import url("/common/css/all.css");
@import url("/common/css/all.min.css");
@import url('//fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@100..900&display=swap');
@import url('//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');
@font-face {
  font-family: 'Beausite';
  src:
  	url(https://nagasaki.hotelindigo.com/rakuten/font/BeausiteGrand-Light.otf) format("opentype"),
	url(https://nagasaki.hotelindigo.com/rakuten/font/beausitegrand-light-webfont.woff) format('woff'),
}
@font-face {
  font-family: 'BeausiteLight';
  src:
	url(https://nagasaki.hotelindigo.com/rakuten/font/beausitefit-light-webfont.woff2) format("woff2"),
	url(https://nagasaki.hotelindigo.com/rakuten/font/BeausiteFit-Light.otf) format("opentype");
}


.elementor-19 .elementor-element.elementor-element-19c6662 .elementor-repeater-item-5b74f0f .swiper-slide-bg {
    background-size: cover;
	background-position: 50%;
	background-repeat: no-repeat;
	min-height: 100%;
	min-width: 100%;
}
#suites .elementor-19 .elementor-element.elementor-element-19c6662 .elementor-repeater-item-5b74f0f .swiper-slide-bg,
#suites .elementor-5641 .elementor-element.elementor-element-19c6662 .elementor-repeater-item-5b74f0f .swiper-slide-bg {
    background-image: url(../_images/kv_index.webp);
}
#mainbuilding .elementor-19 .elementor-element.elementor-element-19c6662 .elementor-repeater-item-5b74f0f .swiper-slide-bg {
    background-image: url(../_images/kv_main.webp);
}
#northbuilding .elementor-19 .elementor-element.elementor-element-19c6662 .elementor-repeater-item-5b74f0f .swiper-slide-bg {
    background-image: url(../_images/kv_north.webp);
}

	@media only screen and (max-width: 750px) {
		#suites .elementor-19 .elementor-element.elementor-element-19c6662 .elementor-repeater-item-5b74f0f .swiper-slide-bg {
			background-position: 70%;
		}.swiper-offer
		#northbuilding .elementor-19 .elementor-element.elementor-element-19c6662 .elementor-repeater-item-5b74f0f .swiper-slide-bg {
			background-position: 43%;
		}
		#northbuilding .elementor-19 .elementor-element.elementor-element-19c6662 .elementor-repeater-item-5b74f0f .swiper-slide-bg {
		    	background-image: url(../_images/kv_north_sp.webp);
		}

	}

#suites .elementor-19 .elementor-element.elementor-element-deb7989:not(.elementor-motion-effects-element-type-background), 
#mainbuilding .elementor-19 .elementor-element.elementor-element-deb7989:not(.elementor-motion-effects-element-type-background),
#northbuilding .elementor-19 .elementor-element.elementor-element-deb7989:not(.elementor-motion-effects-element-type-background) {
	background-color: #cdd7d7!important;
}
#mainbuilding .elementor-19 .elementor-element.elementor-element-51dd90a:not(.elementor-motion-effects-element-type-background),
.elementor-19 .elementor-element.elementor-element-1ea5fd7:not(.elementor-motion-effects-element-type-background),
.elementor-19 .elementor-element.elementor-element-f5a6faa:not(.elementor-motion-effects-element-type-background),
.elementor-19 .elementor-element.elementor-element-1ac74a1:not(.elementor-motion-effects-element-type-background),
.elementor-19 .elementor-element.elementor-element-0776ef8 .elementor-button{
	background-color: #F4F4F1;
}
#mainbuilding h2.sub-title,
#northbuilding h2.sub-title{
    font-family: 'Beausite';
    color: #fff!important;
}
#mainbuilding .e-con>.e-con-inner,
#northbuilding .e-con>.e-con-inner {
	padding-block-start: 60px;
}
/*---------- 客室トップ ----------*/
#suites section {
	max-width: 1400px;
	margin: 60px auto;
}
#suites section > div {
	display: flex;
	flex-wrap: wrap;
}
#suites section#main > div > div.pict {
	display: block;
	width: 55%;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
}
#suites section#main > div > div.pict {
	box-shadow: -20px -20px 0px 0px rgba(72, 61, 87, 1);
}
#suites section#north > div > div.pict {
	box-shadow: 20px -20px 0px 0px rgba(11, 46, 40, 1);
}
#suites section#main > div > div.text {
	display: grid;
	width: 45%;
	grid-template-rows: 20% 15% 10% 25% 30%;
	padding: 0 0 0 40px;
}
#suites section#north > div > div.pict {
	display: block;
	width: 55%;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
	order: 2;
}
#suites section#north > div > div.text {
	display: grid;
	width: 45%;
	grid-template-rows: 20% 15% 10% 25% 30%;
	padding: 0 40px 0 0;
	order: 1;
}
#suites section#main > div > div.text.en,
#suites section#north > div > div.text.en {
	grid-template-rows: 10% 15% 10% 35% 30%
}

section > div > div.text > h2 {
	font-family: 'Beausite';
	font-size: 42px;
	line-height: 120%;
}
section#main > div > div.text > h2 {
	color: #483d57;
}
section#north > div > div.text > h2 {
	color: #0b2e28;
}
section > div > div.text > h2 > span {
	display: block;
	font-family: 'Noto Serif JP', sans-serif;
	font-size: 30px;
}
section > div > div.text > h3 {
	font-family: 'BeausiteLight','Noto Serif JP', sans-serif;
	font-size: 18px;
	line-height: 120%;
}
section#main > div > div.text > h3 {
	color: #483d57;
}
section#north > div > div.text > h3 {
	color: #0b2e28;
}
section > div > div.text > h4 {
	font-family: 'Beausite','Noto Serif JP', sans-serif;
	font-size: 18px;
    color: #d7463c;
	line-height: 120%;
}

section > div > div.text > p {
	font-family: 'BeausiteLight','Noto Serif JP', sans-serif;
	line-height: 200%;
    margin-bottom: 0;
}
section > div > div.text > div {
    display: flex;
    align-items: center;
}
section > div > div.text > div > a {
	font-family: 'BeausiteLight';
	padding: 16px 24px;
	box-sizing: border-box;
}
section#main > div > div.text > div > a {
	color: #fff;
	background: #483d57;
    border: #483d57 1px solid;
}
section#main > div > div.text > div > a:hover {
	color: #483d57;
    background: #fff;
	border: #483d57 1px solid;
}
section#north > div > div.text > div > a {
	color: #fff;
	background: #0b2e28;
    border: #483d57 1px solid;
}
section#north > div > div.text > div > a:hover {
	color: #0b2e28;
    background: #fff;
	border: #0b2e28 1px solid;
}

	@media only screen and (max-width: 750px) {
		#suites section {
			margin: 60px 0 0;
		}
		#suites section > div {
			display: block;
			width: 90%;
			margin: auto;
		}
        section > div > div.text > h4 {
            margin-top: 30px;
        }
		#suites section#main > div > div.text,
		#suites section#main > div > div.pict,
		#suites section#north > div > div.text,
		#suites section#north > div > div.pict{
			display: block;
			width: 100%;
			padding: 0;
		}
        section > div > div.text > h2 {
			font-size: 9vw;
		}
		section > div > div.text > h2 > span {
			font-size: 5vw;
		}
		section > div > div.text > p {
			padding: 20px 0;
		}
	}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: 20px;
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
}
#main .swiper-button-next,
#main .swiper-button-prev,
#north .swiper-button-next,
#north .swiper-button-prev {
	color: #fff;
}

#main .swiper-button-next,
#north .swiper-button-next {
    right: 0px;
    left: auto;
}
#main .swiper-button-prev,
#north .swiper-button-prev {
    right: auto;
    left: 0px;
}

#main .swiper-pagination-bullet {
	background: #fff;
}
#north .swiper-pagination-bullet {
	background: #fff;
}
.swiper-pagination-bullet-active {
	background: #fff!important;
	opacity: 1!important;
}
.suites_top {
	width: 100%;
}
/* 画像 */
.suites_top img {
  width: 100%;
  height: auto;
}

/* スライド全体 */
.suites_top .swiper-slide {
	width: 100%;
	transition: transform 0.6s;
}

/* 左右のスライド */
.swiper-pagination-bullet {
	width: 18px;
	height: 3px;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0 6px;
}
#mainbuilding .elementor-19 .elementor-element.elementor-element-763e9a2,
#mainbuilding .elementor-19 .elementor-element.elementor-element-cde99bd,
#mainbuilding .elementor-19 .elementor-element.elementor-element-2edb766,
#mainbuilding .elementor-19 .elementor-element.elementor-element-c5d2bb3,
#mainbuilding .elementor-19 .elementor-element.elementor-element-d9d144c,
#mainbuilding .elementor-19 .elementor-element.elementor-element-c5d2bb3,
#mainbuilding .elementor-5641 .elementor-element.elementor-element-676de0e,
#northbuilding .elementor-19 .elementor-element.elementor-element-676de0e {
	--width: 50%;
}
	@media only screen and (max-width: 750px) {
		#mainbuilding .elementor-19 .elementor-element.elementor-element-763e9a2,
		#mainbuilding .elementor-19 .elementor-element.elementor-element-cde99bd,
		#mainbuilding .elementor-19 .elementor-element.elementor-element-2edb766,
		#mainbuilding .elementor-19 .elementor-element.elementor-element-c5d2bb3,
		#mainbuilding .elementor-19 .elementor-element.elementor-element-d9d144c,
		#mainbuilding .elementor-19 .elementor-element.elementor-element-c5d2bb3,
		#northbuilding .elementor-19 .elementor-element.elementor-element-676de0e {
			--width: 100%;
		}
	}

/*---------- 本館 ----------*/
#mainbuilding h2 {
color: #002e52!important;
}
#mainbuilding h3.room_name {
	font-family: 'Beausite','noto serif jp';
	font-size: 42px;
	color: #483d57!important;
	text-transform: uppercase;
	text-align: left;
}
#mainbuilding h4.room_name {
	font-family: 'BeausiteLight','noto serif jp';
	font-size: 24px;
	color: #333!important;
	text-align: left;
}

#mainbuilding p.room_details,
#mainbuilding span.room_details {
	font-family: ''BeausiteLight','noto serif jp';
	font-size: 17px;
	color: #333!important;
}

#mainbuilding a.btn_more {
	color: #fff!important;
    background-color: #483d57!important;
}
#mainbuilding a:hover.btn_more {
	color: #483d57!important;
    background-color: #fff!important;
	border: #483d57 1px solid!important;
}
#mainbuilding #information {
	width: fit-content;
	font-family: 'noto serif jp';
	color: #483d57;
	line-height: 200%;
	text-align: center;
	border: #483d57 1px solid;
	margin: 20px auto;
	padding: 16px 48px;
	box-sizing: border-box;
}
#mainbuilding #information h2 {
	font-size: 20px;
	font-family: 'Beausite','noto serif jp';
	color: #483d57!important;
}

#mainbuilding .pict-box-l {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
  background-color: #dddddd;
  font-size: 30px;
  box-shadow: -20px -20px 0px 0px rgba(72, 61, 87, 1);
}
#mainbuilding .pict-box-r {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
  background-color: #dddddd;
  font-size: 30px;
  box-shadow: 20px -20px 0px 0px rgba(72, 61, 87, 1);
}

#mainbuilding .elementor-widget-container {
	border-color: #483d57;
}
	@media only screen and (max-width: 750px) {

		#mainbuilding h2 {
			padding: 0px 24px 0px 24px;
		}
		#mainbuilding #information {
			width: 90%;
			line-height: 160%!important;
			padding: 16px 20px;
		}
		#mainbuilding #information h2 {
			line-height: 120%!important;
			margin-bottom: 20px;
		}
	}


/*---------- 北館 ----------*/
#northbuilding h2 {
	color: #002e52!important;
}
#northbuilding h3.room_name {
	font-family: 'Beausite','noto serif jp';
	font-size: 42px;
	color: #0b2e28!important;
	text-transform: uppercase;
	text-align: left;
}
#northbuilding h4.room_name {
	font-family: 'BeausiteLight','noto serif jp';
	font-size: 24px;
	color: #333!important;
	text-align: left;
}

#northbuilding p.room_details,
#northbuilding span.room_details {
	font-family: 'BeausiteLight','noto serif jp';
	font-size: 17px;
	color: #333!important;
}

#northbuilding a.btn_more {
	color: #fff!important;
    background-color: #0b2e28!important;
}
#northbuilding a:hover.btn_more {
	color: #0b2e28!important;
    background-color: #fff!important;
	border: #0b2e28 1px solid!important;
}
#northbuilding #information {
	width: fit-content;
	font-family: 'noto serif jp';
	color: #0b2e28;
	line-height: 200%;
	text-align: center;
	border: #0b2e28 1px solid;
	margin: 20px auto;
	padding: 16px 48px;
	box-sizing: border-box;
}
#northbuilding #information h2 {
	font-size: 20px;
	font-family: 'Beausite','noto serif jp';
	color: #0b2e28!important;
}

#northbuilding .pict-box-l {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
  background-color: #dddddd;
  font-size: 30px;
  box-shadow: -20px -20px 0px 0px rgba(11, 46, 40, 1);
}
#northbuilding .pict-box-r {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
  background-color: #dddddd;
  font-size: 30px;
  box-shadow: 20px -20px 0px 0px rgba(11, 46, 40, 1);
}
#northbuilding .elementor-widget-container {
	border-color: #0b2e28;
}
	@media only screen and (max-width: 750px) {
		#northbuilding h2 {
			padding: 0px 24px 0px 24px;
		}
		#northbuilding #information {
			width: 90%;
			line-height: 160%!important;
			padding: 16px 20px;
		}
		#northbuilding #information h2 {
			line-height: 120%!important;
			margin-bottom: 20px;
		}
	}
	
#container-offer {
  margin-inline: auto;
  max-width: 1400px;
  position: relative;
}

.swiper-offer {
	max-width: 1400px;
	height: auto;
	margin: auto;
	overflow: hidden;
}
.swiper-offer > div > div.swiper-slide {
	height: auto;
	background-color: #cdd7d7 !important;
	padding: 16px 16px 32px;
}
.swiper-offer > div > div.swiper-slide > div {
	display: flex;
    flex-direction: column;
    justify-content: space-between;
	gap: 36px 0px;
	height: 100%;
}
.swiper-offer img {
	width: 100%;
	height: auto;
}
.swiper-offer h3 {
	font-family: 'Beausite';
	font-size: 36px;
    color: #002e52;
	text-transform: uppercase;
	text-align: center;
	padding: 0 16px;
    flex: 1;
}
.swiper-offer p {
	font-family: 'Noto Serif JP', sans-serif;
    color: #002e52;
    line-height: 160%;
	padding: 0 16px;
}
.swiper-offer div.btn {
	text-align: center;
}
.swiper-offer div.btn a {
	display: inline-block;
	font-family: 'BeausiteLight';
	text-transform: uppercase;
    border: #002e52 solid 1px;
    padding: 15px 24px 15px 24px;
}
#container-offer .swiper-button-next {
    right: -30px;
    left: auto;
}
#container-offer .swiper-button-prev {
    right: auto;
    left: -30px;
}
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: -25px;
}
#container-offer .swiper-pagination-bullet {
	background: #002e52!important;
}
#container-offer .swiper-pagination-bullet {
	background: #002e52!important;
}
#container-offer .swiper-pagination-bullet-active {
	background: #002e52;!important;
	opacity: 1!important;
}


	@media only screen and (max-width: 750px) {
		#container-offer {
		  margin-inline: auto;
		  max-width: 100%;
		  position: relative;
		}
	}