@charset "UTF-8";


html,body,div,ul,li{
  font-size:14px;
}

p{
  font-size:var(--font-18);
      margin-top: .4rem;
    margin-bottom: .4rem;
}

/* --------------------
ヘッダー
-------------------- */

/* ===== PCレイアウト ===== */
/* レイアウト全体 */
body {
  margin: 0;
display: flex;
background-color: var(--pink-bg);
}

section{
  background-color: var(--pink-bg);
}

/* 見出しやタイトルなど、Noto Sansを使いたい箇所 */



/* ==== PC用レイアウト ==== */

.main-container{
  width:100%;
  box-sizing: border-box;
}

.max-section{
  width: calc(100% - var(--side-nav));
}

.right-wrap{
  width:100%;
  flex: 1;
  margin-left: var(--side-nav);
}

.sidebar-wrap {
  width: var(--side-nav);
  height: 100vh;
  background: var(--white);
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.sidebar-header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  padding: 0 15px;
  border-bottom: 1px solid var(--gray2);
}

.sidebar-inner {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}


.sidebar-header img{
  width:100px;
}

.sidebar-catch {
  padding: 20px;
  border-bottom: 1px solid var(--gray2);

  writing-mode: vertical-rl;  /* 縦書き右→左 */
  text-orientation: upright;   /* 漢字やひらがなを立てる */

  display: flex;               /* flexで縦書き中央寄せ */
  justify-content: center;     /* 縦方向中央寄せ（縦書きでは水平方向に見える） */
  align-items: center;         /* 横方向中央寄せ（縦書きでは縦方向に見える） */

  line-height: 1.5;

  /* 幅と文字サイズをビューポートに合わせる */
  width: 100%;
  font-size: calc(16px - 0.3vh); 
  padding: calc(10px + 0.5vh) 10px;
  flex-shrink: 0; /* 高さが狭くなっても縮まない */
}

/* nav部分を上側に詰めて伸縮可能に */
.sidebar-nav1,
.sidebar-nav2 {
  flex-shrink: 0;
}

.sidebar-nav1 ul,
.sidebar-nav2 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-nav2{
  margin-top:36px;
}

.sidebar-nav1 li a,
.sidebar-nav2 li a {
  display: block;
  text-decoration: none;
}

.sidebar-nav1 li a{
  border-bottom: 1px solid var(--gray2);
  padding: 16px 20px;
}

.sidebar-nav2 li a{
  color:var(--gray);
  padding: 0px 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size:var(--font-12);
}


.sidebar-nav1 li a:hover{
  background: var(--pink2);
}

.sidebar-nav1 li a:hover,
.sidebar-nav2 li a:hover{
  color:var(--primary);
}

/* ソーシャル */
.sidebar-social{
  width:14px;
  margin:36px 20px;
}


/* ボタンを最下部に固定 */
.sidebar-apply {
  margin-top: auto; /* ←これで最下部へ */

}

/* ボタンデザイン */
.apply-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--primary);
  color: var(--white);
  font-weight: bold;
  text-decoration: none;
  padding: 36px 0;
  transition: opacity 0.3s ease;
  line-height: normal;
  letter-spacing: -1px;
}
.apply-btn:hover {
  opacity: 0.8;
}

/* --------------------
パンくず
-------------------- */


.breadcrumb {
  font-size: 0.9rem;
  margin-bottom: 15px;
  display: flex;
  padding:4px 1rem;
}

.breadcrumb a {
  text-decoration: none;
  color: var(--primary);
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb span {
  color: var(--black);
}

.breadcrumb a,.breadcrumb span{
padding:0 0.4rem;
}


@media (max-width: 768px) {
  .breadcrumb{
    padding:4px;
  }
}


/* --------------------
メインコンテンツ
-------------------- */


/* メインコンテンツ */
.main-content {
  width:100%;
  position: relative;
  z-index: 1;
}

/* ハンバーガーボタン */
.hamburger {
  display: none;
  width: 28px;
  height: 22px;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
  z-index: 2001; /* メニューより前面 */
  transition: 0.3s ease;
}

.hamburger span {
  display: block;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* 開いているときの「×」変化 */
.hamburger.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* ==== メイン コンテンツ ==== */

#mv {
  position: relative;
  height: 100%;
}

#mv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mv-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0));
  z-index: 1;
}

