@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
  text-decoration: none;
}
*, *::before, *::after {
  box-sizing: border-box;
}
html{
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  scroll-behavior: smooth;
}
body{ 
  font-family: "ryo-gothic-plusn", "YakuHanJP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", sans-serif;
  /* font-family: "YakuHanJP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", sans-serif; */
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  font-feature-settings: "palt";
  font-kerning: normal;
  min-width: 32.0rem;
  background: var(--background-color);
  color: var(--text-color);
}
.dark-theme{
  --background-color: #2C2B2B;
  --text-color: #fff;
}
.en{ font-family: "area-normal", sans-serif;}
.en-gothic{ font-family: "area-normal", sans-serif; letter-spacing: 0;}
.gothic{ font-family: "ryo-gothic-plusn", "YakuHanJP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", sans-serif;}
.mincho{ font-family: "Noto Serif", serif;}
/* ------------------------------------------ */
/* ------------------------------------------ */
.tb{ display: none;}
.sp{ display: none;}
.tbsp{ display: none;}
/* ------------------------------------------ */
/* ------------------------------------------ */
.section-inner-max{ padding:15.0rem 0;}
.section-inner{ padding:10.0rem 0;}
.section-inner-semi{ padding:8.0rem 0;}
.section-inner-min{ padding:6.0rem 0;}
.wrap-all{ max-width: 138.0rem; margin:0 auto; padding-inline: max(4.0rem);}
.wrap-wide{ max-width: 128.0rem; margin:0 auto; padding-inline: max(4.0rem);}
.wrap-normal{ max-width: 108.0rem; margin:0 auto; padding-inline: max(4.0rem);}
.wrap-min{ max-width: 88.0rem; margin:0 auto; padding-inline: max(4.0rem);}
.bg-color-wht{ background-color: var(--white-color);}
.bg-color-key{ background-color: var(--main-color);}
.bg-color-main{ background-color: var(--bg-main-color);}
.bg-color-sub{ background-color: var(--bg-sub-color);}
.bg-color-gray{ background-color: var(--bg-gray-color);}
.fc-wht{ color: var(--white-color);}
.fc-key{ color: var(--main-color);}
.fc-red{ color: var(--red-color);}
.v-t{ vertical-align: top;}
.v-m{ vertical-align: middle;}
.v-b{ vertical-align: bottom;}
.t-l{ text-align: left;}
.t-c{ text-align: center;}
.t-r{ text-align: right;}
.mr-auto{ margin-right: auto;}
.ml-auto{ margin-left: auto;}
.fw-normal{ font-weight: normal;}
.fw-300{ font-weight: 300;}
.fw-400{ font-weight: 400;}
.fw-500{ font-weight: 500;}
.fw-600{ font-weight: 600;}
.m-t5{ margin-top: 0.5rem;}
.m-t10{ margin-top: 1.0rem;}
.m-t20{ margin-top: 2.0rem;}
.m-t30{ margin-top: 3.0rem;}
.m-t40{ margin-top: 4.0rem;}
.m-t60{ margin-top: 6.0rem;}
.m-t80{ margin-top: 8.0rem;}
.p-t0{ padding-top: 0;}
.p-b0{ padding-bottom: 0;}
a{ color: var(--black-color); transition: 0.3s ease-in-out;}
img{ width: 100%; height: auto; vertical-align: bottom;}
.txt{ line-height: 1.8em;}
.txt-max{ line-height: 2.2em;}
.txt-underline{ text-decoration: underline;}
@media (hover: hover) and (pointer: fine) {
  a:hover{ transition: 0.3s ease-in-out;}
  .txt-underline:hover{ text-decoration: none;}
}

h1,h2,h3,h4,h5,h6{ font-weight: unset;}
:root {
  --background-color: #fff;
  --text-color: #333;
  --main-color: #2D2E33;
  --black-color: #000;
  --gray-color: #777;
  --lightgray-color: #d6d6d6;
  --white-color: #fff;
  --red-color: #D54222;
  --red-color-hover: #BC381C;

  --bg-main-color: #2D2E33;
  --bg-maindark-color: #26262B;
  --bg-gray-color: #F5F5F5;
  --bg-gray2-color: #EFEFEF;
  --bg-midgray-color: #777A7F;
  --bg-midbeige-color: #EAE8E1;
  --bg-midbeige-color: #F8F8F8;
  --bg-white-color: #fff;

  --border-gray: #d6d6d6;
  --border-midgray: #999;
  --border-darkgray: #555555;
  --border-black: #222;
  --border-radius: 0.5rem;
  --border-circle: 5.0rem;
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --txt-underline: underline;

  --fs-5: 0.5rem;
  --fs-6: 0.6rem;
  --fs-7: 0.7rem;
  --fs-8: 0.8rem;
  --fs-9: 0.9rem;
  --fs-10: 1.0rem;
  --fs-11: 1.1rem;
  --fs-12: 1.2rem;
  --fs-13: 1.3rem;
  --fs-14: 1.4rem;
  --fs-15: 1.5rem;
  --fs-16: 1.6rem;
  --fs-17: 1.7rem;
  --fs-18: 1.8rem;
  --fs-20: 2.0rem;
  --fs-22: 2.2rem;
  --fs-24: 2.4rem;
  --fs-26: 2.6rem;
  --fs-28: 2.8rem;
  --fs-30: 3.0rem;
  --fs-32: 3.2rem;
  --fs-36: 3.6rem;
  --fs-40: 4.0rem;
  --fs-48: 4.8rem;
  --fs-56: 5.6rem;
  --fs-64: 6.4rem;
  --fs-72: 7.2rem;
  --fs-80: 8.0rem;

  --mg-5: 0.5rem;
  --mg-10: 1.0rem;
  --mg-15: 1.5rem;
  --mg-20: 2.0rem;
  --mg-25: 2.5rem;
  --mg-30: 3.0rem;
  --mg-40: 4.0rem;
  --mg-60: 6.0rem;
  --mg-80: 8.0rem;
  --mg-100: 10.0rem;
  --mg-120: 12.0rem;

  --header: 9.0rem;
  --font-basic: "ryo-gothic-plusn", "YakuHanJP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", sans-serif;
  --font-en: "Playfair Display", serif;
  --font-en-gothic: "area-normal", sans-serif;
  --font-mincho: "Noto Serif", serif;
}

