@charset "UTF-8";

/* header-navigation_mobile */

.header {
    width: 100%;
    height: 80px;
    padding: 10px 20px 10px;
    font-size: 1.2rem;
    display: flex; 
    justify-content: space-between;
    align-items: center;
}

.nav-PC {
    display: none;
}

.nav-mobile {
    background: #FFF;
    width: 100%;
    height: 100vh;
    padding: 40px 20px;
    position: fixed;
    top:0;
    left: 0;
    z-index: 100;
    transform: translateX(-100%); 
    transition:transform 0.4s;   
}

.nav-mobile.active {
    transform: translateX(0); 
}

.header-nav-mobile {
    position: relative;
}

.logo-header-title {
    display:flex;
    align-items: center;
    text-decoration: none;
}

.logo {
    display:block;
    width: 55px;
    height: auto;
    margin: 0 auto;
}

.close-button{
    display: block;
    position: absolute;
    right:20px;
}

.header-nav-list_mobile{
   margin-top: 40px; 
   text-align: center;
}

.headernav_mobile {
   color: #BB8D13;
   font-family: "Noto Sans JP";
   font-size: 1.3rem;
   text-decoration: none;
}

.headernav-item_mobile {
   color: #BB8D13;
   font-size: 1.3rem;
   padding-bottom: 35px;
}

.headernav-item-trial-lesson_mobile {
    display:block;
    width: 200px;
    padding-bottom: 35px;
    margin: 0 auto;
}

.a[target="_blank"] {
    color: #FFF;
}

.hamburger-button-mobile {
    display: block;
    width: 60px;
    height: 60px; 
}

.hamburger-button-mobile:hover {
    opacity: 0.5;
  }
 
.header-title {
    width:100%;
    padding-left: 10px;
    color: #BB8D13;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 1.2px;
}

/* header-navigation_PC */

@media(min-width: 1000px) {

    .nav-mobile {
        display: none;
    }

    .nav-PC {
        display: block;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
    }
    
    .hamburger-button-mobile {
        display: none;
    }

    .header {
        width: 100%;
        max-width: 1300px;
        height: 100px;
        padding: 10px 100px 10px;
        font-size: 1.3rem;
        display: block;
        margin: 0 auto;
    }

    .logo {
        height: 80px;
        width: auto;
    }

    .logo-header-title-navlistPC {
        display: flex;
        justify-content: space-between;
    }

    .header-title {
        font-size: 2.0rem;
    }

    .logo-header-title {
        display: flex;  
    }

    .logo-header-title-navPC {
        display: flex;
        justify-content: space-between;
    }

    .header-nav-list_PC {
        display: flex;
        justify-content: space-between; 
    }

    .headernav-item-profile_PC,.headernav-item-lesson_PC {
        width: 140px; 
        line-height: 43px;
    }

    .headernav-item-profile_PC a,.headernav-item-lesson_PC a {
        color: #BB8D13; 
    }

    .headernav-item-trial-lesson_PC {
        width: 200px;
    }

    .trial-application-button {
        display:block;
        width: 100%;
        max-width: 200px;
    }

    .item-lesson_PC{
        margin-right: 40px;
    }
        
    }

/* profile_mobile */


.visual_PC {
    display: none;
}

.visual_mobile {
    width: 100%;
    height: auto;
}

.profile {
    background: rgba(231, 180, 153, 0.10);
    padding-top: 60px;
    padding-bottom: 60px; 
}

.message{
    padding-left: 20px;
    padding-right: 20px;
}

.profile-title  {
    width:100%;
    padding-bottom: 60px;
    align-items: center;
}

.profile-en {
    color: #575757;
    text-align: center;
    font-family: Playball;
    font-size: 3.2rem;
    margin-bottom:10px;
    font-weight: 400;
}

.profile-ja {
    color: #BB8D13;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 1.6rem;
    font-weight: 500;
}

.naokowatanabe-ja {
    font-size: 2.0rem;
    text-align: center;
}

.naokowatanabe-en {
    color: #E7B499;
    text-align: center;
    font-family: Playball;
    font-size: 1.3rem;
    padding-bottom: 20px;
}

.photo-red {
    display: block;
    width: 100%;
    max-width: 278px;
    margin: 0 auto;
    margin-bottom: 20px;
}

.profile-message{
    font-size: 1.3rem;
    padding-top: 10px;
    padding-bottom: 10px;
}

.career {
    padding-left: 20px;
    padding-right: 20px;
}