.mv-content {
  position: absolute;
  bottom: max(3%, 20px);
  right: max(3%, 20px);
  text-align: right;
  color: #fff;
  width:90%;
  z-index: 2;
}

.mv-content h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: bold;
  margin-bottom: 0.5em;
  line-height: 1.3;
}

.bnr {
  position:relative;
  width:100%;
  display: block;
  text-align: center;
  color: var(--black);
  font-weight: bold;
  padding: 0.5em 1.2em;
  font-size: clamp(0.9rem, 1.5vw, 1.2rem);
}

.bnr-arrow-white{
  color:var(--black);
}

.bnr svg{
  position:absolute;
  right:-20px;
  top:50%;
  transform: translateY(-50%);
  content: '';
  display: inline-block;
  width: 43.5px;
  height: 11.5px;
  transition:transform 0.3s ease;
}


.bnr:hover svg {
  transform: translateY(-50%) translateX(10px); /* 横に10px移動 */
}

.bnr-pk{
  background: var(--pink);
  color: var(--white);
}

.bnr-wh{
  background: var(--white);
  color: var(--black);
  border:1px solid var(--gray);
}

#mv .mv-content{
  bottom: max(10%, 20px);
  right: max(5%, 20px);
}

#mv .bnr{
  max-width:550px;
  margin-left:auto;
}

  .bnr-s { max-width: 250px;}
  .bnr-m {max-width: 300px;}
  .bnr-l {max-width: 350px;}

/* 見出し */
    .h3 {
      font-size: clamp(1.4rem, 2vw, 1.8rem) !important;
      margin-bottom: var(--margin-xs);
      font-weight: 700;
    }

    .h {
      font-size: var(--font-18);
      /* line-height: 1.8; */
      margin-bottom: var(--margin-xs);
    }

    .h-eng {
      display: block;
      color: var(--primary);
      font-size: var(--h-eng);
      letter-spacing: 0.3rem;
      font-weight: 500;
    }

    .h-eng-yoko {
      display: block;
      color: var(--primary);
      font-size: var(--h-eng);
      letter-spacing: 0.3rem;
      font-weight: 500;
      margin-bottom:1rem;
    }


    .bg-c {
      position: relative;
      /* 疑似要素配置のために必要 */
      z-index: 0;
      /* 背景が前に出ないように */
    }

    /* 背景ボックス */
    .bg-c::after {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, 40px);
      /* ←ここを追加 */
      width: min(90%, 1200px);
      /* コンテンツと同じ幅に */
      max-width: 900px;
      /* 任意サイズ */
      height: 100%;
      /* 高さは親要素に合わせる */
      background-color: var(--pink2);
      z-index: -1;
      /* 背景を背面へ */
    }

    .bg-l {
      position: relative;
      /* 疑似要素配置のために必要 */
      z-index: 0;
      /* 背景が前に出ないように */
    }

    /* 背景ボックス */
    .bg-l::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      /* ←ここを追加 */
      width: min(50%, 1200px);
      /* コンテンツと同じ幅に */
      max-width: 100%;
      /* 任意サイズ */
      height: 100%;
      /* 高さは親要素に合わせる */
      background-color: var(--pink2);
      z-index: -1;
      /* 背景を背面へ */
    }


/* --------------------
レイアウト
-------------------- */

.sec {
      width: 90%;
      max-width: 1200px;
      text-align: center;
      padding: 0 0 50px 0;
    }

        /* 2カラムレイアウト */
    .sec-con {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 40px;
      max-width: 100%;
      width: 100%;
      margin: 0 auto;
      flex-wrap: wrap;
      /* スマホ時の崩れ防止 */
       box-sizing: border-box;
       overflow: hidden;
    }

    /* 左カラム（住所＋バナー） */
    .sec-con-txt {
      display: flex;
      gap:60px;
      flex: 1;
      min-width: 46%;
      text-align: left;
      align-items:center;
    }

    .sec-con-txt > div{
      /* width: 30%; */
      flex:2;
    }

    .sec-con-txt > p{
      flex: 3;
    }


