@charset "UTF-8";

html {
  font-size: 10px;
}

@media screen and (max-width: 1400px) {
  html {
    font-size: calc(10 * (100vw / 1400));
  }
}

.l-container {
  width: 100%;
}

.feature img {
  width: 100%;
}

.feature a {
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.feature a:link,
.feature a:visited {
  color: #000;
}

.feature a:hover {
  opacity: 0.6;
}

.l-container #feature {
  margin: 0 auto;
  font-feature-settings: "palt";
  width: 100%;
  text-align: center;
  overflow: hidden;
}

/** credit **/
.l-container #feature .credit {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.3rem;
  list-style: none;
  font-family: "sofia-pro", sans-serif;
  font-weight: 200;
  justify-content: center;
  letter-spacing: 0.02rem;
}

.l-container #feature .credit li a {
  transition: 0.3s;
  text-decoration: none;
}

.l-container #feature .credit li a:hover {
  opacity: 0.6;
  cursor: pointer;
  text-decoration: none;
}

.l-container #feature .credit li a::after {
  display: none;
}

.l-container #feature .credit .price {
  margin-left: 0.25rem;
}

/** fade **/
.fadeIn {
  opacity: 0;
  transition: 2s;
}

.fadeIn-item {
  opacity: 0;
  visibility: hidden;
  transition: transform 1.5s, opacity 1.5s, visibility 1.5s;
}

.fadeIn-UP {
  opacity: 0;
  transform: translateY(4rem);
  transition: all 1s;
}

.fadeIn.is_show,
.fadeIn-UP.is-active {
  opacity: 1;
  transform: translateY(0);
}

