/* ============== Design Tokens ============== */
:root{
  --brand:#ff4d2e;
    --h3line:#C0A97A;
    --heading:#ff7043;
  --accent:#e8ffd0;
  --ink:#1f2937;
  --muted:#6b7280;
  --bg:#ffffff;
  --hover:#631d25;
  --surface:#f7f7fb;
  --h:#4f420f;
  --title:#2f1010;
  --hamburger:#83a7dd;/* ハンバーガーメニューの全画面モード */
  --accordion:#fcf9f2;
  --radius:14px;
  --shadow:0 8px 28px rgba(0,0,0,.08);
  --maxw:1100px;
  
}
/* ============== Base ============== */
*,
*::before,
*::after{ box-sizing:border-box; }
html,body{ 
  min-height: 100%;
  overflow-x: auto; 
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
@media screen and (max-device-width: 375px) {
  html, body {
    touch-action: manipulation;
  }
}


body{
overscroll-behavior: auto;
touch-action: auto;
	margin:0;
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Helvetica", "Arial", sans-serif;
	color:var(--ink); background:var(--bg); line-height:1.6; text-rendering:optimizeLegibility;
}
html.modal-open,
body.modal-open {
  /* overflow: hidden; */
  /* height: 100%; */
}
body.fixed {
  /* position: fixed; */
  top: 0;
  left: 0;
  right: 0;
}



img{ max-width:100%; height:auto; display:block; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ color:var(--hover);}
h1,h2,h3{ line-height:1.25; margin:.4em 0;color:var(--h);}
h2 {
  font-family: 'Georgia', serif;
  font-size: 1.4em;
  color: #4B3B2A;
  padding-bottom: 0.2em;
  letter-spacing: 0.6px;
}
h3 {
  font-family: 'Georgia', serif;
  font-size: 1.4em;
  color: #4B3B2A;
  padding-bottom: 0.2em;
  letter-spacing: 0.6px;
}
.heading {
  position: relative;
  font-size: 2rem;
  padding-left: 0.8em;
  border-left: 6px solid var(--heading); /* コーラル寄りで優しく */
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  color: #444;
  line-height: 1.4;
}
.line {
  height: 1px;
  background: linear-gradient(to right, #ccc, #eee, #ccc);
  margin: 1em 0;
}



.btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.01em;
  background:#ff8100;
  color:#fff;
  box-shadow:-1px 4px 3px 0px rgb(4 2 2 / 20%);
  transition:transform .06s ease;
  border: 2px dashed white;
}
.btn:hover{ transform:translateY(-2px); color:#fff;background:#ff9539;}
.btn.small{ padding:8px 12px; font-size:.9rem; }
.bigbtn{font-size:1.3rem;}
.small{font-size:90%;}
.explan{
  font-family: 'Georgia', serif;color:#4B3B2A;
  line-height: 1.4;
  margin-top: 0; /* 念のため余白を消す */
}


.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
img,iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

.mt-1em { margin-top: 1em; }
.mt-2em { margin-top: 2em; }
.mt-3em { margin-top: 3em; }
.mt-4em { margin-top: 4em; }
.mb-1em { margin-bottom: 1em; }
.mb-2em { margin-bottom: 2em; }
.mb-3em { margin-bottom: 3em; }
.mb-4em { margin-bottom: 4em; }

/* ============== Sections ============== */
.container{ max-width:var(--maxw); margin-inline:auto; padding:0 16px; }
.scroll-container {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 800px) {
  .container {
	padding:0 8px;
  }
}
section, footer{ padding:48px 0;  scroll-margin-top: 80px; width: 100%; box-sizing: border-box;}
.surface{ background:var(--surface); }
.muted{ color:var(--muted); }
.transparent{ background:#ffffffa3; }
.accent{ background:var(--accent);}
.about{ background:var(--surface); }
.courses{ background:#ffffff; }
.teachers{ background:#afafaf00; }
.features{ background:#ffffff; }
.faq{ background:var(--accent);}
.contact{background:#ffffff;}

footer {
  padding: 24px 16px;
}
@media screen and (max-width: 400px) {
  footer .container {
    flex-direction: column;
    align-items: center;
    padding: 16px;
  }
  footer .container p{
    padding: 16px;
  }
  .qr-code,
  .copyright {
    max-width: 100%;
    overflow-wrap: break-word;
    text-align: center;
  }
}
/* ============== Header / Top Nav ============== */
#header {
  display: block;
  height: 1px;
}
#site-header{
  position:fixed; top:0; z-index:50; background:rgb(252 249 242); backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid #eee; transition:all .24s ease;width:100%;
}
.nav{ display:flex; justify-content:space-between; align-items:center; gap:12px; height:80px;  font-family: 'Georgia', 'Times New Roman', serif; }

.logo {
  display: block;
  background-image: url('./image/pianolandschool-logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 100px;
  height: 80px;
}


/* デフォルトはPC用（横並びナビを表示） */
#topnav {
  position: static;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  background: none;
  height: auto;
  transform: none;
  transition: none;
  align-items:center; gap:14px;
}
#topnav a {
	font-weight:600;
}
#nav-toggle,
#nav-close {
  display: none; /* PCではボタン非表示 */
}

/* --- モバイル用 --- */
@media (max-width: 800px) {
  /* ハンバーガーメニューの全画面モード */
  #topnav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
	background: var(--hamburger);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    transform: rotateY(90deg);
    transform-origin: right;
    transition: transform 0.5s ease;
    z-index: 9999;
  }
  #topnav.open {
    transform: rotateY(0);
  }
  #topnav a {
    color: #fff;
    font-size: 1.5rem;
  }

  /* モバイル時のみトグルボタン表示 */
  #nav-toggle {
  display: block;
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10000;
  }
  
  #nav-close {
    display: none; /* 初期は閉じるボタン隠す */
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 3rem;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10000;
      color: #000000;
  }

  #topnav.open ~ #nav-toggle {
    display: none;
  }
  #topnav.open ~ #nav-close {
    display: block;
  }
}





