@charset "UTF-8";
@import url("under.css");
:root {
  --fnt-base:"ten-mincho","heisei-kaku-gothic-std", sans-serif;
  --fc-base: #151515;
  --fnt-bell:"Belleza", sans-serif;
  --fnt-avr: "avenir-lt-pro", sans-serif; /*400-500-700*/
  --fnt-gsc:"heisei-kaku-gothic-std", sans-serif;
  --clr-gry: #D3D3D3;
  --wall-gry: #FAFAFA;
  --wall-d-gry:#F5F5F5;
  --wall-blk: #151515;
  
  --bdr-gry:#E8E8E8;
  --bdr-pale-gry:#F4F4F4;
  --pd-wid: max(calc((100% - 1000px)/2), 4vw);
  --head2_en: clamp(2.813rem, 2.472rem + 1.7vw, 3.75rem); /*45-60*/
  --mainWidth: calc(100vw - 270px);
  --easing: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --transit: .5s var(--easing);
}
html{
  background: rgb(254, 254, 254);
}
html.raspberry-red {
  --main-color: #C14F4E;
}
html.cobalt-blue {
  --main-color: #1F3FB1;
}
html.lilac {
  --main-color: #D1B1CD;
}

body {
  width: 100%;
  font-size: min(14px, 3.6vw);
  font-family: var(--fnt-base);
  color: var(--fc-base);
  transition: opacity var(--transit);
  opacity: .01;
  background: rgb(254, 254, 254);
  
}
body.is-load {
  opacity: 1;
}
.mms-link{
  color: var(--main-color)!important;
}
/*#container ++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#container {
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  width: 100%;
  overflow-x: hidden;
  min-height: 100dvh;
}
.index-contents,.index-footer {
  width: var(--mainWidth);
  margin-left: auto;
}
.fl{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.fl_c{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}
.ai_c{
  -ms-align-items: center;
  align-items: center;
}
.mb-diff {
  mix-blend-mode: difference;
}
a.cvr {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  top: 0;
  left: 0;
}
#fix-login-button {
  position: fixed;
  top: min(50px, 5vw);
  right: min(40px, 2vw);
  width: min(50px, 12vw);
  z-index: 10;
  display: grid;
  place-items:center;
}
#fix-login-button .icon {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 100vmax;
  display: grid;
  grid-template-columns: 28%;
  place-content: center;
  transform-origin: center;
  
}
#fix-login-button .icon::before{
  content: "";
  width: 100%;
  aspect-ratio:1;
  position: absolute;
  top: 50%;
  left: 50%;
  translate:-50% -50%;
  border-radius: 100vmax;
  background: var(--main-color);
  transition:scale var(--transit);
}
#fix-login-button .text {
  color: var(--main-color);
  font-family: var(--fnt-bell);
  text-align: center;
  margin-top: 10px;
  transition:translate var(--transit);
}
#fix-count {
  position: fixed;
  z-index: 10;
  bottom: min(50px, 3vw);
  right: min(50px, 3vw);
  width: min(172px, 28vw);
  transition: opacity var(--transit);
  color: var(--main-color);
}
@media(hover){
  #fix-login-button:hover .icon::before{
    scale:1.3;
  }
  #fix-login-button:hover .text{
    translate:0 25%;
  }
}
.index-fix-count {
  opacity: 0;
}
.index-fix-count.active {
  opacity: 1;
}
/*header +++++++++++++++++++++++++++++++++*/
header {
  padding-top: min(40px, 5vw);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 100;
  pointer-events: none;
}
.header__inner {
  padding-left: min(50px, 4vw);
  padding-right: min(50px, 4vw);
  display: flex;
  justify-content: space-between;
}
header a {
  pointer-events: auto;
}
.h-logo {
  width: min(170px, 42vw);
}

