@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{
  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');
}

/* font-size =============================================*/
html{
  /* font-size: 10px; */
  font-size: clamp(10px,3.125vw,16px);
}
@media (min-width: 769px) {
  html{
    /* W768:10px */
    font-size: 1.302083333vw;
  }
} /* 769 */
@media (min-width: 960px) {
  html{
    /* W960:10 */
    font-size: clamp(10px,1.041666vw,14px);
  }
}/* 960 */

/* lazyload ================================= */
.lazyload{opacity: 0;}
.lazyloaded, .lazyloading  {opacity: 1; transition: opacity 1000ms;}

/* Module =============================================*/
:root {
  --color-black: #171D5D;
  --color-black2: #a3a39b;
  --color-grey: #8c8e9d;
  --color-grey2: #a7a192;
  --color-grey3: #564a41;
  --color-white: #fdfdfd;
  --color-red: #cd2617;
  --color-blue: #a7bec3;
  --font-comp: "Roboto","YakuHanJP",'NotoSansCJKjp',sans-serif;
  --font-ja: "YakuHanJP","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  --font-en: "YakuHanJP","anisette-petite", sans-serif;
  --filter-w: invert(100%) sepia(98%) saturate(8%) hue-rotate(236deg) brightness(105%) contrast(98%);
  --filter-b: invert(11%) sepia(59%) saturate(2489%) hue-rotate(224deg) brightness(94%) contrast(104%);
  --filter-wg: invert(96%) sepia(8%) saturate(14%) hue-rotate(314deg) brightness(86%) contrast(111%);
  --filter-r: invert(21%) sepia(61%) saturate(2741%) hue-rotate(346deg) brightness(105%) contrast(90%);
  --inn-w: 2rem;
  --inn-w-minus: -2rem;

  --kv-fill-color: #fff;
}
.pc,.pc960{display: none;}

.center{ text-align: center;}
.left-center{ text-align: left;}
.center-left{ text-align: center;}
.left{ text-align: left;}

.comp{ font-family: var(--font-comp);}
.en{ font-family: var(--font-en);}
.ja{ font-family: var(--font-ja);}
.min{ font-family: var(--font-min); letter-spacing: 0.08em;}
.mont {
  font-family: 'Montserrat', sans-serif;
}
.red{ color: var(--color-red);}
.w_600{font-weight: 600 !important;}
.w_500{font-weight: 500 !important;}
.w_400{font-weight: 400 !important;}
.small{font-size: .9em;}
.small2{font-size: .8em;}

