@charset "utf-8";


/* ワークストップ */
.works__top {
    width: 69.4%;
    margin: 135px auto 150px;
}
.works__top img {
    width: 100%;
}
.works__topimg {
    border: 3px solid #1A1A1A;
    border-radius: 20px;
    overflow: hidden;
}
.works__topct {
    padding: 5px 15px 5.5px;
    border-radius: 100px;
    background: #1A1A1A;
    width: 7.4%;
    margin-top: 25px;
}
.works__topct p {
    text-align: center;
    color: #FFF;
    font-family: Kanit;
    font-size: max(1.2rem, 0.83vw);
    font-weight: 600;
    line-height: normal;
}
.works__toptitle {
    font-size: max(2.2rem, 3.12vw);
    font-weight: 700;
}
.works__topline {
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: #1A1A1A;
    margin-top: 10px;
}
.works__topbox {
    border: 3px solid #1A1A1A;
    box-shadow: 5px 5px 0px 0px #1A1A1A;
    border-radius: 20px;
    padding: 2.5% 2.5%;
    display: flex;
    margin-top: 25px;
    flex-direction: row-reverse;
}
.works__topbox__period {
    width: 30%;
}
.works__topbox__periodtitle {
    font-size: max(1.5rem, 1.25vw);
    font-weight: 600;
}
.works__topbox__periodtxt {
    font-size: max(1.3rem, 1.1vw);
    font-weight: 400;
    line-height: 175%; 
    margin-top: 10px;
}
.works__topbox__summary {
    width: 70%;
}
.works__topbox__summarytitle {
    font-size: max(1.5rem, 1.25vw);
    font-weight: 600;
}
.works__topbox__summarytxt {
    font-size: max(1.3rem, 1.1vw);
    font-weight: 400;
    line-height: 175%; 
    margin-top: 10px;
}
.pc_moc {
    display: block;
}
.sp_moc {
    display: none;
}
@media screen and (min-width: 1600px) {
    .works__top {
        margin: 145px auto 150px;
    }
}
@media screen and (min-width: 1800px) {
    .works__top {
        margin: 165px auto 150px;
    }
}
  @media screen and (min-width: 2200px) {
    .works__top {
        margin: 200px auto 150px;
    }
}
@media screen and (max-width: 1440px) {
    .works__topct {
        width: 73.5px;
    }
}
@media screen and (max-width: 1160px) {
    .works__top {
        width: 75%;
        margin: 130px auto 100px;
    }
    .works__top img {
        width: 100%;
    }
    .works__topct {
        margin-top: 11px;
    }
    .works__topbox__summary {
        width: 70%;
    }
    .pc_moc {
        display: block;
    }
    .sp_moc {
        display: none;
    }
}
@media screen and (max-width: 960px) {
    .works__top {
        width: 80%;
        margin: 115px auto 80px;
    }
}
@media screen and (max-width: 769px) {
    .works__top {
        width: 88%;
        margin: 105px auto 50px;
    }
    .works__topimg {
        border: 3px solid #1A1A1A;
        border-radius: 16px;
    }
    .works__topct {
        padding: 3px 11px 3.5px;
        border-radius: 100px;
        width: 58px;
        margin-top: 12px;
    }
    .works__topct p {
        font-size: 1rem;
    }
    .works__toptitle {
        font-size: clamp(2.6rem, 3.12vw, 6rem);
    }
    .works__topline {
        height: 1.5px;
        margin-top: 0px;
    }
    .works__topbox {
        border: 3px solid #1A1A1A;
        box-shadow: 3px 3px 0px 0px #1A1A1A;
        border-radius: 16px;
        padding: 15px;
        display: block;
        margin-top: 16px;
        flex-direction: row;
    }
    .works__topbox__period {
        width: 100%;
        margin-right: 0;
        margin-top: 20px;
    }
    .works__topbox__periodtitle {
        font-size: clamp(1.5rem, 1.25vw, 3rem);
    }
    .works__topbox__periodtxt {
        font-size: clamp(1.3rem, 1.1vw, 3rem);
        margin-top: 10px;
        line-height: 169.231%;
    }
    .works__topbox__summary {
        width: 100%;
    }
    .works__topbox__summarytitle {
        font-size: clamp(1.5rem, 1.25vw, 3rem);
    }
    .works__topbox__summarytxt {
        font-size: clamp(1.3rem, 1.1vw, 3rem);
        margin-top: 10px;
        line-height: 169.231%;
    }
    .pc_moc {
        display: none;
    }
    .sp_moc {
        display: block;
    }
}
@media screen and (max-width: 680px) {
    .works__top {
        width: 94.6%;
        margin: 105px auto 50px;
    }
    .works__topimg {
        border: 2px solid #1A1A1A;
    }
    .works__topbox {
        border: 2px solid #1A1A1A;
    }
    .works__toptitle {
        font-size: clamp(2.2rem, 3.12vw, 6rem);
    }
}
@media screen and (max-width: 480px) {
    .works__top {
        width: 94.6%;
        margin: 85px auto 50px;
    }
}


