:root {
  --lp-common-color1: #C9E6FF;
  --lp-common-color2: #FDDDE5;
  --lp-common-color3: #FDD59E;
  --lp-common-color4: #F7F4E4;
}


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

/* ページ共通___________________________*/
.main-area {
  font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
  font-style: normal;
  letter-spacing: 0.05em;
  font-weight: 500;
  line-height: 2;
  font-size: calc(15* (100vw / 375));
  padding-bottom: calc(70* (100vw / 375));
  overflow: hidden;
  text-align: center;
  color: #111;
}

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

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

@font-face {
  font-family: "Baskerville";
  src: url("../fonts/baskerville.ttf") format("truetype");
}

.ff_bask {
  font-family: "Baskerville", serif;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1;
}

.main-area .lp_credit {
  font-size: calc(12* (100vw / 375));
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.05em;
  margin-top: calc(28* (100vw / 375));
}

.main-area .lp_credit a {
  text-decoration: underline;
  display: inline;
}

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

@media screen and (min-width: 768px) {
  .main-area {
    font-size: 1.5rem;
    padding-bottom: 10rem;
  }

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

  .main-area a {
    transition: all 0.3s;
  }

  .ff_gara {
    font-size: 5rem;
  }

  .main-area .lp_credit {
    font-size: 1.2rem;
    margin-top: 1.7rem;
  }
}

/* ▽ sec__fv ▽ */


.sec__fv h2+p {
  margin-top: calc(33* (100vw / 375));
}


@media screen and (min-width: 768px) {
  .sec__fv h2 {
    width: 120rem;
    margin: auto;
  }

  .sec__fv h2+p {
    margin-top: 5.2rem;
  }

}

/* ===============================================
* main-wrap *
=============================================== */
.img-wrap,
.main-wrap {
  position: relative;
}

.main-wrap::before {
  content: "";
  position: absolute;
  width: 100%;
  height: calc(250 * (100vw /375));
  background: var(--lp-common-color1);
  opacity: 0.4;
  z-index: -1;
  top: calc(234* (100vw /375));
  left: 0;
}

.main-wrap .inner>.img-wrap:first-child::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: calc(300* (100vw /375));
  height: calc(360* (100vw /375));
  top: calc(-16*(100vw / 375));
  left: calc(-16*(100vw / 375));
}

.img01::before {
  background: url(../img/img01_bg.jpg) center/contain no-repeat;
}

.img08::before {
  background: url(../img/img08_bg.jpg) center/contain no-repeat;
  left: calc(16*(100vw / 375)) !important;
}

.img17::before {
  background: url(../img/img17_bg.jpg) center/contain no-repeat;
}

.img27::before {
  background: url(../img/img27_bg.jpg) center/contain no-repeat;
}

@media screen and (max-width: 767px) {
  .img27::before {
    background: url(../img/img27_bg_sp.jpg) center/contain no-repeat;
  }
}

@media screen and (min-width: 768px) {
  .img08::before {
    left: 2rem !important;
  }
}

.main-wrap h3 span {
  display: block;
  padding: 0 calc(4* (100vw /375));
  background: linear-gradient(transparent 55%, var(--lp-common-color1) 55%, var(--lp-common-color1) 95%, transparent 95%);
  line-height: 1.8;
  font-size: calc(20*(100vw / 375));
  font-weight: 600;
  width: fit-content;
  margin: auto;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.main-wrap h3+p {
  margin-top: calc(20* (100vw /375));
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .main-wrap .inner>.img-wrap:first-child {
    margin: calc(68*(100vw / 375)) 0 0 calc(30* (100vw /375));
    width: calc(300* (100vw /375));
  }

  .main-wrap h3 {
    margin-top: calc(32* (100vw /375));
  }

  .img02 {
    width: calc(200*(100vw / 375));
    margin: calc(-27*(100vw / 375)) calc(14*(100vw / 375)) 0 auto;
  }
}

@media screen and (min-width: 768px) {
  .inner {
    display: grid;
    width: 100rem;
  }

  #item1 .inner {
    width: 101.5rem;
    margin: 13.3rem auto 0;
    grid-template-columns: 0 59rem auto;
    grid-template-rows: 2.1rem 33.4rem auto;
  }

  .main-wrap::before {
    height: 30rem;
    top: 51.6rem;
  }

  #item1 .inner .img01 {
    grid-area: 1/2/2/3;
  }

  .inner .tx-wrap {
    text-align: left;
  }

  #item1 .inner .tx-wrap {
    grid-area: 2/3/3/4;
  }

  #item1 .inner .img02 {
    grid-area: 3/3/4/4;
  }

  .main-wrap .inner>.img-wrap:first-child {
    width: 51rem;
  }

  .main-wrap .inner>.img-wrap:first-child::before {
    width: 51rem;
    height: 61.2rem;
    top: -2rem;
    left: -2rem;
  }

  .main-wrap h3 span {
    padding: 0 1rem;
    margin: 0;
    background: linear-gradient(transparent 55%, var(--lp-common-color1) 55%, var(--lp-common-color1) 95%, transparent 95%);
    font-size: 2.4rem;
  }

  .main-wrap h3+p {
    margin-top: 2.2rem;
  }

  .img02 {
    width: 36rem;
  }
}

