@charset "utf-8";

/* ----------------------------------- Key Color ----------------------------------- */

:root {
  --color-blue: #4067bf;
}

/* -------------------------- common -------------------------- */

*{
  /* font-family: "Zen Old Mincho", serif; */
  font-family: sans-serif;
  line-height:1;
  letter-spacing: 0;
  box-sizing: border-box;
  list-style:none;
  padding:0;
  margin:0;
}
img{
  display:block;
  max-width:100%;
}
sup{
  font-size:10px;
}
button{
  cursor:pointer;
}

/* -------------------------- fadein, fadeup -------------------------- */

.fadein{
  opacity:0;
  transition:opacity 1s;
}
.fadein.active{
  opacity:1;
}

.fadeup{
  opacity:0;
  transform:translateY(50px);
  transition:opacity 1s, transform 1s;
}
.fadeup.active{
  opacity:1;
  transform:translateY(0);
}

/* -------------------------- ふわふわ揺れるアニメ -------------------------- */

.fluffy_anim{
  animation-name: animFluffy;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.fluffy_anim.ver1{
  animation-duration: 1.2s;
}

@keyframes animFluffy {
  0% {
    transform:translateY(-5%);
  }
  100% {
    transform:translateY(5%);
  }
}

/* -------------------------- ストリームアニメ -------------------------- */

@keyframes textStreamAnim {
  0% {
    transform:translateX(0);
  }
  100% {
    transform:translateX(-100%);
  }
}

/* -------------------------- Loading -------------------------- */

.loading{
  position:fixed;
  z-index:10000;
  top:0;
  left:0;
  display:flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height:100%;
  background-color: #FFF;
}
.loading_in{
  display:flex;
  flex-flow:column nowrap;
  align-items: center;
  gap:5px 0;
}
.loading_logo{
  width:56px;
  animation: loadingLogoAnim 1s ease-in-out infinite alternate;
}
@keyframes loadingLogoAnim {
  0% {
    transform:translateX(-3%) rotate(-3deg);
  }
  100% {
    transform:translateX(3%) rotate(3deg);
  }
}
.loading_text{
  font-family: "futura-pt", sans-serif;
  font-weight:400;
  font-size:14px;
  color:#ee783f;
}
.loading_text > span{
  opacity:0;
}
.loading_text.active > span{
  opacity:1;
}
.loading_text.active > span:nth-child(1){
  transition:opacity 0.1s 0;
}
.loading_text.active > span:nth-child(2){
  transition:opacity 0.1s 0.05s;
}
.loading_text.active > span:nth-child(3){
  transition:opacity 0.1s 0.1s;
}
.loading_text.active > span:nth-child(4){
  transition:opacity 0.1s 0.15s;
}
.loading_text.active > span:nth-child(5){
  transition:opacity 0.1s 0.2s;
}
.loading_text.active > span:nth-child(6){
  transition:opacity 0.1s 0.25s;
}
.loading_text.active > span:nth-child(7){
  transition:opacity 0.1s 0.3s;
}
.loading_text.active > span:nth-child(8){
  transition:opacity 0.1s 0.35s;
}
.loading_text.active > span:nth-child(9){
  transition:opacity 0.1s 0.4s;
}
.loading_text.active > span:nth-child(10){
  transition:opacity 0.1s 0.45s;
}

/* -------------------------- Header -------------------------- */

.header{
  position:fixed;
  z-index:100;
  top:0;
  left:0;
  display:none;
  justify-content: space-between;
  align-items: center;
  width:100%;
  height:50px;
  background-color: rgba(253,228,226,0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition:background-color 0.3s;
  padding:0 10px 0 20px;
}
.header.active{
  background-color: rgba(253,228,226,0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.header_logo{}
.header_logo_a{
  display:block;
}
.header_logo_image{
  display:block;
  width:200px;
}
.header.active .header_logo_image{
  fill:var(--color-blue);
}
.header_right{
  display:flex;
  align-items: center;
  gap:0 10px;
}
.header_instagram{
  display:flex;
  justify-content: center;
  align-items: center;
  width:36px;
  height:36px;
}
.header_instagram_icon{
  width:24px;
}
.header.active .header_instagram_icon{
  stroke:var(--color-blue);
}
.header_menu_btn{
  display:none !important;
  position:relative;
  width:36px;
  height:36px;
  -webkit-appearance: none;
  appearance: none;
  border:none;
  border-radius:0;
  background: none;
}
.header_menu_btn:before,
.header_menu_btn:after{
  content:"";
  position:absolute;
  left:20%;
  width:60%;
  height:2px;
  background-color: #FFF;
}
.header.active .header_menu_btn:before,
.header.active .header_menu_btn:after{
  background-color: var(--color-blue);
}
.header_menu_btn:before{
  top:35%;
}
.header_menu_btn:after{
  bottom:35%;
}

@media (max-width : 768px) {
  .header{
    display:flex;
  }
}

/* -------------------------- PC BG -------------------------- */

.pc_bg{
  position:relative;
  width:100%;
  height:100svh;
  background: url("/img/pc_side_bg.png") no-repeat center center / cover #FFF;
}
.pc_bg_logo{
  position:absolute;
  top:30px;
  left:105px;
  display:block;
  width:241px;
}
.pc_bg_logo_image{
  width:100%;
}
.pc_bg_company{
  position:absolute;
  top:30px;
  right:105px;
  display:block;
  width:70px;
}
.pc_bg_company_image{
  width:100%;
}
.pc_bg_logo_icon{
  position:absolute;
  bottom:30px;
  left:121px;
  display:block;
  width:107px;
}
.pc_bg_debut{
  position:absolute;
  z-index:2;
  top:50%;
  /* right:14.72%; */
  left:70.69%;
  transform:translateY(-50%);
}
.pc_bg_debut_date{
  width:205px;
}
.pc_bg_debut_insta{
  position:absolute;
  top:38px;
  left:50%;
  transform:translateX(-50%);
}
.pc_bg_debut_insta_image{
  width:30px;
}
.pc_bg_stream_text{
  position:absolute;
  top:50%;
  display:flex;
  width:100%;
  transform:translateY(-50%);
  white-space: nowrap;
  overflow:hidden;
}
.pc_bg_stream_text_item{
  flex:0 0 1809px;
  width:1809px;
  max-width:none !important;
  animation: textStreamAnim 30s linear infinite;
  padding-right:50px;
}

@media (max-width : 768px) {
  .pc_bg{
    display:none;
  }
}

/* -------------------------- main -------------------------- */

.main{
  position:absolute;
  z-index:5;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:375px;
  max-height:750px;
  height:calc( 100svh - 50px );
  border-radius:20px;
  overflow:hidden;
}

@media (max-width : 768px) {
  .main{
    position:absolute;
    z-index:5;
    top:0;
    left:0;
    transform:none;
    width:100%;
    height:100svh;
    max-height:none;
    border-radius:0;
    overflow:hidden;
  }
}

/* -------------------------- scroller, spacer -------------------------- */

.scroller{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  overflow:hidden auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scroller::-webkit-scrollbar {
  display: none;
}
.fv_spacer{
  height:100%;
}
.msg_spacer{
  height:100%;
}
.debut_spacer{
  height:100%;
}

/* -------------------------- FV -------------------------- */

.fv{
  position:absolute;
  top:0;
  left:0;
  display:flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height:100%;
  background: url("/img/fv_bg.jpg") no-repeat center bottom / cover transparent;
}
.fv_content{
  margin:0 0 50px;
}
.fv_catch{
  width:168px;
  margin:0 auto 16px;
}
.fv_logo_icon{
  width:66px;
  margin:0 auto;
}

/* -------------------------- Message -------------------------- */

.msg{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: url("/img/msg_bg.jpg") no-repeat center center / cover transparent;
  padding:35% 0 0;
}
.msg_text{
  position:absolute;
  top:17.2%;
  left:50%;
  transform:translateX(-50%);
  width:264px;
}

/* -------------------------- Message -------------------------- */

.debut{
  position:absolute;
  top:0;
  left:0;
  display:flex;
  justify-content: center;
  align-items: flex-end;
  width:100%;
  height:100%;
  background: url("/img/debut_bg.jpg") no-repeat center center / cover transparent;
  padding:0 0 35%;
}
.debut_content{}
.debut_text_01{
  width:121px;
  margin:0 auto 23px;
}
.debut_logo{
  width:274px;
  margin:0 auto 13px;
}
.debut_text_02{
  width:153px;
  margin:0 auto 28px;
}
.debut_date{
  width:188px;
  margin:0 auto;
}

/* -------------------------- Company -------------------------- */

.company_wrap{
  display:flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height:100svh;
}
.company_in{}
.company_title{
  font-family: "futura-pt", sans-serif;
  font-weight:500;
  font-size:32px;
  letter-spacing: 0.08em;
  text-align: center;
  color:#333333;
  margin:0 0 20px;
}
.company_info{}
.company_info_item{
  display:flex;
  border-bottom:1px solid #999999;
  padding:25px 0;
}
.company_info_label{
  width:120px;
  font-weight:400;
  font-size:14px;
  line-height:1.5;
  letter-spacing: 0.1em;
}
.company_info_value{
  flex:1;
  font-weight:400;
  font-size:14px;
  line-height:1.5;
  letter-spacing: 0.1em;
}

@media (max-width : 768px) {
  .company_wrap{
    min-height:100svh;
    height:auto;
  }
  .company_in{
    padding:0 20px;
  }
  .company_info_item{
    padding:20px 0;
  }
  .company_info_label{
    width:120px;
    font-weight:400;
    font-size:14px;
    line-height:1.5;
    letter-spacing: 0.1em;
  }
  .company_info_value{
    flex:1;
    font-weight:400;
    font-size:14px;
    line-height:1.5;
    letter-spacing: 0.1em;
  }
}