@charset "UTF-8";
img {
  display: block;
  width:100%;
}
main{
    position: relative;
    padding-bottom: 120px;
}
#head{
    padding-top: 560px;
    position: relative;
}

#head .bg-curve-top{
    width: 100vw;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}
#head .bg-curve-top .is-pc{
    display: block;
}
#head .bg-curve-top .is-sp{
    display: none;
}
.bg-curve-bottom{
    width: 100vw;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}
.bg-curve-bottom .is-pc{
    display: block;
}
.bg-curve-bottom .is-sp{
    display: none;
}
@media screen and (max-width:768px){
    #head .bg-curve-top .is-pc{
        display: none;
    }
    #head .bg-curve-top .is-sp{
        display: block;
    }
    .bg-curve-bottom .is-pc{
        display: none;
    }
    .bg-curve-bottom .is-sp{
        display: block;
    }
}
#head h1{
    position: absolute;
    width: min(1180px,94%);
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-size: 12px;
}
#head h1 span{
    font-size: 64px;
    font-weight: 100;
    display: block;
    margin-bottom: 8px;
    color: #4f4f4f;
}
section{
    width: min(1180px,94%);
    margin-inline: auto;
}
h2.page__ttl{
    display: flex;
    flex-direction: column;
    font-size: 1.6rem;
}
h2.page__ttl span{
    font-size: 1.2rem;
}
.js-fade-text{
    filter: blur(10px);
    opacity: 0;
    transition: filter 0.9s ease,opacity 0.9s ease;
}
.js-fade-text.is-inview{
    opacity: 1;
    filter: blur(0);
}
.js-fade-title{
    clip-path: inset(0 100% 0 0);
    transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
    transition-property: clip-path;
}
.js-fade-title.is-inview{
    clip-path: inset(0);
}
.js-fade-image{
    scale: 0.95;
    opacity: 0;
    filter: blur(8px);
    transition: scale 3.2s ease-out,opacity 1.2s ease,filter 0.6s ease;
}
.js-fade-image.is-inview{
    filter: blur(0);
    scale: 1.0;
    opacity: 1;
}
@media screen and (max-width:1080px){
    #head{
        padding-top: 480px;
    }
    #head h1{
        font-size: 11px;
    }
    #head h1 span{
        font-size: 56px;
    }
}
@media screen and (max-width:768px){
    #head {
        padding-top: 320px;
    }
    #head h1{
        text-align: center;
    }
    #head h1 span {
        font-size: 40px;
    }
    #head .bg-curve-top .is-sp{
        display: block;
    }
    #head .bg-curve-top .is-pc{
        display: none;
    }
    section{
        width: 94%;
    }
    h2.page__ttl{
        font-size: 1.5rem;
    }
    h2.page__ttl span {
        font-size: 1.1rem;
    }
}
@media screen and (max-width:560px){
    #head h1{
        font-size: 10px;
    }
    #head h1 span {
        font-size: 32px;
    }
    h2.page__ttl{
        font-size: 1.4rem;
    }
    h2.page__ttl span {
        font-size: 1.0rem;
    }
}
/* Contact */
#contact{
    padding-bottom: 180px;
}
#contact .contact__wrap{
    width: min(820px,94%);
    margin-inline: auto;
}
#contact .contact__wrap dl{
    border-bottom: solid 1px #FFF;
    margin-bottom: 40px;
    padding-bottom: 12px;
}
#contact .contact__wrap dt{
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: bold;
}
#contact .contact__wrap dt span{
    font-size: 12px;
    color: #be5858;
    padding-left: 4px;
}
#contact .contact__wrap input,
#contact .contact__wrap select,
#contact .contact__wrap textarea{
    font-family: 'Times New Roman', Times, serif,'Shippori Mincho, serif';
    background: none;
    border: none;
    width: 100%;
    padding-left: 24px;
    padding-right: 12px;
    font-size: 18px;
}
#contact .contact__wrap dd .wpcf7-not-valid-tip{
    font-size: 12px;
    font-weight: bold;
    color: #be5858;
    padding-left: 24px;
    margin-top: 8px;
}
#contact .contact__wrap .-agree .wpcf7-list-item{
    width: 100%;
}
#contact .contact__wrap .-agree label{
    display: flex;
    justify-content: center;
    font-size: 1.4rem;
}
#contact .contact__wrap .-agree label input{
    width: auto;
}
#contact .contact__wrap .-agree label a{
    color: #426eff;
    padding-right: 4px;
    padding-left: 8px;
}
#contact .contact__wrap .-send{
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: end;
}
#contact .contact__wrap .-send input{
    width: auto;
    font-size: 1.4rem;
    position: relative;
    padding: 0;
}
#contact .contact__wrap .-send input:not(:disabled){
    cursor: pointer;
}
#contact .contact__wrap .-send > div{
    display: flex;
    flex-direction: column;
    padding-right:56px;
    position: relative;
}
#contact .contact__wrap .-send > div::before{
    content: "";
    display: block;
    width: 40px;
    height: 8px;
    border-bottom: solid 1px #3a3a3a;
    border-right: solid 1px #3a3a3a;
    position: absolute;
    top: 8px;
    right: 0;
    transform: skewX(45deg);
}
#contact .contact__wrap .-send > div:has(input:disabled)::before{
    border-color: #999;
}
#contact .contact__wrap .-send > div span.english__font{
    position: relative;
    order: 2;
}

