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

.shinjuku_tel .text_box dt:hover,
.map-detail h3:hover{cursor: pointer; opacity: 0.7;}


/* p-read =========================*/
#p-read{padding: 120px 0 40px; position: relative; z-index: 2;}
#p-read .read_text{font-size: 16px; text-align: center; letter-spacing: 2px; line-height: 2.3; margin-top: 40px;}

@media screen and (max-width:960px){
    #p-read .read_text{font-size: 14px; letter-spacing: 1px;}
}
@media screen and (max-width:640px){
    #p-read{padding: 40px 0 0;}
    #p-read .read_text{margin-top: 25px; text-align: left;}
}

/*MAP関連*/
#baseMap{margin-bottom: 40px;}
#map-detailList.inner{max-width: 1000px;margin-bottom: 100px;}
.base-name{position: relative;max-width: 920px;width: 100%;margin: 0 auto;}
.base-name .base-nametag{position: absolute;z-index: 1; color: #000;padding: 4px 9px 4px 7px;border-radius: 25px;}
.base-name #btn_1{top: 74.5%; left: 25%;}
.base-name #btn_2{top: 79.5%; left: 17%;}
.base-name #btn_3{top: 52.8%; left: 62%;}
.base-name #btn_4{top: 70.8%; left: 55%;}
.base-name #btn_5{top: 74%; left: 44.5%;}
.base-name #btn_6{top: 72%; left: 38%;}
.base-name #btn_7{top: 75.5%; left: 37.8%;}
.base-name #btn_8{top: 18.5%; left: 66.4%;}

@media screen and (max-width: 768px){
	#baseMap {overflow: scroll;}
  #baseMap .inner{padding: 0;}
	.base-name {max-width: inherit;width: 500px;margin: 0 auto;}
	
	.base-name #btn_1 {top: 280px; left: 123px;}
	.base-name #btn_2 {top: 297px; left: 82px;}
	.base-name #btn_3 {top: 197px; left: 307px;}
	.base-name #btn_4 {top: 264px; left: 270px;}
	.base-name #btn_5 {top: 278px; left: 217px;}
	.base-name #btn_6 {top: 260px; left: 186px;}
	.base-name #btn_7 {top: 285px; left: 185px;}
	.base-name #btn_8 {top: 70px; left: 325px;}
}
.placeName{font-size: 10px; font-weight: bold;}

span.placeDot {
	position: relative;
	display: inline-block;
	background:#F08300;
	border-radius: 50px;
	background-size: cover;
	width: 12px;
	height: 12px;
	margin-right: 4px;
}

span.placeDot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: -1;
    background: #fff;
    animation: placeDot 2s ease-out;
    animation-iteration-count: infinite;
}

/* IE hack */
@media all and (-ms-high-contrast: none) {
  span.placeDot::before {
    top: 0px;
    left: 0px;
  }
}
@keyframes placeDot {
  0% {
    transform: translate(-50%, -50%) scale(1, 1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5, 2.5);
    opacity: 0;
  }
}

@media screen and (max-width: 780px){
  .placeName{letter-spacing: 0;}
  span.placeDot{display: block;
		width: 6px;height: 6px;
	}
  .base-name #btn_6 span.placeDot{display: inline-block;}
}
@media screen and (max-width:400px){
	span.placeDot {width: 8px; height: 8px;}
}


/*拠点詳細*/
.base-container {display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;
	padding-top: 270px;margin-top: -210px;}

.base-container figure{width: 47%;}
.base-container .map-detail{width: 50%;}

.map-detail dl{
	font-size: 14px;
    line-height: 1.8;
    color: #535557;
}
.map-detail h3{
    color: #671e75;
    font-weight: normal;
    margin-bottom: 15px;
    font-size: 25px;
}
.map-detail dl + dl{margin-top:15px;}	

