/* =====================================
   グローバルメニュー
===================================== */

/* 通常時 */
.kawako-global-menu .nav-link {
  color: #8f61dc !important;
  background-color: transparent !important;
  border-color: transparent !important;
  text-decoration: none !important;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

/* 現在のページと、その親タブ */
.kawako-global-menu .nav-link.active,
.kawako-global-menu .nav-item.active > .nav-link,
.kawako-global-menu .nav-link[aria-current="page"] {
  color: #4f2f78 !important;
  background-color: #eadcf5 !important;
}

/* ほかのタブにカーソルがある間は、現在地の背景色を消す */
.kawako-global-menu:has(.nav-link:hover) .nav-link.active,
.kawako-global-menu:has(.nav-link:hover) .nav-item.active > .nav-link,
.kawako-global-menu:has(.nav-link:hover) .nav-link[aria-current="page"] {
  color: #8f61dc !important;
  background-color: transparent !important;
}

/* カーソルが当たっているタブだけに色を付ける */
.kawako-global-menu .nav-link:hover,
.kawako-global-menu:has(.nav-link:hover) .nav-link.active:hover,
.kawako-global-menu:has(.nav-link:hover) .nav-item.active > .nav-link:hover,
.kawako-global-menu:has(.nav-link:hover) .nav-link[aria-current="page"]:hover {
  color: #4f2f78 !important;
  background-color: #eadcf5 !important;
  border-color: transparent !important;
  text-decoration: none !important;
}

/* キーボード操作時 */
.kawako-global-menu .nav-link:focus-visible {
  outline: 2px solid #8f6bb3;
  outline-offset: -2px;
}

/* 下に開くメニュー */
.kawako-global-menu .dropdown-item:hover,
.kawako-global-menu .dropdown-item:focus {
  color: #4f2f78 !important;
  background-color: #eadcf5 !important;
  text-decoration: none !important;
}
/* =====================================
   川高日記「もっと見る」ボタン
===================================== */

.kawako-diary-more {
  margin: 12px 0 24px;
  text-align: center;
}

.kawako-diary-more a {
  display: inline-block;
  padding: 9px 24px;
  color: #6f4aaa !important;
  font-weight: 700;
  text-decoration: none !important;
  background-color: #ffffff;
  border: 1px solid #8f6bb3;
  border-radius: 999px;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.kawako-diary-more a:hover,
.kawako-diary-more a:focus {
  color: #ffffff !important;
  background-color: #6f4aaa;
  text-decoration: none !important;
}
/* =====================================
   共通見出しデザイン
===================================== */

/* h2：グラデーション実線 */
h2 {
  position: relative;
  padding-bottom: 10px;
  margin-top: 40px;
  margin-bottom: 20px;
}

h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(
    to right,
    #9370db,
    rgba(147, 112, 219, 0)
  );
  border-radius: 4px;
}

/* h3：グラデーション点線 */
h3 {
  position: relative;
  padding-bottom: 8px;
  margin-top: 30px;
  margin-bottom: 20px;
}

h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(147, 112, 219, 0.7),
    rgba(147, 112, 219, 0.7) 8px,
    rgba(147, 112, 219, 0) 8px,
    rgba(147, 112, 219, 0) 16px
  );
  mask-image: linear-gradient(to right, black, transparent);
  -webkit-mask-image: linear-gradient(to right, black, transparent);
  border-radius: 2px;
}

/* h4：控えめなグラデーション点線 */
h4 {
  position: relative;
  padding-bottom: 6px;
  margin-top: 30px;
  margin-bottom: 20px;
}

h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(147, 112, 219, 0.5) 0,
    rgba(147, 112, 219, 0.5) 4px,
    rgba(147, 112, 219, 0) 6px,
    rgba(147, 112, 219, 0) 12px
  );
  mask-image: linear-gradient(to right, black, transparent);
  -webkit-mask-image: linear-gradient(to right, black, transparent);
  border-radius: 2px;
}

/* h5：ドット風グラデーションライン */
h5 {
  position: relative;
  padding-bottom: 4px;
  margin-top: 30px;
  margin-bottom: 20px;
}

h5::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-image: repeating-linear-gradient(
    to right,
    #dda0dd,
    #dda0dd 2px,
    rgba(221, 160, 221, 0) 2px,
    rgba(221, 160, 221, 0) 4px
  );
}

/* h6：控えめなドットライン */
h6 {
  position: relative;
  padding-bottom: 3px;
  margin-top: 30px;
  margin-bottom: 20px;
}

h6::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-image: repeating-linear-gradient(
    to right,
    #d8bfd8,
    #d8bfd8 1px,
    rgba(216, 191, 216, 0) 1px,
    rgba(216, 191, 216, 0) 3px
  );
}
/* =====================================
   川之江高校 トップページ案内

   PC：主要メニュー3列
   タブレット：主要メニュー2列
   スマホ：すべて1列

   フォントはConnect-CMSの設定を継承
===================================== */