/*hum button / navigation +++++++++++++++++*/
#hum-button{
  width: 30px;
  aspect-ratio:1;
  display: none;
  place-content:center;
  grid-template-columns: 1fr;
  cursor: pointer;
  z-index: calc(infinity);
  pointer-events: all;
}
#hum-button button{
  height: 2px;
  background: #fff;
  position: relative;
  border-radius: 3px;
  transition:rotate var(--transit);
}
#hum-button button::before
,#hum-button button::after{
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  background: #fff;
  left: 0;
  border-radius: 3px;
}
#hum-button button::before{
  top:max(-10px,-2.5vw) ;
  transform-origin: top;
  transition:rotate var(--transit);
}
#hum-button button::after{
  top: min(10px,2.5vw);
}
#hum-button.open button{
  rotate:45deg;
}
#hum-button.open button::before
,#hum-button.open button::after{
  rotate:-90deg;
  top: 0;
}
#hum-button.open button::after{
  opacity: 0;
}

#l-nav {
  position: fixed;
  left: 0;
  top: 0;
  height: 100dvh;
  width: 270px;
  background: var(--wall-gry);
  border-top: 5px solid var(--main-color);
  overflow-y: scroll;
  z-index: 1;
  transition:all var(--transit);
}
.l-nav_inner {
  padding-left: min(50px, 4vw);
  padding-right: min(50px, 4vw);
  padding-bottom: min(50px, 10vw);
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100%;
}
.l-nav__menu {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  place-content: center;
  gap: min(50px,12vw);
}
.l-nav__menu li{
  grid-template-columns: 1fr;
  display: grid;
  gap: 17px;
}
.l-nav__menu li.l-regist-nav{
  display: none;
}
.l-nav__menu a {
  display: block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, var(--main-color), 50%, var(--fc-base) 50%);
  background-size: 200% 100%;
  transition: background .6s ease;
  transform-origin: left center;
  background-position: 100% center;
}
.l-nav__menu a::after {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--main-color);
  position: absolute;
  left: 0;
  bottom: -3px;
  scale: 0 1;
  transform-origin: left center;
  transition: scale var(--transit);
}
@media(hover) {
  .l-nav__menu a:hover {
    background-position: left center;
  }
  .l-nav__menu a:hover::after {
    scale: 1 1;
  }
}
.l-nav__sns {
  display: grid;
  grid-template-columns: auto auto auto;
  -ms-align-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: 15px;
}
.l-nav__sns a {
  height: min(17px, 5vw);
  aspect-ratio: 1 / .7;
  color: var(--main-color);
}
.l-nav__sns a svg
,.l-nav__sns a img{
  object-fit: contain;
  height: 100%;
  object-position: center;
}
/*main   +++++++++++++++++++++++++++++++++*/
main{
  flex: 1;
}
.inner {
  width: min(1100px, 100%);
  padding-left: min(50px, 4vw);
  padding-right: min(50px, 4vw);
  margin-left: auto;
  margin-right: auto;
}
.inner.w-min{
  width: min(1000px, 100%);
}
.in-text{
  line-height: calc(21/14);
}
.top-text{
  line-height: calc(28/14);
}
/*title setting*/
.sec-title {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -ms-align-items: flex-start;
  align-items: flex-start;
  gap: 5px;
  pointer-events: none;
}
.sec-title.cnt {
  -ms-align-items: center;
  align-items: center;
}
.sec-title .main.en {
  font-size: var(--head2_en);
  font-family: var(--fnt-bell);
}
.box-title {
  font-size: min(24px, 4.5vw);
}
.fnt-bell{
  font-family: var(--fnt-bell);
}
.fnt-gsc{
  font-family: var(--fnt-gsc);
}
/*button setting*/
.button-wrap{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  margin-top: min(60px,15vw);
  gap:min(40px,12vw);
}
.button-wrap.full{
  width: 100%;
}
.button-wrap.end{
  -ms-align-items: flex-end;
  align-items: flex-end;
}
.button-wrap.arw .arw-text-button{
  justify-content: flex-start;
  
}
.ccl-arw-button {
  width: min(40px, 10vw);
  color: var(--main-color);
}
.ccl-arw-button.gry{
  color: var(--clr-gry);
}
.ccl-arw-button.blk{
  color: #000;
}
.ccl-arw-button > * {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 100vmax;
  display: grid;
  grid-template-columns: 20%;
  place-content: center;
  place-items: center;
}
.ccl-arw-button > *::before {
  content: "";
  position: absolute;
  width: 100%;
  aspect-ratio:1;
  border: 1px solid currentColor;
  border-radius: 100vmax;
  transition: width var(--transit),background var(--transit);
}
.ccl-arw-button.wht{
  color: #fff;
}
.ccl-arw-button > * span {
  transition: translate var(--transit);
}
.ccl-arw-button > * svg{
  z-index: 1;
}
.link-more {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: flex-end;
}
.link-more a {
  width: min(200px, 100%);
  text-align: right;
  font-family: var(--fnt-avr);
  padding-bottom: 7px;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, var(--main-color), 50%, var(--fc-base) 50%);
  background-size: 200% 100%;
  transition: background .6s ease, color var(--transit);
  transform-origin: left center;
  background-position: 100% center;
  font-size: min(12px,3.4vw);
}
 .link-more.hvr_base a{
   background-image: linear-gradient(90deg, var(--fc-base), 50%, var(--fc-base) 50%);
  }
