@charset "UTF-8";

/**** header ****/
.page-header {
    background: #2ebdb0;
    position: relative;
    overflow: hidden;
    padding: 10rem 2rem;
    color: #fff;
    text-align: center;
    z-index: 1;
}
.page-header .page-header__lines {
    width: min(50rem, 95vw);
    position: absolute;
    top: -7rem;
    right: -7rem;
}
.page-header__inner {
    position: relative;
    z-index: 1;
}
.page-header__inner .page-header__en {
    color: #85d1c2;
    font-size: min(96px, 8.6vw);
    font-weight: 600;
    letter-spacing: 0.05em;
}
.page-header__inner .page-header__title {
    font-size: min(40px, 3.5vw);
    font-weight: bold;
    letter-spacing: 0.12em;
    margin-top: 1rem;
}
@media (max-width: 768px) {
    .page-header{
        padding: 7rem 1rem 6rem;
    }
    .page-header .page-header__lines {
        width: min(50rem, 90vw);
        top: -5rem;
        right: -3rem;
    }
    .page-header__inner .page-header__title {
        font-size: min(40px, 4vw);
    }
}
@media (max-width: 480px) {
    .page-header .page-header__lines {
        width: min(50rem, 120vw);
        top: -5rem;
        right: -5rem;
    }
}


/**** breadcrumb ****/
.breadcrumb__inner {
    padding: 20px;
    width: 95%;
    margin: 0 auto;
}
.breadcrumb__list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
    font-size: min(13px, 1.3vw);
    font-weight: bold;
    color: #0097b7;
}
.breadcrumb__item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
}
.breadcrumb__item::after {
    content: "";
    display: block;
    width: 14px;
    height: 1px;
    margin: -2px 5px 0;
    background: #0097b7;
}
.breadcrumb__item:last-of-type::after {
    display: none;
}
.breadcrumb__item:last-child {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}
@media (max-width: 768px) {
    .breadcrumb__inner {
        padding: 20px 5px;
    }
    .breadcrumb__list {
        font-size: min(13px, 2.5vw);
    }
}

/**** footer（下層のみ） ****/
.footer {
    background: #fff;
    position: relative;
    z-index: 1;
}

/**** 背景固定線 ****/
.bg-fixed-lines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.25;
}
.bg-fixed-lines .bg-line-svg {
    width: 100%;
    height: 100%;
}
@media (max-width: 768px) {
    .bg-fixed-lines {
        top: 340px;
    }
}
@media (max-width: 480px) {
    .bg-fixed-lines {
        top: 314px;
    }
}

/**** main内共通****/
.m-inner {
    padding: 20px;
    width: 95%;
    margin: 0 auto;
    position: relative;
}
img {
    width: 100%;
}
@media (max-width: 768px) {
    .m-inner {
        padding: 20px 10px;
    }
}


