@charset "utf-8";

:root {
  --cs-textcolor: #000000;
  --cs-textcolor-a: #0d6efd;
  --cs-textcolor-hover: #6610f2;
  --cs-bordercolor: #ccc; /* ボーダーのデフォルト色 */
  --cs-blue: #0066CC;
  --cs-blue-light: #4682B4;
  --cs-blue-dark: #233B6C;
  --cs-navy: #000033;
  --cs-purple: #7e67a2;
  --cs-pink: #FF6699;
  --cs-pink-light: #e6c2bf;	
  --cs-red: #b92125;
  --cs-red-light: #ffe3e5;
  --cs-red-dark: #440000;
  --cs-orange: #F7931E;
  --cs-yellow: #f4d668;
  --cs-green: #668863;
  --cs-green-light: #b6c0a8;	
  --cs-brown: #534741;
  --cs-brown-light: #d8d2c2;	
  --cs-brown-dark: #403134;
  --cs-black: #000;
  --cs-white: #fff;
  --cs-gray: rgba(153, 153, 153, 1);
  --cs-gray-light: rgba(230, 230, 230, 1);
  --cs-gray-dark: #4d4d4d; /* accessの背景 */
  --cs-color01: #cc4e63; /* ベース */
  --cs-color02: #f7e1e0; /* 薄pink */
  --cs-color03: #c10849; /* 濃いpink */
  --cs-color04: #00a6bd; /* 水色 */
  --cs-color05: #983a8e; /* 紫色 */
  --cs-color06: #d63b87; /* ピンク色 */
  --cs-color07: #e4860c; /* オレンジ色 */
  --cs-color08: #006bb4; /* 青色 */
  --cs-color09: #fff;
  --cs-color10: #fff;
  --cs-shadowcolor01: 149,157,112,; /* shadowに使用するRGB */
  --cs-shadowcolor02: 0,0,0,; /* shadowに使用するRGB */
  --cs-shadowcolor03: 255,255,255,; /* shadowに使用するRGB */
  --cs-basefont: "Hiragino Kaku Gothic ProN",メイリオ,Meiryo,"游ゴシック Medium",YuGothic-M, YuGothic,sans-serif;
  --cs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --header-bgcolor:  rgba(255,255,255,0.7); /* ヘッダー背景色 */
  --header-textcolor: #000;                 /* ヘッダーテキスト色 */
  --headermenu-bgcolor: rgba(237,28,36,1); /* ヘッダーメニュー背景色 */
  --headermenu-bgcolor-shadow: rgba(0,0,0,0); /* PCグランドメニューboxshadow色 */
  --headermenu-bgcolor-shadow-sp: rgba(0,0,0,0); /* スマホグランドメニューboxshadow色 */
  --headermenu-bgcolor-drop: #f2f2f2; /* ヘッダーメニュー背景色（ドロップダウン） */
  --headermenu-bgcolor-drop-hover: rgba(0,0,0,0.2); /* ヘッダーメニュー背景色（ドロップダウンhover） */
  --headermenu-textcolor: rgba(0,0,0,1);             /* ヘッダーメニューテキスト色 */
  --headermenu-textcolor-hover: #F7931E;    /* ヘッダーメニューテキスト色（hover） */
  --header-hbgcolor: #000;                  /* ハンバーガー棒の色 */
  --header-hbgcolor-close: #fff;            /* ハンバーガー棒の色（close） */
  --hbgmenu-bgcolor: rgba(0,0,0,0.9);       /* ハンバーガーメニュー背景色 */
  --hbgmenu-textcolor: #fff;                /* ハンバーガーメニューテキスト色 */
  --hbgmenu-bordercolor: #ccc;              /* ハンバーガーメニューボーダー色 */
  --pagetitle-bgcolor: #e8e8e8;             /* ページタイトル背景 */
  --pagetitle-bgcolor-s: #f2f2f2;             /* ページタイトル背景（ストライプにした時の色） */
  --pagetitle-textcolor: #000;              /* ページタイトルテキスト色 */
  --pagetitle-bgtextcolor: rgba(255,255,255,0.7); /* ページタイトルテキストの背景色 */
  --footer-bgcolor: #fff;               /* フッター背景色 */
  --footer-textcolor: #000;              /* フッターテキスト色 */
  --copyright-bgcolor: #cd4e63;             /* コピーライト背景色 */
  --copyright-textcolor: #fff;              /* フッターテキスト色 */
  --slick-dots: #595757;                /* スリックスライダードットの色 */
  --slick-active: #000;                 /* スリックスライダードットのアクティブ色 */
  --sns-bgcolor: #fff;               /* SNS丸ボタンの背景色 */
  --sns-iconcolor: #333;             /* SNS丸ボタンのアイコン色（ロールオーバも同じ色） */
  --sns-bordercolor: #fff;           /* SNS丸ボタンのボーダー色 */
  --sns-bordercolor-hover: #333;     /* SNS丸ボタンのロールオーバ時のボーダー色 */
  --fnav-iconcolor-pc: rgba(0,0,0,1);         /* PCの時のページトップアイコンの色 */
  --fnav-iconcolor-pc-hover: rgba(0,0,0,0.7);   /* PCの時のページトップアイコンロールオーバ時の色 */
  --fnav-iconcolor-pc-shadow: rgba(255,255,255,0.7);  /* PCの時のページトップアイコンシャドウの色 */
  --fnav-bgcolor-sp: #333;           /* スマホの時のフッターアイコンの背景色 */
  --fnav-iconcolor-sp: #fff;         /* スマホの時のフッターアイコンの色 */
  --sec-bgimg-maskcolor: rgba(0,0,0,0);     /*コンテンツの背景に画像を配置した時の背景マスクの色*/
  --img-maru-s--size: 260px;         /* 画像を円形にトリミング（画像サイズが480px以下）画像の縦幅サイズを指定 */
}