.link-more.ja a{
  font-size: min(14px,3.6vw);
  font-family: var(--fnt-base);
}
.link-more a::after {
  content: "";
  background: currentColor;
  width: 100%;
  height: 1px;
  position: absolute;
  right: 0;
  bottom: 0;
  transition: all var(--transit);
  transform-origin: right bottom;
}
.arw-text-button{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  z-index: 1;
}
.arw-text-button.inp > div
,.arw-text-button a
,.arw-text-button button
,.arw-text-button p{
  padding-right: min(50px, calc(10vw + 5px));
}
.arw-text-button.back.inp
,.arw-text-button.back a
,.arw-text-button.back button{
  padding-right: 0;
  padding-left: min(50px, calc(10vw + 5px));
}
.arw-text-button input{
  font-size: min(14px,3.6vw);
  width: auto;
}
.arw-text-button .ccl-arw-button{
  position: absolute;
  aspect-ratio:1;
  right: 0;
  top: 50%;
  translate:0 -50%;
  color: #000;
  pointer-events: none;
  z-index: -1;
}
.arw-text-button.back .ccl-arw-button{
  right: auto;
  left: 0;
  scale:-1 -1;
}
.arw-text-button .ccl-arw-button > *::before{
  background-color: var(--wall-d-gry);
  border-color: var(--wall-d-gry);
}
.arw-text-button .ccl-arw-button svg{
  transition:translate var(--transit);
}
.rect-button > *{
  display: grid;
  place-content:center;
  background: var(--fc-base);
  color: #fff;
  height: 40px;
  border-radius: 5px;
}
@media(hover) {
  .ccl-arw-button a:hover::before 
  ,.news-slide-item:hover .ccl-arw-button >*::before
  ,.news-pickup-item:hover .ccl-arw-button >*::before
  ,.hvr-par:hover .ccl-arw-button >*::before{
    width: 170%;
  }
  .ccl-arw-button a:hover span
  ,.news-slide-item:hover .ccl-arw-button >* span
  ,.news-pickup-item:hover .ccl-arw-button >* span
  ,.hvr-par:hover .ccl-arw-button >* span
  ,.arw-text-button .hvr-par:hover .ccl-arw-button svg{
    translate: 180% 0;
  }
  .hvr-par:hover .ccl-arw-button.gry > *::before
  ,.ccl-arw-button.gry > a:hover::before{
    background: #F7F7F7;
  }
  
  .link-more a:hover {
    color: var(--main-color);
    background-position: left center;
  }
  .link-more a:hover::after {
    width: 10%;
  }
  .link-more.hvr_base a:hover::after{
    width: 37%;
    background: var(--main-color);
  }
}
/*#hero ++++++++++++++++++*/
.index-hero {
  height: 700px;
}
.hero-fix-text {
  position: absolute;
  left: 270px;
  z-index: 2;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  top: 50%;
  translate: -150% -50%;
  font-size: min(60px, 15vw);
  white-space: nowrap;
  font-family: var(--fnt-bell);
  transition: translate var(--transit), opacity var(--transit);
  opacity: 0;
}
.hero-fix-text.active {
  opacity: 1;
  translate: -50% -50%;
}
.index-hero::after {
  content: "";
  width: 130px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: var(--wall-gry);
  z-index: 1;
}
#hero-slider {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.hero-slide p {
  height: 100%;
  width: 100%;
}
.hero-slide p img {
  object-fit: cover;
  height: 100%;
  object-position: center;
}
.hero-navigation {
  width: 100%;
  left: 0;
  top: min(50px, 5vw);
  position: absolute;
  z-index: 3;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: flex-end;
  gap: min(25px, 5vw);
  padding-right: min(180px, 20vw);
  pointer-events: none;
}
.hero-navigation button {
  width: min(52px, 12vw);
  aspect-ratio: 1;
  border: 1px solid #fff;
  border-radius: 100vmax;
  position: relative;
  transition: scale var(--transit);pointer-events: auto;
}
.hero-navigation button:hover {
  scale: 1.25;
}
.hero-navigation button::after {
  content: "";
  width: 5px;
  aspect-ratio: 1;
  border: 1px solid;
  border-color: #fff #fff transparent transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  rotate: 45deg;
}
.hero-navigation button.hero-slide-prev::after {
  scale: -1 -1;
  left: calc(50% + 2px);
}
.hero-pagination {
  position: absolute;
  left: min(50px, 4vw) !important;
}
.slide-pagination {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  gap: 10px;
  z-index: 1;
}
.slide-pagination .swiper-pagination-bullet {
  width: 25px;
  height: 2px;
  background: #fff;
  overflow: hidden;
  border-radius: 0;
  opacity: 1;
  transition: width .3s var(--easing);
  margin: 0 !important;
}
.slide-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 50px
}
.slide-pagination .slide-pagination-fill {
  width: 0;
  height: 100%;
  background: var(--main-color);
  position: absolute;
  top: 0;
  left: 0;
}
@keyframes progress-fill {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
.index-hero-wrap {
  width: var(--mainWidth);
  margin-left: auto;
  height: 100%;
  overflow: hidden;
  z-index: 2;
  display: grid;
  -ms-align-items: center;
  align-items: center;
  justify-content: flex-end;
  padding-right: min(50px, 4vw);
}
.hero-title {
  width: min(385px, 50vw);
}
.hero-sns-nav{
  display: none;
  justify-content: flex-end;
  color: var(--main-color);
  gap:10px;
  position: absolute;
  right: min(20px,4vw);
  bottom: min(20px,4vw);
}
.hero-sns-nav a{
  height: min(20px,5vw);
  aspect-ratio:1/.7;
}
.hero-sns-nav a svg{
  object-fit: contain;
  object-position: center;
  height: 100%;
}
/*first anime +++++*/
.index-header, .index-hero::after, #l-nav.index-nav, .index-fix-button, .hero-navigation, .hero-pagination, .hero-title, .l-nav__menu, .l-nav__sns {
  transition: translate var(--transit), opacity var(--transit), bottom var(--transit);
}
.index-header {
  translate: 0 -100%;
}
.index-header.active {
  translate: 0 0;
}
.index-hero::after {
  translate: 100% 0;
}
.index-hero.active::after {
  translate: 0 0;
}
#l-nav.index-nav {
  translate: -100% 0;
}
#l-nav.index-nav.active {
  translate: 0 0;
}
#l-nav.index-nav .l-nav__menu {
  opacity: 0;
  transition-delay: .5s;
}
#l-nav.index-nav .l-nav__sns {
  translate: 0 200%;
  opacity: 0;
  transition-delay: .5s;
}
#l-nav.index-nav.active .l-nav__menu {
  opacity: 1;
}
#l-nav.index-nav.active .l-nav__sns {
  translate: 0 0;
  opacity: 1;
}
.hero-title {
  translate: 50% 0;
  opacity: 0;
}
.index-fix-button {
  opacity: 0;
  translate: 0 -200%;
}
.index-fix-button.active {
  opacity: 1;
  translate: 0 0;
}
.hero-navigation {
  translate: 0 -200%;
}
.index-hero-wrap .hero-pagination {
  bottom: -100px;
}
.hero-navigation.active {
  translate: 0 0;
}
.index-hero-wrap.active .hero-title {
  translate: 0 0;
  opacity: 1;
}
.index-hero-wrap.active .hero-pagination {
  bottom: min(60px, 10vw);
}
.hero-slide::after, #fst-slide p::after {
  content: "";
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: repeat;
  position: absolute;
  left: 0;
  top: 0;
  mix-blend-mode: lighten;
  opacity: 0;
  transition: opacity .6s var(--easing);
}
.hero-slide::after{
  opacity: 1;
}
.cobalt-blue .hero-slide::after{
  background-image: url("/image/tbb_template/megumi_okina/hero-slide/cobalt-blue_pc.png");
}
.raspberry-red .hero-slide::after{
  background-image: url("/image/tbb_template/megumi_okina/hero-slide/raspberry-red_pc.jpg")
}
.lilac .hero-slide::after{
  background-image:url("/image/tbb_template/megumi_okina/hero-slide/lilac_pc.jpg");
}
#fst-slide::after {
  opacity: 0;
}
#fst-slide p::after {
  background-image: url("/image/tbb_template/megumi_okina/hero-slide/wrap_cloudy.png");
}
#hero-slider.active #fst-slide::after {
  opacity: 1;
}
#hero-slider.active #fst-slide p::after {
  opacity: .5;
}
/*index content ++++++++++++++++++++++++*/
.index-contents {
  margin-top: min(150px, 10vw);
  padding-bottom: min(150px, 30vw);
}
.inbox-wrap {
  width: calc(100% - min(95px, 8vw));
  margin-left: auto;
}
.pd_box-wrap{
  width: min(950px, 100%);
  padding-right: min(50px, 4vw);
}
.box-wrap{
  width: min(550px,100%);
}
.box-wrap.mid{
  width: min(748px,100%);
}
.box-wrap.wid{
  width: min(940px,100%);
}
/*index news +++*/
.index-news-blc{
  padding-left: var(--pd-wid);
}
.index-news_box {
  margin-top: min(20px, 6vw);
}
.news-pickup-item {
  background: var(--wall-gry);
  padding: min(20px, 5vw) min(110px, 18vw) min(20px, 5vw) min(20px, 5vw);
}
.inde-news__pickup{
  width: min(950px,100%);
  padding-right: min(50px,4vw);
}
.picup-title {
  font-size: min(40px, calc(100vw/15));
  font-family: var(--fnt-bell);
  position: absolute;
  top: 0;
  right: 0;
  translate: -100% -50%;
  z-index: 1;
  pointer-events: none;
}
.news-pickup-item .ccl-arw-button {
  position: absolute;
  right: min(20px, 4vw);
  top: 50%;
  translate: 0 -50%;
}
.post-data {
  font-family: var(--fnt-avr);
  font-weight: 700;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  GAP: 10px 1em;
  color: var(--clr-gry);
  -ms-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}
