@charset "utf-8";
@import "anime.css";

/*
------------
home.css
------------
*/

/* kv_area */
#kv_area {
    width: 100vw;
    height: 100dvh;
    max-height: 100vh;
    overflow: hidden;
    position: relative;
}
#kv_area::before {
    content: "";
    width: 100%;
    height: auto;
    aspect-ratio: 750 / 308;
    background-image: url(../../images/content/home/kv_bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
}
#kv_area .inner .item {
    position: absolute;
    bottom: 75px;
    left: 7.5vw;
    z-index: 3;
}
#kv_area .inner .item h2 {
    width: 90%;
}
#kv_area .inner .item p {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    margin: 20px 0 0 0;
}
#kv_area .inner .item p span {
    display: inline-block;
    background-color: #fff;
    padding: 2px;
}
#kv_area .inner .item p span:not(:first-child) {
    margin: 12px 0 0 0;
}
#kv_area .inner .slider {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
#kv_area .inner .slider .slick-list,
#kv_area .inner .slider .slick-track {
    width: 100%;
    height: 100%;
}
#kv_area .inner .slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media only screen and (min-width: 768px) {
    #kv_area {
        width: 100%;
        height: auto;
        max-height: auto;
        aspect-ratio: 375 / 662;
    }
    #kv_area .inner .item {
        bottom: 50px;
        left: 30px;
    }
}
/* support_area */
#support_area article {
    width: 85vw;
}
#support_area article.item {
    margin: 30px auto 0 auto;
}
#support_area article.item h2 {
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--green);
}
#support_area article p {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.6;
    text-align: justify;
    margin: 15px 0 0 0;
}
#support_area article.proflle {
    padding: 35px 0 0 0;
    margin: 35px auto 0 auto;
    border-top: 1px solid #e8e8e8;
}
#support_area article.proflle h3 {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.15em;
}
@media only screen and (min-width: 768px) {
    #support_area article {
        width: 85%;
    }
}
/* stit_box */
.stit_box {
    text-align: center;
}
.stit_box span.en {
    font-family: "Roboto", sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.1em;
}
.stit_box span.en.color_y {
    color: var(--yellow);
}
.stit_box span.en.color_g {
    color: var(--green);
}
.stit_box h2 {
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    line-height: 1.4;
    position: relative;
    margin: 30px 0 0 0;
}
.stit_box h2.color_w {
    color: var(--white);
}
.stit_box h2.color_b {
    color: var(--black);
}
.stit_box h2::before {
    content: "";
    width: 20px;
    height: 2px;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
}
.stit_box h2.color_w::before {
    background-color: var(--white);
}
.stit_box h2.color_b::before {
    background-color: var(--black);
}
/* concerns_area */
#concerns_area {
    background-color: var(--green);
    margin: 65px 0 0 0;
    padding: 65px 0;
}
#concerns_area .inner .list {
    width: 85vw;
    margin: 30px auto 0 auto;
    counter-reset: concern-num;
}
#concerns_area .inner .list article {
    background-color: var(--white);
    border-radius: 6px;
    padding: 20px;
    position: relative;
    z-index: 1;
    counter-increment: concern-num;
    overflow: hidden;
}
#concerns_area .inner .list article::before {
    content: counter(concern-num, decimal-leading-zero);
    font-family: "Roboto", sans-serif;
    font-size: 11.8rem;
    font-weight: 600;
    letter-spacing: 0em;
    color: rgba(0, 0, 0, .05);
    position: absolute;
    top: -0.1em;
    left: -0.1em;
    z-index: -1;
}
#concerns_area .inner .list article:nth-child(n + 2) {
    margin: 10px 0 0 0;
}
#concerns_area .inner .list article h3 {
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--white);
    background-color: var(--green);
    display: inline-block;
    padding: 4px;
}
#concerns_area .inner .list article p {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.6;
    text-align: justify;
    color: var(--green);
    margin: 15px 0 0 0;
}
@media only screen and (min-width: 768px) {
    #concerns_area .inner .list {
        width: 85%;
    }
}
/* philosophy_area */
#philosophy_area {
    background-image: url(../../images/content/home/philosophy_img.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    aspect-ratio: 375 / 662;
}
#philosophy_area::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
#philosophy_area::after {
    content: "PHILOSOPHY";
    font-family: "Roboto", sans-serif;
    font-size: 5.5rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, .2);
    position: absolute;
    top: 0;
    left: 0;
}
#philosophy_area .inner {
    width: 85vw;
    height: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 3;
    color: var(--white);
    display: flex;
    align-items: center;
}
#philosophy_area .inner .item h2 {
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    line-height: 1.6;
}
#philosophy_area .inner .item p {
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    line-height: 1.6;
    margin: 15px 0 0 0;
    text-align: justify;
}
#philosophy_area .inner .item p:not(:nth-of-type(1)) {
    margin: 10px 0 0 0;
}
@media only screen and (min-width: 768px) {
    #philosophy_area::after {
        font-size: 6rem;
    }
    #philosophy_area .inner {
        width: 85%;
    }
    #philosophy_area .inner .item p {
        letter-spacing: 0.07em;
    }
}
/* features_area */
#features_area {
    margin: 65px 0 0 0;
}
#features_area .inner .slider {
    margin: 45px 0 0 0;
}
#features_area .inner .slider article .img_area {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 290px;
    position: relative;
}
#features_area .inner .slider article .img_area::before {
    font-family: "Roboto", sans-serif;
    color: var(--green);
    font-size: 7rem;
    font-weight: 600;
    position: absolute;
    top: 0;
    left: 40px;
}
#features_area .inner .slider article.element01 .img_area::before {
    content: "01";
}
#features_area .inner .slider article.element02 .img_area::before {
    content: "02";
}
#features_area .inner .slider article.element03 .img_area::before {
    content: "03";
}
#features_area .inner .slider article.element04 .img_area::before {
    content: "04";
}
#features_area .inner .slider article .img_area figure {
    position: relative;
}
#features_area .inner .slider article .img_area figure::before {
    content: "";
    width: 260px;
    height: auto;
    aspect-ratio: 1 / 1;
    background-color: rgba(107, 182, 177, .1);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    border-radius: 50%;
}
#features_area .inner .slider article.element01 .img_area figure img {
    width: 183px;
    height: auto;
    aspect-ratio: 183 / 225;
}
#features_area .inner .slider article.element02 .img_area figure img {
    width: 248px;
    height: auto;
    aspect-ratio: 248 / 242;
}
#features_area .inner .slider article.element03 .img_area figure img {
    width: 281px;
    height: auto;
    aspect-ratio: 281 / 127;
}
#features_area .inner .slider article.element04 .img_area figure img {
    width: 228px;
    height: auto;
    aspect-ratio: 228 / 263;
}
#features_area .inner .slider article .item {
    width: 85vw;
    margin: 25px auto 0 auto;
}
#features_area .inner .slider article .item h3 {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    line-height: 1.5;
}
#features_area .inner .slider article .item p {
    margin: 10px 0 0 0;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1.6;
}
#features_area .inner .slider_nav {
    margin: 35px 0 0 0;
    display: flex;
    justify-content: center;
    gap: 10px;
}
#features_area .inner .slider_nav button {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
@media only screen and (min-width: 768px) {
    #features_area .inner .slider {
        cursor: grab;
    }
    #features_area .inner .slider:active {
        cursor: grabbing;
    }
    #features_area .inner .slider article .img_area::before {
        left: 60px;
    }
    #features_area .inner .slider article .item {
        width: 85%;
    }
    #features_area .inner .slider_nav button {
        transition: opacity .3s ease;
    }
    #features_area .inner .slider_nav button:hover {
        opacity: .6;
    }
}
/* scenes_area */
#scenes_area {
    background-color: var(--green);
    margin: 65px 0 0 0;
    padding: 65px 0;
}
#scenes_area .inner p.lead {
    width: 85vw;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1.6;
    color: var(--white);
    text-align: justify;
    margin: 30px auto 0 auto;
}
#scenes_area .inner .slider {
    margin: 30px 0 0 0;
}
#scenes_area .inner .slider article {
    width: 200px !important;
    text-align: center;
    margin: 0 15px;
}
#scenes_area .inner .slider article figure {
    width: 100%;
    width: 200px;
    height: 200px;
    border: 1px solid var(--white);
    border-radius: 50%;
    overflow: hidden;
}
#scenes_area .inner .slider article figure img {
    width: 100;
    height: 100%;
    object-fit: cover;
}
#scenes_area .inner .slider article span.en {
    display: inline-block;
    margin: 15px 0 0 0;
    font-family: "Roboto", sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #205D71;
}
#scenes_area .inner .slider article h3 {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--white);
    margin: 5px 0 0 0;
}
@media only screen and (min-width: 768px) {
    #scenes_area .inner p.lead {
        width: 85%;
    }
    #scenes_area .inner .slider {
        cursor: grab;
    }
    #scenes_area .inner .slider:active {
        cursor: grabbing;
    }
}
/* lineup_area */
#lineup_area {
    margin: 65px 0 0 0;
}
#lineup_area .inner p.lead {
    width: 85vw;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1.6;
    text-align: justify;
    margin: 30px auto 0 auto;
}
#lineup_area .inner .slider_wrapper {
    position: relative;
    overflow: hidden;
}
#lineup_area .inner .slider_wrapper .slider {
    margin: 35px 0 0 0;
    position: relative;
    height: 300px;
    overflow: hidden;
}
#lineup_area .inner .slider_wrapper .slider article {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 0;
    width: 280px;
    margin-left: -140px;
    transition:
        transform .55s ease,
        opacity .55s ease,
        z-index .55s ease;
}
#lineup_area .inner .slider_wrapper .slider article {
    pointer-events: none;
}
#lineup_area .inner .slider_wrapper .slider article.is-active {
    pointer-events: auto;
}
#lineup_area .inner .slider_wrapper .slider article figure {
    width: 186px;
    margin: 0 auto;
}
#lineup_area .inner .slider_wrapper .slider article h3 {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    margin: 20px 0 0 0;
    opacity: 0;
    transition: opacity .3s ease;
}
#lineup_area .inner .slider_wrapper .slider article p.price {
    font-family: "Roboto", sans-serif;
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #205D71;
    margin: 10px 0 0 0;
    opacity: 0;
    transition: opacity .5s ease;
}
#lineup_area .inner .slider_wrapper .slider article p.price span {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.2rem;
}
#lineup_area .inner .slider_wrapper .slider article p.link {
    margin: 20px 0 0 0;
    opacity: 0;
    transition: opacity .3s ease;
}
#lineup_area .inner .slider_wrapper .slider article p.link a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--white);
    background-color: var(--orange);
    border: 1px solid var(--orange);
    padding: 10px 10px 10px 20px;
    border-radius: 500px;
}
#lineup_area .inner .slider_wrapper .slider article.is-active h3,
#lineup_area .inner .slider_wrapper .slider article.is-active p.price,
#lineup_area .inner .slider_wrapper .slider article.is-active p.link {
    opacity: 1;
}
#lineup_area .inner .slider_wrapper .lineup_nav button {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
#lineup_area .inner .slider_wrapper .lineup_nav .lineup_prev,
#lineup_area .inner .slider_wrapper .lineup_nav .lineup_next {
    position: absolute;
    top: 40px;
    z-index: 100;
    transition: left 1s ease .5s, right 1s ease .5s;
}
#lineup_area .inner .slider_wrapper .lineup_nav .lineup_prev {
    left: -300px;
}
#lineup_area .inner .slider_wrapper .lineup_nav .lineup_next {
    right: -300px;
}
#lineup_area.is-show .inner .slider_wrapper .lineup_nav .lineup_prev {
    left: 5vw;
}
#lineup_area.is-show .inner .slider_wrapper .lineup_nav .lineup_next {
    right: 5vw;
}
@media only screen and (min-width: 768px) {
    #lineup_area .inner p.lead {
        width: 85%;
    }
    #lineup_area .inner .slider_wrapper .slider {
        cursor: grab;
        user-select: none;
    }
    #lineup_area .inner .slider_wrapper .slider:active {
        cursor: grabbing;
    }
    #lineup_area .inner .slider_wrapper .slider img {
        pointer-events: none;
        user-select: none;
        -webkit-user-drag: none;
    }
    #lineup_area .inner .slider_wrapper .slider article p.link a {
        transition: background-color .3s ease, color .3s ease;
    }
    #lineup_area .inner .slider_wrapper .slider article p.link a:hover {
        background-color: var(--white);
        color: var(--orange);
    }
    #lineup_area .inner .slider_wrapper .lineup_nav button {
        transition: opacity .3s ease;
    }
    #lineup_area .inner .slider_wrapper .lineup_nav button:hover {
        opacity: .6;
    }
    #lineup_area .inner .slider_wrapper .lineup_nav .lineup_prev,
    #lineup_area .inner .slider_wrapper .lineup_nav .lineup_next {
        top: 60px;
    }
    #lineup_area.is-show .inner .slider_wrapper .lineup_nav .lineup_prev {
        left: 30px;
    }
    #lineup_area.is-show .inner .slider_wrapper .lineup_nav .lineup_next {
        right: 30px;
    }
}
/* size_area */
#size_area {
    margin: 65px 0 0 0;
    padding: 65px 0;
    background-color: var(--green);
}
#size_area .inner p.lead {
    width: 85vw;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1.6;
    text-align: justify;
    color: var(--white);
    margin: 30px auto 0 auto;
}
#size_area .inner figure {
    width: 290px;
    margin: 45px auto 0 auto;
}
#size_area .inner .scroll_guide {
    margin: 45px 0 0 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