/* --------------------
レイアウト（グリッド）
-------------------- */

    .sec-con-grid{
      display: grid;
    }

    /* ギャラリーグリッド */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--margin-s);
  margin-top: var(--margin-s);
}

/* スマホ（2カラム） */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--margin-xs);
  }
}


/* 各アイテムの枠（デバッグ・レイアウト確認用） */
.gallery-item {
  width: 100%;
  overflow: hidden;
  aspect-ratio: 4 / 5; /* ←縦長比率（Instagram標準） */
  /* border-radius: 10px; */
  background-color: #fafafa; /* 読み込み中の背景 */
}

.gallery-item img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠いっぱいにトリミングしてフィット */
  object-position: center; /* 中央基準でトリミング */
  display: block;
}

/* Instagram埋め込みのリセット */
.gallery-item .instagram-media {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-shadow: none !important;
  border: none !important;
}


    /* テーブルセクション */





/* 汎用データテーブル（flex版） */

.data-table {
  display: flex;
  flex-direction: column;
  gap: var(--margin-xs);
  max-width: 600px;
  margin: 0 auto;
}

.data-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  font-size: var(--font-22);
}

.data-table p{
text-align: left;
}

.data-label {
  flex: 1;
  text-align: left;
  font-size:var(--font-22);
}

.data-value {
  flex: 1;
  text-align: right;
  font-size: var(--font-18);
}


    @media (max-width: 768px) {
      
  .sec {
    width: 100%;
    padding: 0;
  }

  .sec-con {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .sec-con-txt{
    gap:20px;
    flex-direction: column;
  }

    .sec-con-txt > div{
      width: 100%;
    }

    .bg-c::after{
      width: min(80%, 1200px);
      transform: translate(-50%, 20px);
    }


    /* テーブル */
    .data-table {
    /* width: 80%; */
    margin: 0 auto;
  }

  .data-row {
    flex-direction: row;
    align-items: center;
    text-align: center;
  }

  .data-table p{
    text-align: center;
  }

  .data-label,
  .data-value {
    flex: unset;
    width: 100%;
  }

  #course .data-table{
    width:80%;
  }

  #company .data-label{
    text-align: center;
  }

}

.list-style{
  width:100%;
  margin:0 auto;
}

.list-style li{
  list-style:disc;
  padding:.3rem 0;
}
.list-style li::marker{
  font-size: 8px;
}


@media (max-width: 768px) {
.list-style{
  max-width: 440px;
}
}


/* ==== 1列 コンテンツ ==== */




/* --------------------
トップ
-------------------- */


