/* 共通style ================================================================================= */
:root {
    --color-accent: #00A0BB;
    --color-white: #FFF;
    --color-skyblue: #DBECF0;
    --urw-din: "urw-din", sans-serif;
}

html.corporate #BreadcrumbsPC {
    background-image: none;
    background-color: var(--color-accent);
}

#Corporate .l-footer.p-footer {
    padding-top: 0px;
    padding-bottom: 130px;
}

@media screen and (max-width: 740px) {
    #Corporate .l-footer.p-footer {
        padding-bottom: 40px;
    }
}

#Corporate .p-footer-nav__wrap {
    background-color: #f2f2f2;
}

#Corporate #ContentsWrap {
    margin-bottom: 0;
}

.isPC {
    display: inline;
}

@media screen and (max-width: 740px) {
    .isPC {
        display: none;
    }
}

.isSP {
    display: none;
}

@media screen and (max-width: 740px) {
    .isSP {
        display: inline;
    }
}

/* component ================================================================================= */
.corporateButtonGroup {
    display: flex;
    justify-content: center;
    column-gap: 44px;
}

.corporateButton {
    display: grid;
    place-content: center;
    width: 392px;
    height: 87px;
    border-radius: 6px;
    font-size: 22px;
    font-weight: 700;
    font-family: yu-gothic, sans-serif;
    color: var(--color-white) !important;
    transition: all 0.15s !important;

    @media (any-hover: hover) {
        &:where(:hover, :focus) {
            transform: translateY(5px);
            opacity: 1 !important;
            text-decoration: none !important;
        }
    }
}

.corporateButton.--pink {
    background-color: #F03580;
    filter: drop-shadow(0 5px 0 #D00456);
    transition: drop-shadow 0.15s;

    @media (any-hover: hover) {
        &:where(:hover, :focus) {
            filter: drop-shadow(0 0 0 #D00456);
        }
    }
}

.corporateButton.--blue {
    background-color: var(--color-accent);
    filter: drop-shadow(0 5px 0 #01778B);
    transition: drop-shadow 0.15s;

    @media (any-hover: hover) {
        &:where(:hover, :focus) {
           filter: drop-shadow(0 0 0 #01778B);
        }
    }
}

@media screen and (max-width: 740px) {
    .corporateButtonGroup {
        flex-direction: column;
        align-items: center;
        row-gap: 36px;
        margin-inline: auto;
    }

    .corporateButton {
        max-width: 308px;
        width: 100%;
        min-height: 60px;
        height: auto;
        font-size: 16px;
        padding: .5em 1em;
    }
}

.corporateHeadingGroup {
    width: fit-content;
    margin-inline: auto;
}

.corporateHeading {
    font-family: var(--urw-din);
    font-weight: 600;
    font-size: 50px;
    letter-spacing: 0.05em;
    text-align: center;
    color: var(--color-accent);
}

.corporateText {
    font-weight: bold;
    font-size: 21px;
    text-align: center;
    line-height: 1.25;
    color: var(--color-accent);
}

@media screen and (max-width: 740px) {
    .corporateHeading {
        font-size: 40px;
        letter-spacing: 0.1em;
    }

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


/* kv ================================================================================= */
.kv {
    position: relative;
    width: 100%;
    height: auto;
}

.kvTextBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 1;
}

.kvHeading {
    width: fit-content;
    font-weight: bold;
    font-size: 30px;
    letter-spacing: 0em;
    line-height: 28px;
    text-align: left;
    color: var(--color-white);
    margin-inline: auto;
}

.kvText {
    position: relative;
    width: fit-content;
    font-family: var(--urw-din);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0em;
    line-height: 28px;
    text-align: center;
    color: var(--color-white);
    margin-top: 18px;
    margin-inline: auto;
}

.kvText::before,
.kvText::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: .5em;
    height: 2px;
    background-color: var(--color-white);
}

.kvText::before {
    left: -1em;
}

.kvText::after {
    right: -1em;
}

.kvImage {
    position: relative;
    display: block;
}

.kvImage::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15);
}

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

@media screen and (max-width: 740px) {
    .kvHeading {
        font-size: 26px;
        letter-spacing: 0.05em;
    }

    .kvText {
        font-size: 12px;
        letter-spacing: 0em;
        margin-top: 7px;
    }
}


/* readArea ================================================================================= */
.readArea {
    padding-block: 85px 100px;
    background-color: var(--color-white);
}

.readAreaInner {
    width: 828px;
    margin-inline: auto;
}

.read {
    font-weight: bold;
    font-size: 18px;
    line-height: 2;
    text-align: center;
}

.read span {
    color: var(--color-accent);
}

.readArea .corporateButtonGroup {
    margin-top: 54px;
}

@media screen and (max-width: 740px) {
    .readArea {
        padding-block: 75px 72px;
    }

    .readAreaInner {
        width: 100%;
        padding-inline: 38px;
    }

    .read {
        font-size: 15px;
        text-align: left;
    }

    .readArea .corporateButtonGroup {
        margin-top: 44px;
    }
}

/* supportArea ================================================================================= */
.supportArea {
    padding-block: 116px 170px;
}

.supportAreaInner {
    width: 976px;
    margin-inline: auto;
}

.supportText {
    font-weight: bold;
    font-size: 20px;
    line-height: 2.2;
    text-align: center;
    margin-top: 55px;
}

.supportText span {
    color: var(--color-accent);
}

@media screen and (max-width: 740px) {
    .supportArea {
        padding-block: 60px 80px;
    }

    .supportAreaInner {
        width: 100%;
        padding-inline: 22px;
    }

    .supportText {
        font-size: 15px;
        text-align: left;
        line-height: 2;
        margin-top: 46px;
        padding-inline: 40px;
    }
}

.supportBusinessSection {
    position: relative;
    padding: 120px 66px 60px 86px;
    margin-top: 138px;
    background-color: var(--color-white);
}

.supportHeading {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-content: center;
    min-width: 300px;
    width: fit-content;
    min-height: 64px;
    font-family: var(--urw-din);
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    color: var(--color-white);
    padding-inline: 1em;
    background-color: var(--color-accent);
}

.supportBusinessItem {
    display: grid;
    grid-template-columns: 393px 382px;
    grid-template-rows: repeat(2, auto);
    grid-column-gap: 49px;
}

.supportBusinessHeading {
    grid-area: 1 / 1 / 2 / 2;
    font-weight: bold;
    font-size: 24px;
    line-height: 1.5;
    color: var(--color-accent);
}

.supportBusinessText {
    grid-area: 2 / 1 / 3 / 2;
    font-weight: 500;
    font-size: 18px;
    line-height: 2;
    margin-top: 22px;
}

.supportBusinessImage {
    grid-area: 1 / 2 / 3 / 3;
}

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

@media screen and (max-width: 740px) {
    .supportBusinessSection {
        padding: 70px 14px 51px;
        margin-top: 42px;
    }

    .supportHeading {
        min-width: 189px;
        min-height: 41px;
        font-size: 22px;
    }

    .supportBusinessItem {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, auto);
        grid-column-gap: 0;
    }
    
    .supportBusinessHeading {
        grid-area: 1 / 1 / 2 / 2;
        font-size: 18px;
        width: fit-content;
        margin-inline: auto;
    }
    
    .supportBusinessText {
        grid-area: 3 / 1 / 4 / 2;
        font-size: 15px;
        margin-top: 26px;
    }
    
    .supportBusinessImage {
        grid-area: 2 / 1 / 3 / 2;
        margin-top: 10px;
    }
}

