/* ===================
 動画コンテンツ
 ===================*/
.main > .top-media {
    width: 100%;
    height: var(--top-media-height);
    background-color: var(--color-gray);
    margin-bottom: var(--bottom-space);
}
.swiper-slide > .thumbnail {
    width: 100%;
    min-height: var(--top-media-height);
    max-height: var(--top-media-htight);
}
.swiper {
    width: 100%;
}
.swiper-button-prev:after,
.swiper-button-next:after{
    display: none;
    content: "";
}
.thumbnail {
    object-fit: cover;
    min-width: 100%;
}

/* ===================
 お知らせ
 ===================*/
.main > .news-container {
    margin-right: var(--side-space);
    margin-left: var(--side-space);
    background-color: var(--color-white);
    margin-bottom: var(--bottom-space);
}
.main > .news-container > .news-list-container {
    list-style: none;
    padding: 0;
    margin: 0;
}
.main > .news-container > .news-list-container > .news-list:last-child {
    border-bottom: 1px solid var(--color-gray);
    margin-bottom: var(--content-space);
}

/* ===================
 パンフレット
 ===================*/
.main > .pamphlet_link {
    text-decoration: none;
    display: block;
    margin-left: var(--side-space);
    padding-bottom: calc(var(--bottom-space) / 2);
}

/* 0px ~ 767px */
@media (min-width: 0px) and (max-width: 768px) {
    .main > .news-container > .news-list-container > .news-list {
        display: block;
        border-top: 1px solid var(--color-gray);
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .main > .news-container > .news-list-container > .news-list > .date {
        padding-right: 15px;
        font-size: 14px;
    }
    .main > .news-container > .news-list-container > .news-list > .list-tag__common {
        background-color: var(--primary-color);
        color: var(--color-white);
        font-size: 12px;
        padding: 2px 10px;
        text-align: center;
    }
    .main > .news-container > .news-list-container > .news-list > .list-tag__important {
        background-color: var(--secondary-color);
        color: var(--color-white);
        font-size: 12px;
        padding: 2px 10px;
        text-align: center;
    }
    .main > .news-container > .news-list-container > .news-list > .title {
        display: block;
        text-decoration: none;
        color: var(--color-black);
        font-size: 16px;
    }
    .main > .news-container > .news-list-container > .news-list > .title:hover {
        text-decoration: underline;
        color: var(--primary-color);
    }
}

/* 768px ~ inf */
@media (min-width: 768px) {
    .main > .news-container > .news-list-container > .news-list {
        display: flex;
        border-top: 1px solid var(--color-gray);
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .main > .news-container > .news-list-container > .news-list > .date {
        padding-left: 15px;
        padding-right: 30px;
        font-size: 16px;
    }
    .main > .news-container > .news-list-container > .news-list > .list-tag__common {
        display: block;
        background-color: var(--primary-color);
        color: var(--color-white);
        font-size: 14px;
        width: 85px;
        height: 24px;
        padding-top: 2px;
        text-align: center;
        margin-right: 30px;
    }
    .main > .news-container > .news-list-container > .news-list > .list-tag__important {
        display: block;
        background-color: var(--secondary-color);
        color: var(--color-white);
        font-size: 14px;
        width: 85px;
        height: 24px;
        padding-top: 2px;
        text-align: center;
        margin-right: 30px;
    }
    .main > .news-container > .news-list-container > .news-list > .title {
        text-decoration: none;
        color: var(--color-black);
        font-size: 16px;
    }
    .main > .news-container > .news-list-container > .news-list > .title:hover {
        text-decoration: underline;
        color: var(--primary-color);
    }
}

/* ===================
 事業内容
 ===================*/
.main > .business-container {
    background-color: var(--bg-color-secondary);
    padding-right: var(--side-space);
    padding-left: var(--side-space);
    margin-bottom: var(--bottom-space);
}
.main > .business-container > .title-container {
    border-bottom: solid var(--color-gray) 1px;
    text-align: center;
    padding-top: var(--top-space);
    margin-bottom: var(--bottom-space);
}
.main > .business-container > .title-container > .title-secondary {
    border-bottom: solid var(--primary-color) 2px;
    display: inline-block;
    font-size: 40px;
    font-weight: normal;
    color: var(--primary-color);
}

/* 0px ~ 599px */
@media (min-width: 0px) and (max-width: 600px) {
    .main > .business-container > .center > .card-container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding-bottom: var(--bottom-space);
        padding: 0px 20px;
    }
}

/* 600px ~ 767px */
@media (min-width: 600px) and (max-width: 768px) {
    .main > .business-container > .center > .card-container {
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;
        gap: 20px;
        padding-bottom: var(--bottom-space);
    }
    .main > .business-container > .center > .card-container  > .card {
        width: calc(50% - 20px * 1 / 2);
    }
}

/* 768px ~ 1023px */
@media (min-width: 768px) and (max-width: 1024px) {
    .main > .business-container > .center > .card-container {
        max-width: 656px;
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;
        gap: 20px;
        padding-bottom: var(--bottom-space);
    }
    .main > .business-container > .center > .card-container  > .card {
        width: calc(50% - 20px * 1 / 2);
        max-width: 325px;
    }
}

/* 1024px ~ 1439px */
@media (min-width: 1024px) and (max-width: 1440px) {
    .main > .business-container > .center > .card-container {
        max-width: 1015px;
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;
        gap: 20px;
        padding-bottom: var(--bottom-space);
    }
    .main > .business-container > .center > .card-container  > .card {
        width: calc(33.33% - 20px * 2 / 3);
        max-width: 325px;
    }
}

/* 1440px ~ inf */
@media (min-width: 1440px) {
    .main > .business-container > .center > .card-container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
        padding-bottom: var(--bottom-space);
    }
    .main > .business-container > .center > .card-container  > .card {
        /* width: calc(25% - 20px * 3 / 4); */
        width: calc(33.33% - 20px * 2 / 3);
        max-width: 325px;
    }
}

