html {
    scroll-behavior: smooth;
}


body {
    background-color: #fff;
    color: #32364A;
    letter-spacing: 0.02em;
    font-family: "Noto Serif JP", serif;
    letter-spacing: 0.05em;
}

main {
    overflow: hidden;
}

.en {
    font-family: "Cardo", serif;
}

img {
    height: auto;
    width: 100%;
}

.inner {
    width: 88%;
    max-width: 1040px;
    margin: 0 auto;
}


.sp {
    display: block;
}

.pc {
    display: none;
}

.bg_grey {
    background-color: #F5F5F5;
}

/* スマホ以上 */
@media (min-width: 768px) {
    .sp {
        display: none;
    }

    .pc {
        display: block;
    }
}

/* pc以上 */
@media (min-width: 960px) {
    .sp {
        display: none;
    }

    .pc {
        display: block;
    }
}

/*  -----------------------------
ローディング
--------------------------------- */
.loading {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: #fff;
    transition: opacity 0.8s ease, visibility 0.8s ease;
    /* 消える時の動き */
}

/* 閉じるときに付与するクラス */
#loading_screen.loaded {
    opacity: 0;
    visibility: hidden;
}

.loading-text {
    color: #919191;
    text-align: center;
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: 1.8px;
}

.loading-text span {
    display: inline-block;
    animation: colorChange 0.8s ease-out forwards;
}

/* 色の変化を定義 */
@keyframes colorChange {
    0% {
        color: #919191;
    }

    100% {
        color: #32364A;
    }
}

/* 各文字に遅延を設定（0.1sずつずらす例） */
.loading-text span:nth-child(1) {
    animation-delay: 0.1s;
}

.loading-text span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-text span:nth-child(3) {
    animation-delay: 0.3s;
}

.loading-text span:nth-child(4) {
    animation-delay: 0.4s;
}

.loading-text span:nth-child(5) {
    animation-delay: 0.5s;
}

.loading-text span:nth-child(6) {
    animation-delay: 0.6s;
}

.loading-text span:nth-child(7) {
    animation-delay: 0.7s;
}

.loading-text span:nth-child(8) {
    animation-delay: 0.8s;
}

/* 改行後の文字 */
.loading-text span:nth-child(9) {
    animation-delay: 1s;
}

.loading-text span:nth-child(10) {
    animation-delay: 1.1s;
}

.loading-text span:nth-child(11) {
    animation-delay: 1.2s;
}

.loading-text span:nth-child(12) {
    animation-delay: 1.3s;
}

.loading-text span:nth-child(13) {
    animation-delay: 1.4s;
}

.loading-text span:nth-child(14) {
    animation-delay: 1.5s;
}

.loading-text span:nth-child(15) {
    animation-delay: 1.6s;
}

.loading-text span:nth-child(16) {
    animation-delay: 1.7s;
}

.loading-text span:nth-child(17) {
    animation-delay: 1.8s;
}

@media (min-width: 768px) {
    .loading-text {
        font-size: 36px;
    }
}

/*  -----------------------------
header
--------------------------------- */


.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.30);
}

.home .header {
    background-color: transparent;
}

.header_inner {
    width: 92%;
    margin-inline: auto;
    display: flex;
    padding: 30px 0;
    justify-content: space-between;
    align-items: center;
}

.header_logo_link {
    display: inline-block;
    max-width: 160px;
    transition: .3s;
}

.header_logo_link:hover {
    opacity: .8;
}

.nav_menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.nav_menu_item:not(:last-child) {
    transition: .3s;
}

.nav_menu_item:not(:last-child):hover {
    opacity: .8;
}

.nav_menu_item:last-child {
    margin-top: 18px;
}

.nav_menu_link {
    color: #fff;
    font-size: clamp(15px, calc(16/1440*100vw), 16px);
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
}

@media (min-width: 960px) {
    .nav_menu {
        flex-direction: row;
    }

    .nav_menu_link {
        color: #32364A;
    }

    .header_logo_link {
        max-width: 200px;
    }
}

/*  -----------------------------
ハンバーガー
--------------------------------- */
.header_nav {
    padding: 32px 4vw 32px;
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
    overflow-y: scroll;
    transform: translateX(120%);
    transition: transform 0.3s linear;
    background-color: #54BEBC;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;
    gap: 70px;


}

.hamburger {
    width: 56px;
    height: auto;
    aspect-ratio: 1;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    position: absolute;
    top: 16px;
    right: 2vw;
    z-index: 999;
    background-color: #bfbfbf94;
}

.hamburger p {
    color: #FFF;
    font-family: Cardo;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
}

.hamburger .cloce {
    display: none;
}

.hamburger .hamburger_inner {
    display: flex;
    flex-direction: column;
    align-items: end;
    row-gap: 10px;
}

.hamburger .hamburger_inner span {
    display: inline-block;
    position: relative;
    width: 30px;
    height: 1px;
    border-radius: 5px;
    background-color: #fff;
    transition: all 0.4s;
}

.active .hamburger span:nth-child(1) {
    top: 11px;
    transform: rotate(45deg);
}

.active .hamburger span:nth-child(2) {
    opacity: 0;
}

.active .hamburger span:nth-child(3) {
    top: -11px;
    transform: rotate(-45deg);
}

.active .header_nav {
    transform: translateX(0%);
}

.hamburger.active .open {
    display: none;
}

.hamburger.active .cloce {
    display: block;
}

@media (min-width: 960px) {
    .header_nav {
        padding: 0px;
        height: auto;
        position: static;
        overflow-y: inherit;
        transform: translateX(0);
        background-color: transparent;
        margin-left: auto;
        flex-direction: row;
        display: block;
    }

    .logo_nav_inner {
        display: none;
    }

    .hamburger {
        display: none;
    }

    .nav_menu {
        justify-content: flex-end;
        gap: 4%;
    }

}


/*  -----------------------------
footer
--------------------------------- */
.footer {
    display: flex;
    padding: 56px 0;
    flex-direction: column;
    align-items: center;
    gap: 100px;
    flex-shrink: 0;
    align-self: stretch;
    background: #fff;
}

.footer_menu {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 48px;
}

.footer_menu_link {
    font-size: 14px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0.05em;
}

.footer_menu_item {
    transition: .3s;
}

.footer_menu_item :hover {
    opacity: .8;
}

.footer_menu_item::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 15px;
    background: #DADADA;
    transform: rotate(35deg);
    margin-left: 16px;
    transform-origin: center;
}

.footer_menu_item:last-child::after {
    display: none;
}

.footer_buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-items: center;
    gap: 30px;
}

.footer_middle {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 48px;
}

.footer_middle_right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.footer_add {
    color: #919191;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0.05em;
}

.footer_logo {
    display: block;
    max-width: 160px;
    transition: .3s;
}

.footer_logo:hover {
    opacity: .8;
}

.footer_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.footer_bottom_link {
    color: #919191;
    text-align: right;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0.05em;
    transition: .3s;
}

.footer_bottom_link:hover {
    opacity: .8;
}

