@charset "utf-8";

/* =======================
 PC版メニューの上の黒
=======================*/ 
@media screen and (min-width: 769px){
    .about-b::after{
      content:  "";     /* 空の要素作成 */
      background-color: var(--primary-black);
      width:  10px;               /* 幅指定 */
      height:  10px;              /* 高さ指定 */
      display:  inline-block;     /* インラインブロックにする */
      border-radius:  50%;        /* 要素を丸くする */
      position:  relative;        /* 位置調整 */
      top: -24px;                  /* 位置調整 */
      right: 50%;                  /* 位置調整 */
    }
    }/*pc769px*/
    

/* =======================
 言語切り替えボタン
=======================*/ 
.language{
    width: 90%;
    display: flex;
    justify-content: right;
}

.language-jp{
    padding: 8px 16px;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--primary-black);
    background-color: var(--primary-white);
    border: 0.5px solid var(--primary-black);
    border-radius: 50px 0 0 50px;
}

.language-en{
    padding: 8px 16px;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--primary-black);
    background-color: var(--primary-white);
    border: 0.5px solid var(--primary-black);
    border-radius: 0 50px 50px 0;
}

.black{
    color: var(--primary-white);
    background-color: var(--primary-black);
}

.white{
    color: var(--primary-black);
    background-color: var(--primary-white);
}

.white:hover{
    color: var(--primary-white);
    background-color: var(--primary-black);
}


/* =======================
 下層ページのセクションのタイトル
=======================*/ 

.pagesection__title__jp{
    font-family: Zen Maru Gothic;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 1.5px;
}

.pagesection__title__jp::before{
    content:  "";     /* 空の要素作成 */
    background-color: var(--primary-redgray);
    width:  12px;               /* 幅指定 */
    height:  12px;              /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    border-radius:  50%;        /* 要素を丸くする */
    position:  relative;        /* 位置調整 */
    margin-right: 8px;          /* 余白指定 */
}

.pagesection__title__en{
    font-family: Zen Maru Gothic;
    font-size: 4.0rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 2.5px;
    margin-top: 16px;
}

.statement__enTitle{
    font-size: 3.85rem;
}

.pagesection__title{
    width: 90%;
    margin: 0 5%;
    display: block;
    font-weight: 400;
}

/*400px */
@media screen and (min-width: 385px){
    .statement__enTitle{
        font-size: 4.0rem;
    }
}/*400px */

/*pc */
@media screen and (min-width: 769px){
    .pagesection__title__jp{
        font-family: Zen Maru Gothic;
        font-size: 2.0rem;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 1.5px;
    }
    
    .pagesection__title__en{
        font-family: Zen Maru Gothic;
        font-size: 5.4rem;
        font-weight: 300;
        line-height: 1;
        letter-spacing: 3px;
        margin-top: 16px;
    }
    
    .pagesection__title{
        margin-top: 72px;
        width: 90%;
        margin: 0 5%;
        display: block;
        font-weight: 400;
    }

    .pagesection__title__jp::before{
        content:  "";     /* 空の要素作成 */
        background-color: var(--primary-redgray);
        width:  12px;               /* 幅指定 */
        height:  12px;              /* 高さ指定 */
        display:  inline-block;     /* インラインブロックにする */
        border-radius:  50%;        /* 要素を丸くする */
        position:  relative;        /* 位置調整 */
        top:-1px;
        margin-right: 8px;          /* 余白指定 */
    }
}/*pc769px*/

/* =======================
 下層ページのスモールセクションのタイトル
=======================*/ 

.small-section__title__en{
    font-family: Zen Maru Gothic;
    font-size: 3.0rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 2.5px;
}


.small-section__title__jp{
    font-family: Zen Maru Gothic;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 3px;
    margin-left: 24px;
}

.small-section__title{
    margin-top: 80px;
    width: 90%;
    margin: 40px 5% 0;
    display: block;
    font-weight: 400;
}

