/* CSS Document */
/*-------------------- pankuzu */
#pankuzu ul {
  overflow: auto;
  padding: 0;
  _zoom: 1;
}
#pankuzu li {
  float: left;
  list-style: none;
}
#pankuzu li + li:before {
  margin: 0 8px;
  content: '>';
}
/*-------------------- common */ 

:root {
  --white: #ffffff;
  --black: #333333;
  --navy: #16325B;
  --orange: #FFCB41;
  --blue: #2DCCD3;
  --light-blue: #F1FEFF;
  --red: #FF4040;
  --bg-yellow: #F9F7ED;
  --bg-blue: #EDF8F9;
  --bg-gray: #f5f5f5;
  --en-serif: "Lato", sans-serif;
  --gothic: "Zen Kaku Gothic Antique", sans-serif;
  --serif: "Noto Serif JP", serif;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semi: 600;
  --weight-bold: 700;
  --height-large: 2;
  --height-normal: 1.7;
  --height-narrow: 1.5;
  --gutter-space: calc((100vw - min(1200px, 90vw)) / 2);
}
html {
  scroll-behavior: smooth;
}
.all-container, #pankuzu, .contact {
  font-family: var(--gothic);
  font-weight: var(--weight-regular);
  font-style: normal;
  font-size: 1.125rem;
  line-height: var(--height-large);
}
.all-container img {
  width: 100%;
  display: block;
}
.sp, .tb{
  display: none;
}
#all-container .title-inner h2 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: var(--weight-semi);
  font-size: 2rem;
  margin: 0 0 .2em;
}
#all-container .title-inner .en-h3 {
  font-family: var(--en-serif);
  font-weight: var(--weight-regular);
  line-height: var(--height-large);
  color: var(--orange);
  font-size: 2.5rem;
  margin: 0 0 .5em;
}
/*-------------------- visual */
.main-v {
  position: relative;
  width: 100%;
}
/*-------------------- main-title */
#main-title .container {
  position: relative;
  margin: 6em auto;
  max-width: 1200px;
  text-align: center;
}
#main-title h1 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: var(--weight-semi);
  font-size: 2.5rem;
  line-height: var(--height-narrow);
}
.supplement-title {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: var(--weight-medium);
  font-size: 1.5rem;
  margin: 0 0 1em;
}
.supplement-title h2 {
  display: inline-block;
  color: var(--white);
  background-color: var(--orange);
  padding: .3em 1em;
}
#main-title p {
  margin: 2em auto 0;
  max-width: 640px;
}
.tiare {
  width: 200px;
}
.left-tiare {
  position: absolute;
  left: 80px;
  bottom: -50px;
}
.right-tiare {
  position: absolute;
  right: 80px;
  bottom: -50px;
}
/*-------------------- content-nav */
#content-nav .container {
  position: relative;
  margin: 4em auto 8em;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  place-content: center;
  place-items: center;
  grid-column-gap: 1em;
}
#content-nav .container li {
  position: relative;
  width: 100%;
  height: 80px;
}
#content-nav .container li a {
  position: relative;
  display: block;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: var(--weight-medium);
  color: var(--white);
  text-align: center;
  width: 100%;
  height: 80px;
  background-color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: var(--height-narrow);
  overflow: hidden;
  transition: .5s all ease-out;
}
/*-------------------- airline */
#airline .container {
  position: relative;
  background-color: var(--light-blue);
  border-top: 12px solid var(--blue);
  border-bottom: 12px solid var(--blue);
  padding: 8em 0;
  overflow-x: hidden;
}
#airline .wrapper {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
#airline .title .wrapper {
  display: flex;
  column-gap: 4em;
  align-items: center;
}
#airline .title-inner {
  flex-basis: calc(40vw - 4em);
}
#airline .title-inner h3 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: var(--weight-semi);
  font-size: 1.75rem;
  line-height: var(--height-narrow);
}
#airline .title-img {
  flex-basis: calc(60vw + 4em);
  height: 700px;
  margin-right: calc(-1 * var(--gutter-space));
}
#airline .title-img img {
  object-fit: cover;
  height: 700px;
  object-position: right top;
  display: block; /* 隙間を消すおまじない */
}
#airline .business .wrapper {
  position: relative;
  margin: 6em auto;
}
#airline .heading {
  margin: 0 0 1.5em;
}
#airline .heading h3 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: var(--weight-semi);
  font-size: 1.75rem;
  margin: 0 0 .1em;
}
#airline .list-img {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
}
#airline .specs {
  margin: .5em 0 0;
}
#airline .specs h4 {
  font-size: 1.25rem;
}
/*-------------------- hotel common */
.stay-hotel .container {
  position: relative;
  padding: 8em 0 10em;
  overflow-x: hidden;
}
.stay-hotel .wrapper {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
.stay-hotel .title .wrapper {
  display: flex;
  column-gap: 4em;
  align-items: center;
}
.stay-hotel .title-inner {
  flex-basis: calc(40vw - 4em);
}
.stay-hotel .schedule {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: var(--weight-medium);
  color: var(--white);
  margin: 1em 0;
}
.stay-hotel .schedule li {
  display: inline-block;
  padding: .3em 1em;
  margin: 0 0 .5em;
}
.stay-hotel .schedule li:nth-child(1) {
  background-color: var(--navy);
}
.stay-hotel .schedule li:nth-child(2) {
  background-color: var(--blue);
}
.stay-hotel .title-img {
  flex-basis: calc(60vw + 4em);
  height: 700px;
}
.stay-hotel .title-img img {
  object-fit: cover;
  height: 700px;
  display: block; /* 隙間を消すおまじない */
}
.stay-hotel .heading {
  position: relative;
  max-width: 1200px;
  margin: 6em auto 3em;
  display: flex;
}
.stay-hotel .heading h3 {
  display: block;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: var(--weight-semi);
  background-color: var(--navy);
  color: var(--white);
  font-size: 1.75rem;
  flex-basis: calc(100vw - var(--gutter-space));
  margin-right: calc(-1 * var(--gutter-space));
  padding: .5em 50px;
}
.stay-hotel .hotel-item {
  display: grid;
  grid-template-columns: 3fr 1fr;
  column-gap: 4em;
  align-items: flex-end;
  margin: 0 50px 3em;
}
.stay-hotel .hotel-text h4 {
  font-weight: var(--weight-semi);
  font-size: 1.75rem;
  margin-bottom: .1em;
}
.stay-hotel .hotel-text h5 {
  font-family: var(--en-serif);
  font-weight: var(--weight-bold);
  line-height: var(--height-large);
  color: var(--orange);
  font-size: 1.5rem;
}
.stay-hotel .hotel-list-img {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1em;
  margin: 0 50px;
}
.stay-hotel .reservation .heading {
  display: block;
  text-align: center;
  margin-top: 8em;
}
.stay-hotel .reservation h3 {
  background-color: transparent;
  color: var(--black);
  margin-right: 0;
  padding: 0;
}
.stay-hotel .reservation p {
  font-size: 1.25rem;
  font-weight: var(--weight-medium);
  margin: 0 0 .5em;
}
.link-inner {
  padding: 2em 50px;
  margin: 0 0 2em;
}
.link-inner-y {
  background-color: var(--bg-yellow);
}
.link-inner-b {
  background-color: var(--bg-blue);
}
.link-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 2em;
}
.link-list li {
  width: 100%;
}
.link-inner h4 {
  font-size: 1.25rem;
  margin: 0 0 1em;
}
.link-inner h5 span{
  color: var(--red);
}
.link-inner h6 {
  line-height: var(--height-narrow);
  font-size: 1.25rem;
  margin: 0 0 .1em;
}
.link-inner .fee {
  color: var(--red);
  font-weight: var(--weight-bold);
  font-size: 1.5rem;
  margin: 0 0 1em;
}
.link-list li a {
  display: block;
  position: relative;
  text-align: center;
  width: 100%;
  color: var(--white);
  font-weight: var(--weight-medium);
  font-size: 1.25rem;
  transition: .5s all ease-out;
}
.link-list li a div {
  position: relative;
  background-color: var(--navy);
  margin-top: 1em;
  padding: .5em 1em;
  overflow: hidden;
}
.eco-link {
  width: 50%;
  margin: 4em auto 0;
}
.eco-link h4 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: var(--weight-semi);
  margin: 0 auto;
  font-size: 1.5rem;
}
.eco-link a {
  display: block;
  position: relative;
  text-align: center;
  width: 100%;
  color: var(--white);
  font-weight: var(--weight-medium);
  font-size: 1.25rem;
  transition: .5s all ease-out;
}
.eco-link a div {
  position: relative;
  background-color: var(--blue);
  margin-top: .5em;
  padding: .5em 1em;
  overflow: hidden;
}
.eco-fee {
  line-height: var(--height-narrow);
  font-size: 1.25rem;
  margin: .5em 0 .1em;
}
.eco-fee .fee {
  color: var(--red);
  font-weight: var(--weight-bold);
  font-size: 1.5rem;
  margin: 0 0 1em;
}
/*-------------------- stay-cook */
#stay-cook .title-inner {
  order: 2;
}
#stay-cook .title-img {
  height: auto;
  margin-left: calc(-1 * var(--gutter-space));
  order: 1;
}
#stay-cook .title-img img {
  object-position: left;
  height: auto;
}
.stay-hotel .hotel-list-img-3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  margin: 0 50px;
}
.stay-hotel .first-main-img {
  grid-column-start: 1;
  grid-column-end: 3;
}
.stay-hotel .room {
  margin: 3em 0;
  padding: 2em 0;
}
.stay-hotel .room-s {
  background-color: var(--bg-yellow);
}
.stay-hotel .room-p {
  background-color: var(--bg-blue);
}
.stay-hotel .room h5 {
  display: block;
  font-size: 1.25rem;
  padding: 0 50px;
  margin: 0 0 .5em;
}
.stay-hotel .room-p h5 {
  margin: 0;
}
.stay-hotel .room p {
  display: block;
  padding: 0 50px;
  margin: 0 0 1em;
}
.hotel-tahiti .heading h3 {
  background-color: var(--blue);
  margin-left: calc(-1 * var(--gutter-space));
  margin-right: 0;
  text-align: right;
}
/*-------------------- stay-other */
#stay-other .container {
  border-top: 12px solid var(--orange);
  border-bottom: 12px solid var(--orange);
}
#stay-other .title-img {
  margin-right: calc(-1 * var(--gutter-space));
}
#stay-other .title-img img {
  object-position: right;
}
#stay-other .hotel-list-img {
  grid-row-gap: 1em;
}
.stay-other .heading h3 {
  margin-left: calc(-1 * var(--gutter-space));
  margin-right: 0;
  text-align: right;
}
.stay-other .reservation h3 {
  margin-left: 0;
  text-align: center;
}
/*-------------------- other-link */
#other-link .container {
  position: relative;
  background-color: var(--bg-gray);
  padding: 10em 0 4em;
}
#other-link .wrapper {
  margin: 0 auto;
  max-width: 1200px;
}
#other-link h2 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: var(--weight-semi);
  font-size: 1.75rem;
  text-align: center;
  margin: 0 0 1.5em;
}
#other-link .other-link-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1em;
  margin: 0 0 4em;
}
#other-link .other-link-item a {
  color: var(--white);
  transition: all .5s ease-out;
}
.other-link-contents {
  background-color: var(--navy);
}
.other-link-contents img{
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center;
}
.other-link-text {
  padding: 1em 1em;
  text-align: center;
}
.other-link-text h3 {
  font-size: 1.25rem;
  line-height: var(--height-normal);
  font-weight: var(--weight-medium);
}
.other-link-text h4 {
  display: inline-block;
  font-size: 1.25rem;
  background-color: var(--blue);
  font-weight: var(--weight-medium);
  padding: .5em 1em;
  margin: .5em 0 0;
}
.other-special {
  margin: 8em 0;
}
.other-special ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 2em;
  margin: 0 0 6em;
}
#other-link .other-special a {
  transition: all .5s ease-out;
}
.video ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 2em;
  margin: 0 0 6em;
}
/*-------------------- contact */
.contact .container {
  position: relative;
  background-color: var(--navy);
  padding: 4em 0;
}
.contact .wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 6em;
  align-items: flex-end;
  margin: 0 auto;
  max-width: 1200px;
  color: var(--white);
}
.contact h2 {
  font-weight: var(--weight-regular);
  font-size: 1.75rem;
}
.contact h3 {
  font-weight: var(--weight-regular);
  font-size: 2rem;
  margin: 0 0 .3em;
}
.left-item p {
  font-size: 1.25rem;
}
.right-item {
  font-size: 1.5rem;
}
.tel a {
  text-decoration: none;
  color: var(--white);
}
/*-------------------- page-top */
#page-top {
  position: fixed;
  z-index: 100;
  right: 20px;
  bottom: 20px;
}
#page-top a {
  display: block;
  width: 90px;
  padding: 20px 0;
  text-align: center;
  text-decoration: none;
  color: #fff;
  border-radius: 10px;
  background: #ddd;
}
#page-top a:hover {
  text-decoration: none;
  background: #a5a5a5;
}
#page-top img {
  width: 50%;
}