@charset "utf-8";

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

/* CSS Document */
:root{
  --content-color-pink: #ff7e71;
  --content-color-gray: #3f3931;
  --content-color-green: #c2dcbe;
  --content-color-purple: #dbbad7;
  --content-color-t_white: rgba(255 255 255 / 80%);
  --content-img-left: no-repeat right bottom;
  --content-img-right: no-repeat left bottom;
  --bg-img-setting: no-repeat center center / contain;
  --bg-width-pc: max(100%, 1920px);
  --content-width: min((710vw / 7.5), 992px);
  --font-size-pc: 14px;
  --font-size-sp: calc(24vw / 7.5);
  --font-sans: 'Noto Sans JP', sans-serif;
  --font-serif: 'Noto Serif JP', sans-serif;
  --content-font-size: min(var(--font-size-sp), var(--font-size-pc));
  --content-hover-speed: 0.3s;
  --content-shadow: 0 0 5px rgb(0 0 0 / 30%);
  --content-arrow-down: url(/cmn/icon/icon_arrow_down_white.svg);
  --content-arrow-right: url(../img/arrow02.png);
  --content-border_s: 1px solid;
  --content-border_m: 3px solid;
  --content-border_l: 4px solid;
}

.nosp{
  display: none
}
.main{
  font-family: var(--font-sans);
  font-size: var(--content-font-size);
  font-weight: 500;
  position: relative;
}
.main *{
  box-sizing: border-box;
}
.inner{
  width: var(--content-width);
  margin: auto;
}

