@charset "UTF-8";

.top-ue {
    background-color: #fff;
}
/* section-top */
.section-top {
    max-width: 1080px;
    height: 446px;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
    background-color: #fff;
    padding-top: 90px;
}
.top-photo-area {
    background-image: url("../photo/top-photo.jpg");
    border-radius: 3px 3px 90px 3px;
    background-size: cover;
    max-width: 890px;
    height: 100%;
}
.copy {
    font-size: 40px;
    letter-spacing: 1.6rem;
    line-height: 60px;
    position: absolute;
    top: 240px;
    right: 0;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.5);
}




.news-box {
    background-color: #fff;
    height: 195px;
    max-width: 417px;
    border-radius: 0 3px 3px 3px;
    position: absolute;
    top: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
}

.box-inside {
    background-color: #fff;
    max-width: 352px;
    height: 138px;
    margin: auto;
}
.box-inside a {
    color: inherit;
    text-decoration: none;
}
.box-inside h1 {
    padding-top: 20px;
    letter-spacing: 0.6rem;
    font-family: linotype-didot, serif;
    font-weight: 700;
    font-style: normal;
    font-size: 25px;
}
.box-inside ol {
    padding-top: 25px;
}
.box-inside ol li:last-child {
    padding-top: 10px;
}
.top-france h2 {
    position: absolute;
    color: #cc8483;
    top: 547px;
    left: 430px;
    font-weight: 500;
    font-family: linotype-didot, serif;
}

.scrolldown2{
  position:absolute;
  bottom:10px;
  right: 10px;
}
.scrolldown2 span{
    /*描画位置*/
    margin-left: 10px;
  color: #333;
  font-size: 15px;
  letter-spacing: 0.05em;
  -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    font-family: linotype-didot, serif;
}
/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
  width:10px;
  height:10px;
  border-radius: 50%;
  background:#cc8483;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation: 
  circlemove 1.6s ease-in-out infinite, 
  cirlemovehide 1.6s ease-out infinite;
  z-index: 2;
}
@keyframes circlemove{
    0%{bottom:45px;}
   100%{bottom:-5px;}
}

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
    0%{opacity:0}
   50%{opacity:1;}
  80%{opacity:0.9;}
  100%{opacity:0;}
}
/* 線の描写 */
.scrolldown2:after{
    content:"";
      /*描画位置*/
    position: absolute;
    bottom:0;
    left:0;
      /*線の形状*/
    width:2px;
    height: 50px;
    background:#eee;
    z-index: 1;
  }


