@charset "UTF-8";
body{
	overflow:scroll;
}

a img:hover{opacity:1;}

.title{
background-color:#B98BB7;
height:200px;
}

.title h1{
margin: 0 auto;
padding-top: 75px;
max-width: 80%;
width: 80%;
color: #fff;
font-weight: 300;
font-size: 2.5em;
line-height: 0.8em;
}

.title h1 span{
color: #856699;
font-weight: 300;
font-size: 0.4em;
}

.sec_cts{
max-width:1000px;
margin: 75px auto;
overflow:hidden;
}

#div_top_slider{
	min-height:350px;
	margin-top:30px;
	#margin-bottom:30px;
	position:relative;
}
.film_roll_shuttle{
	
}
.roll_img_div{
	width:350px !important;
	height:153px !important;
	margin-left:30px;
	margin-right:30px;
	position:relative;
}
.film_roll_child{
	left:-70px;
}
.roll_img_div_active{
	/*width:500px !important;
	height:350px !important;*/
	
	/*width:630px !important;
	height:433px !important;*/
	
	width:500px !important;
	height:303px !important;
	
	/*width:410px !important;
	height:383px !important;*/
}
.roll_img{
	/*width:100%;
	height:100%;*/
}

a.film_roll_prev, a.film_roll_next{
	display:none !important;
}

.roll_img_div>a.film_roll_prev{
	display:block !important;
	position:absolute;
	left:-7% !important;
	top:50% !important;
}
.roll_img_div>a.film_roll_next{
	display:block !important;
	right:-7% !important;
	top:50% !important;
}
.film_roll_prev{
	width:20px !important;
	border:none !important;
	color:#B98BB7 !important;
	background-color:#FFFFFF !important;
	text-decoration:none !important;
	left:28% !important;
}
.film_roll_next{
	width:20px !important;
	border:none !important;
	color:#B98BB7 !important;
    background-color:#FFFFFF !important;
	text-decoration:none !important;
	right:27% !important;
}

.film_roll_pager{
	display:none;
}
.roll_img_overlay_div{
	display:block;
	width:100%;
	height:50px;
	background-color:#B98BB7;
	position:absolute;
	bottom:-41px;
	left:0px;
	opacity:0.5;
}
.roll_img_overlay_text{
	display:block;
	width:100%;
	height:50px;
	position:absolute;
	bottom:-54px;
	left:45px;
	color:#FFFFFF;
	text-indent:10px;
}
.roll_img_overlay_ico{
	display:block;
	width:400px;
	height:50px;
	position:absolute;
	bottom:-49px;
	left:20px;

}
.roll_ico{
	
	width:30px;
	height:30px;
}
/*仕事文書*/
.div_meaning_para{
	min-height:150px;
	/*text-align:center;*/
	padding:5%;
	/*padding:20px;*/
	max-width: 700px;
	margin:0 auto;
}
.div_meaning_para p {
	font-size: 14px;
	line-height: 1.7;
}
.div_meaning_para h1{	
	font-weight:normal;
	color:#B98BB7;
	text-align:center;
}
.div_meaning_para h4{	
	font-weight:normal;
	text-align:center;
}


/*ポッアップリンク*/
.div_popup_links{
	width:100%;
}
/*.popup_link{
	text-align:center;
	width:150px;
	height:150px;
	border-radius:100px;
	background-color:white;
}*/
.popup_links_ul{
	max-width:1000px;
	margin: 0 auto;
}
.popup_links_il{
	text-align:center;
	width:22%;
	border-style: none;
	margin: 0 1.3% 40px;
	position:relative;
	vertical-align: middle;
	display: inline-flex;
	align-items: center;
	justify-content: center;

}

.circle_link{
	text-decoration:none;
	color:#000000;
}

.popup_link_img{
	width:60px;
	height:60px;
}