/***** 背景 *****/
.breadcrumb{
  background: #FFF
}
.main::before{
  content: "";
  width: 100vw;
  height: 100vh;
  background: no-repeat center top / cover;
  background-image: url("../img/bg_mv.jpg");
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

/***** MV・ナビ *****/
.title__wrapper{
  padding-bottom: calc(192vw / 7.5);
  border-bottom: var(--content-border_m) #000;
}
.title__box{
  position: relative;
  padding-top: calc(187vw / 7.5);
}
.title-logo {
  position: absolute;
  top: calc(72vw / 7.5);
  right: 0;
  left: 0;
  margin: auto;
}
.title-copy{
  width: calc(650vw / 7.5);
  background: linear-gradient(rgba(236 215 212 / 50%), rgba(255 126 113 / 100%));
  margin: auto;
  padding: calc(193vw / 7.5) calc(32vw / 7.5) calc(32vw / 7.5);
  text-align: center
}
.bodycopy{
  font-family: var(--font-serif);
  font-weight: bold;
  color: var(--content-color-gray);
}
.catchcopy{
  margin-top: calc(72vw / 7.5);
  font-size: calc(30vw / 7.5);
  font-weight: 900;
  position: relative;
  padding-bottom: calc(108vw / 7.5);
}
.catchcopy::before{
  content: "";
  background: url("../img/ico_AS.png") var(--bg-img-setting);
  width: calc(136vw / 7.5);
  height: calc(55vw / 7.5);
  position: absolute;
  top: calc(-45vw / 7.5);
  left: 0;
}
.catchcopy::after{
  content: "";
  background: url("../img/ico_scroll.png") var(--bg-img-setting);
  width: calc(88vw / 7.5);
  height: calc(63vw / 7.5);
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;    
}

.dep-select-nav{
  position: absolute;
  top: 0;
  right: 0;
}
.display_selected {
  background: var(--content-color-pink);
  width: calc(200vw / 7.5);
  height: calc(55vw / 7.5);
  color: #FFF;
  text-align: center;
  line-height: calc(55vw / 7.5);
  position: relative;
  cursor: pointer;
}
.display_selected::after {
  content: "";
  background: var(--bg-img-setting) var(--content-arrow-down);
  width: calc(24vw / 7.5);
  height: calc(24vw / 7.5);
  position: absolute;
  top: 0;
  right: calc(16vw / 7.5);
  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;
}

/***** メインコンテンツ *****/
.content__wrapper{
  width: 100%;
  height: calc(1500vw / 7.5);
  position: relative;
  border-bottom: var(--content-border_m) #000;
  z-index: 1
}
.head-title{
  text-align: center;
  margin: 0 auto calc(40vw / 7.5)
}
.head-title>img{
  height: calc(100vw / 7.5);
}
.sub-copy{
  font-size: calc(30vw / 7.5);
  font-weight: bold;
  color: #000;
  text-align: center;
  margin-bottom: calc(24vw / 7.5);
}

/***** 商品　*****/
.content__wrapper.product{
  background: url("../img/bg_06.jpg") repeat-y center center;
  height: 100%;
  padding: calc(48vw / 7.5) 0
}
.content__wrapper.product .head-title{
  margin-bottom: calc(24vw / 7.5);
}
.area00{
  display: none;
}
.more__link{
  width: 90vw;
  margin: calc(24vw / 7.5) auto;
}
.more__link>a{
  display: block;
  font-weight: bold;
  color: #000;
  text-align: center;
  border: var(--content-border_s);
  background: #FFF;
  padding: calc(24vw / 7.5);
  position: relative
}
.more__link>a::after{
  content: "";
  background: var(--bg-img-setting) var(--content-arrow-right);
  width: calc(17vw / 7.5);
  height: calc(26vw / 7.5);
  position: absolute;
  top: 0;
  right: calc(10vw / 7.5);
  bottom: 0;
  margin: auto
}

/***** エリア紹介 *****/
.bg__area{
  display: block;
  width: 100%;
  position: sticky;
  top: 0;
  left: 0;
  z-index: -1;
  padding: calc(32vw / 7.5) 0;
}
.bg__area::after{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: no-repeat center center / cover;
}
.bg__area.bg01::after{
  background-image: url("../img/bg_01.jpg")
}
.bg__area.bg02::after{
  background-image: url("../img/bg_02.jpg")
}
.bg__area.bg03::after{
  background-image: url("../img/bg_03.jpg")
}
.bg__area.bg04::after{
  background-image: url("../img/bg_04.jpg")
}
.area__box{
  width: var(--content-width);
  margin: auto;
  display: flex;
}
.area__item{
  width: calc(432vw / 7.5);
  margin-left: calc(30vw / 7.5)
}
.area__catch{
  font-family: var(--font-serif);
  font-size: calc(30vw / 7.5);
  font-weight: 900;
  color: #FFF;
  margin-bottom: calc(16vw / 7.5);
  line-height: calc(40 / 30);
}
.area__txtbox{
  background: var(--content-color-t_white);
  padding: calc(24vw / 7.5);
  display: flex;
  flex-wrap: wrap;
  gap: calc(16vw / 7.5)
}
.area__txtbox>li{
  width: 100%;
  font-family: var(--font-serif);
  font-weight: bold;
  color: var(--content-color-gray);
}

/***** モデルプラン *****/
.content__wrapper.model__plan{
  background: url("../img/bg_05.jpg") repeat-y top / contain;
  padding: calc(48vw / 7.5) 0;
  height: 100%;
}
.content__wrapper.model__plan .head-title{
  margin-bottom: calc(24vw / 7.5);
}
.content__wrapper.model__plan .sub-copy{
  font-family: var(--font-serif);
  font-weight: 900;
  margin-bottom: calc(40vw / 7.5);
}
.plan__wrapper{
  display: flex;
  flex-wrap: wrap;
}
.plan__list{
  display: contents
}
.plan__list>li{
  width: 100%;
  margin: auto;
  line-height: calc(145vw / 7.5);
  font-size: calc(48vw / 7.5);
  font-weight: 900;
  color: #b2b2a2;
  padding-right: calc(64vw / 7.5);
  text-align: right;
  background: #000;
  position: relative;
  cursor: pointer
}
.plan__list>li:first-child{
  order: 1;
  
}
.plan__list>li:last-child{
  order: 3;
  margin-top: calc(40vw / 7.5);
}
.plan__list>li.is-current{
  background: #FFF;
  color: #000;
  width: calc(644vw / 7.5);
  z-index: 10
}
.plan__list>li::before{
  content: "";
  background: var(--bg-img-setting);
  width: calc(223vw / 7.5);
  height: calc(134vw / 7.5);
  position: absolute;
  bottom: 0;
  left: calc(20vw / 7.5);
}
.plan__list>li:first-child::before{
  background-image: url("../img/tab_PP_of.png")
}
.plan__list>li:last-child::before{
  background-image: url("../img/tab_GT_of.png")
}
.plan__list>li:first-child.is-current::before{
  background-image: url("../img/tab_PP_on.png")
}
.plan__list>li:last-child.is-current::before{
  background-image: url("../img/tab_GT_on.png")
}
.plan__list>li::after{
  content: "";
  background: var(--bg-img-setting);
  background-image: url("../img/ico_on.png");
  width: calc(35vw / 7.5);
  height: calc(35vw / 7.5);
  position: absolute;
  top: 0;
  right: calc(16vw / 7.5);
  bottom: 0;
  margin: auto;
}
.plan__list>li.is-current::after{
  background-image: url("../img/ico_off.png");
}

.plan__content{
  display: none;
  background: #FFF;
  padding: calc(20vw / 7.5);
}
.plan__content.naha{
  order: 2
}
.plan__content.chatan{
  order: 4
}
.plan__content.is-active{
  display: block;
}
.plan__midashi{
  display: flex;
  gap: calc(30vw / 7.5);
  margin-bottom: 16px;
}
.midashi__icon{
  width: calc(106vw / 7.5);
  background: var(--bg-img-setting);
  font-size: calc(28vw / 7.5);
  line-height: 1.0;
  display: flex;
  align-items: center;
  padding-left: calc(12vw / 7.5);
}
.naha .midashi__icon{
  background-image: url("../img/rbn_PP.png")
}
.chatan .midashi__icon{
  background-image: url("../img/rbn_GT.png")
}
.midashi__txt{
  flex: 1;
  font-size: calc(32vw / 7.5);
  font-weight: 900;
  line-height: calc(42 / 32)
}
.time__txt{
  font-weight: bold;
  padding: calc(8vw / 7.5);;
  line-height: 1.0;
}
.naha .time__txt{
  background: var(--content-color-green);
}
.chatan .time__txt{
  background: var(--content-color-purple);
}
.course__list{
  display: flex;
  flex-wrap: wrap;
  gap: calc(24vw / 7.5);;
  margin: calc(24vw / 7.5) auto;
}
.course__list>li{
  width: 100%;
  display: grid;
  gap: calc(16vw / 7.5) calc(24vw / 7.5);
  grid-template-columns: calc(240vw / 7.5) 1fr;
  grid-template-rows: max-content 1fr;
  align-items: flex-start;
}
.course__img{
  grid-row: 1 / 3;
  grid-column: 1 / 2
}
.course__midashi{
  font-size: calc(28vw / 7.5);
  font-weight: bold;
  line-height: calc(34 / 28);
}
.link__button{
  width: 100%;
  margin: calc(32vw / 7.5) auto 0;
}
.link__button>a{
  display: block;
  background: var(--content-color-pink);
  font-weight: 900;
  color: #000;
  line-height: 1.25;
  padding: calc(16vw / 7.5) calc(16vw / 7.5) calc(16vw / 7.5) calc(116vw / 7.5);
  position: relative;
  box-shadow: var(--content-shadow);
}

.link__button>a::before{
  content: "";
  background: var(--bg-img-setting) url("../img/ico_chk01.png");
  width: calc(99vw / 7.5);
  height: calc(53vw / 7.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(10vw / 7.5);
  margin: auto;
}
.link__button>a::after{
  content: "";
  background: var(--bg-img-setting) var(--content-arrow-right);
  width: calc(17vw / 7.5);
  height: calc(26vw / 7.5);
  position: absolute;
  top: 0;
  right: calc(10vw / 7.5);
  bottom: 0;
  margin: auto
}

/* 特集バナー */
.content__wrapper.foot{
  background: #FFF;
  padding: calc(40vw / 7.5) 0;
  height: 100%;
}
.bnr__list{
  display: flex;
  flex-wrap: wrap;
  gap: calc(16vw / 7.5);
}
.bnr__list>li{
  width: calc((100% - (16vw / 7.5)) / 2);
}
.bnr__list>li>a{
  display: block;
}