.photoblack-PC {
    display: none;
}

.photoblack-mobile {
    display: block;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 100px;
   
    width: 100%;
    max-width: 500px;
    margin-right: 0px;
    margin-left: auto;
}

.career-text {
    font-size: 1.2rem;
    padding-bottom: 5px;
}


/* profile_PC */

@media(min-width:750px) {

    .visual_PC {
        display: block;  
        width:100%;
        margin: 0 auto;
        max-width: 1300px;
        background: #fff;
       
    }
    
    .visual_mobile {
        display: none;
    }

    .profile {
        padding-top: 0px;
        padding-bottom: 0px; 
        max-width: 1300px;
        margin:0 auto;
    }


    .profile-title  {
        padding: 80px 20px 80px;
        align-items: center;
    }

    .profile-en {
        color: #575757;
        font-family: Playball;
        font-size: 4.8rem;
        padding-bottom: 10px;  
       
    }
    
    .profile-ja {
        color: #BB8D13;
        font-family: "Noto Sans JP";
        font-size: 2.4rem;
    }

    .name-photo-message {
        /* display:flex; */
        justify-content: center;
        padding-left: 120px;
        padding-right: 120px;
        padding-bottom: 80px;
    }

    .naokowatanabe-ja {
        color: #333;
        font-size: 2.0rem;
        padding-right: 0px;
        padding-top: 20px;
    }

    .naokowatanabe-en {
        color: #E7B499;
        text-align: center;
        font-family: Playball;
        font-size: 2.0rem;
        padding-right: 0px;
    }

   .profile-message {
       color: #333;
       font-size: 1.4rem;
       line-height: 3.0rem; /* 150% */
       width: 100%;
       max-width: 600px;
       padding-left: 0px;
       margin: 0 auto;
    }
 
  .photo-red {
    margin-bottom: 80px;
    padding-right: 0px;
    width: 100%;
    max-width: 320px;
    }

  .career-photo {
    display: flex;
    justify-content: center;
    padding-left: 100px;
  }

  .photoblack-mobile {
    display: none;
  }

  .photoblack-PC {
    display:block;
    width: 100%;
    max-width: 480px;
    height: auto;
  }

  .career-text{
    font-size: 1.4rem;
    width: 100%;
    max-width: 800px;
    padding-right: 20px;
    padding-bottom: 20px;
  }
}


/* solo_mobile */

.soloensemble {
   padding-bottom: 60px;
}

.solo-PC{
    display: none;
}

.soloensemble-title {
    font-size: 2.0rem;
    padding-bottom: 20px;
    padding-top: 60px;
}

.soloensemble-en {
    color: #575757;
    text-align: center;
    font-family: Playball;
    font-size: 3.2rem;
    font-weight: 400;
    margin-bottom: 10px;;
}

.soloensemble-ja {
    color: #BB8D13;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 1.6rem;
    font-weight: 500;
}

.photowhite {
    display:block;
    width: 100%;
    max-width: 350px;
    justify-content: left;
    margin-left: 0px;
    margin-right:auto;
    margin-top: 40px;
}

.solo-PC {
    display: none;
}

.-naokowatanabe-instagram {
    display: flex;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px; 
}

.-naokowatanabe {
    display: block;
    margin-top: 65px;
    height: 100%;
    max-height: 200px;
}

.solo-instagram {
    padding-top: 60px;
    /* padding-left: 20px; */
    width: 400px;
}

.solo-name{
    color: #BB8D13;
    font-size: 2.0rem;
    text-align: center;
    padding-bottom: 60px;
    }

.naokowatanabe_instagram {
    display: block;
width: 100%;
max-width: 120px;
margin:0 auto;
margin-bottom: 100px;
}


/* solo_PC */

@media(min-width: 750px) {

    .soloensemble {
        max-width: 1300px;
        margin:0 auto;  
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 100px;
    }

    .soloensemble-title  {
        padding: 80px 20px 80px;
        align-items: center;
    }

    .soloensemble-en {
        color: #575757;
        font-family: Playball;
        font-size: 4.8rem;
        padding-bottom: 0px;  
        margin-top: 10px;
    }
    
    .soloensemble-ja {
        color: #BB8D13;
        font-family: "Noto Sans JP";
        font-size: 2.4rem;
    }

    .solo-PC{
        display: block;
        max-width: 800px;
        margin:0 auto;
        position: relative;
        padding-left: 20px;
        padding-right: 20px;
    }

    .solo-mobile {
        display: none;
    }

    .photowhite-naokowatanabe {
        width: 100%;
    }

    .naokowatanabe_instagram {
        position:absolute;
        width: 100%;
        max-width: 120px;
        margin: 0px;
        padding-right: 0px;
        bottom: -20px;
        right: -30px;
    }

    .solo-name{
        color: #BB8D13;
        font-size: 2.0rem;
        text-align: center;
        padding-bottom: 40px;
        
        }
}


