@charset "UTF-8";

/* Open Campus Report SP 上書きスタイル (≤705px / PC は ocreport.css) */
:root {
  --ocreport-bg-image: url(../img/ocreport_bg.png);
  --screen-sm: 705;
  --font-family-zen: 'Zen Kaku Gothic New', sans-serif;
  --font-family-abhaya: 'Abhaya Libre ExtraBold', sans-serif;
  --font-family-biz-ud: 'BIZ UDGothic', 'Meiryo', sans-serif;
  --font-family-maru: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
  --font-family-noto: 'Noto Sans JP', sans-serif;
}

/* .ocReport / .ocReportInner: ページ全体ラッパー (SP) */
#contents .ocReport {
  padding: min(55px, calc(55 / 705 * 100vw)) 0 min(90px, calc(90 / 705 * 100vw));
}

#contents .ocReportInner {
  width: auto;
  margin: 0 min(10px, calc(10 / var(--screen-sm) * 100vw));
}

/* .ocReportLead*: リード部 (SP) — フォント・余白をビューポート比率でスケール */
#contents .ocReportLead {
  text-align: center;
}

#contents .ocReportLeadTitle {
  display: inline-block;
  margin-top: min(10px, calc(10 / var(--screen-sm) * 100vw));
  padding: min(10px, calc(10 / var(--screen-sm) * 100vw)) min(24px, calc(24 / var(--screen-sm) * 100vw));
  text-align: center;
}

#contents .ocReportLeadIntro {
  display: flex;
  align-items: flex-start;
  gap: min(14px, calc(14 / var(--screen-sm) * 100vw));
  margin-top: min(16px, calc(16 / var(--screen-sm) * 100vw));
}

#contents .ocReportLeadCharacter {
  flex: 0 0 calc((100% - min(14px, calc(14 / var(--screen-sm) * 100vw))) / 2);
  width: calc((100% - min(14px, calc(14 / var(--screen-sm) * 100vw))) / 2);
  max-width: none;
  height: auto;
  margin: 0;
}

#contents .ocReportLeadCopy {
  flex: 0 0 calc((100% + min(14px, calc(14 / var(--screen-sm) * 100vw))) / 2);
  width: calc((100% + min(14px, calc(14 / var(--screen-sm) * 100vw))) / 2);
  text-align: left;
}

#contents .ocReportLeadCopy p {
  font-size: min(21px, calc(22 / var(--screen-sm) * 100vw));
  line-height: 1.75;
}

#contents .ocReportLeadCopy p span {
  background: linear-gradient(transparent 60%, #fff352 60%);
}


#contents .ocReportLeadArrow {
  margin-top: min(16px, calc(16 / var(--screen-sm) * 100vw));
  text-align: center;
}

#contents .ocReportLeadArrow span {
  border-radius: 1px;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  transform: none;
}

#contents .ocReportLeadArrow span:first-child {
  width: min(250px, calc(250 / var(--screen-sm) * 100vw));
  height: min(61px, calc(61 / var(--screen-sm) * 100vw));
  margin: min(10px, calc(10 / var(--screen-sm) * 100vw)) auto 0;
  background: rgba(255, 243, 82, 0.4);
}

#contents .ocReportLeadArrow span + span {
  width: min(364px, calc(364 / var(--screen-sm) * 100vw));
  height: min(88px, calc(88 / var(--screen-sm) * 100vw));
  margin-top: min(8px, calc(8 / var(--screen-sm) * 100vw));
  background: #fff352;
}

#contents .ocReportLeadSub {
  margin-top: min(18px, calc(18 / var(--screen-sm) * 100vw));
  font-size: min(38px, calc(38 / var(--screen-sm) * 100vw));
  line-height: 1.5;
  text-align: center;
  font-family: var(--font-family-noto);
}

#contents .ocReportLeadMain {
  margin: 0 auto;
  font-size: min(47px, calc(47 / var(--screen-sm) * 100vw));
  line-height: 1.3;
  letter-spacing: 0;
  text-align: center;
  font-family: var(--font-family-noto);
}

#contents .ocReportLeadLabel {
  display: inline-block;
  margin-top: min(16px, calc(16 / var(--screen-sm) * 100vw));
  padding: min(10px, calc(10 / var(--screen-sm) * 100vw)) min(26px, calc(26 / var(--screen-sm) * 100vw));
  font-size: min(26px, calc(26 / var(--screen-sm) * 100vw));
  text-align: center;
  font-family: var(--font-family-noto);
  background-image: url(../img/ocreport_lead_label_bg.png);
  width: 100%;
}