/**** intro ****/
.intro__inner {
    text-align: center;
}
.intro .section-label {
    font-size: min(27px, 2.7vw);
    font-weight: 500;
    color: #a1d9e4;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}
.intro .section-title {
    font-size: min(32px, 3.2vw);
    font-weight: 600;
    color: #0097b7;
    letter-spacing: 0.12em;
    line-height: 1.5;
}
.intro .intro__text {
    font-size: min(17px, 2vw);
    line-height: 2;
    margin-top: 2.5rem;
}
@media (max-width: 768px) {
    .intro .section-label {
        font-size: min(27px, 5vw);
        margin-bottom: 0.5rem;
    }
    .intro .section-title {
        font-size: min(32px, 5.3vw);
    }
    .intro .intro__text {
        font-size: min(17px, 4vw);
        text-align: left;
        width: 90%;
        margin: 2rem auto 0;
    }
}

/**** contact ****/
.contact {
    background: #f8f8f8;
    position: relative;
    z-index: 1;
}
.contact .contact__inner {
    padding: 5rem 20px 10rem;
}
.contact .section-label,
.about-ceremo .section-label,
.team-ceremo .section-label {
    text-align: center;
    font-size: min(71px, 7.1vw);
    font-weight: 600;
    color: #0097b7;
    letter-spacing: 0.05em;
    margin-bottom: 1.3rem;
}
.contact .section-subtitle,
.about-ceremo .section-subtitle,
.team-ceremo .section-subtitle {
    font-size: min(17px, 1.7vw);
    font-weight: bold;
    text-align: center;
    color: #0097b7;
}
.about-ceremo .section-subtitle {
    margin-bottom: 5rem;
}
.team-ceremo .section-subtitle {
    margin-bottom: 2.5rem;
}
.contact__card {
    display: flex;
    background: #fff;
    border: 2px solid #0097b7;
    box-sizing: border-box;
    padding: 2em;
    border-radius: 10.5px;
    width: 99%;
    margin-top: 6rem;
    box-shadow: 10px 10px #80cbdb;
}
.contact__card .contact__image {
    width: min(400px, 35%);
}
.contact__image img {
    border-radius: 10px;
    height: 100%;
    object-fit: cover;
}
.contact__body {
    width: 63.5%;
    margin-left: 3em;
}
.contact__main {
    align-items: end;
    display: flex;
    justify-content: space-between;
    padding: 0 10px 15px;
}
.contact__main-text {
    width: 70%;
}
.contact__main-text .contact__line-label {
    width: min(157px, 70%);
}
.contact__main-text .contact__title {
    font-size: min(29px, 2.9vw);
    font-weight: bold;
    margin: 1.5rem 0;
    width: 120%;
}
.contact__main-text .contact__text {
    font-size: min(17px, 1.7vw);
    line-height: 1.9;
    font-weight: 500;
}
.contact__main .contact__qr {
    width: min(120px, 33%);
    margin-right: 2rem;
    margin-left: 1rem;
}
.contact__tel {
    border-top: 1px solid #0097b7;
    padding: 15px 10px 0;
    display: flex;
    align-items: center;
}
.contact__tel .contact__tel-title {
    font-size: min(13px, 1.3vw);
    font-weight: 500;
}
.contact__tel .contact__tel-number {
    display: flex;
    align-items: center;
    font-size: min(18px, 1.8vw);
    font-weight: 500;
    letter-spacing: 0.05em;
}
.contact__tel .contact__tel-number a {
    pointer-events: none;
    color: inherit;
    text-decoration: none;
    cursor: default;
}
.contact__tel-number .icon_tel {
    display: block;
    width: 12px;
    margin: -5px 3px 0 10px;
}
@media (max-width: 768px) {
    .contact .contact__inner {
        padding: 4rem 10px 5rem;
    }
    .contact .section-label,
    .about-ceremo .section-label,
    .team-ceremo .section-label {
        font-size: min(71px, 10vw);
    }
    .contact .section-label {
        margin-bottom: 1rem;
    }
    .contact .section-subtitle,
    .about-ceremo .section-subtitle,
    .team-ceremo .section-subtitle {
        font-size: min(17px, 4vw);
    }
    .contact__card {
        display: block;
        margin-top: 2.5rem;
        padding: 1em;
    }
    .contact__card .contact__image {
        width: 100%;
        height: 40vw;
    }
    .contact__body {
        width: 100%;
        margin-left: 0;
    }
    .contact__main {
        display: block;
        padding: 0 0px 15px;
    }
    .contact__main-text {
        width: 100%;
    }
    .contact__main-text .contact__title {
        font-size: min(29px, 5vw);
        width: 100%;
    }
    .contact__main-text .contact__text {
        font-size: min(17px, 4vw);
    }
    .contact__main .contact__btn {
        width: min(270px, 85%);
        margin: 2rem auto 1rem;
    }
}

/**** about-ceremo ****/
.about-ceremo {
    background: #f8f8f8;
    padding: 5rem 0 10rem;
    position: relative;
    z-index: 1;
}
.about-ceremo__list {
    display: flex;
    gap: 2%;
    width: 95%;
    margin: 0 auto;
}
.about-ceremo__item {
    flex: 1;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.about-ceremo__item::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.5s ease;
    z-index: 0;
}
.about-ceremo__item--teal::before  { background-image: url('../img/about_img_01.webp'); }
.about-ceremo__item--blue::before  { background-image: url('../img/about_img_02.webp'); }
.about-ceremo__item--green::before { background-image: url('../img/about_img_03.webp'); }
.about-ceremo__item--pink::before  { background-image: url('../img/about_img_04.webp'); }
.about-ceremo__link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: min(248px, 20.2vw);
    position: relative;
    text-decoration: none;
}
.about-ceremo__link::after {
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #0000007a, transparent);
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 0;
    border-radius: 0 0 10px 10px;
}
.about-ceremo__category {
    padding: 3px 6px 2px;
    font-size: min(18px, 1.4vw);
    font-weight: 600;
    color: #fff;
    margin-top: 5%;
    letter-spacing: 1px;
    position: relative;
    z-index: 1;
}
.about-ceremo__item--teal .about-ceremo__category  { background-color: #ffd424; }
.about-ceremo__item--blue .about-ceremo__category  { background-color: #15A5DD; }
.about-ceremo__item--green .about-ceremo__category { background-color: #0CA96A; }
.about-ceremo__item--pink .about-ceremo__category  { background-color: #E578A3; }
.about-ceremo__body {
    padding: 0 5rem 1rem 1rem;
    margin-top: auto;
    color: #fff;
    position: relative;
    z-index: 1;
    width: 100%;
}
.about-ceremo__title {
    font-size: min(27px, 2vw);
    font-weight: 600;
    line-height: 1.3;
}
.about-ceremo__text {
    font-size: min(14px, 1.2vw);
    font-weight: 500;
    margin-top: 5px;
}
.about-ceremo__arrow {
    position: absolute;
    right: 1.5rem;
    bottom: 1rem;
    z-index: 1;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.4s ease;
}
.about-ceremo__item--teal .about-ceremo__arrow  { background: #ffd424; }
.about-ceremo__item--blue .about-ceremo__arrow  { background: #15A5DD; }
.about-ceremo__item--green .about-ceremo__arrow { background: #0CA96A; }
.about-ceremo__item--pink .about-ceremo__arrow  { background: #E578A3; }
.about-ceremo__arrow .icon-arrow {
    width: 14px;
    height: 16px;
    right: 16%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.about-ceremo__arrow .icon-arrow use {
    color: #fff;
    transition: color 0.4s ease;
}
.about-ceremo__item:has(a:hover)::before {
    transform: scale(1.07);
}
.about-ceremo__item:has(a:hover) .about-ceremo__arrow {
    background: #fff;
}
.about-ceremo__item--teal:has(a:hover) .about-ceremo__arrow .icon-arrow use  { color: #ffd424; }
.about-ceremo__item--blue:has(a:hover) .about-ceremo__arrow .icon-arrow use  { color: #15A5DD; }
.about-ceremo__item--green:has(a:hover) .about-ceremo__arrow .icon-arrow use { color: #0CA96A; }
.about-ceremo__item--pink:has(a:hover) .about-ceremo__arrow .icon-arrow use  { color: #E578A3; }
@media (max-width: 768px) {
    .about-ceremo {
        padding: 5rem 0 6rem;
    }
    .about-ceremo .section-subtitle {
        margin-bottom: 2.5rem;
    }
    .about-ceremo__list {
        flex-direction: column;
        gap: 1.5rem;
        width: 90%;
    }
    .about-ceremo__link {
        height: 55vw;
    }
    .about-ceremo__category {
        font-size: min(18px, 4vw);
    }
    .about-ceremo__title {
        font-size: min(28px, 6vw);
    }
    .about-ceremo__text {
        font-size: min(16px, 3.5vw);
    }
}

/**** job-description ****/
.intro--job-full .intro__inner,
.intro--job-part .intro__inner {
    padding: 4rem 20px 10rem;
}
.intro_img-box span {
    position: absolute;
}
.intro_img-box img {
    border-radius: 10px;
}
.intro_img-box .img01 {
    width: min(222px, 22%);
    left: 0;
    top: 3rem;
}
.intro_img-box .img02 {
    width: min(174px, 17%);
    right: 8rem;
    top: -1rem;
}
.intro_img-box .img03 {
    width: min(151px, 15%);
    left: 5rem;
    bottom: 5rem;
}
.intro_img-box .img04 {
    width: min(132px, 13%);
    right: 20rem;
    bottom: 0;
}
.intro_img-box .img05 {
    width: min(142px, 14%);
    right: -1rem;
    bottom: 12rem;
}
.intro--job-full.intro .intro__text,
.intro--job-part .intro__text {
    width: 74%;
    margin: 4rem auto 0;
}
.job-description {
    background: #3fb5e3;
    position: relative;
    z-index: 1;
}
.job-description .job-description__inner {
    padding: 5rem 20px 10rem;
}
.job-description .section-label {
    text-align: center;
    font-size: min(71px, 7.1vw);
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.05em;
    margin-bottom: 1.3rem;
}
.job-description .section-subtitle {
    font-size: min(17px, 1.7vw);
    font-weight: bold;
    text-align: center;
    color: #fff;
}
.job-description__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 6rem;
}
.job-description__item {
    position: relative;
    width: 49%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 5px 5px #1c8fd1;
    padding: 2.5rem 3rem 3.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.job-description__item:last-of-type {
    width: 100%;
    margin-top: 1.5rem;
    text-align: center;
    justify-content: center;
}
.job-description__item > a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.job-description__item .job-description__type {
    display: block;
    font-size: min(13px, 1.3vw);
    color: #15a5dd;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 2rem;
    width: fit-content;
    align-self: baseline;
    padding: 1px 1px 0px;
    background: linear-gradient(#15a5dd, #15a5dd) no-repeat 0 0;
    background-size: 0% 100%;
    transition: background-size 0.4s ease, color 0.4s;
}
.job-description__item:last-of-type .job-description__type {
    margin-bottom: 2rem;
}
.job-description__item .job-description__name {
    display: block;
    font-size: min(37px, 3vw);
    font-weight: 700;
    width: 100%;
    align-self: baseline;
    margin-bottom: 1rem;
}
.job-description__item .job-description__icon {
    position: absolute;
    top: 50%;
    right: min(2rem, 2vw);
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    background: #15a5dd;
    border-radius: 100px;
    padding-left: 54px;
    padding-top: 54px;
    border: 1px solid #15a5dd;
    transition: 0.6s all;
}
.job-description__item .job-description__icon .icon-arrow {
    width: 14px;
    height: 16px;
    position: absolute;
    top: 50%;
    right: 27%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.job-description__item .job-description__icon .icon-arrow use {
    color: #fff;
    transition: 0.6s all;
}

.job-description__item:has(a:hover) .job-description__icon {
    background: #fff;
}
.job-description__item:has(a:hover) .job-description__icon .icon-arrow use {
    color: #15a5dd;
}
.job-description__item:has(a:hover) .job-description__type {
    color: #fff;
    background-size: 100% 100%;
}
@media (max-width: 768px) {
    .intro--job-full .intro__inner {
        padding: 6rem 10px 10rem;
    }
    .intro--job-part .intro__inner {
       padding: 7rem 10px 10rem; 
    }
    .intro_img-box img {
        border-radius: 6px;
    }
    .intro_img-box .img01 {
        width: min(222px, 30%);
        left: 1rem;
        top: 0rem;
    }
    .intro_img-box .img02 {
        width: min(174px, 22%);
        right: 0;
        top: 3rem;
    }
    .intro_img-box .img03 {
        width: min(151px, 23%);
        left: 0rem;
        bottom: 4rem;
    }
    .intro_img-box .img04 {
        width: min(132px, 20%);
        right: 43%;
        bottom: 0;
    }
    .intro_img-box .img05 {
        width: min(142px, 19%);
        right: 1rem;
        bottom: 3.5rem;
    }
    .intro--job-full.intro .intro__text,
    .intro--job-part.intro .intro__text {
        margin: 2rem auto 0;
        letter-spacing: 0.12rem;
    }

    .job-description .job-description__inner {
        padding: 4rem 10px 5rem;
    }
    .job-description .section-label {
        font-size: min(71px, 9.3vw);
        margin-bottom: 1rem;
    }
    .job-description .section-subtitle {
        font-size: min(17px, 4vw);
    }
    .job-description__list {
        display: block;
        margin-top: 3rem;
    }
    .job-description__item {
        width: 100%;
        margin-bottom: 1.3rem;
        padding: 6% 10%;
        box-shadow: 7px 7px #1c8fd1;
    }
    .job-description__item .job-description__type {
        font-size: min(13px, 3vw);
        margin-bottom: 1.5rem;
    }
    .job-description__item .job-description__name {
        font-size: min(37px, 6vw);
        margin-bottom: 1.5rem; 
    }
    .job-description__item .job-description__icon {
        right: min(2rem, 4vw);
        padding-left: 40px;
        padding-top: 40px;
    }
    .job-description__item .job-description__icon .icon-arrow {
        width: 11px;
        height: 13px;
        right: 20%;
    }
    .job-description__item:last-of-type {
        text-align: left;
        justify-content: left;
    }
    .job-description__item:last-of-type .job-description__type {
        margin-bottom: 1.5rem;
    }
}

/**** flow-steps ****/
.flow-steps {
    padding-top: 5rem;
    padding-bottom: 7rem;
    position: relative;
    z-index: 1;
}
.flow-steps__inner {
    background: #fff;
    border: 2px solid #15a5dd;
    box-sizing: border-box;
    padding: 3em 2.5em;
    border-radius: 10.5px;
    width: 99%;
    box-shadow: 10px 10px #8ad2ee;
}
.flow-steps__list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}
.flow-steps__item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    position: relative;
}
.flow-steps__item::before {
    content: "";
    position: absolute;
    top: calc(2em + 30px);
    bottom: -5rem;
    left: 27px;
    width: 5px;
    background: #d6eef3;
}
.flow-steps__item:last-child::before {
    display: none;
}
.flow-steps__number {
    width: 60px;
    height: 60px;
    min-width: 60px;
    background: #ffae00;
    border-radius: 50%;
    margin-top: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.flow-steps__number span {
    color: #fff;
    font-size: min(40px, 4vw);
    font-weight: 500;
}
.flow-steps__card {
    flex: 1;
    background: #fffbf2;
    border-radius: 10px;
    padding: 2.5rem 3rem;
}
.flow-steps__title {
    font-size: min(29px, 2.9vw);
    font-weight: 700;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 3px dashed #c9e9f0;
    color: #0097b7;
}
.flow-steps__text {
    font-size: min(17px, 2vw);
    line-height: 1.9;
    width: min(1142px, 95%);
    margin: auto;
}
.flow-steps__line-guide {
    width: min(1142px, 95%);
    margin: 2rem auto 0;
}
.flow-steps__line-label {
    display: inline-block;
    background: #ffae00;
    color: #fff;
    font-size: min(18px, 1.8vw);
    font-weight: 600;
    padding: 5px 6px 3px;
    margin-bottom: 1.5rem;
}
.flow-steps__line-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.7rem;
}
.flow-steps__line-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    position: relative;
    background: #ffffff;
    border-radius: 10px;
    padding: 20px 10px 10px;
}
.flow-steps__line-item:not(:last-child)::after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: url('../img/lower/icon_flow-arrow.svg') center / contain no-repeat;
    position: absolute;
    right: -1.5rem;
    top: 50%;
    transform: translateY(-50%);
}
.flow-steps__line-img {
    margin-bottom: 0.5rem;
}
.flow-steps__line-text {
    font-size: min(15px, 1.5vw);
    line-height: 1.6;
    font-weight: 700;
}
.flow-steps__line-item:last-child .flow-steps__line-img {
    padding-top: 1.5em;
    margin-top: -2em;
}
.flow-steps__line-item:last-child .flow-steps__line-text {
    padding: 11px 0;
}
@media (max-width: 768px) {
    .flow-steps {
        padding: 2rem 10px 5rem;
    }
    .flow-steps__list {
        gap: 2rem;
    }
    .flow-steps__inner {
        padding: 2em 1em;
    }
    .flow-steps__item {
        gap: 0.5rem;
    }
    .flow-steps__item::before {
        top: calc(1em + 30px);
        left: 1.1rem;
    }
    .flow-steps__number {
        width: 40px;
        height: 40px;
        min-width: 40px;
        margin-top: 1em;
    }
    .flow-steps__number span {
        font-size: min(40px, 6vw);
    }
    .flow-steps__card {
        padding: 1.5rem 1.2rem;
    }
    .flow-steps__title {
        font-size: min(29px, 4.3vw);
        margin-bottom: 1rem;
    }
    .flow-steps__text {
        font-size: min(17px, 4vw);
    }
    .flow-steps__line-guide {
        margin: 1rem auto 0;
    }
    .flow-steps__line-list {
        flex-direction: column;
        align-items: stretch;
        gap: 2rem;
    }
    .flow-steps__line-item {
        flex: none;
        width: 100%;
    }
    .flow-steps__line-item:not(:last-child)::after {
        right: auto;
        left: 50%;
        top: auto;
        bottom: -1.5rem;
        transform: translateX(-50%) rotate(90deg);
    }
    .flow-steps__line-label {
        font-size: min(18px, 4vw);
        margin-bottom: 1rem;
    }
    .flow-steps__line-text {
        font-size: min(15px, 4vw);
    }
}

/**** bg-diamond ****/
.bg-diamond-img {
    display: block;
    width: 60%;
    margin: auto;
}
@media (max-width: 768px) {
    .bg-diamond-img {
        width: 80%;
    }
}

/**** 表示切り替えユーティリティ ****/
.m-sp {
    display: none;
}
@media (max-width: 768px) {
    .m-pc {
        display: none;
    }
    .m-sp {
        display: block;
    }
}

/**** intro--philosophy ****/
.page-header--philosophy ~ .bg-fixed-lines {
    opacity: 1;
}
.intro--philosophy {
    padding: 7rem 0 4rem;
    position: relative;
    z-index: 1;
}
.intro--philosophy .intro__svg {
    width: min(500px, 70%);
    margin: 0 auto 3rem;
}
.intro--philosophy .intro__text {
    font-weight: bold;
}
.intro--philosophy .intro__text + .intro__text {
    margin-top: 2rem;
}
@media (max-width: 768px) {
    .intro--philosophy {
        padding: 2rem 0 0rem;
    }
    .intro--philosophy .intro__svg {
        width: min(500px, 80%);
    }
    .intro--philosophy .intro__text {
        margin: 1.5rem auto 0;
        width: 100%;
        text-align: left;
    }
}

/**** happy-concept ****/
.happy-concept {
    padding: 0rem 0 1.5rem;
    position: relative;
    z-index: 1;
    width: min(1028px, 95%);
    margin: auto;
}
.happy-concept__inner {
    display: flex;
    align-items: center;
    gap: 3rem;
    background: #fff;
    border: 2px solid #0097b7;
    border-radius: 10.5px;
    padding: 3rem 3rem 1.5rem;
    box-shadow: 8px 8px #80cbdb;
    box-sizing: border-box;
}
.happy-concept__label {
    flex-shrink: 0;
    width: min(220px, 30%);
    margin-top: -8px;
}
.happy-concept__card {
    display: flex;
    align-items: flex-start;
    flex: 1;
    gap: 3rem;
}
.happy-concept__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}
.happy-concept__item:not(:first-child)::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: url('../img/lower/philosophy_x.svg') center / contain no-repeat;
    position: absolute;
    left: -1.5rem;
    top: calc(57px / 2);
    transform: translate(-50%, -50%);
}
/* PC背景SVG：viewBox 139.14 × 57.03 */
.happy-concept__item-title {
    background-image: url('../img/lower/concept_bg-pc.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 139px;
    height: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    line-height: 0;
    letter-spacing: 0.18em;
    margin-bottom: 0.7rem;
    text-align: center;
}
.happy-concept__item-text {
    font-size: min(12px, 1.5vw);
    font-weight: bold;
}
@media (max-width: 768px) {
    .happy-concept {
        width: 90%;
        padding: 2rem 0 0;
    }
    .happy-concept__inner {
        flex-direction: column;
        padding: 3rem 2rem 2.5rem;
        gap: 2rem;
    }
    .happy-concept__label {
        width: 75%;
        margin: 0 auto;
    }
    .happy-concept__card {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 2.5rem;
    }
    .happy-concept__item {
        width: 100%;
    }
    .happy-concept__item:not(:first-child)::before {
        left: 50%;
        top: -1rem;
        transform: translate(-50%, -50%);
    }
    /* SP背景SVG：viewBox 204.57 × 49.62 */
    .happy-concept__item-title {
        background-image: url('../img/lower/concept_bg-sp.svg');
        width: 204px;
        height: 50px;
        font-size: 20px;
    }
    .happy-concept__item-text {
        font-size: min(15px, 4vw);
    }
}

/**** vision-value ****/
.vision-value {
    padding: 5rem 0 2rem;
    position: relative;
    z-index: 1;
}
.vision-value .section-label,
.logo-concept .section-label {
    text-align: center;
    font-size: min(27px, 2.7vw);
    font-weight: 500;
    color: #a1d9e4;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}
.vision-value .section-title,
.logo-concept .section-subtitle {
    font-size: min(32px, 3.2vw);
    font-weight: bold;
    text-align: center;
    color: #0097b7;
    margin-bottom: 3rem;
}
.vision-value__cards {
    display: flex;
    position: relative;
    z-index: 0;
}
.vision-value__cards::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff7d8;
    border-radius: 10.5px;
    transform: translate(10px, 10px);
    z-index: -1;
    pointer-events: none;
}
.vision-value__card {
    flex: 1;
    border: 2px solid #ff9730;
    padding: 4.5rem 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: auto 100%;
}
.vision-value__card:first-child {
    background-image: url('../img/lower/bg_vision.svg');
    background-position: left 17px;
    background-size: 36%;
    border-right: none;
    border-radius: 10px 0 0 10px;
    position: relative;
}
.vision-value__card:first-child::after {
    content: "";
    display: block;
    width: 2px;
    height: 90%;
    background: #ffffff;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.vision-value__card:last-child {
    background-image: url('../img/lower/bg_value.svg');
    background-position: right bottom;
    background-size: 54%;
    border-radius: 0 10px 10px 0;
    border-left: none;
}
.vision-value__card-label {
    display: inline-block;
    font-size: min(18px, 1.8vw);
    font-weight: 600;
    color: #ff9730;
    background: #fff;
    letter-spacing: 0.05em;
    padding: 3px 6px 1px;
    margin-bottom: 3rem;
}
.vision-value__card-title {
    font-size: min(34px, 3.4vw);
    font-weight: 500;
    color: #ff9730;
    letter-spacing: 0.12em;
    margin-bottom: 3rem;
}
.vision-value__card:last-child .vision-value__card-title {
    font-size: min(32px, 3.2vw);
}
.vision-value__list {
    list-style: none;
    width: min(280px, 70%);
    margin: auto;
    text-align: left;
}
.vision-value__list li {
    font-size: min(18px, 1.8vw);
    color: #ff9730;
    font-weight: 500;
    line-height: 1.9;
    padding-left: 1.3em;
    position: relative;
}
.vision-value__list li::before {
    content: '●';
    color: rgb(255 151 48 / 60%);
    position: absolute;
    left: 0;
    font-size: 0.55em;
    top: 0.8em;
}
@media (max-width: 768px) {
    .vision-value {
        padding: 3rem 0 0;
    }
    .vision-value .section-label,
    .logo-concept .section-label {
        font-size: min(27px, 5vw);
        margin-bottom: 0.5rem;
    }
    .vision-value .section-title,
    .logo-concept .section-subtitle {
        font-size: min(32px, 6vw);
        margin-bottom: 1.5rem;
    }
    .vision-value__cards {
        flex-direction: column;
    }
    .vision-value__card {
        padding: 2rem 1.5rem;
        background-size: auto 50%;
    }
    .vision-value__card:first-child {
        border-right: 2px solid #ffae00;
        border-bottom: none;
        border-radius: 10px 10px 0 0;
    }
    .vision-value__card:first-child::after {
        width: 90%;
        height: 2px;
        background: #ffffff;
        position: absolute;
        right: 3%;
        top: 100%;
    }
    .vision-value__card:last-child {
        border-radius: 0 0 10px 10px;
        border-top: none;
        border-left: 2px solid #ff9730;
    }
    .vision-value__card-label {
        font-size: min(16px, 4vw);
        margin-bottom: 2.5rem;
    }
    .vision-value__card-title,
    .vision-value__card:last-child .vision-value__card-title {
        font-size: min(29px, 5.8vw);
        margin-bottom: 1.5rem;
    }
    .vision-value__list {
        width: 80%;
    }
    .vision-value__list li {
        font-size: min(17px, 4vw);
    }
}

/**** logo-concept ****/
.logo-concept {
    padding: 3rem 0 10rem;
    position: relative;
    z-index: 1;
}
.logo-concept__card {
    display: flex;
    align-items: center;
    gap: 4rem;
    background: #fff;
    border: 2px solid #0097b7;
    border-radius: 10.5px;
    padding: 5.3rem 3rem 5rem 4rem;
    box-shadow: 10px 10px #80cbdb;
    box-sizing: border-box;
}
.logo-concept__logo {
    flex-shrink: 0;
    width: min(327px, 40%);
    text-align: center;
}
.logo-concept__logo > img {
    width: 75%;
}
.logo-concept__body {
    width: 70%;
}
.logo-concept__body-label {
    font-size: min(20px, 2vw);
    font-weight: bold;
    margin-bottom: 1.5rem;
}
.logo-concept__body-text {
    font-size: min(16px, 1.6vw);
    line-height: 2;
    font-weight: 600;
}
@media (max-width: 768px) {
    .logo-concept {
        padding: 2rem 0 4rem;
    }
    .logo-concept__card {
        flex-direction: column;
        padding: 2rem;
        gap: 2rem;
    }
    .logo-concept__logo {
        width: 100%;
        margin: 1rem auto 2rem;
    }
    .logo-concept__body {
        width: 100%;
    }
    .logo-concept__body-label {
        font-size: min(18px, 4.5vw);
    }
    .logo-concept__body-text {
        font-size: min(16px, 4vw);
    }
}

/**** HISTORY ****/
.history {
}
.history__inner {
    display: flex;
    gap: min(124px, 9vw);
    align-items: flex-start;
}
.history-index {
    width: 96px;
    flex-shrink: 0;
    position: sticky;
    top: 5rem;
    align-self: flex-start;
    padding-top: 1rem;
}
.history-index__label {
    font-size: min(17px ,1.7vw);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #ffffff;
    margin-bottom: 1rem;
    background: var(--year-color);
    display: inline-block;
    padding: 2px 4px 0;
    margin-left: 0.9rem;
}
.history-index__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.history-index__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 0;
    cursor: pointer;
}
.history-index__dot {
    width: 6.8px;
    height: 6.8px;
    border-radius: 50%;
    flex-shrink: 0;
    visibility: hidden;
    background: #cccac9;
    transition: background 0.3s ease;
}
.history-index__year {
    font-size: min(16px, 1.6vw);
    font-weight: 600;
    color: #cccac9;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.3s ease;
}
.history-index__item.is-active .history-index__dot {
    background: var(--year-color);
    visibility: visible;
}
.history-index__item.is-active .history-index__year {
    color: var(--year-color);
}
.history__timeline-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
}
.history__line-track {
    display: none;
}
.history__groups {
    position: relative;
}
.history__group {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    padding-bottom: 4rem;
    position: relative;
}
.history__group:last-child {
    padding-bottom: 2rem;
}
/* base track / colored fill: 共通プロパティ */
.history__group::before,
.history__group::after {
    content: '';
    position: absolute;
    left: 4.3rem;
    width: 7px;
    top: 4.5rem;
    bottom: 0.5rem;
    border-radius: 100px;
}
/* base track: always visible light color */
.history__group::before { background: #dbf4f2; }
/* colored fill: grows top→bottom on scroll via --line-clip-bottom custom property */
.history__group::after {
    background: var(--year-color);
    clip-path: inset(0 0 var(--line-clip-bottom, 100%) 0);
}
.history__group:last-child::before,
.history__group:last-child::after {
    bottom: 2rem;
}
.history__year-head {
    flex-shrink: 0;
    padding-top: 0.25rem;
    width: 20%;
}
.history__year-text {
    font-size: min(63px, 4.5vw);
    font-weight: 600;
    color: var(--year-color);
    letter-spacing: 0.02em;
    line-height: 1;
}
.history__year-text em {
    font-size: 0.34em;
    font-style: normal;
    font-weight: 700;
    color: #231815;
    margin-left: 4px;
}
.history__events {
    flex: 1;
    min-width: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 80%;
}
.history__event-tag {
    display: inline-block;
    background: var(--year-color);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 4px 3px 1px;
    width: min(60px, 6rem);
    text-align: center;
}
.history__event-card {
    display: flex;
    align-items: flex-start;
    margin-top: 1rem;
}
.history__event-img {
    width: min(279px, 30%);
    border-radius: 10px;
    flex-shrink: 0;
    overflow: hidden;
}
.history__event-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.history__event-body {
    flex: 1;
    padding: 1rem 2rem 1.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    width: 70%;
}
.history__event-title {
    font-size: min(20px, 2vw);
    font-weight: 600;
    line-height: 1.65;
    position: relative;
}
.history__event-title::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--year-color);
    position: absolute;
    top: 0.6em;
    left: -1rem;
    opacity: 0.6;
}
.history__text .history__event-card {
    margin-top: 0;
    margin-bottom: -3rem;
}
.history__text .history__event-body {
    padding-top: 0;
    padding-left: 1.5rem;
}
.history__outro,
.family_talk__outro {
    margin: 3rem auto 10rem;
    position: relative;
}
.history__outro img,
.family_talk__outro img {
    width: 100%;
    display: block;
    object-fit: cover;
    border-radius: 10px;
}
.history__outro img      { max-height: 35vw; }
.family_talk__outro img  { max-height: 39vw; }
@media (max-width: 768px) {
    .history-index {
        display: none;
    }
    .history__timeline-wrap {
        padding-left: 0;
    }
    .history__year-head {
        width: auto;
    }
    .history__year-text {
        font-size: min(63px, 8.5vw);
    }
    .history__group::before,
    .history__group::after {
        left: 2.5rem;
        top: 3.5rem;
    }
    .history__events {
        gap: 0;
        width: 100%;
    }
    .history__event-card {
        flex-direction: column;
        margin-top: 0.5rem;
    }
    .history__event-img {
        width: 100%;
        height: 100%;
    }
    .history__event-body {
        padding: 1rem 1.2rem 1.2rem;
        width: 100%;
        gap: 0.5rem;
    }
    .history__text .history__event-body {
        padding-left: 1.2rem;
    }
    .history__event-title {
        font-size: min(20px, 3vw);
    }
    .history__outro,
    .family_talk__outro {
        margin: 0rem auto 4rem;
        height: 70vw;
    }
    .history__outro img,
    .family_talk__outro img {
        max-height: 100%;
        height: 100%;
    }
}
@media (max-width: 480px) {
    .history__group {
        gap: 1rem;
    }
    .history__group::before,
    .history__group::after {
        left: 2rem;
        top: 3rem;
    }
    .history__event-title {
        font-size: 14px;
    }   
}

/**** benefits ****/
.benefits {
    padding: 3rem 0 7rem;
    position: relative;
    z-index: 1;
}
.benefits__outer {
    background: #fff;
    border: 2px solid #0097b7;
    box-sizing: border-box;
    padding: 3rem 2.5rem;
    border-radius: 20px;
    width: 99%;
    box-shadow: 10px 10px #80cbdb;
}
.benefits__group {
    padding: 2.5rem 0;
}
.benefits__group:first-child {
    padding-top: 0;
}
.benefits__group:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.benefits__category-title {
    display: block;
    font-size: min(30px, 3vw);
    font-weight: bold;
    color: #0097b7;
    margin-bottom: 0.8rem;
    border-bottom: 3px dashed #c9e9f0;
    padding-bottom: 0.8rem;
}
.benefits__lead {
    font-size: min(17px, 1.7vw);
    line-height: 1.8;
    font-weight: 500;
    margin-bottom: 3rem;
}
.benefits__card {
    display: flex;
    gap: 2rem;
    align-items: stretch;
}
.benefits__card.bc_top {
    margin-top: 3rem;
}
.benefits__card-img {
    flex-shrink: 0;
    width: min(260px, 32%);
    border-radius: 5px;
    overflow: hidden;
}
.benefits__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}
.benefits__card-body {
    flex: 1;
    min-width: 0;
}
.benefits__pickup-label {
    display: inline-block;
    background: #0097b7;
    color: #fff;
    font-size: min(13px, 1.3vw);
    font-weight: 600;
    padding: 4px 7px 2px;
    letter-spacing: 0.08em;
    margin-bottom: 1em;
}
.benefits__pickup-list {
    list-style: none;
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.benefits__pickup-list > li {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
}
.benefits__item--pickup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    font-size: min(20px, 1.2vw);
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background 0.3s ease;
    background: #d2f7ff;
    padding: 0.5rem 1.5rem 0.5rem 1.5rem;
    border-radius: 10px;
    border: 2px solid #0097b7;
    letter-spacing: 0.12rem;
    min-height: 83px;
}
.benefits__item--pickup:hover {
    background: #0097b7;
}
.benefits__item-text {
    flex: 1;
    line-height: 1.4;
}
.benefits__item-arrow {
    width: 25px;
    height: 25px;
    min-width: 25px;
    background: #0097b7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.benefits__item-arrow .icon-arrow {
    width: 8px;
    height: 6px;
}
.benefits__item-arrow .icon-arrow use {
    color: #fff;
}
.benefits__plain-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    list-style: none;
    gap: 0 1rem;
    border-top: 1px solid #e0dfde;
}
.benefits__plain-item {
    font-size: min(19px, 1.9vw);
    font-weight: 600;
    padding: 1.5rem 0.5rem 1.3rem;
    border-bottom: 1px solid #e0dfde;
    line-height: 1.3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.benefits__plain-item > span {
    display: block;
    width: 100%;
    font-size: 80%;
    margin-left: -0.5rem;
    font-feature-settings: "palt";
}

.bg__pink .benefits__item--pickup:hover .benefits__item-arrow,
.bg__blue .benefits__item--pickup:hover .benefits__item-arrow,
.bg__green .benefits__item--pickup:hover .benefits__item-arrow,
.bg__orange .benefits__item--pickup:hover .benefits__item-arrow {
    background: #fff;
}
.bg__pink .benefits__category-title {
    color: #e578a3;
}
.bg__pink .benefits__pickup-label {
    background: #e578a3;
}
.bg__pink .benefits__item--pickup {
    background: #fdf6f9;
    border-color: #f2bcd1;
}
.bg__pink .benefits__item--pickup:hover {
    background: #f2bcd1;
}
.bg__pink .benefits__item-arrow {
    background: #e578a3;
    border: 1px solid #e578a3;
}
.bg__pink .benefits__item--pickup:hover .benefits__item-arrow .icon-arrow use {
    color: #e578a3;
}

.bg__blue .benefits__category-title {
    color: #15a5dd;
}
.bg__blue .benefits__pickup-label {
    background: #15a5dd;
}
.bg__blue .benefits__item--pickup {
    background: #eff9fd;
    border-color: #8ad2ee;
}
.bg__blue .benefits__item--pickup:hover {
    background: #8ad2ee;
}
.bg__blue .benefits__item-arrow {
    background: #15a5dd;
    border: 1px solid #15a5dd;
}
.bg__blue .benefits__item--pickup:hover .benefits__item-arrow .icon-arrow use {
    color: #15a5dd;
}

.bg__green .benefits__category-title {
    color: #0ca96a;
}
.bg__green .benefits__pickup-label {
    background: #0ca96a;
}
.bg__green .benefits__item--pickup {
    background: #eff9fd;
    border-color: #8ad2ee;
}
.bg__green .benefits__item--pickup:hover {
    background: #8ad2ee;
}
.bg__green .benefits__item-arrow {
    background: #0ca96a;
    border: 1px solid #0ca96a;
}
.bg__green .benefits__item--pickup:hover .benefits__item-arrow .icon-arrow use {
    color: #0ca96a;
}

.bg__orange .benefits__category-title {
    color: #ff9730;
}
.bg__orange .benefits__pickup-label {
    background: #ff9730;
}
.bg__orange .benefits__item--pickup {
    background: #fdf6f9;
    border-color: #f2bcd1;
}
.bg__orange .benefits__item--pickup:hover {
    background: #f2bcd1;
}
.bg__orange .benefits__item-arrow {
    background: #ff9730;
    border: 1px solid #ff9730;
}
.bg__orange .benefits__item--pickup:hover .benefits__item-arrow .icon-arrow use {
    color: #ff9730;
}

@media (max-width: 768px) {
    .benefits {
        padding: 3rem 0 5rem;
    }
    .benefits__outer {
        padding: 2rem 1.2rem;
    }
    .benefits__group {
        padding: 2rem 0;
    }
    .benefits__category-title {
        font-size: min(20px, 5vw);
    }
    .benefits__lead {
        font-size: min(15px, 4vw);
        margin-bottom: 1rem;
    }
    .benefits__card {
        flex-direction: column;
        gap: 1.2rem;
    }
    .benefits__card-img {
        width: 100%;
    }
    .benefits__card-img img {
        height: auto;
        aspect-ratio: 16 / 9;
    }
    .benefits__pickup-label {
        font-size: min(13px, 3vw);
    }
    .benefits__pickup-list {
        flex-direction: column;
        gap: 0.6rem;
        margin-bottom: 1.5rem;
    }
    .benefits__pickup-list > li {
        width: 100%;
    }
    .benefits__item--pickup {
        font-size: min(15px, 4vw);
        padding: 0.7rem 1rem 0.5rem 1rem;
    }
    .benefits__plain-list {
        grid-template-columns: 1fr;
    }
    .benefits__plain-item {
        font-size: min(15px, 4vw);
        padding: 1.2rem 0.5rem 1rem;
    }
    .benefits__card.bc_top {
        margin-top: 1rem;
    }
}


/**** benefits-modal ****/
.benefits-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.benefits-modal.is-active {
    display: flex;
}
.benefits-modal__content {
    background: #fff;
    border: 2px solid #0097b7;
    border-radius: 16px;
    width: min(600px, 100%);
    max-height: 90vh;
    overflow-y: auto;
}
.benefits-modal__img-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    padding: 2rem 2rem 0;
}
.benefits-modal__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}
.benefits-modal__badge {
    position: absolute;
    top: 3rem;
    left: 2rem;
    background: #ccc;
    color: #fff;
    font-size: min(20px, 2vw);
    font-weight: 600;
    padding: 4px 12px 3px;
    letter-spacing: 0.08em;
}
.bg__pink .benefits-modal__badge {
    background: #E578A3;
}
.bg__blue .benefits-modal__badge {
    background: #15a5dd;
}
.benefits-modal__body {
    padding: 2rem 2.5rem 2.5rem;
}
.benefits-modal__title {
    font-size: min(24px, 2.4vw);
    font-weight: bold;
    color: #0097b7;
    margin-bottom: 1.2rem;
}
.benefits-modal__text {
    font-size: min(15px, 2vw);
    line-height: 2;
    font-weight: 500;
}
.benefits-modal__text + .benefits-modal__text {
    margin-top: 1rem;
}
.benefits-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: min(180px, 60%);
    margin: 2rem auto 0;
    padding: 12px 10px 10px;
    border: 1.5px solid #0097b7;
    background: transparent;
    border-radius: 100px;
    font-size: min(14px, 1.4vw);
    cursor: pointer;
    transition: background 0.2s;
    color: #0097b7;
    font-weight: bold;
    position: relative;
}
.benefits-modal__close:hover {
    background: #0097b7;
    color: #fff;
}
.benefits-modal__close .btn-cross {
    position: absolute;
    cursor: pointer;
    width: 11px;
    height: 11px;
    top: 50%;
    right: 9px;
    transform: translate(-50%, -50%);
}
.benefits-modal__close .btn-cross span {
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #0097b7;
    transition: all 0.4s;
    right: 0;
    left: 0;
    margin: 0 auto;
}
.benefits-modal__close .btn-cross span:first-of-type {
    transform: translateY(5px) rotate(-45deg);
}
.benefits-modal__close .btn-cross span:last-of-type {
    transform: translateY(5px) rotate(45deg);
}
.benefits-modal__close:hover .btn-cross span {
    background-color: #fff;
}
@media (max-width: 768px) {
    .benefits-modal__img-wrap {
        height: 200px;
        padding: 1.5rem 1.5rem 0;
    }
    .benefits-modal__body {
        padding: 1.5rem 1.5rem 2rem;
    }
    .benefits-modal__badge {
        font-size: min(20px, 3.8vw);
        top: 2.5rem;
        left: 1.5rem;
    }
    .benefits-modal__close {
        font-size: min(14px, 4vw);
    }
}
@media (max-width: 480px) {
    .benefits-modal__title {
        font-size: min(22px, 5.5vw);
    }
    .benefits-modal__text {
        font-size: min(14px, 3.8vw);
    }
}

/* ============================================================
   数字で見るセレモ
   ============================================================ */
.numbers {
    padding: 1.5rem 0 7rem;
}
.numbers__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

/* ---- カード共通 ---- */
.number-card {
    background: #fff;
    border: 2px solid #0097b7;
    box-sizing: border-box;
    padding: 1rem 3.5vw 2rem;
    border-radius: 10px;
    width: 100%;
    box-shadow: 5px 5px #80cbdb;
}

/* PC グリッド配置（5列: 3fr＝60% / 2fr＝40% で行ごとに切り替え） */
.number-card--founded   { grid-column: 1 / 4; grid-row: 1; }      /* 60%・row1 */
.number-card--vacation  { grid-column: 4 / 6; grid-row: 1 / 3; }  /* 40%・row1-2 */
.number-card--location  { grid-column: 1 / 4; grid-row: 2; }      /* 60%・row2 */
.number-card--childcare { grid-column: 1 / 3; grid-row: 3 / 5; }  /* 40%・row3-4 */
.number-card--women     { grid-column: 3 / 6; grid-row: 3; }      /* 60%・row3 */
.number-card--overtime  { grid-column: 3 / 6; grid-row: 4; }      /* 60%・row4 */

/* 横並びカード共通レイアウト（① 創業 / ③ 拠点数 / ⑤ 女性比率 / ⑥ 残業） */
.number-card--founded,
.number-card--location,
.number-card--women,
.number-card--overtime {
    display: flex;
    align-items: center;
    gap: 2vw;
}
/* 横並びカード共通：body */
.number-card--founded .number-card__body,
.number-card--location .number-card__body,
.number-card--women .number-card__body,
.number-card--overtime .number-card__body {
    flex: 1;
}
/* 横並びカード共通：icon（width: 24%） */
.number-card--founded .number-card__icon,
.number-card--location .number-card__icon,
.number-card--overtime .number-card__icon {
    flex-shrink: 0;
    width: 24%;
}

/* ① 創業：個別 */
.number-card--founded .number-card__label {
    align-self: center;
    margin-right: 1.5%;
    margin-bottom: 0;
}
.number-card--founded .number-card__sp img {
    display: none;
}

/* ② 有給 / ⑦ 育休：縦積み共通レイアウト */
.number-card--vacation,
.number-card--childcare {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 3.5vw 0;
}

/* ② 有給：個別 */
.number-card--vacation .number-card__icon {
    width: 45%;
    margin: 0 auto;
}
.number-card--vacation .number-card__label {
    margin-bottom: 0;
}

/* ③ 拠点数：個別（なし） */

/* ⑤ 女性比率：個別 */
.number-card--women .number-card__icon {
    flex-shrink: 0;
    width: 30%;
}
.number-card--women .number-card__figure {
    justify-content: center;
}
.number-card--women .number-card__sp,
.number-card--overtime .number-card__sp {
    display: none;
}

/* ⑥ 残業：個別 */
.number-card--overtime .number-card__figure {
    justify-content: center;
}

/* ⑦ 育休：個別 */
.number-card--childcare .number-card__top {
    align-items: center;
    margin-bottom: 0;
}
.number-card--childcare .number-card__label {
    font-size: 2.6vw;
}
.number-card--childcare .number-card__icon {
    flex-shrink: 0;
    width: 42%;
}
.number-card--childcare .number-card__figure {
    justify-content: center;
    margin-bottom: 2rem;
}

/* ---- icon 共通 ---- */
.number-card__icon img {
    width: 100%;
    height: auto;
    display: block;
}
.number-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 3rem;
}

/* ---- テキスト ---- */
.number-card__label {
    font-size: 2.13vw;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0;
    margin-right: 1vw;
    align-self: center;
}
.number-card__figure {
    display: flex;
    align-items: baseline;
    gap: 0.25em;
    line-height: 1;
    margin-bottom: 0;
}
.number-card__num {
    font-size: 9.67vw;
    font-weight: 700;
    letter-spacing: -0.02em;
    display: inline-block;
    clip-path: inset(100% 0 0 0);
    transition: clip-path 2.5s cubic-bezier(0.16, 1, 0.3, 1) var(--num-delay, 0.3s);
}
.number-card__unit {
    font-size: 2.24vw;
    font-weight: 700;
}
.number-card__text {
    font-size: min(15px, 1.3vw);
    font-weight: 500;
    line-height: 1.9;
}

/* ---- カラー ---- */
.number-card--founded  .number-card__label,
.number-card--founded  .number-card__num { color: #ff9730; }

.number-card--vacation .number-card__label,
.number-card--vacation .number-card__num { color: #0ca96a; }

.number-card--location .number-card__label,
.number-card--location .number-card__num { color: #15a5dd; }

.number-card--women    .number-card__label,
.number-card--women    .number-card__num { color: #e578a3; }

.number-card--overtime .number-card__label,
.number-card--overtime .number-card__num { color: #0ca96a; }

.number-card--childcare .number-card__label,
.number-card--childcare .number-card__num { color: #ff9730; }

/* ---- レスポンシブ ---- */
@media (max-width: 768px) {
    .numbers { 
        padding: 0 0 5rem;
    }
    .numbers__grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
    /* グリッド配置リセット */
    .number-card--founded,
    .number-card--vacation,
    .number-card--location,
    .number-card--childcare,
    .number-card--women,
    .number-card--overtime {
        grid-column: auto;
        grid-row: auto;
    }

    /* スマホ表示順：①②③⑤⑥⑦ */
    .number-card--founded   { order: 1; }
    .number-card--vacation  { order: 2; }
    .number-card--location  { order: 3; }
    .number-card--women     { order: 4; }
    .number-card--overtime  { order: 5; }
    .number-card--childcare { order: 6; }

    .number-card__label  { font-size: min(23px, 6vw); }
    .number-card__num    { font-size: min(70px, 18.8vw); }
    .number-card__unit   { font-size: min(18px, 5vw); }
    .number-card__text   { font-size: min(13px, 3.5vw); line-height: 1.4;}

    .number-card {
       padding: 2rem 3.5vw 2rem; 
    }
    /* ① 創業：icon左、body右（横並び） */
    .number-card--founded .number-card__figure {
        justify-content: center;
    }
    .number-card--founded .number-card__sp {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-top: 1rem;
    }
    .number-card--founded .number-card__sp img {
        display: block;
        width: 50%;
    }
    .number-card__icon.num-pc {
        display: none;
    }

    /* ② 有給：縦積み、icon上（大） */
    .number-card--vacation.number-card {
        padding: 3rem 3.5vw 2rem;
    }
    .number-card--vacation .number-card__top {
        flex-direction: row-reverse;
        align-items: center;
        width: 90%;
        margin: 0 auto 1rem;
    }
    .number-card--vacation .number-card__icon {
        width: 41%;
    }
    .number-card--vacation .number-card__num {
        font-size: min(98px, 25.8vw);
    }
    /* vacation / childcare 共通：unit サイズ */
    .number-card--vacation .number-card__unit,
    .number-card--childcare .number-card__unit {
        font-size: min(26px, 7vw);
    }

    /* ③ 拠点数：body左、icon右（横並び） */
    .number-card--location.number-card {
        flex-direction: row-reverse;
        gap: 1rem;
    }
    .number-card--location .number-card__icon {
        width: 31%;
    }
    /* location / women / overtime 共通：text margin */
    .number-card--location .number-card__text,
    .number-card--women .number-card__text,
    .number-card--overtime .number-card__text {
        margin-top: 1rem;
    }

    /* ⑤ 女性比率：icon左、body右（横並び） */
    .number-card--women .number-card__sp {
        display: block;
        width: 27%;
        align-self: center;
    }

    /* ⑥ 残業：body左、icon右（横並び） */
    .number-card--overtime .number-card__sp {
        display: block;
        width: 21%;
        align-self: center;
        margin-right: 0.5rem;
    }
    .number-card--overtime .number-card__label {
        font-size: min(19px, 5.1vw);
    }

    /* ⑦ 育休：top行（label＋icon）→ figure → text */
    .number-card--childcare .number-card__top {
        width: 80%;
        margin: auto;
        gap: 0.5rem;
    }
    .number-card--childcare .number-card__label {
        font-size: min(25px, 6.65vw);
    }
    .number-card--childcare .number-card__icon {
        width: 40%;
    }
    .number-card--childcare .number-card__figure {
        margin-bottom: 1rem;
    }
    .number-card--childcare .number-card__num {
        font-size: min(92px, 24.7vw);
    }
}

/* ---- 数字アニメーション（下から色が塗られていく / 親カードの is-visible に連動） ---- */
.number-card.is-visible .number-card__num {
    clip-path: inset(0% 0 0 0);
}

/* ============================================================
   募集要項一覧ページ（page-job_full / page-job_part）
   ============================================================ */

/* ---- FILTER ---- */
.job-list-section {
    background: #fff;
    padding: 4rem 0 5rem;
}
.job-filter {
    background: #e8f6f9;
    border-radius: 10px;
    padding: 1.8rem 1.8rem;
    margin-bottom: 4rem;
}
.job-filter__heading {
    font-size: min(25px, 2.5vw);
    font-weight: 700;
    color: #0097b7;
    margin-bottom: 1rem;
    letter-spacing: .05em;
    text-align: center;
}
.job-filter__row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 2rem 0;
    border-top: 1px solid #b5e1ea;
}
.job-filter__row:last-of-type {
    border-bottom: 1px solid #b5e1ea;
}
.job-filter__label {
    font-size: min(20px, 2vw);
    font-weight: 700;
    color: #0097b7;
    white-space: nowrap;
    padding-top: .4rem;
    letter-spacing: 0.12rem;
    margin-right: 2rem;
    width: 8.5rem;
}
.job-filter__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    width: calc(100% - 10.5rem);
}
.job-filter__tag {
    font-size: min(17px, 1.7vw);
    padding: 6px 17px 4px;
    border-radius: 100px;
    border: 1px solid #0097b7;
    background: #fff;
    color: #0097b7;
    cursor: pointer;
    transition: background .18s, color .18s, border-color .18s;
    letter-spacing: 0.05rem;
}
.job-filter__tag:hover {
    background: #e8f6f9;
    border-color: #0097b7;
}
.job-filter__tag.is-active,
.job-filter__tag--reset.is-active {
    background: #0097b7;
    border-color: #0097b7;
    color: #fff;
}

/* ---- COUNT ---- */
.job-list__meta {
    color: #0097b7;
    margin-bottom: 2rem;
    display: flex;
    align-items: end;
    justify-content: space-between;
    font-weight: 700;
    letter-spacing: 0.12rem;
}
.job-list__meta .job-list_title {
    font-size: min(22px, 2.2vw);
}
.job-list__meta .job-list_narrow {
    font-size: min(15px, 1.5vw);
}
.js-job-count {
    font-size: 255%;
    margin: 0 0.2em;
}

/* ---- JOB CARDS ---- */
.job-cards {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.job-card {
    background: #fff;
    border: 2px solid #0097b7;
    box-sizing: border-box;
    padding: 1.5rem 1.3rem;
    border-radius: 10px;
    width: 100%;
    box-shadow: 7px 7px #80cbdb;
}
.job-card__link {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 2rem;
}
.job-card__body {
    flex: 1;
    min-width: 0;
}
.job-card__title {
    font-size: min(29px, 2.9vw);
    font-weight: 700;
    letter-spacing: 0.12rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    border-bottom: 3px dashed #c9e9f0;
    padding-bottom: 0.5rem;
}
.job-card__dept-label {
    color: #0097b7;
    margin-left: -15px;
}
.job-card__title.funeral .job-card__dept-label { color: #ffae00; }
.job-card__title.transport .job-card__dept-label { color: #0ca96a; }
.job-card__title.yuukan .job-card__dept-label { color: #e578a3; }

.job-card__area {
    margin-bottom: 3rem;
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
    flex-wrap: wrap;
}
.job-card__area-label {
    font-weight: 500;
    font-size: min(18px, 1.8vw);
    padding: 0 0 0 13px;
    white-space: nowrap;
}
.job-card__area-text {
    font-size: min(19px, 2vw);
    font-weight: 500;
    border-left: 1px solid #e9e8e8;
    padding-left: 1rem;
}
.job-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 0 13px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}
.job-card__feature {
    font-size: min(17px, 2vw);
    padding: 8px 20px 6px;
    border-radius: 100px;
    color: #0097b7;
    background: #e8f6f9;
    font-weight: 500;
    letter-spacing: 0.12rem;
}
.job-card__feature.use-skills,.job-card__feature.fulltime-path,.job-card__feature.flex-hours,.job-card__feature.employment {
    background: #e8f6fc;
    color: #15a5dd;
}
.job-card__feature.customer-service,.job-card__feature.pension {
    background: #fff7d8;
    color: #ff9730;
}
.job-card__feature.no-experience-ok,.job-card__feature.no-transfer,.job-card__feature.travel-paid,.job-card__feature.urgent-hire {
    background: #fcf2f6;
    color: #e578a3;
}
.job-card__feature.midnight-work,.job-card__feature.short-ok,.job-card__feature.health {
    background: #fff5ea;
    color: #ff9730;
}
.job-card__feature.back-office,.job-card__feature.workers-comp,.job-card__feature.pay-raise {
    background: #e7f6f0;
    color: #0ca96a;
}

.job-card__arrow {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    background: #0097b7;
    border: 1px solid #0097b7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: 0.6s all;
}
.job-card__arrow .icon-arrow {
    width: 12px;
    height: 11px;
}
.job-card__link:hover .job-card__arrow {
    background: #fff;
    color: #0097b7;
}

/* ---- RESPONSIVE: job listing ---- */
@media (max-width: 768px) {
    .job-cards {
        gap: 1.5rem;
    }
    .job-list-section {
        padding: 3rem 0 4rem;
    }
    .job-list-section__inner {
        padding: 0 10px;
    }
    .job-filter {
        padding: 1.8rem 1.2rem 1.4rem;
        margin-bottom: 1rem;
    }
    .job-filter__heading {
        font-size: min(25px, 4.5vw);
        margin-bottom: 1.4rem;
    }
    .job-filter__row {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem 0;
    }
    .job-filter__label {
        padding-top: 0;
        font-size: min(20px, 3.6vw);
    }
    .job-filter__tags {
        gap: 0.5rem;
        width: 100%;
    }
    .job-filter__tag {
        font-size: min(17px, 3.8vw);
        padding: 8px 20px 6px;
    }
    .job-filter__row:last-of-type {
        border-bottom: none;
    }
    .job-list__meta {
        flex-wrap: wrap;
        flex-direction: column-reverse;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .job-list__meta .job-list_title {
        font-size: min(22px, 4.5vw);
        letter-spacing: 0.12rem;
        align-self: flex-start;
    }
    .job-list__meta .job-list_narrow {
        font-size: min(15px, 2.9vw);
    }
    .job-card {
        padding: 1.5rem 1rem;
    }
    .job-card__link {
        align-items: end;
    }
    .job-card__title {
        font-size: min(29px, 5.2vw);
        width: 105%;
        line-height: 1.2;
        padding: 0.5rem 0.5rem 0.9rem;
    }
    .job-card__dept-label {
        margin-left: -10px;
        margin-bottom: 10px;
        display: block;
    }
    .job-card__area-label {
        font-weight: 500;
        font-size: min(20px, 3.6vw);
        white-space: nowrap;
        padding: 0;
    }
    .job-card__area-text {
        font-size: min(18px, 3.8vw);
        font-weight: 500;
        line-height: 1.5;
        width: 100%;
        padding-left: 0;
        border-left: none;
    }
    .job-card__area {
        width: 117%;
        gap: 0.5rem;
    }
    .job-card__features {
        gap: 0.4rem;
        padding: 0;
        margin: 0;
    }
    .job-card__feature {
        font-size: min(15px, 3.2vw);
    }
    .job-card__arrow {
        width: 30px;
        height: 30px;
    }
    .job-card__arrow .icon-arrow {
        width: 11px;
        height: 10px;
    }

    .archive .job-list__meta {
        flex-direction: row;
    }
    .archive .job-list__meta .job-list_title {
        align-self: inherit;
    }
}
@media (max-width: 480px) {
    .job-card__title {
        width: 120%;
    }
    .job-card__area {
        width: 125%;
    }
}

/* ============================================================
   募集要項詳細ページ（single-job_full / single-job_part）
   ============================================================ */

.job-single {
    padding-bottom: 5rem;
    margin-top: 2rem;
}
.job-single__inner {
    padding: 1.5rem 1.8rem 3.5rem;
}

/* ---- ヘッダーカード ---- */
.job-single__head {
    padding-top: 1rem;
    margin-bottom: 3.5rem;
}
.job-single__head .job-card__area {
    margin-bottom: 1.5rem;
}
.job-single__head .job-card__feature {
    font-size: min(17px, 1.7vw);
}

/* ---- メイン画像 ---- */
.job-single__main-img {
    margin-bottom: 3rem;
    border-radius: 10px;
    overflow: hidden;
    height: 25vw;
}
.job-single__main-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* ---- この仕事の魅力 ---- */
.job-appeal {
    margin-bottom: 6rem;
}
.job-appeal__label,
.job-table-section__label {
    font-size: min(18px, 1.8vw);
    letter-spacing: 0.05rem;
    color: #a1d9e4;
    text-align: center;
    margin-bottom: 0.5rem;
}
.job-appeal__heading,
.job-table-section__heading {
    font-size: min(22px, 2.2vw);
    font-weight: 700;
    color: #0097b7;
    text-align: center;
    letter-spacing: 0.12rem;
    margin-bottom: 2rem;
}
.job-appeal__section {
    margin-bottom: 2.5rem;
}
.job-appeal__subheading {
    font-size: min(18px, 1.8vw);
    font-weight: 700;
    color: #0097b7;
    margin-bottom: .8rem;
    padding-bottom: .8rem;
    border-bottom: 3px dashed #c9e9f0;
}
.job-appeal__text {
    font-size: min(17px, 1.7vw);
    line-height: 1.7;
    background: #edf8fa;
    border-radius: 10px;
    padding: 1rem 1rem 0.8rem;
    font-weight: 400;
    letter-spacing: 0.12rem;
}
.job-appeal__imgs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 3rem;
}
.job-appeal__imgs img {
    width: 100%;
    height: 19.8vw;
    border-radius: 10px;
    display: block;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}
.job-appeal__imgs img:only-child {
    grid-column: 1 / -1;
}

/* ---- 募集要項テーブル ---- */
.job-table-section {
    margin-bottom: 3.5rem;
}
.job-table {
    width: 100%;
    border-collapse: collapse;
    font-size: min(17px, 1.7vw);
    line-height: 1.6;
    letter-spacing: 0.12rem;
    font-weight: 400;
}
.job-table th,
.job-table td {
    padding: 1rem 1.2rem;
    border: 1px solid #0097b7;
    vertical-align: middle;
}
.job-table th {
    background: #edf8fa;
    font-weight: 700;
    white-space: nowrap;
    width: 205px;
    text-align: center;
    border-right: none;
}
.job-table td {
    border-left: none;
    padding: 1rem 3rem;
}
/* wysiwyg 出力リセット */
.job-table td ul,
.job-table td ol {
    padding-left: 1.4em;
    margin: .3em 0;
    list-style: disc;
}
.job-table td li::marker {
    color: #0097b7;
}
.job-table td p {
    margin: 0 0 .3em;
}
.job-table td p:last-child {
    margin-bottom: 0;
}

.job-single__inner .contact .section-label,
.job-single__inner .contact .section-subtitle {
    display: none;
}
.job-single__inner .contact {
    background: #ffffff;
}
.job-single__inner .contact .contact__inner {
    padding: 0;
    width: 100%;
}
.job-single__inner .contact__card {
    margin-top: 0;
    box-shadow: none;
    border: none;
    background: #edf8fa;
    width: 100%;
}
.job-single__inner .contact__qr {
    background: #fff;
    padding: 10px;
    width: min(126px, 33%);
}

/* ---- 一覧に戻るボタン ---- */
.job-back {
    text-align: center;
    padding: 4rem 0 3rem;
}
.job-back__btn {
    display: block;
    text-align: center;
    margin: auto;
    padding: 1rem 2.5rem 0.8rem;
    border: 2px solid #0097b7;
    background: #fff;
    border-radius: 100px;
    color: #0097b7;
    text-decoration: none;
    font-size: min(24px, 2.4vw);
    font-weight: 700;
    transition: background .2s, color .2s;
    width: min(277px, 50%);
    position: relative;
}
.job-back__btn .arrow {
    color: #0097b7;
    transform: rotateZ(180deg) translate(-50%, -50%);
    top: 29%;
    left: 4%;
}
.job-back__btn:hover {
    background: #0097b7;
    color: #fff;
}
.job-back__btn:hover .arrow {
    color: #fff;
}

/* ---- レスポンシブ ---- */
@media (max-width: 768px) {
    .job-single {
        margin-top: 1rem;
    }
    .job-single__inner {
        padding: 1.5rem 1rem 3rem;
    }
    .job-single__head {
        padding: 0;
        margin-bottom: 2.5rem;
    }
    .job-single__head .job-card__title,
    .job-single__head .job-card__area {
        width: 100%;
    }
    .job-single__head .job-card__features {
        margin: 0;
    }
    .job-single__head .job-card__feature {
        font-size: min(17px, 3.3vw);
    }
    .job-single__main-img {
        height: 40vw;
    }
    .job-appeal__label,
    .job-table-section__label {
        font-size: min(18px, 3.3vw);
    }
    .job-appeal__heading,
    .job-table-section__heading {
        font-size: min(22px, 4.2vw);
    }
    .job-appeal__subheading {
        font-size: min(18px, 3.8vw);
    }
    .job-appeal__text {
        font-size: min(15px, 3.7vw);
    }
    .job-appeal__imgs {
        gap: 0.5rem;
        margin-top: 0rem;
    }
    .job-appeal__imgs img {
        height: 30vw;
    }
    .job-table {
        font-size: min(15px, 3.7vw);
    }
    .job-table,
    .job-table tbody,
    .job-table tr,
    .job-table th,
    .job-table td {
        display: block;
        width: 100%;
    }
    .job-table tr {
        border: 1px solid #0097b7;
        border-bottom: none;
        overflow: hidden;
    }
    .job-table tr:last-of-type {
        border: 1px solid #0097b7;
    }
    .job-table th,
    .job-table td {
        border: none;
        padding: 1.2rem 1rem;
    }
    .job-table th {
        white-space: normal;
        padding: 1rem 1rem 0.8rem;
    }
    .job-back__btn {
        font-size: min(24px, 4.2vw);
        width: min(277px, 80%);
    }
    .job-back__btn .arrow {
        width: 13px;
    }
}
@media (max-width: 480px) {
    .job-appeal__imgs {
        grid-template-columns: 1fr;
    }
    .job-back__btn {
        padding: 1rem 2.5rem 1rem;
    }
}

/* ============================================================
   社員紹介 詳細（single-team）
   ============================================================ */

/* ---- パンくず：staff ページはメインカラー ---- */
.staff-page .breadcrumb__list {
    color: var(--staff-main, #0ca96a);
}
.staff-page .breadcrumb__item::after {
    background: var(--staff-main, #0ca96a);
}
.staff-page .breadcrumb__item a {
    color: var(--staff-main, #0ca96a);
}

/* ---- 固定背景線：staff ページは少し薄く ---- */
.staff-page .bg-fixed-lines {
    opacity: 0.05;
}

/* ---- staff-header ---- */
.staff-header {
    background: var(--staff-header-bg, #d3f0e4);
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.staff-header__inner {
    position: relative;
    z-index: 2;
    padding-top: 10rem;
    padding-bottom: 0;
}
.staff-header__content,
.message-header__content {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
}
.staff-header__text {
    flex: 1;
    padding-bottom: 5rem;
}
.staff-header__catchphrase {
    font-size: min(40px, 3.5vw);
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}
.staff-header__catchphrase span {
    display: inline;
    background: var(--staff-main, #0ca96a);
    color: #fff;
    padding: 0.1em 0.2em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.staff-header__company,
.staff-header__dept {
    font-size: min(14px, 1.4vw);
    font-weight: 600;
    color: var(--staff-main, #0ca96a);
    display: table;
    background: #fff;
    padding: 7px 10px 5px;
}
.staff-header__company { margin-bottom: 0.4rem; }
.staff-header__dept    { margin-bottom: 0.5rem; }
.staff-header__name {
    background: #fff;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 10px 10px 7px;
}
.staff-header__name-jp {
    font-size: min(26px, 2.6vw);
    font-weight: 700;
    color: var(--staff-main, #0ca96a);
    border-right: 1px solid var(--staff-main, #0ca96a);
    padding-right: 1rem;
}
.staff-header__name-en {
    font-size: min(15px, 1.5vw);
    font-weight: 700;
    color: var(--staff-main, #0ca96a);
}
.staff-header__img {
    position: absolute;
    width: 55%;
    bottom: 0;
    right: -3rem;
    height: min(550px, 55vw);
    overflow: hidden;
}
.staff-header__img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.staff-header__vertical-name {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-size: min(13px, 1.3vw);
    font-weight: 600;
    color: var(--staff-main, #0ca96a);
    letter-spacing: 0.12em;
    white-space: nowrap;
    z-index: 3;
}
.staff-header__wave,
.message-header__wave {
    position: absolute;
    z-index: 1;
    width: 110%;
    line-height: 0;
    top: -1rem;
    left: -5rem;
}
.staff-header__wave  { opacity: 0.1; }
.message-header__wave { opacity: 0.25; }
.staff-header__wave svg,
.message-header__wave svg {
    width: 100%;
    height: auto;
    display: block;
}
.staff-header__wave .wave--sp,
.message-header__wave .wave--sp { display: none; }

@media (max-width: 768px) {
    .staff-header__inner {
        padding-top: 21.5rem;
    }
    .staff-header__vertical-name {
        right: 1rem;
        font-size: min(13px, 2vw);
    }
    .staff-header__content {
    }
    .staff-header__text {
        width: 100%;
        padding-bottom: 1.5rem;
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column-reverse;
    }
    .staff-header__catchphrase {
        font-size: min(22px, 5vw);
        margin-top: 1rem;
        margin-bottom: 1.8rem;
    }
    .staff-header__company,
    .staff-header__dept {
        font-size: min(12px, 3vw);
        padding: 4px 5px 2px;
        margin-bottom: 0.2rem;
    }
    .staff-header__name {
        gap: 0.5rem;
        padding: 8px 7px 5px;
    }
    .staff-header__name-jp {
        font-size: min(16px, 4vw);
        padding-right: 0.5rem;
    }
    .staff-header__name-en {
        font-size: min(10px, 2.8vw);
    }
    .staff-header__img {
        width: 80%;
        right: 0;
        bottom: 0;
        height: auto;
    }
    .staff-header__wave {
        width: 110%;
        transform: none;
        left: 0;
        top: -12rem;
    }
    .staff-header__wave .wave--pc,
    .message-header__wave .wave--pc { display: none; }
    .staff-header__wave .wave--sp,
    .message-header__wave .wave--sp { display: block; }
}
@media (max-width: 480px) {
    .staff-header__inner {
        padding-top: 14.5rem;
    }
    .staff-header__wave {
        top: -8rem;
    }
}
/* ---- staff-person（どんな人？） ---- */
.staff-person {
    position: relative;
    z-index: 1;
}
.staff-person__inner {
    display: flex;
    border: 2px solid var(--staff-main, #0ca96a);
    padding: 2rem 3rem 1.5rem;
    text-align: center;
    position: relative;
    border-radius: 10px;
    width: 75.5%;
    margin-left: auto;
    margin-right: 0;
}
.staff-person__inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--staff-card-bg, #ecf8f3);
    border-radius: 10px;
    transform: translate(10px, 10px);
    z-index: -1;
    pointer-events: none;
}
.staff-person__label {
    flex-shrink: 0;
    writing-mode: vertical-rl;
    font-size: min(20px, 2vw);
    font-weight: 700;
    color: var(--staff-main, #0ca96a);
    letter-spacing: 0.18em;
    border-left: 3px solid var(--staff-main, #0ca96a);
    padding: 1rem 0 1rem 0.6rem;
}
.staff-person__body {
    flex: 1;
    display: flex;
    gap: 3vw;
    align-items: flex-start;
}
.staff-person__comment {
    display: flex;
    align-items: center;
    gap: 2.3vw;
    width: 50%;
}
.staff-person__comment-img {
    width: 117px;
    width: 40%;
}
.staff-person__comment-img img {
    border-radius: 100px;
}
.staff-person__comment-text {
    font-size: min(14px, 1vw);
    line-height: 1.4;
    font-weight: 700;
    color: var(--staff-main, #0ca96a);
    position: relative;
    width: 50%;
}
.staff-person__comment-bubble {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 120%;
    transform: translate(-50%, -50%);
}
.staff-person__comment-bubble path {
    stroke: var(--staff-header-bg, #d3f0e4);
    stroke-width: 1;
}
.staff-person__comment-bubble svg {
    filter: drop-shadow(2px 4px 0 var(--staff-header-bg, #d3f0e4));
}
.staff-person__scale {
    width: 67%;
}
.staff-person__scale img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 768px) {
    .staff-person {
        padding: 1rem 5px;
    }
    .staff-person__inner {
        width: 100%;
        padding: 1.5rem 1rem 1rem;
    }
    .staff-person__inner::after {
        transform: translate(8px, 8px);
    }
    .staff-person__label {
        font-size: min(16px, 4vw);
        padding: 0.8rem 0 0.8rem 0.5rem;
    }
    .staff-person__body {
        flex-direction: column;
        gap: 1.3rem;
        align-items: center;
    }
    .staff-person__comment {
        align-items: center;
        gap: 1.3rem;
        width: 70%;
    }
    .staff-person__comment-img {
        width: 33%;
    }
    .staff-person__comment-text {
        font-size: min(13px, 2.8vw);
        width: 52%;
    }
    .staff-person__scale {
        width: 95%;
        margin: 0 auto;
    }
}
@media (max-width: 480px) {
    .staff-person__comment-text {
        font-size: min(13px, 2.3vw);
    }
}

/* ---- staff-interview ---- */
.staff-interview {
    position: relative;
    z-index: 1;
    padding: 1rem 0 7rem;
}
.staff-interview__inner {
    display: flex;
    gap: min(60px, 5vw);
    align-items: flex-start;
}

/* TOPICS サイドナビ（history-index と同スタイル） */
.staff-topics {
    width: 20%;
    flex-shrink: 0;
    position: sticky;
    top: 5rem;
    align-self: flex-start;
    padding-top: 1rem;
}
.staff-topics__label {
    font-size: min(17px, 1.7vw);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #fff;
    margin-bottom: 1rem;
    background: var(--staff-main, #0ca96a);
    display: inline-block;
    padding: 2px 4px 0;
    margin-left: 0.9rem;
}
.staff-topics__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.staff-topics__item {
    padding: 0;
}
.staff-topics__link {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    text-decoration: none;
    padding: 0.8rem 0;
    cursor: pointer;
}
.staff-topics__dot {
    width: 6.8px;
    height: 6.8px;
    min-width: 6.8px;
    border-radius: 50%;
    flex-shrink: 0;
    visibility: hidden;
    background: var(--staff-main, #0ca96a);
    transition: background 0.3s ease;
    margin-top: 0.45em;
}
.staff-topics__text {
    font-size: min(14px, 1.4vw);
    color: #cccac9;
    line-height: 1.55;
    transition: color 0.3s ease;
    font-weight: 600;
}
/* section07 タイトル内の <br> を TOPICS では非表示（family-talk-page は除く） */
.staff-topics__text br {
    display: none;
}
.family-talk-page .staff-topics__text br {
    display: inline;
}
.staff-topics__link.is-active .staff-topics__dot {
    visibility: visible;
}
.staff-topics__link.is-active .staff-topics__text {
    color: var(--staff-main, #0ca96a);
}

/* インタビュー メインコンテンツ */
.staff-interview__main {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 2px solid var(--staff-main, #0ca96a);
    box-sizing: border-box;
    padding: 3rem 2.5rem 0;
    border-radius: 10px;
    width: 90%;
    box-shadow: 7px 7px var(--staff-header-bg, #d3f0e4);
}
.staff-interview__top {
    margin-bottom: 3rem;
}
.staff-interview__top-img {
    margin-bottom: 2.5rem;
    border-radius: 10px;
    overflow: hidden;
}
.staff-interview__top-img img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 26vw;
    object-fit: cover;
}
.staff-interview__top-text {
    font-size: min(17px, 1.7vw);
    line-height: 2;
    font-weight: 500;
}
.staff-interview__section {
    padding: 0 0 3.5rem;
}
.staff-interview__section:first-child {
    border-top: none;
    padding-top: 0;
}
.staff-interview__section-title {
    font-size: min(26px, 2.6vw);
    font-weight: 700;
    color: var(--staff-main, #0ca96a);
    line-height: 1.5;
    margin-bottom: 1rem;
    border-bottom: 3px dashed #c9e9f0;
    padding-bottom: 0.5rem;
}
.staff-interview__section-text {
    font-size: min(17px, 1.7vw);
    line-height: 1.8;
    font-weight: 400;
}

/* セクション07 タイトル：行ごとに背景色 */
.staff-interview__section-title--highlight {
    border-left: none;
    padding-left: 0;
    line-height: 1.7;
    border: none;
    color: inherit;
}
.staff-interview__section-title--highlight span {
    display: inline;
    background: var(--staff-main, #0ca96a);
    color: #fff;
    padding: 0.15em 0em 0.16rem 0.7rem;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* セクション07：画像＋テキスト */
.staff-interview__section--image {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
}
.staff-interview__section-img {
    flex-shrink: 0;
    width: min(280px, 40%);
    border-radius: 10px;
    overflow: hidden;
}
.staff-interview__section-img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.staff-interview__section-body {
    flex: 1;
}

@media (max-width: 768px) {
    .staff-interview {
        padding: 1rem 0 5rem;
    }
    .staff-interview__inner {
        flex-direction: column;
        padding: 10px 5px;
    }
    .staff-topics {
        display: none;
    }
    .staff-interview__main {
        padding: 0.8rem 0.8rem 0;
        width: 100%;
    }
    .staff-interview__top-img {
        margin-bottom: 2rem;
    }
    .staff-interview__top-img img {
        width: 100%;
        height: 60vw;
        display: block;
        max-height: initial;
        object-fit: cover;
    }
    .staff-interview__section {
        padding: 0 0 3rem;
    }
    .staff-interview__top-text {
        font-size: min(15px, 4vw);
    }
    .staff-interview__section-title {
        font-size: min(20px, 5vw);
    }
    .staff-interview__section-text {
        font-size: min(15px, 4vw);
    }
    .staff-interview__section--image {
        flex-direction: column;
        gap: 1rem;
    }
    .staff-interview__section-img {
        width: 100%;
    }
    .staff-interview__section-img img {
        height: 70vw;
    }
}

/* ---- team-ceremo スライダー ---- */
.team-ceremo {
    background: #f5fbfc;
    position: relative;
    z-index: 1;
    padding: 4rem 0 7rem;
}
.team-ceremo__inner {
    width: 95%;
    margin: 0 auto;
    padding: 0 20px;
}
.team-ceremo .line_arrow_btn svg {
    color: #fff;
}
.team-ceremo .swiper-slide .inner::before {
    border-radius: 10px;
}

@media (max-width: 768px) {
    .team-ceremo {
        padding: 3rem 0 5rem;
    }
    .team-ceremo__inner {
        padding: 0 10px;
    }
}

/* team-ceremo スライダー：CSS変数でカラー制御 */
.team-ceremo .swiper-slide::before         { background: linear-gradient(90deg, var(--staff-grad-start), var(--staff-grad-end)); }
.team-ceremo .swiper-slide::after          { background: var(--staff-sub); }
.team-ceremo .swiper-slide .inner::before  {
    content: "";
    background: var(--staff-photo) no-repeat top center;
    background-size: 100%;
}
.team-ceremo .swiper-slide .company_name,
.team-ceremo .swiper-slide .name_wrap      { color: var(--staff-main); }
.team-ceremo .swiper-slide .line_arrow_btn { border-color: var(--staff-main); background: var(--staff-main); }
.team-ceremo .swiper-slide:hover .line_arrow_btn svg { color: var(--staff-main); }

/* swiper ナビゲーションボタン */
.team-ceremo .swiper-button_wrap .line_arrow_btn svg {
    color: #0097B7;
}
.team-ceremo .swiper-button_wrap .line_arrow_btn:hover {
    background-color: #0097B7;
    border-color: #0097B7;
}
.team-ceremo .swiper-button_wrap .line_arrow_btn:hover svg {
    color: #fff;
}

/* ============================================================
   社員紹介一覧（page-team）
   ============================================================ */
.team-archive {
    padding: 1rem 0 10rem;
}

/* グリッドレイアウト */
.team-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem 2rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* カード基本（.swiper_about_ceremo .swiper-slide ベース） */
.team-card {
    aspect-ratio: 3 / 4;
    background: #fff;
    position: relative;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

/* グラデーションボーダー */
.team-card::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -1;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--staff-grad-start), var(--staff-grad-end));
}

/* シャドウボックス */
.team-card::after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 10px;
    position: absolute;
    top: 10px;
    right: -10px;
    z-index: 0;
    mix-blend-mode: multiply;
    background: var(--staff-sub);
}

/* 内側リンク */
.team-card .inner {
    background-color: #fff;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    text-decoration: none;
}

/* スタッフ写真 */
.team-card .inner::before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: var(--staff-photo) no-repeat top center;
    background-size: 100%;
    transition: background-size 0.4s ease;
}

.team-card:hover .inner::before {
    background-size: 110%;
}

/* 名前ボックス */
.team-card .name_box {
    margin-top: auto;
    display: flex;
    padding: 0 6% 6% 10%;
    align-items: flex-end;
    line-height: 1.1;
}

/* CSS変数でカラー制御 */
.team-card .company_name,
.team-card .name_wrap {
    color: var(--staff-main);
}
.team-card .font_size_m,
.team-card .font_size_l {
    color: var(--staff-main);
}
.team-card .line_arrow_btn { 
    border-color: var(--staff-main); 
    background: var(--staff-main);
    z-index: 1;
}
.team-card .line_arrow_btn svg { color: #fff; }
.team-card:hover .line_arrow_btn { background: #fff; }
.team-card:hover .line_arrow_btn svg { color: var(--staff-main); }

@media (max-width: 1024px) {
    .team-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .team-archive {
        padding: 1rem 0 5rem;
    }
    .team-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.8rem 1.6rem;
    }
    
}

@media (max-width: 480px) {
   .team-archive .company_name {
        gap: 1.2rem 1.1rem;
        font-size: 2vw;
        padding: 7px 7px 4px 7px;
   }
   .team-list {
        gap: 1.2rem 1.1rem;
   }
   .team-card::after {
        top: 6px;
        right: -6px;
   }
    .team-archive  .midasi_03.name_wrap {
        font-size: 16px;
    }
    .team-archive .team-card .line_arrow_btn {
        width: 25px;
        height: 25px;
    }
    .team-archive .team-card .line_arrow_btn svg {
        width: 8px;
    }
    .team-archive .team-card .midasi_03.name_wrap {
        width: calc(98% - 25px);
        font-size: 13px;
    }
    .team-archive .team-card .midasi_03.name_wrap .font_size_l {
        margin-top: 5px;
    }
    .team-archive .team-card .midasi_03.name_wrap .font_size_m {
        display: inline;
        padding: 1% 3%;
    }
}

/* ============================================================
   代表メッセージ（page-message）
   ============================================================ */

/* ---- 固定背景線：少し薄く ---- */
.message-page .bg-fixed-lines {
    opacity: 0.25;
}

/* ---- message-header ---- */
.message-header {
    background: #d3f5f0;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.message-header__inner {
    position: relative;
    z-index: 2;
    padding-top: 10rem;
    padding-bottom: 7rem;
    padding-left: 3rem;
}
.message-header__text {
    flex: 1;
    padding-bottom: 3rem;
}
.message-header__en {
    font-size: min(22px, 2.2vw);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #0097b7;
    line-height: 1;
    background: #fff;
    display: inline;
    padding: 1px 7px 0px 5px;
}
.message-header__catchphrase {
    font-size: min(40px, 3.5vw);
    font-weight: 700;
    line-height: 1.6;
    margin-top: 1rem;
    letter-spacing: 0.04em;
}
.message-header__catchphrase span {
    display: inline;
    background: #0097b7;
    color: #fff;
    padding: 0.12em 0.05em 0.2rem 0.5rem;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.message-header__img {
    position: absolute;
    width: 32%;
    bottom: 0;
    right: 10rem;
    height: min(520px, 55vw);
    overflow: hidden;
}
.message-header__img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
/* ---- message-body ---- */
.message-body {
    padding: 2rem 0 13rem;
}
.message-text__inner {
    width: 60.5%;
    margin: auto;
}
.message-text__inner p {
    font-size: min(18px, 1.8vw);
    line-height: 2.2;
    font-weight: 700;
    margin-bottom: 2em;
}
.message-body__img {
    width: min(220px, 17%);
    height: auto;
    object-fit: cover;
}
.message-body__img--left,
.message-body__img--right {
    position: absolute;
}
.message-body__img--left  { left: 0; top: 0; }
.message-body__img--right { bottom: 1rem; right: 0; }

.message-body__sign {
    width: min(200px, 40%);
    margin-left: auto;
}

/* ---- レスポンシブ ---- */
@media (max-width: 768px) {
    .message-header__inner {
        padding: 10px;
        padding-top: 21.5rem;
        padding-bottom: 2rem;
    }
    .message-header__content {
        flex-direction: column-reverse;
        align-items: center;
        gap: 1.5rem;
    }
    .message-header__text {
        width: 100%;
        padding-bottom: 1.5rem;
        position: relative;
        z-index: 2;
    }
    .message-header__en {
        font-size: min(22px, 4.5vw);
        margin-bottom: 1rem;
    }
    .message-header__catchphrase {
        font-size: min(26px, 5.5vw);
    }
    .message-header__img {
        width: 56%;
        right: 6rem;
        bottom: -8rem;
        height: auto;
    }
    .message-header__wave {
        width: 110%;
        transform: none;
        left: 0;
        top: -12rem;
    }

    .message-body {
        padding: 0 0 8rem;
    }
    .message-text__inner {
        width: 90%;
        margin: auto;
    }
    .message-text__inner p {
        font-size: min(15px, 4.3vw);
    }
    .message-body__sign {
        width: min(200px, 45%);
    }
    .message-body__img {
        width: min(140px, 27%);
    }
    .message-body__img--left {
        top: -10rem;
        left: auto;
        right: 0rem;
    }
    .message-body__img--right {
        bottom: -7rem;
        left: 0.5rem;
        right: auto;
        width: min(160px, 40%);
    }
}
@media (max-width: 480px) {
    .message-header__inner {
        padding-top: 15.5rem;
    }
    .message-header__wave {
        width: 128%;
    }
    .message-body__img--left {
        top: -8rem;
    }
    .message-body__img--right {
        bottom: -7rem;
    }
}

/* ============================================================
   パパママ座談会（page-family_talk）
   ============================================================ */

/* ---- ヒーローヘッダー ---- */
.family-talk-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 1;
}
.family-talk-hero__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.family-talk-hero__text {
    position: absolute;
    bottom: 2.5rem;
    left: 5%;
    line-height: 1;
}
.family-talk-hero__label {
    display: inline-block;
    font-size: min(25px, 2.5vw);
    font-weight: 700;
    color: #fff;
    background: #0097b7;
    padding: 9px 14px 7px;
    letter-spacing: 0.1em;
    margin-bottom: 0.8rem;
}
.family-talk-hero__title {
    font-size: min(45px, 4.5vw);
    font-weight: 700;
    color: #0097b7;
    background: #fff;
    letter-spacing: 0.06em;
    padding: 8px 14px 5px;
}

/* ---- メンバー紹介グリッド ---- */
.family-talk-members {
    margin-bottom: 4.5rem;
}
.family-talk-members__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 3rem;
    margin-top: 2rem;
}
.family-talk-member {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.family-talk-member__img {
    flex-shrink: 0;
    width: 38%;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f0f0;
}
.family-talk-member.member-01 .family-talk-member__img { background: #ffe9d4; }
.family-talk-member.member-02 .family-talk-member__img { background: #d8f1e7; }
.family-talk-member.member-03 .family-talk-member__img { background: #d7f0f9; }
.family-talk-member.member-04 .family-talk-member__img { background: #fae7ee; }
.family-talk-member__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.family-talk-member__info {
    flex: 1;
}
.family-talk-member__name-en {
    font-size: min(12px, 1.2vw);
    font-weight: 600;
    color: var(--section-color, #0ca96a);
    letter-spacing: 0.1em;
    margin-bottom: 0.4rem;
}
.family-talk-member.member-01 .family-talk-member__name-en { color: #ffd9b2; }
.family-talk-member.member-02 .family-talk-member__name-en { color: #a5dfc8; }
.family-talk-member.member-03 .family-talk-member__name-en { color: #a8def2; }
.family-talk-member.member-04 .family-talk-member__name-en { color: #f5cddd; }

.family-talk-member__name-ja {
    font-size: min(20px, 2vw);
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.3;
    margin-bottom: 0.8rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #c9e9f0;
}
.family-talk-member__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.family-talk-member__list li {
    font-size: min(13px, 1.3vw);
    padding-left: 1em;
    position: relative;
    line-height: 1.8;
}
.family-talk-member__list li::before {
    content: '●';
    position: absolute;
    left: 0;
    color: var(--section-color, #0ca96a);
    font-size: 0.4em;
    top: 1.5em;
}
.family-talk-member.member-01 .family-talk-member__list li::before { color: #ffc183; }
.family-talk-member.member-02 .family-talk-member__list li::before { color: #6dcba6; }
.family-talk-member.member-03 .family-talk-member__list li::before { color: #73c9eb; }
.family-talk-member.member-04 .family-talk-member__list li::before { color: #efaec8; }
.family-talk-members__note {
    text-align: right;
    font-size: 12px;
    margin-top: 1.2rem;
}

@media (max-width: 768px) {
    .family-talk-members__note {
        text-align: left;
    }
}

/* ---- セクション見出し・名前をセクションカラーで上書き ---- */
.family-talk-page .talk-section__heading {
    color: var(--section-color, #009d8e);
}
.family-talk-page .talk-row__name {
    color: var(--section-color, #009d8e);
}

/* ---- TOPICS：--section-color と連動 ---- */
.family-talk-page .staff-topics__label {
    background: var(--topics-color, #0ca96a);
}
.family-talk-page .staff-topics__link.is-active .staff-topics__text {
    color: var(--topics-color, #0ca96a);
}
.family-talk-page .staff-topics__link.is-active .staff-topics__dot {
    background: var(--topics-color, #0ca96a);
}

/* ---- 会話行（アイコンなし・横並び） ---- */
.family-talk-row {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}
.family-talk-row__name {
    flex-shrink: 0;
    width: 4em;
    font-size: min(17px, 1.7vw);
    font-weight: 700;
    text-align: justify;
    text-align-last: justify;
}
.family-talk-row .bold {
    font-weight: 700;
}
.family-talk-row .member-01 { color: #ff9730; }
.family-talk-row .member-02 { color: #0ca96a; }
.family-talk-row .member-03 { color: #15a5dd; }
.family-talk-row .member-04 { color: #e578a3; }
.family-talk-row .member-all { color: #0097B7; }
.family-talk-row__text {
    flex: 1;
    font-size: min(17px, 1.7vw);
    line-height: 1.6;
}
.family-talk-page .tb {
    display: none;
}

/* ---- レスポンシブ ---- */
@media (max-width: 768px) {
    .family-talk-row__name { font-size: 14px; width: 3.5em; display: block; margin-bottom: 2px; }
    .family-talk-row__text { font-size: 15px; }
    .family-talk-hero__label {
        font-size: min(18px, 3.5vw);
        padding: 6px 9px 4px;
        margin-bottom: 0.7rem;
    }
    .family-talk-hero__text {
        bottom: 1.2rem;
    }
    .family-talk-hero__title {
        font-size: min(34px, 6.5vw);
        padding: 6px 9px 2px;
    }
    .family-talk-members__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .family-talk-member__img {
        width: 32%;
    }
    .family-talk-member__name-en { font-size: 10px; }
    .family-talk-member__name-ja { font-size: 18px; }
    .family-talk-member__list li { font-size: 12px; }
    .family-talk-row { gap: 1.5rem; margin-bottom: 1.2rem; }
    .family-talk-page .tb { display: block; }
    .family-talk-page .tb_none { display: none; }

    .talk-img img {
        width: 100%;
        height: 60vw;
        display: block;
        max-height: initial;
        object-fit: cover;
    }
}

/* ============================================================
   社長・社員対談（page-talk）
   ============================================================ */

/* ---- talk-header（画像） ---- */
.talk-header {
    width: 100%;
    height: max(522px, 41.8vw);
    line-height: 0;
    position: relative;
    z-index: 1;
}
.talk-header__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.talk-header__text {
    position: absolute;
    width: 100%;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    line-height: 1;
    text-align: center;
}
.talk-header__title,
.talk-header__name,
.talk-header__role,
.talk-header__cross span {
    text-shadow: 0 0 5px rgb(0 0 0 / 30%);
}
.talk-header__title {
    font-size: min(42.7px, 3.5vw);
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}
.talk-header__title span {
    font-size: 125%;
}
.talk-header__members {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}
.talk-header__member {
    line-height: 1;
}
.talk-header__name {
    font-size: min(32px, 2.8vw);
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-bottom: 0.3rem;
}
.talk-header__role {
    font-size: min(13px, 1.3vw);
    font-weight: 500;
    letter-spacing: 0.05em;
}
.talk-header__cross {
    position: relative;
    width: 52px;
    height: 52px;
}
.talk-header__cross span {
    display: block;
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: #ffffff;
    border-radius: 100px;
    right: 0;
    left: 0;
    margin: 0 auto;
}
.talk-header__cross span:first-of-type {
    transform: translateY(26px) rotate(-45deg);
}
.talk-header__cross span:last-of-type {
    transform: translateY(26px) rotate(45deg);
}
@media (max-width: 768px) {
    .talk-header__text {
        bottom: -1.5rem;
    }
    .talk-header {
        height: 80vw;
    }
    .talk-header__title {
        font-size: min(22px, 4.5vw);
        margin-bottom: 0.1rem;
    }
    .talk-header__members {
        gap: 0.8rem;
    }
    .talk-header__name {
        font-size: min(18px, 5vw);
        margin-bottom: 0.3rem;
    }
    .talk-header__role {
        font-size: min(10px, 2.5vw);
    }
    .talk-header__cross {
        width: 10%;
    }
}

/* ---- talk-body ---- */
.talk-body {
    padding: 4rem 0 4rem;
}
.talk-body__inner {
    display: flex;
    gap: min(60px, 5vw);
    align-items: flex-start;
}
.talk-content {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 2px solid #0097b7;
    box-sizing: border-box;
    padding: 2.5rem 2.5rem 0;
    border-radius: 10px;
    width: 100%;
    box-shadow: 7px 7px #80cbdb;
}

/* ---- プロフィールカード ---- */
.talk-profile {
    display: flex;
    gap: 2rem;
    align-items: stretch;
    margin-bottom: 3.5rem;
}
.talk-profile__img {
    flex-shrink: 0;
    width: min(306px, 33%);
    border-radius: 10px;
    overflow: hidden;
}
.talk-profile__img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.talk-profile__body {
    align-self: center;
}
.talk-profile__en {
    font-size: min(15px, 1.5vw);
    font-weight: 500;
    letter-spacing: 0.14em;
    color: #a1d9e4;
    margin-bottom: 0.3rem;
}
.talk-profile__name {
    font-size: min(20px, 2vw);
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: 0.06em;
}
.talk-profile__text {
    font-size: min(14px, 1.4vw);
    line-height: 2;
    font-weight: 400;
}
@media (max-width:768px) {
    .talk-profile__img img {
    height: 42vw;
    object-position: top;
}
}

/* ---- セクション見出し ---- */
.talk-section {
    margin-bottom: 4rem;
}

/* 画像共通プロパティ */
.talk-section__img img,
.talk-photo-grid__top img,
.talk-photo-grid__bottom img,
.talk-closing-img img,
.talk-img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.talk-photo-grid__bottom img,
.talk-closing-img img { border-radius: 10px; }
.talk-img img          { border-radius: 8px; }

/* ---- セクション冒頭の大きい1枚 ---- */
.talk-section__img {
    margin-bottom: 2.5rem;
    border-radius: 8px;
    overflow: hidden;
}
.talk-section__img img {
    /* 共通プロパティは上に統合 */
}

@media (max-width:768px) {
    .talk-section__img img {
        width: 100%;
        height: 60vw;
        display: block;
        max-height: initial;
        object-fit: cover;
    }
}

/* ---- 写真グリッド（上1枚大＋下2枚小） ---- */
.talk-photo-grid {
    margin: 3rem 0;
}
.talk-photo-grid__top {
    margin-bottom: 1rem;
    border-radius: 10px;
    overflow: hidden;
}
.talk-photo-grid__bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.talk-section__heading {
    font-size: min(26px, 2.6vw);
    font-weight: 700;
    color: #0097b7;
    border-bottom: 3px dashed #c9e9f0;
    padding-bottom: 0.8rem;
    margin-bottom: 2rem;
    line-height: 1.3;
}

/* ---- 対談行 ---- */
.talk-row {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 1rem;
}
/* 社員側：左右反転 */
.talk-row--b {
    flex-direction: row-reverse;
}

/* ---- プロフィール ---- */
.talk-row__profile {
    flex-shrink: 0;
    width: 82px;
    text-align: center;
}
.talk-row__avatar {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin-bottom: 0.5rem;
}
.talk-row__name {
    font-size: min(13px, 1.3vw);
    font-weight: 500;
    color: #0097b7;
    line-height: 1.5;
}

/* ---- テキスト ---- */
.talk-row__text {
    flex: 1;
    min-width: 0;
    background: #edf8fa;
    border-radius: 10px;
    padding: 1.5rem;
    position: relative;
}
.talk-row__text::before {
    background-color: #edf8fa;
    content: "";
    height: 30px;
    position: absolute;
    width: 30px;
    top: 1.7rem;
}
.talk-row--a .talk-row__text::before {
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    left: -20px;
}
.talk-row--b .talk-row__text::before {
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    right: -20px;
}
.talk-row__text p {
    font-size: min(17px, 1.7vw);
    line-height: 1.7;
    font-weight: 400;
}

/* ---- クロージング画像（対談〆の1枚） ---- */
.talk-closing-img {
    margin: 0 auto 8rem;
}
/* ---- コンテンツ画像 ---- */
.talk-img {
    margin: 3rem 0;
}

/* ---- レスポンシブ ---- */
@media (max-width: 768px) {
    .talk-body {
        padding: 1rem 0 2rem;
    }
    .talk-body__inner {
        flex-direction: column;
    }
    .talk-content {
        padding: 1.5rem 1.5rem 0;
    }
    .talk-section__heading {
        font-size: min(20px, 5vw);
        padding-bottom: 0.8rem;
        margin-bottom: 1.5rem;
        line-height: 1.4;
    }
    .talk-row {
        gap: 1rem;
        margin-bottom: 1rem;
        flex-direction: column;
    }
    .talk-row__name {
        font-size: min(13px, 4.3vw);
    }
    .talk-row__text {
        padding: 1.3rem;
    }
    .talk-row__text::before {
        width: 15px;
        height: 15px;
        top: 1.5rem;
    }
    .talk-row--a .talk-row__text::before,
    .talk-row--b .talk-row__text::before {
        top: -8px;
        clip-path: polygon(0 100%, 50% 0, 100% 100%);
    }
    .talk-row--a .talk-row__text::before { left: 16px; }
    .talk-row--b .talk-row__text::before { right: 16px; left: auto; }
    .talk-row__text p {
        font-size: min(15px, 4.2vw);
    }
    .talk-profile {
        flex-direction: column;
        gap: 1.5rem;
        margin-bottom: 2.5rem;
    }
    .talk-profile__img {
        width: 100%;
    }
    .talk-profile__en {
       font-size: min(12px, 4.5vw); 
    }
    .talk-profile__name {
        font-size: min(16px, 5vw);
    }
    .talk-profile__text {
        font-size: min(14px, 4.2vw);
        line-height: 1.5;
    }
    .talk-photo-grid__top {
        margin-bottom: 0.5rem;
    }
    .talk-photo-grid__bottom {
        gap: 0.5rem;
    }
    .talk-closing-img {
        margin: 0 auto 4rem;
        height: 70vw;
    }
    .talk-closing-img img {
        height: 100%;
    }
    .talk-row__profile {
        display: flex;
        width: auto;
        align-items: center;
    }
    .talk-row--b .talk-row__profile {
        flex-direction: row-reverse;
        margin-left: auto;
    }
    .talk-row--b .talk-row__profile img {
        margin: 0 0 0 0.5rem;
    }
    .talk-row__avatar {
        width: 50px;
        height: 50px;
        margin: 0 0.5rem 0 0;
    }
}