.footer_copy {
    color: #919191;
    text-align: right;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0.05em;
}

@media (min-width: 960px) {
    .footer {
        padding: 100px 0;

    }

    .footer_menu {
        gap: 30px;
        margin-bottom: 100px;
    }

    .footer_menu_link {
        font-size: 16px;
    }

    .footer_menu_item::after {
        margin-left: 30px;
    }

    .footer_middle_right {
        gap: 40px;
    }

    .footer_middle {
        flex-direction: row;
        align-items: flex-start;
        gap: 145px;
        align-self: stretch;
        margin-bottom: 100px;
    }

    .footer_bottom_link {
        font-size: 13px;
    }

    .footer_copy {
        font-size: 13px;
    }
}


/* アニメーション */
/* スクロールすると下からふわっとさせるためのコード */
.inview {
    /* 30px下げる */
    transform: translateY(30px);
    /* 要素を透明にする */
    opacity: 0;
    /* 2秒かけて、変化させる */
    transition: transform 2s, opacity 2s;
}

.inview.show {
    transform: translateY(0);
    opacity: 1;
}

/* -------------------
コンポーネント
------------------- */

/* ボタン */
.button {
    display: flex;
    padding: 15px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 3px;
    background: #54BEBC;
    border: 1px solid #54BEBC;
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    letter-spacing: .05em;
    flex: 1;
    transition: all .3s;
}

.button::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 14px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: invert(98%) sepia(2%) saturate(8%) hue-rotate(326deg) brightness(101%) contrast(103%);
    transition: all .3s;
}

.button:hover {
    background-color: #5E9493;
    border: 1px solid #5E9493;
}


.button.entry::before {
    width: 18px;
    height: 14px;
    background-image: url(../img/common/icon-entry.svg);
}

.button.contact::before {
    width: 18px;
    height: 14px;
    background-image: url(../img/common/icon-mail.svg);
}

.btns_fix {
    display: inline-flex;
    align-items: center;
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 9;
}

.btns_fix .button {
    border-radius: 0;
}

.btns_fix .button:first-child {
    border-right: 1px solid #fff;
}

.btns_fix .button:first-child:hover {
    border: 1px solid #54BEBC;
}

.button_hasborder {
    border-radius: 3px;
    border: 1px solid #32364A;
    font-family: "Shippori Mincho";
    display: flex;
    padding: 18px 30px 18px 40px;
    justify-content: center;
    align-items: center;
    gap: 30px;
    width: fit-content;
    white-space: nowrap;
    transition: all .3s;
}

.button_hasborder:hover {
    background-color: #32364A;
    color: #FFFFFF;
}

.button_hasborder:hover .button_hasLine_arrow img {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(5deg) brightness(102%) contrast(102%);
}

.button_hasLine {
    display: flex;
    padding: 0 10px 20px 10px;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    /* border-bottom: 1px solid #DADADA; */
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    width: 100%;
    max-width: 210px;
    position: relative;
}

.button_hasLine::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #DADADA;
    transform: scaleX(1);
    transform-origin: right;
    transition: transform 0.4s ease;
}

.button_hasLine::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #DADADA;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.button_hasLine:hover::before {
    transform: scaleX(0);
}

.button_hasLine:hover::after {
    transform: scaleX(1);
    transition-delay: 0.2s;
}

.button_hasLine_arrow img {
    display: block;
    width: 25px;
    height: 17px;
    filter: invert(19%) sepia(30%) saturate(503%) hue-rotate(192deg) brightness(97%) contrast(92%);
}

.button_hasLine_arrow {
    overflow: hidden;
}

.button_hasLine_arrow img {
    height: 100%;
}

.nav_menu_link.button.entry {
    background-color: #fff;
    color: #54BEBC;
    padding: 15px 30px;
}

.nav_menu_link.button.entry::before {
    filter: invert(61%) sepia(75%) saturate(273%) hue-rotate(130deg) brightness(95%) contrast(92%);
}

@media (min-width: 768px) {
    .button {
        padding: 15px clamp(16px, calc(30/1440*100vw), 30px);
        font-size: clamp(14px, calc(16/1440*100vw), 16px);
    }

    .button_hasLine {
        gap: 30px;
        font-size: 16px;
        max-width: 210px;
    }

    .btns_fix {
        max-width: 420px;
        left: initial;
        right: 0;
    }

}

@media (min-width: 960px) {
    .nav_menu_link.button.entry {
        background-color: #54BEBC;
        color: #fff;
        padding: 15px clamp(16px, calc(30/1440*100vw), 30px);
        font-size: clamp(14px, calc(16/1440*100vw), 16px);
    }

    .nav_menu_link.button.entry::before {
        filter: invert(98%) sepia(2%) saturate(8%) hue-rotate(326deg) brightness(101%) contrast(103%);
    }

    .nav_menu_link.button.entry:hover {
        background-color: #5E9493;
        border: 1px solid #5E9493;
    }

    .nav_menu_item:last-child {
        margin-top: 0px;
    }
}


/* タイトル */
.title {
    position: relative;
    color: #32364A;
    font-family: "Shippori Mincho";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0.1em;
    width: fit-content;
    z-index: 1;
}

.title .en {
    color: #F5F5F5;
    font-size: 60px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 5%);
    white-space: nowrap;
}

.bg_grey .title .en {
    color: #fff;
}

@media (min-width: 768px) {
    .title {
        font-size: 24px;
    }

    .title .en {
        font-size: clamp(65px, calc(100/1440*100vw), 100px);
        bottom: 9px;
    }
}

/* CTA */
.cta {
    padding: 56px 0;
    background-image: url(../img/common/bg_cta.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

}

.cta .title {
    color: #fff;
    margin-inline: auto;
    margin-bottom: 48px;
}

.cta .title .en {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #919191;
    color: transparent;
}

.cta_links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    gap: 56px;
}

.cta_link_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    color: #fff;
}

.cta_link_box:first-of-type {
    padding-bottom: 56px;
    border-bottom: 1px solid #fff;
}

.cta_link_text {
    text-align: center;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.40);
    font-size: 15px;
    font-weight: 500;
    line-height: 150%;
}

.cta .button_hasborder {
    border-color: #fff;

}

.cta .button_hasborder .button_hasLine_arrow img {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(5deg) brightness(102%) contrast(102%);
}

.cta .button_hasborder:hover .button_hasLine_arrow img {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(5deg) brightness(102%) contrast(102%);
}

@media (min-width: 768px) {
    .cta {
        padding: 100px 0;
    }

    .cta .title {
        margin-bottom: 70px;
        margin-inline: initial;
        margin-right: auto;
    }

    .cta_links {
        flex-direction: row;
        gap: 9%;
    }

    .cta_link_text {
        font-size: 18px;
        font-size: clamp(15px, calc(18/1440*100vw), 18px);
    }

    .cta_link_box:first-of-type {
        padding-bottom: 0px;
        border-bottom: none;
        padding-right: 9%;
        border-right: 1px solid #fff;
    }
}