#top-greet {
      position: relative;
      min-height: 80vh;
      background: url("../img/bg-mv.jpg") center center / cover no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .greet-inner {
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .greet-text {
      writing-mode: vertical-rl;
      /* 縦書き */
      text-orientation: upright;
      color: var(--black);
      line-height: 1.8;
      font-family: "Zen Old Mincho", serif;
      font-size: clamp(1rem, 1.6vw, 1.3rem);
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .greet-text h2 {
      font-size: var(--font-32);
      font-weight: 700;
      margin-bottom: 1em;
      padding-left: 60px;
    }

    .greet-text p {
      font-size: var(--font-22);
      margin: 0;
    }

    .greet-inner img {
      position: absolute;
      right: 10%;
      bottom: 5%;
      max-width: 140px;
      width: 8vw;
      height: auto;
      z-index: 1;
    }


    /* カレンダーセクション全体 */
    #lesson-calendar {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
    }

    /* カレンダー全体 */
    .calendar {
      width: 100%;
      max-width: 1200px;
      text-align: center;
    }



    /* テーブル全体 */
    .calendar table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      /* 均等配置を強制 */
      font-size: clamp(0.8rem, 3vw, 1rem);
      line-height: 1.3;
      font-family: "Noto Sans JP", sans-serif;
    }

    /* ヘッダーとセル */
    .calendar th,
    .calendar td {
      border: 1px solid var(--gray);
      text-align: center;
      vertical-align: middle;
      width: 14.285%;
      /* 7列均等 */
      height: 100px;
      box-sizing: border-box;
      word-break: break-word;
      /* 長い文字の折り返し */
    }

    .calendar tbody tr:first-child td {
      border-top: none;
    }

    .calendar th {
      background: var(--pink3);
      border: 1px solid var(--pink-bg);
      border-bottom: none;
      font-weight: 400;
      letter-spacing: 1.2px;
      height: 40px;
    }

    .calendar th:first-child {
      border-left: var(--pink3) !important;
    }

    .calendar th:last-child {
      border-right: var(--pink3) !important;
    }

    .calendar th.sun,
    .calendar td.color-red {
      color: #DF5353;
    }

    .calendar th.sat,
    .calendar td.color-blue {
      color: #4A66C4;
    }

    /* td全体は左上寄せ（前回設定） */
    .calendar td {
      vertical-align: top;
      text-align: left;
      position: relative;
      padding: 4px 6px;
    }

    /* 数字部分が特定クラスや要素の場合 */
    .calendar td .day-number {
      display: block;
      font-weight: bold;
      font-size: 0.9rem;
      margin-bottom: 2px;
    }

    .calendar td .teacher {
      display: block;
      text-align: center;
      /* 横方向中央揃え */
      margin-top: 4px;
      /* 数字との間に少し余白 */
      line-height: 1.4;
      border-radius: 6px;
      color: var(--white);
      padding: .5rem;

    }

    .inline {
      white-space: nowrap;
      /* 「藤田先生」を途中で改行させない */
    }


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

    }

    .legend .teacher-a,
    .legend .teacher-b {
      color: var(--white);
      border-radius: 3px;
      padding: .2rem .5rem;
    }

    /* ---------- 場所 ---------- */




    /* 左カラム（住所＋バナー） */
    .place-info {
      flex: 1;
      min-width: 46%;
      text-align: left;
    }

    /* 右カラム（地図） */
    .place-map {
      flex: 1;
    }

  /* ---------- 画像セクション ---------- */
  .img-cover {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    aspect-ratio: 1230 / 470; /* PC時は比率固定 */
  }

  /* pictureにもブロック要素を指定 */
  .img-cover picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* imgをcover風に見せる */
  .img-cover .cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* スマホで高さを変更 */
  @media (max-width: 768px) {
    .img-cover {
      aspect-ratio: auto; /* スマホ時は高さ指定を優先 */
      height: 260px;
    }
  }





/* ==== 1000px以下のとき ==== */
@media (max-width: 1000px) , (max-height: 840px){

  .max-section{
  width:100%;
  }

  body {
    flex-direction: column;
  }

  .right-wrap{
    margin:auto;
  }

  .sidebar-header{
    height:60px;
  justify-content: space-between;
  }

  .sidebar-wrap {
    width: 100%;
    height: auto;
    position: relative;
  }

  .hamburger {
    display: flex;
  }

  .sidebar-inner {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.97);
    transition: left 0.3s ease;
    overflow-y: auto;
    z-index: 2000;
    padding: 20px;
  }

  .sidebar-inner.active {
    left: 0;
  }

  .main-content {
    margin-left: 0;
  }

   .sidebar-apply{
    display: none;
  }

  /* ---------- トップページ ---------- */

  #top-greet {
        min-height: auto;
        padding-top: var(--margin-m);
        padding-bottom: var(--margin-m);
      }

      .greet-text {
        writing-mode: horizontal-tb;
        /* 横書き */
        font-size: 1rem;
        text-align: center;
      }

      .greet-text h2 {
        padding-left: 0;
      }

      .greet-text p {
        padding: 0 1rem;
      }

      .greet-inner img {
        margin-top: var(--margin-m);
        position: static;
        width: 80px;
      }


}

  @media (max-width: 768px) {
/* ===== メインビジュアル調整 ===== */
  #mv {
    height: 40vh; /* ← ここで高さを指定（例: 画面の75%） */
  }

  #mv img {
    height: 100%;
    object-fit: cover;
  }

  .mv-content {
    bottom: max(6%, 20px);
    right: max(5%, 20px);
  }

  .mv-content h2 {
    font-size: clamp(1.4rem, 4vw, 2rem);
  }

  .bnr {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    padding: 0.5em 1em;
  }



  /* --------------------
トップ
-------------------- */



  .place-info {
    text-align: center;
  }

  .place-address {
    text-align: center;
  }

  .place-map {
    width: 90%;
  }

  .place-map iframe {
    height: 250px;
  }

  /* ---------- テーブル ---------- */

  /* テーブルを小さくして横スクロール不要に */
  .calendar table {
    width: 100%;
  }

  .calendar th,
  .calendar td {
    padding: 2px;
  }

  .calendar td .teacher {
    padding: .2rem;
  }

  /* 万一でもflexの影響を除去 */
  .calendar,
  .calendar table,
  .calendar tbody,
  .calendar tr {
    display: table;
    width: 100%;
  }

}


