@charset "utf-8";

/* ===============================
about
=============================== */


html, body {
    width: 100vw;
    height: 100vh;
  }

  
  .article{
    padding: 0 2.7%;

}

.article__header {
    display: block;
    width: 100%;
    height: 180px;
    background-image: url(../images/about_header.webp);
    background-size: 200%;
    background-position: 40% ;
    font-family: var(--fontFamilyEN);
    font-size: 2.0rem;
    color: #FFFFFF;
    letter-spacing: 0.8rem;
    line-height: 180px;
    text-align: center;
}




.section--description {
    margin: 48px 0;
}


.about__description {
    margin: 0 auto;
    width: 100%;
}


.subTopic {
    text-align: left;
    font-family: var(--fontFamilyJP);
    font-size: 2.0rem;
    letter-spacing: 0.8rem;
    line-height: 2.4;
    margin-top: -8px;
    text-align: center;
}

.about__descriptionTxt {
    text-align: left;
    font-family: var(--fontFamilyJP);
    font-size: 1.2rem;
    letter-spacing: 0.2rem;
    line-height: 2.6;
    text-align: center;
    margin-top: 40px;
}

.txBr {
    margin-top:40px;
}





.about__mainContents {
    padding: 30px 5.3% 60px;
    background-color: var(--primary-lightGray);
    margin-top: 60px;
}

.about__profile {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 300px;

}

.about_work {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.4rem;
    font-family: var(--fontFamilyJP);
    letter-spacing: 0.4rem;
    margin-top: 20px;
}

.about_work::after {
    content: '';
    display: inline-block;
    width: 260px;
    height: 1px;
    background-color: var(--primary-gray);
}


.about_profileImg {
    order: 2;
    position: relative;
    z-index: 2;
    width: 240px;
    height: 280px;
    object-fit: cover;
    margin-top: 40px;
}

.profile__detail {
    order: 3;
    width: 93%;
    height: auto;
    background-color: #FFFFFF;
    padding: 56px 0 40px;
    margin-top: -30px;
    margin-left: auto;
    
}

.profile__block {
    display: block;
    width:100%;
}

.about__profileName {
    display: flex;
    align-items: center;
    justify-content:center;
}

.nameEN{
    font-size: 1.4rem;
    font-family: var(--fontFamilyEN);
    letter-spacing: 0.2rem;
}
.nameJP{
    font-size: 1.4rem;
    font-family: var(--fontFamilyJP);
    letter-spacing: 0.2rem;
    margin: 0 0 3px 6px;

}

.about__profileTxt {
    text-align: center;
    font-size: 1.2rem;
    font-family: var(--fontFamilyJP);
    letter-spacing: 0.1rem;
    line-height: 3;
    margin: 10px 20px 0;
}

