@charset "UTF-8";
/* ===============================================
    ! Foundation !
=============================================== */
/* =====================================
    * setting for animation style *
===================================== */
.js-fadeIn {
  opacity: 0;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
  /* y軸方向に下げておくことで、下から上に上がってくるようなアニメーションになります */
  -webkit-transition: all 1500ms;
  transition: all 1500ms;
}

.js-fadeIn.js-scrollIn {
  opacity: 1;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
}

/* setting for slick */
.item-slider {
  opacity: 0;
  -webkit-transition: opacity .3s linear;
  transition: opacity .3s linear;
}

.item-slider.slick-initialized {
  opacity: 1;
}

/* =====================================
    * setting for base style    *
    *               of the page *
===================================== */
.main-area .main-inner {
  color: #000;
  font-family: "Noto Serif JP", serif;
  width: 100%;
}

img {
  width: 100%;
}

a {
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

ul, li {
  list-style: none;
}

/* for responsive objects */
.sp-component {
  display: block;
}

.pc-component {
  display: none;
}

@media only screen and (min-device-width: 560px) {
  .sp-component {
    display: none;
  }
  .pc-component {
    display: block;
  }
}

/* ===============================================
    ! Layout !
=============================================== */
/* ===============================================
    ! Object !
=============================================== */
/* viewall__btn */
.checkall__btn {
  border: solid 1px #000000;
  display: block;
  height: 74px;
  width: 380px;
  /* style of text */
  color: #000;
  font-family: freight-display-pro, serif;
  font-size: 27px;
  letter-spacing: 1.62px;
  line-height: 74px;
  text-align: center;
}

/* ===============================================
    *  Style of PC *
=============================================== */
main {
  /* background-image: url("../../imgs/page_pc.jpg"); */
  background-position-x: 35px;
  background-position-y: -118px;
  background-repeat: no-repeat;
  background-size: 1400px;
}

.main-inner {
  -webkit-font-feature-settings: normal;
          font-feature-settings: normal;
  margin: auto;
  min-width: 1040px;
}

/* ===============================================
    * style of heading *
=============================================== */
.heading {
  display: block;
  margin-top: 78px;
}

.heading-title {
  color: #2d251f;
  font-size: 43px;
  letter-spacing: 2.9px;
  padding-left: 6px;
  text-align: center;
}

.heading .accent {
  color: #a04333;
  font-size: 74px;
}

.heading-desc {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.1px;
  line-height: 2.15;
  padding: 42px 0 0 10px;
  text-align: center;
}

/* ===============================================
    * common style for each section *
=============================================== */
.sec-title {
  font-family: freight-display-pro, serif;
  font-size: 80px;
  letter-spacing: 5px;
  text-align: center;
}

.sec-desc {
  font-size: 20px;
  letter-spacing: 1.6px;
  line-height: 1.7;
  text-align: center;
}

/* for main image */
.coordinate {
  display: block;
  position: relative;
}

.coordinate-txt {
  font-family: freight-display-pro, serif;
  font-size: 44px;
  letter-spacing: 1.32px;
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
  z-index: 1;
}

.coordinate-num {
  font-size: 53px;
  letter-spacing: 1.59px;
}

.coordinate::after {
  content: "";
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  z-index: -1;
}

/* for item description */
.coordinate-desc {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.8px;
  line-height: 1.9;
  text-align: justify;
}

.credit__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 auto 0 0;
}

.credit > a {
  color: #000;
  font-family: quasimoda, sans-serif;
  font-size: 12px;
  letter-spacing: 1.2px;
  line-height: 2;
}

.credit:nth-child(odd) {
  margin-right: 8px;
}

/* for item slider */
.item-slider {
  margin: auto;
  width: 890px;
}

.item-slider__container {
  height: 380px;
  margin: 70px auto 0;
  padding-bottom: 30px;
  width: 100%;
}

.item-slider.slick-initialized .slick-slide {
  margin: 0 6px;
  width: 210px !important;
}

.item-slider .slick-prev, .item-slider .slick-next {
  top: 50% !important;
}

.slick-prev {
  left: -47px !important;
  height: 50px;
  width: 18px;
}

.slick-prev::before {
  content: "" !important;
  background: url("../../imgs/plugin/slick/arrow_left.png");
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 100%;
}

.slick-next {
  right: -35px !important;
  height: 50px;
  width: 18px;
}

