@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: calc(160 * (100vw / 750));
  width: calc(676 * (100vw / 750));
  /* style of text */
  color: #000;
  font-family: freight-display-pro, serif;
  font-size: calc(51 * (100vw / 750));
  letter-spacing: calc(3.06 * (100vw / 750));
  line-height: calc(160 * (100vw / 750));
  text-align: center;
}

/* =====================================
    *  Style of SP *
===================================== */
.main-inner {
  -webkit-font-feature-settings: normal;
          font-feature-settings: normal;
  overflow-x: hidden;
  /* background-image: url("../../imgs/page_sp_01.jpg"); */
  /* background-position-y: -74px; */
  /* background-image: url("../../imgs/page_sp_02.jpg"); */
  /* background-position-y: 5081px; */
  background-repeat: no-repeat;
  background-size: contain;
  /* opacity: 0.6; */
}

/* ===============================================
    * style of heading *
=============================================== */
.heading {
  display: block;
  margin-top: calc(66 * (100vw / 750));
}

.heading-title {
  color: #2d251f;
  font-size: calc(58 * (100vw / 750));
  letter-spacing: calc(4 * (100vw / 750));
  text-align: center;
}

.heading .accent {
  color: #a04333;
  font-size: calc(102 * (100vw / 750));
}

.heading-desc {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  font-size: calc(27 * (100vw / 750));
  font-weight: 500;
  letter-spacing: calc(1.35 * (100vw / 750));
  line-height: 2.23;
  padding: calc(40 * (100vw / 750)) 0 0 calc(12 * (100vw / 750));
  text-align: center;
}

.heading::after {
  content: "";
  background-color: #000;
  display: block;
  height: 1px;
  margin: calc(104 * (100vw / 750)) auto 0;
  width: calc(640 * (100vw / 750));
}

/* ===============================================
    * common style for each section *
=============================================== */
.sec-title {
  font-family: freight-display-pro, serif;
  font-size: calc(91 * (100vw / 750));
  letter-spacing: calc(7.19 * (100vw / 750));
  text-align: center;
}

.sec-desc {
  font-size: calc(32 * (100vw / 750));
  letter-spacing: calc(1.2 * (100vw / 750));
  line-height: 1.75;
  padding-left: calc(8 * (100vw / 750));
  text-align: center;
}

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

.coordinate-txt {
  font-family: freight-display-pro, serif;
  font-size: calc(64 * (100vw / 750));
  letter-spacing: calc(1.92 * (100vw / 750));
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
  z-index: 1;
}

.coordinate-num {
  font-size: calc(78 * (100vw / 750));
  letter-spacing: calc(2.34 * (100vw / 750));
}

.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: calc(24 * (100vw / 750));
  font-weight: 500;
  letter-spacing: calc(1.2 * (100vw / 750));
  line-height: 2;
  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: calc(24 * (100vw / 750));
  letter-spacing: calc(2 * (100vw / 750));
  line-height: 1.75;
}

.credit:nth-child(odd) {
  margin-right: calc(22 * (100vw / 750));
}

/* for item slider */
.item-slider__container {
  background-color: #efefef;
  height: calc(686 * (100vw / 750));
  margin-top: calc(100 * (100vw / 750));
  padding-top: calc(90 * (100vw / 750));
}

.item-slider.slick-initialized .slick-slide {
  margin: 0 calc(8 * (100vw / 750));
}

.item-slider .slick-list {
  height: calc(390 * (100vw / 750));
}

.item-slider .slick-prev {
  top: 50% !important;
  left: calc(30 * (100vw / 750)) !important;
  z-index: 2;
  height: calc(50 * (100vw / 750));
  width: calc(18 * (100vw / 750));
}

.item-slider .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%;
}

.item-slider .slick-next {
  top: 50% !important;
  right: calc(30 * (100vw / 750)) !important;
  z-index: 2;
  height: calc(50 * (100vw / 750));
  width: calc(18 * (100vw / 750));
}

.item-slider .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: calc(28 * (100vw / 750));
  letter-spacing: calc(1.68 * (100vw / 750));
  margin: calc(54 * (100vw / 750)) auto 0;
  padding-bottom: calc(14 * (100vw / 750));
  text-align: center;
  width: calc(180 * (100vw / 750));
}

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

.sec-red .sec__container--primary {
  margin: calc(90 * (100vw / 750)) auto 0;
}

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

