@charset "UTF-8";

html{
    font-size:62.5%;
    width:100%
}
*{
    box-sizing:border-box
}
img{
    max-width:100%;
    vertical-align:top
}
ul{
    list-style:none
}

/*contents*/

#sales {
    color:#333;
    font-size:1.8rem;
    font-family:Hiragino Kaku Gothic Pro,ヒラギノ角ゴ Pro W3,Meiryo,メイリオ,Osaka,MS PGothic,arial,helvetica,sans-serif;
    line-height:2;
    min-width:auto!important;
    letter-spacing:0!important
}
#sales img{
  width: auto;
  display: inline;
}
#sales a[href]{
    color:#000;
    text-decoration:none;
    transition:.16s
}
#sales .indent-half{
    margin-left:-.5em
}
#sales .ta-center{
  text-align:center
}
#sales .btn{
    margin-top:30px;
    text-align:center;
    font-size:1.5rem;
    font-weight:700;
    line-height:1.8
}
#sales .btn a{
    display:block;
    padding:20px 0;
    color:#fff!important;
    text-decoration:none!important;
    background-color:#000054;
    border-radius:5px;
    background-image:url(../img/sales/ico_arrow@2x.png);
    background-size:15px 15px;
    background-repeat:no-repeat;
    background-position:center right 15px
}
#sales .text-link[href]{
    color:#1c3a83;
    text-decoration:underline
}
#sales .content--yellow{
    /* background-color:#d2d1d6 */
}
#sales .content--preview{
    background-color:#fffde5
}
#sales .content .inner{
    max-width:960px;
    margin:0 auto;
    padding:30px 0
}
#sales .content-info{
    padding-left:12.5%;
    padding-right:12.5%;
    margin-top:30px;
    background-color:#fff
}
#sales .content-info__inner{
    max-width:560px;
    margin:0 auto
}
#sales .content-info__inner p{
    margin-top:2em;
    margin-bottom:2em;
    font-size:1.6rem;
    line-height:1.75
}
#sales .content-info-header{
    text-align:center;
    border-bottom:1px solid #000
}
#sales .content-info-header h1{
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:center;
    justify-content:center;
    -ms-flex-align:center;
    align-items:center;
    height:150px;
    font-size:3.6rem;
    line-height:1.6
}
#sales .content-info-body{
    padding-bottom:120px
}
#sales .content-info-body>h2{
    margin-top:100px;
    font-size:2.5rem;
    text-align:center
}
#sales .content-info-body>h2:after{
    content:"";
    display:block;
    width:100%;
    height:4px;
    background-color:#faca0c;
    border:1px solid #000
}
#sales .content-info-body__text{
    margin-top:2em;
    margin-bottom:2em;
    font-size:1.6rem;
    line-height:1.75
}
#sales .content-info-body__text strong{
    padding-top:4px;
    padding-bottom:4px;
    font-weight:400;
    background-color:#faca0c
}
#sales .content-info-body__text small{
    font-size:1.4rem
}
#sales .content-info-body .howto-ex{
    position:relative;
    margin-top:60px;
    margin-left:80px;
    padding-left:80px;
    line-height:1.72;
    font-weight:700
}
#sales .content-info-body .howto-ex:before{
    content:"例";
    position:absolute;
    top:10px;
    left:0;
    width:56px;
    height:56px;
    line-height:56px;
    background-color:#b2b2b2;
    color:#fff;
    border-radius:28px;
    text-align:center;
    font-size:2.8rem
}
#sales .content-info-body .attention{
    padding-bottom:60px;
    border-bottom:1px solid #000;
    background-image:url(../img/sales/03/attention@2x.png);
    background-repeat:no-repeat;
    background-size:108px 95px;
    background-position:top right 80px
}
#sales .content-info-body .function{
    display:-ms-flexbox;
    display:flex;
    margin-top:80px
}
#sales .content-info-body .function__info{
    margin-left:25px
}
#sales .content-info-body .function__info h3{
    font-size:2rem;
    line-height:1
}
#sales .content-info-body .function__info p{
    margin-top:1em;
    font-size:1.6rem;
    line-height:1.75
}
#sales .content-info-body .function__info small{
    font-size:1.4rem
}
#sales .content-info-body .function__image{
    width:280px
}
#sales .content-info-body .process{
    max-width:560px;
    margin:70px auto
}
#sales .content-info-body .process__text{
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:center;
    align-items:center;
    margin-top:18px;
    line-height:1.8;
    font-weight:700
}
#sales .content-info-body .process__text--top{
    -ms-flex-align:start;
    align-items:flex-start
}
#sales .content-info-body .process__text small{
    display:inline-block;
    font-size:1.4rem;
    font-weight:400;
    line-height:1.8
}
#sales .content-info-body .process__text .num{
    width:56px;
    height:56px;
    margin-right:24px;
    line-height:56px;
    border-radius:28px;
    background-color:#faca0c;
    color:#fff;
    text-align:center;
    font-size:4.1rem;
    font-family:Roboto Condensed,sans-serif
}
#sales .content-info-body .info-block{
    margin-top:50px;
    margin-bottom:50px;
    background-color:#f5f5f5;
    font-size:1.6rem
}
#sales .content-info-body .info-block .line{
    line-height:0
}
#sales .content-info-body .info-block__inner{
    padding:60px 50px 40px
}
#sales .content-info-body .info-block__title{
    text-align:center
}
#sales .content-info-body .info-block__list{
    margin-top:35px
}
#sales .content-info-body .info-block__list li{
    padding:10px 30px;
    margin-top:10px;
    background-color:#fff;
    font-size:1.6rem;
    line-height:1.75;
    font-weight:700
}
#sales .content-info-body .info-block__list li p{
    margin-top:.5em;
    font-size:1.4rem;
    font-weight:400
}
#sales .content-info-body .qa{
    max-width:480px;
    margin:45px auto;
    background-color:#fff;
    border-radius:10px
}
#sales .content-info-body .qa .question{
    position:relative;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:center;
    align-items:center;
    height:120px;
    padding-left:40px;
    border-radius:10px 10px 0 0;
    background-color:#faca0c;
    background-image:url(../img/sales/01/bg_question@2x.png);
    background-size:120px 94px;
    background-position:100% 100%;
    background-repeat:no-repeat
}
#sales .content-info-body .qa .question__num{
    position:absolute;
    top:-16px
}
#sales .content-info-body .qa .question__text{
    line-height:1.44;
    letter-spacing:.08em
}
#sales .content-info-body .qa .answer{
    padding:30px 40px
}
#sales .content-info-body .qa .answer__content p{
    margin-top:2em;
    font-size:1.6rem;
    line-height:1.75
}
#sales .content-info-body .qa .answer__content p:first-child{
    margin-top:1em
}
#sales .content-info-body .qa .answer__content .ex{
    display:block;
    width:30px;
    height:30px;
    line-height:30px;
    background-color:#000;
    color:#fff;
    border-radius:15px;
    text-align:center;
    font-size:1.4rem
}

