@charset "utf-8";
/* CSS Document */


:root {
  --main-image-height: 60vh;
  --color-senior-primary: var(--color-primary);
}
@media (orientation: landscape) {
  :root {
    /* 横長のときは高さを抑えて、スクロールせずに全体が見えるようにする */
    --main-image-height: 90vh; 
  }
}

/* 非常に背の低い（横に長すぎる）画面への予備知識 */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --main-image-height: 750px; /* 固定値で潰れすぎを防止 */
  }
}


/* Common */
@media (min-width: 961px) and (max-width: 1280px) {
  .p-global-nav {
    display: none;
  }
}

/* TOP PAGE */

.p-hero {
  position: relative;
  width: 100%;
  height: calc( var(--main-image-height) / 1.5  );
  max-height: calc( var(--main-image-height) );
  background-color: #767676;
  display: flex;
}

@media (min-width: 769px) {
  .p-hero {
    height: auto;
    max-height: none;
  }
}


.p-hero__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 垂直方向も中央に */
  gap: var(--space-md);
  z-index: 10;
  overflow: hidden; /* 左右のはみ出しをカット */
}

.p-hero__image {
  width: 100%;
  height: 100%;       /* 親の高さに合わせる */
  max-height: 100%;   /* ご指定の条件 */
  object-fit: cover;  /* アスペクト比を維持したまま、はみ出し部分をトリミング */
  object-position: center; /* 中央寄せ */
  vertical-align: bottom;
}
.p-scroll-guide {
  display: none;
}
@media (min-width: 769px) {
  .p-hero__inner {
    height: auto; /* PCでは画像の元サイズに合わせる場合など */
  }
  .p-hero__image {
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: initial;
  }
  .p-scroll-guide {
    display: none;
    position: absolute;
    right: -2rem;
    bottom: 4rem;
    transform: rotate(90deg);
    color: #fff;
    cursor: pointer;
    font-size: 0.875rem;
    z-index: +10;
    -webkit-user-select: none;
    user-select: none;
  }
}
.p-hero__floating-label {
  position: absolute;
  left: 0;
  bottom: 10%;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 2vw 4vw 2vw 2vw;
  display: flex;
  align-items: center;
  gap: 2vw;
  font-weight: bold;
  z-index: 10;
  border-top-right-radius: 2vw;
  border-bottom-right-radius: 2vw;
}

.p-hero__floating-label-logo img {
  max-width:10vw;
  vertical-align: bottom;
}
.p-hero__floating-label-text {
  margin: 0;
  font-size: 4vw;
}

@media (min-width: 641px) {
  .p-hero__floating-label {
    padding: 1rem 2rem 1rem 1rem;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    gap: 0 1rem;
  }
  .p-hero__floating-label-logo img {
    max-width:4.5rem;
  }
  .p-hero__floating-label-text {
    font-size: 1.25rem;
  }
}

/* ==========================================================================
   Project: p-course-select (TOP)
   ========================================================================== */
.p-course-select {
  margin: 0 0 5rem;
}

.p-course-select__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

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

