@charset "utf-8";

/* ==========================================================================
   Under Page Layout: 下層ページ共通レイアウト
   ========================================================================== */

/* メインコンテンツエリア：SPファースト・Fluid設計 */
.l-under-content {
    width: 100%;
        padding: 2rem 1.25rem; 
    box-sizing: border-box;
}
.is-bg-grey {
  background-color: var(--color-site-bg);
  padding: 4rem 1.25rem 2rem; 
}
.l-under-content.is-bg-grey + .l-under-content {
  padding: 4rem 1.25rem 2rem; 
}
.l-under-content .l-container,
.l-under-content .l-anchor-container {
  padding: 0;
}

@media (min-width: 960px) {
    .l-under-content {
        /* max-widthを使わず、大きなpaddingで中央寄せを表現 */
        padding: 2rem 1.25rem; 
    }
  .is-bg-grey {
    padding: 4rem 1.25rem 2rem; 
  }
}

/* 汎用セクション間隔 */
.p-under-section {
    margin-bottom: var(--space-md);
}
.p-under-section[id^="anchor"] {
  position: relative;
  padding-top: 3.5rem;
  margin-top: -3.5rem;
}

@media (min-width: 769px) {
    .p-under-section {
        margin-bottom: var(--space-lg);
    }
  .p-under-section[id^="anchor"] {
    padding-top: 5rem;
    margin-top: -5rem;
  }
}

/* ==========================================================================
   p-under-visual (ページタイトル)
   ========================================================================== */

/* タイトルエリア全体のコンテナ */
.p-under-visual {
  width: 100%;
  overflow: hidden; /* 右側に伸ばした背景がはみ出して横スクロールが出るのを防ぐ */
  background-color:  rgba(var(--color-primary-bg), 0.1);
}

/* 1280px幅の制御用コンテナ */
.p-under-visual .l-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px; /* 左右の最低限の余白 */
  position: relative;
}

/* 背景色が付くコンテンツ部分 */
.p-under-visual__content {
  padding: 0 0 0 2rem;
  border-bottom-left-radius: 2rem; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 8rem;
  
  /* --- 右端まで背景を伸ばすための設定 --- */
  position: relative;
}
@media (min-width: 769px) {
  .p-under-visual__content {
    border-bottom-left-radius: 60px; 
    padding: 0 5.75rem;
    height: 13rem;
  }
}
/* 疑似要素を使って右側だけを画面外まで塗りつぶす */
.p-under-visual__content::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;       /* コンテンツの右端から開始 */
  width: 100vw;     /* 画面幅分だけ右に伸ばす */
  height: 100%;
}

/* 英語サブタイトル */
.p-under-visual__sub {
  position: relative; /* 背景より上に表示させるため */
  z-index: 1;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  font-size: 1.25rem;
  color: var(--color-primary);
  font-weight: 500;
  margin: 0;
  line-height: 1.2;
}

/* 日本語メインタイトル */
.p-under-visual__title {
  position: relative; /* 背景より上に表示させるため */
  z-index: 1;
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  margin: 0;
  line-height: 1.2;
}
@media (min-width: 769px) {
  .p-under-visual__sub {
    font-size: 1.5rem;
  }
  .p-under-visual__title {
    font-size: 2.5rem;
  }
  
}

/* ==========================================================================
   Component: c-breadcrumb (パンくずリスト・横スクロール対応)
   ========================================================================== */
.c-breadcrumb {
    background-color: var(--color-white);
}

.c-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    /*overflow-x: auto;
    -webkit-overflow-scrolling: touch;*/
    padding: 12px 0;
    list-style: none;
    white-space: nowrap;
  margin: 0;
}

.c-breadcrumb__list::-webkit-scrollbar { display: none; }

.c-breadcrumb__item {
    font-size: 0.88rem;
    display: flex;
    align-items: center;
}

.c-breadcrumb__item + .c-breadcrumb__item::before {
    content: ">";
    margin: 0 8px;
}

.c-breadcrumb__item[aria-current="page"] {
}

@media (min-width: 769px) {
  .c-breadcrumb__list {
    padding: 15px 0;
    overflow: visible;
  }
  .c-breadcrumb__item {
    font-size: 1rem;
  }
}

/* ==========================================================================
   ブロック内共通規格
   ========================================================================== */
.l-under-content p {
  margin: 0 0 2rem;
}
.p-under-image,
.p-under-image__column {
  margin: 0;
  text-align: center;
}
.p-under-image img,
.p-under-image__column img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.p-under-image-50per {
  width: 50%;
  margin: 0 0 0 auto;
}
.p-under-image-president img  {
  max-width:160px;
}
@media (min-width: 769px) {
  .p-under-image-50per {
    margin: 0 auto;
  }
}

