/*
=======================================

Filename: top.css

======================================= */

/* ====================================================
//fv
==================================================== */

/*
 * トップページのコンテンツ（.p-top配下）だけを独自基準（1536pxカンプ）で拡大縮小させたいので、
 * html全体のfont-sizeは変更せず、.p-top自身にfont-sizeを設定し、配下の数値はremではなくemで指定している。
 * ヘッダー・フッターは.p-topの外側にあるため、common.css側のrem基準のまま影響を受けない。
 */
@media screen and (min-width: 768px) {
  .p-top {
    font-size: 0.6510417vw;
    /* 1536pxカンプの場合 */
  }
}

@media screen and (max-width: 767px) {
  .p-top {
    font-size: 2.666vw;
  }
}

.p-top-contents {
  background-image: url("../img/top/top_bg_pc.webp");
  padding: 7em 0 22em;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top center;
}

.p-top_btn {
  padding: 6em 0 9em;
  width: 46em;
  margin: 0 auto;
  display: block;
}

.p-top-contents__wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.p-top-contents__item {
  position: relative;
  align-self: flex-start;
  width: 79em;
}

.p-top-contents__item:nth-child(even) {
  align-self: flex-end;
}

.p-top-contents__item:not(:first-child) {
  margin-top: -16em;
}
.p-top-contents__ttl {
  color: #FFF;
  text-align: center;
  font-family: "Krona One";
  font-size: 7.2em;
}

.p-top-contents__txt {
  position: relative;
  z-index: 2;
  width: 100%;
}

.p-top-contents__btn {
  position: absolute;
  bottom: 7em;
  right: 18em;
  background: #ED0F0D;
  width: 22em;
  padding: 1em 1.5em;
  z-index: 3;
}

.p-top-contents__btn-text {
  font-size: 1.9em;
}

.p-top-contents__btn::after {
  content: "";
  position: absolute;
  right: 2.5em;
  border-style: solid;
  border-width: .6em 0 .6em .8em;
  border-color: transparent transparent transparent #fff;
}

.p-top-contents__bg-parts {
  position: absolute;
}

.p-top-contents__parts--01 {
  position: absolute;
  width: 23em;
  bottom: -1em;
  left: 9em;
  z-index: 3;
}

.p-top-contents__baloon--01 {
  position: absolute;
  width: 27em;
  top: -27em;
  left: 1em;
}

.p-top-dontents__cloud--01 {
  position: absolute;
  width: 41em;
  top: 5em;
  right: -43em;
}

.p-top-contents__parts--02 {
  position: absolute;
  width: 27.5em;
  top: -15em;
  left: 24em;
  z-index: 3;
}

.p-top-contents__btn--02 {
  left: 18em;
}

/* スタンプラリー（三角矢印を外部リンクアイコン） */
.p-top-contents__btn--02::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2.5em;
  transform: translateY(-50%);
  width: 1.6em;
  height: 1.6em;
  border: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg clip-path='url(%23clip0_416_373)'%3E%3Cpath d='M5.4876 2.04959H0.99173V15.0083H13.8182V9.98347' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.47107 8.52893L15.0083 0.991737' stroke='white' stroke-width='1.5' stroke-miterlimit='10'/%3E%3Cpath d='M15.0083 6.67769V0.991737H9.32231' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_416_373'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat center / contain;
}

.p-top-contents__baloon--02 {
  position: absolute;
  width: 15em;
  top: -35em;
  right: 8em;
}

.p-top-contents__baloon--02-sp {
  display: none;
}

.p-top-dontents__cloud--02 {
  position: absolute;
  width: 27em;
  bottom: -13em;
  right: 5em;
}

.p-top-contents__parts--03 {
  position: absolute;
  width: 16.3em;
  bottom: -3em;
  left: 18em;
  z-index: 3;
}

.p-top-contents__btn--03 {
  bottom: 4.5em;
}

.p-top-contents__baloon--03 {
  position: absolute;
  bottom: -22em;
  left: 10em;
  width: 19em;
  z-index: 3;
}

.p-top-dontents__cloud--03 {
  position: absolute;
  width: 41em;
  bottom: -35em;
  right: 6em;
}

.p-top-contents__parts--04 {
  width: 29.3em;
  top: -3em;
  position: absolute;
  right: 11em;
  z-index: 3;
}

.p-top-contents__btn--04 {
  bottom: 8em;
  left: 19em;
}

.p-top-contents__baloon--04 {
  position: absolute;
  width: 21em;
  top: -20em;
  left: 23em;
  z-index: 3;
}

.p-top-contents__baloon--04-02 {
  position: absolute;
  width: 26em;
  bottom: -20em;
  right: 7em;
  z-index: 3;
}

.p-top-contents__baloon--04-03 {
  display: none;
}