/* ---------- 3カラム共通 ---------- */
.three-flex {
  display: flex;
  justify-content: space-between;
  align-items: stretch; /* 各カラムを同じ高さにする */
  gap: 40px;
  margin: 0 auto var(--margin-l) auto;
  flex-wrap: wrap;
  
  min-height: 200px; /* ← 高さを統一 */
}

.three-flex:last-child{
    margin: 0 auto;
}

.three-block{
  padding-top:var(--margin-m);
  padding-bottom:var(--margin-m);
  margin-top:var(--margin-xl);
  margin-bottom:var(--margin-xl);
}

/* カラム共通 */
.col-left,
.col-center,
.col-right {
  flex: 1;
}

/* 左の見出し（横幅を狭める） */
.col-left {
  flex: 0 0 200px; /* ← 固定幅に近い扱い（必要に応じて200～250px程度に） */
  justify-self: center;
  /* align-self: center; */
}

.tate{
  writing-mode: vertical-lr;
  /* 縦書き */
  text-orientation: mixed; /* ← 英字も回転する（上→下に並ぶ） */
  color: var(--black);
  line-height: 1.8;
  font-family: "Zen Old Mincho", serif;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* ← 下ぞろえ（縦方向の終端に寄せる） */
  align-items: flex-end;       /* ← 横方向は中央揃え（任意） */
  margin:0 auto;
}

/* テキスト（中央カラム）の幅を制限 */
.col-center {
  flex: 1.5;
  padding:var(--padding);
}

.col-center h3 {
  
  min-width: 300px;
  max-width: 520px; /* ← ここで横幅を指定（調整可） */
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  margin-bottom: 0.5em;
  font-weight: 600;
}

.col-center p {
  min-width: 300px;
  max-width: 420px; /* ← ここで横幅を指定（調整可） */
  margin-bottom: 1.5em;
  line-height: 1.8;
}

/* 右の画像 */
/* .col-right img,
.col-left img {
  width: 100%;
  height: auto;
  display: block;
} */


/* 3カラムの画像統一 */
/* 画像ラッパーを追加して比率を固定 */
.col-left,
.col-right {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.col-right {
  max-width: 540px;
  aspect-ratio: 16 / 10;
};

/* 画像をcoverでフィットさせる */
.col-left img,
.col-right img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---------- レイアウト別 ---------- */


.reverse {
  flex-direction: row-reverse;
}

/* ---------- スマホ ---------- */

@media (max-width: 1300px) {
  .tate{
    margin:0;
  }

  .col-left{
    display: flex;
    justify-content: flex-end; /* → 右寄せ */
    flex: 0 0 100px; /* ← 固定幅に近い扱い（必要に応じて200～250px程度に） */
    height: 200px;
  }

  .three-flex{
    gap:10px;
  }
}

@media (max-width: 768px) {
  .three-flex {
    flex-direction: column;
    text-align: center;
    gap:20px;
    margin:0;
    min-height: none;
  }

  .three-flex .bnr,.block-2 .column-right .bnr{
margin-left:auto;
margin-right:auto;
  }

  .col-left,
  .col-center,
  .col-right {
    flex: none;
    width: 100%;
    margin:0 auto;
  }

  .col-left{
    justify-content: center; /* → 右寄せ */
    height: auto;
  }

  .col-left h2 {
    text-align: center;
  }

  .col-center h3,.col-center p{
    max-width:none;
    min-width:0;
  }

  .col-center p{
    min-width:0;
    text-align: left;
  }

  .three-margin{
    margin-left:0px;
  }
}


/* ---------- 生徒様の作品 & お知らせ 共通 ---------- */
.sec-p {
  padding: 80px 20px;
}

.block-2 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: var(--margin-m);
  width: 50%;
}