#contents .ocReportLeadLabel::before,
#contents .ocReportLeadLabel::after {
  width: min(8px, calc(8 / var(--screen-sm) * 100vw));
  height: min(8px, calc(8 / var(--screen-sm) * 100vw));
  margin-top: min(-4px, calc(-4 / var(--screen-sm) * 100vw));
  background: #C4C4C4;
  border-radius: 50%;
}

#contents .ocReportLeadLabel::before {
  left: min(8px, calc(8 / var(--screen-sm) * 100vw));
}

#contents .ocReportLeadLabel::after {
  right: min(8px, calc(8 / var(--screen-sm) * 100vw));
}

/* .ocReportCard*: 学校カード一覧 (SP) */
#contents .ocReportCards {
  margin-top: min(26px, calc(26 / var(--screen-sm) * 100vw));
}

#contents .ocReportCard {
  padding-top: 0;
}

#contents .ocReportCard + .ocReportCard {
  margin-top: min(22px, calc(22 / var(--screen-sm) * 100vw));
}

#contents .ocReportCardHeader {
  margin-bottom: min(12px, calc(12 / var(--screen-sm) * 100vw));
  padding-bottom: min(8px, calc(8 / var(--screen-sm) * 100vw));
}

#contents .ocReportCardTitle {
  font-size: min(35px, calc(35 / var(--screen-sm) * 100vw));
  line-height: 1.25;
  font-family: var(--font-family-noto);
}

#contents .ocReportCardMeta {
  margin-top: min(2px, calc(2 / var(--screen-sm) * 100vw));
  font-size: min(24px, calc(24 / var(--screen-sm) * 100vw));
  line-height: 1.35;
}

#contents .ocReportCardBody {
  align-items: flex-start;
  gap: min(18px, calc(18 / var(--screen-sm) * 100vw));
}

#contents .ocReportCardPhotoWrap {
  flex: 0 0 min(275px, calc(275 / var(--screen-sm) * 100vw));
  max-width: min(244px, calc(244 / var(--screen-sm) * 100vw));
  min-width: min(92px, calc(92 / var(--screen-sm) * 100vw));
}

#contents .ocReportCardPhoto {
  height: auto;
  aspect-ratio: 1 / 1;
}

#contents .ocReportCardTextWrap {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: min(236px, calc(236 / var(--screen-sm) * 100vw));
  margin-top: auto;
}

#contents .ocReportCardText {
  /* margin: 0 0 min(28px, calc(28 / var(--screen-sm) * 100vw)); */
  margin: 0;
  font-size: min(28px, calc(28 / var(--screen-sm) * 100vw));
  line-height: 1.55;
  font-family: var(--font-family-noto);
}

#contents .ocReportCardTextSpan {
  color: #09D6FF;
}

#contents .ocReportCardToggle.article-title {
  width: min(100%, 380px);
  margin-top: auto;
  padding: min(28px, calc(28 / var(--screen-sm) * 100vw)) min(72px, calc(72 / var(--screen-sm) * 100vw)) min(28px, calc(28 / var(--screen-sm) * 100vw)) min(30px, calc(30 / var(--screen-sm) * 100vw));
  font-size: min(32px, calc(32 / var(--screen-sm) * 100vw));
}

#contents .ocReportCardToggleArrow {
  right: min(70px, calc(70 / var(--screen-sm) * 100vw));
  width: min(28px, calc(28 / var(--screen-sm) * 100vw));
  height: min(28px, calc(28 / var(--screen-sm) * 100vw));
  margin-top: calc(min(28px, calc(28 / var(--screen-sm) * 100vw)) / -2);
}

#contents .ocReportCardToggleArrow::before {
  font-size: min(28px, calc(28 / var(--screen-sm) * 100vw));
}

/* .ocReportAccordion / .ocReportAttention / .ocReportDetailWrap (SP) */
#contents .ocReportAccordion {
  margin-top: min(15px, calc(15 / var(--screen-sm) * 100vw));
  padding: 0;
}
#contents .ocReportCard[data-school="josai"]  .ocReportAccordion,
#contents .ocReportCard[data-school="tamagawa"]  .ocReportAccordion {
  margin-top: min(45px, calc(45 / var(--screen-sm) * 100vw));
}

#contents .ocReportDetailWrap {
  margin-top: min(15px, calc(15 / var(--screen-sm) * 100vw));
  padding: min(16px, calc(16 / var(--screen-sm) * 100vw)) min(12px, calc(12 / var(--screen-sm) * 100vw)) min(24px, calc(24 / var(--screen-sm) * 100vw));
}

#contents .ocReportAttention {
  margin: 0;
  padding: 0;
}