.p-under-image-cover {
  height: 100%;
}
.p-under-image-cover img {
  object-fit: cover;
  width: 100%!important;
  height: 100%!important;
}

/* ==========================================================================
   Project: p-banners （2列バナーエリア）
   ========================================================================== */
.p-banners {
  margin: 0 0 5rem;
}

.p-banners__grid {
  display: grid;
  gap: 10px;
}

@media (min-width: 769px) {
  .p-banners {
    margin: 2rem 0 4rem;
  }
  .p-banners__grid {
    grid-template-columns: repeat(2, 1fr); /* PCは3列 */
    grid-auto-flow: column; 
    gap: 20px;
  }
}

/* カード基本スタイル */
.p-banner {
  display: flex;
  width: 100%;
  align-items: center;
  border-radius: .5rem;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
  /*transition: opacity 0.3s ease, transform 0.3s ease;*/
  background-color: var(--color-primary);
}

.p-banner:hover {
  filter: brightness(0.9);
  transform: translateY(-3px);
  color: #fff; /* 親のhover設定上書き用 */
  text-decoration: none;
}

.p-banner-card__inner {
  margin: 0;
  width: 100%;
  display: flex;
  align-items: center;
}
.p-banner-card__text {
  flex:1;
  padding: 1rem;
}

.p-banner-card__title {
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1.4;
  display: inline-block;
  position: relative;
}
.p-banner-card__title:not([target="_blank"])::after {
  margin-left: 0.5rem;
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* 垂直中央揃え */
  border-style: solid;
  border-width: 5px 0 5px 5px; /* 右向き三角 */
  border-color: transparent transparent transparent var(--color-white);
}

.p-banner-card__thumb {
  margin: 0;
  flex:1;
}
.p-banner-card__thumb img {
    transform: scale(1.02);
    /* 拡大しても中央がズレないように設定 */
    transform-origin: center;
}

@media (min-width: 769px) {
  .p-banner {
    border-radius: 1rem;
  }
  .p-banner-card__title {
    font-size: 1.5rem;
  }
}

/* ==========================================================================
   Project: p-event-layout （2列ブロック ライン付き）
   ========================================================================== */
.p-event-layout__column {
  border-left: 6px solid var(--color-primary);
  padding: 0 1rem;
}
.p-event-title__child1 {
  margin: 0 0 var(--space-sm);
  font-size:1.25rem;
  line-height: 1;
}
.p-event-title__label {
  background-color: var(--color-primary);
  color:var(--color-white);
  font-size: 0.88rem;
  line-height: 1;
  display: inline-block;
  padding: 0.25rem 0.5rem;
  margin-right:0.5rem;
}

.p-event-layout__column > :last-child {
  margin-bottom: 0;
}

.p-event-summary__block {
  padding: 0 0 var(--space-md);
  border-bottom: 1px solid var(--color-border);
  margin: 0 0 var(--space-md);
}
.p-event-summary > .p-event-summary__block:last-child {
  border-bottom: none;
}



/* ==========================================================================
   Project: p-boxed-info (沿革・データリスト)
   ========================================================================== */
.p-boxed-info { 
  border-radius:1rem;
  overflow: hidden;
  height: 100%;
}

.p-boxed-info__title-bar {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 0.5rem 1rem;
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0;
  text-align: center;
}
@media(min-width:769px){
  .p-boxed-info__title-bar {
    font-size: 1.25rem;
  }
}
.p-boxed-info__main,
.p-boxed-info__list {
  padding: 1rem 2rem;
}
.p-flex-layout--triple .p-boxed-info__main,
.p-flex-layout--triple .p-boxed-info__list {
  padding: 1rem 1rem;
}
.p-boxed-info__main ul,
.p-boxed-info__main ol {
  margin: 0;
}
.p-boxed-info__row {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--color-border);
}

.p-boxed-info__term {
    padding: 0.5rem 0;
    font-weight: 700;
    color: var(--color-text);
}

.p-boxed-info__desc {
    padding: 0.5rem 0;
    margin: 0;
    line-height: 1.6;
}
.l-under-content .p-boxed-info__desc {
  margin: 0;
}

@media (min-width: 769px) {
  .p-boxed-info__row {
    flex-direction: row;
  }
  .p-boxed-info__term {
    flex: 0 0 220px;
    padding: 1rem 0;
  }
  .p-boxed-info__desc {
    flex: 1;
    padding: 1rem 0;
  }
}