/* serenade_mobile */

.serenade-PC {
    display:none;
}

.-serenade-text-instagram {
    display:flex;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
}


.serenade-title {
    color: #BB8D13;
    font-family: "Noto Sans JP";
    font-size: 1.6rem;
    padding-bottom: 20px;
    padding-top: 20px;
    text-align: center;
    font-weight: 500;
}

.serenade-text {
    font-size: 1.3rem;
    color:#333;
    text-align: left;
    padding-top: 10px;
    padding-bottom: 10px;
}

.serenade_photo1 {
    display:block;
    width: 100%;
    max-width: 350px;
    justify-content: right;
    margin-left: auto;
    margin-right: 0px;
}

.-serenade {
    display: block;
    margin-top: 65px;
    height: 100%;
    max-height: 450px;
}

.text-instagram {
    padding-top: 40px;
    padding-left: 20px;
    width: 400px;
}

.serenade_instagram{
    display: block;
    width: 100%;
    max-width: 120px;
    margin:0 auto;
    margin-top: 20px;
}

/* serenade-PC */

@media(min-width: 750px) {

.serenade-PC {
    display:flex;
    justify-content: center;
    padding-top: 100px;
    max-width: 1300px;
    margin:0 auto;  
    }


.serenade-mobile {
    display: none;
}

.-serenade-photo {
    width: 100%;
    max-width: 800px;
    padding-left: 60px;
    padding-top: 60px;
}

.serenade-title-text {
    max-width: 400px;
    padding-top: 40px;
    padding-left: 20px;
}

.serenade-title {
    font-size: 1.8rem;
    text-align: center;
    padding-top: 20px;
}


.serenade-text {
    font-size: 1.4rem;
}
}



/* topaz_mobile */

.topaz-PC {
    display:none;
}

.-topaz-text-instagram {
    display:flex;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
   
}

.topaz-title {
    color: #BB8D13;
    font-family: "Noto Sans JP";
    font-size: 1.6rem;
    padding-bottom: 20px;
    padding-top: 20px;
    text-align: center;
    font-weight: 500;
}

.topaz-text {
    font-size: 1.3rem;
    color:#333;
    text-align: left;
    padding-top: 10px;
    padding-bottom: 10px;
}

.topaz_photo {
    display:block;
    width: 100%;
    max-width: 350px;
    justify-content: left;
    margin-left: 0px;
    margin-right:auto;
    margin-top: 60px;
}

.-topaz {
    display: block;
    margin-top: 65px;
  
    height: 100%;
    max-height: 450px;
}

.text-instagram {
    padding-top: 40px;
    padding-left: 20px;
    width: 400px;
}

.topaz_instagram{
display: block;
width: 100%;
max-width: 120px;

margin:0 auto;
margin-top: 20px;
}

/* topaz_PC */

@media(min-width: 750px) {

.topaz-PC {
    display:flex;
    justify-content: center;
    padding-top: 100px;
}

.topaz-mobile {
    display: none;
}

.topaz_photo {
    margin-top: 100px;
}


.-topaz-photo {
    width: 100%;
    max-width: 800px;
    padding-right: 60px;
    padding-top: 60px;
}

.topaz-title {
    font-size: 1.8rem;
}

.topaz-text {
    font-size: 1.4rem;
   
}

.topaz-title-text {
    max-width: 400px;
    padding-right: 20px;
    padding-top: 40px;
   
}

}



/* 演奏依頼についてmobile */

.Request-for-Performance {
 background: rgba(231, 180, 153, 0.50);
 padding-top: 60px;
 padding-bottom: 30px;
}

.Request-for-Performance-title  {
    width:100%;
    padding-bottom: 40px;
    align-items: center;
}

.Request-for-Performance-en {
    color: #575757;
    text-align: center;
    font-family: Playball;
    font-size: 3.2rem;
    margin-bottom: 10px;
    margin-top:10px;
    font-weight: 400;
}

