@charset "UTF-8";


body {
    background-color: #072549;
    font-family: "Klee One", cursive;
    font-weight: 400;
    font-style: normal;
}

.klee-one-regular {

}

/* ファーストビュー */
.site_logo {
    position: fixed;
    top: 2.083vw;
    left: 4.028vw;
    z-index: 10;
}
.first_view {
    box-shadow: 40px 0px 40px #000;
}
.first_view_slider img {
    position: absolute;
    width: 100%;
    object-fit: cover;
    opacity: 0;
    transition-duration: .4s;
}
.first_view_slider img.show {
    opacity: 1;
}
.first_view_text {
    z-index: 1;
    position: absolute;
    bottom: 5.153vw;
    left: 5.276vw;
}
.first_view_text_flex {
    display: flex;
    /* flex-wrap: wrap; */
    gap: 4px;
    margin-bottom: 4px;
}
.first_view_text p {
    width: 4.861vw;
    height: 4.861vw;
    width: 1.273em;
    height: 1.273em;
    width: 70px;
    height: 70px;
    position: relative;
    background-color: #212727;
    color: white;
    display: inline-block;
    font-size: 3.819vw;
    font-size: 55px;
}
.first_view_text span {
    display: inline-block;
    /* font-size: 3.819vw; */
    /* width: 70px;
    height: 70px; */
    /* background-color: black; */
    text-align: center;
    /* line-height: 70px; */
    margin-bottom: 10px;

    position: absolute;
    top: 50%;
    left: 50%;
    top: 43%;
    left: 46%;
    transform: translate( -50% ,-50% );
}
.first_view_text p.first_view_space_block {
    width: 24%;
    background-color: transparent;
}
.first_view_text p.reverse_color {
    background-color: white;
    color: #212727;
}
.first_view_heigt_box {
    width: 100%;
}
.klee-one-regular {
  font-family: "Klee One", cursive;
  font-weight: 400;
  font-style: normal;
}
.inquiry_btn_fix {
    background-color: #01449B;
    color: white;
    position: fixed;
    right: 0;
    top: 50%;
    z-index: 3;
    writing-mode: vertical-rl;
    font-size: 20px;
    font-size: 2.4vh;
    padding: 16px 16px;
}
@media ( max-width: 700px ) {
    .inquiry_btn_fix {
        font-size: 3vw;
        padding: 8px 8px;
    }
}
@media ( max-width: 600px ) {
    .inquiry_btn_fix {
        writing-mode: horizontal-tb;
        bottom: 0;
        top: unset;
        width: 100%;
        text-align: center;
        padding: 14px 0;
        font-size: 16px;
    }
    .inquiry_btn_fix span {
        display: inline-block;
        transform: rotate(180deg);
        top: 2px;
        position: relative;
    }
    footer {
        padding-bottom: 60px;
    }
}
.first_view_text.sp {
    display: none;
}
.first_view_text.sp span {
    font-size: 40px;
}
@media ( max-width: 1100px ) {
    .first_view_text_flex {
        display: block;
    }
    .first_view_text.sp p {
        display: block;
        margin: 0 0 3px 3px;
    }
    /* .first_view_text.pc {
        display: none;
    } */
    .first_view_text.pc {
        left: 50%;
        transform: translateX(-50%);
    }
    .first_view_text.sp {
        display: flex;
        bottom: unset;
        transform: translateY(-46%);
        top: 50%;
    }
    .site_logo {
        left: 50%;
        transform: translateX( -50% );
        top: 4.083vw;
    }

}
@media ( max-width: 600px ) {
    .first_view_text p {
        width: 40px;
        height: 40px;
    }
    .first_view_text.sp span {

    }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーheaderーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
header {
    position: sticky;
    top: 0;
    padding-top: 40px;
    padding-bottom: 150px;
    z-index: 3;
    height: 160px;
    width: 100%;
}
header nav.no_hamburger ul {
    display: flex;
    justify-content: right;
    list-style: none;
}
header nav.no_hamburger ul li {
    border-right: 1px solid white;
    padding: 0 15px;
}
header nav.no_hamburger ul li:last-child {
    padding-right: 2%;
    border-right: none;
}
header nav.no_hamburger ul a {
    color: white;
    font-size: 17px;
}
nav.no_hamburger .header_flex_nav {
    font-size: clamp( 14px, 1.25vw, 30px );
}
.white_cover_hamburger {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    z-index: 2;
    transition-duration: .6s;
    user-select: none;
    opacity: 0;
    pointer-events: none;
}
.white_cover_hamburger.active {
    z-index: 3;
}
/*　ーーーーーーーーーーーーーーーーーー ハンバーガーメニュー */
header nav.hamburger {
    opacity: 0;
    user-select: none;
    text-align: center;
    padding-top: 20px;
    transition-duration: .6s;
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    pointer-events: none;
}

/*　ーーーーーーーーーーーーーーーーーー ハンバーガークローズボタン */
.hamburger_menu_close_btn {
    opacity: 0;
    user-select: none;

    width: 60px;
    height: 60px;

    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 20;
    /* background-color: white; */
}
@media ( min-width: 1400px ) {
    .hamburger_menu_btn {
        display: none;
    }
}
.hamburger_menu_btn.noshow {
    display: none;
}
.hamburger_menu_close_btn .bar {
    width: 70%;
    height: 1px;
    background-color: #000;
    position: absolute;
    top: 40%;
    left: 50%;
}
.hamburger_menu_close_btn .bar:nth-child(1) {
    transform: translate( -50%, -50% ) rotate(45deg);
}
.hamburger_menu_close_btn .bar:nth-child(2) {
    transform: translate( -50%, -50% ) rotate(-45deg);
}
.hamburger_menu_close_btn_text {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate( -50%, -50% );
    font-size: 13px;
}
header nav.hamburger li {
    margin-bottom: 30px;
}
/*　ーーーーーーーーーーーーーーーーーー ハンバーガーボタン */
.hamburger_menu_btn {
    width: 60px;
    height: 60px;
    display: none;
    background-color: white;
    position: sticky;
    top: 20px;
    right: 20px;
    padding-top: 12px;
    margin-left: auto;
    margin-top: 20px;
}
.hamburger_menu_btn .bar {
    background-color: #000;
    width: 80%;
    height: 2px;
    margin: 0 auto 8px;
}
.hamburger_menu_btn .bar:nth-child(3) {
    margin-bottom: 3px;
}
.hamburger_menu_btn .hamburger_menu_btn_text {
    color: #000;
    font-size: 13px;
    text-align: center;
    font-weight: bold;
}

@media ( max-width: 1399px ) {
    header {
        height: 100px;
        padding: 0;
    }
    .hamburger_menu_btn {

    }
    header nav.no_hamburger {
        display: none;
    }
    header nav.hamburger.active {
        opacity: 1;
        pointer-events: auto;
    }
    .hamburger_menu_btn {
        display: block;
    }
    .white_cover_hamburger.active {
        opacity: 1;
    }
    .hamburger_menu_close_btn.active {
        opacity: 1;

    }
}
@media ( max-width: 600px ) {
    .hamburger_menu_btn {
        width: 50px;
        height: 50px;
        padding-top: 8px;
        top: 10px;
        right: 10px;
    }
    .hamburger_menu_btn .hamburger_menu_btn_text {
        font-size: 11px;
    }
    header {
        height: 77px;
    }
}


/* remodelingセクションーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
section.remodeling {
    padding-bottom: 160px;
    padding-bottom: clamp(
      83px, 
      calc(83px + (100vw - 768px) * (77 / 672)), 
      160px
    );
}
.remodeling_top_img {

}
.pin_img {
    transition-duration: .4s;
}
.remodeling_top_img img {
    object-fit: cover;
    vertical-align: bottom;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* 最終的なマスクの色と濃さ */
    opacity: 0; /* 初期状態は透明 */
}
.main-text {
    position: absolute;
    top: 50%;
    left: 50%;
    color: white;
    opacity: 0;
    font-size: 35px;
    writing-mode: vertical-rl;
    transform: translate( -50%, -30% );
    height: 100%;
    text-align: center;
}

