/*　home 共通
------------------------------------------------------------------------------------------------*/

.fv{
  width: 100%;
  height: 41.35vw;
  position: relative;
  border-bottom: 0.5rem solid #221714;
}
.fv::before{
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 1920 / 135;
  background: url(../images/home/fv-bg2.png) center bottom no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
}
.fv .img-wrap{
  width: 32.81vw;
  position: absolute;
  right: 4.01vw;
  bottom: 0;
  z-index: 0;
}
.fv .img-wrap a.badge{
  display: block;
  width: 12.55vw;
  filter: drop-shadow(0.5rem 0.7rem 1.8rem rgba(0, 0, 0, 0.29));
  position: absolute;
  right: 1.67vw;
  top: -0.31vw;
}
.fv .wrap{
  width: 52.81vw;
  text-align: center;
  position: absolute;
  left: 6.51vw;
  top: 3.65vw;
  z-index: 1;
}
.fv .wrap::before{
  content: "";
  display: block;
  width: 109.67%;
  aspect-ratio: 1112 / 138;
  background: url(../images/home/fv-bg1.png) center top no-repeat;
  background-size: contain;
  position: absolute;
  left: -3.33vw;
  top: -0.3vw;
}
.fv .wrap h1{
  font-size: 2.97vw;
  letter-spacing: 0.09em;
  line-height: 1.32;
  margin-bottom: 1.6vw;
}
.fv .wrap dl.period{
  display: grid;
  grid-template-columns: auto auto;
  align-items: flex-start;
  justify-content: center;
  font-size: 1.25vw;
  letter-spacing: 0.09em;
  font-weight: 700;
  gap: 0.67em;
  margin-top: 2.4vw;
}
.fv .wrap dl.period dt{
  background-color: #fff;
  line-height: 2.29vw;
  padding: 0 0.6em;
  border-radius: 0.17em;
}
.fv .wrap dl.period dd .txt-bd{
  font-size: 1.56vw;
  letter-spacing: 0.09em;
  line-height: 2.29vw;
  paint-order: stroke;
}
.fv .wrap dl.period dd .txt-bd .bd{
  display: inline-block;
  position: relative;
}
.fv .wrap dl.period dd .txt-bd .bd::before{
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  color: transparent;
  -webkit-text-stroke: 0.27em #fff;
  z-index: -1;
}
.fv .wrap dl.period dd small{
  display: block;
  font-size: 0.94vw;
  letter-spacing: 0.09em;
  text-align: right;
}


.info-btn{
  padding: 7rem 0;
}
.info-btn .content{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
}


.intro{
  padding-top: 12rem;
}
.intro .wrap{
  display: grid;
  grid-template-columns: 51rem 1fr;
  gap: 4rem;
  align-items: flex-end;
}
.intro .txt h2{
  font-size: 4rem;
  letter-spacing: 0.05em;
  margin-bottom: 2.2rem;
}
.intro .txt ul.note{
  margin-top: 1rem;
}
.intro .txt ul.note li{
  display: block;
  font-size: 1.6rem;
  padding-left: 2.5em;
  position: relative;
}
.intro .txt ul.note li > span{
  position: absolute;
  left: 0;
  top: 0;
}
.intro .txt .publisher{
  font-size: 1.6rem;
  text-align: right;
  margin-top: 1.6rem;
}
.intro ul.anchor-li{
  margin-top: 12rem;
}

.home .intro{
  padding-top: 7rem;
}
.home .intro .wrap{
  align-items: center;
}
.home .intro .txt h2{
  margin-bottom: 2.8rem;
}
.home .intro .txt ul.note{
  margin-top: 2rem;
}
.home .intro .txt .publisher{
  margin-top: 4rem;
}

.intro ul.detail{
  margin-top: 3rem;
}
.intro ul.detail li{
  display: grid;
  grid-template-columns: 16.6rem 1fr;
  border-radius: 1rem;
  align-items: center;
  gap: 2.5rem;
  min-height: 6rem;
  line-height: 1.6;
  padding: 1rem 0;
}
.intro ul.detail li + li{
  margin-top: 0.6rem;
}
.intro ul.detail li h3{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  line-height: 1.3;
  text-align: center;
  border-right: 0.3rem dotted;
}
.intro ul.detail li p big{
  font-size: 2.4rem;
  font-weight: 700;
}
.intro ul.detail li p small{
  display: block;
  font-size: 1.6rem;
}


.home-overview{
  padding-top: 8rem;
}
.home-overview dl.overview-dl{
  display: grid;
  grid-template-columns: 16.4rem 1fr;
  column-gap: 2.4rem;
  align-items: center;
}
.home-overview dl.overview-dl dt,
.home-overview dl.overview-dl dd{
  padding: 3rem 0;
  position: relative;
}
.home-overview dl.overview-dl dt:first-child,
.home-overview dl.overview-dl dt:first-child + dd{
  padding-top: 0;
}
.home-overview dl.overview-dl dd::before{
  content: "";
  display: block;
  width: calc(100% + 18.8rem);
  border-bottom: 0.3rem dotted #C3C3C3;
  position: absolute;
  right: 0;
  bottom: 0;
}
.home-overview dl.overview-dl dt > span.bg-gr{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 3.9rem;
  border-radius: 0.6rem;
  font-size: 2rem;
  letter-spacing: 0.06em;
  text-align: center;
  font-weight: 700;
}
.home-overview dl.overview-dl dd small{
  display: block;
  font-size: 1.6rem;
  margin-top: 0.1em;
}

.pattern{
  text-align: center;
  margin-top: 4rem;
}
.intro .pattern{
  margin-top: 12rem;
}
.pattern h3{
  font-size: 2.6rem;
  letter-spacing: 0.05em;
  margin-bottom: 4rem;
}
.intro .pattern h3{
  font-size: 3.2rem;
  letter-spacing: 0.05em;
  margin-bottom: 5.7rem;
}
.pattern ul.pattern-li{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
}
.pattern ul.pattern-li li{
  display: block;
  padding: 3.6rem 0 0;
  font-size: 2.1rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  position: relative;
}
.pattern ul.pattern-li li .c-label{
  width: 13.2rem;
  font-size: 1.6rem;
  line-height: 3rem;
  border-radius: 1.8rem;
}
.pattern ul.pattern-li li.li-1 img.img{
  width: 41.2rem;
  margin: 2rem auto 0;
}
.pattern ul.pattern-li li.li-2 img.img{
  width: 27.6rem;
  margin: 4rem auto 0;
}
.pattern ul.pattern-li li.li-2 img.img:has(+ a.btn){
  width: 25.2rem;
  margin-top: 2rem;
}
.pattern ul.pattern-li li.li-2 a.btn{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 34.5rem;
  height: 5.5rem;
  border-radius: 2.8rem;
  background: #fff;
  font-size: 2rem;
  font-weight: 700;
  margin: 2rem auto 0;
  position: relative;
}
.pattern ul.pattern-li li.li-2 a.btn::before{
  content: "";
  display: block;
  width: 2rem;
  height: 100%;
  background: url(../images/common/arrow-btm.svg) center center no-repeat;
  background-size: contain;
  position: absolute;
  right: 2.3rem;
  top: 0;
}
.pattern ul.pattern-li + p.note{
  font-size: 1.6rem;
  margin-top: 1em;
}

.limited{
  margin-top: 12rem;
  text-align: center;
}
.limited h3{
  font-size: 3.4rem;
  letter-spacing: 0.05em;
  line-height: 6.8rem;
  border-radius: 3.4rem;
  margin-bottom: 4.5rem;
  position: relative;
}
.limited h3::before{
  content: "";
  display: block;
  width: 11.7rem;
  aspect-ratio: 117 / 102;
  background: url(../images/common/chara-icon1.png) center center no-repeat;
  background-size: contain;
  position: absolute;
  left: 22rem;
  top: -1.7rem;
}
.limited h3 + p{
  font-size: 2rem;
  letter-spacing: 0.05em;
  margin-bottom: 2.4rem;
}
.limited p.note{
  font-size: 1.6rem;
  margin-top: 2.4rem;
}
.limited dl.summary-dl{
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  font-size: 1.6rem;
  letter-spacing: 0.03em;
  line-height: 2;
  text-align: left;
  margin-top: 2.4rem;
  padding: 2.4rem 3.5rem;
}
.limited dl.summary-dl ul li{
  list-style: none;
  margin-left: 1em;
  text-indent: -1em;
}
.limited dl.summary-dl ul li::before{
  content: "⚫︎";
}


