#under-fv{
    padding-top: 12%;
}
#under-fv .fv-con-wrap{
    border-top: 3px solid var(--black);
    padding-top: 8%;

}
#under-fv .content-wrap{
    margin-bottom: 10%;
}
#under-fv .topics-ttl-wrap{
    margin-bottom: 0;
}

.fv-con-wrap .page-ttl h1{
    font-size: 128px;

}
.fv-con-wrap .page-ttl p{
    font-size: 28px;
    font-weight: 600;

}
#line-menu{
    display: flex;
    align-items: center;
    margin-top: 7%;
}
#line-menu a{
    font-size: 14px;
    color: var(--l-gray);
    transition: .3s;
    
}
#line-menu a:hover{
    filter: opacity(40%);

}
#line-menu a:first-child{
    position: relative;
    padding-left: 23px;

}
#line-menu a:first-child::before{
    content: '';
    background: url(../img/dot.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 15px;
    height: 15px;
    top: 0;
    left: 0;
    position: absolute;

}
#line-menu span{
    width: 7px;
    height: 14px;
    display: inline-block;
    margin: 0 1em;

}

/* テキスト関係 */
.sec-ttl{
    margin-bottom: 5em;
}
#txt-block{
    width: 80%;
}
.bold{
    font-weight: 600;
}

.sec-ttl .page-ttl-flex {
    display: flex;
    align-items: center;
}
.sec-ttl .page-ttl-flex div .sepa{
    width: 2px;
    height: 45px;
    background: var(--black);
    display: inline-block;
    margin: 0 20px;

}
.sec-ttl .page-ttl-flex div span{
    font-size: 28px;
    font-weight: 500;

}
.small-ttl{
    color: var(--l-gray);
    margin-bottom: 2em;
}
.en-txt {
    font-size: 48px;
    line-height: 1.6;
    font-weight: 500;
}
.ja-ttl {
    display: flex;
    align-items: center;
}


/* 共通 */
main{
    background-color: #F5F5F5;
}
section.bg-grad{
    background: -webkit-linear-gradient(top, #F5F5F5, #FAFAFA);
}
section{
    padding: 10% 0 15%;
}
.bg-gray{
    background: #E1E1E1;
}
.bg-f{
    background: #ffffff;
}
.bg-gray{
    background: var(--white);
}

/* aboutus */
#ceo .img-colum-area{
    display: flex;
    gap: 1%;

}
#ceo .img-colum-area div:nth-of-type(2) div:first-child{
    margin-bottom: 3%;

}
#ceo .txt-area{
    margin-top: 4em;
}
#ceo .txt-area .ceo-name{
    margin-bottom: 2em;

}
#ceo .txt-area .ceo-name p:first-of-type{
    font-size: 14px;

}

#ceo .txt-area .ceo-name p:last-of-type{
    font-size: 20px;

}
#ceo .txt-area .ceo-name p:last-of-type .zenkaku{
    margin-left: 10px;
}

#identity .page-ttl-flex{
    flex-direction: column;
    align-items: flex-start;
}
#identity .page-ttl-flex .ja-ttl {
    display: flex;
    align-items: center;
    margin-top: 1em;
}
#identity .sec-ttl .page-ttl-flex div .sepa {
    height: 40px;
    margin: 0 20px 0 0;
}
#identity .sec-ttl .page-ttl-flex div span {
    padding-bottom: 0;
}
#identity .content-wrap .img-area-pc{
    position: relative;
    margin-bottom: 3em;

}
#identity .content-wrap .img-area-pc img:last-of-type{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;

}
#identity .content-wrap .img-area-pc img{
    transition: .5s;
}
#identity .content-wrap .img-area-pc img:hover:last-of-type{
    opacity: 1;

}
#identity .content-wrap .img-area-pc img:hover:first-of-type{
    opacity: 0;

}
#identity .content-wrap .img-area{
    margin-top: 3em;

}
.color,.motif{
    margin-top: 6%;
}
.color .color-block {
    display: flex;
    width: 90%;
    margin: 0 auto;
    justify-content: space-between;
}
.color .color-block div{
    display: flex;
    width: 45%;
    gap: 8%;
    justify-content: space-between;

}