@media screen and (max-width: 768px) {
  .p-top-contents {
    background-image: url("../img/top/top_bg_sp.webp");
    padding: 5em 0 11em;
  }

  .p-top-contents__ttl {
    font-size: 4em;
    padding-bottom: .5em;
  }

  .p-top_btn {
    padding: 4em 0 5em;
  }

  .p-top-contents__item {
    width: 100%;
  }

  .p-top-contents__item:not(:first-child) {
    margin-top: 7.5em;
  }

  .p-top-contents__btn {
    bottom: 5.5em;
    right: 9em;
    width: 18em;
    padding: .6em 2em .9em 1.5em;
  }

  .p-top-contents__btn-text {
    font-size: 1.7em;
  }

  .p-top-contents__btn--02,
  .p-top-contents__btn--04 {
    left: auto;
  }

  .p-top-contents__parts--01 {
    position: absolute;
    width: 12.2em;
    bottom: -7em;
    left: 0;
  }

  .p-top-contents__baloon--01 {
    position: absolute;
    width: 13em;
    top: -19em;
    left: auto;
    right: 1em;
  }

  .p-top-contents__parts--02 {
    width: 15em;
    left: 22em;
    top: 29em;
  }

  .p-top-contents__baloon--02 {
    display: none;
  }

  .p-top-contents__baloon--02-sp{
    display: block;
    position: absolute;
    bottom: -8em;
    left: -4em;
    width: 16em;
    z-index: 3;
  }

  .p-top-dontents__cloud--01 {
    width: 21em;
    top: -3em;
    right: auto;
    left: -2em;
  }

  .p-top-dontents__cloud--02 {
    position: absolute;
    width: 22em;
    bottom: 36em;
    right: -8em;
  }

  .p-top-dontents__cloud--03 {
    width: 21em;
    bottom: -10em;
    right: auto;
    left: 2rem;
  }

  .p-top-contents__parts--03 {
    position: absolute;
    width: 9em;
    bottom: -6em;
    left: 3em;
  }

  .p-top-contents__btn--03 {
    bottom: 4.5em;
  }

  .p-top-contents__baloon--03 {
    position: absolute;
    bottom: -10em;
    left: 28em;
    width: 10em;
  }

  .p-top-contents__parts--04 {
    width: 16em;
    top: 31em;
    right: 1em;
  }

  .p-top-contents__baloon--04 {
    width: 13em;
    top: -100em;
    left: 15em;
  }

  .p-top-contents__baloon--04-02{
    width: 16em;
    bottom: -12em;
    right: auto;
  }

  .p-top-contents__baloon--04-03 {
    position: absolute;
    width: 18em;
    bottom: -9em;
    right: 2rem;
  }
}


/* ====================================================
//モーダル
==================================================== */
.p-modal-top__container.c-modal__container {
  border-radius: 5.7rem;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 7.8px 0 rgba(0, 0, 0, 0.25);
  padding: 5rem;
  max-width: 100rem;
}


.p-modal-top__ttl {
  display: flex;
  font-size: 7.2rem;
  font-family: "Krona One";
  align-items: baseline;
  border-bottom: #000 solid 2px;
  padding-bottom: 2rem;
  gap: 3rem;
  position: relative;
}

.p-modal-top__ttl-parts {
  position: absolute;
  width: 30rem;
  right: -2rem;
  top: -3rem;
}

.p-modal-top__sub-ttl {
  font-family: "M PLUS 1";
  font-size: 2rem;
}

.p-modal-top__list {
  padding-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.p-modal-top__item {
  display: flex;
  font-family: "M PLUS 1";
  align-items: center;
  gap: 3rem;

}

.p-modal-top__list {
  padding-top: 3rem;
}

.p-modal-top__item-ttl {
  width: 29rem;
  font-size: 2.2rem;
}

.p-modal-top__item-txt {
  font-size: 2.2rem;
}

@media screen and (max-width: 767px) {
  .p-top_btn {
    width: 100%;
  }

  .p-modal-top__ttl {
    font-size: 3.6rem;
    flex-direction: column;
    gap: 1rem;
  }

  .p-modal-top__sub-ttl {
    font-size: 1.2rem;
  }

  .p-modal-top__ttl-parts {
    width: 11rem;
    right: -2rem;
  }


  .p-modal-top__container.c-modal__container {
    border-radius: 2.4rem;
    padding: 2rem;
  }

  .p-modal-top__container .c-modal__scroll {
    padding: 1.5;
  }


  .c-modal__close {
    top: -6rem;
    right: 1rem;
  }

  .p-modal-top__item {
    gap: 1rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .p-modal-top__item-ttl {
    width: 100%;
    font-size: 1.5rem;
    padding: .7rem 1.5rem;
  }

  .p-modal-top__item-txt {
    font-size: 1.6rem;
    margin-left: 1rem;
  }

  .p-modal-top__list {
    gap: 1.5rem;
  }

}