/*-----------------------
kv
------------------------*/
.p-kv {
  background-color: #EBFAFF;
}

.p-kv img {
  max-width: 1366px;
  width: 100%;
  margin: 0 auto;
  display: block;
}

/*-----------------------
申し込み期間
------------------------*/
.p-top {
  background-color: #FFFBE2;
  padding: 50px 0;
}

.p-top__period {
  max-width: 1164px;
  margin: 0 auto;
  padding: 0;
}

.p-top__period img {
  width: 100%;
  display: block;
}

/* 期間情報ボックス（HTML版） */
/* 外側：太い黒線 → すき間（角装飾が入る）→ 内側：細い黒線 */
.p-period-box {
  position: relative;
  border: 4px solid #231815;
  padding: 32px;
  background: #FFF;
}

/* 内側の細い黒線で囲んだコンテンツ領域 */
.p-period-box__inner {
  border: 4px solid #231815;
  background: #fff;
  position: relative;
  z-index: 0;
}

/* 四隅の装飾：太い外線と細い内線のすき間に配置。外側の線＝外枠、内側の線＝innerの縁 */
.p-period-box__corner {
  position: absolute;
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  z-index: 1;
}

/* 左上・右下：青 / 右上・左下：ピンク */
.p-period-box__corner--tl,
.p-period-box__corner--br {
  background: #0075B7;
}

.p-period-box__corner--tr,
.p-period-box__corner--bl {
  background: #EE8DB7;
}

/* 角ごとに「外側の線に接する辺」以外に黒線を引く（外側の線が内側の境界になるため） */
.p-period-box__corner--tl {
  top: 0;
  left: 0;
  border-right: 4px solid #231815;
  border-bottom: 4px solid #231815;
}

.p-period-box__corner--tr {
  top: 0;
  right: 0;
  border-left: 4px solid #231815;
  border-bottom: 4px solid #231815;
}

.p-period-box__corner--bl {
  bottom: 0;
  left: 0;
  border-right: 4px solid #231815;
  border-top: 4px solid #231815;
}

.p-period-box__corner--br {
  bottom: 0;
  right: 0;
  border-left: 4px solid #231815;
  border-top: 4px solid #231815;
}

.p-period-box__section {
  border-bottom: 1px solid #231815;
}

.p-period-box__section:last-child {
  border-bottom: none;
}

.p-period-box__head {
  margin: 0;
  padding: 14px 20px;
  background: #970181;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center;
}

.p-period-box__body {
  padding: 24px 20px;
  text-align: center;
}

.p-period-box__body p {
  margin: 0 0 12px;
  line-height: 1.5;
}

.p-period-box__body p:last-child {
  margin-bottom: 0;
}

.p-period-box__body .p-period-box__date {
  font-size: 3.5rem;
  font-weight: 700;
}

.p-period-box__body .p-period-box__date--highlight {
  display: inline-block;
  background: #FFF100;
  color: #EE3823;
  padding: 0 5px;
}

.p-period-box__body .p-period-box__date--sub {
  color: var(--main-user);
}

.p-period-box__body .p-period-box__note {
  font-size: 1.2rem;
  text-decoration: underline;
    margin-bottom: 30px;
}

.p-period-box__body .p-period-box__cond,
.p-period-box__body .p-period-box__label {
    font-size: 1.6rem;
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    .p-period-box__head {
        font-size: 2rem;
    }

    .p-period-box__date,
    .p-period-box__date--sub {
        font-size: 1.8rem;
    }

    .p-period-box__body {
        padding: 20px 16px;
        text-align: center;
    }

    .p-period-box__body p {
        font-size: 1.5rem;
    }

    .p-period-box__note,
    .p-period-box__cond,
    .p-period-box__label {
        font-size: 1.4rem;
    }

    .p-period-box {
        border: 3px solid #231815;
        padding: 17px;
    }

    .p-period-box__corner {
        width: 20px;
        height: 20px;
    }

    .p-period-box__inner {
        border: 3px solid #231815;
    }

    .p-period-box__corner--tl {
        border-right: 3px solid #231815;
        border-bottom: 3px solid #231815;
    }

    .p-period-box__corner--tr {
        border-left: 3px solid #231815;
        border-bottom: 3px solid #231815;
    }

    .p-period-box__corner--bl {
        border-right: 3px solid #231815;
        border-top: 3px solid #231815;
    }

    .p-period-box__corner--br {
        border-left: 3px solid #231815;
        border-top: 3px solid #231815;
    }

    .p-period-box__body .p-period-box__date {
        font-size: 3rem;
    }
}