/* ーーーーーーーーーーーーーーーーーーーーーこっからdetailsーーーーーーーーーーーーーーーーーーーーー */
.remodeling_details {
    display: flex;
    text-align: center;
    color: white;
    box-shadow: 100px 0px 100px #000;
}
.remodeling_details_left {
    width: 50%;
    background-color: #393D46;
    container-type: inline-size;
}
.remodeling_details_left_wrapper {
    padding: 13.888cqw 5.556cqw;
}
.remodeling_details_left_wrapper {
    /* padding-top/bottom: 768px = 40px, 1440px = 100px (13.888cqw * 720px) 
      padding-left/right: 768px = 20px, 1440px = 40px (5.556cqw * 720px) 
    */
    padding: clamp(40px, calc(-28.571px + 8.929vw), 100px) clamp(20px, calc(-2.857px + 2.976vw), 40px);
    padding: clamp(40px, calc(-28.571px + 8.929vw), 100px) 0;
}
.remodeling_details_right {
    width: 50%;
    background-color: white;
}

.remodeling_details_right {
    background-image: url( ../img/remodeling_img.jpg );
    background-size: cover;
    background-position: center;
}
.remodeling_details_left h2 {
    display: flex;
    justify-content: center;
    margin: 0 auto 82px;
    margin: 0 auto 4.791vw;
    margin: 0 auto 9.582cqw;
    margin: 0 auto clamp(25px, calc(-25.286px + 6.548vw), 100px);
}
.remodeling_details_left h2 span {
    font-size: 5.278cqw;
    font-size: clamp(23px, calc(-0.571px + 2.679vw), 100px);
    font-size: clamp(23px, calc(-0.571px + 5.358cqw), 100px);
}
.remodeling_details_left h3 {
    margin-bottom: 6.012cqw;
    margin-bottom: clamp(16px, calc(-14.857px + 8.036cqw), 100px);

    font-size: 3.888cqw;
    font-size: clamp(18px, calc(6.571px + 2.976cqw), 100px);
}

.remodeling_details_left p {
    font-size: 1.111vw;
    font-size: clamp( 14px, 1.111vw, 50px );
    margin-bottom: 1.733vw;
    line-height: 2.917vw;

    font-size: 2.222cqw;
    font-size: clamp(14px, 2.222cqw, 50px);
    margin-bottom: 3.466cqw;
    line-height: 5.834cqw;

    /* font-family: "Noto Serif JP" */

    /* font-size: 768px = 12px, 1440px = 16px (1.111vw * 1440px) */
    font-size: clamp(12px, calc(7.429px + 1.19cqw), 100px);
    /* line-height: 768px = 22.39px, 1440px = 42px (2.917vw * 1440px) */
    line-height: clamp(22.39px, calc(-0.021px + 5.836cqw), 100px);
    /* margin-bottom: 768px = 1px, 1440px = 25px (1.733vw * 1440px) */
    margin-bottom: clamp(1px, calc(-26.429px + 7.142cqw), 100px);


}

@media ( max-width: 1000px ) {
    .remodeling_details {
        flex-wrap: wrap;
        /* padding: clamp(40px, calc(-28.571px + 17.858cqw), 100px) 0; */
        font-size: clamp(18px, calc(6.571px + 5.952vw), 100px);
    }
    .remodeling_details_left_wrapper {
        padding: 13.888vw 5.556vw;
    }
    .remodeling_details_left h2 {
        margin: 0 auto clamp(25px, calc(-25.286px + 6.548vw), 100px);
    }
    .remodeling_details_left h2 span {
        font-size: clamp(23px, calc(-0.571px + 5.358vw), 100px);
    }
    .remodeling_details_left h3 {
        margin-bottom: clamp(16px, calc(-14.857px + 8.036vw), 100px);
        font-size: clamp(18px, calc(6.571px + 2.976vw), 100px);
    }
    .remodeling_details_left p {
        font-size: clamp(12px, calc(7.429px + 1.19vw), 100px);
        line-height: clamp(22.39px, calc(-0.021px + 5.836vw), 100px);
        margin-bottom: clamp(1px, calc(-26.429px + 7.142vw), 100px);
    }
}

