@charset "UTF-8";
/* CSS変数の宣言 */
/* サブページで、テンプレートで対応しきれないスタイルをこちらに記入します。ASのみ書き込み可能 */

/* 地図から探す：地域別
---------------------------------------------- */
#map-page section {
  margin-top:0;
  padding-top:0;
}

.map-container {
  position:relative;
  border: none;
     -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
  -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
  box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
  padding:0 0 2em 2em;
  width:80%;
  margin: 1rem auto;
  background: #fcfbf5;
}

.map-wrapper {
  overflow: clip;/* SVGはみ出し対策 */
  width:auto;

}

/* SVG のサイズ管理（viewBox 必須） */
.map-wrapper>svg {
   width: clamp(400px, 40vw, 900px);
  display: block;
  padding-top:0;
 /* margin:0 auto;*/
  padding:0 0 2em 2em;
  filter: drop-shadow(3px 3px 3px rgba(128, 128, 128, .7));
}

/* 校区-1地図を中央 */
.school-map-wrapper>svg {
   width: clamp(400px, 40vw, 900px);
  display: block;
  padding-top:0;
  margin:0 auto;
   filter: drop-shadow(3px 3px 3px rgba(128, 128, 128, .7));

}

@media (max-width: 999px) {
  .map-container {
    width:90%;
    padding:1em;
  }
  .map-wrapper > svg {
  width:90%;
  padding:0;
}
}

@media (max-width: 767px) {
  .map-container {
  position:static;
  width:90%;
  padding:2%;
}
.map-wrapper > svg, .school-map-wrapper>svg {
  width:100%;
  margin:1rem auto;
  padding:0;
}
}

.region-path {
  fill:#d1958d;
  stroke: #fff;
  stroke-width: 1.2;
  transition: fill .2s ease, stroke .2s ease, opacity .2s ease;
  cursor: pointer;
  filter:"url(#shadow)";
}

.region:hover .region-path, .region-path.active {
  fill:#8bdeb9;
  stroke: none;
  stroke-width: 0;
  filter: drop-shadow(0 0 6px rgba(0,0,0,.18));
  transition: all .6s ease;
}

.map-container .map-label {
  font-size: clamp(1.5rem, 1.0515rem + 0.9357vw, 1.8rem);
  font-weight: normal;
  font-family: '游明朝 Medium','Yu Mincho',YuMincho,'Hiragino Mincho Pro','Noto Serif JP', serif, sans-serif;
  user-select: none;
  paint-order: stroke fill;
 fill: #262626;
  text-anchor: middle;
  pointer-events: auto;
  transition: fill .2s ease;
}

.region:hover .map-label, .map-label.active {
  fill:#262626;
  font-weight: 700;
}

 .map-label {
  fill: #333;
 /* font-size: 18px;*/
  transition: fill .2s ease;
}

/*@media (max-width: 640px) {
 .map-label { font-size: 14px; }
}*/
/* ===================================
   ボタンエリア
=================================== */

.button-area {
  position:absolute;
  max-width:20em;
  min-width:16em;
  border: none;
  padding:2%;
  top:5%;
  right:15%;
  background: #b8bbe2;
  z-index: 3;
  -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
}

/*校区ボタンの位置*/
.button-area.school-button1 {
  top:5%;
  left:2%;
   max-width:9em;
  min-width:6em;
  padding:0;
  padding-top:1.5%;
  background-color: #cecece;
}

.button-area.school-button2 {
  top:5%;
  right:2%;
  max-width:9em;
  min-width:6em;
  padding:0;
  padding-top:1.5%;
  background-color: #cecece;
}

/*学園区のベースカラー*/
.button-area .school-block {
  background: #faecc5;
  width:100%;
  margin:0 auto;
  margin-top:2rem;
  padding:5% 3%;
}