#sales .content-info--01 .content-info-body{
  padding:35px 11.11% 120px;
}
#sales .content-info--01 .content-info-header{
    position:relative;
    top:-25px
}
#sales .content-info--01 .content-info-header img {
    width: 134px;
    margin-bottom: 15px;
}
#sales .content-info--02 .content-info-header{
    position:relative;
    top:-30px;
    margin-bottom:-5px
}
#sales .content-info--02 .content-info-header img{
    width: 138px;
}
#sales .content-info--02 .content-info-header h1{
    position:relative
}
#sales .content-info--02 .content-info-header h1:before{
    content:"";
    position:absolute;
    top:-60px;
    left:50%;
    margin-left:160px;
    width:170px;
    height:120px;
    background-image:url(../img/sales/02/balloon@2x.png);
    background-size:100% auto;
    background-repeat:no-repeat
}
#sales .content-info--02 .content-info-header h1:after{
    content:"";
    position:absolute;
    right:5%;
    width:102px;
    height:105px;
    background-image:url(../img/sales/02/illust@2x.png);
    background-size:100% auto;
    background-repeat:no-repeat
}
#sales .content-info--03 .content-info-header{
    position:relative;
    top:-30px;
    margin-bottom:-5px
}
#sales .content-info--03 .content-info-header .icon{
    position:relative
}
#sales .content-info--03 .content-info-header .icon img{
    width: 150px;
}
#sales .content-info--03 .content-info-header .icon:after{
    content:"";
    position:absolute;
    top:50px;
    right:50%;
    transform:translateX(50%);
    width:157px;
    height:88px;
    margin-right:-120px;
    background-image:url(../img/sales/03/balloon@2x.png);
    background-size:157px 88px;
    background-repeat:no-repeat
}

