@charset "utf-8";
/* CSS Document */
article {
	font-family: 'Zen Kaku Gothic New', sans-serif;
}

#title {
	/*max-width: 560px;
	width: 70%;*/
	width: 360px;
	/*margin: 50px auto 50px 120px;*/
	margin: 100px auto;
	position: absolute;
	top: 0;
	left: 18%;
	z-index: 1;
}

#title h1 img{
	max-width: 530px;
	margin-bottom: 20px;
}
#title p{
	/*max-width: 515px;
	margin-top: 1em;*/
	flex-wrap: nowrap;
	flex-basis: 40%;
}
@media screen and (max-width: 1150px) {
	#title {
		left: 50%;
		transform: translateX(-50%);
	}
	}
@media screen and (max-width: 1000px) {
	#mapList, #mapList ul{
		margin-top: 0!important;
	}
	#title {
		width: 90%;
		margin: 50px 10px ;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	#title h1, #title p{
		flex-basis: 100%;
		max-width: 550px;
		padding-left: 20px;
		padding-right: 20px;

	}
	#title p{
		font-size: 12px;
		line-height: 1.5;
	}
	#title img {
		width: 100%;
	}
}

@media screen and (max-width: 820px) {
	/*.map-container{
		text-align: right;
	}
      #mapList {
          margin: 50px 0px 100px auto!important;
      }*/
	
	/*#mapList{
		float: right;
	}*/

}

.map-container {
	width: 100%;
	position: relative;
	 -ms-overflow-style: none;
}

.map-container::-webkit-scrollbar{
  display: none;
}
/*-----------------　mapList　------------------------------*/
#mapList {
	width: 1400px;
	height: 1000px;
	margin: 50px auto 100px;
	position: relative;
	background-image: url("../img/map2024.png");
	background-repeat: no-repeat;
	/*background-size: contain;*/
	background-position: right;
	background-size: cover;	
	z-index: 0;
}

#mapList ul{
	position: relative;
	height: 100%;
	margin-top: 100px;
}
#mapList ul li{
	position: absolute;
	width: 80px;
	height: 118px;
}
#mapList ul li img {
	width: 100%;
}
#mapList .fukidashi,#mapList .fukidashi02{
	display: none;
	width: 189px;
	height: 185px;
	position: absolute;
	top: -145px;
	right: -170px;
	z-index: 100;
}
#mapList .fukidashi02{
	top: 30px;
	right: 40px;
}

#mapList .fukidashi:hover,#mapList .fukidashi02:hover{
	display: block;
}
#mapList .fukidashi div{
	width: 100%;
	height: 100%;
	padding: 45px 30px;
	background-image: url("../img/fukidashi.png");
	background-size: contain;
}
#mapList .fukidashi02 div{
	width: 100%;
	height: 100%;
	padding: 45px 30px;
	background-image: url("../img/fukidashi02.png");
	background-size: contain;
}

#mapList .fukidashi p,#mapList .fukidashi h3,#mapList .fukidashi02 p,#mapList .fukidashi02 h3{
	margin-bottom: .5em;	
	font-size: 12px;
	line-height: 1.2;
}
#mapList .fukidashi p:last-child,#mapList .fukidashi02 p:last-child{
	display: flex;
	justify-content: center;
}

#mapList ul li:hover .fukidashi,#mapList ul li:hover .fukidashi02{
	display: block;
}

@media screen and (max-width: 1000px) {
	#list ol li{
		width: calc(100% / 3 - 30px);
	}
	
	#list svg{
		width: 100%;
		/*max-width: 280px;*/
	}
}


/*@media screen and (max-width: 1000px) {
	#mapList{
		max-width: 400px;
		width: 100%;
		max-height: 800px;
		height: 100vh;
		margin: -200px auto 0;
		background-image: url("../img/map_sp.png");
		background-position: center center;
		z-index: 2;
	}
	#mapList ul li{
		width: 50px;
		height: 72px;
	}
	#mapList .choi .fukidashi,#mapList .takahashi .fukidashi,#mapList .aochi .fukidashi,#mapList .fukui .fukidashi,#mapList .cho .fukidashi,#mapList .mori .fukidashi,#mapList .matsuura .fukidashi,#mapList .aoyama .fukidashi,#mapList .tsuji .fukidashi{
		top: 0;	
		right: 0;
		
	}
	#mapList .choi .fukidashi div, #mapList .takahashi .fukidashi div,#mapList .aochi .fukidashi div,#mapList .fukui .fukidashi div,#mapList .cho .fukidashi div,#mapList .mori .fukidashi div,#mapList .matsuura .fukidashi div,#mapList .aoyama .fukidashi div, #mapList .tsuji .fukidashi div{
		background-image: url("../img/fukidashi02.png");
	}
}*/