.remodeling_details_left p br.sp {
    display: none;
}
.remodeling_details_left p br.ssp {
    display: none;
}
.remodeling_details_left p br.pc {
    display: block;
}
@media ( max-width: 960px ) {
    .remodeling_details_left p br.pc {
        display: none;
    }
    .remodeling_details_left p br.sp {
        display: block;
    }
}
@media ( max-width: 768px ) {
    /* .remodeling_details_left_wrapper {
        padding: 40px 20px;
    }
    .remodeling_details_left h2 {
        margin: 0 auto 25px;
    }
    .remodeling_details_left h2 span {
        font-size: 20px;
    }
    .remodeling_details_left h3 {
        font-size: 18px;
    }
    .remodeling_details_left p {
        font-size: 12px;
        line-height: 22.39px;
        margin-bottom: 1px;
        letter-spacing: 0;
    } */
    section.remodeling {
        padding-bottom: clamp(
        71px, 
        calc(71px + (100vw - 375px) * (12 / 393)), 
        83px
      );
    }
    .remodeling_details_left p br.pc {
        display: none;
    }
    .remodeling_details_left p br.sp {
        display: block;
    }
}
@media (max-width: 767px) {
    .remodeling_details_left p br.sp {
        display: none;
    }
    .remodeling_details_left p br.ssp {
        display: none;
    }
    .remodeling_details_left p br.pc {
      display: block;
    }
}
@media ( max-width: 540px ) {
    .remodeling_details_left_wrapper {
        padding: 6.888cqw 5.556cqw;
    }
    .remodeling_details_left p br.pc {
      display: none;
    }
    .remodeling_details_left p br.sp {
        display: none;
    }
    .remodeling_details_left p br.ssp {
        display: block;
    }
}
@media ( max-width: 450px ) {
    section.remodeling {
        padding-bottom: 72px;
    }
    .remodeling_details_left_wrapper {
        padding: 10.388cqw 5.556cqw;
    }
    .remodeling_details_left {
        width: 100%;
    }
    .remodeling_details_left h2 {
        margin: 0 auto 23px;
    }
    .remodeling_details_left h2 span {
        font-size: 21px;
    }
    .remodeling_details_left h3 {
        font-size: 16px;
        margin-bottom: 16px;
    }
    .remodeling_details_left p {
        font-size: 13px;
        line-height: 20px;
        margin-bottom: 8px;
    }
    .remodeling_details_right {
        width: 100%;
    }
    .remodeling_details_left p br.sp {
        display: none;
    }
    .remodeling_details_left p br.ssp {
        display: block;
    }
}

/* ---------projects----------------------------------------------------------- */
.projects {
    background-color: #DEE3E9;
    padding: 80px 0;
    padding: clamp(60px, calc(60px + (80 - 60) * (100vw - 768px) / 672), 80px) 0 clamp(70px, calc(70px + (80 - 70) * (100vw - 768px) / 672), 80px);

    text-align: center;
    margin-bottom: 160px;
    margin-bottom: clamp(80px, calc(80px + (160 - 80) * (100vw - 768px) / 672), 160px);

    box-shadow: 100px 0px 100px #000;
    box-shadow: clamp(50px, calc(50px + (100 - 50) * (100vw - 768px) / 672), 100px) 0px clamp(50px, calc(50px + (100 - 50) * (100vw - 768px) / 672), 100px) #000;

}
.projects_top_text {
    margin: 0px 0;
    font-size: 41px;
    justify-content: center;
    margin-bottom: 40px;

    font-size: clamp(24px, calc(24px + (41 - 24) * (100vw - 768px) / 672), 41px);
    margin-bottom: clamp(12px, calc(12px + (40 - 12) * (100vw - 768px) / 672), 40px);
}
.projects_top_text.emphasis_design22 span {
    font-size: 2.569vw;
    font-size: clamp( 33px, 2.569vw, 500px );

    font-size: clamp(20px, -0.571px + 2.679vw, 100px);
    font-size: clamp(20px, calc(20px + (37 - 20) * (100vw - 768px) / 672), 37px);
}
@media ( max-width: 1000px ) {
    .projects_top_text.emphasis_design22 span {
        /* font-size:  5.278vw; */
    }
}
.projects h3 {
    font-size: 26px;
    margin-bottom: 74px;

    font-size: clamp(18px, calc(18px + (26 - 18) * (100vw - 768px) / 672), 26px);
    margin-bottom: clamp(50px, calc(50px + (74 - 50) * (100vw - 768px) / 672), 74px);
}
.projects ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    gap: 60px 40px;
    gap: clamp(51px, calc(51px + (60 - 51) * (100vw - 768px) / 672), 60px) clamp(34px, calc(34px + (40 - 34) * (100vw - 768px) / 672), 40px);

}
.projects ul li {
    width: 310px;
    width: clamp(297px, calc(297px + (310 - 297) * (100vw - 768px) / 672), 310px);

}
.projects ul li a {
    color: inherit;
}
.projects ul li img {
    /* width: 310px;
    height: 310px; */
}
.projects ul li img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1; 
    object-fit: cover; /* 念のため追加 */
}
.projects ul li h3 {
    font-size: 16px;
    margin-top: 7px;
    margin-bottom: 20px;

    margin-top: clamp(7px, calc(19px + (7 - 19) * (100vw - 768px) / 672), 19px);
    margin-bottom: clamp(5px, calc(5px + (20 - 5) * (100vw - 768px) / 672), 20px);
}
.projects ul li p {
    font-size: 13px;
}
/* @media ( max-width: 768px ) {
    .projects {
        padding: 60px 0 70px;
    }
    .projects_top_text.emphasis_design22 span {
        font-size: 20px;
    }
    .projects_top_text {
        margin-bottom: 12px;
    }
    .projects h3 {
        font-size: 18px;
        margin-bottom: 50px;
    }
    .projects ul {
        gap: 51px 34px;
    }
    .projects ul li img {
        width: 297px;
        height: 297px;
    }
    .projects ul li h3 {
        margin-top: 19px;
        margin-bottom: 5px;
    }
    .projects .view_more_btn {
        max-width: 191px;
        margin: 40px auto 0;
        height: 30px;
        line-height: 34px;
        font-size: 13px;
    }
} */



