@charset "utf-8";

@font-face{
  font-family:"IBM Plex Sans JP";
  src:url("fonts/IBM_Plex_Sans_JP/IBMPlexSansJP-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"IBM Plex Sans JP";
  src:url("fonts/IBM_Plex_Sans_JP/IBMPlexSansJP-Medium.ttf") format("truetype");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"IBM Plex Sans JP";
  src:url("fonts/IBM_Plex_Sans_JP/IBMPlexSansJP-SemiBold.ttf") format("truetype");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"IBM Plex Sans JP";
  src:url("fonts/IBM_Plex_Sans_JP/IBMPlexSansJP-Bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* =========================
reset / base.css 上書き（本文 #contents のみ）
========================= */

#contents{
  font-family:"IBM Plex Sans JP", sans-serif;
  color:#000;
  line-height:1.8;
  overflow:visible;
}

body#sns #main,
body#sns #wrapper{
  overflow:visible;
}

#contents .gifu-header__jp,
#contents .gifu-header__en,
#contents .gifu-message__inner p,
#contents .promo-title,
#contents .promo-code-text,
#contents .promo-code-text .small,
#contents .promo-code-text .code{
  text-align:center;
}

#contents .guide-title{
  text-align:center;
}

#contents .step p{
  text-align:left;
}

#contents a.activity-btn,
#contents a.activity-btn:link,
#contents a.activity-btn:visited{
  color:#BD2D4F;
  text-decoration:none;
}

#contents a.activity-btn:hover,
#contents a.activity-btn:active{
  color:#fff;
  text-decoration:none;
}

#contents button.copy-btn{
  font-family:inherit;
  appearance:none;
  -webkit-appearance:none;
}

/* =========================
改行（PC / SP）
========================= */

#contents br.br_sp{
  display:none;
}

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

  #contents br.br_pc{
    display:none;
  }

  #contents br.br_sp{
    display:block;
  }
}

/* =========================
base
========================= */

body{
  margin:0;
  font-family:"IBM Plex Sans JP", sans-serif;
  color:#000;
  line-height:1.8;
}

#contents img{
  width:100%;
  max-width:100%;
  height:auto;
  display:block;
  vertical-align:bottom;
  box-shadow:none;
}

/* =========================
デザインヘッダー
========================= */

.gifu-header{
  position:relative;
  background:#F2EBDD;
  height:85px;
  overflow:hidden;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);

  display:flex;
  align-items:center;
  justify-content:center;
}

.gifu-header::before,
.gifu-header::after{
  content:"";
  position:absolute;
  z-index:1;
  top:50%;
  width:210px;
  height:85px;
  background:url("img/gifu-header_pc.png") no-repeat center / contain;
  transform:translateY(-50%);
  pointer-events:none;
}

.gifu-header::before{
  right:0;
}

.gifu-header::after{
  left:0;
  transform:translateY(-50%) rotate(180deg);
}

.gifu-header__inner{
  position:relative;
  z-index:2;
  font-family:"Noto Sans JP", "Noto Sans", sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:78px;
  gap:24px;
}

.gifu-header__jp,
.gifu-header__en{
  margin:0;
  font-size:30px;
  font-weight:600;
  line-height:1.1;
  transform:translateY(0.04em);
}

.gifu-header__jp{
  color:#000;
}

.gifu-header__en{
  color:#BD2D4F;
}

/* =========================
MV
========================= */

.gifu-mv img{
  height:auto;
}

/* =========================
下文字
========================= */

.gifu-message{
  position:relative;
  background:#fff;
  padding:75px 20px 100px;
  overflow:visible;
}

.gifu-message__decor{
  position:absolute;
  inset:0;
  background:url("message-decor.png") center center no-repeat;
  background-size:cover;
  opacity:0.5;
  pointer-events:none;
}

.gifu-message__pattern{
  position:absolute;
  top:50%;
  z-index:1;
  width:120px;
  height:280px;
  transform:translateY(-50%);
  background-repeat:no-repeat;
  background-size:contain;
  pointer-events:none;
}

