@font-face {
  font-family: "Times New Roman";
  src: url("../font/times.ttf") format("ttf");
}
html {
  font-size: 62.5%;
}
@media screen and (max-width: 2100px){
  html {
      font-size: calc(10* (100vw / 2100)) !important;
  }
}
@media only screen and (min-width: 768px) {
  .header.off{
    visibility: hidden;
    opacity: 0;
    z-index: -100;
    transition: 1s;
  }
  .header .header-logo {
    display: none;
  }
}

.header .header-nav_fixed {
  filter: invert(1);
}

.header .header-logo, .header .btn-menu__icon {
  filter: invert(1);
}
.header.open .header-logo, .header.open .btn-menu__icon {
  filter: invert(0);
}
.header .btn-menu .border-t, .header .btn-menu .border-m, .header .btn-menu .border-b {
  background: #ffffff;
}
.header.open .btn-menu .border-m {
  background: #000000;
}

.l-page__container {
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  background-color: #fff;
}
/*================================
  variables
=================================*/
#issue107{
  --zindex-behind: -1;
  --zindex-middle: 0;
  --zindex-front: 1;
  --zindex-over: 10;
  --zindex-cursor: 100;
  --zindex-top: 200;
  --pointer-none: none;
  --color-gray: #7A7F7F;
  --color-black: #000000;
  --color-txt: #261c19;
  --color-inversion: #fff;
  margin-top: -18rem;
  position: relative;
  z-index: 0;
}
@media screen and (min-width: 768px) {
  .l-page__container {
    --width-primary: 210rem;
  }
}
@media screen and (max-width: 767px) {
  .l-page__container {
    --width-primary: calc(750*100vw/750);
  }
}
.l-page__container img,
.l-page__container picture,
.l-page__container video,
.l-page__container a{
  display: block;
  width: 100%;
  height: auto;
}
.l-page__container video{
  object-fit: cover;
}
.l-page__container img:hover,
.l-page__container a:hover{
  transition: .5s;
  opacity: .7;
}
.l-page__container span{
  display: inline-block;
}
.l-page__container li{
  list-style: none;
}
.l-page__container .imgWrap{
  background: #fff;
  position: relative;
  transition: opacity 1.5s;
}
.l-page__container .flexArea{
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (max-width: 767px) {
  #issue107 {
    margin-top: calc(-206*(100vw / 750));
  }
}

/*--------------------------------
  variables for mobile
--------------------------------*/
@media screen and (max-width: 767px) {
  .l-page__container .pcOnly {
    display: none!important;
  }
  .l-page__container .flexAreaSp{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
  }
  .l-page__container .gridWrap_pc{
    display: block;
  }
}
/*--------------------------------
  variables for desktop
--------------------------------*/
@media only screen and (min-width: 768px) {
  .l-page__container .spOnly {
    display: none!important;
  }
  .l-page__container .pcOnly {
    display: block;
  }
  .l-page__container .flexAreaPc{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
  }
}
/* end variables */