/*  -----------------------------
top
--------------------------------- */
.top_mv {
    position: relative;
    height: 100svh;
}

.top_mv_img {
    height: 100%;
    overflow: hidden;
}

.top_mv_img.is-loaded img {
    transform: scale(1);
}

.top_mv_img img {
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    transition: transform 2s ease-out;
}

.mv_message {
    position: absolute;
    bottom: 32px;
    left: 4%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 74%;
}

.mv_message_title {
    color: #FFF;
    font-family: "Shippori Mincho";
    font-size: 24px;
    font-weight: 500;
    line-height: 130%;
}

.mv_message_text {
    color: #fff;
    font-family: "Shippori Mincho";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 160%;
}

/* スクロールダウンの位置 */
.scroll {
    color: #FFF;
    text-align: center;
    font-family: Cardo;
    font-size: 10px;
    font-style: italic;
    font-weight: 400;
    line-height: 100%;
    position: absolute;
    right: 2%;
    bottom: 80px;
}

/* 線のアニメーション部分 */
.scroll::before {
    animation: scroll 2s infinite;
    background-color: #fff;
    bottom: -80px;
    content: "";
    height: 70px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 1px;
}

/* 線のアニメーション */
@keyframes scroll {
    0% {
        transform: scale(1, 0);
        transform-origin: 0 0;
    }

    50% {
        transform: scale(1, 1);
        transform-origin: 0 0;
    }

    51% {
        transform: scale(1, 1);
        transform-origin: 0 100%;
    }

    100% {
        transform: scale(1, 1);
        transform-origin: 0 100%;
    }
}

@media (min-width: 768px) {
    .top_mv {
        height: auto;
    }

    .mv_message {
        bottom: 70px;
    }

    .mv_message_title {
        font-size: 36px;
    }

    .mv_message_text {
        font-size: 16px;
    }

    .scroll {
        font-size: 15px;
        bottom: 138px;
    }

    .scroll::before {
        bottom: -138px;
        height: 125px;
    }
}


.top_about {
    padding: 80px 0px;
}

.top_about .title {
    padding-left: 20px;
    margin-bottom: 32px;
}

.top_about_content_title {
    color: #32364A;
    font-family: "Shippori Mincho";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    margin-bottom: 32px;
}

.top_about_content_text {
    margin-bottom: 32px;
}

.textWrap p:not(:last-child) {
    margin-bottom: 1em;
}

.top_about_inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.top_about_img {
    display: flex;
    flex-direction: column;
    align-items: self-end;
}

.top_about_img img:first-of-type {
    width: 85%;
    max-width: 400px;
}

.top_about_img img:nth-of-type(2) {
    width: 53%;
    margin-right: auto;
    margin-top: -30px;
    max-width: 250px;
}

@media (min-width: 768px) {
    .top_about {
        padding: 150px 0px 320px;
    }

    .top_about .title {
        margin-bottom: 70px;
    }

    .top_about_content_title {
        font-size: min(3vw, 36px);
        margin-bottom: 50px;
    }

    .top_about_content_text {
        margin-bottom: 70px;
    }

    .top_about_inner {
        flex-direction: row;
        gap: 100px;
    }

    .top_about_content {
        padding-top: 70px;
        width: calc(470/1040*100%);
        flex: 1;
    }

    .top_about_img {
        width: calc(470/1040*100%);
        flex: 1;
    }

    .top_about_img img:nth-of-type(2) {
        margin-top: -46px;
    }
}


.top_philosophy {
    padding: 80px 0 80px 0;
    position: relative;
}

.top_philosophy::before {
    content: '';
    display: block;
    height: 40px;
    width: 100%;
    background-image: url(../img/common/image_deco.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-100%);
}

.top_philosophy_inner {
    display: flex;
    flex-direction: column-reverse;
    gap: 24px;
}

.top_philosophy_content .title {
    margin-inline: auto;
    margin-bottom: 32px;

}

.top_philosophy_content_title {
    color: #32364A;
    font-family: "Shippori Mincho";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 24px;
}

.top_philosophy_content_text {
    font-family: "Shippori Mincho";
    font-size: 16px;
    font-weight: 500;
    line-height: 200%;
    margin-bottom: 24px;
}

.top_philosophy_content_img {
    width: 48%;
    max-width: 240px;
    margin-left: auto;
}

@media (min-width: 768px) {
    .top_philosophy {
        padding: 100px 0 150px 0;

    }

    .top_philosophy::before {
        height: 160px;
    }

    .top_philosophy_inner {
        flex-direction: row;
        gap: calc(100/1040*100%);
    }

    .top_philosophy_img {
        width: calc(600/1040*100%);
        max-width: 600px;
    }

    .top_philosophy_content {
        padding-top: 70px;
        width: calc(540/1040*100%);
        max-width: 540px;
    }

    .top_philosophy_content .title {
        margin-bottom: 50px;
    }

    .top_philosophy_content_title {
        font-size: min(2.7vw, 28px);
        margin-bottom: 30px;
    }

    .top_philosophy_content_text {
        margin-bottom: 30px;
    }
}

.top_recruit {
    padding: 80px 0;

}

.top_recruit_content {
    margin-bottom: 24px;
}

.top_recruit_content .title {
    margin-inline: auto;
    margin-bottom: 40px;
}

.top_recruit_title {
    font-family: "Shippori Mincho";
    font-size: 22px;
    font-weight: 500;
    line-height: 170%;
    margin-bottom: 32px;
}

.top_recruit_content_text {
    font-size: 16px;
    font-weight: 600;
    line-height: 200%;
    margin-bottom: 40px;
}

.top_recruit_img img:first-of-type {
    width: 55%;
    display: block;
    margin-left: auto;
}

.top_recruit_img img:last-of-type {
    width: 42%;
    display: block;
    margin-top: -20vw;
}

@media (min-width: 768px) {
    .top_recruit {
        overflow: hidden;
        padding: 150px 0;
        position: relative;
    }

    .top_recruit_content {
        max-width: 440px;
        margin-left: 10%;
        margin-bottom: 0;
    }

    .top_recruit_content .title {
        margin-inline: initial;
        margin-bottom: 90px;
    }

    .top_recruit_title {
        font-size: min(2.7vw, 28px);
        margin-bottom: 50px;
    }

    .top_recruit_content_text {
        margin-bottom: 70px;
    }

    .top_recruit_img img:last-of-type {
        display: none;
    }

    .top_recruit_img.pc img {
        display: block;
    }

    .top_recruit_img {
        position: absolute;
        top: 0;
        right: calc(50% - 50vw);
        width: calc(500 /1440 *100vw);
    }

    .top_recruit_img img:first-of-type {
        width: 100%;
    }

    .top_recruit_img.pc {
        position: absolute;
        height: fit-content;
        width: fit-content;
        left: calc(50% - 50vw);
        top: initial;
        bottom: 50px;
    }

    .top_recruit_img.pc img {
        width: calc(200 /1440 *100vw);
    }

}