.motif .txt-area div{
    display: flex;
    justify-content: space-between;
    margin-bottom: 1em;


}
.motif .txt-area div div:first-of-type{
    width: 13.75%;

}
.motif .txt-area div div:first-of-type p{
    font-weight: bold;


}
.motif .txt-area div div:last-of-type{
    width: 83.75%;

}
.txt-area .logo-detail{
    margin-top: 2.5em;
}

#txt-block .catch-area p:last-of-type{
    font-size: 24px;
    font-weight: 600;
    margin: 2em 0;

}
#txt-block .detail-area{
    margin-top: 4em;

}
#txt-block .detail-area p{
    margin: 1em 0;
}
#vision .con-block{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

}
#vision .con-block #txt-block{
    width: 66.86%;

}
#vision .con-block .img-area{
    width: 31.37%;
}
#value .content-wrap .value-group .point-block{
    padding: 3em 0;
    border-bottom: 2px solid #C8C8C8;

}
#value .content-wrap .value-group .point-block p:last-of-type{
    font-size: 24px;
    font-weight: 600;
    margin-top: 2em;
}
#value .content-wrap .value-group .point-block:last-child{
    border-bottom: 0;

}
table{
    width: 100%;
}
.table-wrap table tr{
    border-bottom: 1px solid #c8c8c8;

}
.table-wrap table tr td{
    padding: 1em 0;
    line-height: 1.8;

}
.table-wrap table tr td:first-of-type{
    font-weight: 600;
    width: 15%;

}
.table-wrap table tr td .map-area{
    margin: 1em 0;
}
.table-wrap table tr td .map-area iframe{
    width: 100%;
    height: 300px;

}
#contact-block{
    background: var(--bg-white);
    padding-bottom: 3em;
}
#contact-block .wide-wrap{
    background: url(../under_img/contact_bg.png);
    background-position: top center;
    background-size: cover;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 7% 0;

}
#contact-block .wide-wrap .syne{
    font-size: 48px;
    font-weight: 500;
    transform: translateY(16px);

}
#contact-block .wide-wrap .btn-block{
    display: flex;
    justify-content: center;
    gap: 2%;
    margin: 2% 0;
}
.btn-block .c-bottom-f{
    background: #ffffff;
    color: var(--black);
    position: relative;
    transition: .3s;
}
.btn-block .c-bottom-f::before{
    content: '';
    background: url(../img/arw_small_b.svg);
    width: 11px;
    height: 7px;
    top: 28px;
    right: 20px;
    position: absolute;
    transition: .3s;

}
.btn-block .c-bottom-f:hover{
    background: var(--black);

}
.btn-block .c-bottom-f:hover span{
    color: #ffffff;

}
.btn-block .c-bottom-f:hover::before{
    background: url(../img/arw_small_f.svg);

}
.btn-block .c-bottom-b{
    background: var(--black);
    position: relative;
    
}
.btn-block .c-bottom-b::before{
    content: '';
    background: url(../img/arw_small_f.svg);
    width: 11px;
    height: 7px;
    top: 28px;
    right: 20px;
    position: absolute;
    transition: .3s;

}
.btn-block .c-bottom-b span{
    color: #ffffff;

}
.btn-block .c-bottom-b:hover{
    background: #ffffff;

}
.btn-block .c-bottom-b:hover span{
    color: var(--black);

}
.btn-block .c-bottom-b:hover::before{
    background: url(../img/arw_small_b.svg);

}
.img-area-sp{
    display: none;
    margin-bottom: 3em;
}

/* services */
span.new.zenkaku {
    margin-left: 10px;
    font-weight: bold;
    background: var(--l-gray);
    color: var(--white);
    padding: 0 5px 2px;
} 

#field .content-wrap #txt-block .bold{
    margin-bottom: 2em;
    font-size: 20px;

}
#field .wide-wrap{
    margin-top: 5em;
    max-width: 1500px;


}
.detail-table {
    display: flex;
    flex-wrap: wrap;
    gap: 4%;

}

