/* =================================
------------------------------------
  Riddle - Portfolio
  Version: 1.0
 ------------------------------------ 
 ====================================*/

/*------------------------
  teacher メインビジュアル
--------------------------*/
#header-container {
	background-color: #FFF;
}

#teacher-photo-section {
	top:0;
    left: 0;
	position: fixed;
	display: block;
	height: 800px;
	width: 100%;
	background:url("../img/second/bg-teacher.jpg")top center no-repeat;
	background-size:cover;
	animation: fadeIn 3.5s ease 0s 1 normal;
    -webkit-animation: fadeIn 3.5s ease 0s 1 normal;
	z-index: -10;!important;
}
@media only screen and (max-width: 1000px) {
#teacher-photo-section {
	top:100px;
	height: 650px;
	background:url("../img/second/bg-teacher_sp.jpg") no-repeat;
	background-size:contain;
	background-color: #194f9c;
}
}
@media only screen and (max-width: 750px) {
#teacher-photo-section {
	top:100px;
	height: 500px;
	background:url("../img/second/bg-teacher_sp.jpg") no-repeat;
	background-size:contain;
	background-color: #194f9c;
}
}

/*------------------------
  teacher-introduction
--------------------------*/
#teacher-introduction {
	max-width: 1300px;
	width: 98%;
	margin-top:-100px;
	background: #FFFFFF;
	position:relative;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 30px;
	display: block;
}
@media only screen and (max-width: 750px) {
#teacher-introduction {
	width: 100%;
}
}
#teacher-introduction h3 {
	width: 100%;
	padding: 60px 20px 0;
	font-size: 3.0rem;
	line-height: 1.4;
	letter-spacing: 0.07em;
	font-family: yu-mincho-pr6n, sans-serif;
	box-sizing:border-box;/*paddingでwidthを広げない処理*/
}
@media only screen and (max-width: 750px) {
#teacher-introduction h3 {
	font-size: 2rem;
	padding: 40px 5px 0px;
	letter-spacing: 0.07em;
}
}
#teacher-introduction h4 {
	font-size: 2.2rem;
	line-height: 1.4;
	padding: 10px 0 0;
	letter-spacing: 0.07em;
	font-family: yu-mincho-pr6n, sans-serif;
	box-sizing:border-box;/*paddingでwidthを広げない処理*/
}
@media only screen and (max-width: 750px) {
#teacher-introduction h4 {
	font-size: 1.7rem;
	padding: 5px 0 5px;
	letter-spacing: 0.07em;
}
}
#teacher-introduction p {
	padding: 20px 20px 0px;
	font-size: 1.8rem;
	font-family: yu-mincho-pr6n, sans-serif;
	line-height: 2;
}
@media only screen and (max-width: 750px) {
#teacher-introduction p {
	font-size: 1.4rem;
	padding: 10px 20px 0;
	text-align: left;
	line-height: 1.5;
}
}

/*------------------------
  teacher-contents
--------------------------*/

.teacher-contents-container {
	max-width: 1300px;
	width: 98%;
	background: #FFF;
	margin-left: auto;
	margin-right: auto;
	box-sizing:border-box;/*paddingでwidthを広げない処理*/
	padding: 10px 20px 30px;
}
@media only screen and (max-width: 750px) {
.teacher-contents-container {
	width: 100%;
	padding: 10px 8px;
}
}
/* コンテナ */
.events {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px 16px 40px;
  box-sizing: border-box;
}

/* 行：左右ピッタリ密着（gap:0） */
.event-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: stretch;
  gap: 0;
  margin: 12px 0 28px; /* 縦間隔は半分に調整済み */
  overflow: hidden;
  min-height: 360px;
}

/* 偶数行は左右反転（PC・タブレットのみ） */
.event-row:nth-child(even) .event-media   { order: 2; }
.event-row:nth-child(even) .event-content { order: 1; }

/* 画像面 */
.event-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* テキスト面 */
.event-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 48px;
  gap: 20px;              /* ★ 追加：本文とピルの間隔を確実に確保 */
}

/* 奇数行＝左寄せ、偶数行＝右寄せ（PC・タブレット） */
.event-row:nth-child(odd)  .event-content { text-align: left;  align-items: flex-start; }
.event-row:nth-child(even) .event-content { text-align: right; align-items: flex-end; }

/* 文章 */
.event-lead {
  margin: 0;              /* ★ 変更：余白は gap で管理するため 0 に */
  font-size: 16px;
  line-height: 1.9;
}

/* ピル（タグ） */
.event-pill {
  display: inline-block;
  width: auto;            /* ★ 追加：横いっぱいへの拡張を明示的に防止 */
  padding: 6px 16px;      /* 少しだけ高さを控えめに（好みで 8px でも可） */
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  max-width: 90%;         /* 長文時の回り込み対策（任意） */
}
.pill-yellow { background:#E8F18F; color:#2E3A00; }
.pill-blue   { background:#CFE0F3; color:#0D2E57; }
.pill-green   { background:#91CEB0; color:#0D2E57 }
.pill-purple   { background:#C38FDE; color:#0D2E57 }

/* スマホ対応：縦並びに変更（画像→テキスト） */
@media (max-width: 768px) {
  .events {
    padding: 10px 8px 20px;
  }
  .event-row {
    grid-template-columns: 1fr;
    min-height: 0;
    margin: 16px 0 36px;
  }
  /* 順番統一（画像が上・テキストが下） */
  .event-row .event-media   { order: 1 !important; }
  .event-row .event-content { order: 2 !important; }

  /* 中央寄せ＋コンパクト余白 */
  .event-content {
    text-align: center !important;
    align-items: center !important;
    padding: 24px;
    gap: 16px;            /* ★ 追加：SP時は少しタイトに */
  }

  .event-lead {
    margin: 0;            /* gap管理 */
    font-size: 13px;
    line-height: 1.9;
  }
}