@charset "UTF-8";
/*スマホ用
----------------------------------*/
/*@media only screen and (max-width: 1035px) {
  .FEATURE-box .text {width: 100%;}
.FEATURE-box .right {width: 100%;}
.FEATURE-box .left {width: 100%;}  
}*/
@media (min-width: 1400px) {
    /* グリッド全体を中央揃えで最大1400pxに固定 */
    .project-grid-container { /* project-gridの親要素を想定 */
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }
}
@media only screen and (max-width: 1000px) {

header .head {background: #fff;}
header .read {font-size: 20px;}
header .contents {display: none;}
header .sp-logo-box {display: block;}
header .sp-logo-box h1 {width: 100%; text-align: center; padding: 40px 0; background: #2f373a;}
header .slide-area {padding: 0; background-size: 310%; height: 100vh; animation: none;}
header .slide-area .read {top: 175px;}
.scroll {bottom: 15%;}
.scroll img {width:35px;}
.contents ul.NEWS-area li span {margin-bottom: 15px; display: block;}
.contents {width: 90%; margin:0 5%;}
br.sp-br {display: block;}
.sp-zone {
    display: none;
}
.pc-zone {        
    display: block;
}

header h1.sp-index-logo {width: 100%; position: absolute; float: none; z-index: 999; text-align: center; padding: 100px 0;}
header .sp-navi {display: block;}






/*btn-navi*/
.Btn-navi {padding: 10px 5px; right: 10px; position: fixed; top: 28px; width: 40px; display:block; line-height:1em; z-index:9999; transition: .3s;}
.Btn-navi .name {font-weight: bold; position: relative; bottom: -25px; vertical-align:middle; text-align:center; color:#ffffff; font-size:7.3px; line-height: 1em; }
.Btn-navi .menuBtn {display: inline-block; position: relative; width: 40px; height:9px;}
.menu-icon {display: block; position: absolute; top: 20%; left: 50%; width: 30px; height: 2px; margin: -1px 0 0 -12px; background: #000000; transition: .2s;}
.menu-icon:before,.menu-icon:after {display: block; content: ""; position: absolute; top: 50%; left: 0; width: 30px; height: 2px; background: #000000; transition: .3s;}
.menu-icon:before {margin-top: -8px;}
.menu-icon:after {margin-top: 6px;}
.menuBtn:hover .menu-icon:before {margin-top: -10px;}
.menuBtn:hover .menu-icon:after {margin-top: 8px;}
.Btn-navi.close .name { color:#000000; overflow: hidden; left: 0px; width: 100%; font-size: 7.3px; line-height: 10px; text-align: center; font-weight: bold; height: 8px;}
.Btn-navi.close .name:before {display: block; content: 'CLOSE'; overflow: hidden; margin-left: 5px; }
.Btn-navi.close .menu-icon:before,.Btn-navi.close .menu-icon:after {background: #000000;}
.Btn-navi.close .menuBtn .menu-icon {background: transparent;}
.Btn-navi.close .menuBtn .menu-icon:before, .Btn-navi.close .menuBtn .menu-icon:after {margin-top: 0;}
.Btn-navi.close .menuBtn .menu-icon:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.Btn-navi.close .menuBtn .menu-icon:after { -webkit-transform: rotate(-135deg); transform: rotate(-135deg);}
#mainhead .Btn-navi{ position: absolute; left:5px; top:5px; }
#mainhead .Btn-navi.close { opacity: 0; display: none;}
#fixBtn-navi {position: fixed;  width: auto; bottom: 20px; right:15px;}
#fixBtn-navi.Btn-navi .menuBtn { display: block; background-color:#333; border-radius: 10px; padding:10px 0px 0px;}
#fixBtn-navi.Btn-navi .menuBtn .menu-icon {margin-top: -6px;}
#fixBtn-navi .menu-icon,#fixBtn-navi .menu-icon:before,#fixBtn-navi .menu-icon:after {background-color: #ffffff;}
#fixBtn-navi .menu-icon:before{margin-top: -7px;}
#fixBtn-navi .menu-icon:after {margin-top: 5px;}
#fixBtn-navi.close .menu-icon:before,#fixBtn-navi.close .menu-icon:after {margin-top: 0;}
#fixBtn-navi.close .menu-icon {background: transparent;}
#fixBtn-navi .name { color: #ffffff; display: block; position: relative; left:0px; bottom: -17px;}
#fixBtn-navi .name:before { display: inline; content: 'MENU';}
#fixBtn-navi.close .name:before { display: inline; content: 'CLOSE';}
#fixBtn-navi.close .name { color: #ffffff;}
#cavor.Btn-navi {width: 100%; height: 100%; position: fixed; top:0px; left: -100%; transition:0s;  z-index: 999;}
#cavor.Btn-navi .menuBtn {display:block; width: 100%; height: 100%; background:rgba(255,255,255,0.6); }
#cavor.close { left: 0px; }
.navi {
    background-color: #fff; /*メニュー背景色*/
    box-sizing: border-box;
    height: 100%;
    padding: 10px 40px; /*メニュー内部上下左右余白*/
    position: fixed;
    left: -70%; /*メニュー横幅①と合わせる*/
    top: 0;
    transition: .2s; /*0.3s は変化するのにかかる時間*/
    width: 70%; /*メニュー横幅①*/
    z-index: 1000;
}
.Btn-navi:hover + .navi-background {
    opacity: 0.5; /*黒背景部分透過度*/
    z-index: 999;
}
/*.navi-background {width: 100%; height: 100%; position: fixed; top: 0px; left: 0%; transition: 0s; z-index: 999;}*/
.navi-background a.background-btn{display: block; width: 100%; height: 100%; background: rgba(255,255,255,0.6);}
.navi.open { left: 0; }
.navi-background {z-index: 999; display: none; position: fixed; width: 100%; height: 100%; top: 0; left:0; }
.navi-background.open {display: block; background: rgba(255,255,255,0.6); }
.navi.open {padding-bottom: 10px; padding-top: 30px; text-align: center;}
.navi.open ul li {font-size: clamp(0.7rem, calc(0.7rem + 1.733vw), 2.0rem); padding-top: 50px; font-weight: bold;}

.Btn-navi_first {padding: 5px; background: #816a29; width: 40px; display:none; line-height:1em; z-index:9999; transition: .3s;}
.Btn-navi_first .name { vertical-align:middle; text-align:center; color:#ffffff; font-size:7.3px; line-height: 1em; }
.Btn-navi_first .menuBtn {display: inline-block; position: relative; width: 40px; height:30px;}
/*footer .navi ul {display: block; padding: 30px 0px;}*/
footer .navi ul {
    font-size: 12px;
    height: 280px;
    overflow: auto;
    /* background-color: #FFF; */
    padding: 10px 10px;
    margin-bottom: 15px;
    /* border: 1px solid #CCC; */
    display: block;
    padding: 30px 0px;
}




.navi .insta {
    text-align: center;
    margin: auto auto;
    width: 13%;
    padding-top: 50px;
}
.navi .insta .arch-header__social-icon02 {
    width: 100%;
    height: auto;
}










}


@media only screen and (max-width: 1280px) {
    .flow-left h3 {
        width: 210px;
    }
}
@media only screen and (max-width: 1180px) {
    .cta-btn {
        width: 16.14285714vw;
    }
}
@media only screen and (max-width: 1080px) {
    .topcontent-section {
        width: 90%;
    }
    .cta-btn {
        padding: 5px 30px 5px 15px;
        font-size: 1.4rem;
    }
}
@media only screen and (max-width: 980px) {
    .cta-btn {
        padding: 5px 30px 5px 15px;
        font-size: 1.4rem;
        width: 19.14285714vw;
    }
    .cta-btn02 {
        padding: 5px 30px 5px 15px;
        font-size: 1.4rem;
        width: 19.14285714vw;
    }
    .klasic-img {
        padding: 20px 0 20px 10px;
    }
}
@media only screen and (max-width: 980px) {
    .cta-btn {
        width: 22.14285714vw;
    }
}
@media screen and (max-width: 750px) {

    /* 1. .p-big-font-sp: 750pxで30pxに正確に到達 */
    .p-big-font-sp {
        font-size: clamp(0.7rem, calc(0.7rem + 3.067vw), 3.0rem);
    }
    /* 2. .p-middle-font-sp: 750pxで20pxに正確に到達 (以前の修正) */
    .p-middle-font-sp {
        font-size: clamp(0.7rem, calc(0.7rem + 1.733vw), 2.0rem);
    }

    /* 3. .p-small-font-sp: 750pxで18pxに正確に到達 */
    .p-small-font-sp {
        font-size: clamp(0.6rem, calc(0.6rem + 1.6vw), 1.8rem);
    }
    .p-small-font-sp-b {
        font-size: clamp(0.6rem, calc(0.6rem + 1.6vw), 1.8rem);
    }
    .p-middle-font-sp-cta {
        font-size: clamp(0.95rem, calc(0.95rem + 0.453vw), 2.0rem);
    }
    .p-fee-mid-font-sp {
        font-size: clamp(0.1rem, calc(0.1rem + 2.067vw), 1.6rem);
        line-height: 2.1875;
    }
    .p-fee-big-font-sp {
        font-size: clamp(0.1rem, calc(0.1rem + 3.2vw), 2.5rem);
    }
    .wp-block-heading {
        font-size: clamp(1.7rem, calc(1.7rem + 1.733vw), 2.0rem);
    }
    .sp-zone {
        display: block;
    }
    .pc-zone {
        display: none;
    }
    .about-text {
        line-height: 2;
    }
    .about-text p {
        white-space: nowrap;
    }
    .visual-text .title-about {
        padding-bottom: 25px;
    }
    .visual-text p {
        padding-left: 40px;
    }
    .visual-inner {
        padding: 6vh 40px;
    }
    .visual-section {
        padding-top: 30px;
    }
    .visual-full-image {
        min-height: 1000px;
        max-height: 2000px;
        object-position: center -54px;
    }
    .about-content {
        display: block;
        padding-top: 150px;
        width: 90%;
    }
    .about-ttete {
        display: flex;
        gap: 25px;
        align-items: stretch;
        padding-bottom: 50px;
    }
    .about-ttete > div {
        display: flex;
        flex-direction: column; 
    }
    .about-ttete > div > div:last-child {
        margin-top: auto;
    }
    .name-big {
        font-size: clamp(2.5rem, calc(2.5rem + 2.308vw), 4.0rem);
        line-height: 1;
    }
    .profile-img {
    width: clamp(12.0rem, calc(12.0rem + 1.231vw), 20.0rem); 
    height: auto;
    align-self: flex-start;
    }
    .name-nomber p {
        font-size: clamp(1.8rem, calc(1.8rem + 1.077vw), 2.5rem);
    }
    .text-blue a {
        margin-bottom: 0px;
    }
    .shift-reguy p {
        padding-left: 0px;
    }
    .klasic {
        margin-top: 80px;
    }
    .klasic-img {
    height: clamp(2.0rem, calc(2.0rem + 1.5vw), 3.2rem);
    padding: 
        clamp(1.0rem, calc(1.0rem + 1.2vw), 2.0rem) 
        clamp(1.0rem, calc(1.0rem + 1.2vw), 2.0rem) 
        clamp(1.0rem, calc(1.0rem + 1.2vw), 2.0rem) 
        clamp(1.5rem, calc(1.5rem + 1.8vw), 3.0rem);
    }
    .klasic-content p {
    padding: 10px 15px 10px 15px;
    }
    .overview-section {
        padding: 150px 0 150px 0;      
    }
    .overview-inner {
        width: 90%;
    }
    .overview-content {
        padding-left: 0px;
        display: block;
    }
    .overview-info dl {
        column-gap: 10%;
        row-gap: 50px;
    }
    .overview-map {
        padding-top: 100px;
        width: 100%;
    }
    .process-title {
        margin-bottom: 70px;
    }
    .process-text,.process-subtext {
        padding-left: 30px;
    }
    .process-main {
        padding-left: 0px;
    }
    .topcontent-section {
        width: 89.4%;
        padding-top: 10px;
    }
    .sub-title {
        gap: 10px;
    }
    .sub-title p {
        font-size: clamp(0.8rem, calc(0.8rem + 2.133vw), 1.6rem);
    }
    .process-top-content {
        display: flex;
        gap: 30px;
    }
    .process-sp-period01 {
        width: 60px;
        height: 100%;
        background: #ebebeb;
        color: #393939;
        display: grid;
        justify-content: center;
        align-items: center;
        clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 50% 100%, 0% 95%);
    }
    .process-sp-period02 {
        width: 60px;
        height: 100%;
        background: #b0b0b0;
        color: #393939;
        display: grid;
        justify-content: center;
        align-items: center;
        clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 50% 100%, 0% 95%);
    }
    .process-sp-period03 {
        width: 60px;
        height: 100%;
        background: #747474;
        color: #ffffff;
        display: grid;
        justify-content: center;
        align-items: center;
        clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 50% 100%, 0% 95%);
    }
    .process-sp-period04 {
        width: 60px;
        height: 100%;
        background: #393939;
        color: #fff;
        display: grid;
        justify-content: center;
        align-items: center;
        clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 50% 100%, 0% 95%);
    }
    .process-sp-period05 {
        width: 60px;
        height: 100%;
        background: #FFFAF4;
        color: #FFFAF4;
        display: grid;
        justify-content: center;
        align-items: center;
        clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 50% 100%, 0% 95%);
    }
    .process-sp-period01 p, .process-sp-period02 p,.process-sp-period03 p,.process-sp-period04 p {
        text-align: center;
        line-height: 1.2;
        font-weight: bold;
        padding: 10px;
    }
    
    .pfde {
        padding-bottom: 65px;
    }
    .border-pr-e {
        border-bottom: solid 1px #393939;
    }
    .process-main-theme h3 {
        font-weight: bold;
        line-height: 1.75;
        text-decoration: underline;
    }
    .process-main-theme p {
        font-weight: bold;
        line-height: 2;
    }
    .bottom-res {
        padding-bottom: 50px;
    }
    .bottom-res-m {
        padding-bottom: 50px;
    }
    .top-res {
        padding-top: 50px;
    }
    .process-01 {
        max-width: clamp(20.0rem, calc(20.0rem + 1.815vw), 33.3rem);
        margin: auto;
        display: block;
    }
    .process-02 {
        max-width: clamp(15.0rem, calc(15.0rem + 1.481vw), 25.0rem);
        margin: auto;
        display: block;
    }
    .process-03 {
        max-width: clamp(17.0rem, calc(17.0rem + 1.696vw), 28.5rem);
        margin: auto;
        display: block;
    }
    .process-04 {
        max-width: clamp(16.0rem, calc(16.0rem + 1.6vw), 26.8rem);
        margin: auto;
        display: block;
    }
    .process-05 {
        max-width: clamp(18.5rem, calc(18.5rem + 1.778vw), 30.5rem);
        margin: auto;
        display: block;
    }
    .process-06 {
        max-width: clamp(16.5rem, calc(16.5rem + 1.659vw), 27.7rem);
        margin: auto;
        display: block;
    }
    .process-07 {
        max-width: clamp(19.0rem, calc(19.0rem + 1.889vw), 31.7rem);
        margin: auto;
        display: block;
    }
    .process-flow {
        padding-bottom: 50px;
    }
    .cta-btn {
        width: 29.142857vw;
        gap: 0.2rem;
        height: 38px;
    }
    .cta-btn02 {
        width: 29.142857vw;
        gap: 0.2rem;
        height: 38px;
    }
    .works-filter-btn-sp-all {
        width: 100%;
        height: 43px;
        padding: 0 12px;
        border: 1px solid #393939;
        border-radius: 4px;
        text-align: center;
        line-height: 1;
        font-weight: bold;
        letter-spacing: 0.2em;
        cursor: pointer;
        text-decoration: none;
        color: #393939;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .works-filter-btn {
        width: 40.142857vw;
        height: 43px;
        padding: 0 12px;
        border: 1px solid #393939;
        border-radius: 4px;
        text-align: center;
        line-height: 1;
        font-weight: bold;
        letter-spacing: 0.2em;
        cursor: pointer;
        text-decoration: none;
        color: #393939;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .border-w-bb {
        border-bottom: solid 2px #393939;
        padding-bottom: 20px;
    }
    .project-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    .project-image {
        margin-bottom: 30px;
    }
    .project-name {
        padding-bottom: 30px;
    }
    .pagination {
        padding-top: 70px;
    }
    .topcontent-section-sp {
        height: 100%;
    }
   
    .sp-index {
        display: flex !important;
        flex-direction: column !important;
        height: 100dvh !important; 
        width: 100% !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .sp-index > section {
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #index-page-wrapper {
        flex-grow: 1 !important; 
        flex-shrink: 1 !important;
        min-height: 0 !important;  
        overflow: hidden !important;
    }

    .top-sp, .topcontent-section-sp, .fade-slider-sp {
        height: 100% !important;
        width: 100% !important;
    }
    .index-image-sp {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; 
        object-position: center !important;
    }

    /* 5. フッター：下端に固定 */
    .sp-index footer {
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .fee-right-stack {
    flex: 1 !important; 
    display: flex;
    flex-direction: column;
    padding-left: 15px;
}
    .fee-points div {
        line-height: 2;
        font-weight: bold;
    }
    .fee-points li p {
        padding-left: 20px;
    }
    .p-left-gr {
        padding-left: 20px;
    }
    .fee-point-erear {
        display: flex;
        height: 230px;
        width: 100%;
        justify-content: flex-start;
    }
    .fee-content-deretty {
        display: flex;
        font-weight: bold;
        padding-bottom: 100px;
        width: 100%;
        align-items: flex-start;
    }
    .fee-left-content {
        text-align: center;
        line-height: 1.2;
        font-weight: bold;
        border-bottom: solid 1px #393939;
        border-top: solid 1px #393939;
        border-right: solid 1px #393939;
        padding: 20px 5px; 
        height: auto;
        min-height: 120px; 
        font-feature-settings: initial;
        display: flex;
        width: 50px;
        justify-content: center; 
        align-items: center; 
        margin-top: 0; /* 15% は削除 */
        position: relative;
        top: 230px; /* 「提案」セクションの高さ(fee-point-erearのheight)と同じ数値にする */
        transform: translateY(-50%);
    }
    .fee-left-content p {
        margin: 0;
    }
   .fee-point-erear:nth-child(2) .fee-bor01 {
    position: relative; 
}

.fee-point-erear:nth-child(2) .fee-bor01::before {
    content: "";
    position: absolute;
    top: -1px;          /* 上端のボーダー（境界線）と同じ高さ */
    left: -86px;       /* 左側の「設計監理契約」の右端まで届く距離を調整 */
    
    /* 線の見た目 */
    width: 75px;       /* leftで指定した距離に近い値を設定（隙間を埋める） */
    height: 1px;
    background-color: #393939;
    
    pointer-events: none;
}
    .fee-bor01, .fee-bor02 {
        flex: 1;      
        min-width: 0; 
    }
    .fee-bor01 {
        border-bottom: solid 1px #393939;
        border-left: solid 1px #393939;
        align-content: flex-end;
        flex-grow: 1;
        margin-left: 10px;
    }
    /* 1. 全ての対象要素を基準点にする */
.fee-bor01, 
.fee-bor02, 
.fee-bottom-reww {
    position: relative;
}

/* 2. 各要素の「下端」の角に斜め線をつける */
/* これにより、第1・2・3・4・5・6回のすべての区切り線に適用されます */
.fee-bor01::after, 
.fee-bor02::after,
.fee-bottom-reww::after {
    content: "";
    position: absolute;
    bottom: 0;       /* すべて「下端」を基準にする */
    left: 0;
    width: 15px;     /* 斜め線の長さ */
    height: 1px;
    background-color: #393939;
    transform-origin: left center;
    transform: rotate(-45deg);
    pointer-events: none;
}



    .fee-bor01 div,.fee-bor02 div {
        display: flex;
    }
    .fee-bor02 div {
        height: 50%;
        align-items: end;
    }
    .fee-bor02 {
        border-bottom: solid 1px #393939;
        border-left: solid 1px #393939;
        align-content: end;
        flex-grow: 1;
        margin-left: 10px;
    }
    .fee-bor01 p,.fee-bor02 p {
        padding-left: 30px;
        line-height: 1.4;
    }
    .fee-bor-11 {
        align-content: flex-end;
    }
    .fee-bottom-reww {
        height: 50%;
        border-bottom: solid 1px #393939;
    }
    .fee-content-deretty > div:nth-child(2) {
        flex-grow: 1;
    }
    .fee-sp-period01 {
        width: 60px;
        background: #ebebeb;
        color: #393939;
        display: grid;
        justify-content: center;
        align-items: center;
        clip-path: polygon(0% 0%, 100% 0%, 100% 87%, 50% 100%, 0% 87%);
    }
    .fee-sp-period02 {
        width: 60px;
        background: #b0b0b0;
        color: #393939;
        display: grid;
        justify-content: center;
        align-items: center;
        clip-path: polygon(0% 0%, 100% 0%, 100% 87%, 50% 100%, 0% 87%);
    }
    .fee-sp-period03 {
        width: 60px;
        background: #747474;
        color: #ffffff;
        display: grid;
        justify-content: center;
        align-items: center;
        clip-path: polygon(0% 0%, 100% 0%, 100% 87%, 50% 100%, 0% 87%);
    }
    .fee-sp-period04 {
        width: 60px;
        background: #393939;
        color: #fff;
        display: grid;
        justify-content: center;
        align-items: center;
        clip-path: polygon(0% 0%, 100% 0%, 100% 87%, 50% 100%, 0% 87%);
    }
    .fee-sp-period01, .fee-sp-period02, .fee-sp-period03, .fee-sp-period04 {
    flex-shrink: 0;
    min-height: auto;
    }
    .fee-sp-period01, .fee-sp-period02, .fee-sp-period03, .fee-sp-period04 {
        margin-right: auto;
    }
    .fee-sp-period01 p, .fee-sp-period02 p,.fee-sp-period03 p,.fee-sp-period04 p {
       text-align: center;
        line-height: 1.2;
        font-weight: bold;
        padding: 10px;
    }
    .pad-reewwert {
        padding-bottom: 7%;
    }

    
    .contact-form {
        padding: 0 0px;
    }
    .contact-form .form-row {
        gap: 10px;
    }
    .arch-header {
        justify-content: space-between;
        width: 100%;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .Btn-navi {
        margin-right: 10px;
    }
    .privacy-content {
        width: 90%;
    }
    .modal .button-wrapper {
        right: 3%;
    }
    .privacy-ad-t {
        display: block;
    }
    .process-main-theme img {
        padding-bottom: 15px;
    }
    .foot-main {
        width: 90%;
        padding-bottom: 5px;
    }
    .contact-need p {
        padding-left: 5px;
    }
    .label-inner-text p {
        padding-left: 10px;
        padding-right: 10px;
    }
    .padd-width {
        line-height: 1.5;
    }
    .modal-content {
        width: 95%;
        max-width: 650px; 
    }
} 
@media screen and (max-width: 650px) {
    .fee-sp-period01,.fee-sp-period02,.fee-sp-period03,.fee-sp-period04 {
            width:55px;
    }
    .process-sp-period01,.process-sp-period02,.process-sp-period03,.process-sp-period04,.process-sp-period05 {
            width:55px;
    }
    .fee-bor01 p, .fee-bor02 p {
        padding-left: 20px;
    }
    .fee-point-erear {
        height: 200px;
    }
    .fee-point-erear:nth-child(2) .fee-bor01::before {
        width: 70px; 
        left: -81px;
    }
    .fee-left-content {
        top: 200px;
    }
    .fee-left-content {
        width: 40px;
    }
    .modal-content {
        width: 95%;
        max-width: 550px; 
    }
}
@media screen and (max-width: 550px) {
    .fee-sp-period01,.fee-sp-period02,.fee-sp-period03,.fee-sp-period04 {
            width: 35px;
    }
    .process-sp-period01,.process-sp-period02,.process-sp-period03,.process-sp-period04,.process-sp-period05 {
            width:35px;
    }
    .visual-text p {
        padding-left: 20px;
    }
    .visual-inner {
        padding: 6vh 15px;
    }
    .name-big {
        font-size: clamp(2.5rem, calc(1.5rem + 2.308vw), 4.0rem);
    }
    .name-nomber p {
        font-size: clamp(0.8rem, calc(0.8rem + 1.077vw), 1.5rem);
    }
    .pagination {
        padding-top: 0px;
    }
    .project-grid {
        gap: 20px;
    }
    .fee-point-erear {
        height: 180px;
    }
    .fee-point-erear:nth-child(2) .fee-bor01::before {
        width: 50px;
        left: -61px; 
    }
    .fee-left-content {
        top: 180px;
    }
    .fee-left-content {
        width: 30px;
    }
    .modal-content {
        width: 95%;
        max-width: 450px; 
    }
}
@media screen and (max-width: 450px) {
    .fee-sp-period01,.fee-sp-period02,.fee-sp-period03,.fee-sp-period04 {
            width:30px;
    }
    .process-sp-period01,.process-sp-period02,.process-sp-period03,.process-sp-period04,.process-sp-period05 {
            width:30px;
    }
    .name-big {
        font-size: clamp(1.5rem, calc(1.5rem + 0.308vw), 4.0rem);
    }
    .name-nomber p {
        font-size: clamp(0.8rem, calc(0.8rem + 1.077vw), 1.5rem);
    }
    .p-small-font-sp-b {
        font-size: clamp(0.6rem, calc(0.6rem + 1vw), 1.8rem);
    }
    .fee-bor01 p, .fee-bor02 p {
        padding-left: 10px;
    }
    .klasic-img {
        padding: 
        clamp(1.0rem, calc(1.0rem + 1.2vw), 2.0rem) 
        clamp(1.0rem, calc(1.0rem + 1.2vw), 2.0rem) 
        clamp(1.0rem, calc(1.0rem + 1.2vw), 2.0rem) 
        clamp(1.5rem, calc(1.5rem + 1.8vw), 1.0rem);
    }
    .overview-info dl {
        grid-template-columns: 70px 1fr;
        column-gap: 5%;
    }
    .fee-points li p {
        padding-left: 5px;
    }
    .fee-points {
        padding-left: 5px;
    }
    .cta-btn02 {
        width: 34.142857vw;
    }
    .p-middle-font-sp-cta {
        font-size: clamp(0.5rem, calc(0.8rem + 0.453vw), 2.0rem);
    }
    .fee-point-erear {
        height: 170px;
    }
    .fee-point-erear:nth-child(2) .fee-bor01::before {
        width: 45px;
        left: -56px; 
    }
    .fee-left-content {
        top: 170px;
    }
    .fee-left-content {
        width: 20px;
    }
    .modal-content {
        width: 95%;
        max-width: 350px; 
    }
}
@media screen and (max-width: 350px) {
    .fee-sp-period01,.fee-sp-period02,.fee-sp-period03,.fee-sp-period04 {
            width:30px !important;
    }
    .process-sp-period01,.process-sp-period02,.process-sp-period03,.process-sp-period04,.process-sp-period05 {
            width:30px;
    }
    .visual-text p {
        padding-left: 10px;
    }
    .about-text {
        padding-left: 10px;
    }
    .overview-info dl {
        grid-template-columns: 53px 1fr;
    }
    .cta-btn02 {
        width: 41.142857vw;
    }
    .modal-content {
        width: 95%;
        max-width: 350px; 
    }
    .pad-reewwert {
        padding-bottom: 8%;
    }
}
@media screen and (max-width: 250px) {
    .fee-sp-period01,.fee-sp-period02,.fee-sp-period03,.fee-sp-period04 {
            width:45px;
    }
}