@charset "utf-8";
.sec-body-ttl {
    font-size: clamp(2.0rem , 2.44047619vw, 4.0rem);
    letter-spacing: 0.18em;
    line-height: 1.25;
    text-align: center;
}
.sec-body-ttl .sm {
    display: block;
    font-size: 73%;
    letter-spacing: 0.04em;
}
.sec-body-ttl sup {
    font-size: 60%;
    letter-spacing: 0;
}
@media screen and (max-width: 767px){
    .sec-ttl .ttl_ic {
        height: 7px;
        width: auto;
    }
    .sec-ttl .ttl_jp {
        letter-spacing: 0.04em;
    }
    .sec-mv-bg img {
        height: 200px;
        object-fit: cover;
    }
    .sec-body-ttl {
        letter-spacing: 0.04em;
    }
}
/* section Project*/
.sec-project-body {
    padding: 80px 0 120px;
    padding: clamp(40px, 4.76190476vw, 80px) 0 clamp(60px, 7.14285714vw, 120px);
}
.prj-block {
    margin: 0 auto;
    max-width: 1070px;
}
.prj-block + .prj-block {
    border-top: 1px solid #000;
    margin-top: clamp(30px, 3.57142857vw, 60px);
    padding-top: clamp(30px, 3.57142857vw, 60px);
}
.prj-block.dotted-line {
  border-top: none;
  background-image : linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0) 4px, transparent 5px, transparent 10px); 
  background-size: 10px 1px;  
  background-position: top;  
  background-repeat: repeat-x;
}
.prj-block .ttl {
    font-size: clamp(1.5rem, 1.19047619vw, 2rem);
}
.prj-block .txt {
    font-size: clamp(1.1rem, 0.892857143vw, 1.5rem);
}
.prj-block .block-ttl {
    font-size: clamp(1.5rem, 1.78571429vw, 3rem);
    letter-spacing: 0.04em;
    line-height: 1.3;
    margin-bottom: clamp(40px,4.7619047619047619048vw, 80px);
    text-align: center;
}
@media screen and (max-width: 767px){
    .prj-block .ttl-img {
        margin-bottom: 20px!important;
        text-align: center;
    }
    .prj-block .ttl-img img {
        margin: 0 auto;
        width: 70%;
    }
}