/* ============== Hero ============== */
.hero{ padding:64px 0 24px; text-align:center; }
.hero h1{ font-size:clamp(35px,5vw,50px); }
.hero p{ color:var(--muted); }

.hero-section {
  background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%)),url('./image/heroimage04.png');
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  margin-top: 80px;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.hero-section {
  padding-top: 80px;
  padding-bottom: 80px;
}
/* 擬似要素で左右にぼかし背景を配置 */
.hero-section::before,
.hero-section::after {
  content: "";
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
    background-image: linear-gradient(rgb(255 255 255 / 30%), rgb(255 255 255 / 40%)),url('./image/heroimage-back.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
}

/* 左側 */
.hero-section::before {
  left: 0;
}

/* 右側 */
.hero-section::after {
  right: 0;
}

/* 中央のヒーロー画像とテキストは前面に */
.hero-caption {
  width:90%;
  position: relative;
  top:130px;
  bottom:0px;
  z-index: 1;
  margin: 0 auto;
  padding: 32px 16px;
  text-align: center;
}
@media (min-resolution: 2dppx) and (max-width: 400px) {
  .hero-section::before,
  .hero-section::after {
    display: none;
  }
}

@media screen and (max-width: 800px) {
  .hero-section::before,
  .hero-section::after {
    display: none;
  }
  .hero-caption {
    width: 100%;
    position: relative;

    transform: translateY(0);
    font-size: 0.95rem;
    padding: 16px 8px;
    margin-top: 32px;
  }
}

.hero-caption h1 {
  font-family: 'Georgia', 'Times New Roman', serif;
  color: #ffffff;
  text-shadow:
   0 0 10px rgb(175 89 89 / 60%), /* ぼかしの黒で輪郭を強調 */
   1px 1px 10px rgb(0 0 0 / 40%), /* 軽い立体感 */
    -1px -1px 5px rgb(193 193 193 / 40%);/* 逆方向にも影を入れてバランス */
}
.hero-caption h3{
 font-family: 'Georgia', 'Times New Roman', serif;
 color:#ffffff;
  text-shadow:
   0 0 10px rgb(175 89 89 / 60%), /* ぼかしの黒で輪郭を強調 */
   1px 1px 10px rgb(0 0 0 / 40%), /* 軽い立体感 */
    -1px -1px 5px rgb(193 193 193 / 40%);/* 逆方向にも影を入れてバランス */
}
/* ============== 横スクロールメニュー（ヒーロー直下） ============== */
.scroll-menu{
  gap:10px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:10px 12px;
  position:relative;
}
.scroll-menu a{
  white-space:nowrap;
  border:1.5px solid var(--brand);
  padding:10px 12px;
  border-radius:999px;
  color:var(--brand);
  background:#fff;
  font-weight:600;
  line-height: 3.2;
  transition:all .2s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.scroll-menu a:hover{ 
  border-color:#fff;
  color:#fff;
  background:var(--brand);
  box-shadow:0 4px 12px rgba(108,92,231,.25);
}


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

.about-img{
  float: left;
  margin: 10px 20px;
  border: 1px solid var(--h3line);
}
.remote-img{
  float: left;
  margin: 10px 20px;
  border:1px solid gray;
}
.about-img:hover{
opacity:0.5;
}
@media screen and (max-width: 800px) {
.about-img{
    float: none;
    display: block;
	margin: 1em auto;
}
.remote-img{
    float: none;
    display: block;
	margin: 1em auto;
}
}

/* ============== Accordion ============== */
.accordion .item{ border-bottom:1px solid var(--h3line); text-shadow:1px 1px 0px white;}
.accordion button{
  width:100%; text-align:left; padding:10px 4px; background:none; border:none; font-weight:600; font-size:1.1rem;
  display:flex; justify-content:space-between; align-items:center; cursor:pointer;color:var(--title);
}
.accordion button:hover{
opacity: 0.5;
}
.accordion button::after{ content:"＋"; color:var(--muted); }
.accordion .panel{
  max-height:0; overflow:hidden;  transition: max-height 0.28s ease;
}
.accordion .panel h3{
border-bottom:1px solid var(--h3line);
}
.accordion .panel p{
 margin:0px;padding:10px 20px;
}
.accordion .item.open > button::after{ content:"－"; }

.item.open > button {
  background-color: #f9cb4f;
font-size: 1.3rem;
  color: #444;
  box-shadow: inset 0 -2px 0 #ccc;
  transition: all 0.3s ease;
  padding-left: 20px;
}

.picpanel {
  position: relative;
  width: 100%;
  max-height: 0;
}
.picpanel.open {
  max-height: 100vh;
  overflow-y: auto;
}
/* 背景画像用の疑似要素 */
.picpanel::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
height: 50vw; /* または明示的な高さ */

  aspect-ratio: 1 / 1;      /* 正方形に保つ（必要に応じて変更） */
  background-size: contain; /* 画像全体を表示 */
  background-repeat: no-repeat;
  background-position: bottom right;
  pointer-events: none;     /* クリックなどを無効化 */
  z-index: -1;
}

.class01::after {
  width: 50vw;              /* 画面幅に応じてサイズ変化 */
  background-image: linear-gradient(rgb(255 255 255 / 80%), rgb(255 255 255 / 80%)),url('./image/pix-futarinouta.png');
}
.class02::after {
  width: 50vw;              /* 画面幅に応じてサイズ変化 */
  background-image: linear-gradient(rgb(255 255 255 / 80%), rgb(255 255 255 / 80%)),url('./image/pix-kawaiijazz.png');
}
.class03::after {
  width: 50vw;              /* 画面幅に応じてサイズ変化 */
  background-image: linear-gradient(rgb(255 255 255 / 80%), rgb(255 255 255 / 80%)),url('./image/pix-PLC.png');
}



/* ============== Pricing Table Helpers (inside accordion text) ============== */
.price-note{ font-size:1rem; color:var(--muted); }
.table-like{ border:1px solid #eee; border-radius:12px; overflow:hidden; }
.table-like .row{ display:grid; grid-template-columns:1fr auto; gap:8px; padding:10px 12px; border-top:1px solid #f0f0f0; }
.table-like .row:first-child{ border-top:none; background:#fff; }
.badge{ display:inline-block; padding:2px 20px; border-radius:20px; font-size:0.9rem; background: #ffd585; color:#552306; }
.badge2{ display:inline-block; padding:2px 20px; border-radius:0px 0px 20px 20px; font-size:0.9rem; background: #ffd585; color:#552306; }

/* ============== Carousel (講師) ============== */
.carousel{ position:relative; padding: 0 40px; overflow:hidden; }
.carousel-container {
  touch-action: pan-x;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.carousel-track{ display:flex; gap:10px; transition:transform .4s ease; }
.carousel-item {
  flex: 0 0 30%;
  max-width: 20%;
  min-height:250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  border: 1px solid var(--h3line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  margin: 0 auto;
}
@media screen and (max-width: 800px) {
  .carousel-item { flex: 0 0 15%; min-width: 150px; }
}
.carousel-item h2{font-family:'Noto Serif JP', serif;}
.carousel-item h3,
.carousel-item p{ margin:0 0 1px 0; color:#4f400f;}

/* プロフィールボタンは下に寄る */
.carousel-item .btn-profile{
  align-self:flex-start; /* 横位置は左寄せ。中央にしたければ center */
  margin-top:auto;       /* 上の空きスペースを全部押し下げる */
}


.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
	border:none; background:#e732327a; color:#fff;
  padding:10px 15px; border-radius:50%; cursor:pointer; box-shadow:0 6px 16px rgb(120 111 187 / 25%);
}
.carousel-btn.prev {
  left: 0; /* paddingの外側に配置 */
}
.carousel-btn.next {
  right: 0;
}
.carousel-btn:hover{opacity:0.5;}

@media screen and (max-width: 800px) {
.carousel{ padding: 0; }
}



/* ============== Modal ============== */


.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  perspective: 1000px;
  transform-style: preserve-3d;
  height: 100dvh; /* スマホのアドレスバー対策 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}


.modal-content{
    background: linear-gradient(to bottom, #fff4d5, #f9f9f9);; width:min(720px,92vw); max-height:90vh; padding:30px 20px; border-radius:var(--radius);
  box-shadow:var(--shadow);
    overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.modal-content > h3 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}
.modal-content > p {
  margin-bottom: 1em;
}
.modal.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-header {
    margin: 0px 5px 18px 5px;
}
.modal-header h2{
    margin: 0px 5px 0px 5px;
    padding-bottom:0px;
    font-size: 1.6em;
}
.modal-header h3 {
  margin-bottom: 0em;
}


.modal-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 10px 20px;
}
#videoModal {
  transform: none !important;
  perspective: none !important;
  z-index: 9999; /* 親モーダルより高く */
}
.video-modal-content {
  max-width: 720px;
  width: 92vw;
  background: #fff;
  padding: 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.video-modal-footer {
  margin-top: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 10px 20px;
}
.video-thumb {
  text-align: center;
}
.video-thumb figcaption {
  font-size: 0.85em;
  color: #555;
  margin-top: 4px;
}



.modal-close {  
  background: transparent;
  border: 2px solid #444;
  color: #444;
  font-size: 1rem;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
}

.modal-close:hover {
  background-color: #444;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.btn-prev::before {
  content: '←';
  font-size: 1.8rem;
  color: #444444;
  transition: transform 0.3s ease, color 0.3s ease;
}

.btn-next::before {
  content: '→';
  font-size: 1.8rem;
  color: #444444;
  transition: transform 0.3s ease, color 0.3s ease;
}

.btn-prev:hover::before,
.btn-next:hover::before {
  color: #b6a4a4;
  transform: scale(1.2);
}

.btn-prev, .btn-next {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px;
    font-family: 'FontAwesome';
}
.comment{
	background: white;
    padding: 30px;
    border: 1px dashed #ff5e00;
    border-radius: 23px;
}
.external-link {
	display: inline-block;
    padding: 10px 4px;
    margin: 0px 0;
    width: 160px;
    height: 91px;
    background-color: #edc4b4;
    color: #333;
    text-decoration: none;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
	border: 1px dashed #f9621e;
}
.external-link:hover {
	background-color: #edc4b463;
}

/* ============== VIDEO ============== */
.video-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  gap: 16px;
  margin-top: 10px;
}

.video-links button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.thumbnail {
  position: relative;
  width: 160px; /* ← サムネイルの横幅を固定 */
  height: auto;
  overflow: hidden;
}

.thumbnail img {
  display: block;
  width: 100%; /* ← 親要素にフィットさせる */
  height: auto;
  object-fit: cover;
  border: 1px solid gray;

  transition: transform 0.3s ease;
}

.thumbnail:hover img {
  transform: scale(1.05);
  opacity:0.8;
}

.thumbnail::after {
	font-family: 'Arial', 'Helvetica', sans-serif;
  content: '▶';
  font-size: 1.8em;
  color: white;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  text-align: center;
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  box-sizing: border-box;

}


.thumbnail:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}



/* ============== 生徒さんの声セクション ============== */
/* reviews専用のモーダル調整 */
.reviewsmodal {
  background: linear-gradient(180deg, #fffdf8, #f9f9f9);
  font-family: "Yu Gothic", "Hiragino Sans", sans-serif;
  line-height: 1.75;
  font-size: 1rem;
  color: #333;
  position: relative;
}

/* ヘッダー */
.reviewsmodal .modal-header {
  font-size: 1.2rem;
  font-weight: bold;
  color: #444;
  padding-bottom: 0.6em;
  margin-bottom: 1.2em;
  border-bottom: 2px solid #f5d28c;
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.reviewsmodal .modal-header::before {
  content: "💬";
  font-size: 1.3rem;
}

/* 本文 */
.reviewsmodal p {
  margin: 1em 0;
  text-align: justify;
  text-justify: inter-ideograph;
}

/* フッター */
.reviewsmodal .modal-footer {
  margin-top: 2em;
  padding-top: 1em;
  border-top: 1px solid #eee;
}

/* 閉じるボタン（reviews専用アレンジ） */
.reviewsmodal .modal-close {
  border: none;
  background: #f5d28c;
  color: #333;
  font-weight: bold;
  padding: 8px 20px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.reviewsmodal .modal-close:hover {
  background: #ffb347;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.reviewsmodal .modal-header {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.reviewsmodal .icon-person {
  width: 1.5em;
  height: 1.5em;
  fill: #f5a623; /* 明るいオレンジでポップ感 */
  flex-shrink: 0;
}



/* ============== Forms ============== */
form{ display:grid; gap:12px; }
label{ display:grid; gap:6px; font-weight:700; }
input, textarea{
  width:100%; padding:12px; border-radius:12px; border:1px solid #ddd; font:inherit; background:#fff;
}
textarea{ min-height:120px; }

/* ============== Footer ============== */
footer{ padding:32px 0; border-top:1px solid #eee; color:var(--muted); text-align:center; }

/* ============== Motion Preference ============== */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}



/* 講師プロフィールボタン */
.btn-profile{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 10px;
  border:1.5px solid var(--brand);
  border-radius:999px;
  background:#fff;
  color:var(--brand);
  font-weight:600;
  font-size:.9rem;
  transition:all .2s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}

.btn-profile:hover{
  background:var(--brand);
  color:#fff;
  box-shadow:0 4px 12px rgba(108,92,231,.25);
}

/* プロフィール画像 */
.profileimage {
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  background-color:#ffffffb3;
  background-blend-mode:lighten;
}


.profile10 {
  background-image: url('./image/tc-kihara01.png');
}
.profile20 {
  background-image: url('./image/tc-koutaro01.png');
}
.profile30 {
  background-image: url('./image/tc-shibataena01.png');
}
.profile40 {
  background-image: url('./image/tc-inouekazuha01.png');
}
.profile50 {
  background-image: url('./image/tc-wakiyamakimiko01.png');
}
.profile60 {
  background-image: url('./image/tc-hirataaya01.png');
}
.profile70 {
  background-image: url('./image/tc-nakajimamie01.png');
}
.profile80 {
  background-image: url('./image/tc-kajimitsuyo01.png');
}
.profile90 {
  background-image: url('./image/tc-nodaryoko01.png');
}
.profile100 {
  background-image: url('./image/tc-ChristelleCiari01.png');
}
/* プロフィール画像（モーダル用） */
.modal-profile{
  display:block;
  max-width:180px;        /* サイズはお好みで */
  height:auto;
  border-radius:50%;       /* 円形にする（四角が良ければ 12px くらいに） */
  object-fit:cover;        /* はみ出しをトリミング */
  box-shadow:0 6px 18px rgba(0,0,0,.15); /* 柔らかい影 */
  float: left;
  margin: 0px 10px 10px 0px;
}


/* 生徒さんの声セクション */
.voices-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.voice {
  flex: 1 1 calc(50% - 1rem); /* 50% - 隙間分 */
  background: #ffffff;
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 3px 6px rgba(0,0,0,0.08);
  min-width: 260px; /* スマホで崩れないよう保険 */
}
.voice:nth-child(even) {
  background: #f2faff;
}

.voice-icon {
  font-size: 2rem;
  margin-bottom: 0.25rem;
}

.voice-meta {
  font-size: 0.9rem;
  font-weight: 600;
  color: #444;
}

.voice-lead {
  font-family: 'Georgia', serif;
	font-size: 1.1rem;
    font-weight: 700;
    color: #451914;
}

.btn-reviews {
  align-self: flex-start;
  margin-top: 0.5rem;
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
  border: none;
  background: #ff6f61;
  color: #fff;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-reviews:hover {
  background: #c6261a;
}







/* 問い合わせセクション */
.contact {
	background-image: linear-gradient(rgb(255 255 255 / 40%), rgb(255 255 255 / 40%)),;
	background-size: cover;
	background-position: center;
	background-position-y: bottom;
	background-repeat: no-repeat;
	width: 100%;
}
.pianoland-footer {
	font-family: 'Georgia', 'Times New Roman', serif;
	font-size: 1.2rem;
	color: #1a0503;
	padding: 5px;
	text-shadow: 1px 1px 14px rgb(255 222 222 / 74%);
}
.pianoland-footer h1 {
  color: #1a0503;
  font-weight: bold;
}
.pianoland-footer span:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.qr-code {
  max-width: 100%;
  height: auto;
}
.qr {
	padding:0px 20px;
}
.youkoso a{
	color: #104973;
	padding: 5px;
}
.youkoso a:hover{
	color: #61afe9;
}

/* SNS */
.social-icon {
  font-size: 24px;
  margin: 0 8px;
  transition: color 0.3s;
}
.social-icon:hover {
  transform: scale(1.3);
}
.fa-facebook {
	color: #1877F2; /* Facebook Blue */
}
.fa-facebook:hover {
	color: #145DBF;
}
.fa-youtube {
	color: #FF0000; /* YouTube Red */
}
.fa-youtube:hover {
	color: #CC0000;
}
.fa-x-twitter {
	color: #000000; /* Xの黒基調 */
}
.fa-x-twitter:hover {
	color: #1DA1F2; /* ホバーで旧Twitterブルー */
}