﻿@charset "UTF-8";
.header  {
  position: fixed;
  top: 0;
} 
html {
	font-size: 62.5%;
  }
  .all_wrap {
	width: 100%;
  margin-top: 12rem;
  overflow: hidden;
  }
  .all_wrap .sp_only {
	display: none !important;
  }
  .all_wrap img {
	width: 100%;
  }
  .all_wrap li {
    display: inline-block;
    border-bottom: solid 1.5px #000;
    line-height: 0.7;
  }
  .element {
    font-family: var(--font-jp); /* 日本語フォントの変数 */
    font-family: var(--font-en); /* 英語フォントの変数 */
  }

  /*************************************** メイン箇所の設定 ***************************************/
  .all_wrap .mv {
    position: relative;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  .all_wrap .mv_img {
    width: 120rem;
    margin: 0 auto;
  }
  .all_wrap .mv_read {
    margin-top: 9.6rem;
    font-size: 1.4rem;
    line-height: 2;
    letter-spacing: 0.1em;
    font-family: var(--font-jp);
    font-weight: 500;
    font-feature-settings: "palt";
    color: #000;
  }
  /*************************************** 各セクションの設定 ***************************************/
  .all_wrap .sec01 {
    margin: 11.8rem auto 0rem;
    width: 120rem;
  }
  .all_wrap .sec01 .contents {
    width: 50rem;
  }
  .all_wrap .sec02 {
    width: 100%;
    background: #808080;
    margin-top: 12rem;
  }
  .all_wrap .sec02 .contents {
    width: 120rem;
    margin: 0 auto;
  }
  .all_wrap .sec03 {
    margin: 13.7rem auto 0rem;
    width: 140rem;
  }
  .all_wrap .sec03 .contents {
    width: 50rem;
    margin-right: 10rem;
  }
  .all_wrap .sec04 {
    width: 100%;
    background: #808080;
    margin-top: 12rem;
  }
  .all_wrap .sec04 .contents {
    width: 120rem;
    margin: 0 auto;
  }
  .all_wrap .sec05 {
    width: 100rem;
    margin: 11.7rem auto 0rem;
  }
  /*************************************** 横向きの指定の設定 ***************************************/
  .all_wrap .df_area {
    display: flex;
    justify-content: space-between;
  }
  .all_wrap .sec03 .df_area,
  .all_wrap .sec04 .df_area {
    flex-direction: row-reverse;
  }
  .all_wrap .sec05 .df_area {
    position: relative;
    width: fit-content;
    justify-content: flex-start;
    margin-left: 41.6rem;
    border-bottom: solid 1px #000;
    z-index: 2;
  }
  .all_wrap .sec02 .t_area,
  .all_wrap .sec04 .t_area {
    width: 38rem;
  }
  .all_wrap .sec02 .t_area {
    margin-top: 15.3rem;
    margin-right: 7.1rem;
  }
  .all_wrap .sec04 .t_area {
    margin-top: 15.1rem;
    margin-left: 4rem;
  }
  /*************************************** 画像の設定 ***************************************/
  .all_wrap .img01,
  .all_wrap .img04 {width: 50rem;}
  .all_wrap .img02 {width: 58rem;}
  .all_wrap .img05 {width: 70rem;}
  .all_wrap .img03,
  .all_wrap .img06 {width: 63rem;}
  .all_wrap .img07,
  .all_wrap .img08,
  .all_wrap .img09 {width: 33.4rem;}

  .all_wrap .img01,
  .all_wrap .img04 {
    margin-top: -0.7rem;
  }
.all_wrap .img02,
.all_wrap .img05 {
  margin-top: 0.3rem;
}
.all_wrap .img03 {
  margin-top: 7.8rem;
  margin-left: 4rem;
  margin-bottom: 7.7rem;
}
.all_wrap .img06 {
  margin-top: 7.7rem;
  margin-right: 7.2rem;
  margin-bottom: 7.8rem;
}
  /*************************************** アイテム画像の設定 ***************************************/
.all_wrap .d_text {
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  line-height: 2.07;
  font-family: var(--font-jp);
  font-feature-settings: "palt";
  text-align: justify;
}
.all_wrap .sec01 .d_text,
.all_wrap .sec03 .d_text {
  margin-top: 4.2rem;
}
.all_wrap .sec02 .d_text,
.all_wrap .sec04 .d_text {
  letter-spacing: 0.101em;
  color: #fff;
}
  /*************************************** 英語のタイトルテキストの設定 ***************************************/
  .all_wrap .ttl {
    font-size: 4.6rem;
    line-height: 1;
    letter-spacing: 0.06em;
    font-family: trajan-pro-3, serif;
    font-feature-settings: "palt";
  }
  .all_wrap .sec03 .ttl {
    text-align: right;
  }
  /*************************************** クレジットの設定 ***************************************/
  .all_wrap .credit {
    font-size: 1.2rem;
    line-height: 2.1;
    letter-spacing: 0.045em;
    font-family: var(--font-en);
    font-feature-settings: "palt";
    color: #000;
  }
  .all_wrap .sec01 .credit {
    margin-top: 3.4rem;
  }
  .all_wrap .sec02 .credit,
  .all_wrap .sec04 .credit {
    margin-top: 2.7rem;
    color: #fff;
  }
  .all_wrap .sec02 li,
  .all_wrap .sec04 li {
    border-bottom: solid 1.5px #fff;
  }
  .all_wrap .sec03 .credit {
    margin-top: 3.3rem;
  }
  /*************************************** プライスの設定 ***************************************/
  .all_wrap .sec01 .price02,
  .all_wrap .sec01 .price03 {
    margin-left: 0.9rem;
  }
  .all_wrap .sec03 .price02 {
    margin-left: 1.5rem;
  }
  .all_wrap .sec03 .price03 {
    margin-left: 1.1rem;
  }

  .all_wrap .name_e_ttl {
    font-size: 2.5rem;
    letter-spacing: 0.035em;
    font-family: var(--font-en);
    font-feature-settings: "palt";
  }
  .all_wrap .name_j_ttl {
    margin-top: 0.1rem;
    margin-left: 1.5rem;
    font-size: 1.4rem;
    line-height: 2;
    letter-spacing: 0.075em;
    font-family: var(--font-en);
    font-feature-settings: "palt";
  }
  .all_wrap .img_area {
    display: flex;
    margin-top: -2.3rem;
  }
  /*************************************** プライスの設定 ***************************************/
  .all_wrap .view_all {
    margin: 7.8rem auto 16rem;
    padding-bottom: 0.4rem;
    width: fit-content;
    font-size: 1.8rem;
    line-height: 1;
    letter-spacing: 0.037em;
    font-family: var(--font-en);
    font-feature-settings: "palt";
    text-align: center;
    border-bottom: solid 1px #1A1311;
    color: #000;
  }
  .all_wrap .fade_up {
    opacity: 0;
    -webkit-transform: translate(0, 30px);
    -ms-transform: translate(0, 30px);
    transform: translate(0, 30px);
    -webkit-transition: opacity 1.3s, -webkit-transform 1.3s cubic-bezier(0, 0, 0.2, 1);
    transition: opacity 1.3s, -webkit-transform 1.3s cubic-bezier(0, 0, 0.2, 1);
    -o-transition: opacity 1.3s, transform 1.3s cubic-bezier(0, 0, 0.2, 1);
    transition: opacity 1.3s, transform 1.3s cubic-bezier(0, 0, 0.2, 1);
    transition: opacity 1.3s, transform 1.3s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 1.3s cubic-bezier(0, 0, 0.2, 1);
  }
  .all_wrap .fade_up.active {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }


@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 {
    margin-top: calc(106*100vw/750);
  }
  .all_wrap .pc_only {
	  display: none !important;
  }
  .all_wrap .sp_only {
	  display: block !important;
  }
  /*************************************** メイン箇所の設定 ***************************************/
  .all_wrap .mv_read {
    margin-top: calc(90* (100vw / 750));
    font-size: calc(23* (100vw / 750));
    line-height: 1.95;
    letter-spacing: 0.05em;
  }
  .all_wrap .mv_img {
    width: calc(750*100vw/750);
  }
  /*************************************** 各セクションの設定 ***************************************/
  .all_wrap .sec01 {
    margin-top: calc(133*100vw/750);
    width: calc(750*100vw/750);
  }
  .all_wrap .sec01 .contents {
    width: calc(650*100vw/750);
    margin: 0 auto;
  }
  .all_wrap .sec02 {
    margin-top: calc(81*100vw/750);
  }
  .all_wrap .sec02 .contents {
    width: calc(650*100vw/750);
    padding-top: calc(80*100vw/750);
    padding-bottom: calc(80*100vw/750);
  }
  .all_wrap .sec03 {
    margin-top: calc(186*100vw/750);
    width: calc(750*100vw/750);
  }
  .all_wrap .sec03 .contents {
    width: calc(650*100vw/750);
    margin: 0 auto;
  }
  .all_wrap .sec04 {
    margin-top: calc(80*100vw/750);
  }
  .all_wrap .sec04 .contents {
    width: calc(650*100vw/750);
    padding-top: calc(80*100vw/750);
    padding-bottom: calc(80*100vw/750);
  }
  .all_wrap .sec05 {
    width: calc(750*100vw/750);
    margin-top: calc(149*100vw/750);
  }

  /*************************************** 横向きの指定の設定 ***************************************/
  .all_wrap .df_area {
    display: block;
  }
  .all_wrap .sec03 .df_area,
  .all_wrap .sec04 .df_area {
    flex-direction: row;
  }
  .all_wrap .sec05 .df_area {
    display: flex;
    position: relative;
    width: fit-content;
    justify-content: flex-start;
    margin-left: calc(226*100vw/750);
  }
  .all_wrap .sec02 .t_area,
  .all_wrap .sec04 .t_area {
    width: calc(650*100vw/750);
  }
  .all_wrap .sec02 .t_area,
  .all_wrap .sec04 .t_area {
    margin-top: calc(70*100vw/750);
  }
  .all_wrap .sec02 .t_area {
    margin-right: calc(0*100vw/750);
  }
  .all_wrap .sec04 .t_area {
    margin-left: calc(0*100vw/750);
  }
  /*************************************** 画像の設定 ***************************************/
  .all_wrap .img01,
  .all_wrap .img03,
  .all_wrap .img04, 
  .all_wrap .img06 {width: calc(650*100vw/750);}
  .all_wrap .img02, 
  .all_wrap .img05 {width: calc(750*100vw/750);}
  .all_wrap .img07,
  .all_wrap .img08,
  .all_wrap .img09 {width: calc(630*100vw/750);}
  .all_wrap .img01 {
    margin-top: calc(-10*100vw/750);
  }
  .all_wrap .img02,
  .all_wrap .img05 {
    margin-top: calc(98*100vw/750);
  }
  .all_wrap .img03,
  .all_wrap .img06 {
    margin-top: calc(0*100vw/750);
    margin-left: calc(0*100vw/750);
    margin-bottom: calc(0*100vw/750);
  }
  .all_wrap .img04 {
    margin-top: calc(-9*100vw/750);
  }
  /*************************************** アイテム画像の設定 ***************************************/
  .all_wrap .d_text {
    font-size: calc(23*(100vw/750));
    letter-spacing: 0.076em;
    line-height: 1.95;
  }
  .all_wrap .sec01 .d_text,
  .all_wrap .sec03 .d_text {
    margin-top: calc(70*100vw/750);
  }
  .all_wrap .sec02 .d_text {
    line-height: 2;
  }
  _:lang(x)+_:-webkit-full-screen-document, .all_wrap .sec02 .d_text {
    letter-spacing: 0.09em;
  }
  _:lang(x)+_:-webkit-full-screen-document, .all_wrap .sec03 .d_text {
    letter-spacing: 0.064em;
  }
  .all_wrap .sec04 .d_text {
    letter-spacing: 0.06em;
    line-height: 1.77;
    font-size: calc(26*(100vw/750));
  }
  _:lang(x)+_:-webkit-full-screen-document, .all_wrap .sec04 .d_text {
    letter-spacing: 0.05em;
  }
  /*************************************** 英語のタイトルテキストの設定 ***************************************/
  .all_wrap .ttl {
    font-size: calc(60*(100vw/750));
    letter-spacing: 0.042em;
  }
  .all_wrap .sec03 .ttl {
    text-align: left;
  }
  /*************************************** クレジットの設定 ***************************************/
  .all_wrap .credit {
    padding-top: calc(0*100vw/750);
    font-size: calc(25*(100vw/750));
    line-height: 1.84;
    letter-spacing: 0.046em;
    font-family: var(--font-en);
    font-feature-settings: "palt";
    color: #000;
  }
  .all_wrap .sec01 .credit {
    margin-top: calc(54*100vw/750);
    width: calc(680*100vw/750);
  }
  .all_wrap .sec02 .credit {
    margin-top: calc(60*100vw/750);
    color: #fff;
  }
  .all_wrap .sec02 li,
  .all_wrap .sec04 li {
    border-bottom: solid 1.5px #fff;
  }
  .all_wrap .sec03 .credit {
    margin-top: calc(54*100vw/750);
    width: calc(540*100vw/750);
  }
  .all_wrap .sec04 .credit {
    margin-top: calc(60*100vw/750);
    color: #fff;
  }
  /*************************************** プライスの設定 ***************************************/
  .all_wrap .sec01 .price02 {
    margin-left: calc(16*100vw/750);
  }
  .all_wrap .sec01 .price03,
  .all_wrap .sec03 .price03 {
    margin-top: calc(14*100vw/750);
  }
  .all_wrap .sec01 .price03,
  .all_wrap .sec03 .price02,
  .all_wrap .sec03 .price03 {
    margin-left: calc(0*100vw/750);
  }
  .all_wrap .name_e_ttl {
    font-size: calc(45*(100vw/750));
    font-weight: 600;
  }
  .all_wrap .name_j_ttl {
    margin-top: calc(7*100vw/750);
    margin-left: calc(23*100vw/750);
    font-size: calc(23*(100vw/750));
    line-height: 2;
  }
  .all_wrap .img_area {
    position: relative;
    display: block;
    width: calc(630*100vw/750);
    margin: 0 auto;
    margin-top: calc(-76*100vw/750);
  }
  /* .all_wrap .slick-prev,
  .all_wrap .slick-next {
    font-size: 0px;
    position: absolute;
    display: none !important;
    top: 41rem;
  } */
  .slick-prev:before {
    content:'PREV';
    color: #fff;
    opacity: 1;
    font-size: 14px;
  }
  .slick-next:before {
    content:'NEXT';
    color: #fff;
    opacity: 1;
    font-size: 14px;
  }
   
  .slick-prev {
    position: absolute;
    left: -3rem !important;
    z-index: 1;
    width: 14px;
    height: 26px;
    padding: 0px;
    font-size: 0px;
    background-image: url(../img/prev_img.svg);
    transition: .4s;
    top: 39.2rem;
    background-color: #fff;
    border: 0px;
    background-repeat: no-repeat;
  }
  .slick-next {
    position: absolute;
    right: -3rem !important;
    width: 14px;
    height: 26px;
    padding: 0px;
    font-size: 0px;
    background-image: url(../img/next_img.svg);
    transition: .4s;
    top: 39.2rem;
    background-color: #fff;
    border: 0px;
    background-repeat: no-repeat;
  }
  /* .all_wrap .slick-next::before {
    width: 10px;
    height: 1px;
    background: #000;
  }
  .all_wrap .slick-prev::before {
    width: 10px;
    height: 1px;
    background: #000;
  }
  .all_wrap .slick-next::after {
    width: 10px;
    height: 1px;
    background: #000;
  }
  .all_wrap .slick-prev::after {
    width: 10px;
    height: 1px;
    background: #000;
  } */
  .all_wrap .view_all {
    font-size: calc(30*(100vw/750));
    line-height: 1;
    margin: calc(43*(100vw/750)) auto calc(84*(100vw/750));
    border-bottom: solid 1px #000;
  }

}