#contact .contact__wrap .-send > div span.english__font::before{
    content: "send";
}
#contact .contact__wrap .-send > div input:disabled ~ span.english__font::before{
    color: #999;
}
#contact .contact__wrap .-send .wpcf7-spinner{
    width: 100%;
    order: 3;
}
@media screen and (max-width:768px){
    #contact .contact__wrap input, #contact .contact__wrap select, #contact .contact__wrap textarea{
        font-size: 16px;
        padding-left: 16px;
        padding-right: 8px;
    }
    #contact .contact__wrap dl{
        padding-bottom: 8px;
        margin-bottom: 28px;
    }
    #contact .contact__wrap dt {
        margin-bottom: 8px;
        font-size: 12px;
    }
    #contact .contact__wrap .-agree label{
        font-size: 1.2rem;
        justify-content: flex-start;
    }
    #contact .contact__wrap .-send input{
        font-size: 1.2rem;
    }
    #contact .contact__wrap .-send > div::before{
        width: 32px;
        height: 6px;
    }
    #contact .contact__wrap .-send > div{
        padding-right: 40px;
    }
    #contact .contact__wrap .-send{
        margin-top: 48px;
    }
}



/* コンセプト */
#concept .concept__wrap{
    padding-bottom: 160px;
}
#concept .title__wrap{
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 40px;
}
#concept h2.page__ttl{
    display: flex;
    flex-direction: column;
    font-size: 1.6rem;
}
#concept h2.page__ttl span{
    font-size: 1.2rem;
}
#concept .text__wrap{
    width: min(640px,100%);
    margin-bottom: 80px;
}
#concept .text__wrap .draw__wrap{
    width: 80px;
}
#concept .text__wrap p{
    font-size:1.2rem;
    line-height: 2.0;
}
#concept .text__wrap p span{
    display: inline-block;
}
#concept .concept__01 .text__wrap{
    margin-inline: auto;
}
#concept .concept__01 .image__wrap .image__item:nth-child(1){
    width:min(90%,960px);
    margin-bottom: 80px;
}
#concept .concept__01 .image__wrap .image__item:nth-child(2){
    width:min(64%,640px);
    margin: 0 80px 0 auto;
}

#concept .concept__02 .text__wrap{
    margin-inline: 0 auto;
}
#concept .concept__02 .image__wrap .image__item:nth-child(1){
    width:min(60%,640px);
    margin-inline: auto 0;
    margin-bottom: 80px;
}
#concept .concept__02 .image__wrap .image__item:nth-child(2){
    width:min(64%,640px);
    margin-inline: auto;
}
#concept .concept__03 .text__wrap{
    margin-inline: 0 auto;
}
#concept .concept__03 .image__wrap{
    display: flex;
    justify-content: center;
}