.slick-next::before {
  content: "" !important;
  background: url("../../imgs/plugin/slick/arrow_right.png");
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 100%;
}

.viewmore__btn {
  border-bottom: solid 1px #000;
  color: #000;
  display: block;
  font-family: freight-display-pro, serif;
  font-size: 18px;
  letter-spacing: 1.08px;
  margin: 35px auto 0;
  padding-bottom: 10px;
  text-align: center;
  width: 126px;
}

/* ===============================================
    * style of sec1-RED *
=============================================== */
.sec-red {
  display: block;
}

.sec-red .sec__container--primary {
  margin: 94px auto 0;
}

.sec-red .sec__container--primary .sec-title {
  color: #99170d;
}

.sec-red .sec__container--primary .sec-desc {
  padding-top: 30px;
  padding: 12px 0 0 18px;
}

.sec-red .sec__container--primary .coordinate {
  margin: 45px 394px 0 auto;
  width: 420px;
}

.sec-red .sec__container--primary .coordinate-txt {
  position: absolute;
  top: 166px;
  right: -176px;
  bottom: auto;
  left: auto;
  color: #99170d;
}

.sec-red .sec__container--primary .coordinate::after {
  content: "";
  position: absolute;
  top: 250px;
  right: 328px;
  bottom: auto;
  left: auto;
  background-image: url("../../imgs/01_red/red_img1_bg.jpg");
  height: 600px;
  width: 400px;
}

.sec-red .sec__container--primary .coordinate1_2__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  margin: 80px 112px 0 auto;
}

.sec-red .sec__container--primary .coordinate1_2-img {
  position: relative;
  z-index: 2;
  display: block;
  width: 400px;
}

.sec-red .sec__container--primary .desc-credit__container {
  margin: auto 82px 0 auto;
  width: 287px;
}

.sec-red .sec__container--primary .credit__container {
  margin: 6px auto 0 0;
  padding-bottom: 15px;
}

.sec-red .sec__container--primary _:-ms-lang(x)::-ms-backdrop, .sec-red .sec__container--primary .desc-credit__container {
  margin: 440px 82px 0 auto;
}

.sec-red .sec__container--secondary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  margin: 200px auto 0;
}

.sec-red .sec__container--secondary .coordinate2_1__container {
  margin: auto 106px 0 180px;
  width: 450px;
}

.sec-red .sec__container--secondary .coordinate2_1__container .desc-credit__container {
  margin: 25px auto 0 0;
}

.sec-red .sec__container--secondary .coordinate2_1__container .credit__container {
  margin-top: 8px;
  padding-right: 150px;
}

.sec-red .sec__container--secondary .coordinate-txt {
  position: absolute;
  top: 166px;
  right: -176px;
  bottom: auto;
  left: auto;
  color: #99170d;
}

.sec-red .sec__container--secondary .coordinate::after {
  content: "";
  position: absolute;
  top: -100px;
  right: 356px;
  bottom: auto;
  left: auto;
  background-image: url("../../imgs/01_red/red_img3_bg.jpg");
  height: 600px;
  width: 400px;
}

.sec-red .sec__container--secondary .coordinate2_2-img {
  position: relative;
  z-index: 2;
  display: block;
  margin: 255px 0 0 auto;
  width: 380px;
}

/* ===============================================
    * style of sec2-MUSTARD *
=============================================== */
.sec-mustard {
  display: block;
}

.sec-mustard .sec__container--primary {
  margin: 105px auto 0;
}

.sec-mustard .sec__container--primary .sec-title {
  color: #c18706;
}

.sec-mustard .sec__container--primary .sec-desc {
  letter-spacing: 1px;
  padding: 11px 0 0 7px;
}

.sec-mustard .sec__container--primary .coordinate {
  margin: 42px auto 0;
  width: 450px;
}

.sec-mustard .sec__container--primary .coordinate-txt {
  position: absolute;
  top: 165px;
  right: -177px;
  bottom: auto;
  left: auto;
  color: #c18706;
}

.sec-mustard .sec__container--primary .coordinate::after {
  content: "";
  position: absolute;
  top: 172px;
  right: 300px;
  bottom: auto;
  left: auto;
  background-image: url("../../imgs/02_mustard/mustard_img1_bg.jpg");
  height: 675px;
  width: 448px;
}

