

.areaMaps {
	background-color: #fff;
}
.areaMaps * {
	-webkit-user-select:none;
	-webkit-user-drag: none;
	user-select:none;
	user-drag: none;
}
.mapDetailImage {
	position: relative;
}

.moreContent.hide {
	display: none;
}

.btnArea {
	text-align: center;
}
.btnArea a {
	position: relative;
}
.btnArea a .btnBg {
	background-color: #FFF;
	-webkit-mask: url("https://www.itochu.co.jp/ja/about/work_style/image/btn_bg_pc.png") no-repeat center center / 100% 100%;
	mask: url("https://www.itochu.co.jp/ja/about/work_style/image/btn_bg_pc.png") no-repeat center center / 100% 100%;
	transition: background-color .2s ease;
}
.btnArea a .btnBorder {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #26BDE2;
	-webkit-mask: url("https://www.itochu.co.jp/ja/about/work_style/image/btn_border_pc.png") no-repeat center center / 100% 100%;
	mask: url("https://www.itochu.co.jp/ja/about/work_style/image/btn_border_pc.png") no-repeat center center / 100% 100%;
	transition: background-color .2s ease;
}
.btnArea a .btnObj {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 0;
	background-color: transparent;
	border: none;
	font-weight: 500;
	color: #26BDE2;
	cursor: pointer;
	transition: color .2s ease;
}
.btnArea a .btnObj .text {
	font-size: 1rem;
}
.btnArea a:hover .btnBorder,
.btnArea a:active .btnBorder {
	background-color: #FD6925;
}
.btnArea a:hover .btnObj,
.btnArea a:active .btnObj {
	color: #FD6925;
}
.btnArea a .btnObj .icon {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #26BDE2;
	-webkit-mask: url("https://www.itochu.co.jp/ja/about/work_style/image/icon_down.png") no-repeat center center / contain;
	mask: url("https://www.itochu.co.jp/ja/about/work_style/image/icon_down.png") no-repeat center center / contain;
	transition: transform .5s ease-out;
}
.btnArea a:hover .btnObj .icon,
.btnArea a:active .btnObj .icon {
	background-color: #FD6925;
}
.btnArea a.close .btnObj .icon {
	transform: scale(1, -1);
}
.btnArea a.linkBtn .btnBg {
	background-color: #26BDE2;
}
.btnArea a.linkBtn:hover .btnBg,
.btnArea a.linkBtn:active .btnBg {
	background-color: #DD1367;
}
.btnArea a.linkBtn .btnObj {
	color: #FFF;
}

/* パソコン */
@media print, screen and (min-width: 769px) {
	.anchor {
		transform: translate3d(0, min(-70px, calc(-70 / 1200 * 100vw)), 0);
	}
	
	
	/* ==========================================
	エリア一覧
	*/
	.areaPage {
	}
	.pj_box{
		padding-bottom: 30px;
	}
	.areaPage .contentWrapper {
		padding-top: 1px;
		padding-bottom: 30px;
	}
	.areaPage h2 {
		margin-top: min(60px, calc(60 / 1440 * 100vw));
	}
	.areaPage .areaBlocks {
		display: flex;
		justify-content: space-between;
	}
	.areaPage .areaBlocks .mapImage {
		width: 40%;
		margin-top: min(60px, calc(60 / 1440 * 100vw));
	}
	.areaPage .areaBlocks .mapImage .stickyWrap {
		position: sticky;
		top: min(190px, calc(190 / 1200 * 100vw));
	}
	.areaPage .areaBlocks .mapImage .areaLogo {
		margin-bottom: 1em;
	}
	.areaPage .areaBlocks .mapImage .areaLogo .mapAreaTitle {
		display: none;
		font-size: 22px;
	}
	.areaPage .areaBlocks .mapImage .areaLogo .mapAreaTitle.current {
		display: block;
	}
	.areaPage .areaBlocks .mapImage .mapNavi {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
	}
	.areaPage .areaBlocks .mapImage .mapNavi .mapNaviIcon {
		position: absolute;
		opacity: 0;
		width: 320px;
		transform-origin: center bottom;
	}
	.areaPage .areaBlocks .mapImage .mapNavi .mapNaviIcon.current {
		opacity: 1;
	}
	.areaPage .areaBlocks .mapImage .mapNavi .mapNaviIcon {
		width: 100%;
		min-width: 320px;
		bottom: 0;
		text-align: center;
		margin: 0 auto;
	}
	.areaPage .areaBlocks .mapImage .mapNavi .mapNaviIcon img{
		border-style:none !important;
		outline: none !important;
		width: 320px;
		margin-left: auto;
		margin-right: auto;
	}
	.areaPage .areaBlocks .mapImage .mapNavi .mapNaviIcon a{
		border-style:none !important;
		outline: none !important;
	}
	.areaPage .areaBlocks .mapImage .mapNavi .mapNaviIcon#map01Icon {
		bottom: 193px;
	}
	.areaPage .areaBlocks .mapImage .mapNavi .mapNaviIcon#map02Icon {
		bottom: 138px;
	}
	.areaPage .areaBlocks .mapImage .mapNavi .mapNaviIcon#map03Icon {
		bottom: 70px;
	}
	.areaPage .areaBlocks .areaDescription {
		width: 55%;
	}
	.areaPage .areaBlocks .areaDescription .areaContent {
		margin-bottom: 3.5em;
		padding: 20px 2em;
		border-radius: 10px;
		background: #fff;
		border: 2px solid #5f87c8;
	}
	/*.areaPage .areaBlocks .areaDescription .areaContent:before {
		content: "";
		position: absolute;
		background-color: #5f87c8;
		display: grid;
		height: calc(100vh - 16px);
		margin: 35px 0 0;
		padding: 8px;
		place-items: center;
		width: calc(100% - 16px);
		height: calc(8px / 2 * tan(70deg));
		width: 8px;
		clip-path: polygon(0 0, 100% 50%, 0 100%);
		right: -22px;
	}*/

	.areaPage .areaBlocks .areaDescription .areaContent .mapDetailText {
		margin: 1em 0;
	}
	.mapDetailText h4{
		font-size: 18px;
	}
	.pj_box.oth .index_box + p,
	.mapDetailText p{
		font-size: 16px;
	}
	.pj_box.oth .index_box + p{
		margin-bottom: 0;
	}
	
	a.btnBack .btnObj .icon.typeLeft {
		left: 1.5em;
		width: .7em;
		height: 1em;
		transform: rotate(90deg);
	}
	
	.areaPage .ilTori {
		top: 70vh;
		left: 0;
		width: min(180px, calc(180 / 1440 * 100vw));
		transform: translate3d(-50%, 0, 0);
	}
	.areaPage .ilNami {
		top: 40vh;
		right: 0;
		width: min(628px, calc(628 / 1440 * 100vw));
		transform: translate3d(90%, 0, 0);
	}

}

