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

/*
.image-container {
      position: relative;
      width: 100%;
      height: 400px;
      background-image: url("../img/map_japan.png");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    
    }
*/
.map #pageBody .image-container div a{
	transition: none;
}
.map .image-container {
	position: relative; /*SVGの絶対配置の基準にする */
	display: inline-block; /* 画像のサイズに合わせる*/
    max-width: 1000px;
	left: 50%;
	transform: translateX(-50%);
    /*border: 1px solid #369;*/
}
.map .image-container img {
	display: block; /* 画像の下に余白ができるのを防ぐ */
	width: 100%; /* コンテナの幅に合わせる */
	height: auto;
/*	border: 1px solid #f0f;*/
}
.map .speech-bubbles-container {
	position: absolute; /* 画像の上に重ねる */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*pointer-events: none;*/ /* 吹き出しがクリックできないようにする */
}
.map .image-container .speech-bubble {
	position: absolute; /* 吹き出しの配置を絶対位置にする */
	pointer-events: auto; /* クリック可能にする場合 */
}

.map .image-container div a{
	/*display: inline-block;*/
	width: 100%;
	height: 100%;
	background: rgba(251,117,0,0.2);
	/*background: rgba(0,255,0,0.2);*/
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #000;
	transition: 0.3s ease-in-out !important;
	-webkit-transition: 0.3s ease-in-out !important;
}
.map .image-container div a:hover{
	background-size: 0 !important;
	transition: 0.3s ease-in-out;
	-webkit-transition: 0.3s ease-in-out;
	background: rgba(251,117,0,0.4);
}

.map #pageBody .image-container div a:link{color: #222;}
.map #pageBody .image-container div a:hover{color: #000;}
.map #pageBody .image-container div a:visited{color: #000 !important;}
.image-container .speech-bubble p{
	text-align: center;
	color: #000;
	/*font-weight: bold;*/
	font-size: clamp(10px, 2vw, 22px);
	/*font-size: 150%;*/
	line-height: 180%;
}
.image-container .speech-bubble span.areaName{
	display: block;
	font-size: 80%;
	line-height: 1;
}
.image-container .speech-bubble span.number{
	font-size: 200%;
	line-height: 1;
	vertical-align: -5px;
}
.image-container .totalNumber{
	position: absolute;
	color: #C44000;
	font-size: clamp(12px, 3vw, 36px);
	/*width: 100%;
	height: 24%;*/
	top: 14%;
	left: 8%;
}
.image-container .totalNumber span.number{
	font-size: 200%;
	line-height: 1;
	vertical-align: -5px;
}

/* 本社・工場・グループ */
.map .image-container div.speech-bubble.headoffice a,
.map .image-container div.speech-bubble.group a,
.map .image-container div.speech-bubble.factory a{
	background: none;
	border-radius: 0;
}
.image-container div.speech-bubble.headoffice span.areaName,
.image-container div.speech-bubble.factory span.areaName,
.image-container div.speech-bubble.group span.areaName{
    position: relative;
	font-size: clamp(0.875rem, -0.24rem + 2.32vw, 1.5rem);
}
.image-container div.speech-bubble.headoffice span.areaName::before,
.image-container div.speech-bubble.factory span.areaName::before{
    position: absolute;
    content: '';
    display: inline-block;
    border-radius: 100%;
    background: #FB7500;
    width: 32%;
    height: 65%;
    left: -40%;
    top: 50%;
    transform: translateY(-50%);
}
.image-container div.speech-bubble.group span.areaName::before{
    position: absolute;
    content: '';
    display: inline-block;
    border-radius: 100%;
    background: #FB7500;
    width: 10%;
    height: 65%;
    left: -15%;
    top: 50%;
    transform: translateY(-50%);
}

