.project-visual { width: 100%; padding: 200px 80px 74px; }
.project-visual small { color: #ff5a00; font-size: 28px; line-height: 40px; font-weight: bold; letter-spacing: -0.048em; } 
.project-visual h3 { color: #222; font-size: 140px; line-height: 180px; font-weight: bold; letter-spacing: -0.024em;} 
.project-visual p { color: #222; font-size: 32px; line-height: 1.3125; font-weight: bold; letter-spacing: -0.048em;} 

.project-list-wrap { width: 100%; padding: 0 80px 140px; }
.project-list-tab { }
.project-list-tab ul { display: flex; flex-wrap: wrap; margin: 0 0 50px; }
.project-list-tab ul li { margin-left: 14px; } 
.project-list-tab ul li:nth-of-type(1) { margin-left: 0; }
.project-list-tab a { display: block; background: #f1f1f1; color: #bbb; padding: 20px 32px; font-size: 24px; font-weight: bold; letter-spacing: -0.048em; cursor: pointer; transition: .2s; }
.project-list-tab a.on { background: #222; color: #fff; }

@media (hover: hover) {
    .project-list-tab a:hover { background: #222; color: #fff; } 
}

.project-list { display: grid; grid-auto-flow: dense; grid-row-gap: 44px; grid-column-gap: 36px; grid-template-columns: repeat(3, 1fr); width: 100%; }
.project-list .project { transform: translateY(3vw); opacity: 0; transition: .4s; }
.project-list .project a { cursor: auto; }
.project-list .project .image-wrap { position: relative; margin-bottom: 20px; width: 100%; padding-bottom: 100%; overflow: hidden }
.project-list .project .image-wrap img { position: absolute; top: 50%; left: 50%; width: auto; height: auto; margin: 0 auto; transform: translate(-50%, -50%); } 
.project-list .project p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; word-break: break-all;  color: #333; font-size: 28px; font-weight: bold; line-height: 36px; letter-spacing: -0.056em;} 
.project-list .project small { color: #aaa; font-size: 16px; line-height: 2; letter-spacing: -0.056em; }

.project-overview { width: 100%; max-width: 1120px; margin: 0 auto; } 
.project-view-title { width: 100%; margin: 222px auto 74px; text-align: center; }
.project-view-title h3 { margin-bottom: 8px; color: #333; font-size: 64px; font-weight: bold; letter-spacing: -0.056em; }
.project-view-title p { color: #ff5a00; font-size: 28px; font-weight: bold; }  
.project-view-content { padding: 90px 0; border-top: 1px solid #333; border-bottom: 1px solid #ddd; text-align: center } 
.project-view-content h4 { margin-bottom: 32px; font-size: 56px; color: #333; font-weight: bold; }
.project-view-content p { margin-bottom: 60px; font-size: 20px; color: #b4b4b4; letter-spacing: -0.064em; word-break: keep-all; }
.project-view-content img { margin: 0 auto; } 
.project-view-content .main-bg { display: block; margin-bottom: 64px; border: 4px solid #000; border-radius: 24px; overflow: hidden; } 
.project-view-content .project-purpose { display: flex; flex-wrap: wrap; flex-direction: column; } 
.project-view-content .project-purpose p { margin-top: 48px; color: #555; font-size: 20px; line-height: 1.6; letter-spacing: -0.048em;}
.project-view-content .project-purpose .purpose-desc { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; margin: 64px auto; }
.project-view-content .project-purpose .purpose-desc h4, .project-view-content .project-purpose .purpose-desc .desc { display: block; width: calc(50% - 15px); }
.project-view-content .project-purpose .purpose-desc h4 { color: #333; font-size: 40px; line-height: 54px; font-weight: bold; letter-spacing: -0.048em; }
.project-view-content .project-purpose .purpose-desc .desc p { color: #555; font-size: 20px; line-height: 1.6; letter-spacing: -0.048em; } 
.project-view-content .project-purpose .purpose-desc .desc p:nth-of-type(2) { margin-top: 32px; }
.project-view-content .color-guide h5 { margin-bottom: 25px; color: #333; font-size: 40px; font-weight: bold; letter-spacing: -0.048em;}
.project-view-content .color-guide > p { color: #555; font-size: 20px; line-height: 1.6; letter-spacing: -0.048em; }
.project-view-content .color-guide .color-tag { display: grid; grid-auto-flow: dense; grid-row-gap: 20px; grid-column-gap: 20px; grid-template-columns: repeat(3, 1fr); width: 100%; margin: 0 auto 40px; }
.project-view-content .color-guide .color-tag li { display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; width: 360px; height: 140px; padding-left: 38px; border-radius: 12px; }
.project-view-content .color-guide .color-tag li p { color: #fff; font-size: 28px; font-weight: bold; line-height: 36px; } 
.project-view-content .color-guide .color-tag small { display: block; color: #fff; font-size: 16px; font-weight: bold; line-height: 28px; opacity: 0.5;}

.project.on { transform: translateY(0); opacity: 1; } 
.project.all { transform: translateY(0); opacity: 1;} 

@media ( min-width: 1024px ) and ( max-width: 1280px ) {
    .project-visual { padding: 160px 56px 64px; }
    .project-visual h3 { color: #222; font-size: 100px; line-height: 118px;  font-weight: bold; letter-spacing: -0.048em; }
    .project-list-wrap { width: auto; margin: 0 56px; padding: 0 0 140px; } 
    .project-list .project p { font-size: 20px;}
    .project-view-content { width: auto; margin: 0 56px; }
    .project-view-title h3 { font-size: 48px; }
    .project-view-content h4 { margin-bottom: 24px; font-size: 36px; }
}



@media (max-width: 1023px) {
    .project-visual { width: calc(100% - 112px); margin: 0 auto; padding: 248px 0 106px; }
    .project-visual small { display: block; margin-bottom: 30px; font-size: 32px; line-height: 50px; } 
    .project-visual h3 { margin-bottom: 32px; font-size: 84px; line-height: 90px; letter-spacing: -0.048em;} 
    .project-visual p { font-size: 28px; line-height: 1.5; word-break: keep-all; } 
    
    .project-list-wrap { width: auto; margin: 0 auto; padding: 0 0 130px; }
    .project-list-tab { position: relative; width: auto; margin: 0 56px 50px 0; overflow-x: scroll; }
    .project-list-tab ul { white-space: nowrap; flex-wrap: nowrap; margin: 0 auto; }
    .project-list-tab ul li:nth-of-type(1) { margin-left: 56px; }
    .project-list-tab ul li { margin-left: 24px; }
    .project-list-tab a { padding: 20px 40px; font-size: 24px; }
    
    .project-list { grid-row-gap: 48px; grid-column-gap: 36px; grid-template-columns: repeat(2, 1fr); width: auto; margin: 0 56px; }
    .project-list .project .image-wrap { margin-bottom: 10px; }
    .project-list .project p { padding: 0 20px; font-size: 20px; line-height: 1.8; } 
    .project-list .project small { padding-left: 28px; display: block; font-size: 16px; line-height: 32px; }

    .project-overview { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 56px; } 
    .project-view-title { width: 100%; margin: 238px auto 68px; text-align: center; }
    .project-view-title h3 { margin-bottom: 12px; color: #333; font-size: 36px; font-weight: bold; letter-spacing: -0.056em; }
    .project-view-title p { color: #ff5a00; font-size: 24px; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }  

    .project-view-content { margin: 0 auto; padding: 80px 0 84px; margin-bottom: 60px; border-top: 3px solid #333; border-bottom: 3px solid #ddd; }
    .project-view-content h4 { font-size: 36px; }
}

@media (min-width: 319px) and (max-width: 719px) { 
    .project-visual { width: calc(100% - 56px); padding: 124px 0 52px; }
    .project-visual small { margin-bottom: 18px; font-size: 20px; line-height: 25px; } 
    .project-visual h3 { margin-bottom: 16px; font-size: 56px; line-height: 58px; } 
    .project-visual p { font-size: 20px; } 
    
    .project-list-wrap { padding: 0 0 65px; }
    .project-list-tab { margin: 0 28px 50px 0; }
    .project-list-tab ul li:nth-of-type(1) { margin-left: 28px; }
    .project-list-tab ul li { margin-left: 16px; }
    .project-list-tab a { padding: 15px 30px; font-size: 18px; }
    
    .project-list { grid-row-gap: 48px; grid-column-gap: 36px; grid-template-columns: repeat(1, 1fr); margin: 0 28px; }
    .project-list .project p { padding: 0 28px; font-size: 20px; } 
    .project-list .project small { padding-left: 28px; font-size: 14px; line-height: 18px; }

    .project-overview { padding: 0 28px; } 
    .project-view-title { margin: 120px auto 34px; }
    .project-view-title h3 { margin-bottom: 6px; font-size: 28px; }
    .project-view-title p { font-size: 20px; }  

    .project-view-content { padding: 40px 0 42px; margin-bottom: 30px; border-top: 1px solid #333; border-bottom: 1px solid #ddd; }
    .project-view-content h4 { margin-bottom: 20px; font-size: 28px; word-break: keep-all; }
    .project-view-content p { margin-bottom: 48px; font-size: 16px; word-break: keep-all; }
}