/* ーーーーーーーーーーーーーーーーーーーーーーーーabout_usーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.about_us {
    display: flex;
}
.about_us .about_us_left {
    width: 50%;
    background-color: var(--light_gray_bg);
    color: white;
    text-align: center;
    container-type: inline-size;
}
.about_us .about_us_left .about_us_left_wrapper {
    padding-top: 10.42vw;
    padding-top: 20.84cqw;
    padding-top: clamp(41px, calc(-83.568px + 16.2203vw), 150.048px);
    padding-top: clamp(41px, calc(-88.568px + 32.4406cqw), 150.048px);
}
.about_us .about_us_left h2 {
    font-size: 2.85vw;
    margin-bottom: 5.56vw;
    font-size: 5.7cqw;
    margin-bottom: 11.12cqw;
    margin-bottom: clamp(20.8128px, calc(-46.902px + 17.6342cqw), 80.064px);
}
.about_us .about_us_left .emphasis_design22 span {
    font-size: 5.278cqw;
}
.about_us .about_us_left h3 {
    font-size: 1.94vw;
    font-size: 3.88cqw;
    font-size: 3.88cqw;
    margin-bottom: 3.47vw;
    margin-bottom: 6.94cqw;

    font-size: clamp(18.1248px, calc(6.912px + 2.92cqw), 200px);
    margin-bottom: clamp(18.9696px, calc(-16.4563px + 9.2256cqw), 200px);
}
.about_us .about_us_left p {
    font-size: 1.11vw;
    line-height: 2.92vw;

    font-size: 2.22cqw;
    line-height: 5.84cqw;

    font-size: clamp(15px, calc(7.4057px + 1.1914cqw), 200px);
}
.about_us .about_us_right {
    width: 50%;
    background-image: url(../img/aboutous_img.jpg);
    background-size: cover;
    background-position: center;
}
.about_us .emphasis_design22 {
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
@media ( max-width: 1100px ) {
    .about_us .about_us_left .about_us_left_wrapper {
        padding-top: 48px;
     }
}
/* @media ( max-width: 1000px ) {
    .about_us {
        flex-wrap: wrap;
    }
    .about_us .about_us_left {
        width: 100%;
    }
    .about_us .about_us_right {
        width: 100%;
    }
    .about_us .about_us_left .about_us_left_wrapper {
        padding-top: clamp(0px, calc(-88.568px + 32.4406vw), 150.048px);
    }
    .about_us .about_us_left h2 {
        margin-bottom: clamp(20.8128px, calc(-46.902px + 17.6342vw), 80.064px);
    }
    .about_us .about_us_left .emphasis_design22 span {
        font-size: 5.278vw;
    }
    .about_us .about_us_left h3 {
        font-size: clamp(19px, calc(6.912px + 2.92vw), 200px);
        margin-bottom: clamp(19px, calc(-16.4563px + 9.2256vw), 200px);
    }
    .about_us .about_us_left p {
        line-height: 5.84vw;
        font-size: clamp(15px, calc(7.4057px + 1.1914vw), 200px);
    }
} */
@media ( max-width: 1000px ) {
    .about_us {
        flex-wrap: wrap;
    }
    .about_us .about_us_left {
        width: 100%;
    }
    .about_us .about_us_right {
        width: 100%;
    }
    .about_us .about_us_left .about_us_left_wrapper {
        padding-top: clamp(33.08425px, calc(-53.3672px + 20.3415vw), 150.048px);
    }
    .about_us .about_us_left h2 {
        margin-bottom: clamp(20.8128px, calc(-22.9816px + 10.3046vw), 80.064px);
    }
    .about_us .about_us_left .emphasis_design22 span {
        font-size: clamp(19.7925px, calc(-4.5896px + 5.7370vw), 52.78px);
    }
    .about_us .about_us_left h3 {
        font-size: clamp(19px, calc(6.352px + 2.976vw), 36.112px);
        margin-bottom: clamp(19px, calc(-43.9824px + 9.8782vw), 75.7997px);
    }
    .about_us .about_us_left p {
        line-height: clamp(21.9px, calc(-5.0783px + 6.3478vw), 58.4px);
        font-size: clamp(15px, calc(11.8072px + 0.7513vw), 19.3197px);
        font-size: clamp(14px, calc(.5952vw + 11.7143px), 200px);
    }
}
.about_us .about_us_left p br.sp {
    display: none;
}
@media ( max-width: 1100px ) {
    .about_us .about_us_left p br.pc {
        display: none;
    }
    .about_us .about_us_left p br.sp {
        display: block;
    }
}

/* @media ( max-width: 1000px ) {
.about_us .about_us_left .about_us_left_wrapper {
    padding-top: 10.42vw;
    padding-top: 20.84cqw;
    padding-top: clamp(41px, calc(-83.568px + 16.2203vw), 150.048px);
    padding-top: clamp(41px, calc(-88.568px + 32.4406vw), 150.048px);
}
.about_us .about_us_left h2 {
    font-size: 2.85vw;
    margin-bottom: 5.56vw;
    font-size: 5.7vw;
    margin-bottom: clamp(20.8128px, calc(-46.902px + 17.6342vw), 80.064px);
}
.about_us .about_us_left .emphasis_design22 span {
    font-size: 5.278vw;
}


} */

/* @media ( max-width: 1000px ) {
    .about_us .about_us_left .about_us_left_wrapper {
        padding-top: 90px;
    }
    .about_us .about_us_left h2 {
        margin-bottom: 48px;
    }
    .about_us .about_us_left h3 {
        font-size: 51px;
        margin-bottom: 46px;
    }
    .about_us .about_us_left p {
        font-size: 35px;
        line-height: 58px;
    }
} */
/* @media ( max-width: 375px ) {
    .about_us .about_us_left .about_us_left_wrapper {
    padding-top: 33.08425px;
    }
    .about_us .about_us_left h2 {
    margin-bottom: 20.8128px;
    }
    .about_us .about_us_left .emphasis_design22 span {
    font-size: 19.7925px;
    }
    .about_us .about_us_left h3 {
    font-size: 19px;
    margin-bottom: 19px;
    }
    .about_us .about_us_left p {
    line-height: 21.9px;
    font-size: 13px;
    }
} */