@media screen and (max-width: 1129px) {
    /* section-top */
    .section-top {
        max-width: 1080px;
        margin: 0 30px;
    }
    .top-photo-area {
        background-image: url("../photo/top-photo.jpg");
        border-radius: 3px 3px 90px 3px;
        background-size: cover;
        max-width: 890px;
        height: 100%;
    }
    .copy {
        font-size: 40px;
        letter-spacing: 1.6rem;
        line-height: 60px;
        position: absolute;
        top: 240px;
        right: 0;
        padding: 10px;
        background-color: rgba(255, 255, 255, 0.5);
    }




    .news-box {
        background-color: #fff;
        height: 195px;
        max-width: 417px;
        border-radius: 0 3px 3px 3px;
        position: absolute;
        top: 470px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .box-inside {
        background-color: #fff;
        max-width: 352px;
        height: 138px;
        margin: auto;
    }
    .box-inside a {
        color: inherit;
        text-decoration: none;
    }
    .box-inside h1 {
        padding-top: 20px;
        font-weight: 800;
        letter-spacing: 0.6rem;
        font-size: 20px;
    }
    .box-inside ol {
        padding-top: 25px;
    }
    .box-inside ol li {
        font-size: 14px;
    }
    .sample-news {
        padding-top: 10px;
    }
    .top-france h2 {
        position: absolute;
        color: #cc8483;
        top: 547px;
        left: 430px;
        font-weight: 500;
    }

    .scrolldown2{
    position:absolute;
    bottom:10px;
    right: 10px;
    }
    .scrolldown2 span{
        /*描画位置*/
        margin-left: 10px;
    color: #333;
    font-size: 15px;
    letter-spacing: 0.05em;
    -ms-writing-mode: tb-rl;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
    }


    }

@media screen and (max-width: 1007px) {
    .scrolldown2 {
        display: none;
    }
    .copy {
        font-size: 35px;
        letter-spacing: 1.2rem;
        line-height: 53px;
        position: absolute;
        top: 280px;
        right: 0;
        padding: 10px;
        background-color: rgba(255, 255, 255, 0.5);
    }
    .top-france h2 {
        font-size: 13px;
        left: 450px;
    }



}
@media screen and (max-width: 854px) {
    .top-france h2 {
        left: 390px;
        font-size: 12px;
    }
}

@media screen and (max-width: 751px) {
    .top-france h2 {
        left: 350px;
    }
}


    @media screen and (max-width: 660px) {
        .section-top {
            border-radius: 0px;
            width: 100%;
            height: 240px;
            position: relative;
            background-position: center;
            margin: 0;
        }
        .top-photo-area {
            border-radius: 0px;
            background-size: cover;
            width: 100%;
            height: 300px;
        }
        .copy {
            font-size: 30px;
            letter-spacing: 0.5rem;
            line-height: 53px;
            position: absolute;
            top: 192px;
            right: 0px;
            background-color: rgba(255, 255, 255, 0.5);
        }
        .top-france h2 {
            position: absolute;
            color: #cc8483;
            top: 395px;
            left: 0px;
            font-weight: 500;
            font-size: 1.2rem;
            text-align: left;
            padding-left: 40px;
        }
        .news-box {
            background-color: transparent;
            height: 195px;
            width: 100%;
            border-radius: 3px;
            position: absolute;
            top: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box-inside {
            background-color: transparent;
            width: 100%;
            height: 138px;
            margin: auto;
            padding: 0 25px;
        }
        .box-inside h1 {
            padding-top: 20px;
            font-weight: 800;
            letter-spacing: 0.6rem;
        }
        .box-inside ol {
            padding-top: 5px;
            font-size: 12px;
        }
        .sample-news {
            padding-top: 35px;
            border-bottom: solid 1px rgba(51, 51, 51, 0.2);
            padding-bottom: 25px;
        }
        .scrolldown2 {
            display: none;
        }
}


@media screen and (max-width: 480px) {
    .section-top {
        border-radius: 0px;
        width: 100%;
        height: 240px;
        position: relative;
        background-position: center;
        margin: 0;
        padding-top: 50px;
    }
    .top-photo-area {
        border-radius: 0px;
        background-size: cover;
        width: 100%;
        margin-top: 0;
    }
    .copy {
        font-size: 20px;
        letter-spacing: 0.4rem;
        line-height: 22px;
        position: absolute;
        top: 172px;
        right: 0px;
        background-color: rgba(255, 255, 255, 0.5);
    }
    .top-france h2 {
        position: absolute;
        color: #cc8483;
        top: 353px;
        left: 0px;
        font-weight: 500;
        font-size: 1.2rem;
        text-align: center;
        padding-left: 40px;
    }
    .news-box {
        background-color: transparent;
        height: 195px;
        width: 100%;
        border-radius: 0;
        position: absolute;
        top: 330px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
    }
    .box-inside {
        background-color: transparent;
        width: 100%;
        height: 138px;
        margin: auto;
        padding: 0 25px;
    }
    .box-inside h1 {
        padding-top: 20px;
        font-weight: 800;
        letter-spacing: 0.6rem;
    }
    .box-inside ol {
        padding-top: 10px;
        font-size: 12px;
    }
    .box-inside ol li {
        padding-bottom: 10px;
    }
    .sample-news {
        padding-top: 10px;
        border-bottom: solid 1px rgba(51, 51, 51, 0.2);
    }
    .scrolldown2 {
        display: none;
    }
    .sample-news {
        padding-top: 0;
    }
}
@media screen and (max-width: 407px) {
    .top-france h2 {
        padding: 10px;
    }
    .box-inside h1 {
        font-size: 18px;
        margin-top: 30px;
    }
    .box-inside ol li {
        font-size: 14px;
    }
    .sample-news {
        padding: 0;
    }

}



/* section-read */
.section-read {
    padding-top: 280px;
    text-align: center;
    background-color: #fff;
}
.read-text {
  display: inline-block;
  line-height: 2.4rem;
  letter-spacing: 0.3rem;
}
.read-text h1 {
    font-size: 2.2rem;
    font-weight: 500;
    text-align: center;
}
.read-text p {
    text-align: center;
    padding-top: 20px;   
}
.top-gosen-01 {
   opacity: 50%;
}

@media screen and (max-width: 480px) {
    .section-read {
        padding-top: 280px;
        text-align: center;
    }
    .read-text {
        line-height: 2.4rem;
        letter-spacing: 0.1rem;
      }
      .read-text h1 {
          font-size: 16px;
          font-weight: 600;
          text-align: center;
          letter-spacing: 0.3rem;
      }
      .read-text p {
          font-size: 14px;
          font-weight: 200; 
          padding-top: 12px;  
      }
      .top-gosen-01 {
         opacity: 50%;
         height: 100px;
         margin-top: 20px;
         object-fit: cover;
      }

}





/* section-greeting */
.section-greeting {
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(248,236,226,1) 60%);
    padding-bottom: 80px;
}
.Greeting {
    color: #cc8483;
    font-size: 2.5rem;
    margin-bottom: 90px;
    margin-top: 30px;
    display: flex;
    align-items: center;
    font-family: linotype-didot, serif;
    font-weight: 700;
    font-style: normal;
}
.Greeting::after {
    display: block;
    content: "";
    height: 1px;
    width: 100%;
    background-color: #cc8483;
    margin-left: 25px;
}

.top-profile-photo-sp {
    display: none;
}

.greeting-profile {
    display: flex;
    max-width: 1080px;
    margin: 0 auto 70px;
    justify-content: center;
    align-items: center;
}
.greeting-left-area {
    max-width: 480px;
    letter-spacing: 0.1rem;
    padding-right: 70px;
}
.greeting-text {
    margin-bottom: 20px;
}
.pianist-and-name {
    display: flex;
    align-items: center;
    justify-content: right;
}
.pianist {
    font-size: 1.2rem;
    font-family: 'Noto Sans JP', sans-serif;
    margin-right: 20px;
    letter-spacing: 0.3rem;
    color: #707070;
}
.yukari-name {
    height: 45px;
    width: auto;
}
.button-shiru {
    align-items: center;
    margin-top: 30px;
    margin-bottom: 30px;
    font-family: 'Noto Sans JP', sans-serif;
    color:inherit;
    text-decoration: none;
    justify-content: end;
    display: block;
    text-align: right;
}
.button-shiru::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid #000;
    border-top: 2px solid #000;
    display: inline-block;
    transform: rotate(45deg);
    margin-left: 5px;
}
.photo-area-01 {
    width: 250px;
    height: 325px;
}
.top-profile-photo {
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 16px 0px 0px 0 #cc8483;
    width: 100%;
    object-position: bottom center;
    height: 320px;
}