/* ===============================================
* sub-wrap *
=============================================== */
.ttl-wrap .img-wrap {
  width: calc(164* (100vw /375));
  margin: calc(53* (100vw /375)) auto 0;
}

.ttl-wrap h4 {
  font-size: calc(18* (100vw /375));
  font-weight: 600;
  line-height: 1.75;
  margin-top: calc(13* (100vw /375));
  letter-spacing: 0.05em;
}

.style-wrap h5 {
  font-size: calc(50* (100vw /375));
  line-height: 1;
  color: #D1D1D1;
  letter-spacing: 0.025em;
  font-family: minion-pro, serif;
  font-weight: 500;
}

.credit-wrap a {
  text-decoration-line: underline;
  text-decoration-color: #000;
}

.credit-wrap a:first-line {
  text-decoration-line: underline;
  text-decoration-color: #fff;
}


@media screen and (max-width: 767px) {
  .style1 h5 {
    margin: calc(28* (100vw /375)) 0 0 calc(15* (100vw /375));
    text-align: left;
  }

  h5+.img-wrap {
    margin-top: calc(15* (100vw /375));
  }

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

  .img04 {
    width: calc(270* (100vw /375));
    margin: calc(10* (100vw /375)) 0 0 0;
  }

  .credit-wrap li {
    margin-top: calc(16* (100vw /375));
    font-size: calc(12* (100vw /375));
    line-height: 1.75;
    letter-spacing: 0.05em;
  }

  .credit-wrap li+li {
    margin-top: calc(21* (100vw /375));
  }
}

@media screen and (min-width: 768px) {
  .style-wrap {
    display: grid;
    width: 100rem;
    margin: 3rem auto 0;
  }

  .ttl-wrap .img-wrap {
    width: 16.4rem;
    margin: 14rem auto 0;
  }

  .ttl-wrap h4 {
    font-size: 2.2rem;
    line-height: 2;
    margin-top: 1.3rem;
  }

  .style-wrap h5 {
    font-size: 6rem;
    text-align: left;
  }

  .credit-wrap {
    text-align: left;
  }

  .credit-wrap li {
    font-size: 1.3rem;
    line-height: 1.75;
    letter-spacing: 0.05em;
  }

  .credit-wrap li+li {
    margin-top: 2rem;
  }

  .style1.style-wrap {
    grid-template-columns: 50rem auto;
    grid-template-rows: 11.4rem 7.6rem 43.5rem auto;
  }

  .style1 h5 {
    grid-area: 2/1/3/2;
  }

  .style1 .img04 {
    width: 45rem;
    grid-area: 3/1/4/2;
  }

  .style1 .img03 {
    width: 50rem;
    grid-area: 1/2/4/3;
  }

  .style1 .credit-wrap {
    grid-area: 4/2/5/3;
  }

}

/* ===============================================
* item-wrap *
=============================================== */
.item-wrap h4 {
  font-size: calc(24* (100vw /375));
  letter-spacing: 0.05em;
  font-family: minion-pro, serif;
  font-weight: 500;
  margin-top: calc(40* (100vw /375));
}

.l--item {
  position: relative;
}

.l--item-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(21* (100vw /375)) calc(11* (100vw /375));
}

.l--item-list li {
  width: calc(167* (100vw /375));
}