/* ーーーーーーーーーーーーーーーーーーーーーーーーflexible_plansーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.flexible_plans {
    display: flex;
    margin-bottom: clamp(83px, calc(83px + (100vw - 768px) * (77 / 672)), 160px);
    box-shadow: 40px 0px 40px #000;
}
.flexible_plans .flexible_plans_left {
    width: 50%;
    background-color: var(--dark_gray_bg); /* 画像に合わせて濃いグレーなどに変更推奨 */
    color: white;
    text-align: center;
    container-type: inline-size;
}
.flexible_plans .flexible_plans_left .flexible_plans_left_wrapper {
    padding-top: 10.42vw;
    padding-top: 20.84cqw;
    padding-top: clamp(7.7vw, calc(-43.61px + 13.38vw), 10.42vw);
    padding-top: clamp(15.4cqw, calc(-44.76px + 27.06cqw), 20.84cqw);
}
.flexible_plans .flexible_plans_left h2 {
    font-size: 2.85vw;
    margin-bottom: 4.56vw;
    margin-bottom: 9.12cqw;
    /* font-size: 1.94vw; */
    display: grid;
    grid-template-columns: repeat(8, 1.32em);
    justify-content: center;
    gap: 1px;

    margin-bottom: clamp(6.0cqw, calc(-25.65px + 12.68cqw), 9.12cqw);
}
.flexible_plans .flexible_plans_left h2 span:nth-child(n + 9) {
    grid-row-start: 2;
}
.flexible_plans .flexible_plans_left .emphasis_design22 span {
    font-size: 5.278cqw;
}
.flexible_plans .flexible_plans_left h3 {
    font-size: 1.94vw;
    font-size: 3.88cqw;
    margin-bottom: 3.47vw;
    margin-bottom: 6.12cqw;

    font-size: clamp(3.88cqw, calc(6.65px + 2.96cqw), 4.6875cqw);
}
.flexible_plans .flexible_plans_left p {
    font-size: 1.11vw;
    line-height: 2.92vw;
    font-size: 2.22cqw;
    line-height: 5.84cqw;

    font-size: clamp(2.22cqw, calc(7.45px + 0.59vw), 3.125cqw);
    font-size: clamp(14px, calc(7.45px + 1.18vw), 16px);

    font-size: clamp(14px, calc(.5952cqw + 11.7143px), 200px);
}
.flexible_plans .flexible_plans_right {
    width: 50%;
    /* ↓ 新しい画像ファイルへのパスを指定してください */
    background-image: url(../img/flexibleplans_img.jpg);
    background-size: cover;
    background-position: center;
}

.emphasis_design22 {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
}
.emphasis_design22 .break {
    display: block;
    width: 100%;
}
.flexible_plans_h2_wrapper {
    margin: 0 auto;
}
.flexible_plans .flexible_plans_left p br.sp {
    display: none;
}
@media ( max-width: 1200px ) {
    .flexible_plans .flexible_plans_left .flexible_plans_left_wrapper {
        padding-top: clamp(5.4cqw, calc(-74.76px + 27.06cqw), 20.84cqw);
    }
    /* .flexible_plans .flexible_plans_left .flexible_plans_left_wrapper {
        padding-top: 15.4cqw;
    }
    .flexible_plans .flexible_plans_left h2 {
        margin-bottom: 3.0vw;
    }
    .flexible_plans .flexible_plans_left h3 {
        font-size: 18px;
    }
    .flexible_plans .flexible_plans_left p {
        font-size: 12px;
    } */
    .flexible_plans .flexible_plans_left p br.pc {
        display: none;
    }
    .flexible_plans .flexible_plans_left p br.sp {
        display: block;
    }
}
@media ( max-width: 1000px ) {
    .flexible_plans .flexible_plans_left .flexible_plans_left_wrapper {
        padding-top: clamp(40px, calc(56px + 6.4vw), 120px);
    }
    .flexible_plans .flexible_plans_left h2 {
        display: grid;
        grid-template-columns: repeat(8, 1.32em);
        justify-content: center;
        gap: 1px;

        margin-bottom: clamp(6.0cqw, calc(-25.65px + 12.68vw), 9.12cqw);
    }
    .flexible_plans .flexible_plans_left .emphasis_design22 span {
        font-size: 5.278vw;
    }
    .flexible_plans .flexible_plans_left h3 {
        margin-bottom: 6.12vw;
        font-size: clamp(3.88vw, calc(6.65px + 2.96vw), 4.6875vw);
    }
    .flexible_plans .flexible_plans_left p {
        line-height: 5.84vw;
        font-size: clamp(14px, calc(.5952vw + 11.7143px), 200px);
    }
}
@media ( max-width: 768px ) {
    .flexible_plans {
        margin-bottom: clamp(
            71px, 
            calc(71px + (100vw - 375px) * (12 / 393)), 
            83px
        );
    }
}
@media ( max-width: 1000px ) {
    .flexible_plans {
        flex-wrap: wrap;
    }
    .flexible_plans .flexible_plans_left {
        width: 100%;
        order: -1;
    }
    .flexible_plans .flexible_plans_right {
        width: 100%;
    }
}