.asterisk{
  position: relative;
  display: block;
  padding-left: 1.2em;
  margin-top: 0.2em;
}
.asterisk::before{
  content: "※";
  position: absolute;
  left: 0;
}
.hov a,.hover,.r-over,button{
  transition: opacity .5s;
}
.hov a:hover,.hover:hover,.r-over:hover,button:hover{
  opacity: .6;
}
[v-cloak] {
  display: none;
}
.youtube_box{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube_box iframe{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
@media (min-width: 769px) {
  :root {
    --inn-w: 3rem;
    --inn-w-minus: -3rem;
  }
  .sp{display: none;}
  .pc{display: block;}

  .left-center{ text-align: center;}
  .center-left{ text-align: left;}
} /* 769 */
@media (min-width: 960px) {  
  :root {
    --inn-w: 6rem;
    --inn-w-minus: -6rem;
  }
  .pc960{display: block;}
  .sp960{display: none;}
}/* 960 */
@media (min-width: 1400px) {
  :root {
    --inn-w: 8rem;
    --inn-w-minus: -8rem;
  }
}/* 1400 */

/* BODY  
============================================*/
.body{
  line-height:1.5;
  position: relative;
  color: var(--color-black);
  background-image: url(/churros/imgs/top_bg.jpg);
  /* background-size: cover; */
  background-size: contain;
  background-repeat: repeat-y;
}
.body::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -100;
  width: 100%;
  height: 100%;
  transition: background-color 1s;
}

.header_w ._icon_w,
.reverse .header ._icon_w{
  filter: none;
}
.header_w ._icon_b,
.reverse .header ._icon_b{
  filter: var(--filter-w);
}
.header_logo {
  filter: var(--filter-r);
  display: none;
}
.reverse .header_logo {
  filter: var(--filter-w);
  width: 150%;
}

@media (min-width: 769px) {
}

@media (min-width: 960px) {
}/*  */

 /* SECTION  
========================================= */
.sec_bloc{
  padding: 4em 0;
  /* max-width: 1300px; */
  margin: 0 auto;
}
._top0{ padding-top: 0 !important;}
._bottom0{ padding-bottom: 0 !important;}
._top_w{ padding-top: 6em;}
._bottom_w{ padding-bottom: 6em;}
.c_wide{
    max-width: 1100px;
    margin: 0 auto;
    /* padding: 0 var(--inn-w); */
}
/* .c_wide_narrow{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--inn-w);
} */
/* .c_inner{
  padding: 0 var(--inn-w);
} */
.section_ttl{
	font-weight: 300;
	font-size: 5rem;
	text-align: center;
	line-height: 1.3;
	padding: .3em 0;
}
.section_ttl span, .studio_flex span,.studio_type h2 span{
	display: block;
  font-size: .3em !important;
}
.sec-ttl{
  font-weight: unset;
  font-size: 3.8em;
  text-align: left;
  line-height: 0.8em;
  letter-spacing: 1.5px;
  padding: .3em 0;
}
.sec-ttl span{
  display: block;
  font-size: .3em;
  letter-spacing: .2em;
}
.sec-ttl2 {
  text-align: center;
  padding: 0 0 1em;
  font-size: 2em;
  font-weight: unset;
  /* color: var(--color-grey3); */
}
.sec_bloc.pa_top_none {
  padding: 0 0 5em;
}
.sec_ttl_en {
  font-weight: bold;
  color: var(--color-red);
}
.sec_ttl_ja {
  font-size: 1.5em;
  color: var(--color-red);
  font-weight: 400;
}

@media (min-width: 769px) {

 .ja-each {
    display: block;
    position: absolute;
    top: 14.6em;
    font-size: 1.3em;
  }
  .c_wide{
    margin: 0 auto;
    padding: 0 var(--inn-w);
  }
  .c_inner{
    padding: 0 var(--inn-w);
  }
  .ja-min {
    font-size: 1.3vw;
  }
  .sec_bloc.pa_none {
    padding: 8em 0 0;
  }
  .sec_bloc.content {
    padding: 12em 0 10em;
    max-width: 80%;
    margin: 0 auto;
  }
  .sec_ttl_en {
    padding: 1.5em 0;
    font-size: 1.5em;
    font-weight: bold;
  }
} /* 769 */

@media (min-width: 960px) {
  .ja-each{
    font-size: 1.4em;
  }
  .c_wide{
    margin: 0 auto;
    /* padding: 0 10em; */
  }
  .ja-min {
    font-size: 1.2vw;
  }

} /* 960 */
@media (min-width: 1100px) {
  .wide_line{
    width: 1100px;
    border-left: solid 2px var(--color-red);
    border-right: solid 2px var(--color-red);
  }
}


/* HEADER  ========================================= */
.pc_gnav{
  display: none;
}
.header{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100%;
}
.header_w .header,
.bg_black .header,
.reverse .header {
  color: var(--color-white);
}
.header_inner{
  display: flex;
  justify-content: space-between;
  padding: 1.5rem 1em;
  height: 7rem;
}
.header_logo_box{
  display: block;
  height: 100%;
  max-width: 9em;
  padding-left: 0.5em;
}
.header_logo_box a{
  display: block;
  height: 100%;
}
.header_logo{
  height: 50%;
  width: auto;
  transition: filter .2s;
}
._panel_open .header_logo {
  filter: var(--filter-b);
}
._tel_open .header_logo{
  filter: var(--filter-w);
}

@media (min-width: 769px) {
  .header_w .header{
    color: var(--color-black);
  }
  .header_logo_box {
    padding: 1.7rem 0;
    max-width: 8em;
  }
} /* 769 */

@media (min-width: 960px) {
  .header_logo_box {
    max-width: 10em;
  }
} /* 960 */

/* SP BUTTON================================= */
.sp_btn{
  display: flex;
  justify-content: space-between;
}
.tel_btn,.panel_btn{
  display: block; 
  position: relative;
  width: 7rem;
  height: 3rem;
  /* color:var(--color-white); */
}
._tel_open .panel_btn{
  color: var(--color-white);
}

.sec-evt-btn.pa-bottom {
  padding-bottom: 2.5em;
}

/* Panel Button ================================= */
.panel_btn_icon,.panel_btn_icon:before, .panel_btn_icon:after { 
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 4rem;
  height: 1.2px;
  margin: auto;
  background-color: currentColor;
  transition: transform .3s , background-color .3s;
}
.panel_btn_icon:before, .panel_btn_icon:after {
  content: "";
  transition: transform .3s; 
}
/* .panel_btn_icon:before { 
  margin-top: -0.8rem; 
  transform-origin: right top;
} */
.panel_btn_icon:after { 
  margin-top: 0.8rem; 
  transform-origin: right  bottom;
}

._panel_open .panel_btn_icon{ 
  background: transparent; 
}
._panel_open .panel_btn_icon:before {
  transform: rotate(-20deg); 
  -webkit-transform: rotate(-20deg); 
  color: var(--color-black);
}
._panel_open .panel_btn_icon:after { 
  transform: rotate(-20deg); 
  -webkit-transform: rotate(20deg); 
  color: var(--color-black);
}

/* 開閉メニュー 共通================================= */
.sp_tel_bloc,.sp_menu_bloc{
  position: absolute;
  top:0;
  right: -100%;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 10rem 0 6rem;
  box-sizing: border-box;
  /* border-bottom: solid 0px #ccc; */
  -webkit-overflow-scrolling:touch;
  overflow-y: scroll;
  z-index: -1;
  background-color: #f8f8f8;
  /* background-color: rgba(22, 22, 19, .95); */
  color: var(--color-black);
  opacity: 0;
  transition: .4s , opacity .5s;
  transition-timing-function: cubic-bezier(0.52, -0.03, 0.47, 1.06);
}
._tel_open .sp_tel_bloc,
._panel_open .sp_menu_bloc{
  opacity: 1;
  right:0;
}

/* SP NAV MENU 
================================= */
.sp_menu_main{
  padding: 1em  2em;
}
.sp_menu_main li{
  position: relative;
  width: 100%;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-align: left;
  border-top: 1px solid var(--color-black3);
}
.sp_menu_main>li:last-child{
  border-bottom: 1px solid var(--color-black3);
}
/* .sp_menu_main>li>a::before {
  content: "＞";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: fit-content;
  font-size: .8em;
  font-weight: 700;
} */
.sp_menu_main>li:first-child{
  border-top: none;
}
.sp_menu_main li>a,.cssacc_label {
  display: block;
  padding: 1.7rem 0;
  font-weight: 500;
}

@media (min-width: 769px) {
.header_inner {
      padding: 0 2.5rem 0 ;
      height: 5em;
      /* background-color: #767171; */
    }
    .sp_btn, .sp_menu_bloc,
    .header::after, ._panel_open .header::after {
      display: none !important;
    }
    .pc_gnav{
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

  .pc_gnav_main{
    display: flex;
    align-items: center;
    height: 100%;
  }
  
  .pc_gnav_main_li{
    height: 100%;
  }

  .pc_gnav_main_li>a{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 1.8em 1.2em 1em;
  }
  .pc_gnav_main_li>a .en{
    display: block;
    font-weight: 500;
    line-height: 1.1;
  }
  .pc_gnav_main_li>a .ja{
    display: block;
    transform: scale(.8);
    transform-origin: left center;
  }
} /* 769 */

@media (min-width: 769px) {
  .pc_gnav_main_li>a {
    font-size: 1.1em;
  }
  .header_inner {
    height: 8em;
  }
  
} /* 960 */

/* ボタン 共通================================= */
.comm-btn {
  letter-spacing: .2em;
  text-align: center;
  padding: 3em 0 1.2em;
}
.btn {
  border: 0.8px solid;
  padding: 1.2em 3em;
}

/* FOOTER
============================================= */
.foot-logo {
  display: block;
  width: 6em;
  text-align: center;
  margin: auto;
  /* padding: 0 0 2em; */
  filter: var(--filter-b);
}	
.sec-foot{
  background-color: var(--color-red);
  color: #fff;
  text-align: center;
  z-index: 100;
}
.foot-txt {
  text-align: left;
  font-size: 1.1em;
  line-height: 1.8em;
  letter-spacing: .1em;
  padding: 3em 0 4em;

}
.related-logo-box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}
.related-logo {
  width: 31%;
  filter: var(--filter-w);
}
.related-txt {
  font-size: 1.2em;
  font-weight: bold;
  letter-spacing: .1em;
}
.related-logo-box {
  padding: 1em 0 3em;
}
.company {
  font-size: 1em;
  padding: 0 0 1em;
}
.copyrights {
  font-size: 1em;
}

@media (min-width: 769px) {
  .related-logo {
    width: 16%;
    /* filter: var(--filter-b); */
  }
} /* 769 */


/* TOP KV
============================================= */
.sec_topkv_bloc {
  background-color: var(--color-red);
}
.sec_topkv_box {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
}
.kv_img_box{
  width: 85%;
  margin: 0 auto;
}
.kv_logo {
  width: 100%;
  filter: var(--filter-w);
  padding: 0 0 2em;
}
.kv_ttl_box{
  position: absolute;
  top: 28%;
  left: 5%;
  z-index: 10000;
  width: 36%;
}
.kv_ttl_1,.kv_ttl_2 {
  font-size: 2em;
  color: var(--color-red);
}
.kv_ttl_1::before {
  content: "";
  position: absolute;
  background-color: var(--color-white);
  padding: 3.6em 0.7em;
  z-index: -1;
}
.kv_ttl_2::before {
  content: "";
  position: absolute;
  background-color: var(--color-white);
  padding: 3.2em 0.7em;
  z-index: -1;
}

/*文字回転 アニメーション*/
.scroll_txt_box {
  width: 28%;
  filter: var(--filter-w);
  animation: 10s linear infinite rotation1;
  position: absolute;
  right: 3%;
  bottom: 0;
}
@keyframes rotation1{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
@keyframes rotation2{
  0%{ transform:rotateX(0);}
  100%{ transform:rotateX(360deg); }
}
@keyframes rotation3{
  0%{ transform:rotateY(0);}
  100%{ transform:rotateY(360deg); }
}

@media (min-width: 769px) {
  
  .kv_img_box{
    width: 100%;
    padding: 3em 0 0;
  }
  .kv_logo {
    display: none;
  }
  .scroll_txt_box{
    width: 12%;
    right: 25%;
  }
  .kv_ttl_box{
    top: 30%;
    left: 24%;
    width: 17%;
  }
}


@media (min-width: 960px) {
}

/* MENU
============================================= */
.menu_splide_li {
  padding: 5em 0 2em;
}
.menu_ttl{
  display: block;
  color: var(--color-black);
  font-weight: 500;
  font-size: 2.3rem;
  text-align: center;
  padding: 1.5em 0 1em;
}
.menu_ttl_type{
  display: block;
  color: var(--color-red);
  font-weight: bold;
  font-size: .5em;
}
.menu_txt_ja {
  border-top: solid 1px var(--color-black);
  padding: 1em 0;
}
.menu_ttl_yen{
  display: block;
  font-size: .8em;
}
.splide__pagination__page.is-active {
  background: var(--color-black);
}

/* SHOP
============================================= */
.shop_sec_bloc  {
  position: relative;
}
.shop_sec_wrp {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  /* width: 100%; */
}
.shop_box {
  height: 480px;
}
.shop_box_img {
  position: absolute;
  width: 100%;
  z-index: -1;
  right: 0%;
}
.menu_txt_box,
.shop_txt_box {
  padding: 0 2em;
}
.shop_box_ul {
  font-size: 1.2em;
  padding: 2em 0;
}
.shop_box_li {
  display: flex;
  justify-content: space-between;
  padding: 1em 0;
  border-bottom: solid 1px var(--color-grey);
}
.shop_box_li:first-child{
  border-top: solid 1px var(--color-grey);
}
.shop_ttl {
  width: 10%;
  color: var(--color-red);
}
.shop_txt {
  width: 80%;
}
.shop_sns_logo  {
  filter: var(--filter-b);
  width: 10%;
}

@media (min-width: 769px) {
  .shop_sec_wrp {
    display: flex;
    flex-direction: row;
  }
  .shop_box_ul {
    padding: 2em 0 9em;
  }
  .shop_box_img {
    position: absolute;
    width: 46vw;
    top: 12%;
    right: 0%;
  }
  .shop_txt_box {
    width: 50%;
  }
  .shop_ttl {
    width: 18%;
  }
  .shop_txt {
    width: 100%;
  }
}
@media (min-width: 960px) {
  .shop_box_ul {
    padding: 2em 0 13em;
  }
  .shop_box_img {
    width: 38vh;
    max-width: 60vh;
  }
  .shop_sns_logo  {
    width: 7%;
  }

}