.card > picture > .card-img {
    height: var(--card-height);
    background-color: gray;
    object-fit: cover;
    width: 100%;
}
.main > .business-container > .center > .card-container  > .card > .card-title {
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 16px;
    font-weight: normal;
    font-size: 20px;
}
.main > .business-container > .center > .card-container  > .card > .card-text {
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 8px;
    word-break:break-all;
    font-weight: normal;
    font-size: 16px;
    padding-bottom: var(--content-space);
}


/* ===================
 社長挨拶
 ===================*/
.main > .president-container {
    background-color: var(--bg-color-primary);
    padding-right: var(--side-space);
    padding-left: var(--side-space);
    margin-bottom: var(--bottom-space);
}

.main > .president-container > .president-greeting {
    display: flex;
}

.main > .president-container > .president-greeting > .president-img {
    background-color: var(--color-gray);
    object-fit: cover;
    width: var(--president-img-width);
    min-width: var(--president-img-width);
    height: var(--president-img-height);
}

/* 0px ~ 374px */
@media (min-width: 0px) and (max-width: 375px) {
    .main > .president-container > .president-greeting {
        display: block;
    }
    .main > .president-container > .president-greeting > .president-text > .pd-title {
        font-size: 28px;
        margin-bottom: calc(var(--content-space) / 2);
    }
    .main > .president-container > .president-greeting > .president-text > .pd-text {
        font-size: 18px;
        padding-left: 10px;
    }
    .main > .president-container > .president-greeting > .president-img {
        width: 100%;
        height: auto;
        max-height: 200px;
        margin-bottom: calc(var(--content-space) / 2);
        object-position: center top;
    }
}

/* 375px ~ 424px */
@media (min-width: 375px) and (max-width: 425px) {
    .main > .president-container > .president-greeting {
        display: block;
    }
    .main > .president-container > .president-greeting > .president-text > .pd-title {
        font-size: 30px;
        margin-bottom: calc(var(--content-space) / 2);
    }
    .main > .president-container > .president-greeting > .president-text > .pd-text {
        font-size: 18px;
        padding-left: 10px;
    }
    .main > .president-container > .president-greeting > .president-img {
        width: 100%;
        height: auto;
        max-height: 200px;
        margin-bottom: calc(var(--content-space) / 2);
        object-position: center top;
    }
}