h3.mapDetailTitle{
	font-size: 22px;
	margin-bottom: 20px;
	text-align: left;
	color: #074096;
}
.mapImage h3.mapDetailTitle{
	text-align: center;
	margin-bottom: 15px;
}
.mapDetailText h4{
	margin-bottom: 10px;
}
.mapDetailText p+h4,
.mapDetailText h4+h4,
.mapDetailText figure+h4,
.mapDetailText div+h4{
	margin-top: 25px;
}
.pj_box.oth h5.slideInDelay:after {
	max-width: 130px;
}
.pj_box figure {
    width: 320px;
    margin: 0 auto; 30px;
    min-width: auto;
}

/* スマホ */
@media screen and (max-width:768px) {
	.typePC {
		display: none !important;
	}
	
	/* ==========================================
	エリア一覧
	*/
	.areaPage {
	}
	.areaPage .contentWrapper {
		padding-top: 1px;
		padding-bottom: min(256px, calc(256 / 750 * 100vw));
	}
	.areaPage .contentWrapper .pj_box{
		background-color: #fff;
	}
	.areaPage h2 {
		width: 95vw;
	}
	.areaPage .areaContent {
		margin-top: 7vw;
	}
	.areaPage .areaContent + .areaContent {
		margin-top: 15vw;
	}
	.areaPage .areaContent h3 {
		margin-bottom: 5vw;
	}
	.areaPage .areaContent .mapDetailText {
		margin-top: 1em;
		line-height: 2;
		letter-spacing: .1em;
	}
	
	a.btnBack .btnObj .icon.typeLeft {
		left: 1.5em;
		width: .7em;
		height: 1em;
		transform: rotate(90deg);
	}
	
	.areaPage .ilTori {
		bottom: 0;
		left: 4vw;
		width: min(256px, calc(256 / 750 * 100vw));
	}
	h3.mapDetailTitle{
		text-align: center;
	}
	.areaPage .contentWrapper{
		padding-bottom: 0;
	}
	.areaPage .areaContent .mapDetailMap {
	    text-align: center;
	    margin: 5vw auto;
	    width: 250px;
	}
}
/* タブレット */
@media only screen and (min-width: 769px) and (max-width: 1280px) {
}

.mapDetailText .flexArea.clm2 p{
	margin-bottom: 0;
}
.areaPage .anchor {
    transform: translate3d(0, min(-25px, calc(-25 / 1200 * 100vw)), 0);
}
.pj_box.oth{
	margin-top: 0;
}

@media only screen and (min-width: 1200px) {
	.pj_box figure,
	.areaPage .areaBlocks .mapImage .mapNavi .mapNaviIcon,
	.areaPage .areaBlocks .mapImage .mapNavi .mapNaviIcon img {
	    width: 380px;
	    left: 26px;
	}

	.areaPage .areaBlocks .mapImage .mapNavi .mapNaviIcon#map01Icon {
		bottom: 231px;
	}
	.areaPage .areaBlocks .mapImage .mapNavi .mapNaviIcon#map02Icon {
		bottom: 164px;
	}
	.areaPage .areaBlocks .mapImage .mapNavi .mapNaviIcon#map03Icon {
		bottom: 84px;
	}
}