.p-top p.flex {
  display: inline-flex;
}


.p-top p.t-red {
  color: var(--red);
}

.p-top__overview {
  max-width: 1164px;
  margin: 50px auto 0;
  padding: 0;
}

.p-top__overview img {
  width: 100%;
  display: block;
}

@media screen and (max-width: 768px) {
  .p-top .c-box {
    padding: 1rem;
  }

  .block_500 {
    display: block;
  }

  .p-top {
    padding-bottom: 20px;
  }

  .p-top p {
    font-size: 3rem;
  }

  .p-top .flex {
    display: block;
  }
}

/*-----------------------
利用者共通背景色
------------------------*/
.l-user .c-section__bg {
  background-color: #EBFAFF;
}

/*-----------------------
お申し込みの流れ
------------------------*/

.p-flow .p-flow__steps {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.p-flow .p-flow__steps .c-box_3 {
  width: 304px;
  margin: 1rem 0;
}

.p-flow .p-flow__steps .step_desc{
    border-top: 2px solid rgba(35, 24, 21, 0.5);
}

.p-flow .c-box .step_img {
  max-width: 300px;
  width: 100%;
  margin: 2rem auto 0;
}

.p-flow .c-box .step_img img {
  width: 100%;
}

.p-flow .p-big_purchase_btn {
  background-image: url("/img/purchase_btn_bg.png");
  background-repeat: no-repeat;
  background-size: 100%;
  color: #FFF23F;
  font-size: 4rem;
  line-height: calc(78px + 3.8rem);
  padding: 2rem;
  width: 682px;
  height: 157px;
  display: block;
  margin: auto;
  position: relative;
}
.p-flow .p-big_purchase_btn:before {
  background-image: url("/img/purchase_btn_deco_01.png");
  left: 20px;
}
.p-flow .p-big_purchase_btn:after {
  background-image: url("/img/purchase_btn_deco_02.png");
  right: 20px;
}
.p-flow .p-big_purchase_btn:after,
.p-flow .p-big_purchase_btn:before{
  position: absolute;
  content: "";
  width: 62px;
  height: 79px;
  background-size: contain;
  background-repeat: no-repeat;
  top: 50%;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
}



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

  .p-flow .c-box .step_img {
    max-width: 200px;
    width: 90%;
  }

  .p-flow .c-box .step_img2 {
    max-width: 180px;
    width: 80%;
  }

  .step_desc {
    font-size: 2.4rem;
  }
  .p-flow .c-base_btn .c-btn_shadow.c-base_btn--main-user {
    background-image: url("/img/purchase__btn__cover.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    color: var(--yellow);
    max-width: 330px;
    width: 100%;
    font-size: 3rem;
  }
  .p-flow .p-big_purchase_btn {
    width: 100%;
  }
}

@media screen and (max-width: 600px) {
  .p-flow .p-big_purchase_btn {
    height: 82px;
    line-height: calc(20px + 3rem);
    font-size: 3rem;
  }
  .p-flow .p-big_purchase_btn:after, .p-flow .p-big_purchase_btn:before {
    width: 32px;
    height: 49px;
  }
  .p-flow .p-big_purchase_btn:before {
    left: 10px;
  }
  .p-flow .p-big_purchase_btn:after {
    right: 10px;
  }
  .p-flow .p-flow__steps {
    display: block;
  }
  .p-flow .p-flow__steps .c-box_3 {
    margin: 2rem auto;
  }
}

/*-----------------------
利用方法
------------------------*/
.p-howto .f-contents {
  max-width: 948px;
}

.p-howto__first {
  padding: 3rem 0;
  margin-top: 50px;
  background: var(--sub);
  color: #fff;
  font-size: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.p-howto__first__icon {
  width: auto;
  height: 65px;
}

.p-howto .c-box_2 {
  margin: 1rem 0;
}

/* howto_app.png 上の App Store / Google Play アイコンをクリック可能に */
.p-howto__app-img-wrap {
  position: relative;
  display: block;
  line-height: 0;
}

.p-howto__app-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

.p-howto__app-link {
  position: absolute;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  z-index: 1;
}

.p-howto__app-link--apple {
    top: 27.8%;
    left: 12.8%;
    width: 30.8%;
    height: 6%;
}

.p-howto__app-link--google {
    top: 27.8%;
    left: 48%;
    width: 38%;
    height: 6%;
}

.p-howto .c-box_2.p-howto__cpm {
  padding-top: unset;
}

.p-howto .p-howto__2way {
  display: flex;
  justify-content: space-between;
}

.p-howto__cpm  .c-box__hl{
  background-color: var(--sub);
}

.p-howto__mpm  .c-box__hl{
  background-color: var(--main-user);
}

.p-howto__cpm .c-triangle {
  border-color: var(--sub) transparent transparent transparent;
  margin: 0 auto 1rem;
}

.p-howto__mpm .c-triangle {
  border-color: #4ACCDE transparent transparent transparent;
  margin: 0 auto 1rem;
}

.p-howto .step_num {
  line-height: 1;
}

.p-howto__step__text {
  text-align: left;
}

.p-howto .step_desc {
  color: var(--text);
}

.p-howto .p-howto__step {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--text);
  align-items: center;
  height: fit-content;
  padding: 2rem 0;
}

.p-howto__step:first-of-type {
  padding-top: 40px;
}

.p-howto .p-howto__step:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.p-howto__step__text {
  color: var(--text);
  width: 51%;
}

.p-howto__step__img {
  width: 48%;
}

.p-howto__mpm .c-base_btn .c-btn_shadow.c-base_btn--main-user {
  box-shadow: 0 6px 0 0 rgb(206, 50, 84);
  background: var(--main-user);
  width:100%;
  position: relative;
}

.p-howto__cpm .c-base_btn .c-btn_shadow.c-base_btn--navy {
  box-shadow: 0 6px 0 0 rgb(0, 50, 98);
  background: var(--navy);
  color: var(--white);
  width:100%;
  position: relative;
}

.p-recommend__list {
  display: flex;
}

.p-recommend_title {
  padding-top: 4rem;
  font-size: 2.4rem;
}

.p-recommend_title p {
  position: relative;
  display: inline-block;
  padding: 0 30px;
  margin-bottom: 36px;
  font-size: 3rem;
  font-weight: 700;
  color: var(--main-user);
}

.p-recommend_title p:before {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: -3.8rem;
  transform: rotate(-45deg);
  background: var(--main-user);
  height: 4rem;
  width: 3px;
}

.p-recommend_title p:after {
  content: "";
  position: absolute;
  top: 0.5rem;
  right: -3.8rem;
  transform: rotate(45deg);
  background: var(--main-user);
  height: 4rem;
  width: 3px;
}

.p-recommend_box p {
  padding: 2rem 0 0 0;
  font-weight: 600;
  font-size: 2rem;
}

.p-recommend_box img {
  height: 160px;
  width: auto;
  margin: auto;
}

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

  .p-howto .f-contents .c-sub_title {
    font-size: 2.5rem;
  }

  .howto-ticket {
    width: 20rem;
  }

  .p-howto .p-recommend_title p {
    font-size: 2.4rem;
    line-height: 1.2;
    padding: 0 20px;
  }

  .p-recommend_title p:before {
    left: 1rem;
  }

  .p-recommend_title p:after {
    right: 1rem;
  }

  .p-howto .p-recommend_box p {
    font-size: 2.4rem;
  }

  .triangle {
    display: none;
  }

  .p-howto .c-box_2 {
    margin: 20px 0;
    max-width: unset;
  }

  .p-howto .f-contents .c-sub_title {
    margin-top: 20px;
  }

  .p-howto .p-recommend_title p {
    margin-bottom: 0;
  }
  .howto .p-howto .p-howto__cpm .step_img,
  .howto .p-howto .p-howto__mpm .step_img {
    width: 60%;
    margin: auto;
  }

  .p-howto__mpm .c-base_btn .c-btn_shadow.c-base_btn--main-user,
  .p-howto__cpm .c-base_btn .c-btn_shadow.c-base_btn--navy{
    width:300px;
  }

  .p-recommend__list {
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .p-howto .p-howto__2way {
    display: block;
    margin: auto;
    padding-bottom: 20px;
  }

  .p-howto__first__icon {
    height: 50px;
  }
}



/*-----------------------
商品券について
------------------------*/
.p-ticket .f-contents {
  max-width: 1164px;
}

.p-ticket__desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: #231815;
  margin-top: 2rem;
  margin-bottom: 4rem;
}

