@charset "UTF-8";

/* =========================================================
   【1】情報システム共通スタイル
========================================================= */
body.system {
  background-color: #e6e6e6; /* 淡いグレー系 */
  color: #333;              /* 文字は落ち着いた濃いグレー */
}
.system header .logo,
.system header .nav-menu a,
.system footer ,
.system .footer-credits,
.system .designer-info .name,
.system .affiliation,
.system .circle-details summary {
  color: #fff;  /* systemページは文字を白 */
}
.system header .nav-menu a::after{
  background: #fff;
}
.system .circle-details summary:hover {
  color: #ccc;
}

.system section {
  margin: 40px 0;
  padding: 20px;
  background: #fafafa;   /* 薄いグレー背景 */
  border-radius: 8px;
}
.system h2 {
  font-size: 1.6rem;
  margin-bottom: 15px;
  border-left: 4px solid #555; /* 濃いグレーでアクセント */
  padding-left: 8px;
}
.system main a {
  color: #555;
  font-weight: bold;
  text-decoration: none;
}
.system main a:hover {
  text-decoration: underline;
}

/* お知らせリスト */
.system-news ul {
  list-style: disc;
  padding-left: 1.2em;
  margin: 1.0em 0;
}
.system-news li {
  margin: 10px 0;
}

/* 各種カード（申請・マニュアル・ソフト共通） */
.system-card-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.system-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.system-card h3 {
  margin: 0 0 20px;
  color: #555;
  text-align: center;
}
.system-card ul {
  list-style: disc;
  padding-left: 1.2em;
  margin-bottom: 20px;
}
.system-card li { margin-bottom: 10px; }
.system-card a {
  color: #333;
  text-decoration: none;
  font-weight: 500;
}
.system-card a:hover { text-decoration: underline; }

/* カード幅の個別設定 */
.system-card.half { width: calc(50% - 10px); }
.system-card.third { width: calc(33.333% - 10px); }

