@charset "utf-8";

/**
 * 共通
 */
@font-face {
    font-family: 'Corporate Logo V3';
    font-style: normal;
    font-weight: 900;
    src: url('/font/Corporate-Logo-Bold-ver3-subset.woff2') format('woff2');
}
:root {
    --base-size: 16;
    --arrow-base-size: 74;
    --mini-arrow-scale-rate: 0.43;
    --color-primary: #D91F0E;
    --color-secondary: #B7190A;
    --color-tertiary: #0EB996;
    --color-tertiary-tint: #26C0A1;
    --color-text: #1D1D1D;
    --color-text-rgb: 0,0,0;
    --color-text-contrast: #FFFFFF;
    --color-light: #FFFFFF;
    --color-light-rgb: 255,255,255;
    --color-dark: #1D1D1D;
    --mv-duration: 3s;
}
@media screen and (min-width:1100px) and (max-width: 1200px) {
    :root { --base-size: 22; }
}
@media screen and (min-width:1000px) and (max-width: 1100px) {
    :root { --base-size: 28; }
}
@media screen and (min-width:900px) and (max-width: 1000px) {
    :root { --base-size: 34; }
}
@media screen and (max-width:900px) {
    :root { --base-size: 40; }
}
@media screen and (max-width:678px) {
    :root { --base-size: 28; }
}
body main {
    font-size: 22px;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
@media screen and (min-width: 687.01px) {
    .sp_only {  display: none; }
}
@media screen and (max-width: 687px) {
    .pc_only {  display: none;  }
}
.bold { font-weight: 700 !important; }
.medium {  font-weight: 500 !important; }
.ft_clv3 {
    font-family: "Corporate Logo V3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
}
.ft_zen {
    font-family: "Zen Old Mincho", sans-serif;
    font-weight: 600;
    font-style: normal;
}
.contents_wrapper {
    max-width: 900px;
    margin: 0 auto;
}
@media screen and (min-width:678px) and (max-width: 900px) {
    .contents_wrapper { max-width: 678px; }
}
@media screen and (max-width:678px) {
    .contents_wrapper { max-width: 329px; }
}
.wbr { word-break: keep-all; }
.arrow_down { position: relative; }
.arrow_down > div {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translate(-50%, 0%);
    width: calc(var(--arrow-base-size) * 4.39px);
    height: calc(var(--arrow-base-size) * 1px);
    background-color: var(--color-secondary);
    border: none;
    clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
    margin: 0 auto;
}

/**
 * メインビジュアル
 */
#mv {
    position: relative;
}
#mv .mv_bg {
    width: 100%;
    height: 100%;
}
#mv .mv_contents {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translate(0, -50%);
    color: var(--color-text-contrast);
}
@media screen and (max-width:678px) {
    #mv .mv_logo {
        width: 241px;
        margin-top: 61px;
    }
}
#mv .mv_txt {
    margin-top: calc((16 / var(--base-size)) * 1rem);
    margin-bottom: calc((45 / var(--base-size)) * 1rem);
}
#mv .mv_txt > div > p {
    font-size: calc((47 / var(--base-size)) * 1rem);
}
#mv .mv_txt > div > p > span {
    font-size: calc((74 / var(--base-size)) * 1rem);
    margin-right: 0.5rem;
}
#mv .mv_cta {
    display: grid;
    grid-template-columns: 270px 320px;
    grid-template-rows: 1fr;
    column-gap: 25px;
    align-items: center;
}
#mv .mv_cta > .contact_btn {
    grid-column: 1;
    grid-row: 1;
    width: 267px;
    height: 62px;
}
#mv .mv_cta > .contact_tel {
    grid-column: 2;
    grid-row: 1;
}
@media screen and (max-width:678px) {
    #mv .mv_cta {
        grid-template-columns: 270px;
        grid-template-rows: 1fr 1fr;
        row-gap: 0px;
    }
    #mv .mv_cta > .contact_tel {
        grid-column: 1;
        grid-row: 2;
    }
}
#mv .contact_tel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: baseline;
    font-size: 12px;
}
#mv .contact_tel > p:nth-of-type(1) {
    grid-column: 1/ span 2;
    grid-row: 1;
    margin-top: 12px;
    font-size: 16px;
}
@media screen and (max-width:678px) {
    #mv .contact_tel {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        transform: translate(0, -15%);
    }
    #mv .contact_tel > p:nth-of-type(1) {
        grid-column: 1;
        font-size: 13px;
    }
}
#mv .contact_tel > p:nth-of-type(2) {
    grid-row: 2;
    font-size: 21px;
}
#mv .contact_tel > p:nth-of-type(3) {
    grid-column: 2;
    grid-row: 2;
}
@media screen and (max-width:678px) {
    #mv .contact_tel > p:nth-of-type(3) {
        grid-column: 1;
        grid-row: 3;
        transform: translate(0, -40%);
    }
}
/* メインビジュアルのアニメーションはPC･タブレットのみ */
@media screen and (min-width:678.01px) {
    #mv .mv_txt > div {
        overflow: hidden;
        transform: translateX(-100%);
    }
    #mv .mv_txt > div > p {
        transform: translateX(100%);
    }
    #mv .mv_logo{
        opacity: 0;
    }
    #mv .mv_cta {
        opacity: 0;
        transform: translateY(50%);
    }
    #mv.visible .mv_txt > div,
    #mv.visible .mv_txt > div > p {
        animation-duration: calc(var(--mv-duration) * 0.30);
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
    }
    #mv.visible .mv_txt > div {
        animation-name: wipe-wrapper;
    }
    #mv.visible .mv_txt > div > p {
        animation-name: wipe-text;
    }
    #mv.visible .mv_txt > div:nth-of-type(2),
    #mv.visible .mv_txt > div:nth-of-type(2) > p{
        animation-delay: calc(var(--mv-duration) * 0.125);
    }
    #mv.visible .mv_txt > div:nth-of-type(3),
    #mv.visible .mv_txt > div:nth-of-type(3) > p {
        animation-delay: calc(var(--mv-duration) * 0.25);
        animation-duration: calc(var(--mv-duration) * 0.20);
    }
    #mv.visible .mv_logo {
        animation-name: fade-in;
        animation-delay: calc(var(--mv-duration) * 0.50);
        animation-duration: calc(var(--mv-duration) * 0.20);
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
    }
    #mv.visible .mv_cta {
        animation-name: fade-up;
        animation-delay: calc(var(--mv-duration) * 0.75);
        animation-duration: calc(var(--mv-duration) * 0.25);
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
    }
    @keyframes wipe-wrapper {
        0% {
            transform: translateX(-100%);
        }
        100% {
            transform: translateX(0%);
        }
    }
    @keyframes wipe-text {
        0% {
            transform: translateX(100%);
        }
        100% {
            transform: translateX(0%);
        }
    }
    @keyframes fade-in {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    @keyframes fade-up {
        0% {
            opacity: 0;
            transform: translateY(50%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
    }
}

/**
 * with Accelia とは
 */
#about {
    background-image: url(/img/withAccelia/about_bg.svg);
    background-size: cover;
    background-position: center;
    height: 500px;
    position: relative;
}
@media screen and (max-width:678px) {
    #about {
        background-image: url(/img/withAccelia/sp_about_bg.svg);
        height: 600px;
    }
}
#about h2 {
    display: flex;
    align-items: center;
    color: var(--color-text-contrast);
    font-size: 44px;
    max-width: 900px;
    position: absolute;
    top: 12%;
    padding-left: 40px;
}
@media screen and (max-width:678px) {
    #about h2 {
        font-size: 33px;
        padding-left: 0px;
    }
}
#about h2 > img {
    height: 67px;
    margin-right: 16px;
}
@media screen and (max-width:678px) {
    #about h2 > img {
        height: 50px;
        margin-right: 0px;
    }
}
#about p {
    color: var(--color-text-contrast);
    max-width: 900px;
    position: absolute;
    top: 42%;
    padding-left: 40px;
    line-height: 2;
    letter-spacing: 0.110rem;
}
@media screen and (min-width:678px) and (max-width: 900px) {
    #about p {
        max-width: 678px;
        font-size: 20px;
    }
}
@media screen and (max-width:678px) {
    #about p {
        max-width: 329px;
        top: 30%;
        font-size: 18px;
        padding-left: 0px;
        letter-spacing: 0.055rem;
    }
}

