﻿/* パンくず 追加スタイル PC */
/* @media only screen and (min-width: 768px) {
  .breadcrumb__list {
    padding-bottom: 1.6rem;
  }
} */

/* ページ共通___________________________*/
.main-area {
  overflow-x: hidden;
  text-align: center;
  color: #222;
}

.main-area img,
.main-area picture {
  width: 100%;
  height: auto;
}

.main-area a,
.main-area picture {
  display: inline-block;
}


@media screen and (max-width: 767px) {
  .main-area .pc_only {
    display: none;
  }

  .flex-box_sp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
}

@media screen and (min-width: 768px) {
  .main-area {
    font-size: calc(20* (100vw /1920));
    padding-bottom: 0;
  }

  .main-area .sp_only {
    display: none;
  }

  .main-area a {
    transition: all 0.3s;
  }
}
/* ===============================================### 
編集エリア
###=============================================== */

/************** common **************/
  .flex-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .main-area .sec_img {
    pointer-events: none;
  }

  .main-area .slide {
    line-height: 0;
  }

  /*** sec_text ***/
  .sec_text {
    margin: 0 auto;
    font-size: calc(14* (100vw /375));
    line-height: 2.57;
    letter-spacing: 0;
    text-align: center;
    color: #FFF;
    font-family: "noto-sans-cjk-jp", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

  /*** sec_tax ***/
  .sec_tax {
    margin: calc(41* (100vw /375)) auto 0;
    width: calc(251* (100vw /375));
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: calc(11* (100vw /375)) 0;
    font-family: "noto-sans-cjk-jp", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

  .sec_tax li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  .sec_tax li a {
    display: inline-block;
    width: max-content;
  }

  .sec_tax li a span {
    display: inline-block;
    width: max-content;
  }

  .sec_tax li a:nth-of-type(1) {
    font-size: calc(14* (100vw /375));
    letter-spacing: 0;
    color: #000;
    line-height: 1.5;
    display: flex;
    flex-wrap: nowrap;
    width: calc(151* (100vw /375));
    justify-content: space-between;
    align-items: flex-end;
    white-space: nowrap;
  }

  .sec_tax li a:nth-of-type(1) small {
    margin-left: calc(3* (100vw /375));
    font-size: calc(10* (100vw /375));
    letter-spacing: 0.02em;
  }

  .sec_tax li a:nth-of-type(2) {
    display: block;
    text-align: center;
    text-decoration: none;
    width: calc(80* (100vw /375));
    padding: calc(5* (100vw /375)) 0 calc(6* (100vw /375));
    font-size: calc(12* (100vw /375));
    font-family: "ubuntu", sans-serif;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.05em;
    line-height: 1;
    color: #fff;
    background-color: #000;
  }

  .main-area .slider {
    width: 100%;
  }

/************** js **************/

/************** before **************/
.main-area {
  position: relative;
}

.main-area::before {
  content: '';
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #000;
  z-index: -1;
  width: 100%;
  height: calc(731* (100vw /375));
  top: 0;
}

/************** mv **************/ 
.mv {
  margin: 0 auto calc(31* (100vw /375));
  width: 100%;
}

.mv h2 {
  margin: 0 auto calc(33* (100vw /375));
  padding-top: calc(30* (100vw /375));
  width: calc(355* (100vw /375));
}

/************** sec01 **************/
.sec01 {
  margin: 0 auto calc(82* (100vw /375));
  width: 100%;
}

.sec01 .sec_box01 {
  margin: 0 auto calc(40* (100vw /375));
}

.sec01 .sec_box01 .sec_img {
  width: 50%;
}

.img03 {
  margin: 0 auto calc(40* (100vw /375));
  width: calc(320* (100vw /375));
}

.img04 {
  margin: 0 auto calc(40* (100vw /375));
  width: calc(280* (100vw /375));
}

/************** sec02 **************/
.sec02 {
  margin: 0 auto calc(81* (100vw /375));
  width: 100%;
}

.sec02 .sec_box01 div {
  width: 50%;
}

.sec02 .sec_box01 div.slider_img:not(.pc_only) {
  font-size: 0;
  line-height: 0;
  vertical-align: bottom;
  display: flex;
}

.sec02 .sec_tax {
  margin: calc(42*(100vw / 375)) auto 0;
}

/************** sec03 **************/
.sec03 {
  margin: 0 auto calc(60* (100vw /375));
  width: 100%;
}

.sec03 .img05 {
  margin: 0 auto calc(40* (100vw /375));
  width: 100%;
}

.sec03 .img06 {
  margin: 0 auto;
  width: calc(320* (100vw /375));
}

/************** btn **************/
.sec_btn {
  padding-bottom: calc(80* (100vw /375));
  position: relative;
  z-index: 10;
  transform:translateZ(2px);
}

.sec_btn a {
  margin: 0 auto;
  width: calc(280* (100vw /375));
  height: calc(50* (100vw /375));
  font-size: calc(14* (100vw /375));
  max-width: 100%;
  max-height: 100%;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1;
  display: -webkit-box;
  color: #fff;
  background-color: #000;
  color: #FFFFFF;
  border: none;
}


/* ===============================================### 
PC用デザイン
###=============================================== */
@media screen and (min-width: 767px) {

  /*** slick バグ解消 ***/
  .sec02 .sec_box01 {
    opacity: 0;
    transition: opacity .3s linear;
  }

  .sec02 .sec_box01.slick-initialized {
    opacity : 1 ;
    pointer-events: none;
    /* height: 52rem; */
  }
  
  .sec02 .slick-slider div {
    transition: none; 
  }
  
  /* .sec02 .slider_img {
    opacity: 0.34;
    transition: opacity 0.4s;
  }
  .sec02 .slick-slide.slick-current .slider_img,
  .sec02 .slick-slide.is-active-next .slider_img {
    opacity: 1;
  } */

/************** before **************/
  .main-area::before {
    height: 125rem;
  }

/************** common **************/
  .flex-box_pc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  /*** sec_text ***/
  .sec_text {
    margin: 0 auto ;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 2.57;
    letter-spacing: 0;
  }

  /*** sec_tax ***/
  .sec_tax {
    margin: 0 auto ;
    width: 25.1rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 1rem 0;
  }

  .sec_tax li a:nth-of-type(1) {
    font-size: 1.4rem;
    letter-spacing: 0;
    color: #000000;
    line-height: 1.5;
    width: 15.1rem;
  }

  .sec_tax li a:nth-of-type(1) small {
    margin-left: .2rem;
    font-size: 1rem;
  }

  .sec_tax li a:nth-of-type(2) {
    display: block;
    text-align: center;
    text-decoration: none;
    width: 8.0rem;
    padding: .6rem 0 .6rem;
    font-size: 1.2rem;
    letter-spacing: 0.02em;
    line-height: 1;
  }

/************** mv **************/ 
  .mv {
    margin: 0 auto 5.2rem;
    width: 100%;
  }

  .mv h2 {
    margin: 0 auto 5.3rem;
    padding-top: 3.0rem;
    width: 59.5rem;
  }

/************** sec01 **************/
  .sec01 {
    margin: 0 auto 10rem;
    width: 80rem;
  }

  .sec01 .sec_box01 {
    margin: 0 auto 6rem;
  }

  .sec01 .sec_box01 .sec_img {
    width: 50%;
  }

  .sec01 .sec_box02 {
    margin: 0 auto 4rem;
    width: 74rem;
  }

  .img03 {
    margin: 0;
    width: 36rem;
  }

  .img04 {
    margin: 0;
    width: 36rem;
  }

/************** sec02 **************/
  .sec02 {
    margin: 0 auto 10.1rem;
    width: 100%;
  }

  .sec02 .sec_box01 div {
    width: 100%;
    /* height: calc(520* (100vw /1400)) !important; */
  }

  /* .sec02 .sec_box01 .slick-slide {
    width: 40rem !important;
  } */

  .sec02 .sec_tax {
    margin: 4rem auto 0;
  }

/************** sec03 **************/
  .sec03 {
    margin: 0 auto 8rem;
    width: 80rem;
  }

  .sec03 .img05 {
    margin: 0 auto 4.0rem;
    width: 54rem;
  }

  .sec03 .sec_box01 {
    width: 100%;
    align-items: flex-end;
  }

  .sec03 .img06 {
    margin: 0;
    width: 40rem;
  }

  .sec03 .sec_tax {
    margin: 0;
  }

/************** btn **************/
  .sec_btn {
    padding-bottom: 10.0rem;
    position: relative;
    z-index: 10;
    transform:translateZ(2px);
  }

  .sec_btn a {
    margin: 0 auto;
    width: 28.0rem;
    height: 5.0rem;
    font-size: 1.4rem;
    max-width: 100%;
    max-height: 100%;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1;
    display: -webkit-box;
    color: #fff;
    border: none;
  }
}