@charset "UTF-8";

/*Reset =============================================*/
*{
  box-sizing: border-box;
  background-repeat: no-repeat;
}
html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,figure,figcaption,button{
  margin: 0;
  padding: 0;
}
ul,li{
list-style: none;
}
a{
text-decoration: none;
color: inherit;
}
a[href^="tel:"] {
  pointer-events: all;
}
img,svg{
vertical-align: bottom;
border: none;
width: 100%;
max-width:100%;
height:auto;
}
svg{
  /* fill: currentColor; */
  vertical-align: bottom;
}
button{
  background-color: inherit;
  border: none;
}
table {
  border-collapse: collapse;
}

@font-face {
  font-family: "YakuHanJP"; font-style: normal; font-display: swap;
  font-weight: 400;
  src: url("/font/YakuHanJP/YakuHanJP-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "YakuHanJP"; font-style: normal; font-display: swap;
  font-weight: 500;
  src: url("/font/YakuHanJP/YakuHanJP-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "YakuHanJP"; font-style: normal; font-display: swap;
  font-weight: 600;
  src: url("/font/YakuHanJP/YakuHanJP-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "NotoSansCJKjp"; font-style: normal; font-display: swap;
  font-weight: 400;
  src:  local('Noto Sans CJK JP'),
  local('NotoSansCJKjp-Regular'),
  local('NotoSansJP-Regular'),
  url('/font/NotoSansCJKJP/NotoSansCJKjp-Regular.woff2') format('woff2');
}
@font-face {
  font-family: "NotoSansCJKjp"; font-style: normal; font-display: swap;
  font-weight: 500;
  src: local('NotoSansCJKjp-Medium'),
  local('NotoSansJP-Medium'),
  url('/font/NotoSansCJKJP/NotoSansCJKjp-Medium.woff2') format('woff2');
}
@font-face {
  font-family: "NotoSansCJKjp"; font-style: normal; font-display: swap;
  font-weight: 700;
  src: local('NotoSansCJKjp-Bold'),
  local('NotoSansJP-Bold'),
  url('/font/NotoSansCJKJP/NotoSansCJKjp-Bold.woff2') format('woff2');
}


/* Module =============================================*/
:root{
--font-comp: "Jost","YakuHanJP",'NotoSansCJKjp',sans-serif;
  --font-ja: "YakuHanJP",'NotoSansCJKjp',sans-serif;
  --font-en: "Jost" sans-serif;
    /* --filter-w: invert(99%) sepia(1%) saturate(1685%) hue-rotate(354deg) brightness(115%) contrast(95%); */
    --filter-w: invert(100%) sepia(19%) saturate(377%) hue-rotate(316deg) brightness(100%) contrast(91%);
    --filter-wg: invert(96%) sepia(8%) saturate(14%) hue-rotate(314deg) brightness(86%) contrast(111%);
    --filter-red: invert(33%) sepia(39%) saturate(3362%) hue-rotate(347deg) brightness(84%) contrast(106%);
    --inn-w: 2rem;
    --inn-w-minus: -2rem;
  
    --kv-fill-color: #fff;
  }



html {
    font-size: 3.125vw;
    /*
      計算式：　10(px) / 320(px) * 100 = 3.125
      画面幅320pxの時に "font-size: 10px" 相当になる
    */
}

  .pc{
    display: none;
  }

  .pc-nav {
    display: none;
  }
  
.c_wide{
  max-width:  1600px;
  margin: auto;
}

.sec_bloc{
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.sec_bloc_bottom{
  padding-bottom: 10rem;
}


@media screen and (min-width: 769px) {
  html {
    font-size:  clamp(10px,1.302083333vw,14px);
    /*
      計算式：　10(px) / 320(px) * 100 = 3.125
      画面幅320pxの時に "font-size: 10px" 相当になる
    */
  }

  body {
    font-size: 1.0rem;
  }

  .sec_bloc{
    padding-top: 10rem;
    padding-bottom: 10rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sec_bloc_bottom{
    padding-bottom: 10rem;
  }

  .sp{display: none;}
  .pc{display: block;}
  .pc-nav {display: block;}

}

/*BODY =============================================*/
body{
  font-family: var(--font-comp);
  line-height:1.5;
  position: relative;
  background-color: #fff;
}

@media screen and (min-width: 769px){
  .pc_wide_A{
    padding: 0 0 0 3rem;
  }

  .pc_wide_B{
    padding: 0 0 0 5rem;
  }

  .left_wide{
    padding-left: 10rem;
  }

}

@media screen and (min-width: 1400px){
.left_wide{
    padding-left: 15rem;
  }
}


/* HEADER
========================================= */
.header_color{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  mix-blend-mode: difference;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
}

.header_logo{
  width: 20rem;
  padding: 1rem;
}
.logo
{filter: invert(94%) sepia(57%) saturate(23%) hue-rotate(52deg) brightness(106%) contrast(105%);}

@media screen and (min-width: 769px){
.header_logo {
  width:inherit;
  padding: 2rem 2rem 0 2rem;
}

.header_color {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items:start;
  mix-blend-mode: difference;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
}

.pc_logo{
  width: 20rem;
}

header .accshow{
  position: absolute;
}


}

/* SP BTN ================*/
.nav_btn_block{
  position: fixed;
  right: 0;
  top: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: fit-content;
  height: 6rem;
  z-index: 10;
}
.sp_btn{
  position: fixed;
  top: 0;
  right: 0;
  display: block;
  width: 5rem;
  height: 5rem;
  z-index: 10000;
}

.sp_btn_bar,.sp_btn_bar::before,.sp_btn_bar::after{
  display: block;
  width: 2rem;
  height: .15rem;
  border-bottom: 0.07rem solid currentColor ;
  position: absolute;
  margin: auto;
  transition: background-color .3s , transform .3s , top .3s;
}
.sp_btn_bar{
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 2rem;
  border-bottom: #000 solid .125rem;
}
.sp_btn_bar::before{
  content: "";
  left: 0;
  top: .55em;
  transform-origin: top right;
  border-bottom: #000 solid .2rem;
}
.sp_btn_bar::after{
  content: "";
  top: -.6em;
  left: 0;
  height: 0.1rem;
  transform-origin: bottom right;
}

body.sp_nav_open{
  overflow: hidden;
}
.sp_nav_open .sp_btn{
  filter: var(--filter-w) !important;
}
.sp_nav_open .sp_btn_bar{
  border-color: transparent;
}
.sp_nav_open .sp_btn_bar::before{
  transform: rotate(45deg);
  top: 0.65em;
  border-bottom: #ffffff solid 0.1rem;
}
.sp_nav_open .sp_btn_bar::after{
  transform: rotate(-45deg);
  top: -0.8em;
  border-bottom: #ffffff solid 0.1rem;

}
.sp_nav_open .sp_btn_bar::after,
.sp_nav_open .sp_btn_bar::before{
  left: -0.3em;
}


/* SP NAV MODAL MENU ================*/
.sp_nav_modal{
  position: fixed;
  top: 0;
  right: -100%;
  display: block;
  width: 100%;
  height: 100vh;
  opacity: 0;
  transition: opacity .15s , right .15s;
  color: #fff;
  overflow-y: scroll;
  background-color: #000000ee;
  padding-top: 0.5rem;
  z-index: 1000;
}
.reserve_modal{
  padding: 6rem 0 6rem;
  background-color: var(--color-bg-d);
  z-index: 1;
}
.sp_nav_open .sp_nav_modal{
  right: 0;
  opacity: 1;
}
.reserve_open .reserve_modal{
  right: 0;
  opacity: 1;
}

.sp_nav_open .sp_nav_modal img{
  display: block;
  width: 20rem;
  padding: 1rem;
}

.sp_nav .nav_ul{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10rem 0 5rem 3rem;
  font-size: 1.6rem;
  font-weight: 500;
}

.sp_nav .nav_li{
margin-bottom: 4rem;
}

.sp_nav .underbar{
  width: 300%;
  margin-left: 5%;
  margin-right: 5%;
  padding-bottom: 1rem;
}

.sp_nav .nav_link{
  font-weight: 500;
}


/* SP NAV MODAL MENU  開閉ボタン================*/
.accshow li a{
  width: 100%;
  font-size: .95em;
  padding: 1.2rem 0 1rem 0;
}

.cssacc{
  display: none;
}

.cssacc_label{
  position: relative;
  padding-right: 1rem;
  cursor: pointer;
}

.cssacc_label::before {
  content: "";
  position: absolute;
  top: 0.65rem;
  right: -0.75rem;
  width: 0;
  height: 0;
  border-left: 0.75rem solid transparent;
  border-right: 0.75rem solid transparent;
  border-top: 1rem solid white;
}

/* ボタン開閉リスト */
.accshow {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: opacity 0.8s;
}
.accshow li {
  width: 100%;
  display: flex;
  font-size: 1.6rem;
  text-align: left;
}
.cssacc:checked + label + .accshow {
  height: auto;
  opacity: 1;
  padding-bottom: 1rem;
}
.cssacc:checked + .cssacc_label::before {
  transform: rotateZ(180deg);
}




@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@media screen and (min-width: 769px){
  .header{
    padding: .5rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sp_btn{
    display: none;
  }

  #hamburger{
   display: none;
  }

  .header_logo_box{
    width: 20%;
  }

  .pc_head_brand li {
    text-align: end;
  }

  .pc_head_brand {
    position: fixed;
    right: 17.75rem;
  }

  .accshow li a {
    width: 100%;
    font-size: .75em;
    padding: 1rem 0 0 0;
}

  .nav_li{
    font-size: 1rem;
    padding: 0 1.25rem;
  }
}

@media screen and (min-width: 1200px){
  .header_logo_box{
    width: 200px;
  }

  .header{
    padding: 2rem;
    padding-left: 3rem;
    padding-right: 3rem;
  }

}

/* PC BTN ================*/
@media screen and (min-width: 769px){
 header .nav_ul{
  display: flex;
  justify-content: end;
 }

 header .cssacc_label::before {
  content: "";
  top: 0.35rem;
  right: -.2rem;
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-top: 0.7rem solid rgb(0, 0, 0);
}
}

/* KEY =============================================*/
.main_ttl{
  position: absolute;
  top: 31rem;
  left: 2rem;
  mix-blend-mode: difference;
  color: #fff;
}

.main_ttl h2{
font-size: 3.25rem;
}

.main_ttl p{
  font-size: 1rem;
  line-height: 1.75;
  }

.scroll_bt_txt{
  display: inline-block;
  text-align: center;
  background-color: #ffffff;
  position: relative;
  z-index: 2;
}

.scroll_lineArrow {
  position: relative;
  width: 1rem;
  height: 6rem;
  border-bottom: 1px solid #000;
  /*傾きを調節*/
  transform: skew(0deg,45deg);
  border-right: 1px solid #000;
  /*下線矢印をテキストに合わせてうまい具合にはめる*/
  margin: auto;
  margin-top: -4rem;
  z-index: 1;
}

.key_scroll_box{
  text-align: center;
  padding: 6rem 0 2rem 0;
}


@media screen and (min-width: 769px){
  .main_ttl h2{
    font-size: 5.5vw;
  }
  .main_ttl p{
    font-size: 1.1rem;
    line-height: 1.75;
  }
  .main_ttl{
    left: 4vw;
    top: 26vw;
  }

  .key_scroll_box{
    text-align: center;
    padding: 8rem 0 0 0;
  }

  }


/* ABOUT =============================================*/
.about_ttl{
  width: 65%;
  margin: auto;
}

/* --- テキスト --- */
.on path {
  fill: #000000; /* 1,塗りの色 */
  stroke: #000000; /* 2,線の色 */
  stroke-dasharray: 2000; /* 3,破線の間隔 */
  stroke-dashoffset: 2000; /* 4,破線の開始位置 */
  stroke-width: .5; /* 5,線の太さ */
  animation: handwriting 4s ease-in forwards; /* 6,名前 時間 タイミング 終了後の状態 */
  animation-iteration-count:infinite;
  animation-direction:alternate;
  animation-play-state:running;
}

/* --- アニメーション --- */
@keyframes handwriting {
  0% {
      fill: transparent; /* 1,塗りの色 */
      stroke-dashoffset: 2000; /* 4,破線の開始位置 */
  }
  50% {
      fill: transparent; /* 1,塗りの色 */
  }
  80% {
      fill: #000000; /* 1,塗りの色 */
      stroke-dashoffset: 0; /* 4,破線の開始位置 */
  }
  100% {
    fill: #000000; /* 1,塗りの色 */
    stroke-dashoffset: 0; /* 4,破線の開始位置 */
}
}

.sec_txt{
  font-weight: 500;
  padding: 0 0 2rem 2rem;
}


.bt_box {
  text-align: center;
  padding-top: 4rem;
}

.lineArrow {
  width: 6rem;
  height: 1rem;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
   /*傾きを調節*/
  transform: skew(45deg);
  /*下線矢印をテキストに合わせてうまい具合にはめる*/
  margin: auto;
  margin-top: -.75rem;
}

@media screen and (min-width: 769px){
  .sec_txt{
    font-size: 2rem;
    padding: 0 0 2rem 5rem;
  }

  .about_ttl{
    width: 40%;
    padding-bottom: 2rem
  }
}

/* NEWS =============================================*/
.news_ph{
  padding-bottom: 1rem;
}

.news_date{
  font-size: 1rem;
  color: #666666;
}

.news_academy{
  position: relative;
  top: .975rem;
  display: flex;
  width: .5rem;
  height: .5rem;
  background-color: #db3516;
  border-radius: 50%;
}

.news_school{
  position: relative;
  top: .975rem;
  display: flex;
  width: .5rem;
  height: .5rem;
  background-color: #f77b9f;
  border-radius: 50%;
}

.news_yoga{
  position: relative;
  top: .975rem;
  display: flex;
  width: .5rem;
  height: .5rem;
  background-color: #005a49;
  border-radius: 50%;
}

.news_ballet{
  position: relative;
  top: .975rem;
  display: flex;
  width: .5rem;
  height: .5rem;
  background-color: #82b7c3;
  border-radius: 50%;
}

.news_boxing{
  position: relative;
  top: .975rem;
  display: flex;
  width: .5rem;
  height: .5rem;
  background-color: #222;
  border-radius: 50%;
}

.news_kpop{
  position: relative;
  top: .975rem;
  display: flex;
  width: .5rem;
  height: .5rem;
  background-color: #dcdcdc;
  border-radius: 50%;
}

.news_pilates{
  position: relative;
  top: .975rem;
  display: flex;
  width: .5rem;
  height: .5rem;
  background-color: #d6aeae;
  border-radius: 50%;
}

.news_sado{
  position: relative;
  top: .975rem;
  display: flex;
  width: .5rem;
  height: .5rem;
  background-color: #607f57;
  border-radius: 50%;
}

.news_all{
  position: relative;
  top: .975rem;
  display: flex;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background-color: white;
  border: 0.075rem #000 solid;}

.category_txt{
  position: relative;
  left: .75rem;
}


.news_ttl{
  font-size: 1.2rem;
  font-weight: 400;
}

.news_box{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: auto;
}

.news_cnt{
  width: 48%;
  padding-bottom: 2rem;
}

.news_top_ttl{
  font-size: 1rem;
  font-weight: 500;
}

.news_key_ttl{
  font-weight: 500;
}


.sec_txt_newscnt{
  padding: 8rem 0 0 2rem;
  font-weight: 500;
}

.news_cnt_sec {
  padding-bottom: 10rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.news_cnt_ttl {
  padding: 1rem 0 2rem 0;
  font-size: 1.5rem;
}

.news_cnt_txt{
  font-size: 1rem;
}

.news_cnt_ph {
  padding: 0 0 2rem 0;
}

@media (min-width: 769px){
  .news_cnt{
    width: 33%;
    padding: 0 1rem 4rem 1rem;
  }
  .news_box{
    padding: 2rem 6rem 0 6rem;
    justify-content: start;
  }

  .news_cnt_sec {
    padding-left: 10rem;
    padding-right: 10rem;
    padding-bottom: 14rem;
  }

  .sec_txt_newscnt{
    font-size: 2rem;
    padding: 10rem 0 2rem 5rem;
  }

  .news_cnt_ph {
    padding: 2rem 14rem 4rem 14rem;
  }

  .news_cnt_ttl {
    font-size: 2rem;
  }
  
  .news_cnt_txt{
    font-size: 1.2rem;
  }
}

@media (min-width: 1200px){
.news_cnt_ph {
    padding: 2rem 16rem 4rem 16rem;
}
}

@media (min-width: 1400px){
.news_cnt_sec {
    padding-left: 15rem;
    padding-right: 15rem;
}
}

/* pager
------------------------------------------- */
.pager{
  display:block;
  font-size: 10px;
  padding: 2em 0;
  margin:0 auto;
  color:#AAAAAA;
  text-align:center;
}
/* sp版数字非表示 */
.pager .num .link_page{
  display: none;
}
.pager .num{
  font-size: 0;
}
.pager_link_box {
  display: inline-block;
  width: fit-content;
}
.pager .link_page,
.pager .current_page,
.pager_link_box a{
  color:#AAAAAA;
  display:inline-block;
  border:1px solid var(--color-grey);
  font-size: 1.2rem;
  line-height: 3.2rem;
  width: 3.2rem;
  margin:.4em .2em;
  border-radius: .1em;
}
.pager .current_page{
  font-weight: 500;
  background-color: var(--color-black4);
  border:1px solid var(--color-black4);
}
.pager .num a:hover{
  background-color:#AAAAAA;
  border:1px solid #AAAAAA;
  color:#FFFFFF;
}
.pager_link_box .link_next {
  margin-left: 0.35em;
}
@media (min-width: 769px){
  .pager .num .link_page{
    display: inline-block;
  }
  .pager_link_box .link_next {
    margin-left: 0.25em;
  }
}

/* BRAND =============================================*/
.brand_ico{
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 6rem;
  filter: invert(94%) sepia(57%) saturate(23%) hue-rotate(52deg) brightness(106%) contrast(105%);
}

.brand_txt_box{
  position: absolute;
  bottom: 11%;
  color: white;
}

.brand_ttl{
  font-size: 5.8rem;
  font-weight: 500;
  padding: 1rem 2rem 0 2rem;
  line-height: 1;
}

.brand_txt{
  padding: 1rem 2rem 1rem 2rem;
}

/* #slider_brand-list{
  background-color: #000000;
  display: flex;
  flex-direction: row-reverse;
} */

.brand_ph{
  object-fit: cover;
  aspect-ratio: 16/25;
}

@media screen and (min-width: 769px){
  .brand_ph{
    position: relative;
    width: 100%;
    max-width: 40rem;
    left: 0;  
    /* border-radius: .5rem .5rem .5rem .5rem; */
    aspect-ratio: 4/3;
  }

  .brand_txt_box{
    color: #000;
    top: 20%;
  }

  .brand_txt{
    width: 21rem;
    padding: 1rem 2rem 1rem 0;
    left: 42rem;
    bottom: -5rem;
    position: relative;
  }

  .brand_ttl{
    font-size: 5.8rem;
    line-height: 1;
    position: absolute;
    top: 5rem;
    left: -1rem;
    white-space: nowrap;
    color: white;
  }

  .pc_more_btn{
    border: solid 1px #000;
    padding: 1.5rem 2rem 1.5rem 2rem;
    /* border-radius: .5rem; */
    text-align: center;
  }

  .pc_brand_btn{
    padding: 2rem 0 1rem 0;
  }

  .brand_ico{
    top: 4rem;
    left: 42rem;
    height: 6rem;
    filter: none;
  }

  .brand_ico_ballet_pc{
    height: 8rem;
  }
}

@media screen and (min-width: 1200px){
  .brand_ttl{
    font-size: 7rem;
    top: 7.5rem;
  }
  .brand_ph{
    max-width: 50rem;
  }
  .brand_txt{
    left: 52rem;
    bottom: -10rem;
  }
  .brand_ico {
    top: 11rem;
    left: 52rem;
}
}
@media screen and (min-width: 1600px){
  .brand_ph {
    max-width: 60rem;
  }
  .brand_ttl {
    font-size: 8.5rem;
    top: 8.5rem;
  }
  .brand_ico {
    top: 17rem;
    left: 64rem;
  }
  .brand_txt {
    left: 64rem;
    bottom: -15rem;
  }
}

/* WORKS =============================================*/
.top_brandwrap ul {
  margin: 1em 2rem 0;
}

.top_brandwrap li {
  margin-bottom: 2em;
}

.brandimage {
  position: relative;
  background-color: black;
  display: inline-block;
}

.worksbrand_logo{
  width: 55%;
  height: fit-content;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;
}

.works-logo {
  filter: invert(94%) sepia(57%) saturate(23%) hue-rotate(52deg) brightness(106%) contrast(105%);
}

.works-txt {
  font-size: 1.2em;
  font-weight: 300;
  color: #fff;
  padding: 0.5em 0;
  text-align: center;
  line-height: 1.2em;
}

.brand-img {
  opacity: .6;
}

@media screen and (min-width: 769px){
.top_brandwrap ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 1em 0 0;
}

.top_brandwrap li {
  width: 32%;
  margin-bottom: 1.5em;
}

}

@media screen and (min-width: 960px){
  /* .brandwrap {
    padding: 3em;
} */

.top_brandwrap ul {
  padding-bottom: 10rem;
}


}

/* RECRUIT =============================================*/
.recruit_box{
  display: flex;
  align-items: center;
  position: relative;
  overflow:hidden;
}
/* 
.recruit_box:hover{
  opacity: .5;
} */

/* .recruit_box:hover{
  transform:scale(1.05);
	transition:0.3s;
} */

.recruit_txt{
  position: absolute;
  left: 2rem;
  color: #fff;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.6rem;
}

.recruit_txt_small{
  font-size: 1.5rem;
}

.zoom-box {
  display: inline-block;
  overflow: hidden;
}
.c-bnr.zoom {
  transition-duration: .5s;
}
.c-bnr.zoom:hover {
  transform: scale(1.1);
}

.arrow_circle {
  position: absolute;
  background-color:white;
  width: 3.2em;
  height: 3.2em;
  border-radius: 50%;
  overflow: hidden;
  right: 2rem;
  transform: translateY(-35%);
  top: 40%;
}

.arrow_circle::before {
  content: "";
  position: absolute;
  width: 1rem;
  height: 0.5rem;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  transform: skew(45deg);
  margin: auto;
  margin-top: 1.25rem;
  margin-left: 0.75rem;
}

  .border_line{
    position: relative;
  }
  
  .border_line:before{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    border-bottom: solid 1px #000;
    animation: border_anim 10s linear forwards;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-play-state:running;
  }

  .border_bloc{
    padding: 6rem 0 3rem 0;
  }
  
  @keyframes border_anim {
    0%{
      width: 0%;
    }
    100%{
      width: 100%;
    }
  }

  @media screen and (min-width: 769px){
    .recruit_txt{
      left: 4rem;
      font-size: 2.6rem;
      line-height: 2rem;
    }

    .arrow_circle {
      right: 5rem;
      width: 5em;
      height: 5em;
      top: 35%;
    }
    .arrow_circle::before {
      width: 1.75rem;
      height: 0.75rem;
      margin-top: 2rem;
      margin-left: 1.25rem;
  }

  .recruit_sec{
    display: flex;
    justify-content: center;
  }
  }

/* FOOTER =============================================*/
.footer_logo{
  width: 22rem;
}

.brand_logo_box{
  display: flex;
  align-items: center;
  width: 80%;
}

.brand_logo{
  padding-right: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.footer_nav{
  padding: 0 0 4rem 0;
}

.footer_nav .nav_li{
  font-weight: 500;
  font-size: 1.6rem;
  padding-bottom: 1rem;
}

.footer_nav .cssacc_label::before{
  border-top: 1rem solid black;
}

@media screen and (min-width: 769px){
  .footer_logo{
    width: 30rem;
  }

  .footer_nav{
    padding: 2rem 0 4rem 0;
  }

  .brand_logo_box{
    width: 100%;
    max-width: 40rem;
    padding: 1rem 0 0 0;
  }

  .brand_logo{
    padding-right: 2rem;
  }

  .pc_footer_sec_bloc{
    padding-left: 6rem;
    padding-right: 2rem;
  }
}


/*ABOUT =============================================*/
.about_top_ttl{
  width: 20rem;
  filter: invert(94%) sepia(57%) saturate(23%) hue-rotate(52deg) brightness(106%) contrast(105%);
  mix-blend-mode: difference;
  position: absolute;
  top: 15rem;
  left: 6rem;
}

.about_top_txt{
  font-weight: 500;
  font-size: 0.9rem;
  display: flex;
  justify-content: center;
  padding: 8rem 0 6.5rem 0;
  position: relative;
  z-index: 1;
  line-height: 2;
}

.about_txt_box{
  padding: 0 2rem 3rem 2rem;
}

.about_midasi{
  font-size: 1.2rem;
  padding-bottom: .5rem;
}

.about_txt{
  font-size: 0.9rem;
}

.about_sec_bloc{
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.about_deco{
  position: relative;
}

.about_deco_1 {
  position: absolute;
  top: -80vw;
  left: 0;
  display: flex;
  overflow: hidden;
  width: 100vw;
}
.about_deco_1 img {
  padding-left: 4vw;
  animation: infinity-scroll-left 15s infinite linear 0.5s both;
}

.about_deco_2 {
  position: absolute;
  top: -70vw;
  left: 0;
  display: flex;
  overflow: hidden;
  width: 100vw;
}
.about_deco_2 img {
  padding-left: 4vw;
  animation: infinity-scroll-left 10s infinite linear 0.5s both;
}

.about_deco_3 {
  transform-origin: left bottom;
  position: absolute;
  top: -60vw;
  left: 0;
  display: flex;
  overflow: hidden;
  width: 100vw;
}
.about_deco_3 img {
  padding-left: 4vw;
  animation: infinity-scroll-left 18s infinite linear 0.5s both;
}

.about_deco_4 {
  position: absolute;
  top: -50vw;
  left: 0;
  display: flex;
  overflow: hidden;
  width: 100vw;
}
.about_deco_4 img {
  padding-left: 4vw;
  animation: infinity-scroll-left 14s infinite linear 0.5s both;
}

.about_deco_5 {
  position: absolute;
  top: -40vw;
  left: 0;
  display: flex;
  overflow: hidden;
  width: 100vw;
}
.about_deco_5 img {
  padding-left: 4vw;
  animation: infinity-scroll-left 20s infinite linear 0.5s both;
}
.about_deco_6 {
  position: absolute;
  top: -30vw;
  left: 0;
  display: flex;
  overflow: hidden;
  width: 100vw;
}
.about_deco_6 img {
  padding-left: 4vw;
  animation: infinity-scroll-left 16s infinite linear 0.5s both;
}

.about_right_box{
  position: relative;
  transform-origin: right top;
  transform: rotate(90deg);
}

.about_right_txt{
  position: absolute;
  top: 0rem;
  left: -1.5rem;
  z-index: -10;
  display: inline-block;
  font-size: 2.5rem;
  color: #ffffff;
  text-shadow: 0.75px 0.75px 0 #d9d9d9, -0.75px -0.75px 0 #d9d9d9, -0.75px 0.75px 0 #d9d9d9, 0.75px -0.75px 0 #d9d9d9, 0px 0.75px 0 #d9d9d9, 0 -0.75px 0 #d9d9d9, -0.75px 0 0 #d9d9d9, 0.75px 0 0 #d9d9d9;
  line-height: 0.8;
  overflow: hidden;
}

@media screen and (min-width: 769px){
.about_sec_bloc{
  padding: 12vw 0 12vw 0;
}

  .about_deco_1 {
    top:-50vw;
  }
  .about_deco_1 img {
    width: 80vw;
  }
  .about_deco_2 {
    top:-44vw;
  }
  .about_deco_2 img {
    width: 80vw;
  }
  .about_deco_3 {
    top:-38vw;
  }
  .about_deco_3 img {
    width: 80vw;
  }
  .about_deco_4 {
    top:-32vw;
  }
  .about_deco_4 img {
    width: 80vw;
  }
  .about_deco_5 {
    top:-26vw;
  }
  .about_deco_5 img {
    width: 80vw;
  }
  .about_deco_6 {
    top:-20vw;
  }
  .about_deco_6 img {
    width: 80vw;
  }

  .about_top_txt {
    font-size: 1.8vw;
    padding: 10vw 0 8vw 0;
}

.about_top_ttl{
  width: 30vw;
  top: 18vw;
  left: 35vw;
}

.about_txt_box {
  padding: 2rem 2rem 3rem 0;
}

.about_midasi{
  font-size: 1.5rem;
  padding-bottom: 1rem;
}

.about_txt{
  font-size: 1.3rem;
}

.about_right_box{
  position: relative;
  transform-origin: left top;
  transform: rotate(0deg);
}

.about_right_txt{
  top: -6.15em;
  right: 0;
  font-size: 7.5em;
  text-shadow: 1px 1px 0 #d9d9d9, -1px -1px 0 #d9d9d9, -1px 1px 0 #d9d9d9, 1px -1px 0 #d9d9d9, 0px 1px 0 #d9d9d9, 0 -1px 0 #d9d9d9, -1px 0 0 #d9d9d9, 1px 0 0 #d9d9d9;
  line-height: 1.2;
  overflow: hidden;
  text-align: end;
}

.about_txt_box {
  position: relative;
  z-index: 10;
}

.about_left_box{
  position: relative;
}

.about_company_ph{
  max-width: 600px;
}
}


/*COMPANY =============================================*/
.company_box{
  background-color: #d9d9d9;
  width: 100%;
  height: 32rem;
}

.company_box h2{
  font-weight: 500;
}

.company_ph{
  width: 60%;
  padding-top: 4rem;
  margin: auto;
}

.inner_sec_bloc{
  padding: 2rem;
}

.company_box .bt_box{
  padding-top: 2rem;
}

.company_sec_ttl {
    font-size: 1rem;
    padding: 2em 0;
}

.company_sec_ttl .en {
    font-size: 3.8em;
    font-weight: 500;
}

.company_sec_ttl .ja {
    display: block;
    font-size: 1.2em;
    font-weight: 500;
    line-height: 1.7;
}

.company-info {
    font-size: 1.2em;
    margin: 0 0 6rem 0;}

.company-info dl {
    width: 100%;
    border-bottom: 1px dotted #CCCCCC;
    padding: 1.2em 0;
}

.company-info dt {
    font-size: .9em;
    margin-bottom: 0.6em;
    color: #666666;
}

@media screen and (min-width: 769px){
.company_box h2 {
  font-size: 2rem;
}

.company_info_bloc{
  display: flex;
  align-items: end;
}

.company_info_box{
 width: 17rem;
}

.company_ph{
  width: 40vw;
  padding-top: 4vw;
  margin-left: 5rem;
}

.inner_sec_bloc {
  padding: 2rem 0 2rem 0;
}

.company_box{
  height: 64vw;
  padding-top: 4vw;
}

.company_info_txt{
  width: 21rem;
  padding: 1rem 2rem 0 0;
}

.company_info_txt .pc_brand_btn{
  padding: 2rem 0 0 0;
}

.compny_info_midasi{
  font-size: 1rem;
  font-weight: 500;
}

.company_info_ttl{
  font-size: 1.2rem;
  font-weight: 500;
}

.company_box .bt_box {
  text-align: left;
}

.company_lineArrow{
  width: 12rem;
  height: 1rem;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  transform: skew(45deg);
  margin-top: -1.55rem;
  margin-left: 4.5rem;
}

.company_bt_txt{
  font-size: 1.5rem;
}

.company-info {
  font-size: 1.4em;
  margin: 3em 0 6rem 0;
}

.company-info dl {
    border-bottom: 1px dotted #CCCCCC;
}

.company-info dt {
    font-weight: bold;
    margin-bottom: 0em;
    float: left;
    width: 18%;
}

.company-info dd {
    text-align: left;
}

.company_sec_bloc{
  padding: 6rem;
}

}

@media (min-width: 960px){
.company_sec_ttl {
    font-size: 1.2rem;
}
}

/*privacy =============================================*/
.privacy_sec_ttl .en {
  font-size: 3rem;
  font-weight: 500;}

.privacy_sec_ttl .ja {
  display: block;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1;
  padding-bottom: 2rem;
}

.privacy_sec_bloc{
  padding-top: 10rem;
  padding-bottom: 10rem;
}

.privacy-box {
  margin: 2em 0;
}

.privacy-box p {
  margin: 0.5em 0;
}

.privacy-box .ttl {
  font-weight: bold;
  margin: 1em 0 0.5em;
}

@media screen and (min-width: 769px){
  .privacy_sec_bloc{
  padding-left: 10rem;
  padding-right: 10rem;
  }
}