.supportSchoolSection {
    position: relative;
    padding: 146px 38px 104px 54px;
    margin-top: 125px;
    background-color: var(--color-white);
}

.supportSchoolItems {
    display: flex;
    flex-wrap: wrap;
    gap: 95px 53px;
}

.supportSchoolItem {
    width: 406px;
}

.supportSchoolItem.--speechBalloon {
    position: relative;
    width: 425px;
    background-color: var(--color-skyblue);
    padding: 32px 24px 39px;
}

.supportSchoolItem.--speechBalloon::after {
    content: "";
    position: absolute;
    top: 100px;
    left: -34px;
    width: 42px;
    height: 27px;
    background: var(--color-skyblue);
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

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

.supportSchoolHeading {
    flex: 1;
    font-family: var(--urw-din);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.625;
    color: var(--color-accent);
}

.supportSchoolNumber {
    display: grid;
    place-content: center;
    width: 30px;
    height: 32px;
    background-color: var(--color-skyblue);
    font-family: var(--urw-din);
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    color: var(--color-accent);
    margin-top: 2px;
}

.supportSchoolText {
    font-weight: 500;
    font-size: 16px;
    line-height: 2.2;
    margin-top: 31px;
}

.supportSchoolTextSecondary {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.875;
    padding-inline: 18px;
    margin-top: 24px;
}

.supportSchoolImage {
    display: block;
    margin-top: 23px;
}

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

.supportSchoolSubHeading {
    width: fit-content;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.85;
    color: var(--color-accent);
    margin-inline: auto;
}

.supportSchoolList {
    padding: 19px 24px 16px 19px;
    background-color: var(--color-white);
    margin-top: 20px;
}

.supportSchoolList li {
    position: relative;
    font-weight: bold;
    font-size: 15px;
    line-height: 1.46;
    padding-left: 19px;
}

.supportSchoolList li::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 11px;
    height: 11px;
    background: var(--color-accent);
}