.detail-table li{
    margin-bottom: 3em;
    border-bottom: 1px solid #c8c8c8;
    padding-bottom: 2em;
    position: relative;
    width: 48%;
}
.detail-table li::before{
    content: '';
    background: url(../img/tab_icon.png);
    width: 30px;
    height: 30px;
    background-size: contain;
    position: absolute;
    top: -9%;
    right: 0;

}
.detail-table li a{
    color: var(--black);
    font-weight: 500;
    transition: .3s;
}
.detail-table li a:hover{
    filter: opacity(40%);

}

/* works */
#works-category{
    padding-top: 0%;

}
#works-category .content-wrap{
    border-top: 2px solid var(--black);

}
#works-category .content-wrap .works-btn-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

#works-category .content-wrap .works-btn-wrap .zenkaku{
    font-size: 36px;

}
.category-btn{
    display: flex;
    gap: 30px;
    width: 60%;
    justify-content: flex-end;
}
.category-btn li a{
    color: var(--l-gray);
    font-size: 14px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
    transition: .3s;
}
.category-btn li a:hover{
    color: var(--black);
    border-bottom: 1px solid var(--l-gray);

}
.works-content{
    margin-top: 5em;
}
.works-content .con-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: 3%;
}
.works-item{
    width: 30.98%;
    border-top: 2px solid var(--black);
    padding: 20px 0;
    margin-bottom: 4em;
    display: block;
    transition: .3s;

}
.works-item .creative-name{
    text-indent: -40px;
    padding-left: 40px;
}

.works-item:hover{
    filter: opacity(40%);
}

.works-item .creative-name span{
    position: relative;
    padding-right: 30px;
    color: var(--black);
    font-weight: 600;
    padding-left: 40px;

}
/* 別タブで開く */
.works-item .creative-name .tab-icon{
    display: inline-block;
    padding: 0;
    padding-left: 40px;

}
.works-item .creative-name .tab-icon img{
    width: 12px;
    height: 12px;

}

/* .works-item .creative-name span::after{
    content: '';
    background-image: url(../img/tab_icon02.png);
    width: 12px;
    height: 12px;
    background-size: contain;
    top: 7px;
    right: 0;
    position: absolute;

} */
/* 更新ページ記事タイトル横アイコン */
.category-website a::before{
    content: '';
    background: url(../under_img/website_icon.svg);
    width: 30px;
    height: 30px;
    background-size: contain;
    top: 0;
    left: 0;
    position: absolute;

}
.category-graphic a::before{
    content: '';
    background: url(../under_img/graphic_icon.svg);
    width: 30px;
    height: 30px;
    background-size: contain;
    top: 0;
    left: 0;
    position: absolute;

}
.category-business a::before{
    content: '';
    background: url(../under_img/business_icon.svg);
    width: 30px;
    height: 30px;
    background-size: contain;
    top: 0;
    left: 0;
    position: absolute;

}
.category-digitalmedia a::before{
    content: '';
    background: url(../under_img/digitalm_icon.svg);
    width: 30px;
    height: 30px;
    background-size: contain;
    top: 0;
    left: 0;
    position: absolute;

}
.category-others a::before{
    content: '';
    background: url(../under_img/event_icon.svg);
    width: 30px;
    height: 30px;
    background-size: contain;
    top: 0;
    left: 0;
    position: absolute;

}

.works-item .creative-img {
    margin: 3em 0 2em;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
    height: auto;
}

.works-item .creative-img img{
    width: 100%;
    height: auto;

}

.works-item .creative-tag{
    color: #969696;
    line-height: 1.8;
    font-size: 13px;
}

.under-fv{
    height: 800px; /* 高さを設定 */
    width: 100%; /* 幅を全体に設定 */
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.under-fv img{
    width: 100%;
    height: 120%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transform: translate(0%, 0%);
    transition: transform 0.2s ease-out; /* スクロールによる滑らかな移動 */
    translate: none;
    rotate: none;
    scale: none;
}

/* プライバシーポリシー */
#policy{
    padding-top: 0%;
}
.indent-txt{
    padding-left: 1em;
    text-indent: -1em;
    margin: 0.5em 0;
}
.policy-block {
    margin-bottom: 6%;
    width: 85%;
}
.policy-block .item-ttl {
    display: flex;
    align-items: center;
}
.policy-block .item-ttl .sepa02{
    display: inline-block;
    width: 1px;
    height: 32px;
    margin: 0 10px;
    background: var(--black);

}
.policy-block .detail-txt {
    padding-left: 3em;
    margin-top: 2em;
}
.policy-block .moredetail-txt{
    padding-left: 1em;
    text-indent: -1em;

}
.policy-block .nu-block {
    margin-top: 2em;
}
.policy-block .en-policy {
    padding-left: 1em;
}

