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


/* モーダルCSS */
.modalArea {
  display: none;
  position: fixed;
  z-index: 9999999; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(30,30,30,0.9);
}

.modalWrapper {
  position: absolute;
  top: 10%;
  left: 3%;
  transform:translate(auto,auto);
  width: 90%;
  height: 80vh;
  padding: 10px 2%;
  background-color: #fff;
  overflow-y: auto;
}

.modalWrapper h2 {
	margin: 10px 0;
	padding: 10px 0 10px 30px;
	background-color: #ed6c00;
	color: #FFF;
}


.modalWrapper .glid {
  width: 50%;
  margin: 0;
  padding: 0;
  float: left;
}

.modalWrapper .glid .text {
  width: 90%;
  margin: 20px 5%;
  padding: 0;
  float: left;
}

.modalWrapper .glid .text .copy {
	color: #2E3180;
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 10px;
	width: 100%;
	float: left;
}

.modalWrapper .glid.photo {
  text-align: center;
}

.modalWrapper img {
	max-width: 100%;
	margin: 20px auto 10px;
}

.modalContents .wrap {
	width: 96%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
	padding: 0 2%;
	margin: 50px 0;
}

.modalContents .wrap dl {
	border: #C1C1C1 1px solid;
}

.modalContents .wrap dt {
	text-align: center;
	font-size: 18px;
	color: #2E3180;
	font-weight: 700;
	width: 90%;
	margin: 0 5%;
	padding: 5px 0;
	border-bottom: #9DE1FC 1px solid;
}

.modalContents .wrap dd {
	width: 90%;
	margin: 10px 5%;
	padding: 0;
}

.closeModal {
  position: fixed;
  top: 0.5em;
  right: 0.5em;
  cursor: pointer;
  font-size: 40px;
  background-color: #FFF;
  padding: 10px 0;
  border-radius: 5px;
}


/* 以下ボタンスタイル */
button {
	width: 30px;
	height: 30px;
	background-color:rgba(223,204,52,0.70);
	border-radius: 15px;
	cursor: pointer;
}

button:hover {
	background-color:rgba(223,204,52,1.0);
}

#openModal,
#openModal2,
#openModal3,
#openModal4,
#openModal5{
  position: relative;
  top: 0;
  display: block;
}

/* 以下Slick Customスタイル */

.wrap_slide {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
}

.wrap_slide ul li img {
	width: 200px;
	margin: 0 0 50px;
	padding: 0;
	float: left;
	cursor: pointer;
}

.wrap_slick {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
}




/* *********************************************************************** */
/*        RESPONSIVE  LAYOUT WIDTH:980px          */
/* *********************************************************************** */

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

.office .wrapper { width: 700px; }

.btn_01 { top:-370px;left: 120px; }
.btn_02 { top:-210px; left: 225px; }
.btn_03 { top:-320px;left: 150px; }
.btn_04 { top:-250px;left: 130px; }
.btn_05 { top:-270px;left: 180px; }
.btn_06 { top:-560px;left: 170px; }
.btn_07 { top:-440px;left: 480px; }
.btn_08 { top:-630px;left: 480px; }
.btn_09 { top:-630px;left: 530px; }
.btn_10 { top:-420px;left: 50px; }
.btn_11 { top:-485px;left: 110px; }

}


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

.wrap_slide ul li img { width: 90%;margin: 0 5% 30px; }

.wrap_pc { display: none; }
.wrap_mobile { display: block; }

.modalWrapper h2 { font-size: 18px; }

.modalWrapper .glid { width: 100%; }

}

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

.modalContents .wrap { grid-template-columns: 1fr; }


}