@charset "UTF-8";
/* CSS Document */
/* スライダー全体 */
.slider {
  margin-top: -20px;
  position: relative;
  width: 100%;
  height: 90vh; /* ← 高さを90%に固定 */
  overflow: hidden;
}
/* スライド */
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  overflow: hidden; /* 背景のズーム部分を隠す */
}
.slide.active {
  opacity: 1;
}
/* 背景（ズーム対象） */
.slide .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  animation: zoomBg 8s ease-in-out; /* ← forwards を外す */
  will-change: transform; /* パフォーマンス向上 */
  background-position: top center
}
/* 各行（白帯） */
.text-line {
  display: inline-block; /* ← 横幅を文字分に合わせる */
  margin-bottom: 10px; /* 行間 */
  background: rgba(255, 255, 255, 0.56);
  padding: 0.5rem 3rem 0.5rem 9rem;
  transform: translateX(-100%);
  animation: slideInBg 1s ease forwards;
  opacity: 0;
}
/* 行を縦に積むために text-box で調整 */
.text-box {
  position: absolute;
  top: 20%;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column; /* ← 強制的に縦に並べる */
  align-items: flex-start; /* 左寄せ */
}
/* 行内のテキスト */
.text {
  font-size: 2em;
  font-weight: bold;
  color: #333;
  opacity: 0;
  animation: fadeInText 1s ease forwards;
}
/* 各行アニメーションの遅延を設定 */
.text-line:nth-child(1) {
  animation-delay: 0.5s; /* 白帯 */
}
.text-line:nth-child(1) .text {
  animation-delay: 1.2s; /* テキスト */
}
.text-line:nth-child(2) {
  animation-delay: 1.3s;
}
.text-line:nth-child(2) .text {
  animation-delay: 2s;
}
/* 白背景スライドイン */
@keyframes slideInBg {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
/* テキストフェードイン */
@keyframes fadeInText {
  to {
    opacity: 1;
  }
}
/* デフォルトはPC用画像 */
.bg1 {
  background-image: url("../orthoptic-college/img/top-back.jpg");
}
.bg2 {
  background-image: url("../orthoptic-college/img/top-back5.jpg");
}
.bg3 {
  background-image: url("../orthoptic-college/img/top-back2.jpg");
}
/* タブレット用 */
@media screen and (max-width: 900px) {
  .bg1 {
    background-image: url("../orthoptic-college/img/top-back-tb.jpg");
  }
  .bg2 {
    background-image: url("../orthoptic-college/img/top-back5-tb.jpg");
  }
  .bg3 {
    background-image: url("../orthoptic-college/img/top-back2-tb.jpg");
  }
}
/* スマホ用 */
@media screen and (max-width: 600px) {
  .bg1 {
    background-image: url("../orthoptic-college/img/top-back-sp.jpg");
  }
  .bg2 {
    background-image: url("../orthoptic-college/img/top-back5-sp.jpg");
  }
  .bg3 {
    background-image: url("../orthoptic-college/img/top-back2-sp.jpg");
  }
}
/* ドットナビゲーション */
.dots {
  position: absolute;
  top: 82%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 5;
}
.dot {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.dot.active {
  background: #fff;
  transform: scale(1.2);
}
/* ---------------------
   レスポンシブ調整
---------------------- */
/* タブレット */
@media screen and (max-width: 1024px) {
  .text-box {
    top: 20%;
    left: -25px;
    padding: 0.8rem 1rem;
  }
  .text-line {
    padding: 0.5rem 3rem 0.5rem 4rem;
    font-size: 0.9em;
  }

}
/* スマホ */
@media screen and (max-width: 600px) {
  .slider {
    height: 85vh; /* ← 高さを90%に固定 */
  }
  .text-box {
    top: 25%;
    left: -5px;
    text-align: center;
    padding: 0.6rem 0.2rem;
    max-width: 90%;
  }
  .text-line {
    font-size: 0.8em;
    padding: 0.6rem 0.8rem;
  }
}

/* ========= 共通オーバーレイ（右下固定・行ごと白半透明帯） ========= */
.slider-overlay{
  position: absolute;
  right: 0;
	bottom: 38px;
  z-index: 6;
  pointer-events: none; /* 背景クリックを邪魔しない */
}
.overlay-box{
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 右寄せ */
  gap: 10px;            /* 行間 */
}

/* 各行の白帯（テキスト幅にフィット） */
.overlay-line{
  display: inline-block;
  background: rgba(59,59,139,0.81);
  padding: .5rem 1rem;
}
.overlay-text{
  color: #fff;
  font-weight: 700;
  font-size: 2em;
  line-height: 1.25;
}
/* デフォルトは改行オフ */
br.br-md, br.br-sm { display: none; }

/* タブレット以下で br-md を有効化 */
@media (max-width: 1024px){
  br.br-md { display: inline; 
	}  
	/* inline でも改行として機能します */
}

/* スマホ以下で br-sm を有効化 */
@media (max-width: 600px){
  br.br-sm { display: inline; }
}

/* 行間を少し広げたい場合（例：+10px 相当を目安） */
.overlay-text{
  line-height: 1.5;  /* お好みで 1.4〜1.6 に */
}


/* ドットが被らないよう少し上へ（必要に応じて調整） */
.dots{ top: auto; bottom: 15%; }

@media (max-width:1024px){
  .slider-overlay{ right: 0; bottom: 10%; }
  .dots{ bottom: 15%; }
}
@media (max-width:600px){
  .slider-overlay{ right: 0; bottom: 10%; }
  .overlay-text{ font-size: 1.1em; }
  .dots{ bottom:  20%; }
}

/* ---------------------
   
---------------------- */
.circle-container {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.circle {
  width: 280px;
  height: 280px;
  background: linear-gradient(to right, #a5cbe8 0%, #ffffff 100%);
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: bold;
  font-size: 1.2rem;
  color: #000;
  line-height: 1.4;
  margin: 0 -10px; /* 重なり用 */
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}
/* 表示状態 */
.circle.show {
  opacity: 1;
  transform: translateY(0);
}
/* 表示の順番遅延 */
.circle.show:nth-child(1) {
  transition-delay: 0.2s;
}
.circle.show:nth-child(2) {
  transition-delay: 0.4s;
}
.circle.show:nth-child(3) {
  transition-delay: 0.6s;
}
/* スマホ対応（縦並び） */
@media screen and (max-width: 768px) {
  .circle {
    width: 200px;
    height: 200px;
  }
  .circle-container {
    flex-direction: column;
    align-items: center;
  }
  .circle {
    margin-bottom: -40px;
  }
  .circle:nth-child(1) {
    margin-left: 0;
  }
  .circle:nth-child(2) {
    margin-left: -100px;
  }
  .circle:nth-child(3) {
    margin-left: 0px;
  }
}
@import "https://use.fontawesome.com/releases/v5.13.0/css/all.css";
.btn-wrap {
  margin: 80px auto;
  text-align: center; /* 中央寄せ */
}
.btn, a.btn, button.btn {
  display: inline-block; /* 中央寄せ可能にする */
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
  width: auto; /* ボタンの幅は内容に合わせる */
}
a.btn-c {
  font-size: 1.3rem;
  position: relative;
  padding: 1rem 2rem 1rem 2.5rem;
  color: #fff;
  background: #3b3b8b;
}
a.btn-c:hover {
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  color: #fff;
  background: #3b3b8b;
}
a.btn-c:hover:before {
  left: 2rem;
}
@media screen and (max-width: 768px) {
  a.btn-c {
    font-size: 1.1rem;
  }
}
/* 見出し全体のラッパ */
.headline {
  padding: 15px 0 2px; /* 上下余白（任意） */
  height: auto;
  width: auto;
  background: linear-gradient(to right, #3a8fd4 0%, #ffffff 100%);
}
/* 見出し本体 */
.headline-h2 {
  display: inline-block; /* 横幅autoにする */
  min-width: 400px;
  font-size: 2rem;
  float: left;
  text-align: left;
}
.ribbon12-wrapper {
  display: block;
  position: relative;
  margin: 15px auto;
  padding: 10px 0;
  width: auto;
  background: #F5F5F5;
}
.ribbon12 {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  padding: 10px 25px;
  margin: 0 0 0 -20px;
  width: calc(100% + 20px);
  font-size: 22px;
  color: white;
  background: #3b3b8b;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
.ribbon12:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px #6081b7;
}
.pd-box {
  padding: 20px 30px
}
/* 全体を中央寄せ */
.circle-wrapper {
  display: flex;
  justify-content: center; /* 横中央 */
  align-items: center; /* 縦中央（必要なら） */
  flex-direction: column; /* 縦に積む */
  position: relative;
  text-align: center;
}
/* 円 */
.circle-title-top {
  justify-content: center;
  z-index: 10;
  position: relative;
  margin-top: -160px;
}
.circle-title-top-text {
  padding: 10px;
  background: #FFFFFF
}
.circle-title {
  z-index: 1;
  justify-content: center;
  width: 420px;
  height: 420px;
  border: 3px dashed #EBE8E8;
  border-radius: 50%;
  font-weight: bold;
  text-align: center;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.8s ease-out;
  margin: -40px auto 20px; /* 下に余白 */
}
/* サブタイトル */
.subtitle {
  margin-bottom: 10px;
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.6s ease-out;
}
.subtitle.show {
  opacity: 1;
  transform: translateY(0);
}
@media screen and (max-width: 1024px) {
  /* 全体を中央寄せ */
  .circle-wrapper {
    display: flex;
    justify-content: center; /* 横中央 */
    flex-direction: column; /* 縦に積む */
    position: relative;
    text-align: center;
    margin-bottom: -70px;
  }
  .circle-title-top {
    margin-top: -40px
  }
  .circle-title {
    display: flex;
    justify-content: center;
    padding-bottom: 50px;
    width: 350px;
    height: 350px;
    border: 3px dashed #EBE8E8;
    border-radius: 50%;
    font-weight: bold;
    text-align: center;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s ease-out;
    margin: -20px auto 50px; /* 下に余白 */
  }
  /* サブタイトル */
  .subtitle {
    margin-top: -30px;
  }
}
@media screen and (max-width: 768px) {
  /* 全体を中央寄せ */
  .circle-wrapper {
    display: flex;
    justify-content: center; /* 横中央 */
    flex-direction: column; /* 縦に積む */
    position: relative;
    text-align: center;
    margin-bottom: -70px;
  }
  .circle-title-top {
    margin-top: -40px
  }
  .circle-title {
    display: flex;
    justify-content: center;
    padding-bottom: 70px;
    width: 330px;
    height: 330px;
    border: 3px dashed #EBE8E8;
    border-radius: 50%;
    font-weight: bold;
    text-align: center;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s ease-out;
    margin: -20px auto 50px; /* 下に余白 */
  }
  /* サブタイトル */
  .subtitle {
    margin-top: -30px;
  }
}
/* 表示されたらふわっと拡大 */
.circle-title.show {
  opacity: 1;
  transform: scale(1);
}
/* サブタイトル＋タグのボックス */
.circle-sub-box {
  text-align: center;
  margin-top: 100px;
}
/* タグ3つの縦並び＆中央寄せ */
.btn-group.stagger {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* タグ */
.btn-group.stagger .tag {
  background: #3b3b8b;
  color: #fff;
  padding: 5px 10px;
  width: 160px;
  margin: 5px 0;
  font-size: 1rem;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
  font-weight: bold
}
/* 表示状態 */
.btn-group.stagger.show .tag {
  opacity: 1;
  transform: translateY(0);
}
/* 順番ディレイ */
.btn-group.stagger.show .tag:nth-child(1) {
  transition-delay: 0.2s;
}
.btn-group.stagger.show .tag:nth-child(2) {
  transition-delay: 0.4s;
}
.btn-group.stagger.show .tag:nth-child(3) {
  transition-delay: 0.6s;
}
.activity-box {
  position: relative;
  z-index: 3;
  margin-bottom: 30px
}
.bg .bg-wrap {
  position: relative;
  display: inline-block;
  opacity: 0; /* 最初は非表示 */
  transition: opacity 0.5s ease-in-out; /* アニメーションがなめらかに出るように */
  width: 50%;
  margin: 150px 0 100px;
  text-align: center;
}
.bg.is-animated .bg-wrap {
  opacity: 1; /* is-animated クラスが付いたら表示 */
}
.bg.is-animated .bg-wrap::before {
  animation: bg 9.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  background: linear-gradient(to right, #3b3b8b 0%, #588DBF 80%, #8EB9E2 100%);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: left center;
}
.bg .bg-wrap .inn {
  color: #fff;
  display: inline-block;
  font-size: 2rem;
  font-weight: bold;
  padding: 5px 0;
  position: relative;
  z-index: 1;
}
@keyframes bg {
  0% {
    opacity: 0;
    transform: scaleX(0) translateX(-5%);
  }
  30% {
    transform: scaleX(1) translateX(0);
  }
  100% {
    transform: scaleX(1) translateX(0);
  }
  30%, 100% {
    opacity: 1;
  }
}
/* 活動内容 */
.headline2 {
  display: flex;
  align-items: center;
  margin: 100px 0 30px;
}
.headline2-text {
  font-size: 1.5rem;
  font-weight: bold;
  margin-right: 15px;
  white-space: nowrap;
}
.headline2-line {
  flex-grow: 1;
  height: 0;
}
@media (max-width: 1024px) {
  .bg .bg-wrap {
    width: 90%;
    margin: 80px 0 80px;
    text-align: center;
  }
}
@media (max-width: 640px) {
  .bg .bg-wrap {
    width: 100%;
    margin: 80px 0 80px;
    text-align: center;
  }
  .bg .bg-wrap .inn, .headlin2e-text {
    font-size: 1.2rem;
  }
}
/* 活動内容コンテンツ */
.content-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 10%; /* 10%の間隔を確保 */
  flex-wrap: wrap;
}
.content-box {
  flex: 1 1 calc(45% - 10px); /* 横幅は45%にし、gapとバランスを取る */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px;
}
.image-wrapper {
  margin-top: auto;
}
.image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}
/* スマホ・タブレット対応（600px以下） */
@media screen and (max-width: 600px) {
  .content-wrapper {
    flex-direction: column;
    gap: 20px;
  }
  .content-box {
    flex: none;
    width: 100%;
  }
}
.sec-box span {
  display: block;
}
/* 親のrowをflexにして、高さを揃えるベースに */
.row {
  display: flex;
  flex-wrap: wrap;
}
/* .triangle-box を縦並び用に */
.triangle-box {
  display: flex;
  flex-direction: column;
}
/* ===== ベース設定 ===== */ :root {
  --text: #1a1a1a;
  --muted: #6b7280;
  --accent: #0a8d86; /* 緑がかった見出し色 */
  --accent-deep: #0b6a65;
  --ink: #111;
  --paper: #fff;
  --line: #e6e6e6;
  --black: #111;
  --orange: #f57f2a;
  --darkorange: #e86a00;
}
* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
}
.text-gothic {
  font-family: YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, Meiryo, "ＭＳ ゴシック", sans-serif;
  color: var(--text);
  background: var(--paper);
  line-height: 1.65;
}
/* ===== レイアウト ===== */
.committee {
  max-width: 1120px;
  padding: clamp(16px, 2vw, 32px);
  margin: 0 auto 80px;
}
.header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.header__dept {
  margin: 3em 0 0;
  letter-spacing: .1em;
  font-weight: 600;
  font-size: 2em;
  line-height: 1em
}
.header__title {
  font-size: clamp(28px, 4.6vw, 48px);
  font-weight: 800;
}
.header__date {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.divider {
  border: 0;
  border-top: 2px solid var(--line);
  margin: 16px 0 24px;
}
.divider--light {
  border-top: 1px dashed var(--line);
  margin: 24px 0;
}
/* ===== バッジ ===== */
.badge {
  display: inline-block;
  padding: .35em .7em;
  border-radius: 0px;
  font-weight: 700;
  letter-spacing: .15em;
  font-size: 1.1rem;
  margin-bottom: 8px;
  background: #3b3b8b;
  color: #fff;
}
/* ===== パネル帯（上段） ===== */
/* PC表示で2列にする */
.two-col {
  display: grid;
  gap: 20px;
  margin-bottom: 40px
}
/* スマホでは縦並び */
@media (max-width: 767px) {
  .two-col {
    grid-template-columns: 1fr;
  }
}
/* タブレット以上で横並び2列 */
@media (min-width: 768px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}
/* PCで事務局メンバーを横並びに */
.two-col-people {
  display: grid;
  gap: 16px;
  margin-bottom: 40px
}
@media (max-width: 767px) {
  .two-col-people {
    grid-template-columns: 1fr; /* スマホでは縦並び */
  }
}
@media (min-width: 768px) {
  .two-col-people {
    grid-template-columns: 1fr 1fr; /* PCでは横並び2列 */
  }
}
.band {
  display: grid;
  gap: clamp(16px, 2.5vw, 28px);
  margin-bottom: 40px
}
.band--top {
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .band--top {
    grid-template-columns: 1.1fr .8fr 1.1fr;
  }
}
.panel {
  padding: 16px 18px;
  background: #F9F9F9;
}
.people {
  list-style: none;
  padding: 0;
  margin: 0;
}
.people li + li {
  margin-top: 8px;
}
.name {
  margin: 0;
  font-weight: 700;
  font-size: 1.2em;
  letter-spacing: .06em;
  color: #464646;
}
.meta {
  margin: -.2em 0 0;
  color: var(--muted);
  font-size: .85rem;
  letter-spacing: -0.01em;
}
.katagaki {
  color: #494949;
  font-size: 82%;
  padding-right: 15px;
}
.katagaki-r {
  color: #494949;
  font-size: 82%;
  padding-left: 15px;
}
/* ===== ブロック（中段・下段） ===== */
.block {
  margin-top: 28px;
}
.block__title {
  font-family: YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, Meiryo, "ＭＳ ゴシック", sans-serif;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 1.15rem;
}
.note {
  color: var(--muted);
}
.note--center {
  text-align: center;
  margin: 14px 0 0;
}
/* ===== グリッド & カード ===== */
.grid {
  --min: 240px;
  display: grid;
  gap: 0 14px;
  grid-template-columns: repeat(auto-fill, minmax(var(--min), 1fr));
}
.grid--3 {
  --min: 260px;
}
.grid--4 {
  --min: 240px;
}
/* 可変2列ベース（PC/タブレットはmin幅で自動折り返し） */
.grid--2 {
  --min: 300px;
} /* お好みで 260~340px などに調整可 */
/* スマホ時は必ず2列固定 */
@media (max-width: 600px) {
  .grid.grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px; /* モバイルの余白を少し詰めたい場合 */
  }
}
/* 共通カード */
.card {
  padding: 14px 16px;
  background: #F9F9F9;
  position: relative;
  margin-bottom: 14px
}
/* 左端のオレンジ帯 */
.card--orange {
  border-left: 10px solid #f57f2a; /* オレンジ */
  padding-left: 12px; /* テキストが帯に重ならないよう調整 */
}
/* ===== CTA 帯 ===== */
.cta {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 16px;
  background: var(--orange);
  color: #fff;
  font-weight: 800;
  letter-spacing: .08em;
}
.cta__icon {
  font-size: 1.4rem;
}
.cta__text {
  font-size: clamp(16px, 2.4vw, 22px);
}
/* 細かな余白調整 */
.band .meta, .card .meta {
  line-height: 1.55;
}
.college-midashi-big {
  font-size: 2.4rem;
  color: #FFFFFF;
  font-weight: bold;
  margin-bottom: -10px
}
.college-midashi1 {
  font-size: 3rem;
  font-family: YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, Meiryo, "ＭＳ ゴシック", sans-serif;
}
.college-midashi2 {
  font-size: 1.8rem;
  color: #3b3b8b;
  font-family: YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, Meiryo, "ＭＳ ゴシック", sans-serif;
}
.college-midashi3 {
  color: #3b3b8b;
  font-size: 1.8rem;
  font-family: YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, Meiryo, "ＭＳ ゴシック", sans-serif;
  font-weight: bold;
}
.college-midashi4 {
  color: #3b3b8b;
  font-size: 1.5rem;
  font-family: YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, Meiryo, "ＭＳ ゴシック", sans-serif;
  font-weight: bold;
}
.college-midashi5 {
  color: #3b3b8b;
  font-size: 1.2rem;
  margin-bottom: 20px;
  font-family: YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, Meiryo, "ＭＳ ゴシック", sans-serif;
  font-weight: bold;
}
.college-midashi-tate-blue {
  text-decoration: none;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border-left: solid 6px #3B3B8B;
  color: #3b3b8b;
  font-size: 1.8rem;
}
@media (max-width: 640px) {
  .college-midashi-big {
    font-size: 2rem;
    color: #C2C2C2
  }
  .college-midashi1 {
    font-size: 1.8rem !important;
    font-weight: 700;
    letter-spacing: 0.1em
  }
  .college-midashi2 {
    font-size: 1.3rem;
  }
  .college-midashi3 {
    font-size: 1.2rem
  }
  .college-midashi4 {
    font-size: 1.2rem;
  }
  .college-midashi5 {
    font-size: 1.1rem;
  }
  .college-midashi-tate-blue {
    font-size: 1.3rem;
  }
}
img {
  width: auto;
  margin: 0 auto;
}
@media (max-width: 640px) {
  img {
    padding: 0 5%;
    margin: 0 auto;
  }
}