.sec-red .sec__container--primary .sec-desc {
  padding-top: calc(20 * (100vw / 750));
}

.sec-red .sec__container--primary .coordinate {
  margin-top: calc(170 * (100vw / 750));
  width: calc(600 * (100vw / 750));
}

.sec-red .sec__container--primary .coordinate-txt {
  position: absolute;
  top: calc(228 * (100vw / 750));
  right: calc(-260 * (100vw / 750));
  bottom: auto;
  left: auto;
  color: #99170d;
}

.sec-red .sec__container--primary .coordinate::after {
  content: "";
  position: absolute;
  top: calc(-100 * (100vw / 750));
  right: calc(-150 * (100vw / 750));
  bottom: auto;
  left: auto;
  background-image: url("../../imgs/01_red/red_img1_bg_sp.jpg");
  height: calc(900 * (100vw / 750));
  width: calc(600 * (100vw / 750));
}

.sec-red .sec__container--primary .coordinate1_2-img {
  display: block;
  margin: calc(60 * (100vw / 750)) auto 0;
  width: calc(600 * (100vw / 750));
}

.sec-red .sec__container--primary .desc-credit__container {
  margin: calc(48 * (100vw / 750)) auto 0;
  padding: 0 calc(38 * (100vw / 750));
}

.sec-red .sec__container--primary .credit__container {
  margin-top: calc(20 * (100vw / 750));
}

.sec-red .sec__container--secondary {
  margin: calc(132 * (100vw / 750)) auto 0;
}

.sec-red .sec__container--secondary .coordinate {
  margin: auto calc(58 * (100vw / 750)) 0 auto;
  width: calc(563 * (100vw / 750));
}

.sec-red .sec__container--secondary .coordinate-txt {
  position: absolute;
  top: calc(234 * (100vw / 750));
  right: calc(-254 * (100vw / 750));
  bottom: auto;
  left: auto;
  color: #99170d;
}

.sec-red .sec__container--secondary .coordinate::after {
  content: "";
  position: absolute;
  top: calc(450 * (100vw / 750));
  right: calc(92 * (100vw / 750));
  bottom: auto;
  left: auto;
  background-image: url("../../imgs/01_red/red_img2_bg_sp.jpg");
  height: calc(900 * (100vw / 750));
  width: calc(600 * (100vw / 750));
}

.sec-red .sec__container--secondary .coordinate2_2-img {
  display: block;
  margin: calc(60 * (100vw / 750)) 0 0 auto;
  width: calc(450 * (100vw / 750));
}

.sec-red .sec__container--secondary .desc-credit__container {
  margin: calc(48 * (100vw / 750)) auto 0;
  padding: 0 calc(38 * (100vw / 750));
}

.sec-red .sec__container--secondary .credit__container {
  margin-top: calc(16 * (100vw / 750));
}

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

.sec-mustard .sec__container--primary {
  margin: calc(144 * (100vw / 750)) auto 0;
}

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

.sec-mustard .sec__container--primary .sec-desc {
  padding-top: calc(20 * (100vw / 750));
  padding-left: 0;
}

.sec-mustard .sec__container--primary .coordinate {
  margin: calc(68 * (100vw / 750)) calc(54 * (100vw / 750)) 0 auto;
  width: calc(562 * (100vw / 750));
}

.sec-mustard .sec__container--primary .coordinate-txt {
  position: absolute;
  top: calc(228 * (100vw / 750));
  right: calc(-256 * (100vw / 750));
  bottom: auto;
  left: auto;
  color: #c18706;
}

.sec-mustard .sec__container--primary .coordinate::after {
  content: "";
  position: absolute;
  top: calc(250 * (100vw / 750));
  right: calc(137 * (100vw / 750));
  bottom: auto;
  left: auto;
  background-image: url("../../imgs/02_mustard/mustard_img1_bg_sp.jpg");
  height: calc(840 * (100vw / 750));
  width: calc(560 * (100vw / 750));
}

.sec-mustard .sec__container--primary .desc-credit__container {
  margin: calc(44 * (100vw / 750)) auto 0;
  padding: 0 calc(38 * (100vw / 750));
}

.sec-mustard .sec__container--primary .credit__container {
  margin-top: calc(20 * (100vw / 750));
}

.sec-mustard .sec__container--secondary {
  margin: calc(236 * (100vw / 750)) auto 0;
}