.Request-for-Performance-ja {
    color: #BB8D13;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 1.6rem;
    font-weight: 500;
}

.Request-for-Performance-text {
    font-size: 1.3rem;
    padding-bottom: 40px;
    padding-left: 20px; 
    padding-right: 20px; 
}

.tel {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 30px;
}

.phone-icon {
   display:block;
   width: 100%;
   max-width: 45px;
   margin-right: 10px;
}

.telnumber {
    width: 100%;
    max-width: 230px;
    margin-left: 10px;
}

.LINE {
    display: flex;
    justify-content:center;
    align-items: center;
    padding-bottom: 30px;
}

.LINE-icon {
    display:block;
   width: 100%;
   max-width: 45px;
   margin-right: 23px;
   
}

.LINE-button {
    width: 100%;
    max-width: 230px;
   
}

.mail {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 30px;
}

.mail-icon{
    display:block;
    width: 100%;
    max-width: 43px;
    height: auto;
    margin-right: 30px;
    
}

.mail-address{
    font-size: 1.6rem;;
}

.mail-notice {
    font-size: 1.3rem;
    color: #E46019;
}

.flutist {
    display: none;
}


/* 演奏依頼についてPC */
@media(min-width: 750px){
    a[href^="tel:"]{
      pointer-events: none;
    }

    .Request-for-Performance{
        position: relative;
        max-width: 1300px;
        margin:0 auto;
        padding-top: 80px;
    }

    .Request-for-Performance-title  {
        width:100%;
        padding-bottom: 40px;
        align-items: center;
    }
    
    .Request-for-Performance-en {
        color: #575757;
        text-align: center;
        font-family: Playball;
        font-size: 4.8rem;
        margin-bottom: 20px;
        margin-top:20px;
    }
    
    .Request-for-Performance-ja {
        color: #BB8D13;
        text-align: center;
        font-family: "Noto Sans JP";
        font-size: 2.4rem;
    }
    
    .Request-for-Performance-text {
        font-size: 1.6rem;
        padding-bottom: 40px;
        padding-left: 100px; 
        padding-right: 100px; 
        line-height: 3.0rem;
        max-width: 1000px;
        margin:0 auto;
    }
    
    .flutist {
        display: block;
        position: absolute;
        padding-top: -100px;
        padding-left: 15px;
        opacity: calc(0.3);
    }

  }


/* 過去の演奏活動についてmobile */

.accordion-PC {
    display: none;
}



/*==================================================
アコーディオンのためのcss
===================================*/

/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    width: 96%;
    max-width: 900px;
    margin:0 auto;
}

.accordion-area li{
    margin: 10px 0;
}

.accordion-area section {
  border: 1px solid #fff;
}

/*アコーディオンタイトル*/
.accordion-title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1.6rem;
    font-weight: normal;
    transition: all .5s ease;
    color:#BB8D13;
    background-color: #FFF;
    margin: 15px 20px ;
    border: 1px solid #BB8D13;
    padding: 10px 10px 10px 20px;
    text-align: center;
}

/*アイコンの＋と×*/
.accordion-title::before,
.accordion-title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #BB8D13; 
}

.accordion-title::before{
    top:48%;
    left: 15px;
    transform: rotate(0deg);
}


.accordion-title::after{    
    top:48%;
    left: 15px;
    transform: rotate(90deg);
}

/*　closeというクラスがついたら形状変化　*/

.accordion-title.close::before{
  transform: rotate(45deg);
}

.accordion-title.close::after{
  transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
    display: none;/*はじめは非表示*/
    background: rgba(187, 141, 19, 0.05); 
    padding: 10px;
}





/* 過去の主な演奏活動mobile */

.History{
    padding-bottom: 40px;
}

.History-title {
    padding-top: 60px;
    padding-bottom: 40px;
}

.History-en {
    color: #575757;
    text-align: center;
    font-family: Playball;
    font-size: 3.2rem;
    margin-bottom: 10px;
    font-weight: 400;
    
}

.History-ja {
    color: #BB8D13;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 1.6rem;
    font-weight: 500;
}



.year-text{
    display: flex;
    font-size: 1.3rem;
    padding-top: 5px;
    padding-bottom: 5px;
}

.year {
    display:block;
    width: 100%;
    max-width: 60px;
    padding-right: 10px;
}

.yeartext {
    text-align: left;
}

.red {
    color: #E46019;
}

.yeartext-plan {
    display: block;
    font-size: 1.3rem;
    padding-top: 15px;
    padding-bottom: 5px;
}