/**
 * 利用実績
 */
@media screen and (max-width:678px) {
    #utilization-result {
        padding: 46px 0;
    }
}
#utilization-result .contents_wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 107px;
    padding: 34px 34px;
}
@media screen and (max-width:678px) {
    #utilization-result .contents_wrapper {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        row-gap: 28px;
        padding: 0;
    }
}
#utilization-result .contents_wrapper > div {
    margin: 0 auto;
}
#utilization-result .contents_wrapper img {
    max-height: 248px;
}
@media screen and (max-width:678px) {
    #utilization-result .contents_wrapper img {
        max-height: 156px;
    }
}

/**
 * こんな悩みありませんか？
 */
#worry {
    background-image: url(/img/withAccelia/worry_bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 46px 0 30px 0;
}
@media screen and (max-width:678px) {
    #worry {
        background-image: none;
        padding: 45px 0 43px 0;
    }
}
#worry h2 {
    color: #C21D0E;
    font-size: 48px;
    margin: 23px 0 27px 0;
    line-height: 1.5;
}
@media screen and (max-width:678px) {
    #worry h2 {
        font-size: 26px;
        text-align: center;
        margin: 0 0 20px 0;
    }
}
#worry .examples > p {
    font-size: 19px;
    width: 431px;
    padding: 30px 40px;
    background-color: #F2F2F2;
    border-radius: 8px;
    margin: 15px 0;
    line-height: 1.5;
}
@media screen and (max-width:678px) {
    #worry .examples > p {
        font-size: 16px;
        width: 329px;
        padding: 16px 42px;
    }
}
#worry .examples > p > strong {
    color: var(--color-secondary);
}

