@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* CSS Document */
:root{
  --content-color-base: #2C2A29;
  --content-color-blue: #00558a;
  --content-color-red: #d63646;
  --content-color-gold: #976f11;
  --content-color-sumire: #9A94AF;
  --content-color-purple: #574D7A;
  --content-color-sky: #ebf7ff;
  --content-color-pink: #fff3f4;
  --content-color-gray: #C0C5CC;
  --content-clear-orange: rgba(241 200 160 / 20%);
  --bg-img-setting: no-repeat center center / cover;
  --content-width-sp: (335vw / 3.75);
  --content-width-pc: 992px;
  --content-width-tab: min(calc(100% - 40px), var(--content-width-pc));
  --content-width: min(var(--content-width-sp), var(--content-width-pc));
  --content-bg-width-pc: max(100%, 1920px);
  --font-size-pc: 16px;
  --font-size-sp: calc(16vw / 3.75);
  --content-font-size: min(var(--font-size-sp), var(--font-size-pc));
  --font-sans: 'Noto Sans JP', sans-serif;
  --content-hover-speed: 0.3s;
  --content-arrow-down: url(../img/arrow01.png);
  --content-arrow-right: url(../img/arrow02.png);
  --content-border: calc(4vw / 3.75) solid;
  --content-border-s: calc(1vw / 3.75) solid;
}

.nosp {
  display: none;
}
.main {
  font-family: var(--font-sans);
  font-size: var(--content-font-size);
  color: var(--content-color-base);
  position: relative;
}
.main *{
  box-sizing: border-box;
}
.inner{
  width: var(--content-width);
  margin: auto;
}
a{
  transition: var(--content-hover-speed);
}

/*** MV・ナビ ***/
#slider {
  width: 100%;
  height: calc(268vw / 3.75);
  position: relative
}
#slider .main-title img {
  width: calc(100vw - (40vw / 3.75));
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto
}
.nav-wrapper {
  width: 100%;
}
.nav-box>.inner{
  width: 100vw;
  display: grid;
  margin: auto;
}
.nav-list {
  order: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: var(--content-border-s) var(--content-color-gray);
}
.nav-list>li {
  text-align: center;
  padding: calc(8vw / 3.75) 0;
}
.nav-list>li:nth-child(-n+3){
  border-bottom: var(--content-border-s) var(--content-color-gray);
}
.nav-list>li:not(:nth-child(3n)){
  border-right: var(--content-border-s) var(--content-color-gray);
}
.nav-list>li>a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: var(--content-color-red);
  padding: calc(4vw / 3.75);
}
.dep-select-nav{
  width: 100vw;
  order: 1
}
.display_selected {
  background: var(--content-color-blue);
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: calc(20vw / 3.75);
  font-weight: bold;
  text-align: center;
  color: #FFF;
  line-height: 1.0;
  position: relative;
  cursor: pointer;
  padding: calc(10vw / 3.75)
}
.display_selected::after {
  content: "";
  background: var(--bg-img-setting) var(--content-arrow-down);
  width: calc(16.8vw / 3.75);
  height: calc(16.8vw / 3.75);
  position: absolute;
  top: 0;
  right: calc(10vw / 3.75);
  bottom: 0;
  margin: auto
}
.dep-select-zone {
  display: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  transition: all .5s;
  z-index: 100;
  background: rgba(0 0 0 / 80%);
  padding: calc(100vw / 7.5) calc(80vw / 7.5);
}
.dep-select li {
  cursor: default;
  padding: calc(20vw / 7.5);
  font-size: calc(30vw / 7.5);
  font-weight: bold;
  color: #FFF;
  text-align: center;
}
.dep-select li:hover, .dep-select li.selected {
  background: #FFF;
  color: #000;
}
.close-button{
  margin: calc(40vw / 7.5) auto;
  width: 5em;
  padding: calc(10vw / 7.5);
  border: var(--content-border_s);
  font-size: calc(30vw / 7.5);
  font-weight: bold;
  color: #FFF;
  text-align: center;
}