@media (min-width: 1300px) {
    .top_recruit_img.pc img {
        width: calc(300 /1440 *100vw);
    }

    .top_recruit_img.pc {
        bottom: 120px;
    }
}

.top_locations {
    padding: 80px 0;

}

.top_locations .title {
    margin-inline: auto;
    margin-bottom: 48px;
}

.top_locations_imgList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-bottom: 24px;
}

.top_locations_imgList img:first-of-type {
    grid-area: 1 / 1 / 2 / 3;
}

.top_locations_imgList img:nth-of-type(2) {
    grid-area: 2 / 1 / 3 / 2;
}

.top_locations_imgList img:last-of-type {
    grid-area: 2 / 2 / 3 / 3;
}

.top_locations_title {
    font-size: 22px;
    font-weight: 500;
    line-height: 160%;
    margin-bottom: 32px;
}

.top_locations_content_text {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 200%;
    margin-bottom: 32px;
}

@media (min-width: 768px) {
    .top_locations {
        padding: 150px 0;
        overflow: hidden;
    }

    .top_locations_inner {
        display: flex;
        gap: calc(70 /1440*100%);
        position: relative;
        padding-left: 10%;
    }

    .top_locations_inner .title {
        position: absolute;
        top: -40px;
        left: 10%;
    }

    .top_locations_imgList {
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }

    .top_locations_title {
        font-size: 24px;
        line-height: 100%;
        margin-bottom: 50px;
    }

    .top_locations_content_text {
        margin-bottom: 70px;
    }

    .top_locations_inner .title {
        position: absolute;
        top: 0px;
        left: 4%;
        writing-mode: vertical-rl
    }

    .top_locations_inner .title .en {
        bottom: inherit;
        top: -30px;
        left: -53px;
    }
}


/* アコーディオン（JSのみ） */
.news_list_parent {
    cursor: pointer;
}

.news_list_child {
    display: none;
}

.news_list_child.is-open {
    display: block;
}


/*  -----------------------------
下層ページ
--------------------------------- */
.page {
    padding-top: 90px;
}

.home.page {
    padding-top: 0;
}

/* ページヘッダー */
.page_header {
    position: relative;
    padding-top: 32px;
}

.page_header_inner {
    display: flex;
    position: relative;
}

.page_header_inner::after {
    content: '';
    display: block;
    width: 100vw;
    height: 50%;
    background-color: #F5F5F5;
    position: absolute;
    bottom: 0;
    left: calc(50% - 50vw);
    z-index: -1;
}

.page_header .page_header_title {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    margin-left: 8%;
}

.page_header .page_header_title .en {
    left: auto;
    bottom: auto;
    top: 0;
    right: 12px;
    transform: none;
    color: #EDEDED;
}

/* 縦書き */
.title_vertical {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    margin-left: 8%;
}

.title_vertical .en {
    left: auto;
    bottom: auto;
    top: 0;
    right: 12px;
    transform: none;
    color: #EDEDED;
}

.page_header_image {
    width: calc(1136/1440*100vw);
    margin-left: auto;
    margin-right: calc(50% - 50vw);
}

/* パンクズ */
.breadcrumb {
    background: #F5F5F5;
    padding: 24px 0;
}

.breadcrumb_list {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.breadcrumb_item {
    font-size: 12px;
    font-weight: 400;
    line-height: 100%;
    color: #919191;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.breadcrumb_item:not(:last-of-type)::after {
    content: '';
    width: 15px;
    display: inline-block;
    height: 1px;
    background-color: #919191;
    transform: rotate(-50deg);

}

.breadcrumb_item a {
    color: #32364A;
}

@media (min-width: 768px) {
    .breadcrumb {
        padding: 50px 0;
    }

    .breadcrumb_item {
        gap: 20px;
        font-size: 16px;
    }

    .breadcrumb_list {
        gap: 20px;
    }

    .page_header {
        padding-top: 67px;
    }

    .page_header .page_header_title, .title_vertical {
        margin-left: 0;
    }

    .page_header .page_header_title .en,
    .title_vertical .en {
        right: 20px;
    }

}


/*  -----------------------------
About - Our Heart セクション
--------------------------------- */
.feature {
    padding: 72px 0 96px;
    background-color: #F5F5F5;
}

.feature_inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.feature_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 56px 0;
}

.feature_item:last-of-type {
    border-top: 1px solid #DADADA;
}

.feature_item_image {
    max-width: 400px;
}

.feature_item_content {
    color: #32364A;
}

.feature_label {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
}

.feature_label_en {
    font-size: 18px;
    line-height: 1;
    color: #54BEBC;
}

.feature_label_line {
    display: inline-block;
    width: 30px;
    height: 1px;
    background-color: #54BEBC;
}

.feature_label_ja {
    font-size: 20px;
    line-height: 1;
    color: #54BEBC;
}

.feature_title {
    font-size: 24px;
    letter-spacing: 0.05em;
    line-height: 1.3;
    margin-bottom: 24px;
}

.feature_text {
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.05em;
}

.feature_text p+p {
    margin-top: 20px;
}

@media (min-width: 768px) {
    .feature_inner {
        justify-content: center;
    }

    .feature_item {
        flex-direction: row;
        align-items: center;
        padding: 100px 0;
        gap: 6.7%;
    }

    .feature_item:last-of-type {
        flex-direction: row-reverse;
    }

    .feature_item_image {
        flex-basis: 38%;
    }

    .feature_item_content {
        flex-basis: 55%;
    }

    .feature_title {
        font-size: min(2.4vw, 34px);
    }

    .feature_label {
        margin-bottom: 20px;
    }

    .feature_label_en {
        font-size: 24px;
    }
}

/*  -----------------------------
About - Value セクション
--------------------------------- */
.value {
    padding: 80px 0;
    background-color: #fff;
}

.value_inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.value_label {
    border-bottom: 1px solid #32364A;
    padding-bottom: 16px;
    align-self: flex-start;
    margin-inline: auto;
    width: fit-content;
}

.value_label p {
    font-size: 16px;
    letter-spacing: 0.2em;
    line-height: 1.4;
    color: #32364A;
}

.value_body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.value_intro {
    text-align: center;
    color: #32364A;
}

.value_intro_main {
    font-size: 22px;
    line-height: 1.6;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}

.value_intro_sub {
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 200%;
}

.value_indicators {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.value_indicators_heading {
    display: inline-flex;
    align-items: flex-end;
    gap: 6px;
    padding: 5px 40px 8px;
    border-top: 1px solid #54BEBC;
    border-bottom: 1px solid #54BEBC;
}

.value_indicators_num {
    font-size: 28px;
    color: #54BEBC;
    line-height: 1;
    margin-bottom: -4px;
}

.value_indicators_label {
    font-size: 16px;
    color: #54BEBC;
    letter-spacing: 0.08em;
}

.value_indicators_list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.value_indicator {
    border-radius: 50%;
    border: 2px solid #54BEBC;
    padding: 8px;
}

.value_indicator span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;

    position: relative;
    color: #fff;
    font-size: 16px;
    letter-spacing: 0.16em;
    background: #54BEBC;

    animation: pulse-glow 2.5s infinite ease-in-out;
}