.btn01 {
     /*影の基点とするためrelativeを指定*/
    position: relative;
     /*ボタンの形状*/
    text-decoration: none;
    display: block;
    text-align: center;
    background: transparent;
    border-radius: 3px;
    border: solid 1px #cc8483;
    outline: none;
     /*アニメーションの指定*/
    transition: all 0.2s ease;
    width: 370px;
    margin: 0 auto;
}
/*hoverをした後のボタンの形状*/
.btn01:hover{
    border-color:transparent; 
  }
  
  /*ボタンの中のテキスト*/
  .btn01 span {
    position: relative;
    z-index: 2;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
      /*テキストの形状*/
    display: block;
      padding: 20px 40px;
    background:#cc8483;
    border-radius: 0px;
    color:#fff;
    font-weight: 400;
    font-family: 'Noto Sans JP', sans-serif;
      text-align: center;
      letter-spacing: 0.4rem;
      /*アニメーションの指定*/
      transition: all 0.3s ease;
      font-size: 16px;
  }

  /*
.btn01 span::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
  display: inline-block;
  transform: rotate(45deg);
  margin-left: 50px;
}
*/


  /*== 右下に押し込まれる（立体が平面に） */
  
  /*影の設定*/
  .pushright:before {
      content: "";
      /*絶対配置で影の位置を決める*/
      position: absolute;
    z-index: -1;
      top: 4px;
      left: 4px;
      /*影の形状*/
      width: 100%;
      height: 100%;
    border-radius: 3px;
      background-color: #333;
  }
  
  /*hoverの際にX・Y軸に4pxずらす*/
  .pushright:hover span {
    background-color: #707070;
    color: #fff;
    transform: translate(4px, 4px);
    border-radius: 3px;
  }

  @media screen and (max-width: 888px) {
    .greeting-left-area {
        padding-right: 30px;
        max-width: 380px;
    }
  }
  @media screen and (max-width: 769px) {
    .greeting-profile {
        margin: 0 auto 40px;
    }
    .greeting-left-area {
        padding-right: 20px;
        max-width: 270px;
    }
    .greeting-text {
        margin-bottom: 30px;
    }
    .pianist-and-name {
        display: block;
    }
  }