/* ワークスメイン */
.works__main {
    width: 62.5%;
    margin: 150px auto;
}
.works__main__line {
    width: 100%;
    height: 2px;
    background-color: #D1D1D1;
    border-radius: 2px;
}
.works__main__box {
    display: flex;
    padding: 60px 0;
}
.works__main__boxtitle {
    width: 11%;
    margin-right: 13.3%;
    font-size: max(1.5rem, 1.25vw);
    font-weight: 700;
}
.works__main__boxtxt {
    width: 78.6%;
    font-size: max(1.3rem, 1.11vw);
    font-style: normal;
    font-weight: 400;
    line-height: 175%; 
}

.works__moc {
    border-radius: 20px;
    overflow: hidden;
    width: 69.4%;
    margin: 0 auto;
}
.sp__works__moc {
    display: none;
}
.works__moc img {
    width: 100%;
}

.works__imgbox {
    margin: 100px auto 0;
    width: 69.4%;
    display: flex;
    gap: 0 11.4%;
}
.works__imgbox1 {
    width: 70%;
}
.works__imgbox1 img {
    display: block;
    margin-top: 20px;
    border-radius: 20px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.10);
}
.works__imgbox1 img:first-of-type {
    margin-top: 0px;
}
.works__imgbox2 {
    width: 18.6%;
}
.works__imgbox2 img {
    margin-top: 20px;
    display: block;
    border-radius: 8px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.10);
}
.works__imgbox2 img:first-of-type {
    margin-top: 0px;
}
.works__imgbox2__2 {
    margin-top: 20px;
}
@media screen and (max-width: 1160px) {
    .works__main {
        width: 75%;
        margin: 100px auto;
    }
    .works__main__line {
        height: 1.5px;
    }
    .works__main__box {
        padding: 60px 0;
    }
    .works__main__boxtitle {
        width: 11%;
        margin-right: 13.3%;
    }
    .works__main__boxtxt {
        width: 78.6%;
    }
    
    .works__moc {
        width: 75%;
        margin: 0 auto;
    }
    .sp__works__moc {
        display: none;
    }

    .works__imgbox {
        margin: 100px auto 0;
        width: 75%;
    }
    .works__imgbox1 img {
        margin-top: 15px;
        border-radius: 10px;
    }
    .works__imgbox2 img {
        margin-top: 15px;
        border-radius: 8px;
    }
    .works__imgbox2__2 {
        margin-top: 15px;
    }
}
@media screen and (max-width: 960px) {
    .works__main {
        width: 80%;
        margin: 80px auto;
    }
    .works__moc {
        width: 80%;
        margin: 0 auto;
    }
    .works__imgbox {
        margin: 80px auto 0;
        width: 80%;
    }
}
@media screen and (max-width: 880px) {
    .works__main__boxtitle {
        width: 13%;
    }
}
@media screen and (max-width: 769px) {
    .works__main {
        width: 88%;
        margin: 50px auto;
    }
    .works__main__line {
        height: 1px;
    }
    .works__main__box {
        display: block;
        padding: 30px 0;
    }
    .works__main__boxtitle {
        width: 100%;
        margin-right: 0;
        font-size: clamp(1.5rem, 1.25vw, 3rem)
    }
    .works__main__boxtxt {
        width: 100%;
        font-size: clamp(1.3rem, 1.11vw, 3rem);
        line-height: 169.231%; 
        margin-top: 10px;
    }
    
    .works__moc {
        display: none;
    }
    .sp__works__moc {
        display: block;
    }
    .sp__works__moc img{
        width: 100%;
    }    
    .works__imgbox {
        margin: 50px auto 0;
        width: 88%;
        display: block;
        gap: 0 50px;
    }
    .works__imgbox1 {
        width: 100%;
    }
    .works__imgbox1 img {
        display: block;
        margin-top: 10px;
        border-radius: 8px;
    }
    .works__imgbox2 {
        width: 100%;
        display: flex;
        gap: 3%;
        margin-top: 30px;
    }
    .sp_img {
        width: 48.4%;
    }
    .works__imgbox2__1 img:first-of-type {
        margin-top: 0;
    }
    .sp_img img{
        margin-top: 10px;
        display: block;
        border-radius: 8px;
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.10);
    }
    .works__imgbox2 img:first-of-type {
        margin-top: 0px;
    }
    .works__imgbox2__2 {
        margin-top: 0px;
    }
}
@media screen and (max-width: 680px) {
    .works__main {
        width: 94.6%;
    }
    .works__imgbox {
        width: 94.6%;
    }
}


