@charset "utf-8";

/* ハンバーガーメニュー */

/* overlay-styles.css */
.hamburger-overlay {
  position: fixed;
  top: 20px;
  left: 20px; 
  z-index: 1000;
  width: 56px;
  height: 56px;
  border: 3px solid #FFFCFC;
  border-radius: 8px;
  background-color: #024943;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hamburger-overlay__line {
  position: absolute;
  left: 13px;
  width: 26px;
  height: 2px;
  background-color: #FFFCFC;
  transition: all .6s;
}

.hamburger-overlay__line:nth-of-type(1) { top: 14px; }
.hamburger-overlay__line:nth-of-type(2) { top: 23px; }
.hamburger-overlay__line:nth-of-type(3) { top: 32px; }

.hamburger-overlay.active .hamburger-overlay__line {
  background-color: #FFFCFC;
}

.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(1) {
  transform: translateY(9px) rotate(-45deg);
}
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(2) {
  opacity: 0;
}
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(3) {
  transform: translateY(-9px) rotate(45deg);
}

.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #024943;
  visibility: hidden;
  opacity: 0;
  transition: all .6s;
  z-index: 900;
}

.nav-overlay.active {
  visibility: visible;
  opacity: 1;
}

.nav-overlay__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}

.nav-overlay__list {
  margin: 0;
  padding: 0;
  line-height: 0.9;
  list-style: none;
}

.nav-overlay__item {
  opacity: 0;
  transform: translateY(20px);
  transition: all .6s;
}

.nav-overlay.active .nav-overlay__item {
  opacity: 1;
  transform: translateY(0);
}

.nav-overlay.active .nav-overlay__item:nth-child(1) { transition-delay: 0.1s; }
.nav-overlay.active .nav-overlay__item:nth-child(2) { transition-delay: 0.2s; }
.nav-overlay.active .nav-overlay__item:nth-child(3) { transition-delay: 0.3s; }
.nav-overlay.active .nav-overlay__item:nth-child(4) { transition-delay: 0.4s; }

.nav-overlay__link {
  display: inline-block;
  padding: 20px;
  color: #FFFCFC;
  font-size: 24px;
  text-decoration: none;
  transition: color .3s;
}

.nav-overlay__link:hover {
  color:  #9D8567;
}

/* ハンバーガーメニュー */

/* シュルシュルさせる */

html {
  scroll-behavior: smooth;
}

/* シュルシュルさせる */

.bg-fixed{
    background-image: url(../img/background.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

img {
  max-width: 100%;
  height: auto;
}


.slideshow{
    display: block;
    position: relative;
    width: 100vw;
    height: 560px;
    overflow: hidden; 
}

.slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* または固定幅 */
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: fade 16s infinite;
  animation-timing-function: ease-in-out;
}

.slideshow img:nth-child(1) { animation-delay: 0s; }
.slideshow img:nth-child(2) { animation-delay: 4s; }
.slideshow img:nth-child(3) { animation-delay: 8s; }
.slideshow img:nth-child(4) { animation-delay: 12s; }
.slideshow img:nth-child(5) { animation-delay: 16s; }

@keyframes fade {
  0% { opacity: 0; }
  8% { opacity: 1; }
  33% { opacity: 1; }
  41% { opacity: 0; }
  100% { opacity: 0; }
}

.slideshow2 {
  display: none;
}

.caution{
    display: flex;
    justify-content: end;
    font-family: "Zen Dots", sans-serif;
    color: #FFFCFC;
    padding: 13px;
    font-size: 13px;
}

.cta-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000; 
}

