@charset "utf-8";

.mv{
    background: var(--green);
    position: relative;
    padding: 14vw 0 5vw;
}
.mv:before{
    content: "";
    display: block;
    background: url("../img/mv.svg") center right / cover no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    z-index: 1;
}
.mv-wrap{
    width: 85%;
    margin: 0 auto;
    background: #fff;
}
.mv-catch{
    width: 43%;
    margin: 0 0 0 auto;
    padding: 5vw 7vw 5vw 0;
    z-index: 2;
    position: relative;
}
.mv-scroll{
    display: block;
    text-align: center;
    color: var(--black);
    padding: 0.5em 0;
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}
.mv-scroll:after{
    content: "";
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    border-left: 3px solid var(--black);
    border-bottom: 3px solid var(--black);
    transform: rotate(-45deg);
    transform-origin: top;
}
.mv-scroll:hover{
    color: var(--yellow);
}
.mv-scroll:hover:after{
    border-left: 3px solid var(--yellow);
    border-bottom: 3px solid var(--yellow);
}
@media screen and (max-width: 980px) {
    .mv{
        padding: 20vw 0 5vw;
    }
    .mv-catch {
        width: 60%;
        padding: 5vw 5vw 5vw 0;
    }
}
@media screen and (max-width: 680px) {
    .mv{
        padding: 30vw 0 5vw;
    }
    .mv:before {
        width: 65%;
    }
    .mv-catch {
        width: 83%;
        padding: 30vw 1em 10vw 0;
        margin-right: -8%;
    }
    .mv-scroll {
        left: 60%;
    }
}
/*MOVIE*/
.movie {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-top: -1px;
}
.movie video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}
.movie video.sp{
    display: none;
}
@media (max-width: 1280px) {
    .movie {
        aspect-ratio: auto;
        height: 56.25vw;
        min-height: 520px;
    }
}
@media (max-width: 980px) {
    .movie {
        height: 70vw;
        min-height: inherit;
    }
}
@media (max-width: 680px) {
    .movie video.pc{
        display: none;
    }
    .movie video.sp{
        display: block;
    }
    .movie {
        height: auto;
    }
}
/*T2T*/
.t2t{
    text-align: center;
    padding: 10% 0;
    position: relative;
    overflow: hidden;
    margin-top: -1px;
}
.t2t:before,
.t2t:after{
    content: "";
    display: block;
    position: absolute;
    top: -2%;
    width: 40%;
    height: 104%;
    z-index: 0;
}
.t2t:before{
    background: url("../img/mv_green.svg") center right / cover no-repeat;
    left: 0;
}
.t2t:after{
    background: url("../img/mv_green.svg") center right / cover no-repeat;
    right: 0;
    transform: scale(-1, 1);
}
.t2t-stroke{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 56%;
    transform: translateX(-50%) translateY(-50%);
    z-index: -1;
}
.t2t-stroke svg{
    max-width: 100%;
    height: 100%;
}
.t2t-wrap{
    display: inline-block;
    text-align: left;
    position: relative;
    z-index: 5;
    padding-left: 3em;
}
.t2t-p{
    margin-bottom: 7px;
}
.t2t-p span,
.t2t-h1 span{
    display: inline-block;
    background: var(--black);
    color: #fff;
    font-size: clamp(28px, 3.6vw, 60px);
    font-weight: 900;
    font-family: 'A+mfCv-AXIS Font ベーシック M ProN';
    line-height: 1;
}
.t2t-p br{
    display: none;
}
.t2t-catch{
    margin-bottom: 7px;
    position: relative;
}
.t2t-catch b{
    display: inline-block;
    font-size: clamp(74px, 10vw, 180px);
    font-weight: 900;
    font-family: 'A+mfCv-AXIS Font ベーシック B ProN';
    line-height: 1;
    color: #fff;
    letter-spacing: -0.08em;
    position: relative;
    z-index: 2;
}
.t2t-catch br{
    display: none;
}
.t2t-catch b:before{
    content: "";
    display: block;
    font-size: clamp(74px, 10vw, 180px);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--black);
    z-index: -1;
}
.t2t-catch b:last-child:before{
    width: 3.1em;
}
.t2t-text{
    text-align: center;
    margin: 5em auto 0;

}
.t2t-text span{
    display: inline-block;
    position: relative;
}
.t2t-text span b{
    position: relative;
    z-index: 1;
    font-size: clamp(27px, 5vw, 110px);
    letter-spacing: 0.2em;
    line-height: 1;
    display: inline-block;
    margin-left: 0.3em;
    transform: scale(1.25, 1);
}
.t2t-text span:after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scale(1.25, 1);
    background: #fff;
    z-index: 0;
}
@media (max-width: 1280px) {
    .t2t {
        padding: 15% 0;
    }
    .t2t-stroke{
        width: 90%;
    }
}
@media (max-width: 980px) {
    .t2t-wrap{
        padding-left: 0;
    }
}
@media (max-width: 680px) {
    .t2t-p br,
    .t2t-catch br{
        display: block;
    }
    .t2t-catch b,
    .t2t-catch b:before{
        font-size: 16vw;
        margin-bottom: 7px;
    }
    .t2t-p span,
    .t2t-h1 span {
        font-size: 6vw;
    }
    .t2t-p,
    .t2t-catch b:last-child{
        margin-bottom: 0;
    }
    .t2t-stroke{
        width: 120%;
    }
    .t2t-text {
        margin: 2em auto 0;
    }
    .t2t-text span b{
        margin-left: 0.15em;
    }
}
/*CONCEPT*/
.concept{
    background: var(--black);
    padding: 7em 0;
}
.concept-p{
    width: 77%;
    max-width: 1280px;
    color: var(--gray);
    margin: 0 auto;
    text-align: justify;
}
.concept-p,
.concept-p span{
    font-size: clamp(24px, 2.7vw, 48px);
    font-family: 'A+mfCv-AXIS Font ベーシック H ProN';
    font-weight: normal;
    line-height: 1.2;
}
.concept-p span{
    color: #fff;
    display: inline-block;
}
.concept-footer{
    background: #fff;
    padding: 0 !important;
}
.concept-footer .concept-p{
    color: var(--black);
    position: relative;
    font-family: 'A+mfCv-AXIS Font ベーシック H ProN';
    font-weight: normal;
}
.concept-footer .concept-p:before{
    content: "";
    display: block;
    width: 83%;
    height: 0.2em;
    background: var(--yellow);
    margin-bottom: 1em;
}
.concept-footer .concept-p span{
    color: var(--yellow);
}
.concept-footer .link span{
    color: var(--black);
}
.concept-footer .link span.orb{
    font-weight: 700;
}
@media (max-width: 1280px) {
    .concept{
        padding: 5em 0;
    }
}
@media (max-width: 980px) {
    .concept-p{
        width: 85%;
    }
}
@media (max-width: 680px) {
    .concept-p{
        width: 90%;
    }
    .concept-p,
    .concept-p span{
        font-size: clamp(19px, 2.7vw, 48px);
        line-height: 1.3;
    }
}