/* サイトへ飛ぶアニメーション */
.works__link {
    display: block;
    width: 15.5%;
    margin: 100px auto 150px;
    text-decoration: none;
    position: relative;
    left: 1.1%;
}
.works__click {
    display: flex;
    align-items: center;
    position: relative;
}
.works__clicktxt {
    color: #1A1A1A;
    font-family: Kanit;
    font-size: max(4rem, 2.7vw);
    font-weight: 600;
    margin-right: 20px;
    position: relative;
    padding-bottom: 2px;
    --underline-width: 0;
}
.works__clicktxt::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 2px;
    background: #1A1A1A;
    width: var(--underline-width);
    transition: width 0.4s ease;
}
.works__clicktxtspace {
    margin-right: 5px;
}

.works__clicktxt span {
    display: inline-block;
    transition: transform 0.3s ease;
}

.works__clicktxt.animate span {
    animation: bounce 0.4s ease forwards;
}
.works__clicktxt.animate span:nth-child(1) { animation-delay: 0s; }
.works__clicktxt.animate span:nth-child(2) { animation-delay: 0.03s; }
.works__clicktxt.animate span:nth-child(3) { animation-delay: 0.06s; }
.works__clicktxt.animate span:nth-child(4) { animation-delay: 0.09s; }
.works__clicktxt.animate span:nth-child(5) { animation-delay: 0.12s; }
.works__clicktxt.animate span:nth-child(6) { animation-delay: 0.15s; }
.works__clicktxt.animate span:nth-child(7) { animation-delay: 0.18s; }
.works__clicktxt.animate span:nth-child(8) { animation-delay: 0.21s; }
.works__clicktxt.animate span:nth-child(9) { animation-delay: 0.24s; }
.works__clicktxt.animate span:nth-child(10) { animation-delay: 0.27s; }

@keyframes bounce {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-5px); }
    60%  { transform: translateY(0px); }
    100% { transform: translateY(0); }
}

.works__link.hovered .works__clicktxt::after {
    width: calc(100% + 43px); /* 下線を矢印分延長 */
}

.works__clickimg {
    width: 24px;
    height: 24px;
}