.about-water {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.about-water > .imgL {
    width: 59%;
}
.about-water > .imgR {
    width: 40%;
}
.bubbless {
    display: flex;
    flex-wrap: wrap;
}
.bubbless .item {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 50%;
}
.bubbless .item .img {
    max-width: 335px;
}
@media screen and (max-width: 767px){
    .bubbless .item {
        margin-bottom: 30px;
        width: 100%;
    }
    .bubbless .item .img {
        width: 50%;
    }
    .bubbless .item:nth-child(2) .img {
        width: 62%;
    }
}

.iony {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.iony .item {
    display: flex;
    justify-content: space-between;
}
.iony .item:nth-child(1) {
    display: block;
    width: 25%;
}
.iony .item:nth-child(2) {
    width: 41%;
}
.iony .item:nth-child(3) {
    gap: 0 5%;
    width: 28.98%;
}
.iony .item .logo-img {
    max-width: 130px;
    width: 40%;
}
.iony .item .logo-img ~ span {
    width: 55%;
}
@media screen and (max-width: 767px){
    .iony {
        gap: 30px 0;
    }
    .iony .item {
        text-align: center;
        width: 100%!important;
    }
    .iony .item:nth-child(2) {
        justify-content: center;
        gap: 2%;
    }
    .iony .item .item-sml {
        max-width: 48%;
    }
    .iony .item .logo-img {
        flex-shrink: 0;
        width: 25%;
    }
    .iony .item .logo-img ~ span {
        flex-grow: 1;
        text-align: left;
        width: auto;
    }
    .iony .item:nth-child(3) {
        max-width: 400px;
        margin: 0 auto;
    }
}

.airless {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
}
.airless .item {
    display: flex;
    gap: 10px;
    width: calc(100% / 3 - 30px * 2 / 3);
}
.airless .item > * {
    width: calc(50% - 5px);
}
@media screen and (max-width: 767px){
    .airless {
        gap: 30px 0;
        padding: 0 5%;
    }
    .airless .item {
        width: 100%;
    }
    .airless .item .info {
        display: flex;
        flex-direction: column-reverse;
    }
    .airless .item .info .ttl {
        margin: 0 0 0!important;
    }
}

.mirablezero {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
}
.mirablezero .item {
    width: calc(100% / 3 - 30px * 2 / 3);
}
.mirablezero02 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.mirablezero02 .item01 {
    width: 62%;
}
.mirablezero02 .item02 {
    width: 36%;
}
.mirablezero02 .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
}
.mirablezero02 .list li {
    width: calc(100% / 3 - 15px * 2 / 3);
}
@media screen and (max-width: 767px){
    .mirablezero,
    .mirablezero02 {
        gap: 15px;
    }
    .mirablezero .item {
        width: 100%;
    }
    .mirablezero02 .item01,
    .mirablezero02 .item02 {
        width: 100%!important;
    }
}

/* section Brand*/
.sec-brand-body {
    padding: 60px 0 0;
}
.brand-map {
    max-width: 885px;
    margin: 55px auto 115px;
}
.brand-info {
    display: flex;
    gap: 5%;
    align-items: flex-end;
    margin-bottom: 40px;
    max-width: 1130px;
    margin: 0 auto 100px;
}
.brand-info .item:nth-child(1) { width: 49%;}
.brand-info .item:nth-child(2) { flex: 1;}  
.bran-list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2.1%;
    max-width: 1130px;
    margin: auto; 
}
.bran-list .item {
    margin-top: 2%;
}
.bran-list .item:nth-child(1) {
    width: 43.9%;
    margin-top: -0.5%;
}
.bran-list .item:nth-child(2) {
    width: 23.9%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.bran-list .item:nth-child(3) { width: 28%;}
.bran-list .item:nth-child(4) { width: 22.8%;}
.bran-list .item:nth-child(5) { width: 48.7%;}
.bran-list .item:nth-child(6) { width: 24.3%;}
.bran-list .ttl {
    font-size: clamp(1.1rem, 0.773809523vw, 1.3rem);
    line-height: 1.4;
    margin-top: 5px;
}
.bran-list .txt {
    font-size: clamp(1rem, 0.714285714vw, 1.2rem);
    line-height: 1.4;
    margin-right: -10px;
    margin-bottom: 10px;
}
.brand-bnr {
    max-width: 1000px;
    margin: clamp(40px, 9.5238095238095238095vw, 160px) auto 0;
    position: relative;
    padding-bottom: clamp(40px, 3.8690476190476190476vw, 65px);
}
.brand-bnr a {
    display: block;
    transition: all .3s;
}
.brand-bnr a:hover {
    opacity: .8;
}
.brand-bnr .brand-bnr-line {
    background-color: #383839;
    height: clamp(25px, 1.7857142857142857143vw, 30px);
    width: 1px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    animation: lineMoveY 1.25s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}
@keyframes lineMoveY {
    100% {
        height: 0;
    }
    0% {
        height: clamp(25px, 1.7857142857142857143vw, 30px);
    }
}
@media screen and (max-width: 767px){
    .sec-brand-body {
        padding: 0px 0 0;
    }
    .brand-map { margin: 30px auto 30px;}
    .brand-info {
        flex-wrap: wrap;
        gap: 30px;
        margin-bottom: 60px;
    }
    .brand-info .item:nth-child(2),
    .brand-info .item:nth-child(1) {
        width: 100%;
    }
    .bran-list .item:nth-child(1) {
        width: 100%;
        margin-top: 0;
    }
    .bran-list .item:nth-child(2) { width: 41%;}
    .bran-list .item:nth-child(3) { width: 56.9%;}
    .bran-list .item:nth-child(4) {
       order: 6;
       width: 47.8%;
    }
    .bran-list .item:nth-child(5) {
       order: 5;
       width: 100%;
    }
    .bran-list .item:nth-child(6) {
       order: 7;
       width: 50.1%;
    }
    .bran-list .txt {
        margin-right: 0;
    }
}