/* コンタクトフォーム */
#contact-fv{
    width: 100%;
    height: 600px;
    background: url(../under_img/bg-contact.png);
    background-size: cover;
    background-position: top center;
    display: flex;
    justify-content: center;
    align-items: center;
}
#contact-fv .con-chach{
    text-align: left;
    color: var(--black);
    font-weight: bold;

}
#contact-fv .con-chach h1{
    font-size: 104px;

}
#contact-fv .con-chach p{
    font-size: 28px;

}
#contact-fv .wide-wrap #line-menu{
    margin-top: 30px;

}
.contact-intro {
    text-align: center;
}
.contact-intro .tell-block {
    margin-top: 2em;
    display: flex;
    justify-content: center;
    gap: 3%;
    border: 1px solid var(--black);
    padding: 1em;
    width: 80%;
    margin: 0 auto;
    margin-top: 2em;
}
.contact-intro .tell-block .tell-nu{
    margin-top: 0;

}
.contact-menu-wrap #line-menu{
    margin-top: 30px;
}
.creative-block{
    background: var(--bg-white);
    padding: 0 0 10%;
}
.creative-block .wide-wrap h2{
    font-size: 28px;
    position: relative;
    padding-left: 0.5em;
    margin-bottom: 2em;
}
.creative-block .wide-wrap h2::before{
    content: '';
    background: var(--black);
    width: 1px;
    height: 40px;
    top: -3px;
    left: 0;
    position: absolute;

}
.creative-block .creative-slide-wrap{
    overflow: hidden;
    margin-top: 2em;
    padding-left: 2%;
}
.creative-block .creative-slide-wrap .c-slide-inner{
    display: flex;
    flex-wrap: wrap;
}
.creative-block .creative-slide-wrap .c-slide-inner .works-item{
    margin: 0 1em 4em 1em;
    border-top: none;

}
/* 404ページ */
#notfound{
    padding: 0% 0 15%;

}