.small-section__title::after{
    content:  "";     /* 空の要素作成 */
    background-color: var(--primary-redgray);
    width:  100%;               /* 幅指定 */
    height:  1px;              /* 高さ指定 */
    display:  block;     /* インラインブロックにする */
    position:  relative;        /* 位置調整 */
    top: 13px;                  /* 位置調整 */
    margin-right: 10px;          /* 余白指定 */
}


/*pc */
@media screen and (min-width: 769px){
    .small-section__title__en{
        font-family: Zen Maru Gothic;
        font-size: 4.0rem;
        font-weight: 300;
        line-height: 1;
        letter-spacing: 2px;
    }

    
    .small-section__title__jp{
        font-family: Zen Maru Gothic;
        font-size: 1.8rem;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 5px;
        margin-left: 40px;
    }
    
    .small-section__title{
        margin-top:120px;
        width: 90%;
        margin: 40px 5% 0;
        display: block;
        font-weight: 400;
    }

    .small-section__title::after{
        content:  "";     /* 空の要素作成 */
        background-color: var(--primary-redgray);
        width:  100%;               /* 幅指定 */
        height:  1px;              /* 高さ指定 */
        display:  block;     /* インラインブロックにする */
        position:  relative;        /* 位置調整 */
        top: 16px;                  /* 位置調整 */
        margin-right: 10px;          /* 余白指定 */
    }
}/*pc769px*/

/* =======================
 Aboutページの絵
=======================*/ 

.about_picture{
    width: 90%;
    margin: 80px auto 0;
    min-width: 330px;
    max-width:  500px;
}

/* Aboutページの絵 PC 769*/
@media screen and (min-width: 769px){
    .about_picture{
        width: 90%;
        margin: 80px auto 0;
        max-width:  600px;
    }
}/* pc 769px */

/* =======================
 Statement
=======================*/ 

.section__statement{
    margin:80px auto 100px;
    width: 90%;
    max-width: 800px;
}

.statement__box{
    margin: 56px auto 0;
    width: 90%;
}

.statement__box p{
    margin-top: 24px;
    font-size: 1.6rem;
    letter-spacing: 1.5px;
    line-height: 2;
    font-weight: 400;
}

/* Statement PC 769*/
@media screen and (min-width: 769px){

    .section__statement{
        margin:100px auto 120px;
        width: 90%;
        max-width: 800px;
    }

    .statement__box{
        width: 100%;
        margin: 64px auto 0;
        max-width: 600px;
    }
    
    .statement__box p{
        margin-top: 24px;
        font-size: 1.6rem;
        font-weight: 400;
    }
}/* pc 769px */


/* =======================
Profile
=======================*/
.section__profile{
    width: 90%;
    margin: 100px auto 40px;
}

/* Profile PC 769*/
@media screen and (min-width: 769px){
    .section__profile{
        width: 90%;
        margin: 120px auto 56px;
        max-width: 1080px;
    }
}/* pc 769px */

/* =======================
name-occupation
=======================*/

.name-occupation{
    width: 90%;
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
}

.name__kanji{
    font-size: 2.7rem;
    font-family: Zen Maru Gothic;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.9px;
    margin-top: 56px;
    margin-left: 20px;
    
}

.name__kana{
    font-size: 1.6rem;
    font-family: Zen Maru Gothic;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.5px;
    margin-top: 56px;
    margin-left: 20px;
    
}

.name__line{
    padding-left:20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--primary-gray);
}

.name-occupation::before{
    content: '';
    background-color: var(--primary-red);
    content: "";
    display: inline-block;
    height: 105px;
    vertical-align: bottom;
    width: 5px;
    position: absolute;
    top: -10px;
    left: 20px;
}

.occupation{
    font-size: 1.6rem;
    font-family: Zen Maru Gothic;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.4px;
    margin-top: 16px;
    margin-left: 44px;
}

.about-me__box{
    margin: 40px auto 0;
    width: 70%;
}

.profile_photo{
    width: 90%;
    margin: 0 auto;
    width: 250px;
}

