/* ヘッダー */
.header__bg {
    display: flex;
    justify-content: center;
    background-color: white;
    padding: 8px 16px;
}
.header__cta-button {
    background-color: var(--color-main);
    color: white;
    font-size: var(--font-size-md);
    font-weight: 700;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    text-decoration: none;
}
.header__cta-button:hover {
    opacity: 0.8;
}
/* ヘッダー-end */


/* FV */
.fv__bg {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--color-secondary);
    overflow: hidden;
    width: 100%; /* 親要素の幅を画面幅に設定 */
    height: auto;
}
.fv__h1-text {
    text-align: center;
    color: white;
    font-weight: 700;
    font-size: 36px;
    letter-spacing: 0.1em;
    margin: 56px 16px 0 56px;
    white-space: nowrap;
}
.fv__button-wrapper {
    display: flex;
    gap: 8px;
}
.fv__appstore-logo-img {
    height: 50px;
    margin-top: 32px;
}
.fv__appstore-logo-img:hover {
    opacity: 0.8;
}
.fv__capture-img {
    width: 800px;
    min-width: 600px;
    height: auto; /* アスペクト比を維持 */
    margin-top: 32px;
}
/* 768px以上の時 */
@media (min-width: 768px) {
    .fv__button-wrapper {
        display: flex;
        gap: 16px;
    }
    .fv__h1-text {
        font-size: 56px;
        margin: 72px 16px 0 56px;
    }
    .fv__appstore-logo-img {
        height: 73px;
        margin-top: 42px;
    }
    .fv__capture-img {
        width: 1000px;
        min-width: 800px;
        margin-top: 48px;
    }
}
/* FV-end */



/* 一元管理 */
.description__container {
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 0;
}
.description__h2-text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px;
}
.description__h2-subeteno {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-main);
    text-align: center;
}
.description__h2-ichigen {
    font-size: 40px;
    font-weight: 700;
    color: var(--color-main);
    text-align: center;
    letter-spacing: 0.1em;
}
.description__image-wrapper {
    display: flex;
    margin: 0 16px;
    flex-wrap: nowrap; 
}
.description__image {
    width: calc(100% / 3);
    max-width: 160px;
}
/* SPではQRを表示しない */
@media (max-width: 768px) {
    .foot-cta__qr {
        display: none;
    }
}
/* 一元管理-end */



/* 機能紹介 */
.function__bg {
    display: flex;
    flex-direction: column;
    background-color: var(--color-secondary);
    padding: 48px 16px;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.function__h2 {
    font-size: 32px;
    font-weight: 700px;
    text-align: center;
    color: white;
    margin-bottom: 48px;
}
.fuction__item-wrapper {
    justify-content: center;
    text-align: center;
    display: flex;
    flex-direction: column;
}
@media (min-width: 1280px) {
    .fuction__item-wrapper {
        display: flex;
        flex-direction: row;
        gap: 0px;
    }
}
.function__item-bg {
    background-color: white;
    border-radius: 16px;
    padding: 32px 16px 8px 16px;
    margin: 0 8px 16px 8px;
    justify-content: center;
    text-align: center;
    max-width: 450px;
}
.function__english-label {
    display: inline-block;
    padding: 3px 16px;
    background-color: var(--color-secondary);
    color: white;
    border-radius: 300px;
    text-align: center;
    font-weight: 700;
}
.function__h3-text {
    font-size: 24px;
    color: var(--color-main);
    font-weight: 700;
    text-align: center;
    margin-top: 8px;
}
.function__description-text {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-normal-black);
    margin: 16px 0;
}


/* よくある質問 */
.faq__container {
    padding: 48px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.faq__h2 {
    font-size: 32px;
    font-weight: 700px;
    text-align: center;
    color: var(--color-normal-black);
    margin-bottom: 48px;
}
.faq__item-container {
    background-color: var(--color-bg-gray);
    border-radius: 16px;
    padding: 16px 24px 24px 24px;
    margin: 0 8px 16px 8px;
    justify-content: center;
    text-align: center;
    max-width: 450px;
}
.faq__question-wrapper {
    display: flex;
    vertical-align: middle;
}
.faq__q-text {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 32px;
    height: 32px;
    font-size: 18px;
    background-color: var(--color-main);
    color: white;
    border-radius: 300px;
}
.faq__question-text {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    vertical-align: middle;
    margin-left: 8px;
}
.faq__hr-line {
    background-color: #D9D9D9;
    height: 1px;
    margin: 8px 0;
    border: none;
}
.faq__answer-text {
    text-align: start;
    font-size: 16px;
}
/* よくある質問-end */



/* 下部CTA */
.foot-cta__bg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--color-secondary);
    padding: 48px 0 0 0;
    overflow: hidden;
}
.foot-cta__h2 {
    font-size: 24px;
    font-weight: 700;
    color: white;
    text-align: center;
}
.foot-cta__techo {
    font-size: 36px;
}
.foot-cta__p {
    color: white;
    text-align: center;
    margin-top: 16px;
}
.foot-cta__appstore-logo-img {
    width: 160px;
    margin-top: 32px;
}
.foot-cta__appstore-logo-img:hover {
    opacity: 0.8;
}
.foot-cta__qr {
    max-width: 150px;
    margin-top: 16px;
}
.foot-cta__preview-img {
    margin-top: 32px;
    max-width: 300px;
}
/* SPではQRを表示しない */
@media (max-width: 768px) {
    .foot-cta__qr {
        display: none;
    }
}

/* 下部CTA-end */

.logo__logo {
    width: 140px;
}
.logo__hr-line {
    background-color: #D9D9D9;
    height: 2px;
    width: 80px;
    margin: 24px 0 16px 0;
    border: none;
}