/*/////////////////////////////////////////////////////////////////////////////////////////

★★ ヘッダ固定の時のアンカー位置調整したい場合 ★★
common.jsを修正します。
PCの場合：150行目の　 headerHeight = headerHeight + 50; //ヘッダの高さ
　　　　　　　　　　　　　　　　　　　　　　　　　　↑ この数値を50から変更してください。

/////////////////////////////////////////////////////////////////////////////////////////*/

/* ページタイトル高さ調整 */
    @media print, screen and (min-width: 768px) {
      .l-pagetitle {
        height: 200px;
        }
        .l-pagetitle.l-pagetitle-L {
          height: 280px;
          }
    }
    @media (max-width: 767px) {
      .l-pagetitle {
        height: 120px;
        }
        .l-pagetitle.l-pagetitle-L {
          height: 180px;
          }
    }
        @media print, screen and (min-width: 768px) {
          [class*="l-pagetitle-photo"] > span,
          [class*="l-pagetitle-photo"] > span > img {
            height: 200px;
            }
          [class*="l-pagetitle-photo"].l-pagetitle-L > span,
          [class*="l-pagetitle-photo"].l-pagetitle-L > span > img {
            height: 280px;
            }
          .l-pagetitle-photo__sizefixed > span > img {
            object-fit: none;
            }
        }
        @media (max-width: 767px) {
          [class*="l-pagetitle-photo"] > span,
          [class*="l-pagetitle-photo"] > span > img {
            height: 120px;
            }
          [class*="l-pagetitle-photo"].l-pagetitle-L > span,
          [class*="l-pagetitle-photo"].l-pagetitle-L > span > img {
            height: 180px;
            }
          .l-pagetitle-photo__sizefixed > span > img {
            object-fit: contain;
            }
        }


