@charset "utf-8";

/*  
  リセット
---------------------------------*/
html, body, div, span,iframe,h1, h2, h3, h4, h5, h6, p, address, em, img, small, strong, b, i,dl, dt, dd, ol, ul, li,form, label, table, caption, tbody, tfoot, thead, tr, th, td,article, aside, figcaption, figure, footer, header,#global-nav, section, time,video,a,picture,button {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
  box-sizing: border-box;
  font-style: normal;
}
article,aside,figcaption,figure,footer,header,#global-nav,section,picture,small {
  display:block;
}
ul,ol{
  list-style:none;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}

img{
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
*{
  min-height: 0vw; /* Safari clamp関数対策 */
}

/*  
  変数　
---------------------------------*/
:root{
  /* カラー */
  --base-black: #333333;

  --dsuma-pink:#d46e99;
  --dsuma-red: #d96157;
  --dsuma-brown: #af7455;
  --dsuma-yellow: #e3a32c;
  --dsuma-bluegreen: #1899a8;
    --dsuma-blue: #1280b8;

  --white: #fff;
  --gray: #AAAAAA;
  --beige: #F9E1B1;
  --light-blue: #E0F2FC;
  --light-pink:#F6D8E2;
  --pink : #EA8983;
  --yellow : #F5C266;
  --green: #159247;

  /* 文字サイズ */
  --font14-12:clamp(12px,1.4rem,14px);
  --font15-13:clamp(13px,1.5rem,15px);
  --font15-12:clamp(12px,1.5rem,15px);
  --font16-13:clamp(13px,1.6rem,16px);
  --font16-14:clamp(14px,1.6rem,16px);
  --font17-15:clamp(15px,1.7rem,17px);
  --font18-16:clamp(16px,1.8rem,18px);
  --font18-17:clamp(17px,1.8rem,18px);
  --font20-16:clamp(16px,2rem,20px);
  --font20-18:clamp(18px,2rem,20px);
  --font22-20:clamp(20px,2.2rem,22px);
  --font22-18:clamp(18px,2.2rem,22px);
  --font24-16:clamp(16px,2.2rem,24px);
  --font36-20:clamp(20px,3rem,36px);

  /* フォントファミリー */
  --gothic: "Noto Sans JP", sans-serif;
  --number: "Noto Sans JP", sans-serif;
  --alphabet: "Noto Sans JP", sans-serif;
}

/* ====================================

  基本幅

======================================*/
/*  
  各要素　基本幅
---------------------------------*/
html{
  font-size: 10px;/* 1rem = 10pxと定義 */
  overflow-x: hidden;
  scroll-behavior: smooth;
  line-height: 1.6;
}
body {
  font-family: var(--gothic);
  font-weight: 500;
  color: var(--base-black);
  font-size: 16px;
}
h1,h2,h3,h4,h5{
  font-weight: 500;
  line-height: 1.4;
}
a{
  text-decoration: none;
  color: inherit;
}
th{
  font-weight:500;
}


#hero {
  position: relative;
  width: min(100%,1960px);
  height: 95vh;
  margin: 0 auto;
  background-image: url(../img/main_pc.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  /* background-position: center; */
}

.hero-sp {display: none}

#hero .headline {
  position: absolute;
  right: 6rem;
  top: 10%;
  line-height: 1.8;
  font-size: 4rem;
  font-weight: bold;
}
#hero .point {
  width: 600px;
  position: absolute;
  right: 20rem;
  top: 30%;
}
/* #hero .headline .point {
  margin-top: 3rem;
  display: flex;
  gap: 2rem;
  justify-content: end;
}
#hero .headline .point li {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  background: var(--light-pink);
  position: relative;
  text-align: center;
  font-size: 2rem;

}
#hero .headline .point li p {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  padding: 1.5em;
}
#hero .headline .point li::before {
  content: '';
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background: var(--dsuma-red);
  position: absolute;
  right: 0;
  top: 0;
} */