/*** .main__content ***/
.content-wrapper:not(.intro){
  padding: calc(40vw / 3.75) 0;
  border-bottom: var(--content-border) var(--content-color-blue);
  margin-bottom: calc(4vw / 3.75);
}
.head-title{
  text-align: center;
  font-size: calc(26vw / 3.75);
  font-weight: bold;
  color: var(--content-color-red);
}
.is-blue{
  color: var(--content-color-blue);
}
.is-red{
  color: var(--content-color-red);
}
.is-fit{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}
.note-txt{
  display: block;
  font-size: calc(12vw / 3.75);
  font-weight: normal;
  padding-left: 1.0em;
  text-indent: -1.0em;
}
.content-box{
  display: grid;
  gap: calc(20vw / 3.75);
}
.content-item{
  display: grid;
  grid-template-rows: auto;
  gap: calc(16vw / 3.75);
}
.content-midashi{
  font-size: calc(20vw / 3.75);
  font-weight: bold;
  color: var(--content-color-red);
}
.content-txt .note-txt{
  margin-top:calc(16vw / 3.75);
}

/*** イントロ ***/
.content-wrapper.intro{
  padding: calc(40vw / 3.75) 0 calc(80vw / 3.75);
  border-bottom: var(--content-border) var(--content-color-gold);
}
.content-wrapper.intro .inner{
  display: grid;
  gap: calc(20vw / 3.75);
  align-items: center
}
.catchcopy {
  font-size: calc(20vw / 3.75);
  font-weight: bold;
  color: var(--content-color-red);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: calc(20vw / 3.75);
  align-items: center
}
.catchcopy::before {
  content: "";
  background: url("../img/logo_cm.png") var(--bg-img-setting);
  width: calc(200vw / 3.75);
  height: calc(47vw / 3.75);
  display: block;
}
.bodycopy {
  text-align: center;
  font-weight: bold;
}
.catchcopy .copy-txt>a,
.bodycopy>a {
  color: var(--content-color-blue);
  text-decoration: underline
}
.catchcopy .copy-txt>a:hover,
.bodycopy>a:hover {
  text-decoration: none
}
.what-box{
  width: 100%;
  margin: auto;
  background-color: var(--content-color-blue);
}
.what-box>a {
  display: grid;
  grid-template-columns: calc(84vw / 3.75) 1fr;
  grid-template-rows: calc(60vw / 3.75);
  gap: calc(10vw / 3.75);
}
.link_about>a :hover {
  opacity: 0.7
}
.what-txt{
  display: flex;
  align-items: center;
  font-size: calc(18vw / 3.75);
  font-weight: bold;
  color: #FFF;
  position: relative
}
.what-txt::after {
  content: "";
  background: var(--content-arrow-down) var(--bg-img-setting);
  width: calc(16.8vw / 3.75);
  height: calc(16.8vw / 3.75);
  position: absolute;
  top: 0;
  right: calc(10vw / 3.75);
  bottom: 0;
  margin: auto;
}

/*** ホテル ***/
.content-wrapper.hotel{
  border-top: var(--content-border) var(--content-color-gold);
}
.content-wrapper.hotel .inner{
  display: grid;
  gap: calc(48vw / 3.75);
}
.hotel-content{
  display: grid;
  gap: calc(20vw / 3.75);
}
.sub-title{
  font-size: calc(32vw / 3.75);
  font-weight: bold;
  color: var(--content-color-red);
  display: flex;
  gap: calc(14vw / 3.75);
  align-items: center;
  justify-content: center
}
.sub-title::before {
  content: "";
  background: var(--bg-img-setting);
  width: calc(191vw / 3.75);
  height: calc(87.5vw / 3.75);
  display: block;
}
.sub-title.active::before {
  background-image: url("../img/summer/icon_ttl_activity.png")
}
.sub-title.food::before {
  background-image: url("../img/summer/icon_ttl_food.png")
}
.sub-title.stay::before {
  background-image: url("../img/summer/icon_ttl_stay.png")
}
.kids-list{
  display: grid;
  gap: calc(8vw / 3.75);
}
.data-box{
  display: grid;
  gap: calc(10vw / 3.75);
  background: var(--content-clear-orange);
  border-radius: calc(10vw / 3.75);
  padding: calc(16vw / 3.75) calc(10vw / 3.75);
}
.data-title{
  font-size: calc(18vw / 3.75);
  font-weight: bold;
  color: var(--content-color-red);
  line-height: 1.3;
}
.data-txt{
  font-weight: bold;
}
.data-txt>.note-txt{
  margin-top: calc(10vw / 3.75);
}
.content-box.is-stay .content-img{
  width: 100%;
  height: calc(324vw / 3.75);
} 