@media screen and (max-width: 619px) {
    .section-greeting {
        padding-bottom: 70px;
    }
    .Greeting {
        display: block;
        color: #cc8483;
        font-size: 2.5rem;
        margin-bottom: 40px;
        margin-top: 30px;
        text-align: center;
    }
    .Greeting::after {
        display: none;
    }

    .photo-area-sp {
        display: block;
        width: 150px;
        height: 196px;
        margin: 0 auto 30px;
    }
    .top-profile-photo-sp {
        display: block;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 16px 0px 0px 0 #cc8483;
        width: 100%;
        object-position: bottom center;
        height: 200px;
    }


    .greeting-profile {
        width: 100%;
        justify-content: center;
        margin-bottom: 20px;
    }
    .greeting-left-area {
        margin: 0 auto;
        letter-spacing: 0.1rem;
        padding-right: 0px;
        max-width: 470px;
    }
    .greeting-text {
        margin-bottom: 20px;
        margin: 0 auto 30px;
        font-size: 14px;
        padding: 0 20px;
    }
    .pianist-and-name {
        display: flex;
        align-items: center;
        justify-content: right;
    }
    .pianist {
        font-size: 11px;
        font-family: 'Noto Sans JP', sans-serif;
        margin-right: 10px;
        letter-spacing: 0.3rem;
        color: #707070;
    }
    .yukari-name {
        height: 40px;
        width: auto;
        margin-right: 20px;
    }
    .button-shiru {
        display: block;
        margin-left: auto;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-right: 20px;
        font-family: 'Noto Sans JP', sans-serif;
        text-decoration: none;
        text-align: right;
        font-size: 12px;
        font-weight: 600;
    }
    .photo-area-01 {
        display: none;
    }
    .top-profile-photo {
        display: none;
    }
 
    .btn01 {
       width: 275px;
       margin: 0 auto;
   }
     
     /*ボタンの中のテキスト*/
     .btn01 span {
       display: block;
         padding: 20px 40px;
       border-radius: 0px;
       color:#fff;
       font-weight: 400;
       font-family: 'Noto Sans JP', sans-serif;
         text-align: center;
         letter-spacing: 0.4rem;
         font-size: 12px;
     }
     
     /*影の設定*/
     .pushright:before {
         content: "";
         /*絶対配置で影の位置を決める*/
         position: absolute;
       z-index: -1;
         top: 4px;
         left: 4px;
         /*影の形状*/
         width: 100%;
         height: 100%;
       border-radius: 3px;
         background-color: #333;
     }
     
     /*hoverの際にX・Y軸に4pxずらす*/
     .pushright:hover span {
       background-color: #707070;
       color: #fff;
       transform: translate(4px, 4px);
       border-radius: 3px;
     }
   
}