.toppage-btn{
    background: var(--black);
    position: relative;
    margin-top: 5em;
    transition: .3s;
}
.toppage-btn::before {
    content: '';
    background: url(../img/arw_small_f.svg);
    width: 11px;
    height: 7px;
    top: 28px;
    right: 20px;
    position: absolute;

}
.toppage-btn span{
    color: #ffffff;

}
.toppage-btn:hover{
    background: var(--white);

}
.toppage-btn:hover span{
    color: var(--black);
}
.toppage-btn:hover::before {
    background: url(../img/arw_small_b.svg);
}
#topic-content{
    padding-top: 5%;
}
#topic-content .moveq-h2-pattern{
    display: block;
    margin: 0 0 40px;
}
#topic-content .moveq-h2-pattern > .wp-block-group__inner-container{
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: nowrap;
}
#topic-content .moveq-h2-pattern__num{
    display: inline-flex;
    align-items: center;
    font-family: "Syne", sans-serif;
    font-weight: 500;
    font-size: 34px;
    line-height: 1.3;
    color: #e3277b;
    margin: 0;
    white-space: nowrap;
}
#topic-content .moveq-h2-pattern__num::after{
    content: "";
    width: 1px;
    height: 44px;
    background: var(--black);
    display: block;
    margin-left: 11px;
}
#topic-content .moveq-h2-pattern__title{
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.5;
    color: var(--black);
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}
#topic-content .moveq-h3-pattern{
    display: block;
    padding: 10px 16px;
    background: #ffe5f1;
    margin: 0 0 32px;
}
#topic-content .moveq-h3-pattern > .wp-block-group__inner-container{
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: nowrap;
}
#topic-content .moveq-h3-pattern__num{
    display: inline-flex;
    align-items: center;
    font-family: "Syne", sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.3;
    color: var(--black);
    margin: 0;
    white-space: nowrap;
}
#topic-content .moveq-h3-pattern__num::after{
    content: "";
    width: 1px;
    height: 31px;
    background: var(--black);
    display: block;
    margin-left: 11px;
}
#topic-content .moveq-h3-pattern__title{
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.4;
    color: var(--black);
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}
#topic-content .moveq-p-pattern{
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 350;
    font-size: 16px;
    line-height: 1.6;
    color: var(--black);
    margin: 0 0 24px;
}
#topic-content .moveq-p-pattern__highlight{
    font-weight: 700;
    color: #e3277b;
}
#topic-content .moveq-list-pattern{
    background: #ededed;
    padding: 32px;
    margin: 0 0 32px;
}
#topic-content .moveq-list-pattern__list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
#topic-content .moveq-list-pattern__list li{
    position: relative;
    padding-left: 18px;
    margin: 0;
}
#topic-content .moveq-list-pattern__list li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 26px;
    background: url(../img/li-dot.svg) no-repeat center / contain;
}
#topic-content .moveq-list-pattern__title{
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.6;
    color: var(--black);
    margin: 0;
}
#topic-content .moveq-list-pattern__text{
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 350;
    font-size: 16px;
    line-height: 1.6;
    color: var(--black);
    margin: 4px 0 0;
}
#topic-content .moveq-banner-pattern{
    margin: 40px 0 64px;
}
#topic-content .moveq-banner-pattern__image{
    margin: 0;
}
#topic-content .moveq-banner-pattern__image a{
    display: block;
    transition: .3s;
}
#topic-content .moveq-banner-pattern__image a:hover{
    filter: opacity(40%);
}
#topic-content .moveq-banner-pattern__image img{
    display: block;
    width: 100%;
    height: auto;
}
#topic-content .topics-ttl-area{
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 24px;
}
#topic-content .topics-ttl-area h1{
    font-size: 32px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
}
#topic-content .topics-info{
    display: flex;
    align-items: center;
    gap: 24px;
}
#topic-content .topics-info-item{
    display: flex;
    align-items: center;
    gap: 8px;
}
#topic-content .topics-info-icon{
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}
#topic-content .topics-info-icon img{
    display: block;
    width: 100%;
    height: 100%;
}
#topic-content .topics-info-text{
    font-size: 14px;
    line-height: 1.4;
    color: var(--black);
    margin: 0;
}
#topic-content .topics-info-text-date{
    font-family: "Roboto", sans-serif;
    font-weight: 500;
}
#topic-content .topics-info-label{
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
}
#topic-content .topics-info-text-category{
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
}
#topic-content .content-wrap .title-area h2{
    font-size: 35px;
    font-weight: 600;
    margin-bottom: 10px;
}
#topic-content .content-wrap .title-area {
    margin-bottom: 3em;
}
#topic-content .content-wrap .thum-area{
    width: 100%;
    /* margin: 0 auto; */
    max-width: 800px;
}
#topic-content .content-wrap .thum-area img {
    width: 100%;
    height: auto;
}


#topic-content .content-wrap .content-area{
    margin: 3em 0;

}

#topic-content .content-wrap .title-area .date{
    color: var(--l-gray);

}

/* conatctform */
div#wpcf7-f14-o1 {
    margin-top: 13%;
}
.form-group {
    margin-bottom: 2.5em;
}
.form-group p{
    display: flex;
}
.form-group p label{
    width: 22.5%;
}
.form-group p .form-name{
    font-weight: 500;
}
.form-group p .form-name span{
    color: var(--white);
    background: url(../under_img/form_must_bg.png);
    background-size: contain;
    font-size: 14px;
    font-weight: 500;
    margin-left: 7px;
    padding: 0 5px 2px;

}
.form-group p .wpcf7-form-control-wrap{
    width: 77.45%;
}
.form-group p .wpcf7-form-control-wrap input:not([type="radio"]),textarea{
    width: 100%;
    border: 0;
    padding: 1.5em;
    box-sizing: border-box;
}