/**
 * そのお悩み解決します
 */
#solve {
    background-color: var(--color-secondary);
    padding: 47px 0;
}
#solve > .contents_wrapper {
    background-color: var(--color-light);
    border-radius: 8px;
    padding: 29px 0;
}
@media screen and (max-width:678px) {
    #solve > .contents_wrapper {
        padding: 12px 0;
    }
}
#solve p {
    font-size: 31px;
}
@media screen and (max-width:678px) {
    #solve p {
        font-size: 18px;
    }
    #solve p > span:nth-of-type(1) {
        font-size: 22px;
    }
}
#solve p:nth-of-type(1) {
    text-align: center;
}
#solve p:nth-of-type(2) {
    display: flex;
    justify-content: center;
    align-items: baseline;
    position: relative;
}
@media screen and (max-width:678px) {
    #solve p:nth-of-type(2) {
        display: block;
        text-align: center;
    }
}
#solve img {
    height: 62px;
    margin-right: 21px;
    transform: translate(0, 17%);
}
@media screen and (max-width:678px) {
    #solve img {
        height: 42px;
        display: inline-block;
        margin-right: 8px;
        vertical-align: baseline;
    }
}
#solve p > span:nth-of-type(2) {
    font-size: 62px;
    margin: 0 15px;
}
@media screen and (max-width:678px) {
    #solve p > span:nth-of-type(2) {
        font-size: 30px;
        margin: 0;
    }
}

/**
 * 選ばれる理由
 */