.kwh-guide,
.kwh-guide *,
.kwh-related-links,
.kwh-related-links *,
.kwh-consultation,
.kwh-consultation *,
.kwh-sns,
.kwh-sns * {
  box-sizing: border-box;
}

.kwh-guide,
.kwh-related-links,
.kwh-consultation,
.kwh-sns {
  width: calc(100% - 32px);
  max-width: 1080px;
  margin-right: auto;
  margin-left: auto;
}

/* =====================================
   主要6メニュー
===================================== */

.kwh-guide {
  margin-top: 14px;
  margin-bottom: 0;
}

.kwh-guide__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.kwh-guide-card {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  color: #24202c !important;
  text-decoration: none !important;
  background-color: #ffffff;
  border: 1px solid #ded8e6;
  border-radius: 7px;
  box-shadow: 0 2px 7px rgba(52, 32, 95, 0.07);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.kwh-guide-card:hover,
.kwh-guide-card:focus-visible {
  color: #24202c !important;
  text-decoration: none !important;
  border-color: #6f4aaa;
  box-shadow: 0 5px 14px rgba(52, 32, 95, 0.13);
  transform: translateY(-2px);
}

.kwh-guide-card:focus-visible {
  outline: 3px solid rgba(111, 74, 170, 0.35);
  outline-offset: 2px;
}

/* 写真部分 */
.kwh-guide-card__photo {
  display: block;
  width: 100%;
  height: 110px;
  background-color: #d8cdea;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* =====================================
   【更新箇所1】主要メニューの写真URL

   写真を変更するときは、下記6か所の
   /file/○○○○○を新しい画像URLに変更します。

   推奨画像：1200×675px（16：9）
   JPEGまたはWebP
   1枚100～200KB程度
===================================== */

/* ① 学校案内 */
.kwh-photo-school {
  background-image:
    url("/file/18364"),
    linear-gradient(135deg, #6f4aaa, #d8cdea);
}

/* ② 教育・学校生活 */
.kwh-photo-education {
  background-image:
    url("/file/18365"),
    linear-gradient(135deg, #4f3479, #cfc1e5);
}

/* ③ 入学希望の方へ */
.kwh-photo-admission {
  background-image:
    url("/file/18366"),
    linear-gradient(135deg, #7b59ad, #e1d8ee);
}

/* ④ 在校生・保護者の方へ */
.kwh-photo-students {
  background-image:
    url("/file/18372"),
    linear-gradient(135deg, #573291, #d8cdea);
}

/* ⑤ 事務・各種手続き */
.kwh-photo-office {
  background-image:
    url("/file/18370"),
    linear-gradient(135deg, #765c96, #ddd3e7);
}

/* ⑥ 定時制 */
.kwh-photo-teiji {
  background-image:
    url("/file/18371"),
    linear-gradient(135deg, #34205f, #9c87b8);
}

/* 主要メニューの文字部分 */
.kwh-guide-card__body {
  display: flex;
  min-height: 70px;
  padding: 9px 12px;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

.kwh-guide-card__title {
  color: #34205f;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.kwh-guide-card__description {
  margin-top: 3px;
  color: #686270;
  font-size: 12px;
  line-height: 1.4;
}

/* =====================================
   補助ボタン
===================================== */

.kwh-related-links {
  margin-top: 8px;
  margin-bottom: 18px;
}

.kwh-related-links__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.kwh-related-link {
  display: flex;
  min-height: 58px;
  padding: 8px 12px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #241451 !important;
  text-align: center;
  text-decoration: none !important;
  background-color: #f7f4fa;
  border: 1px solid #ded7e7;
  border-radius: 5px;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.kwh-related-link:hover,
.kwh-related-link:focus-visible {
  color: #241451 !important;
  text-decoration: none !important;
  background-color: #eee7f7;
  border-color: #8e69ca;
  box-shadow: 0 3px 9px rgba(52, 32, 95, 0.12);
}

.kwh-related-link:focus-visible {
  outline: 3px solid rgba(111, 74, 170, 0.25);
  outline-offset: 2px;
}

.kwh-related-link__title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.kwh-related-link__note {
  display: block;
  margin-top: 2px;
  color: #615a6b;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
}

/* =====================================
   相談窓口・公式SNS 共通
===================================== */

.kwh-consultation {
  margin-top: 22px;
  margin-bottom: 22px;
}

.kwh-sns {
  margin-top: 22px;
  margin-bottom: 24px;
}

.kwh-consultation__heading,
.kwh-sns__heading {
  margin-bottom: 10px;
  color: #34205f;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.kwh-consultation__grid,
.kwh-sns__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.kwh-consultation-link,
.kwh-sns-link {
  display: flex;
  min-width: 0;
  min-height: 72px;
  padding: 10px 16px;
  align-items: center;
  color: #24202c !important;
  text-decoration: none !important;
  background-color: #ffffff;
  border: 1px solid #ded8e6;
  border-radius: 7px;
  box-shadow: 0 2px 7px rgba(52, 32, 95, 0.07);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.kwh-consultation-link:hover,
.kwh-consultation-link:focus-visible,
.kwh-sns-link:hover,
.kwh-sns-link:focus-visible {
  color: #24202c !important;
  text-decoration: none !important;
  border-color: #8e69ca;
  box-shadow: 0 4px 11px rgba(52, 32, 95, 0.13);
  transform: translateY(-1px);
}

.kwh-consultation-link:focus-visible,
.kwh-sns-link:focus-visible {
  outline: 3px solid rgba(111, 74, 170, 0.25);
  outline-offset: 2px;
}

/* アイコンを置く場所 */
.kwh-card-icon-wrap {
  display: flex;
  width: 44px;
  height: 44px;
  margin-right: 13px;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
}

/* 相談窓口・公式SNSの画像 */
.kwh-card-icon-img {
  display: block;
  width: 44px;
  height: 44px;
  max-width: 100%;
  object-fit: contain;
}

/* 文字部分 */
.kwh-information-card__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.kwh-information-card__title {
  color: #34205f;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.kwh-information-card__note {
  margin-top: 2px;
  color: #686270;
  font-size: 11.5px;
  line-height: 1.4;
}

/* =====================================
   タブレット
===================================== */

@media screen and (max-width: 900px) {
  .kwh-guide__grid,
  .kwh-related-links__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =====================================
   スマートフォン
===================================== */

@media screen and (max-width: 600px) {
  .kwh-guide,
  .kwh-related-links,
  .kwh-consultation,
  .kwh-sns {
    width: calc(100% - 16px);
  }

  .kwh-guide {
    margin-top: 10px;
  }

  .kwh-guide__grid,
  .kwh-related-links__grid,
  .kwh-consultation__grid,
  .kwh-sns__grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* 主要メニューを横長に変更 */
  .kwh-guide-card {
    display: grid;
    min-height: 82px;
    grid-template-columns: 30% 1fr;
  }

  .kwh-guide-card__photo {
    width: 100%;
    height: 100%;
    min-height: 82px;
  }

  .kwh-guide-card__body {
    min-height: 82px;
    padding: 8px 10px;
  }

  .kwh-guide-card__title {
    font-size: 16px;
  }

  .kwh-guide-card__description {
    margin-top: 2px;
    font-size: 12px;
  }

  /* 相談窓口・公式SNS */
  .kwh-consultation,
  .kwh-sns {
    margin-top: 18px;
  }

  .kwh-consultation__heading,
  .kwh-sns__heading {
    text-align: left;
  }

  .kwh-consultation-link,
  .kwh-sns-link {
    min-height: 66px;
    padding: 9px 12px;
  }

  .kwh-card-icon-wrap {
    width: 40px;
    height: 40px;
    margin-right: 11px;
    flex-basis: 40px;
  }

  .kwh-card-icon-img {
    width: 40px;
    height: 40px;
  }
}
/* 相談窓口・公式SNS専用 */

.kwh-contact-row,

.kwh-contact-row * {

  box-sizing: border-box;

}



.kwh-contact-row {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 16px;

  max-width: 1080px;

  margin: 20px auto;

}



.kwh-contact-row__heading {

  margin: 0 0 10px;

  color: #34205f;

  font-size: 18px;

  font-weight: 700;

  text-align: center;

}


.kwh-contact-row > section {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.kwh-contact-row__grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 10px;
  flex: 1;

}



.kwh-contact-row__link {

  display: grid;

  grid-template-columns: 36px minmax(0, 1fr);

  column-gap: 10px;

  row-gap: 3px;

  align-content: center;

  min-width: 0;

  height: 100%;

  padding: 12px;

  color: #34205f !important;

  text-align: left;

  text-decoration: none !important;

  background: #fff;

  border: 1px solid #ded7e7;

  border-radius: 7px;

}



.kwh-contact-row__icon {

  grid-column: 1;

  grid-row: 1 / span 2;

  align-self: center;

  display: block;

  width: 36px;

  height: 36px;

  object-fit: contain;

}



.kwh-contact-row__title {

  grid-column: 2;

  color: #34205f;

  font-size: 14px;

  font-weight: 700;

  line-height: 1.4;

}



.kwh-contact-row__note {

  grid-column: 2;

  color: #686270;

  font-size: 11px;

  line-height: 1.5;

}



.kwh-contact-row__link:hover {

  background: #f7f4fa;

  border-color: #9370db;

}



.kwh-contact-row__link:focus-visible {

  outline: 3px solid #9370db;

  outline-offset: 3px;

}



@media screen and (max-width: 767px) {

  .kwh-contact-row {

    grid-template-columns: 1fr;

    gap: 20px;

  }

}