/* アコーディオン共通 */
.accordion {
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.accordion-header {
  margin: 0;
  padding: 1rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.accordion-header .arrow {
  border: solid #666;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 4px;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}
.accordion-header.active .arrow {
  transform: rotate(-135deg);
}
.accordion-body {
  max-height: 0;
  overflow: hidden;
  background: #fff;
  transition: max-height 0.3s ease;
  padding: 0 1rem;
}
.accordion-body.open {
  padding: 1rem;
}

@media (max-width: 768px) {
  .system-card.half,
  .system-card.third {
    width: 100%;
  }
}

/* =========================================================
   【2】無線LAN（Wi-Fi）専用スタイル
========================================================= */
/* ▼ Wi-Fi共通・ベースの白い箱と見出し */
.wifi-step,
.wifi-step-card,
.wifi-spec-card,
.wifi-notice-card {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.wifi-common h3,
.wifi-step h3,
.wifi-spec-card h3,
.wifi-notice-card h3 {
  margin-top: 0;
  color: #333;
  border-left: 4px solid #555;
  padding-left: 10px;
}
.wifi-common h3, .wifi-step h3 { font-size: 18px; }
.wifi-icon { width: 20px; height: 20px; vertical-align: -4px; }
.wifi-title { color: #333; }
.wifi-common img { margin: 0; width: 100%; }

/* ▼ デバイス別ジャンプメニュー */
.wifi-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0; }
.system main .wifi-nav a {
  background: #555;
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
}
.system main .wifi-nav a:hover { opacity: 0.85; }

/* ▼ 手順ブロック・スペック表の個別余白 */
.wifi-step { margin: 25px 0 40px; }
.wifi-step-card { margin-top: 30px; }
.wifi-spec-card, .wifi-notice-card { margin-bottom: 30px; }
.wifi-step p { margin: 0; line-height: 1.6; color: #333; }
.wifi-step ul, .wifi-spec-card ul { list-style: none; padding: 0; margin: 0; }
.wifi-step-image { margin: 15px 0; text-align: center; }
.wifi-step-image img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid #ddd;
}

/* ▼ Gridを使ったラベル揃え（手順・スペック表） */
:root { --wifi-label-width: 7em; }
.wide-label { --wifi-label-width: 10em; }
.xwide-label { --wifi-label-width: 14em; }
.narrow-label { --wifi-label-width: 6em; }

/* ▼ 接続エリアリスト（Wi-Fi） */
.wifi-common ul { list-style: disc; padding-left: 1.2em; margin-bottom: 30px; }
.wifi-common li { margin-bottom: 10px; line-height: 1.6; position: relative; }
.wifi-common li::marker { color: #333; font-size: 1.1em; }

.wifi-step li {
  display: grid;
  grid-template-columns: var(--wifi-label-width) 1fr;
  column-gap: 0.5rem;
  margin-bottom: 10px;
  line-height: 1.6;
  font-weight: bold;
}
.wifi-step li span { font-weight: normal; color: #333; min-width: 0; }

.wifi-spec-card li { margin-bottom: 10px; line-height: 1.6; }
.wifi-spec-card li span {
  font-weight: bold;
  color: #333;
  display: inline-block;
  min-width: 8em;
}

/* ▼ 注意書きリスト（Wi-Fi） */
.wifi-notice-card ul { list-style: disc; padding-left: 1.2em; margin-bottom: 30px; }
.wifi-notice-card li { margin-bottom: 10px; line-height: 1.6; position: relative; }
.wifi-notice-card li::marker { color: #333; font-size: 1.1em; }

/* ▼ SSIDカード */
.ssid-cards { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; }
.ssid-card {
  flex: 1 1 calc(50% - 20px);
  padding: 20px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.ssid-card h3 { margin-top: 0; font-size: 18px; color: #004080; }
.ssid-card.student { border-left: 6px solid #4aa3df; }
.ssid-card.classroom { border-left: 6px solid #f5a623; }

/* ▼ Wi-Fiセクションのスマホ対応 */
@media (max-width: 768px) {
  .wifi-nav a { font-size: 13px; padding: 8px 12px; }
  .wifi-step li, .wifi-spec-card li {
    display: block;
    padding-left: 1em;
    text-indent: -1em;
  }
  .wifi-step li span, .wifi-spec-card li span {
    display: block;
    margin-bottom: 2px;
    padding-left: 0;
    min-width: 0;
  }
  .ssid-card { flex: 1 1 100%; }
}

/* =========================================================
   【3】見和キャンパス ソフトウェア提供サービス 専用スタイル
========================================================= */
.fs-common h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #333;
  border-left: 4px solid #555;
  padding-left: 10px;
}
.fs-common h4 {
  margin: 20px 0;
  background: #e6e6e6;
  padding: 5px 12px;
  border-radius: 20px;
}
.fs-common ul { list-style: disc; padding-left: 1.2em; margin-top: 10px; margin-bottom: 20px;}
.fs-common .link-wrap { text-align: left; margin: 20px 10px;}

/* ボタン本体のデザイン */
.btn-falink {
  display: inline-block;       /* リンクをブロック状にする */
  background-color: #333;   /* ボタンの背景色 */
  color: #ffffff !important;   /* 文字色（白） */
  padding: 12px 30px;          /* ボタン内の余白（上下 左右） */
  text-decoration: none;       /* 下線を消す */
  border-radius: 5px;          /* 角を少し丸める */
  font-weight: bold;           /* 文字を太く */
  box-shadow: 0 4px 0 #000;    /* ボタンの下に少し厚みを出す */
  transition: all 0.3s ease;   /* 変化を滑らかにする */
}

/* マウスを乗せた時の動き（ホバー） */
.btn-falink:hover {
  background-color: #555;      /* 少し明るい */
  transform: translateY(2px);  /* 少し下に沈む（押した感） */
  box-shadow: 0 2px 0 #222;    /* 影を薄くする */
  text-decoration: none;       /* ホバー時も下線なし */
}

/* =========================================================
   【4】学習室 印刷ポイントマニュアル 専用スタイル
========================================================= */

/* 印刷注意警告ブロック */
.print-alert {
  border-left: 4px solid #dd6b20;
  background-color: #fffaf0;
  margin-bottom: 30px;
  padding: 15px;
  border-radius: 6px;
  border-top: 1px solid #fbd38d;
  border-right: 1px solid #fbd38d;
  border-bottom: 1px solid #fbd38d;
}
.print-alert h3 {
  color: #dd6b20;
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 8px;
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.print-alert p {
  font-size: 0.85rem;
  color: #7b341e;
  line-height: 1.6;
  margin: 0;
}

/* 3列基本ルールグリッド */
.print-grid-3col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 20px;
}

/* 消費ポイントレートグリッド */
.print-grid-4col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

/* 年間ポイント表示用 */
.print-pt-large {
  font-size: 2rem;
  font-weight: 800;
  color: #333;
  margin: 10px 0;
  font-family: monospace;
}
.print-pt-large span {
  font-size: 0.8rem;
  font-weight: normal;
  color: #718096;
}

/* 物理枚数ルール強調用 */
.print-rule-highlight {
  font-size: 0.95rem;
  font-weight: bold;
  color: #b7791f;
  margin: 15px 0;
}
.print-rule-highlight span {
  background: #fffaf0;
  border: 1px solid #feebc8;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
}

/* 用紙サイズリスト装飾 */
.print-size-wrap {
  font-size: 1.1rem;
  font-weight: bold;
  color: #333;
  margin: 15px 0;
}
.print-size-badge {
  background: #edf2f7;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  font-size: 0.85rem;
}
.print-size-separator {
  color: #a0aec0;
  font-size: 0.8rem;
  font-weight: normal;
  margin: 0 4px;
}

/* 消費レートカード個別レイアウト */
.print-rate-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  margin: 0;
}
.print-rate-card strong {
  font-weight: bold;
  font-size: 0.85rem;
  color: #2d3748;
  display: block;
}
.print-rate-card span.print-rate-note {
  font-size: 0.75rem;
  color: #a0aec0;
}
.print-rate-card span.print-rate-value {
  font-family: monospace;
  font-size: 1.25rem;
  font-weight: bold;
  color: #333;
}
.print-rate-card span.print-rate-unit {
  font-size: 0.8rem;
  font-weight: normal;
  color: #718096;
}

/* エコアドバイスボックス */
.print-eco-box {
  margin-top: 20px;
  padding: 12px 15px;
  background-color: #f0fff4;
  border: 1px solid #c6f6d5;
  border-radius: 6px;
  font-size: 0.8rem;
  color: #22543d;
  line-height: 1.6;
}
.print-eco-box i {
  color: #38a169;
  margin-right: 4px;
}

/* アコーディオンリストの親ラッパー */
.print-faq-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 独立した専用のFAQアコーディオン詳細 */
.print-faq-details {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0;
}
.print-faq-details summary {
  padding: 15px;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  background: #fafafa;
  color: #2d3748;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid transparent;
  transition: background-color 0.2s;
}
.print-faq-details[open] summary {
  border-bottom: 1px solid #e2e8f0;
}
.print-faq-details summary:hover {
  background: #f1f5f9;
}
/* デフォルトの三角マーカーを非表示にする */
.print-faq-details summary::-webkit-details-marker {
  display: none;
}

/* FAQ Qマーク用（見やすく明るい色に） */
.print-faq-q-badge {
  background: #e6fffa;
  color: #008080;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: bold;
  flex-shrink: 0;
}

/* FAQ 回答エリア */
.print-faq-content {
  padding: 15px;
  font-size: 0.85rem;
  color: #4a5568;
  line-height: 1.6;
  background-color: #ffffff;
}

/* お問い合わせ先フッターカード */
.print-contact-card {
  background-color: #fafafa;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 25px;
  text-align: center;
  margin: 40px 0 20px 0;
}
.print-contact-card h4 {
  font-size: 0.95rem;
  font-weight: bold;
  color: #2d3748;
  margin-bottom: 8px;
}
.print-contact-card p {
  font-size: 0.8rem;
  color: #718096;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

/* メイン領域調整用 */
.system main h2.print-section-title {
  margin-top: 30px;
}

/* レスポンシブ調整 */
@media (min-width: 768px) {
  .print-grid-3col {
    grid-template-columns: repeat(3, 1fr);
  }
  .print-grid-4col {
    grid-template-columns: repeat(4, 1fr);
  }
}