@charset "UTF-8";

/* common */
body{
    letter-spacing: 0;
}
.js-fadein-element,
.js-fadein-element2,
.js-fadein-element3,
.js-fadein-element4{
  transform: translateY(30px);
  opacity: 0;
  visibility: hidden;
  transition: transform 1.2s, opacity 1s, visibility 1s;
}
.js-fadein{
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
}


.sp-br{
    display:none;
}
@media (max-width:768px){
    .sp-br{
        display:inline;
    }
}

/* cms */
.pane-footer .block-footer-content{
    display: none;
}
footer .block-footer--top {
    margin: 100px 0 0;
}

/* mv */
.mv{
    width:100%;
    background-color: #6F472F;
}
.mv__pic,.mv__img{
    display:block;
    width:100%;
    height:auto;
    max-width: 1440px;
    margin: 0 auto;
}

/* nav */
.mnav{
    position:sticky;
    top:0;
    z-index:999;
    background:#fff;
    border-top:1px solid rgba(0,0,0,.08);
    border-bottom:1px solid #6F472F;
}
.mnav__list{
    display:flex;
    gap:16px;
    justify-content:center;
    align-items:center;
    margin:0;
    padding:14px 12px;
    list-style:none;
    font-family: 'Helvetica Neue', Arial, "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
.mnav__a{
    display:inline-block;
    text-decoration:none;
    color:inherit;
    font-size:16px;
    white-space:nowrap;
}
.mnav.is-stuck{
    box-shadow:0 6px 18px rgba(0,0,0,.08);
}
/* nav__sp */
@media (max-width:768px){
    .mnav__list{ 
        gap:12px;
    }
    .mnav__a{
        font-size: 14px;
    }
}
.mnav.is-fixed{
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/* PC */
@media (min-width: 769px){
  .mnav.is-fixed{
    top: 75px;
  }
}

/* SP */
@media (max-width: 768px){
  .mnav.is-fixed{
    top: 55px;
  }
}
/* lead */
.lead{
    padding:80px 0 0;
}
.lead__in{
    max-width:960px;
    margin:0 auto;
    padding:0 24px;
}
.lead__txt{
    margin:0;
    text-align:center;
    line-height:34px;
    font-family: 'Helvetica Neue', Arial, "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
    font-size: 16px;
}
/* lead_sp */
@media (max-width:768px){
    .lead{
        padding:50px 0 0;
    }
    .lead__in {
        padding: 0 20px;
    }
    .lead__txt{
        text-align:left;
        line-height:1.8;
        font-size: 15px;
    }
}

/* LINE */
.line{
    padding:0;
}
.line__in{
    max-width:1440px;
    margin: 100px auto 0;
    background:#efefef;
    position: relative;
}
.line__hd{
    text-align:center;
    margin: 0 auto -20px;
    position: absolute;
    left:50%;
    top:-20px;
    transform:translateX(-50%);
}
.line__hd img{
    max-width:240px;
    width:100%;
    height:auto;
    display:inline-block;
}
.line__card{
    width: 640px;
    padding:20px 60px;
    display:flex;
    align-items:center;
    gap:20px;
    margin: 0 auto;
}
.line__qr img{
    width:130px;
    height:auto;
    display:block;
}
.line__main{
    flex:1;
    display:grid;
    grid-template-columns:44px 1fr;
    grid-template-areas:"ic txts";
    column-gap:14px;
    row-gap:12px;
    align-items:start;
    min-width:0;
}
.line__ic{
    grid-area:ic;
}
.line__ic img{
    width:44px;
    height:auto;
    display:block;
}
.line__txts{
    grid-area:txts;
}
.line__ttl{
    font-size:18px;
    font-family: 'Helvetica Neue', Arial, "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
.line__txt{
    margin:0;
    line-height:2;
    font-family: "游明朝体","Yu Mincho",YuMincho,"ヒラギノ明朝 Pro","Hiragino Mincho Pro","MS P明朝","MS PMincho",serif;
    font-size: 15px;
    font-weight: 400;
}
.line__btn{
    display:flex;
    justify-content:center;
    width:100%;
    padding:18px 24px;
    background:#000;
    color:#fff;
    text-decoration:none;
    box-sizing:border-box;
}
@media (min-width: 769px){
    .line__main{
        display:grid;
        grid-template-columns: 44px 1fr;
        grid-template-areas:
        "ic  ttl"
        "txt txt";
        column-gap:14px;
        row-gap:8px;
        align-items:center;
        min-width:0;
    }
    .line__ic{
        grid-area: ic;
    }
    .line__ic img{
        width:44px;
        height:auto;
        display:block;
    }
    .line__txts{
        display: contents;
    }
    .line__ttl{
        grid-area: ttl;
        margin:0;
    }
    .line__txt{
        grid-area: txt;
        margin:0;
    }
}

/* PC only / SP only */
@media (min-width:769px){
  .sp{ display:none; }
  .pc-br{ display:inline; }
}

/* LINE_sp */
@media (max-width:768px){
    .pc{
        display:none;
    }
    .pc-br{
        display:none;
    }
    .line{
        padding:60px 0 0;
    }
    .line__in{
        padding:0;
        margin: 0;
    }
    .line__hd{
        max-width:calc(100% - 36px);
        top: -14px;
    }
    .line__card{
        width:100%;
        max-width:none;
        padding:30px;
        margin:0 auto;
        box-sizing:border-box;
    }
    .line__main{
        grid-template-columns:70px 1fr;
        grid-template-areas:"ic txts" "btn btn";
        column-gap:20px;
        row-gap:20px;
    }
    .line__ic img{
        width:70px;
    }
    .line__btn{
        grid-area:btn;
        padding: 12px 0;
        pointer-events: none;
    }
    .line__ttl{
        font-size:16px;
        line-height:1.35;
        margin: 0 0 10px;
    }
    .line__txt{
        font-size:13px;
        line-height:1.9;
    }
}

/* service */
.svc{
    padding: 110px 0 0;
}
.svc__in{
    max-width:1440px;
    margin:0 auto;
    padding:0 24px;
}
.svc__hd{
    text-align:center;
    margin-bottom:50px;
}
.svc__en{
    height:42px;
    display:inline-block;
}
.svc__ja{
    margin:10px 0 0;
    font-family: "游明朝体","Yu Mincho",YuMincho,"ヒラギノ明朝 Pro","Hiragino Mincho Pro","MS P明朝","MS PMincho",serif;
    font-size: 18px;
    font-weight: 400;
}
.svc__grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}
.svc__item{
    padding:40px 20px;
    text-align:center;
    border-right:1px solid rgba(0,0,0,.18);
}
.svc__item:nth-child(4){
    border-right: none;
}
.svc__tag{
    background-color: #000;
    width: 120px;
    margin: 0 auto;
    padding: 4px 0px;
}
.svc__tag img{
    width:60%;
    height:auto;
    display:inline-block;
    margin: 0 auto 5px;
}
.svc__pic{
    margin:10px 0 20px;
}
.svc__pic img{
    width:150px;
    max-width:70%;
    height:auto;
    display:inline-block;
}
.svc__txt{
    margin:0;
    line-height:1.8;
    font-family: "游明朝体","Yu Mincho",YuMincho,"ヒラギノ明朝 Pro","Hiragino Mincho Pro","MS P明朝","MS PMincho",serif;
    font-size: 16px;
    font-weight: bold;
}

/* svc_sp */
@media (max-width:768px){
    .svc{
        padding:90px 0 0;
    }
    .svc__in{
        padding:0;
    }
    .svc__hd{
        margin-bottom:30px;
    }
    .svc__en{
    height:30px;
    }
    .svc__ja{
        font-size: 15px;
    }
    .svc__grid{
        grid-template-columns:repeat(2,1fr);
    }
    .svc__item{
        padding:30px 20px;
    }
    .svc__item:nth-child(1),
    .svc__item:nth-child(2){
        border-bottom:1px solid rgba(0,0,0,.18);
        padding-top: 0;
    }
    .svc__item:nth-child(2){
        border-right: none;
    }
    .svc__tag img{
        width: 56px;
        margin: 0 auto 6px;
    }
    .svc__pic img{
        width:150px; max-width:80%;
    }
    .svc__txt{
        font-size: 15px;
    }
}

/* campaign */
.cam{
    padding:110px 0 0;
}
.cam__in{
    max-width:1440px;
    margin:0 auto;
    padding:0 24px;
}
.cam__hd{
    text-align:center;
    margin-bottom:60px;
}
.cam__en{
    height:42px;
    display:inline-block;
}
.cam__ja{
    margin:10px 0 0;
    font-family: "游明朝体","Yu Mincho",YuMincho,"ヒラギノ明朝 Pro","Hiragino Mincho Pro","MS P明朝","MS PMincho",serif;
    font-size: 18px;
}
.cam__box{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:50px;
    align-items:start;
    margin: 0 60px;
}
.cam__pic img{
    width:100%;
    height:auto;
    display:block;
}
.cam__body{
    min-width:0;
}
.cam__ttl{
    margin:0 0 10px;
    font-size:18px;
    text-align: center;
    font-family: 'Helvetica Neue', Arial, "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
.cam__txt{
    margin:0 0 12px;
    font-family: 'Helvetica Neue', Arial, "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
small.cam__txt{
    color: #666;
}
.cam__btn{
    display:flex;
    justify-content:center;
    width: 330px;
    margin:40px auto 0;
    max-width:100%;
    padding:16px 0;
    background:#000;
    color:#fff;
    text-decoration:none;
}
/* campaign__sp */
@media (max-width:1200px){
    .cam__box{
        grid-template-columns: 1fr;
        gap:18px;
        margin: 0;
    }
}
@media (max-width:768px){
    .cam{ 
        padding:90px 0 0;
    }
    .cam__in{
        padding:0 20px;
    }
    .cam__hd{
        margin-bottom:40px;
    }
    .cam__en{
    height:30px;
    }
    .cam__ja{
        font-size: 15px;
    }
    .cam__box{
        grid-template-columns: 1fr;
        gap:18px;
    }
    .cam__ttl{
        font-size:16px;
        margin:0 0 12px;
    }
    .cam__txt{
        font-size: 14px;
        line-height: 1.7;
    }
    .cam__btn{
        width: 100%;
        margin: 20px 0 0;
        padding: 12px 0;
        font-size: 14px;
    }
}

/* howto */
.howto{
    padding:110px 0 0;
}
.howto__in{
    max-width:1440px;
    margin:0 auto;
    padding:0;
}
.howto__hd{
    text-align:center;
    margin-bottom:60px;
}
.howto__en{
    height:42px;
    display:inline-block;
}
.howto__ja{
    margin:10px 0 0;
    font-family: "游明朝体","Yu Mincho",YuMincho,"ヒラギノ明朝 Pro","Hiragino Mincho Pro","MS P明朝","MS PMincho",serif;
    font-size: 18px;
}
.st{
    margin-top:72px;
}
.st:first-of-type{
    margin-top:0;
}
.st__hd{
    width: 100px;
    margin: 0 auto 10px;
    padding: 6px 0 0;
    text-align:center;
    background-color: #000;
}
.st__tag{
    width:60%;
    height:auto;
    display:inline-block;
    margin: 0 0 3px;
}
.st__ttl{
    margin: 0 auto 30px;
    font-size:20px;
    font-family: "游明朝体","Yu Mincho",YuMincho,"ヒラギノ明朝 Pro","Hiragino Mincho Pro","MS P明朝","MS PMincho",serif;
    font-weight: bold;
    text-align: center;
}
.st__pc{
    background:#FAFAFA;
    padding:60px 0;
    display:grid;
    grid-template-columns:minmax(0,420px) 80px minmax(0,420px);
    column-gap:40px;
    justify-content:center;
    align-items:start;
    overflow:hidden;
}
.st__pane{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}
.st__img{
    width:100%;
    max-width:240px;
    height:auto;
    display:block;
    margin:0 auto;
    border: 1px solid #CCCCCC;
}
.st__cap{
    margin:20px 0 0;
    line-height:1.9;
    font-family: "游明朝体","Yu Mincho",YuMincho,"ヒラギノ明朝 Pro","Hiragino Mincho Pro","MS P明朝","MS PMincho",serif;
    font-size: 16px;
    font-weight: bold;
}
.st__note{
    margin:10px 0 0;
    font-size:14px;
    line-height:1.8;
    text-align:left;
}
.st__cap,
.st__note{
    width:100%;
    max-width:420px;
    box-sizing:border-box;
    white-space:normal !important;
    overflow-wrap:anywhere;
    word-break:break-word;
}
.st__arr{
    width:0;
    height:0;
    border-top:45px solid transparent;
    border-bottom:45px solid transparent;
    border-left:26px solid #ccc;
    justify-self:center;
    align-self:center;
}
@media (min-width: 769px){

  /* Step1 */
  .howto .st:nth-of-type(1) .st__arr{
    margin-top: -160px;
  }

  /* Step2 */
  .howto .st:nth-of-type(2) .st__arr{
    margin-top: -80px;
  }

  /* Step3 */
  .howto .st:nth-of-type(3) .st__arr{
    margin-top: -120px;
  }

  /* Step4 */
  .howto .st:nth-of-type(4) .st__arr{
    margin-top: -60px;
  }

}
/* howto__sp */
.st__sp{
    display:none;
}
@media (max-width:768px){
    .howto{
        padding:90px 0 0;
    }
    .howto__in{
        padding:0;
    }
    .howto__hd{
        margin-bottom:40px;
    }
    .howto__en{
        height: 30px;
    }
    .howto__ja{
        font-size: 15px;
    }
    .st{
        margin-top:54px;
    }
    .st__ttl{
        margin: 0 auto 30px;
        font-size:18px;
    }
    .st__pc{
        display:none;
    }
    .st__sp{
        display:block;
    }
    .sw{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x mandatory;
        padding:0;
        background-attachment: fixed;
        background: #FAFAFA;
    }
    .sw::-webkit-scrollbar{
        display:none;
    }
    .sw__in{
        display:flex;
        gap: 30px;
        padding: 40px 0;
    }
    .sw__in::after{
  content:"";
  flex:0 0 60px; /* 右余白 */
}
    .sw__item{
        flex:0 0 240px;
        scroll-snap-align:center;
        padding: 0;
    }
    .sw__item:first-child{
  margin-left:60px;
}

.sw__item:last-child{
  margin-right:60px;
}
    .st__img{
        /*max-width:300px;
        width: unset;*/
    }
    .st__cap{
        font-size: 15px;
        text-align: center;
    }
    .st__note{
        max-width:none;
    }
    .st__arr.sp-arr{
    flex:0 0 40px;
    align-self:center;
    position:relative;
    top: -30px;
  }
   .howto .st:nth-of-type(1) .st__arr.sp-arr{
    top:-110px;
  }
     .howto .st:nth-of-type(3) .st__arr.sp-arr{
    top:-70px;
  }
       .howto .st:nth-of-type(4) .st__arr.sp-arr{
    top:-50px;
  }


}

/* cta */
.cta {
    padding: 60px 0 0;
}
.cta__in {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
}
.cta__grid {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    color: #fff;
    text-decoration: none;
    padding: 12px 0;
    text-align: center;
    width: 330px;
}
.cta__txt {
    font-size: 16px;
}

/* cta__sp */
@media (max-width: 768px) {
    .cta {
        padding: 64px 0;
    }
    .cta__in {
        padding: 0 18px;
    }
    .cta__grid {
        flex-direction: column;
        gap: 10px;
    }
    .cta__btn {
        width: 100%;
        padding: 12px 0;
    }
    .cta__txt {
        font-size: 15px;
    }
}

/* app */
.app{
    padding:80px 0;
}
.app__in.sp{
    display:none;
}
.app__in{
    max-width:1440px;
    margin:0 auto;
    padding:0 24px;
    border: 1px solid #CCCCCC
}
.app__box{
    display:grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1.15fr);
    gap:100px;
    align-items:start;
    padding: 50px;
}
.app__side{
    min-width:0;
}
.app__lead{
    margin:0 0 26px;
    line-height:1.5;
    font-size:21px;
    font-family: "游明朝体","Yu Mincho",YuMincho,"ヒラギノ明朝 Pro","Hiragino Mincho Pro","MS P明朝","MS PMincho",serif;
    font-weight: 400;
}
.app__dl{
    background:#f2f2f2;
    padding:34px 0;
    text-align:center;
}
.app__dlttl{
    margin:0 0 18px;
    font-size:16px;
    font-weight: 600;
    font-family: 'Helvetica Neue', Arial, "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
.app__badges{
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}
.app__badge img{
    height:50px;
    width:auto;
    display:block;
}
.app__shots{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:100px;
    align-items:start;
}
.app__shot{
    margin:0;
    text-align:center;
}
.app__shot img{
    width:100%;
    height:auto;
    display:block;
    border: 1px solid #CCCCCC;
}
.app__cap{
    margin:18px 0 0;
    font-size:14px;
    line-height:1.6;
    font-family: 'Helvetica Neue', Arial, "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}

@media (min-width:769px){
    .app__box{
        grid-template-columns: minmax(0,520px) minmax(0,500px);
        align-items: center;
        justify-content: center;
    }
    .app__side{
        order:2;
        width: 500px;
    }
    .app__shots{
        order:1;
    }
}
/* app__sp */
@media (max-width:768px){
    .pc-br{
        display:none;
    }
    .app__in.pc{
        display:none;
    }
    .app__in.sp{
        display:block;
    }
    .app{
        padding: 0;
    }
    .app__in{
        padding: 40px 20px;
        border-bottom: none;
        border-left: none;
        border-right: none;
    }
    .app__lead{
        text-align:center;
        font-size:18px;
        line-height:1.6;
    }
    .app__dl{
        padding:30px 0;
        margin:30px 0;
        text-align:center;
    }
    .app__badges{
        display:flex;
        justify-content:center;
        gap:12px;
    }
    .app__badge img{
        height:46px;
    }

  .app__shots{
    display:flex;
    gap:24px;
  }

  .app__shot{
    text-align:center;
  }

  .app__cap{
    margin-top:14px;
    font-size:14px;
  }

}

/* bg */
.pbg{
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
  -webkit-clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
}   

.pbg::before{
  content:"";
  display:block;
  position: fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100%;
}
.pbg__wrap{
  position:absolute;
  inset:0;
  z-index:2;
  transform: translateZ(0);
}

/* PC */
@media (min-width:728px){

  .img-name--mo{
    background:url(/cms/service/mobile-order/img/11.jpg) center/100% no-repeat !important;
    background-attachment: fixed !important;
  }
}

/* SP */
@media (max-width:727px){
        .pbg{
        height: 270px;
    }
  .img-name--mo::before{
    /*background-image: url(/cms/service/mobile-order/img/12.jpg) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;*/
    /*background-position: center 20% !important;*/
    background: url(/cms/service/mobile-order/img/12.jpg) center top / cover no-repeat !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .pbg::before{
    inset: 0;
    height: 100svh;
    width: 100%;
    transform: translate3d(0,0,0);
    will-change: transform;
  }
}