.profile__txt p{
    font-size: 1.6rem;
    letter-spacing: 0.5px;
    line-height: 2;
    margin-top: 24px;
}

.instagram-icon{
    margin-top: 8px;
    text-align: right;
}

/*  Profile pc */
@media screen and (min-width: 769px){


    .name__kanji{
        font-size: 3.8rem;
        font-family: Zen Maru Gothic;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0.9px;
        margin-top: 100px;   
    }

    .name__kana{
    font-size: 1.8rem;
    font-family: Zen Maru Gothic;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.5px;
    margin-top: 56px;
    margin-left: 32px;
    
}

    .name__line{
        padding-left: 48px;
        padding-bottom: 32px;
        border-bottom: 1px solid var(--primary-gray);
    }
    
    .name-occupation::before{
        content: '';
        background-color: var(--primary-red);
        content: "";
        display: inline-block;
        height: 160px;
        vertical-align: bottom;
        width: 7px;
        position: absolute;
        top: -10px;
        left: 32px;
    }
    
    .occupation{
        font-size: 1.9rem;
        font-weight: 500;
        line-height: 1.8;
        letter-spacing: 0.9px;
        margin-top: 20px;
        margin-left: 68px;
    }
    
    .profile_photo{
        max-width:  400px;
        margin-left: 32px;
    }
    
    .profile__txt p{
        font-size: 1.6rem;
        letter-spacing: 0.5px;
        line-height: 2;
        margin-top: -8px;
        max-width: 600px;
    }

    .about-me__box{
        margin: 56px auto 0;
        width: 80%;
        max-width: 800px;
        display: flex;
        gap: 56px;
        justify-content: space-between;
    }
    
}/*pc769px*/


/* =======================
 small-section__cv
=======================*/ 

.small-section__cv{
    margin:40px auto 0;
    width: 80%;
}

.cv__box{
    margin-top: 40px;
    margin-left: 10%;
    margin-right: 5%;
}


/* cv pc */
@media screen and (min-width: 769px){
    .small-section__cv{
        margin:80px auto 0;
        max-width: 825px;
    }

    .cv__box{
        margin-top: 40px;
        margin-left: 10%;
        margin-right: 5%;
        max-width: 1280px;
    }
}/*pc769px*/

/* =======================
 年表共通
=======================*/

.small-section{
    margin-top: 56px;
}

.box{
    margin-top: 40px;
    margin-left: 10%;
    margin-right: 5%;
}

.back th{
    text-align: left;
    font-weight: 400;
    font-size: 1.45rem;
    letter-spacing: 1.5px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 32px;
    height: 56px;	
    white-space: nowrap;
}

.back td{
    text-align: left;
    font-size: 1.4rem;
    letter-spacing: 1.5px;
    padding-top: 15px;
    padding-bottom: 15px;
    height: 56px;
}

.event{
    position: relative;
}


/* 年表 PC 769*/
@media screen and (min-width: 769px){
    .small-section{
        margin-top: 80px;
    }

    .box{
        margin-top: 48px;
        margin-left: 15%;
        margin-right: 5%;
    }

    .bl{
        width: auto;
    }

    .back th{
        text-align: left;
        font-size: 1.65rem;
    }
    
    .back td{
        text-align: left;
        font-size: 1.6rem;
    }
}/* pc 769px */


/* =======================
 artist
=======================*/  
.section__artist{
    margin:100px auto 0;
    width: 90%;
}

/*  artist pc */
@media screen and (min-width: 769px){
    .section__artist{
        margin:120px auto 0;
        width: 90%;
        max-width: 800px;
    }
}/*pc769px*/


/* =======================
 Other
=======================*/ 

.section__other{
    margin:100px auto 120px;
    width: 90%;
}

.art-session__box h5,.yoga__box h5{
    margin: 80px 5% 0;
    display: block;
    font-family: Zen Maru Gothic;
    font-size: 2.3rem;
    letter-spacing: 1.5px;
    line-height: 1;
    font-weight: 500;
}

