/* Components */

.c-media-split {
	gap: var(--container-gutter);
	align-items: center;

	.c-media-split__media {
		grid-column: span 6;
	}

	.c-media-split__content {
		grid-column: span 6;
		
		& > :last-child {
			margin-bottom: 0;
		}
	}

	@media (width <= 1024px) {
		.c-media-split__media {
			grid-column: span 5;
		}
		
		.c-media-split__content {
			grid-column: span 5;
		}
	}

	@media (width <= 768px) {
		.c-media-split__media {
			grid-column: span 3;
		}
		
		.c-media-split__content {
			grid-column: span 3;
		}
	}

	@media (width <= 640px) {
		.c-media-split__media,
		.c-media-split__content {
			grid-column: 1 / -1;
		}	
	}
}

/* Card List */
.c-card-list {
	display: grid;
	gap: var(--container-gutter);
	grid-template-columns: 1fr;
	padding: 0;
	list-style: none;
	margin: 0;
}

.c-card-list:has(> :nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.c-card-list:has(> :nth-child(3):last-child) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.c-card-list:has(> :nth-child(4):last-child) {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.c-card-list__item {
	border-radius: var(--border-radius);
	overflow: hidden;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.05);

    figure{
        overflow: hidden;
        will-change: transform;
        
        &.sp-square{
            aspect-ratio: 3 / 2;
            @media (width <= 640px) {
                aspect-ratio: 1 / 1;
            }
        }
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

.c-card-list__content {
	background-color: #fff;
	padding: 2rem;

	& > :last-child {
		margin-bottom: 0;
	}

    .icon-box > h3{
        margin-bottom: 0;
    }
}

.c-card-list__content h3 {
	font-size: var(--fs-xl);
	font-weight: var(--font-weight-heading);
	letter-spacing: var(--letter-spacing-heading);
	line-height: var(--line-height-sub);
	margin-bottom: 1rem;
}

.c-card-list a{
    figure{
        overflow: hidden;
        img{
            transition: transform var(--motion-fast) var(--motion-ease);
        }
    }
    .material-symbols-outlined{
        transition: all var(--motion-fast) var(--motion-ease);
    }
}

.c-card-list a:hover{
    figure{
        img{
            transform: scale(1.02);
        } 
    }
    .material-symbols-outlined{
        background-color: var(--color-ink);
        color: var(--color-white);
    }
	.btn-pill {
		color: var(--color-ink);
		/* color: #08aad3; */
	}
	
	.btn-pill::before {
		transform: scale(1, 1.1);
		transform-origin: left; /* 左から展開 */
	}

}


@media (width <= 768px) {
	.c-card-list {
		grid-template-columns: 1fr !important;
        gap: var(--container-gutter);
	}
}


/* Title Card */
.title-card{
	position: relative;
	overflow: hidden;

	figure{
		aspect-ratio: 1 / 1;
		img{
			width: 100%;
			height: 100%;
			object-fit: cover;
			transform: scale(1.01);
			transition: transform var(--motion-fast) var(--motion-ease);
		}
	}

	&:hover figure img{
		transform: scale(1.05);
	}

	h3{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		font-size: calc(var(--fs-xl) * 0.75);
		font-weight: var(--font-weight-heading);
		letter-spacing: var(--letter-spacing-heading);
		line-height: var(--line-height-sub);
	}


}


/* Single Header
-------------------------------- */
.single-header{
    padding-block: var(--section-padding-block);
    
    .single-title{
        font-size: var(--fs-2xl);
		font-weight: 500;
		letter-spacing: 0;
		line-height: 1.35;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
        .tagline{
            padding-top: 0.5rem;
            font-size: var(--fs-md);
            text-indent: 0.3rem;
            letter-spacing: 0.1rem;
        }

    }
}


/* Subnav
-------------------------------- */
.c-subnav{
    padding-block: var(--section-padding-block);
    border-top: 1px solid var(--color-border-gray);
    .c-subnav__list{
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .c-subnav__item{
        grid-column: span 1;
        .btn-pill{
            padding-block: 1rem;
            width: 100%;
            height: 100%;
            background-color: transparent;
            border: 1px solid var(--color-ink);
            color: var(--color-ink);
            font-size: var(--fs-sm);
            font-weight: var(--font-weight-heading);
            letter-spacing: var(--letter-spacing-heading);
            line-height: var(--line-height-sub);
            &:before {
                background: var(--color-ink);
                /* transform: scale(0, 1.2); */
            }            
            &:is(:hover, :focus-visible) {
                color: var(--color-white);
            }        
        }
        &.hover,
        body.page-corporate &:has([href$="/corporate/"]),
        body.page-president-message &:has([href$="/president-message/"]),
        body.page-officers &:has([href$="/officers/"]),
        body.page-history &:has([href$="/history/"]),
        body.page-company-outline &:has([href$="/company-outline/"]) {
            .btn-pill{
                background-color: var(--color-ink);
                color: var(--color-white);
                &:before {
                    transform: scale(1, 1.1);
                    transform-origin: left;
                }
            }
        }
    }
}


/* Recruit CTA
-------------------------------- */
.c-recruit-cta{

	.grid{
		align-items: center;
	}
	.recruit-cta__media{
		grid-column: span 8;

        border-radius: var(--border-radius);
        overflow: hidden;
        position: relative;

        figcaption{
            position: absolute;
            inset: 0;
            z-index: 1;
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            justify-content: center;
            font-size: 50px;
            line-height: 1.5;
            background-color: rgba(0, 0, 0, 0.3);
            color: #fff;

            span{
                display: block;
                text-align: center;
            }
            span + span{
                margin-top: 0.5rem;
                font-size: 14px;
            }
        }
	}
	.recruit-cta__content{
		grid-column: span 4;
	}

    @media (width <= 1024px) {
        .recruit-cta__media{
            grid-column: span 6;
        }
        .recruit-cta__content{
            grid-column: span 4;
        }
    }

    @media (width <= 768px) {
        .recruit-cta__media{
            grid-column: span 6;
        }
        .recruit-cta__content{
            grid-column: span 6;
            text-align: center;
        }
    }

    @media (width <= 640px) {
        .recruit-cta__media{
            figcaption{
                font-size: clamp(24px, 8vw, 32px);
                line-height: 1.4;
                span + span{
                    font-size: clamp(10px, 3vw, 12px);
                }
            }
        }
    }
}


/* Recruit Entry CTA
-------------------------------- */
.recruit-entry-cta{
    background: var(--color-white);
    border-top: thin solid var(--color-border-gray);
}




/* Breadcrumbs 
-------------------------------- */
.breadcrumbs-wrapper{
    box-shadow: 0 1px 0 rgba(37, 30, 28, 0.06);
    display: none;
}
.page-header + .breadcrumbs-wrapper,
.gc-subhero + .breadcrumbs-wrapper,
.footer-breadcrumbs .breadcrumbs-wrapper{
    display: block;
}
.breadcrumbs {
    width: min(100% - (var(--container-gutter) * 2), 1440px);
    margin-inline: auto;
	padding-block: 1rem;
	color: var(--color-ink);
	font-size: var(--fs-sm);
	font-weight: var(--font-weight-heading);
	line-height: var(--line-height-sub);
	letter-spacing: var(--letter-spacing-heading);
}

.breadcrumbs a {
	text-decoration: none;
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs__item:not(:last-child)::after {
	margin-left: 1rem;
	content: "/";
}

.breadcrumbs__item[aria-current="page"] {
	color: var(--color-ink);
}

.bg-dark{
    .breadcrumbs{
        border-bottom: 1px solid #2a2a2a;
    }
    &.no-border{
        .breadcrumbs{
            border-bottom: none;
        }
    }
    .breadcrumbs,
    .breadcrumbs a,
    .breadcrumbs__item[aria-current="page"]{
        color: #fff;
    }
}

@media screen and (width <= 640px) {
    .breadcrumbs{
        padding-block: 1rem;
    }
    .breadcrumbs__item{
        line-height: 1.25;
    }
}



/* table
-------------------------------- */

.c-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.c-table {
	width: 100%;
	border-collapse: collapse;
}

.c-table caption {
    font-size: var(--fs-sm);
    font-weight: var(--font-weight-heading);
    letter-spacing: var(--letter-spacing-heading);
    line-height: var(--line-height-sub);
    margin-bottom: 1rem;
    text-align: left;
    color: var(--color-ink);
}

.c-table th,
.c-table td {
	border-top: 1px solid var(--color-border-gray);
	padding: 2rem;
	text-align: left;
	vertical-align: top;
}

.c-table th {
	font-weight: bold;
    white-space: nowrap;
}

.c-table td{
    & > *:last-child{
        margin-bottom: 0;
    }
}

@media (width <= 768px) {
    .c-table th,
    .c-table td {
        padding: 1.5rem;
    }
}

@media (width <= 640px) {
    .c-table,
    .c-table tr,
    .c-table th,
    .c-table td{
        display: block;
    }
    .c-table th,
    .c-table td{
        border-top: none;
        padding: 0;
    }
    .c-table tr{
        padding-block-start: 1.5rem;

        &:last-child{
            border-bottom: none;
        }
    }
    .c-table th{
        padding-bottom: 0.25rem;
        margin-bottom: 0.25rem;
        border-bottom: 1px solid var(--color-border-gray);

    }
    .c-table td{
        strong{
            font-size: var(--fs-sm);
        }
        .btn-wrapper{
            margin-top: 1rem !important;
        }
    }

}

/* FAQ Accordion
-------------------------------- */
.faq__list{

    .faq__item{
        border: 1px solid var(--color-border-gray);
        margin-block: 0 var(--container-gutter);
        transition: all var(--motion-fast) var(--motion-ease);
        background-color: var(--color-white);
        border-radius: var(--border-radius);
        &:last-child{
            margin-bottom: 0;
        }

        .faq__question{
            display: grid;
            grid-template-columns: 1.5rem minmax(0, 1fr) 1rem;
            align-items: center;
            /* min-height: 5.5rem; */
            padding: 2rem;
            cursor: pointer;
            font-size: var(--fs-md);
            font-weight: 700;

            &::before{
                content: "Q";
                font-size: var(--fs-2lg);
                line-height: 1;
                padding-right: var(--container-gutter);
                justify-self: flex-start;
                font-weight: 500;
                color: var(--color-tertiary);
            }

            .faq__toggle{
                position: relative;
                width: 1rem;
                height: 1rem;
                justify-self: center;
                
                &::before,
                &::after{
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 1rem;
                    height: 1px;
                    background-color: var(--color-primary);
                    transition: all var(--motion-fast) var(--motion-ease);
                }
                &::before{
                    transform: translate(-50%, -50%) rotate(90deg);
                }
                &::after{
                    transform: translate(-50%, -50%) rotate(0);
                }

            }
            @media screen and (width <= 640px) {
                padding: var(--container-gutter);
                grid-template-columns: 1.5rem minmax(0, 1fr) 1rem;
                font-size: 1rem !important;

                &::before{
                    padding-right: 0;
                }
    
                .faq__toggle{
                    width: 0.75rem;
                    height: 0.75rem;

                    &::before,
                    &::after{
                        width: 0.75rem;
                        height: 1px;
                    }
                }
            }
            .faq__question-text{
                transition: transform var(--motion-fast) var(--motion-ease);
                @media screen and (width <= 640px) {
                    padding: 0;
                    line-height: 1.4;
                }
            }
            &:hover{
                .faq__question-text{
                    transform: translateX(0.25rem);

                    @media screen and (width <= 640px) {
                        transform: none;
                    }
                }
            }
        }
        .faq__answer{
            display: grid;
            grid-template-columns: 1fr;
            align-items: flex-start;
            border-top: thin solid var(--color-border-gray);
            padding: 2rem;

            &::before{
                display: none;
                content: "A";
                font-size: var(--fs-xl);
                padding-left: 2px;
                padding-right: 1.5rem;
                color: var(--color-tertiary);
                line-height: 1;
            }

            .faq__answer-content{
                & > ol,ul{
                    padding-left: 1.5rem;
                }
                & > *:last-child{
                    margin-bottom: 0;
                }
            }

            @media screen and (width <= 640px) {
                padding: 1rem;
                grid-template-columns: minmax(0, 1fr);
            }
        }

        interpolate-size: allow-keywords;
        &::details-content {
            height: 0;
            overflow: clip;
            transition: height var(--motion-fast) var(--motion-ease),
                        content-visibility var(--motion-fast) allow-discrete;
        }
    
        &[open]{

            &::details-content {
                height: auto;
            }

            .faq__question{
                .faq__toggle{
                    &::before{
                        transform: translate(-50%, -50%) rotate(270deg);
                        opacity: 0;
                    }
                    &::after{
                        transform: translate(-50%, -50%) rotate(180deg);
                    }
                }
            }
        }
    }
}

/* Card Grid
-------------------------------- */
.c-card-grid{
	display: grid;
	gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0;

    &.grid-2{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    &.grid-3{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    &.grid-4{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    &.grid-5{
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    &.grid-6{
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.c-card-grid__item{
    padding: 2rem;
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    border: thin solid var(--color-border-gray);
    h3{
        font-size: var(--fs-lg);
        font-weight: 700;
        margin-bottom: 1rem;
    }
    p{
        font-size: var(--fs-sm);
    }
}


/* Office Item
-------------------------------- */
.office-item{
    padding-block: 5rem;
    border-bottom: 1px solid var(--color-border-gray);
    align-items: center;
    &:last-child {
        border-bottom: none;
    }
}
.office__content{
    align-items: center;
    grid-column: span 5;

    .office__title{
        margin-bottom: 0.75rem;
        line-height: 1.5;
        .location-label{
            display: block;
            font-size: var(--fs-sm);
            color: var(--color-secondary);
            font-weight: normal;
            line-height: 1;
            margin-top: 0.1rem;
        }
    }
    p + .office__title{
        margin-top: 2rem;
    }
    p{
        font-size: var(--fs-sm);
        margin-bottom: 0.75rem;
        line-height: 1.5;
        &:last-child{
            margin-bottom: 0;
        }
    }
}
.office__image{
    grid-column: span 7;
}

.office-item.card-list{
    padding: 2rem;
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.05);
    margin-bottom: 3rem;
    &:last-child{
        margin-bottom: 0;
    }
}


.grid-office-list{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--container-gutter);
    justify-content: flex-start;
    align-items: stretch;

    .office-item.card-list{
        padding: 0;
        overflow: hidden;
        border-radius: var(--border-radius);
        box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.05);
        margin-bottom: 0;

    }

    .office__image{
        aspect-ratio: 16 / 9;
        will-change: transform;
        overflow: hidden;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform var(--motion-fast) var(--motion-ease);
        }
    }

    .office__content{
        padding: var(--container-gutter);
    }

    .card-link{
        display: block;
        &:hover{
            .office__image{
                img{
                    transform: scale(1.03);
                }
            }
        }
        .card-link-label{
            margin: 0;
            position: relative;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: var(--color-gold);
            font-size: var(--fs-sm);
            color: #fff;
            padding: 0.5rem;
            text-align: center;
        }
    }

    @media (width <= 768px) {
        .office__content{
            padding: var(--container-gutter);
        }

    }
    @media (width <= 640px) {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        .office__content{
            padding: var(--container-gutter);
            padding-bottom: calc(var(--container-gutter) + 5px);
            
            .office__title{
                font-size: var(--fs-2lg);
                line-height: 1.5;

                .location-label{
                    margin-top: 0.25rem;
                }
            }
        }
    }
}

.office-solo-card{
    display: flex;
    flex-flow: row nowrap;
    gap: 2rem;
    border-radius: var(--border-radius);
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.05);
    overflow: hidden;
    align-items: stretch;
    background: #fff;

    & + .office-solo-card{
        margin-top: 4rem;
    }

    .office__image{
        width: 40%;
        aspect-ratio: 3 / 2;
        overflow: hidden;
        position: relative;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .office__content{
        padding: 2rem 0;
        align-self: center;
        width: 60%;


        .office__title{
            font-size: var(--fs-2lg);
        }
        p{
            font-size: var(--fs-md);
            line-height: 1.5;
        }
        .access{
            margin-top: 1rem;
            margin-bottom: 0;
            font-weight: 500;
        }

        .access-list{
            list-style: none;
            padding: 0;
            margin: 0 0 1rem;
            li{
                font-size: var(--fs-sm);
                line-height: 1.5;
            }
        }
    }

    @media (width <= 1024px) {
        align-items: stretch;
        /* .office__image{
            aspect-ratio: auto;
            img{
                height: 100%;
            }
        } */
    }
    @media (width <= 768px) {
        .office__content{
            padding: 2rem 1.5rem 2rem 0;
        }
    }
    @media (width <= 640px) {
        flex-flow: column nowrap;
        gap: 0;

        .office__image{
            width: 100%;
        }
        .office__content{
            width: 100%;
            padding: var(--container-gutter);
            padding-bottom: calc(var(--container-gutter) + 5px);
        }

    }
}


/* Officer Item
-------------------------------- */
.figure-caption{
    position: relative;
}

.figure-caption-overlay{
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.28) 32%,
        transparent 62%
    );
    color: var(--color-white);
    
    @media (width <= 768px) {
        padding: 1rem;
    }

    @media (width <= 640px) {
        padding: 1.25rem;
    }
}

/* 人物カード：役職 → 氏名 → ローマ字（写真の上） */
.figure-caption-overlay__role {
    margin: 0 0 0.35em;
    font-size: var(--fs-sm);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-sub);
    letter-spacing: var(--letter-spacing-heading);
    color: rgba(255, 255, 255, 0.78);
}

.figure-caption-overlay__name {
    margin: 0 0 0.2em;
    font-size: var(--fs-lg);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
    color: var(--color-white);
}

.figure-caption-overlay__name-en {
    margin: 0;
    font-size: var(--fs-xs);
    font-weight: var(--font-weight-base);
    line-height: var(--line-height-sub);
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.55);
}

@media (width <= 768px) {
    .figure-caption-overlay__role{
        font-size: var(--fs-xs);
    }
    .figure-caption-overlay__name{
        font-size: var(--fs-md);
    }
    .figure-caption-overlay__name-en{
        font-size: var(--fs-xs);
    }
}


@media (width <= 768px) {
    .figure-caption-overlay__name{
        margin-bottom: 0;
    }
}



/* Selection Process List
-------------------------------- */
.selection-process-list{
    gap: 0;

    .c-card-grid__item{
        position: relative;
        border-radius: 0;
        border-right: none;
        padding-right: 2rem;

        &:nth-child(1){ z-index: 5; }
        &:nth-child(2){ z-index: 4; }
        &:nth-child(3){ z-index: 3; }
        &:nth-child(4){ z-index: 2; }
        &:nth-child(5){ z-index: 1; }

        &:not(:first-child){
            border-left: none;
            padding-left: 2rem;
        }

        h3,
        p{
            position: relative;
            z-index: 1;
        }

        .steps{
            /* font-size: calc(var(--fs-4xl) * 1.5); */
            font-weight: 500;
            letter-spacing: 0;
            line-height: 1;
            margin-right: 0.5rem;
            color: var(--color-tertiary);
            /* position: absolute; */
            /* top: 0; */
            /* left: 0; */
            /* z-index: -1; */
        }

        &:not(:last-child){
            &::before,
            &::after{
                content: "";
                position: absolute;
                right: 1.5rem;
                width: 4rem;
                height: 50%;
                background-color: var(--color-white);
                border-right: thin solid var(--color-border-gray);
                box-sizing: border-box;
                pointer-events: none;
            }
            &::before{
                top: 0;
                transform: skewX(20deg);
                transform-origin: top right;
            }
            &::after{
                bottom: 0;
                transform: skewX(-20deg);
                transform-origin: bottom right;
            }
        }

        &:last-child{
            border-right: thin solid var(--color-border-gray);
        }
    }
}

.selection-process-list2{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2.75rem;

    .selection-process-list2__item{
        position: relative;
        display: grid;
        grid-template-columns: 4rem 12rem minmax(0, 1fr);
        column-gap: 2rem;
        align-items: center;
        padding: 1.5rem 2rem;
        background-color: var(--color-white);
        border: thin solid var(--color-border-gray);
        border-radius: var(--border-radius);

        &:not(:last-child)::after{
            content: "";
            position: absolute;
            left: 50%;
            bottom: -1.85rem;
            width: 0.9rem;
            height: 0.9rem;
            border-right: 2px solid var(--color-tertiary);
            border-bottom: 2px solid var(--color-tertiary);
            transform: translateX(-50%) rotate(45deg);
            pointer-events: none;
        }

        h3{
            margin: 0;
            font-size: var(--fs-lg);
            font-weight: 700;
            line-height: 1.4;
        }

        p{
            margin: 0;
            font-size: var(--fs-sm);
        }

        .steps{
            font-weight: 500;
            letter-spacing: 0;
            line-height: 1;
            color: var(--color-tertiary);
        }
    }
    @media (width <= 768px) {
        .selection-process-list2__item{
            grid-template-columns: 2rem 7rem minmax(0, 1fr);
            column-gap: 1rem;
        }
    }
    @media (width <= 640px) {
        .selection-process-list2__item{
            display: block;
            padding: var(--container-gutter);
            .steps{
                font-size: var(--fs-lg);
                display: inline-block;
                margin-right: 0.5rem;
            }
            h3{
                display: inline-block;
                margin-right: 0.5rem;
            }
            p{
                margin-top: 0.5rem;
                width: 100%;
            }
        }
    }

    gap: 3rem;
}

.list-career-step{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: flex-end;
    .list-career-step__item{
        border-radius: 0;
        border-right: none;
        padding: 2rem;
        border: thin solid var(--color-border-gray);
        
        &:not(:last-child){
            border-right: none;
        }

        &:nth-child(1){ height: 300px; }
        &:nth-child(2){ height: 350px; }
        &:nth-child(3){ height: 400px; }
        &:nth-child(4){ height: 450px; }

        h3{
            font-size: var(--fs-lg);
            font-weight: 700;
            margin-bottom: 1rem;
        }
        p{
            font-size: var(--fs-sm);
        }

        .career-meta-list{
            display: flex;
            flex-flow: column nowrap;
            gap: 0.2rem;
            list-style: none;
            padding: 0;
            margin: 0 0 1rem;
            li{
                font-size: var(--fs-sm);
                font-weight: 500;
                color: var(--color-secondary);
            }
        }
    }
}


.focus-content{
    background-color: var(--color-border-gray);
    padding-block: 4rem var(--section-padding-block);


    .single-header{
        padding-block: 0 4rem;
    }

    .back-to-content{
        padding-block-end: 0;
    }

    @media (width <= 1024px) {
        padding-block: var(--container-gutter);

        .single-header{
            padding-block-end: var(--section-padding-block);
        }
        .back-to-content{
            padding-block-end: var(--container-gutter);
        }
    }

    @media (width <= 768px) {
        .container-narrow{
            width: 100%;
            padding-inline: 2rem;
        }
        .single-header{
            padding-block: 0 var(--section-padding-block);
        }
    
    }
    @media (width <= 640px) {
        padding-block: var(--container-gutter);

        .single-header{
            padding-block: 0 var(--container-gutter);
        }
        .container-narrow{
            padding-inline: var(--container-gutter);
        }
        .back-to-content{
            padding-block: calc(var(--container-gutter) * 2) var(--container-gutter);
        }

        &.sp-focus-clear{
            background: #fff;
            .focus-content__main{
                padding: 0;
            }
        }
    }
}


.focus-content__main{
    padding: 4rem;
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    
    @media (width <= 1024px) {
        padding: 3rem;
    }
    
    @media (width <= 768px) {
        padding: 2rem;
    }
    @media (width <= 640px) {
        padding: var(--container-gutter);
    }
}