.policy-group,.sabmit-block{
    display: flex;
    justify-content: center;
}
.form-group .txt-limit{
    display: flex;
    justify-content: flex-end;
}
.form-group .txt-limit span{
    color: var(--l-gray);
    font-size: 12px;
    text-align: right;
}
span#radio {
    display: flex;
    flex-direction: column;
}
span.wpcf7-list-item {
    margin-bottom: 8px;
    position: relative;
}
.policy-group {
    margin: 2em 0 4em;
}
.policy-group a{
    border-bottom: 1px solid;
    color: var(--black);
    font-weight: 500;
}

/* radioボタンカスタマイズ */

input[type="radio"] {
    opacity: 0; /* デフォルトのボタンを非表示 */
    position: absolute;
    width: auto!important;
  }

  #radio .wpcf7-list-item-label{
    padding-left: 35px;

  }

  /* チェック前のボタン */
  #radio .wpcf7-list-item-label::before {
    border: 1px solid #646464;
    border-radius: 100%; /* ラジオボタンっぽく丸くする */
    content: "";
    height: 16px;
    width: 16px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
  /* チェック後のボタン */
  #radio input[type="radio"]:checked + .wpcf7-list-item-label::before {
    background-color: #646464; /* チェック後の中心の色 */
    box-shadow: inset 0 0 0 3px #fff; /* 中心の色のスタイル */
   
  }

  input[type="checkbox"] {
    opacity: 0; /* デフォルトのボタンを非表示 */
    position: absolute;
    width: auto!important;
  }

   /* チェック前のボタン */
   .policy-group .wpcf7-list-item-label::before {
    background: #ffffff;
    content: "";
    height: 18px;
    width: 18px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -23px;
    margin: auto;
    cursor: pointer;
  }
  /* チェック後のボタン */
  .policy-group input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
    content: '';
    background-image: url(../under_img/check_icon.png);
    width: 16px;
    height: 16px;
    background-size: contain;
    z-index: 2;

   
  }
  /* .sabmit-block p{
    width: 80%;
    margin: 0 auto;

  }
  .sabmit-block p input#submit{
    background: var(--black);
    border: none;
    display: block;
    height: 150px;
    font-size: 20px;
    color: var(--white);
    letter-spacing: 3px;
    position: relative;
    width: 100%;
    transition: .3s;

  }
  .sabmit-block p input#submit:hover{
    filter: opacity(40%);

  } */
  input.wpcf7-form-control.wpcf7-submit.has-spinner {
    background: var(--black);
    border: none;
    display: block;
    height: 150px;
    font-size: 20px;
    color: var(--white);
    letter-spacing: 3px;
    position: relative;
    width: 60%;
    margin: 0 auto;
    transition: .3s;
    font-family: "Noto Sans JP", sans-serif;
    cursor: pointer;
  }

  input.wpcf7-form-control.wpcf7-submit.has-spinner::before{
    content: '';
    background: url(../img/arw_small_f.svg);
    width: 15px;
    height: 7px;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    position: absolute;
    

  }
  .wpcf7-not-valid-tip {
    color: #FF4773!important;
    font-size: 14px!important;
    font-weight: 500!important;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #FF4773!important;
    padding: 1em;
}
.creative-tag .tag{
    margin-right: 10px;
}
.current{
    color: var(--black)!important;
    /* border-bottom: 1px solid var(--l-gray); */
}
.current a{
    color: var(--black)!important;
    font-weight: 600;
}

/* works記事タイトル横アイコン */
.creative-name .website::before {
    content: '';
    background: url(../under_img/website_icon.svg);
    width: 30px;
    height: 30px;
    background-size: contain;
    top: 0;
    left: 0;
    position: absolute;
}
.creative-name .graphic::before{
    content: '';
    background: url(../under_img/graphic_icon.svg);
    width: 30px;
    height: 30px;
    background-size: contain;
    top: 0;
    left: 0;
    position: absolute;

}
.creative-name .business::before{
    content: '';
    background: url(../under_img/business_icon.svg);
    width: 30px;
    height: 30px;
    background-size: contain;
    top: 0;
    left: 0;
    position: absolute;

}
.creative-name .digitalmedia::before{
    content: '';
    background: url(../under_img/digitalm_icon.svg);
    width: 30px;
    height: 30px;
    background-size: contain;
    top: 0;
    left: 0;
    position: absolute;

}
.creative-name .others::before{
    content: '';
    background: url(../under_img/event_icon.svg);
    width: 30px;
    height: 30px;
    background-size: contain;
    top: 0;
    left: 0;
    position: absolute;

}