.popup_top_icon{
	width:100px;
	height:100px;
	margin-top: -50px;
}
/*PEOPLE*/
.div_nav_btn{
	/*min-height:150px;*/
	text-align:center;
}
 .div_nav_btn .navbth_pc{
	 width:310px;
	 height:60px;	
 }
 
 /*POPUP DIV PC*/
 #PC_popup1,#PC_popup2{
	 display:none;
 }
 #div_modal_back_pc,#div_modal_back_mb{
  position: fixed;
  z-index:1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
  opacity:0.2;
  display:none;
  
 }
 #div_modal_pc{
	 /*width:50%;*/
	 max-width: 1000px;
	 height:auto;
	 background-color:#FFFFFF;
	 position:absolute;
	 top:2%;
	 left:15%;
	 right:15%;
	 margin:20px auto;
	 z-index:1001;
	 display:none;
 }
 
 
 
 .popup_pic_li{
	 display:block;
	 width:100%;
	 height:20%;	
 }
  .popup_pic_li img{
	 width:100%;
	 height:100%;
 }
 .popup_content_div{
	 position:relative;
 }

 .popup_content_con{
 	display: flex;
 	/*flex-flow: nowrap;*/
 	padding: 20px;
 	justify-content: space-between;
 }

/* .popup_content_con.system{
 	justify-content: start;
 }*/

 .popup_content_left{
	 width:40%;
 }

 .popup_content_left.system{
 	display: flex;
 	align-items: center;
}

 .popup_content_right{
	 width:60%;
	 padding-top:40px;
	 display: flex;
	 flex-direction: column;
 }

.popup_content1{
	display:block;
	margin: 0 auto 50px;
	text-align:center;
	width:77%;
}
.popup_content1 p {
	font-size: 14px;
	line-height: 1.7;
	text-align: left;
}
.popup_content1 h2{
	color:#000000;
	font-weight:normal;
	text-align:center;
	margin-top:20px;
}


.popup_content2{
	display:block;
	margin: 0 auto 50px;
	text-align:center;
	width:77%;
}
.popup_content2 p {
	font-size: 14px;
	line-height: 1.7;
}
.popup_content2 h3{
	color:#856699;
	font-weight:normal;
	text-align:center;
}
.popup_content3{
	display:block;
	text-align:left;
	width:77%;
	/*height:100px;*/
	margin: 0 auto 30px;
	/*position:relative;*/
}

/*.popup_pic_ul::after{
	content:'※写真・イラストはイメージです。';
	font-size: 12px;
	color: #666;
	margin-top: 10px;
	line-height: 3em;
}*/


.main_busho_back{
	background: #B98BB7;
  filter: alpha(opacity=30);
  /* IE */
  -moz-opacity: 0.3;
  /* Mozilla */
  opacity: 0.3;
  /* CSS3 */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;

}
.main_busho_para{
	background: #F4EEF4;
	/*position: absolute;*/
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding:15px;
}
.main_busho_para h2{
	color:#b98bb7;
	font-weight:normal;
}
.main_busho_para h3{
	color:#b98bb7;
	font-weight:normal;
}
.main_busho_para p{
	color:#000000;
	font-weight:normal;
	
}


.popup_content4{
	display:block;
	width:77%;
	margin:0 auto 20px;
	border: 1px solid #AF7BAD;
	position: relative;
}

.popup_content4 p{
	margin: 0;
	padding: 15px;
	text-align: center;
}

a.popup_content4_link{
	color: #AF7BAD;
	text-decoration: none;
}
a.popup_content4_link:hover{
	opacity: 0.7;
	transition: 0.3s;
}

#popup_content4_ico {
    fill: #AF7BAD;
    width: 17px;
    height: 17px;
    position: absolute;
    right: 0;
    bottom: 0;
}

.popup_content5{
	display:block;
	width:86px;
	margin: auto auto 35px;
}


.popup_close_btn{
	position:absolute;
	top:0px;
	right:-1px;
	
}


/*POPUP MODAL MOBILE*/
#div_modal_mb{
	/* width:85%;*/
	 height:auto;
	 background-color:#FFFFFF;
	 position:absolute;
	 left:5%;
	 right:5%;
	 /*margin:20px auto;*/
	 z-index:1001;
	 display:none;
	
 }
 .popup_content_mb{
	display:block;
	margin-top:20px;
	margin-bottom:70px;
	text-align:center;
 }
 .popup_content_mb h3{
	 font-weight:normal;
 }
 .popup_content_mb h4{
	 font-weight:normal;
	 color:#B98BB7;
 }