.GoogleMap-link{
    display: inline-block;
	    line-height: 1.5;
      margin-top: 10px;
}
.GoogleMap-link a{
  border: 1px solid #B087BC;
  color: #B087BC;
  font-size: 15px;
	font-weight: bold;
  padding: 5px 15px;
  display: block;
  position: relative;
	transition: all .25s ease-out;
}
.GoogleMap-link a span{position: relative; z-index: 2;}
.GoogleMap-link a::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: #B087BC;
  transition: all .25s ease-out;
}
.GoogleMap-link a:hover{color: #fff;}
.GoogleMap-link a:hover::before{width: 100%;}

@media screen and (max-width:960px){
  .base-container {padding-top: 100px; margin-top: -100px; padding-bottom:40px;}
	.base-container figure,
	.base-container .map-detail{width: 100%;}
	
	.base-container .map-detail{margin-top: 20px;}
}
@media screen and (max-width:640px){
  .map-detail dl{font-size: 13px;}
}

/*海外拠点*/
#overseas{background: #f4f4f4; padding: 80px 0;}
#overseas .p-titleSecondary{margin-bottom: 50px;}
.overseas-inner{
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 25px;
}
.overseas-mainMap{width: 60%}
.overseas-img{width:37%;}
.overseas-img li + li{margin-top: 3.5%;}

@media screen and (max-width:960px){
}
@media screen and (max-width:640px){
  #overseas{padding: 40px 0;}
  .overseas-inner{padding: 0 25px;}
  .overseas-mainMap{width: 100%; margin-bottom: 40px;}
  .overseas-img{width: 100%;}
}



.base-container .map-detail.shinjuku_tel{
	/*background: #f8f9fb;*/
	width: 100%;
	margin-top: 30px;
	font-size: 14px;
	line-height: 1.8;
	color: #535557;
	padding: 40px 60px;
	border: 1px solid #ddd;
}
.shinjuku_tel dl + dl{
	margin-top: 0;
}
.shinjuku_tel .grid_contents{
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 2%;
	row-gap: 15px;
}
.shinjuku_tel .text_box{
	display: grid;
	grid-template-columns: 1fr 1fr;
	row-gap: 15px;
	border-bottom: 1px solid #ddd;
	padding: 10px 0;
	padding-top: 260px;
  margin-top: -240px;
}
.shinjuku_tel .text_box dt{
	border-left: 7px solid #671e75;
	padding-left: 15px;
	color: #671e75
}
.shinjuku_tel .grid_contents .item_column {
	grid-column: 1 / 3;
}
.shinjuku_tel .grid_contents .item_column .text_box{
	grid-template-columns: 1fr 3fr;
}

.en_nomucom_btn{max-width: 500px; width: 100%; margin: 40px auto 0;}
.en_nomucom_btn a{display: block; text-align: center; background: #d80202; color: #fff; border-radius: 5px; padding: 20px 10px; box-shadow: 0 0 10px #8f8f8f; transition: 0.3s ease;}
.en_nomucom_btn a:hover{box-shadow:none; transform: scale(0.97); box-shadow: 0 0 0 #8f8f8f;}
.en_nomucom_btn a small{background: #fff; display: block; max-width: 150px; margin: 0 auto 10px; padding: 5px 10px; border-radius: 16px;}

@media screen and (max-width:640px){
	.base-container .map-detail.shinjuku_tel{
		padding: 20px;
	}
	.shinjuku_tel .grid_contents{
		grid-template-columns: 1fr;
	}
	.shinjuku_tel .grid_contents .grid_contents__item{
		grid-column: 1 / 1;
	}
	.shinjuku_tel .grid_contents .item_column .text_box{
		display: block;
	}
	.shinjuku_tel .grid_contents .item_column .text_box dt + dd{
		margin-top: 10px;
	}

  .shinjuku_tel .text_box{padding-top: 70px; margin-top: -60px;}
}



.overseas-img a {position: relative;display: block;transition: 0.3s ease;}
.overseas-img a:before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.55);z-index: 1;}
.overseas-img a .innerBox {position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: 100%;z-index: 2;text-align: center;}
.overseas-img a .innerBox p {color: #fff;}
.overseas-img a .innerBox span {display: inline-block;color: #671e75;background: #fff;font-size: 12px;padding: 10px;margin-top: 10px;}
.overseas-img a:hover {transform: scale(0.97);}