/*================================
  font
=================================*/
.l-page__container .font-en-caption{
  font-family: "Times New Roman", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 9.1rem;
  letter-spacing: -0.025em;
  color: var(--color-black);
}
.l-page__container .font-jp-caption{
  font-family: "sawarabi-gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.9rem;
  letter-spacing: 0.16em;
  line-height: 2;
  color: var(--color-gray);
  text-align: center;
}
.l-page__container .font-en-sub{
  font-family: "Times New Roman", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2.8rem;
  letter-spacing: 0;
  color: var(--color-black);
}
.l-page__container .font-en-credit{
  font-family: "Times New Roman", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.8rem;
  color: var(--color-black);
  letter-spacing: 0.04em;
  line-height: 1.65;
}
@media only screen and (max-width: 767px) {
  .l-page__container .font-en-caption{
    font-size: calc(77*(100vw / 750));
  }
  .l-page__container .font-jp-caption{
    font-size: calc(22*(100vw / 750));
    letter-spacing: 0.12em;
  }
  .l-page__container .font-en-sub{
    font-size: calc(25*(100vw / 750));
  }
  .l-page__container .font-en-credit{
    font-size: calc(24*(100vw / 750));
    letter-spacing: 0.025em;
    line-height: 1.75;
  }
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - image
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-page__container .c-style_image0101 {width: 80rem;}
.l-page__container .c-style_image0102 {width: 50rem;}
.l-page__container .c-style_image0201 {width: 76rem;}
.l-page__container .c-style_image0202 {width: 46rem;}
.l-page__container .c-style_image0203 {width: 60rem;}
.l-page__container .c-style_image0301 {width: 78rem;}
.l-page__container .c-style_image0302 {width: 46rem;}
.l-page__container .c-style_image0303 {width: 52rem;}
.l-page__container .c-style_image0401 {width: 100%;}
.l-page__container .c-style_image0402 {width: 48rem;}
.l-page__container .c-style_image0403 {width: 64rem;}
.l-page__container .c-style_image0501 {width: 60rem;}
.l-page__container .c-style_image0502 {width: 80rem;}
.l-page__container .c-style_image0601 {width: 46rem;}
.l-page__container .c-style_image0602 {width: 74rem;}

.l-page__container .c-end_image {width: 52rem;}

@media screen and (max-width: 767px) {
  .l-page__container .c-style_image0101 {width: calc(680*(100vw / 750));}
  .l-page__container .c-style_image0102 {width: calc(540*(100vw / 750));}
  .l-page__container .c-style_image0201 {width: calc(750*(100vw / 750));}
  .l-page__container .c-style_image0202 {width: calc(500*(100vw / 750));}
  .l-page__container .c-style_image0203 {width: calc(600*(100vw / 750));}
  .l-page__container .c-style_image0301 {width: calc(680*(100vw / 750));}
  .l-page__container .c-style_image0302 {width: calc(540*(100vw / 750));}
  .l-page__container .c-style_image0303 {width: calc(600*(100vw / 750));}
  .l-page__container .c-style_image0401 {width: calc(750*(100vw / 750));}
  .l-page__container .c-style_image0402 {width: calc(500*(100vw / 750));}
  .l-page__container .c-style_image0403 {width: calc(640*(100vw / 750));}
  .l-page__container .c-style_image0501 {width: calc(580*(100vw / 750));}
  .l-page__container .c-style_image0502 {width: calc(750*(100vw / 750));}
  .l-page__container .c-style_image0601 {width: calc(520*(100vw / 750));}
  .l-page__container .c-style_image0602 {width: calc(680*(100vw / 750));}

  .l-page__container .c-end_image {width: calc(500*(100vw / 750));}
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
project -common
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-page__container .p-style_inner {
  margin-inline: auto;
}
.l-page__container .font-en-credit > li {
  display: block;
}
.l-page__container .c-bg_color_white {
  background-color: var(--color-white);
}
/*================================
  firstview
=================================*/
.l-page__container .l-page__firstview__visual {
  display: block;
}
.l-page__container .firstview__lead {
  padding-block: 12rem 15rem;
}

/*================================
  l-contents__first
=================================*/
.l-contents__first{
  margin: 0 auto;
}
.l-page__container .l-contents__first__txtWrap {
  text-align: center;
}
.l-page__container .l-contents__first__txtWrap h3 {
  margin-top: 2.2rem;
}
@media screen and (max-width: 767px) {
  .l-page__container .firstview__lead {
    padding-block: calc(110*(100vw / 750)) calc(170*(100vw / 750));
  }
  .l-page__container .l-contents__first__txtWrap h3 {
    margin-top: calc(20*(100vw / 750));
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
project -style01
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-page__container .p-style01 {
  margin-top: 12.6rem;
}
.l-page__container .p-style01 .p-style_inner {
  width: var(--width-primary);
}
.l-page__container .p-style01 .p-style_wrapper {
  width: 158rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  row-gap: 28rem;
}
.l-page__container .p-style01 .p-style_wrap01 {
  width: 80rem;
}
.l-page__container .p-style01 .p-style_wrap02 {
  width: 50rem;
  margin-top: 78rem;
}
@media screen and (min-width: 768px) {
  .l-page__container .p-style01 .font-en-credit {
    text-align: right;
    margin-top: 2.6rem;
  }
}
@media screen and (max-width: 767px) {
  .l-page__container .p-style01 {
    margin-top: calc(110* 100vw / 750);
  }
  .l-page__container .p-style01 .p-style_wrapper {
    width: var(--width-primary);
    flex-direction: column;
    row-gap: calc(80*(100vw / 750));
  }
  .l-page__container .p-style01 .p-style_wrap01 {
    width: calc(680*(100vw / 750));
    margin-left: calc(70*(100vw / 750));
  }
  .l-page__container .p-style01 .p-style_wrap02 {
    width: calc(540*(100vw / 750));
    margin-top: 0;
    margin-left: 0;
  }
  .l-page__container .p-style01 .font-en-credit {
    margin-left: calc(40*(100vw / 750));
    margin-top: calc(31*(100vw / 750));
  }
  .l-page__container .p-style01 .font-en-credit > li {
    display: inline-block;
  }
  .l-page__container .p-style01 .font-en-credit span {
    display: inline-block;
    margin-left: calc(8*(100vw / 750));
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
project -style02
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-page__container .p-style02 {
  margin-top: 32.1rem;
}
.l-page__container .p-style02 .p-style_inner {
  width: var(--width-primary);
}
.l-page__container .p-style02 .p-style_wrapper {
  width: 126rem;
  margin-left: 46rem;
}
.l-page__container .p-style02 .p-style_wrap01 {
  width: 76rem;
  margin-left: 21rem;
}
.l-page__container .p-style02 .p-style_wrap02 {
  width: 100%;
  margin-top: 12rem;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  row-gap: 20rem;
  position: relative;
}
.l-page__container .p-style02 .c-style_image0203 {
  margin-top: 49.4rem;
}
@media screen and (min-width: 768px) {
  .l-page__container .p-style02 .font-en-credit {
    text-align: right;
    position: absolute;
    bottom: -0.7rem;
    left: -18.9rem;
  }
}
@media screen and (max-width: 767px) {
  .l-page__container .p-style02 {
    margin-top: calc(250* 100vw / 750);
  }
  .l-page__container .p-style02 .p-style_wrapper {
    width: var(--width-primary);
    margin-left: 0;
  }
  .l-page__container .p-style02 .p-style_wrap01 {
    width: var(--width-primary);
    margin-left: 0;
  }
  .l-page__container .p-style02 .p-style_wrap02 {
    width: var(--width-primary);
    margin-top: calc(80*(100vw / 750));
    flex-direction: column;
    row-gap: 0;
  }
  .l-page__container .p-style02 .c-style_image0203 {
    margin-top: calc(81*(100vw / 750));
    margin-left: calc(150*(100vw / 750));
  }
  .l-page__container .p-style02 .font-en-credit {
    position: static;
    margin-top: calc(32*(100vw / 750));
    margin-left: calc(151*(100vw / 750));
  }
  .l-page__container .p-style02 .font-en-credit > li {
    display: inline-block;
  }
  .l-page__container .p-style02 .font-en-credit span {
    display: inline-block;
    margin-left: calc(8*(100vw / 750));
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
project -style03
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-page__container .p-style03 {
  margin-top: 30rem;
}
.l-page__container .p-style03 .p-style_inner {
  width: var(--width-primary);
}
.l-page__container .p-style03 .p-style_wrapper {
  width: 162rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 58rem 26rem;
  grid-template-rows: 85.6rem 47.4rem;
}
.l-page__container .p-style03 .p-style_wrap01 {
  grid-column: 3;
  grid-row: 1;
}
.l-page__container .p-style03 .p-style_wrap02 {
  grid-column: 1;
  grid-row: 2;
}
.l-page__container .p-style03 .p-style_wrap03 {
  grid-column: 2 / 4;
  grid-row: 3;
  position: relative;
}
@media screen and (min-width: 768px) {
  .l-page__container .p-style03 .font-en-credit {
    position: absolute;
    right: 33rem;
    bottom: -0.7rem;
  }
}
@media screen and (max-width: 767px) {
  .l-page__container .p-style03 {
    margin-top: calc(250* 100vw / 750);
  }
  .l-page__container .p-style03 .p-style_wrapper {
    width: var(--width-primary);
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    row-gap: calc(81*(100vw / 750));
  }
  .l-page__container .p-style03 .p-style_wrap01 {
    width: calc(680*(100vw / 750));
    margin: 0 auto;
  }
  .l-page__container .p-style03 .p-style_wrap02 {
    width: calc(540*(100vw / 750));
    margin-left: 0;
  }
  .l-page__container .p-style03 .p-style_wrap03 {
    width: calc(600*(100vw / 750));
    margin-left: calc(150*(100vw / 750));
  }
  .l-page__container .p-style03 .font-en-credit {
    position: static;
    text-align: left;
    margin-top: calc(32*(100vw / 750));
    margin-left: 0;
  }
  .l-page__container .p-style03 .font-en-credit > li {
    display: inline-block;
  }
  .l-page__container .p-style03 .font-en-credit span {
    display: inline-block;
    margin-left: calc(8*(100vw / 750));
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
project -style04
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-page__container .p-style04 {
  margin-top: 32rem;
}
.l-page__container .p-style04 .p-style_inner {
  width: 100%;
}
.l-page__container .p-style04 .p-style_wrap01 {
  width: 100%;
  margin: 0 auto;
}
.l-page__container .p-style04 .p-style_wrapper {
  width: var(--width-primary);
  margin: 0 auto;
}
.l-page__container .p-style04 .p-style_wrap02 {
  width: 126rem;
  margin-top: 12rem;
  margin-left: 38rem;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  row-gap: 14rem;
  position: relative;
}
.l-page__container .p-style04 .c-style_image0403 {
  margin-top: 44rem;
}
@media screen and (min-width: 768px) {
  .l-page__container .p-style04 .font-en-credit {
    position: absolute;
    bottom: -0.7rem;
    right: 42.3rem;
  }
}
@media screen and (max-width: 767px) {
  .l-page__container .p-style04 {
    margin-top: calc(252* 100vw / 750);
  }
  .l-page__container .p-style04 .p-style_inner {
    width: var(--width-primary);
  }
  .l-page__container .p-style04 .p-style_wrap01 {
    width: var(--width-primary);
  }
  .l-page__container .p-style04 .p-style_wrap02 {
    width: var(--width-primary);
    margin-top: calc(79*(100vw / 750));
    margin-left: 0;
    flex-direction: column;
    row-gap: 0;
  }
  .l-page__container .p-style04 .c-style_image0402 {
    margin-left: calc(250*(100vw / 750));
  }
  .l-page__container .p-style04 .c-style_image0403 {
    margin: 0 auto;
    margin-top: calc(80*(100vw / 750));
  }
  .l-page__container .p-style04 .font-en-credit {
    position: static;
    text-align: center;
    margin-top: calc(32*(100vw / 750));
  }
  .l-page__container .p-style04 .font-en-credit > li {
    display: inline-block;
  }
  .l-page__container .p-style04 .font-en-credit span {
    display: inline-block;
    margin-left: calc(8*(100vw / 750));
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
project -style05
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-page__container .p-style05 {
  margin-top: 32rem;
}
.l-page__container .p-style05 .p-style_inner {
  width: var(--width-primary);
}
.l-page__container .p-style05 .p-style_wrapper {
  width: 113rem;
  margin-left: 65rem;
}
.l-page__container .p-style05 .p-style_wrap01 {
  width: 60rem;
  margin-left: 53rem;
}
.l-page__container .p-style05 .p-style_wrap02 {
  width: 80rem;
  margin-top: 12rem;
  margin-left: 0;
  position: relative;
}
@media screen and (min-width: 768px) {
  .l-page__container .p-style05 .font-en-credit {
    position: absolute;
    text-align: right;
    bottom: -0.7rem;
    left: -16.3rem;
  }
}
@media screen and (max-width: 767px) {
  .l-page__container .p-style05 {
    margin-top: calc(252* 100vw / 750);
  }
  .l-page__container .p-style05 .p-style_wrapper {
    width: var(--width-primary);
    margin-left: 0;
  }
  .l-page__container .p-style05 .p-style_wrap01 {
    width: calc(580*(100vw / 750));
    margin-left: calc(170*(100vw / 750));
  }
  .l-page__container .p-style05 .p-style_wrap02 {
    width: var(--width-primary);
    margin-top: calc(80*(100vw / 750));
  }
  .l-page__container .p-style05 .font-en-credit {
    text-align: center;
    margin-top: calc(32*(100vw / 750));
  }
  .l-page__container .p-style05 .font-en-credit > li {
    display: inline-block;
  }
  .l-page__container .p-style05 .font-en-credit span {
    display: inline-block;
    margin-left: calc(8*(100vw / 750));
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
project -style06
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-page__container .p-style06 {
  margin-top: 32rem;
}
.l-page__container .p-style06 .p-style_inner {
  width: var(--width-primary);
}
.l-page__container .p-style06 .p-style_wrapper {
  width: var(--width-primary);
  margin: 0 auto;
}
.l-page__container .p-style06 .p-style_wrap01 {
  width: 136rem;
  margin-left: 44rem;
  display: flex;
  justify-content: space-between;
  row-gap: 16rem;
  position: relative;
}
.l-page__container .p-style06 .c-style_image0602 {
  margin-top: 41.6rem;
}
@media screen and (min-width: 768px) {
  .l-page__container .p-style06 .font-en-credit {
    text-align: right;
    margin-top: 2.5rem;
  }
}
@media screen and (max-width: 767px) {
  .l-page__container .p-style06 {
    margin-top: calc(252* 100vw / 750);
  }
  .l-page__container .p-style06 .p-style_inner {
    width: var(--width-primary);
  }
  .l-page__container .p-style06 .p-style_wrap01 {
    width: var(--width-primary);
    margin-left: 0;
    flex-direction: column;
    row-gap: 0;
  }
  .l-page__container .p-style06 .c-style_image0601 {
    width: calc(520*(100vw / 750));
    margin-left: 0;
  }
  .l-page__container .p-style06 .c-style_image0602 {
    width: calc(680*(100vw / 750));
    margin-left: calc(70*(100vw / 750));
    margin-top: calc(80*(100vw / 750));
  }
  .l-page__container .p-style06 .font-en-credit {
    margin-top: calc(32*(100vw / 750));
    margin-left: calc(95*(100vw / 750));
  }
  .l-page__container .p-style06 .font-en-credit > li {
    display: inline-block;
  }
  .l-page__container .p-style06 .font-en-credit span {
    display: inline-block;
    margin-left: calc(8*(100vw / 750));
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
projectend-view
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-page__container .end-view {
  margin-top: 11.3rem;
}
.l-page__container .end-view .p-style_inner {
  width: var(--width-primary);
}
.l-page__container .end-view .p-style_wrapper {
  width: 52rem;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {

}
@media screen and (max-width: 767px) {
  .l-page__container .end-view {
    margin-top: calc(112* 100vw / 750);
  }
  .l-page__container .end-view .p-style_wrapper {
    width: var(--width-primary);
  }
  .l-page__container .end-view .p-style_wrap {
    width: calc(500*(100vw / 750));
    margin: 0 auto;
  }
}
/*================================
  js
=================================*/
.l-page__container .js-display-onload.is-displayed [data-display-order] {
  /* 仕様変更後 */
  opacity: 1;
}
.l-page__container .c-button--all .c-button__arrow {
  -webkit-animation: flash 1.6s linear infinite;
          animation: flash 1.6s linear infinite;
}
@-webkit-keyframes flash {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes flash {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@media (max-width: 767px) {
  .l-page__container .l-section {
    position: relative;
  }
}
@media (min-width: 768px) {
  #Wrap {
    padding-top: 0;
  }
  .hidden-desktop {
    display: none !important;
  }
  .l-page__container {
    position: relative;
  }
  .l-page__container div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .l-page__container .l-section__block {
    /* position: absolute;
    top: 12vh; */
    justify-content: center;
    gap: 3vw;
    width: 90%;
  }
}

  /*================ AllBtn ================*/
  #issue107 .allBtnWrap{
    margin: 0 auto;
    padding-block: 25.9rem 25.7rem;
  }

  #issue107 .allBtnCont{
    font-family: "Times New Roman", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.4rem;
    text-align: center;
    margin: 0 auto;
  }
  #issue107 .btnLiner{
    margin: 2rem auto 0;
    background-color: #000;
    height: 1px;
  }

@media only screen and (max-width: 767px) {
    #issue107 .allBtnWrap{
      padding-block: calc(222*(100vw / 750)) calc(202*(100vw / 750));
    }
    #issue107 .allBtnCont{
      font-size: calc(28 * (100vw / 750));
    }

    .archive_wrap .border_line:before {
      top: 2.8rem!important;
  }

    #issue107 .btnLiner {
      margin: calc(15* (100vw / 750)) auto auto auto;
      text-align: center;
  }
}

/*================================
  fadeIn
=================================*/
/*================ FadeIn ================*/
#issue107 .fadeIn{
  opacity: 0;
  transition: 2s;
  transform: 0;
}

#issue107 .fadeIn._up{
  transition: 2s;
  transform: translateY(50px);
}

#issue107 .fadeIn._up.scrollIn{
  transition: 2s;
  transform: translateY(0);
}

#issue107 .fadeIn._down{
  transition: 2s;
  transform: translateY(-50px);
}

#issue107 .fadeIn._down.scrollIn{
  transition: 2s;
  transform: translateY(0);
}

#issue107 .fadeIn._left{
  transform: translate(-50px, 0);
}

#issue107 .fadeIn._left.scrollIn{
  transform: translate(0, 0);
}

#issue107 .fadeIn._left2{
  transform: translate(-50px, 0);
  transition-delay: 0.5s;
}

#issue107 .fadeIn._left2.scrollIn{
  transform: translate(0, 0);
}

#issue107 .fadeIn._right{
  transform: translate(50px, 0);
}

#issue107 .fadeIn._right.scrollIn{
  transform: translate(0, 0);
}

#issue107 .scrollIn{
  opacity: 1;
}
#issue107 .itemBtn{
  opacity: 0;
  transition: 1s;
}
#issue107 .liner.done + .itemBtn{
  opacity: 1;
}
/*================ Liner ================*/
.liner{
  width: 0%;
  transition: all 1s ease;
}
@media only screen and (max-width: 560px) {
  .btnLiner{
    width: calc(150 * (100vw / 750));
    transform: scale(0, 1);
  }
  .active{
    transform: scale(1, 1);
  }
}
@media only screen and (min-width: 561px) {
  .active{
    width: 13rem;
  }
}

/*--------------------------------
  fadeIn for mobile
--------------------------------*/
@media screen and (max-width: 767px) {
  .l-page__container .js-fadeInPc{
    opacity: 1;
    transform: translateX(0);
    transform: translateY(0);
  }
}
/*--------------------------------
  fadeIn for desktop
--------------------------------*/
@media only screen and (min-width: 768px) {
  .l-page__container .js-fadeInSp{
    opacity: 1;
    transform: translateX(0);
    transform: translateY(0);
  }
}
/* end fadeIn */



/*================================
  sticky
=================================*/
.sticky-block-wrap {
  overflow: clip;
}
.sticky-block {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: #fff;
}
#sticky-01 {
  z-index: 100;
  top: var(--sticky-block01-pos);
}
#sticky-02 {
  top: var(--sticky-block02-pos);
  z-index: 300;
}
/*--------------------------------
  sticky for mobile
--------------------------------*/
@media screen and (max-width: 767px) {
  #sticky-02 {
    padding-top : calc(120*(100vw / 750));
  }
}
/*--------------------------------
  sticky for desktop
--------------------------------*/
@media only screen and (min-width: 768px) {
  #sticky-02 {
    padding-top: 12rem;
  }
}
/* //Sticky */