/* 準備中 */
#notfound .message p{
    font-size: 20px;
}

#notfound .message p{
    margin-bottom: 1em;
}

@media screen and (max-width:1200px) {
    .works-item {
        width: 47%;
    }
    #contact-fv{
        height: 425px;
    }

}


@media screen and (max-width:768px) {
    .under-fv{
        height: 400px; /* 高さを設定 */
    }
    .under-fv img {
        height: 150%;
    }
    .sec-ttl {
        margin-bottom: 3em;
    }
    #under-fv {
        padding-top: 15%;
    }
    .fv-con-wrap .page-ttl h1 {
        font-size: 72px;
    }
    .fv-con-wrap .page-ttl p {
        font-size: 24px;
    }
    #line-menu {
        margin-top: 8%;
    }
    .sec-ttl .page-ttl-flex {
        flex-direction: column;
        align-items: flex-start;
    }

    #contact-block .wide-wrap .btn-block {
        flex-direction: column;
    }
    .sec-ttl .page-ttl-flex div .sepa {
        height: 32px;
        margin: 0 20px 0 0;
    }
    .ja-ttl {
        margin-top: 1em;
    }
    .sec-ttl .page-ttl-flex div span {
        font-size: 24px;
    }
    #ceo .img-colum-area {
        flex-direction: column;
    }
    #ceo .img-colum-area div{
        margin-bottom: 3%;

    }
    #ceo .txt-area {
        margin-top: 1em;
    }
    #txt-block {
        width: 100%;
    }
    #identity .sec-ttl .page-ttl-flex div .sepa {
        height: 32px;
    }
    .color .color-block {
        flex-direction: column;
        width: 80%;
    }
    .color .color-block div {
        width: 100%;
    }
    .color, .motif {
        margin-top: 10%;
    }
    .motif .txt-area div {
        flex-direction: column;
    }
    .motif .txt-area div div:first-of-type {
        width: 100%;
    }
    .motif .txt-area div div:last-of-type {
        width: 100%;
    }
    .en-txt {
        font-size: 35px;
    }
    #txt-block .catch-area p:last-of-type {
        font-size: 22px;
    }
    #vision .con-block {
        flex-direction: column;
    }
    #vision .con-block #txt-block {
        width: 100%;
    }
    #vision .con-block .img-area {
        width: 80%;
        margin: 0 auto;
        margin-top: 3em;
    }
    .table-wrap table tr td:first-of-type {
        width: 20%;
    }
    .btn-block a{
        margin-bottom: 10px;
    }
    #contact-block .wide-wrap .btn-block {
        margin: 6% 0;
    }
    #contact-block .wide-wrap {
        width: 100%;
    }
    #value .content-wrap .value-group .point-block:first-of-type{
        padding-top: 0em;

    }
    .works-item .creative-img {
        height: auto;
    }
    .works-item {
        width: 100%;
    }
    #works-category .content-wrap .works-btn-wrap {
        align-items: flex-start;
        flex-direction: column;
    }
    #works-category .content-wrap .works-btn-wrap .zenkaku {
        font-size: 30px;
    }
    .category-btn {
        display: flex;
        gap: 50px;
        width: 70%;
        margin: 0 auto;
        justify-content: center;
        flex-wrap: wrap;
        line-height: 0;
        margin-top: 3em;
    }
    .policy-block {
        width: 100%;
    }
    .policy-block .detail-txt {
        padding-left: 0;

    }
    .contact-intro .tell-block {
        width: 100%;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;

    }
    .contact-intro .tell-block .tell-nu {
        margin-top: 0.3em;
        display: flex;
    }
    #contact-fv .con-chach h1 {
        font-size: 72px;
    }
    #contact-fv .con-chach p {
        font-size: 24px;
    }
    .under03-menu{
        flex-wrap: wrap;
    }
    .creative-block {
        padding: 5% 0 5%;
    }
    #policy{
        padding-top: 5%;
    }
    #topic-content .content-wrap .title-area h2 {
        font-size: 24px;
    }
    #topic-content {
        padding-top: 10%;
    }
    #topic-content .content-wrap .thum-area{
        width: 100%;
    }
    .form-group p {
        flex-direction: column;
    }
    .form-group p label {
        width: 100%;
    }
    .form-group p .wpcf7-form-control-wrap {
        width: 100%;
    }
    .sabmit-block p {
        width: 100%;
    }

    .sabmit-block p input#submit {
        height: 100px;
        font-size: 16px;

    }
    #notfound .message p{
        font-size: 16px;
        margin-bottom: 1em;
    }
    .current{
        padding-bottom: 12px;
    }
    input.wpcf7-form-control.wpcf7-submit.has-spinner {
        width: 100%;
        height: 120px;
    }
    .tokyo_office_map{
        width: 100%!important;
    }



}
@media screen and (max-width:500px) {
    input.wpcf7-form-control.wpcf7-submit.has-spinner {
        font-size: 16px;
        height: 100px;
    }
    .en-txt {
        font-size: 24px;
    }
    #txt-block .catch-area p:last-of-type {
        font-size: 20px;
    }
    .btn-block .contact-btn{
        width: 100%;
    }
    #value .content-wrap .value-group .point-block p:last-of-type {
        font-size: 20px;
        margin-top: 1em;
    }
    #contact-block .wide-wrap .btn-block {
        width: 90%;
        margin: 6% auto 0;
    }
    #under-fv {
        padding-top: 23%;
    }
    .fv-con-wrap .page-ttl h1 {
        font-size: 50px;
    }
    .fv-con-wrap .page-ttl p {
        font-size: 20px;
    }
    section {
        padding: 15% 0 15%;
    }
    .sec-ttl .page-ttl-flex div .sepa {
        height: 25px;
        margin: 0 10px 0 0;
    }
    .sec-ttl .page-ttl-flex div span {
        font-size: 22px;
    }
    #identity .sec-ttl .page-ttl-flex div .sepa {
        height: 25px;
    }
    #contact-block .wide-wrap {
        padding: 7% 0 17%;
    }
    #outline{
        padding: 15% 0 25%;
    }
    #identity .content-wrap .img-area-pc{
        display: none!important;
    }
    .img-area-sp{
        display: block;
        margin-bottom: 3em;
    }
    .color, .motif {
        margin-top: 20%;
    }
    .color .color-block {
        flex-direction: column;
        width: 100%;
    }
    #vision .con-block .img-area {
        width: 100%;
        margin-top: 1em;
    }
    .detail-table {
        margin-top: 16%;
    }
    .detail-table li {
        margin-bottom: 2.5em;
        padding-bottom: 2.5em;
        width: 100%;
    }
    .category-btn {
        gap: 40px;
    }
    .policy-block {
        margin-bottom: 10%;
    }
    .policy-block .detail-txt {
        margin-top: 1em;
    }
    .contact-intro {
        text-align: left;
    }
    #contact-fv .con-chach h1 {
        font-size: 50px;
    }
    #contact-fv .con-chach p {
        font-size: 20px;
    }
    .under03-menu .last-pagelink{
        margin-top: 20px;
        padding-left: 1em;
    }
    .creative-block .wide-wrap h2 {
        font-size: 24px;
    }
    .creative-block .wide-wrap h2::before {
        top: -5px;
    }
    #notfound {
        padding: 10% 0 15%;
    }
    #notfound .content-wrap{
        text-align: center;
    } 
    .content-wrap .toppage-btn{
        width: 100%;
        margin-top: 2em;

    }
    #topic-content .content-wrap .title-area {
        margin-bottom: 1em;
    }
    #topic-content .content-wrap .content-area {
        margin: 2em 0;
    }
    #line-menu a {
        margin-top: 10px;
    }
    #line-menu span {
        margin-top: 10px;

    }
    .current{
        padding-bottom: 12px;
    }



}