.main_busho_para h5{
	 font-weight:normal;
	 color:#856699;
 }

 .popup_content_mb p{
	 text-align:left;
	 font-size:1em;
	 padding:20px;
	 margin:0 3%;
 }
 .popup_img_mb{
	 width:85%;
 }

 .popup_link_content{
 	position: relative;
 	line-height: 1.7;
 }

 .popup_link_content a{
 	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent:-999px;
    z-index: 2; 
 }

.popup_link_content:hover {
    filter:alpha(opacity=70);/* IE 6,7*/
    -ms-filter: "alpha(opacity=70)";/* IE 8,9 */
    -moz-opacity:0.7;/* FF , Netscape */
    -khtml-opacity: 0.7;/* Safari 1.x */
    opacity:0.7;
    zoom:1;/*IE*/
     transition: all .5s;
}

.people_btn a{
	color: #fff;
	text-decoration: none;
}

.people_btn{
	position: relative;
	z-index: 1;
	margin: 40px auto 80px;
	text-align: center;
	max-width: 300px;
	padding: 10px;
	background: -moz-linear-gradient(left, #856699, #AF7BAD);
	background: -webkit-linear-gradient(left, #856699, #AF7BAD);
	background: linear-gradient(to right, #856699, #AF7BAD);
	font-size: 12px;
}

.people_btn p{
	margin: 0;
}

.people_btn span{
	font-size: 20px;
}

.people_btn:hover, .ng_btn:hover{
	opacity: 0.7;
	transition: 0.3s;
}

.people_btn a, .ng_btn a{
	color: #fff;
	text-decoration: none;
}

#people_btn_ico{
	fill:#fff; 
	width: 17px; 
	height:17px;
	position: absolute;
	right: 0;
    bottom: 0;

}


@media (max-width: 768px){

.popup_links_ul{
	padding: 0 3%;
	border-style: none;
}

.popup_links_il{
	width:45%;
	border-style: none;
	margin: 0 2.2% 40px;
	position:relative;
	vertical-align: middle;
	display: inline-flex;
	align-items: center;
	justify-content: center;

}

.popup_content_mb{
	margin-bottom:0px;
 }

 .popup_content3{
	width:85%;
}

}

/*1024px*/
@media (max-width: 64em) {

	.title{
	background-color:#B98BB7;
	height:100px;
	}
	.title h1{
	padding-top: 30px;
	max-width: 90%;
	width: 90%;
	color: #fff;
	font-weight: 100;
	font-size: 2em;
	line-height: 0.8em;
	}

	.title h1 span{
	font-size: 0.5em;
	}
	
	.sec_cts{
	max-width:1000px;
	margin: 25px auto;
	overflow:hidden;
	padding: 0 5%;
	}
	
	.div_meaning_para{
		width:95%;	
		!margin-top:-100px;
	}
	
	.main_busho_para p{
		font-size:14px;
	}
	
	#div_top_slider{
		width:100%;
		margin: 0 auto;
		left:0px !important;
	}
	
	.film_roll_wrapper{
		width:100% !important;
		margin:0 auto !important;
		left:0px !important;
	}
	
	.roll_img_div{
		left:0px !important;
		top:20px !important;
		width:350px !important;
		height:153px !important;
		
		/*width:500px !important;
		height:303px !important;*/
	
	}

	.roll_img{
		#width:80% !important;
	}
	.roll_img_overlay_div{
		bottom:-88px !important;
		left:0;
	}
	.roll_img_overlay_ico{
		bottom:-100px !important;
		left:20px !important;
	}
	
	.roll_img_overlay_text{
		bottom:-105px !important;
		left:50px !important;
	}

	.main_busho_para{
		margin-top: 20px;
	}

	/*.popup_content3::after{
		content:'※写真・イラストはイメージです。';
		font-size: 12px;
		color: #666;
		margin-top: 10px;
		line-height: 3em;
	}*/
}

@media (max-width: 38em) {
	.people_btn {
		width: 100%;
		/*margin: 0 5%;*/
	}
}