@media screen and (max-width: 1440px) {
    .works__link {
        width: 223px;
    }
}
@media screen and (max-width: 1060px) {
    .works__link {
        left: 1.7%;
    }
}
@media screen and (max-width: 960px) {
    .works__link {
        display: block;
        width: 169px;
        margin: 80px auto 80px;
        text-decoration: none;
        position: relative;
        left: 1.5%;
    }
    .works__click {
        display: flex;
        align-items: center;
        position: relative;
    }
    .works__clicktxt {
        font-size: 3rem;
        margin-right: 10px;
        padding-bottom: 2px;
        --underline-width: 0;
    }
    .works__clicktxt::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        border-radius: 2px;
        background: #1A1A1A;
        width: var(--underline-width);
    }
    .works__clicktxtspace {
        margin-right: 3px;
    }
    
    .works__clicktxt span {
        display: inline-block;
        transition: transform 0.3s ease;
    }
    
    .works__clicktxt.animate span {
        animation: bounce 0.4s ease forwards;
    }
    .works__clicktxt.animate span:nth-child(1) { animation-delay: 0s; }
    .works__clicktxt.animate span:nth-child(2) { animation-delay: 0.03s; }
    .works__clicktxt.animate span:nth-child(3) { animation-delay: 0.06s; }
    .works__clicktxt.animate span:nth-child(4) { animation-delay: 0.09s; }
    .works__clicktxt.animate span:nth-child(5) { animation-delay: 0.12s; }
    .works__clicktxt.animate span:nth-child(6) { animation-delay: 0.15s; }
    .works__clicktxt.animate span:nth-child(7) { animation-delay: 0.18s; }
    .works__clicktxt.animate span:nth-child(8) { animation-delay: 0.21s; }
    .works__clicktxt.animate span:nth-child(9) { animation-delay: 0.24s; }
    .works__clicktxt.animate span:nth-child(10) { animation-delay: 0.27s; }
    
    @keyframes bounce {
        0%   { transform: translateY(0); }
        30%  { transform: translateY(-5px); }
        60%  { transform: translateY(0px); }
        100% { transform: translateY(0); }
    }
    
    .works__link.hovered .works__clicktxt::after {
        width: calc(100% + 34.5px); /* 下線を矢印分延長 */
    }
    
    .works__clickimg {
        width: 26px;
        height: 26px;
        position: relative;
        top: 1px;
    } 
}
@media screen and (max-width: 769px) {
    .works__link {
        left: 1.8%;
    }
    .works__clicktxt::after {
        height: 2px;
        bottom: 3px;
    }
}
@media screen and (max-width: 680px) {
    .works__link {
        left: 2%;
    }
}
@media screen and (max-width: 480px) {
    .works__link {
        width: 140px;
        left: 5%;
    }
    .works__clicktxt {
        font-size: 2rem;
    }
    .works__clicktxt::after {
        height: 2px;
    }
    .works__link.hovered .works__clicktxt::after {
        width: calc(100% + 29px); /* 下線を矢印分延長 */
    }
    .works__clickimg {
        width: 20px;
        height: 20px;
    } 
}




/* 左アニメーション */
.all__link {
    display: flex;
    justify-content: space-between;
    width: 88.8%;
    margin: 100px auto 150px;
}
.all__linkbox {
    display: block;
    width: auto;
    text-decoration: none;
    position: relative;
    width: 9.9%;
}

.all__click {
    display: flex;
    align-items: center;
    position: relative;
}

.all__clicktxt {
    color: #151515;
    font-family: Kanit;
    font-size: max(3.5rem, 2.4vw);
    font-weight: 600;
    position: relative;
    margin-left: 20px;
    padding-bottom: 2px;
    --underline-width: 0;
}

.all__clicktxt::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 2px;
    background: #1A1A1A;
    width: 100%;
    transform: scaleX(0);
    transform-origin: right; /* 右端を起点に */
    transition: transform 0.4s ease;
}

.all__clicktxt.animate::after {
    transform: scaleX(1);
}
.all__clicktxt span {
    display: inline-block;
    transition: transform 0.3s ease;
}

.all__clicktxt.animate span {
    animation: bounce 0.4s ease forwards;
}
.all__clicktxt.animate span:nth-child(1) { animation-delay: 0.09s; }
.all__clicktxt.animate span:nth-child(2) { animation-delay: 0.06s; }
.all__clicktxt.animate span:nth-child(3) { animation-delay: 0.03s; }
.all__clicktxt.animate span:nth-child(4) { animation-delay: 0s; }
@keyframes bounce {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-5px); }
    60%  { transform: translateY(0px); }
    100% { transform: translateY(0); }
}





/* 右アニメーション */
.all__linkbox3 {
    display: block;
    position: relative;
    width: 150px; /* 必要に応じて調整 */
    text-decoration: none;
}

.all__click3 {
    display: flex;
    align-items: center;
}

/* 下線アニメーション：左から右へ */

