@charset "UTF-8";
/* CSS Document */

#title{
	background-image: url(../img/cooperate/mv.png);
}

.prefectures-h2{
	text-align: center;
	margin-bottom: 0.5em;
}


.tizu{
	background: var(--color-gray2);
	border-radius: 1rem;
	padding: 2em;
	box-sizing: border-box;
	position: relative;
}
.nihon{
	height: 800px;
	position: relative;
	display: block;
}
.nihon::after{
	content: "";
	position: absolute;
	transform: translate(-50%,-50%);
	top: 50%;
	left: 50%;
	background-image: url(../img/cooperate/tizu.svg);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: contain;
	width: 40%;
	height: 50vh;
	z-index: 1;
}

.prefectures-box{
	position: absolute;
	z-index: 2;
	display: block;
	width: 350px;
}
.tizu-boxin{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.nihon .hokkaido{
	right: 0;
}
.nihon .tohoku-region{
	right: 0;
	top: 15rem;
}

.nihon .kantou-region{
	right: 0;
	top: 33rem;
}

.nihon .chubu-region{
 right: 20rem;
    top: 51rem;
}

.nihon .kinki-region{
	bottom: 0rem;
    left: 51rem;}


.nihon .tizu-title{
	margin-top: 1em;
	margin-bottom: 0.3em;
}

.nihon .chugoku-region{
	top: 27rem;
    left: 28rem;
}

.nihon .shikoku-region{
	top: 37rem;
    left: 10rem;
}

.nihon .kyushu-region{
	bottom: 10rem;
	left: 10rem;
}

/*---リストタイトル---*/
h3.hokkaido{
color: #3591c1;
}
h3.tohoku-region{
color: #0e9789;
}

h3.kantou-region{
color: #6fa751;
}

h3.chubu-region{
 color: #a5b119;
}

h3.kinki-region{
color: #d6a413;
}


h3.chugoku-region{
color: #d07e22;
}

h3.shikoku-region{
color: #cc6177;
}

h3.kyushu-region{
color: #9f6040;
}




.tizu-box-a{
	font-size: 1.4rem;
	padding: 0.5em 1em;
	display: block;
	box-sizing: border-box;
	background: #fff;
}
.tizu-box-a:hover{
	color: #fff;
	background: var(--color-accent);
}






.cooperate-map{
	background-color:  var(--color-baselite);
}

.cooperate-map .main_frame{
	position: relative;
}
.cooperate-map h2{
	position: absolute;
	top: 5em;
	left: 0rem;
}

.cooperate-map h2{
	color:var(--color-accent);
	font-size: 4rem;
}

.cooperate-list h3{
	font-size: 2.4rem;
}

.cooperate-ul+h3{
	margin-top: 3em;
}

.cooperate-list h3 span{
	color:var(--color-gray);
	padding-left: 0.3em;
	font-size: 0.8em;
	font-family: "Roboto", sans-serif;
}

.cooperate-ul{
	display: grid;
   	grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2em;
	text-align: center;
	font-size: 0.8em;
}
.cooperate-ul .img{
	display: flex;
	align-items: center;
	padding: 0.3em;
	height: 150px;
	border: 1px solid var(--color-gray2);
	border-radius: 0.2em;
	transition: background 0.3s;
	overflow: hidden;
}
.cooperate-ul a:hover .img{
	background-color:var(--color-gray2);
}

.cooperate-ul .img img{
	width: 100%;
    object-fit: contain;
}

@media screen and (max-width: 1500px){
.tizu{
	padding: 1em;
}
.prefectures-box{
	width: 250px;
}

.nihon .kinki-region{
	right: 0;
	left: auto;
}
.chubu-region.prefectures-box{
	right: 35%;
	left: auto;
}
.nihon .chugoku-region {
    top: 18rem;
    left: 16rem;}


}/*@media screen and (max-width: 1500px){	*/

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

.pc-tizu{
	display: none;
}
}
@media screen and (min-width: 1000px) {
.sp-tizu{
	display: none;
}

}


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




.cooperate-list h3{
	font-size: 1.6rem;
}
.cooperate-ul{
	gap: 1em;
    grid-template-columns: 1fr 1fr;
}
.cooperate-ul .img{
	height: 100px;
}
}/*@media screen and (max-width: 789px) {*/






/*-------アコーディオン全体--------*/
.accordion-area{
    list-style: none;
    width: 96%;
    max-width: 900px;
    margin:0 auto;
}

.accordion-area li{
    margin: 10px 0;
}

.accordion-area .accordion-area-box{
	border: 1px solid #ccc;
}

/*アコーディオンタイトル*/
.title {
	font-size: 2rem;
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-weight: normal;
    padding: 0.5em 0.5em 0.5em 50px;
    transition: all .5s ease;
}

/*アイコンの＋と×*/
.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: var(--color-accent);
    
}
.title::before{
    top:48%;
    left: 15px;
    transform: rotate(0deg);
    
}
.title::after{    
    top:48%;
    left: 15px;
    transform: rotate(90deg);

}

/*　closeというクラスがついたら形状変化　*/

.title.close::before{
	transform: rotate(45deg);
}

.title.close::after{
	transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.accordion-area  .box {
    display: none;/*はじめは非表示*/
	margin:0 0.9em 1.2em 0.9em;
    padding: 0.5em;
	border: none;
}
.child{
	display: flex;
	justify-content:flex-start;
	flex-wrap: wrap;
}

.accordion-area-a{
	display: block;
	background-color: var(--color-gray2);
	padding: 0.8em 1em;
	box-sizing: border-box;
	font-size: 2rem;
	transition: color ease-in-out 0.3s;
}
.accordion-area-a:hover{
	background: var(--color-accent);
	color: #fff;
}

.nihon .kyushu-region,.nihon .shikoku-region{
	left: 0;
}



@media screen and (max-width: 789px) {
	.title {
	font-size: 1.5rem;
}

.accordion-area-a{
	font-size: 1.3rem;
}
}