/* ーーーーーーーーーーーーーーーーーーwork_flowーーーーーーーーーーーーーーーーーー */
section.work_flow {
    background-image: url( ../img/workflow_img.jpg );
    text-align: center;
    padding-top: 137px;
    padding-bottom: 140px;
    position: relative;

    padding-top: clamp(51px, calc(-47.29px + 12.80vw), 137px);
    padding-bottom: clamp(42px, calc(-70.00px + 14.58vw), 140px);

    box-shadow: 40px 0px 40px #000;
}
.work_flow ul {
    display: flex;
}
.work_flow h2 {
    margin: 0 auto;
    margin-bottom: 80px;
    justify-content: center;

    margin-bottom: clamp(25px, calc(-37.86px + 8.18vw), 80px);
}
.work_flow h2.emphasis_design22 span {
    font-size: clamp( 34px, 2.728cqw, 70px );
}
.work_flow h3 {
    margin-bottom: 30px;
    font-size: 28px;
    color: white;

    /* 1440px: 28px / 768px: 18px */
    font-size: clamp(18px, calc(6.57px + 1.49vw), 28px);
    
    /* 1440px: 30px / 768px: 40px (768pxの方が値が大きいためMIN/MAXが逆転) */
    margin-bottom: clamp(30px, calc(51.43px - 1.49vw), 40px);
}
.work_flow ul {
    max-width: 1030px;
    margin: 0 auto;
    text-align: start;
    justify-content: space-around;
    max-width: clamp(615px, calc(140.71px + 61.76vw), 1030px);
}
.work_flow ul li {
    writing-mode: vertical-rl;
    background-color: #E7EEF4;
    padding: 34px 24px;
    font-size: 20px;

    font-size: clamp(15px, calc(9.29px + 0.74vw), 20px);
    
    padding: clamp(30px, calc(25.43px + 0.60vw), 34px) 
             clamp(16px, calc(6.86px + 1.19vw), 24px);
}
.work_flow ul li picture {
    display: flex;
    justify-content: center;
    align-items: center;
}
.work_flow ul li:nth-child( 2n ) {
    background-color: transparent;
    align-self: center;
    padding: 0;
    width: 10px;
    justify-self: center;
    display: flex;
    justify-content: center;
}
.work_flow_mask {

}
.work_flow_mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}
.z_index_up_avoid_mask {
    position: relative;
}
img[src$="arrow_white_below.png"] {
    margin: 20px 0;
}
@media ( max-width: 1030px ) {
    .work_flow ul {
        max-width: calc( 100% - 120px );
    }
}

@media ( max-width: 768px ) {
    section.work_flow {
        padding-top: 51px;
        padding-bottom: 42px;
    }
    .work_flow h2 {
        margin-bottom: 25px;
    }
    .work_flow h3 {
        font-size: 18px;
        margin-bottom: 40px;
    }
    .work_flow ul {
        max-width: calc(100% - 153px);
    }
    .work_flow ul li {
        font-size: 15px;
        padding: 30px 16px;
        height: 329px;
    }
}
@media ( max-width: 767px ) {
    .work_flow ul {
        display: block;
        max-width: 268px;
    }
    .work_flow ul li {
        writing-mode: unset;
        text-align: center;
        padding: 8px 0px;
        height: unset;
    }
    .work_flow ul li:nth-child( 2n ) {
        width: 100%;
        height: 20px;
    }
    img[src$="arrow_white_below.png"] {
        width: 26px;
    }
    .work_flow h3 {
        font-size: clamp( 16px, 3vw, 40px );
        margin-bottom: 27px;
    }
    .work_flow h2.emphasis_design22 span {
        font-size: clamp( 28px, 2.728cqw, 70px );
    }
}
/* ーーーーーーーーーーーーーーーーーour_commitmentーーーーーーーーーーーーーーーーーーー */

section.our_commitment {
    padding: 160px 0 300px;
    padding: 11.111vw 0 20.833vw;
    text-align: center;
    color: white;
}
.our_commitment h2 {
    justify-content: center;
    margin-bottom: 120px;
    display: flex;
    margin-bottom: clamp(26px, calc(-249.51px + 35.88vw), 120px);
}