/* アクセス */
.content-wrapper.access {
  background: var(--content-color-sky);
  border-top: var(--content-border) var(--content-color-red);
}
.head-title#access{
  margin-bottom: calc(40vw / 3.75)
}
.access-img{
  text-align: center;
  margin-bottom: calc(20vw / 3.75)
}
.access-list{
  display: grid;
  gap: calc(20vw / 3.75);  
}
.access-midashi{
  font-size: calc(28vw / 3.75);
  font-weight: bold;
  color: var(--content-color-red);
  line-height: 1.3;
  margin-bottom: calc(20vw / 3.75);  
}
.access-data .note-txt{
  margin-top: calc(16vw / 3.75);  
}

/* ツアー */
.content-wrapper.tour {
  background: var(--content-color-pink);
  border-top: var(--content-border) var(--content-color-red);
}
.head-title#tour{
  margin-bottom: calc(16vw / 3.75)
}
.product__content{
  display: none
}
.link__button{
  width: 100%;
  margin: calc(20vw / 3.75) auto 0;
}
.link__button>a{
  display: block;
  background: var(--content-color-blue);
  font-size: calc(16vwv/ 3.75);
  font-weight: bold;
  color: #FFF;
  text-align: center;
  line-height: 1.3;
  padding: calc(16vw / 3.75);
  position: relative
}
.link__button>a::after{
  content: "";
  background: var(--bg-img-setting) var(--content-arrow-right);
  width: calc(9vw / 3.75);
  height: calc(15vw / 3.75);
  position: absolute;
  top: 0;
  right: calc(10vw / 3.75);
  bottom: 0;
  margin: auto;
}

/* clubmedについて */
.content-wrapper.about {
  background-color: var(--content-color-blue);
  border-top: var(--content-border) var(--content-color-red);
  margin-bottom: 0
}
.content-wrapper.about .inner{
  display: grid;
  gap: calc(40vw / 3.75);
}
.head-title#about {
  display: flex;
  flex-direction: column;
  gap: calc(16vw / 3.75);
  align-items: center;
  width: 100vw;
  margin: 0 calc(50% - 50vw)
}
.head-title#about::before {
  content: "";
  background: url("../img/logo_cm_w.png") var(--bg-img-setting);
  width: calc(184vw / 3.75);
  height: calc(34vw / 3.75);
  display: block;
}
.head-title#about>span {
  color: #FFF;
  font-size: calc(30vw / 3.75);
  letter-spacing: calc(-10em / 100);
  display: flex;
  gap: calc(8vw / 3.75);
}
.head-title#about>span::before,
.head-title#about>span::after {
  content: "“";
  display: block;
  color: var(--content-color-red);
}
.head-title#about>span::after{
  transform: scaleX(-1)
}
.about-box{
  display: grid;
  gap: calc(20vw / 3.75);
  color: #FFF;
}
.about-inbox{
  display: grid;
  gap: calc(8vw / 3.75);
}
.about-midashi{
  font-size: calc(20vw / 3.75);
  font-weight: bold;
}
.ribbon{
  display: flex;
  margin-bottom: calc(10vw / 3.75)
}
.ribbon>span{
  display: block;
  height: calc(40vw / 3.75);
  background: var(--content-color-red);
  font-size: calc(26vw / 3.75);
  font-weight: bold;
  color: #FFF;
  padding: 0 calc(10vw / 3.75);
}
.ribbon::after {
  content: "";
  clip-path: polygon(50% 0, 0 50%, 50% 100%, 0% 100%, 0 50%, 0% 0%);
  background-color: var(--content-color-red);
  width: calc(40vw / 3.75);
  height: calc(40vw / 3.75);
  display: block;
}
.about-inbox.is-grid{
  gap: calc(40vw / 3.75)
}