/* parallax */
/*
.parallax-bg {
    background-image: url("../photo/parallax_new.png");
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 550px;
  }

  @media screen and (max-width: 1100px) {
    .parallax-bg {
        height: 500px;
        width: 100%;
        background-size: cover;
        background-image: url("../photo/parallax_new_sp_02@2x.png");
        object-fit: cover;
        background-position: center;
      }

  }
  @media screen and (max-width: 900px) {
    .parallax-bg {
        height: 300px;
        width: 100%;
        background-size: cover;
        background-image: url("../photo/parallax_new_sp_02@2x.png");
        object-fit: cover;
      }
  }
  */

  body::before {
    background: url("../photo/parallax_new.png") no-repeat center;/* 擬似要素に背景画像 */
    background-size: cover;/* cover指定 */
    content: "";/* 画像を表示させる為に必要*/
    display: block;/*ブロックボックスで表示*/
    position: fixed;/* 擬似要素全体を固定 */
    width: 100%;/* 横幅を画面全体 */
    height: 100vh;/* 縦幅を画面全体 */
    top: 0;/* 上からの配置を0 */
    left: 0;/* 左からの配置を0 */
    z-index: -1;/*背景画像になるように重ね順を-1*/
  }

  /*背景画像を擬似要素で固定*/
  @media screen and (max-width: 1100px) {
    body::before {
        background: url("../photo/parallax_new_sp_02@2x.png") no-repeat center;/* 擬似要素に背景画像 */
        background-size: cover;/* cover指定 */
        content: "";/* 画像を表示させる為に必要*/
        display: block;/*ブロックボックスで表示*/
        position: fixed;/* 擬似要素全体を固定 */
        width: 100%;/* 横幅を画面全体 */
        height: 100vh;/* 縦幅を画面全体 */
        top: 0;/* 上からの配置を0 */
        left: 0;/* 左からの配置を0 */
        z-index: -1;/*背景画像になるように重ね順を-1*/
    }
  }


.top-shita {
    background-color: #fff;
}
  /* section-lesson */
.section-lesson {
    margin-top: 550px;
    display: block;
    text-align: center;
    padding-top: 100px;
    background: rgb(248,236,226);
    background: linear-gradient(180deg, rgba(248,236,226,1) 0%, rgba(255,255,255,1) 60%);
    height: 500px;
}
.section-lesson h2 {
    text-align: center;
    padding-bottom: 10px;
    font-family: linotype-didot, serif;
    font-weight: 700;
    font-style: normal;
}
.namisen-01 {
    text-align:center;
    width: 30px;
}
.section-lesson h1 {
    text-align: center;
    font-weight: 600;
    font-size: 4.0rem;
    padding-top: 35px;
    letter-spacing: 0.6rem;
}
.section-lesson p {
    max-width: 685px;
    font-size: 2.0rem;
    letter-spacing: 0.1rem;
    padding: 120px 25px 0;
    margin: 0 auto;
    line-height: 2.8rem;
    margin-bottom: 80px;
}

.btn02 {
    /*影の基点とするためrelativeを指定*/
   position: relative;
    /*ボタンの形状*/
   text-decoration: none;
   display: block;
   text-align: center;
   background: transparent;
   border-radius: 3px;
   border: solid 1px #cc8483;
   outline: none;
    /*アニメーションの指定*/
   transition: all 0.2s ease;
   width: 370px;
   margin: 0 auto;
}
/*hoverをした後のボタンの形状*/
.btn02:hover{
   border-color:transparent; 
 }
 
 /*ボタンの中のテキスト*/
 .btn02 span {
   position: relative;
   z-index: 2;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
     /*テキストの形状*/
   display: block;
     padding: 20px 40px;
   background:#cc8483;
   border-radius: 0px;
   color:#fff;
   font-weight: 400;
   font-family: 'Noto Sans JP', sans-serif;
     text-align: center;
     letter-spacing: 0.4rem;
     /*アニメーションの指定*/
     transition: all 0.3s ease;
     font-size: 16px;
 }


 /*== 右下に押し込まれる（立体が平面に） */
 /*影の設定*/
 .pushright:before {
    content: "";
    /*絶対配置で影の位置を決める*/
    position: absolute;
  z-index: -1;
    top: 4px;
    left: 4px;
    /*影の形状*/
    width: 100%;
    height: 100%;
  border-radius: 3px;
    background-color: #fff;
   }
 
 
 /*hoverの際にX・Y軸に4pxずらす*/
 .pushright:hover span {
   background-color: #707070;
   color: #fff;
   transform: translate(4px, 4px);
   border-radius: 3px;
 }