.our_commitment .our_commitment_box {
    display: flex;
    margin: 0 auto;
    margin-bottom: 56px;
    margin-bottom: clamp(35px, calc(-26.55px + 8.016vw), 56px);
    /* max-width: clamp(640px, calc(-503.11px + 148.85vw), 1030px); */
    box-shadow: 0px 15px 25px -5px #000000b3!important;
}
.our_commitment h2.emphasis_design22 span {
    font-size: 37px;
    font-size: 2.569vw;
    font-size: clamp(34px, 2.728cqw, 70px);
}
.our_commitment .our_commitment_box_left {
    width: 50%;
    /* padding: 45px 0 50px; */
    background-color: var(--dark_gray_bg);
    container-type: inline-size;
}
.our_commitment_box_left_wrapper {
    padding: 31.068cqw 0 58.252cqw;
    padding: 8.738cqw 0 0;
    padding-top: clamp(20px, calc(-53.28px + 9.543vw), 45px);
}
.n2 .our_commitment_box_left_wrapper {
    padding-top: clamp(20px, calc(-53.28px + 9.543vw), 91px);
}
.our_commitment .our_commitment_box_left h3 {
    margin-bottom: 37px;
    margin-bottom: 7.184cqw;
    justify-content: center;
    margin-bottom: clamp(19.9px, calc(-30.22px + 6.527vw), 37px);
}
.our_commitment .our_commitment_box_left h3 span {
    font-size: 22px;
    font-size: 4.272cqw;
}
.our_commitment .our_commitment_box_left h4 {
    font-size: 23px;
    margin-bottom: 12px;
    font-size: 4.466cqw;
    margin-bottom: 2.33cqw;
    font-size: clamp(16px, calc(-4.52px + 2.672vw), 23px);
    margin-bottom: clamp(5.1px, calc(-15.12px + 2.634vw), 12px);
}
.our_commitment .our_commitment_box_left h4 span {
    border-bottom: 1px solid white;
}
.our_commitment .our_commitment_box_left p {
    font-size: 14px;
    line-height: 38px;
    margin-bottom: 28px;

    font-size: 2.718cqw;
    line-height: 7.379cqw;
    margin-bottom: 5.437cqw;

    font-size: clamp(12px, calc(6.14px + 0.763vw), 14px);
    
    line-height: clamp(21.54px, calc(-26.71px + 6.284vw), 38px);
    
    margin-bottom: clamp(17.04px, calc(-15.08px + 4.183vw), 28px);
}
.our_commitment .our_commitment_box_right {
    width: 50%;
    background-image: url( ../img/ourcommitment_plan1_img.jpg );
}
/* n2 */
.our_commitment .our_commitment_box.n2 .our_commitment_box_right {
    width: 50%;
    background-image: url( ../img/ourcommitment_plan2_img.jpg );
}
.our_commitment .n2 .our_commitment_box_left h4 {
    margin-bottom: 31px;
    margin-bottom: 6.019cqw;
}
.our_commitment .n2 .our_commitment_box_left {
    background-color: var(--light_gray_bg);
}
.our_commitment .our_commitment_box.n2 {
    margin-bottom: 0;
    box-shadow: 40px 0px 40px #000;
}
.our_commitment .our_commitment_box_left p br.sp {
    display: none;
}
.our_commitment .n2 .our_commitment_box_left h4 br.tablet {
    display: none;
}
@media ( max-width: 1030px ) {
    .our_commitment .our_commitment_box_left p {
        /* line-height: clamp(27px, calc(7.3333vw - 37.5333px), 38px); */
    }
}
@media ( max-width: 1000px ) {
    .our_commitment h2 {
        display: grid;
        grid-template-columns: repeat( 10, 1.32em );
    }
    .our_commitment h2.emphasis_design22 span:nth-child( n + 4 ) {
        grid-row-start: 2;
    }

    .our_commitment .our_commitment_box {
        margin-bottom: 0;
    }
    .n2 .our_commitment_box_left_wrapper {
        padding-top: clamp(20px, calc(6.72px + 9.543vw), 149px);
    }
    .our_commitment_box_left_wrapper {
        padding-top: clamp(20px, calc(-30.28px + 9.543vw), 83px);
    }
    
}
@media ( max-width: 830px ) {
    .our_commitment .our_commitment_box_left p br.pc {
        display: none;
    }
    .our_commitment .our_commitment_box_left p br.sp {
        display: block;
    }
    .our_commitment .n2 .our_commitment_box_left h4 br.tablet {
        display: block;
    }
    .our_commitment_box_left_wrapper {
        padding-top: clamp(20px, calc(-34.28px + 9.543vw), 45px);
    }
    .n2 .our_commitment_box_left_wrapper {
        padding-top: clamp(20px, calc(-18.28px + 9.543vw), 125px);
    }



}
/* @media ( max-width: 768px ) {
    .our_commitment h2 {
        margin-bottom: 26px;
    }
    .our_commitment .our_commitment_box {
        max-width: 640px;
        margin: 0 auto 35px;
    }
    .our_commitment_box_left_wrapper {
        padding-top: 20px;
    }
    .our_commitment .our_commitment_box_left h3 {
        margin-bottom: 5.184cqw;
    }
    .our_commitment .our_commitment_box_left h4 {
        font-size: 16px;
        margin-bottom: 1.33cqw;
    }
    .our_commitment .our_commitment_box_left p {
        font-size: 12px;
        line-height: 21.54px;
        margin-bottom: 4.437cqw;
    }
} */
@media ( max-width: 767px ) {

    .our_commitment .our_commitment_box {
        flex-wrap: wrap;
    }
    .our_commitment .our_commitment_box_left {
        width: 100%;
    }
    .our_commitment .our_commitment_box .our_commitment_box_right {
        width: 100%;
    }
    .our_commitment .our_commitment_box.n2 .our_commitment_box_right {
        width: 100%;
        order: 1;
    }
    .our_commitment .our_commitment_box {
        margin-bottom: 0;
    }
    section.our_commitment {
        padding: 19.111vw 0 20.833vw;
    }
    .our_commitment h2 {
        margin-bottom: 38px;
    }
    .n2 .our_commitment_box_left_wrapper {
                padding-top: clamp(20px, calc(31.72px + 9.543vw), 130px);
    }
}
@media ( max-width: 767px ) {
    .our_commitment_box_left_wrapper {
        /* padding-top: 58px; */
    }
    .our_commitment .our_commitment_box_left h3 {
        margin-bottom: 49px;
    }
    .our_commitment .our_commitment_box_left h4 {
        font-size: 37px;
        margin-bottom: 24px;
    }
    .our_commitment .our_commitment_box_left p {
        font-size: 27px;
        line-height: 1.6;
        margin-bottom: 53px;
    }
}
/* @media ( max-width: 375px ) {
    .our_commitment_box_left_wrapper {
        padding-top: 28px;
    }
    .our_commitment .our_commitment_box_left h3 {
        margin-bottom: 25px;
    }
    .our_commitment .our_commitment_box_left h4 {
        
        margin-bottom: 14px;
    }
    .our_commitment .our_commitment_box_left p {
        font-size: 13px;
        margin-bottom: 26px;
    }
    .our_commitment .n2 .our_commitment_box_left h4 {
        margin-bottom: clamp(14px, calc(14px + 17 * (100cqw - 375px) / 393), 200px);
        margin-bottom: clamp(14px, calc(14px + 17 * (100cqw - 375px) / 140), 31px);
    }
} */
@media ( max-width: 767px ) {
  .our_commitment_box_left_wrapper {
    padding-top: clamp(28px, calc(28px + 30 * (100vw - 375px) / 392), 58px);
  }
  .our_commitment .our_commitment_box_left h3 {
    margin-bottom: clamp(25px, calc(25px + 24 * (100vw - 375px) / 392), 49px);
  }
  .our_commitment .our_commitment_box_left h4 {
    font-size: clamp(16px, calc(16px + 21 * (100vw - 375px) / 392), 37px);
    margin-bottom: clamp(14px, calc(14px + 10 * (100vw - 375px) / 392), 24px);
  }
  .our_commitment .our_commitment_box_left p {
    font-size: clamp(13px, calc(13px + 14 * (100vw - 375px) / 392), 27px);
    line-height: 1.6;
    margin-bottom: clamp(26px, calc(26px + 27 * (100vw - 375px) / 392), 53px);
  }

}