#hero .hero-logo {
  position: absolute;
  width: 300px;
  top: 3rem;
  left: 3rem;
}
#hero .hero_pcsp {
  position: absolute;
  right: 5%;
  bottom: -5%;
  width: 45%;
  max-width: 750px;
}



/* ----------------------------------------------
 * Generated by Animista on 2024-4-26 10:49:21
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation bounce-top
 * ----------------------------------------
 */
  .is-animated.bounce-top {
    animation: bounce-top 2.5s ;
  }
 @keyframes bounce-top {
  0% {
    transform: translateY(-60px);
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    transform: translateY(-24px);
    animation-timing-function: ease-in;
  }
  65% {
    transform: translateY(-12px);
    animation-timing-function: ease-in;
  }
  82% {
    transform: translateY(-6px);
    animation-timing-function: ease-in;
  }
  93% {
    transform: translateY(-4px);
    animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    transform: translateY(0px);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateY(0px);
    animation-timing-function: ease-out;
    opacity: 1;
  }
}

.sub-catch {
  text-align: center;
}

.ttl {
  font-size: 4rem;
  font-weight: bold;
  line-height: 2; 
}

.ttl-img span {
  font-size: 4rem;
  font-weight: bold;
  line-height: 2;
}
.ttl-img img {
  height: 6rem;
  margin: 0 1rem 1rem 1rem;
}


h3 {
  font-size: 3rem;
}

.cta {
  background:#dff1fb;
}

.cta ul {
  display: flex;
  justify-content: space-evenly;
}
.cta ul li img {
  max-width: 640px;
  width: 100%;
}

#voice {
  background: #F5F4F2;
}

.list-voice {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.list-voice li {
  width: 30%;
  background-color: #fff;
  padding: 3rem;
  border-radius: 1rem;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

.list-voice li dt {
  text-align: center;
  color: var(--green);
  margin-bottom: 3rem;
  position: relative;
  padding-top: 50px;
  font-size: var(--font24-16);
}
.list-voice li dt::before {
  background: url(../img/logo-mark.svg) no-repeat;
  content: '';
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.list-voice li dd {
  /* font-size: var(--font20-16); */
}


#reason {
  background: var(--yellow);
}

#reason h2 {
  display: flex;
  align-items: center;
  justify-content: center;
}
#reason h2 > img{
  width: 20%;
}

#reason .detail-reason {
  display: flex;
  gap: 2%;
  align-items: start;
}
#reason .detail-reason img {
  width: 33%;
}
#reason .detail-reason .count {
  font-size: 8rem;
  line-height: 1;
  font-weight: bold;
  font-family: var(--number);
  margin-top: 1rem;
}
#reason .detail-reason .count::before {
  content: "POINT";
  display: block;
  font-size: 2rem;
  text-align: center;
  line-height: 0;
}
#reason .detail-reason h3 {
  position: relative;
  padding-top: 6rem;
}
#reason .detail-reason h3 span {
  color: var(--white);
  display: inline-block;
  background: var(--green);
  padding: 1rem 1.5rem;
  font-size: var(--font18-16);
  margin-bottom: 1rem;
  position: absolute;
  top: 0;
}
#reason .detail-reason ul {
  position: relative;
  padding-top: 6rem;
  margin-top: 3rem;
}
#reason .detail-reason ul::before {
  content: "こんなことが可能に";
  color: var(--white);
  display: inline-block;
  background: var(--dsuma-blue);
  padding: 1rem 1.5rem;
  font-size: var(--font18-16);
  margin-bottom: 1rem;
  position: absolute;
  top: 0;
}
#reason .detail-reason ul li {
  position: relative;
  line-height: 2;
  font-size: var(--font20-16);
  left: 3.5rem;
}
#reason .detail-reason ul li::before {
  content: "";
  background: url(../img/square-check-regular.svg) no-repeat;
  width: var(--font20-16);
  height: var(--font20-16);
  position: absolute;
  left: -3.5rem;
  top: 1rem;
}

#user {
  background: var(--pink);
  color: var(--white);
}