/* 各吹き出しの個別配置 */
.kitanihon {
	width: 17%; /* 吹き出しのサイズを幅の割合で指定 */
	height: 24%;
	top: 15%;
	left: 49%;
}
.kanto {
	width: 24%; /* 吹き出しのサイズを幅の割合で指定 */
	height: 33%;
	top: 41%; /* 上から10%の位置 */
	left: 46%; /* 左から20%の位置 */
}
.hokuriku {
	width: 16%; /* 吹き出しのサイズを幅の割合で指定 */
	height: 22%;
	top: 34.5%;
	left: 37.5%;
}
.kinki {
	width: 17%; /* 吹き出しのサイズを幅の割合で指定 */
	height: 23%;
	top: 57%;
	left: 31%;
}
.chushikoku {
	width: 21%; /* 吹き出しのサイズを幅の割合で指定 */
	height: 28%;
	top: 50%;
	left: 14%;
}
.kyushu {
	width: 13%; /* 吹き出しのサイズを幅の割合で指定 */
	height: 19%;
	top: 75%;
	left: 8%;
}
.overseas{
	width: 14%; /* 吹き出しのサイズを幅の割合で指定 */
	height: 19%;
	top: 68%;
	left: 78%;
}
.headoffice{
    width: auto;
	height: auto;
	top: 41.5%;
	left: 77.5%;
}
.factory{
	width: auto;
	height: auto;
	top: 47.5%;
	left: 77.5%;
}
.group{
    width: auto;
	height: auto;
	top: 90%;
	left: 63%;
}

/* SVGのレスポンシブ対応 */
.speech-bubble svg {
	width: 100%;
	height: auto;
	display: block;
}

/* メディアクエリでさらに調整 */
@media (max-width: 768px) {
    .image-container div.speech-bubble.headoffice span.areaName,
    .image-container div.speech-bubble.factory span.areaName,
    .image-container div.speech-bubble.group span.areaName{
        font-size: 14px;
        font-size: clamp(0.75rem, 0.631rem + 0.51vw, 0.875rem);
    }

    .image-container div.speech-bubble.headoffice span.areaName::before,
    .image-container div.speech-bubble.factory span.areaName::before {
        width: 32%;
        height: 65%;
        left: -40%;
    }










}
@media only screen and (max-width:610px){
	.image-container .speech-bubble p{
		/*font-size: clamp(14px, 2vw, 22px);*/
		line-height: 180%;
	}
}

/* アコーディオン ******************************/
.map .ttl-h3::after {
	/*background: none !important;*/
}
.map .box-toggle .ttl-h3 {
	padding-bottom: 0;
}
.map .box-toggle.toggle-set .toggle-box h4{margin: 48px 0 10px 0;	}
.map .box-toggle.toggle-set .toggle-box h4:first-of-type{margin: 0 0 10px 0;}
.map .box-toggle.open > .toggle-box {padding: 10px 30px 50px 30px;}

.box-toggle > .toggle-btn {
	font-size: 18px;
	line-height: 1.4;
}
.toggle-btn::after{
	content: none;
}
.toggle-btn span{
	display: inline-block !important;
	position: relative;
	/*background: #eee;*/
}
.toggle-btn span::after{
	content:"";
	box-sizing:border-box;
	width:10px;
	height:10px;
	border-right:1px solid #C44000;
	border-bottom:1px solid #C44000;
	position:absolute;
	top: 23px;
	right: 0;
	transform:translate(-40%, 0) rotate(45deg);
	transition:transform 0.3s ease;
}
.open>.toggle-btn span::after{transform:scaleY(-1) translate(-40%, 0) rotate(45deg);top:calc((50% - 0));}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Tablet
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width: 768px) {
	.map .box-toggle.open > .toggle-box {padding: 10px 10px 30px 10px;}
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Smartphones
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width:599px){
	.toggle-btn span::after{
		top: 15px;
	}

}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Smartphones (portrait)
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width:440px){	
	
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Smartphones small (portrait)
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width:374px){

}