#contents .ocReportAttention .ocReportAttentionHead {
  display: inline-flex;
  align-items: flex-start;
  gap: min(12px, calc(12 / var(--screen-sm) * 100vw));
  min-height: min(49px, calc(49 / var(--screen-sm) * 100vw));
  margin: 0;
  padding: min(5px, calc(5 / var(--screen-sm) * 100vw)) min(24px, calc(24 / var(--screen-sm) * 100vw)) 0 0;
  background: #10a2ff;
}

#contents .ocReportAttention .ocReportAttentionIcon {
  display: inline-block;
  vertical-align: top;
  flex-basis: min(71px, calc(71 / var(--screen-sm) * 100vw));
  width: min(71px, calc(71 / var(--screen-sm) * 100vw));
  height: min(71px, calc(71 / var(--screen-sm) * 100vw));
  margin: min(-23px, calc(-38 / var(--screen-sm) * 100vw)) 0 0 min(10px, calc(10 / var(--screen-sm) * 100vw));
}

#contents .ocReportAttentionTitle {
  font-size: min(28px, calc(28 / var(--screen-sm) * 100vw));
}

#contents .ocreportAttentionTxtSmall {
  margin: 0;
  font-size: min(13px, calc(13 / var(--screen-sm) * 100vw));
  line-height: 1.5;
}

#contents .ocReportCard[data-school="josai"] .ocReportAttention,
#contents .ocReportCard[data-school="tamagawa"] .ocReportAttention {
  margin: 0;
  padding: 0;
  border-width: 0;
}

#contents .ocReportCard[data-school="josai"] .ocReportAttention .ocReportAttentionHead {
  width: min(381px, calc(381 / var(--screen-sm) * 100vw));
  height: min(49px, calc(49 / var(--screen-sm) * 100vw));
}
#contents .ocReportCard[data-school="tamagawa"] .ocReportAttention .ocReportAttentionHead {
  width: min(325px, calc(325 / var(--screen-sm) * 100vw));
  height: min(49px, calc(49 / var(--screen-sm) * 100vw));
}

#contents .ocReportAttention .ocReportAttentionTitle {
  width: auto;
  height: min(38px, calc(38 / var(--screen-sm) * 100vw));
  margin: min(6px, calc(6 / var(--screen-sm) * 100vw)) 0 0 min(1px, calc(1 / var(--screen-sm) * 100vw));
}
#contents .ocReportAttentionText {
  margin: 0;
  padding: min(29px, calc(29 / var(--screen-sm) * 100vw)) min(24px, calc(24 / var(--screen-sm) * 100vw)) min(18px, calc(18 / var(--screen-sm) * 100vw));
  border: min(2px, calc(2 / var(--screen-sm) * 100vw)) solid #10a2ff;
  background: #ffffff;
  font-feature-settings: "halt" on;
}
#contents .ocReportAttentionText .ocReportAttentionTxtBig {
  margin: 0;
  font-size: min(18px, calc(18 / var(--screen-sm) * 100vw));
  font-weight: 400;
  line-height: 1.5;
}

#contents .ocReportAttention .ocReportAttentionNote {
  margin: 0;
  padding: min(8px, calc(8 / var(--screen-sm) * 100vw)) min(8px, calc(8 / var(--screen-sm) * 100vw));
  font-size: min(22px, calc(20 / var(--screen-sm) * 100vw));
  font-weight: 700;
  line-height: 1.5;
}

#contents .ocReportAttentionNote::before,
#contents .ocReportAttentionNote::after {
  content: "\25BC";
  display: inline-block;
}

#contents .ocReportAttentionNote::before {
  margin-right: 0.35em;
}

#contents .ocReportAttentionNote::after {
  margin-left: 0.35em;
}

/* .ocReportNote: 麗澤「ここも注目」ブロック (SP) — 寸法をビューポート比率でスケール */
#contents .ocReportNote {
  /* width: min(600px, calc(600 / var(--screen-sm) * 100vw)); */
  width: calc((600 / var(--screen-sm) * 100vw) * 0.8);
  margin: 0 auto;
  margin-top: min(30px, calc(30 / var(--screen-sm) * 100vw));
  padding-top: min(35px, calc(35 / var(--screen-sm) * 100vw));
}

#contents .ocReportNoteBadge {
  left: min(32px, calc(32 / var(--screen-sm) * 100vw));
  width: min(265px, calc(265 / var(--screen-sm) * 100vw));
}

#contents .ocReportNoteBody {
  gap: min(25px, calc(25 / var(--screen-sm) * 100vw));
  padding: min(60px, calc(60 / var(--screen-sm) * 100vw)) min(30px, calc(30 / var(--screen-sm) * 100vw)) min(25px, calc(25 / var(--screen-sm) * 100vw));
  border-radius: min(20px, calc(20 / var(--screen-sm) * 100vw));
}