#user h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
#user h2 > img{
  height: 4em;
}
#user h2 span {
  position: relative;
  text-align: center;
  margin-top: 0;
}
#user h2 span::before {
  position: absolute;
  content: '・・・';
  top: -1em;
  font-size: 50px;
  letter-spacing: -15px;
}

.detail-user-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 3rem;
}

#user .detail-user {
  width: 48%;
  display: flex;
  gap: 3%;
}
#user .detail-user img {
  width: 250px;
}
#user .detail-user .count {
  font-size: 4rem;
  line-height: 1;
  font-weight: bold;
  font-family: var(--number);
  margin-top: 1rem;
}
#user .detail-user p {
  margin-top: 2rem;
  font-size: var(--font20-16);
}

#faq article {
  padding: 3rem;
  background: var(--beige);
  margin-bottom: 3rem;
  border-radius: 2rem;
  font-size: var(--font20-16);
}
#faq h3 + article {
  margin-top: 2rem;
}
#faq .q {
  cursor: pointer;
  position: relative;
  margin-left: 3em;
  padding-right: 2em;
}
#faq .q:hover {
  opacity: .7;
}
#faq .a {
  display: none;
}
#faq .a .text {
  position: relative;
  padding-top: 2em;
  margin-left: 3em;
  padding-right: 2em;
}
#faq .q::before,
#faq .a .text::before {
  font-family: var(--number);
  font-size: 2em;
  position: absolute;
  left:0;
}
#faq .q::before {
  content:"Q.";
  color: var(--green);
  left: -1.5em;
  top: -.5em;
}
#faq .a .text::before {
  content:"A.";
  color: var(--dsuma-red);
  left: -1.5em;
  top: .75em;
}

#faq .q::after {
  content: "";
  background-image:url(../img/circle-plus-solid.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 1.75em;
  height: 1.75em;
  display: inline-block;
  position: absolute;
  right: 0;
  top: -.25em;
  transition: .5s;
}
#faq .q.open::after {
  background-image:url(../img/circle-minus-solid.svg);
}

footer {
  background: var(--green);
  color: var(--white);
}

.footer-inner {
  display: flex;
  gap: 3rem;
}
.footer-inner .footer-logo {
  width: 300px;
}

/* 折り返し */
.nowrap{white-space: nowrap}

