@import "tailwindcss";


@theme {

  /* renewalのbreakpoint設定 */
  --breakpoint-bp480: 480px;
  --breakpoint-navi: 960px;
  --breakpoint-bp1200: 1200px;

   /* Blue */
  --color-blue-25:  #F0F8FD;
  --color-blue-50:  #E4F1FB;
  --color-blue-75:  #CDE4F7;
  --color-blue-100: #B5D7F3;
  --color-blue-150: #9DC9EF;
  --color-blue-200: #86BAEB;
  --color-blue-300: #6FABE6;
  --color-blue-400: #589CE1;
  --color-blue-500: #428BDC;
  --color-blue-600: #2B7BD7;
  --color-blue-700: #156AD1;
  --color-blue-800: #1654AF;
  --color-blue-900: #15418E;
  --color-blue-950: #13306E;

  /* Orange */
  --color-orange-25:  #FFF4F0;
  --color-orange-50:  #FFEAE3;
  --color-orange-75:  #FFD9CA;
  --color-orange-100: #FFC8B1;
  --color-orange-150: #FFB898;
  --color-orange-200: #FFA87E;
  --color-orange-300: #FF9A65;
  --color-orange-400: #FF8C4C;
  --color-orange-500: #FF7F33;
  --color-orange-600: #FF7319;
  --color-orange-700: #FF6700;
  --color-orange-800: #D56205;
  --color-orange-900: #AC5908;
  --color-orange-950: #854C0A;

  /* Neutral */
  --color-neutral-25:  #F4F6F8;
  --color-neutral-50:  #EAEEF3;
  --color-neutral-75:  #D8DEE7;
  --color-neutral-100: #C6CEDB;
  --color-neutral-150: #B4BFCF;
  --color-neutral-200: #A3AFC2;
  --color-neutral-300: #92A0B5;
  --color-neutral-400: #8290A7;
  --color-neutral-500: #728199;
  --color-neutral-600: #62728B;
  --color-neutral-700: #53637C;
  --color-neutral-800: #485369;
  --color-neutral-900: #3C4456;
  --color-neutral-950: #303544;

  /* y軸のずれのない、0，0のシャドウ */
  --shadow-center-4: 0 0 4px 0 rgba(19, 48, 84, 0.07);
  --shadow-center-8: 0 0 8px 0 rgba(19, 48, 84, 0.07);
  --shadow-center-12: 0 0 12px 0 rgba(19, 48, 84, 0.07);
  --shadow-center-16: 0 0 16px 0 rgba(19, 48, 84, 0.07);
  --shadow-center-20: 0 0 20px 0 rgba(19, 48, 84, 0.07);

  /* gradient colors */
  /* 使い方例：bg-[image:var(--gradeBlueLiner)] */
  --gradeBlueLiner: linear-gradient(to right in srgb, #156AD1, #01A0D5);
  --gradeGreenLiner: linear-gradient(to right in srgb, #1EA702, #5ED23B);
  --gradeOrangeLiner: linear-gradient(to right in srgb, #FD6100, #F9A600);
  --gradeBlueLiner-rev: linear-gradient(to left in srgb, #156AD1, #01A0D5);
  --gradeBlueLiner-myStory: linear-gradient(to right in srgb, #33C6F5, #428BDC);
  --btnGradeBlueLiner: linear-gradient(to right in srgb, #01A0D5, #156AD1);
  --btnGradeOrangeLiner: linear-gradient(to right in srgb, #F29344, #E56800);

  /* 超ミニマムフォント指定 */
  /* --font-sans: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', Meiryo, sans-serif; */

  /* 現行のフォント指定 */
  --font-sans: "BIZ UDPゴシック","BIZ UDPGothic",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;

}


@media print{
  *{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
}


@layer base{

  html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  body {
    @apply text-neutral-900;
    /* 現行のフォント指定 */
    font-family: 'BIZ UDPゴシック', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans JP', sans-serif;

    /* 超ミニマムフォント指定 */
    /* font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
      Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; */
  }

  select:focus,
  textarea:focus {
    @apply outline-none duration-150 ring-2 ring-blue-600;
  }

  input:focus {
    @apply outline-none;
  }

  a.linkLine, a .linkLine{
    @apply text-blue-700 hover:text-blue-800 hover:underline hover:underline-offset-2;
  }

  /* テキスト */
  .inputText{
    @apply text-gray-900 leading-[150%];
  }
  .txt15{
    @apply text-neutral-600 text-[15px] leading-[150%];
  }
  .txt13{
    @apply  text-neutral-600 text-[13px] leading-[150%];
  }
  .txt11{
    @apply  text-neutral-600 text-[11px] leading-[150%];
  }

  /* レスポンシブ左右余白統一 */
  .pageXMargin{
    @apply m-3 sm:mx-6 navi:ml-10 navi:mr-6 xl:mx-20;
  }

  /* 見出しコピーに背景あり */
  .bgColoredLabel{
    @apply text-xl font-bold px-3.5 py-1.5 text-white;
  }

  .bgWhiteLabel{
    @apply text-xl px-3.5 py-0.5 font-bold bg-white text-neutral-700;
  }

  /* チェックボックス */
  input[type="checkbox"].checkBoxBlue {
    @apply rounded border-2 border-neutral-200 p-1;
  }

  input[type="checkbox"]:checked.checkBoxBlue {
    @apply accent-blue-700/100 text-white rounded border-2 p-1;
  }

  /* トップに戻るボタン */
  button p.pageTop a {
    @apply relative block w-[calc(20px*2)] aspect-square bg-blue-150 !border-b-0 rounded-full text-transparent transition-all duration-250 ease-out
    before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:w-[10px] before:aspect-square before:border-t-[3px] before:border-t-white before:border-r-[3px] before:border-r-white before:-translate-x-1/2 before:-translate-y-[2px] before:rotate-[-45deg];
  }

  /*-------------- form,input系 ----------------*/
  .formBorder{
    @apply border border-neutral-100 rounded-md transition-colors duration-200 ease-in-out focus:border-blue-500 focus:ring-2 focus:ring-blue-150;
  }
  /* バリデーションエラー */
  .errorVerification{
    @apply text-red-500 text-sm font-bold text-center;
  }
  form .hasError input[type="text"],
  form .hasError input[type="password"],
  form .hasError textarea,
  form .hasError .selectBox select{
    @apply border border-red-400 transition-colors duration-200 ease-in-out focus:border-red-500;
  }
  .errorTitle {
    @apply transition-opacity duration-200;
  }
  .errorTitle.is-hidden {
    opacity: 0;
    visibility: hidden;
  }
  .errorText {
    @apply text-red-500 text-xs mt-0 md:mt-0.5 ml-1 transition-opacity duration-200;
  }
  .errorText.is-hidden {
    opacity: 0;
    visibility: hidden;
  }

  /* 必須ラベル */
  .labelRequired{
    @apply border border-orange-700 rounded px-1.5 py-0.5 mx-3 bg-white text-[11px] font-bold text-orange-700 leading-none tracking-wide size-max;
  }
  /* 任意ラベル */
  .labelOptional{
    @apply border border-neutral-700 rounded px-1.5 py-0.5 mx-3 bg-white text-[11px] text-neutral-700 leading-none tracking-wide size-max;
  }
  /* input入力済み背景(ブラウザ依存を調整) */
  input:-webkit-autofill {
    /* background-colorでは変わらないため、box-shadowを指定。 */
    box-shadow: 0 0 0 1000px #fff inset !important; 
    -webkit-text-fill-color: #485369 !important;
  }
  /* 自動補完後のカーソルが黒になるので、合わせて変更。 */
  input:-webkit-autofill:focus {
    caret-color: #485369 !important;
  }


  /* 規約 */
  .txtTerms{
    @apply  text-neutral-800 text-[11px] leading-[140%];
  }
  .txtTerms h2{
    @apply text-sm font-bold leading-10;
  }
  .txtTerms h3{
    @apply text-xs font-bold leading-8;
  }
  .txtTerms p{
    @apply pb-5;
  }


  /* 読み込み中スケルトンの調整 */
  @keyframes smooth-pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.45; /* デフォルトの0.5より濃淡を大きく */
    }
  }
  .animate-smooth-pulse {
    animation: smooth-pulse 1.5s ease-in-out infinite;
  }

}




@layer components {

  .mainContainer{
    @apply flex flex-col w-full navi:w-[75%];
  }



  /*　****** btns ******　*/

  .btnRoundFull{
    @apply flex items-center justify-center rounded-full;
  }
  .btnRoundXl{
    @apply flex items-center justify-center rounded-xl;
  }
  .btnLinedNeutral{
    @apply border duration-150 border-neutral-700 px-5 py-3 text-neutral-700 hover:bg-neutral-700 hover:text-white;
  }
  .btnBlueGrade{
    @apply bg-[image:var(--btnGradeBlueLiner)] flex items-center justify-center rounded-lg text-white hover:opacity-85 transition-opacity duration-150;
  }
  .btnOrangeGrade{
    @apply bg-[image:var(--btnGradeOrangeLiner)] flex items-center justify-center rounded-lg text-white hover:opacity-85;
  }
  .btnGradeDisable{
    @apply bg-neutral-75 flex items-center justify-center rounded-lg text-white hover:opacity-100;
  }
  .btnPrimary{
    @apply px-4 py-3 text-white rounded-lg bg-blue-700 border border-blue-700 hover:bg-blue-800 hover:border-blue-800 cursor-pointer;
  }
  .btnPrimaryIcon {
    @apply flex items-center justify-center px-5 py-3 rounded-lg duration-150 bg-blue-700 border-blue-700 text-center font-medium hover:bg-blue-800 hover:border-blue-800 text-white cursor-pointer;
  }
  .btnLinePrimaryIcon {
    @apply flex items-center justify-center my-4 px-5 py-3 rounded-lg border duration-150 border-blue-700 bg-white text-center text-sm font-medium text-blue-700 hover:bg-blue-700 hover:text-white cursor-pointer;
  }
  .btnSecondaryIcon {
    @apply flex items-center justify-center px-5 py-3 rounded-lg duration-150 bg-neutral-700 border-neutral-700 text-center font-medium hover:bg-neutral-800 hover:border-neutral-800 text-white cursor-pointer;
  }
  .btnLineSecondary {
    @apply relative rounded-lg text-sm font-medium duration-150 px-5 py-3
    border border-neutral-100 bg-white text-neutral-700 hover:bg-neutral-50 cursor-pointer;
  }

  /* header ボタン */
  .headerMenu{
    @apply flex items-center space-x-1 px-1 md:px-1.5 xl:px-3 py-3 text-[13px] font-bold text-gray-700 hover:text-blue-700 transition-colors duration-150;
  }

  /* header SP　ボタン */
  button.headerMenuSP{
    @apply flex items-center space-x-2 px-1.5 py-3 text-base font-bold text-white hover:text-blue-300 transition-colors duration-150 md:px-2;
  }

  /* login:display: ;初期状態 */
  .cmnMenuIn  { display: block; }
  .cmnMenuMy, body:not(.loggedIn) .cmnMenuMy  { display: none; }
  /* login:after：body に loggedIn が付いた時 */
  body.loggedIn .cmnMenuIn { display: none; }
  body.loggedIn .cmnMenuMy { display: block; }

  /* 手動スライドbtn　ベース */
  .btnManualCircle_10{
    @apply h-10 w-10 items-center justify-center rounded-full;
  }
  .slider-manualBtn{
    @apply absolute bottom-[50%] translate-y-[50%];
  }
  /* 横ドラッグをJSに委ねるためのクラス */
  .slidePanAction{
    @apply touch-pan-y;
  }

  /* タグ型のラジオボタン (サイドメニュー等)*/
  .radioBtnLineSecondaryRounded {
    @apply relative rounded-full text-[13px] font-medium duration-150 px-3.5 py-2
    border border-neutral-100 bg-white text-neutral-700 hover:bg-neutral-50 
    focus:z-10 focus:bg-blue-50 focus:text-blue-700 focus:border-blue-700
    peer-checked:bg-blue-50 peer-checked:text-blue-700 peer-checked:border-blue-700
    select-none cursor-pointer;
  }

  /* My Storyスライダのボタン */
  .btnMsBar{
    @apply w-8 h-1.5 rounded-full bg-neutral-100 transition-transform duration-300 cursor-pointer;
  }
  .btnMsBar.active{
    @apply bg-[image:var(--gradeBlueLiner-rev)];
  }


   /* カード　テキスト */
   /* タイトル系 */
  .cardTtlxlNeutral{
    @apply font-black text-xl flex items-center space-x-2 w-full py-4 text-neutral-800;
  }
  .cardTtlSm{
    @apply my-2.5 text-sm font-bold text-neutral-900;
  }
  .cardTtlBase{
    @apply my-2.5 text-base font-bold text-neutral-900;
  }
  .cardTtlLg{
    @apply my-2.5 text-lg font-bold text-neutral-900;
  }
  .cardTtlXl{
    @apply my-3 text-xl font-bold text-neutral-900;
  }
  .cardTtl2xl{
    @apply my-3 text-2xl font-bold text-neutral-900;
  }
  /* 本文系 */
  .cardTextXs{
    @apply mb-3 text-xs font-normal text-neutral-700;
  }
  .cardTextSm{
    @apply mb-3 text-sm font-normal text-neutral-700;
  }
  .cardTextBase{
    @apply mb-3 text-base font-normal text-neutral-700;
  }


  /* シャドウ */
  .shadowCenter_blue_10_2 {
    @apply shadow-[0_0_10px_rgba(var(--color-blue-700),_0.2)];
  }


  /* バッジ */
  .badge{
      @apply absolute flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-xs font-bold text-white;
  }


  /* hover挙動 */
  .hoverBlue{
    @apply hover:text-blue-700 duration-150;
  }
  .hoverBgNeutral{
    @apply bg-white hover:bg-neutral-50 duration-150;
  }
  .groupHoverBlue{
    @apply group-hover:text-blue-700 duration-150;
  }


  /* タグ表示 */
  .btnLineSecondary_tags {
    @apply text-sm font-medium text-neutral-700 border border-neutral-300 bg-transparent;
  }
  .tagLineNeutralRounded{
    @apply flex items-center justify-center px-3.5 py-1 rounded-full border border-neutral-150 bg-white text-xs text-neutral-500;
  }
  .tagLineNeutralRounded-11{
    @apply flex items-center justify-center px-2.5 py-1 rounded-full border border-neutral-150 bg-white text-[11px] flex-nowrap text-neutral-500;
  }
  .tagLineRounded{
    @apply flex items-center justify-center px-3.5 py-1 rounded-full border bg-white text-xs;
  }


  /* ステッパー （web希望調査など）*/
  .stepper {
    counter-reset: step;
  }
  .step {
    counter-increment: step;
  }
  .step-num::before {
    content: counter(step);
  }
  /* 通常 */
  .step-num {
    @apply bg-white text-gray-700;
  }
  /* 現在地 */
  .step.is-current .step-num {
    @apply bg-blue-700 text-white;
  }


  /* 定義リスト（奨学金・入試情報など） */
  .descriptionList{
    @apply space-y-4 md:space-y-0 text-[15px];
  }
  .descriptionWrap{
    @apply flex flex-col md:flex-row border-b border-neutral-75 gap-1 py-3 md:py-0 mb-0;
  }
  .descriptionWrapNoLine{
    @apply flex flex-col md:flex-row gap-1 py-3 md:py-0 mb-0;
  }
  .descriptionTerm{
    @apply px-5 md:py-3 font-bold text-blue-700;
  }
  .descriptionDescription{
    @apply px-5 md:py-3 text-sm leading-6 text-neutral-700;
  }


  /* パンフを受け取る */
  /* ======== okiniiri tsuika shiryou box tsuika popup start ================*/
.popupBox {
    @apply fixed inset-0 z-20 grid place-content-center bg-[#333]/80 p-4 opacity-0 pointer-events-none transition-all duration-150 ease-linear;

    &.show {
      @apply opacity-100 pointer-events-auto;
    }
  }

  :has(.popupBox.show) body {
    @apply overflow-hidden;
  }

  .popupInner {
    @apply mx-auto grid w-[min(calc(100vw-32px),800px)] max-h-[calc(100vh-32px-4.5rem)] grid-cols-[100%] overflow-x-hidden overflow-y-auto rounded-[16px] bg-white pt-4 scroll-smooth;

    &::-webkit-scrollbar { @apply w-[18px]; }
    &::-webkit-scrollbar-track {
      margin: 0 16px;
      @apply bg-[#ccc] border-[4px] border-solid border-[rgb(var(--naviUsuGray))] rounded-[18px];
    }
    &::-webkit-scrollbar-thumb {
      @apply bg-white border-[2px] border-solid border-[rgb(var(--naviBlue))] rounded-[18px] shadow-[2px_0_2px_0_rgba(0,0,0,0.25)] bg-clip-padding;
    }
  }

  .closeBtnWhite {
    @apply relative mx-auto h-10 w-full max-w-[900px] cursor-pointer;
    &::before, &::after {
      @apply content-[''] absolute top-5 right-0 h-1 w-8 bg-white rounded-sm;
    }
    &::before { @apply rotate-45; }
    &::after { @apply -rotate-45; }
  }

.pumphAddToggle{
  @apply relative flex items-center cursor-pointer before:content-[''] 
  before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0 before:w-[2.8rem] before:h-[2.8rem] before:bg-white before:border-2 before:border-blue-700 before:rounded-full before:transition-all before:duration-150 
  after:content-[''] after:absolute after:top-1/2 after:-translate-y-1/2 after:left-[0.4rem] after:w-[2rem] after:aspect-[1/0.7] after:[mask-image:url('../image/common/svg/icon_checkSelectWhite.svg')] after:[mask-size:contain] after:[mask-repeat:no-repeat] after:bg-white after:scale-0 after:transition-transform after:duration-100 after:delay-100 
  peer-checked:before:bg-blue-700 peer-checked:before:border-blue-700 peer-checked:after:scale-100 peer-disabled:before:bg-gray-300 peer-disabled:before:border-gray-300;
}

.itemCardLeft::before{
  @apply bg-white top-1/2 left-0 border border-blue-700 rounded-full w-8 h-8 transition-all ease-linear;
}

.addPopup .addLink input[type="submit"] {
  display: none;
}

.favoriteAddToast{
  @apply pointer-events-none absolute top-1/2 left-1/2 z-50 w-[min(80%,500px)] -translate-x-1/2 -translate-y-1/2 rounded-[8px] bg-blue-700/80 p-[15px] text-center text-lg font-bold leading-[1.2] text-white opacity-0;
}
.fuwatto{
  @apply opacity-100 transition-opacity duration-350 ease-in-out;
}




  /*　****** header SP用ハンバーガーメニュー ******　*/
  /* メニュー全体 */
  .nav-overlay__list li {
    @apply transform translate-y-3 opacity-0 transition-all duration-400 justify-items-center delay-30;
  }
  .nav-overlay__list li.show {
    @apply opacity-100 translate-y-0;
  }
  /* 各リンク共通スタイル */
  .nav-overlay__link {
    @apply text-2xl text-white hover:text-blue-400 transition-colors;
  }


  /*　****** Side Navi ******　*/

  .sideMenu{
    @apply hidden navi:flex navi:flex-col w-full navi:w-[25%] pr-4 xl:pr-10 2xl:pr-20 space-y-8 bg-transparent;
  }
  .labelBase{
    @apply mb-1.5 block text-sm font-medium text-neutral-500;
  }
  .selectBase {
    @apply appearance-none relative mb-4 block w-full rounded-lg border border-neutral-100 bg-white p-3 text-sm text-neutral-700;
  }
  .selectBase.is-selected {
    @apply text-blue-700;
  }
  .select-arrow {
    @apply pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-blue-600 transition-transform duration-300 group-focus-within:rotate-180;
  }
  .inputBase{
    @apply flex w-full rounded-lg border border-neutral-100 bg-white p-3 text-sm text-neutral-700 placeholder:text-neutral-150 focus:ring-2 ring-blue-700;
  }
  .searchHitValue{
    @apply text-xs ml-1
  }


  /*　****** side navi/TOP メインエリア共通 ******　*/

  /* Pick Upカード */
  .pickUpList{
    @apply w-45 self-stretch bg-white border border-gray-200 rounded-md shadow-neutral-75;
  }
  .tagPickUpBlue{
    @apply bg-blue-50 text-blue-800 text-[11px] font-medium me-2 px-2 py-0.5 rounded-sm border border-blue-400;
  }
  .tagPickUpGray{
    @apply bg-neutral-25 text-neutral-800 text-[11px] font-medium me-2 px-2 py-0.5 rounded-sm border border-neutral-500;
  }
  /* sp modal用Pick Upカード */
  .modalPickUpList{
    @apply self-stretch;
  }
  /* TOPのPickUp横スライダ利用し縦表示（右サイドmenu＆SPモーダルmenu） */
  .adLinks>.chotto>ul{
    @apply flex-col;
  }



  /*　****** TOP メインエリア ******　*/

  /* Find Fit / Find Skill */
  .findTabBtn{
    @apply flex items-center justify-center py-4 pl-4 pr-5 md:pl-8 md:pr-10 md:py-3 rounded-t-lg border-b-2 border-neutral-75 float-left text-center text-neutral-600 font-bold bg-white transition-all duration-200 cursor-pointer hover:opacity-75;
  }
  .findTabContent{
    @apply p-6 md:p-8 clear-both rounded-b-lg rounded-tr-lg bg-white hidden text-gray-700;
  }
  .findTabContentBtn{
    @apply hidden pt-4;
  }
  /* ...NoBg （進路希望調査の完了画面など） */
  .findTabBtnNoBg{
    @apply flex items-center justify-center py-3 pl-4 pr-5 md:pl-6 md:pr-8 mb-2 mr-3 rounded-full float-left text-center text-neutral-600 font-bold bg-white transition-all duration-200 cursor-pointer shadow hover:opacity-75;
  }
  .findTabContentNoBg{
    @apply clear-both rounded-b-lg rounded-tr-lg hidden text-gray-700;
  }

  .categoryImgCardWrap{
    @apply flex flex-wrap gap-3 md:gap-4 max-w-6xl mx-auto;
  }
  .categoryImgCardTop{
    @apply relative overflow-hidden rounded-lg basis-[calc(50%-0.375rem)] md:basis-[calc(32.75%-0.5rem)];
  }
  .categoryImgCardBottom{
    @apply relative overflow-hidden rounded-lg basis-[calc(50%-0.375rem)] md:basis-[calc(24.22%-0.5rem)];
  }
  .categoryImgCardImage{
    @apply w-full h-26 object-cover transition-transform duration-500 ease-out;
  }


  /* My Story slider */
  .myStorySlideCardList{
    @apply box-border min-w-60 bg-white 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;
  }
  .myStorySlideCardList a{
    @apply flex flex-col h-full overflow-hidden transition-all duration-600 ease-in-out;
    transition-property: transform, margin;
    transform-origin: center bottom;
  }
  .myStorySlideCardText{
    @apply p-4;
    transform: scale(1) !important;
    transform-origin: center top;
  }


  /* Shinro TV （動画PICKUP） */
  li.shinroTVCategoryCard{
    @apply min-w-52 duration-300 ease-out hover:opacity-70 md:basis-[calc(49.2%-0.375rem)] xl:basis-[calc(32.2%-0.375rem)] rounded-xl overflow-hidden;
  }



  /*　****** 学校：共通 ******　*/

  /* タブ風ページリンクボタン */
  .detailInfoTabBtn{
    @apply min-w-[calc(50%-0.5px)] md:flex-1 md:min-w-0 border-neutral-75 border-0 bg-white cursor-pointer transition-colors;
  }
  .detailInfoTabBtn a, .detailInfoTabBtn span.inner {
    @apply flex items-center justify-center py-4 px-2 text-neutral-500;
  }
  .detailInfoTabBtn a {
    @apply hover:bg-blue-25 hover:text-neutral-700;
  }
  /* タブ選択時 */
  .detailInfoTabBtn.on a{
    @apply bg-blue-100 text-blue-700 font-bold;
  }
  /* ページ情報がない場合のdisable */
  .detailInfoTabBtn.off{
    @apply bg-gray-300 pointer-events-none;
  }
  .detailInfoTabBtn.off span{
    @apply text-white;
  }

  /* ドロップダウン */
  .js-dropdown dl {
    @apply grid overflow-hidden max-h-0 opacity-0 transition-[max-height,opacity] duration-400 ease-in-out;
  }
  .js-dropdown-listBtn.is-open + dl {
    @apply max-h-[3000px] opacity-100;
  }
  .js-dropdown-listBtn {
    @apply relative border-b border-transparent transition-colors duration-200;
  }
  .js-dropdown-listBtn.is-open {
    @apply pb-3 border-b border-neutral-75;
  }
  .dropdownArrow{
    @apply pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-blue-600 transition-transform duration-300;
  }
  .js-dropdown-listBtn.is-open .dropdownArrow {
    @apply rotate-180 top-[calc(50%-6px)];
    /* -6pxはjs-dropdown-listBtn.is-openのpb-3の半分の数値 */
  }


  /*　****** 学校TOP（概要） ******　*/

  /* 学校トップスライダー専用 */
  .newSchool .swiper {
    @apply relative overflow-hidden w-full h-full;
  }
  .newSchool .swiper-wrapper {
    @apply flex h-full box-content;
    transition-property: transform;
  }
  .newSchool .swiper-slide {
    @apply h-full shrink-0 flex justify-center items-center;
  }
  .newSchool .swiper-pagination {
    @apply flex gap-3 my-6 md:my-3;
  }
  .newSchool .swiper-pagination-bullet {
    @apply w-14 md:w-8 h-1 rounded-full bg-blue-200 opacity-40;
  }
  .newSchool .swiper-pagination-bullet-active {
    @apply bg-[image:var(--gradeBlueLiner)] opacity-100;
  }
  .newSchool .scPhotos.noslide .swiper-pagination {
    @apply hidden;
  }
  .newSchool .scPhotos li.swiper-slide img{
    @apply object-cover;
  }

  /* お気に入りボタンの「送信」非表示 */
    .newSchool .saveSchoolBtn input[type=submit] {
      display: none;
  }

  /* 先輩 / 先生の声 */
  .voicesSeniorsTeachersCardList{
    @apply box-border min-w-60 bg-white 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;
  }
  .voicesSeniorsTeachersCardList a{
    @apply flex flex-col h-full overflow-hidden transition-all duration-600 ease-in-out;
    transition-property: transform, margin;
    transform-origin: center bottom;
  }
  .voicesSeniorsTeachersCardList a:hover figure img {
    @apply scale-110;
  }
  .voicesSeniorsTeachersCardList figure img {
    @apply transition-transform duration-500 ease-in-out origin-center;
  }

  /* フッタスライドカード */
  .scThmbList .footerSildeCards{
    @apply py-2 pl-3 pr-1 text-[11px] font-bold w-full xl:w-1/2 border bg-white;
  }

  /* btn:オープンキャンパス予約 */
  .scBtns .opBtn {
    @apply flex items-center justify-center bg-gray-300 text-white rounded-lg cursor-default;
  }
  .scBtns .opBtn:has(a) {
    @apply flex items-center justify-center bg-[image:var(--btnGradeOrangeLiner)] hover:opacity-85;
  }



  /*　****** 学校TOP（学部・学科） ******　*/

  /* 学部ボタン（ドロップダウン） */
  .js-facultyItem .js-facultyWrap{
    @apply bg-white;
  }
  .js-facultyItem .js-facultyIcon{
    @apply bg-blue-100;
  }
  .facultyMainName{
    @apply text-sm text-neutral-600;
  }
  .js-facultyItem.is-on .js-facultyWrap{
    @apply border-b border-neutral-50 transition duration-150; /* ★border-bを追加 */
  }
  .js-facultyItem.is-on .js-facultyIcon{
    @apply bg-blue-700 transition duration-150;
  }
  .js-facultyItem.is-on .facultyMainName{
    @apply text-neutral-800;
  }
  .js-facultyItem.is-on .dropdownArrow{
    @apply rotate-180 transition-transform duration-300;
  }
  .js-subjectDropdown {
    @apply overflow-hidden max-h-0 opacity-0 -translate-y-1 transition-all duration-300 ease-in-out;
  }
  .js-subjectDropdown.is-open {
    @apply max-h-[800px] opacity-100 translate-y-0;
  }

  /* Claude */
  /* ドロップダウンの開閉アニメーション */
  .js-subjectDropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .js-subjectDropdown.is-open {
    max-height: 500px; /* 適宜調整 */
  }
  /* 選択エリアのフェードイン */
  #selectedSubjectArea {
    animation: fadeIn 0.3s ease;
  }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }


  /* 　******* 進路希望調査 *******　 */

  .studentMainWrap{
    @apply flex py-8 md:py-12 px-4 bp480:px-6 md:px-10;
  }
  .studentWrap{
    @apply flex flex-wrap items-center justify-center mx-auto md:max-w-[680px];
  }
  .studentContents{
    @apply flex flex-col w-full px-2;
  }
  .cardUpsideImg_hover{
    @apply w-full h-34 md:h-40 object-cover transition-transform duration-500 ease-out;
  }
  /* 全カテゴリ非表示 */
  .studentCategory > li {
    @apply hidden;
  }
  .studentCategory > li.is-active {
    @apply block;
  }
  /* 対応タブがcheckedのときだけ表示 */
  #tabStudentQuestion-1:checked ~ .studentCards .category-1,
  #tabStudentQuestion-2:checked ~ .studentCards .category-2,
  #tabStudentQuestion-3:checked ~ .studentCards .category-3,
  #tabStudentQuestion-4:checked ~ .studentCards .category-4,
  #tabStudentQuestion-5:checked ~ .studentCards .category-5 {
    @apply block transition-all duration-200 ease-out;
  }
  /* ラジオボタン（希望分野選択など） */
  .checkList input[type="radio"].radioBtn {
    @apply appearance-none h-4 w-4 shrink-0 rounded-full border-2 border-neutral-150 bg-white relative cursor-pointer;
  }
  .checkList input[type="radio"].radioBtn::after {
    content: '';
    @apply absolute inset-0 rounded-full bg-white;
  }
  .checkList input[type="radio"].radioBtn:checked {
    @apply border-4 border-transparent bg-blue-700 bg-[length:100%_100%] bg-center bg-no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23fff%22 d=%22M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9 2 12t.788-3.9 2.137-3.175T8.1 2.788 12 2t3.9.788 3.175 2.137T21.213 8.1 22 12t-.788 3.9-2.137 3.175-3.175 2.138T12 22%22/%3E%3C/svg%3E");
  }
  .checkList input[type="radio"].radioBtn:checked::before {
    @apply absolute inset-1 rounded-full bg-blue-600;
  }
  .checkList input[type="radio"].radioBtn:disabled {
    @apply border-4 border-blue-150 cursor-not-allowed;
  }
  .checkList input[type="radio"].radioBtn:disabled + label {
    @apply text-neutral-200;
  }

  .studentCategoryArea {
    @apply flex flex-col w-full pt-2 pb-5 px-5 sm:pt-5 sm:pb-8 sm:px-8 bg-white md:gap-2 transition-all duration-200 ease-out;
  }
  /* 希望分野～系 ドロップダウン矢印 */
  .slideButton.on .slideArrow {
    @apply rotate-180;
  }

  /* 確認画面 */
  .confirmList{
    @apply grid grid-cols-[120px_1fr] md:grid-cols-[180px_1fr] gap-y-3 border-b border-neutral-50 py-4;
  }
  .confirmListLabel{
    @apply md:pl-4 text-[15px] text-blue-700 font-bold;
  }
.is-active {
    background: #f5f5f5;
  }




  /*　******* 点在する共通箇所 *******　*/

  /* 背景画像がhoverで拡大する（groupクラスとセット利用） */
  .bgImgHoverLarged{
    @apply w-full object-cover transition-transform duration-500 ease-out group-hover:scale-110;
  }
  /* 画像上の透過グレー → Hoverで消失（groupクラスとセット利用） */
  .grayCoverEffect{
    @apply absolute inset-0 bg-black/40 flex items-end justify-center transition-opacity duration-500 ease-out group-hover:opacity-0;
  }
  /* 画像上の透過グレー（下部のみ）  */
  .grayCoverBottomEffect{
    @apply absolute inset-0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 70%);
  }
  /* テキストにグラデーションカラー */
  .textGradation{
    @apply font-bold bg-linear-to-r/srgb 
    from-[#766EE8] via-[#EC4CB1] to-[#F19642] 
    text-transparent bg-clip-text;
  }
  .textGradationBlue{
    @apply font-bold bg-linear-to-r/srgb 
    from-[#01A0D5] to-[#156AD1] 
    text-transparent bg-clip-text;
  }

}