/* === ヘッダー === */

.main{
  margin-top: 0;
}
.sitehdr{
  padding-top: 1rem;
  padding-bottom: 1rem;
  background: url(../img/bg_s.jpg) 50% 50% var(--pplus-color-highlight);
  background-size: cover;
}

@media(min-width:50rem){
  .sitehdr{
    padding-top: 2rem;
    padding-bottom: 2rem;
    background: url(../img/bg.jpg) 50% 50% var(--pplus-color-highlight);
    background-size: cover;
  }
}

/* タイトル周り */
.sitehdr__ttl{
  display: grid;
  grid-template-columns: 50% 1fr 15%;
  gap: 0.25rem 0.5rem;
  align-items: center;
  margin: 0 0 0.5rem;
  line-height: 1;
}
.sitehdr__ttl__subttl{
  margin-left: 3%;  
}
.sitehdr__ttl__ttl{
  grid-column: 1 / 3;
}
.sitehdr__ttl__yen{
  padding: 15% 10%;
  background: var(--pplus-color-bg);
}
@media(min-width:50rem){
  .sitehdr__ttl{
    grid-template-columns: 35% 1fr 15%;
    gap: 0.25rem 1rem;
    margin-bottom: 1rem;
  }
  .sitehdr__ttl__yen{
    padding: 15%;
  }
}

/* コンビニロゴ */
.sitehdr__cvs{
  align-items: stretch;
  gap: 0.25em;
  font-size: 1.1em;
}
.sitehdr__cvs > li{
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pplus-color-bg);
  border-radius: 0.25rem;
  margin: 0;
  padding: 0.25rem;
}
@media(min-width:50rem){
.sitehdr__cvs{
  gap: 0.5em;
}
.sitehdr__cvs > li{
  border-radius: 0.5rem;
  padding: 0.75rem;
}
}

/* 実績 */
.sitehdr__acvment{
  position: relative;
  width: min-content;
  margin: 0.75rem auto;
  padding: 0 1.75em; 
  color: var(--pplus-color-picchan);
  font-size: 5vw;
  font-weight: bold;
  text-align: center;
  -webkit-text-stroke: 5px var(--pplus-color-bg);
  paint-order: stroke fill;
  word-break: keep-all;
}
.sitehdr__acvment::before,
.sitehdr__acvment::after{
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  height: 2.5em;
  aspect-ratio: 1 / 2;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(2px 2px 0 var(--pplus-color-bg));
  transform: translateY(-50%);
}
.sitehdr__acvment::before{
  left: 0;
  background-image: url(../img/ill_laurel_l.svg);
  background-position: 0 50%;
}
.sitehdr__acvment::after{
  right: 0;
  background-image: url(../img/ill_laurel_r.svg);
  background-position: 100% 50%;
}
.sitehdr__acvment > em{
  font-family: var(--pplus-font-heavy);
  font-weight: 900;
  font-size: 1.2em;
  font-style: normal;
}
.sitehdr__catch{
  margin-top: -0.25rem;
  font-weight: bold;
  word-break: keep-all;
}
@media(min-width:30rem){
  .sitehdr__acvment{
    margin-top: 1rem;
    font-size: 1.8em;
  }
  .sitehdr__catch{
    font-size: 1.2em;
  }
}

@media(min-width:50rem){
  .sitehdr__acvment{
    width: auto;
    margin: 1rem 0;
    padding: 0;
    -webkit-text-stroke: 0 transparent;
    paint-order: normal;
    text-shadow: 2px 2px 0 var(--pplus-color-bg);
  }
  .sitehdr__acvment::before,
  .sitehdr__acvment::after{
    position: static;
    transform: none;
  }
}

/* 見本とポイント */
.sitehdr__fig{
  display: flex;
  align-items: stretch;
  gap: 3vw;
}
.sitehdr__fig__sample{
  flex: 0 0 52%;
}
.sitehdr__fig__txt{
  flex: 1 1 auto;
}
@media(min-width:50rem){
  .sitehdr__fig{
    gap: 2em;
  }
  .sitehdr__fig__sample{
    flex: 0 0 50%;
  }
}