.sec-mustard .sec__container--secondary .coordinate {
  margin: auto auto 0 calc(37 * (100vw / 750));
  width: calc(600 * (100vw / 750));
}

.sec-mustard .sec__container--secondary .coordinate-txt {
  position: absolute;
  top: calc(228 * (100vw / 750));
  right: calc(-258 * (100vw / 750));
  bottom: auto;
  left: auto;
  color: #c18706;
}

.sec-mustard .sec__container--secondary .coordinate::after {
  content: "";
  position: absolute;
  top: calc(-100 * (100vw / 750));
  right: calc(-112 * (100vw / 750));
  bottom: auto;
  left: auto;
  background-image: url("../../imgs/02_mustard/mustard_img2_bg_sp.jpg");
  height: calc(844 * (100vw / 750));
  width: calc(562 * (100vw / 750));
}

.sec-mustard .sec__container--secondary .desc-credit__container {
  margin: calc(48 * (100vw / 750)) auto 0;
  padding: 0 calc(38 * (100vw / 750));
}

.sec-mustard .sec__container--secondary .credit__container {
  margin-top: calc(20 * (100vw / 750));
}

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

.sec-navy .sec__container--primary {
  margin: calc(140 * (100vw / 750)) auto 0;
}

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

.sec-navy .sec__container--primary .sec-desc {
  letter-spacing: calc(2 * (100vw / 750));
  padding-top: calc(15 * (100vw / 750));
  padding-left: 0;
}

.sec-navy .sec__container--primary .coordinate {
  margin: calc(168 * (100vw / 750)) 0 0 auto;
  width: calc(600 * (100vw / 750));
}

.sec-navy .sec__container--primary .coordinate-txt {
  position: absolute;
  top: calc(230 * (100vw / 750));
  right: calc(-202 * (100vw / 750));
  bottom: auto;
  left: auto;
  color: #121933;
}

.sec-navy .sec__container--primary .coordinate::after {
  content: "";
  position: absolute;
  top: calc(-100 * (100vw / 750));
  right: calc(150 * (100vw / 750));
  bottom: auto;
  left: auto;
  background-image: url("../../imgs/03_navy/navy_img1_bg_sp.jpg");
  height: calc(900 * (100vw / 750));
  width: calc(600 * (100vw / 750));
}

.sec-navy .sec__container--primary .coordinate1_2-img {
  display: block;
  margin: calc(60 * (100vw / 750)) auto 0;
  width: calc(562 * (100vw / 750));
}

.sec-navy .sec__container--primary .desc-credit__container {
  margin: calc(50 * (100vw / 750)) auto 0;
  padding: 0 calc(38 * (100vw / 750));
}

.sec-navy .sec__container--primary .credit__container {
  margin-top: calc(20 * (100vw / 750));
}

.sec-navy .sec__container--secondary {
  margin: calc(134 * (100vw / 750)) auto 0;
}

.sec-navy .sec__container--secondary .coordinate {
  margin: auto auto 0 0;
  width: calc(562 * (100vw / 750));
}

.sec-navy .sec__container--secondary .coordinate-txt {
  position: absolute;
  top: calc(234 * (100vw / 750));
  right: calc(-262 * (100vw / 750));
  bottom: auto;
  left: auto;
  color: #121933;
}

.sec-navy .sec__container--secondary .coordinate::after {
  content: "";
  position: absolute;
  top: calc(150 * (100vw / 750));
  right: calc(-188 * (100vw / 750));
  bottom: auto;
  left: auto;
  background-image: url("../../imgs/03_navy/navy_img2_bg_sp.jpg");
  height: calc(980 * (100vw / 750));
  width: calc(652 * (100vw / 750));
}

.sec-navy .sec__container--secondary .coordinate2_2-img {
  display: block;
  margin: calc(60 * (100vw / 750)) calc(37 * (100vw / 750)) 0 auto;
  width: calc(525 * (100vw / 750));
}

.sec-navy .sec__container--secondary .desc-credit__container {
  margin: calc(46 * (100vw / 750)) auto 0;
  padding: 0 calc(38 * (100vw / 750));
}

.sec-navy .sec__container--secondary .credit__container {
  margin-top: calc(20 * (100vw / 750));
}

/* ===============================================
    * style of checkall__btn *
=============================================== */
.checkall__btn {
  margin: calc(160 * (100vw / 750)) auto calc(200 * (100vw / 750));
}