/* 共通CSSを継承（チーム共通ルール） */
@import "./input.css";

/* teachers配下のHTMLだけを見る */
@source "../_view/forteacher/**/*.html";



@layer components {
/* 基本コンポーネント */

/* text */
.text70{
  @apply text-[#536375];
}
.text100{
  @apply text-[#2D3743];

}
.text40blue{
  @apply text-[#7B8DA2];

}
.txt-13{
  @apply text-[#2D3743] text-[13px] leading-[150%];
}
.txt-13-70{
  @apply text-[#536375] text-[13px] leading-[150%];
}
.txt-15{
  @apply text-[#2D3743] text-[15px] leading-[150%];

}
.txt-15-70{
  @apply text-[#536375] text-[15px] leading-[150%];

}
  /* bg */
  .bgBlue5{
    @apply bg-[#FAFCFF];
  }
  .bgPrimary{
    @apply bg-[#156AD1];
  }

 .bkgA{
    @apply bg-[#EAF2FF];
  }
  /* グラデーション */
  .bgGradeBlue {
    background: linear-gradient(to left, #DEE8FC, #BDD1F8);
  }

  /* シャドウ */
  .shadowBlue {
    box-shadow: 0 0 24px
      color-mix(in oklab, var(--color-blue-700) 20%, transparent);
  }
  .shadow20 {
    box-shadow: 0 0 24px rgba(118, 131, 158, 0.2);
  }
.shadowLight{
  box-shadow: 0 0 16px
  color-mix(in oklab, var(--color-blue-700) 10%, transparent);

}
}

/* =========================
  進路情報リンクナビ
========================= */

@layer components {
  /* ===== route nav (pills) ===== */
  .routeNavWrap {
    @apply mx-auto mt-10 mb-6;
  }
/* スクロールあり */
  .routeNav {
    @apply flex flex-nowrap md:flex-wrap gap-4
      px-4 md:px-10 xl:px-20
      overflow-x-auto whitespace-nowrap md:overflow-visible;
  }
  /* スクロールなし */

  .routeNavNoScroll {
    @apply flex flex-nowrap md:flex-wrap gap-4
      px-4 md:px-10 xl:px-20;
  }

  .routeNavItem {
    @apply shrink-0 w-[47%] md:w-fit;
  }

  /* 通常（白） */
  .routeNavLink {
    @apply inline-flex items-center justify-center gap-3
      py-[10px] px-6 rounded-full
      bg-white font-bold text-[#2D3743]
      transition hover:opacity-95 w-full md:w-fit;
  }

  /* 選択中（青） */
  .routeNavLinkActive {
    @apply bg-blue-700 text-white;
  }

  .routeNavIcon {
    @apply shrink-0;
  }

  .routeNavText {
    @apply text-[15px] tracking-wide;
  }

  /* Active の時だけ文字色を白に */
  .routeNavLinkActive .routeNavText {
    @apply text-white;
  }
}
@layer utilities {
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .scrollbar-hide {
    -ms-overflow-style: none; /* IE / Edge */
    scrollbar-width: none; /* Firefox */
  }
}
  /* 学校の先生へページ遷移ボタン */
  @layer components {
  .tabTeacherBtn {
    @apply block w-full h-full text-center text-[#7B8DA2] bg-[#FAFCFF]
           hover:bg-blue-50 hover:text-blue-700 transition font-medium;
  }

  .activeTeacherTab {
    @apply bg-[#B8DDFF] text-blue-700 h-full font-bold;
  }





  /* 左画像 右テキストのカード */
    .cardTeachers {
      @apply bg-[#FAFCFF] rounded-lg shadow-[0_0_16px_color-mix(in_oklab,var(--color-blue-700)_10%,transparent)] p-4 md:p-6 flex flex-col md:flex-row gap-6;
    }
  
    .cardTeacherImage {
      @apply flex-shrink-0 w-full md:w-2/5 h-auto rounded-lg object-cover;
    }
  
    .cardTeacherBody {
      @apply flex flex-col;
    }
  
    .cardTeacherTitle {
      @apply text-lg font-bold text-blue-700 pb-4;
    }
  
    .cardTeacherDescription {
      @apply text-[13px] text-[#2D3743] font-medium leading-[1.75];
    }
  
    .cardTeacherLink {
      @apply text-blue-700 font-medium mt-4 text-[13px] text-right;
    }
    
    /* =========================
  movie.html
========================= */

    /* 動画カード */
        .cardMovies {
          @apply rounded-lg shadow-[0_0_24px_rgba(118,131,158,0.2)] p-6 flex flex-col md:flex-row gap-10 md:gap-6 items-start;
        }

        .cardMoviesImg {
          @apply w-full md:w-[32%] h-auto object-cover rounded-sm;
        }
        .cardMoviesBody {
          @apply flex-1 w-full;
        }
        .cardMoviesHeader {
          @apply flex flex-col md:flex-row justify-between items-start pb-6 md:pb-4 gap-4 md:gap-0;
        }
        .cardMoviesHeaderNoButton {
          @apply items-start pb-6 md:pb-4 gap-4 md:gap-0;
        }
        .cardMoviesTitle {
          @apply text-xl font-bold text-[#2D3743];
        }
      
        .cardMoviesBtn {
          @apply flex items-center justify-center gap-2 border border-[#FF3D00] w-full md:w-fit
                 text-[#FF3D00] font-semibold px-6 py-[13px] rounded-full text-[13px]
                 hover:bg-orange-50 transition
        }
        .cardMoviesList {
            @apply grid grid-cols-1 md:grid-cols-2 gap-y-2 md:gap-y-4 md:gap-x-12;
          }
        
          /* 各カラムの縦並び */
          .cardMoviesListColumn {
            @apply gap-3;
          }
        
          /* 各行のリンク */
          .cardMoviesListColumn a {
            @apply block font-medium text-[#2D3743] hover:text-blue-700 text-[13px] gap-2 transition-colors duration-150 pt-2 md:pt-0;
          }
          .cardMoviesListColumn a + a {
            @apply mt-2;
          }
        .cardMoviesList a span {
          @apply mr-1;
        }

        /* ステップカード */
                /* PC: 2カラム / SP: 1カラム */
                .stepCards {
                    @apply w-full text-left;
                  }
                  /* カード本体 */
                  .stepCard {
                    @apply border border-[color:#CDDAEA] rounded-lg p-4;
                  }
                
                  /* Stepバッジ */
                  .stepBadge {
                    @apply inline-block bg-blue-700 text-white text-lg
                           px-6 py-1 rounded-md mb-4;
                  }
                


                  /* カテゴリーで探す */
                  .categoryBtn {
                    @apply flex items-center justify-center gap-3 bg-white border border-[#B8DDFF] text-[#536375] rounded-lg px-4 py-4 text-[15px] font-medium hover:bg-blue-50 transition;
                  }
                  /* <!-- スクロールバー薄く（Tailwindだけで足りない場合の保険） --> */

                  .scrollbar-thin::-webkit-scrollbar { height: 8px; }
                  .scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
                  .scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .6); border-radius: 999px; }
                  /* Firefox */
                  .scrollbar-thin { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, .7) transparent; }
              
/* =========================
  daigaku.html 気になる記事をご紹介カード
========================= */
  /* ===== Article Card ===== */
  .articlesCard {
    @apply rounded-lg bg-[#FAFCFF] p-6;
  }

  .articlesCardHeader {
    @apply flex items-baseline gap-4 text-[#536375] text-[#2D3743] text-[15px] leading-[150%] font-bold;
  }

  .articlesCardHr {
    @apply my-4 border-[#CDDAEA];
  }

  .articlesCardList {
    @apply space-y-2;
  }

  .articlesCardLink {
    @apply flex items-center justify-between gap-4 hover:opacity-70;
  }

  .articlesCardLinkText {
    @apply flex items-baseline gap-6 text-blue-700 text-[13px];
  }

  .articlesCardLinkLabel {
    @apply font-medium flex-shrink-0;
  }

  .articlesCardLinkTitle {
    @apply font-medium;
  }

  .articlesCardArrow {
    @apply h-5 w-5 shrink-0 text-blue-700 transition group-hover:translate-x-0.5;
  }

  .articlesCardMoreWrap {
    @apply mt-8 flex justify-center;
  }

  .articlesCardMore {
    @apply inline-flex items-center gap-3 text-[#2D3743] text-[13px] hover:text-blue-700;
  }

  .articlesCardMoreArrow {
    @apply h-4 w-8 transition hover:translate-x-0.5;
  }

/* =========================
 sitemap
========================= */
  /* 外側（背景） */
  .siteMapSection {
    @apply py-10;
  }

  /* ページ見出し */
  .siteMapTitle {
    @apply px-4 md:px-10 xl:px-20 text-[28px] md:text-[34px] font-bold text-[#536375];
  }

  /* 角丸の大枠 */
  .siteMapOuter {
    @apply mt-6 mx-4 md:mx-10 xl:mx-20 rounded-2xl bg-[#FAFCFF] p-6;
  }

  /* 上部の帯（進路を探す） */
  .siteMapHead {
    @apply rounded-lg bg-[#EAF2FF] p-6 flex items-center gap-4;
  }

  .siteMapHeadIcon {
    @apply text-blue-700 shrink-0;
  }

  .siteMapHeadText {
    @apply text-blue-700 font-bold text-lg;
  }

  /* カード群 */
  .siteMapGrid {
    @apply mt-6 flex flex-wrap gap-6;
  }

  /* カード（上段は2枚＝50% / 下段は3枚＝33.333%） */
  .siteMapCard {
    @apply bg-[#FAFCFF] rounded-lg border border-[#CDDAEA] px-10 py-6;
  }
  .siteMapCard--full {
    @apply w-full;
  }
  /* 上段（2枚） */
  .siteMapCard--half {
    @apply w-full md:w-[calc(50%-24px)];
  }

  /* 下段（3枚） */
  .siteMapCard--third {
    @apply w-full md:w-[calc(50%-24px)]
    xl:w-[calc((100%-48px)/3)];
  }

  .siteMapCard--thirdLast{
    @apply w-full xl:w-[calc((100%-48px)/3)] ;
 
  }
  .siteMapCardTitle {
    @apply text-[15px] font-bold text-[#2D3743];
  }

  /* リンクの2列（グリッドじゃなく列っぽく） */

  .siteMapLinkCol {
    @apply flex gap-x-8 gap-y-4 flex-wrap pt-4;
  }

  /* リンク（左：ラベル / 右：矢印） */
  .siteMapLink {
    @apply flex items-center gap-3 text-[#2D3743] font-medium hover:opacity-70;
  }

  .siteMapLinkText {
    @apply whitespace-nowrap text-[13px];
  }
  .siteMapLinkTextWrap {
    @apply text-[13px];
  }
  /* 矢印（指定SVGにこのクラスを足す） */
  .siteMapArrow {
    @apply shrink-0 text-blue-700 transition group-hover:translate-x-0.5 w-3;
  }



/* =========================
sns
========================= */

  /* ===== Section Wrapper ===== */
  .snsSection {
    @apply bg-[#FAFCFF] p-6 rounded-lg;
  }

  .snsContainer {
    @apply mx-auto max-w-6xl px-4 md:px-10 xl:px-20;
  }

  .snsPanel {
    @apply rounded-2xl bg-[#EAF2FF] p-6 md:p-8;
  }

  /* ===== Header (X / 旧Twitter) ===== */
  .snsHeader {
    @apply flex items-center gap-4 bg-[#EAF2FF] px-4 py-3 rounded-lg;
  }


  .snsHeaderTitle {
    @apply font-bold text-[#156AD1] text-lg;
  }



  /* ===== Grid ===== */
  .snsGrid {
    @apply mt-4 grid gap-4 md:grid-cols-2;
  }

  /* ===== Card ===== */
  .snsCard {
    @apply rounded-2xl border border-[#CDDAEA] bg-[#FAFCFF] p-6;
  }

  .snsCardTop {
    @apply h-full flex items-start gap-4;
  }

  .snsAvatar {
    @apply h-20 w-20 shrink-0 overflow-hidden;
  }


  .snsNameRow {
    @apply flex flex-col;
  }

  .snsName {
    @apply font-bold text-[#7B8DA2] text-xl;
  }
 .snsMeta{
  @apply w-full h-full flex flex-col justify-between;
 }
  .snsHandle {
    @apply text-[#156AD1] font-bold text-[15px];
  }

  .snsDesc {
    @apply mt-1 text-[#536375] text-[13px] leading-[150%];
  }

  /* ===== Follow Button ===== */
  .snsFollowBtn {
    @apply mt-4 flex h-[44px] w-full items-center justify-center rounded-lg bg-[#2D3743]
      text-white font-bold text-[15px] tracking-wide transition hover:opacity-90;
  }

  
  .snsFollowBtnOrange {
    @apply mt-4 flex h-[44px] w-full items-center justify-center rounded-lg text-white font-bold text-[15px] tracking-wide transition hover:opacity-90 bg-[linear-gradient(90deg,#F29344_0%,#E56800_100%)]
  }

  .snsFollowBtnRed{
    @apply mt-4 flex h-[44px] w-full items-center justify-center rounded-lg text-white font-bold text-[15px] tracking-wide transition hover:opacity-90 bg-[#FF3D00]

  }
  .snsFollowBtnGreen{
    @apply mt-4 flex h-[44px] w-full items-center justify-center gap-2 rounded-lg text-white font-bold text-[15px] tracking-wide transition hover:opacity-90 bg-[#00B900]

  }
    /* ページ見出し */
    .snsTitle {
      @apply text-2xl font-bold text-[#536375];
    }
  
  }
      @layer utilities {
        .shadowTeachers {
          box-shadow: 0 0 24px rgba(118, 131, 158, 0.20);
        }

      }
      

      
  /* 先生の声スライド */
  @layer components {
    /* ===== My Story slider (Teachers page only) ===== */
  
    .msTcard {
      @apply min-w-60 w-1/3 md:w-1/5 rounded-xl transition-all duration-500 ease-in-out;
      transition-property: transform, z-index, margin, opacity;
      transition-duration: 0.5s, 0.3s, 0.6s, 0.3s;
      transform-origin: center bottom;
    }
  
    /* 白背景はここだけ（ズレ防止） */
    .msTcardInner {
      @apply block bg-white rounded-xl overflow-hidden;
      transform-origin: center bottom;
      will-change: transform;
    }
    .msCardInner{
      transition: transform 650ms cubic-bezier(.22,1,.36,1);
      will-change: transform;
      transform-origin: center bottom;
    }
  
    .msTcover {
      @apply w-full h-40 object-cover rounded-t-xl;
    }
  
    .msTbody {
      @apply p-4;
    }
  
    .msTtext {
      @apply text-sm leading-relaxed text-slate-700;
    }
  
    .msTname,
    .msTdept {
      @apply text-slate-600;
    }
  
    /* ナビドット */
    .msTdot {
      @apply h-2 w-10 rounded-full bg-white/40 transition;
    }
    .msTdotActive {
      @apply bg-white;
    }
  }