.supportSchoolList li + li {
    margin-top: 46px;
}

.supportSchoolList li + li::after {
    content: "";
    position: absolute;
    top: -23px;
    left: 0;
    right: 0;
    border-top: 1px solid var(--color-accent);
}

@media screen and (max-width: 740px) {
    .supportSchoolSection {
        padding: 70px 14px 40px;
        margin-top: 40px;
    }

    .supportSchoolItems {
        flex-direction: column;
        align-items: center;
        gap: 56px 0;
    }

    .supportSchoolItem {
        width: 100%;
    }

    .supportSchoolItem.--speechBalloon {
        width: 100%;
        padding: 28px 18px;
    }

    .supportSchoolItem.--speechBalloon::after {
        top: -28px;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 32px;
        clip-path: polygon(0 100%, 50% 0, 100% 100%);
    }

    .supportSchoolHeadingWrap {
        column-gap: 6px;
    }

    .supportSchoolHeading {
        font-size: 18px;
    }

    .supportSchoolNumber {
        width: 24px;
        height: 24px;
        font-size: 18px;
        margin-top: 2px;
    }

    .supportSchoolText {
        font-size: 15px;
        line-height: 2;
        margin-top: 26px;
    }

    .supportSchoolTextSecondary {
        font-size: 15px;
        line-height: 2;
        padding-inline: 0;
        margin-top: 30px;
    }

    .supportSchoolImage {
        margin-top: 18px;
    }

    .supportSchoolSubHeading {
        font-size: 18px;
    }
    
    .supportSchoolList {
        padding: 22px 14px 17px;
        margin-top: 15px;
    }
    
    .supportSchoolList li {
        font-size: 15px;
        padding-left: 16px;
    }
    
    .supportSchoolList li::before {
        width: 9px;
        height: 8px;
        top: 6px;
    }
    
    .supportSchoolList li + li {
        margin-top: 34px;
    }
    
    .supportSchoolList li + li::after {
        top: -17px;
    }
}


/* contactArea ====================================================================== */
.contactArea {
    padding: 116px 0 166px;
    background-color: var(--color-white);
}

.contactAreaInner {
    width: 864px;
    margin-inline: auto;
}

.contactRead {
    font-weight: bold;
    font-size: 24px;
    line-height: 2.2;
    text-align: center;
    letter-spacing: 0;
    margin-top: 62px;
}

.contactNotice {
    font-weight: 500;
    font-size: 15px;
    line-height: 2;
    text-align: center;
    letter-spacing: 0;
    margin-top: 28px;
}

.contactArea .corporateButtonGroup {
    margin-top: 90px;
}

@media screen and (max-width: 740px) {
    .contactArea {
        padding: 28px 0 47px;
    }

    .contactAreaInner {
        width: 100%;
        padding-inline: 29px;
    }

    .contactRead {
        font-size: 15px;
        line-height: 2;
        margin-top: 59px;
    }
    
    .contactNotice {
        font-size: 14px;
        text-align: left;
        margin-top: 27px;
        text-indent: -1em;
        padding-left: 1em;
    }
    
    .contactArea .corporateButtonGroup {
        margin-top: 60px;
    }
}

/* caseStudiesArea ======================================================== */
.caseStudiesArea {
    padding-block: 117px 170px;
    background-color: #F0F6F7;
}

.caseStudiesAreaInner {
    width: 976px;
    margin-inline: auto;
}

.caseStudiesItems {
    display: grid;
    grid-template-columns: repeat(3, minmax(284px, 1fr));
    column-gap: 18px;
    row-gap: 60px;
    padding: 60px 45px 30px;
    background-color: var(--color-white);
    margin-top: 55px;
}

.caseStudiesItem {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 0;
}

.caseStudiesHeading {
    position: relative;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.55;
    padding-left: 19px;
}

.caseStudiesHeading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 31px;
    background: var(--color-accent);
}

.caseStudiesHeading .caseStudiesLink {
    color: #000 !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    @media (any-hover: hover) {
        &:where(.caseStudiesItem:has(.caseStudiesLink:hover)
            *, .caseStudiesItem:not([data-link-hovered]):hover *) {
            color: var(--color-accent) !important;
            text-decoration: underline;
        }
    }
}

.caseStudiesImage {
    display: block;
    margin-top: 8px;
    grid-row: 2 / 3;
    aspect-ratio: 277 / 195;
    overflow: hidden;
}

.caseStudiesImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    @media (any-hover: hover) {
        &:where(.caseStudiesItem:has(.caseStudiesLink:hover)
            *, .caseStudiesItem:not([data-link-hovered]):hover *) {
            scale: 1.1;
        }
    }
}

.caseStudiesText {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.625;
    letter-spacing: 0;
    margin-top: 19px;
}

.caseStudiesText .caseStudiesLink {
    color: #000 !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;

    @media (any-hover: hover) {
        &:where(.caseStudiesItem:has(.caseStudiesLink:hover)
            *, .caseStudiesItem:not([data-link-hovered]):hover *) {
            color: var(--color-accent) !important;
            text-decoration: underline;
        }
    }
}

.caseStudiesButtonWrap {
    padding-block: 69px 74px;
    background-color: var(--color-white);
}

.caseStudiesButton {
    display: grid;
    place-content: center;
    width: 328px;
    height: 75px;
    background: #F0F6F7;
    border: 2px solid var(--color-accent);
    margin-inline: auto;
    font-family: var(--urw-din);
    font-weight: 700;
    font-size: 28px;
    color: var(--color-accent);

    @media (any-hover: hover) {
        &:where(:hover, :focus) {
            color: var(--color-white) !important;
            background-color: var(--color-accent);
            text-decoration: none !important;
            opacity: 1 !important;

            & span::after {
                background-image: url("/_pack/img/corporate/icon-arrow.svg"), url("/_pack/img/corporate/icon-arrow-hover.svg") !important;
                background-size: 0 0, contain !important;
                transform: translateX(20px);
            }
        }
    }
}

.caseStudiesButton span {   
    position: relative;
    display: flex;
    align-items: center;
    column-gap: 44px;
}

.caseStudiesButton span::after {
    content: "";
    display: block;
    width: 26px;
    height: 19px;
    background-image: url("/_pack/img/corporate/icon-arrow.svg"), url("/_pack/img/corporate/icon-arrow-hover.svg");
    background-repeat: space no-repeat;
    background-position: center;
    background-size: contain, 0 0;
    transition: all 0.15s;
}


.caseStudiesEmptyText {
    font-weight: 500;
    font-size: 16px;
    text-align: center;
    margin-top: 40px;
}

@media screen and (max-width: 740px) {
    .caseStudiesArea {
        padding-block: 59px 45px;
    }

    .caseStudiesAreaInner {
        width: 100%;
        padding-inline: 24px;
    }
    
    .caseStudiesItems {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 44px;
        padding: 42px 33px 30px;
        margin-top: 59px;
    }
    
    .caseStudiesItem {
        width: 100%;
    }
    
    .caseStudiesHeading {
        font-size: 20px;
    }
    
    .caseStudiesText {
        font-size: 15px;
        line-height: 1.73;
    }
    
    .caseStudiesButtonWrap {
        padding-block: 36px 70px;
    }
    
    .caseStudiesButton {
        width: 100%;
        max-width: 264px;
        min-height: 66px;
        height: auto;
        font-size: 22px;
        padding: .5em .5em .5em 1em;

        @media (any-hover: hover) {
            &:where(:hover, :focus) {
                & span::after {
                    transform: translateX(8px);
                }
            }
        }
    }
    
    .caseStudiesButton span {
        column-gap: 60px;
        margin-left: .5em;
    }
    
    .caseStudiesButton span::after {
        width: 20px;
        height: 15px;
    }
}

@media screen and (max-width: 500px) {
    .caseStudiesItems {
        grid-template-columns: auto;
    }
}

/* ctaArea ================================================================ */
.ctaArea {
    padding-block: 220px 293px;
    background-color: var(--color-white);
}

.ctaAreaInner {
    width: 932px;
    margin-inline: auto;
}

.ctaRead {
    font-family: var(--urw-din);
    font-weight: 700;
    font-size: 20px;
    line-height: 2.5;
    text-align: center;
    letter-spacing: 0;
}

.ctaRead + .ctaRead {
    margin-top: 58px;
}

.ctaRead span {
    color: var(--color-accent);
}

.ctaArea .corporateButtonGroup {
    margin-top: 90px;
}

@media screen and (max-width: 740px) {
    .ctaArea {
        padding-block: 130px 167px;
    }

    .ctaAreaInner {
        width: 100%;
        padding-inline: 41px;
    }
    
    .ctaRead {
        font-size: 16px;
        line-height: 2.2;
    }
    
    .ctaRead + .ctaRead {
        margin-top: 45px;
    }
    
    .ctaArea .corporateButtonGroup {
        margin-top: 45px;
    }
}