@media (min-width:769px){
  #sales .is-pc-disabled,.sp{
      display:none!important
  }
  #sales a[href]:hover{
    opacity:.5
  }
}
@media (max-width:768px){
  #sales .fit-mobile br {
      display: none!important;
  }
  #sales .is-sp-disabled{
      display:none!important
  }
  #sales .btn{
      margin-top:15px;
      font-size:1.3rem
  }
  #sales .btn a{
      padding:10px 0
  }
  #sales .content .inner{
    width:90%
  }
  #sales .content-info{
      padding-left:0;
      padding-right:0;
      margin-top: 0
  }
  #sales .content-info__inner>.btn{
      width:90%;
      margin-left:auto;
      margin-right:auto
  }
  #sales .content-info-header{
      width:90%;
      margin:0 auto
  }
  #sales .content-info-header h1{
      font-size:1.8rem;
      height:80px
  }
  #sales .content-info-header .icon img{
      margin-left:auto;
      margin-right:auto
  }
  #sales .content-info--01 .content-info-header img{
      width:80px;
      margin-bottom: 10px;
  }
  #sales .content-info--02 .content-info-header{
      top:-16px;
      margin-bottom:30px
  }
  #sales .content-info--02 .content-info-header img{
      width:80px
  }
  #sales .content-info--02 .content-info-header h1:before{
      width:90px;
      height:63px;
      top:-60px;
      left:auto;
      right:-3%;
      margin-left:0
  }
  #sales .content-info--02 .content-info-header h1:after{
      width:68px;
      height:70px;
      background-color:#fff;
      right:0;
      bottom:-30px
  }
  #sales .content-info--03 .content-info-header{
      top:0;
      padding-top:5px;
      margin-bottom:30px
  }
  #sales .content-info--03 .content-info-header .icon img{
      width:82px
  }
  #sales .content-info--03 .content-info-header .icon:after{
      display:none
  }
  #sales .content-info-body{
      padding-bottom:30px
  }
  #sales .content-info-body .ta-center{
      text-align:left
  }
  #sales .content-info--01 .content-info-body{
      padding:0 0 30px;
      background-image:none
  }
  #sales .content-info-body>h2{
      margin-top:50px;
      padding-left:5%;
      padding-right:5%;
      line-height:1.6;
      font-size:1.8rem
  }
  #sales .content-info-body>h2:after{
      margin-top:5px
  }
  #sales .content-info-body__text{
      margin:0;
      padding:0 5%
  }
  #sales .content-info-body .howto-ex{
      margin-top:1.5em;
      margin-left:0;
      padding:0 5%;
      font-size:1.6rem
  }
  #sales .content-info-body .howto-ex:before{
      position:static;
      display:block;
      width:30px;
      height:30px;
      margin-bottom:1em;
      line-height:30px;
      background-color:#000;
      color:#fff;
      border-radius:15px;
      text-align:center;
      font-size:1.4rem
  }
  #sales .content-info-body .attention{
      border:none;
      padding-top:70px;
      padding-bottom:0;
      background-position:top 20px center;
      background-size:66px 58px
  }
  #sales .content-info-body .attention:after{
      content:"";
      display:block;
      width:90%;
      height:1px;
      background-color:#000;
      margin:0 auto
  }
  #sales .content-info-body .function{
      display:block;
      padding-left:5%;
      padding-right:5%;
      margin-top:30px
  }
  #sales .content-info-body .function__image,#sales .content-info-body .function__image img{
      width:100%
  }
  #sales .content-info-body .function__info{
      margin-left:0
  }
  #sales .content-info-body .function__info h3{
      margin-top:20px
  }
  #sales .content-info-body .process{
      margin-top:25px;
      margin-bottom:25px;
      padding-left:5%;
      padding-right:5%
  }
  #sales .content-info-body .process__text{
      margin-top:10px;
      font-size:1.4rem;
      -ms-flex-align:start;
      align-items:flex-start
  }
  #sales .content-info-body .process__text p{
      width:calc(100% - 38px)
  }
  #sales .content-info-body .process__text .num{
      width:28px;
      height:28px;
      margin-right:10px;
      line-height:28px;
      font-size:2rem;
      border-radius:14px
  }
  #sales .content-info-body .process__text small{
      margin:1em;
      font-size:1.2rem;
      margin-left:-30px
  }
  #sales .content-info-body .info-block{
      margin-top:25px;
      margin-bottom:25px
  }
  #sales .content-info-body .info-block__inner{
      padding:30px 5%;
      background-image:none
  }
  #sales .content-info-body .info-block__list li{
      font-size:1.4rem;
      padding:5%
  }
  #sales .content-info-body .qa .question{
      height:auto;
      padding:25px 5% 15px
  }
  #sales .content-info-body .qa .answer{
      padding:20px 5%
  }
  #sales .content-info-body .qa .answer__content p{
      font-size:1.4rem
  }
  #sales .content-info-body .qa .answer__content small{
      font-size:1.3rem
  }
}

#sales h2 img[src*="info_head_01"] {
    max-width: 364px;
    width: 100%;
}

#sales h2 img[src*="info_head_02"] {
    max-width: 306px;
    width: 100%;
}

.share__list li a img {
    max-width:45px
}

#page {
    background: #d2d1d6;
}

header[role="yokoku"] {
    margin-bottom: 0!important;
}