.p-caption-layout {
  padding: var(--space-sm) 0;
  margin: 0 0 var(--space-md);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.p-caption-layout__title {
  font-size: 1.5rem;
  color:var(--color-primary);
  text-align: center;
  line-height: 1.5;
  margin: 0;
}
.l-under-content .p-caption-layout__sub {
  margin: var(--space-sm) 0 0;
}

@media(min-width: 769px){
  .p-caption-layout {
    padding: var(--space-md) 0;
  }
  .p-caption-layout__title {
    font-size: 2.5rem;
  }
}

/* ==========================================================================
   Project: p-timeline (生徒の一日・タイムライン)
   ========================================================================== */
/* --- タイムライン全体 --- */
.p-timeline-group {
  display: flex;
  gap: 8rem;
  padding: 0 4rem;
  justify-content: center;
  flex-wrap: wrap;
}

.p-timeline-block {
  flex: 1;
  min-width: 320px;
  max-width: 500px;
}

.p-timeline__head {
  margin: 0 0 1rem;
  text-align: center;
  font-size:1.5rem;
}

/* --- リスト構造 --- */
.p-timeline__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.5;
}

/* 各カードのスタイル */
.p-timeline__item {
  display: flex;
  align-items: stretch;
  position: relative;
  margin-bottom: 30px; /* カード間の隙間＝線の長さ */
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
}
.is-junior .p-timeline__item { border: 1px solid var(--color-secondary-blue); }
.is-senior .p-timeline__item { border: 1px solid var(--color-secondary-orange); }

/* 最後のカードは余白（線）を消す */
.p-timeline__item:last-child {
  margin-bottom: 0;
}

/* 縦のライン：カードの「下」から伸ばす */
.p-timeline__item::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%; /* カードの下端から開始 */
  width: 20px;
  height: 31px; /* margin-bottomと同じ高さ + 線1px */
  transform: translateX(-50%);
  z-index: 1; /* カードより前面に出す（背景と干渉しない） */
}

/* 最後のカードの下には線を出さない */
.p-timeline__item:last-child::after {
  display: none;
}

/* --- カラー指定（線の色） --- */
.is-junior .p-timeline__item::after { background-color: rgba(58,125,216,.1); }
.is-senior .p-timeline__item::after { background-color: rgba(255,106,51,0.1); }