@media  only screen and (max-width: 1099px){
  body{ font-size: 1.5rem;}
  .pc{ display: none;}
  .tb{ display: block;}
  .sp{ display: none;}
  .pctb{ display: block;}
  .tbsp{ display: block;}
  .p-t0{ padding-top: 0;}
  .p-b0{ padding-bottom: 0;}
  :root {
    --header: 9.0rem;

    --fs-32: 2.8rem;
    --fs-40: 3.2rem;

  }
}

@media screen and (max-width: 767px) {
  body { width: 100%; font-size: 3.467vw;}
  .block{ width: 100%; max-width: 100%;}
  .section-inner-max{ padding:26.667vw 0;}
  .section-inner{ padding:18.667vw 0;}
  .section-inner-min{ padding:10.667vw 0;}
  .wrap-all{ padding-inline: 4%;}
  .wrap-wide{ padding-inline: 4%;}
  .wrap-normal{ padding-inline: 4%;}
  .wrap-min{ padding-inline: 8%;}
  .pc{ display: none !important;}
  .tb{ display: none !important;}
  .sp{ display: block !important;}
  .pctb{ display: none !important;}
  .tbsp{ display: block !important;}
  .sp-t-l{ text-align: left;}
  .p-t0{ padding-top: 0;}
  .p-b0{ padding-bottom: 0;}
  .sp_m-t0{ margin-top: 0 !important;}
  .m-t5{ margin-top: 0.667vw;}
  .m-t10{ margin-top: 1.333vw;}
  .m-t20{ margin-top: 2.667vw;}
  .m-t30{ margin-top: 4vw;}
  .m-t40{ margin-top: 5.333vw;}
  .m-t60{ margin-top: 8vw;}
  .m-t80{ margin-top: 10.667vw;}
  :root {
    --header: 16vw;
    --border-radius: 0.667vw;
    --fs-basic: 3.467vw;
    --fs-10: 1.867vw;
    --fs-11: 2.133vw;
    --fs-12: 2.4vw;
    --fs-13: 2.667vw;
    --fs-14: 2.933vw;
    --fs-15: 3.2vw;
    --fs-16: 3.467vw;
    --fs-18: 3.467vw;
    --fs-20: 3.733vw;
    --fs-22: 4vw;
    --fs-24: 4.4vw;
    --fs-26: 4.8vw;
    --fs-28: 5.067vw;
    --fs-32: 5.333vw;
    --fs-40: 5.867vw;
    --fs-48: 6.4vw;
    --fs-56: 7.467vw;
    --fs-64: 8.533vw;
    --fs-72: 9.6vw;
    --fs-80: 12vw;
    --mg-5: 0.667vw;
    --mg-10: 1.333vw;
    --mg-15: 2vw;
    --mg-20: 2.667vw;
    --mg-25: 3.333vw;
    --mg-30: 4vw;
    --mg-40: 5.333vw;
    --mg-60: 8vw;
    --mg-80: 10.667vw;
    --mg-100: 13.333vw;
    --mg-120: 16vw;
  }
}
/* ------------------------------------------ */
/* ------------------------------------------ */
/* ------------------------------------------ */
/* ------------------------------------------ */
/* ------------------------------------------ */

/*  header
--------------------------------------------- */
.l-wrapper {
  position: relative;
  overflow: hidden;
}
.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 5;
  height: var(--header);
}
.header-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4.0rem;
  margin-right: auto;
  margin-left: auto;
  padding-inline: 3.0rem;
  width: 100%;
  height: 100%;
}
.header-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;         
  overflow-y: auto;
  display: none;
  z-index: 4;
  background: var(--bg-main-color);
}
.header-menu-container{
  background: var(--bg-main-color);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  height: 100%;
}
.header-logo{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  padding: 2.0rem;
}
.header-logo-img{
  display: block;
  width: 9.0rem;
  height: auto;
  transition: 200ms;
}