.l--item-list .lp_credit {
  text-align: left;
  line-height: 1.75;
  margin-top: calc(6*(100vw / 375));
  text-decoration: underline;
}

@media screen and (min-width: 768px) {
  .item-wrap h4 {
    font-size: 3rem;
    margin-top: 11.6rem;
  }

  .l--item-list {
    width: 89rem;
    margin: 0.8rem auto 0;
    gap: 2.5rem 4rem;
    justify-content: space-between;
  }

  .l--item-list li {
    width: 27rem;
  }

  .l--item-list .lp_credit {
    font-size: 1.3rem;
    margin-top: 1.4rem;
  }
}

/* ===============================================
* item2 *
=============================================== */
#item2 .main-wrap::before {
  background: var(--lp-common-color2);
}

#item2 .main-wrap h3 span {
  background: linear-gradient(transparent 55%, var(--lp-common-color2) 55%, var(--lp-common-color2) 95%, transparent 95%);
}

@media screen and (max-width: 767px) {
  #item2 .main-wrap .inner>.img-wrap:first-child {
    margin: calc(127*(100vw / 375)) 0 0 calc(15* (100vw /375));
  }

  .img09 {
    width: calc(200*(100vw / 375));
    margin: calc(-20*(100vw / 375)) calc(14*(100vw / 375)) 0 auto;
  }

  /* style2___________________________*/
  .style2.style-wrap h5 {
    margin: calc(28*(100vw / 375)) calc(14*(100vw / 375)) 0 auto;
    text-align: right;
  }

  .img10 {
    width: calc(300* (100vw /375));
    margin: calc(30* (100vw /375)) 0 0 calc(15* (100vw /375));
  }

  /* style3___________________________*/
  .style3.style-wrap h5 {
    margin: calc(50*(100vw / 375)) calc(14*(100vw / 375)) 0 calc(14*(100vw / 375));
    text-align: left;
  }

  .img11 {
    width: calc(300* (100vw /375));
    margin: calc(30* (100vw /375)) 0 0 calc(15* (100vw /375));
  }

  .img12 {
    width: calc(250* (100vw /375));
    margin: calc(-30* (100vw /375)) calc(15* (100vw /375)) 0 auto;
  }
}

@media screen and (min-width: 768px) {
  #item2 .main-wrap::before {
    top: 57rem;
  }

  #item2 .inner {
    width: 106.2rem;
    margin: 17.3rem auto 0;
    grid-template-columns: 53.2rem auto;
    grid-template-rows: 13.1rem 26rem auto;
  }

  .img08 {
    width: 51rem;
    grid-area: 1/2/2/3;
  }

  .img09 {
    width: 36rem;
    grid-area: 3/1/4/2;
  }

  #item2 .inner .tx-wrap {
    grid-area: 2 / 1 / 3 / 2;
  }

  #item2 .l--item-list {
    width: 120rem;
  }

  #item2 .item-wrap h4 {
    margin-top: 9.8rem;
  }

  /* style2___________________________*/
  .style2.style-wrap {
    grid-template-columns: 58rem auto;
    grid-template-rows: 17.3rem 8.1rem auto;
    left: 4.3rem;
    position: relative;
  }

  .img10 {
    width: 50rem;
    grid-area: 1/1/4/2;
  }

  .style2 h5 {
    grid-area: 2 / 2 / 3 / 3;
  }

  .style2 .credit-wrap {
    grid-area: 3 / 2 / 4 / 3;
  }

  /* style3___________________________*/
  .style3.style-wrap {
    grid-template-columns: 46rem auto;
    grid-template-rows: 30rem 33.4rem 8rem auto;
    left: 2rem;
    position: relative;
    margin-top: 8rem;
  }

  .img11 {
    width: 50rem;
    grid-area: 1/2/2/2;
  }

  .img12 {
    width: 40rem;
    grid-area: 2/1/4/2;
  }

  .style3 h5 {
    grid-area: 3 / 2 / 4 / 3;
  }

  .style3 .credit-wrap {
    grid-area: 4 / 2 / 5 / 3;
  }
}

/* ===============================================
* item3 *
=============================================== */
#item3 .main-wrap::before {
  background: var(--lp-common-color3);
}