.news-pickup-item .post-title {
  line-height: calc(24/14);
  margin-top: 5px;
}
.news-slide-wrap {
  margin-top: min(40px, 8vw);
  overflow: hidden;
}
.news-pagination {
  margin-top: min(20px, 5vw);
}
.news-pagination .swiper-pagination-bullet::after {
  content: "";
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, var(--main-color) 50%, var(--clr-gry) 50%);
  position: absolute;
  left: 0;
  top: 0;
  translate: -50% 0;
  transition: translate var(--transit);
}
.news-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
  translate: 0 0;
}
.news-slide-wrap .news-pagination {
  bottom: 0;
}
.news-slide-item .post-title {
  margin-top: min(15px, 3vw);
  line-height: calc(28/14);
}
.news-slide-item .ccl-arw-button {
  margin-top: 10px;
  margin-left: auto;
}
.index-news_box .link-more {
  margin-top: min(50px, 10vw);
}
/*index member +++*/
.index-members-blc{
  margin-top: min(150px,35vw);
}
.regist-button-set{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap:min(20px,4vw);
  margin-top: min(50px,10vw);
}
.index-members-blc .sec-members_intro{
  margin-top: min(25px,3vw);
}
.sec-members_intro{
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
}
.sec-members_intro .top-text{
  text-align: center;
  margin-top: min(65px,10vw);
}
.sec-members_intro .top-text::before{
  content: "";
  width: 1px;
  height: 20px;
  background: #000;
  position: absolute;
  left: 50%;
  top: max(-32.5px,-5vw);
  translate:-50% -50%;
}
.thumb-slide-wrap{
  width: min(627px,100%);
  margin-top: min(33px,8vw);
}
#thumb-slide .swiper-wrapper{
  transition-timing-function: linear !important;
}
.regist-button-set .link-more{
  width: min(200px, 100%);
}
/*index store*/
.index-store-blc{
  padding-left: var(--pd-wid);
  margin-top: min(130px,35vw);
}
.index-store-box::after{
  content: "";
  width: 100vw;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  z-index: 1;
  translate: -100% 0;
}
.store-slide-wrap{
  padding-top: min(50px,10vw);
}
#store-slider{
  width: min(900px,100%);
}
.store-item .thumb figure{
  width: 100%;
  aspect-ratio:1;
  background: var(--wall-gry);
}
.store-item .thumb figure img{
  object-fit: contain;
  object-position: center;
  height: 100%;
}
.store-item .item-data{
  margin-top: 10px;
}
.store-item .item-data .item-title{
  line-height: calc(21/14);
}
.store-item .item-data .price{
  margin-top: 5px;
  text-align: right;
}
.store-item .ccl-arw-button{
  position: absolute;
  top: 1px;
  right: 10px;
  translate:0 -50%;
}
.store-item .ccl-arw-button p::before{
  transform-origin: top;
}
.index-store-box .link-more{
  margin-top: min(50px, 10vw);
}