/*  header-list / header-btn pc
--------------------------------------------- */
.header-list ul{
  display: flex;
  align-items: center;
  gap: 3.5rem;
}
.header-list ul li a{
  color: var(--text-color);
  font-size: var(--fs-15);
  font-weight: var(--fw-500);
}
@media (hover: hover) and (pointer: fine) {
  .header-list ul li a:hover{
    color: var(--gray-color);
  }
}
.header-btn-wrap{
  display: flex;
  align-items: center;
  gap: 1.0rem;
}
.header-contact a{
  border: 0.1rem solid var(--bg-main-color);
  background: var(--bg-main-color);
  border-radius: var(--border-circle);
  box-sizing: border-box;
  color: var(--white-color);
  display: block;
  font-size: var(--fs-15);
  font-weight: var(--fw-500);
  padding: 0 2.5rem;
  height: 4.2rem;
  line-height: 4.2rem;
}
@media (hover: hover) and (pointer: fine) {
  .header-contact a:hover{
    border: 0.1rem solid var(--red-color-hover);
    background: var(--red-color-hover);
  }
}

/*  header-menu-button
--------------------------------------------- */
.header-menu-button { 
  display: block;
  width: 8.0rem;
  height: 4.2rem;
  background-color: var(--bg-main-color);
  border: 0.1rem solid var(--bg-main-color);
  border-radius: var(--border-circle);
  box-sizing: border-box;
  margin: 0 auto;
  z-index: 10;
  outline: none;
  touch-action: manipulation;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}
.header-menu-button__lines {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 2.6rem;
  margin: 0 auto;
  gap: 0.4rem;
}
.header-menu-button__line {
  position: relative;
  display: block;
  width: 100%;
  height: 0.1rem;
  background-color: var(--white-color);
  transition: 0.4s;
}
.is-menu-opened .header-menu-button .header-menu-button__lines span:nth-of-type(1){
  -webkit-transform: translateY(0.25rem) rotate(-30deg);
  transform: translateY(0.25rem) rotate(-30deg); 
}
.is-menu-opened .header-menu-button .header-menu-button__lines span:nth-of-type(2){
  -webkit-transform: translateY(-0.25rem) rotate(30deg);
  transform: translateY(-0.25rem) rotate(30deg);
}
.is-menu-opened .header-menu-button{
  border: 0.1rem solid var(--border-midgray);
  background: var(--bg-main-color);
}
.is-menu-opened .header-menu-button .header-menu-button__lines span{
  background-color: var(--border-gray) !important;
}
@media (hover: hover) and (pointer: fine) {
  .header-menu-button:hover{
    background: var(--red-color-hover);
    border: 0.1rem solid var(--red-color-hover);
  }
  .is-menu-opened .header-menu-button:hover{
    background: var(--bg-main-color);
    border: 0.1rem solid var(--border-midgray);
  }
}

/*  is-menu-opened-menu container
--------------------------------------------- */
.header-open .common-container{
  padding: 16.0rem 0 8.0rem;
}
.header-nav{
  width: 100%;
  height: 100%;
}

/*  header-scroll is-fixed スクロール固定
--------------------------------------------- */
.is-fixed .header{
  /* background: #ffffff10;
  backdrop-filter: blur(10px);
  transition: 0.3s ease-in-out; */
}
.is-fixed .header-list{
  display: none;
  transition: 200ms;
}
.is-fixed .header-logo{
  padding: 1.0rem 2.0rem;
}
.is-fixed .header-logo-img{
  width: 7.0rem;
}
.is-fixed.is-menu-opened .header-logo-img{
  width: 9.0rem;
}
.is-fixed .open-menu-container {
  position: relative;
  overflow: visible;
}