/* 色 */
.white {color: #fff}
.pink {color: --pink}
.red {color: var(--dsuma-red)}
.brown {color: var(--dsuma-brown)}
.yellow {color: var(--yellow)}
.bluegreen {color: var(--dsuma-bluegreen)}
.green {color: var(--green)}
.blue {color: var(--dsuma-blue)}
.gray {color: var(--gray)}
.beige {color: var(--beige)}
.light-blue{color: var(--light-blue)}
.light-pink {color: var(--light-pink)}


/* 文字サイズ */
.font14-12{font-size: var(--font14-12)}
.font16-13{font-size: var(--font16-13)}
.font16-14{font-size: var(--font16-14)}
.font18{font-size: 18px}
.font18rem{font-size: 1.8rem}
.font18-16{font-size: var(--font18-16)}
.font2rem{font-size: 2rem}
.font20-18{font-size: var(--font20-18)}
.font20-16{font-size: var(--font20-16)}
.font22-20{font-size: var(--font22-20)}
.font22-18{font-size: var(--font22-18)}
.font24rem{font-size: 2.4rem}
.font32rem{font-size: 3.2rem!important}
.font36rem{font-size: 3.6rem}
.font38rem{font-size: 3.8rem}
.font-85em{font-size: .85em;}
.font24-16{font-size: var(--font24-16)}
.font36-20{font-size:var(--font36-20)}


.alias{font-size: clamp(12px,1.5rem,15px)}

.bold {font-weight: bold}

/* 書体 */
.alphabet{
  font-family: var(--alphabet);
  font-weight: normal;
}
.mincho{
  font-family: var(--mincho);
  font-weight: 600;
}
.number{
  font-family: var(--number);
  font-weight: 700;
  letter-spacing:.03em;
}

/* 文字スタイル */
.phone01{
 color: var(--base-pink);
}
.phone01.junkai{
  color: var(--base-green);
 }
.phone01 i{
  font-size: 2.4rem;
  vertical-align: middle;
  margin: -.25em .25em .25em 0;
}
.phone01 .number{
  font-size: 3.8rem;
}

/* wrap */
.wrapA{
  width: min(90%,1360px);
  margin: 9rem auto;
}
.wrapB{
  width: min(90%,1000px);
  margin: 9rem auto;
}
.btn-wrapA{
  max-width:900px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  gap:3rem 2rem;
}
.btn-wrapA li{
  flex: 1;
}

/* 背景色 */
.bg-white {
  background: #fff;
}
.bg-pink {
  background: var(--base-pink);
}
.bg-pink-op10 {
  background: var(--base-pink-op10);
}

/* 2つ並び */
.fig-2box {
  display: flex;
  column-gap: 2rem;
}

/* 動画用のボックス */
.movie-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.movie-box {
  /* センターに3つの場合 */
  width: 32%;
  max-width: 640px;
  margin: 0 auto;
}
.movie-box-two {  /* 動画センターに2つレスポンシブ表示 */
  max-width: 640px;
  width: 48%;
  margin: 0 auto
}
.movie-box-one {  /* 動画センターに1つレスポンシブ表示 */
  max-width: 640px;
  margin: 0 auto
}
.movie-inner {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin-bottom: 3rem;
}
.movie-inner iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* 区切り線 */
hr.kugiri-dot{
  border: none;
  border-top: 1.5px dotted;
}

/* box幅 */
.w100per{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.w90per{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.max300{max-width: 300px}
.max400{max-width: 400px}
.max430{max-width: 430px}
.max640{max-width: 640px}
.max900{max-width: 900px}
.max1000{max-width: 1000px}
.max1200{max-width: 1200px}
.max1360{max-width: 1360px}

/* wrap */
.wrapA {
  width: min(90%,1360px);
  margin: 9rem auto;
}
.wrapB {
  width: min(90%,1000px);
  margin: 9rem auto;
}

/* 配置 */
.align-left{ text-align: left!important}
.align-right{ text-align: right}
.align-center{ text-align: center}

/* 余白 */
.mt-auto{margin-top: auto}
.mt0{margin-top: 0!important}
.mt-5em{margin-top: .5em}
.mt1em{margin-top: 1em}
.mt1rem{margin-top: 1rem}
.mt2rem{margin-top: 2rem}
.mt3rem{margin-top: 3rem}
.mt4rem{margin-top: 4rem}
.mt6rem{margin-top: 6rem}
.mb-auto{margin-bottom: auto}
.mb0{margin-bottom: 0!important}
.mb1rem{margin-bottom: 1rem}
.mb3rem{margin-bottom: 3rem}
.ml0{margin-left: 0!important}
.ml2-5{margin-left: 2.5em}
.ml-auto{margin-left: auto}
.mr-auto{margin-right: auto}

.pt0{padding-top: 0!important}
.pl1em{padding-left: 1em!important}
.pb1em{padding-bottom: 1em;}
.pt6rem{padding-top:6rem}
.pb6rem{padding-bottom:6rem}

.pt3rem {padding-top: 3rem}
.pb3rem {padding-bottom: 3rem}


/* 表示／非表示 */
.sptb-only,
.sp-only{
  display: none;
}


/* ===============================

  1281px以上（PC用）

=================================*/
@media (min-width: 1281px) {


  /* PCのtelリンク無効 */
  a[href^="tel:"] {
    pointer-events: none;
  }  
}



/* ===============================

  1536px以下：小型PC 

=================================*/

@media screen and (max-width:1536px) {
  html{
    font-size: 9.5px;/* 1rem = 9.5pxと定義 */
  }
  #hero .slider h2{
    font-size: clamp(3.4rem,2.47vw,38px);
  }

}

/* ===============================

  1280px以下：小型PC
  ここからハンバーガーメニュー

=================================*/

@media screen and (max-width:1280px) {
  html{
    font-size: 9.3px;/* 1rem = 9.3pxと定義 */
  }
  main{
    overflow-x: hidden;
  }

  #hero {
    background-position: 20%;
  }
  #hero .headline {
    right: 5rem;
  }
  #hero .point {
    right: 5rem;
    width: 500px;
  }
  #hero .hero_pcsp {
    width: 50%;
  }

  

  /*  
    その他　1280px以下
  ---------------------------------*/
  /* ページ内リンク */
  .anchor{
    scroll-margin-top: 60px; 
  }

  
}