/*-------ライターごとのPIN位置設定------------------*/

.hasegawa {
	top: 73%;
	left: 67%;
	z-index: 2;
}
.yamaguchi {
	top: 41.5%;
	left: 88%;
	z-index: 4;
}
.suzuki{
	top: 50%;
	left: 42%;
}
.fujihara {
	top: 10%;
  	left: 93%;
}
.kojima {
	top: 60%;
	left: 58%;
}
.muramoto {
	top: 80%;
	left: 40%;
	z-index: 1;
}
.motokado{
	top: 10%;
	left: 75%;	
	z-index: 1;
}
.yoshida{
	top: 37%;
	left: 24.5%;
}
.tamai{
	top: 70%;
  	left: 75%;
}
.matsumoto{
	top: 77%;
	left: 4%;
}
.tsuji {
	top: 33%;
	left: 78.5%;
}
.koyama{
	top: 55%;
  	left: 50%;
	z-index: 1;
}
.cho{
	top: 68%;
	left: 4%;
}
.kinoshita {
	top: 84%;
	left: 37%;
	z-index: 1;
}
.hirose {
	top: 62%;
	left: 53%;
	z-index: 3;
}
.naka{
	top: 73%;
	left: 72%;
	z-index: 4;
}
.nishimura {
	top: 10%;
	left: 71%;
	z-index: 2;
}
.konosu {
	top: 38%;
	left: 65%;
}
.fukui {
	top: 59%;
	left: 55%;
	z-index: 1;
}

.endo {
	top: 57%;
	left: 34%;
	z-index: 2;
}

.matsuura {
	top: 54%;
	left: 38%;
	z-index: 1;
}

.mori{
	top: 55%;
  	left: 55%;
}
.yanagiuchi {
	top: 59%;
  	left: 40%;
	z-index: 2;
}
.murata {
	top: 49%;
	left: 87%;
	z-index: 4;
}
.kaji{
	top: 62%;
	left: 25%;
}
.fujii {
	top: 50%;
	left: 76%;
	z-index: 3;
}
.okada {
	top: 60%;
	left: 30%;
	z-index: 1;
}
.hirose_k {
	top: 51%;
  	left: 34%;
}
.kito{
	top: 18%;
  	left: 67%;
	z-index: 3;
}
.aoyama {
	top: 34%;
	left: 74%;
}
.choi {
	top: 54%;
	left: 59%;
}
.ando {
	top: 48%;
	left: 71.5%;
	z-index: 2;
}
.takahashi {
	top: 45%;
	left: 57%;
}
.aochi {
	top: 13%;
	left: 68%;
	z-index: 3;
}
.shimizu {
	top: 65%;
	left: 7%;
}

.kamata {
	top: 55%;
	left: 45%;
}

.hara {
	top: 66%;
	left: 12%;
}

.kubotera {
	top: 65%;
	left: 20%;
}




/*.motokado{
	top: 55%;
	left: 40%;
}
.kamata {
	top: 60%;
	left: 9%;
	z-index: 1;
}*/

/*@media screen and (max-width: 1000px) {
	.hasegawa {
		  top: 43%;
		  left: 2%;
	}
	.Motokado{
		top: 52%;
		left: 20%;
	}
	.kito{
		top: 52%;
		left: 10%;
	}
	.muramoto {
		top: 34%;
		left: 53%;
	}
	.takahashi {
		top: 53%;
		left: 60%;
		z-index: 1;
	}
	.kinoshita {
		top: 34%;
		left: 45%;
	}
	.ochiumi {
		top: 55%;
		left: 3%;
	}
	.yanagiuchi {
		top: 22%;
		left: 44%;
	}	
	.choi {
		top: 45%;
		left: 85%;
	}
	.suzuki{
		top: 82%;
	}
	.kojima {
		top: 28%;
		left: 44%;
	}
	.fujihara {
		top: 40%;
		left: 40%;
		z-index: 2;
	}
	.aochi {
		top: 50%;
		left: 76%;
	}
	.kamata {
		top: 77%;
		left: 17%;
	}
	.endo {
		top: 45%;
		left: 35%;
		z-index: 2;
	}
	.fukui {
		top: 1%;
		left: 66%;
	}
	.cho{
		top: 28%;
		left: 71%;
		z-index: 1;
	}
	.koyama{
		top: 73%;
		left: 30%;
		z-index: 0;
	}
	.matsumoto{
		top: 70%;
		left: 21%;
	}
	.hirose {
		top: 40%;
    	left: 54%;

	}
	.mori{
		top: 20%;
		left: 77%;
	}
	.okada {
		top: -5%;
		left: 72%;
	}
	.matsuura{
		top: 44%;
  		left: 71%;
	}
	.murata {
		top: 48%;
		left: 45%;
	}
	.yamaguchi {
		top: 50%;
		left: 36%;
		z-index: 2;
	}
	.aoyama {
		top: 54%;
		left: 83%;
		z-index: 2;
	}
		.ando {
		  top: 40%;
		  left: 13%;
	}
	.fujii {
		top: 53%;
		left: 51%;
		z-index: 2;
	}
	.tsuji {
		top: 45%;
    	left: 61%;
	}
	.konosu {
		top: 55%;
		left: 43%;
		z-index: 2;
	}
}*/

