/** hero **/
.sec-hero {
    position: relative;
    z-index: 0;
}
.sec-hero::after {
    content: "";
    display: block;
    width: 100%;
    height: 3em;
    background: linear-gradient(to top right, #000 50%, transparent 50%);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
}
.swiper-container.hero__slider::before,
.swiper-container.hero__slider::after {
    content:"";
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    z-index: 10;
}
.swiper-container.hero__slider::before {
    background-color: rgba(0, 0, 0, 0.1);
    height: 100%;
    top: 0;
}
.swiper-container.hero__slider::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    height: 19.4rem;
    bottom: 0;
}
.sec-hero__smile {
    position: absolute;
    left: 50%;
    bottom: 1.5em;
    transform: translateX(-50%);
    z-index: 11;
    width: 24rem;
}
.sec-hero__smile .--en {
    font-size: 2.25em;
    text-align: center;
} 
.swiper-container.hero__slider {
    overflow: hidden;
}
.swiper-container.hero__slider .swiper-pagination {
    position: absolute;
    right: 1em;
    top: 50%;
    left: auto !important;
    transform: translateY(-50%);
    z-index: 99;
    width: .5em;
    display: flex;
    flex-direction: column;
    gap: 2em;
}
.swiper-container.hero__slider .swiper-pagination-bullet {
    background: rgba(228, 228, 228) !important;
    opacity: 1 !important;
}
.swiper-container.hero__slider .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--color-org) !important;
}
.sec-hero__smile .--en {
    font-family: var(--font-en);
    color: var(--color-main);
    font-size: 2.5em;
    letter-spacing: 0;
    white-space: nowrap;
    display: inline-block;
}
.ani-smile {
    position: relative;
    isolation: isolate;
}
.ani-smile::before {
    content: "";
    position: absolute;
    z-index: 10;
    inset: 0;
    width: 100%;
    background-color: white;
    animation-name: top-mv;
    animation-duration: 1s;
    animation-delay: 1.5s;
    animation-fill-mode: both;
}
@keyframes top-mv {
    0% { clip-path: inset(0 100% 0 0); }
    50% { clip-path: inset(0); }
    100% { clip-path: inset(0 0 0 100%);}
}
.ani-smile figure {
    display: block;
    animation-name: top-mv-txt;
    animation-duration: 1s;
    animation-delay: 1.5s;
    animation-fill-mode: both;
}
@keyframes top-mv-txt {
    0% { clip-path: inset(0 100% 0 0);}
    50% { clip-path: inset(0 100% 0 0);}
    100% { clip-path: inset(0);}
}
.sec-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5em;
}
.sec-title .--en {
    font-size: 2.5em;
    color: var(--color-main);
    font-weight: 400;
    line-height: 1.4;
}
.sec-title .--jp {
    font-size: 1.25em;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .2em;
}
.sec-lead {
    font-weight: 700;
    letter-spacing: .12em;
}
.p-full-w__images {
    display: grid;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.p-full-w__images.--mission {
    grid-template-columns: repeat(2, 1fr);
    margin: 2em 0
}
.p-full-w__images.--benefits {
    grid-template-columns: repeat(3, 1fr);
    margin: var(--space-md) 0;
}
.sec-logo__links {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sec-logo__links ul {
    display: flex;
    gap: .75em;
}
.sec-news .p-post-list {
    margin-bottom: 2em;
}
.sec-mission__content-txt dt {
    font-weight: 700;
    font-size: 1.5em;
    line-height: 1.6;
    letter-spacing: .2em;
    white-space: nowrap;
}
.sec-shop__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em .5em;
}
.sec-shop__list-item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: .5em; 
}
.sec-shop__list-item h3,
.about-box__item dd.desc {
    display: flex;
    align-items: center;
    justify-content: center;
}
.sec-about__contet {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5em;
    margin-bottom: 2em;
}
.sec-about__contet .about-box__item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: .25em;
}
.sec-interview__content {
    margin: 2em 0;
    position: relative;
}
.sec-interview__ttl {
    position: absolute;
    top: .5em;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5em;
    z-index: 2;
}
.sec-interview__ttl span,
.sec-search__ttl span {
    background: white;
    color: black;
    font-weight: 700;
    display: inline-block;
    font-size: 1.5rem;
    letter-spacing: .2em;
    line-height: 1.2;
    padding: .25em .1em;
}
.sec-search__ttl {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5em;
}
.sec-search__ttl span {
    font-size: 2rem;
    padding: .25em 1em;
}
.sec-type__content {
    display: grid;
    gap: .75em;
    margin-top: 2em;
}
.sec-type__item {
    display: block;
    position: relative;
}
.sec-type__ttl {
    font-size: 1.5rem;
    font-weight: 700;
    position: absolute;
    top: 0;
    right: 0;
    line-height: 2em;
    width: 2em;
    height: 100%;
    background-color: var(--color-main);
    color: black;
    padding: 1em 0;
    z-index: 1;
}
.sec-type__ttl::after {
    content: "→";
    width: 2em;
    text-align: center;
    writing-mode: horizontal-tb;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: .3s;
}
.sec-search {
    position: relative;
    background-image: url('../images/top_bg.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.bg-black-top,.bg-gray-btm {
    width: 100%;
    height: calc(var(--space-md) + 1em);
    position: relative;
}
.bg-black-top::before,.bg-gray-btm::before {
    content:"";
    display: block;
    width: 100vw;
    height: 1em;
    background: linear-gradient(to bottom right, #000 50%, transparent 50%);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
}
.bg-gray-btm {
    margin-bottom: var(--space-md);
}
.bg-gray-btm::before {
    background: linear-gradient(to top right, var(--color-gray) 50%, transparent 50%);
    top: auto;
    bottom: 0;
}
.sec-search__form {
    background-color: #FFFFFFE5;
    color: black;
    margin-top: 2em;
    padding: 2.5em 1em;
}
.sec-search .sec-title {
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.sec-search .sec-title .--jp {
    color: black;
}
.sec-search__form .p-search__box dl:first-child {
    border-top: 1px solid #E4E4E4;
}
.sec-search__form .p-search__box dl {
    border-bottom: 1px solid #E4E4E4;
}
.sec-search__form .wpcf7-checkbox {
    width: 100%;
}
.c-search__btn .c-button {
    margin: 0 auto;
}
.c-btncenter {
    margin: 0 auto;
}
@media screen and (max-width: 767px) {
    .sec-logo.bg-black {
        padding-top: var(--space-sm);
        padding-bottom: var(--space-sm);
    }
    .sec-logo__links ul:nth-child(2) {
        width: 65%;
    }
    .sec-mission__content {
        position: relative;
        padding-top: 3.5em;
        gap: 0;
    }
    .sec-mission__content dt {
        position: absolute;
        top: 0;
        left: 0;
    }
    .sec-mission__content dd {
        margin-top: 2.5em;
    }
    .sec-mission__content-img {
        width: 100vw;
        transform: translateX(-1em);
    }
    .sec-interview__content {
        width: 100vw;
        transform: translateX(-1em);
        padding-right: 3em;
    }
    .sec-interview__ttl {
        right: .5em;
    }
    .faq__content dd .c-linkbtn {
        font-size: 1.2rem;
    }
}
@media screen and (min-width: 768px) {
    .swiper-container.hero__slider .swiper-pagination {
        right: 1.5em;
    }
    .swiper-container.hero__slider::after  {
        height: 28rem;
    }
    .sec-hero::after {
        height: 4.25em;
    }
    .sec-hero__smile {
        left: 5em;
        bottom: 2.5em;
        transform: translateX(0);
        width: 44.3rem;
    }
    .sec-hero__smile .--en {
        font-size: 4.5em;
    }
    .sec-title {
        flex-direction: row;
        align-items: baseline;
        gap: 2em;
    }
    .sec-title .--en {
        font-size: 4.5em;
    }
    .sec-title .--jp {
        font-size: 1.75em;
    }
    .sec-lead {
        font-size: 1.25em;
        letter-spacing: .16em;
    }
    .p-full-w__images.--mission {
        grid-template-columns: repeat(4, 1fr);
        margin: 3.25em 0 0 0;
    }
    .sec-logo__links {
        flex-direction: row;
    }
    .sec-logo__links,.sec-logo__links ul {
        gap: 2em;
    }
    .sec-news .sec-title {
        flex-direction: column;
        align-items: center;
    }
    .sec-news .p-post-list {
        margin-bottom: 2.5em;
    }
    .sec-mission__content {
        margin-bottom: 2.5em;
    }
    .sec-mission__content-img {
        width: 56rem;
    }
    .sec-mission__content-img picture img {
        max-width: 64rem !important;
        width: 64rem !important;
    }
    .sec-mission__content-txt {
        position: relative;
    }
    .sec-mission__content-txt dl {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }  
    .sec-mission__content-txt dt {
        font-size: 5.4rem;   
    }
    .sec-mission__content-txt dd {
        margin-top: 2em;
    }
    .sec-shop__list {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5em 2em;
    }
    .sec-shop__list-item {
        gap: 1em;
    }
    .sec-about__contet {
        grid-template-columns: repeat(5, 1fr);
        gap: 2em;
        margin-bottom: 3em;
    }
    .about-box__item {
        padding: 2em 1em;
    }
    .sec-interview__content {
        margin: 2.5em 0;
        padding-right: 4.5em;
    }
    .sec-interview__ttl span,
    .sec-search__ttl span  {
        font-size: 1.75em;
    }
    .sec-type__content {
        grid-template-columns: 1fr 1fr;
        gap: 2.5em;
        margin-top: 2.5em;
    }
    .sec-type__ttl {
        font-size: 1.75em;
    }
    .sec-search .l-inner {
        position: relative;
    }
    .sec-search__ttl {
        writing-mode: vertical-rl;
        position: absolute;
        top: 4.5em;
        right: -3em;
        z-index: 2;
    }
    .sec-search__ttl span {
        padding: .5em .1em;
    }
    .bg-black-top,.bg-gray-btm {
        height: calc(var(--space-md) + 2.5em);
    }
    .bg-black-top::before,.bg-gray-btm::before {
        height: 2.5em;
    }
    .sec-search .sec-title .--en {
        font-size: 2.5em;
    }
    .sec-search .sec-title .--jp {
        font-size: 1.25em;
    }
    .sec-search__form {
        width: 64rem;
        padding: 5em 5.5em;
        transform: translateX(-5em);
    }
}