/*MARQUEE*/
.marquee-wrap{
    overflow: hidden;
}
.marquee-wrap{
    padding: 5em 0;
}
.marquee {
    overflow: hidden;
    width: 100%;
    background: #fff;
    white-space: nowrap;
}
.marquee-en,
.marquee-jp {
    display: flex;
    width: max-content;
    animation-name: scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.marquee-en {
    animation-duration: 30s;
}
.marquee-jp {
    animation-duration: 20s;
}
.marquee-en span,
.marquee-jp span {
    flex: 0 0 auto;
    padding-right: 0.25em;
    color: #fff;
    -webkit-text-stroke: 1px #000;
    text-stroke: 1px #000;
    line-height: 1;
}
.marquee-en span {
    font-family: "Open Sans", sans-serif;
    font-weight: 800;
    font-size: clamp(52px, 12vw, 140px);
    letter-spacing: -0.09em;
}
.marquee-jp span{
    font-family: "ゴシックMB101 B";
    font-size: clamp(30px, 6vw, 67px);
    letter-spacing: -0.02em;
}
.marquee-en span:nth-child(even) {
    color: #000;
    -webkit-text-stroke: 0;
}
.marquee-jp span:nth-child(odd) {
    color: #000;
    -webkit-text-stroke: 0;
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@media (max-width: 780px) {
    .marquee-wrap{
        padding: 3em 0;
    }
}

/*SERVICE*/
.service{
    width: 90%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.service:before{
    content: "";
    display: block;
    width: clamp(300px, 80vw, 1080px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1em dashed #ddd;
    position: absolute;
    top: 14%;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    animation: rotateCircle 30s linear infinite;
}
@keyframes rotateCircle {
    from {
        transform: translateX(-50%) rotate(0deg);
    }
    to {
        transform: translateX(-50%) rotate(360deg);
    }
}
.service-item{
    display: grid;
    grid-template-columns: 22em 22em minmax(0, 22em);
    justify-content: center;
    gap: 1em 3em;
    margin-bottom: 8em;
}
.service-h2{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}
.service-h3{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
.service-summary{
    grid-column: 2 / 4;
    grid-row: 3 / 4;
}
.service-detail{
    grid-column: 1 / 2;
    grid-row: 2 / 4;
}
.service-detail p{
    text-align: justify;
    font-family: 'A+mfCv-AXIS Font ベーシック R ProN';
}
.service-list{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}
.service-img{
    grid-column: 3 / 4;
    grid-row: 1 / 4;
}
.service-item:nth-child(even){
    grid-template-columns: minmax(0, 22em) 22em 22em;
}
.service-item:nth-child(even) .service-h3{
    grid-column: 3 / 4;
}
.service-item:nth-child(even) .service-summary{
    grid-column: 1 / 3;
    padding-left: 1em;
}
.service-item:nth-child(even) .service-detail{
    grid-column: 3 / 4;
}
.service-item:nth-child(even) .service-img{
    grid-column: 1 / 2;
}
.service-h2{
    font-size: clamp(24px, 3vw, 42px);
    line-height: 1.3;
}
.service-h2:after{
    content: "";
    display: block;
    width: 4em;
    height: 0.2em;
    background: var(--yellow);
    margin: 0.1em 0 1.3em;
}
.service-h3{
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1;
}
.service-h4{
    margin-bottom: 0.5em;
    position: relative;
}
.service-h4 span{
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1;
    position: relative;
    z-index: 1;
}
.service-h4:before{
    content: "";
    display: block;
    width: 1.5em;
    height: 1.5em;
    font-size: clamp(28px, 3vw, 42px);
    background: url("../img/wq.svg") top left / contain no-repeat;
    position: absolute;
    top: -0.8em;
    left: -0.3em;
    z-index: 0;
}
.service-summary{
    margin-top: 2em;
}
.service-summary p{
    font-size: clamp(18px, 1.6vw, 21px);
    line-height: 1.6;
}
.service-list a{
    display: block;
    color: var(--black);
    font-size: clamp(24px, 2.4vw, 28px);
    font-weight: 700;
    line-height: 1.3;
    pointer-events: none;
    white-space: nowrap;
}
@media (max-width: 1380px) {
    .service-summary p br{
        display: none;
    }
}
@media (max-width: 980px) {
    .service-item{
        grid-template-columns: 1fr 1fr;
        gap: 0 2em;
        margin-bottom: 8em;
        padding-left: 1em;
    }
    .service-h2{
        grid-column: 1 / 2;
        grid-row: 3 / 4;
        text-align: right;
    }
    .service-h2:after{
           margin: 0.1em 0 1.3em auto;
    }
    .service-h3{
        grid-column: 1 / 3;
        text-align: center;
        margin-bottom: 0.5em;
    }
    .service-summary{
        grid-column: 1 / 3;
        grid-row: 6 / 7;
        margin: 2em 0;
    }
    .service-detail{
        grid-column: 1 / 3;
        grid-row: 7 / 8;
    }
    .service-list{
        grid-column: 1 / 2;
        grid-row: 4 / 5;
        text-align: right;
        margin-bottom: 2em;
    }
    .service-img{
        grid-column: 2 / 3;
        grid-row: 2 / 6;
        max-width: 20em;
        align-content: center;
    }
    .service-summary p {
        line-height: 1.4;
    }
    .service-item:nth-child(even){
        grid-template-columns: 1fr 1fr;
        gap: 0 2em;
    }
    .service-item:nth-child(even) .service-h2{
        grid-column: 2 / 3;
        grid-row: 3 / 4;
        text-align: left;
    }
    .service-item:nth-child(even) .service-h2:after{
           margin: 0.1em auto 1.3em 0;
    }
    .service-item:nth-child(even) .service-h3{
        grid-column: 1 / 3;
        text-align: center;
        margin-bottom: 0.5em;
    }
    .service-item:nth-child(even) .service-summary{
        grid-column: 1 / 3;
        grid-row: 6 / 7;
        padding-left: 0;
    }
    .service-item:nth-child(even) .service-detail{
        grid-column: 1 / 3;
        grid-row: 7 / 8;
    }
    .service-item:nth-child(even) .service-list{
        grid-column: 2 / 3;
        grid-row: 4 / 5;
        text-align: left;
    }
    .service-item:nth-child(even) .service-img{
        grid-column: 1 / 2;
        grid-row: 2 / 6;
        margin: 0 0 0 auto;
        align-content: center;
    }
    .service-h2:after {
        margin: 0.1em 0 0.5em auto;
    }
    .service-item:nth-child(even) .service-h2:after {
        margin: 0.1em auto 0.5em 0;
    }
}
@media (max-width: 480px) {  
    .service{
        overflow: visible;
    }
    .service-item{
        grid-template-columns: 15em minmax(100px, 1fr);
        gap: 0 1em;
        margin-bottom: 5em;
        padding-right: 1em;
    }
    .service:before{
        display: none;
    }

    .service-item:nth-child(even) {
        grid-template-columns: minmax(100px, 1fr) 14em;
        gap: 0 1em;
    }
    .service-list a {
        font-size: clamp(16px, 2.4vw, 28px);
    }
    .service-summary {
        margin: 1em 0;
    }
    .service-list {
        margin-bottom: 1em;
    }
    .service-detail p{
        line-height: 1.6;
    }
}
/*MESSAGE*/
.message{
    width: 90%;
    margin: 0 auto;
}
.message-p{
    display: inline-block;
    font-size: clamp(48px, 8vw, 160px);
    line-height: 1.1;
}
.message-p:after{
    content: "";
    display: block;
    width: 100%;
    height: 0.1em;
    background: var(--yellow);
    margin-top: 0.3em;
}
@media (max-width: 980px) {
    .message-p{
        font-size: 11vw;
    }
    .message-p:after{
        height: 0.15em;
    }
}
/*FIELDS*/
.field{
    width: 90%;
    margin: 0 auto;
}
.field-wrap{
    margin-bottom: 5em;
}
.field-h3{
    border: 2px solid var(--black);
    padding: 0.2em 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 60%;
    max-width: 1200px;
}
.field-h3 span{
    display: inline-block;
    font-size: clamp(28px, 4vw, 68px);
    line-height: 1;
}
.field-h3 b{
    display: inline-block;
    font-size: clamp(14px, 2vw, 48px);
    line-height: 1;
    font-family: 'A+mfCv-AXIS Font ベーシック H ProN';
    font-weight: normal;
}
.field-lead{
    font-size: clamp(16px, 2.8vw, 58px);
    line-height: 1.4;
    margin: 1em 0;
}
.field-area {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}
.field-area:after {
    content: "";
    display: block;
    clear: both;
}
.field-shape {
    float: left;
    width: 55%;
    display: block;
    shape-outside: url("../img/matrix.svg");
    -webkit-shape-outside: url("../img/matrix.svg");
    shape-image-threshold: 0.1;
    -webkit-shape-image-threshold: 0.1;
}
.field-text p {
    margin: 0;
    font-size: clamp(15px, 1.8vw, 21px);
    padding-top: 3em;
    text-align: justify;
    font-family: 'A+mfCv-AXIS Font ベーシック R ProN', sans-serif;
}
.field-wrap:nth-child(even) .field-h3{
    margin: 0 0 0 auto;
}
.field-wrap:nth-child(even) .field-h3 b{
    order: 0;
}
.field-wrap:nth-child(even) .field-h3 span{
    order: 1;
}
.field-wrap:nth-child(even) .field-lead{
    text-align: right;
}
.field-img{
    display: flex;
    flex-wrap: wrap;
}
.field-img_item{
    width: 50%;
    aspect-ratio: 1.618 / 1;
    position: relative;
}
.field-web{
    position: relative;
}
.field-img .swiper-slide{
    position: relative;
}
.field-img_item:before{
    content: "";
    display: block;
    background-color: transparent;
    background-image: radial-gradient(circle, #000000 0.5px, transparent 0.5px);
    background-position: 0 0;
    background-size: 3px 3px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.field-img .swiper-slide img{
    object-fit: cover;
    aspect-ratio: 1.618 / 1;
}
.field-img_list{
    position: absolute;
    bottom: 1em;
    right: 1em;
    text-align: right;
    z-index: 3;
}
.field-img_h5{
    display: inline-block;
    background: var(--black);
    color: #fff;
    line-height: 1;
    font-size: clamp(24px, 3vw, 44px);
    margin-bottom: 0.5em;
}
.field-img_ul li{
    line-height: 1;
    margin-bottom: 0.2em;
}
.field-img_ul a{
    pointer-events: none;
    display: inline-block;
    background: var(--black);
    color: #fff;
    line-height: 1;
    font-size: clamp(18px, 2vw, 32px);
}
.field-flow{
    position: relative;
}
.flow-circle{
    position:absolute;
    width:clamp(300px,80vw,1080px);
    aspect-ratio:1/1;
    top:22%;
    left:45%;
    transform:translateX(-50%);
    z-index:-1;
    animation: rotateCircle 30s linear infinite;
}
.flow-circle circle{
    fill:none;
    stroke: var(--yellow);
    stroke-width:2;
    stroke-dasharray: 1.5 1.1;
}
.field-flow_title{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0 2em;
}
.field-flow_img{
    width: clamp(100px, 14vw, 200px);
    position: relative;
}
.field-flow_img:before{
    content: "";
    display: block;
    width: 1px;
    height: 200%;
    border-left: 0.5em dashed var(--yellow);
    position: absolute;
    top: 1em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}
.field-flow_img img{
    position: relative;
    z-index: 2;
}
.field-flow_h4 .en{
    display: block;
    font-size: clamp(21px, 3vw, 48px);
    line-height: 1.2;
}
.field-flow_h4 .axisb{
    display: inline-block;
    font-size: clamp(14px, 2vw, 38px);
    line-height: 1.3;
}
.field-flow_h4 br{
    display: none;
}
.field-flow_detail{
    padding-left: 2em;
    position: relative;
}
.field-flow_detail:before{
    content: "";
    width: 5px;
    height: 100%;
    background: var(--black);
    position: absolute;
    top: 0;
    left: 0;
}
.field-flow_h5{
    font-size: clamp(23px, 2.4vw, 32px);
    margin-bottom: 0.5em;
    line-height: 1;
    font-family: 'A+mfCv-AXIS Font ベーシック H ProN';
    font-weight: normal;
}
.field-flow_ul li{
    font-size: clamp(14px, 1.4vw, 21px);
}
.field-flow{
    display: grid;
    grid-template-columns: minmax(1fr, 40em) 20em 20em;
    justify-content: center;
    gap: 5em 2em;
}
.field-flow_title.objective{
    grid-column: 1 / 2;
    grid-row: 2;
}
.field-flow_title.insight{
    grid-column: 1 / 2;
    grid-row: 3;
}
.field-flow_title.strategy{
    grid-column: 1 / 2;
    grid-row: 4;
}
.field-flow_title.creative{
    grid-column: 1 / 2;
    grid-row: 5;
}
.field-flow_title.activation{
    grid-column: 1 / 2;
    grid-row: 6;
}
.field-flow_detail.consult{
    grid-column: 2 / 3;
    grid-row: 1 / 4;
    padding-top: 5em;
}
.field-flow_detail.consult:before{
    top: 5em;
    height: calc(100% - 7em);
}
.field-flow_detail.strategy{
    grid-column: 2 / 3;
    grid-row: 4 / 5;
    margin-top: -5em;
}
.field-flow_detail.branding{
    grid-column: 3 / 4;
    grid-row: 4 / 5;
    padding-top: 5em;
    margin-left: -2em;
}
.field-flow_detail.branding:before{
    top: 5em;
    height: 120%;
}
.field-flow_detail.creative{
    grid-column: 3 / 4;
    grid-row: 5 / 6;
    margin-left: 1em;
}
.field-flow_detail.activation{
    grid-column: 2 / 3;
    grid-row: 6 / 7;
}
.field-flow_title.activation .field-flow_img:before{
    height: 120%;
}
.field-img_item:nth-child(3){
    background: url("../img/creative03.webp") center / cover;
}
@media (max-width: 1280px) {
    .field-flow_title{
        gap: 0 1em;
    }
}
@media (max-width: 980px) {
    .field-h3{
        width: 90%;
    }
    .field-text p {
        padding-top: 5em;
    }
    .field-img_item{
        width: 100%;
    }
    .field-img_h5 {
        font-size: clamp(24px, 6vw, 44px);
    }
    .field-img_ul a {
        font-size: clamp(18px, 3vw, 32px);
    }
    .field-img_item:nth-child(even) .field-img_list{
        margin: 0 0 0 auto;
        text-align: right;
    }
    .field-flow{
        grid-template-columns: minmax(1fr, 40em) 20em;
        gap: 3em 0;
    }
    .field-flow_detail{
        margin-left: 2em !important;
    }
    .field-flow_detail:before{
        height: 120% !important;
        top: 0 !important;
    }
    .field-flow_detail:last-child:before{
        height: 100% !important;
    }
    .field-flow_detail.strategy{
        margin-top: 0;
    }
    .field-flow_detail.branding {
        grid-column: 2 / 3;
        grid-row: 5 / 6;
        padding-top: 0;
        margin-left: 0;
    }
    .field-flow_detail.branding:before {
        top: 0;
    }
    .field-flow_title.creative{
        grid-row: 5 / 7;
    }
    .field-flow_title.strategy .field-flow_img:before,
    .field-flow_title.creative .field-flow_img:before{
        height: 320%;
    }
    .field-flow_detail.creative{
        grid-column: 2 / 3;
        grid-row: 6 / 7;
        margin-left: 0;
    }
    .field-flow_title.activation,
    .field-flow_detail.activation{
        grid-row: 7 / 8;
    }
    .field-flow_ul li {
        font-size: clamp(12px, 2vw, 21px);
    }
}
@media (max-width: 680px) {
    .field-h3{
        width: 100%;
    }
    .field-wrap:nth-child(even) .field-lead{
        text-align: left;
    }
    .field-lead br{
        display: none;
    }
    .field-text p {
        padding-top: 0;
        line-height: 1.5;
    }
    .field-flow_h4 br{
        display: block;
    }
    .field-flow_detail {
        margin-left: 1em !important;
    }
}
@media (max-width: 580px) {
    .flow-circle{
        display: none;
    }
    .field-flow_title{
        display: block;
        text-align: center;
        z-index: 2;
    }
    .field-flow_h4{
        position: relative;
        z-index: 2;
    }
    .field-flow_img{
        margin: 0 auto;
    }
    .field-flow_img:before{
        display: none;
    }
    .field-img .swiper-slide img{
        aspect-ratio: 1.3 / 1;
    }
}
@media (max-width: 480px) {
    .field-h3{
        width: 100%;
        flex-wrap: wrap;
        padding: 0.4em 0;
    }
    .field-h3 span,
    .field-h3 b{
        width: 100%;
        text-align: center;
    }
    .field-shape {
        width: 60%;
    }
    .field-flow {
        gap: 1.5em 0;
    }
    .field-flow_detail {
        margin-left: 0.5em !important;
        padding-left: 1em;
        padding-bottom: 1em;
    }
}
/*ABOUT*/
.about-lead {
    display: inline-block;
    text-align: left;
    font-size: 4.8vw;
    padding: 0 1em;
    line-height: 1;
}
.about-t2t {
    text-align: center;
    font-size: 7vw;
    line-height: 1;
    margin: 0 auto 0.5em 0.5em;
    letter-spacing: -0.1em;
}
.about-mv img{
    object-fit: cover;
    aspect-ratio: 4 / 1;
    object-position: center top;
}
.about-mission{
    background: linear-gradient(
    180deg, #fff 0%, #fff 64.5%, var(--yellow) 64.5%, var(--yellow) 100%);
}
.about-vision{
    background: linear-gradient(
    180deg, var(--yellow) 0%, var(--yellow) 64.5%, var(--black) 64.5%, var(--black) 100%);
}
.about-value{
    background: var(--black);
}
.about-principle{
    background: linear-gradient(
    180deg, var(--black) 0%, var(--black) 45%, var(--green) 45%, var(--green) 100%);
}
.about-content{
    margin: 0 auto;
    width: 90%;
    max-width: 1280px;
    border: 1px solid var(--black);
}
.about-mission .about-content{
    background: #fff;
}
.about-vision .about-content{
    background: var(--yellow);
}
.about-value .about-content{
    background: var(--black);
    border: 1px solid #fff;
}
.about-value .about-content{
    background: var(--black);
    border: 1px solid #fff;
}
.about-vision .about-content{
    background: url(../img/vision.webp) center / cover;
}
.about-value .about-content{
    background: url(../img/value.webp) center / cover;
}
.about-principle .about-content{
    background: url(../img/principle.webp) center top / cover repeat-y;
}
.about-principle .about-content2{
    background: url(../img/principle.webp) center bottom / contain repeat-y;
    padding-bottom: clamp(320px, 32vw, 480px);
}
.about-title{
    padding: 0.5em 5%;
    font-size: clamp(24px, 3vw, 48px);
    border-bottom: 1px solid var(--black);
    line-height: 1;
    letter-spacing: 0.2em;
    margin-bottom: 0;
}
.about-vision .about-title{
    background: var(--yellow);
}
.about-value .about-title{
    background: var(--black);
    border-bottom: 1px solid #fff;
    color: #fff;
}
.about-principle .about-title{
    background: var(--green);
    border-bottom: 1px solid var(--black);
}
.about-wrap{
    padding: 5em 5% 1em;
    position: relative;
    z-index: 0;
    overflow: hidden;
}
.about-stroke{
    width: 105%;
    position: absolute;
    top: 55%;
    left: 1em;
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
}
.about-stroke svg{
    display: block;
    width: 100%;
    height: auto;
}
.about-h2,
.about-h3,
.about-h2_en{
    position: relative;
    z-index: 2;
}
.about-h2 span,
.about-h2_en span,
.about-h3 span{
    display: inline;
    border: 1px solid var(--black);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0;
    font-family: 'A+mfCv-AXIS Font ベーシック H ProN';
    font-weight: normal;
}
.about-principle .about-text span,
.about-principle .about-h2 span,
.about-principle .about-h2_en span,
.about-principle .about-h3 span,
.about-vision .about-h2 span,
.about-vision .about-h2_en span,
.about-vision .about-h3 span{
    background: var(--black);
    color: #fff;
}
.about-value .about-h2 span,
.about-value .about-h2_en span,
.about-value .about-h3 span{
    background: #fff;
}
.about-h2 span{
    line-height: 1;
    font-size: clamp(26px, 6vw, 54px);
}
.about-h2_en span{
    font-size: clamp(28px, 5vw, 54px);
    line-height: 1;
}
.about-h3 span{
    font-size: clamp(18px, 2.4vw, 38px);
    line-height: 1;
}
.about-vision .about-h3 span,
.about-value .about-h3 span{
    font-size: clamp(21px, 5vw, 68px);
    letter-spacing: 0.1em;
}
.about-principle .about-h3 span br,
.about-value .about-h3 br{
    display: none;
}
.about-text_wrap{
    padding: 0 1em 5em 0;
    position: relative;
    z-index: 2;
}
.about-text p span{
    display: inline;
    padding: 0.2em 0.3em;
    border: 1px solid var(--black);
    border-left: none;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: var(--black);
    font-size: clamp(14px, 1.4vw, 18px);
    line-height: 1;
    font-family: 'A+mfCv-AXIS Font ベーシック R ProN';
}
.about-text p{
    margin-bottom: 0;
    line-height: 1.55;
}
.about-vision .about-text p span{
    background: var(--black);
    color: #fff;
}
.about-value .about-text p span{
    background: #fff;
}
.about-principle_ol{
    width: 90%;
    margin: 0 auto;
    background: var(--black);
    padding: 5em;
    color: #fff;
}
.about-principle_ol li{
    margin-bottom: 2em;
}
.about-principle_h4{
    font-size: clamp(21px, 2vw, 28px);
    margin-bottom: 0.5em;
    line-height: 1.3;
}
.about-principle_h4 br{
    display: none;
}
.about-principle_h4:before{
    content: "";
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background: url("../img/wqg.svg") center / contain no-repeat;
    margin-right: 5px;
    margin-top: -0.2em;
}
.about-principle_ol p{
    font-family: 'A+mfCv-AXIS Font ベーシック R ProN';
}
.about-principle .link span{
    color: var(--black);
}
.about-principle .link span.orb{
    font-weight: 700;
}
.about-principle .link:after,
.about-principle .link:before {
    background: var(--black);
}
.about-principle .link:hover span{
    color: #fff;
}
.about-principle .link:hover:after,
.about-principle .link:hover:before {
    background: #fff;
}
@media (max-width: 1780px) {
    .about-h3 span {
        padding: 0.03em 0;
    }
}
@media (max-width: 980px) {
    .about-stroke {
        overflow: hidden;
    }
    .about-stroke svg {
        width: 150%;
    }
    .gmap{
        padding-bottom: 70%;
    }
    .about-principle .about-content2{
        background: url(../img/principle.webp) center bottom / 130% repeat-y;
        padding-bottom: clamp(250px, 42vw, 400px);
    }
    .about-principle_ol {
        padding: 3em;
    }
    .about-text p span br{
        display: none;
    }
}
@media (max-width: 580px) {
    .about-t2t {
        font-size: 10vw;
    }
    .about-stroke svg {
        width: 200%;
    }
    .about-principle .about-content2{
        padding-bottom: clamp(160px, 42vw, 400px);
    }
    .about-principle_ol {
        padding: 3em 1em;
    }
    .about-principle_h4 br{
        display: block;
    }
    .about-principle_ol p{
        text-align: justify;
    }
    .about-principle_ol p br{
        display: none;
    }
    .about-text p span{
        padding: 0.3em;
    }
}
@media (max-width: 480px) {
    .about-h2_en span {
        font-size: 5.6vw;
    }
    .about-vision .about-h2_en span,
    .about-value .about-h2_en span,
    .about-principle .about-h3 span,
    .about-principle .about-h2_en span{
        font-size: 8vw;
    }
    .about-vision .about-h3 span,
    .about-value .about-h3 span{
        font-size: 10vw;
    }
    .about-principle .about-h3 span br,
    .about-value .about-h3 br{
        display: block;
    }
    .about-lead {
        font-size: 8vw;
    }
}

/*ABOUT*/
.about-profile{
    width: 90%;
    max-width: 980px;
    margin: 0 auto;
}
.about-profile_h3{
    font-size: clamp(24px, 2vw, 34px);
    letter-spacing: 0.3em;
}
.about-profile_table th,
.about-profile_table td{
    text-align: left;
    padding: 1.5em 0;
    font-size: clamp(14px, 1.4vw, 21px);
    vertical-align: top;
    font-weight: 700;
}
.about-profile_table td a,
.about-profile_table td p,
.about-profile_table td span{
    font-size: clamp(14px, 1.4vw, 21px);
    font-weight: 700;
    line-height: 1.3;
}
.about-profile_table td a.tel{
    font-weight: 500;
    color: var(--black);
}
.about-profile_table th{
    width: 7em;
    font-weight: normal;
}
.about-profile_table td,
.about-profile_table td li{
    font-family: 'A+mfCv-AXIS Font ベーシック R ProN', sans-serif;
}
.about-profile_ul{
    padding-left: 1.2em;
}
.about-profile_ul li{
    line-height: 1.3;
    margin-bottom: 0.5em;
    font-size: clamp(14px, 1.4vw, 21px);
    padding-left: 1em;
    text-indent: -1em;
}
.about-profile_ul li:before{
    content: "●";
    display: inline-block;
    font-size: 80%;
    margin-right: 5px;
    margin-top: -0.2em;
}
.about-profile_ol li{
    font-size: clamp(13px, 1.2vw, 16px);
    line-height: 1.4;
    margin-bottom: 1.5em;
    padding-left: 1em;
    text-indent: -1em;
}
.about-profile_ol li:before{
    content: "・";
}
.gmap{
    padding-bottom: 40%;
}
.about-hello{
    display: block;
    width: clamp(300px, 35vw, 680px);
    margin-top: 2em;
}
.about-hello:hover{
    opacity: 0.7;
}
@media (max-width: 480px) {
    .about-profile_table,
    .about-profile_table tbody,
    .about-profile_table tr,
    .about-profile_table th,
    .about-profile_table td{
        display: block;
        width: 100%;
        padding: 0;
    }
    .about-profile_table tr{
        padding: 1.5em 0;
    }
    .about-profile_table th{
        font-size: clamp(21px, 2vw, 28px);
        margin-bottom: 0.5em;
    }
    .gmap{
        padding-bottom: 100%;
    }
}

/*CONTACT*/
.contact{
    width: 85%;
    margin: 0 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.contact-hello{
    width: 40%;
}
.contact-h3{
    width: 55%;
    font-size: clamp(24px, 3vw, 48px);
    border-bottom: 7px solid var(--yellow);
}
.contact-cf7{
    width: 70%;
    max-width: 1280px;
    margin: 0 auto 0 5%;
}
.contact-item{
    margin-bottom: 2em;
}
.contact-item h5{
    font-weight: normal;
    font-size: clamp(13px, 1.2vw, 16px);
    letter-spacing: 0.2em;
}
.contact-item h5 b{
    font-weight: normal;
    font-size: 11px;
    vertical-align: top;
}
.contact-field input[type="text"],
.contact-field input[type="tel"],
.contact-field input[type="email"]{
    padding: 1em;
    border: 1px solid var(--black);
    font-size: 16px;
    width: 100%;
}
.contact-field textarea{
    width: 100%;
    padding: 1em;
    height: 15em;
    font-size: 16px;
    line-height: 1.4;
}
.wpcf7-list-item{
    margin-right: 1.5em;
}
.wpcf7-list-item:has(label){
    margin-left: 0;
}
.wpcf7-list-item-label{
    font-size: 16px;
}
.contact-accept{
    display: flex;
}
.contact-accept .wpcf7-list-item{
    margin-right: 0.5em;
}
.contact-accept .wpcf7-list-item-label{
    display: none;
}
.contact-accept br{
    display: none;
}
.contact-accept input[type="checkbox"] {
  position: relative;
  width: 30px;
  height: 30px;
  border: 1px solid #000;
  vertical-align: -5px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.contact-accept input[type="checkbox"]:checked:before {
    position: absolute;
    top: 1px;
    left: 10px;
    transform: rotate(50deg);
    width: 7px;
    height: 20px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    content: '';
}
.contact-accept small{
    display: block;
    font-size: clamp(12px, 1.1vw, 14px);
    color: var(--gray);
}
.contact-accept small a{
    font-size: clamp(12px, 1.1vw, 14px);
    color: var(--black);
}
.your-touchpoint-error,
.your-acceptance-error{
    display: block;
    color: var(--red);
}
.contact-btn p{
    display: flex;
    justify-content: center;
    gap: 5px;
}
.cf7-submit-btn,
.cf7-back,
.cf7-confirm-btn{
    border: none;
    box-shadow: none;
    padding: 1em 2em;
    background: var(--yellow);
	font-size: clamp(14px, 1.3vw, 17px);
	line-height: 1.6;
    font-family: 'A+mfCv-AXIS Font ベーシック R ProN';
}
@media (max-width: 1380px) {
    .contact-cf7{
        width: 80%;
    }
}
@media (max-width: 980px) {
    .contact {
        width: 90%;
        margin: 0 auto;
    }
    .contact-h3 {
        width: 46%;
    }
    .contact-hello {
        width: 50%;
    }
    .contact-cf7{
        width: 90%;
    }
}
@media (max-width: 480px) {
    .contact-item h5{
        letter-spacing: 0;
    }
}
/*CONFIRM*/
.cf7-confirm-box .page-h4{
    font-size: clamp(21px, 2vw, 28px);
    margin-bottom: 0.5em;
}
.cf7-confirm-box h5{
    background: #eee;
    padding: 0.5em;
}
.cf7-confirm-area{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
.cf7-confirm-area.is-open{
    opacity: 1;
    visibility: visible;
}
.cf7-confirm-box{
    background: #fff;
    padding: 3em;
    max-width: 980px;
    width: 90%;
    height: 80vh;
    overflow-y: auto;
}
.confirm-item{
    background: var(--back);
    padding: 1em;
    margin-bottom: 1em;
}
.wpcf7-spinner {
    display: none;
}
.rate-limit-anchor input{
    display:none;
}
@media screen and (max-width: 680px) {
    .cf7-confirm-box{
        padding: 3em 1em;
    }
}
/*THANKS*/
.thanks-wrap{
    width: 90%;
    max-width: 980px;
    margin: 0 auto;
}
.thanks-h5{
    font-weight: normal;
    font-family: 'A+mfCv-AXIS Font ベーシック H ProN';
}
.thanks-address b,
.thanks-address p,
.thanks-address_cta span,
.thanks-address_cta a{
    font-style: normal;
    color: var(--black);
}
.thanks-address_cta{
    display: grid;
    grid-template-columns: 3em 1fr;
}
.thanks-wrap .btn-wrap{
    justify-content: flex-start;
}
@media screen and (max-width: 580px) {
    .thanks-wrap p br{
        display: none;
    }
}
/*TERMS*/
.terms{
    width: 90%;
    max-width: 980px;
    margin: 0 auto;
}
.terms-title{
    font-size: clamp(38px, 5vw, 68px);
    line-height: 1;
}
.terms-wrap{
    padding-left: 2em;
}
.terms-wrap h4{
    text-indent: -2em;
    margin-top: 3em;
    margin-bottom: 1em;
}
.terms-wrap a{
    color: var(--black);
    font-weight: bold;
    text-decoration: underline;
}
.terms-wrap a:hover{
    color: var(--yellow);
}
.terms-wrap li{
    list-style: disc outside;
}