/* ============================================================================================
	FEATURED SERVICE LIST / PATTERN
============================================================================================ */
.matsunaga-service-list-image {
    width: 100%;
    margin: 0;
    overflow: hidden
}
.matsunaga-service-list-image img {
    height: 100%;
    object-fit: cover
}
.matsunaga-service-list-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-flow: column;
    justify-content: center
}
.matsunaga-service-list-jp {
    display: flex;
    align-items: center;
    gap: 1em
}
.matsunaga-service-list-jp::after {
    content: "";
    flex: 1;
    min-width: 0;
    max-width: 200px;
    display: block;
    width: 100%;
    height: 1px;
    background: var(--wp--preset--color--border)
}
.matsunaga-service-list-item:nth-of-type(even) {
    flex-direction: row-reverse
}
.matsunaga-service-list-desc p {
    margin: 1em 0
}
@media screen and (min-width: 768px) {
    .matsunaga-service-list-image {
        width: 56%
    }
}

/* button */
.matsunaga-service-list-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3em;
    height: 3em;
    margin-left: auto;
    border-radius: 50%;
    border: 1px solid currentColor;
    cursor: pointer;
    overflow: visible;
}
.matsunaga-service-list-button a {
    color: currentColor
}
.matsunaga-service-list-button .icon {
    transition: font-size .3s ease
}
.matsunaga-service-list-button:hover .icon {
    font-size: 36px !important
}

.circle {
    position: absolute;
    inset: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    transform: rotate(90deg); /* 開始位置を下に */
    pointer-events: none;
}

.circle circle {
    fill: none;
    stroke: var(--wp--preset--color--accent);
    stroke-width: 4;
    stroke-linecap: round;

    stroke-dasharray: 302;
    stroke-dashoffset: 302;

    opacity: 0;
}

.matsunaga-service-list-button:hover .circle circle {
    animation: circle-draw .35s ease forwards;
}

@keyframes circle-draw{from{stroke-dashoffset:302;opacity:1}to{stroke-dashoffset:0;opacity:1}}