/* 点滅（パルス）アニメーションの定義 */
@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 5px 0 rgba(84, 190, 188, 0.4);
    }

    50% {
        /* 20pxまで広がり、色を少し濃くする */
        box-shadow: 0 0 20px 5px rgba(84, 190, 188, 0.8);
    }

    100% {
        box-shadow: 0 0 5px 0 rgba(84, 190, 188, 0.4);
    }
}


.value_photo {
    width: 100%;
    max-width: 640px;
    margin-top: 16px;
    position: relative;
}

.value_photo_main img {
    display: block;
}

.value_photo_note {
    position: absolute;
    right: -4%;
    bottom: -30%;
    transform: rotate(-10deg);
}

@media (min-width: 960px) {
    .value {
        padding: 150px 0px;
    }

    .value_inner {
        flex-direction: row;
        gap: 100px;
    }


    .value_label {
        border-bottom: none;
        border-right: 1px solid #32364A;
        padding-right: 16px;
        align-self: flex-start;
        padding-right: 24px;
    }

    .value_label p {
        writing-mode: vertical-rl;
        font-size: 24px;
        letter-spacing: 0.2em;
        line-height: 1.4;
        color: #32364A;
    }

    .value_body {
        align-items: center;
    }

    .value_intro_main {
        font-size: 24px;
    }

    .value_indicators_list {
        gap: 16px;
    }

    .value_indicator span {
        width: 120px;
        height: 120px;
        font-size: 20px;
    }

    .value_photo_note {
        position: absolute;
        right: -20%;
        bottom: 17%;
    }
}


/* 代表挨拶 */
.message {
    padding: 80px 0px;
}

.message_inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.message_content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.message_title {
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 24px;
}

.message_text {
    margin-bottom: 24px;
}

.message_text p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.message_name {
    display: flex;
    align-items: center;
    gap: 5px;
}

.message_name span:first-of-type {
    display: flex;
    align-items: center;
    gap: 5px;
}

.message_name span:first-of-type::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 1px;
    background-color: #32364A;
}

.message_name span:last-of-type {
    font-size: 18px;
    font-weight: 500;
}

@media (min-width: 960px) {
    .message {
        padding: 150px 0px;
        padding-bottom: 300px;
    }

    .message_inner {
        flex-direction: row;
        gap: 100px;
    }

    .message_title {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .message_content {
        flex-direction: row;
        align-items: flex-start;
        gap: 9.6%;
    }

    .message_content_inner {
        width: 52%;
    }

    .message_content_image {
        width: 33%;
    }
}

.overview {
    padding: 80px 0 100px 0;
    position: relative;
}

.overview::before {
    content: '';
    display: block;
    height: 40px;
    width: 100%;
    background-image: url(../img/common/image_deco.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-100%);
}

.overview_inner {
    display: flex;
    gap: 10%;
    width: 90%;
}

.table {
    width: 100%;
}

.table_item {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #DADADA;
    width: 100%;
}


.table_item dt, .table_item dd {
    padding: 24px 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
}

.table_item:first-of-type dt {
    padding-top: 0;
}

.overview_image {
    margin-top: 80px;
}

.table_item dd .small {
    font-size: 14px;
}

@media (min-width: 768px) {
    .overview {
        padding: 100px 0;
        position: relative;
    }

    .overview::before {
        height: 160px;
    }

    .table_item {
        flex-direction: row;
    }

    .table_item:first-of-type dd {
        padding-top: 0;
    }

    .table_item dt {
        width: 200px;
        min-width: 200px;
        padding: 50px;
        display: flex;
        align-items: center;
    }

    .table_item dd {
        padding: 50px;
    }

    .overview_image {
        margin-top: 100px;
        width: 65vw;
        margin-left: auto;
    }
}

.history {
    padding-bottom: 100px;
}

.history_inner {
    display: flex;
    gap: 10%;
    width: 90%;
}

@media (min-width: 768px) {
    .history {
        padding-bottom: 150px;
    }
}

.kanpo {
    padding: 56px 0;
}

.kanpo_inner {
    display: flex;
    flex-direction: column;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 50px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.70);
}

.kanpo_content_title {
    font-size: 24px;
    line-height: 1.6;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 24px;
}

.kanpo_content_text p {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}

.image_slider_container {
    display: flex;
    width: 100%;
}

.swiper-wrapper {
    transition-timing-function: linear;
}

.button_hasLine.button_hasLine_black::before {
    background-color: #32364A;
}

.button_hasLine.button_hasLine_black::after {
    background-color: #32364A;
}

@media (min-width: 768px) {
    .kanpo {
        padding: 105px 0;
        position: relative;
    }

    .kanpo_inner {
        flex-direction: row;
        padding: 60px;
        justify-content: center;
        align-items: center;
        gap: 50px;

    }

    .kanpo_content_title {
        margin-bottom: 32px;
        font-size: 28px;
    }

    .kanpo_images {
        position: absolute;
        top: 100px;
        top: 100px;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: -1;
        clip-path: inset(0% 0% 0% 50%);
    }

    .swiper-slide img {
        object-fit: cover;
        max-width: 933px;
        height: 700px;
        aspect-ratio: 933/700;
    }
}

/*  -----------------------------
Locations - 店舗情報
--------------------------------- */
.shop {
    padding: 80px 0 120px;
    background-color: #F5F5F5;
}