#size_area .inner .scroll_guide p {
    font-family: "Roboto", sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #fff;
}
#size_area .inner .table_scroll {
    margin: 20px 0 0 0;
}
#size_area .inner .table_scroll table {
    width: 500px;
    border: 0;
    margin: 0 0 0 7.5vw;
    border-collapse: separate;
    border-spacing: 0 5px;
    padding: 0 7.5vw 0 0;
}
#size_area .inner .table_scroll table th {
    background-color: #5DA7A2;
    color: var(--white);
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    padding: 15px 0;
}
#size_area .inner .table_scroll table th span {
    display: block;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    margin: 5px 0 0 0;
}
#size_area .inner .table_scroll table th:nth-of-type(1) {
    border-radius: 6px 0 0 0;
}
#size_area .inner .table_scroll table th:nth-of-type(4) {
    border-radius: 0 6px 0 0;
}
#size_area .inner .table_scroll table td {
    font-family: "Roboto", sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #5DA7A2;
    text-align: center;
    padding: 15px 0;
}
#size_area .inner .table_scroll table tr:nth-child(even) {
    background-color: var(--white);
}
#size_area .inner .table_scroll table tr:nth-child(odd) {
    background-color: #ECECEC;
}
#size_area .inner .table_scroll .simplebar-track.simplebar-horizontal {
    width: 85vw;
    height: 8px;
    margin: 0 auto;
    background: var(--white);
    border-radius: 999px;
    bottom: -15px;
}
#size_area .inner .table_scroll .simplebar-scrollbar::before {
    background: #5DA7A2;
    border-radius: 999px;
    opacity: 1;
}
#size_area .inner .table_scroll .simplebar-track.simplebar-horizontal .simplebar-scrollbar {
    top: 0;
    height: 8px;
}
@media only screen and (min-width: 768px) {
    #size_area .inner p.lead {
        width: 85%;
    }
    #size_area .inner .table_scroll table {
        margin: 0 0 0 calc((430px - (430px * 0.85)) / 2);
        padding: 0 calc((430px - (430px * 0.85)) / 2) 0 0;
    }
    #size_area .inner .table_scroll .simplebar-track.simplebar-horizontal {
        width: 85%;
    }
}
/* faq_area */
#faq_area {
    background-color: #f7f7f7;
    padding: 65px 0;
}
#faq_area .inner .faq_list {
    width: 85vw;
    margin: 30px auto 0 auto;
}
#faq_area .inner .faq_list details {
    background-color: var(--white);
    border-radius: 6px;
}
#faq_area .inner .faq_list details:not(:first-child) {
    margin: 5px 0 0 0;
}
#faq_area .inner .faq_list details summary {
    cursor: pointer;
    list-style: none;
    position: relative;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1.6;
    padding: 20px 45px 20px 20px;
}
#faq_area .inner .faq_list details summary::-webkit-details-marker {
    display: none;
}
#faq_area .inner .faq_list details summary::before,
#faq_area .inner .faq_list details summary::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 16px;
    height: 2px;
    background: var(--green);
    transition: .3s;
}
#faq_area .inner .faq_list details summary::before {
    transform: translateY(-50%);
}
#faq_area .inner .faq_list details summary::after {
    transform: translateY(-50%) rotate(90deg);
}
#faq_area .inner .faq_list details[open] summary::after {
    transform: translateY(-50%) rotate(0deg);
    opacity: 0;
}
#faq_area .inner .faq_list details .answer {
    padding: 0 20px 20px 20px;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1.6;
    color: #666;
    text-align: justify;
}
@media only screen and (min-width: 768px) {
    #faq_area .inner .faq_list {
        width: 85%;
    }
    #faq_area .inner .faq_list details {
        transition: background-color .3s ease;
    }
    #faq_area .inner .faq_list details:hover {
        background-color: var(--green);
    }
    #faq_area .inner .faq_list details[open]:hover {
        background-color: var(--white)
    }
    #faq_area .inner .faq_list details summary {
        transition: color .3s ease;
    }
    #faq_area .inner .faq_list details:hover summary {
        color: var(--white);
    }
    #faq_area .inner .faq_list details[open]:hover summary {
        color: var(--black);
    }
    #faq_area .inner .faq_list details summary::before,
    #faq_area .inner .faq_list details summary::after {
        transition: background-color .3s ease;
    }
    #faq_area .inner .faq_list details:hover summary::before,
    #faq_area .inner .faq_list details:hover summary::after {
        background-color: var(--white);
    }
    #faq_area .inner .faq_list details[open]:hover summary::before,
    #faq_area .inner .faq_list details[open]:hover summary::after {
        background-color: var(--green);
    }
}
/* follow_btn */
#follow_btn {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: -300px;
    z-index: 1000;
    transition: bottom .5s ease;
}
.scroll_show #follow_btn {
    bottom: 2vw;
}
#follow_btn p {
    width: 96vw;
    margin: 0 auto;
}
#follow_btn p a {
    display: block;
    background-color: var(--orange);
    color: var(--white);
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-align: center;
    padding: 20px 0;
    border-radius: 6px;
}
@media only screen and (min-width: 768px) {
    #follow_btn {
        display: none;
    }
}
/* pc_display */
#pc_display {
    display: none;
}
@media only screen and (min-width: 768px) {
    #pc_display {
        display: block;
        position: fixed;
        bottom: min(calc(100vw * 50 / 1400), 50px);
        right: min(calc(100vw * 50 / 1400), 50px);
        z-index: 1000;
    }
    #pc_display figure {
        width: calc(100vw * 400 / 1400);
        max-width: 400px;
        position: absolute;
        bottom: 0;
        right: 0;
        pointer-events: none;
    }
    #pc_display p.link {
        width: 15em;
        height: auto;
        aspect-ratio: 1 / 1;
        text-align: center;
        position: absolute;
        bottom: min(calc(100vw * 220 / 1400), 220px);
        right: min(calc(100vw * 20 / 1400), 20px);
        z-index: -1;
    }
    #pc_display p.link a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background-color: var(--orange);
        color: var(--white);
        font-size: 1.8rem;
        font-weight: 500;
        letter-spacing: 0.15em;
        line-height: 1.5;
        border-radius: 50%;
        position: relative;
        transition: background-color .3s ease, color .3s ease;
    }
    #pc_display p.link a::before {
        content: "";
        width: calc(100% + 6px);
        height: calc(100% + 6px);
        border: 1px solid var(--orange);
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: border .3s ease
    }
    #pc_display p.link a:hover {
        background-color: var(--white);
        color: var(--orange);
    }
    #pc_display p.link a:hover::before {
        border: 1px solid var(--white);
    }
}