/*index photo ++++++++++++++++*/
.index-photo-blc{
  margin-top: min(150px,35vw);
}
.index-photo-box{
  display: grid;
  grid-template-columns: min(745px,100%);
  justify-content: center;
  gap:min(50px,10vw);
}
.index-photo-list{
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap:10px;
  margin-top: min(50px,8vw);
}
.avc-photo-item .data-box{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0,0,0,.65);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition:opacity var(--transit),visibility var(--transit);
}
.avc-photo-item .data-box > div{
  display: grid;
  place-content: space-between;
  padding: min(20px,5vw);
  height: 100%;
}
.avc-photo-item .data-box .in-data{
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  font-family: var(--fnt-avr);
  font-weight: 700;
  color: var(--clr-gry);
}
.avc-photo-item .data-box .in-title{
  line-height: calc(21/14);
}
.avc-photo-item .ccl-arw-button {
  position: absolute;
  right: min(20px,5vw);;
  top: 50%;
  translate:0 -50%;
}
.avc-photo-item .ccl-arw-button > *::before
,.avc-photo-item .ccl-arw-button > * span{
    transition-delay: .25s;
  }
@media(hover){
  .avc-photo-item:hover .data-box{
    opacity: 1;
    visibility: visible;
  }
}

/*index movie ++++++++++*/
.index-movie-blc{
  margin-top: min(235px,30vw);
}
.index-movie-box{
  margin-top: min(50px,10vw);
}
.index-movie_list{
  display: grid;
  grid-template-columns: 60% auto;
  gap:min(10px,4vw);
}
.movie-player-item .thumb
,.movie-thumb-list .thumb{
  background: var(--wall-gry);
  /*aspect-ratio:1/0.5629;*/
}
.movie-player-item .thumb{
  cursor: pointer;
}
.movie-player-item .play-icon{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.65);
  display: grid;
  place-content:center;
  font-family: var(--fnt-avr);
  font-weight: 700;
  color: var(--clr-gry);
  opacity: 0;
  visibility: hidden;
  transition:opacity .3s var(--easing),visibility  .3s var(--easing);
}
.movie-player-item .play-icon p::after{
  content: "";
  width: 400%;
  aspect-ratio:1;
  border: 1px solid currentColor;
  position: absolute;
  left: 50%;
  top: 50%;
  translate:-50% -50%;
  border-radius: 100vmax;
  scale:0;
  opacity: 0;
  transition:scale .3s var(--easing),opacity .3s var(--easing);
  transition-delay: .05s;
}
.movie-player-item .movie-data{
  margin-top: min(20px,3vw);
}
.movie-player-item .movie-data .in-title{
  font-size: min(16px,3.6vw);
  line-height: calc(24/16);
}
.movie-player-item .movie-data .date{
  font-family: var(--fnt-avr);
  font-weight: 700;
  color: var(--clr-gry);
  /*margin-top: 5px;*/
}
.movie-thumb-list{
  display: grid;
  /*grid-template-columns: repeat(2,1fr);*/
  grid-template-columns: auto;
  gap:10px;
}
.index-movie-blc .link-more{
  margin-top: min(50px,10vw);
}
@media(hover){
  .movie-player-item .thumb:hover .play-icon{
    opacity: 1;
    visibility: visible;
  }
  .movie-player-item .thumb:hover .play-icon p::after{
    opacity: 1;
    scale:1;
  }
}

