/** 改行 */
:is(br, wbr)[sp], .sp {
	display: none;
}
@media screen and (max-width: 767px) {
	:is(br, wbr)[pc], .pc {
		display: none;
	}
	:is(br, wbr)[sp] {
		display: inline;
	}
	.sp {
		display: block;
	}
}


/*==============================
ソリューション
================================*/
#solution .page-title {
    background-image: none;
    overflow: hidden;
    position: relative;
    z-index: 0;
}
#solution .page-title-text {
    position: relative;
    z-index: 1;
}
#solution .page-title-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -1;
}

.solution-anchor {
    max-width: 1000px;
    margin-inline: auto;
}
.solution-anchor .subtitle {
    width: 550px;
    margin-inline: auto;
}
.solution-anchor a {
    display: block;
    width: 30%;

    transition: 0.2s 0s ease;
}
.solution-anchor a.wide {
    margin-top: 60px;
    width: 85%;
    padding-block: 15px;
    padding-inline: 10px 30px;
    margin-inline: auto;
    background: white;
    border-radius: 10px;

    display: flex;
    align-items: center;
    gap: 20px;

    color: black;
}
.solution-anchor a.wide img {
    width: 300px;
    flex-shrink: 0;
}
.solution-anchor a.wide p {
    padding-block: 15px;
    padding-left: 30px;
    border-left: 1px solid var(--gray01);
    margin-left: 10px;
    font-size: 1.5rem;
    line-height: 1.5;
}
.solution-anchor .container {
    margin-top: 90px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    position: relative;
    z-index: 0;
}
.solution-anchor .container::before,
.solution-anchor .container::after {
    content: "";
    display: block;
    background: var(--light-navy);
    position: absolute;
    z-index: -1;
}
.solution-anchor .container::before {
    width: 3px;
    height: 90px;

    bottom: 100%;
    left: 50%;
    translate: -50% 0;
}
.solution-anchor .container::after {
    width: 70%;
    height: 45px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 3px) 100%, calc(100% - 3px) 3px, 3px 3px, 3px 100%, 0 100%);

    top: 0;
    left: 50%;
    translate: -50% -100%;
}
.solution-anchor .container a {
    flex-shrink: 0;
}
@media (hover: hover) {
    .solution-anchor:has(a:hover) a:not(:hover) {
        opacity: 0.35;
    }
}
.solution-anchor img {
    max-width: 100%;
}
.solution-section {
    padding: 60px 0;
    margin: 0 20px;
    border-bottom: 1px solid #d5d5d5;
}
.solution-section:nth-child(even) .solution-container {
    flex-direction: row-reverse;
}
 
.solution-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 90px;
}

.solution-container {
    display: flex;
    align-items: center;
    gap: 8%;
}
.solution-container .image {
    flex-shrink: 0;
    width: 40%;
    position: relative;
    z-index: 0;
}
.solution-container .thumbnail {
    width: 100%;
    object-fit: contain;
}
.solution-container .label {
    width: 240px;
    filter: drop-shadow(0 5px 20px rgba(0,0,0,.2));

    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% 30%;
    z-index: 1;
}
.solution-container .text {
    line-height: 1.75;
}
.solution-container .title {
    padding-bottom: 20px;
    border-bottom: 1px solid black;
    margin-bottom: 20px;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5;
}

.solution-container .lead {
    font-size: 1.6rem;
}
.solution-container .btn {
    margin-top: 40px;
    margin-inline: auto;
}
@media screen and (min-width: 768px) {
    .solution-section {
        padding: 150px 20px;
        max-width: 1000px;
        margin: 0 auto;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
    }
}  

@media screen and (max-width: 767px) {
    .solution-anchor {
        max-width: 100svw;
        gap: 5svw;
    }
    .solution-anchor .lead {
        padding-inline: 20px;
    }
    .solution-anchor .lead .title {
        font-size: 2.1rem;
    }
    .solution-anchor .lead p {
        font-size: 1.5rem;
    }
    .solution-anchor .subtitle {
        width: 100%;
    }
    .solution-anchor a {
        width: 85%;
    }
	.solution-anchor a.wide {
        padding-inline: 10px;
        flex-direction: column;
        gap: 0;
    }
	.solution-anchor a.wide p {
        padding-inline: 10px;
        border-left: 0;
		margin-left: 0;
}
	.solution-anchor .container {
        flex-direction: column;
		align-items: center;
		gap: 20px;

        --ratio: calc( (100svw - 40px) * 0.85 * 0.5 );
        /* (100svw - 40px) * 0.85 = width of .solution-anchor a */
        /* 0.5 = aspect-ratio of .solution-anchor a img(800 / 400)*/
	}
    .solution-anchor .container::before {
        width: 50%;
        height: calc( 90px + var(--ratio) / 2 );
        clip-path: polygon(calc( 100% - 3px) 0, 100% 0, 100% 48px, 3px 48px, 3px 100%, 0 100%, 0 45px, calc( 100% - 3px) 45px, calc( 100% - 3px) 0);
        left: auto;
        bottom: auto;
        top: 0;
        right: 50%;
        translate: 0 -90px;
    }
    .solution-anchor .container::after {
        width: 50%;
        height: calc(100% - var(--ratio));
        clip-path: polygon(0 0, 100% 0, 100% 3px, 3px 3px, 3px calc( 50% - 1.5px ), 100% calc( 50% - 1.5px ), 100% calc( 50% + 1.5px ), 3px calc( 50% + 1.5px ), 3px calc(100% - 3px), 100% calc( 100% - 3px ), 100% 100%, 0 100%);
        left: auto;
        right: 50%;
        translate: 0 calc( var(--ratio) / 2 );
    }


    .solution-container {
        flex-direction: column;
    }
    .solution-section:nth-child(even) .solution-container {
        flex-direction: column;
    }
    .solution-container .image {
        width: 100%;
		
        padding-bottom: 60px;
    }
    .solution-container .label {
        width: 50%;
        translate: -50% -20%;
    }
}