@charset "UTF-8";
/* ========================================
  @media screen and (min-width: 768px), print
======================================== */
@media screen and (min-width: 768px),print {
#works #works-sec {margin-top: 18px;padding: 120px 0 430px;margin-bottom: -291px;}
#works #works-sec .ttl-wrap {margin-bottom: 86px;}
#works #works-sec .works-list {
    margin-bottom: 120px;
}
#works #single-works #other-works .system-list {
    margin-bottom: 120px;
}

/* single */
#single-works header {
    margin: 0 auto;
    position: relative;
    z-index: 10;
}
#single-works .single-ttl-box {
    position: relative;
    top: -90px;
    max-width: 1920px;
    width: 100%;
    margin-inline: auto;
}
#single-works .single-ttl-box .system-pic {
    margin: 0;
}
#single-works .single-ttl-box .system-pic img {
    height: 880px;
}
#single-works .single-ttl-box .main-ttl-wrap {
    position: absolute;
    bottom: 91px;
    padding: 0 0 0 8.3%;
}
#single-works .single-ttl-box .en{
    color: #FFF;
    font-size: 120px;
    font-weight: 900;
    line-height: 1; /* 79.807% */
    margin-bottom: 12px;
}
#single-works .single-ttl-box .main-ttl{
    color: #FFF;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4583;
    padding: 0;
    margin: 0;
    text-align: left;
    letter-spacing: 0;
}
#single-works .system-contents {
    padding: 50px 0 90px;
    width: 100%;
}
#single-works .inBox {
    width: min(95%, 1440px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 38.9% 55.55%;
    gap: 80px;
    padding-bottom: 140px;
}
#single-works .txt-box {
    position: relative;
}
#single-works .system-catch {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4375; /* 143.75% */
    margin-bottom: 64px;
}
#single-works .content-list {
    display: grid;
    gap: 24px;
}
#single-works .content-list li .content-ttl {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25; /* 125% */
    margin-bottom: 8px;
}
#single-works .content-list li .content-txt {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.85714; /* 185.714% */
}
#single-works .content-list li .category-list {
    display: flex;
    gap: 24px;
    padding-left: 10px;
}
#single-works .content-list li .category-list > li {
    position: relative;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.85714; /* 185.714% */
}
#single-works .content-list li .category-list > li::before {
    position: absolute;
    content: "#";
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8571;
    top: 50%;
    left: -11px;
    transform: translateY(-50%);
}
#single-works .pc-image {
    width: 100%;
    margin-bottom: 110px;
}
#single-works .sp-image {
    width: min(95%, 1200px);
    margin-inline: auto;
}
#single-works .sp-image img {
    width: 100%;
    height: auto;
}

/* sec共通 */
#single-works .sec .enttl {
    font-size: clamp(5.625rem, 4.375rem + 2.6vw, 7.5rem);
    font-weight: 900;
    line-height: 0.79807;
    margin-bottom: 24px;
}
#single-works .sec .ttl {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4375; /* 143.75% */
}
#single-works .sec .btn {
    border-radius: 200px;
    background: #1A1A1A;
    width: min(95%, 320px);
}
#single-works .sec .btn a{
    color: #FFF;
    text-align: center;
    font-size: clamp(0.75rem, 0.583rem + 0.35vw, 1rem);
    font-weight: 500;
    line-height: 1.875; /* 187.5% */
    padding: 25px 0;
    position: relative;
    display: block;
}
#single-works .sec .btn a::after {
    position: absolute;
    content: "＞";
    color: #FFF;
    text-align: center;
    font-family: "Hanken Grotesk";
    font-size: 13px;
    font-weight: 900;
    line-height: 1.333; /* 133.333% */
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}
#single-works .sec .upper-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: min(95%, 1072px);
    margin-inline: auto;
    margin-bottom: 80px;
}


/* works-voice
-------------------------------------*/
#single-works #works-voice {
    width: min(95%, 1440px);
    margin-inline: auto;
    background: #F5F5F5;
    padding: 120px 0; 
    margin-bottom: 140px;
}