/* 左カラム（見出し） */
.block-2 .column-left {
  flex: 0 0 200px; /* これまでのcol-leftと同じ幅に調整 */
  display: flex;
  justify-content: flex-end; /* 見出しを右寄せ */
}

.block-2 .column-left .tate {
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: var(--black);
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  line-height: 1.8;
  display: flex;
  flex-direction: column-reverse; /* 下から上に読むように変更 */
  justify-content: flex-end;
}


/* 右カラム */
.block-2 .column-right {
  flex: 1;
  width:50%;
}



/* ▼ 生徒作品スライダー共通設定 */

.work-swiper .swiper-slide {
  position: relative;
  aspect-ratio: 3 / 4; /* ← 縦長の比率にする（例: 幅3 : 高さ4） */
  overflow: visible;
}


.work-swiper {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  overflow: hidden;   
}


.work-swiper img {
position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* トリミングして枠内にフィット */
  object-position: center;
  display: block;
  transition: transform 0.3s ease;
}

/* ▼ ナビゲーションボタン */
/* .work-swiper-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
  width:10px;
} */

  .work-swiper-nav {
    display: flex;
    position: relative;
    justify-content: space-between;
    width: 120%;
    left: -10%;
    margin-top: 10px;
  }

  .swiper-button-next{
    margin-right:0px;
  }

  .swiper-button-prev{
    margin-left:0px;
  }

  /* 矢印アイコンのサイズも調整（内部の疑似要素） */
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 20px !important;     /* ← 矢印アイコン自体の大きさ */
  background-color: var(--gray);
  padding:10px;
  padding-left:16px;
  padding-right:16px;
  border-radius: 100px;
  opacity:.8;
  color:var(--white);
}

.swiper-pagination-bullet-active{
  background-color:var(--primary) !important;
}
  
  

.work-swiper-nav button {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 1.4rem;
  cursor: pointer;
  transition: background 0.3s;
}

.work-swiper-nav button:hover {
  background: var(--primary-dark);
}




/* --------------------
講師について
-------------------- */



/* --------------------
お問い合わせ
-------------------- */



#contact #form .max-800{
  box-sizing: border-box;
  width: 70%;
}

#contact #form .flex{
  margin:1.2rem 0;
  justify-content: center;
  align-items: center;
  font-size: var(--font-16);
  gap:10px;
}

#contact #form .flex label{
  text-align: left;
  flex:1;
}

#contact #form .flex input,
#contact #form .flex textarea{
  flex:4;
  border:none;
  padding:.2rem;
}

#contact #form p{
  font-size: var(--font-14);
  margin-top: var(--margin-xs);
}

#contact #form .contact-btn{
text-align: center;
background-color: var(--primary);
color:var(--white);
border:none;
padding:.6rem 1rem;
width:50%;
margin:var(--margin-xs) auto;
font-weight: 500;
font-size:var(--font-18);
}

@media (max-width: 768px) {
  #contact #form .flex{
    flex-direction: column;
    margin-top:20px;
  }

  #contact #form .flex label{
    width:100%;
  }

  #contact #form .flex input, #contact #form .flex textarea{
    flex:1;
    width:100%;
    margin:0;
  }
}


/* --------------------
フッター
-------------------- */


/* フッターバナー */

/* ▼ バナー全体 */
.fbnr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom:var(--margin-xl);
  padding:0 1rem;
}

.fbnr-item {
  position: relative;
  display: block;
  height: 200px;
  background-size: cover;
  background-position: center;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
}