#concept .concept__03 .image__wrap .image__item{
    width: 49%;
}
@media screen and (max-width:768px){
    #concept .text__wrap p {
        font-size: 1.1rem;
    }
    #concept h2.page__ttl{
        font-size: 1.5rem;
    }
    #concept h2.page__ttl span {
        font-size: 1.1rem;
    }
    #concept .concept__01 .image__wrap .image__item:nth-child(1){
        margin-bottom: 64px;
    }
    #concept .concept__01 .image__wrap .image__item:nth-child(2) {
        margin: 0 0 0 auto;
    }
    #concept .concept__wrap{
        padding-bottom: 120px;
    }
    #concept .text__wrap{
        margin-bottom: 64px;
    }
    #concept .title__wrap{
        margin-bottom: 32px;
    }
    #concept .concept__02 .image__wrap .image__item:nth-child(1){
        margin-bottom: 64px;
    }
}
@media screen and (max-width:560px){
    #concept .text__wrap p {
        font-size: 1.0rem;
    }
    #concept h2.page__ttl{
        font-size: 1.4rem;
    }
    #concept h2.page__ttl span {
        font-size: 1.0rem;
    }
    #concept .concept__01 .image__wrap .image__item:nth-child(1){
        margin-bottom: 40px;
    }
    #concept .concept__01 .image__wrap .image__item:nth-child(2){
        width: 90%;
    }
    #concept .text__wrap p span {
        display: inline;
    }
    #concept .concept__wrap{
        padding-bottom: 80px;
    }
    #concept .text__wrap{
        margin-bottom: 48px;
    }
    #concept .title__wrap{
        margin-bottom: 24px;
    }
    #concept .concept__02 .image__wrap .image__item:nth-child(1){
        margin-bottom: 48px;
        width: 90%;
    }
    #concept .concept__02 .image__wrap .image__item:nth-child(2){
        width: 90%;
        margin: 0;
    }
    #concept .concept__03 .image__wrap{
        flex-wrap: wrap;
    }
    #concept .concept__03 .image__wrap .image__item{
        width: 90%;
        margin-inline: auto;
        margin-bottom: 40px;
    }
}
/* about */
#about .company__wrap{
    padding-bottom: 120px;
}
#about .company__inner{
    padding: 40px 0;
}
#about .company__inner .-row{
    display: flex;
    margin-bottom:24px;
}
#about .company__inner .-row .-ttl{
    font-size: 1.2rem;
    font-weight: 300;
    width: 180px;
    line-height: 2.0;
}
#about .company__inner .-row .-val{
    font-size: 1.2rem;
    width: calc(100% - 180px);
    font-weight: 500;
    line-height: 2.0;
}
#about .company__inner .-row .-val span{
    display: inline-block;
}
#about .company__wrap .image__inner{
    padding: 80px 0;
}
#about .company__wrap .image__inner img{
    width: min(56%,640px);
    margin-inline: auto 0;
}
#about .access__wrap{
    position: relative;
    padding-top: 40px;
}

#about .access__wrap .bg-curve-top{
    width: 100vw;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}
#about .access__inner{
    display: flex;
    align-items: flex-start;
    padding: 40px 0;
}
#about .access__inner .map__inner{
    width: 50%;
    padding-top: 50%;
    position: relative;
}
#about .access__inner .map__inner iframe{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    filter: saturate(0.5);
}
#about .address__inner{
    width: 48%;
    padding: 24px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 24px;
}
#about .address__inner h3{
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-weight: 400;
    border-bottom: solid 1px #dddddd;
    padding-left: 16px;
}
#about .address__inner h3 span{
    font-size: 1.0rem;
}
#about .address__inner p,
#about .address__inner a{
    font-size: 1.2rem;
    line-height: 1.8;
    padding-left: 16px;
}
#about .access__wrap .image__inner{
    padding: 80px 0;
}
#about .access__wrap .image__inner .image__item:nth-child(1){
    width: min(80%,800px);
    margin-inline: auto 0;
    margin-bottom: 40px;
}
#about .access__wrap .image__inner .image__item:nth-child(2){
    width: min(64%,640px);
    margin-inline: 0 auto;
    margin-bottom: 40px;
}
@media screen and (max-width:900px){
    #about .access__inner{
        flex-wrap: wrap;
    }
    #about .access__inner .map__inner{
        width: 100%;
        padding-top: min(320px,52.26%);
    }
    #about .address__inner{
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        padding: 24px 0;
    }
    #about .address__inner .adress__item{
        width: 31%;
    }

}
@media screen and (max-width:768px){
    #about .company__inner .-row .-ttl,
    #about .company__inner .-row .-val{
        font-size: 1.1rem;
        width: 100%;
    }
    #about .company__inner .-row .-ttl{
        font-weight: 700;
    }
    #about .company__inner .-row .-val{
        border-bottom: solid 1px #dfdfdf;
        padding-left: 1em;
    }
    #about .company__inner .-row{
        flex-wrap: wrap;
    }
    #about .company__wrap .image__inner {
        padding: 64px 0;
    }
    #about .company__wrap .image__inner img{
        width: 72%;
    }
    #about .company__wrap {
        padding-bottom: 100px;
    }
    #about .address__inner .adress__item{
        width: 48%;
    }
    #about .address__inner .adress__item:nth-child(1){
        width: 100%;
    }
    #about .address__inner p, #about .address__inner a{
        font-size: 1.1rem;
    }
    #about .address__inner h3{
        font-size: 1.2rem;
    }
    #about .access__wrap .image__inner {
        padding: 64px 0;
    }
    #about .company__inner {
        padding: 32px 0;
    }
}
@media screen and (max-width:560px){
    #about .company__inner .-row .-ttl,
    #about .company__inner .-row .-val{
        font-size: 1.0rem;
    }
    #about .company__inner .-row{
        margin-bottom: 16px;
    }
    #about .company__wrap .image__inner {
        padding: 40px 0;
    }
    #about .company__wrap .image__inner img{
        width: 90%;
    }
    #about .company__wrap {
        padding-bottom: 80px;
    }
    #about .address__inner p, #about .address__inner a{
        font-size: 1.0rem;
    }
    #about .address__inner .adress__item{
        width: 100%;
    }
    #about .access__wrap .image__inner {
        padding: 40px 0;
    }
    #about .company__inner {
        padding: 24px 0;
    }
    #about .access__wrap .image__inner .image__item:nth-child(1),
    #about .access__wrap .image__inner .image__item:nth-child(2){
        width: 90%;
    }
}