.shop_inner {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.shop_block {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.shop_block_images {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.shop_block_mainImage img,
.shop_block_subImage img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.shop_block_subImages {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}


.shop_block_name {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 24px;
}

.shop_block_table {
    border-top: 1px solid #DADADA;
}

.shop_block_row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 0;
    border-bottom: 1px solid #DADADA;
    font-size: 16px;
}

.shop_block_head {
    width: 6em;
}

.shop_block_body {
    line-height: 1.6;
}

.shop_block_time {
    display: flex;
    justify-content: flex-start;
    gap: 24px;
}

.shop_block_time p:first-of-type {
    width: 90px;
}

.shop_block_map {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #32364A;
    font-size: 16px;
    color: #32364A;
}

.shop_block_mapIcon {
    width: 10px;
    height: 16px;
    background-image: url("../img/common/icon_map.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

@media (min-width: 960px) {
    .shop {
        padding: 100px 0px 200px 0;
    }

    .shop_inner {
        gap: 100px;
    }

    .shop_block {
        flex-direction: row;
        gap: calc(70/1040*100%);
        align-items: flex-start;
    }

    .shop_block:first-of-type {
        padding-bottom: 100px;
        border-bottom: 1px solid #DADADA;
    }

    .shop_block_images {
        max-width: 400px;
        width: 38%;
    }

    .shop_block_info {
        width: 55%;
        max-width: 570px;
    }


    .shop_block_name {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .shop_block_row {
        flex-direction: row;
        align-items: center;
        gap: 9%;
        padding: 30px 10%;
    }

    .shop_block_head {
        flex: 0 0 70px;
    }

    .shop_block_body {
        flex: 1;
    }
}

/*  -----------------------------
Recruitment - しずく堂薬局の強み
--------------------------------- */
.strenght {
    padding: 80px 0 0px;
}

.title.strenght_title {
    margin-inline: auto;
    margin-bottom: 40px;
}

.strenght_inner {
    text-align: center;
    padding-bottom: 100px;
}

.strenght_inner p {
    font-size: 16px;
    line-height: 1.8;
}

.strengths_content {
    background-color: #fff;
    border-radius: 10px;
    padding: 60px 0 80px;
    position: relative;
}

.strengths_content::before {
    content: '';
    display: block;
    height: 40px;
    width: 100%;
    background-image: url(../img/common/image_deco_white.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-100%);
}

.strengths_content_inner {
    width: 88%;
    max-width: 1040px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.strengths_item {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 60px;
    border-bottom: 1px solid #DADADA;
}

.strengths_item:last-of-type {
    border-bottom: none;
}

.strengths_item_label p {
    font-size: 24px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0.2em;
}

.strengths_item_body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.strengths_item_image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.strengths_item_text p {
    font-size: 16px;
    line-height: 2;
}

.strengths_item_text p+p {
    margin-top: 8px;
}

.strengths_divider {
    width: 100%;
    height: 1px;
    background-color: #DADADA;
}

@media (min-width: 960px) {
    .strenght {
        padding: 120px 0 0px;
    }

    .strenght_inner {
        padding-bottom: 210px;
    }

    .strengths_content::before {
        height: 170px;
    }

    .title.strenght_title {
        margin-bottom: 70px;
    }

    .strengths_item_body {
        gap: 50px;
        align-items: flex-start;
        padding-top: 60px;
    }

    .strengths_item_image {
        flex: 0 0 58%;
    }

    .strengths_item {
        flex-direction: row;
        gap: calc(70/1040*100%);
        padding-left: 9%;
        padding-right: 9%;
        padding-bottom: 70px;
    }

    .strengths_content_inner {
        gap: 70px;
    }

    .strengths_item_text {
        flex: 1;
    }

    .strengths_item_label {
        flex-shrink: 0;
    }

    .strengths_item_label p {
        writing-mode: vertical-rl;
        font-size: 32px;
    }

    .strengths_item:first-of-type .strengths_item_label p {
        text-align: end;
    }

    .spaces {
        display: inline-block;
        padding-top: 1em;

    }

}

/*  -----------------------------
Recruitment - Our Goals
--------------------------------- */
.goals {
    padding: 100px 0;
}

.goals_header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
    position: relative;
    margin-bottom: 50px;
}

.goals_header_tag {
    align-self: flex-end;
    background-color: #54BEBC;
    color: #fff;
    padding: 22px 18px;
    border-radius: 5px;
    position: relative;
    margin-left: auto;
    width: fit-content;
}

.goals_header_tag::after {
    content: '';
    position: absolute;
    left: 26px;
    bottom: -33px;
    display: inline-block;
    width: 40px;
    height: 50px;
    background-image: url(../img/common/icon_hukidashi.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

.goals_header_tag span {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.15em;
    white-space: nowrap;
}

.goals_header_tag.inview {
    transition-delay: .8s;
}

span.dot {
    background-image: radial-gradient(circle, #fff 1.5px, transparent 1.5px);
    background-position: 0 0;
    /* 位置の調整 */
    background-size: 1.1em 1.1em;
    background-repeat: repeat-x;
    padding-top: 0.6em;
}

.goals_header_en {
    font-size: 56px;
    line-height: 1;
    color: #fff;
    opacity: 0.8;
    margin-bottom: -18px;
}

.goals_header_ja {
    font-size: 20px;
    letter-spacing: 0.1em;
}

.goals_list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.goals_item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: center;
    position: relative;
}


.goals_item_card {
    background-color: #fff;
    padding: 28px 20px;
    width: 90%;
    max-width: 670px;

}

.goals_item:nth-of-type(odd) .goals_item_card {
    margin-left: auto;
}

.goals_item_title {
    font-size: 20px;
    letter-spacing: 0.05em;
    margin-bottom: 18px;
    line-height: 1.6;
}

.goals_item_text {
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.05em;
}

.goals_item_text p+p {
    margin-top: 10px;
}

.goals_item_name {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    color: #336D9D;
    margin-top: 22px;
    font-size: 14px;
    letter-spacing: 0.1em;
}

.goals_item_name span:first-of-type {
    font-size: 16px;
}

.goals_item_deco {
    position: absolute;
    width: 16%;
    bottom: 0;
    left: -3%;
    max-width: 90px;
}

.goals_item:nth-of-type(even) .goals_item_deco {
    bottom: 0;
    left: auto;
    right: -4%;
    width: 20%;
    max-width: 140px;
}

.goals_item:last-of-type .goals_item_deco {
    max-width: 100px;
}

.goals_item_deco img {
    height: auto;
    display: block;
}

@media (min-width: 960px) {
    .goals {
        padding: 100px 0 150px;
    }

    .goals_header {
        margin-bottom: 70px;
    }

    .goals_header_tag {
        margin-right: 0;
    }

    .goals_header_en {
        font-size: 100px;
        margin-bottom: -24px;
    }

    .goals_header_ja {
        font-size: 24px;
        letter-spacing: 0.1em;
    }

    .goals_list {
        width: 88%;
        max-width: 1040px;
        margin: 0 auto;
        gap: 120px;
    }

    .goals_item_right {
        grid-template-columns: 1fr auto;
        justify-content: start;
    }

    .goals_item_card {
        padding: 50px;
    }

    .goals_item_title {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .goals_item_text {
        font-size: 16px;
    }

}

/*  -----------------------------
Recruitment - Daily Schedule
--------------------------------- */
.schedule {
    padding: 80px 0 120px;
}

.schedule_inner .title {
    margin-inline: auto;
    margin-bottom: 50px;

}

.schedule .goals_header_tag {
    margin-left: auto;
    padding: 13px 32px;
    margin-bottom: 80px;
}

.schedule .goals_header_tag::after {
    bottom: -43px;
}

.schedule_list {
    --time-w: 50px;
    --col-gap: 16px;
    --dot: 15px;
    --dot-half: 7px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.schedule_list::before {
    content: '';
    position: absolute;
    left: calc(var(--time-w) + var(--col-gap) + var(--dot-half));
    top: 8px;
    bottom: 8px;
    width: 1px;
    background-color: #336D9D;
}

.schedule_item {
    display: grid;
    grid-template-columns: var(--time-w) var(--dot) 1fr;
    column-gap: var(--col-gap);
    align-items: start;
    position: relative;
}

.schedule_time {
    font-size: 18px;
    line-height: 1;
    color: #32364A;
    padding-top: 2px;
}

.schedule_dot {
    width: var(--dot);
    height: var(--dot);
    border-radius: 999px;
    background-color: #336D9D;
    position: relative;
    z-index: 1;
    margin-top: 2px;
    box-shadow: 0 0 4px rgba(51, 109, 157, 1);
}

.schedule_event {
    font-size: 18px;
    font-weight: 500;
    color: #336D9D;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.schedule_event_meta {
    font-size: 16px;
    letter-spacing: 0.05em;
}

.schedule_desc {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 500;
    color: #32364A;
    letter-spacing: 0.05em;
    line-height: 1.8;
}

.schedule_images img {
    display: block;
}

.schedule_images img:first-of-type {
    width: 60%;
    margin-left: auto;
}

.schedule_images img:last-of-type {
    width: 80%;
    margin-right: auto;
}

@media (min-width: 768px) {
    .schedule {
        padding: 150px 0;
        background-color: #fff;
    }

    .schedule .goals_header_tag {
        margin-left: inherit;
        margin-right: 10%;
        padding: 13px 32px;
    }


    .schedule_inner .title {
        margin-bottom: 70px;
    }

    .schedule_content {
        display: flex;
        gap: 6.7%;
    }

    .schedule_list {
        --time-w: 42px;
        --col-gap: 50px;
        --dot-half: 6px;
        gap: 50px;
        padding-left: 0px;
    }

    .schedule_images {
        padding-top: 40px;
    }

    .schedule_images img:first-of-type {
        width: 80%;
        margin-left: inherit;
        margin-bottom: 70px;
    }

    .schedule_images img:last-of-type {
        width: 100%;
        max-width: 400px;
    }
}

/*  -----------------------------
Recruitment - しずく堂で働く理由
--------------------------------- */
.reason {
    padding: 100px 0 150px;
    background-color: #F5F5F5;
}

.reason_inner {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.reason .goals_header_tag {
    padding: 13px 35px;
    margin-left: initial;
    margin-right: auto;

}


.reason .goals_header_tag::after {
    background-image: url(../img/common/icon_hukidashi_02.svg);
    left: 60px;
    bottom: -40px;
}

.reason .title {
    margin-inline: auto;
}

.reason_blocks {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.reason_block {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.reason_block:first-of-type {
    padding-bottom: 60px;
    border-bottom: 1px solid #DADADA;
}

.reason_block_image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.reason_q {
    font-size: 18px;
    line-height: 1.6;
    color: #336D9D;
    font-weight: 500;
    margin-bottom: 14px;
}

.reason_a p {
    font-size: 16px;
    line-height: 2;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.reason_a p+p {
    margin-top: 10px;
}

.reason_block_qa+.reason_block_qa {
    margin-top: 32px;
}


.reason_future_title {
    font-size: 18px;
    line-height: 1.6;
    color: #336D9D;
    font-weight: 500;
    margin-bottom: 30px;
    text-align: left;
}

.reason_future_content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.reason_future_item {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.reason_future_item:first-child {
    padding-bottom: 40px;
    border-bottom: 1px solid #DADADA;
}

.reason_future_text p {
    font-size: 16px;
    line-height: 2;
    letter-spacing: 0.05em;
}

.reason_future_text p+p {
    margin-top: 10px;
}

.reason_future_image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.reason_future_line {
    display: none;
}

@media (min-width: 768px) {
    .reason_inner {
        gap: 0;
    }

    .reason .goals_header_tag {
        margin-left: 20%;
        margin-bottom: 66px;
    }

    .reason .title {
        margin-bottom: 100px;
    }

    .reason_blocks {
        gap: 70px;
        margin-bottom: 100px;
    }

    .reason_block {
        flex-direction: row;
        gap: 6.7%;
        align-items: flex-start;
    }

    .reason_block:first-of-type {
        padding-bottom: 70px;
    }

    .reason_q {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .reason_block_image {
        flex: 0 0 300px;
    }

    .reason_block_qa+.reason_block_qa {
        margin-top: 50px;
    }


    .reason_future_content {
        flex-direction: row;
        gap: 0px;
        align-items: stretch;
    }

    .reason_future_item:first-child {
        padding-bottom: 0;
        border-bottom: none;
        border-right: 1px solid #DADADA;
        padding-right: 40px;
    }

    .reason_future_item:last-of-type {
        padding-left: 40px;
    }

    .reason_future_title {
        font-size: 20px;
        margin-bottom: 30px;
    }

    .reason_future_item {
        gap: 30px;
        flex: 1;
    }

    .reason_future_text {
        flex: 1;
    }

}

/* 採用フロー */
.flow {
    padding: 80px 0;
}

.flow_title {
    font-size: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #32364A;
    width: fit-content;
    margin-bottom: 48px;
}

.flow_item {
    display: flex;
    width: 100%;
    padding: 20px;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    border: 1px solid #32364A;

    opacity: 0;
    transform: translateY(20px);
    /* 少し下から */
    transition: opacity 2s cubic-bezier(0.22, 1, 0.36, 1),
        transform 2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
    /* アニメーションを滑らかに */
}

/* 表示時 */
.flow_item.is-show {
    opacity: 1;
    transform: translateY(0);
}

.flow_item_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    align-self: stretch;
}

.flow_step {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #54BEBC;
    font-family: Cardo;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
}

.flow_step span {
    display: flex;
    display: flex;
    align-items: center;
    gap: 10px;
}

.flow_step span::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 1px;
    background-color: #54BEBC;
}

.flow_list_title {
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;

}

.flow_text {
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%
}

.flow_list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

@media (min-width: 768px) {
    .flow {
        padding: 150px 0;
    }



    .flow_list_title {
        font-weight: 500;
    }


}

@media (min-width: 960px) {
    .flow_item {
        max-width: 240px;
        padding: 40px 20px;
    }

    .flow_list {
        flex-direction: row;
        width: 100%;
        max-width: 1050px;
    }

    .inner.flow_inner {
        display: flex;
        justify-content: space-between;
        gap: 5%;
        width: 94%;
        max-width: 1240px;
        margin-inline: auto;
    }

    .flow_title {
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        border-bottom: none;
        padding-right: 20px;
        border-right: 1px solid #32364A;
    }
}

/* 募集要項 */
.recruitment {
    padding: 80px 0;
}

.recruitment .title {
    margin-inline: auto;
    margin-bottom: 80px;
}

.recruitment .table {
    max-width: 775px;
    margin-inline: auto;
}

.recruitment .table dd {
    line-height: 2;
    padding-top: 0;
}

@media (min-width: 768px) {
    .recruitment {
        padding: 150px 0;
    }

    .recruitment .title {
        margin-bottom: 120px;
    }

    .recruitment .table dd {
        padding-top: 50px;
    }

    .recruitment .table_item:first-of-type dd {
        padding-top: 0;
    }
}

/* エントリー */
.entryContent {
    padding: 80px 0;
}

.entryContent_inner {
    display: flex;
    gap: 5%;
}

.entry_content_text {
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.8;
    margin-bottom: 42px;
}

.entryContent_textArea {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 768px) {
    .entryContent {
        padding: 150px 0;
    }

    .entry_content_text {
        font-size: 18px;
        margin-bottom: 50px;
    }

    .entryContent_textArea {
        margin-inline: auto;
    }
}

.privacy_content {
    padding: 80px 0;
}

.privacy_content_inner {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.privacy_title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    padding-bottom: 10px;
    border-bottom: 1px solid #32364A;
    margin-bottom: 24px;
}

.privacy_text {
    font-family: "Shippori Mincho";
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.privacy_box ul {
    margin-top: 24px;
}

.privacy_box ul li {
    font-size: 14px;
    line-height: 2;
}

.privacy_box ul+p {
    margin-top: 24px;
}

.privacy_text_add {
    margin-top: 24px;
}

@media (min-width: 768px) {
    .privacy_content {
        padding: 150px 0;
    }

    .privacy_content_inner {
        gap: 70px;
    }

    .privacy_text {
        font-size: 16px;
    }

    .privacy_title {
        font-size: 20px;
        margin-bottom: 30px;
    }

    .privacy_box ul {
        margin-bottom: 30px;
    }

    .privacy_box ul li {
        font-size: 16px;
    }

    .privacy_text_add {
        margin-top: 30px;
    }
}







/*
 * お問い合わせフォーム
 */
/*  -----------------------------
お問い合わせフォーム（cf7)
--------------------------------- */
.formWrapper {
    padding: 56px 0 80px 0;
    background: #F5F5F5;
}

.formWrapper_inner {
    max-width: 615px;
}

.formWrapper_text {
    text-align: center;
    font-family: "Shippori Mincho";
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 1px;
    margin-bottom: 32px;
}

.formWrapper_req {
    display: flex;
    padding-right: 50px;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    text-align: right;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.formWrapper_req span {
    width: 8px;
    height: 8px;
    aspect-ratio: 1/1;
    border-radius: 6px;
    background: #54BEBC;
}

@media (min-width: 768px) {
    .formWrapper {
        padding: 100px 0 150px 0;
    }

    .formWrapper_text {
        font-size: 20px;
        margin-bottom: 70px;
    }

    .formWrapper_req {
        font-size: 16px;
    }
}

.form_group {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.form_group_inner.birth_wrapper {
    align-items: end;
}

.form_label {
    font-size: 16px;
    margin-bottom: 10px;
    color: #32364A;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wpcf7-list-item.first {
    margin: 0;
}

.form_required {
    display: inline-block;
    width: 8px;
    height: 8px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #54BEBC;
}

.form_group_inner {
    display: flex;
    gap: 8px;
}

.form_group_inner.file_wrapper {
    flex-direction: column;
}

@media (min-width: 768px) {

    .form_group_inner.file_wrapper {
        flex-direction: row;
    }
}



/* --- テキスト入力、メール、電話番号 --- */
.form input[type=text],
.form input[type=email],
.form input[type=tel],
.form input[type=date],
.form input[type=number],
.form select,
.form textarea {
    width: 100%;
    padding: 10px;
    height: 100%;
    font-size: 16px;
    font-weight: 500;
    border: none;
    border-radius: 5px;
    background-color: #FFFFFF;
}

.form input::placeholder,
.form textarea::placeholder {
    color: #919191;
}

/* --- テキストエリア --- */
.form textarea {
    min-height: 200px;
    resize: vertical;
}

/* ラジオボタン */
.form input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    width: 15px;
    height: 15px;
    border: 1px solid #32364A;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
    position: relative;
    top: -1px;
}

/* 選択時のスタイル */
.form input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #32364A;
}

input[type=number].birthyear {
    max-width: 100px;
}

input[type=number].birthmonth, input[type=number].birthday {
    width: 60px;
}


/* ファイルボタン */
/* 親要素：横並びの設定 */
.file_wrapper {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    width: 15px;
    height: 15px;
    border: 1px solid #32364A;
    border-radius: 2px;
    background-color: #fff;
    cursor: pointer;
    position: relative;
    top: -1px;
}

/* チェックマークのデザイン（疑似要素） */
input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 8px;
    border: solid #32364A;
    /* チェックマークの色 */
    border-width: 0 2px 2px 0;
    /* L字型に線を引く */
    transform: rotate(45deg);
    /* 45度回転させてチェックマークに見せる */
}

/* ボタン（ラベル）の装飾 */
.file_btn {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    /* 白背景 */
    border-radius: 8px;
    /* 角丸 */
    width: 100%;
    /* 横幅いっぱい（親のflexで調整） */
    max-width: 300px;
    height: 60px;
    padding-left: 16px;
    /* ボタンの高さ */
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s, box-shadow 0.3s;
    position: relative;
}

/* ホバーした時の反応 */
.file_btn:hover {
    background-color: #f9f9f9;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* テキストのスタイル */
.file_btn span {
    font-size: 16px;
    color: #333;
}

/* 元のファイル選択ボタン（不細工なパーツ）を隠す */
.file_btn input[type="file"] {
    display: none;
}

/* 削除ボタン（×印）の初期状態は非表示 */
.file-remove {
    display: none;
    /* 初期は隠す */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-color: #ececec;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
}

/* ファイル名の表示エリア */
.file-name {
    padding-right: 35px;
    /* 削除ボタンと重ならないように余白を確保 */
}

span.wpcf7-form-control.wpcf7-acceptance a {
    text-decoration: underline;
    margin-right: 8px;
}

.wpcf7-acceptance .form_required {
    position: relative;
    top: -2px;
}

/* エラーメッセージ */
.wpcf7-not-valid-tip {
    position: absolute;
}

/* --- 送信ボタン --- */

.submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 470px;
    height: 66px;
    font-size: 16px;
    color: #fff;
    background-color: #54BEBC;
    border: 1px solid #54BEBC;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
    -webkit-appearance: none;
    appearance: none;
    margin-inline: auto;
    text-align: center;
    font-family: "Noto Serif JP";
    font-weight: 500;
    line-height: 1;
    letter-spacing: 1.8px;
    margin-top: 30px;
    transition: box-shadow 0.3s ease;
}

.submit:hover {
    box-shadow: 2px 2px 0 0 #A9B1B0;
}

.formWrapper .button_hasborder {
    margin-inline: auto;
}

@media (min-width: 768px) {
    .submit {
        margin-top: 50px;
        font-size: 18px;
    }

    .form input[type=text],
    .form input[type=email],
    .form input[type=tel],
    .form input[type=date],
    .form input[type=number],
    .form select,
    .form textarea {
        width: 100%;
        padding: 17px 10px;
        height: 100%;
        font-size: 16px;
        font-weight: 500;
        border: none;
        border-radius: 5px;
        background-color: #FFFFFF;
    }

    input[type=number].birthmonth, input[type=number].birthday {
        width: 100px;
    }

}


.error404 {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.error404 main .inner {
    padding: 200px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 48px;
}

.error404 .title {
    margin-inline: auto;
}

.title_not_found {
    text-align: center;
    font-size: 20px;
    margin-bottom: 16px;
}

.text_not_found {
    font-size: 16px;
    line-height: 2;
    margin-bottom: 56px;
}

.error404 .button_hasborder {
    margin-inline: auto;
}