/* table separate (when responsive)  */
	.tbl-separate {
		}
		@media print, screen and (min-width: 768px) {
      .tbl-separate > tr > th,
      .tbl-separate > tr > td {
        padding: 20px;
        }
		}
		@media screen and (max-width: 767px) {
      .tbl-separate > tr > th,
      .tbl-separate > tr > td {
        padding: 8px;
        }
			.tbl-separate > tr.tbl-separate__head {
				display: none;
  			}
			.tbl-separate > tr {
				display: block;
  			}
			.tbl-separate > tr:not(:last-child) {
				margin-bottom: 20px;
  			}
			.tbl-separate > tr > td {
				display: block;
				padding: 10px;
				text-align: center;
  			}
			.tbl-separate > tr > td:not(:first-child) {
				border-top: hidden;
  			}
			.tbl-separate > tr > td::before {
				content: attr(data-label);
				float: left;
				font-weight: bold;
  			}
      
      .tbl-separate__op01 {
        font-size: 110%;
        font-weight: bold;
        text-align: center!important;
        }      
      
		}


/* --------- form用（toiawase,kengaku,moushikomi) ----------- */
.l-form .l-headerbase {
	border-bottom: var(--cs-color01) solid 2px;
	}

.contact-form textarea,
.contact-form input {
	background-color: #fff!important;
	}
.contact-form input.input-w-auto {
	width: auto!important;
	}

input[type="submit"],
button {
  color: #000 !important;           /* ← 文字色を黒に */
  background-color: #eee !important; /* 必要なら背景も指定 */
  -webkit-appearance: none;         /* iOS独自のスタイルをリセット */
  appearance: none;
}

.mfp_element_submit,
.mfp_element_reset,
.mfp_element_button,
button.mfp_next,
button.mfp_prev {
  color: #000 !important;           /* ← 文字色を黒に */
  background-color: #eee !important; /* 必要なら背景も指定 */
  -webkit-appearance: none;         /* iOS独自のスタイルをリセット */
  appearance: none;
}


	@media print, screen and (min-width: 768px) {
    .l-form .l-header {
      max-width: 1000px;
      height: 80px;
      }
		.l-form .l-article {
			margin-top: 80px;
      }
    .l-form .l-modoru {
			padding-right: 10px;
      }
	}
	@media (max-width: 767px) {
    .l-form .l-header {
			display: block;
      width: 100%;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      gap: 10px;
      }		
    .l-form .l-modoru {
			padding-right: 10px;
      }
    .l-form .l-modoru > * {
			padding: 2px 5px;
			font-size: 1.3rem;
      }
		.l-form .l-article {
			margin-top: 50px;
      }
	}

/* テーブルにパーセンテージ指定
===================================================== */
.w-25per {
      width: 20%;
      }
.w-30per {
      width: 50%;
      }
@media print, screen and (min-width: 768px) {
.w-20per {
      width: 20%;
      }
.w-30per {
      width: 30%;
      }
}


._sticky {
    position: sticky;
    left: 0;
    border: none;
    }
  ._sticky:before {
    content: "";
    position: absolute;
    top: 0px;
    left: -1px;
    width: 100%;
    height: 100%;
    border-left: 1px solid var(--cs-bordercolor);
    border-right: 1px solid var(--cs-bordercolor);
    z-index: -1;
    }

  @media screen and (max-width : 860px){
    .tbl-scroll:after {
      content: "scroll >>>";
      font-size: 80%;
      font-weight: 800;
      position: relative;
      position: -webkit-sticky;
      position: sticky;
      left: 0;
      animation: yokoSC 1.5s ease-in-out infinite alternate;
      }
  }

 .tbl-scroll > table th.w-25per {
	 width: 25%;
    }
    @media (max-width: 767px) {
      .tbl-scroll > table th.w-25per {
        padding: 10px 5px;
		  width: 25%;
        }
    }

/* PCサイズ（画面幅768px以上）では非表示にする */
.sp-only {
  display: none;
}

/* スマホサイズ（画面幅767px以下）でのみ表示させる */
@media screen and (max-width: 767px) {
  .sp-only {
    display: block; /* または inline-block, flex など */
  }
}

/* 進学先・就学先一覧
===================================================== */
	@media print, screen and (min-width: 768px) {
		.w-nen {
      width: 20%;
      }
	}
	@media screen and (max-width: 767px) {
		.p-tbl-post-g th { font-size: 1.3rem; }
		.w-nen {
      width: 15%;
      }
		}

.c-icontext-1 {
	    gap: 10px 20px;
		}