@charset "utf-8";

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

/* CSS Document */
:root{
  --content-color-kaigai: #2488ff;
  --content-color-kokunai: #47c40c;
  --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;
  --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.svg);
  --content-border_s: min((1vw / 7.5), 1px) solid;
  --content-border_m: min((2vw / 7.5), 2px) solid;
  --content-border_l: min((4vw / 7.5), 4px) solid;
}


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

/***** MV・ナビ *****/
.title__content{
  margin: min((50vw / 7.5), 50px) auto 0;
  display: flex;
  justify-content: space-between
}
.main__title{
  font-size: min((42vw / 7.5), 32px);
}
.switch__nav{
  display: flex;
  gap: 20px;
}
.switch__nav>li{
  width: min((330vw / 7.5), 185px);
  height: min((90vw / 7.5), 40px);
  border-radius: min(8vw / 7.5 , 4px);
  border: var(--content-border_s);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.switch__nav>li>a{
  display: block;
}
.switch__nav>li .switch__nav__txt{
  font-size: min((28vw / 7.5) , 20px);
  color: #FFF;
  text-align: center;
}

.switch__nav>li.is-kaigai{
  border-color: var(--content-color-kaigai);
}
.switch__nav>li.is-kaigai .switch__nav__txt{
  color: var(--content-color-kaigai);
}
.switch__nav>li.is-kokunai{
  background-color: var(--content-color-kokunai);
  border-color: var(--content-color-kokunai);
}
.switch__nav>li.is-kokunai::after{
  content: "";
  width: 16px;
  height: calc(16px / 2);
  clip-path: polygon(100% 0, 0 0, 50% 100%);
  background-color: var(--content-color-kokunai);
  position: absolute;
  bottom: calc(-16px / 2);
  right: 0;
  left: 0;
  margin: auto;
}

.nav__wrapper{
  background: #f2f2f2;
  margin: 30px auto 40px;
}
.nav__list{
  display: flex;
  border-left: var(--content-border_m) #FFF;
}
.nav__list>li{
  width: calc(100% / 7);
  border-right: var(--content-border_m) #FFF;
}
.nav__list>li>a{
  display: block;
  padding: 10px 4px 24px;
  text-align: center;
  position: relative
}
.nav__list>li>a::after{
  content: "";
  background: var(--content-arrow-down) var(--bg-img-setting);
  width: 24px;
  height: 24px;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto
}

/***** メインコンテンツ *****/
.content__wrapper{
  width: 100%;
  padding: min((50vw / 7.5), 40px) 0;
}
.head-title{
  font-size: min((48vw / 7.5) , 28px);
  text-align: center;
  margin: 0 auto min((30vw / 7.5) , 24px)
}
.sub-title{
  font-size: min((36vw / 7.5) , 24px);
  text-align: center;
  margin: 0 auto min((30vw / 7.5) , 16px)
}
.theme__list+.sub-title{
  margin-top: min((50vw / 7.5), 40px);
}
.theme__list{
  display: flex;
  flex-wrap: wrap;
  gap: min((10vw / 7.5), 14px);
}
.theme__list>li{
  width: calc((100% - (14px * 4)) / 5);
  border: var(--content-border_s) #cdcdce;
}
.theme__txt{
  padding: min((8vw / 7.5), 4px);
  font-size: min((22vw / 7.5), 12px);
}

@media (hover: hover) and (pointer: fine){
  .switch__nav>li.is-kaigai:hover{
    background-color: var(--content-color-kaigai);
  }
  .switch__nav>li.is-kaigai:hover{
    background-color: var(--content-color-kaigai);
  }
  .switch__nav>li.is-kaigai:hover .switch__nav__txt{
    color: #FFF;
  }
  .nav__list>li>a:hover{
    background-color: #d7d7d7;
  }
  .theme__list>li:hover{
    border-color: var(--content-color-kokunai)
  }
  .theme__list>li:hover .theme__img{
    opacity: .8
  }
}

@media screen and (max-width:768px){
  .nosp{
    display: none;
  }
  .title__content{
    flex-direction: column;
    gap: calc(60vw / 7.5)
  }
  .switch__nav{
    display: flex;
    width: 100%
  }
  .nav__list.inner{
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    border-left: none;
  }
  .nav__list>li{
    width: calc(100% / 3);
  }
  .nav__list>li:nth-child(3n){
    border-right: none
  }
  .nav__list>li:nth-child(-n+6){
    border-bottom: var(--content-border_m) #FFF;
  }
  .theme__list>li{
    width: calc((100% - ((10vw / 7.5) * 2)) / 3);
  }
}