main{
    color: #FFFCFC;
    font-family: "Zen Dots", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.lifeis_icon{
  position: relative;
  margin-top: 100px;
  text-align: center;
}

.vocal_name{
    text-align: center;
    margin-top: 80px;
}

.oshirase{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.oshirase_title{
    margin-top: 80px;
    font-size: 20px;
}

.oshirase_ashirai1{
    margin-top: -70px;
}

.oshirase_ashirai2{
    margin-top: 30px;
}

.oshirase a:hover {
  transform: scale(1.02); 
  color:  #9D8567;
}

.oshirase a{
  text-decoration: none;
  color: #FFFCFC;
  display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease;
}


.course_catalog{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 25px;
}

.course_catalog h2{
    margin-top: 80px;
}

.course_catalog img{
    margin-top: -30px;
}

.course_introduce{
    margin-top: 100px;
}

.course_introduce1 p,
.course_introduce2 p,
.course_introduce3 p{
    text-align: center;
    margin-top: 30px;
}

.course_introduce1,
.course_introduce2{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 80px;
    max-width: 100%;
}

.course_introduce3{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    max-width: 100%;
}

.course_introduce1 img,
.course_introduce2 img,
.course_introduce3 img {
  transition: transform 0.3s ease-out;
}

.course_introduce1 img:hover,
.course_introduce2 img:hover,
.course_introduce3 img:hover {
  transform: scale(1.1); 
}

.zoom p{
  color: #FFFCFC;
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s ease;
}

.zoom:hover p {
  transform: scale(1.1); 
}

.zoom a {
  text-decoration: none;
}

.greeting_flame1{
      max-width: 60%;
      height: 100%;
      padding: 40px 20px 20px 20px;
      border-radius: 42px;
      box-sizing: border-box; 
      overflow: hidden;
      color: #FFFCFC;
      margin: 200px auto;
      margin-bottom: 50px;
      background-color: #9D8567;
      border: 2px solid #FFFCFC;
    
}

.greeting_text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.greeting_text img{
    margin-top: -20px;
}

.greeting_text h2{
    font-size: 20px;
    margin-bottom:25px;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}

.greeting_text p{
    margin-top: 1px;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.greeting_br{
    display: none;
}

.student{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 100%;
}

.student_illust{
    margin-top: -100px;
    max-width: 100%;
}

@keyframes shake {
  0%   { transform: translate(1px, 1px) rotate(0deg); }
  10%  { transform: translate(-1px, -2px) rotate(-1deg); }
  20%  { transform: translate(-3px, 0) rotate(1deg); }
  30%  { transform: translate(3px, 2px) rotate(0deg); }
  40%  { transform: translate(1px, -1px) rotate(1deg); }
  50%  { transform: translate(-1px, 2px) rotate(-1deg); }
  60%  { transform: translate(-3px, 1px) rotate(0deg); }
  70%  { transform: translate(3px, 1px) rotate(-1deg); }
  /* 必要に応じて続ける */
}
.student_illust img:hover {
  animation: shake 0.5s infinite;
}

.price_list1,
.place_information1{
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    position:relative;
}

.price_list2{
  position: absolute;
  top: 0;
}

.price_text{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #FFFCFC;
}

.price_text1{
    position: absolute;
    top:190px;
    left: 50%;
    font-size: 40px;
}

.price_text2{
    position: absolute;
    top: 325px;
    font-size: 25px;
}

.price_text3{
    position: absolute;
    top: 355px;
    font-size: 25px;
}

.price_text4{
    position: absolute;
    top: 710px;
    font-size: 30px;
}

.place_information2{
  position: absolute;
  top: 0;
  margin-top: 1000px;
}

.place_text{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #FFFCFC;
}

.place_text1{
    position:absolute;
    top:1070px;
    left: 50%;
    font-size: 40px;
} 

.place_text2{
    position:absolute;
    top:1200px;
    /* left: 38%; */
    font-size: 25px;
} 

.place_text3{
    position:absolute;
    top:1270px;
    left: 50%;
    font-size: 20px;
} 

.form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-top: 2000px;
    font-size: 30px;
    gap:50px;
}

.form p{
    text-align: center;
}

.form a {
  color: #FFFCFC;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.8s ease, opacity 0.2s ease;
  cursor: pointer;
}

.form a:hover {
  transform: scale(1.05); 
  opacity: 0.8; 
}

.form_green{
    margin-left: 20%;
}

.tune_of_the_month{
    display: flex;
    justify-content: center;
    text-align: center;
    max-width: 100%;
    margin-top: 50px;
}


.footer_index2 a:hover {
  transform: scale(1.05); 
  opacity: 0.8; 
}

.portfolio_footer_index2 a:hover {
  transform: scale(1.05); 
  opacity: 0.8; 
}

footer {
  background-image: url("../img/footer_flame.png");
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  width: 100vw;
  height: 42vh;
  margin-top: 100px;
  /* height: 350px; */
}

.footer_index1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.footer_index2{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 150px;
    gap:40px;
}

.copyright{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}


/* 予約フォーム */

.reservation_title,
.friend_invitation_title,
.contact_title{
    margin-bottom: 25px;
}

.form-wrapper {
      max-width: 80%;
      padding: 40px;
      border-radius: 8px; 
      box-sizing: border-box;  
      overflow: hidden;
      color: #00413f;
      margin: 50px auto;
      background-color: #9D8567;
    }

    .form-group {
      margin-bottom: 15px;
    }

    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="lesson_date"],
    textarea {
      width: 100%;
      padding: 8px;
      box-sizing: border-box;
      border: 3px solid #00413f;
      border-radius: 4px;
      resize: vertical;  /* textareaのリサイズを縦方向だけに */
    }

    #course {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 3px solid #00413f;
    border-radius: 4px;/* resizeはtextarea専用なので削除 */
    }

    button {
      padding: 10px 20px;
      background-color: #00413f;
      color: #FFFCFC;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    button:hover {
     transition: background-color 0.5s ease;
     background-color: #002c2b; 
    }