.gifu-message__pattern--left{
  left:5vw;
  width:15vw;
  max-width: 300px;
  height:auto;
  aspect-ratio:120 / 280;
  background-image:url("img/bg-pattern-left.png");
  background-position:left center;
}

.gifu-message__pattern--right{
  right:5vw;
  width:15vw;
  max-width: 300px;
  height:auto;
  aspect-ratio:120 / 280;
  background-image:url("img/bg-pattern-right.png");
  background-position:right center;
}

.gifu-message__inner{
  position:relative;
  z-index:2;

  max-width:1000px;
  margin:0 auto;
  text-align:center;
}

.gifu-message__inner p{
  margin:0 0 24px;
  font-size:20px;
  color:#000;
  font-weight:500;
  line-height:55px;
}

.gifu-message__inner p:last-child{
  margin-bottom:0;
}

.gifu-message__inner .accent{
  font-size:26px;
  color:#BD2D4F;
  font-weight:700;
}

/* =========================
プロモーションコード
========================= */

.promo-section{
  position:relative;
  background:#F2EBDD;
  padding:45px 20px;
  overflow:visible;
}

.promo-bg-decor{
  position:absolute;
  bottom:0;
  left:50%;
  width:100vw;
  height:calc(100vw * 63.55 / 1366);
  transform:translate(-50%, 50%);
  background:url("img/promo-wave.svg") no-repeat center bottom;
  background-size:100% 100%;
  pointer-events:none;
}

.promo-box{
  position:relative;
  z-index:2;
  box-sizing:border-box;
  width:100%;
  max-width:980px;
  height:auto;
  margin:0 auto;
  padding:70px 40px;
  background:transparent;
  overflow:visible;
  isolation:isolate;
}

.promo-box::before{
  content:"";
  position:absolute;
  top:-28px;
  right:-28px;
  bottom:-28px;
  left:-28px;
  z-index:0;
  overflow:hidden;
  background:url("img/code_box-bg_pc.png") no-repeat center / cover;
  pointer-events:none;
}

.promo-box::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  pointer-events:none;
}

.promo-box > *{
  position:relative;
  z-index:2;
}

.promo-title{
  text-align:center;
  font-size:38px;
  line-height:1.6;
  font-weight:400;
  margin:0 0 17px;
  color:#000;
}

.promo-title .accent{
  color:#BD2D4F;
}

.promo-code-area{
  max-width:800px;
  margin:0 auto 40px;
  padding:40px 80px;
  background:#F4F3F2;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.copy-btn{
  position:relative;
  background:#BD2D4F;
  color:#fff;

  border:none;
  border-radius:999px;

  box-sizing:border-box;
  width:316px;
  height:84px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-family:"IBM Plex Sans JP", sans-serif;
  font-size:24px;
  font-weight:700;
  box-shadow:4px 4px 0 #8A2937;

  cursor:pointer;
  transition:transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, filter 0.2s ease;
}

.copy-btn:hover{
  transform:translateY(-2px);
  box-shadow:6px 6px 0 #8A2937;
  filter:brightness(1.05);
}

.copy-btn:active{
  transform:translateY(0);
  box-shadow:2px 2px 0 #8A2937;
}

.copy-btn:focus-visible{
  outline:3px solid rgba(189, 45, 79, 0.35);
  outline-offset:3px;
}

.copy-btn.is-copied{
  background:#2e9f5a;
  box-shadow:4px 4px 0 #1f6f3f;
}

.copy-btn.is-copied:hover{
  box-shadow:6px 6px 0 #1f6f3f;
}

.copy-btn.is-copied:active{
  box-shadow:2px 2px 0 #1f6f3f;
}

.copy-btn::before{
  content:"";
  flex-shrink:0;
  width:26px;
  height:22px;
  margin-right:8px;
  background:url("img/copy-btn_ico.svg") no-repeat center / contain;
}

.copy-btn::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:90px;
  aspect-ratio:1 / 1;
  transform:translate(-40%, -80%);
  background:url("img/copy-btn_mark.svg") no-repeat center / contain;
  pointer-events:none;
}

.promo-code-text{
  flex:1;
  text-align:center;
}

