@charset "utf-8";

:root{
  --gap-s: clamp(10px, 0.398rem + 1.14vw, 20px);
  --gap-m: clamp(20px, 0.795rem + 2.27vw, 40px);
  --gap-l: clamp(40px, 1.591rem + 4.55vw, 80px);

  --font-ss: clamp(10px, 0.534rem + 0.45vw, 14px);
  --font-s: clamp(12px, 0.659rem + 0.45vw, 16px);
  --font-m: clamp(14px, 0.784rem + 0.45vw, 18px);
  --font-l: clamp(16px, 0.818rem + 0.91vw, 24px);
}

/*----------------------
レイアウト
------------------------*/
#about-forms{
  position:relative;
  width:100%;
  font-weight: 400;
  font-style: normal;
  font-size:var(--font-m);
  letter-spacing:0.01em;
  line-height:1.2;
  text-align:center;
}

#about-forms .c-button{
  width:100%;
}

#about-forms strong{
  color:#e43344;
  font-weight:700;
}
#about-forms em{
  font-style: normal;
  color:#004da1;
  font-weight:700;
}

#about-forms img{
  width:100%;
  object-fit: contain;
}

.section-inner{
  width:92vw;
  max-width:1140px;
  margin:auto;
  text-align:left;
}

.sec-cont{
  position:relative;
  padding:var(--gap-l) 0;
}

.sec-ttl{
  color:#333;
  font-weight:700;
  font-size:clamp(18px, 0.716rem + 2.05vw, 36px);
  margin-bottom:var(--gap-s);
}
.sec-sub-ttl{
  font-weight:700;
  font-size:var(--font-l);
  margin-bottom:var(--gap-s);
}

.ico-anchor,
.ico-link{
  position:relative;
  padding-left:1em;
}
.ico-anchor::before{
  position:absolute;
  content:'';
  left:0;
  top:0.3em;
  width: 0.8em;
  height: 0.696em;
  background: #00a2e6;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
}
.ico-link::before{
  position:absolute;
  content:'';
  left:0;
  top:0.3em;
  width: 0.696em;
  height: 0.8em;
  background: #00a2e6;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/*----------------------
#pagetop
------------------------*/
#pagetop {
  opacity: 1;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: opacity .5s;
  z-index: 2;
}

#pagetop a {
  background-color: rgba(51, 51, 51, .8);
  border-radius: 5px;
  color: #fff;
  display: block;
  font-size: 12px;
  line-height: 1.5em;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  #pagetop {
    bottom: 5px;
    right: 5px;
  }
}

/*----------------------
キャッチ
H1
------------------------*/
.catch-area{
 background:#222;
 padding:10px 0;
 color:#fff;
 font-weight:700;
 font-size:var(--font-s);
}


/*----------------------
KV
------------------------*/
.kv-area{
  width:100%;
  background: #ffee00 url(../images/kv-pc.webp) no-repeat top center / cover;
  padding:var(--gap-m) 0;
}

.kv-area .section-inner{
  text-align:center;
}

.kv-area sup,
.kv-area sub{
  font-size:60%;
}
.kv-area sub{
  bottom: 0;
}

.kv-top{
  position:relative;
  width:100%;
  background:#fff3d7;
  border-radius:20px;
  padding:clamp(15px, 0.597rem + 1.7vw, 30px) 15%;
}

.kv-top h2{
  color:#333;
  font-weight:900;
  font-size:clamp(24px, 0.955rem + 2.73vw, 48px);
}
.kv-top p{
  margin-top:10px;
  font-size:clamp(14px, 0.739rem + 0.68vw, 20px);
  line-height:1.4;
  font-weight:700;
}

.kv-p-left{
  position:absolute;
  bottom:0;
  left:0;
  width:15%;
}
.kv-p-right{
  position:absolute;
  bottom:0;
  right:0;
  width:15%;
}

.kv-mdl{
  position:relative;
  margin-top:var(--gap-m);
  background:#fff;
  border-radius:10px;
  padding:0.5em;
  font-size:clamp(14px, 0.739rem + 0.68vw, 20px);
  font-weight:700;
}
.kv-mdl::after{
  position:absolute;
  content:'';
  left:10%;
  bottom:-34px;
  width: 30px;
  height: 34.6px;
  background:#fff;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
  z-index:+1;
}

.kv-btm{
  margin-top:20px;
  width:100%;
}


@media screen and (max-width: 767px) {
  .kv-area{
    background: #ffee00 url(../images/kv-sp.webp) no-repeat top center / cover;
  }
  .kv-top{
    padding:clamp(15px, 0.597rem + 1.7vw, 30px);
  }
  .kv-p-image{
    width:90%;
    position:relative;
    display:flex;
    margin:10px auto;
    justify-content: space-between;
  }
  .kv-p-left,
  .kv-p-right{
    position:relative;
    width:45%;
  }
  .kv-area sub {
    text-align: right;
    display: block;
    margin-top: 10px;
  }
}

/*----------------------
レビューを投稿する
sec-post
------------------------*/
.sec-post{
  position:relative;
  padding:var(--gap-m) 0;
}

.sec-post .c-button{
  max-width:600px;
  margin:auto;
  border-radius: 100vw;
  font-size:var(--font-l);
  height:2.5em;
  font-weight:700;
}

.sec-post.--page-btm{
  background:#f6f6f6;
}
.sec-post.--page-btm .c-button{
  height:3.5em;
}
.sec-post.--page-btm .c-button span{
  position:relative;
  padding-right:3.2em;
  width:fit-content;
  font-size:var(--font-l);
}
.sec-post.--page-btm .c-button span::after{
  position:absolute;
  content:'';
  right:0;
  bottom:-0.6em;
  width:3em;
  height:3em;
  background: transparent url(../images/icon-click.svg?02) no-repeat top center / cover;
}