/* ーーーーーーーーーーーーーーーーーcampaignーーーーーーーーーーーーーーーーーーー */
.campaign {
    background-color: var( --white_gray_bg );
    padding: 160px 0 160px;
    position: relative;
    z-index: 2;
    padding-top: clamp(51px, calc(-73.57px + 16.22vw), 160px);
    padding: 160px 0 clamp(20px, calc(20.8333vw - 140px), 160px);

    box-shadow: 40px 0px 40px #000;
}
.campaign h2 {
    justify-content: center;
    margin-bottom: 120px;

    margin-bottom: clamp(53px, calc(-23.57px + 9.97vw), 120px);
}
.campaign .emphasis_design22 span {
    font-size: 37px;
}
.campaign_wrapper {
    margin: 0 auto;
    max-width: 795px;
    max-width: clamp(610px, calc(27.53vw + 398.57px), 795px);
}
.campaign .view_more_btn {
    margin: 39px auto 0;
    margin-top: clamp(0px, calc(-44.57px + 5.80vw), 39px);
}
.btn_to_form {
    max-width: 500px;
    margin: 0 auto;
    text-decoration: underline;
    text-align: center;
    font-size: 20px;
}
.banner_sec {
    max-width: 793px;
    margin: 0 auto;
    margin-bottom: 160px;
    margin-bottom: clamp(60px, calc(-54.29px + 14.88vw), 160px);
}
.banner_sec img {
    margin-bottom: 30px;
    margin-bottom: clamp(24px, calc(17.14px + 0.89vw), 30px);
}
.banner_sec p {
    margin-bottom: 30px;
}
.btn_to_form a {
    display: block;
    background-color: white;
    padding: 10px 20px;
    font-size: clamp(16px, calc(0.595vw + 11.43px), 20px);
}
.hide_text {
    height: 0;
    overflow: hidden;
    transition-duration: 0.4s;
    margin-bottom: 40px;
}
@media ( max-width: 768px ) {
    .campaign {
        padding-top: 51px;
    }
    .banner_sec img {
        margin-bottom: 0;
    }
    
    .campaign_wrapper {
        padding: 0 16px;
    }
    .hide_text {
        font-size: 15px;
    }
    .banner_sec p {
        margin-top: 10px;
    }
    .btn_to_form {
        max-width: 495px;
    }
}

@media ( max-width: 600px ) {
    #inquiry a {
        font-size: 13px;
    }
}

@media ( max-width: 375px ) {
    .campaign h2 {
        margin-bottom: 43px;
    }
    .hide_text {
        font-size: 15px;
    }
    .view_more_btn {
        max-width: 228px;
        height: 35px;
        line-height: 35px;
        font-size: 15px;
    }
    .btn_to_form a {
        font-size: 15px;
    }
}

/* ーーーーーーーーーーーーーーーーーbottom_kinkーーーーーーーーーーーーーーーーーーー */
.bottom_kink {
    padding: 100px 0 100px;
    padding-top: clamp(81px, calc(2.827vw + 59.29px), 100px);
    padding-bottom: clamp(67px, calc(4.911vw + 29.29px), 100px);
    padding: clamp(81px, calc(2.827vw + 59.29px), 100px)
     clamp(67px, calc(4.911vw + 29.29px), 100px);
}
.bottom_kink .btn_to_form {
    text-decoration-thickness: 2px;

    max-width: clamp(365px, calc(20.09vw + 210.71px), 500px);
}
.bottom_kink .btn_to_home {
    background-color: black;
    color: white;
    max-width: 500px;
    text-align: center;
    font-size: 20px;
    margin: 0px auto;
    margin-top: 60px;
    transition-duration: .3s;
    box-sizing: content-box;

    max-width: clamp(365px, calc(20.09vw + 210.71px), 500px);
    font-size: clamp(16px, calc(0.595vw + 11.43px), 20px);
    margin-top: clamp(54px, calc(0.893vw + 47.14px), 60px);
}
.bottom_kink .btn_to_home a {
    display: block;
    padding: 10px 0px;
}
.bottom_kink .btn_to_home:hover {
    background-color: white;
    color: #000;
    outline: 1px solid #000;
}

.text-progress {
    position: relative;
    font-size: 20px;
    background-color: var( --blue-btn );
    overflow: hidden;

    font-size: clamp(16px, calc(0.595vw + 11.43px), 20px);
}

.text-progress::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    /* width: 100%; */
    /* height: 100px; */
    /* line-height: 100px; */
    color: #1a1e24;
    width: 100%;
    padding: 10px 0px;
    transition: clip-path .3s;
    animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
    clip-path: inset( 0px 100% 0px 0px );
    color: white;
    z-index: 1;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    font-size: 13px;
}
.text-progress::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-color: var( --blue-btn );
    transition: clip-path .3s;
    
    animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
    clip-path: inset( 0px 100% 0px 0px );
    z-index: 1;
    height: 110%;
    width: 103%;
    transform: translateY(-4px) ;
}

.text-progress:hover::before {
    clip-path: inset( 0px 0px 0px 0px );
}
.text-progress:hover::after {
    clip-path: inset( 0px 0px 0px 0px );
}

.remodeling .pin-spacer {
    /* background: url( ../img/concept_backimg.jpg ); */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
/* @media ( max-width: 768px ) {
    section.bottom_kink {
        padding: 81px 0 67px;
    }
    .text-progress {
        font-size: 16px;
    }
    .bottom_kink .btn_to_home {
        max-width: 365px;
        font-size: 16px;
        margin-top: 54px;
    }
}
@media ( max-width: 375px ) {
    .bottom_kink .btn_to_form {
        max-width: 307px;
        letter-spacing: -1px;
    }
    .bottom_kink .btn_to_home {
        max-width: 307px;
        letter-spacing: -1px;
        margin-top: 38px;
    }
} */




/* 768px以下のスクリーンサイズに適用 */
@media ( max-width: 768px ) {
  section.bottom_kink {
        /* この値は 768px と 375px で共通のため、そのままです */
    padding: 81px 0 67px;
  }
  .text-progress {
        /* この値は 768px と 375px で共通のため、そのままです */
    font-size: 16px;
  }

  .bottom_kink .btn_to_form {
    /* [補完] 768pxで365px、375pxで307pxに (768pxの値は推測) */
    max-width: clamp(307px, calc(307px + 58 * (100vw - 375px) / 393), 365px);
        
    /* [補完] 768pxで0px、375pxで-1pxに (768pxの値は推測) */
    letter-spacing: clamp(-1px, calc(-1px + 1 * (100vw - 375px) / 393), 0px);
    letter-spacing: -1px;
  }

  .bottom_kink .btn_to_home {
    /* [補完] 768pxで365px、375pxで307pxに */
    max-width: clamp(307px, calc(307px + 58 * (100vw - 375px) / 393), 365px);
        
        /* この値は共通のため、そのままです */
    font-size: 16px;
        
    /* [補完] 768pxで54px、375pxで38pxに */
    margin-top: clamp(38px, calc(38px + 16 * (100vw - 375px) / 393), 54px);

    /* [補完] 768pxで0px、375pxで-1pxに (768pxの値は推測) */
    letter-spacing: clamp(-1px, calc(-1px + 1 * (100vw - 375px) / 393), 0px);
  }
}