@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap');
/*
------------------------------
(C)LecoS master Style CSS ver.1.0
------------------------------
*/

:root {
    /* primary */
    --color-primary-900: #552307;
    --color-primary-800: #6F2D07;
    --color-primary-700: #883709;
    --color-primary-600: #A1420B;
    --color-primary-500: #BA4C0D;
    --color-primary-400: #C8703E;
    --color-primary-300: #D69570;
    --color-primary-200: #E4B9A0;
    --color-primary-100: #F1DBCE;
    --color-primary-50: #FFF2EA;

    /* green */
    --color-secondary-900: #23330D;
    --color-secondary-800: #334A14;
    --color-secondary-700: #3E5B19;
    --color-secondary-600: #4A6C1D;
    --color-secondary-500: #557C22;
    --color-secondary-400: #77A22E;
    --color-secondary-300: #93B756;
    --color-secondary-100: #C4D9A7;
    --color-secondary-50: #ECFBD7;

    /* gray */
    --color-gray-900: #374151;
    --color-gray-800: #535B69;
    --color-gray-700: #666D7A;
    --color-gray-600: #797F8A;
    --color-gray-500: #8D929B;
    --color-gray-400: #9FA4AB;
    --color-gray-300: #B3B6BC;
    --color-gray-200: #C6C9CD;
    --color-gray-100: #D9DBDD;
    --color-gray-50: #F5F5F5;

    /* white */
    --color-white-transparent: rgba(255, 255, 255, 0);

    /* black */
    --color-black: #111827;

    /* 背景色の設定 */
    --color-bg-primary: var(--color-primary-50);
    --color-bg-secondary: var(--color-secondary-50);
    --color-bg-gray: var(--color-gray-50);

    /* テキストリンク色の設定 */
    --color-text-base: var(--color-gray-900);
    --color-text-link: var(--color-primary-500);

    /* フォントの設定 */
    --font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    --font-family-en: 'Roboto', 'Helvetica Neue', Arial, 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    --font-family-num: 'Montserrat', 'Helvetica Neue', Arial, 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}

html {
    scroll-padding-top: var(--height-header);
}

h1.c-head,
h2.c-head,
h3.c-head,
h4.c-head,
h5.c-head {
    color: var(--color-black);
    z-index: 1;
}

.c-head .c-head-sub {
    font-size: var(--font-size-l);
    display: block;
    position: relative;
}

h3.c-head.p-head-min {
    font-size: var(--font-size-xl);
}

h4.c-head.p-head-min {
    font-size: var(--font-size-l);
}

h5.c-head.p-head-min {
    font-size: var(--font-size-m);
}

.c-head .c-head-sub {
    color: var(--color-primary-500);
}


/* パンくずリスト */
.c-bcrumb {
    margin: var(--size-02) 0 0;
    overflow-x: visible;
}

.c-bcrumb ul {
    display: inline;
    overflow-x: visible;
}

.c-bcrumb ul li {
    display: inline;
    vertical-align: middle;
}

.c-header>.c-contents {
    width: 100%;
}

.c-header .c-header-item>button,
.c-header .c-header-item>a {
    padding: 0 var(--size-01);
}

.c-header .c-header-nav .c-btn {
    margin-left: var(--size-01);
    max-width: var(--size-20);
}

.c-header .c-header-nav-sp .c-btn {
    max-width: 50rem;
    margin: var(--size-04) auto 0;
}

/* ヘッダー */
header {
    height: var(--height-header);
}

.c-header {
    box-shadow: 0 1px var(--size-015) rgba(100, 100, 100, 0.1);
}


/* 背景 */
.p-bg-secondary-500 {
    background-color: var(--color-secondary-500) !important;
}

.p-bg-secondary-50 {
    background-color: var(--color-secondary-50) !important;
}

.p-bg-grad {
    background-image: linear-gradient(90deg, var(--color-primary-50), var(--color-secondary-50));
}

/* サイズ調整 */
.p-size-fit {
    width: fit-content !important;
}

.p-cnt-min {
    max-width: 100rem;
    margin: 0 auto;
}


/* 見出し */
.p-head-uline,
.p-head-sline {
    position: relative;
}