.include-content{
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  background: #FFF;
  padding: calc(10vw / 3.75) 0;
  display: grid;
  gap: calc(10vw / 3.75);
}
.include-midashi {
  font-size: calc(24vw / 3.75);
  font-weight: bold;
  color: var(--content-color-red);
  text-align: center;
}
.include-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(10vw / 3.75);
  padding: 0 calc(10vw / 3.75)
}
.include-list>li {
  position: relative;
}
.include-list>li .ribbon{
  position: absolute;
  bottom: 0;
  left: 0;
  margin-bottom: 0
}
.include-list>li .ribbon .include-txt {
  height: calc(36vw / 3.75);
  font-size: 12px;
  line-height: 1.3;
  padding: calc(4vw / 3.75) 0 calc(4vw / 3.75) calc(4vw / 3.75);
}
.include-list>li:nth-child(4) .include-txt {
  letter-spacing: calc(-7em / 100)
}
.include-list>li .ribbon::after{
  width: calc(22vw / 3.75);
  height: calc(36vw / 3.75)
}

/* 動画 */
.moviebox{
  margin-top: calc(40vw / 7.5)
}
#movie__wrapper{
  position: relative;
  text-align: center;
  height: 56.25vw;
  min-height: 100%;
  background: #000;
}
#loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  font-size: calc(40vw / 7.5);
  font-family: var(--font-sans);
  font-weight: bold;
  color: #FFF;
}
#youtube {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%;
}
#youtube-mask{
  position: absolute;
  z-index: 2;
  top:0;
  width:100%;
  height: 100%;
}

/* 冬トピックス */
.content-wrapper.event{
  border-top: var(--content-border) var(--content-color-gold);
  border-bottom: var(--content-border) var(--content-color-gold);
  position: relative;
  margin: calc(4vw / 3.75) auto;
  padding: calc(40vw / 3.75) 0;
  position: relative
}
.content-wrapper.event::before,
.content-wrapper.event::after{
  content: "";
  background: var(--bg-img-setting);
  width: calc(135vw / 3.75);
  height: calc(55vw / 3.75);
  position: absolute;
  top: calc(-28vw / 3.75);
  margin: auto;
}
.content-wrapper.event::before{
  background-image: url("../img/winter/bg_ttl_event_lft.png");
  left: calc(48vw / 3.75);
}
.content-wrapper.event::after{
  content: "";
  background-image: url("../img/winter/bg_ttl_event_ryt.png");
  right: calc(48vw / 3.75);
}
.head-title#event{
  font-size: calc(32vw / 3.75);
  color: var(--content-color-blue);
}
.head-title#event>small{
  font-size: calc(20vw / 3.75);
}
.event-content{
  display: grid;
  gap: calc(24vw / 3.75);
}
.event-content .inner{
  display: contents
}
.event-box::before{
  content: "";
  background: var(--bg-img-setting);
  width: 100vw;
  aspect-ratio: 750 / 275;
  display: block;
}
.event-box.newyear::before{
  background-image: url("../img/winter/img_event02_sp.jpg")
}
.event-box.christmas::before{
  background-image: url("../img/winter/img_event01_sp.jpg")
}
.event-data{
  padding: calc(24vw / 3.75) calc(24vw / 3.75) 0;
  display: grid;
  gap: calc(16vw / 3.75);
}
.event-title{
  display: grid;
  grid-template-columns: calc(82vw / 3.75) 1fr;
  gap: calc(16vw / 3.75);
  align-items: center;
}
.event-title::before{
  content: "";
  background: no-repeat center / contain;
  display: block;
  aspect-ratio: 90 / 90
}
.event-box.newyear .event-title::before{
  background-image: url("../img/winter/icon_event02.png")
}
.event-box.christmas .event-title::before{
  background-image: url("../img/winter/icon_event01.png")
}
.event-title>span{
  display: block;
  font-size: calc(24vw / 3.75);
  font-weight: bold;
  color: var(--content-color-blue);
  padding-bottom: calc(8vw / 3.75);
  border-bottom: 4px dotted var(--content-color-gold);
}
.event-txt{
  font-size: 14px
}