.fadeIn-item.is-active {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.fadeIn-item.is-active.is_delay2s,
.fadeIn-UP.is-active.is_delay2s {
  transition-delay: 0.2s;
}

.fadeIn-item.is-active.is_delay4s,
.fadeIn-UP.is-active.is_delay4s {
  transition-delay: 0.4s;
}

.fadeIn-item.is-active.is_delay6s,
.fadeIn-UP.is-active.is_delay6s {
  transition-delay: 0.6s;
}

.fadeIn-item.is-active.is_delay8s,
.fadeIn-UP.is-active.is_delay8s {
  transition-delay: 0.8s;
}



/** main **/
.main-hero {
  background-image: url('../img/pc-hero.jpg');
  background-size: cover;
  background-position: center;
  margin-bottom: 14.2rem;
    margin-top: 3rem;
}
.main-hero h1 {
  width: 46rem;
  margin: 0 auto 2.3rem;
  padding-top: 5rem;
}
.main-hero p {
  font-family: "Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", Meiryo, メイリオ, Helvetica, Arial, sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.048rem;
  line-height: 2;
}
.main-hero p:nth-child(2) {
  margin-bottom: 2rem;
}
.main-hero p:nth-child(3) {
  margin-bottom: 2rem;
  font-weight: bold;
}
.main-hero p:nth-child(4) {
  margin-bottom: 2rem;
  padding-bottom: 4rem;
}
.main-hero p:nth-child(5) {
  width: 55.7rem;
  margin: 3.2rem auto 0;
  padding-bottom: 5.5rem;
}
.main-hero img {
  width: 100%;
}

.main-hero h1 img {
  width: 100%;
}


.section {
  width: 140rem;
  margin: auto;
}

.section h2 {
  font-size: 2.7rem;
  font-family: "baskerville-display-pt", serif;
  font-weight: 400;
  margin: 0;
  border-bottom: 1px solid;
  display: inline-block;
  padding-bottom: 0rem;
  line-height: 0.9;
  color: #31304D;
}

.section h2 span {
  font-style: italic;
  margin-right: 0.2rem;
}

.co {
  font-family: "Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", Meiryo, メイリオ, Helvetica, Arial, sans-serif;
  margin-top: 3.4rem;
  font-size: 1.3rem;
  letter-spacing: 0.06rem;
  line-height: 2;
}
.co p:nth-child(1) {
  font-weight: bold;
}
.co p:nth-child(2) {
  margin-bottom: 2.7rem;
}



/** sec01 **/
.sec01-item1 {
  width: 48rem;
}

.sec01-item2,
.slider01 {
  width: 30rem;
  height: 56rem;
  margin: -64rem 43.4rem 0 auto;
}

.sec01-item3 {
  width: 24rem;
  margin: -56rem 18.5rem 0 auto;
}

.sec01-item4 {
  width: 24rem;
  margin: 1rem 18.5rem 0 auto;
}

.sec01-item5 {
  width: 70.1rem;
  margin: 10.6rem auto .9rem;
  display: flex;
  gap: 3rem;
}

.sec01-item6 {
  width: 73rem;
  margin: 13.3rem auto .9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}

.sec01-item6 img {
  width: 36rem;
}

/** sec02 **/
.sec02-item1 {
  width: 48rem;
  margin: 12rem auto 3.1rem;
  display: flex;
  gap: 4.5rem;
}

.sec02-item2 {
  width: 24rem;
  margin: 16.1rem auto 0 13rem;
}

.sec02-item2 img:nth-child(1) {
  margin-bottom: 1rem;
}

.sec02-item3 {
  width: 44rem;
  height: 63.25rem;
  margin: -65.5rem auto 0 38rem;
}

.sec02-item4 {
  width: 44rem;
  height: 63.25rem;
  margin: -63.2rem 0 0 83rem;
}

/** sec03 **/
.sec03-item1 {
  width: 53rem;
  margin: 12.4rem auto 3.6rem;
  display: flex;
  gap: 10.5rem;
}

.sec03-item2 {
  width: 30rem;
}

.sec03-item2 img:nth-child(1) {
  margin: 13.3rem auto 0 24rem;
}

.sec03-item2 img:nth-child(2) {
  margin: -34rem 0 0 55rem;
}

.sec03-item2 img:nth-child(3) {
  margin: -34rem 0 0 86rem;
}

/** sec04 **/
.sec04-item1 {
  width: 48rem;
  margin: 14rem auto 0 0;
  position: relative;
}

.sec04-item2 {
  width: 32rem;
  margin: -57.4rem 46.5rem 0 auto;
  display: flex;
  position: relative;
}

.sec04-item3 {
  width: 32rem;
  margin: -46rem 13.5rem 0 auto;
  display: flex;
  position: relative;
}

.sec04-item4 {
  width: 91rem;
  margin: 16.4rem auto 2.5rem;
  display: flex;
  gap: 2rem;
}

/** sec05 **/
.sec05-item1 {
  width: 34rem;
}

.sec05-item1 a:nth-child(1) img {
  margin: 21.4rem auto 0 18rem;
}

.sec05-item1 a:nth-child(2) img {
  margin: -51.6rem 0 0 53rem;
}

.sec05-item1 a:nth-child(3) img {
  margin: -57.4rem 0 0 88rem;
}

.sec05-item2 {
  width: 69rem;
  margin: 11.8rem auto 3.3rem;
  display: flex;
  gap: 0;
}

.sec05 {
  margin-bottom: 13rem;
}

/** btn **/
.btn {
  font-size: 2.5rem;
  font-family: "baskerville-display-pt", serif;
  font-weight: 400;
  margin: 10rem auto;
  padding: 0rem;
  line-height: 0.95;
  color: #31304F !important;
  width: 27.5rem;
}

.btn span {
  font-style: italic;
  margin-right: 0.2rem;
}

a.btn {
  padding: 1rem 5.43rem;
  background: #DFE3E5;
}

/** item credit **/
.sec01-credit {
  font-size: 1.2rem;
  display: flex;
  width: 41rem;
  margin: 1.9rem 25.5rem 0 auto;
  line-height: 2;
}

.sec02-credit {
  font-size: 1.2rem;
  display: flex;
  width: 55rem;
  margin: 2rem auto 0;
  line-height: 1.8;
}

.sec03-credit {
  font-size: 1.2rem;
  display: flex;
  width: 26rem;
  margin: 0.6rem 0 0 -1rem;
  line-height: 2;
  padding-left: -7rem;
}

.sec04-credit {
  font-size: 1.2rem;
  display: flex;
  width: 37rem;
  margin: 1.65rem 27.5rem 0 auto;
  line-height: 2;
}

.sec05-credit {
  font-size: 1.2rem;
  display: flex;
  width: 46.8rem;
  margin: -1.6rem auto 0;
  line-height: 2;
}