#reason {
    padding: calc(var(--arrow-base-size) * 1px + 23px) 0 182px 0;
}
@media screen and (max-width:678px) {
    #reason {
        padding: calc(var(--arrow-base-size) * 1px + 40px) 0 45px 0;
    }
}
#reason h2 {
    display: flex;
    justify-content: center;
    align-items: baseline;
    color: var(--color-primary);
    line-height: 1.5;
}
@media screen and (max-width:678px) {
    #reason h2 {
        display: block;
        text-align: center;
        line-height: 1;
    }
}
#reason h2 > img {
    height: 60px;
    margin-right: 9px;
    transform: translate(0, 17%);
}
@media screen and (max-width:678px) {
    #reason h2 > img {
        height: 42px;
        display: inline-block;
        vertical-align: baseline;
    }
}
#reason h2 > .large {
    font-size: 69px;
    margin-left: 11px;
    letter-spacing: 5px;
}
@media screen and (max-width:678px) {
    #reason h2 > .large {
        font-size: 47px;
    }
}
#reason h2 > .large > span {
    font-size: 100px;
}
@media screen and (max-width:678px) {
    #reason h2 > .large > span {
        font-size: 68px;
    }
}
@media screen and (max-width:678px) {
    #reason h2 > .small {
        font-size: 15px;
    }
}
#reason .point {
    display: grid;
    grid-template-columns: 391px auto 391px;
    grid-template-rows: 1fr 1fr 1fr;
    column-gap: 42px;
    row-gap: 64px;
    align-items: center;
    margin-top: 84px;
}
@media screen and (min-width:678px) and (max-width: 900px) {
    #reason .point {
        grid-template-columns: 318px auto 318px;
        column-gap: 21px;
    }
}
@media screen and (max-width:678px) {
    #reason .point {
        margin-top: 36px;
        grid-template-columns: 1fr;
        grid-template-rows: 230px 1fr 230px 1fr 230px auto;
        column-gap: 0px;
        row-gap: 2px;
    }
}
#reason .point h3 {
    font-size: 33px;
    margin-bottom: 5px;
}
@media screen and (max-width:678px) {
    #reason .point h3 {
        font-size: 26px;
    }
}
#reason .point h3 > span {
    color: var(--color-primary);
}
#reason .point p {
    font-size: 20px;
}
#reason .point > img {
    width: 100%;
    border-radius: 8px;
}
@media screen and (max-width:678px) {
    #reason .point > img {
        width: auto;
        height: 100%;
        object-fit: cover;
    }
}
#reason .point > img:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
}
#reason .point > div:nth-of-type(1) {
    grid-column: 2 / span 2;
    grid-row: 1;
}
#reason .point > img:nth-of-type(2) {
    grid-column: 3;
    grid-row: 2;
}
#reason .point > div:nth-of-type(2) {
    grid-column: 1 / span 2;
    grid-row: 2;
}
#reason .point > img:nth-of-type(3) {
    grid-column: 1;
    grid-row: 3;
}
#reason .point > div:nth-of-type(3) {
    grid-column: 2 / span 2;
    grid-row: 3;
}
@media screen and (max-width:678px) {
    #reason .point > div:nth-of-type(1) {
        grid-column: 1;
        grid-row: 2;
        margin-bottom: 52px;
    }
    #reason .point > img:nth-of-type(2) {
        grid-column: 1;
        grid-row: 3;
    }
    #reason .point > div:nth-of-type(2) {
        grid-column: 1;
        grid-row: 4;
        margin-bottom: 52px;
    }
    #reason .point > img:nth-of-type(3) {
        grid-column: 1;
        grid-row: 5;
    }
    #reason .point > div:nth-of-type(3) {
        grid-column: 1;
        grid-row: 6;
    }
}

/**
 * お手伝いをさせていただきます
 */
#help-you {
    position: relative;
    background-color: var(--color-secondary);
    padding: 51px 0;
}
@media screen and (max-width:678px) {
    #help-you {
        padding: 23px 0;
    }
}
#help-you p {
    color: var(--color-text-contrast);
    text-align: center;
    font-size: 23px;
    line-height: 1.8;
    letter-spacing: 0.118rem;
}
@media screen and (max-width:678px) {
    #help-you p {
        font-size: 17px;
        line-height: 1.5;
    }
}

/**
 * 提供サービス概要
 */
#service {
    background-image: url(/img/withAccelia/service_bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
@media screen and (max-width:678px) {
    #service {
        background-image: url(/img/withAccelia/sp_service_bg.webp);
    }
}
#service .contents_wrapper {
    padding: calc(var(--arrow-base-size) * 1px + 77px) 0 calc(var(--arrow-base-size) * var(--mini-arrow-scale-rate) * 1px + 50px) 0;
}
@media screen and (max-width:678px) {
    #service .contents_wrapper {
        padding: calc(var(--arrow-base-size) * 1px + 51px) 0 calc(var(--arrow-base-size) * var(--mini-arrow-scale-rate) * 1px + 25px) 0;
    }
}
#service .contents_wrapper > h2 {
    display: flex;
    justify-content: center;
    align-items: baseline;
    color: var(--color-text-contrast);
    font-size: 46px;
}
@media screen and (max-width:678px) {
    #service .contents_wrapper > h2 {
        display: block;
        text-align: center;
        font-size: 28px;
    }
}
#service .contents_wrapper > h2 > img {
    height: 70px;
    transform: translate(0, 21%);
}
@media screen and (max-width:678px) {
    #service .contents_wrapper > h2 > img {
        height: 37px;
        margin: 0 auto 4px auto;
        transform: none;
    }
}
#service .contents_wrapper > h2 + p {
    color: var(--color-text-contrast);
    text-align: center;
    margin: 47px 0;
    line-height: 1.8;
}
@media screen and (max-width:678px) {
    #service .contents_wrapper > h2 + p {
        margin: 38px 0;
        line-height: 1.8;
        font-size: 17px;
    }
}
#service .startUp_support,
#service .oem {
    background-color: #d9d9d9;
    border-radius: 16px;
    text-align: center;
    box-shadow: 9px 8px 6px rgba(var(--color-text-rgb), 0.16);
}

