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

:root {
  --bg-yellow: #FEFFE3;
  --tx-red: #EF3505;
}

/* ページ共通___________________________*/
.main-area {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 2;
  font-size: calc(15* (100vw / 375));
  text-align: center;
  color: #2C2C2C;
  background: var(--bg-yellow);
}

.inter_txt {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

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

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


/* _:lang(x)+_:-webkit-full-screen-document,
.ff_hkg_b {
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
} */

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

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

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

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

/* ===============================================
* sec__fv *
=============================================== */
.sec__fv {
  position: relative;
}

.sec__fv p {
  font-weight: 600;
  margin-top: calc(20*(100vw / 375));
  letter-spacing: 0.01em;
}
.sec__fv .red_txt {
  display: inline-block;
  font-size: calc(24*(100vw / 375));
  color: var(--tx-red);
  font-weight: 700;
  letter-spacing: 0.075em;
  line-height: 1.5;
  position: relative;
  margin-top: calc(40*(100vw / 375));
}
.sec__fv .red_txt::before {
  content: "";
  background: url("../img/fvtxt_deco_L_sp.svg") no-repeat; /* 左吹き出し画像パス */
  width: calc(17*(100vw / 375));
  height: calc(30*(100vw / 375));
  background-size: contain;
  position: absolute;
  bottom: calc(5*(100vw / 375));
  left: calc(-25*(100vw / 375));
}
.sec__fv .red_txt::after {
  content: "";
  background: url("../img/fvtxt_deco_R_sp.svg") no-repeat; /* 右吹き出し画像パス */
  width: calc(17*(100vw / 375));
  height: calc(30*(100vw / 375));
  background-size: contain;
  position: absolute;
  bottom: calc(5*(100vw / 375));
  right: calc(-17*(100vw / 375));
}

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

  .sec__fv p {
    font-size: 1.8rem;
    letter-spacing: 0.075em;
    margin-top: 2rem;
  }
  .sec__fv .red_txt {
    font-size: 2.4rem;
    position: relative;
    margin-top: 2rem;
  }
  .sec__fv .red_txt::before {
    content: "";
    background: url("../img/fvtxt_deco_L_pc.svg") no-repeat; /* 左吹き出し画像パス */
    width: 1.2rem;
    height: 2.1rem;
    background-size: contain;
    position: absolute;
    bottom: .5rem;
    left: -2.4rem
  }
  .sec__fv .red_txt::after {
    content: "";
    background: url("../img/fvtxt_deco_R_sp.svg") no-repeat; /* 右吹き出し画像パス */
    width: 1.2rem;
    height: 2.1rem;
    background-size: contain;
    position: absolute;
    bottom: .5rem;
    right: -1.4rem
  }
}

/* ===============================================
* sec__coupon *
=============================================== */
.sec__coupon {
  width: calc(345*(100vw / 375));
  background: #FFFFFF;
  border-radius: calc(20*(100vw / 375));
  border: calc(2*(100vw / 375)) solid #EF3505;
  padding: calc(70*(100vw / 375)) calc(20*(100vw / 375)) calc(60*(100vw / 375));
  margin: calc(90*(100vw / 375)) auto calc(60*(100vw / 375));
  position: relative;  
}
.sec__coupon::before {
  content: "";
  background: url("../img/coupon_ttl_sp.svg") no-repeat;
  width: calc(315*(100vw / 375));
  height: calc(60*(100vw / 375));
  background-size: contain;
  position: absolute;
  top: calc(-32*(100vw / 375));
  left: 0;
  right: 0;
  margin: auto;
}

.sec__coupon h3{
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;  
  font-size: calc(18*(100vw / 375));
  font-weight: 600;
  letter-spacing: 0.075em;
  margin-bottom: calc(10*(100vw / 375));
}

.sec__coupon .coupon_content{
  margin-bottom: calc(40*(100vw / 375));
}

.sec__coupon .coupon_period{
  margin-bottom: calc(10*(100vw / 375));
}
.sec__coupon .coupon_period p{
  font-size: calc(15*(100vw / 375));
  font-weight: 600;
}
.sec__coupon .coupon_attention{
  text-align: left;
  font-size: calc(12*(100vw / 375));
  letter-spacing: 0.075em;
  margin-top: calc(40*(100vw / 375));
}

@media screen and (min-width: 768px) {
  .sec__coupon {
    width: 98rem;
    border-radius: 2rem;
    border: .2rem solid #EF3505;
    padding: 8rem 19rem 6rem;
    margin: 10rem auto 8rem;
  }
  .sec__coupon::before {
    content: "";
    background: url("../img/coupon_ttl_pc.svg") no-repeat;
    width: 64rem;
    height: 4.9rem;
    top: -3.2rem;
    left: 0;
    right: 0;
    margin: auto;
  }
  
  .sec__coupon h3{
    font-size: 2.2rem;
    margin-bottom: 1rem;
  }
  
  .sec__coupon .coupon_content{
    margin-bottom: 5rem;
  }
  
  .sec__coupon .coupon_content picture{
    width: 50rem;
    margin: 0 auto;
  }
  
  .sec__coupon .coupon_period{
    margin-bottom: 1rem;
  }
  .sec__coupon .coupon_period p{
    font-size: 1.8rem;
  }
  .sec__coupon .coupon_attention{
    text-align: center;
    font-size: 1.2rem;
    margin-top: 4rem;
  }
}

/* ===============================================
* sec__app *
=============================================== */
.sec__app{
  background: #FFFFFF;
  padding: calc(60*(100vw / 375)) 0;
}
.sec__app h3{
  width: calc(345*(100vw / 375));
  margin: 0 auto calc(16*(100vw / 375));
}

.app_contents {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: calc(15*(100vw / 375));
}
.app_contents li {
  width: calc(165*(100vw / 375));
}
.app_contents .qrCode{
  display: none;
}

@media screen and (min-width: 768px) {
  .sec__app{
    padding: 6rem 0;
  }
  .sec__app h3{
    width: 52.7rem;
    margin: 0 auto 1.5rem;
  }
  
  .app_contents {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 2rem;
  }
  .app_contents li {
    width: 16.5rem;
  }
  .app_contents .qrCode{
    display: block;
  }
  .app_contents .appqr{
    width: 6rem;
  }
  .app_contents .glqr{
    width: 6.4rem;
  }
}



