@charset "UTF-8";
@import url("variables.css");
/****************************************
1.COMMON
2.SUB-COMMON
3.BUTTON-COMMON
4.TEMPLATE
5.HEADER
6.FOOTER
7.PAGENATION
8.MODAL
*****************************************/
/****************************************
1.COMMON
*****************************************/
/* 全体のリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  margin: 0;
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  height: 100%;
  margin: 0;
  padding: 64px 0 0 0;
  background-color: #fff;
}

/* ページ内遷移 ヘッダー分 引く*/
:root {
  --header-height: 64px;
}

/* モーダル表示時にbodyのスクロールを無効にするクラス */
body.modal-open {
  overflow: hidden;
  height: 100vh;
}

.flex {
  display: flex;
}

.pc {
  display: block;
}

.sp {
  display: none;
}

img {
  max-width: 100%;
  height: auto;
  width: auto;
  overflow: hidden;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}

/* clearfix */
.clearfix:after {
  /*float解除*/
  display: block;
  clear: both;
  height: 0px;
  visibility: hidden;
  content: ".";
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: 0.04em;
}

p {
  line-height: 1.8;
  letter-spacing: 0.04em;
}

a {
  letter-spacing: 0.04em;
}

.clearfix {
  min-height: 1px;
  /*IE6 7用*/
}

/* IE6 */
* html .clearfix {
  zoom: 1;
}

/* IE7 */
*:first-child + html .clearfix {
  zoom: 1;
}

.block {
  display: block;
}

strong {
  font-weight: bold !important;
}

a.button-common {
  background-color: #7eccc2;
  border-radius: 24px;
  padding: 4px 24px 6px 24px;
  color: #fff;
  font-size: 1.6rem;
  border: 1px solid #62bcad;
}

a.button-common:hover {
  background-color: #62bcad;
  text-decoration: none;
}

a.button-common-base {
  background-color: #7eccc2;
  border-radius: 24px;
  padding: 4px 24px 6px 24px;
  color: #fff;
  font-size: 1.6rem;
  border: 1px solid #62bcad;
}

a.button-common-base:hover {
  background-color: #62bcad;
  text-decoration: none;
}

a.button-green {
  border-radius: 24px;
  padding: 6px 28px 8px 36px;
  color: #232323;
  font-size: 1.6rem;
  border: 1px solid #b2ddd6;
  background: #f2faf9 url(../img/buying-info/arrow_1.svg) no-repeat left 12px center/10px auto;
}

a.button-green:hover {
  background-color: #d8e5e4;
  text-decoration: none;
}

.thumb-img {
  transition: opacity 0.2s ease;
}
.thumb-img:hover {
  opacity: 0.8;
}

.anchor-target {
  scroll-margin-top: 104px; /* ヘッダーの高さ分だけずらす */
}

.border-top {
  border-top: 1px solid var(--cls-gry);
}

.border-bottom {
  border-bottom: 1px solid var(--cls-gry);
}

.borde-none {
  border: none;
}

.mat-0 {
  margin-top: 0 !important;
}

.mat-8 {
  margin-top: 8px !important;
}

.mat-16 {
  margin-top: 16px !important;
}

.mat-24 {
  margin-top: 24px !important;
}

.mat-32 {
  margin-top: 32px !important;
}

.mat-40 {
  margin-top: 40px !important;
}

.mat-48 {
  margin-top: 48px !important;
}

.mat-64 {
  margin-top: 64px !important;
}

.mat-80 {
  margin-top: 80px !important;
}

.mab-8 {
  margin-bottom: 8px !important;
}

.mab-16 {
  margin-bottom: 16px !important;
}

.mab-24 {
  margin-bottom: 24px !important;
}

.mab-32 {
  margin-bottom: 32px !important;
}

.pat-0 {
  padding-top: 0;
}

.pat-16 {
  padding-top: 16px;
}

.pat-24 {
  padding-top: 24px;
}

.pat-40 {
  padding-top: 24px;
}

.pat-48 {
  padding-top: 48px;
}

.pat-60 {
  padding-top: 64px;
}

.pat-72 {
  padding-top: 72px;
}

.pab-8 {
  padding-bottom: 8px;
}

.pab-16 {
  padding-bottom: 16px;
}

.pab-24 {
  padding-bottom: 24px;
}

.pab-32 {
  padding-bottom: 32px;
}

.pab-40 {
  padding-bottom: 40px;
}

.pab-64 {
  padding-bottom: 64px !important;
}

.pab-80 {
  padding-bottom: 80px;
}

.pab-120 {
  padding-bottom: 120px;
}

.pab-160 {
  padding-bottom: 160px;
}

.center {
  text-align: center;
}

/****************************************
2.SUB-COMMON
*****************************************/
/* ヘッダーで固定 */
.pc-nav.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #fff;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

