﻿.main__area {
  font-family: minion-pro, '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
  font-weight: 500;
  font-style: normal;
  box-sizing: border-box;
  overflow: clip;
  background: #000;
  color: #fff;
  border-bottom: 1px solid #fff;
}

.main__area img {
  width: 100%;
  height: auto;
}

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

.main_content {
  position: relative;
  z-index: 3;
  transform: translateZ(1px);
  background: #000;
}

/************** js **************/
.js-fade.active {
  opacity: 1;
  transform: translateY(0rem);
}

.js-fade {
  opacity: 0;
  transition: 1.5s;
  transform: translateY(5rem);
}

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

.black_btn {
  margin: calc(63* (100vw /375)) auto 0;
  width: calc(266*(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;
  position: relative;
  z-index: 15;
  color: var(--white);
  border: 1px #fff solid;
  font-family: minion-pro, '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
}


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

  .main__area {
    margin-top: .6rem;
  }

  .main__area img {
    width: 100%;
    height: auto;
  }

  .main__area .sp_only {
    display: none;
  }

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

  .black_btn {
    margin: 8rem auto 0;
    width: 27rem;
    height: 5.0rem;
    font-size: 1.4rem;
    max-width: 100%;
    max-height: 100%;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1;
    position: relative;
    z-index: 15;
    color: var(--white);
  }
}

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

.sticky_wrap {
  position: sticky;
  top: 10rem;
}

#loadArea {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 10;
  height: 100%;
  transition-duration: 3.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.79, 1);
}

#loadArea.is_load {
  transition-duration: 3.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.79, 1);
  height: 0;
}

.mvWrap {
  transition-duration: 2s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.79, 1);
  transform: translateY(30%);
}

.mvWrap.is_load {
  transition-duration: 2s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.79, 1);
  transform: translate(0);
}


/* ===============================================
* mv__tx_wrap *
=============================================== */
.mv__tx_wrap {
  padding: calc(46*(100vw / 375)) 0 calc(61*(100vw / 375));
  border-bottom: #fff 1px solid;
  text-align: center;
}

.mv__tx_wrap .mv__ttl {
  line-height: 1;
  letter-spacing: 0.05em;
  font-size: calc(30* (100vw /375));
  font-weight: 400;
}

.mv__tx_wrap .mv__text {
  line-height: 2;
  letter-spacing: 0.05em;
  font-size: calc(14* (100vw /375));
  margin-top: calc(17*(100vw / 375));
  font-weight: 500;
}

@media screen and (min-width: 768px) {
  .mv__tx_wrap {
    padding: 7.6rem 0 11.9rem;
  }

  .mv__tx_wrap .mv__ttl {
    font-size: 4rem;
  }

  .mv__tx_wrap .mv__text {
    font-size: 1.4rem;
    margin-top: 3rem;
  }
}

/* ===============================================
* sec_firstView *
=============================================== */
.sec_firstView {
  margin-top: calc(70* (100vw /375));
}

.sec_firstView .tx {
  width: calc(345* (100vw /375));
  margin: calc(24*(100vw / 375)) auto 0;
}

.sec_firstView .tx h3 {
  font-size: calc(28* (100vw /375));
  letter-spacing: 0.05em;
  font-weight: 400;
}

.sec_firstView .tx h3 span {
  font-size: calc(18* (100vw /375));
  letter-spacing: 0.05em;
  padding-right: calc(10* (100vw /375));
  font-weight: 400;
}

.sec_firstView .tx p {
  margin-top: calc(23*(100vw / 375));
  line-height: 1.75;
  font-size: calc(14*(100vw / 375));
  letter-spacing: 0.05em;
  font-weight: 500;
}

.sec__tax {
  display: flex;
  flex-direction: column;
  margin-top: calc(34*(100vw / 375));
  gap: calc(13*(100vw / 375));
}

.sec__tax li {
  font-size: calc(13* (100vw /375));
  line-height: 1;
  letter-spacing: 0.05em;
  width: fit-content;
}

.sec__tax a {
  text-decoration: underline;
}

@media screen and (min-width: 768px) {
  .sec_firstView {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    margin: 13rem auto 0;
    width: 90rem;
  }

  .sec_firstView .tx {
    width: 40rem;
    margin: -0.5rem 0 0 0;
  }

  .sec_firstView .tx h3 {
    font-size: 3.6rem;
  }

  .sec_firstView .tx h3 span {
    font-size: 2.4rem;
    padding-right: 1.2rem;
  }

  .sec_firstView .tx p {
    margin-top: 3.5rem;
    font-size: 1.4rem;
  }

  .sec_firstView .img {
    width: 50rem;
  }

  .sec__tax {
    margin-top: 5.5rem;
    gap: 1.2rem;
  }

  .sec__tax li {
    font-size: 1.3rem;
  }

}

/* ===============================================
* sec_item *
=============================================== */
.sec_item_inner {
  width: calc(315* (100vw /375));
  margin: calc(70* (100vw /375)) auto 0;
}

.sec_item .sec__tax {
  margin-top: calc(14*(100vw / 375));
  gap: calc(12*(100vw / 375));
}

.sec_item .sec__tax li {
  font-size: calc(12* (100vw /375));
}

@media screen and (max-width: 767px) {
  .sec01 .sec_item2 .sec_item_inner {
    width: calc(345* (100vw /375));
  }

  .sec02 .sec_firstView {
    margin-top: calc(122*(100vw / 375));
  }

  .sec03 .sec_firstView {
    margin-top: calc(122*(100vw / 375));
  }

  .sec04 .sec_firstView {
    margin-top: calc(122*(100vw / 375));
  }

  .sec02 .sec_item3 {
    display: flex;
    justify-content: center;
    gap: calc(3*(100vw / 375));
    margin-top: calc(70* (100vw /375));
  }

  .sec02 .sec_item3 .sec_item_inner {
    width: calc(171* (100vw /375));
    margin: 0;
  }
}

@media screen and (min-width: 768px) {
  .sec_item_inner {
    width: 45rem;
    margin: 0;
  }

  .sec01 .sec_item2 .sec_item_inner {
    width: 91rem;
  }

  .sec_item .sec__tax {
    margin-top: 2rem;
    gap: 1.2rem;
  }

  .sec_item .sec__tax li {
    font-size: 1.2rem;
  }

  /* ___________________________*/
  .sec {
    width: 110rem;
    margin: auto;
  }

  .sec_item {
    display: flex;
    width: 91rem;
    justify-content: space-between;
    margin-top: 12rem;
  }

  .sec_item2 {
    margin-left: auto;
  }

  /* ___________________________*/
  .sec02 .sec_firstView {
    margin-top: 16.5rem;
  }

  .sec03 .sec_firstView {
    margin-top: 16.5rem;
  }

  .sec04 .sec_firstView {
    margin-top: 16.5rem;
  }
}