/*  common header footer 
--------------------------------------------- */
.common-container{
  padding: 12.0rem 0 4.0rem;
  border-bottom: 0.1rem solid var(--border-gray);
  background: var(--bg-gray-color);
}
.common-main-container{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.common-main-nav{
  display: flex;
  align-items: flex-start;
  gap: 10.0rem;
}
.common-main-list{
  font-weight: var(--fw-500);
}
.common-main-list li:not(:first-child){
  margin-top: 1.0rem;
}
.common-main-list li a{
  color: var(--text-color);
}
@media (hover: hover) and (pointer: fine) {
  .common-main-list li a:hover,
  .common-sub-list li a:hover{
    opacity: .6;
  }
}
.common-main-list li .common-in-list{
  margin-top: 1.0rem;
}
.common-main-list li .common-in-list li{
  margin-top: 1.5rem;
  font-size: var(--fs-14);
  font-weight: var(--fw-400);
}
.common-main-list li .common-in-list li::before{
  content: "ー";
  padding-right: 0.5rem;
  color: var(--gray-color);
}
.common-main-list li .common-in-list li a{
  color: var(--text-color);
}

.common-sns-list li:not(:first-child){
  margin-top: var(--mg-15);
}
.common-sns-list li a{
  display: flex;
  justify-content: flex-start;
  color: var(--text-color);
  font-weight: var(--fw-500);
}
.common-sns-list li a img{
  width: 2.5rem;
  margin-right: 1.0rem;
}
@media (hover: hover) and (pointer: fine) {
  .common-sns-list li a:hover{
    background: var(--bg-maindark-color);
  }
  .common-sns-list li a:hover img{
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(57deg) brightness(103%) contrast(106%);
  }
  .common-sns-list .button-border .link-arrow:hover:after{
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(57deg) brightness(103%) contrast(106%);
  }
}
.common-sub{
  margin-top: var(--mg-80);
}
.common-sub-container{
  display: block;
  gap: var(--mg-15);
  align-items: baseline;
  justify-content: flex-start;
}
@media  only screen and (max-width: 767px){
  .common-sub-container{
    justify-content: flex-start;
  }
}
.common-sub-list{
  display: flex;
  font-size: var(--fs-14);
}
.common-sub-list li a{
  color: var(--text-color);
}
.common-copy{
  font-size: var(--fs-14);
  font-weight: var(--fw-400);
  color: var(--gray-color);
}
.circle-ttl{
  position: relative;
  padding-left: 2.0rem;
  font-weight: var(--fw-500);
}
.circle-ttl::before{
  background: var(--main-color);
  content: "";
  display: inline-block;
  height: 0.8rem;
  width: 0.8rem;
  position: absolute;
  top: calc(50% + 0.2rem);
  left: 0;
    transform:  translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.common-movie{
  background: var(--bg-gray-color);
}
.common-movie-list{
  margin-top: 3.0rem;
}
.common-movie-item{
  background: var(--bg-white-color);
  border-radius: var(--border-radius);
  transition: 0.3s;
}
.common-movie-item a{
  border-radius: var(--border-radius);
  color: var(--text-color);
  display: block;
  padding: 4.0rem 2.0rem 2.5rem;
  position: relative;
}
.common-movie-item a::before{
  position: absolute;
  content: "";
  top: 2.0rem;
  right: 2.0rem;
  width: 4.2rem;
  height: 3.0rem;
  background: url(../img/common/icon_youtube.svg) no-repeat center / contain;
}
.common-movie-item a .en-gothic{
  font-weight: var(--fw-500);
}
.common-movie-item p{
  font-weight: var(--fw-500);
  margin-top: 0.5rem;
  line-height: 1.5em;
}
@media (hover: hover) and (pointer: fine) {
  .common-movie-item:hover{
    background: var(--bg-maindark-color);
    transition: 0.3s;
  }
  .common-movie-item a:hover{
    color: var(--white-color);
  }
  .common-movie-item a:hover::before{
    filter: brightness(0) saturate(100%) invert(100%) sepia(86%) saturate(31%) hue-rotate(126deg) brightness(107%) contrast(106%);
  }
}

/*  header openmenu
--------------------------------------------- */
.header-menu .common-container{
  padding: 20.0rem 0 4.0rem;
}
.is-menu-opened .header-logo-img img{
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(257deg) brightness(107%) contrast(101%);
}
.header-menu,
.header-menu-container,
.header-menu .common-container,
.header-menu .common-movie{
  background: var(--bg-main-color);
}
.header-menu .common-container{
  border-bottom: 0.1rem solid var(--border-darkgray);
}
.header-menu .common-main-list li a,
.header-menu .common-sub-list li a{
  color: var(--white-color);
}
.header-menu .common-main-list li .common-in-list li a,
.header-menu .common-main-list li .common-in-list li::before{
  color: var(--lightgray-color);
}
.header-menu .button-border a{
  border: 0.1rem solid var(--border-darkgray);
  color: var(--white-color);
}
.header-menu .common-sns-list li a img,
.header-menu .button-border .link-arrow:after{
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(257deg) brightness(107%) contrast(101%);
}
.header-menu .circle-ttl{
  color: var(--white-color);
}
.header-menu .circle-ttl::before{
  background: var(--white-color);
}
.header-menu .common-movie-item{
  background: var(--bg-maindark-color);
}
.header-menu .common-movie-item a{
  background: var(--bg-maindark-color);
  color: var(--white-color);
}
.header-menu .common-movie-item a::before{
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(257deg) brightness(107%) contrast(101%);
}
@media (hover: hover) and (pointer: fine) {
  .header-menu .button-border a:hover{
    background: var(--bg-white-color);
    color: var(--main-color);
  }
  .header-menu .common-sns-list li a:hover img,
  .header-menu .button-border .link-arrow:hover:after{
    filter: none;
  }
  .header-menu .common-movie-item:hover{
    background: var(--bg-white-color);
  }
  .header-menu .common-movie-item a:hover{
    background: var(--bg-white-color);
    color: var(--text-color);
  }
  .header-menu .common-movie-item a:hover::before{
    filter: none;
  }
}

@media  only screen and (max-width: 1099px){
  .header-logo-img{
    width: 8.0rem;
  }
  .is-fixed .header-logo-img{
    width: 7.0rem;
  }
  .is-fixed.is-menu-opened .header-logo-img{
    width: 8.0rem;
  }
  .common-main-nav{
    gap: clamp(8.0rem, 8.333vw, 10.0rem);
  }
  .common-sns-list li a{
    width: 26.0rem;
  }
  .common-sub{
    margin-top: var(--mg-60);
  }
  .common-movie-list{
    margin-top: 2.0rem;
  }
  .common-movie-item a{
    padding: 6.0rem 2.0rem 2.5rem;
  }
}
@media  only screen and (max-width: 767px){
  .header-container {
    padding-inline: 4vw;
  }
  .header-logo{
    padding: 2.667vw;
  }
  .header-logo-img{
    width: 13.333vw;
  }
  .header-menu-button { 
    width: 16vw;
    height: 9.067vw;
  }
  .header-menu-button__lines {
    width: 5.333vw;
    gap: 1.067vw;
  }
  .is-menu-opened .header-menu-button .header-menu-button__lines span:nth-of-type(1){
    -webkit-transform: translateY(0.6vw) rotate(-30deg);
    transform: translateY(0.6vw) rotate(-30deg); 
  }
  .is-menu-opened .header-menu-button .header-menu-button__lines span:nth-of-type(2){
    -webkit-transform: translateY(-0.6vw) rotate(30deg);
    transform: translateY(-0.6vw) rotate(30deg);
  }
  .is-fixed .header-logo{
    padding: 2.667vw;
  }
  .is-fixed .header-logo-img,
  .is-fixed.is-menu-opened .header-logo-img{
    width: 13.333vw;
  }
  .common-container{
    padding: 12vw 0 5.333vw;
  }
  .common-main-container{
    flex-wrap: wrap;
    gap: 12vw;
  }
  .common-main-nav{
    flex-wrap: wrap;
    gap: 0;
    width: 100%;
  }
  .common-menu,
  .common-sns{
    width: 100%;
  }
  .common-main-list{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  .common-main-list li{
    width: 50%;
    margin-top: 2.667vw;
  }
  .common-main-list li:not(:first-child){
    margin-top: 2.667vw;
  }
  .common-main-list li .common-in-list li::before{
    padding-right: 0.8vw;
  }
  .common-sns-list li a{
    width: 100%;
  }
  .common-sns-list li{
    margin-top: 0;
  }
  .common-sns-list li:not(:first-child){
    margin-top: 2.667vw;
  }
  .common-sns-list li a img{
    width: 4vw;
    margin-right: 2.133vw;
  }
  .common-sub{
    margin-top: var(--mg-120);
  }
  .circle-ttl{
    padding-left: 3.2vw;
  }
  .circle-ttl::before{
    height: 1.333vw;
    width: 1.333vw;
    top: calc(50% + 0.267vw);
  }
  .common-movie-list{
    margin-top: 5.333vw;
  }
  .common-movie-list.li3{
    gap: 2.667vw;
  }
  .common-movie-item a{
    padding: 5vw 4vw 4vw;
  }
  .common-movie-item a::before{
    top: 4vw;
    right: 4vw;
    width: 6.667vw;
    height: 4.8vw;
  }
  .common-movie-item p{
    margin-top: 0.8vw;
  }
  .header-menu .common-container{
    padding: 21.333vw 0 5.333vw;
  }
}

/* ------------------------------------------ */
/* ---------------------------------------------
共通パーツ
/* ------------------------------------------ */
/* --------------------------------------------- 

/*  ttl
--------------------------------------------- */
.ttl-wrapper-max2{ margin-bottom: 8.0rem;}
.ttl-wrapper-max{ margin-bottom: 6.0rem;}
.ttl-wrapper{ margin-bottom: 4.0rem;}
.ttl-wrapper-semimin{ margin-bottom: 3.0rem;}
.ttl-wrapper-min{ margin-bottom: 2.0rem;}
.ttl-wrapper-min2{ margin-bottom: 1.0rem;}
.line-ttl::after {
  border-bottom: 0.2rem solid var(--main-color);
  content: "";
  display: block;
  padding-top: 3.0rem;
  width: 8.0rem; 
  margin: 0 auto;
}
/* .main-ttl{ 
  text-align: center;
}  */
.en-ttl{
  letter-spacing: 0;
}
.en-minttl{
  font-size: var(--fs-18);
  letter-spacing: 0;
}
.h1-ttl{
  font-size: var(--fs-40);
}
.h2-ttl{
  font-size: var(--fs-32);
}
.h3-ttl{
  font-size: var(--fs-22);
  font-weight: var(--fw-500);
  line-height: 1.6em;
}
.h4-ttl{
  font-size: var(--fs-22);
  font-weight: var(--fw-500);
}
.h3-ttl.min-ttl{
  font-size: var(--fs-20);
  font-weight: var(--fw-500);
  line-height: 1.6em;
}
.bold-txt{
  font-size: var(--fs-16);
  font-weight: var(--fw-500);
}
.subbold-txt{
  font-size: var(--fs-14);
  font-weight: var(--fw-500);
}
.leftline-ttl{
  font-size: var(--fs-26);
  font-weight: var(--fw-500);
  border-left: 0.4rem solid var(--bg-main-color);
  padding: 0.5rem 0 0.5rem 2.0rem;
  line-height: 1.6em;
}
.bottom-line{
  position: relative;
  border-bottom: 0.1rem solid var(--border-gray);
}
.bottom-line::after{
  content: "";
  position: absolute;
  bottom: 0;
  /* 画面中央に1300pxを配置 → その左端が left */
  left: calc((100% - 1300px) / 2);
  /* 左端から100pxだけ黒線を敷く */
  width: 100px;
  border-bottom: 0.3rem solid var(--black-color);
}
@media  only screen and (max-width: 1380px){
  .bottom-line::after{
    left: 4.0rem;
    width: 100px;
  }
}
@media  only screen and (max-width: 767px){
  .ttl-wrapper-max2{ 
    margin-bottom: 10.667vw;
  }
  .ttl-wrapper-max{ 
    margin-bottom: 8vw;
  }
  .ttl-wrapper{ 
    margin-bottom: 5.333vw;
  }
  .ttl-wrapper-semimin{ 
    margin-bottom: 4vw;
  }
  .ttl-wrapper-min{ 
    margin-bottom: 2.667vw;
  }
  .ttl-wrapper-min2{ 
    margin-bottom: 1.867vw;
  }
  .line-ttl::after {
    border-bottom: 0.2rem solid var(--main-color);
    content: "";
    display: block;
    padding-top: 4vw;
    width: 10.667vw; 
    margin: 0 auto;
  }
  .leftline-ttl{
    border-left: 0.533vw solid var(--bg-main-color);
    padding: 0.533vw 0 0.533vw 2.667vw;
  }
  .bottom-line::after{
    left: 4%;
    width: 21.333vw;
  }

}

.ttl-flex{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.ttl-txt{
  font-size: var(--fs-15);
  font-weight: var(--fw-500);
  line-height: 1.7em;
}
@media  only screen and (max-width: 767px){  
  .ttl-flex{
    flex-wrap: wrap;
    gap: 4vw;
  }
}

/*  ttl 
--------------------------------------------- */
.main-center-ttl{
  text-align: center;
}
.page-ttl .en-ttl.en{
  font-family: var(--font-en);
  font-weight: var(--fw-400);
}


/*  list
--------------------------------------------- */
.li2, .li3, .li4{
  display: grid;
}
.li2{ 
  gap: 4%;
  grid-template-columns: repeat(2, 1fr);
}
.li2.min{ gap: 2%;}

.li3{ 
  gap: 8.0rem 5%;
  grid-template-columns: repeat(3, 1fr);
}
.li3.min{ gap: 2%;}

.li4{
  gap: 6.0rem 4%;
  grid-template-columns: repeat(4, 1fr);
}
.li4.min{ gap: 2%;}

@media  only screen and (max-width: 1099px){
  .li4{
    gap: 6.0rem 4%;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media  only screen and (max-width: 767px){
  .li2, .li3{
    gap: 8vw 5.333vw;
    grid-template-columns: repeat(1, 1fr);
  }
  .li4{ 
    gap: 8vw 5.333vw;
    grid-template-columns: repeat(2, 1fr);
  }
  .li2.min, .li3.min, .li4.min{
    gap: 2.667vw;
  }
  .li2 li, .li3 li, .li4 li{
    width: 100%;
  }
}

/*  txtlink external
--------------------------------------------- */
.link-external::after {
  content: "";
  display: inline-block;
  width: 1.3rem;
  height: 1.0rem;
  padding-left: 0.5rem;
  background: url(../img/common/icon_externallink-key.svg) center / contain no-repeat;
  vertical-align: baseline;
}
.link-external.wht::after{
  background: url(../img/common/icon_externallink-wht.svg) center / contain no-repeat;
}
@media  only screen and (max-width: 767px){
  .link-external::after {
    width: 1.0rem;
    height: 0.8rem;
    padding-left: 1.0rem;
  }
}

/*  txtlink underline
--------------------------------------------- */
.link-underline{
  display: inline-block;
  position: relative;
}
.link-underline::before {
  background-color: var(--black-color);
  bottom: -3px;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
  width: 100%;
}
.link-underline.cl-main::before{
  background-color: var(--main-color);
}
@media (hover: hover) and (pointer: fine) {
  .link-underline:hover::before { transform: scale(1, 1);}
}

/*  button
--------------------------------------------- */
.button-wrapper{ 
  margin-top: var(--mg-60);
}
.button-wrapper-min{
  margin-top: var(--mg-30);
}
.center-button{
  margin-inline: auto;
  text-align: center;
}
@media  only screen and (max-width: 767px){
  .sp_left-button{
    text-align: left;
  }
}

/*  button bgcolor */
.button-round a{
  position: relative;
  background: var(--main-color);
  border-radius: 999px;
  color: var(--white-color);
  display: inline-block; 
  font-size: var(--fs-14);
  font-weight: var(--fw-500);
  text-align: center;
  padding: 1.2rem 6.0rem;
  margin: 0 auto;
  transition: 0.3s ease-in-out;
}
.button-round.btn-min a{
  padding: 1.0rem 2.0rem;
}
.button-round .link-arrow:after {
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  right: var(--mg-20);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12px;
  height: 10px;
  background: url(../../assets_/img/common/icon_arrowlink_wht.svg) no-repeat center / contain;
  transition: none; 
  animation: none; 
  pointer-events: none;
}
/*  button 外部リンク */
.button-round .link-external:after{
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  right: var(--mg-20);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12px;
  height: 10px;
  background: url(../../assets_/img/common/icon_externallink.svg) no-repeat center / contain;
  transition: none; 
  animation: none; 
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .button-round a:hover{ background-color: var(--red-color-hover);}
  .button-round .link-arrow:hover::after,
  .button-round .link-external:hover::after{ animation: arrowSlide 0.3s ease-in-out forwards; }
}
@keyframes arrowSlide { 
  0% { transform: translate(0, -50%); opacity: 1; }
  49% { transform: translate(100%, -50%); opacity: 0; }
  50% { transform: translate(-100%, -50%); opacity: 0; }
  100% { transform: translate(0, -50%); opacity: 1; } 
}
@media  only screen and (max-width: 767px){
  .button-wrapper{ 
    margin-top: var(--mg-50);
  }
  .button-wrapper-min{
    margin-top: var(--mg-20);
  }
  .button-round{
    text-align: center;
    margin-inline: auto;
  }
  .button-round a{
    padding: 2.133vw 12vw;
    min-width: max-content;
  }
  .button-round.btn-min a{
    padding: 2.667vw 0;
    font-size: 3.2vw;
  }
  .button-round .link-arrow:after{
    width: 2.667vw;
    height: 2.133vw;
  }
  .button-round .link-external:after{
    width: 2.667vw;
    height: 2.133vw;
  }
}

/*  button bordercolor */
.button-border a{
  position: relative;
  border: 1px solid var(--border-gray);
  color: var(--main-color);
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: var(--fs-14);
  font-weight: var(--fw-400);
  padding: 1.8rem 2.0rem;
  width: 30.0rem;
  margin: 0 auto;
  transition: 0.3s ease-in-out;
}
.button-border.btn-min a{
  padding: 1.4rem 2.0rem;
  min-width: 30.0rem;
  max-width: 30.0rem;
}
.button-border .link-arrow:after {
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  right: 2.0rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 12px;
  background: url(../img/common/icon_arrowlink.svg) no-repeat center / contain;
  transition: none; 
  animation: none; 
  pointer-events: none;
}
/*  button 外部リンク */
.button-border .link-external:after{
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  right: var(--mg-20);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12px;
  height: 10px;
  background: url(../img/common/icon_externallink.svg) no-repeat center / contain;
  transition: none; 
  animation: none; 
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .button-border .link-arrow:hover,
  .button-border .link-external:hover{
    background: var(--main-color);
    border: 1px solid var(--main-color);
    color: var(--white-color);
  }
  .button-border .link-arrow:hover::after,
  .button-border .link-external:hover::after{
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(91deg) brightness(99%) contrast(99%);
  }
  .button-border .link-arrow:hover::after,
  .button-border .link-external:hover::after{ 
    animation: arrowSlide 0.3s ease-in-out forwards;
  }
}
@media  only screen and (max-width: 767px){
  .button-border a{
    font-size: 3.467vw;
    padding: 4vw;
    min-width: max-content;
    max-width: 100%;
  }
  .button-border.btn-min a{
    padding: 1.0rem 0;
    font-size: 3.467vw;
  }
  .button-border .link-arrow:after{
    width: 3.2vw;
    height: 2.667vw;
    right: 2.667vw;
  }
  /*  button 外部リンク */
  .button-border .link-external:after{
    width: 3.2vw;
    height: 2.667vw;
  }
}
.button-flex{
  display: flex;
  justify-content: center;
  gap: 2.0rem;
}
@media  only screen and (max-width: 1099px){
  .button-flex{
    flex-direction: column;
    gap: 1.0rem;
  }
}

/*  button txttype */
.button-txt a{
  position: relative;
  display: inline-block; 
  font-size: var(--fs-14);
  font-weight: var(--fw-500);
  transition: 0.3s ease-in-out;
  padding-right: var(--mg-40);
}
.button-txt .link-arrow:before {
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 2.4rem;
  height: 2.4rem;
  background: var(--main-color);
  border-radius: 999px;
  color: var(--white-color);
}
.button-txt .link-arrow:after {
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  right: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10px;
  height: 8px;
  background: url(../img/common/icon_arrowlink-wht.svg) no-repeat center / contain;
  transition: none; 
  animation: none; 
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .button-txt .link-arrow:hover::before{ background: var(--main-color-hover);}
  .button-txt .link-arrow:hover::after{ animation: arrowSlide 0.3s ease-in-out forwards; }
}


/*  ----------------------------------------  */
/*  ----------------------------------------  */
/*  ----------------------------------------  */
/*  ----------------------------------------  */
/*  ----------------------------------------  */

/*  footer floating-banner
--------------------------------------------- */
.floating-banner {
  position: relative;
  z-index: 3;
}
.floating-banner-wrap {
  position: fixed;
  bottom: 2.0rem;
  right: 2.0rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.floating-banner-container {
  position: relative;
}
.floating-banner-close {
  position: absolute;
  top: -1.0rem;
  right: -1.0rem;
  background-color: var(--white-color);
  border: 0.1rem solid var(--border-black);
  border-radius: var(--border-circle);
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--fs-15);
  cursor: pointer;
  line-height: 1;
  z-index: 4;
}
.floating-banner-imgtxt{
  background-color: var(--red-color);
  border-radius: var(--border-radius);
}
.floating-banner-imgtxt a{
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  gap: var(--mg-15);
  padding: 1.0rem;
  position: relative;
}
.floating-banner-img{
  width: 10.0rem;
}
.floating-banner-img img{
  border-radius: var(--border-radius);
}
.floating-banner-txt{
  color: var(--white-color);
  padding-right: 0.5rem;
}
.floating-cat{
  background: var(--white-color);
  border-radius: var(--border-circle);
  color: var(--red-color);
  display: inline-block;
  font-size: var(--fs-10);
  font-weight: var(--fw-500);
  padding: 0 1.0rem;
  letter-spacing: 0.05em;
}
.floating-ttl{
  color: var(--white-color);
  font-size: var(--fs-13);
  font-weight: var(--fw-500);
  padding: 0.7rem 0 0.5rem;
  line-height: 1.7em;
  letter-spacing: 0.02em;
}
.floating-ttl span{
  display: block;
  font-size: var(--fs-16);
}
.floating-txt{
  font-size: var(--fs-12);
}
.floating-txt .link-external{
  position: absolute;
  right: 1.0rem;
  bottom: 1.0rem;
}
/* 非表示用 */
.floating-banner--hidden {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .floating-banner-imgtxt a:hover{
    background: var(--red-color-hover);
  }
}
@media screen and (max-width: 767px) {
  .floating-banner-wrap {
    bottom: 3.2vw;
    right: 3.2vw;
  }
  .floating-banner-close {
    top: -2.667vw;
    right: -2.667vw;
    width: 4.8vw;
    height: 4.8vw;
    font-size: var(--fs-13);
  }
  .floating-banner-imgtxt a{
    padding: 2.133vw;
  }
  .floating-banner-img{
    width: 16vw;
  }
  .floating-banner-txt{
    padding-right: 1.067vw;
  }
  .floating-cat{
    padding: 0 2.133vw;
  }
  .floating-ttl{
    padding: 0.8vw 0 1.6vw;
  }
  .floating-ttl span{
    font-size: var(--fs-15);
  }
  .floating-txt .link-external{
    right: 2.133vw;
    bottom: 2.133vw;
  }
}


/*  pagetop
--------------------------------------------- */
.pagetop {
  height: 6.0rem;
  width: 6.0rem;
  background: var(--bg-main-color);
  border-radius: var(--border-circle);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  position: fixed;
  bottom: 2.0rem;
  right: 2.0rem;
}
.pagetop_arrow {
  height: 1.2rem;
  width: 1.2rem;
  border-top: 0.1rem solid var(--white-color);
  border-right: 0.1rem solid var(--white-color);
  transform: translateY(20%) rotate(-45deg);
}
@media (hover: hover) and (pointer: fine) {
  .pagetop:hover{ 
    background: var(--red-color); 
    transition: 0.3s ease-in-out;}
}
@media screen and (max-width: 767px) {
  .pagetop {
    width: 12vw;
    height: 7vw;
  }
  .pagetop_arrow {
    width: 2.133vw;
    height: 2.133vw;
    border-top: 0.267vw solid var(--white-color);
    border-right: 0.267vw solid var(--white-color);
  }
}

/*  ----------------------------------------  */
/*  ----------------------------------------  */
/*  ----------------------------------------  */
/*  ----------------------------------------  */
/*  scl ｜下から上、右から、左から出現
--------------------------------------------- */
.js-scl { opacity: 0; transform: translate(0, 0); transition: all 1.5s;}
.js-scl.js-scl-left { transform: translate(-30px, 0);}
.js-scl.js-scl-left-long { transform: translate(-160px, 0);}
.js-scl.js-scl-right { transform: translate(30px, 0);}
.js-scl.js-scl-up { transform: translate(0, 30px);}
.js-scl.js-scl-down { transform: translate(0, -30px);}
.js-scl.js-scl-normal { transform: translate(0, 0);}
.js-scl.scrollin { opacity: 1 !important; transform: translate(0, 0) !important;}
.time02 {transition-delay: .5s;}
.time03 {transition-delay: 1.0s;}
.time04 {transition-delay: 1.5s;}

/*  下から上に1文字ずつ遅延して現れるアニメーション
--------------------------------------------- */
.txt-anim-hidden{ overflow: hidden;}
.txt-anim { overflow: hidden;}
.char {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.5s cubic-bezier(0.77, 0, 0.175, 1);
  transition-delay: calc(0.02s * var(--char-index));
}
.txt-anim.is-active .char {
  transform: translateY(0);
}
.whitespace {
  display: inline-block;
}

/*  ----------------------------------------  */
/*  ----------------------------------------  */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}