/* --- 時刻と内容（前回同様） --- */
.p-timeline__time {
  width: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  font-weight: bold;
  font-size: 2rem;
  flex-shrink: 0;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

.is-junior .p-timeline__time { background-color: var(--color-secondary-blue); }
.is-senior .p-timeline__time { background-color: var(--color-secondary-orange); }

.p-timeline__content {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  color: #333;
  min-height: 4rem;
}
/* ==========================================================================
   Project: p-school-song (校歌・縦書き歌詞)
   ========================================================================== */
.p-school-song__audio-unit {
  margin: 0 0 var(--space-sm);
}
.l-under-content .p-school-song__audio-label {
  margin: 0 0 var(--space-sm);
}
.p-school-song__player {
  width: 50%;
  min-width: 300px;
}
.p-school-song__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.p-school-song__title { font-size: 1.25rem; font-weight: 700; color: var(--color-primary); }
.p-school-song__author {
  text-align: right;
}
.l-under-content .p-school-song__text { line-height: 2.2;}
.p-school-song__text-wrap {
  font-size: 0.88rem;
  font-family: var(--font-serif);
}
@media (min-width: 961px) {
  .p-school-song__inner {
    padding: var(--space-md);
  }
  .p-school-song__lyrics-contents {
    writing-mode: vertical-rl;
  }
  .p-school-song__text-wrap {
    margin-right: var(--space-md);
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: 60px;
  }
  .l-under-content .p-school-song__text {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   Project: p-data-table (アクセシブルな横スクロール表組)
   ========================================================================== */

/* テーブルを囲むコンテナ (Prefix: p-) */

/* 注釈の基本スタイル（PCでは非表示） */
.p-data-table__notice {
  display: none;
  font-size: 0.8rem;
  color: #666;
  text-align: center;
  background-color: #f5f5f5;
  padding: 8px;
  margin-bottom: 5px;
  border-radius: 4px;
}
.p-data-table {
    width: 100%;
    overflow-x: auto; /* 横スクロールを許可 */
    margin-bottom: var(--space-sm); /* 共通変数を使用 [1] */
    border: 1px solid var(--color-border); /* 共通変数を使用 [1] */
    position: relative;
    -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかに */
}
.p-data-table__layout {
  border: none;
}
/* キーボードフォーカス時の視認性（WCAG基準） */
.p-data-table:focus {
    outline: 3px solid #005a9c; /* WCAG準拠のフォーカスカラー */
    outline-offset: 2px;
}

/* テーブル本体 */
.p-data-table__inner {
    width: 100%;
    min-width: 650px; /* スマホで強制的にスクロールさせるための最小幅 */
    border-collapse: collapse;
    font-size: 0.9375rem; /* 本文より少し小さく設定 */
}

/* セル共通設定 */
.p-data-table__th,
.p-data-table__td {
    padding: 0.75rem; /* 約12px */
    border: 1px solid var(--color-border);
    vertical-align: middle;
}

/* 最初の列の見出しを左寄せに */
.p-data-table__th[scope="row"] {
  text-align: left;
  background-color: var(--color-bg-light);
  white-space: nowrap;
}
.p-data-table__head .p-data-table__th {
  text-align: center;
  background-color: var(--color-bg-light);
}

/* モバイル表示時の切り替え（ブレイクポイントは適宜調整してください） */
@media screen and (max-width: 768px) {
  .p-data-table__notice {
    display: block; /* スマホ時のみ注釈を表示 */
    margin: 0!important;
  }
}

/* 最初の列（科目名など）の固定設定 */
.p-data-table__th--sticky {
    text-align: left !important;
    background-color: var(--color-site-bg); /* 背景を透過させないための設定 [1] */
    position: sticky;
    left: 0;
    z-index: 1;
}

/* 固定列の境界線を強調（スクロール時に重なりが分かりやすくするため） */
.p-data-table__th--sticky::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border-right: 1px solid var(--color-border);
}

.p-data-table__horizontal td {
  border: 1px solid var(--color-border);
}

/* ==========================================================================
   Component: c-snsbox (SNSボックスバナー)
   ========================================================================== */

.c-snsbox {
  border: 1px solid var(--color-border);
  margin:0.5rem;
}
.c-snsbox-link {
  padding: 1rem;
  text-decoration: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
}
.c-snsbox-link:hover {
  text-decoration: none;
}
.c-snsbox-link__left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  min-height: 4.5rem;
  width: calc( 100% - 70px );
}
.is-youtube .c-snsbox-link__left {
  width: calc( 100% - 133px );
}
.c-snsbox-link__left--label {
  text-align: center;
  color: var(--color-primary);
  padding: 0.25rem 1rem;
  font-size: 1.25rem;
  font-weight: 500;
  background-color: rgba(var(--color-primary-bg),0.1);
  border-radius: 0.25rem;
  margin-right: 1rem;
  white-space: nowrap;
}
.c-snsbox-link__left--title {
  font-weight: bold;
  font-size: 1.5rem;
  padding-right: 0.5rem;
}
.c-snsbox-link__right {
  margin: 0;
  display: flex;
  align-items: center;
}
.c-snsbox-link__right img {
  vertical-align: bottom;
}
.c-snsbox-link__bottom {
  width: 100%;
  text-align: center;
  padding: 0 1em;
  line-height: 1.5;
  border-radius:0.75em;
  background-color: var(--color-primary);
  color: var(--color-white);
}
.c-snsbox-link__right + .c-snsbox-link__bottom {
  margin-top: .5rem;
}
.c-sns-link {
  display: inline-block;
  margin: 0 1rem 0 0;
}
.c-sns-link .p-under-image {
  display: inline-block;
  height: 70px;
}
.c-sns-link .p-under-image img {
  vertical-align: middle;
}

.c-sns-button-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content:center;
  margin: 0 0 var(--space-sm);
}
@media(min-width:769px){
  .c-sns-button-wrapper {
    justify-content:flex-start;
    margin: 0 0 var(--space-md);
  }
}
.c-sns-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid var(--color-primary);
  color: var(--color-text);
  padding: 0.8rem 4rem 0.8rem 1.5rem; /* SP */
  border-radius: 2rem;
  font-weight: bold;
  text-decoration: none !important; /* 下線を出さない */
  position: relative;
  width: auto;
  min-width: 290px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.c-sns-button.is-line::after {
  content:"";
  background-image: url(/src/images/sns/icon_line.png);
  background-size: contain;
  width:32px;
  height: 32px;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
.c-sns-button.is-instagram::after {
  content:"";
  background-image: url(/src/images/sns/icon_instagram2.png);
  background-size: contain;
  width:32px;
  height: 32px;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
.c-sns-button.is-youtube::after {
  content:"";
  background-image: url(/src/images/sns/icon_youtube2.png);
  background-size: contain;
  width:32px;
  height: 32px;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
.c-sns-button.is-x::after {
  content:"";
  background-image: url(/src/images/sns/icon_x.png);
  background-size: contain;
  width:32px;
  height: 32px;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
.c-sns-button:hover {
  background-color: rgba(var(--color-primary-rgb),0.25);
}


/* ==========================================================================
   Project: p-eventlist (学校行事リスト)
   ========================================================================== */
.p-eventlist {
  margin: 0 0 var(--space-md);
}
.p-eventlist dt {
  text-align: center;
  color: var(--color-primary);
  font-size:1.125rem;
  font-weight: bold;
  border-bottom: 2px solid var(--color-primary);
  padding: 0 0 0.5rem;
  margin: 0 0 var(--space-sm);
}
.p-eventlist dd {
  margin: 0;
}

.p-eventfigure {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.p-eventfigure-item {
  margin: 0;
  text-align: center;
  width: calc( (100% - 1rem ) / 2 );
  font-size: 0.88rem;
}
@media (min-width: 769px) {
 .p-eventfigure {
    padding-top: 2.5rem;
  }
 .p-eventfigure-item {
    font-size: 1rem;
  }
}

.p-eventfigure-item--image {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Project: p-event2 (おすすめイベント)
   ========================================================================== */
.p-event-inner {
  margin: 0 0 var(--space-md);
}
.p-event-inner .c-common-heading2 {
  margin: 0 0 var(--space-xs);
}

.p-event-line {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.p-event-line.is-header {
  border-top: 1px solid var(--color-border-dark);
  background-color: rgba(var(--color-primary-rgb),.1);
}
.p-event-line + .p-event-line.is-header {
  margin-top: var(--space-sm);
}
  .p-event-line:not(.is-header) {
    border-bottom: 1px solid var(--color-border-dark);
    
}
.p-event-line.is-header.is-first {
}
@media(min-width:769px){
  .p-event-line.is-header:not(.is-first) {
    display: none;
  }
}
.p-event-box1 {
  display: flex;
  border-bottom: 1px solid var(--color-border-dark);
}
.p-event-box2 {
  display: flex;
}
.is-header .p-event-box2 {
  display: none;
}

.p-event-box1 > div,
.p-event-box2 > div {
  padding: 0.5rem .5rem;
}
.is-header .p-event-box1 > div,
.is-header .p-event-box2 > div {
  text-align: center;
}
.p-event-cell1 {
  width: 5rem;
  text-align: center;
  border-right: 1px solid var(--color-border-dark);
}
.p-event-cell2 {
  width: 5rem;
  text-align: center;
  border-right: 1px solid var(--color-border-dark);
}
.p-event-cell3 {
  width: calc( 100% - 5rem - 5rem );
}
.p-event-cell3 a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.p-event-cell4 {
  width: 100%;
}
@media(min-width: 769px){
  .p-event-line {
    flex-direction: row;
    border-bottom: 1px solid var(--color-border-dark);
  }
  .p-event-box1 {
    width: 60%;
    border-bottom: none;
  }
  .p-event-box2 {
    width: 40%;
  }
  .is-header .p-event-box2 {
    display: flex;
  }
  .p-event-cell3 {
    border-right: 1px solid var(--color-border-dark);
  }
}

/* ==========================================================================
   Project: p-interview (インタビュー)
   ========================================================================== */
.p-interview-block {
  transition: filter 0.3s ease;
}
.p-interview-block:hover {
  filter: brightness(0.8);
  text-decoration: none;
}
.p-interview-summary {
  text-align: center;
  font-size: 1.25rem;
  font-weight: bold;
}

/* ==========================================================================
   Component: c-arrow (矢印大ボックス)
   ========================================================================== */

/* 矢印のコンテナ：ブロックの真ん中に配置 */
.c-arrow-down {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: var(--space-sm) auto; /* 上下の余白 */
  width: 60px;       /* 矢印全体の横幅 */
  height: 62px;      /* 矢印全体の高さ */
}

/* 矢の棒部分（太め） */
.c-arrow-down::before {
  content: "";
  position: absolute;
  top: 0;
  width: 24px;       /* 棒の太さ */
  height: 32px;      /* 棒の長さ */
  background-color: #000; /* 矢印の色 */
}

/* 矢先部分（三角形） */
.c-arrow-down::after {
  content: "";
  position: absolute;
  bottom: 0;
  border-style: solid;
  /* 左右を透明、上を色付きにすることで三角形を作る */
  border-width: 30px 20px 0 20px; 
  border-color: #000 transparent transparent transparent;
}

/* 代替テキストを隠すためのアクセシビリティ用クラス */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Project: p-information (学校紹介)
   ========================================================================== */

.p-boxed-feature .p-boxed-info__title-bar {
  display: flex;
  align-items: center;
  padding: 1rem;
  flex-direction: column;
}

.p-boxed-feature__titlebox{
  flex:1;
  display: flex;
  align-items: center;
  margin: 0 0 var(--space-xs);
}
.p-boxed-feature__title {
  font-size: 1.25rem;
  line-height: 1;
  margin: 0;
  padding: 0 1rem 0 0;
  white-space: nowrap;
}
.l-under-content .p-boxed-feature__sub {
  margin: 0;
}

@media(min-width: 769px){
  .p-boxed-feature__titlebox{
    display: block;
    margin: 0;
  }
  .p-boxed-feature__title {
    font-size: 3rem;
    margin: 0 0 1rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--color-white);
  }
}

.p-boxed-feature__summaries {
  width: 100%;
  flex:1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--color-white);
  border-radius:1rem;
  color: var(--color-primary);
  text-align: left;
  padding: 1rem 1rem 1rem 0;
  font-size: 1rem;
  margin: 1rem 0;
}
.p-boxed-feature__summary {
  margin-left: 3rem;
}
.l-under-content .p-boxed-feature__summary2{
  margin: 0 0 0 1rem;
  font-size: 1rem;
  min-height: 7rem;
}

.p-boxed-feature__main {
  background-color: rgba(var(--color-primary-bg),0.1);
  padding: 1rem;
}
.p-boxed-feature__main-layout {
  display: flex;
  flex-direction:column-reverse;
}

.p-boxed-feature__thumbs {
  margin: 0 0 var(--space-sm);
}
.p-boxed-feature__thumb {
  margin:0 auto;
  max-width: 150px;
}
.l-under-content .p-boxed-feature__caption {
  text-align: center;
  margin: 0;
}

.p-boxed-lesson {
  border: 2px solid var(--color-primary);
}

.p-boxed-lesson .p-boxed-info__title-bar {
  display: flex;
  align-items: center;
  padding: 1rem;
  flex-direction: column;
  width: 100%;
}
.p-boxed-lesson__titlebox{
  width: 12rem;
  flex-shrink:0;
}

.p-boxed-lesson .p-boxed-lesson__title {
  font-size: 1.25rem;
  margin: 0;
}
.p-boxed-lesson__summaries {
  flex:1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--color-white);
  border-radius:1rem;
  color: var(--color-primary);
  text-align: left;
  padding: 1rem 1rem 1rem 0;
  font-size: 1rem;
  margin: 1rem 0;
}

.l-under-content .p-boxed-lesson__summary {
  margin: 0 0 0 1rem;
  font-size: 1rem;
}

.p-boxed-lesson .p-boxed-info__main {
  padding: 1.5rem 1rem;
}

@media (min-width: 769px){
  .p-boxed-feature .p-boxed-info__title-bar {
    flex-direction: row;
    gap: var(--space-sm);
    padding: 0.5rem 1.5rem;
  }
  .p-boxed-lesson .p-boxed-lesson__title {
    font-size: 1.75rem;
  }
  .p-boxed-feature__summaries {
    font-size: 1.25rem;
  }
  .p-boxed-feature__main {
    padding: 1.5rem 2rem;
  }
  .p-boxed-feature__main-layout {
    flex-direction: row;
    gap: 2rem;
  }
  .p-boxed-feature__body {
    width: calc( 100% - 2rem - 150px);
  }
  .p-boxed-feature__thumbs {
    margin: 0;
  }
  .p-boxed-lesson .p-boxed-info__main {
    padding: 1.5rem 2rem;
  } 
  .p-boxed-lesson .p-boxed-info__title-bar {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.5rem 1.5rem;
  }

  .p-flex-layout-zemi .p-flex-layout-type2__ribbon + .p-flex-layout__left + .p-flex-layout__right {
    padding-top: 3.5rem;
  }
}


/* ==========================================================================
   Project: p-club (探究活動・部活動)
   ========================================================================== */

#js-list-research,
#js-list-club {
  padding: 0 1rem;
}

.p-club-layout {
  flex-direction: row;
}
.p-club-layout .p-flex-layout__column {
  width: calc( (100% - var(--space-xs)) / 2 );
}


@media(min-width: 769px){
  .p-club-layout .p-flex-layout__column {
    width: calc( (100% - var(--space-sm)) / 2 );
  }
}
@media(min-width: 961px){
  .p-club-layout {
    gap: 2rem;
  }
  #js-list-research,
  #js-list-club {
    padding: 0;
  }
  .p-club-layout .p-flex-layout__column {
    width: calc( (100% - 2rem * 2) / 3 );
  }
}
.p-club-layout__column {
  margin: 0;
}
.p-club-layout__link {
  display: block;
  background-color: var(--color-primary-dark);
  color: var(--color-white);
}
.p-club-layout__link:hover {
  text-decoration: none;
  color: var(--color-white);
}
.p-club-layout__thumb {
  text-align: center;
}
.p-club-layout__thumb img {
  vertical-align: bottom;
}
.p-club-layout__item {
  margin: 0;
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  font-weight: bold;
}

.p-club-layout__link .p-club-layout__item {
  position: relative;
  align-items: center;
  flex-grow: 1;
  min-height: 2.5rem;
}
.p-club-layout__link .p-club-layout__item::before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 5px; /* 右向き三角 */
  border-color: transparent transparent transparent var(--color-white);
  content: "";
  position: absolute;
  left: .75rem; /* 右端からの距離 */
  top: 50%;
  transform: translateY(-50%); /* 垂直中央揃え */
  transition: transform 0.3s ease, right 0.3s ease;
  flex-shrink: 0;
}

/* マウスオーバーでアイコンを右に動かす */
.p-club-layout__link:hover .p-club-layout__item::before {
  transform: translateY(-50%) translateX(5px);
}

/* タイトル：右側に自動マージンを入れてアイコンを押し出す */
.p-club-layout__title {
  margin-right: auto;
  font-weight: bold;
}

/* アイコン：アイコン同士の間隔を調整 */
.p-club-layout__icons {
  display: flex;
  gap: 4px;
  position: absolute;
  right:.5rem;
  top: -2.25rem;
}
.p-club-layout__icon {
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  line-height: 1;
  border: 2px solid var(--color-white);
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.p-club-layout__icon-junior {
  background-color: var(--color-secondary-blue);
  color: var(--color-white);
  right: 3rem;
}
.p-club-layout__icon-high {
  background-color: var(--color-secondary-orange);
  color: var(--color-white);
  right:0;
}

@media(min-width: 961px){
  .p-club-layout__link .p-club-layout__item {
    display: flex;
    align-items: center;
    flex-grow: 1;
    min-height: 2.5rem;
  }
  .p-club-layout__icons {
    top:50%;
    transform: translateY(-50%);
  }
}
/* ==========================================================================
   Project: p-movie (動画で見る学芸)
   ========================================================================== */
.p-movies { 
  width: 100%;
  background-color: var(--color-bg-light);
  padding: var(--space-md) 0 var(--space-md);
}

.p-movies__item {
  padding: 0;
  /*transition: opacity 0.4s ease;*/
  height: auto;
  display: flex;
  align-items: stretch;
  border-radius: 0.5rem;
  overflow: hidden;
}
.p-movie-card:hover {
  text-decoration: none;
  background-color: rgba(var(--color-primary-bg),0.1);
  filter: brightness(0.8);
}
/* サムネイル部分 */
.p-movie-card__thumbnail {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: #fff;
  overflow: hidden;
  margin: 0 0 var(--space-xs);
}

.p-movie-card__thumbnail img {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.p-movie-card:hover .p-movie-card__thumbnail img {
}

@media (min-width: 769px) {
   .p-movies { 
    padding: var(--space-md) 0 var(--space-lg);
  }
  .p-movies__item {
      padding: 0;
  }
}
.p-movie-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* タイトルの長さに左右されず高さを確保 */
}

.p-movie-card__meta {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.875rem;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin-bottom: 0.5rem;
}
@media (min-width: 769px) {
  .p-movie-card__body {
  }
  .p-movie-card__meta {
    font-size: 1rem;
    margin-bottom: 0.75rem;
  }
}

.p-movie-card__category {
    font-weight: bold;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    padding: 1px 6px;
    border-radius: 3px;
}

.p-movie-card__date {
    color: var(--color-primary);
    font-weight: bold;
}

.p-movie-card__title {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  font-weight: 500;
  margin: 0 0 var(--space-sm);
}


/* ==========================================================================
   Project: p-contact (フォーム)
   ========================================================================== */
.p-contact-layout {
  margin: 0 0 var(--space-md);
}

.p-contact-layout > .p-contact-line:first-child {
  border-top: 1px solid var(--color-border);
}

.p-contact-line {
  width: 100%;
  display:flex;
  flex-direction: column;
  margin: 0;
  border-bottom: 1px solid var(--color-border);
}
.p-contact-line dt {
  min-width:16rem;
  background-color: rgba(var(--color-primary-bg),.25);
  padding: .25rem 1rem;
}
.p-contact-line dd {
  margin: 0;
  padding: .5rem 1rem;
  flex: 1;
}
.p-contact-line ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.p-contact-line input[type=radio]+label {
  margin-left:.5rem;
}
.p-contact-line input[type="text"],
.p-contact-line input[type="email"]{
  width: 100%;
  padding: .25rem .5rem;
}
.p-contact-line input[name="zip1"]{
  width: 4rem;
}
.p-contact-line input[name="zip2"]{
  width: 6rem;
}
.p-contact-line select[name="pref"]{
  width: 7rem;
}
.p-contact-line input[name="addr"]{
  width: calc( 100% - 7rem - 4px );
}
.p-contact-line textarea {
  width: 100%;
  height: 8rem;
  padding: .25rem .5rem;
}
@media(min-width:769px){
  .p-contact-line {
    flex-direction: row;
  }
  .p-contact-line dt {
    padding: 1rem 1rem;
  }
  .p-contact-line dd {
    padding: 1rem 1rem;
  }
  .p-contact-line input[name="graduation"],
  .p-contact-line input[name="tel"],
  .p-contact-line input[type="email"]{
    width: 50%;
  }
}

.p-policy-layout {
  margin: 0 1rem 1rem;
  height: 20rem;
  overflow: auto;
  border: 1px solid var(--color-border);
}
.p-policy-inner {
  padding: 1rem;
}

/* ==========================================================================
   Project: p-visit (オープンスクール)
   ========================================================================== */
.p-visit-table {
  font-size: 2vw;
  line-height: 1.5;
}
.p-visit-table th,.p-visit-table td {
  padding: .5em 1em;
}
.p-visit-table .is-finished {
  background-color: var(--color-bg-light);
}
.p-visit-table .c-table-cell1 {
  width: 25%;
}
.p-visit-table .c-table-cell2 {
  width: 20%;
}
.p-visit-table .c-table-cell4 {
  width: 12%;
  white-space: nowrap;
  text-align: center;
}

.p-visit-table a {
  text-decoration: underline;
}
.p-visit-table .c-table-cell4 a {
  font-weight: bold;
}
.p-visit-table .close {
  text-decoration: line-through;
}
.p-visit-categories {
  display: flex;
  flex-wrap: wrap;
  gap:.5em;
}
.p-visit-categories span {
  color: var(--color-white);
  padding: 0 1em;
  font-size: 2vw;
}
.p-visit-categories .all {
  background-color: var(--color-primary);
}
.p-visit-categories .special {
  background-color: var( --color-senior-special);
}
.p-visit-categories .community {
  background-color: var( --color-senior-community);
}
.p-visit-categories .science {
  background-color: var( --color-senior-science);
}
.p-visit-categories .music {
  background-color: var( --color-senior-music);
}
.p-visit-categories .art {
  background-color: var( --color-senior-art);
}
.p-visit-categories .calligraphy {
  background-color: var( --color-senior-calligraphy);
}

@media(min-width: 769px){
  .p-visit-table {
    font-size: 1rem;
  }
  .p-visit-table .c-table-cell1 {
    width: 11rem;
  }
  .p-visit-table .c-table-cell2 {
    width: 9rem;
    text-align: center;
  }
  .p-visit-categories span {
    font-size: 0.88rem;
  }
}

/* ==========================================================================
   Project: p-sitemap (サイトマップ)
   ========================================================================== */
.p-sitemap-links{
  
}
.p-sitemap-link {
  display: inline-block;
  position: relative;
  width: 100%;
  line-height: 1;
  padding: 0 0 0 1.75rem;
}

.p-sitemap-link::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 20px;
  margin-right: 0.5rem;
  top: -2px;
  left: 0;
  background-color: var(--color-secondary-green);
  border-radius: 50%;
  transition: all 0.25s ease;
}
.p-sitemap-link:hover::before {
  background-color: var(--color-white);
  border: 1px solid var(--color-secondary-green);
}
.p-sitemap-link::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 0;
  height: 0;
  left: 8px;
  top: 8px;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent var(--color-white);
  transition: all 0.25s ease;
  transform: translateY(-50%); /* 垂直中央揃え */
}
.p-sitemap-link:hover::after {
  border-color: transparent transparent transparent var(--color-secondary-green);
}
.p-sitemap-links__child {
  margin: 0 0 0 1rem;
  padding: 0;
  list-style: none;
}
.p-sitemap-links__child2 {
  margin: -0.5rem 0 0 1rem;
}
@media(min-width: 769px){
  .p-sitemap-links__child2 {
    margin:1.75rem 0 0 1rem;
  }
}
.p-sitemap-links__child-link {
  position: relative;
  display: inline-block;
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.8;
  transition: color 0.3s ease;
  padding-left: .75rem;
}
.p-sitemap-links__child-link2 {
  margin: 0 0 0 2rem;
}
.p-sitemap-links__child-link:hover {
    color: var(--color-secondary-green);
    text-decoration: underline;
}

.p-sitemap-links__child-link::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0.4rem;
  transform: translateY(calc( 50% - .1rem ));
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent var(--color-secondary-green);
}



/* ==========================================================================
   Other: ブロック内調整等
   ========================================================================== */

.p-flex-layout-type2 .p-flex-layout__left :last-child {
  margin: 0;
}