.step-sec{
  padding-top: 12rem;
}
.step-box{
  padding: 5.6rem 4rem 5rem;
  line-height: 1.55;
  text-align: center;
  position: relative;
}
.step-box + .step-box{
  margin-top: 8.2rem;
}
.step-box .ttl-wrap{
  padding-bottom: 1.6rem;
  border-bottom: 0.3rem dotted #C3C3C3;
  margin-bottom: 3rem;
}
.step-box .ttl-wrap .ttl{
  font-size: 3.2rem;faq
}
.step-box .ttl-wrap + p{
  margin-bottom: 2.4rem;
}
.step-box p.note{
  font-size: 1.6rem;
  color: #626262;
}
.step-box .ttl-wrap p.note{
  margin-top: 0.3em;
}
.step-box.step-1 ul{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
}
.step-box.step-1 ul li{
  display: block;
  overflow: hidden;
}
.step-box.step-1 ul li h4{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 4.3rem;
}
.step-box.step-1 ul li p{
  padding: 1.6rem;
  text-align: left;
}
.app-dl-short{
  width: 70.8rem;
  margin: 4rem auto 0;
}
.app-dl-short .ttl{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 3.7rem;
  border-radius: 1.9rem;
  font-size: 2rem;
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: 2.4rem;
}
.app-dl-short .inner{
  display: flex;
  justify-content: center;
  /* アプリ公開後に変更 */
  /*justify-content: space-between;*/
}
.app-dl-short .inner img{
  width: auto;
  height: 7.4rem;
}
.app-dl-short .inner img.logo{
  margin-right: 2rem;
}
.step-box ul.step-li{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 2.2rem;
  row-gap: 2.4rem;
}
.step-box ul.step-li li{
  display: block;
  padding: 4.4rem 1.6rem 1.6rem;
  position: relative;
}
.step-box ul.step-li li:not(:first-child)::before{
  content: "";
  display: block;
  width: 4rem;
  height: 4rem;
  background: url(../images/common/c-arrow.png) center center no-repeat;
  background-size: contain;
  position: absolute;
  top: 13.6rem;
  left: -3.1rem;
}
@media screen and (min-width: 769px){
.step-box ul.step-li.col4{
  grid-template-columns: repeat(4, 1fr);
  column-gap: 1.6rem;
}
.step-box ul.step-li.col4 li{
  padding-top: 3rem;
}
.step-box ul.step-li.col3 li:nth-child(4n)::before,
.step-box ul.step-li.col4 li:nth-child(5n)::before{
  content: none;
}
.step-box ul.step-li.col4 li:not(:first-child)::before{
  top: 12.7rem;
  left: -2.9rem;
}
}
.step-box ul.step-li li .num{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 1.6rem 0 0.3rem 0;
  padding: 0.1em 0 0 0.1em;
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 0;
}
.step-box ul.step-li li p{
  text-align: left;
  line-height: 1.55;
  margin-top: 1.6rem;
}
.step-box ul.step-li + p.note{
  margin-top: 1em;
}
.payment-box{
  display: flex;
  justify-content: space-between;
  text-align: center;
  line-height: 1.55;
}
.step-box .payment-box{
  padding: 3rem 2rem;
}
.payment-box .app,
.payment-box .card{
  width: 25.5rem;
}
.payment-box img.img{
  width: 23rem;
  margin: 0 auto;
}
.payment-box .ttl{
  width: 21.5rem;
  font-weight: 500;
  margin: 0 auto 2rem;
}
.payment-box p{
  margin-top: 1.6rem;
}
.payment-box .or,
.payment-box .arrow{
  display: flex;
  justify-content: center;
  align-items: center;
}
.payment-box .or .bg-gr{
  display: inline-block;
  padding: 0 0.6em;
  border-radius: 0.8em;
  margin-bottom: 2rem;
}
.payment-box .arrow img{
  width: 2.4rem;
  margin: 0 1.2rem 2rem;
}
.payment-box .finish{
  margin-top: auto;
}


.use-store{
  padding: 12rem 0;
}
.use-store .wrap{
  max-width: 106rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 50rem;
}
.use-store .wrap img.img{
  order: 2;
}
.use-store .wrap big{
  display: block;
  font-size: 4rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 0.8em;
}
.use-store .wrap a.ico-btn{
  margin-top: 3rem;
}


.recruit{
  padding: 6.4rem 0;
}
.recruit .content{
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: 7rem;
}
.recruit h2{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 29.6rem;
  height: 17.4rem;
  background: url(../images/common/ttl-paint_g.png) center center no-repeat;
  background-size: contain;
  font-size: 6.3rem;
  letter-spacing: 0.05em;
  line-height: 1.32;
  text-align: center;
  position: relative;
}
.recruit h2 
.recruit h2 span{
  position: relative;
  z-index: 1;
}
.recruit p{
  font-size: 2rem;
  letter-spacing: 0.05em;
}
.recruit a.ico-btn{
  margin-top: 3rem;
}


.attention-sec{
  padding-top: 8.8rem;
}
.attention-sec h2{
  display: block;
  width: 14rem;
  font-size: 2rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  line-height: 4.2rem;
  border-radius: 2.4rem;
  border: 0.3rem solid;
  text-align: center;
  margin: 0 auto 4rem;
}
.attention-sec ul li{
  display: block;
  padding-left: 1.4em;
  line-height: 1.5;
  position: relative;
}
.attention-sec ul li::before{
  content: "●";
  display: block;
  color: #0A804B;
  position: absolute;
  left: 0;
  top: 0;
}
.attention-sec ul li + li{
  margin-top: 0.4em;
}
.attention-sec a.btn{
  display: flex;
  align-items: center;
  width: 72.8rem;
  height: 9rem;
  padding: 0 4rem;
  background: linear-gradient(to right,#E4ECC0,#9EDADA);
  font-size: 2.4rem;
  letter-spacing: 0.1em;
  font-weight: 800;
  margin: 12rem auto 0;
  position: relative;
}
.attention-sec a.btn::before{
  content: "";
  display: block;
  width: 4rem;
  height: 100%;
  background: url(../images/common/c-arrow_b.png) center center no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  right: 4rem;
}




/*　store 共通
------------------------------------------------------------------------------------------------*/

.search-sec{
  padding-top: 12rem;
}
.search-sec .first{
  text-align: center;
  margin-bottom: 8rem;
}
.search-sec .first p:first-child{
  font-size: 2.2rem;
  font-weight: 700;
}
.search-sec .first p.gr{
  font-size: 2rem;
  font-weight: 700;
  margin-top: 5.6rem;
}
.search-sec .first a.dl-btn{
  margin: 1.6rem auto 0;
}


.search-box dl{
  display: grid;
  grid-template-columns: 24rem 1fr;
  row-gap: 3.6rem;
  padding-bottom: 4rem;
  margin-bottom: 4rem;
  border-bottom: 0.3rem dotted #C3C3C3;
}
.search-box dl dt{
  font-size: 3rem;
  letter-spacing: 0.05em;
  line-height: 0.9;
  font-weight: 700;
}
.search-box dl dt.small{
  font-size: 2.4rem;
}
.search-box a.area-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 7rem;
  border-radius: 3.5rem;
  background: #F0EFEF;
  border-bottom: 0.4rem solid rgba(0, 0, 0, 0.25);
  font-size: 2rem;
  text-align: center;
  font-weight: 700;
}
.search-box a.area-btn + ul.select-li:has(li){
  margin-top: 1.6rem;
}
.search-box .all-select{
  margin-bottom: 2rem;
}
.search-box .freeword-input{
  position: relative;
}
.search-box .freeword-input::before{
  content: "";
  display: block;
  width: 2.6rem;
  height: 2.6rem;
  background: url(../images/common/ico-search.svg) center center no-repeat;
  background-size: contain;
  position: absolute;
  left: 2.4rem;
  top: 50%;
  transform: translateY(-50%);
}
.search-box p:has(+ .freeword-input){
  font-weight: 700;
  margin-bottom: 0.8em;
}
.search-box .freeword-input input[type=text]{
  display: block;
  width: 100%;
  height: 6.5rem;
  border-radius: 1rem;
  padding: 0 1em 0 6.6rem;
  background: none;
  border: 0.3rem solid;
  font-size: 2rem;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.search-box .btn-wrap{
  display: flex;
  justify-content: center;
  gap: 3.2rem;
  margin-top: 6rem;
}
.search-box .btn-wrap button,
.search-box .btn-wrap a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30rem;
  height: 7.2rem;
  border-radius: 3.6rem;
  border: none;
  color: #221714;
  font-size: 2rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  opacity: 1;
}
.search-box .btn-wrap .reset-btn{
  background-color: #D9D9D9;
}


