@charset "utf-8";

/*---------------------
  共通パーツ
----------------------*/
:root{
  --gap-s: 20px;
  --gap-m: 40px;
  --gap-l: 80px;
}
@media screen and (max-width: 767px) {
  :root{
    --gap-s: 10px;
    --gap-m: 20px;
    --gap-l: 40px;
  }
}
.u-section{
  display:block;
  position:relative;
  width:100%;
  text-align:center;
}
.contents-inner{
  margin:auto;
  padding-top:var(--gap-m);
  padding-bottom:var(--gap-m);
  width:calc(100% - 40px);
  max-width:1140px;
}
.u-section em{
  font-style:normal;
  font-weight:bold;
  color:#004da1;
}
.u-section strong{
  margin-left:0.1em;
  margin-right:0.1em;
  font-size:1.2em;
}
.u-section img,
.u-section .c-button--primary-blue,
.u-section .c-button--primary-white{
  width:100%;
}
.u-section a:hover,
.u-section .c-button--primary-blue:hover,
.u-section .c-button--primary-white:hover{
  cursor:pointer;
}
/*リンクアニメ*/
.link-flash a {
  display:block;
}
  
.link-flash a:hover {
  -webkit-animation-duration: 1s;
  -webkit-animation-name: flash;
  animation-name: hover-flash;
  animation-duration: 1s;
  opacity: 1;
}

/*スマホサイズオンオフ*/
.disp-sp{
  display:none;
}
@media screen and (max-width: 428px) {
  .disp-sp{
    display:block;
  }
}
/*--------------------------
  キービジュアル
--------------------------*/
.hero-image{
  position:relative;
  display:block;
  width:100%;
  text-align:center;
  background-color:#0094d5;
  background-image: url(../images/kv-back-pc.webp?$staticlink$);
  background-position: center center;
  background-repeat:no-repeat;
  background-size:cover;
  text-align:center;
  color:#fff;
  font-size:clamp(12px, 0.659rem + 0.45vw, 16px);
  padding:30px 10px 20px 10px;
  letter-spacing:0.1em;
}
.hero-image_inner{
  margin:auto;
  position:relative;
  display:block;
  width:100%;
  max-width:1140px;
}
.hero-image .lead-txt{
  color:#004da1;
  font-weight:900;
  font-size:clamp(24px, 1.045rem + 2.27vw, 44px);
  text-shadow:
    #fff 0 0 10px,
    #fff 0 0 10px,
    #fff 0 0 10px,
    #fff 0 0 10px,
    #fff 0 0 10px,
    #fff 0 0 20px,
    #fff 0 0 20px,
    #fff 0 0 20px,
    #fff 0 0 20px,
    #fff 0 0 20px;
}
.hero-image .lead-txt strong{
  font-size:1.5em;
}
.hero-image h1{
  margin:20px 30px;
  color:#fff;
  background:#333;
  padding:5px;
  font-size:clamp(16px, 0.818rem + 0.91vw, 24px);
  font-weight:700;
}
.hero-image h1 strong{
  color:#ff0;
}
.hero-image .kv-step-img{
  margin:auto;
  width:48%;
}
.hero-image .kv-step-txt{
  position:absolute;
  top:0;
  left:0;
  width:20%;
  z-index:1;
}
.hero-image .kv-img{
  position:absolute;
  top:0;
  right:0;
  width:20%;
  z-index:1;
}
  
@media screen and (max-width: 767px) {
  .hero-image{
    background-image: url(../images/kv-back-sp.webp?$staticlink$);
    padding:10px 0;
  }  
  .hero-image .kv-step-txt {
    top: 0;
    left: 5px;
    width: 25%;
  }
  .hero-image .kv-img {
    top: 1vh;
    right: -3vw;
    width: 28%;
  }
  .hero-image h1 {
    margin: 10px 0;
  }
  .hero-image .kv-step-img {
    width: 72%;
  }
}

/*--------------------------
  こんな悩みを解決します
--------------------------*/
.resolving-block{
  background:#e2f5fb;
  padding:var(--gap-m);
  border-radius: 20px;
}
.resolving-block .hd-title{
  display:flex;
  align-items: center;
  justify-content: center;
}
.resolving-block .hd-title img{
  position:relative;
  width:10%;
  z-inde:1;
}
.resolving-block h2{
  font-weight:bold;
  font-size:clamp(24px, 0.955rem + 2.73vw, 36px);
  width:fit-content; 
  padding:0.5em 1em 0.5em 1.5em;
  background:#fff;
  border-radius: 0 2em 2em 0;
  margin-left:-1em;
}
  
@media screen and (max-width: 767px) {
  .resolving-block .hd-title{
    flex-direction: column;
  }
  .resolving-block .hd-title img{
    margin:auto;
    width:30%;
  }
  .resolving-block h2{
    padding:0.5em 2em;
    border-radius: 2em;
    margin: -10px auto 0 auto;
  }
}

/*---check-list---*/
.check-list{
  margin:auto;
  text-align:left;
  width:fit-content; 
  font-size:clamp(16px, 0.818rem + 0.91vw, 24px);
}
.check-list li{
  position:relative;
  margin-top:20px;
  padding-left:2em;
}  
.check-list li::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  background: transparent url(../images/ico-check.webp?$staticlink$) no-repeat top center / cover;
  width:1em;
  height:1em;
}  

/*---lead-block---*/
.lead-block{
  margin-top:var(--gap-m);
  font-size:clamp(16px, 0.818rem + 0.91vw, 24px);
  line-height:1.8;
}
@media screen and (max-width: 428px) {
  .lead-block{
    line-height:1.4;
  }
  .lead-block p:not(:first-child){
    margin-top:5px;
  }
}
/*--------------------------
  STEP
--------------------------*/
.step-block{
  text-align:left;
}

.step-block .hd-title{
  display:flex;
  align-items: center;
  gap:10px;
  font-weight:bold;
  font-size:clamp(24px, 0.955rem + 2.73vw, 36px);
}
.step-block .hd-title em{
  color:#00a2e6;
}
.step-block .hd-title h2 strong{
  font-size:1.5em;
  /*
  border-radius:50%;
  background:#00a2e6;
  color:#fff;
  */
}

.step-block .hd-title img{
  width:2.3em;
  height:2.3em;
}
.step-wrap{
  margin-top:var(--gap-m);
  width:100%;
  display:flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  background:#e2f5fb;
}
.step-wrap .step-img{
  width:40%;
  overflow: hidden;
  border-radius: 10px;
  border:2px solid #00a2e6;
}
.step-wrap .step-txt{
  width:55%;
  font-size:clamp(16px, 0.818rem + 0.91vw, 24px);
  line-height:1.8;
  padding-right: 5%;
}
.step-wrap .step-txt strong{
  white-space:nowrap;
  color:#004da1;
}
  
@media screen and (max-width: 767px) {
  .step-wrap{
    flex-direction: column;
  } 
  .step-wrap .step-img{
    width:100%;
  }
  .step-wrap .step-txt{
    width:100%;
    padding: 20px;
  }
}
  
/*--------------------------
  商品を探すボタン
--------------------------*/
.link-block .contents-inner{
  padding-bottom:var(--gap-l);
}
.btn-link{
  margin:auto;
  width:50%;
  font-size: x-large;
}
@media screen and (max-width: 767px) {
  .btn-link{
    width:100%;
    font-size: large;
  }
}