/* 黒オーバーレイ */
.fbnr-item .fbnr-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  transition: 0.3s;
}

.fbnr-item span {
  position: absolute;
  bottom: 15px;
  left: 15px;
  font-size: var(--font-26);
}
/* hover */
.fbnr-item:hover .bnr-overlay {
  background: rgba(0,0,0,0.6);
}

/* 各バナーの背景 */
.fbnr-item.about  { background-image: url(../img/fbnr1.webp); }
.fbnr-item.course { background-image: url(../img/fbnr2.webp); }
.fbnr-item.teacher{ background-image: url(../img/fbnr3.webp); }
.fbnr-item.works  { background-image: url(../img/fbnr4.webp); }


/* ---------- スマホ時（縦積み） ---------- */
@media (max-width: 768px) {
  .fbnr-grid {
    grid-template-columns: 1fr;
    gap: 0px;
    margin-bottom: 0;
    padding:0;
  }
  .fbnr-item {
    height: 150px; /* 横長に調整 */
  }

  
}



/* ここまで */

/* ▼ スマホ調整 */

@media (min-width: 1700px) {
  .work-swiper {
    max-width: 800px; /* ← PC時の上限を設定 */
  }
}


@media (max-width: 768px) {
  .work-swiper {
    max-width: 80%;
    overflow: visible;    /* ← スマホのみ見切れ表示を復活 */
  }

  .work-swiper .swiper-slide {
    aspect-ratio: 2 / 3; /* スマホでは少し細めの縦長比率に変更 */
    /* transform: scale(0.85); */
    transform-origin: center;
  }

    .swiper-button-next{
    margin-right:-70px;
  }

  .swiper-button-prev{
    margin-left:-70px;
  }


  .work-swiper-nav button {
    width: 40px;
    height: 40px;
  }
}



/* お知らせリスト */
.tbl-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tbl-list li {
  /* border-bottom: 1px solid #ddd; */
  padding: 12px 0;
  display: flex;
  align-items: center;
  gap:20px;
  text-align: left;
}
.tbl-list li a {
  color: var(--black);
  text-decoration: none;
}
.tbl-list li a:hover {
  text-decoration: underline;
}
.tbl-list .date {
  color: var(--primary);
  font-size: 0.9rem;
  background-color:var(--pink2);
  width:100%;
  max-width:80px;
  text-align: center;
}

@media (max-width: 1300px) {
  .block-2 .column-left {
    flex: 0 0 100px;
  }
}

/* ---------- スマホ ---------- */
@media (max-width: 768px) {
  .block-2 {
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    width:100%;
  }

  .block-2 .column-left {
    justify-content: center;
  }
  .block-2 .column-right {
    width:100%;
    text-align: center;
  }
  .work-list li {
    width: calc(50% - 10px);
  }
}



/* ▼ お申込みCVセクション */
.cv-section {
  text-align: center;
  background-color: var(--primary);
  padding-top: var(--margin-m);
  padding-bottom: var(--margin-m);
}

.cv-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  gap: 20px;
}

.cv-left {
  flex: 3;
  text-align: left;
}

.cv-section p {
  font-size: var(--font-16);
  line-height: 1.4;
}

.cv-section p{
  color:var(--white);
}

.cv-section span {
  display: block;
  font-size: var(--font-32);
  font-weight: 700;
}

.cv-section .bnr{
    padding: 1.2em 2em;
    font-size:var(--font-24);
    font-weight: 500;
}

/* ▼ 右側バナー調整 */
.cv-right {
  flex: 4;
  text-align: right;
}

