/* =======================================
   大分高校の推しページ 固有トークン・スタイル
======================================= */
:root {
  --oshi-bg-peach: #fceed5;
}

body {
  background-color: #fff;
}

.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;
}

/* =======================================
   共通インナー
======================================= */
.oshi-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--side-pad-sp);
}
@media (min-width: 768px) {
  .oshi-inner { padding: 0 var(--side-pad-pc); }
}

/* =======================================
   ヒーロー：OH! 大分高校の推し
======================================= */
.oshi-hero {
  background-color: var(--oshi-bg-peach);
  margin-top: var(--header-h-sp);
  padding: 2.4rem 0;
}
@media (min-width: 768px) {
  .oshi-hero {
    margin-top: var(--header-h-pc);
    padding: 4rem 0;
  }
}
.oshi-hero img { width: 100%; }

/* =======================================
   推し①②③ 共通ブロック
======================================= */
.oshi-block {
  padding: 4rem 0 0;
}
.oshi-block:last-of-type {
  padding-bottom: 4.8rem;
}

.oshi-block__heading {
  text-align: center;
  margin: 3.2rem 0 4.0rem;
}
.oshi-block__heading img {
  display: inline-block;
  max-width: 100%;
  max-height: 8rem;
  width: auto;
}
@media (min-width: 768px) {
  .oshi-block__heading { margin: 4.8rem 0 5.6rem; }
  .oshi-block__heading img { max-height: 10rem; }
}

/* =======================================
   オレンジ枠カード
======================================= */
.oshi-card {
  border: 0.2rem solid var(--color-orange);
}

.oshi-card__header {
  background-color: var(--color-orange);
  color: #fff;
  font-size: 2.08rem;
  font-weight: bold;
  text-align: center;
  padding: 0.96rem 1.28rem;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .oshi-card__header { font-size: 2.28rem; }
}

.oshi-card__body {
  padding: 2.0rem 1.6rem;
}
@media (min-width: 768px) {
  .oshi-card__body { padding: 3.2rem 4rem; }
}

.oshi-card__text {
  font-size: 1.4rem;
  line-height: 1.9;
}
@media (min-width: 768px) {
  .oshi-card__text { font-size: 1.6rem; }
}

.oshi-card__text-accent {
  color: var(--color-orange);
  font-weight: bold;
}

.oshi-card__note {
  font-size: 1.2rem;
  color: var(--color-text);
  font-weight: bold;
  margin-top: 1.2rem;
}

.oshi-card__lead {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--color-orange);
  margin: 2.8rem 0 1.6rem;
}
@media (min-width: 768px) {
  .oshi-card__lead { font-size: 2.2rem; }
}

.oshi-card__highlight {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--color-orange);
  margin-top: 1.6rem;
}
@media (min-width: 768px) {
  .oshi-card__highlight { font-size: 1.8rem; }
}

/* =======================================
   45分授業実施校（バッジのみ画像、他は実テキスト。1つの枠内にまとめる）
======================================= */
.oshi-schoolexample {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  background-color: #fce6d4;
  padding: 1.6rem;
  padding-bottom: 2rem;
  margin-top: 5.0rem;
}
.oshi-schoolexample__badge {
  width: 100%;
  flex-shrink: 0;
}
.oshi-schoolexample picture {
  align-self: flex-start;
  position: relative;
  top: -3.2rem;
  margin-bottom: -3.8rem;
  max-width: 70%;
  left: -1.6rem;
}
.oshi-schoolexample__list {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.7;
}
@media (min-width: 768px) {
  .oshi-schoolexample__list { font-size: 1.6rem; }
}
@media (min-width: 768px) {
  .oshi-schoolexample {
    flex-direction: row;
    align-items: center;
    gap: 2.4rem;
    max-width: 70%;
    padding-bottom: 1.6rem;
    margin-top: 2.0rem;
    margin-left: auto;
    margin-right: auto;
  }
  .oshi-schoolexample__badge {
    width: 18rem;
    position: relative;
    left: -7.2rem;
  }
  .oshi-schoolexample picture {
    top: 0.8rem;
    margin-bottom: 0;
    max-width: none;
    left: 0;
    margin-right: -7rem;
  }
}

/* =======================================
   校時表（白背景・黒文字、PCでは幅を絞る）
======================================= */
.oshi-timetable-wrap {
  margin-top: 2.0rem;
}
.oshi-timetable {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  border-collapse: collapse;
  background-color: #fff;
  font-size: 1.6rem;
}
.oshi-timetable caption {
  caption-side: top;
  text-align: center;
  background-color: var(--color-orange);
  color: #fff;
  font-weight: bold;
  padding: 0.8rem 1.2rem;
}
.oshi-timetable th,
.oshi-timetable td {
  border: 0.1rem solid var(--color-orange);
  padding: 0.8rem 1.2rem;
  text-align: left;
  color: var(--color-text);
}
.oshi-timetable th {
  width: 40%;
  font-weight: bold;
}
.oshi-timetable td {
  font-weight: bold;
}
.oshi-timetable__note {
  display: block;
  font-size: 1.0rem;
  font-weight: 600;
  color: var(--color-text);
}

/* =======================================
   放課後ポイント（01 / 02）画像
======================================= */
.oshi-point {
  display: block;
  margin-top: 2.0rem;
}
.oshi-point__heading {
  display: block;
  width: 100%;
}
.oshi-point__text {
  font-size: 1.4rem;
  line-height: 1.9;
  margin-top: 0.8rem;
}
@media (min-width: 768px) {
  .oshi-point__text { font-size: 1.6rem; }
}

/* =======================================
   推し②：本文＋写真
======================================= */
.oshi-card__body--with-photo {
  display: flex;
  flex-direction: column;
  gap: 2.0rem;
}
.oshi-card__photo {
  width: 75%;
  margin: 0 auto;
}
.oshi-card__photo img {
  width: 100%;
  border-radius: 0.4rem;
}
@media (min-width: 768px) {
  .oshi-card__body--with-photo {
    flex-direction: row;
    align-items: center;
    gap: 3.2rem;
  }
  .oshi-card__text-col { flex: 1; }
  .oshi-card__photo {
    width: auto;
    margin: 0;
    flex: 0 0 18rem;
  }
}

/* =======================================
   SP/PC 表示切り替え
======================================= */
.u-sp-only { display: block; }
.u-pc-only { display: none; }
@media (min-width: 768px) {
  .u-sp-only { display: none; }
  .u-pc-only { display: block; }
}