.top-gosen-02 {
    opacity: 50%;
    margin-top: 30px;
}



@media screen and (max-width: 700px) {
    .section-lesson {
        display: block;
        text-align: center;
        padding-top: 50px;
        
    }
    .section-lesson h2 {
        text-align: center;
        padding-bottom: 0px;
        font-size: 10px;
    }
    .namisen-01 {
        text-align:center;
        width: 30px;
    }
    .section-lesson h1 {
        text-align: center;
        font-weight: 600;
        font-size: 20px;
        letter-spacing: 0.6rem;
        padding-top: 20px;
    }
    .section-lesson p {
        max-width: 405px;
        font-size: 14px;
        letter-spacing: 0.1rem;
        padding-top: 40px;
        margin: 0 auto;
        line-height: 2.8rem;
        margin-bottom: 60px;
    }

    .btn02 {
        width: 275px;
        margin: 0 auto;
    }

      /*ボタンの中のテキスト*/
      .btn02 span {
        display: block;
          padding: 20px 40px;
        border-radius: 0px;
        color:#fff;
        font-weight: 400;
        font-family: 'Noto Sans JP', sans-serif;
          text-align: center;
          letter-spacing: 0.4rem;
          font-size: 12px;
      }
      
      /*影の設定*/
      .pushright:before {
          content: "";
          /*絶対配置で影の位置を決める*/
          position: absolute;
        z-index: -1;
          top: 4px;
          left: 4px;
          /*影の形状*/
          width: 100%;
          height: 100%;
        border-radius: 3px;
          background-color: #333;
      }
      
      /*hoverの際にX・Y軸に4pxずらす*/
      .pushright:hover span {
        background-color: #707070;
        color: #fff;
        transform: translate(4px, 4px);
        border-radius: 3px;
      }

    .top-gosen-02 {
        opacity: 50%;
        padding-top: 30px;
        height: auto;
        object-fit: cover;
    }
}


/* section-access */
.section-access {
    display: block;
    text-align: center;
    padding-top: 10px;
    margin-top: 200px;
    background-color: #fff;
}
.section-access h2 {
    text-align: center;
    padding-bottom: 20px;
    font-family: linotype-didot, serif;
    font-weight: 700;
    font-style: normal;
}
.namisen-02 {
    text-align: center;
    width: 30px;
}
.section-access h1 {
    text-align: center;
    font-weight: 600;
    font-size: 4.0rem;
    padding-top: 35px;
    letter-spacing: 0.6rem;
}
.section-access address {
    padding-top: 60px;
    text-align: center;
    margin: 0 auto;
} 
.section-access p {
    padding-top: 20px;
    text-align: center;
}
.map-area {
    max-width: 1020px;
    height: 500px;
    padding: 50px 30px 0;
    margin: 0 auto;
}
.map {
    vertical-align: bottom;
    position: relative;
    width: 100%;
    height: 434px;
}
.map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 900px) {
    .section-access {
        margin-top: 130px;
    }
}
@media screen and (max-width: 699px) {
    .section-access {
        margin-top: 50px;
    }
}
@media screen and (max-width: 480px) {
    .section-access {
        display: block;
        text-align: center;
        padding-top: 0px;
        margin-top: 0px;
    }
    .section-access h2 {
        text-align: center;
        padding-bottom: 0px;
        font-size: 10px;
        margin-top: 50px;
    }
    .namisen-02 {
        text-align: center;
        width: 30px;
    }
    .section-access h1 {
        text-align: center;
        font-weight: 600;
        font-size: 20px;
        padding-top: 20px;
        letter-spacing: 0.6rem;
    }
    .section-access address {
        padding-top: 40px;
        text-align: center;
        margin: 0 auto;
        font-size: 14px;
    } 
    .section-access p {
        padding-top: 10px;
        text-align: center;
        font-size: 12px;
    }
    .map-area {
        max-width: 335px;
        height: 150px;
        padding-top: 30px;
        margin: 0 auto;
    }
    .map {
        vertical-align: bottom;
        position: relative;
        width: 100%;
        height: 100%;
    }
    .map iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}