.promo-code-text .small{
  display:block;
  font-family:"IBM Plex Sans JP", sans-serif;
  font-size:22px;
  font-weight:500;
  line-height:1.4;
  color:#000;
}

.promo-code-text .code{
  display:block;
  max-width:300px;
  margin:0 auto;

  font-family:"IBM Plex Sans JP", sans-serif;
  font-size:44px;
  font-weight:600;
  color:#BD2D4F;
  line-height:1.2;
}

.activity-btn{
  box-sizing:border-box;
  max-width:390px;
  width:100%;
  height:85px;

  margin:0 auto;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:30px;

  background:#fff;
  border:2px solid #BD2D4F;
  border-radius:10px;

  font-family:"IBM Plex Sans JP", sans-serif;
  color:#BD2D4F;
  font-size:21px;
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.2;

  transition:background 0.3s, color 0.3s;
}

.activity-btn::after{
  content:"";
  flex-shrink:0;
  width:28px;
  height:28px;
  background:url("img/activity-btn-icon.svg") no-repeat center / contain;
  transition:filter 0.3s;
}

.activity-btn:hover,
.activity-btn:active{
  background:#BD2D4F;
  color:#fff;
}

.activity-btn:hover::after,
.activity-btn:active::after{
  filter:brightness(0) invert(1);
}

/* =========================
ご利用方法
========================= */

.guide-section{
  padding:60px 20px;
  background:#F2EBDD;
}

.guide-title{
  position:relative;
  width:fit-content;
  margin:0 auto 20px;
  padding:0 96px;
  font-size:38px;
  color:#BD2D4F;
  font-weight:400;
}

