@charset "utf-8";

/*
========== CSS of CONTENTS ==========

Created:
Modified:

1:base
2:header
3:contents
4:footer
5:others

========== /CSS of CONTENTS ==========
*/

/* 1:base
   --------------------------------------------- */
html {
  font-size: 62.5%;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
section,
div,
p,
ul,
ol,
li,
dl,
dt,
dd {
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style-type: none;
}
a {
  color: #0080c6;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
body {
  font-size: 1.6rem;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック",
    YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  color: #000;
  margin: 0;
  text-align: left;
  background-color: #fff;
}
:root {
  --main-color: #f27109;
  --bg_gray: #eff3f7;
  --bg_gray_2: #f2f2f2;
  --inner_padding: calc(56 / 640 * 100vw) calc(20 / 640 * 100vw);

  @media screen and (min-width: 920px) {
    --inner_padding: 56px 40px;
  }

}
.img_fit{
  width: fit-content;
  height: auto;
  margin: 0 auto;
}
.is_inline{
  display: inline;
}
.is_pc,
.is_inline.is_pc{
  display: none;
}
@media screen and (min-width: 920px) {
  .is_pc{
    display: block;
  }
  .is_inline.is_pc{
    display: inline;
  }
  .is_sp{
    display: none;
  }
}
.inner{
  width: 100%;
  max-width: 100%;
  padding: var(--inner_padding);
  margin: 0 auto;
}
/* @media screen and (min-width: 920px) {
  .inner{
    min-width: calc( 880px + (40px * 2) );
  }
} */
a:has(picture):hover,
a:has(img):hover{
  opacity: 0.7;
}

/* :content
   --------------------------------------------- */

/* header{} */
.hero{
  .hero_header {
    background-color: var(--bg_gray);
    padding-inline: calc(20 / 640 * 100vw);
  }
}
/* .intro{} */
.check_now{
  background-color: var(--bg_gray_2);
}
/* .users_voice{} */
.how_to{
  background-color: var(--bg_gray_2);
}
/* .footer{} */

.btnArea {
  margin: 0 auto;
  margin-top: calc(42 / 640 * 100vw);
}
@media screen and (min-width: 920px) {
  .btnArea {
    margin-top: 60px;
  }
}
.entry_btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(400px, calc(515 / 640 * 100vw));
  border-radius: 999px;
  margin: 0 auto;
  background-color: var(--main-color);
  line-height: 1.3;
  letter-spacing: 0.1em;
  font-weight: bold;
  font-size:min(2rem, calc(32 / 640 * 100vw));
  color: #fff;
  text-decoration: none;
  padding:min(1em, calc(20 / 640 * 100vw)); 
}
@media screen and (min-width: 920px) {
  .entry_btn {
    padding: 17px;
    font-size: 2rem;
  }
  .entry_btn .arrow {
    width: 15.5px;
    height: 21.5px;
    right: 30px;
  }
}
.entry_btn:hover {
  opacity: 0.7;
}
.entry_notice{
  font-size: 10px;
  color: #333;
  text-align: center;
  margin-top: 10px;
}
.arrow_svg{
  width:min(20px, calc(20 / 640 * 100vw));
  height: min(20px, calc(20 / 640 * 100vw));
  position: absolute;
  right: min(30px, calc(30 / 640 * 100vw));;
  stroke: #fff;
  stroke-width:min(3px, calc(6 / 640 * 100vw)); 
}
.check_now_list{
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(10 / 640 * 100vw);
  max-width: 880px;
  margin: 0 auto;
  margin-top: calc(36 / 640 * 100vw);
  padding-inline: calc(20 / 640 * 100vw);
}
@media screen and (min-width: 920px) {
  .check_now_list {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    margin-top: 40px;
    padding-inline: 0;
  }
}
.users_voice_list {
  display: flex;
  flex-direction: column;
  gap: calc(20 / 640 * 100vw);
  max-width: 880px;
  margin: 0 auto;
  margin-top: calc(60 / 640 * 100vw);
}
.users_voice_notice{
  font-size: 10px;
  color: #333;
  margin: 0 auto;
  margin-top: 10px;
  max-width: 880px;
}
@media screen and (min-width: 920px) {
  .users_voice_list_grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 880px;
    margin: 0 auto;
    margin-top: 40px;
  }
  .users_voice_list {
    gap: 20px;
    margin-top: 0;
  }
  .users_voice_notice{
    transform: translate(0, -30px);
  }
}
.steps{
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(20 / 640 * 100vw);
  max-width: 880px;
  margin: 0 auto;
  margin-top: calc(30 / 640 * 100vw);
}
@media screen and (min-width: 920px) {
  .steps {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
    margin-top: 40px;
  }
}
.step{
  background-color: #fff;
  color: #000;
  padding: calc(32 / 640 * 100vw);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  &::after{
    position: absolute;
    bottom: calc(16 / 640 * 100vw * -1);
    content: "";
    display: block;
    width: calc(26 / 640 * 100vw);
    height: calc(16 / 640 * 100vw);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="39" height="19"><path fill-rule="evenodd" fill="white" d="M0.001,0.330 L19.500,18.330 L38.999,0.330 L0.001,0.330 Z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
  }
}
.step:last-child::after{
  display: none;
}
@media screen and (min-width: 920px) {
  .step{
    padding: 24px 0;
    &::after{
      bottom: initial;
      width: 30px;
      height: 30px;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="39" height="19"><path fill-rule="evenodd" fill="white" d="M0.001,0.330 L19.500,18.330 L38.999,0.330 L0.001,0.330 Z"/></svg>');
      background-size: contain;
      background-repeat: no-repeat;
      transform: rotate(-90deg);
      transform-origin: center;
      left: calc( 100% - 1px );
    }
  }
}
.step_title{
  font-size:min( 20px, 30 / 640 * 100vw);
  font-weight: bold;
  color: var(--main-color);
  text-align: center;
  width: fit-content;
  margin: 0 auto;
  line-height: 1;

  & p::after{
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--main-color);
    margin-top: calc(6 / 640 * 100vw);
  }
}
@media screen and (min-width: 920px) {
  .step_title{
    & p::after{
      margin-top: 2px;
      height: 1.3px;
    }
  }
}
.step_text{
  font-size:min(16px, 23 / 640 * 100vw);
  line-height: 1.6;
  text-align: center;
  margin-top: calc(27 / 640 * 100vw);
  & span{
    font-weight: bold;
  }
}
@media screen and (min-width: 920px) {
  .step_text{
    font-size: 15.6px;
    line-height: 1.6;
    margin-top: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(15.6px * 1.6 * 3);
  }
}
.entry_btn_step{
  margin-top: calc(30 / 640 * 100vw);
}
.closing_bnr{
  padding-inline: calc(40 / 640 * 100vw);
}

/* :footer
   --------------------------------------------- */
.footer {
  text-align: center;
  .inner{
    padding-block:0 min(40px, calc(20 / 640 * 100vw));
    max-width: 880px;
    margin: 0 auto;
  }
  & small {
    font-size:min(1.2rem, 3.75vw);
    color: #999;
  }
}