@charset "UTF-8";
@import url("variables.css");
/****************************************
1.COMMON
2.TEMPLATE
3.HEADER
4.FOOTER
*****************************************/
/****************************************
Smart phone COMMOM
*****************************************/
@media screen and (max-width: 912px) {
  /****************************************
  1.COMMON
  *****************************************/
  html {
    font-size: 62.5%;
    scroll-behavior: auto;
  }
  body {
    padding: 0;
    font-feature-settings: "palt";
  }
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
  img {
    vertical-align: bottom;
    max-width: 100%;
    height: auto;
    width: auto;
  }
  /* ページ内遷移 ヘッダー分 引く*/
  :root {
    --header-height: 45px;
  }
  html {
    background: none;
  }
  .left-sp {
    text-align: left;
  }
  .center-sp {
    text-align: center;
  }
  .anchor-target {
    scroll-margin-top: 45px; /* ヘッダーの高さ分だけずらす */
  }
  .center-flex-sp {
    display: flex;
    justify-content: center;
  }
  /****************************************
  6.FOOTER
  *****************************************/
  footer {
    height: auto;
    background-color: #eaeaea;
  }
  footer div.footer-box {
    display: none;
  }
  footer div.copy {
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 6px;
  }
  footer div.copy p, footer div.copy a {
    color: #989898;
    text-align: center;
    font-size: 12px;
    text-decoration: none;
  }
  footer div.copy a:hover {
    text-decoration: underline;
  }
  /****************************************
  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 {
    background: #464646;
    padding: 0 3%;
    border-radius: 8px;
    width: 100%;
    height: 100%;
    margin: 80px auto 0 auto;
    overflow-y: auto;
    position: relative;
    z-index: 10001;
  }
  .modal-window p.keyword-title {
    width: var(--width-common-sp);
    margin: 24px auto 0 auto;
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 700;
  }
  .modal-window div.keyword {
    width: var(--width-common-sp);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 16px 0 0 0;
  }
  .modal-window .modal-close02 {
    margin: 40px auto 160px auto;
    background-color: var(--cls-green);
    border-radius: 16px;
    padding: 4px 8px;
    color: #fff;
    display: inline-block;
    text-align: center;
    width: 148px;
  }
  .modal-window p.speech-bubble-std,
  .modal-window p.speech-bubble-tea,
  .modal-window p.speech-bubble-par,
  .modal-window p.speech-bubble-blue {
    width: 90%;
  }
  .modal-window div.m-book {
    margin-top: 0;
    width: 100%;
  }
  .modal-window div.close-btn {
    display: block;
  }
  #buying-info .modal-window {
    width: 100%;
    padding: 0;
  }
  /* 閉じるボタン */
  .modal-close {
    /*
    position: absolute;
    top: 24px;               
    right: 3%;
    */
    position: fixed;
    top: 48px; /* お好みで微調整 */
    right: 6%;
    width: 4.2rem; /* ボタンのサイズ */
    height: 4.2rem;
    background: rgba(35, 35, 35, 0.8); /* #232323 の50%透過 */
    border-radius: 50%;
    border: none;
    color: #fff; /* 白い文字に */
    font-size: 2.4rem;
    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: 66px; /* お好みで微調整 */
    right: 3%;
    width: 2.5rem; /* ボタンのサイズ */
    height: 2.5rem;
    background: transparent;
    border: none;
    font-size: 2.4rem; /* 大きめの×に */
    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: 100%;
    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: 100%;
    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: 100%;
    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: 100%;
    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: 100% !important;
    /* Masonry が absolute を打つために必要 */
    padding: 80px 3% 0 3%;
    margin: 0 auto;
  }
  .sticky-wrap-modal .speech-bubble-std {
    display: block;
    width: 94%;
    margin-bottom: 32px;
  }
  .sticky-wrap-modal .speech-bubble-tea {
    display: block;
    width: 94%;
    margin-bottom: 32px;
  }
  .sticky-wrap-modal .speech-bubble-par {
    display: block;
    width: 94%;
    margin-bottom: 32px;
  }
  .sticky-wrap-modal .speech-bubble-blu {
    display: block;
    width: 94%;
    margin-bottom: 32px;
  }
  /****************************************
  7.PAGENATION
  *****************************************/
  /* すべて隠して… */
  .pagenation li {
    display: none;
  }
  /* 前へ・現在ページ・次へ のみ表示 */
  .pagenation li.previous,
  .pagenation li.current,
  .pagenation li.next {
    display: inline-block;
    margin: 0 18px;
  }
  .pagenation li.previous a,
  .pagenation li.current a,
  .pagenation li.next a {
    padding: 0 16px;
  }
  .nowrap {
    white-space: normal !important;
  }
  /*END*/
}