@media screen and (max-width: 767px) {
  .sec-post.--page-btm .c-button span::after{
    bottom:-0.1em;
  }
}

/*----------------------
キャンペーン参加方法
sec-join
------------------------*/
.sec-join{
  background:#eee;
}
.step-list{
  display:grid;
  gap:40px;
  grid-template-columns: repeat(4,1fr);
}

.step-list li{
  position:relative;
  background:#fff;
  border-radius: 10px;
  padding:20px;
}

.step-list li + li::before{
  position:absolute;
  content:'';
  top:calc(50% - 10px);
  left:-29px;
  width: 18px;
  height: 20px;
  background: #004da1;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

.step-list li .step-img{
  width:60%;
  margin:auto;
}
.step-list li h3{
  font-size:var(--font-m);
  font-weight:700;
  margin-bottom:5px;
  text-align:center;
}
.step-list li p{
  font-size:var(--font-s);
  line-height:1.6;
  text-align:center;
}
.step-list li p.link{
  margin-top:5px;
  font-size:0.8em;
  text-align:left;
}

@media screen and (max-width: 767px) {
  .step-list{
    grid-template-columns: repeat(1,1fr);
  }
  .step-list li{
    padding:10px;
  }
  .step-list li + li::before{
    top:-28px;
    left:calc(50% - 15px);
    width: 30px;
    height: 16px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
  .step-list li{
    display:flex;
    gap:10px;
    align-items: center;
  }
  .step-list li .step-img{
    width:30%;
  }
  .step-list li .step-txt{
    width:calc(70% - 10px);
  }
  .step-list li h3,
  .step-list li p{
    text-align:left;
  }
}

/*----------------------
キャンペーンについて
sec-about
------------------------*/
.sec-about section{
  margin-top:var(--gap-m);
}

.caution-ttl{
  font-weight:700;
  font-size:var(--font-l);
  margin-bottom:var(--gap-s);
}
.caution-sub-ttl{
  font-weight:700;
  font-size:var(--font-m);
}

.caution-list li{
  list-style: disc;
  margin-top:10px;
  margin-left:2em;
  line-height:1.2;
  font-size:var(--font-s);
}


/*----------------------
レビュー投稿の方法
sec-howto
------------------------*/
.sec-howto{
  background:#f6f6f6;
}
.howto-block{
  position:relative;
}
.howto-block + .howto-block{
  padding-top:160px;
}
.howto-block + .howto-block::before{
  position: absolute;
  content: '';
  left: calc(50% - 35px);
  top: 60px;
  width: 70px;
  height: 40px;
  background: #004da1;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
  z-index:+1;
}

.howto-block .link{
  margin-bottom:var(--gap-s);
}

.howto-block img{
  border-radius: 10px;
  overflow: hidden;
  border:2px solid #ccc;
}

.sec-howto p{
  line-height:1.4;
  margin-bottom:10px;
}
.sec-howto .lead-txt{
  font-weight:700;
  color:#e43344;
}
.sec-howto .caution{
  position:relative;
  padding-left:1em;
  font-size:var(--font-s);
}
.sec-howto .caution::before{
  position:absolute;
  content:'※';
  top:0;
  left:0;
}

.sec-howto .caution-block{
  margin-top:var(--gap-l);
}
.sec-howto .caution-block section+section{
  margin-top:var(--gap-m);
}

@media screen and (max-width: 767px) {
  .howto-block + .howto-block{
    padding-top:100px;
  }
  .howto-block + .howto-block::before{
    left: calc(50% - 20px);
    top: 40px;
    width: 40px;
    height: 20px;
  }
}

/*----------------------
テンプレート
sec-template
------------------------*/
/* タブ全体 */
.tabs {
  width: 100%;
  margin: auto;
}

/* ラジオボタン・チェックボックス非表示 */
.tabs input[type="radio"] ,
.tabs input[type="checkbox"] {
  display: none;
}

/* タブラベル */
.tab-labels {
  display: flex;
  gap:10px;
}

.tab-labels label {
  flex: 1;
  padding: clamp(12px, 0.659rem + 0.45vw, 16px);
  text-align: center;
  background: #ccc;
  cursor: pointer;
  transition: 0.3s;
  font-weight:700;
  border-radius: 20px 20px 0 0;
}

.tab-labels label:hover {
  background: #ddd;
}

/* コンテンツ */
.tab-content {
  display: none;
  padding: clamp(20px, 0.795rem + 2.27vw, 40px);
  background: #fff;
  border: 2px solid #00A2E6;
}

/* 選択中のタブ */
#tab1:checked ~ .tab-labels label[for="tab1"],
#tab2:checked ~ .tab-labels label[for="tab2"],
#tab3:checked ~ .tab-labels label[for="tab3"] {
  background: #00A2E6;
  color:#fff;
}

/* 選択中のコンテンツ表示 */
#tab1:checked ~ .contents #content1,
#tab2:checked ~ .contents #content2,
#tab3:checked ~ .contents #content3 {
  display: block;
}

.template-sample__item label{
  font-weight:700;
  color:#001e60;
  font-size:var(--font-m);
  border-bottom:1px dotted #ccc;
  padding-bottom:var(--gap-s);
  margin-bottom:var(--gap-s);
}
.template-sample__item textarea{
  width: 100%;
  resize: none;
  font-size:var(--font-s);
}

@media screen and (max-width: 767px) {
  .tab-labels {
    gap:5px;
  }
}

/*----------------------
PCパーツのレビューキャンペーンはこちら
------------------------*/

.more-link{
  width:100%;
  max-width:600px;
  margin:auto;
}

@media screen and (max-width: 767px) {
  .more-link .c-button > span{
    letter-spacing: 0;
  }
}