/* 425px ~ 767px */
@media (min-width: 425px) and (max-width: 768px) {
    .main > .president-container > .president-greeting {
        display: block;
    }
    .main > .president-container > .president-greeting > .president-text > .pd-title {
        font-size: 32px;
        margin-bottom: calc(var(--content-space) / 2);
    }
    .main > .president-container > .president-greeting > .president-text > .pd-text {
        font-size: 20px;
        padding-left: 10px;
    }
    .main > .president-container > .president-greeting > .president-img {
        width: 100%;
        height: auto;
        max-height: 400px;
        margin-bottom: calc(var(--content-space) / 2);
        object-position: center top;
    }
}

/* 768px ~ 1023px */
@media (min-width: 768px) and (max-width: 1024px) {
    .main > .president-container > .president-greeting > .president-text {
        margin-left: calc(var(--content-space) / 2);
    }
    .main > .president-container > .president-greeting > .president-text > .pd-title {
        font-size: 32px;
    }
    .main > .president-container > .president-greeting > .president-text > .pd-text {
        font-size: 20px;
        margin-left: calc(var(--content-space) / 2);;
    }
}

/* 1024px ~ 1439px */
@media (min-width: 1024px) and (max-width: 1440px) {
    .main > .president-container > .president-greeting > .president-text {
        margin-left: calc(var(--content-space) / 2);
        max-width: 596px;
    }
    .main > .president-container > .president-greeting > .president-text > .pd-title {
        font-size: 40px;
    }
    .main > .president-container > .president-greeting > .president-text > .pd-text {
        font-size: 24px;
        margin-left: calc(var(--content-space) / 2);;
    }
}

/* 1440px ~ inf */
@media (min-width: 1440px) {
    .main > .president-container > .president-greeting > .president-text {
        margin-left: calc(var(--content-space) / 2);
        max-width: 880px;
    }
    .main > .president-container > .president-greeting > .president-text > .pd-title {
        font-size: 40px;
    }
    .main > .president-container > .president-greeting > .president-text > .pd-text {
        font-size: 24px;
        margin-left: calc(var(--content-space) / 2);;
    }
}

/* ===================
 採用情報
 ===================*/
.main > .recruit-container {
    background-color: var(--bg-color-primary);
    padding-right: var(--side-space);
    padding-left: var(--side-space);
    margin-bottom: var(--bottom-space);
}
.main > .recruit-container > .recruit-text {
    font-size: 24px;
}

/* ===================
 お問い合わせ
 ===================*/
.main > .contact-container {
    background-color: var(--bg-color-primary);
    padding-right: var(--side-space);
    padding-left: var(--side-space);
    margin-bottom: var(--bottom-space);
}
.main > .contact-container > .contact-list-container {
    list-style: none;
    padding: 0;
    margin: 0;
}
.main > .contact-container > .contact-list-container > .contact-list:last-child {
    border-bottom: 1px solid var(--color-gray);
    margin-bottom: var(--bottom-space);
}
.contact-list > .list-text {
    font-size: 16px;
    width: 100px;
}
.tel, .fax, .e-mail, .link {
    text-decoration: none;
    color: var(--color-black);
    font-size: 16px;
}
.tel:visited, .fax:visited, .e-mail:visited {
    text-decoration: none;
    color: var(--color-black);
}

/* 0px ~ 767px */
@media (min-width: 0px) and (max-width: 768px) {
    .main > .contact-container > .contact-text,
    .main > .contact-container > .work-contact {
        font-size: 20px;
        margin-bottom: calc(var(--content-space) / 2);
    }
    .contact-list {
        display: flex;
        border-top: 1px solid var(--color-gray);
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .contact-list-container:first-child {
        width: 100px;
    }
}

/* 768px ~ inf */
@media (min-width: 768px) {
    .main > .contact-container > .contact-text,
    .main > .contact-container > .work-contact {
        font-size: 24px;
        margin-bottom: calc(var(--content-space) / 2);
    }
    .contact-list {
        display: flex;
        border-top: 1px solid var(--color-gray);
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 15px;
    }
    .contact-list-container:first-child {
        width: 100px;
    }
}