.p-head-uline::after,
.p-head-sline::after {
    content: "";
    display: block;
    position: absolute;
    background-color: var(--color-primary-500);
}

.p-head-uline {
    padding-bottom: var(--size-01);
    border-bottom: 2px solid var(--color-gray-100);
}

.p-head-uline::after {
    width: var(--size-12);
    height: 2px;
    top: 100%;
}

.p-head-sline {
    margin-left: 0.8em;
}

.p-head-sline::after {
    width: var(--size-005);
    height: 95%;
    left: -0.8em;
    top: 2.5%;
}

/* frame */
.p-frame-img {
    border: 1px solid var(--color-gray-100);
}

.p-frame-inner {
    padding: var(--size-02) var(--size-04);
}

.p-frama-rounded {
    border-radius: var(--size-005);
}

/* dl */
.p-dl-inline {
    display: flex;
    width: fit-content;
}

.p-dl-inline .p-dl-bloc-sp {
    display: block;
}

.p-dt-colon {
    flex-shrink: 0;
}

.p-dt-colon::after {
    content: ":";
    margin: 0 var(--size-005);
    flex-grow: 1;
}

.p-dd-colon {
    flex-grow: 1;
}

.p-dl-space>* {
    margin-bottom: var(--size-02);
}

.p-dl-space>*:last-child {
    margin-bottom: 0;
}

.c-list dl ul,
.c-list dl ol {
    margin-left: var(--size-01);
}

.c-list.u-list-space dl ul,
.c-list.u-list-space dl ol {
    margin-top: var(--size-02);
}

/* link */
.p-link-wb {
    word-break: break-all;
}

/* btn */
.c-btn.p-btn-login {
    position: relative;
    padding-right: var(--size-04);
}

.c-btn.p-btn-login::before {
    content: "";
    mask-image: url(/common/assets/img/login.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    -webkit-mask-image: url(/common/assets/img/login.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    position: absolute;
    right: var(--size-04);
    top: 50%;
    transform: translateY(-50%);
    width: 1.8rem;
    height: 1.8rem;
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s ease;
}

@media (any-hover: hover) {
    .p-no-hover:hover::before {
        transform: translate(0, -50%) !important;
    }

    .c-btn.p-btn-login:hover::before {
        transform: translate(var(--size-005), -50%);
    }

}

/* flex */
.p-fl-sb {
    justify-content: space-between;
}

.p-fl-ai-center {
    align-items: center;
}

.p-fl-jc-center {
    justify-content: center;
}

.p-fl-sh {
    flex: 1;
}

/* reset */
address {
    font-style: normal;
}

/* scroll-fade */
.p-scroll-nav {
    text-align: left;
}

@media (min-width: 769px) {
    #p-scrollspy {
        height: 300vh;
        position: relative;
    }

    .p-scrollspy-sticky {
        position: sticky;
        top: calc(50vh - 250px);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .p-scroll-nav {
        position: relative;
        padding-left: 2em;
        cursor: pointer;
    }

    .p-scroll-nav h3,
    .p-scroll-nav p {
        color: var(--color-gray-300);
        transition: color .4s ease;
    }

    .p-scroll-nav.is-active h3 {
        color: var(--color-primary-500);
    }

    .p-scroll-nav.is-active p {
        color: var(--color-text-base);
    }

    .p-scroll-nav::before {
        content: "";
        position: absolute;
        background-color: var(--color-primary-500);
        width: var(--size-005);
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0;
        transform: scaleY(0);
        transform-origin: top;
        transition: opacity .4s ease, transform .4s ease;
    }

    .p-scroll-nav.is-active::before {
        opacity: 1;
        transform: scaleY(1);
    }

    .p-crossfade-wrapper {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        max-width: 400px;
        margin: 0 auto;
    }

    .p-fade-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        visibility: hidden;
        transition: opacity .6s ease-out, visibility .6s ease-out;
    }

    .p-fade-img.is-active {
        opacity: 1;
        visibility: visible;
    }

    .p-fade-img img {
        object-fit: cover;
        border-radius: var(--size-005);
    }
}

/* #mv */
#sec-mv h1.c-head {
    position: relative;
    min-height: var(--size-12);
    justify-content: center;
}