/* ▼ スマホ時の縦積み */
@media (max-width: 768px) {
  .cv-inner {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .cv-left,
  .cv-right {
    text-align: center;
  }

  .cv-section .bnr{
    padding:1rem 2rem;
    max-width: 450px;
    width: 100%;
  }
}


/* ----- */

/* ▼ フッター全体 */
.footer-section {
  background: var(--black);
  color: #fff;
  padding: 80px 20px;
}

.footer-section2{
  background: var(--black);
  color: #fff;
  padding: 20px;
}

/* 内側レイアウト */
.footer-inner {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 60px;
}

/* ▼ 左カラム */
.footer-left {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.footer-logo img {
  width: 300px;
  height: auto;
}

/* ▼ ナビ部分（2カラム構成） */
.footer-nav ul {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px 100px; /* 行間・列間 */
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav a {
  color: #fff;
  text-decoration: none;
  transition: opacity 0.3s;
}

.footer-nav a:hover {
  opacity: 0.7;
}

/* ▼ 右カラム */
.footer-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  text-align: right;
  gap: 40px;
}

/* SNSエリア */
.footer-sns {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-sns span {
  opacity: 0.8;
}

.sns-icons{
  display: flex;
}

.sns-icons a img {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1); /* 白化 */
  transition: opacity 0.3s;
}

.sns-icons a:hover img {
  opacity: 0.7;
}

/* ▼ サブナビ */
.footer-subnav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 16px;
  list-style: none;
  max-width:300px;
  margin: 0;
  padding: 0;
}

.footer-subnav a {
  color: #fff;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.3s;
}

.footer-subnav a:hover {
  opacity: 1;
}

/* ▼ スマホ時 */
@media (max-width: 768px) {

  .footer-section {
  background: var(--black);
  color: #fff;
  padding: 50px 10px;
  padding-bottom:20px;
}

    .footer-section2{
    margin-bottom:50px;
  }

  .footer-inner {
    flex-direction: column;
    align-items: center;
    /* text-align: center; */
    gap: 40px;
  }


  .footer-right {
    align-items: center;
    text-align: center;
  }

  .footer-subnav ul {
    justify-content: center;
  }

}

@media (max-width: 400px) {
    .footer-nav ul {
        gap: 10px 40px;
  }
}

/* ▼ 固定バナー全体 */
.fix-bnr {
  position: fixed;
  bottom:20px;
  right:30px;
  z-index:100;
  display: block;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  padding: 6px;
  transition: opacity 0.3s ease;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* ← シャドウ追加 */
  display: none;
}

.fix-bnr:hover {
  opacity: 0.9;
}

/* ▼ 内部レイアウト */
.fix-bnr-inner {
  max-width: 300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

/* ▼ テキスト部分 */
.fix-bnr-text p {
  margin: 0;
  line-height: 1.3;
  font-weight: 700;
  font-size:var(--font-16);
}

.fix-bnr-text span {
  display: block;
  font-weight: 400;
  margin-top: 4px;
  font-size:var(--font-14);
}

/* ▼ ボタン部分 */
.fix-bnr-btn {
  background: #fff;
  color: var(--black);
  font-weight: 700;
  padding: 6px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: background 0.3s ease, color 0.3s ease;
}

.fix-bnr:hover .fix-bnr-btn {
  background: rgba(255, 255, 255, 0.9);
}

/* ▼ スマホ対応 */
@media (max-width: 768px) {
  .fix-bnr{
    display: block;
width:100%;
bottom:0;
right:0;
  }

  .fix-bnr-inner {
    
max-width:380px;
width:100%;
  }

  .fix-bnr-btn {
    padding: 8px 18px;
  }

}




/* --------------------
サブ
-------------------- */

#sub-mv {
      position: relative;
      min-height: 30vh;
      background: url("../img/bg-mv.jpg") center center / cover no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    #sub-mv h1{
  font-size:var(--font-mv-sub);
    }

@media (max-width: 768px) {
      #sub-mv {
        min-height: auto;
        padding-top: var(--margin-l);
        padding-bottom: var(--margin-l);
      }
    }

/* --------------------
会社概要
-------------------- */


#company .data-value{
  flex:2;
  text-align: left;
}


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

    #privacy .sec p span{
      text-align: right;
      font-size: var(--font-14);
      display:block;
      margin-bottom:1rem;
      color:var(--gray);
    }


    .flex-left{
flex:1;
    }

    .flex-right{
      flex:3 !important;
    }



    @media (max-width: 768px) {
  #company .data-label,
  #company .data-value {
    flex: unset;
    width: 100%;
  }

  
    .flex-right{
      margin-right:auto;
    }
}