#service .startUp_support > h3,
#service .oem > h3 {
    background-color: var(--color-secondary);
    color: var(--color-text-contrast);
    border-radius: 16px 16px 0 0;
    font-size: 20px;
}
@media screen and (max-width:678px) {
    #service .startUp_support > h3 {
        font-size: 16px;
    }
}
#service .startUp_support > h3 {
    line-height: 112px;
}
#service .oem > h3 {
    line-height: 68px;
}
#service .oem > h4 {
    line-height: 44px;
}
#service .oem > h4 {
    background-color: #F2D4D2;
    color: var(--color-secondary);
    font-size: 18px;
}
#service .startUp_support > div,
#service .oem > div {
    background-color: var(--color-light);
    font-size: 14px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    padding: 0 14px;
}
#service .startUp_support > div:nth-of-type(5),
#service .oem > div:nth-of-type(2) {
    border-radius: 0 0 0 16px;
}
#service .startUp_support > div:nth-of-type(8),
#service .oem > div:nth-of-type(6) {
    border-radius: 0 0 16px 0;
}
@media screen and (max-width:678px) {
    #service .startUp_support > div:nth-of-type(5),
    #service .oem > div:nth-of-type(2) {
        border-radius: 0;
    }
    #service .startUp_support > div:nth-of-type(7),
    #service .oem > div:nth-of-type(5) {
        border-radius: 0 0 0 16px;
    }
}
#service .note_mark {
    font-size: 7px;
    vertical-align: text-top;
}
#service .notes {
    color: var(--color-text-contrast);
    font-size: 14px;
    margin: 17px 0 48px 0;
    display: flex;
}
@media screen and (max-width:678px) {
    #service .notes {
        font-size: 11px;
    }
}
#service .notes p:nth-of-type(2) {
    white-space: nowrap;
    margin-left: 11px;
}
@-moz-document url-prefix() {
    #service .notes p:nth-of-type(2) {
        white-space: normal;
    }
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #service .notes p:nth-of-type(2) {
        white-space: normal;
    }
}
_::-webkit-full-page-media, _:future, :root #service .notes p:nth-of-type(2) {
    white-space: normal;
}
#service .startUp_support,
#service .oem {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 68px 44px 112px 112px;
    gap: 1px;
}
#service .startUp_support > h3 {
    grid-column: 1 / span 4;
    grid-row: 1 / span 2;
}
#service .oem > h3 {
    grid-column: 1 / span 4;
    grid-row: 1;
}
#service .oem > h4:nth-of-type(1) {
    grid-column: 1 / span 2;
    grid-row: 2;
}
#service .oem > h4:nth-of-type(2) {
    grid-column: 3 / span 2;
    grid-row: 2;
}
#service .oem > h4:nth-of-type(1) + div {
    grid-column: 1 / span 2;
    grid-row: 3;
}
#service .oem > h4:nth-of-type(2) + div {
    grid-column: 3 / span 2;
    grid-row: 3;
}
@media screen and (max-width:678px) {
    #service .startUp_support {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 112px 112px 112px 112px 112px;
        gap: 1px;
    }
    #service .startUp_support > h3 {
        grid-column: 1 / span 2;
        grid-row: 1;
    }
    #service .oem {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 68px 44px 112px 112px 44px 112px 112px;
        gap: 1px;
    }
    #service .oem > h3 {
        grid-column: 1 / span 2;
        grid-row: 1;
    }
    #service .oem > h4:nth-of-type(1) {
        grid-column: 1 / span 2;
        grid-row: 2;
    }
    #service .oem > h4:nth-of-type(1) + div {
        grid-column: 1 / span 2;
        grid-row: 3;
    }
    #service .oem > h4:nth-of-type(2) {
        grid-column: 1 / span 2;
        grid-row: 5;
    }
    #service .oem > h4:nth-of-type(2) + div {
        grid-column: 1 / span 2;
        grid-row: 6;
    }
}