.guide-title::before,
.guide-title::after{
  content:"";
  position:absolute;
  top:50%;
  width:76px;
  height:8px;
  transform:translateY(-50%);
  background-color:transparent;
  background-image:linear-gradient(#BD2D4F, #BD2D4F), linear-gradient(#BD2D4F, #BD2D4F);
  background-size:76px 2px, 76px 2px;
  background-position:center top, center bottom;
  background-repeat:no-repeat;
}

.guide-title::before{
  left:0;
}

.guide-title::after{
  right:0;
}

.guide-box{
  max-width:1100px;
  margin:0 auto 50px;

  background:#fff;
  padding:30px;

  box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.guide-figure{
  margin:0;
}

.guide-figure img{
  width:100%;
  display:block;
}

.guide-steps{
  display:flex;
  align-items:flex-start;
  gap:10px;

  max-width:1000px;
  margin:20px  40px;
}

.step{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.step-main{
  display:flex;
  align-items:center;
  gap:20px;
}

.step-body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.step-texts{
  display:flex;
  flex-direction:column;
  max-width:420px;
}

.step-circle{
  width:65px;
  height:65px;

  background:#C91C45;
  border-radius:50%;

  color:#fff;
  font-family:"IBM Plex Sans JP", sans-serif;
  line-height:1.2;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;

  flex-shrink:0;
}

.step-circle__label{
  display:block;
  font-size:13px;
  font-weight:500;
  line-height:1.2;
}

.step-circle__num{
  display:block;
  font-size:23px;
  font-weight:400;
  line-height:1.1;
}

.step p{
  margin:0;
  font-size:20px;
  font-weight:500;
  line-height:1.4;
}

#contents .step .step-note{
  display:block;
  max-width:420px;
  margin-left:85px;
  font-size:15px;
  font-weight:500;
  margin-top:15px;
  line-height:1.5;
  text-align:left;
}

.arrow{
  flex-shrink:0;
  width:24px;
  height:auto;
  align-self:flex-start;
  margin:24px 0 0;
}

.arrow img{
  display:block;
}

/* =========================
SP
========================= */

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

  /* header */

  .gifu-header{
    height:100px;
    padding:0 20px;
  }

  .gifu-header__inner{
    flex-direction:column;
    min-height:44px;
    gap:6px;
  }

  .gifu-header::before,
  .gifu-header::after{
    left:50%;
    width:767px;
    height:40px;
    right:auto;
    background-image:url("img/gifu-header_sp.png");
  }

  .gifu-header::before{
    top:0;
    transform:translateX(-50%);
  }

  .gifu-header::after{
    top:auto;
    bottom:0;
    transform:translateX(-50%) rotate(180deg);
  }

  .gifu-header__jp,
  .gifu-header__en{
    font-size:23px;
    text-align:center;
  }

  /* message */

  .gifu-message{
    padding:60px 20px;
  }

  .gifu-message__pattern{
    top:auto;
    transform:none;
  }

  .gifu-message__pattern--left{
    top:10px;
    bottom:auto;
    left:10px;
    right:auto;
	max-width: 100px;
    width:20vw;
    height:auto;
    background-position:left top;
  }

  .gifu-message__pattern--right{
    top:auto;
    bottom:20px;
    left:auto;
    right:10px;
	max-width: 100px;
    width:20vw;
    height:auto;
    background-position:right bottom;
  }

  .gifu-message__inner p{
    font-size:15px;
      line-height:30px;
  }

  .gifu-message__inner .accent{
    font-size:19px;
  }

  /* promo */

  .promo-section{
    padding:40px 10px;
  }

  .promo-bg-decor{
    height: calc(100vw * 60 / 375);
    background-image:url("img/promo-wave_sp.svg");
  }

  .promo-box{
    width:312px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    padding:50px 15px;
  }

  .promo-box::before{
    top: -15px;
    right:-15px;
    bottom:-15px;
    left:-15px;
    background-image:url("img/code_box-bg_sp.png");
  }

  .promo-title{
    font-size:23px;
    margin-bottom:17px;
  }

  .promo-code-area{
    width:100%;
    max-width:none;
    margin-bottom:17px;
    flex-direction:column;
    text-align:center;
    padding:24px 12px;
    background:#F4F3F2;
    border-radius:16px;
  }

  .copy-btn{
    width:240px;
    height:60px;
    font-size:18px;
    align-self:center;
  }

  .copy-btn::after{
    width:60px;
  }

  .copy-btn::before{
    width:19px;
    height:16px;
    margin-right:6px;
  }

  .promo-code-text .small{
    font-size:18px;
  }

  .promo-code-text .code{
    max-width:300px;
    font-size:32px;
    letter-spacing:-0.05em;
  }

  .activity-btn{
    max-width:290px;
    width:100%;
    height:63px;
    font-size:17px;
    gap:10px;
  }

  .activity-btn::after{
    width:24px;
    height:24px;
  }

  /* guide */

  .guide-section{
    padding:10px 10px;
  }

  .guide-title{
    font-size:28px;
    padding:0 96px;
  }

  .guide-box{
    padding:15px;
  }

  .guide-steps{
    margin:15px;
    gap:0px;
    flex-direction:column;
    align-items:flex-start;
  }

  .step{
    align-items:flex-start;
  }

  .step-main{
    gap:10px;
  }

  .step-circle{
    width:54px;
    height:54px;
  }

  .step-circle__label{
    font-size:12px;
  }

  .step-circle__num{
    font-size:18px;
  }

  .step p{
    font-size:15px;
    
  }
  .step-texts{
    display:flex;
    flex-direction:column;
    font-feature-settings:'palt';
    max-width:240px;
  }

  #contents .step .step-note{
    margin-left:0;
    font-size:12px;
  }

  .arrow{
    margin:10px auto;
  }

  .arrow img{
    transform:rotate(90deg);
  }

}

@media screen and (max-width: 374px){
  .gifu-header__jp,
  .gifu-header__en{
    font-size:20px;
  }

  .gifu-message__inner p{
    font-size:12px;
    line-height:25px;
  }

  .gifu-message__inner .accent{
    font-size:16px;
  }

  .promo-box{
    width:270px;
  }

  .promo-title{
    font-size:24px;
  }

  .copy-btn{
    width:200px;
  }

  .promo-code-text .code{
    font-size:26px;
  }

  .promo-code-text .small{
    font-size:14px;
  }

  .activity-btn{
    font-size:14px;
  }

  .guide-title{
    font-size:24px;
    padding:0 60px;
  }

  .guide-title::before,
  .guide-title::after{
    width:50px;
  }
}