/* 予約フォーム */

/* レッスン利用規約 */

.terms_of_service-wrapper{
      max-width: 80%;
      padding: 40px;
      border-radius: 8px; 
      box-sizing: border-box; 
      overflow: hidden;
      color: #00413f;
      margin: 50px auto;
      background-color: #FFFCFC;
    }

.terms_of_service-wrapper h1{
    font-weight: 600;
    font-size: 32px;
    margin-bottom: 30px;
}

.terms_of_service-wrapper h2{
    font-weight: 600;
    font-size: 20px;
}

.terms_of_service-wrapper ul{
    font-size: 15px;
    margin-bottom: 30px;
}

/* レッスン利用規約 */

/* プライバシーポリシー */

.privacypolicy-wrapper{
      max-width: 80%;
      padding: 40px;
      border-radius: 8px; 
      box-sizing: border-box; 
      overflow: hidden;
      color: #00413f;
      margin: 50px auto;
      background-color: #FFFCFC;
    }

.privacypolicy-wrapper h1{
    font-weight: 600;
    font-size: 32px;
    margin-bottom: 30px;
}

.privacypolicy-wrapper h2{
    font-weight: 600;
    font-size: 20px;
}

.privacypolicy-wrapper p{
    font-size: 15px;
    margin-bottom: 30px;
}

/* プライバシーポリシー */

/* 下層ページコース */

.course_subpage_top{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap:100px;
}

.course_subpage_h1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}

.course_subpage_h1 h1{
    font-size: 30px;
    margin-bottom: 30px;
    text-align: center;
}

.course_subpage_h1 img{
    max-width: 90%;
}

.meiryo-font {
  font-family: "Zen Maru Gothic", sans-serif;
}

.course_subpage_merit{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: end;
    margin-top: 100px;
    gap:20px;
}

.course_subpage_song1{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    gap:100px;
}

.course_subpage_song2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.course_subpage_song2 h2{
    margin-top: 10px;
}

.course_subpage_song3{
    margin-top: 50px;
}

.course_subpage_list{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    margin-bottom: 50px;
}

.course_subpage_illust{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
}

.kasou_price_list1{
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    position:relative; 
}

.kasou_price_list2{
  position: absolute;
  top: 0;
}

.kasou_price_text1{
    position: absolute;
    top:60px;
    left: 50%;
    font-size: 40px;
}

.kasou_price_text2{
    position: absolute;
    top: 200px;
    font-size: 25px;
    left: 50%;
}