/* ===============================

  960px以下：タブレット・スマホ横

=================================*/
@media screen and (max-width:960px){
  html{
    font-size: 9px;/* 1rem = 9pxと定義 */
  }
  
  .pc-only{
    display: none;
  }
  .sptb-only{
    display: block;
  }
}


/* ===============================

  768px以下：スマホ横 

=================================*/

@media screen and (max-width:768px){
  html{
    font-size: 8.5px;/* 1rem = 8.5pxと定義 */
  }
  body{
    font-size: 15px;
  }


  .font36-20 {
    font-size: 20px;
  }
  .font24-16 {
    font-size: 16px;
  }

  #hero {
    background: none;
    height: auto;
  }
  .hero-sp {display: block}
  #hero h2 {display: none}
  #hero .point {display: none}
  #hero .hero_pcsp {display: none}
  #hero .hero-logo {display: none}

  .ttl,
  .ttl span,
  .ttl-img,
  .ttl-img span {
    font-size: 2.75rem;
  }
  .ttl-img img {
    display: block;
    margin: 0 auto;
  }

  .list-voice {
    justify-content: center;
    gap: 4%;
    row-gap: 3rem;
  }

  .list-voice li {
    width: 100%;
  }
  .list-voice li dt {
    padding-top: 0;
  }
  .list-voice li dt::before {
    left: 3rem;
  }

  #reason h2,
  #user h2 {
    flex-direction: column;
    row-gap: 3rem;
    text-align: center;
  }

  #reason .detail-reason h3 {
    font-size: 2.25rem;
  }

  #reason .detail-reason {
    flex-wrap: wrap;
    row-gap: 3rem;
    justify-content: center;
  }
  #reason .detail-reason .count {
    font-size: 6rem;
    order: 0;
  }
  #reason .detail-reason .count::before {
    line-height: 1;
  }
  #reason .detail-reason img {
    order: 2;
    width: 90%;
    max-width: 640px;
  }
  #reason .detail-reason div {
    order: 1;
  }
  #reason .detail-reason ul li {
    width: calc(100% - 3.5rem);
  }

  .detail-user-wrapper {
    flex-direction: column;
  }

  #user h2 span::before {
    font-size: 36px;
  }

  #user .detail-user {
    width: 100%;
  }
  #user .detail-user img {
    width: 30%;
  }
  #user .detail-user .count {
    font-size: 3rem;
  }
  .cta ul {
    flex-direction: column;
    row-gap: 3rem;
  }
  .cta h3 {
    font-weight: bold;
    font-size: 2.5rem;
  }

  .footer-inner {
    flex-direction: column;
  }

  /* 表示・非表示 */
  .pctb-only,
  .sp-none{
    display: none!important;
  }
  .sp-only{
    display: block;
  }

}

/* ===============================

  520px以下：スマホ縦  

=================================*/
@media screen and (max-width:520px){
  html{
    font-size: 8px;/* 1rem = 8pxと定義 */
  }
  body{
    font-size: 14px;
  }

  
}

/* ===============================

  340px以下：小型スマホ縦  

=================================*/
@media screen and (max-width:340px){
  html{
    font-size: 7.5px;/* 1rem = 7.5pxと定義 */
  }
}

/* ===============================

  hover指定できるPCを想定したスタイル 

=================================*/
@media (hover: hover) {
  /* 共通 */
  a{
    transition: opacity .2s,color .25s,background-color .3s;
  }


}


/* ===============================

  print

=================================*/
@media print{
  body{
    width: 1360px;
    overflow: hidden;
  }
  /* ホーム　hero */
  #hero img{
    width: 100%;
    height:auto;
    margin-top: 20px;
  }
}