/****************************************
6.FOOTER
*****************************************/
footer {
  height: 260px;
  background-color: #eaeaea;
}
footer div.footer-box {
  width: var(--width-wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 660px 1fr;
  gap: 16px;
  padding: 62px 0;
  border-bottom: 1px solid #d6d6d6;
}
footer div.footer-box div.logo {
  padding-top: 24px;
}
footer div.footer-box div.logo img {
  width: 122px;
}
footer div.footer-box div.nav ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 3列を均等幅で */
  gap: 42px;
}
footer div.footer-box div.nav ul li a {
  font-size: 1.6rem;
  text-decoration: none;
  color: var(--cls-blk);
  display: inline-block;
  margin-bottom: 8px;
}
footer div.footer-box div.sns {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
footer div.footer-box div.sns div {
  margin-bottom: 8px;
}
footer div.footer-box div.sns div img {
  width: 40px;
}
footer div.copy {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding-top: 6px;
}
footer div.copy p, footer div.copy a {
  color: #989898;
  font-size: 12px;
  text-decoration: none;
}
footer div.copy a:hover {
  text-decoration: underline;
}

/****************************************
7.PAGENATION
*****************************************/
.pagenation {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
}

ul.pagenation {
  padding: 0 0 64px 0;
}
ul.pagenation li {
  margin: 0 6px;
}
ul.pagenation li a,
ul.pagenation li span {
  display: block;
  padding: 4px 16px;
  border: 1px solid var(--cls-gry);
  border-radius: 8px;
  text-decoration: none;
  color: #333;
}
ul.pagenation li.current span {
  background-color: var(--cls-blk);
  color: #fff;
  border-color: var(--cls-blk);
}
ul.pagenation li.previous,
ul.pagenation li.next {
  border: none;
  padding: 0;
  margin: 0;
}
ul.pagenation li.previous a,
ul.pagenation li.next a {
  border: none;
  padding: 0 8px;
  margin: 0;
}

/*Singleページ用*/
ul.pagination {
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0 0 64px 0;
}

ul.pagination li {
  margin: 0 6px;
}

ul.pagination li span.page-numbers {
  display: block;
  padding: 4px 16px;
  border: 1px solid var(--cls-gry);
  color: #333;
  text-decoration: none;
  border-radius: 8px;
  cursor: pointer;
}

ul.pagination li a {
  display: block;
  padding: 4px 16px;
  border: 1px solid var(--cls-gry);
  color: #333;
  text-decoration: none;
  border-radius: 8px;
  cursor: pointer;
}

ul.pagination li a.active {
  background-color: var(--cls-blk);
  color: white;
  border-color: var(--cls-blk);
}

ul.pagination li a:hover:not(.active) {
  background-color: #f0f0f0;
}

/****************************************
8.MODAL
*****************************************/
/* オーバーレイ（#464646） */
.modal-overlay {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(70, 70, 70, 0.98);
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* .show を付けたときに表示 */
.modal-overlay.show {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

/* モーダル本体 */
.modal-window {
  margin: 40px auto 0 auto;
  background: #464646;
  padding: 0 3%;
  border-radius: 8px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  position: relative;
  z-index: 10001;
}
.modal-window p.keyword-title {
  width: var(--width-common);
  margin: 24px auto 0 auto;
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 700;
}
.modal-window p.keyword-title span {
  font-size: 14px;
  font-weight: 400;
}
.modal-window div.keyword {
  width: var(--width-common);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 16px 0 120px 0;
}
.modal-window div.keyword p {
  padding: 8px 8px 8px 0;
  font-size: 14px !important;
  color: #fff;
  border-bottom: 1px solid #000;
  margin: 0 0 8px 0;
}
.modal-window div.keyword p span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: #8ed0c8;
  border-radius: 50%;
  padding: 0;
  font-size: 14px;
  color: #232323;
  margin-right: 8px;
}
.modal-window div.m-book {
  margin-top: 48px;
  background-color: #fff;
}

#buying-info .modal-window {
  background: #fff;
}

/* 閉じるボタン */
.modal-close {
  /*position: absolute;*/
  position: fixed;
  top: 32px; /* お好みで微調整 */
  right: 4%;
  width: 2.5rem; /* ボタンのサイズ */
  height: 2.5rem;
  background: transparent;
  border: none;
  font-size: 4.8rem; /* 大きめの×に */
  line-height: 1; /* ボタン縦中央揃え */
  cursor: pointer;
  display: flex;
  font-weight: 200;
  align-items: center;
  justify-content: center;
  z-index: 10002;
  color: #fff;
}

.modal-close:focus {
  outline: none;
}

.modal-close-blk {
  position: absolute;
  top: 48px; /* お好みで微調整 */
  right: 3%;
  width: 2.5rem; /* ボタンのサイズ */
  height: 2.5rem;
  background: transparent;
  border: none;
  font-size: 4.8rem; /* 大きめの×に */
  line-height: 1; /* ボタン縦中央揃え */
  cursor: pointer;
  display: flex;
  font-weight: 200;
  align-items: center;
  justify-content: center;
  z-index: 10002;
  color: #232323;
}

.modal-close-blk:focus {
  outline: none;
}

/****************************************
吹き出し　まわり
*****************************************/
/*生徒緑*/
.speech-bubble-std {
  position: relative;
  max-width: 320px;
  padding: 16px 12px;
  border-radius: 8px;
  background: linear-gradient(to bottom, #f2faf9 0%, #e6f5f4 100%);
  border: 1px solid #81cbc2;
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 32px;
  z-index: 1;
}

.speech-bubble-std::after {
  content: "";
  position: absolute;
  bottom: -12px;
  right: 24px;
  border-width: 12px 8px 0 8px;
  border-style: solid;
  border-color: #e6f5f4 transparent transparent transparent;
}

.speech-bubble-std::before {
  content: "";
  position: absolute;
  bottom: -14px;
  right: 22px;
  border-width: 14px 10px 0 10px;
  border-style: solid;
  border-color: #81cbc2 transparent transparent transparent;
}

/*教師紫*/
.speech-bubble-tea {
  position: relative;
  max-width: 320px;
  padding: 16px 12px;
  border-radius: 8px;
  background: linear-gradient(to bottom, #f8f6fd 0%, #e5e0f6 100%);
  border: 1px solid #b5aae6;
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 32px;
  z-index: 1;
}

.speech-bubble-tea::after {
  content: "";
  position: absolute;
  bottom: -12px;
  right: 24px;
  border-width: 12px 8px 0 8px;
  border-style: solid;
  border-color: #e5e0f6 transparent transparent transparent;
}

.speech-bubble-tea::before {
  content: "";
  position: absolute;
  bottom: -14px;
  right: 22px;
  border-width: 14px 10px 0 10px;
  border-style: solid;
  border-color: #b5aae6 transparent transparent transparent;
}

/*保護者　オレンジ*/
.speech-bubble-par {
  position: relative;
  max-width: 320px;
  padding: 16px 12px;
  border-radius: 8px;
  background: linear-gradient(to bottom, #fff4ed 0%, #fee9db 100%);
  border: 1px solid #fdb383;
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 32px;
  z-index: 1;
}

.speech-bubble-par::after {
  content: "";
  position: absolute;
  bottom: -12px;
  right: 24px;
  border-width: 12px 8px 0 8px;
  border-style: solid;
  border-color: #fee9db transparent transparent transparent;
}

.speech-bubble-par::before {
  content: "";
  position: absolute;
  bottom: -14px;
  right: 22px;
  border-width: 14px 10px 0 10px;
  border-style: solid;
  border-color: #fdb383 transparent transparent transparent;
}

/*青*/
.speech-bubble-blu {
  position: relative;
  max-width: 320px;
  padding: 16px 12px;
  border-radius: 8px;
  background: linear-gradient(to bottom, #f9fcfe 0%, #ddeff9 100%);
  border: 1px solid #83c7ec;
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 32px;
  z-index: 1;
}

.speech-bubble-blu::after {
  content: "";
  position: absolute;
  bottom: -12px;
  right: 24px;
  border-width: 12px 8px 0 8px;
  border-style: solid;
  border-color: #e0f1fa transparent transparent transparent;
}

.speech-bubble-blu::before {
  content: "";
  position: absolute;
  bottom: -14px;
  right: 22px;
  border-width: 14px 10px 0 10px;
  border-style: solid;
  border-color: #83c7ec transparent transparent transparent;
}

a.button-common {
  float: right;
}

/****************************************
モーダル付箋
*****************************************/
/* まずマルチカラム設定は消します */
.sticky-wrap-modal {
  position: relative;
  width: var(--width-common);
  /* Masonry が absolute を打つために必要 */
  padding: 88px 0 0 0;
  margin: 0 auto;
}

/* 吹き出しは固定幅＋下マージンだけ */
.sticky-wrap-modal .speech-bubble-std {
  display: block;
  width: 270px;
  margin-bottom: 32px;
}

.sticky-wrap-modal .speech-bubble-tea {
  display: block;
  width: 270px;
  margin-bottom: 32px;
}

.sticky-wrap-modal .speech-bubble-par {
  display: block;
  width: 270px;
  margin-bottom: 32px;
}

.sticky-wrap-modal .speech-bubble-blu {
  display: block;
  width: 270px;
  margin-bottom: 32px;
}

/****************************************
ナビゲーション調整
*****************************************/
.tab-line-wrap {
  position: sticky; /* 要素自身をスクロールに追従させる */
  top: 0; /* ビューポートの上端にくっつく */
  z-index: 100; /* 必要に応じ、大きめに */
  background: #fff url(../img/report/grid.webp) center top;
  padding-top: 8px;
}
.tab-line-wrap div.pdf {
  width: var(--width-common);
  margin: 0 auto 0 auto;
  display: flex;
  justify-content: flex-end;
}
.tab-line-wrap div.pdf img {
  width: 162px;
  margin-top: 8px;
  margin-right: 60px;
}

/* ヘッダー非表示用 */
header.is-hidden {
  display: none;
}

.nowrap {
  white-space: nowrap !important;
}