/* ポイント */
.point{
  display: grid;
  grid-template-columns: auto;
  gap: 1vw;
  list-style: none;
  margin: 0;
  padding: 0;
}
.point__li{
  position: relative;
  border: solid 2px var(--pplus-color-bg);
  background: #ff007f;
  border-radius: 2vw;
  margin: 0;
  padding: 2.5vw 3vw;
}
.point__li--2{
  background: #ff9600;
}
.point__li--3{
  background: #49b348;
}
.point__li::before{
  content: url(../img/home/img_point1_arr_s.svg);
  position: absolute;
  left: -2.5vw;
  top: 50%;
  width: calc(2.5vw + 1px);
  transform: translateY(-50%);
}
.point__li--2::before{
  content: url(../img/home/img_point2_arr_s.svg);
}
.point__li--3::before{
  content: url(../img/home/img_point3_arr_s.svg);
}
.point__li__txt > img{
  display: block;
  height: 9vw;
  margin: 0 auto;
}
.point__li__txt--3{
  line-height: 4vw;
}
.point__li__txt--3 > img{
  height: 8.5vw;
}
.point__li__txt--3 > small > img{
  height: auto;
  width: 100%;
  max-width: 13em;
}
.point__li__hdr{
  display: none;
}
.point__li__sample{
  height: 15vw;
  margin: 2vw auto -1vw;
}
@media(min-width:50rem){
  .point{
    gap: 1.5em;
  }
  .point__li{
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: auto;
    align-content: center;
    border-width: 3px;
    border-radius: 1em;
    padding: 0;
  }
  .point__li::before{
    left: -1em;
    width: calc(1em + 1px);
  }
  .point__li__txt{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 1em 1.5em;
  }
  .point__li__txt > img{
    height: 2em;
  }
  .point__li__txt--3{
    line-height: 1.2;
  }
  .point__li__txt--3 > picture{
    display: block;
    width: 100%;
  }
  .point__li__txt--3 > picture > img{
    display: block;
    height: auto;
    width: 100%;
  }
  .point__li__txt--3 > small > img{
    height: 3vw;
  }
  .point__li__hdr{
    display: block;
    padding: 0.5em 1.5em;
    border-radius: 0.75em 0.75em 0 0;
    background: #fff;
  }
  .point__li__hdr > img{
    height: 1em;
  }
  .point__li--3{
    grid-template-columns: 1fr 40%;
  }
  .point__li--3 > .point__li__sample{
    grid-column: 2 / 3;
    grid-row: 2 / 4;
    align-self: center;
    margin: 0;
  }
  .point__li--3 > .point__li__hdr{
    grid-column: 1 / 3;
  }
  .point__li__sample{
    height: auto;
    padding: 1em 1em 1em 0;
  }
}

/* 導入部分 */
.top-lead{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
  word-break: keep-all;
}
.top-lead::after{
  content: "";
  display: block;
  margin: 0 auto;
  width: 95%;
  aspect-ratio: 448 / 120;
  background: url(../img/ph_multicopy.jpg) no-repeat 50% 0;
  background-size: contain;
}
.top-lead__main{
  margin: 0;
  color: var(--pplus-color-picchan);
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1.2;
}
.top-lead__main > em{
  font-family: var(--pplus-font-heavy);
  font-weight: 900;
  font-style: normal;
  font-size: 1.9em;
}
.top-lead__sub{
  margin: 0;
}
.top-lead__sub > em{
  color: var(--pplus-color-picchan);
  font-style: normal;
}
.top-lead__fig{
  order: 99;
  margin: 0.5em 0 0;
}
.top-lead__fig__img > img{
  width: 100%;
}
@media(min-width:35rem){
  .top-lead{
    display: grid;
    grid-template-columns: 50% auto;
    justify-content: center;
    gap: 0.75em 1em;
  }
  .top-lead::after{
    grid-row: 1 / 3;
    width: 100%;
  }
  .top-lead__fig{
    grid-column: 1 / 3;
    margin-top: var(--pplus-margin-section);
  }
}

/* 特徴 */
.sec--service{
  counter-reset: service-list;
  margin: 1rem;
  text-align: left;
}
.sec--service > .sec-ttl,
.service-list-ttl{
  margin-left: -1rem;
  margin-right: -1rem;
}
.service-list-ttl{
  position: relative;
  counter-increment: service-list;
  background: var(--pplus-color-theme-pale);
  padding: 0.5rem 0.75rem 0.5rem 2rem;
  font-weight: normal;
  font-size: 1.05em;
}
.service-list-ttl::before {
  content: counter(service-list) ;
  position: absolute;
  left: 0.75rem;
  top:0.25em;
  color: #fff;
  font-family: var(--pplus-font-heavy);
  font-size: 1.2em;
  font-weight: 900;
}
.service-sample{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 20em;
  margin: 1rem auto;
}
.service-sample > img{
  flex-basis: calc(50% - 0.5rem);
  min-width: 0;
}

