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

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

.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 .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__box01 ***/
  .sec__box01 {
    margin: 0 auto calc(34* (100vw /375));
    width: calc(345* (100vw /375));
  }

  .sec__text {
    margin: 0 auto;
    font-size: calc(12* (100vw /375));
    line-height: 2;
    letter-spacing: 0;
    text-align: left;
    font-family: "noto-sans-cjk-jp", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

  /*** sec__tax ***/
  .sec__tax {
    margin: calc(29*(100vw / 375)) auto 0;
    width: calc(345*(100vw / 375));
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: calc(14*(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: #333;
    line-height: 1;
    display: flex;
    flex-wrap: nowrap;
    width: calc(245* (100vw /375));
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
  }

  .sec__tax li a:nth-of-type(1) span:nth-of-type(1) {
    width: auto;
    text-align: left;
    line-height: 1.5;
  }

  .sec__tax li a:nth-of-type(1) span:nth-of-type(2) {
    width: 38%;
    text-align: right;
  }

  .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(9* (100vw /375)) 0 calc(9* (100vw /375));
    font-size: calc(12* (100vw /375));
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
    line-height: 1;
    color: #fff;
    background-color: #333333;
    letter-spacing: 0.02em;
  }

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


/************** js **************/
  .js_imgFadeIn {
    opacity: 0;
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
    transform: translateY(100px);
  }

  .imgAnimated{
    opacity: 1;
    transform: translateY(0);
  }


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

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

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


/************** sec01 **************/
.sec01 {
  margin: 0 auto calc(73* (100vw /375));
  padding: calc(60* (100vw /375)) 0 calc(60* (100vw /375));
  width: 100%;
  background-color: #333333;
}

.sec01 .sec__box01 {
  margin: 0 auto;
  width: calc(350* (100vw /375));
  position: relative;
}

.sec01 .sec__box01 .sec__ttl {
  position: absolute;
  width: calc(25*(100vw / 375));
  top: 29.3%;
  left: 4%;
}

.sec01 .sec__box01 .sec__img__box {
  margin: 0 calc(3*(100vw / 375)) 0 auto;
  width: calc(281*(100vw / 375));
  display: flex;
  flex-direction: column;
  gap: calc(20*(100vw / 375)) 0;
}

.sec01 .sec__tax li a:nth-of-type(1) {
  color: #fff;
}

.sec01 .sec__tax li a:nth-of-type(2) {
  color: #333333;
  background-color: #fff;
}


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

.sec02 .sec__box01 {
  margin: 0 auto;
  width: calc(350* (100vw /375));
  position: relative;
}

.sec02 .sec__box01 .sec__ttl {
  position: absolute;
  width: calc(182* (100vw /375));
  top: -2%;
  left: -1%;
  z-index: 99;
}

.sec02 .sec__box01::before {
  content: '';
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/deco01.svg);
  width: calc(350*(100vw / 375));
  height: calc(413*(100vw / 375));
  left: auto;
  right: -6%;
  top: 0%;
  z-index: 99;
}

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

.sec02 .sec__box01 .img03 {
  margin: 0 auto;
  width: calc(350* (100vw /375));
}


/************** sec03 **************/
.sec03 {
  margin: 0 auto calc(81* (100vw /375));
  padding: calc(60* (100vw /375)) 0 calc(60* (100vw /375));
  width: 100%;
  background-color: #333333;
}

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

.sec03 .sec__box01 .sec__img__box {
  margin: 0 auto;
  width: calc(305* (100vw /375));
  display: flex;
  flex-direction: column;
  gap: calc(20* (100vw /375)) 0;
}

.sec03 .sec__box01 .sec__ttl {
  margin: calc(50*(100vw / 375)) auto calc(50*(100vw / 375));
  width: calc(301*(100vw / 375));
}

.sec03 .sec__tax li a:nth-of-type(1) {
  color: #fff;
}

.sec03 .sec__tax li a:nth-of-type(2) {
  color: #333333;
  background-color: #fff;
}

.sec03 .img06 {
  margin: 0 auto;
  width: calc(345* (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(52* (100vw /375));
  font-size: calc(16* (100vw /375));
  max-width: 100%;
  max-height: 100%;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1;
  display: -webkit-box;
  background-color: #333333;
  color: #FFFFFF;
  border: none;
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

.sec_btn a:last-child {
  margin-top: calc(11* (100vw /375));
  font-size: calc(14* (100vw /375));
  border: 1px solid #333333;
  background-color: #FFFFFF;
  color: #333333;
}


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

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

  .sec .slide__img.slick-initialized {
    opacity : 1 ;
    pointer-events: none;
  }
  
  .sec02 .slick-slider div {
    transition: none; 
  }


/************** common **************/
  .main-area .sec__img {
    pointer-events: none;
  }

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

  /*** sec__box01 ***/
  .sec__box01 {
    margin: 0 auto 3.4rem;
    width: 100rem;
  }

  .sec__text {
    margin: 0 auto;
    font-size: 1.2rem;
  }

  /*** sec__tax ***/
  .sec__tax {
    margin: 4rem auto 0;
    width: 49.1rem;
    gap: 1rem 0;
  }

  .sec__tax li a:nth-of-type(1) {
    font-size: 1.4rem;
    width: 36.5rem;
  }

  .sec__tax li a:nth-of-type(1) span:nth-of-type(1) {
    line-height: 1;
  }

  .sec__tax li a:nth-of-type(1) span:nth-of-type(2) {
    width: 38%;
  }

  .sec__tax li a:nth-of-type(1) small {
    margin-left: .3rem;
    font-size: 1.0rem;
    letter-spacing: 0.02em;
  }

  .sec__tax li a:nth-of-type(2) {
    width: 8.0rem;
    padding: .7rem 0 .5rem;
    font-size: 1.2rem;
    letter-spacing: 0.02em;
  }

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


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

  .mv h2 {
    margin: 0 auto 5.6rem;
    width: 100%;
  }

  .mv .mv__text {
    margin: 0 auto;
    font-size: 1.4rem;
  }


/************** sec01 **************/
  .sec01 {
    margin: 0 auto 12.6rem;
    padding: 10rem 0 12rem;
    width: 100%;
    background-color: #333333;
  }

  .sec01 .sec__box01 {
    margin: 0 auto;
    width: 100rem;
    position: relative;
  }

  .sec01 .sec__box01 .sec__ttl {
    position: absolute;
    width: 3.88rem;
    top: 56.1%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .sec01 .sec__box01 .sec__img__box {
    margin: 0 .3rem 0 auto;
    width: 100rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
  }

  .sec01 .sec__box01 .sec__img__box .sec__img {
    width: 42rem;
  }

  .sec01 .sec__box01 .sec__img__box .img01 {
    margin: 15.2rem 0 0;
  }


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

  .sec02 .sec__box01 {
    margin: 0 auto;
    width: 100rem;
    position: relative;
  }

  .sec02 .sec__box01 .sec__ttl {
    width: 34.2rem;
    top: -1%;
    left: 18.4%;
  }

  .sec02 .sec__box01::before {
    background-image: url(../img/deco01.svg);
    width: 67.3rem;
    height: 79.5rem;
    left: auto;
    right: 13.8%;
    top: 0%;
    z-index: 5;
  }

  .sec02 .sec__tax {
    margin: -1.1rem auto 0;
    position: relative;
    z-index: 99;
    width: 42rem;
  }

  .sec02 .sec__tax li a:nth-of-type(1) {
    width: 29.4rem;
  }

  .sec02 .sec__box01 .img03 {
    margin: 0 auto;
    width: 67.3rem;
  }


/************** sec03 **************/
  .sec03 {
    margin: 0 auto 10.1rem;
    padding: 10rem 0 12.1rem;
  }

  .sec03 .sec__box01 {
    margin: 0 auto;
    width: 100rem;
  }

  .sec03 .sec__box01 .sec__img__box {
    margin: 0 auto;
    width: 100rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
  }

  .sec03 .sec__box01 .sec__img__box .sec__img {
    width: 48rem;
  }

  .sec03 .sec__box01 .sec__ttl {
    margin: 7.3rem auto 7.3rem;
    width: 80rem;
  }

  .sec03 .img06 {
    margin: 0 auto;
    width: 51rem;
  }

  .sec03 .sec__tax {
    width: 43.4rem;
  }

  .sec03 .sec__tax li a:nth-of-type(1) {
    width: 30.8rem;
  }


/************** btn **************/
  .sec_btn {
    padding-bottom: 10rem;
  }

  .sec_btn a {
    margin: 0 auto;
    width: 28.0rem;
    height: 5.2rem;
    font-size: 1.6rem;
    letter-spacing: 0.05em;
  }

  .sec_btn a:last-child {
    margin-top: 1.1rem;
    font-size: 1.4rem;
  }
}