#contents .ocReportNoteMedia {
  flex: 0 0 min(220px, calc((220 / var(--screen-sm) * 100vw) * 0.8));
}
#contents .ocReportNoteMedia img {
  width: calc((220 / var(--screen-sm) * 100vw) * 0.8);
}

#contents .ocReportNoteText {
  font-size: min(14px, calc(14 / var(--screen-sm) * 100vw));
}

/* .ocReportDetailHeader / .ocReportDetailTitle: 詳細ヘッダ (SP) */
#contents .ocReportDetailHeader {
  margin-bottom: 0;
  min-height: min(108px, calc(108 / var(--screen-sm) * 100vw));
  padding: min(8px, calc(8 / var(--screen-sm) * 100vw)) min(12px, calc(12 / var(--screen-sm) * 100vw));
}

#contents .ocReportDetailTitle {
  font-size: min(42px, calc(42 / var(--screen-sm) * 100vw));
  top: 57.5%;
}

/* .ocReportTimelineItemList*: 中央縦線に重ねる translateX を SP 用にスケール */
#contents .ocReportTimelineItemListRight {
  transform: translateX(min(-4px, calc(-8 / var(--screen-sm) * 100vw)));
}
#contents .ocReportTimelineItemListLeft {
  transform: translateX(min(9px, calc(9 / var(--screen-sm) * 100vw)));
}

/* .ocReportSchedule: 開催日程 (SP) — 寸法プロパティのみビューポート比率で上書き */
#contents .ocReportSchedule {
  width: min(275px, calc(275 / var(--screen-sm) * 100vw));
  margin: min(25px, calc(25 / var(--screen-sm) * 100vw)) auto 0 min(35px, calc(35 / var(--screen-sm) * 100vw));
}

#contents .ocReportSchedule .ocReportScheduleBadge {
  top: var(--badge-offset-top, -8%);
  right: var(--badge-offset-right, -1%);
  width: min(80px, calc(80 / var(--screen-sm) * 100vw));
}
#contents .ocReportCard[data-school="josai"] .ocReportSchedule .ocReportScheduleBadge {
  top: var(--badge-offset-top, -27%);
  right: var(--badge-offset-right, -1%);
}

#contents .ocReportSchedule .ocReportScheduleBadgeText {
  font-size: min(11px, calc(11 / var(--screen-sm) * 100vw));
}

#contents .ocReportSchedule .ocReportScheduleCampus {
  margin: 0 0 min(8px, calc(8 / var(--screen-sm) * 100vw));
  font-size: min(10px, calc(10 / var(--screen-sm) * 100vw));
}

#contents .ocReportSchedule .ocReportScheduleList li {
  font-size: min(12px, calc(12 / var(--screen-sm) * 100vw));
  margin-bottom: min(5px, calc(5 / var(--screen-sm) * 100vw));
}

/* contents .ocReportSchedule .ocReportScheduleColumnsSingle .ocReportScheduleColumnInner:nth-child(2) .ocReportScheduleList li {
  padding-top: min(1px, calc(1 / var(--screen-sm) * 100vw));
} */

#contents .ocReportSchedule .ocReportScheduleList li .ocReportScheduleListDate {
  font-size: min(9px, calc(9 / var(--screen-sm) * 100vw));
}

#contents .ocReportSchedule .ocReportScheduleList li .ocReportScheduleListTime {
  font-size: min(12px, calc(12 / var(--screen-sm) * 100vw));
}

#contents .ocReportSchedule .ocReportScheduleNote {
  font-size: min(10.5px, calc(10.5 / var(--screen-sm) * 100vw));
}

/* .ocReportCta*: CTAボタン (SP) */
#contents .ocReportCtaArea {
  margin-top: min(18px, calc(18 / var(--screen-sm) * 100vw));
}
#contents .ocReportCta {
  position: relative;
  width: min(600px,calc(600 / var(--screen-sm) * 100vw));
  margin: 0 auto;
}
#contents .ocReportCta + .ocReportCta {
  margin-top: min(12px, calc(12 / var(--screen-sm) * 100vw));
}

#contents .ocReportCtaLink {
  font-size: min(30px, calc(30 / var(--screen-sm) * 100vw));
}

#contents .ocReportCta::after {
  right: min(40px, calc(40 / var(--screen-sm) * 100vw));
  width: min(20px, calc(20 / var(--screen-sm) * 100vw));
  height: min(20px, calc(20 / var(--screen-sm) * 100vw));
}