/*index live stream ++++++*/
.index-live-blc{
  padding-left: var(--pd-wid);
  margin-top: min(150px,30vw);
}
.index-live-box {
  margin-top: min(50px,10vw);
}
.live-slide-wrap{
  overflow: hidden;
  padding-bottom: 20px;
}
.swiper-slide.live-item{
  padding: 1px;
} 
.live-item .in-title{
  line-height: calc(28/14);
  margin-top: min(20px,3vw);
}
.live-item .ccl-arw-button{
  margin-left: auto;
  margin-top: 10px;
}
.index-live-box .link-more{
  margin-top: min(30px,7vw);
}

/*index voice ++++++*/
.index-voice-blc{
  margin-top: min(150px,30vw);
}
.index-voice-box{
  margin-top: min(50px,10vw);
}
.index-voice-list{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap:min(30px,7vw) 10px;
}
.index-voice-box .link-more{
  margin-top: min(50px,10vw);
}
.acv-voice-item .thumb{
  aspect-ratio:1/0.4449;
  background: var(--wall-gry);
}
.acv-voice-item .voice-data{
  margin-top: min(20px,3vw);
}
.acv-voice-item .voice-data .in-title{
  font-size: min(16px,3.6vw);
  line-height: calc(28/16);
}
.acv-voice-item .voice-data .post-date{
  font-family: var(--fnt-avr);
  color: var(--clr-gry);
  font-weight: 700;
  font-size: min(13px,3.4vw);
  margin-top: 5px;
}
.acv-voice-item .voice-data .ccl-arw-button{
  margin-left: auto;
  translate:max(-20px,-4vw) 0;
}
/*index content feat ++++++++*/
.index-content-feature{
  margin-top: min(110px,30vw);
}