#message .message__wrap{
    width: min(94%,720px);
    margin-inline: auto;
    padding-bottom: 160px;
}
#message .message__wrap p{
    font-size: 1.2rem;
    line-height: 2.0;
    margin-bottom: 24px;
}
#message .profile__inner{
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
}
#message .profile__inner .image__inner{
    width: 40%;
}
#message .profile__inner .image__inner img{
    width: 100%;
    aspect-ratio: 5/6;
    object-fit: cover;
}
#message .profile__inner .text__inner{
    width: 56%;
}
#message .profile__inner .text__inner .-head{
    font-size:1.1rem;
    margin-bottom: 24px;
    line-height: 1.8;
    font-weight: bold;
}
#message .profile__inner .text__inner .-head span{
    display: block;
    font-size: 1.4rem;
}
#message .profile__inner .text__inner .-text{
    font-size: 1.2rem;
    line-height: 2.0;
}
#message .profile__wrap{
    padding-bottom: 0;
}

@media screen and (max-width:768px){
    #message .message__wrap p{
        font-size: 1.1rem;
    }
    #message .message__wrap{
        padding-bottom: 120px;
    }
    #message .profile__inner .image__inner{
        width: 100%;
    }
    #message .profile__inner .image__inner img {
        width: min(100%, 640px);
        aspect-ratio: 4 / 3;
        object-fit: cover;
        margin-inline: auto;
        margin-bottom: 16px;
    }
    #message .profile__inner .text__inner{
        width: min(100%, 640px);
        margin-inline: auto;
    }
    #message .profile__inner .text__inner .-text{
        font-size: 1.1rem;
    }
}
@media screen and (max-width:560px){
    #message .message__wrap p {
        font-size: 1.0rem;
    }
    #message .message__wrap{
        padding-bottom: 80px;
    }
    #message .profile__inner .text__inner .-text{
        font-size: 1.0rem;
    }
    #message .profile__inner .text__inner .-head{
        font-size: 1.0rem;
        margin-bottom: 16px;
    }
    #message .profile__inner .text__inner .-head span{
        font-size: 1.2rem;
    }
}

#page h2{
    font-size: 1.5rem;
    margin-bottom: 24px;
}
#page p,
#page ul li{
    font-size: 1.3rem;
    line-height: 1.8;
}
#page ul{
    padding-left: 1em;
    padding-block: 12px;
    list-style: auto;
}
#page .wrap__block{
    margin-bottom: 64px;
}
#page .text-right{
    text-align: right;
}
@media screen and (max-width:768px){
   #page h2{
    font-size: 1.3rem;
    margin-bottom: 16px;
    }
    #page p,
    #page ul li{
        font-size: 1.1rem;
    }
    #page .wrap__block{
        margin-bottom: 40px;
    } 
}