.pcBr {
    display: none;
}




  
@media screen and (min-width:680px){


  .article{
    padding: 0 2.7%;
}

.article__header {
    display: block;
    width: 100%;
    height: 180px;
    background-image: url(../images/about_header.webp);
    background-size: 120%;
    background-position: 40% ;
    font-family: var(--fontFamilyEN);
    font-size: 2.0rem;
    color: #FFFFFF;
    letter-spacing: 0.8rem;
    line-height: 180px;
    text-align: center;
}


    
.section--description {
    margin: 100px 0;
}

.about__description {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 4%;
    width: 604px;
}

.subTopic {
    text-align: left;
    font-family: var(--fontFamilyJP);
    font-size: 2.2rem;
    letter-spacing: 0.8rem;
    line-height: 2;
    margin-top: -8px;
}

.about__descriptionTxt {
    text-align: left;
    font-family: var(--fontFamilyJP);
    font-size: 1.2rem;
    letter-spacing: 0.2rem;
    line-height: 2.3;
    margin-top: 0;

}

.txBr {
    margin-top:30px;
}


.about__mainContents {
    padding: 140px 0 90px ;
    background-color: var(--primary-lightGray);
    margin-top: 100px;
}

.about__profile {
    position: relative;
    margin: 0 auto;
    width: 604px;
}

.about_work {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 1.4em;
    font-family: var(--fontFamilyJP);
    letter-spacing: 0.5rem;
    margin: 0 0 12px 48%;

}

.about_work::after {
    content: '';
    display: inline-block;
    width: 260px;
    height: 1px;
    background-color: var(--primary-gray);
}


.about_profileImg {
    position: absolute;
    top:-80px;
    bottom: 55px;
    left: 30px;

    width: 240px;
    height: 300px;
    object-fit: cover;

}

.profile__detail {
    width: 604px;
    height: auto;
    background-color: #FFFFFF;
    padding: 60px 0;
    text-align: right;
    margin: 0 auto;
}

.profile__block {
    display: block;
    margin-left: auto;
    width: 52%;
}

.about__profileName {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.nameEN{
    font-size: 1.8rem;
    font-family: var(--fontFamilyEN);
    letter-spacing: 0.3rem;
}
.nameJP{
    font-size: 1.8rem;
    font-family: var(--fontFamilyJP);
    letter-spacing: 0.3rem;
    margin: 0 0 4px 14px;

}

.about__profileTxt {
    text-align: left;
    font-size: 1.2rem;
    font-family: var(--fontFamilyJP);
    letter-spacing: 0.3rem;
    line-height: 3;
    margin: 20px 0 0;
    text-align: left;

}

.pcBr {
    display: block;
}

}

@media screen and (min-width:1281px){
    

  
.article{
    padding: var(--contentPadding);
}

.article__header {
    display: block;
    width: 100%;
    height: 280px;
    background-image: url(../images/about_header.webp);
    background-size: 100%;
    background-position: 70%;

    font-family: var(--fontFamilyEN);
    font-size: 3.2rem;
    color: #FFFFFF;
    letter-spacing: 0.8rem;
    line-height: 280px;
    text-align: center;
}

.section--description {
    margin: 100px 0;
}

.about__description {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 6%;
    width: 1000px;
}

.subTopic {
    text-align: left;
    font-family: var(--fontFamilyJP);
    font-size: 3.2rem;
    letter-spacing: 0.8rem;
    line-height: 2;
    margin-top: -8px;
}

.about__descriptionTxt {
    text-align: left;
    font-family: var(--fontFamilyJP);
    font-size: 1.4rem;
    letter-spacing: 0.3rem;
    line-height: 2.3;
    margin-top: 0;

}

.txBr {
    margin-top:40px;
}


.about__mainContents {
    padding: 285px 0 145px ;
    background-color: var(--primary-lightGray);
    margin-top: 100px;
}

.about__profile {
    width: 1000px;
    position: relative;
    margin: 0 auto;
}

.about_work {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 2.0rem;
    font-family: var(--fontFamilyJP);
    letter-spacing: 0.5rem;
    margin: 0 0 8px 52%;

}

.about_work::after {
    content: '';
    display: inline-block;
    width: 260px;
    height: 1px;
    background-color: var(--primary-gray);
    margin-left: 20px;
}


.about_profileImg {
    position: absolute;
    top:-140px;
    bottom: 55px;
    left: 55px;

    width: 44%;
    height: auto;
    object-fit: cover;

}

.profile__detail {
    width: 100%;
    height: auto;
    background-color: #FFFFFF;
    padding: 120px 0;
    text-align: right;
    margin-top: 0px;
    margin-bottom: 88px;
}

.profile__block {
    display: block;
    margin-left: auto;
    width: 46%;
}

.about__profileName {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.nameEN{
    font-size: 2.4rem;
    font-family: var(--fontFamilyEN);
    letter-spacing: 0.5rem;
}
.nameJP{
    font-size: 2.4rem;
    font-family: var(--fontFamilyJP);
    letter-spacing: 0.5rem;
    margin: 0 0 4px 14px;

}

.about__profileTxt {
    text-align: left;
    font-size: 1.6rem;
    font-family: var(--fontFamilyJP);
    letter-spacing: 0.3rem;
    line-height: 3;
    margin: 60px 0 0;
    text-align: left;

}

.pcBr {
    display: block;
}

}

/* history */


    
    .about__history {
        margin: 0 auto;    
        width: 300px;
        height: auto;
        background-color: #FFFFFF;
        padding: 55px 28px 40px; 
    }
    
    .history {
        text-align: center;
    }
    
    
    .about__history .title {
        display: inline;
        font-size: 1.6rem;
        letter-spacing: 0.5rem;
    }
    
    .about__history .txt {    
        font-size: 1.2rem;
        font-family: var(--fontFamilyJP);
        letter-spacing: 0.2rem;
        line-height: 2.5;
        text-align: left;
        
    }
    
    .aboutIcon {
        width: 20px;
        height: auto;
        margin: 14px auto 0;
    }
    
    
    .about__history .txt::before {
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background-color: var(--primary-gray);
        margin:30px 0;
    }

    .historyBr {
        display: none;
    }
    
    /* history */

    

/* history */
@media screen and (min-width:680px){

    
.about__history {
    width: 604px;
    margin: 0 auto;
    display: flex;
    align-items: center;

    height: 200px;
    background-color: #FFFFFF;
    padding: 30px 0;
}

.history {
    width: 200px;
    height: 200px;
    text-align: center;
    padding: 68px 0;
}


.about__history .title {
    display: inline;
    font-size: 1.4rem;
    letter-spacing: 0.5rem;
}

.about__history .txt {
    display: flex;
    align-items: center;
    width: 63%;
    height: 100%;

    font-size: 1.2rem;
    font-family: var(--fontFamilyJP);
    letter-spacing: 0.2rem;
    line-height: 2;
    text-align: left;
    
}

.aboutIcon {
    width: 24px;
    height: auto;
    margin: 14px auto 0;
}


.about__history .txt::before {
    content: '';
    display: block;
    width: 1px;
    height: 160px;
    background-color: var(--primary-gray);
    margin-right: 45px;
}
   
.historyBr{
    display: none;
}
    
}

/* history */


/* history */
@media screen and (min-width: 1281px){
    
.about__history {
    width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;

    height: 234px;
    background-color: #FFFFFF;
    padding: 50px 0;
}

.history {
    width: 234px;
    height: 234px;
    text-align: center;
    padding: 90px 0;
}


.about__history .title {
    display: inline;
    font-size: 1.6rem;
    letter-spacing: 0.5rem;
}

.about__history .txt {
    display: flex;
    align-items: center;
    width: 80%;
    height: 100%;

    font-size: 1.4rem;
    font-family: var(--fontFamilyJP);
    letter-spacing: 0.2rem;
    line-height: 2;
    text-align: left;
    
}

.aboutIcon {
    width: 24px;
    height: auto;
    margin: 14px auto 0;
}


.about__history .txt::before {
    content: '';
    display: block;
    width: 1px;
    height: 184px;
    background-color: var(--primary-gray);
    margin-right: 80px;
}

.historyBr{
    display:block;
}
    

}

/* history */



/* style */

.margin {
    margin-top: 45px;

}

.about__style {
    width: 300px;
    margin: 0 auto;
    height: auto;
    background-color: #FFFFFF;
    padding: 50px 28px 40px;

}

.style {
    text-align: center;
    padding: 0;
    }


.about__style .title {
display: inline;
font-size: 1.6rem;
letter-spacing: 0.5rem;
}

.about__style .txt {
font-size: 1.2rem;
font-family: var(--fontFamilyJP);
letter-spacing: 0.15rem;
line-height: 3;
text-align: left;

}


.about__style .txt::before {
content: '';
display: block;
width: 100%;
height: 1px;
background-color: var(--primary-gray);
margin:30px 0;

}
/* style */


@media screen and (min-width:680px){

    

/* style */

.margin {
    margin-top: 45px;

}

.about__style {
width: 604px;
margin: 0 auto;
display: flex;
align-items: center;

height: 180px;
background-color: #FFFFFF;
padding: 50px 0;

}

.style {
width: 200px;
height: 180px;
text-align: center;
padding: 60px 0;
}


.about__style .title {
display: inline;
font-size: 1.4rem;
letter-spacing: 0.5rem;
}

.about__style .txt {
display: flex;
align-items: center;
width: 63%;
height: 100%;

font-size: 1.2rem;
font-family: var(--fontFamilyJP);
letter-spacing: 0.2rem;
line-height: 2;
text-align: left;

}


.about__style .txt::before {
content: '';
display: block;
width: 1px;
height: 150px;
background-color: var(--primary-gray);
margin-right: 45px;
}

}
/* style */

@media screen and (min-width:1281px){
    

/* style */

.margin {
    margin-top: 45px;

}

.about__style {
width: 1000px;
margin: 0 auto;
display: flex;
align-items: center;

height: 180px;
background-color: #FFFFFF;
padding: 50px 0;

}

.style {
width: 234px;
height: 180px;
text-align: center;
padding: 60px 0;
}


.about__style .title {
display: inline;
font-size: 1.6rem;
letter-spacing: 0.5rem;
}

.about__style .txt {
display: flex;
align-items: center;
width: 80%;
height: 100%;

font-size: 1.4rem;
font-family: var(--fontFamilyJP);
letter-spacing: 0.2rem;
line-height: 2;
text-align: left;

}


.about__style .txt::before {
content: '';
display: block;
width: 1px;
height: 150px;
background-color: var(--primary-gray);
margin-right: 80px;
}

}
/* style */

/* value */

.about__value {
    width: 300px;
    margin: 0 auto;
    height: auto;
    background-color: #FFFFFF;
    padding: 50px 28px 40px;

}

.value {
    text-align: center;
}


.about__value .title {
    display: inline;
    font-size: 1.6rem;
    letter-spacing: 0.5rem;
}

.about__value .txt {
    font-size: 1.2rem;
    font-family: var(--fontFamilyJP);
    letter-spacing: 0.2rem;
    line-height: 3;
    text-align: left;
    
}


.about__value .txt::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--primary-gray);
    margin: 30px 0;

}



