.font-size-dummy {
  font-size: .75rem; /* 12px */
  font-size: .8125rem; /* 13px */
  font-size: .875rem; /* 14px */
  font-size: 1rem; /* 16px */
  font-size: 1.125rem; /* 18px */
  font-size: 1.25rem; /* 20px */
  font-size: 1.5rem; /* 24px */
  font-size: 1.75rem; /* 28px */
  font-size: 2rem; /* 32px */
  font-size: 2.63rem; /* 42px */
  font-size: 3rem; /*48px*/
  font-size: 3.5rem; /* 56px */
}
/* common -----------------------------------------*/ :root {
  --white: #fbfbfb;
  --white-opa: rgba(251, 251, 251, .12);
  --white-more: #fff;
  --black: #0C0341;
  --gold: #8F7E1D;
  --red: #C70D0D;
  --orange: #BE5D07;
  --purple: #6C3283;
  --cream: #FEFCEF;
  --gray: #E0E0E0;
  --sun-grad: linear-gradient(90deg, #bdaa40, #eeaa3b 50%, #be5d07);
  --night-grad: linear-gradient(90deg, #6672aa, #7787d3 51%, #6c3283);
  --ngo-grad: linear-gradient(90deg, #be5d07, #cd8545 51%, #6c3283);
  --font-main: "Kaisei Opti", serif;
  --font-sub: "BIZ UDPMincho", serif;
  --w400: 400;
  --w500: 500;
  --w700: 700;
  --h20: 2;
  --h17: 1.7;
  --h15: 1.5;
  --h14: 1.4;
  --h13: 1.3;
  --h12: 1.2;
  --r10: 10px;
  --r6: 6px;
  --transition01: cubic-bezier(.31, 0, .54, 1);
  --transition02: cubic-bezier(.22, 1, .36, 1);
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
}
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: var(--w-700);
  font-style: normal;
}
.tb, .sp {
  display: none;
}
.pc {
  display: block;
}
.w1200 {
  position: relative;
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
}
.w1000 {
  position: relative;
  max-width: 1000px;
  width: 90%;
  margin: 0 auto;
}
.w800 {
  position: relative;
  max-width: 800px;
  width: 90%;
  margin: 0 auto;
}
.all-container {
  font-family: var(--font-sub);
  font-style: normal;
  font-weight: var(--w400);
  font-size: clamp(16px, 18 * 100 / 1000 * 1vw, 18px);
  color: var(--black);
  line-height: var(--h17);
  letter-spacing: .05em;
  background: var(--white);
}
.all-container img {
  width: 100%;
  height: auto;
  object-fit: cover;
  line-height: 0;
}
.section-padding {
  padding: clamp(3.75rem, 2.546rem + 5.5vw, 7.5rem) 0;
}
.all-container h2 {
  font-family: var(--font-main);
  font-weight: var(--w700);
  font-size: clamp(24px, 28 * 100 / 1000 * 1vw, 32px);
  margin-bottom: clamp(2.5rem, 1.697rem + 3.67vw, 5rem);
  text-align: center;
}
.link-list h3 {
  font-family: var(--font-main);
  font-weight: var(--w500);
  font-size: clamp(18px, 20 * 100 / 1000 * 1vw, 24px);
  margin-bottom: .5em;
  text-align: left;
  line-height: var(--h14);
}
.link-list .text {
  line-height: var(--h14);
}
.link-list .price {
  color: var(--red);
  font-weight: var(--w700);
  font-size: clamp(18px, 20 * 100 / 1000 * 1vw, 24px);
  margin-bottom: .2em;
}
.link-list a {
  display: block;
  font-family: var(--font-main);
  font-weight: var(--w500);
  font-size: clamp(18px, 20 * 100 / 1000 * 1vw, 24px);
  padding: .3em 1em;
  text-align: center;
  box-sizing: border-box;
  color: var(--white);
  border: solid 1px var(--white);
  margin-bottom: 2em;
  transition: all .3s var(--transition01);
}
.link-list .sun-link a {
  background: var(--sun-grad);
  background-size: 200% 100%;
  transition: all .3s var(--transition01);
}
.link-list .night-link a {
  background: var(--night-grad);
  background-size: 200% 100%;
  transition: all .3s var(--transition01);
}
.link-list .ngo-link a {
  background: var(--ngo-grad);
  background-size: 200% 100%;
  transition: all .3s var(--transition01);
}
/* pankuzu -----------------------------------------*/
#pankuzu ul {
  font-family: var(--font-sub);
  font-weight: var(--w400);
  font-style: normal;
  overflow: auto;
  padding: 0 10px;
  _zoom: 1;
}
#pankuzu li {
  float: left;
  list-style: none;
}
#pankuzu li + li:before {
  margin: 0 8px;
  content: '>';
}
/* top-v -----------------------------------------*/
#top-v {
  position: relative;
}
.top-image {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 3fr;
  align-items: center;
  width: 100%;
  height: 500px;
  overflow-y: clip;
}
.top-image img {
  display: block;
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: bottom;
}
.top-image img:nth-child(2) {
  object-position: center -80px;
}
#about {
  position: relative;
  width: 100%;
  background-image: url("../img/top_bg.webp");
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  padding: clamp(5rem, 4.197rem + 3.67vw, 7.5rem) 0;
  z-index: 10;
  color: var(--white);
  text-align: center;
}
.logo {
  display: block;
  max-width: 250px;
  width: 90%;
  margin: 0 auto;
}
#top-v h1 {
  font-family: var(--font-main);
  font-weight: var(--w700);
  font-size: clamp(40px, 56 * 100 / 1000 * 1vw, 64px);
  line-height: var(--h14);
}
#top-v h1 .date {
  display: block;
  display: flex;
  align-items: center;
  width: fit-content;
  background-color: var(--gold);
  margin: 1em auto .5em;
  padding: .3em .5em;
  font-size: clamp(32px, 40 * 100 / 1000 * 1vw, 48px);
  box-sizing: border-box;
}
#top-v h1 .date .day-of-week {
  display: inline-block;
  width: fit-content;
  color: var(--gold);
  background-color: var(--white);
  margin: 0 0 0 .5em;
  padding: .1em .3em;
  font-size: clamp(24px, 28 * 100 / 1000 * 1vw, 32px);
}
#top-v h1 .tour-name {
  display: block;
  margin: 0 auto .2em;
  font-weight: var(--w500);
  font-size: clamp(24px, 28 * 100 / 1000 * 1vw, 32px);
}
#top-v h1 .title .small {
  font-size: clamp(32px, 40 * 100 / 1000 * 1vw, 48px);
}
.point {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1em;
  max-width: 1000px;
  width: 90%;
  margin: 1.5em auto 2em;
}
.point p {
  font-family: var(--font-main);
  font-weight: var(--w500);
  background: var(--white-opa);
  padding: .5em 1em;
  border: solid 1px var(--white);
  font-size: clamp(18px, 20 * 100 / 1000 * 1vw, 24px);
}
#top-v .text {
  font-size: clamp(16px, 18 * 100 / 1000 * 1vw, 20px);
  max-width: 1000px;
  width: 90%;
  margin: 0 auto 4em;
}
.link-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: clamp(1em, 2vw, 2em);
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}
#about .link-list {
  width: 90%;
}
/* artist -----------------------------------------*/
#artist .performer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: clamp(1em, 2vw, 2em);
}
#artist .performer01 {
  margin-bottom: clamp(5rem, 3.595rem + 6.42vw, 9.375rem);
}
.performer h3 {
  font-family: var(--font-main);
  font-weight: var(--w700);
  font-size: clamp(18px, 20 * 100 / 1000 * 1vw, 24px);
  line-height: var(--h14);
  margin-bottom: .5em;
  color: var(--gold);
}
.performer h3 .large {
  font-size: clamp(32px, 36 * 100 / 1000 * 1vw, 40px);
  margin-right: .3em;
}
.performer .date {
  font-family: var(--font-main);
  font-weight: var(--w700);
  font-size: clamp(28px, 32 * 100 / 1000 * 1vw, 36px);
  line-height: var(--h14);
}
.performer .text {
  font-size: 16px;
}
#artist .performer02 > div:nth-child(1) {
  order: 2;
}
#artist .performer02 > div:nth-child(2) {
  order: 1;
}
/* spot -----------------------------------------*/
#spot {
  background: var(--cream);
}
.spot-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: clamp(1em, 2vw, 2em);
  margin-top: clamp(1.25rem, 0.046rem + 5.5vw, 5rem);
}
#spot .small {
  font-size: clamp(18px, 20 * 100 / 1000 * 1vw, 24px);
  margin-right: .3em;
}
#spot .col-gold {
  color: var(--gold);
  font-size: clamp(24px, 28 * 100 / 1000 * 1vw, 32px);
}
.cruise {
  max-width: 500px;
  width: 90%;
  margin: clamp(3.75rem, 1.743rem + 9.17vw, 10rem) auto 0;
}
.cruise h2 {
  margin-bottom: clamp(1.25rem, 0.849rem + 1.83vw, 2.5rem);
}
/* schedule -----------------------------------------*/
#schedule {
  padding-bottom: clamp(1.25rem, 0.046rem + 5.5vw, 5rem);
}
#schedule .tyo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: clamp(1em, 2vw, 2em);
  margin-bottom: clamp(1.25rem, 0.849rem + 1.83vw, 2.5rem);
}
#schedule .ngo {
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
}
.tour-sunset {
  background: var(--white-more);
  border: 1px solid transparent;
  border-image: var(--sun-grad);
  border-image-slice: 1;
  box-sizing: border-box;
}
.tour-night {
  background: var(--white-more);
  border: 1px solid transparent;
  border-image: var(--night-grad);
  border-image-slice: 1;
  box-sizing: border-box;
}
.tour-ngo {
  background: var(--white-more);
  border: 1px solid transparent;
  border-image: var(--ngo-grad);
  border-image-slice: 1;
  box-sizing: border-box;
}
#schedule .time-table {
  padding: 1em;
}
.tour-name {
  font-family: var(--font-main);
  font-weight: var(--w700);
  font-size: clamp(16px, 20 * 100 / 1000 * 1vw, 20px);
  line-height: var(--h14);
  padding: .5em;
  text-align: center;
  color: var(--white);
}
.tour-sunset .tour-name {
  background: var(--sun-grad);
}
.tour-night .tour-name {
  background: var(--night-grad);
}
.tour-ngo .tour-name {
  background: var(--ngo-grad);
}
.time-table .item {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-column-gap: clamp(.8em, 2vw, 2em);
  align-items: center;
  box-sizing: border-box;
}
.ngo .time-table .item {
  grid-template-columns: 1fr 3fr;
}
.ngo .time-table .item:nth-child(1) .time, .ngo .time-table .item:nth-child(4) .time {
  padding-bottom: .5em;
}
.time-table .time {
  height: 100%;
  padding: .2em 0;
  box-sizing: border-box;
  border-right: 1px solid var(--black);
}
.jazz-cruise .line {
  display: block;
  width: 100%;
  border-left: 4px dotted #333;
  height: 2vw;
  margin-left: .5em;
  box-sizing: border-box;
}
.jazz-cruise .material-symbols-outlined {
  margin: .3em 0;
}
.time-spot-name {
  font-family: var(--font-main);
  font-weight: var(--w700);
  font-size: clamp(16px, 20 * 100 / 1000 * 1vw, 20px);
}
.tour-sunset .time-spot-name, .tour-ngo .time-spot-name {
  color: var(--orange);
}
.tour-night .time-spot-name, .tour-ngo .col-purple {
  color: var(--purple);
}
/* access -----------------------------------------*/
#access {
  padding-top: clamp(2.5rem, 1.697rem + 3.67vw, 5rem);
}
#access h3 {
  font-family: var(--font-main);
  font-weight: var(--w700);
  font-size: clamp(20px, 24 * 100 / 1000 * 1vw, 28px);
}
#access h3 .small {
  font-family: var(--font-sub);
  font-weight: var(--w400);
  font-size: clamp(16px, 18 * 100 / 1000 * 1vw, 18px);
  margin-left: .3em;
}
.map {
  border: solid 1px var(--gold);
  margin-top: .5em;
}
/* application -----------------------------------------*/
#application {
  position: relative;
  width: 100%;
  background-image: url("../img/bottom_bg.webp");
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
}
#application .link-list h3 {
  font-weight: var(--w700);
  margin-bottom: 0;
  line-height: var(--h14);
}
/* page-top -----------------------------------------*/
#page-top {
  position: fixed;
  z-index: 100;
  right: 20px;
  bottom: 20px;
}
#page-top a {
  display: block;
  width: 80px;
  height: 65px;
  padding: 20px 10px;
  text-align: center;
  text-decoration: none;
  color: var(--black);
  border-radius: 10px;
  background: var(--gray);
  transition: all .3var(--transition01);
}
/* hover */
@media (hover: hover) and (pointer: fine) {
  .link-list a:hover {
    background-position: 100% 0;
    transform: translateY(-2px);
  }
  #page-top a:hover {
    filter: brightness(.7);
  }
}
/* pc */
@media only screen and (max-width: 1500px) {
  /* common -----------------------------------------*/
  /* pankuzu -----------------------------------------*/
  /* top-v -----------------------------------------*/
  .top-image {
    height: 300px;
  }
  .top-image img {
    height: 300px;
  }
  .top-image img:nth-child(2) {
    object-position: center;
  }
  /* artist -----------------------------------------*/
  /* spot -----------------------------------------*/
  /* schedule -----------------------------------------*/
  /* access -----------------------------------------*/
  /* application -----------------------------------------*/
  /* page-top -----------------------------------------*/
}
@media only screen and (max-width: 1000px) {
  /* common -----------------------------------------*/
  /* pankuzu -----------------------------------------*/
  /* top-v -----------------------------------------*/
  /* artist -----------------------------------------*/
  /* spot -----------------------------------------*/
  /* schedule -----------------------------------------*/
  #schedule .tyo {
    display: block;
    max-width: 700px;
    width: 100%;
    margin: 0 auto clamp(1.25rem, 0.849rem + 1.83vw, 2.5rem);
  }
  .tour-sunset {
    margin-bottom: clamp(1.25rem, 0.849rem + 1.83vw, 2.5rem);
  }
  .time-table .item {
    grid-template-columns: 1fr 3fr;
  }
  /* access -----------------------------------------*/
  /* application -----------------------------------------*/
  /* page-top -----------------------------------------*/
}
@media only screen and (max-width: 768px) {
  /* common -----------------------------------------*/
  .pc {
    display: none;
  }
  .tb {
    display: block;
  }
  /* pankuzu -----------------------------------------*/
  #pankuzu {
    display: none;
  }
  /* top-v -----------------------------------------*/
  /* artist -----------------------------------------*/
  #artist .performer {
    display: block;
  }
  #artist .performer .text-contents {
    margin-top: 1em;
  }
  /* spot -----------------------------------------*/
  /* schedule -----------------------------------------*/
  /* access -----------------------------------------*/
  /* application -----------------------------------------*/
  /* page-top -----------------------------------------*/
}
@media only screen and (max-width: 599px) {
  /* common -----------------------------------------*/
  .tb {
    display: none;
  }
  .sp {
    display: block;
  }
  .link-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: clamp(1em, 2vw, 2em);
  }
  /* pankuzu -----------------------------------------*/
  /* top-v -----------------------------------------*/
  .top-image {
    grid-template-columns: 1fr;
    height: auto;
  }
  .top-image img {
    height: auto;
    object-fit: cover;
    aspect-ratio: 2 / 1;
  }
  #top-v h1 {
    max-width: 599px;
    width: 90%;
    margin: 0 auto;
  }
  .point {
    display: block;
  }
  .point p {
    margin-bottom: .5em;
  }
  /* artist -----------------------------------------*/
  /* spot -----------------------------------------*/
  .spot-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: clamp(1em, 2vw, 2em);
  }
  /* schedule -----------------------------------------*/
  #schedule .time-table {
    padding: .5em;
  }
  #schedule h2 span {
    display: block;
    font-size: 18px;
  }
  .time-table .item {
    grid-template-columns: 1fr 2.5fr;
  }
  .ngo .time-table .item {
    grid-template-columns: 1fr 2.5fr;
  }
  .time-table .time {
    font-size: 14px;
  }
  .time-text p:nth-child(2) {
    font-size: 14px;
  }
  .jazz-cruise .line {
    border-left: 2px dotted #333;
    height: 3vw;
  }
  .tour-night .time-spot-name, .tour-ngo .col-purple {
    font-size: 14px;
  }
  /* access -----------------------------------------*/
  /* application -----------------------------------------*/
  /* page-top -----------------------------------------*/
  #page-top a {
    display: block;
    width: 64px;
    height: 52px;
    padding: 12px 6px;
  }
}