.content-feature-box{
  margin-top: min(50px,10vw);
}
.contents-feature__list{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap:10px;
}
.feat-list-item{
  border: 1px solid currentColor;
  padding: min(30px,6vw);
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  gap:min(12px,3vw);
}
.feat-list-item.full{
  grid-column: 1 / -1; 
}
.feat-list-item .in_head{
  font-size: min(18px,4.5vw);
  line-height: calc(24/18);
}
.feat-list-item .in_head p.en{
  font-family: var(--fnt-bell);
}
.feat-list-item .comment{
  border-top: 1px solid var(--bdr-gry);
  padding-top: min(12px,3vw);
}
/*footer +++++++++++++++++++++++++++++++++*/
footer {
  background: var(--wall-blk);
  padding-bottom: min(20px,5vw);
}
.footer-inner {
  padding-top: min(88px, 15vw);
  padding-bottom: min(88px, 20vw);
  width: min(940px,100%);
  padding-left: min(50px,4vw);
  padding-right: min(50px,4vw);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: min(230px,34vw) auto;
  gap:min(30px,4vw);
  color: #fff;
  justify-content: space-between;
}
.foot-logo{
  display: grid;
  grid-template-columns: 1fr;
  -ms-align-items: center;
  align-items: center;
}
.foot-nav{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:min(50px,3vw);
  -ms-align-items: flex-start;
  align-items: flex-start;
}
.foot-nav .other-nav{
  font-size: min(12px,3.4vw);
}
.foot-nav > li{
  display: grid;
  grid-template-columns: 1fr;
  gap:15px;
}
.foot-nav > li a{
  transition:opacity .3s var(--easing);
}
@media(hover){
  .foot-nav > li a:hover{
    opacity: .5;
  }
}