#item3 .main-wrap h3 span {
  background: linear-gradient(transparent 55%, var(--lp-common-color3) 55%, var(--lp-common-color3) 95%, transparent 95%);
}

@media screen and (max-width: 767px) {
  #item3 .main-wrap .inner>.img-wrap:first-child {
    margin: calc(127*(100vw / 375)) 0 0 calc(60*(100vw / 375));
  }

  .img18 {
    width: calc(220*(100vw / 375));
    margin: calc(-38*(100vw / 375)) 0 0 calc(15* (100vw /375));
  }

  /* style4___________________________*/
  .style4.style-wrap h5 {
    margin: calc(27*(100vw / 375)) calc(14*(100vw / 375)) 0 calc(14*(100vw / 375));
    text-align: left;
  }

  .img19 {
    width: calc(300* (100vw /375));
    margin: calc(30* (100vw /375)) 0 0 auto;
  }

  .img20 {
    width: calc(270* (100vw /375));
    margin: calc(-19* (100vw /375)) 0 0 0;
  }

  /* style5___________________________*/
  .style5.style-wrap h5 {
    margin: calc(48*(100vw / 375)) calc(14*(100vw / 375)) 0 auto;
    text-align: right;
  }

  .img21 {
    width: calc(300* (100vw /375));
    margin: calc(30* (100vw /375)) 0 0 calc(15* (100vw /375));
  }
}

@media screen and (min-width: 768px) {
  #item3 .main-wrap::before {
    top: 49rem;
  }

  #item3 .inner {
    width: 104rem;
    margin: 17.3rem auto 0;
    grid-template-columns: 61rem auto;
    grid-template-rows: 7rem 26rem auto;
  }

  .img17 {
    grid-area: 1 / 1 / 2 / 3;
    ;
  }

  .img18 {
    width: 36rem;
    grid-area: 3 / 2 / 4 / 2;
  }

  #item3 .inner .tx-wrap {
    grid-area: 2 / 2 / 3 / 3;
  }

  #item3 .l--item-list {
    width: 120rem;
  }

  /* style4___________________________*/
  .style4.style-wrap {
    grid-template-columns: 50rem auto;
    grid-template-rows: 12.3rem 7.4rem 42.8rem auto;
    position: relative;
    width: 100rem;
  }

  .img19 {
    width: 50rem;
    grid-area: 1 / 2 / 3 / 3;
  }

  .img20 {
    width: 45rem;
    grid-area: 3/1/4/2;
  }

  .style4 h5 {
    grid-area: 2 / 1 / 3 / 3;
  }

  .style4 .credit-wrap {
    grid-area: 4 / 2 / 5 / 3;
  }

  /* style5___________________________*/
  .style5.style-wrap {
    grid-template-columns: 41.5rem auto;
    grid-template-rows: 15.8rem 8.1rem auto;
    position: relative;
    margin-top: 7.7rem;
    width: 91.5rem;
  }

  .img21 {
    width: 50rem;
    grid-area: 1/2/2/2;
  }

  .style5 h5 {
    grid-area: 2 / 1 / 3 / 3;
  }

  .style5 .credit-wrap {
    grid-area: 3 / 1 / 4 / 2;
  }


  #item3 .item-wrap h4 {
    margin-top: 26.1rem;
  }
}

/* ===============================================
* item4*
=============================================== */
#item4 .main-wrap::before {
  background: var(--lp-common-color4);
}

#item4 .main-wrap h3 span {
  background: linear-gradient(transparent 55%, var(--lp-common-color4) 55%, var(--lp-common-color4) 95%, transparent 95%);
}

@media screen and (max-width: 767px) {
  #item4 .main-wrap .inner>.img-wrap:first-child {
    margin: calc(128*(100vw / 375)) 0 0 calc(30*(100vw / 375));
  }

  .img28 {
    width: calc(270*(100vw / 375));
    margin: calc(-25*(100vw / 375)) calc(15* (100vw /375)) 0 auto;
  }

  /* style6___________________________*/
  .style6.style-wrap h5 {
    margin: calc(27*(100vw / 375)) calc(14*(100vw / 375)) 0 calc(14*(100vw / 375));
  }

  .img29 {
    width: calc(300* (100vw /375));
    margin: calc(30* (100vw /375)) auto 0;
  }

  .img30 {
    width: calc(300* (100vw /375));
    margin: calc(11*(100vw /375)) auto 0;
  }

  /* style7___________________________*/
  .style7.style-wrap h5 {
    margin: calc(48*(100vw / 375)) calc(14*(100vw / 375)) 0 auto;
    text-align: right;
  }

  .style7 .img31 {
    width: calc(300* (100vw /375));
    margin: calc(17* (100vw /375)) 0 0 calc(15* (100vw /375));
  }
}