.p-ticket__red {
  color: #C60000;
  text-decoration: underline;
}

.p-ticket__banner {
  background-color: #FFFBE2;
  color: #C60000;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 2.8rem;
  font-weight: 700;
  text-align: center;
  padding: 2rem;
  margin-bottom: 4rem;
}

.p-ticket__set {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.027em;
  margin-top: 4rem;
  margin-bottom: 3rem;
  text-align: left;
}

.p-ticket__cards {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}

.p-ticket__cards img {
  width: calc(50% - 1rem);
}

.p-ticket__category {
  background-color: #fff;
  border: 2px solid #231815;
  border-radius: 5px;
  padding: 2rem 3rem;
  margin-top: 50px;
  max-width: 948px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #231815;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

@media screen and (max-width: 600px) {
  .p-ticket__banner {
    font-size: 1.8rem;
    padding: 1.2rem 1.5rem;
  }

  .p-ticket__cards {
    flex-direction: column;
    align-items: center;
  }

  .p-ticket__cards img {
    width: 80%;
    max-width: none;
  }
}

/*-----------------------
注意事項
------------------------*/
.p-note {
  padding: 20px 0;
}

.p-note .note_box {
  background: #2222221a;
  text-align: left;
  padding: 3rem 2rem;
  max-width: 948px;
  margin: 0 auto;
}

.p-note .note_box .note_box_title {
  font-size: 2.8rem;
}
.p-note .note_box .note_box_text {
  font-size: 1.6rem;
  font-weight: normal;
}
.p-note .note_box .note_box_text li {
  line-height: 2;
  font-weight: 600;
}
.p-note a {
  text-decoration: underline solid #58abf2;
  color: #58abf2;
}

@media screen and (max-width: 768px) {
  .p-note .note_box {
    margin-bottom: 0;
  }
}


/*-----------------------
事業者の方はこちら
------------------------*/
.c-section__bg--company {
  background: var(--bg-sub);
}

.c-sub_title--company {
  background: var(--sub);
}

.c-hl--underline.c-color-sub {
  color: var(--sub);
}

.c-hl--underline.c-color-sub:after {
  background: var(--sub);
}

.p-company .f-contents {
  padding-top: 0;
}

.p-company--msg {
  font-size: 2.8rem;
  margin-top: 6rem;
}

/*-----------------------
お知らせ
------------------------*/
.c-news {
  padding: 20px 0;
}

.p-news__wrapper {
  margin-bottom: 0;
  padding: 4rem;
  border: 1px solid #005EAD;
  border-radius: 10px;
}

.p-news__wrapper > h1 {
  color: #0075B7;
}

/* kvのDL禁止 */
.no_dl{
  pointer-events: none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  user-select:none;
}

/* 緊急お知らせ（赤枠） */
.p-result{
  text-align: center;
  padding-top: 3.6rem;
  border: 2px solid var(--pink);
  padding: 2rem;
  background: #FFEDED;
  width: 80%;
  margin: auto;
}
.p-result__ttl{
  font-size: 3rem;
  color: var(--pink);
}
.p-result__text,
.p-result__text--big,
.p-result__text--small
{
  color: var(--text-black);
}
.p-result__text--big{
  font-size: 3rem;
}
.p-result__text--small{
  font-size: 1.4rem;
}

@media screen and (max-width: 768px) {
  .p-kv--user{
    padding-top: 2rem;
  }
  .p-result{
    width: 95%;
  }
  .p-result__ttl{
    font-size: 2.2rem;
    color: var(--pink);
    line-height: 1.4;
    margin-bottom: 1.4rem;
  }
  .p-result__text{
    font-size: 1.7rem;
    letter-spacing: 0;
    text-align: left;
  }
}

.p-flow .c-box .step_desc--w50 {
  width: 50%;
  font-weight: 600;
  font-size: 1.8rem;
  text-align: left;
  line-height: 1.2;
}
.p-flow .c-box .step_img--w50 {
  width: 50%;
}
.p-flow .c-box .step_desc--w60 {
  width: 60%;
  font-weight: 600;
  font-size: 1.8rem;
  text-align: left;
  line-height: 1.2;
}
.p-flow .c-box .step_img--w40 {
  width: 40%;
}
.p-flow__steps--flex {
  align-items: flex-end;
}

@media screen and (max-width: 768px) {
  .p-flow .c-box .step_desc--w50,
  .p-flow .c-box .step_desc--w60
  {
    font-size: 16px;
  }
  .p-flow__steps--flex {
    align-items: flex-start;
  }
}