.button-area .map-btn {
  padding: 2.0% 2.5%;
  font-size: 1.0rem;
  font-weight: bold;
  background: #fff;
  color: #262626;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 400;
  font-family: '游明朝 Medium','Yu Mincho',YuMincho,'Hiragino Mincho Pro','Noto Serif JP', serif, sans-serif;
  outline-offset: 3px;
  transition: background-color .2s ease, transform .04s ease, box-shadow .2s ease;
  width: 100%;
  max-width:25em;
  text-align: center;
   -moz-box-shadow: 0 2px 3px 0px rgba(var(--accentColorRGB), 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(var(--accentColorRGB), 0.16);
box-shadow: 0 2px 3px 0px rgba(var(--accentColorRGB), 0.16);
border:none;
margin:0 auto;
}

/*校区ボタンのサイズ*/
.button-area.school-button1 .map-btn, .button-area.school-button2 .map-btn {
    max-width:8em;
    margin-left:.5em;
    margin-right:.5rem;
}

.button-area .map-btn:hover {
  background: #27c787;
}

.button-area {
  position:absolute;
 /* max-width:20em;*/
 max-width:16em;
  min-width:16em;
  border: none;
  padding:2%;
  top:5%;
  right:5%;
  background: #b8bbe2;
  z-index: 3;
  -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
}
@media (max-width: 999px) {
 .button-area {
   max-width:16em;
   width:16em;
   right:5%;
 }
}

@media (max-width: 767px) {
  .button-area {
    position:static;
    display: block;
    margin:2rem auto;
  }
}

 .button-area .map-btn.active {
  color:#fff;
  background:#27c787;
  transition: all 0.5s ease-in-out;
}


/* ボタン間の縦余白
.button-area > .map-btn+.map-btn,*/
.button-area .map-btn {
  margin-top: 3.0%;
}

/*2,3セルのボタン横並び*/
.button-area ul {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width:100%;
}

.button-area ul li {
  width: 100%;
  display: block;/*0330追記*/
}


.mt-1 {
  margin-top:1em !important;
}


ul.btn-wrap {
  display: block;
}

/*0330追記*/
.button-area > ul {
  display:flex;
  flex-wrap: wrap;
}

.button-area > ul > li {
  width:49%;
}

.button-area > ul:nth-child(2) {
  width:100%;
  display: block;
}

.button-area > ul:nth-child(2) li {
  width:100%;
}

/*ボタンの地区別ライン*/

.map-btn.fuchu {
  border:solid 4px #ceffe9;
}

.map-btn.shinoda {
  border:solid 4px #cee3ff;
}

.map-btn.ikeda {
  border:solid 4px #fff2ce;
}

.map-btn.matsuo {
  border:solid 4px #efceff;
}

.map-btn.yokoyama {
  border:solid 4px #ffcece;
}

.map-btn.sonota {
  border:solid 4px #cacaca;
}



/* ----------------------------------------------
    校区別
---------------------------------------------- */

.school-path {
  fill:#8daed1;
  stroke: #ffffff;
  stroke-width: 1.5px;
  transition: fill .2s, stroke .2s, stroke-width .2s, filter .2s;
  cursor: pointer;
}

/* --- SVG path のハイライト状態（hover/連動） --- */
.school-path.is-hover {
  fill: #ffcc80;
  stroke: #ff9800;
  stroke-width: 3px;
  filter: drop-shadow(0 0 6px rgba(255,152,0,.45));
}

/* --- ボタンの通常状態 ---
.map-btn {
  background: #f4f7fb;
  color: #234;
  border: 1px solid #cfd8e3;
  padding: 6px 12px;
  border-radius: 6px;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
  cursor: pointer;
} */

/* --- ボタンのハイライト状態（hover/連動） --- */
.school-button1 .map-btn.is-hover, .school-button2 .map-btn.is-hover {
  background: #ffecb3;
  color: #7a4b00;
  box-shadow: 0 0 0 2px #ffd54f inset;
}

/* --- SVGラベル --- */
.schoolmap-label {
  font-size: clamp(0.938rem, 0.65rem + 0.8vw, 1.25rem);
  font-weight: 700;
  fill: #2d3b34;
  text-anchor: middle;
  pointer-events: none;
  user-select: none;
}
@media only screen and (max-width: 767px) {
.schoolmap-label{
  font-size:1.4rem;
}
}

@media (max-width : 767.99px) {
.school-btn-wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: top;
  justify-content: center;
}

.school-btn-wrap .school-button1, .school-btn-wrap .school-button2 {
  width:45%;
  margin: 2% 2%;
  display:flex;
  flex-direction: column;
}

 .school-btn-wrap .map-btn {
  width:90%;
  padding: 1.8% 2.0%;
  font-size: 1.0rem;
  max-width:18em;
}

.school-btn-wrap .school-button2 .school-block {
  margin-top:1em;
}

.button-area .school-block {
  margin-top:auto;
  margin-bottom:0;
}
}