#single-works .works-voice-box {
    width: min(95%, 1072px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 44.77% 47.8%;
    gap: 80px;
}
#single-works .works-voice-box .system-pic {
    margin: 0;
}
#single-works .works-voice-box .system-pic img{
    height: 295px;
}
#single-works .works-voice-box .upper-wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    width: 100%;
 }
 #single-works .works-voice-box .system-area {
    color: #B9B9B9;
    font-size: 13px;
    font-weight: 400;
    line-height: 2.30769; /* 230.769% */
    letter-spacing: 0;
 }
 #single-works .works-voice-box .system-category span {
    color: #FFF;
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    line-height: 2.30769; /* 230.769% */
    letter-spacing: 0;
    padding: 0 10px;
    border-radius: 4px;
    background: #1A1A1A;
    display: block;
 }
 #single-works .works-voice-box .system-company {
    font-size: 13px;
    font-weight: 400;
    line-height: 2.30769; /* 230.769% */
    letter-spacing: 0;
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
 }
 #single-works .works-voice-box .system-company::before {
    position: absolute;
    content: "";
    background: url(../images/index/ellipse1.svg)no-repeat;
    background-size: contain;
    width: 10px;
    height: 10px;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
 }
 #single-works .works-voice-box .system-ttl-01 {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.75; /* 175% */
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* ← 2行でカット */
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 24px;
 }
 #single-works .works-voice-box .comment-box {
    border-radius: 10px;
    background: #FFF;
    padding: 20px;
    position: relative;
    /* bottom: 0; */
 }
 #single-works .works-voice-box .system-comment {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.69231; /* 169.231% */
    letter-spacing: 0;
    width: min(95%, 360px);
 }
 #single-works .works-voice-box .system-illust {
    position: absolute;
    top: -20px;
    right: 20px;
 }

 /* other-works
-------------------------------------*/
#single-works #other-works {
    background: #F5F5F5;
    padding: 160px 0 450px;
    margin-bottom: -290px;
}
#single-works #other-works.sec .upper-wrap {
    width: min(95%, 1600px);
    padding-right: 80px;
}
#single-works #other-works .system-list {
    width: min(95%, 1600px);
    margin-inline: auto;
}
#single-works #other-works .system-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 80px;
    width: min(95%, 1600px);
    margin-inline: auto;
    margin-bottom: 80px;
  }
  #single-works #other-works .system-list li .works-img {
    margin-bottom: 30px;
    width: 100%;
    height: 720px;
    text-align: center;
  }
  #single-works #other-works .system-list li .works-img img {
    width: auto;
    height: 100%;
    max-width: 100%;
  }
  #single-works #other-works .system-list li .upper-wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0;
    width: 100%;
  }
  #single-works #other-works .system-list li .address {
    text-align: right;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.69231; /* 169.231% */
  }
  #single-works #other-works .system-list li .cat-wrap {
    color: #B9B9B9;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.69231; /* 169.231% */
    padding-left: 10px;
  }
  #single-works #other-works .system-list li .cat-wrap .category,
  #single-works #other-works .system-list li .cat-wrap .cate {
    display: flex;
    gap: 30px;
  }
  #single-works #other-works .system-list li .cat-wrap .category span,
  #single-works #other-works .system-list li .cat-wrap .cate span {
    position: relative;
  }
  #single-works #other-works .system-list li .cat-wrap .category span::before,
  #single-works #other-works .system-list li .cat-wrap .cate span::before {
    position: absolute;
    content: "# ";
    color: #B9B9B9;
    font-family: "Noto Sans JP";
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.69231; /* 169.231% */
    top: 50%;
    left: -10px;
    transform: translateY(-50%);
  }
  #single-works #other-works .system-list li .company-name {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5; /* 150% */
  }


}

/* ========================================
@media screen and (min-width:768px) and (max-width:1480px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1480px) {
    #single-works .inBox .system-image img {
        width: 100%;
        height: auto;
    }
}
/* ========================================
@media screen and (min-width:768px) and (max-width:1440px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1440px) {
#single-works .works-voice-box {
    gap: 5.556vw;
} 
#single-works .works-voice-box .system-pic img{
    height: 20.486vw;
}
#single-works .works-voice-box .upper-wrap {
    margin-bottom: 1.042vw;
    width: 100%;
}
#single-works .works-voice-box .system-category span {
    padding: 0 0.694vw;
    border-radius: 0.278vw;
}
#single-works .works-voice-box .system-company {
    padding-left: 1.389vw;
    margin-bottom: 0.556vw;
}
#single-works .works-voice-box .system-company::before {
    width: 0.694vw;
    height: 0.694vw;
}
#single-works .works-voice-box .system-ttl-01 {
    margin-bottom: 1.042vw;
}
#single-works .works-voice-box .comment-box {
    border-radius: 0.694vw;
    padding: 1.389vw;
}
#single-works .works-voice-box .system-illust {
    position: absolute;
    top: -1.389vw;
    right: 1.389vw;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1200px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1200px) {
    #single-works .works-voice-box .system-comment {
        width: min(95%, 26vw);
    }
}
/* ========================================
@media screen and (min-width:768px) and (max-width:1640px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1640px) {
    #single-works #other-works.sec .upper-wrap {
        padding-right: 4.878vw;
    }
}


/* ========================================
@media screen and (max-width: 767px) 
======================================== */
@media screen and (max-width: 767px) {
    #works #works-sec {
    margin-top: 12vw;
    padding: 15.46vw 0 40.32vw;
    margin-bottom: -21.5vw;
}
    #works #works-sec .ttl-wrap {
    margin-bottom: 15.18vw;
}
#works #works-sec .works-list {
    margin-bottom: 16vw;
}
    #works #single-works #other-works .system-list {
    margin-bottom: 16vw;
}
#works #works-sec .works-list li:nth-child(n+4) {
    display: block;
}
#works #works-sec .works-list li:nth-child(n+7) {
    display: none;
} 
#works #single-works #other-works .system-list li:nth-child(n+4) {
    display: block;
}
#works #single-works #other-works .system-list li:nth-child(n+7) {
    display: none;
}