/*------------------　#list　-----------------------------*/

#list {
	max-width: 960px;
	margin: 0 auto 100px;
}
#list h2 {
	text-align: center;
	margin-bottom: 50px;
	font-weight: 400;
}
#list ol {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	counter-reset: count;
	margin-left: 10px;
	margin-right: 10px;
}
#list ol::after{
	content: '';
	display: block;
	width: calc(100% / 3 - 20px) ;
}
#list ol li{
	padding-top: 100px;
    margin-top:-100px;
	width: calc(100% / 3 - 20px) ;	
	position: relative;
}
#list ol li:nth-child(n + 4){
	margin-top: -20px;
}
#list ol li::before{
	content: 'その　';
	padding: 10px 15px;
	position: absolute;
	top: 110px;
	left: 0;
	background-color: #FFFFFF;
	border: 1px solid #333333;
	font-size: 22px;
	font-weight: 500;
	z-index: 2;
}
#list ol li::after {
	content: counter(count);
  	counter-increment: count 1;
	position: absolute;
	top: 117px;
	left: 2.3em;
	font-size: 28px;
	font-weight: 500;
	z-index: 3;
}

 #list ol li#list_18_2::after{
	counter-increment: count 0;
}

#list ol li a{
	opacity: 1;
	transition: all 0.5;
}
#list ol li a:hover{
	opacity: .8;
}

#list .box {
	margin-top: -90px;
	position: relative;
}
#list .box p,#list .box h3 {
	width: 90%;
	margin: 0 auto .5em;
	line-height: 1.5;
}
#list .box h3{
	margin-bottom: 1em;
	font-size: 18px;
}
#list svg {
	filter: drop-shadow(0 5px 5px #00000063);
}
#list .writer {
	width: 101px;
	height: 101px;
	margin-bottom: 10px;
	border-radius: 50%;
	border: 1px solid #333333;
}
#list .arrow{
	display: block;
	position: relative;
	padding: 0 20px;
	margin-left: auto;
}
#list .arrow::before{
	content: '';
	position: absolute;
    bottom:0;
    right:20px; 
    width: 20%;
    height: 1px;
  	background:#333;
    transition: all .3s;
}
#list  ol li a:hover .arrow::before{
	right: 0;
}
#list .arrow::after{
	content: '';
 	position: absolute;
    bottom:5px;
    right:20px;
    width: 15px;
    height:1px;
  	background:#333;
    transform: rotate(35deg);
    transition: all .3s;
}
#list  ol li a:hover .arrow::after{
	right: 0;
}
@media screen and (max-width: 820px) {
	#list {
		margin: 0 auto 60px;
	}
	#list ol{
		width: 95%;
		margin: 0 auto;
	}
	#list ol::after{
		width: calc(100% / 2 - 20px) ;
	}
	#list ol li{
		width: calc(100% / 2 - 20px) ;
	}
	#list ol li:nth-child(n + 3){
		margin-top: -80px;
	}
	#list ol li::before{
		font-size: 13px;
	}
	#list ol li::after{
		top: 119px;
		left: 3em;
		font-size: 15px;
	}
	#list svg {
		width: 100%;
		height: auto;
		margin-top: 10px;
	}
	#list .writer{
		width: 55px;
		height: 55px;
	}
	#list .box {
		margin-top: -40px;
	}
	#list .box p{
		font-size: 10px;
	}
	
}

/*--------------  .linkBtn  ---------------------------*/

.linkList{
	margin-top: 100px;
	margin-bottom:150px;
	display: flex;
	flex-direction: column;
	gap:40px;
}

.linkBtn {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-inline: auto;
}
.linkBtn a {
	padding: 30px 90px;
	border: 1px solid #333333;
	border-radius: 50px;
	background-color: #F8D051;
	font-size: 20px;
	transition: all .5s;
}
.linkBtn a:hover {
	opacity: .5;
}
@media screen and (max-width: 768px) {
	.linkList{
		margin-top: 60px;
	    margin-bottom:60px;
		gap:20px;
	}
	
	.linkBtn a {
		font-size: 16px;
		padding: 30px 60px;
	}
}