@media screen and (min-width: 768px) {
  #item4 .main-wrap::before {
    top: 49rem;
  }

  #item4 .inner {
    width: 109.2rem;
    margin: 18.3rem auto 0;
    grid-template-columns: 58.2rem auto;
    grid-template-rows: 6rem 28rem auto;
  }

  .img27 {
    grid-area: 1 / 2 / 3 / 2;
  }

  .img28 {
    width: 36rem;
    grid-area: 3 / 1 / 4 / 2;
  }

  #item4 .inner .tx-wrap {
    grid-area: 2 / 1 / 3 / 2;
  }

  #item4 .l--item-list {
    width: 120rem;
  }

  #item4 .main-wrap .inner>.img-wrap:first-child::before {
    top: -3rem;
    left: -3rem;
  }

  /* style6___________________________*/
  .style6.style-wrap {
    grid-template-columns: 51rem auto;
    grid-template-rows: 62rem 8.2rem auto;
    position: relative;
    width: 100rem;
  }

  .img29 {
    width: 49rem;
    grid-area: 1 / 1 / 2 / 2;
  }

  .img30 {
    width: 49rem;
    grid-area: 1/2/2/3;
  }

  .style6 h5 {
    grid-area: 2 / 1 / 3 / 4;
    text-align: center;
  }

  .style6 .credit-wrap {
    grid-area: 3 / 1 / 4 / 4;
    text-align: center;
  }

  /* style7___________________________*/
  .style7.style-wrap {
    grid-template-columns: 58rem auto;
    grid-template-rows: 15.8rem 8.1rem auto;
    position: relative;
    margin-top: 7.5rem;
    width: 87.5rem;
  }

  .img31 {
    width: 50rem;
    grid-area: 1/1/2/2;
  }

  .style7 h5 {
    grid-area: 2 / 2 / 3 / 3;
  }

  .style7 .credit-wrap {
    grid-area: 3 / 2 / 4 / 3;
  }


  #item4 .item-wrap h4 {
    margin-top: 26.1rem;
  }
}

/* ===============================================
* foot-btn *
=============================================== */
.main-area .btn-list,
.main-area .btn-top {
  display: block;
  width: calc(280* (100vw /375));
  margin: calc(34* (100vw /375)) auto 0;
}

.main-area .btn-top {
  margin-top: calc(20* (100vw /375));
}

@media screen and (min-width: 768px) {

  .main-area .btn-list,
  .main-area .btn-top {
    width: 28rem;
    margin: 6rem auto 0;
  }

  .main-area .btn-top {
    margin-top: 2rem;
  }
}




/* ▽_____________ lp_foot_btn ______________▽ */
.main-area .lp_foot_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(280* (100vw / 375));
  height: calc(50* (100vw / 375));
  margin: calc(19* (100vw / 375)) auto 0;
  line-height: 1;
  font-weight: 600;
  font-size: calc(14* (100vw / 375));
  border: #5AA7E0 1px solid;
  color: #5AA7E0;
}

.main-area .lp_foot_btn.--1 {
  border: none;
  background: #5AA7E0;
  color: #fff;
  margin: calc(53* (100vw / 375)) auto 0;
}

@media screen and (min-width: 768px) {
  .main-area .lp_foot_btn {
    width: 28rem;
    height: 5rem;
    font-size: 1.4rem;
    margin: 1.9rem auto 0;
  }

  .main-area .lp_foot_btn.--1 {
    margin: 7.3rem auto 0;
  }
}


/* ▽ imganime ▽ */
.js-fadeIn {
  opacity: 0;
  will-change: opacity, transform;
  transition: ease-in, opacity 2000ms, transform 1000ms;
  transform: translate3d(0, 0, 0) scale(1);
}

.showFade {
  opacity: 1;
}