.p-mv-bg {
    background-image: linear-gradient(135deg, var(--color-primary-50), var(--color-secondary-50));
    position: relative;
}

.p-mv-parts {
    position: absolute;
}

.p-mv-parts:nth-of-type(1) {
    top: 0;
    right: 1rem;
    width: clamp(var(--size-08), 1.39vw + 5.33rem, var(--size-10));
}

.p-mv-parts:nth-of-type(2) {
    top: 30%;
    right: 15%;
    width: clamp(var(--size-12), 8.53rem + 1.39vw, var(--size-14));
}

.p-mv-parts:nth-of-type(3) {
    top: -10%;
    right: 35%;
    width: clamp(var(--size-04), 2.67rem + 0.69vw, var(--size-05));
}

/* language */
.c-col.p-bcrumb-wrap {
    gap: 0;
}

.p-btn-lang {
    font-size: var(--font-size-s);
    font-family: var(--font-family-en);
    margin: var(--size-02) 0 0;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.p-btn-lang ul {
    display: flex;
    justify-content: end;
}

.p-btn-lang ul li:not(:last-child)::after {
    content: "｜";
    color: var(--color-gray-500);
    margin: 0 var(--size-02);
}

.p-btn-lang ul li a {
    text-decoration: underline;
    color: var(--color-primary-500);
}

.p-btn-lang ul li a[aria-current="true"] {
    color: var(--color-gray-700);
    text-decoration: none;
}

@media (any-hover: hover) {
    .p-btn-lang ul li a:hover {
        text-decoration: none;
    }
}

.p-btn-lang ul li.p-lang-current {
    color: var(--color-gray-700);
    font-weight: var(--font-weight-bold);
    pointer-events: none;
}

/* app */
.p-btn-app {
    display: flex;
    align-items: center;
    gap: var(--size-02);
    flex-wrap: wrap;
    margin-top: var(--size-04);
}

.p-btn-app-link {
    display: inline-block;
}

.p-app-apple {
    height: var(--size-08);
    width: auto;
}

.p-app-google {
    height: var(--size-10);
    width: auto;
}

/* #feature */
.p-fs-feat {
    font-size: clamp(1.7rem, 2.2vw, 2.2rem);
}

.p-feat-pic {
    max-width: 28rem;
}

.p-mg-a0 {
    margin: auto 0;
}

/* #faq */
#sec-faq .c-acd .c-acd-ttl {
    position: relative;
}

#sec-faq .c-acd .c-acd-ttl::before,
#sec-faq .c-acd .c-acd-cnt .c-acd-dtl::before {
    font-family: var(--font-family-en);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    position: absolute;
    z-index: 1;
    top: var(--size-02);
    left: var(--size-03);
}

#sec-faq .c-acd .c-acd-ttl::before {
    content: "Q.";
    color: var(--color-primary-500);
}

#sec-faq .c-acd.u-acd-pill .c-acd-ttl button {
    padding: var(--size-02) var(--size-06);
}

#sec-faq .c-acd.u-acd-pill .c-acd-cnt .c-acd-dtl {
    padding: var(--size-02) var(--size-06);
    position: relative;
}

#sec-faq .c-acd .c-acd-cnt .c-acd-dtl::before {
    content: "A.";
    color: var(--color-secondary-500);
}

/* #news */
.p-news-list {
    display: flex;
    flex-direction: column;
    gap: var(--size-02);
}

.p-news-box {
    border-bottom: 2px dashed var(--color-gray-100);
}

.p-news-sub {
    display: flex;
    column-gap: var(--size-column);
    flex-wrap: wrap;
}

.p-news-date {
    font-family: var(--font-family-en);
    flex: 0 0 5em;
}

.p-news-tag {
    display: flex;
    gap: var(--size-02);
    flex: 1;
}

.p-news-tag>* {
    display: block;
    border-radius: var(--size-005);
    min-width: 7em;
    text-align: center;
}

.p-news-tag .p-tag-notice {
    background-color: var(--color-primary-100);
}

.p-news-tag .p-tag-mainte {
    background-color: var(--color-secondary-100);
}

.p-news-tag .p-tag-release {
    background-color: var(--color-gray-100);
}