/* single */
#single-works header {
    margin: 0;
    position: relative;
    z-index: 10;
}
#single-works .single-ttl-box {
    position: relative;
    top: -11.75vw;
}
#single-works .single-ttl-box .system-pic {
    margin: 0;
}
#single-works .single-ttl-box .system-pic img {
    height: 154.59vw;
}
#single-works .single-ttl-box .main-ttl-wrap {
    position: absolute;
    bottom: 9.66vw;
    width: 89.37vw;
    margin-inline: auto;
    padding: 0 0 0 5.3vw;
}
#single-works .single-ttl-box .en{
    color: #FFF;
    font-size: 16.91vw;
    font-weight: 900;
    line-height: 1.3;
    margin-bottom: 0;
}
#single-works .single-ttl-box .main-ttl{
    color: #FFF;
    font-size:4.348vw;
    font-weight: 700;
    line-height: 1.77778;
    padding: 0;
    margin: 0;
    text-align: left;
    letter-spacing: 0;
}
#single-works .system-contents {
    padding: 7.55vw 0 19.32vw;
    width: 100%;
}
#single-works .inBox {
    display: grid;
    padding-bottom: 28.99vw;
    width: 89.37vw;
    margin-inline: auto;
}
#single-works .txt-box {
    display: contents;
}
#single-works .system-catch {
    font-size:5.797vw;
    font-weight: 700;
    line-height: 1.4583;
    margin-bottom: 9.66vw;
}
#single-works .content-list {
    display: grid;
    gap: 5.80vw;
}
#single-works .content-list li .content-ttl {
    font-size:3.865vw;
    font-weight: 700;
    line-height: 1.25; /* 125% */
    margin-bottom: 1.93vw;
}
#single-works .content-list li .content-txt {
    font-size:3.14vw;
    font-weight: 400;
    line-height: 1.84615;
}
#single-works .content-list li .content-txt.url {
    font-size:3.382vw;
}
#single-works .content-list li .category-list {
    display: flex;
    gap: 5.80vw;
    padding-left: 2.42vw;
}
#single-works .content-list li .category-list > li {
    position: relative;
    font-size:3.14vw;
    font-weight: 400;
    line-height: 1.84615;
}
#single-works .content-list li .category-list > li::before {
    position: absolute;
    content: "#";
    font-size: 3.38vw;
    font-weight: 400;
    line-height: 1.8571;
    top: 50%;
    left: -2.66vw;
    transform: translateY(-50%);
}
#single-works .system-image {
    text-align: center;
    padding: 15.46vw 0 0;
}
#single-works .system-image img {
    height: 62.80vw;
    width: 100%;
}
#single-works .pc-image {
    width: 100%;
    margin-bottom: 15.46vw;
}
#single-works .pc-image img {
    height: 86.96vw;
}
#single-works .sp-image {
    width: 89.37vw;
    margin-inline: auto;
}
#single-works .sp-image img {
    width: 100%;
    height: 51.93vw;
}

/* sec共通 */
#single-works .sec .enttl {
    font-size: 16.91vw;
    font-weight: 900;
    line-height: 1.14286;
}
#single-works .sec .ttl {
    font-size:5.797vw;
    font-weight: 700;
    line-height: 1.4583;
}
#single-works .sec .btn {
    border-radius: 48.31vw;
    background: #1A1A1A;
    width: 72.46vw;
    order: 6;
    margin-inline: auto;
}
#single-works .sec .btn a{
    color: #FFF;
    text-align: center;
    font-size:3.382vw;
    font-weight: 500;
    line-height: 2.14286;
    padding: 3.62vw 0;
    position: relative;
    display: block;
}
#single-works .sec .btn a::after {
    position: absolute;
    content: "＞";
    color: #FFF;
    text-align: center;
    font-family: "Hanken Grotesk";
    font-size: 2.42vw;
    font-weight: 900;
    line-height: 1;
    right: 4.8vw;
    top: 50%;
    transform: translateY(-50%);
}
#single-works .sec .upper-wrap {
    width: 82.13vw;
    margin-inline: auto;
    margin-bottom: 9.66vw;
}

/* works-voice
-------------------------------------*/
#single-works #works-voice {
    width: 91.79vw;
    margin-inline: auto;
    background: #F5F5F5;
    padding: 9.66vw 0; 
    margin-bottom: 19.32vw;
}