/* カード基本スタイル */
.p-course-card {
  display: block;
  border-radius: .5rem;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

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

.p-course-card__inner {
  margin: 0;
  display: flex;
  align-items: center;
}
.p-course-card__text {
  flex:1;
  padding: 1rem;
}
.p-course-card__label {
  font-size: 0.875rem;
  font-weight: 500;
  display: block;
}

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


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

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

/* カラーバリエーション（デザインに合わせて調整） */
.p-course-card--special    { background-color: var(--color-senior-special); }
.p-course-card--community { background-color: var(--color-senior-community); }
.p-course-card--science   { background-color: var(--color-senior-science); }
.p-course-card--music   { background-color: var(--color-senior-music); }
.p-course-card--art   { background-color: var(--color-senior-art); }
.p-course-card--calligraphy  { background-color: var(--color-senior-calligraphy); }


/* ==========================================================================
   Project: p-result
   ========================================================================== */

.p-result-card1-heading {
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--color-primary);
  text-align: center;
  border-bottom: 2px solid var(--color-border);
  margin: 0 0 var(--space-xs);
  padding-bottom: var(--space-xs);
}
.p-result-card1__body {
  text-align: center;
  line-height: 1;
  font-weight: bold;
  font-size:2.5rem;
}
.p-result-card1__body-label {
  font-style: normal;
  font-size: 5rem;
}
@media(min-width:769px){
  .p-result-card1-heading {
    height: 3.6em;
    margin: 0 0 var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.p-result-list {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
.p-result-list li {
  min-width: calc((100% - var(--space-xs) * 2 ) / 3);
  padding-right: .5em;
  position: relative;
  margin: 0 0 .5em;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.p-result-list li.is-long {
  min-width: calc(( 100%));
}
@media(min-width:481px){
  .p-result-list li.is-long {
    min-width: calc((100% - var(--space-xs) * 2 ) / 3);
  }
}
.p-result-list > li:last-child {
  border-right: none;
  border-bottom: none;
}
/*
.p-result-list li::after {
  content:"/";
  margin: 0 0.5rem;
}
*/
/*.p-result-list > li:last-child::after{
  content:"他";
  margin: 0 0 0 1.5rem;
}*/
.p-result-list2 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.p-result-list2__item {
  width: calc( (100% - 0.5rem ) / 2);
  display: flex;
  justify-content: space-between; /* 両端に配置 */
  align-items: center;
  position: relative;             /* 点線の基準点 */
  margin: 0 0 var(--space-sd);             /* 項目間の余白 */
}
.p-result-list2__item.is-long {
width: calc((100%));
}
@media(min-width: 481px){
  .p-result-list2 {
    gap:1rem;
  }
  .p-result-list2__item,
  .p-result-list2__item.is-long {
    width: calc( (100% - 1rem ) / 2);
  }
}
@media(min-width: 769px){
  .p-result-list2 {
    gap:1.5rem;
  }
  .p-result-list2__item {
    width: calc( (100% - 4.5rem ) / 4);
  }
  .p-result-list2__item.is-long,
  .p-result-list2__item-long {
    width: calc( (100% - 4.5rem ) / 4 * 2 + 1.5rem );
  }
}
.p-result-list2__item::before {
  content: "";
  position: absolute;
  top: 50%; /* 上から50%の位置 */
  left: 0;
  right: 0;
  border-bottom: 2px dotted var(--color-border); /* 点線のスタイル */
  transform: translateY(-50%); /* 線の太さ分を真ん中に補正 */
  z-index: 1;                     /* 背面に配置 */
}
.is-bg-grey .p-result-list2__item dt,
.is-bg-grey .p-result-list2__item dd {
  background-color: var(--color-site-bg);
}
.p-result-list2__item dt,
.p-result-list2__item dd {
  position: relative;             /* 点線より上に表示するため */
  z-index: 2;                     /* 前面に配置 */
  background-color: #fff;         /* 背景を白く塗って点線を隠す */
  margin: 0;
  line-height: 1;
}
.p-result-list2__item dt {
  padding-right: 0.5rem;
}
.p-result-list2__item dd {
  padding-left: 0.5rem;
  white-space: nowrap;
}
.p-result-list2__item-end::before {
  border-bottom: none;
}


/* ==========================================================================
   Project: p-support-info
   ========================================================================== */


/* 金額表示 */
.p-support-info__total {
    text-align: right;
    margin-bottom: 1rem;
}

.p-support-info__amount {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--color-primary-dark);
}

.p-support-info__detail {
    display: flex;
  flex-direction: column;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-border);
    padding: 0.5rem 0;
}
.p-support-info__detail dd {
  text-align: right;
}
.p-support-info__detail--primary {
    color: var(--color-primary-dark);
    border-bottom: 2px solid var(--color-primary-dark);
}

@media(min-width:769px){
.p-support-info__detail {
  flex-direction: row;
}
}