p.copy{
  text-align: center;
  font-size: min(12px,3.2vw);
  color: #fff;
  font-family: var(--fnt-bell);
}
.t_error_message{
  background: rgba(0, 0, 0, 0.05);
  padding: 15px;
  margin-bottom: 40px;
  border-radius: 5px;
  color: gray;
}
.grecaptcha-badge{
  display: none;
}



/* new-tag */
.new-tag{
  width: fit-content;
  background: var(--base-bkg);
  position: absolute;
  z-index: 1;
  font-weight: bold;
  padding: 5px 15px;
  right: 10px;
  top: 20px;
  transform: translateY(-50%);
  background: black;
  color: white;
  background-size: 200% 100%;
  animation: newtagbgAnimation 3s infinite linear;
  font-size: 10px;
}
@keyframes newtagbgAnimation {
  0% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

/* ローディング中のアニメーション */
.loading-animetion{
  opacity: 0;
  transition: all 0.5 ease;
  animation: fadeIn 0.5s forwards;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
.loading-animetion.fade-out {
  opacity: 0;
}
.loading-body {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  position: relative;
}
.loading-body.loaded {
  opacity: 1;
}
.loading-animation-body{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  z-index: 1;
}

/* loagind */
.loader {
  height: 80px;
  aspect-ratio: 1;
  padding: 10px;
  border-radius: 50%;
  box-sizing: border-box;
  position: relative;
  mask: conic-gradient(#000 0 0) content-box exclude,conic-gradient(#000 0 0);
  filter: blur(12px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index: 5;
}
.loader:before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(#0000 35%,black,#0000 65%);
  animation: l1 1.5s linear infinite;
}
@keyframes l1 {
  to {rotate: 1turn}
}

.ploading{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.45);

  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000;
}
.ploading p{
  color: #e41414;
  font-weight: bold;
}
.ploader {
  width: 50px;
  margin: 0 auto;
  margin-bottom: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: 
    radial-gradient(farthest-side,#e41414 94%,#0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%,#e41414);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
  animation: l13 1s infinite linear;
}
@keyframes l13{ 
  100%{transform: rotate(1turn)}
}