#single-works .works-voice-box {
    width: 82.13vw;
    margin-inline: auto;
    display: grid;
}
#single-works .works-voice-box .system-pic {
    margin: 0 0 2.88vw;
    order: 2;
}
#single-works .works-voice-box .system-pic img{
    height: 38.65vw;
}
#single-works .works-voice-box .upper-wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.9vw;
    width: 100%;
    order: 1;
    align-items: center;
 }
 #single-works .works-voice-box .system-area {
    color: #B9B9B9;
    font-size:3.14vw;
    font-weight: 400;
    line-height: 0.92308;
    letter-spacing: 0;
 }
 #single-works .works-voice-box .system-category span {
    color: #FFF;
    text-align: center;
    font-size:3.14vw;
    font-weight: 400;
    line-height: 1.07692;
    letter-spacing: 0;
    padding: 1.53vw 2.42vw;
    border-radius: 0.97vw;
    background: #1A1A1A;
    display: block;
 }
 #single-works .works-voice-box .system-company {
    font-size:3.14vw;
    font-weight: 400;
    line-height: 1.87692;
    letter-spacing: 0;
    position: relative;
    padding-left: 4.35vw;
    margin-bottom: 2.38vw;
    order: 3;
 }
 #single-works .works-voice-box .system-company::before {
    position: absolute;
    content: "";
    background: url(../images/index/ellipse1.svg)no-repeat;
    background-size: contain;
    width: 2.42vw;
    height: 2.42vw;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
 }
 #single-works .works-voice-box .system-ttl-01 {
    font-size:3.865vw;
    font-weight: 500;
    line-height: 1.75; /* 175% */
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* ← 2行でカット */
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 2.42vw;
    order: 4;
 }
 #single-works .works-voice-box .comment-box {
    border-radius: 2.42vw;
    background: #FFF;
    padding: 4.83vw 2.42vw;
    position: relative;
    order: 5;
    display: grid;
    grid-template-columns: 14.49vw 57.97vw;
    gap: 2.42vw;
    margin-bottom: 9.66vw;
    align-items: center;
 }
 #single-works .works-voice-box .system-comment {
    font-size:3.14vw;
    font-weight: 400;
    line-height: 1.69231; /* 169.231% */
    letter-spacing: 0;
    order: 2;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
 }
 #single-works .works-voice-box .system-illust {order: 1;}

/* other-works
-------------------------------------*/
#single-works #other-works {
    background: #F5F5F5;
    padding: 12.66vw 0 65vw;
    margin-bottom: -26.5vw;
}
#single-works #other-works .enttl {
    font-size:12.077vw;
    margin-bottom: 2.7vw;
}
#single-works #other-works.sec .upper-wrap {width: 89.37vw;}
#single-works #other-works .system-list {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 9.66vw;
    width:89.37vw;
    margin-inline: auto;
    margin-bottom: 9.66vw;
  }
  #single-works #other-works .system-list li .works-img {
    margin-bottom: 3.86vw;
    width: 100%;
    height: 77.29vw;
    text-align: center;
  }
  #single-works #other-works .system-list li .works-img img {
    width: auto;
    height: 100%;
    max-width: 100%;
  }
  #single-works #other-works .system-list li .upper-wrap {display: flex;justify-content: space-between;margin-bottom: 2.42vw;}
  #single-works #other-works .system-list li .address {
    text-align: right;
    font-size:3.14vw;
    font-weight: 400;
    line-height: 1.69231; /* 169.231% */
  }
  #single-works #other-works .system-list li .cat-wrap {
    color: #B9B9B9;
    font-size:3.14vw;
    font-weight: 400;
    line-height: 1.69231; /* 169.231% */
    /* display: flex; */
    /* gap: 2.42vw; */
    padding-left: 3vw;
  }
  #single-works #other-works .system-list li .cat-wrap .category,
  #single-works #other-works .system-list li .cat-wrap .cate {
    position: relative;
    display: flex;
    gap: 5.62vw;
  }
  #single-works #other-works .system-list li .cat-wrap .category span,
    #single-works #other-works .system-list li .cat-wrap .cate span {
        position: relative;
    }
  #single-works #other-works .system-list li .cat-wrap .category span::before,
  #single-works #other-works .system-list li .cat-wrap .cate span::before {
    position: absolute;
    content: "# ";
    color: #B9B9B9;
    font-family: "Noto Sans JP";
    font-size:3.14vw;
    font-style: normal;
    font-weight: 400;
    line-height: 1.69231; /* 169.231% */
    top: 50%;
    left: -3vw;
    transform: translateY(-50%);
  }
  #single-works #other-works .system-list li .company-name {
    font-size:3.865vw;
    font-weight: 500;
    line-height: 1.75;
  }


}