.service-sample:has(figcaption){
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.service-sample > figcaption{
  margin-top: -0.5rem;
  text-align: center;
  font-size: smaller;
}
.service-sample > figcaption:nth-of-type(1),
.service-sample > figcaption:nth-of-type(2){
  grid-row: 2;
}
.service-sample > figcaption:nth-of-type(3),
.service-sample > figcaption:nth-of-type(4){
  grid-row: 4;
}
@media(min-width:35rem){
  .sec--service{
    margin: 2rem;
  }
  .sec--service > .sec-ttl,
  .service-list-ttl{
    margin-left: -2rem;
    margin-right: -2rem;
  }
  .service-list-ttl{
    margin-top: 2rem;
    margin-bottom: 1rem;
  }
  .service-sample{
    flex-wrap: nowrap;
    max-width: 40em;
  }
  .service-sample > img{
    flex-basis: calc(25% - 0.5rem);
  }
  .service-sample:has(figcaption){
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .service-sample > figcaption:nth-of-type(3),
  .service-sample > figcaption:nth-of-type(4){
    grid-row: 2;
  }
}
/* サービス比較 */
.serv-table{
  font-size: 3.5vw;
  width: 100%;
}
.serv-table th,
.serv-table td{
  padding: 0.5em 0.25em;
}
.sec-ttl + .serv-table{
  margin-top: -1rem ;
}
.serv-table > tbody > tr > th{
  word-break: keep-all;
}
.serv-table > tbody > tr > td{
  text-align: center;
  white-space: nowrap;
}
.serv-table > thead > tr > th[scope="row"]{
  width: 25%;
}
.serv-table > thead > tr > th[scope="col"]{
  width: 25%;
}
.serv-table th[scope="col"]:nth-child(odd),
.serv-table td:nth-child(odd) {
  background: #f7f0e6;
}
.text--booth{
  color: #666;
}
.text--note{
  font-size: 3vw;
  display: block;
}
@media(min-width:35rem){
  .serv-table{
    font-size: inherit;
  }
  .serv-table .text--pplus br,
  .serv-table .text--booth br{
    display: none;
  }
  .text--note{
    font-size: inherit;
    display: inline;
  }
  .text--note::before{
    content: "（";
  }
  .text--note::after{
    content: "）";
  }
}
@media(min-width:50rem){
  .serv-table > thead > tr > th[scope="row"]{
    width: 22%;
  }
  .serv-table > thead > tr > th[scope="col"]{
    width: 26%;
  }
}

/* howto */
.top-howto{
  background: var(--pplus-color-mono-almostbg);
  padding: 0 1rem var(--pplus-margin-section);
}
.top-howto > .sec-ttl{
  margin-left: -1rem;
  margin-right: -1rem;
  margin-bottom: var(--pplus-margin-section);
}
.howto-list{
  margin: 0;
  padding: 0;
  list-style-position: inside;
}
.howto-list > li{
  position: relative;
  margin: 1.5em 0;
  padding: 0 0 1.4em;
  font-size: 1.1em;
}
.howto-list > li:last-of-type{
  padding-bottom: 0;
}
.howto-list__img{
  display: block;
  margin: 1em auto;
  width: 15em;
}
.howto-list__img--l{
  width: 20em;
}
@media(orientation: portrait){
  .howto-list__img{
    width: 50vw;
  }
  .howto-list__img--l{
    width: 65vw;
  }
}
.howto-list > li::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3px;
  height: 1.4em;
  background-color: var(--pplus-color-theme);
  transform:translateX(-50%);
}
.howto-list > li::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0.9em;
  aspect-ratio: 1 / 1;
  border-bottom: solid 3px var(--pplus-color-theme); 
  border-right: solid 3px var(--pplus-color-theme); 
  transform:translate(-50%, -3px) rotate(45deg);
}
.howto-list > li:last-of-type::before,
.howto-list > li:last-of-type::after{
  display: none;
}

/* qanda */
.qanda-list{
  text-align: left;
}
.qanda-list > dt{
  display: grid;
  grid-template-columns: 2.5em 1fr;
  margin: 1.25em 0 0;
  padding: 1em 0.5em;
  font-weight: bold;
}
.qanda-list > dd{
  display: grid;
  grid-template-columns: 2.5em 1fr;
  background: var(--pplus-color-mono-almostbg);
  margin: 0;
  padding: 1em 0.5em;
}
.qanda-list > dt::before{
  content: "Q";
  display: block;
  color: var(--pplus-color-theme);
  font-family: var(--pplus-font-heavy);
  font-size: 1.4em;
  line-height: 1;
}
.qanda-list > dd::before{
  content: "→";
  display: block;
  color: var(--pplus-color-theme);
  font-size: 1.4em;
  line-height: 1;
}
@media(min-width:30rem){
  .qanda-list > dt,
  .qanda-list > dd{
    padding-left: 1.5em;
    padding-right: 1.5em;
  }
}

/* まとめ */
.top-matome{
  max-width: 40em;
  margin: var(--pplus-margin-section) auto;
  word-break: keep-all;
  font-weight: bold;
}