@charset "UTF-8";
.header  {
  position: fixed;
  top: 0;
} 
html {
	font-size: 62.5%;
  }
  #all_wrap {
	  width: 100%;
    /* width: 140rem; */
    margin: 0 auto;
    overflow: hidden;
    background: #E2DCCF;
  }
  #all_wrap .sp_only {
	display: none !important;
  }
  #all_wrap img {
	width: 100%;
  }
  .element {
    font-family: var(--font-jp); /* 日本語フォントの変数 */
    font-family: var(--font-en); /* 英語フォントの変数 */
  }
  .ttl_area {
    margin-left: 18.8rem;
    margin-top: 2.1rem;
  }
  #all_wrap .mv_ttl {
    margin-right: 0.4rem;
    font-size: 3rem;
    font-family: trajan-pro-3, serif;
    font-weight: 600;
    font-style: normal;
  }
  #all_wrap .mv_sub_ttl {
    font-family: var(--font-en);
    font-size: 1.3rem;
    margin-top: 0.5rem;
    letter-spacing: 0.015em;
    /* letter-spacing: 0.048em; */
  }
  #all_wrap .mv_text,
  #all_wrap .mv_coment {
    font-family: var(--font-en);
    font-size: 1.6rem;
    line-height: 1.375;
    font-weight: 300;
  }
  .mv_text {
    text-align: left;
    margin-left: 4.9rem;
  }
  .mv_coment {
    margin-top: auto;
    margin-left: 11.4rem;
  }
  #all_wrap .mv_text .bold {
    font-weight: 700;
  }
  /*************************************** メイン箇所の設定 ***************************************/
  .df_area {
    display: flex;
  }
  .df01 {
    width: 140rem;
    text-align: center;
    margin: 11.8rem auto 0rem;
    justify-content: flex-start;
  }
  .df02 {
    width: 100%;
    margin-top: 12.5rem;
  }
  .df03 {
    margin-top: 40rem;
  }
  #all_wrap .df04 {
    display: flex;
    width: 92rem;
    justify-content: space-between;
    margin: 30rem auto 0rem;
  }
  #all_wrap .img01,
  #all_wrap .img02,
  #all_wrap .img04,
  #all_wrap .img05,
  #all_wrap .img09 {
    width: 100%;
  }
  .img03_area {
    position: relative;
    width: 140rem;
    margin: 0 auto;
  }
  #all_wrap .img03 {
    width: 65rem;
    margin: 20rem auto 0;
  }
  .img_text {
    position: absolute;
    display: block;
    z-index: 2;
    width: 172rem;
    top: 74rem;
    left: -13.8rem;
    pointer-events: none;
  }
  .img_text01 {
    top: 0rem;
    left: 0rem;
  }
  .img_text02 {
    top: 0rem;
    left: 0rem;
  }
  .img_text03 {
    top: 0rem;
    right: 0rem;
  }
  .img_text04 {
    top: 0rem;
    right: 0rem;
  }
  .img09 {
    margin-top: 30rem;
  }
  #all_wrap .contents {
    width: 140rem;
    margin: 30rem auto 0rem;
  }
  #all_wrap .img10 {
    width: 67.5rem;
    margin-right: auto;
  }
  .img11 {
    width: 92rem;
    margin: 12.5rem auto 0rem;
  }
  .action {
    font-family: var(--font-jp);
    font-size: 1.4rem;
    border-bottom: solid 1px #000;
    width: fit-content;
    margin: 15rem auto;
    padding-bottom: 0.5rem;
  }
  #all_wrap .fade_up {
    opacity: 0;
    transform: translateY(50px);
  }
  #all_wrap .fade_up.active {
    opacity: 1;
    transition-duration: 1.6s;
    transform: translateY(0);
  }
  .hov_img img {
    transition: 0.5s;
  }
  .hov_img img:hover {
    opacity: .7;
    transition: 0.5s;
  }

  /* .slider-dots {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    list-style: none;
  }
    li {
      display: inline-block;
      width: calc(25% - 8px); 
      margin: 0 2px;
    }
    
    button {
      position: relative;
      width: 100%;
      height: 4px;
      border: 0;
      background-color: #ccc;
      font-size: 0;
    }
      button:after {
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        display: block;
        width: 0%;
        height: 100%;
      }
      .slick-active, button:after {
          background-color: #000;
          animation: progress 5.5s linear forwards;
        }
    
    @keyframes progress {
      from {
        width: 0%;
      }
      
      to {
        width: 100%;
      }
    } */
    .header_logo {
      opacity: 1;
      transition: opacity 1s;
    }
    .logo_none {
      opacity: 0;
      pointer-events: none;
      transition: 1s;
    }
  /*************************************** メイン箇所の設定 ***************************************/
  @media only screen and (max-width: 1279px) and (min-width: 561px) {
    html {
      font-size: calc(10* (100vw / 1400));
    }
  }
  /* SP */
  @media only screen and (max-width: 768px) {
  html {
    font-size: calc(10* (100vw / 750));
  } 
  #all_wrap {
    width: calc(750*100vw/750);
    margin-bottom: calc(-110*100vw/750);
  }
  #all_wrap .pc_only {
    display: none !important;
  }
  #all_wrap .sp_only {
    display: block !important;
  }
  .ttl_area {
    text-align: left;
    margin-top: calc(0*100vw/750);
    margin-left: calc(50*100vw/750);
    /* width: calc(330*100vw/750); */
  }
  #all_wrap .mv_ttl {
    font-size: calc(50*100vw/750);
    letter-spacing: 0.05em;
    margin-left: calc(0*100vw/750);
    margin-right: calc(0*100vw/750);
  }
  /* #all_wrap .mv_sub_ttl {
    font-family: var(--font-en);
    font-size: calc(24*100vw/750);
    margin-top: calc(12*100vw/750);
    margin-left: calc(56*100vw/750);
    letter-spacing: -0.02em;
  } */
  #all_wrap .mv_sub_ttl {
    font-family: var(--font-en);
    font-size: calc(24*100vw/750);
    margin-top: calc(12*100vw/750);
    margin-left: calc(4*100vw/750);
    letter-spacing: -0.015em;
  }
  _:lang(x)+_:-webkit-full-screen-document, body .mv_sub_ttl {
    letter-spacing: initial !important;
    letter-spacing: 0.003em !important;
  }
  /* _:lang(x)+_:-webkit-full-screen-document, body .mv_sub_ttl {
    letter-spacing: 0.03em !important;
  } */
  #all_wrap .mv_text,
  #all_wrap .mv_coment {
    font-family: var(--font-en);
    font-size: calc(30*100vw/750);
    line-height: 1.46;
    font-weight: 300;
  }
  .mv_text {
    text-align: left;
    margin-top: calc(135*100vw/750);
    margin-left: calc(54*100vw/750);
  }
  .mv_coment {
    text-align: right;
    margin-top: calc(67*100vw/750);
    margin-left: calc(0*100vw/750);
    margin-right: calc(80*100vw/750);
  }
  #all_wrap .mv_text .bold {
    font-weight: 700;
  }
  .df01 {
    width: calc(750*100vw/750);
    margin-top: calc(250*100vw/750);
    display: block;
  }
  .df02 {
    margin-top: calc(165*100vw/750);
  }
  .df03 {
    margin-top: calc(556*100vw/750);
  }
  .img03_area {
    width: calc(750*100vw/750);
    margin-top: calc(230*100vw/750);
  }
  #all_wrap .img03 {
    width: calc(485*100vw/750);
    margin-top: calc(0*100vw/750);
  }
  #all_wrap .df04 {
    display: block;
    width: calc(384*100vw/750);
    justify-content: space-between;
    margin-top: calc(230*100vw/750);
  }
  .img_text {
    width: calc(1247*100vw/750);
    margin-top: calc(-351*100vw/750);
    margin-left: calc(45*100vw/750);
  }
  /* .img09 {
    margin-top: calc(280*100vw/750);
  } */
  .img09 {
    margin-top: calc(227*100vw/750);
    }
  #all_wrap .contents {
    width: calc(750*100vw/750);
    margin-top: calc(230*100vw/750);
  }
  #all_wrap .img10 {
    width: calc(590*100vw/750);
  }
  .img11 {
    width: calc(686*100vw/750);
    margin-top: calc(135*100vw/750);
    margin-left: auto;
    margin-right: 0;
  }
  .action {
    font-size: calc(23*100vw/750);
    margin-top: calc(250*100vw/750);
    padding-bottom: calc(10*100vw/750);
  }


  .slick-arrow.slick-prev,
  .slick-arrow.slick-next {
    display: none !important;
  }
  .slick-dots {
    margin: calc(24*100vw/750) auto 0;
    display: flex;
    justify-content: space-between;
  }
  .slick-dots li {
    margin: 0;
    width: 62px;
    height: 5px;
    background: #A3A3A3;
  }
  .android .slick-dots li {
    width: 58px;
  }
  .slick-dots li button {
    width: 100%;
    height: 5px;
    background: #A3A3A3;
    border-radius: 0px;
    border: 0px !important;
  }
  li.slick-active button#slick-slide-control00 {
    background-color: #272E30;
    animation-name: animation-haniwaman;
    animation-duration: 4s;
  }
  li.slick-active button#slick-slide-control01 {
    background-color: #984630;
    animation-name: animation-haniwaman;
    animation-duration: 4s;
  }
  li.slick-active button#slick-slide-control02 {
    background-color: #FFFFFF;
    animation-name: animation-haniwaman;
    animation-duration: 4s;
  }
  @keyframes animation-haniwaman {
    0% {
      width: 0%;
      transform: translateX(-31px);
    }
    100% {
      width: 100%;
    }
    
  }


}