.aboutBr {
    display: none;
}



@media screen and (min-width:680px){

    /* value */

.about__value {
    width: 604px;
    margin: 0 auto;

    display: flex;
    align-items: center;

    height: 180px;
    background-color: #FFFFFF;
    padding: 50px 0;

}

.value {
    width: 200px;
    height: 180px;
    text-align: center;
    padding: 60px 0;
}


.about__value .title {
    display: inline;
    font-size: 1.4rem;
    letter-spacing: 0.5rem;
}

.about__value .txt {
    display: flex;
    align-items: center;
    width: 63%;
    height: 100%;

    font-size: 1.2rem;
    font-family: var(--fontFamilyJP);
    letter-spacing: 0.2rem;
    line-height: 2;
    text-align: left;
    
}


.about__value .txt::before {
    content: '';
    display: block;
    width: 1px;
    height: 150px;
    background-color: var(--primary-gray);
    margin-right: 45px;
}



.aboutBr {
    display: block;
}

}

@media screen and (min-width:1281px){
    /* value */

.about__value {
    width: 1000px;
    margin: 0 auto;

    display: flex;
    align-items: center;

    height: 180px;
    background-color: #FFFFFF;
    padding: 50px 0;

}

.value {
    width: 234px;
    height: 180px;
    text-align: center;
    padding: 60px 0;
}


.about__value .title {
    display: inline;
    font-size: 1.6rem;
    letter-spacing: 0.5rem;
}

.about__value .txt {
    display: flex;
    align-items: center;
    width: 80%;
    height: 100%;

    font-size: 1.4rem;
    font-family: var(--fontFamilyJP);
    letter-spacing: 0.2rem;
    line-height: 2;
    text-align: left;
    
}


.about__value .txt::before {
    content: '';
    display: block;
    width: 1px;
    height: 150px;
    background-color: var(--primary-gray);
    margin-right: 80px;
}



.aboutBr {
    display: block;
}

}




@media screen and (max-width: 320px) {


    .about__profile {
        width: 95%;
    }

    .about__history,.about__style,.about__value {
        width: 95%;
    }



  }