.kasou_price_text3{
    position: absolute;
    top: 230px;
    font-size: 25px;
    left: 50%;
}

.kasou_price_text4{
    position: absolute;
    top: 620px;
    font-size: 30px;
    left: 50%;
}

.kasou_place_information1{
    margin-top: -100px;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    position:relative;
}

/* QandA */

.qanda_top img {
  width: 100%; /* または固定幅 */
  object-fit: cover;
}

.qanda_text{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap:20px;
    margin-top: 100px;
    margin-bottom: 100px;
}

.qanda_text_meiryo{
    font-family: "Zen Maru Gothic", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}

.qanda_text2{
    width: 800px;
}

.qanda_catdog_text{
    font-size: 40px;
    width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    display: inline-block;
    animation: wave 1.5s ease-in-out infinite;
}

.qanda_catdog_illust img{
  animation: shake 1s ease-in-out infinite;
}

@keyframes wave {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-10px); }
  50% { transform: translateY(10px); }
  75% { transform: translateY(-10px); }
}

/* QandA */

/* 日記 */

.nikki_name{
    margin-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nikki_icon{
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nikki_icon img{
  animation: shake 0.5s infinite;
}

.nikki-wrapper {
    max-width: 80%;
      padding: 40px;
      border-radius: 8px;
      box-sizing: border-box;  
      overflow: hidden;        
      color: #FFFCFC;
      margin: 50px auto;
      background-color: #816d55;
      font-family: "Zen Maru Gothic", sans-serif;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
}

.nikki_song{
    font-size: 20px;
    margin-bottom: 50px;
}

.nikki_song2{
    font-size: 40px;
    font-weight: 800;
}

.nikki_song3{
    font-size: 30px;
}

.nikki_song4{
    font-size: 30px;
    text-align: center;
}

.nikki_song_button{
    margin-top: 30px;
}


/* ポートフォリオ */

.portfolio_bunner2 img:hover{
  filter: drop-shadow(10px 5px 5px rgba(0, 28, 14, 0.5));
}

.portfolio_website img:hover{
  filter: drop-shadow(10px 5px 5px rgba(0, 28, 14, 0.5));
}

.portfolio_graphic img:hover{
  filter: drop-shadow(10px 5px 5px rgba(0, 28, 14, 0.5));
}

#portfolio_top{
    margin: 100px auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #9D8567;
    padding: 20px;
    border-radius: 8px;
    box-sizing: border-box; 
    width: 80%;
    gap:20px;
}

.portfolio{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
}


.portfolio_name{
    margin-left: 20%;
    margin-top: -10px;
}

.portfolio p{
    font-size: 25px;
}

.portfolio_add{
    margin-top: -40px;
}

.portfolio_strength{
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.portfolio_strength2{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-self: center;
    padding: 5px;
    aspect-ratio: 1 / 1;
    border: 4px solid #FFFCFC;
    border-radius: 8px;
    box-sizing: border-box; 
    width: 100px;
}


.portfolio_strength2 p{
    align-self: center;
    font-size: 25px;
    white-space: nowrap;
}

#portfolio_skill{
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    margin-bottom: 100px;
    width: 80%;
    gap: 50px;
}

.portfolio_skill2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.portfolio_skill3{
    margin-top: 50px;
}

.skills_code{
    margin-top: 50px;
}

.portfolio_experience_box{
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 40px;
    border: 5px solid #FFFCFC;
    border-radius: 8px;
    box-sizing: border-box; 
    width: 80%;
    gap:10px;
}

.portfolio_experience_illust{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:50px;
}

.portfolio_experience_detail{
    display: flex;
    width:75%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 50px;
    border-radius: 8px;
    font-size: 18px;
}

#portfolio_works{
    margin-top: 100px;
    margin-bottom: -50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.portfolio_bunner,
.portfolio_website,
.portfolio_graphic{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.portfolio_bunner2,
.portfolio_website2,
.portfolio_graphic2{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.portfolio_website3{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #024943;
    font-size: 15px;
    border: 5px solid #FFFCFC;
    background-color: #FFFCFC;
    box-sizing: border-box;
    width: 25%;
    padding: 5px;
    gap: 20px;
}

.portfolio_works_title{
    margin-top: 100px;
    margin-bottom: 50px;
}

.portfolio_works2{
    margin-top: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.portfolio_footer_index{
    background-color: #E6E6D7;
    width: 100%;
    height: 200px;
}

.portfolio_footer_index2{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 150px;
    gap:70px;
}

.portfolio_footer_index2 img{
    margin-top: 80px;
}


.portfolio_thankyou{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


/* ポートフォリオ */

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

.caution{
    font-size: 11px;
}

.cta-button {
  bottom: 20px;
  right: 5px;
}

.cta-button img{
    max-width: 90%;
}

.student{
margin-top: 50px;
}

.student_text{
    max-width: 50%;
}

.place_text1,
.place_text2,
.place_text3{
    display: none; 
}

.price_text1,
.price_text2,
.price_text3,
.price_text4{
    display: none; 
}

.price_list1,
.place_information1{
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    position:static;
}

.price_list2{
  position: static;
  top: 0;
}

.price_text{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.price_text1{
    position: static;
    font-size: 40px;
}

.price_text2{
    position: static;
    font-size: 25px;
}

.price_text3{
    position: static;
    font-size: 25px;
}

.price_text4{
    position: static;
    font-size: 30px;
}

.place_information2{
  position: static;
  margin-top: 50px;
}

footer {
  width: 100vw;
  height: 40vh;
}

.footer_index2{
    /* display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; */
    margin-top: 130px;
    gap:30px;
}

.form{
    margin-top: 300px;
}

.footer_index{
    top:130px;
    left: 100px;
    gap:200px;
}

.course_subpage_h1 h1{
    font-size: 27px;
}

.course_subpage_h1 p{
    font-size: 15px;
}

.portfolio_br{
    display: none;
}

}

@media screen and (min-width: 501px) and (max-width: 960px) {

.cta-button {
  bottom: 20px;
  right: -20px;
} 

.cta-button img{
    max-width: 70%;
}

.course_catalog{
    font-size: 22px;
}


.greeting_text h2{
    font-size: 15px;
}

.greeting_text p{
    font-size: 12px;
}

.student_illust{
    margin-top: -10px;
}

.price_list2{
    margin-top: 10px;
}

.place_information1{
    margin-top: 10px;
} 

footer {
  width: 100vw;
  height: 33vh;
}

.footer_index2{
    margin-top: 100px;
    gap:20px;
}

.form{
    margin-top: 200px;
    font-size: 18px;
    gap:50px;
}

.form img{
    max-width: 40%;
}


.course_subpage_song2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.course_subpage_h1 h1{
    font-size: 23px;
}

.course_subpage_h1 p{
    font-size: 12px;
}

.course_subpage_top{
    gap:10px;
}

.course_subpage_h1 img{
    max-width: 80%;
}

#portfolio_top{
    gap:5px;
}

.portfolio_strength{
    gap:15px;
}

.portfolio p{
    margin-top: 5px;
    font-size: 14px;
}

.portfolio_strength{
    gap: 5px;
}

.portfolio_experience_detail{
    width:100%;
}

.portfolio_strength2{
    padding: 2px;
    aspect-ratio: 1 / 1;
    border: 4px solid #FFFCFC;
    border-radius: 8px;
    box-sizing: border-box; 
    width: 65px;
}

.form-wrapper {
      /* width: 500px; */
      padding: 40px;
      border-radius: 8px;
      box-sizing: border-box;  
      overflow: hidden;        
      color: #00413f;
      margin: 50px auto;
      background-color: #9D8567;
    }

/* レッスン利用規約 */

.terms_of_service-wrapper h1{
    font-weight: 600;
    font-size: 25px;
    margin-bottom: 30px;
}

.terms_of_service-wrapper h2{
    font-weight: 600;
    font-size: 18px;
}

.terms_of_service-wrapper ul{
    font-size: 13px;
    margin-bottom: 30px;
}

.section {
    margin-bottom: 30px;
}

/* レッスン利用規約 */

/* プライバシーポリシー */

.privacypolicy-wrapper h1{
    font-weight: 600;
    font-size: 25px;
    margin-bottom: 30px;
}

.privacypolicy-wrapper h2{
    font-weight: 600;
    font-size: 18px;
}

.privacypolicy-wrapper p{
    font-size: 13px;
    margin-bottom: 30px;
}

/* プライバシーポリシー */


/* ポートフォリオ */

.portfolio_name{
    margin-top: 10px;
}
.portfolio_br{
    display: none;
}
.portfolio_experience_box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.portfolio_experience_illust{
    gap: 20px;
}

.portfolio_experience_illust img{
    margin: auto;
    margin-bottom: 20px;
}

.experience_title{
    width: 50%;
}

.works_title{
    width: 20%;
}

.portfolio_works_line{
    display: none;
}

.portfolio_experience_detail p{
    font-size: 15px;
}

.portfolio_bunner2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  gap: 20px;
}

.portfolio_website2{
    flex-direction: column;
    gap: 30px;
  }
  
.portfolio_website3{
    flex: 1 1 100%;
    width: 50%;
  }

.portfolio_graphic2{
    flex-direction: column;
    gap: 30px;
    width: 80%;
  }

.portfolio_works2 img{
    width: 70%;
}

}

/* ポートフォリオ */

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

.caution{
    padding: 7px;
    font-size: 9px;
}

.cta-button img{
    display: none;
}

.slideshow {
  display: none;
}

.slideshow2{
    display: block;
    position: relative;
    width: 100vw;
    height: 250px;
    overflow: hidden; 
}

.slideshow2 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* または固定幅 */
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: fade 16s infinite;
  animation-timing-function: ease-in-out;
}

.slideshow2 img:nth-child(1) { animation-delay: 0s; }
.slideshow2 img:nth-child(2) { animation-delay: 4s; }
.slideshow2 img:nth-child(3) { animation-delay: 8s; }
.slideshow2 img:nth-child(4) { animation-delay: 12s; }
.slideshow2 img:nth-child(5) { animation-delay: 16s; }

@keyframes fade {
  0% { opacity: 0; }
  8% { opacity: 1; }
  33% { opacity: 1; }
  41% { opacity: 0; }
  100% { opacity: 0; }
}

.lifeis_icon img{
    max-width: 40%;
}

.vocal_name{
    margin-top: 50px;
}

.vocal_name img{
    max-width: 50%;
}

.oshirase_title{
    margin-top: 50px;
}

.oshirase h2,
.oshirase p,
.oshirase img{
    font-size: 10px;
    max-width: 60%;
}

.oshirase_title{
    margin-bottom: 20px;
}

.course_catalog{
    font-size: 15px;
}

.course_catalog h2{
    margin-top: 50px;
}

.course_catalog img{
    margin-top: -20px;
    max-width: 50%;
}

.course_introduce{
    margin-top: 50px;
}

.course_introduce1{
    margin-top:-5px;
}

.course_introduce1,
.course_introduce2,
.course_introduce3{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:10px;
    margin-bottom: 10px;
}

.zoom p {
    display: none;
}

.greeting_flame1{
    max-width: 90%;
    margin-top: 80px;
}

.greeting_text h2{
    font-size: 15px;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}

.greeting_text p{
    font-size: 12px;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}

.greeting_text img{
    max-width: 50%;
}

.greeting_br{
    display: block;
}

.student img{
    margin-top: -30px;
}

.student_text{
    max-width: 50%;
}

.student_illust{
    margin-top: -10px;
}

.form{
    font-size: 15px;
    gap:50px;
    margin-top: 100px;
}

.form p{
    text-align: center;
}

.form img{
    max-width: 40%;
}

footer {
  background-image: url("../img/footer_flame2.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
    width: 100vw;
    height: 22vh;
  margin-top: 100px;
  /* height: 350px; */
}

.footer_index2{
    margin-top: 50px;
    gap:20px;
}

.copyright{
    width: 20%;
}

/* 下層ページ コース*/

.course_subpage_top{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:100px;
    margin-top: 100px;
}

.course_subpage_h1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: -50px;
    font-size: 20px;
}


.course_subpage_h1 p{
    font-size: 12px;
}

.course_subpage_merit{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    gap:10px;
}

.course_subpage_merit img{
    max-width: 20%;
}

.course_subpage_h1 img {
    display: none;
}

.course_subpage_song1,
.course_subpage_song2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.course_subpage_song2 h2{
    margin-top: 10px;
}

.course_subpage_song3{
    margin-top: 20px;
}

.course_subpage_list{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

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


.form-wrapper {
      /* width: 400px; */
      padding: 40px;
      border-radius: 8px;
      box-sizing: border-box;
      overflow: hidden;        
      color: #00413f;
      margin: 30px auto;
      background-color: #9D8567;
    }

.terms_of_service-wrapper{
      padding: 30px;
      margin: 30px auto;
}

.terms_of_service-wrapper h1{
    font-size: 20px;
}

.terms_of_service-wrapper h2{
    font-size: 15px;
}

.terms_of_service-wrapper ul{
    font-size: 13px;
}

.privacypolicy-wrapper{
    margin: 30px auto;
}

.privacypolicy-wrapper h1{
    font-size: 20px;
}

.privacypolicy-wrapper h2{
    font-size: 15px;
}

.privacypolicy-wrapper p{
    font-size: 13px;
}

.reservation_title img{
    width: 70%;
}

.contact_title img{
    width: 50%;
}

/* QandA */

.qanda_text{
    margin-top: 80px;
    margin-bottom: 80px;
    font-size: 13px;
}

.qanda_text2{
    width: 500px;
}

.qanda_catdog_text{
    font-size: 20px;
    width: 350px;
}

.qanda_catdog_illust img{
  width: 80%;
}

/* QandA */

/* 日記 */

.nikki-wrapper {
      width: 400px;
      padding: 20px;
}

.nikki_song{
    font-size: 10px;
    margin-bottom: 25px;
}

.nikki_song2{
    font-size: 20px;
    font-weight: 800;
}

.nikki_song3{
    font-size: 15px;
}

.nikki_song4{
    font-size: 15px;
}

/* 日記 */

/* ポートフォリオ */

.portfolio_profile{
    display: none;
}

.portfolio{
    width: 90%;
}

.portfolio p{
    font-size: 18px;
}

.greeting_br{
    display: none;
}

.portfolio_add{
    margin-top: -20px;
}

.portfolio_br{
    display: none;
}

#portfolio_top,
.portfolio_experience_box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.portfolio_experience_illust{
    gap: 20px;
}

.portfolio_experience_illust img{
    margin: auto;
    margin-bottom: 20px;
}

.portfolio_experience_detail p{
    font-size: 15px;
}

.portfolio_strength2{
    padding: 2px;
    aspect-ratio: 1 / 1;
    border: 4px solid #FFFCFC;
    border-radius: 8px;
    box-sizing: border-box; 
    width: 80px;
}

#portfolio_skill{
    flex-direction: column;
}

.skills_code,
.portfolio_works_line{
    display: none;
}

.experience_title{
    width: 55%;
}

.skills_title{
    width: 50%;
}

.works_title{
    width: 20%;
}

.portfolio_experience_detail{
    width:100%;
}

.portfolio_footer_index2{
    gap:30px;
}

.portfolio_bunner2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  gap: 20px;
}

.portfolio_website2{
    flex-direction: column;
    gap: 30px;
  }
  
.portfolio_website3{
    flex: 1 1 100%;
    width: 60%;
  }

.portfolio_graphic2{
    flex-direction: column;
    gap: 30px;
    width: 80%;
  }

.portfolio_works2 img{
    width: 70%;
}

/* ポートフォリオ */



}