.year-date {
    display:block;
    width: 100%;
    max-width: 120px;
    padding-right: 10px;
}


/* 過去の演奏活動についてPC */
@media(min-width: 750px){
    .accordion-mobile {
        display: none;
    }

    .accordion-PC {
        display: block;
    }

    .History {
        padding-left: 100px;
        padding-right: 100px;
        max-width: 1300px;
        margin:0 auto;
    }

    .History-title  {
        width:100%;
        padding-top: 80px;
        padding-bottom: 60px;
        align-items: center;
    }
    
    .History-en {
        color: #575757;
        text-align: center;
        font-family: Playball;
        font-size: 4.8rem;
        margin-top:20px;
        margin:20px;
        
    }
    
    .History-ja {
        color: #BB8D13;
        text-align: center;
        font-family: "Noto Sans JP";
        font-size: 2.4rem;
    
    }
    
    .Request-for-Performance-text {
        font-size: 1.6rem;
        padding-bottom: 40px;
        padding-left: 100px; 
        padding-right: 100px; 
        line-height: 3.0rem;
    }

    .year-title {
        font-size: 1.6rem;
        color: #BB8D13;
        text-align: center;
        padding-bottom: 20px;
        padding-top: 20px;
        
    }

    .year1999-2009 {
    max-width: 700px;
    background: rgba(187, 141, 19, 0.05); 
    padding: 20px 20px 40px; 
}

    .year2011-2019 {
    display: block;
    max-width: 700px;
    background: rgba(187, 141, 19, 0.05);  
    padding: 20px 20px 40px; 
    margin-top: 100px;
    margin-right: 0px;
    margin-left: auto;
}

.year2021-2024 {
    max-width: 700px;
    background: rgba(187, 141, 19, 0.05); 
    padding: 20px 20px 40px; 
    margin-top: 100px;
}


}







/* return-button_mobile */

.return{
    padding: 0px 20px 80px;
    position: relative;
    margin-right: 20px;
    margin-left: 20px;
 }
 
 .returnbutton {
    display: block;
    position:absolute;
    right: 0px;
    width: 80px;
 }

/* return-button_PC */
@media(min-width:750px) {

.return{
    margin-right: 100px;
    margin-left: 100px;
    padding: 0px 0px 80px;
    position: relative;
  
    margin:0 auto;
 }
 
 .returnbutton {
    display: block;
    position:absolute;
    width: 60px;
    right: 100px;
 }

}
 
  /* footer_mobile */
 
  .footer {
    margin: 0 auto;     
    padding: 40px 20px 40px;
    background-image: url(../images/footer-photo_mobile.jpg);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    height: 380px;
  }

.footer-nav {
    width: 145px;
    margin:0 auto;
}

.footertitle-instagram {
    display: flex;
    justify-content: center;
    position: relative;
}

.instagram-black {
    position:absolute;
    top: 3px;
    right:20px;
    width:25px;
}

.footertitle {
    color: #000;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding-bottom: 40px;
}

.footernav-list {
    text-align:center; 
}

.footernav-item {
    text-align: center;
    font-size: 1.3rem;
    padding: 10px 0px;
}

.copy {
    font-size: 1.3rem;
    text-align: center;
    padding-top: 40px;
}




/* footer_mobile 320*/
@media(max-width: 360px) {
    .footer {
        background-size: cover;
      }
   } 


/* footer_PC*/
@media(min-width: 750px) {

.footer {
   margin: 0 auto;     
   padding: 40px 100px 0px;
   background-image: url(../images/footer-photo_mobile.jpg);
   background-position: center;
   background-size: 100%;
   background-repeat: no-repeat;
   height: 380px;
  
 }

.footer-nav {
   width: 180px;
   margin:0 auto;
}

.footertitle-instagram {
   display: flex;
   justify-content: center;
   position: relative;
}

.instagram-black {
    display: block;
   position:absolute;
   top: 3px;
   right:0px; 
   width:35px;
}

.footertitle {
   color: #000;
   font-size: 2.0rem;
   font-weight: 700;
   letter-spacing: 1.2px;
   padding-bottom: 40px;
}

.footernav-list {
   text-align:center; 
}

.footernav-item {
   text-align: center;
   font-size: 1.6rem;
   padding: 10px 0px;
}

.copy {
   font-size: 1.6rem;
   text-align: center;
   padding-top: 40px;
}

}