.all__clicktxt3 {
    position: relative;
    font-family: Kanit;
    font-size: max(3.5rem, 2.4vw);
    font-weight: 600;
    color: #1A1A1A;
    padding-bottom: 2px;
    margin-right: 20px;
}

/* 下線アニメーション：左→右 */
.all__clicktxt3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: #1A1A1A;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    border-radius: 2px;
}

/* ホバー時に下線を表示 */
.all__clicktxt3.animate::after {
    transform: scaleX(1);
}

/* 文字アニメーション */
.all__clicktxt3 span {
    display: inline-block;
    transition: transform 0.3s ease;
}

.all__clicktxt3.animate span {
    animation: bounce 0.4s ease forwards;
}

.all__clicktxt3.animate span:nth-child(1) { animation-delay: 0s; }
.all__clicktxt3.animate span:nth-child(2) { animation-delay: 0.03s; }
.all__clicktxt3.animate span:nth-child(3) { animation-delay: 0.06s; }
.all__clicktxt3.animate span:nth-child(4) { animation-delay: 0.09s; }

@keyframes bounce {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-5px); }
    60%  { transform: translateY(0); }
    100% { transform: translateY(0); }
}




/* 中央 */
.all__linkbox2 {
    display: block;
    position: relative;
    width: 16.32%; /* 必要に応じて調整 */
    text-decoration: none;
}

/* テキスト設定 */
.all__clicktxt2 {
    position: relative;
    font-family: Kanit;
    font-size: max(4rem, 2.7vw);
    font-weight: 600;
    color: #1A1A1A;
    padding-bottom: 2px;
}

/* 下線アニメーション：左→右 */
.all__clicktxt2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: #1A1A1A;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    border-radius: 2px;
}

.all__clicktxt2.animate::after {
    transform: scaleX(1);
}

/* 文字の bounce アニメーション */
.all__clicktxt2 span {
    display: inline-block;
    transition: transform 0.3s ease;
}

.all__clicktxt2.animate span {
    animation: bounce 0.4s ease forwards;
}

.all__clicktxt2.animate span:nth-child(1) { animation-delay: 0s; }
.all__clicktxt2.animate span:nth-child(2) { animation-delay: 0.03s; }
.all__clicktxt2.animate span:nth-child(3) { animation-delay: 0.06s; }
.all__clicktxt2.animate span:nth-child(4) { animation-delay: 0.09s; }
.all__clicktxt2.animate span:nth-child(5) { animation-delay: 0.12s; }
.all__clicktxt2.animate span:nth-child(6) { animation-delay: 0.15s; }
.all__clicktxt2.animate span:nth-child(7) { animation-delay: 0.18s; }
.all__clicktxt2.animate span:nth-child(8) { animation-delay: 0.21s; }
.all__clicktxt2.animate span:nth-child(9) { animation-delay: 0.24s; }

@keyframes bounce {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-5px); }
    60%  { transform: translateY(0); }
    100% { transform: translateY(0); }
}