ul.select-li{
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}
ul.select-li li{
  display: block;
}
ul.select-li li > span{
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  min-height: 4.4rem;
  border-radius: 2.2rem;
  padding: 1rem 1.6rem;
  background: #F4DF37;
  line-height: 1.5;
  font-weight: 700;
  word-break: break-word;
}
ul.select-li li > span button{
  display: block;
  width: 1.5rem;
  aspect-ratio: 1 / 1;
  margin-left: 1.2rem;
  background: none;
  border: none;
}
ul.select-li li > span span{
  flex: 1;
}
ul.select-li li > span button img{
  width: 100%;
}


.modal{
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.modal_bg{
  background: rgba(0,0,0,0.5);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1;

  overflow-y: scroll;
  overscroll-behavior: contain;
  -ms-overflow-style: none; /* バー非表示 IE・Edge用 */
  scrollbar-width: none; /* バー非表示 Firefox用 */
}
.modal_content{
  width: 120rem;
  max-width: calc(100% - 10rem);
  height: 90%;
  background: #fff;
  padding: 4.3rem;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
  
  overflow-y: scroll;
  overscroll-behavior: contain;
  -ms-overflow-style: none; /* バー非表示 IE・Edge用 */
  scrollbar-width: none; /* バー非表示 Firefox用 */
}
.modal_bg::before,
.modal_content::before{
  content: "";
  display: block;
  width: 1px;
  height: calc(100% + 1px);
  position: absolute;
  left: 0;
  top: 0;
}
/* バー非表示 Chrome・Safari用 */
.modal_bg::-webkit-scrollbar,
.modal_content::-webkit-scrollbar{
  display: none;
}
.modal a.close-icon{
  display: block;
  width: 4.4rem;
  position: fixed;
  right: calc(50% - 61.4rem);
  top: calc(5% - 1.4rem);
  z-index: 3;
  opacity: 1;
}
.modal a.close-icon img{
  width: 100%;
}


.area-modal .all-select{
  margin-bottom: 4rem;
}
.area-modal ul.line-anchor{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}
.area-modal ul.line-anchor li{
  display: block;
  width: 100%;
}
.area-modal ul.line-anchor li a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 5.6rem;
  border-radius: 2.8rem;
  border: 0.4rem solid #221714;
  font-size: 2rem;
  letter-spacing: 0.05em;
  text-align: center;
  font-weight: 700;
  position: relative;
}
.area-modal ul.line-anchor li a.invalid{
  opacity: 0.5;
  pointer-events: none;
}
.area-modal ul.line-anchor li a::before{
  content: "";
  display: block;
  width: 2rem;
  height: 100%;
  background: url(../images/common/arrow-btm.svg) center center no-repeat;
  background-size: contain;
  position: absolute;
  right: 1rem;
  top: 0;
}
.area-modal .accttl button{
  display: block;
  background: none;
  border: none;
  text-align: left;
  width: 100%;
}
@media screen and (min-width: 769px){
.area-modal .accttl{
  margin: 5rem 0 2rem;
  pointer-events: none;
}
.area-modal .accttl button{
  font-size: 3rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #0A804B;
}
}
.area-modal a.close-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30rem;
  height: 7.2rem;
  border-radius: 3.6rem;
  font-size: 2rem;
  letter-spacing: 0.05em;
  text-align: center;
  font-weight: 700;
  margin: 5.6rem auto 0;
}