/**
 * サービス開始まで
 */
#example {
    background-color: var(--color-light);
    padding: 75px 29px;
    border-radius: 8px;
    margin: 90px 0 64px 0;
    box-shadow: 9px 8px 6px rgba(var(--color-text-rgb), 0.16);
}
@media screen and (max-width:678px) {
    #example {
        padding: 59px 0 79px 0;
        background-color: #EFEFEF;
        border-radius: 0px;
        margin: 0;
        box-shadow: none;
    }
    #example > div {
        max-width: 329px;
        margin: 0 auto;
    }
}
#example h2 {
    font-size: 30px;
    padding: 17px 0;
    text-align: center;
    background-color: var(--color-dark);
    color: var(--color-text-contrast);
    border-radius: 8px;
    margin-bottom: 41px;
}
@media screen and (max-width:678px) {
    #example h2 {
        font-size: 18px;
        padding: 7px 0;
        max-width: 308px;
        margin: 0 auto 12px auto;
    }
}
#example h2 + p {
    font-size: 24px;
    margin-bottom: 29px;
    text-align: center;
}
@media screen and (max-width:678px) {
    #example h2 + p {
        font-size: 13px;
        margin-bottom: 27px;
        text-align: center;
    }
}
#example img:nth-of-type(1) {
    margin-bottom: 26px;
}
@media screen and (max-width:678px) {
    #example img:nth-of-type(2) {
        margin-bottom: 31px;
    }
}
#service .message > p {
    font-size: 65px;
    color: var(--color-text-contrast);
    text-shadow: 4px 8px 6px rgba(var(--color-text-rgb), 0.40);
    margin-bottom: 64px;
    text-align: center;
}
@media screen and (max-width:678px) {
    #service .message > p {
        font-size: 32px;
        margin: 21px 0;
    }
}
#service .message .arrow_down > div {
    background-color: var(--color-primary);
    width: calc(var(--arrow-base-size) * var(--mini-arrow-scale-rate) * 4.39px);
    height: calc(var(--arrow-base-size) * var(--mini-arrow-scale-rate) * 1px);
}

/**
 * サービス開始まで
 */
#faq {
    padding: 122px 0 167px 0;
}
@media screen and (max-width:678px) {
    #faq {
        padding: 46px 0 40px 0;
    }
}
#faq img:has(+ h2) {
    height: 46px;
    margin: 0 auto;
}
@media screen and (max-width:678px) {
    #faq img:has(+ h2) {
        height: 34px;
    }
}
#faq h2 {
    font-size: 50px;
    text-align: center;
    margin-bottom: 47px;
}
@media screen and (max-width:678px) {
    #faq h2 {
        font-size: 28px;
        margin-bottom: 50px;
    }
}
#faq .faqs > div {
    margin-bottom: 87px;
}
#faq .faqs > div > div {
    display: flex;
    align-items: center;
}
#faq .faqs > div > div:first-of-type {
    margin-bottom: 37px;
}
@media screen and (max-width:678px) {
    #faq .faqs > div {
        margin-bottom: 35px;
    }
    #faq .faqs > div > div {
        align-items: start;
    }
    #faq .faqs > div > div:first-of-type {
        margin-bottom: 18px;
    }
}
#faq .faqs > div:last-child {
    margin-bottom: 0;
}
#faq .q_icon,
#faq .a_icon {
    width: 76px;
    min-width: 76px;
    height: 76px;
    min-height: 76px;
    font-size: 35px;
    border-radius: 8px;
    text-align: center;
    padding-top: 8px;
    margin-right: 30px;
}
@media screen and (max-width:678px) {
    #faq .q_icon,
    #faq .a_icon {
        width: 30px;
        min-width: 30px;
        height: 30px;
        min-height: 30px;
        font-size: 13px;
        padding-top: 4px;
        margin-right: 11px;
        transform: translate(0, -6%);
    }
}
#faq .q_icon {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
    border-width: 1px;
}
#faq .a_icon {
    color: var(--color-text-contrast);
    background-color: var(--color-secondary);
}
#faq .q_text,
#faq .a_text {
    line-height: 1.8;
    max-width: 794px;
}
@media screen and (max-width:678px) {
    #faq .q_text,
    #faq .a_text {
        font-size: 15px;
        line-height: 1.6;
    }
    #faq .q_text.wbr,
    #faq .a_text.wbr {
        word-break: normal !important;
    }
}

