@charset 'utf-8';
/* service
------------------------------------------------ */
.page-headline{ background-image: url(img/visual.jpg); }
.service-container{ padding-top: 65px; }
.service-tab--head{ border-bottom: 1px solid #B1B1B1; }
.service-tab--head ul{ width: 100%; max-width: 668px; margin: 0 auto; display: flex; flex-wrap: wrap; }
.service-tab--head li{ position: relative; cursor: pointer; color:#777777; font-size: 1.8rem; font-weight: bold; letter-spacing: 0.072em; line-height: calc(27 / 18); }
.service-tab--head li.on{ color:#32A0EF; }
.service-tab--head li:before{ transform: width .5s ease-in-out; content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background-color: transparent; }
.service-tab--head li.on:before{ width: 100%; background-color: #32A0EF; }
.service-tab--head li+li{ margin-left: 100px; }
.service-tab--head li a{ display: block; padding-bottom: 11px; }
.service-tab--head li a:hover{ text-decoration: none; }

@media only screen and (max-width: 768px) {
    .service-container{ padding-top: 44px; }
    .service-tab--head{ padding: 0 8px; }
    .service-tab--head ul{ justify-content: space-between; }
    .service-tab--head li{  font-size: 1.5rem; }
    .service-tab--head li a{ padding-bottom: 8px; }
    .service-tab--head li+li{ margin: 0; }

    [data-lang="en"] .service-tab--head li:first-child{ width: calc(100% - 40px); }
    [data-lang="en"] .service-tab--head li+li{ width: 40px; }
    /* [data-lang="en"] .service-tab--head li+li a{ padding-top: 23px; } */
}

@media only screen and (max-width: 320px) {
    .service-tab--head li{ font-size: 1.3rem; }
}


/* service content
------------------------------------------------ */
.service-tab--content{ display: none; padding-top: 80px; width: 100%; max-width: 900px; margin: 0 auto; }
.service-tab--content.on{ display: block; }
.service-tab--content h2{ margin-bottom: 30px; padding:16px 0 16px 17px; font-size: 2.2rem; font-weight: bold; letter-spacing: 0.072em; line-height: calc(27 / 22); border-left:6px solid #32A0EF; border-bottom:1px solid #32A0EF; }
.service-tab--content h3{ margin-bottom: 25px; font-size: 1.8rem; font-weight: bold; letter-spacing: 0.072em; line-height: calc(27 / 22); }
.service-tab--content p,
.service-tab--content ul:not(.service-step--list),
.service-tab--content ol:not(.service-step--list){ font-size: 1.6rem; font-weight: 400; letter-spacing: 0.072em; line-height: calc(30 / 16); }
.service-tab--content ul:not(.service-step--list){ padding-left: 40px; list-style: disc; }
.service-tab--content ul:not(.service-step--list) li+li{ margin-top: 10px; }
.service--block+.service--block{ margin-top: 95px; }
.service-step--list{ display: flex; flex-wrap: wrap; }
.service-step--list li{ width: 100px; letter-spacing: 0.072em; }
.service-step--list li:not(:last-child){ width: 160px; padding-right: 60px; background: url(../img/share/arrow1.png) no-repeat calc(100% - 23px) 42px / 12px auto; }
.serviec-step--head{ padding-top: 30px; display: flex; flex-wrap: wrap; align-items: center; flex-direction: column; width: 100px; height: 100px; border-radius: 50%; background-color: #BCDCFF; text-align: center; }
.serviec-step--head .step{ font-size: 1.2rem; font-weight: 400; color:#fff; line-height: 1; }
.serviec-step--head .title{ margin-top: 9px; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.072em; line-height: 1; }
.service-step--list .txt{ display: table; margin: 15px auto 0; font-size: 1.3rem; font-weight: 400; }

@media only screen and (min-width: 769px)  {
    .service-step--list{ margin-top: -20px; }
    .service-step--list li{ margin-top: 20px; }
    .service--block.sub-b{ margin-top: 40px !important; }
}

@media only screen and (max-width: 768px)  {
    .page-headline{ background-image: url(img/visual-sp.jpg); }
    .service-tab--content{ padding-top: 40px; }
    .service-tab--content h2{ margin-bottom: 25px; padding: 8px 0 8px 10px; font-size: 1.5rem; border-left-width: 5px; }
    .service-tab--content h3{ font-size: 1.4rem; margin-bottom: 20px; }
    .service-tab--content p, 
    .service-tab--content ul:not(.service-step--list), 
    .service-tab--content ol:not(.service-step--list){ font-size: 1.4rem; }
    .service-tab--content ul:not(.service-step--list){ padding-left: 20px; }
    .service--block+.service--block{ margin-top: 55px; }
    .service--block.sub-b{ margin-top: 25px !important; }
    .service--block:nth-child(2){ margin-top: 65px; }
    .service-step--list{ max-width: 325px; margin: 0 auto; justify-content: space-between; }
    .service-step--list li{ width: calc(50% - 5px); padding-right: 16%; }
    .service-step--list li:not(:last-child){ width: calc(50% - 5px); padding-right: 16%; background: url(../img/share/arrow1.png) no-repeat 131px 44px / 13px auto; }
    .service-step--list li:not(:nth-child(-n+2)){ margin-top: 25px; }
    .serviec-step--head{ width: 105px; height: 105px; }
    .serviec-step--head .step{ font-size: 1.3rem; }
    .service-step--list .txt{ font-size: 1.4rem; line-height: calc(42 / 28); }
}

@media only screen and (max-width: 320px) {
    .service-step--list li:not(:last-child),
    .service-step--list li{
        padding-right: 24px;
        background-position: 116px 44px;
    }
}