.radio{
  display: flex;
  flex-wrap: wrap;
  column-gap: 4rem;
}
.radio label{
  position: relative;
}
.radio input[type=radio]{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.radio input[type=radio] + span{
  display: inline-block;
  padding-left: calc(2.4rem + 0.5em);
  line-height: 2.4rem;
  font-weight: 700;
  cursor: pointer;
  position: relative;
}
.radio input[type=radio]:focus-visible + span{
  outline: auto;
  outline-offset: 2px;
}
.radio input[type=radio] + span::before,
.radio input[type=radio] + span::after{
  content: "";
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  box-sizing: border-box;
  background: url(../images/common/ico-radio_off.svg) center center no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.radio input[type=radio] + span::after{
  background: url(../images/common/ico-radio_on.svg) center center no-repeat;
  background-size: contain;
  opacity: 0;
}
.radio input[type=radio]:checked + span::after{
  opacity: 1;
}


.checkbox{
  display: flex;
  flex-wrap: wrap;
  column-gap: 4rem;
}
.checkbox label{
  position: relative;
}
.checkbox input[type=checkbox]{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.checkbox input[type=checkbox] + span{
  display: inline-block;
  padding-left: calc(2.4rem + 0.5em);
  line-height: 2.4rem;
  font-weight: 700;
  cursor: pointer;
  position: relative;
}
.checkbox input[type=checkbox]:focus-visible + span{
  outline: auto;
  outline-offset: 2px;
}
.checkbox input[type=checkbox] + span::before,
.checkbox input[type=checkbox] + span::after{
  content: "";
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  box-sizing: border-box;
  background: url(../images/common/ico-check_off.svg) center center no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.checkbox input[type=checkbox] + span::after{
  background: url(../images/common/ico-check_on.svg) center center no-repeat;
  background-size: contain;
  opacity: 0;
}
.checkbox input[type=checkbox]:checked + span::after{
  opacity: 1;
}


.check-btn-1{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1.4rem;
  row-gap: 1.6rem;
}
.check-btn-1 label{
  position: relative;
}
.check-btn-1 input[type=checkbox] + span{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 6.5rem;
  border-radius: 1rem;
  border: 0.3rem solid;
  font-size: 2rem;
  text-align: center;
  font-weight: 700;
  position: relative;
  cursor: pointer;
}
.check-btn-1 input[type=checkbox]:focus-visible + span{
  outline: auto;
  outline-offset: 2px;
}
.check-btn-1 input[type=checkbox]{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.check-btn-1 input[type=checkbox]:checked + span{
  background-color: #F4DF37;
}


.check-btn-2{
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.8rem;
  row-gap: 1.2rem;
}
.check-btn-2.col6{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 1.6rem;
  row-gap: 1.2rem;
}
.check-btn-2 label{
  position: relative;
}
.check-btn-2 input[type=checkbox] + span{
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  min-width: 17rem;
  min-height: 5.3rem;
  border-radius: 2.7rem;
  border: 0.2rem solid;
  padding: 0.7rem 1.4rem;
  font-size: 1.8rem;
  text-align: center;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  cursor: pointer;
}
.check-btn-2 input[type=checkbox]:focus-visible + span{
  outline: auto;
  outline-offset: 2px;
}
.check-btn-2.col6 input[type=checkbox] + span{
  width: 100%;
  min-width: unset;
}
.check-btn-2 input[type=checkbox]{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}
.check-btn-2 input[type=checkbox]:checked + span{
  background-color: #F4DF37;
}


.search-conditions{
  display: none;
  grid-template-columns: auto 1fr;
  gap: 4rem;
  margin-top: 8rem;
}
.search-conditions p{
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.search-conditions:has(ul.select-li li){
  display: grid;
}


.search-sec .search-results{
  margin-top: 8rem;
}
.search-sec .search-results .total-wrap{
  display: flex;
  align-items: center;
  margin-bottom: 3rem;
}
.search-sec .search-results .total-wrap .left p{
  display: flex;
  align-items: center;
  font-size: 2.2rem;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.search-sec .search-results .total-wrap .left p big{
  font-size: 3.6rem;
  line-height: 1;
  margin: 0 0.1em 0.1em;
}
.search-sec .search-results .total-wrap .right{
  display: flex;
  justify-content: space-between;
  flex: 1;
  font-size: 1.6rem;
  margin-left: 1em;
}
.search-sec .search-results p.noshing{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 26rem;
  background: #E1E1E1;
  font-size: 2.2rem;
  letter-spacing: 0.05em;
  text-align: center;
  font-weight: 700;
}


ul.store-li li{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4rem;
  padding: 3.5rem 4.3rem;
}
ul.store-li li + li{
  margin-top: 1.6rem;
}
ul.store-li li a.map-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24rem;
  height: 6.4rem;
  border-radius: 3.2rem;
  font-size: 2rem;
  font-weight: 700;
}
ul.store-li li .industry{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
ul.store-li li .industry span{
  display: inline-block;
  border-radius: 0.4rem;
  padding: 0.17em 0.9em;
  font-weight: 700;
  line-height: 1.5;
  background-color: #E1E1E1;
}
ul.store-li li .store-name{
  font-size: 2.6rem;
  letter-spacing: 0.05em;
}
ul.store-li li .address-wrap{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1em;
  margin-top: 1.2rem;
  line-height: 1.5;
}
ul.store-li li .payment-wrap{
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 2.4rem;
}
ul.store-li li .payment-wrap span{
  display: inline-block;
  line-height: 1.6;
  border-radius: 0.8em;
  padding: 0 1em;
  font-size: 1.6rem;
  font-weight: 700;
}


ul.page-numbers{
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin: 5rem auto 0;
}
ul.page-numbers li{
  display: block;
}
ul.page-numbers li .page-numbers{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 0.8rem;
  background: #fff;
  font-size: 2rem;
  font-weight: 700;
  border: 0.3rem solid #221714;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
ul.page-numbers li a.page-numbers:hover,
ul.page-numbers li .page-numbers.current{
  border-color: transparent;
  background: #0A804B;
  color: #fff;
  opacity: 1;
}
ul.page-numbers li .page-numbers.dots{
  background: none;
  border: none;
  width: 3.6rem;
}
.search-sec .search-results .page-total{
  text-align: center;
  margin-top: 5rem;
}
.search-sec .search-results .nav-links + .page-total{
  margin-top: 2.4rem;
}


.app-dl{
  padding-top: 12rem;
}
.app-dl .wrap{
  display: grid;
  grid-template-columns: repeat(2, 47rem);
  gap: 6rem;
  justify-content: center;
}
.app-dl .wrap .txt .ttl{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 14rem;
  border-radius: 1rem;
  font-size: 3rem;
  text-align: center;
  font-weight: 700;
  position: relative;
  margin-bottom: 5rem;
}
.app-dl .wrap .txt .ttl::before{
  content: "";
  display: block;
  width: 2.6rem;
  height: 2.3rem;
  background: #0A804B;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  position: absolute;
  bottom: -2.3rem;
  left: 50%;
  transform: translateX(-50%);
}
.app-dl .wrap .txt .btn-wrap{
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
}
.app-dl .wrap .txt .btn-wrap img{
  width: auto;
  height: 7.3rem;
}
.app-dl .wrap .img-wrap{
  position: relative;
}
.app-dl .wrap .img-wrap .badge{
  width: 20.4rem;
  position: absolute;
  right: -6.4rem;
  top: -7.7rem;
}
.app-dl .wrap .img-wrap p.note{
  display: block;
  font-size: 1.6rem;
  color: #626262;
  text-align: center;
  margin-top: 0.5em;
}




/*　user 共通
------------------------------------------------------------------------------------------------*/

.user main section{
  padding-top: 12rem;
}


.merit2{
  margin-top: 5.6rem;
}
.merit2 h3{
  font-size: 3.2rem;
  letter-spacing: 0.05em;
  font-weight: 800;
  text-align: center;
  margin-bottom: 2.4rem;
}
.merit2 ul{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.2rem;
}
.merit2 ul li{
  display: block;
  padding: 2.2rem;
}
.merit2 ul li h4{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 4em;
  font-size: 2.1rem;
  letter-spacing: 0.05em;
  text-align: center;
  padding-bottom: 0.8em;
  margin-bottom: 2.4rem;
  border-bottom: 0.3rem dotted #C3C3C3;
}
.merit2 ul li p{
  margin-top: 2.4rem;
  line-height: 1.55;
}
.merit2 ul + p{
  font-size: 1.6rem;
  color: #626262;
  text-align: center;
  margin-top: 1em;
}

.user .step-box.step-4 h4.bg-ye{
  width: fit-content;
  line-height: 1.9;
  padding: 0 1.2em;
  font-size: 2rem;
  font-weight: 500;
  margin: 5.6rem auto 3rem;
}
.step-sec p.combi-p{
  font-size: 2.8rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  text-align: center;
  margin: 7.2rem 0 3.6rem;
}
.step-box.combi{
  padding: 3rem 4rem;
}
.step-sec .wh-box + p.attention{
  font-size: 2rem;
  line-height: 1.6;
  text-align: center;
  margin-top: 2.4rem;
}


.user .use-store{
  padding-bottom: 0;
}




/*　business 共通
------------------------------------------------------------------------------------------------*/

.business main section:not(.recruit){
  padding-top: 12rem;
}


@media screen and (min-width: 769px){
.payment-box.deco{
  font-size: 2rem;
  letter-spacing: 0.05em;
}
.payment-box.deco .app,
.payment-box.deco .card{
  width: 29.6rem;
}
.payment-box.deco img.img{
  width: 25rem;
}
.payment-box.deco .ttl{
  width: 24rem;
  margin: 0 auto 2.2rem;
}
.payment-box.deco .or{
  position: relative;
}
.payment-box.deco .or::before{
  content: "";
  display: block;
  width: 0;
  height: 100%;
  border-left: 0.3rem dotted #C3C3C3;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}
.payment-box.deco .or .bg-gr{
  position: relative;
  z-index: 1;
}
.payment-box.deco .arrow img{
  margin: 0 1rem 2rem;
}
.payment-box.deco p.bg-gray{
  border-radius: 1rem;
  padding: 2rem 1rem;
  margin-top: 0;
}
}


.merit .wh-box{
  padding: 7rem 4.5rem;
}
.merit ul.merit-li{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.8rem;
}
.merit ul.merit-li > li{
  display: block;
  padding: 5rem 2.8rem 2.4rem;
  font-size: 2rem;
  letter-spacing: 0.05em;
  line-height: 1.6;
  position: relative;
}
.merit ul.merit-li > li h3{
  font-size: 2.6rem;
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: 3rem;
}
.merit ul.merit-li > li img.img{
  width: 34.6rem;
  margin: 0 auto;
}
.merit ul.merit-li > li p{
  padding-top: 2rem;
  margin-top: 3.6rem;
  border-top: 0.3rem dotted #C3C3C3;
}
.merit ul.merit-li > li ul{
  margin-top: 1.6rem;
}
.merit ul.merit-li > li ul li{
  display: block;
  font-size: 1.6rem;
  padding-left: 1.3em;
  position: relative;
}
.merit ul.merit-li > li ul li::before{
  content: "●";
  display: block;
  color: #0A804B;
  position: absolute;
  left: 0;
  top: 0;
}
.merit ul.merit-li > li ul li + li{
  margin-top: 0.3em;
}


.business-step{
  padding-top: 12rem;
}
.business-step ul.step-li li{
  display: block;
  padding: 5.6rem 4rem 3rem;
  line-height: 1.5;
  position: relative;
}
.business-step ul.step-li li + li{
  margin-top: 7.6rem;
}
.business-step ul.step-li li h3{
  font-size: 3.2rem;
  letter-spacing: 0.05em;
  text-align: center;
  padding-bottom: 1.6rem;
  border-bottom: 0.3rem dotted #C3C3C3;
  margin-bottom: 3rem;
}
.business-step ul.step-li li .wrap{
  display: grid;
  grid-template-columns: 28rem 1fr;
  gap: 3rem;
  align-items: center;
}
.business-step ul.step-li li .wrap .img img{
  width: 22rem;
  margin: 0 auto;
}
.business-step ul.step-li li .wrap .note{
  display: block;
  font-size: 1.6rem;
  color: #626262;
  margin-top: 0.4em;
}
.business-step ul.step-li li .wrap b.gr{
  display: block;
  margin-top: 0.8em;
}
.business-step p:has(+ a.dl-btn){
  font-size: 2rem;
  text-align: center;
  font-weight: 700;
  margin: 6rem auto 0;
}
.business-step p + a.dl-btn{
  margin: 2rem auto 0;
}
.business-step .movie-area{
  text-align: center;
  width: 82rem;
  margin: 6.4rem auto 0;
}
.business-step .movie-box:not(:last-child){
  margin-bottom: 6.4rem;
}
.business-step .movie-ttl{
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 1.6rem;
}
.business-step .movie-wrap{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 1.6rem;
  overflow: hidden;
}
.business-step .movie-wrap iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.business-step .movie-area .link-wrap{
  text-align: right;
  margin-top: 0.8rem;
}
.business-step .movie-area .link-wrap a{
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid;
  line-height: 1.3;
}
.business-step .movie-area .link-wrap a span::after{
  content: "";
  background: url(../images/common/ico-download.svg) center center no-repeat;
  background-size: contain;
  width: 1.8rem;
  height: 1.8rem;
  display: inline-block;
}

dl.requirements-dl{
  display: grid;
  grid-template-columns: 20.4rem 1fr;
  overflow: hidden;
}
dl.requirements-dl dt{
  padding: 3.2rem 2.7rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  border-bottom: 0.3rem solid #fff;
}
dl.requirements-dl dd{
  padding: 3.2rem;
  border-bottom: 0.3rem solid #AFAFAF;
}
dl.requirements-dl dt:has( + dd:last-child),
dl.requirements-dl dd:last-child{
  border-bottom: none;
}
dl.requirements-dl dd > p:not(:first-child){
  margin-top: 1em;
}
dl.requirements-dl ol li,
dl.requirements-dl ul li{
  list-style: none;
  position: relative;
}
dl.requirements-dl ol.ol-1 li{
  padding-left: 2em;
}
dl.requirements-dl ol.ol-2{
  margin-left: 1.35em;
}
dl.requirements-dl ol.ol-2 li{
  padding-left: 2.4em;
}
dl.requirements-dl ol.ol-1 li > span:first-child{
  width: 1.7em;
  text-align: right;
  position: absolute;
  left: 0;
  top: 0;
}
dl.requirements-dl ol.ol-2 li > span:first-child{
  width: 2.2em;
  text-align: right;
  position: absolute;
  left: 0;
  top: 0;
}
dl.requirements-dl ul.ul-1 li{
  list-style: disc;
  margin-left: 1.4em;
  padding-left: 0.1em;
}
dl.requirements-dl .payment-box{
  justify-content: center;
  padding: 3rem;
  gap: 1.5rem;
  margin-top: 1.6rem;
}
dl.requirements-dl dd p.address{
  font-weight: 700;
  margin-left: 1em;
  text-indent: -1em;
  margin-top: 0;
}
dl.requirements-dl dd ul.asterisk{
  margin-left: 1em;
  text-indent: -1em;
  margin-top: 1em;
}


.business .faq-sec{
  padding-bottom: 12rem;
}
.faq-sec a.arrow-btn{
  margin: 7rem auto 0;
}


.materials .ttl-paint + p{
  text-align: center;
  font-size: 2.7rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 3rem;
}
.materials ul.material-li{
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  column-gap: 4rem;
  row-gap: 1.6rem;
}
.materials ul.material-li li{
  display: block;
}
.materials ul.material-li li a.dl-btn{
  height: 9.4rem;
}




/*　faq 共通
------------------------------------------------------------------------------------------------*/

.faq .sec{
  padding-top: 7.2rem;
}


ul.faq-li .accttl,
ul.faq-li > li{
  border-radius: 2.4rem;
}
ul.faq-li > li{
  display: block;
  background-color: #fff;
}
ul.faq-li > li + li{
  margin-top: 2.4rem;
}
ul.faq-li .accttl button{
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 2.4rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  padding: 2rem 7.2rem 2.4rem 3.2rem;
  position: relative;
  cursor: pointer;
  transition: border-radius 0.3s;
}
ul.faq-li .accshow{
  display: none;
  letter-spacing: 0.06em;
  padding: 2.8rem 3.2rem 3.2rem;
  position: relative;
}
ul.faq-li .accttl button .inner,
ul.faq-li .accshow .inner{
  display: block;
  padding-left: 4.8rem;
  position: relative;
}
ul.faq-li .accttl button .inner .icon,
ul.faq-li .accshow .inner .icon{
  font-size: 3rem;
  line-height: 0.9;
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 0;
}
ul.faq-li .accttl button::before,
ul.faq-li .accttl button::after{
  content: "";
  display: block;
  width: 2.8rem;
  height: 0.4rem;
  border-radius: 0.2rem;
  background: #fff;
  position: absolute;
  right: 2.2rem;
  top: 50%;
  transform: translateY(-50%);
}
ul.faq-li .accttl button::after{
  transform: translateY(-50%) rotate(90deg);
  transition: 0.3s;
}
ul.faq-li .accttl.active button{
  border-radius: 2.4rem 2.4rem 0 0;
}
ul.faq-li .accttl.active button::after{
  transform: translateY(-50%) translate(0);
}
ul.faq-li .accshow .inner p,
ul.faq-li .accshow .inner ol,
ul.faq-li .accshow .inner ul{
  margin-top: 1em;
}
ul.faq-li .accshow .inner .icon + p,
ul.faq-li .accshow .inner ol + p,
ul.faq-li .accshow .inner ul + p{
  margin-top: 0;
}
ul.faq-li ol li,
ul.faq-li ul li{
  list-style: none;
  position: relative;
}
ul.faq-li ul.ul-1 li{
  list-style: disc;
  margin-left: 1.4em;
  padding-left: 0.1em;
}
ul.faq-li ol.ol-1 li{
  padding-left: 2em;
}
ul.faq-li ol.ol-2 li{
  padding-left: 2.4em;
}
ul.faq-li ol.ol-1 li > span:first-child{
  width: 1.7em;
  text-align: right;
  position: absolute;
  left: 0;
  top: 0;
}
ul.faq-li ol.ol-2 li > span:first-child{
  width: 2.2em;
  text-align: right;
  position: absolute;
  left: 0;
  top: 0;
}


.sec.faq .ttl-paint{
  margin-top: 8rem;
}




/*　store-terms 共通
------------------------------------------------------------------------------------------------*/

.terms{
  letter-spacing: 0.03em;
}
.terms h2{
  font-size: 2.7rem;
  letter-spacing: 0.03em;
  margin: 8rem 0 2rem;
}
.terms h2:first-child{
  margin-top: 0;
}
.terms p + p{
  margin-top: 1em;
}
.terms ol li{
  list-style: none;
  position: relative;
}
.terms ol.ol-1 > li{
  padding-left: 2em;
}
.terms p + ol.ol-2{
  margin-left: 2em;
}
.terms ol.ol-2 > li{
  padding-left: 1.8em;
}
.terms ol.ol-3 > li{
  padding-left: 2.1em;
}
.terms ol.ol-1 > li > span:first-child{
  width: 1.7em;
  text-align: right;
  position: absolute;
  left: 0;
  top: 0;
}
.terms ol.ol-2 > li > span:first-child{
  width: 2.2em;
  text-align: right;
  position: absolute;
  left: -0.6em;
  top: 0;
}
.terms ol.ol-3 > li > span:first-child{
  width: 1.9em;
  text-align: right;
  position: absolute;
  left: 0;
  top: 0;
}




/*　404 共通
------------------------------------------------------------------------------------------------*/

.error404 .sec{
  text-align: center;
  padding-top: 6rem;
}
.error404 .sec .h1-en{
  font-size: 30rem;
  line-height: 1;
  font-weight: 700;
  color: #626262;
  letter-spacing: -0.01em;
}
.error404 .sec .h1-en big{
  display: block;
}
.error404 .sec .h1-en small{
  display: block;
  font-size: 24%;
}
.error404 .sec h1{
  font-size: 4rem;
  letter-spacing: 0.05em;
  margin-top: 5rem;
}
.error404 .sec p{
  margin-top: 1em;
}
.error404 .sec a.arrow-btn{
  margin: 4rem auto 0;
}




/*　スマホ
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 768px){


/*　home SP
------------------------------------------------------------------------------------------------*/

.fv{
  height: unset;
  padding: 4.8rem 0 0;
  border-bottom: 0.3rem solid #221714;
}
.fv::before{
  aspect-ratio: 750 / 157;
  background: url(../images/home/fv-bg2_sp.png) center bottom no-repeat;
  background-size: contain;
}
.fv .img-wrap{
  width: 32.7rem;
  position: relative;
  right: unset;
  bottom: unset;
  margin: 4rem auto 0;
}
.fv .img-wrap a.badge{
  width: 19.6rem;
  filter: drop-shadow(0.5rem 0.5rem 1.1rem rgba(0, 0, 0, 0.29));
  right: 0;
  top: -2.1rem;
}
.fv .wrap{
  width: 100%;
  padding: 0 2.4rem;
  position: relative;
  left: unset;
  top: unset;
}
.fv .wrap::before{
  width: 100%;
  aspect-ratio: 375 / 92;
  background: url(../images/home/fv-bg1_sp.png) center top no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  top: -3.4rem;
}
.fv .wrap h1{
  font-size: 2.3rem;
  letter-spacing: 0.09em;
  margin-bottom: 1.6rem;
}
.fv .wrap dl.period{
  grid-template-columns: 100%;
  font-size: 1.8rem;
  gap: 1.2rem;
  margin-top: 3rem;
}
.fv .wrap dl.period dt{
  line-height: 3rem;
}
.fv .wrap dl.period dd .txt-bd{
  font-size: 1.8rem;
  line-height: 1.7;
  paint-order: stroke;
}
.fv .wrap dl.period dd .txt-bd .bd::before{
  -webkit-text-stroke: 0.33em #fff;
}
.fv .wrap dl.period dd .txt-bd .pi{
  font-size: 2rem;
  letter-spacing: 0.09em;
}
.fv .wrap dl.period dd small{
  font-size: 1.6rem;
  text-align: center;
  margin-top: 0.1em;
}


.info-btn{
  padding: 3.2rem 0;
}
.info-btn .content{
  grid-template-columns: 100%;
  gap: 1.6rem;
}


.intro{
  padding-top: 4rem;
}
.home .intro{
  padding-top: 5.6rem;
}
.intro .wrap{
  grid-template-columns: 100%;
  gap: 4rem;
}
.intro .txt h2,
.home .intro .txt h2{
  font-size: 2.8rem;
  text-align: center;
  margin-bottom: 2.4rem;
}
.intro .txt ul.note,
.home .intro .txt ul.note{
  margin-top: 1.6rem;
  line-height: 1.5;
}
.intro .txt ul.note li + li{
  margin-top: 0.5em;
}
.intro .txt ul.note li > span{
  position: absolute;
  left: 0;
  top: 0;
}
.intro .txt .publisher,
.home .intro .txt .publisher{
  margin-top: 1.6rem;
}
.intro ul.anchor-li{
  margin-top: 7rem;
  gap: 1.6rem;
}

.intro ul.detail{
  margin-top: 4rem;
}
.intro ul.detail li{
  grid-template-columns: 100%;
  gap: 1.2rem;
  min-height: unset;
  line-height: 1.6;
  text-align: center;
  padding: 1.6rem;
}
.intro ul.detail li + li{
  margin-top: 1.6rem;
}
.intro ul.detail li h3{
  height: unset;
  padding-bottom: 0.4em;
  border-right: unset;
  border-bottom: 0.3rem dotted;
}
.intro ul.detail li:nth-child(1) p{
  font-size: 2.3rem;
}
.intro ul.detail li:nth-child(1) p big{
  font-size: 3rem;
  line-height: 1.2;
}
.intro ul.detail li:nth-child(2) p .pi{
  display: block;
}
.intro ul.detail li p small{
  font-size: 1.6rem;
  margin-top: 0.2em;
}


.home-overview{
  padding-top: 4.8rem;
}
.home-overview dl.overview-dl{
  grid-template-columns: 100%;
  column-gap: 0;
}
.home-overview dl.overview-dl dt{
  padding: 0 0 1.6rem;
}
.home-overview dl.overview-dl dd{
  padding: 0 0 2.4rem;
}
.home-overview dl.overview-dl dd + dt{
  padding-top: 2.4rem;
}
.home-overview dl.overview-dl dd::before{
  width: 100%;
}
.home-overview dl.overview-dl dt > span.bg-gr{
  height: 3.2rem;
  font-size: 1.8rem;
}
.home-overview dl.overview-dl dd{
  line-height: 1.5;
}
.home-overview dl.overview-dl dd small{
  font-size: 1.6rem;
  margin-top: 0.5em;
}

.intro .pattern{
  margin-top: 4.8rem;
}
.pattern h3,
.intro .pattern h3{
  font-size: 1.9rem;
  margin-bottom: 4rem;
}
.pattern ul.pattern-li,
.pattern ul.pattern-li + p.note{
  max-width: 29.4rem;
  margin-left: auto;
  margin-right: auto;
}
.pattern ul.pattern-li{
  grid-template-columns: 100%;
  gap: 3.4rem;
}
.pattern ul.pattern-li li{
  padding: 3.4rem 1.6rem 0;
  font-size: 1.8rem;
  line-height: 1.66;
}
.pattern ul.pattern-li li.li-1 img.img{
  width: 100%;
  margin: 1.8rem auto 0;
}
.pattern ul.pattern-li li.li-2 img.img,
.pattern ul.pattern-li li.li-2 img.img:has(+ a.btn){
  width: 21.8rem;
  margin: 2.4rem auto 3rem;
}
.pattern ul.pattern-li li.li-2 img.img:has(+ a.btn){
  margin-bottom: 0;
}
.pattern ul.pattern-li li.li-2 a.btn{
  justify-content: flex-start;
  width: 100%;
  height: 5.3rem;
  padding: 0 1.6rem;
  font-size: 1.6rem;
  margin: 1.6rem auto 2.4rem;
}
.pattern ul.pattern-li li.li-2 a.btn::before{
  width: 1.5rem;
  right: 1.6rem;
}
.pattern ul.pattern-li + p.note{
  text-align: left;
}

.limited{
  margin-top: 9rem;
}
.limited h3{
  font-size: 2.4rem;
  line-height: inherit;
  height: 7.8rem;
  padding-top: 2.3rem;
  border-radius: 3.9rem;
  margin-bottom: 2.4rem;
}
.limited h3::before{
  width: 8.4rem;
  left: 50%;
  transform: translateX(-50%);
  top: -5.2rem;
}
.limited h3 + p{
  font-size: 1.8rem;
  text-align: left;
  margin-bottom: 2rem;
}
.limited p.note{
  font-size: 1.8rem;
  text-align: left;
  margin-top: 2.4rem;
}
.limited dl.summary-dl{
  grid-template-columns: 100%;
  font-size: 1.6rem;
  line-height: 1.66;
  margin-top: 2.4rem;
  padding: 2.2rem 1.6rem;
}
.limited dl.summary-dl dt{
  margin-bottom: 0.3em;
}
.limited dl.summary-dl dd + dt{
  margin-top: 2rem;
}


.step-sec{
  padding-top: 5rem;
}
.step-sec .ttl-paint{
  margin-bottom: 5rem;
}
.step-box{
  padding: 4rem 1.6rem 2.4rem;
  text-align: left;
}
.step-box + .step-box{
  margin-top: 5.8rem;
}
.step-box .ttl-wrap{
  padding-bottom: 1.6rem;
  margin-bottom: 2rem;
}
.step-box .ttl-wrap .ttl{
  font-size: 2rem;
  text-align: center;
}
.step-box .ttl-wrap + p{
  margin-bottom: 2rem;
}
.step-box .ttl-wrap p.note{
  margin-top: 1.4rem;
}
.step-box.step-1 ul{
  grid-template-columns: 100%;
  gap: 1.6rem;
}
.step-box.step-1 ul li h4{
  text-align: center;
  padding: 0.5em 0;
}
.app-dl-short{
  width: 100%;
}
.app-dl-short .ttl{
  padding: 0.5em 0;
  border-radius: 3.7rem;
  font-size: 1.8rem;
}
.app-dl-short .inner{
  flex-wrap: wrap;
}
.app-dl-short .inner img{
  width: auto;
  height: 4.13rem;
}
.app-dl-short .inner img.logo{
  width: 100%;
  height: auto;
  margin: 0 0 1.6rem;
}
.step-box ul.step-li{
  grid-template-columns: 100%;
}
.step-box ul.step-li li{
  padding: 3.2rem 1.6rem 2.4rem;
}
.step-box ul.step-li li:not(:first-child)::before{
  top: -3.1rem;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
}
.step-box ul.step-li + p.note{
  text-align: center;
  margin-top: 0.8em;
}
.payment-box{
  display: block;
}
.step-box .payment-box{
  padding: 2.4rem 1.6rem;
}
.payment-box .app,
.payment-box .card,
.payment-box img.img,
.payment-box .ttl{
  width: 100%;
}
.payment-box .or .bg-gr{
  margin: 2.4rem auto;
}
.payment-box .arrow img{
  width: 2rem;
  margin: 1.4rem auto 2.4rem;
  transform: rotate(90deg);
}


.use-store{
  padding: 5.6rem 0;
}
.use-store .wrap{
  display: block;
  text-align: center;
}
.use-store .wrap img.img{
  margin-bottom: 3rem;
}
.use-store .wrap big{
  font-size: 2.8rem;
  margin-bottom: 1.6rem;
}
.use-store .wrap a.ico-btn{
  margin-top: 2.4rem;
}


.recruit{
  padding: 4rem 0 5.6rem;
}
.recruit .content{
  display: block;
}
.recruit h2{
  width: 100%;
  height: 15rem;
  font-size: 5rem;
  margin-bottom: 2.4rem;
}
.recruit p{
  font-size: 1.8rem;
}


.attention-sec{
  padding-top: 5.6rem;
}
.attention-sec h2{
  width: 13.2rem;
  font-size: 1.6rem;
  line-height: 3rem;
  margin: 0 auto 2.4rem;
}
.attention-sec ul li + li{
  margin-top: 0.5em;
}
.attention-sec a.btn{
  width: 100%;
  height: 7.4rem;
  padding: 0 1.6rem;
  font-size: 1.8rem;
  margin: 5.6rem auto 0;
}
.attention-sec a.btn::before{
  width: 2.6rem;
  right: 1.6rem;
}




/*　store SP
------------------------------------------------------------------------------------------------*/

.search-sec{
  padding-top: 4.8rem;
}
.search-sec .first{
  text-align: left;
  margin-bottom: 4.8rem;
}
.search-sec .first p:first-child{
  font-size: 2rem;
}
.search-sec .first p.gr{
  font-size: 1.8rem;
  margin-top: 3rem;
}


.search-box dl{
  grid-template-columns: 100%;
  row-gap: 0;
  padding-bottom: 3rem;
  margin-bottom: 3rem;
}
.search-box dl dt{
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 0.8em;
}
.search-box dl dd + dt{
  margin-top: 3rem;
}
.search-box dl dt.small{
  font-size: 2rem;
}
.search-box a.area-btn{
  height: 5.4rem;
  font-size: 1.8rem;
}
.search-box a.area-btn + ul.select-li:has(li){
  margin-top: 1.2rem;
}
.search-box .all-select{
  margin-bottom: 1.2rem;
}
.search-box .freeword-input::before{
  width: 2.4rem;
  height: 2.4rem;
  left: 1.2rem;
}
.search-box .freeword-input input[type=text]{
  height: 4.8rem;
  padding: 0 1em 0 4.2rem;
  border: 0.2rem solid;
  font-size: 1.8rem;
}
.search-box .btn-wrap{
  flex-direction: column-reverse;
  gap: 1.2rem;
  margin-top: 4rem;
}
.search-box .btn-wrap button,
.search-box .btn-wrap a{
  width: 100%;
  height: 5.6rem;
  font-size: 1.8rem;
}


ul.select-li{
  gap: 0.8rem;
}
ul.select-li li > span{
  font-size: 1.6rem;
  padding: 1rem 1.2rem;
}
ul.select-li li > span button{
  margin-left: 1rem;
}


.modal_content{
  max-width: calc(100% - 4.8rem);
  padding: 2.9rem 1.3rem 3.7rem;
}
.modal a.close-icon{
  right: 1rem;
}


.area-modal .all-select{
  margin-bottom: 2.4rem;
}
.area-modal .accttl{
  margin: 1.2rem 0;
  position: relative;
}
.area-modal .accttl button{
  line-height: 4.8rem;
  padding: 0 4.2rem 0 1.6rem;
  background: #0A804B;
  color: #fff;
  border-radius: 0.8rem;
  font-size: 1.8rem;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.area-modal .accttl::before,
.area-modal .accttl::after{
  content: "";
  display: block;
  width: 1.9rem;
  height: 0.3rem;
  border-radius: 0.2rem;
  background: #fff;
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}
.area-modal .accttl::after{
  transform: translateY(-50%) rotate(90deg);
  transition: 0.3s;
}
.area-modal .accttl.active::after{
  transform: translateY(-50%) translate(0);
}
.area-modal .accshow{
  display: none;
}
.area-modal a.close-btn{
  width: 100%;
  height: 5.6rem;
  border-radius: 2.8rem;
  font-size: 1.8rem;
  margin: 2.4rem auto 0;
}


.radio{
  flex-direction: column;
  gap: 0.4rem;
}


.checkbox{
  flex-direction: column;
  gap: 0.4rem;
}


.check-btn-1{
  grid-template-columns: repeat(2, 1fr);
  column-gap: 0.8rem;
  row-gap: 0.8rem;
}
.check-btn-1 input[type=checkbox] + span{
  height: 4.5rem;
  border-radius: 0.8rem;
  border: 0.2rem solid;
}


.check-btn-2.col6{
  grid-template-columns: repeat(2, 1fr);
  column-gap: 0.8rem;
  row-gap: 0.8rem;
}
.check-btn-2 input[type=checkbox] + span{
  min-width: unset;
  min-height: 4.5rem;
  border-radius: 2.3rem;
  padding: 0.7rem 1.2rem;
}


.search-conditions{
  grid-template-columns: 100%;
  gap: 1.6rem;
  margin-top: 4rem;
}
.search-conditions p{
  text-align: center;
}


.search-sec .search-results{
  margin-top: 4rem;
}
.search-sec .search-results .total-wrap{
  display: block;
  margin-bottom: 2.4rem;
}
.search-sec .search-results .total-wrap .left p{
  display: block;
  font-size: 2rem;
}
.search-sec .search-results .total-wrap .left p big{
  font-size: 3rem;
  margin: 0 0.1em;
  vertical-align: -0.05em;
}
.search-sec .search-results .total-wrap .right{
  flex-wrap: wrap;
  column-gap: 0.5em;
  margin-left: 0;
}
.search-sec .search-results p.noshing{
  height: unset;
  padding: 3rem 2.4rem;
  font-size: 1.8rem;
  text-align: left;
}


ul.store-li li{
  grid-template-columns: 100%;
  gap: 2.4rem;
  padding: 2.9rem 2.1rem;
}
ul.store-li li + li{
  margin-top: 1.2rem;
}
ul.store-li li a.map-btn{
  width: 100%;
  height: 5.6rem;
  font-size: 1.8rem;
}
ul.store-li li .industry{
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}
ul.store-li li .industry span{
  font-size: 1.8rem;
}
ul.store-li li .store-name{
  font-size: 2rem;
}
ul.store-li li .address-wrap{
  grid-template-columns: 100%;
  gap: 0.2em;
  margin-top: 1.2rem;
}
ul.store-li li .payment-wrap{
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.4rem;
}
ul.store-li li .payment-wrap span{
  padding: 0 1rem;
  font-size: 1.8rem;
}


ul.page-numbers{
  gap: 0.4rem;
  margin: 4rem auto 0;
}
ul.page-numbers li .page-numbers{
  width: 4rem;
  height: 4rem;
  font-size: 1.6rem;
  border: 0.2rem solid #221714;
}
ul.page-numbers li .page-numbers.dots{
  width: 3rem;
}
.search-sec .search-results .page-total{
  margin-top: 4rem;
}
.search-sec .search-results .nav-links + .page-total{
  margin-top: 1.6rem;
}


.app-dl{
  padding-top: 5.6rem;
}
.app-dl .wrap{
  grid-template-columns: 100%;
}
.app-dl .wrap .txt .ttl{
  height: 8.8rem;
  font-size: 2rem;
  margin-bottom: 2.7rem;
}
.app-dl .wrap .txt .ttl::before{
  width: 1.2rem;
  height: 1.2rem;
  bottom: -1.2rem;
}
.app-dl .wrap .txt .btn-wrap{
  margin-top: 2rem;
}
.app-dl .wrap .txt .btn-wrap img{
  height: 5.1rem;
}
.app-dl .wrap .img-wrap .badge{
  width: 14.8rem;
  right: -2.2rem;
  top: -4.2rem;
}




/*　user SP
------------------------------------------------------------------------------------------------*/

.user main section{
  padding-top: 5.6rem;
}


.merit2{
  margin-top: 4rem;
}
.merit2 h3{
  font-size: 2.5rem;
  margin-bottom: 1.6rem;
}
.merit2 ul{
  grid-template-columns: 100%;
  gap: 2.4rem;
}
.merit2 ul li{
  padding: 2.4rem 1.6rem;
}
.merit2 ul li h4{
  min-height: unset;
  font-size: 2rem;
}
.merit2 ul li p{
  margin-top: 2rem;
}

.user .step-box.step-4 h4.bg-ye{
  margin: 3.2rem auto 1.6rem;
}
.step-sec p.combi-p{
  font-size: 2rem;
  margin: 5.6rem 0 3rem;
}
.step-box.combi{
  padding: 2.4rem 1.6rem;
}
.step-sec .wh-box + p.attention{
  font-size: 1.8rem;
  text-align: left;
  padding: 0 1.6rem;
  margin-top: 1em;
}


.user .use-store .wrap big {
  font-size: 2.5rem;
}




/*　business SP
------------------------------------------------------------------------------------------------*/

.business main section:not(.recruit){
  padding-top: 5.6rem;
}


.payment-box.deco{
  font-size: 2rem;
  letter-spacing: 0.05em;
}
.payment-box.deco img.img{
  width: 90%;
}
.payment-box.deco p.bg-gray{
  border-radius: 1rem;
  padding: 1rem;
  margin-top: 0;
}
.payment-box.deco .or .bg-gr{
  margin: 1.6rem auto;
}


.merit .wh-box{
  padding: 3rem 1.5rem;
}
.merit ul.merit-li{
  grid-template-columns: 100%;
  gap: 3.4rem;
  margin-top: 5rem;
}
.merit ul.merit-li > li{
  padding: 3rem 1.6rem;
  font-size: 1.8rem;
}
.merit ul.merit-li > li h3{
  font-size: 2rem;
  margin-bottom: 1.6rem;
}
.merit ul.merit-li > li img.img{
  width: 21rem;
}
.merit ul.merit-li > li p{
  padding-top: 1.6rem;
  margin-top: 2.4rem;
}
.merit ul.merit-li > li ul{
  margin-top: 1rem;
}


.business-step ul.step-li{
  margin-top: 5rem;
}
.business-step ul.step-li li{
  padding: 3rem 1.6rem 2.4rem;
}
.business-step ul.step-li li + li{
  margin-top: 3.4rem;
}
.business-step ul.step-li li h3{
  font-size: 2rem;
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 1.6rem;
}
.business-step ul.step-li li .wrap{
  grid-template-columns: 100%;
  gap: 2.4rem;
}
.business-step ul.step-li li .wrap .img{
  padding-bottom: 1.6rem;
  border-bottom: 0.3rem dotted #C3C3C3;
}
.business-step ul.step-li li .wrap .img img{
  width: 18.9rem;
}
.business-step ul.step-li li .wrap .note{
  margin-top: 0.6em;
}
.business-step ul.step-li li .wrap b.gr{
  margin-top: 0.6em;
}
.business-step p:has(+ a.dl-btn){
  font-size: 1.8rem;
  margin: 3rem auto 0;
}
.business-step .movie-area{
  width: 100%;
  margin-top: 3.2rem;
}
.business-step .movie-box:not(:last-child){
  margin-bottom: 4rem;
}
.business-step .movie-ttl{
  font-size: 1.8rem;
  line-height: 1.4;
}
.business-step .movie-area .link-wrap{
  text-align: left;
}
.business-step .movie-area .link-wrap a{
  display: inline;
  word-break: break-all;
  letter-spacing: 0;
}


dl.requirements-dl{
  grid-template-columns: 100%;
}
dl.requirements-dl dt{
  padding: 1rem 1.6rem;
  font-size: 1.8rem;
  border-bottom: none;
}
dl.requirements-dl dd{
  line-height: 1.5;
  padding: 2.4rem 1.6rem;
  border-bottom: none;
}
dl.requirements-dl .payment-box{
  padding: 3rem 1rem;
  gap: 0;
}
dl.requirements-dl .payment-box img.img{
  width: 90%;
}
dl.requirements-dl dd p.address{
  font-weight: 700;
  margin-left: 1em;
  text-indent: -1em;
  margin-top: 0;
}


.business .faq-sec{
  padding-bottom: 5.6rem;
}
.faq-sec a.arrow-btn{
  margin: 4rem auto 0;
}


.materials .ttl-paint + p{
  text-align: left;
  font-size: 2rem;
  margin-bottom: 2.4rem;
}
.materials ul.material-li{
  grid-template-columns: 100%;
}




/*　faq SP
------------------------------------------------------------------------------------------------*/

.faq .sec{
  padding-top: 4rem;
}


ul.faq-li .accttl,
ul.faq-li > li{
  border-radius: 1.6rem;
}
ul.faq-li > li + li{
  margin-top: 1.6rem;
}
ul.faq-li .accttl button{
  border-radius: 1.6rem;
  font-size: 1.8rem;
  padding: 1.3rem 4rem 1.6rem 1.6rem;
}
ul.faq-li .accshow{
  padding: 1.3rem 1.6rem 1.6rem;
}
ul.faq-li .accttl button .inner,
ul.faq-li .accshow .inner{
  line-height: 1.5;
  padding-left: 3rem;
}
ul.faq-li .accttl button .inner .icon,
ul.faq-li .accshow .inner .icon{
  font-size: 2.5rem;
  line-height: 1;
}
ul.faq-li .accttl button::before,
ul.faq-li .accttl button::after{
  width: 1.9rem;
  height: 0.3rem;
  right: 1.5rem;
}
ul.faq-li .accttl.active button{
  border-radius: 1.6rem 1.6rem 0 0;
}


.sec.faq .ttl-paint{
  margin-top: 4rem;
}




/*　store-terms SP
------------------------------------------------------------------------------------------------*/

.terms{
  font-size: 1.6rem;
}
.terms h2{
  font-size: 2.2rem;
  margin: 5rem 0 2rem;
}




/*　404 SP
------------------------------------------------------------------------------------------------*/

.error404 .sec{
  padding-top: 4rem;
}
.error404 .sec .content{
  padding: 0 4rem;
}
.error404 .sec .h1-en{
  font-size: 14rem;
}
.error404 .sec .h1-en small{
  font-size: 26%;
}
.error404 .sec h1{
  font-size: 2.2rem;
  margin-top: 4rem;
}
.error404 .sec p{
  font-size: 1.8rem;
  text-align: left;
}
.error404 .sec a.arrow-btn{
  margin: 3rem auto 0;
}




}/*　スマホここまで */