@charset "UTF-8";
/* CSS Document */
.ir-message-title {
	padding-bottom: 1.5rem;
	padding-top: 2rem;
	position: relative;
	text-align: center;
}

.ir-message-title h1 {
	color: #f62837;
	font-size: 2.7rem;
	font-weight: 700;
}

.ir-message-title span {
	color: #f62837;
	display: inline-block;
	font-size: 1rem;
	font-weight: 700;
	line-height: 2;
	margin-top: 0rem;
}

/* ▼ 年選択プルダウン ▼ */
#content .ir-filter {
  text-align: left;
  margin: 0 auto 24px;
  width: min(100%, 900px);
}

#content .ir-filter__select {
  display: inline-block;
  position: relative;
}

#content .ir-filter__select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff url("data:image/svg+xml;utf8,<svg fill='%23666' xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path d='M4 6l4 4 4-4z'/></svg>") no-repeat right 12px center;
  background-size: 12px;
  border: 1px solid #ccc;
  padding: 10px 36px 10px 16px;
  font-size: 1rem;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#content .ir-filter__select select:hover {
  border-color: #888;
}

#content .ir-filter__select select:focus {
  outline: none;
  border-color: #1d6cf0;
  box-shadow: 0 0 0 3px rgba(29, 108, 240, 0.1);
}

/*切替*/
:root { --brand-red: #F62837; }

#content .ir-tabs {
  width: min(100%, 900px);
  margin: 0 auto 8px;
  padding: 0 16px 0 16px;
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #e5e5e5;
}

#content .ir-tab {
  appearance: none;
  background: #efefef;
  border: 1px solid #e3e3e3;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: 600;
  color: #222;
  cursor: pointer;
  position: relative;
  transition: background .15s ease, color .15s ease;
}
#content .ir-tab:hover { background: #f5f5f5; }

#content .ir-tab.is-active {
  background: #fff;
  color: #111;
}
#content .ir-tab.is-active::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 4px;
  background: var(--brand-red);
  border-radius: 3px 3px 0 0;
}

#content .ir-panel {
  width: min(100%, 900px);
  margin: 0 auto 24px;
  padding: 0 0; /* .ir-list 自体が白背景カードなので余白不要 */
}

#content .ir-panel[hidden] { display: none; }
#content .ir-panel.is-active { display: block; }

/* フィルタで消す用 */
#content .is-hidden { display: none !important; }

/*sp*/
@media (max-width: 600px) {
  #content .ir-filter {
    text-align: left;
    padding: 0 16px;
  }

  #content .ir-filter__select select {
    width: 100%;
  }
}

@media screen and (max-width: 769px) {
.ir-message-title {
	padding-bottom: 0.375rem;
	padding-top: 3.75rem;
}

.ir-message-title h1 {
	font-size: 1.5rem;
}
	
/* 共通：タブベース */
#content .ir-tabs {
  width: min(100%, 900px);
  margin: 0 auto 8px;
  padding: 0 16px;
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #e5e5e5;
  overflow-x: auto; /* ← これが横スクロール対応のポイント */
  scrollbar-width: none; /* Firefox非表示 */
}
#content .ir-tabs::-webkit-scrollbar {
  display: none; /* スクロールバー非表示 */
}

#content .ir-tab {
  flex-shrink: 0; /* ← 幅が縮まらないように */
  background: #efefef;
  border: 1px solid #e3e3e3;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: 600;
  color: #222;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap; /* 折り返さない */
}
#content .ir-tab:hover { background: #f5f5f5; }

#content .ir-tab.is-active {
  background: #fff;
  color: #111;
}
#content .ir-tab.is-active::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 4px;
  background: var(--brand-red, #F62837);
  border-radius: 3px 3px 0 0;
}

/* スマホでは少し小さめに */
@media (max-width: 600px) {
  #content .ir-tab {
    font-size: 0.9rem;
    padding: 8px 14px;
  }
}

	
/* ====== iPad・タブレット調整（768〜1024px） ====== */
@media screen and (max-width: 1024px) and (min-width: 768px) {
  .ir-message-title {
    padding-top: 5.5rem;
  }

  .ir-message-title h1 {
    font-size: 2rem;
  }

  .ir-message-title span {
    font-size: 0.95rem;
  }
}