/**
 * Last CTA
 */
#last_cta {
    background-image: url(/img/withAccelia/last_cta_bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 78px 0 56px 0;
}
@media screen and (max-width:678px) {
    #last_cta {
        background-image: url(/img/withAccelia/sp_last_cta_bg.webp);
        padding: 78px 0 82px 0;
    }
}
#last_cta .last_cta_contents {
    background-color: rgba(var(--color-light-rgb), 0.86);
    padding: 69px 0 36px 0;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 77px;
}
@media screen and (max-width:678px) {
    #last_cta .last_cta_contents {
        padding: 31px 18px;
        margin-bottom: 74px;
    }
}
#last_cta .contact_btn {
    margin: 22px auto;
    width: 404px;
    height: 64px;
    font-size: 20px;
}
@media screen and (max-width:678px) {
    #last_cta .contact_btn {
        margin: 18px auto;
        width: 287px;
        height: 51px;
        font-size: 15px;
    }
}
#last_cta .last_cta_contents > p:nth-of-type(1) {
    font-size: 33px;
}
#last_cta .last_cta_contents > p:nth-of-type(2) {
    font-size: 36px;
}
#last_cta .last_cta_contents > p:nth-of-type(3) {
    font-size: 18px;
    transform: translate(6%, -30%);
}
@media screen and (max-width:678px) {
    #last_cta .last_cta_contents > p:nth-of-type(1) {
        font-size: 16px;
    }
    #last_cta .last_cta_contents > p:nth-of-type(2) {
        font-size: 20px;
    }
    #last_cta .last_cta_contents > p:nth-of-type(3) {
        font-size: 12px;
        transform: translate(0%, -30%);
    }
}
#last_cta img {
    margin: 0 auto;
    height: 68px;
}
@media screen and (max-width:678px) {
    #last_cta img {
        height: 56px;
    }
}

/**
 * Element
 */
/* cta */
.cta {
    background-image: url(/img/withAccelia/cta_bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 48px 0;
}
.cta > .contents_wrapper {
    background-color: rgba(var(--color-light-rgb), 0.81);
    padding: 28px 54px;
    border-radius: 8px;
}
@media screen and (max-width:678px) {
    .cta > .contents_wrapper {
        padding: 22px;
    }
}
.cta .contact_here {
    text-align: center;
    margin-bottom: 13px;
    font-size: 20px;
}
@media screen and (max-width:678px) {
    .cta .contact_here {
        font-size: 14px;
    }
}
.cta .contact_here img {
    display: inline-block;
    vertical-align: bottom;
    height: 35px;
    margin-right: 4px;
}
@media screen and (max-width:678px) {
    .cta .contact_here img {
        height: 24px;
    }
}
.cta .contact {
    display: grid;
    align-items: center;
    grid-template-columns: auto 287px 240px auto;
    column-gap: 23px;
}
@media screen and (max-width:678px) {
    .cta .contact {
        grid-template-columns: 287px;
        grid-template-rows: 1fr 1fr;
    }
}
.cta .contact .contact_btn {
    grid-column: 2;
}
@media screen and (max-width:678px) {
    .cta .contact .contact_btn {
        grid-column: 1;
    }
    .cta .contact_tel {
        grid-row: 2;
        text-align: center;
    }
}
.cta .contact_tel p {
    font-size: 14px;
}
.cta .contact_tel > .tel {
    grid-column: 3;
    font-size: 27px;
}

/* contact_btn */
.contact_btn {
    width: 287px;
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px;
    border-radius: 32px;
    background: var(--color-tertiary);
    color: var(--color-light);
    box-shadow: 4px 4px 6px rgba(var(--color-text-rgb), 0.16);
    font-size: 15px;
}
.contact_btn:hover {
    background: var(--color-tertiary-tint);
}

/* その他 */
#colophon { border-top-width: 0px; }