.art-session__box h5::before{
    content:  "";     /* 空の要素作成 */
    background-color: var(--primary-redgray);
    width:  100%;               /* 幅指定 */
    height:  1px;              /* 高さ指定 */
    display:  block;     /* インラインブロックにする */
    border-radius:  50%;        /* 要素を丸くする */
    position:  relative;        /* 位置調整 */
    top: 40px;                  /* 位置調整 */
    margin-right: 10px;          /* 余白指定 */
}

.yoga__box h5::before{
    content:  "";     /* 空の要素作成 */
    background-color: var(--primary-redgray);
    width:  100%;               /* 幅指定 */
    height:  1px;              /* 高さ指定 */
    display:  block;     /* インラインブロックにする */
    position:  relative;        /* 位置調整 */
    top: 40px;                  /* 位置調整 */
    margin-right: 10px;          /* 余白指定 */
}

.art-session__box p,.yoga__box p{
    margin: 40px 5% 0;
    display: block;
    font-size: 1.6rem;
    letter-spacing: 1px;
    line-height: 2;
    max-width: 800px;
}

/* Other PC 400*/
@media screen and (min-width: 450px){
    .art-session__box h5,.yoga__box h5{
        font-size: 2.4rem;
    }
}/* pc 450px */

/* Other PC 769*/
@media screen and (min-width: 769px){
    .section__other{
        margin:120px auto 160px;
        width: 90%;
        max-width: 800px;
    }
    
    .art-session__box h5,.yoga__box h5{
        margin: 80px 5% 0;
        display: block;
        font-family: Zen Maru Gothic;
        font-size: 3.6rem;
        letter-spacing: 2.5px;
        line-height: 1;
        font-weight: 400;
    }

    .art-session__box h5::before{
        content:  "";     /* 空の要素作成 */
        background-color: var(--primary-redgray);
        width:  100%;               /* 幅指定 */
        height:  1px;              /* 高さ指定 */
        display:  block;     /* インラインブロックにする */
        position:  relative;        /* 位置調整 */
        top: 50px;                  /* 位置調整 */
        margin-right: 10px;          /* 余白指定 */
    }
    
    .yoga__box h5::before{
        content:  "";     /* 空の要素作成 */
        background-color: var(--primary-redgray);
        width:  100%;               /* 幅指定 */
        height:  1px;              /* 高さ指定 */
        display:  block;     /* インラインブロックにする */
        border-radius:  50%;        /* 要素を丸くする */
        position:  relative;        /* 位置調整 */
        top: 50px;                  /* 位置調整 */
        margin-right: 10px;          /* 余白指定 */
    }
    
    .art-session__box p,.yoga__box p{
        margin: 40px auto 0;
        width: 90%;
        display: block;
        font-size: 1.6rem;
        letter-spacing: 1px;
        line-height: 2;
        max-width: 600px;
    }
}/* pc 769px */

/* =======================
 インスタ&コンタクト
=======================*/ 
.introduction__box{
    display: flex;
    justify-content: end;
    width: 90%;
    margin: 0 auto;
}

.introduction__list{
    margin-top: 100px;
}

.instagram__txt{
    font-size: 1.4rem;
    letter-spacing: 0.5px;
    line-height:1;
    margin-top: 5px;
}

.workshop__txt{
    font-size: 1.4rem;
    letter-spacing: 0.5px;
    line-height:1;
    margin-top: 32px;
}

.instagram{
    display: flex;
}

instagram img{
    width: 30px;
}

.workshop a{
    text-decoration: underline;
}

/* Other PC 400*/
@media screen and (min-width: 400px){
    .instagram__txt{
        font-size: 1.5rem;
        letter-spacing: 0.5px;
        line-height:1;
    }

    .workshop__txt{
        font-size: 1.5rem;
        letter-spacing: 0.5px;
        line-height:1;
        margin-top: 32px;
    }

    .introduction__box{
        max-width: 600px;
    }
    
}/* pc 400px */

/* 英語ページの3つ目の絵の下の余白*/
.en-about_picture{
    margin-bottom: 160px;
}