@media screen and (max-width: 1440px) {
    .all__linkbox2 {
        width: 208.7px; /* 必要に応じて調整 */
        text-decoration: none;
    }
    .all__linkbox {
        width: 126.6px;
    }
}
@media screen and (max-width: 1160px) {
    .all__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 85%;
        margin: 80px auto 120px;
    }
}
@media screen and (max-width: 960px) {
    .all__link {
        margin: 50px auto 110px;
    }
    .all__linkbox {
        width: 102.8px;
    }
    
    .all__clicktxt {
        font-size: 3rem;
        position: relative;
        margin-left: 10px;
        padding-bottom: 2px;
        --underline-width: 0;
    }
    .all__clickimg {
        width: 17px;
        position: relative;
        bottom: 2px;
    }
    .all__clicktxt::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        border-radius: 2px;
        background: #1A1A1A;
        width: 100%;
        transform: scaleX(0);
        transform-origin: right; /* 右端を起点に */
        transition: transform 0.4s ease;
    }
    
    .all__clicktxt.animate::after {
        transform: scaleX(1);
    }
    /* 右アニメーション */
    .all__clicktxt3 {
        position: relative;
        font-size: 3rem;
        padding-bottom: 2px;
        margin-right: 10px;
    }

    /* 下線アニメーション：左→右 */
    .all__clicktxt3::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 1.5px;
        width: 100%;
        background: #1A1A1A;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
        border-radius: 2px;
    }

    /* ホバー時に下線を表示 */
    .all__clicktxt3.animate::after {
        transform: scaleX(1);
    }

    /* 文字アニメーション */
    .all__clicktxt3 span {
        display: inline-block;
        transition: transform 0.3s ease;
    }

    /* 中央 */
    .all__linkbox2 {
        display: block;
        position: relative;
        width: 182.5px; /* 必要に応じて調整 */
        text-decoration: none;
    }

    /* テキスト設定 */
    .all__clicktxt2 {
        position: relative;
        font-size: 3.5rem;
        padding-bottom: 3px;
    }

    /* 下線アニメーション：左→右 */
    .all__clicktxt2::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 1.5px;
        width: 100%;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
        border-radius: 2px;
    }

    .all__clicktxt2.animate::after {
        transform: scaleX(1);
    }

    /* 文字の bounce アニメーション */
    .all__clicktxt2 span {
        display: inline-block;
        transition: transform 0.3s ease;
    }
}
@media screen and (max-width: 860px) {
    .all__link {
        margin: 30px auto 80px;
    }
}
@media screen and (max-width: 769px) {
    .all__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 85%;
    }
    .all__linkbox {
        display: block;
        width: auto;
        text-decoration: none;
        position: relative;
        width: 79px;
    }
    
    .all__click {
        display: flex;
        align-items: center;
        position: relative;
    }
    
    .all__clicktxt {
        font-size: 2.2rem;
        position: relative;
        margin-left: 10px;
        padding-bottom: 2px;
        --underline-width: 0;
    }
    .all__clickimg {
        width: 13px;
        position: relative;
        bottom: 2px;
    }
    .all__clicktxt::after {
        content: "";
        position: absolute;
        bottom: 3px;
        left: 0;
        height: 2px;
        border-radius: 2px;
        background: #1A1A1A;
        width: 100%;
        transform: scaleX(0);
        transform-origin: right; /* 右端を起点に */
        transition: transform 0.4s ease;
    }
    
    .all__clicktxt.animate::after {
        transform: scaleX(1);
    }    
    /* 右アニメーション */
    .all__clicktxt3 {
        position: relative;
        font-size: 2.2rem;
        padding-bottom: 2px;
        margin-right: 10px;
    }

    /* 下線アニメーション：左→右 */
    .all__clicktxt3::after {
        content: "";
        position: absolute;
        bottom: 3px;
        left: 0;
        height: 2px;
        width: 100%;
        background: #1A1A1A;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
        border-radius: 2px;
    }

    /* ホバー時に下線を表示 */
    .all__clicktxt3.animate::after {
        transform: scaleX(1);
    }

    /* 中央 */
    .all__linkbox2 {
        display: block;
        position: relative;
        width: 141px; /* 必要に応じて調整 */
        text-decoration: none;
    }

    /* テキスト設定 */
    .all__clicktxt2 {
        position: relative;
        font-size: 2.7rem;
        padding-bottom: 3px;
    }

    /* 下線アニメーション：左→右 */
    .all__clicktxt2::after {
        content: "";
        position: absolute;
        bottom: 3px;
        left: 0;
        height: 2px;
        width: 100%;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
        border-radius: 2px;
    }

    .all__clicktxt2.animate::after {
        transform: scaleX(1);
    }
}
@media screen and (max-width: 680px) {
    .all__link {
        width: 88.9%;
    }
}

@media screen and (max-width: 480px) {
    .all__linkbox {
        width: 63.5px;
    }
    .all__clicktxt {
        font-size: 1.6rem;
    }
    .all__clicktxt::after {
        height: 2px;
    }
    /* 右アニメーション */
    .all__clicktxt3 {
        font-size: 1.6rem;
    }
    .all__clicktxt3::after {
        height: 2px;
    }
    
    /* 中央 */
    .all__linkbox2 {
        width: 104.5px; /* 必要に応じて調整 */
    }

    /* テキスト設定 */
    .all__clicktxt2 {
        font-size: 2rem;
    }
    .all__clicktxt2::after {
        height: 2px;
    }
}