.sec-mustard .sec__container--primary .desc-credit__container {
  margin: 55px 206px 0 auto;
  width: 327px;
}

.sec-mustard .sec__container--primary .credit__container {
  margin-top: 8px;
}

.sec-mustard .sec__container--secondary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 194px auto 0;
}

.sec-mustard .sec__container--secondary .coordinate {
  margin: 0 0 0 200px;
  width: 421px;
}

.sec-mustard .sec__container--secondary .coordinate-txt {
  position: absolute;
  top: 165px;
  right: -177px;
  bottom: auto;
  left: auto;
  color: #c18706;
}

.sec-mustard .sec__container--secondary .coordinate::after {
  content: "";
  position: absolute;
  top: -80px;
  right: -322px;
  bottom: auto;
  left: auto;
  background-image: url("../../imgs/02_mustard/mustard_img2_bg.jpg");
  height: 600px;
  width: 400px;
}

.sec-mustard .sec__container--secondary .desc-credit__container {
  margin: 576px auto 0 60px;
  width: 320px;
}

.sec-mustard .sec__container--secondary .credit__container {
  margin-top: 10px;
}

.sec-mustard .sec-slider__container {
  margin-top: 64px;
}

.sec-mustard .viewmore__btn {
  margin-top: 40px;
}

/* ===============================================
    * style of sec3-NAVY *
=============================================== */
.sec-navy {
  display: block;
}

.sec-navy .sec__container--primary {
  margin: 84px auto 0;
}

.sec-navy .sec__container--primary .sec-title {
  color: #121933;
}

.sec-navy .sec__container--primary .sec-desc {
  letter-spacing: 0.6px;
  padding: 10px 0 0 19px;
}

.sec-navy .sec__container--primary .coordinate {
  margin: 47px auto 0;
  width: 450px;
}

.sec-navy .sec__container--primary .coordinate-txt {
  position: absolute;
  top: 164px;
  right: -177px;
  bottom: auto;
  left: auto;
  color: #121933;
}

.sec-navy .sec__container--primary .coordinate::after {
  content: "";
  position: absolute;
  top: 300px;
  right: 348px;
  bottom: auto;
  left: auto;
  background-image: url("../../imgs/03_navy/navy_img1_bg.jpg");
  height: 600px;
  width: 400px;
}

.sec-navy .sec__container--primary .coordinate1_2__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  margin: 78px 88px 0 auto;
}

.sec-navy .sec__container--primary .coordinate1_2-img {
  display: block;
  width: 400px;
}

.sec-navy .sec__container--primary .desc-credit__container {
  margin: 457px 78px 0 auto;
  width: 304px;
}

.sec-navy .sec__container--primary .coordinate-desc {
  letter-spacing: 1.5px;
}

.sec-navy .sec__container--primary .credit__container {
  margin-top: 8px;
}

.sec-navy .sec__container--secondary {
  margin: 122px auto 0;
}

.sec-navy .sec__container--secondary .coordinate {
  margin: 0 auto auto 102px;
  width: 450px;
}

.sec-navy .sec__container--secondary .coordinate-txt {
  position: absolute;
  top: 164px;
  right: -177px;
  bottom: auto;
  left: auto;
  color: #121933;
}

.sec-navy .sec__container--secondary .coordinate::after {
  content: "";
  position: absolute;
  top: 130px;
  right: -335px;
  bottom: auto;
  left: auto;
  background-image: url("../../imgs/03_navy/navy_img3_bg.jpg");
  height: 630px;
  width: 420px;
}

.sec-navy .sec__container--secondary .coordinate2_2__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  margin: -196px 98px auto auto;
}

.sec-navy .sec__container--secondary .coordinate2_2-img {
  position: relative;
  z-index: 2;
  display: block;
  width: 400px;
}

.sec-navy .sec__container--secondary .desc-credit__container {
  margin: 450px 80px auto auto;
  width: 306px;
}

.sec-navy .sec__container--secondary .credit__container {
  margin-top: 10px;
}

.sec-navy .sec-slider__container {
  margin-top: 55px;
}

.sec-navy .viewmore__btn {
  margin-top: 40px;
}

/* ===============================================
    * style of checkall__btn *
=============================================== */
.checkall__btn {
  position: relative;
  left: 3px;
  margin: 48px auto 140px;
}

/* ===============================================
    * Style for Tablet *
=============================================== */