.p-news-link {
    display: block;
    padding: var(--size-01) 0 var(--size-02) 2em;
    width: fit-content;
}

.p-news-sub {
    font-family: var(--font-family-en);
}

.u-mark-arrow.p-news-link::before {
    top: 1em;
}

/* contact */
.p-contact-box {
    border: 1px solid var(--color-gray-100);
    padding: var(--size-03);
    margin: 0 auto;
}


@media (any-hover: hover) {
    .p-news-link:hover {
        color: var(--color-primary-500);
    }
}


/* footer */
main {
    position: relative;
}

main::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1920 / 213;
    background-image: url("/common/assets/img/bg-gray-wave.svg");
    background-size: 100% auto;
    background-position: bottom center;
    background-repeat: no-repeat;
}

main> :last-child {
    padding-bottom: clamp(10rem, 1rem + 19.2vw, 25rem);
}

footer>* {
    padding: var(--size-06) 0;
}

.p-footer-logo {
    max-width: clamp(26rem, 30vw, 30rem) !important;
}

.p-fs-xs {
    font-size: 1.2rem;
}

footer .p-fs-xs {
    color: var(--color-gray-700);
}

.p-footer-nav {
    flex-direction: row !important;
    gap: var(--size-column);
}

.p-footer-nav ul {
    width: calc((100% - var(--size-column)) / 2);
}

.p-footer-nav li {
    margin-bottom: var(--size-015);
    font-size: var(--font-size-s);
}

.p-footer-list {
    display: flex;
    justify-content: center;
}

.p-footer-list li {
    display: flex;
    border-right: 1px solid var(--color-gray-100);
    align-items: center;
}

.p-footer-list li a {
    display: block;
    width: 100%;
    padding: 0 var(--size-02);
}

.p-footer-list li:last-child {
    border-right: 0;
}

.p-footer-nav li a,
.p-footer-list li a {
    text-decoration: underline;
}

@media (any-hover: hover) {

    .p-footer-nav li a:hover,
    .p-footer-list li a:hover {
        text-decoration: none;
    }
}

@media only screen and (max-width:1200px) {
    .u-header-pc {
        display: none !important;
    }

    .u-header-sp {
        display: flex !important;
    }
}


@media only screen and (max-width:768px) {

    /* scroll-fade */
    #p-scrollspy {
        height: auto;
    }

    .p-scrollspy-sticky {
        position: relative;
    }

    .p-scroll-nav {
        display: flex;
        flex-direction: column;
    }

    .p-scroll-img {
        max-width: 30rem;
        margin: 0 auto var(--size-02);
        border-radius: var(--size-005);
        overflow: hidden;
    }

    .p-scroll-nav .p-scroll-img {
        order: 1;
    }

    .p-scroll-nav h3.c-head {
        order: 2;
        text-align: center;
    }

    .p-scroll-nav p {
        order: 3;
    }

    .p-scrollspy-inner {
        margin-bottom: var(--size-10);
    }

    .p-scrollspy-inner:last-child {
        margin-bottom: 0;
    }

    /* MV */
    #sec-mv h1.c-head {
        min-height: var(--size-10);
    }

    .p-mv-parts {
        display: none;
    }

    .p-footer-list li {
        min-width: calc(100% / 3);
    }


    /* feature */

    #sec-feature .p-feat-list .c-col-box {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin: 0 auto;
        border-bottom: 1px dashed var(--color-gray-200);
        padding-bottom: var(--size-06);
    }

    #sec-feature .p-feat-list .c-col-box:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    #sec-feature .p-feat-list .p-fd-rev {
        flex-direction: row-reverse;
    }

    #sec-feature .p-feat-list .c-col-box>* {
        width: calc(100% / 2);
    }

}

@media (max-width: 520px) {

    /* app */
    .p-app-apple {
        height: var(--size-06);
    }

    .p-app-google {
        height: var(--size-08);
    }

    /* frame */
    .p-frame-inner {
        padding: var(--size-02) 0;
    }

    /* dl */
    .p-dl-inline.p-dl-bloc-sp {
        display: block;
    }

    /* footer */
    .p-footer-list {
        flex-direction: column;
        gap: var(--size-015);
    }

    .p-footer-list li {
        border-right: none;
    }
}