@charset "utf-8";

/*------------------------------------------------------------------------------
  reset
------------------------------------------------------------------------------*/

html,
input,
textarea,
select,
button {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
  font-weight: 500;
}

/* IE10以降 游ゴシック文字ずれ対応 */
html.ie10,
.ie10 input,
.ie10 textarea,
.ie10 select,
.ie10 button,
html.ie11,
.ie11 input,
.ie11 textarea,
.ie11 select,
.ie11 button {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-weight: normal;
}

html {
  color: #333;
  background: #fff;
  font-size: 16px;
  line-height: 1.6;
  word-break: break-all;
}

body {
  background: #fff;
  margin: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  border: 0;
  margin: 0;
  vertical-align: top;
  max-width: 100%;
}

p {
  margin: 0 0 1em;
  padding: 0;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: #333;
  text-decoration: none;
}

input[type="submit"],
input[type="text"],
select,
textarea,
button {
  -moz-appearance: none;
  -webkit-appearance: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
}

select::-ms-expand {
  display: none;
}

textarea {
  resize: vertical;
}

button {
  border: none;
  cursor: pointer;
}

label {
  cursor: pointer;
}

table {
  border-collapse: collapse;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}



/*----- COMMON -----*/

.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
overflow:hidden;} /* IE以外のモダンWebブラウザ向け */

.clearfix{display:inline-block;} /* IE7およびMac版IE5向け */

/* Hides from IE-mac \*/
* html .clearfix{height:1%;}
.clearfix{display:block;}
/* End hide from IE-mac */ /* IE6以前向け */

/*------------------------------------------------------------------------------
  追加
------------------------------------------------------------------------------*/
body{
	width:100%;
	min-width:375px;
	font-family:"メイリオ", Meiryo, sans-serif;
	padding:1.0em;
	max-width: 1280px;
	margin: 0 auto;
}

div#container{
	width:100%;
	max-width:1280px;
	margin:0 auto 2.5em;
	border:1px dotted #EEE;/*★目印*/}

p {line-height:1.6;}


#map-gakku{}

#area-map{
	width:100%;
	max-width:800px;
	border:1px dotted orange;/*★目印*/}

ol#ul-gakku-list{
	text-align:center;
	width:80%;
	max-width:1280px;
	display:flex;
	flex-wrap:wrap;
	padding:1.0em 1.5em;
	margin:0 auto 2.5em;
	border-top:1px solid #CCC;
	border-bottom:1px solid #CCC;
	background-color:rgba(200,220,255,0.5);/*pink*/
  column-count: 2;
  width: fit-content;
  column-gap: 2em;
	list-style-type:none;
	counter-reset: ol_li; /* ol_li カウンタをセットする(値もリセット) */}

ol#ul-gakku-list li{
	white-space:nowrap;
	padding:0.2em 0.5em;}

ol#ul-gakku-list li:before {
	margin-right: .25em;
	counter-increment: ol_li; /* ol_li カウンタの値に1加える */
	content: counter(ol_li); /* before擬似要素のcontentで出力 */
	color: #666; /* リストの番号の色 */}

ol#ul-gakku-list li:hover,
ol#ul-gakku-list li:active{
	background-color:orange;}

svg text{
	/*fill: #000;*//*地図上のテキスト（学区）*/
	font-family: YuMincho-Demibold, "游明朝", "Yu Mincho", serif;
	font-size: 15px;
	font-weight: 700;/*bold*/}

svg text.cls-1{

	border:5px solid red;
	width:100px;
	height:100px;
	display:block;}

svg text tspan{}

p.bgtxt, .cls-1.bgtxt, tspan.bgtxt{
	z-index:100;
	position:relative;
	display:block;
	background-color:yellow;}

p.bgtxt::before, tspan.bgtxt::before, .cls-1.bgtxt::after{
	content:attr(data-text);
	position:absolute;
	top:0;
	left:0;
	color:red;
	z-index:10;}

.area-gakku {
        fill: #EEE;/*各学区の背景*/
        stroke: #000;/*境界線*/
	stroke-linecap:round;
        stroke-linejoin: round;
        stroke-width: 1px;
      }

/*".area-gakku"は<polygon>のクラス名*/
.area-gakku.active, a:hover polygon{
	fill:orange;
	transition:fill 0.3s ease-in-out;}


@media(min-width:1080px){
	ol#ul-gakku-list{
		float:left;
		text-align:left;
		width:fit-content;/*ブロック要素でも"display:inline"と同じような挙動を実現できます＝幅をコンテンツの幅に合わせる*/
		width:auto;
		display:block;
		flex-wrap:nowrap;
		padding:0;
		margin-right:1.0em;
		border-top:1px solid #999;}

	#map-gakku hr{display:none;}

	#area-map{
		float:left;
		display:block;
		width:calc(100% - 290px);
		margin:0 0 0 auto;
		}
}

@media(max-width:767.9px){
	ol#ul-gakku-list{
		width:100%;
		padding:1.0em 0;}}