@charset "utf-8";
/* CSS Document */

/*--------------------------------------

ボランティア・アルバイト(search/volunteer.php)

--------------------------------------*/

/*--------------------------------------
全体の枠
--------------------------------------*/
#page{
	background-color: #fff;
}

.enlist_background{
	margin-top:30px;
	background-color:#fff;
	padding-bottom:70px;
}
.enlist2_wrap{
	width:1127px;
	margin:0 auto;
}
.enlist2_wrap .enlist2_sidebar,
.enlist2_wrap .enlist2_contents{
	color:#3E3A39;
}
/*--------------------------------------
パンくずリスト
--------------------------------------*/
.breadcrumb{
	width:1080px;
	margin:23px auto 0 auto;
	font-size:14px;
}
.breadcrumb li{
	display:inline-block;
	position: relative;
	vertical-align:bottom;
}
.breadcrumb li:after{
	content:'>';
	position: relative;
	margin-left:10px;
	margin-right:10px;
}
.breadcrumb li:last-child:after{
	content:'';
}
/*--------------------------------------
サイドバー
--------------------------------------*/
.enlist2_wrap .enlist2_sidebar{
	width: 207px;
	float: left;
	background-color:#fedd75;
}
.enlist2_wrap .enlist2_sidebar h4{
	background-repeat: no-repeat;
	background-position: left top;
	font-size: 16px;
	font-weight: bold;
	margin-left: 20px;
	height: 25px;
	line-height:1.5;
}
.enlist2_sidebar ul{
	margin:0 0 0 20px;
}
.enlist2_sidebar ul li{
	display:inline-block;
	margin-top:8px;
}
/*-------------------
エリア
-------------------*/
.title01{
	margin-top: 22px;
	margin-right: 22px;
	padding-bottom:4px;
	background-image: url(../img/jissyu/side_bar_icon01.png);
	background-repeat: no-repeat;
	padding-left: 30px;
	color:#3C3B39;
}
.button{
	display: inline-block;
	width: 78px;
	height: 40px;
	text-align: center;
	text-decoration: none;
	outline: none;
	background-color: #fff;
	border: 1px solid #C7C7C7;
	color: #333333;
	border-radius:3px;
	font-size:15px;
}
.button:hover{
	background-color: #fa8a05;
	color: #fff;
	cursor: pointer;
}
.button::before,
.button::after{
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button,
.button::before,
.button::after{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.button_on{
	display: inline-block;
	width: 78px;
	height: 40px;
	text-align: center;
	text-decoration: none;
	outline: none;
	background-color:#ff8287;
	border:1px solid #C7C7C7;
	color:#fff;
	border-radius:3px;
	font-size:15px;
}
/*-------------------
カテゴリー
-------------------*/
.title02{
	margin-top: 32px;
	margin-right: 22px;
	padding: 2px 0 0 32px;
	background-image: url(../img/volunteer/side_bar_icon02.png);
	background-repeat: no-repeat;
	color: #3C3B39;
}
.button2{
	display: inline-block;
	width: 166px;
	height: 40px;
	text-align: left;
	text-decoration: none;
	outline: none;
	background-color:#fff;
	border:1px solid #C7C7C7;
	color:#333333;
	border-radius:3px;
	font-size:15px;
	padding-left:15px;
}
.button2_on{
	display: inline-block;
	width: 166px;
	height: 40px;
	text-align: left;
	text-decoration: none;
	outline: none;
	background-color:#ff8287;
	border:1px solid #C7C7C7;
	color:#fff;
	font-size:15px;
	padding-left:15px;
	border-radius:3px;
}
.button2:hover {
	background-color: #ff8287;
	color: #fff;
	cursor: pointer;
}
.button2::before,
.button2::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button2,
.button2::before,
.button2::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
/*-------------------
検索条件リセット
-------------------*/
.button3{
	display: inline-block;
	width: 166px;
	height: 44px;
	text-align: center;
	text-decoration: none;
	outline: none;
	position: relative;
	z-index: 2;
	background-color: #f5f5f5;
	color: #fa8a05;
	line-height: 44px;
	margin-left:20px;
	margin-top: 18px;
	margin-bottom: 30px;
}
.button3:hover {
	background-color: #fa8a05;
	border-color: #fa8a05;
	color: #fff;
	cursor: pointer;
}
.button3::before,
.button3::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
	top: 0;
	width: 50%;
	height: 100%;
	background-color: #333;
}
.button3::before {
	right: 0;
}
.button3::after {
	left: 0;
}
.button3:hover::before,
.button3:hover::after {
	width: 0;
	background-color: #f5f5f5;
}
.button3,
.button3::before,
.button3::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
/*--------------------------------------
コンテンツ
--------------------------------------*/
.enlist2_wrap .enlist2_contents{
	width:896px;
	float:right;
}
.enlist2_wrap .enlist2_contents .enlist_title{
	text-align:center;
	margin-top:48px;
}

/*-------------------
ページャー
-------------------*/
.result_pager_wrap{
	margin-top:35px;
}
.result_pager_wrap .result{
	float:left;
	margin-top:9px;
}
.result_pager_wrap .result span{
	font-weight:bold;
	color:#fa8a05;
}
.result_pager_wrap .pager{
	float:right;
}
.pager{
	widht: 300px;
	height: 27px;
	text-align:center;
	background-color:#E6E4E5;
	font-size:15px;
	padding:5px 13px;
	line-height:2;
}
.pager li{
	display:inline-block;
	padding-right:3px;
}
.pager li:first-child{
	color: #9F9F9F;
	background-image: url(../img/enlist/back_arrow_ov.png);
	background-repeat: no-repeat;
	padding-left: 15px;
	background-position: left top 8px;
}
.pager li:last-child{
	background-image: url(../img/enlist/next_arrow_ov.png);
	background-repeat: no-repeat;
	background-position: right top 8px;
	padding-right: 15px;
}
.pager .current span{
	color:#fa8a05;
	background-color:#fff;
	padding:0 3px;
}
.pager .nolink{
	color: #9F9F9F;
}
.pager li:first-child:after{
	margin-left:10px;
	content:'|';
	color:#3e3a39;
}
.pager li:last-child:before{
	margin-right:10px;
	content:'|';

}
/*-------------------
保育実習一覧
-------------------*/
.enlist_wrap{
	width:896px;
	margin-top:7px;
}
.enlist_wrap a{
	display:block;
}
.enlist_wrap .contents-list{
	width:435px;
	height:540px;
	background-color:#fff;
	border: 1px solid #e6e4e4;
	border-radius:5px;
	margin-top:20px;
	position: relative;
}

/* ボバーエフェクト */
.contents-list::before,
.contents-list::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity 0.38s ease-in-out, transform 0.35s ease-in-out;
  content: "";
  opacity: 0;
  pointer-events: none;
}

.contents-list::before {
  transform: scale3d(0, 1, 1);
  transform-origin: left top;
  border-top: 2px solid #fa8a05;
  border-bottom: 2px solid #fa8a05;
	border-radius:5px;
}

.contents-list::after {
  transform: scale3d(1, 0, 1);
  transform-origin: right top;
  border-right: 2px solid #fa8a05;
  border-left: 2px solid #fa8a05;
	border-radius:5px;
}

.contents-list:hover::before,
.contents-list:hover::after,
.contents-list:focus::before,
.contents-list:focus::after {
  transform: scale3d(1, 1, 1);
  opacity: 1;
}

.contents-list:hover{
	border-color: transparent;
}

.contents-list h4 {
	width: 400px;
	height: 40px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	padding-top: 10px;
	margin-left: 20px;
 }

.contents-list .facility{
	width: 380px;
	margin: 20px 0 0 20px;
	position: relative;
}

.facility img{
	display: inline-block;
}

.facility .pause{
	width: 200px;
	background-color: #F5F5F5;
	background-image: url("../img/volunteer/pain.svg");
	background-repeat: no-repeat;
	background-position: 178px 7px;
	background-size: 20px 20px;
	color: #3e3a39;
	display: inline-block;
	font-size: 11px;
	border-radius: 3px;
	padding: 3px 0 3px 5px;
	position: absolute;
	right: -15px;
	line-height: 14px;
}

.contents-list h4 .en_name{
	width: 350px;
	height: 40px;
	display: block;
	font-size: 16px;
}

.enlist_wrap a:nth-child(odd){
	float:left;
}
.enlist_wrap a:nth-child(even){
	float:right;
}
.enlist_wrap .contents-list .detail_wrap{
	text-align: center;
	margin: 20px auto 0 auto;
}

.contents-list .detail_wrap .jissyu-thumbnail{
	width: 395px;
	height: 180px;
	text-align: center;
	object-fit: cover;
	vertical-align: middle;
	margin: 0 auto 20px auto;
}
.contents-list .detail_wrap .jissyu-thumbnail img{
	width: 395px;
	height: 180px;
  	object-fit: cover;
  	vertical-align: middle;
}

.detail_wrap .jissyu-data{
	width: 395px;
	text-align: center;
	margin: 0 auto;
}

.jissyu-data table{
	width: 395px;
	border: 1px solid #d2d2d2;
	font-size: 13px;
	margin: 0 auto;
	table-layout: fixed;
}

.jissyu-data table th{
	width: 145px;
	background-color: #fdfcfa;
	border-right: 1px solid #d2d2d2;
	border-bottom: 1px solid #d2d2d2;
	text-align: left;
	padding: 10px 0 10px 10px;
}

.jissyu-data table td{
	width: 230px;
	border-bottom: 1px solid #d2d2d2;
	text-align: left;
	padding: 10px 0 10px 10px;
	overflow: hidden;
}

.jissyu-data .area-city{
	height: 17px;
	overflow: hidden;
	line-height: 18px;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jissyu-data .nofpeople{
	height: 17px;
	overflow: hidden;
	line-height: 18px;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jissyu-data .period{
	height: 33px;
	overflow: hidden;
	line-height: 18px;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.jissyu-data .jissyu-btn{
	width: 180px;
    background-color: #fa8a05;
    background-image: url("../img/jissyu/chevron.svg");
    background-repeat: no-repeat;
    background-position: 97% 12px;
    background-size: 14%;
    border-radius: 50px;
    color: #fff;
    display: block;
    font-size: 16px;
    font-weight: bold;
	letter-spacing: 0.1em;
    margin: 20px 0 0 215px;
    padding: 16px 0;
    text-align: center;
}

/*--------------------------------------
園見学の前に確認したいこと
--------------------------------------*/
.encheck_background{
	background-image: url(../img/jissyu/check_background.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-color: #fe9a8b;
	padding:45px 0 50px 0;
}
.encheck_contents{
	width:1127px;
	margin:0 auto;
}
.encheck_contents h4{
	width: 481px;
	margin: 0 auto 30px auto;
	text-align:center;
}

.encheck_contents .contents-box{
	width: 1080px;
	margin: 0 auto;
}

.contents-box .encheck_tel,
.contents-box .encheck_visit{
	width: 508px;
	height: 308px;
	background-color: #fff;
	float: left;
	position: relative;
}

.contents-box .encheck_tel p,
.contents-box .encheck_visit p{
	font-size: 15px;
	font-family: "Noto Sans Japanese";
	position: absolute;
	top: 250px;
	left: 20px;
	line-height: 24px;
}

.contents-box .encheck_tel{
	background-image: url(../img/jissyu/check_thumbnail01.jpg);
	background-repeat:no-repeat;
	margin-right: 60px;
}

.contents-box .encheck_visit{
	background-image: url(../img/jissyu/check_thumbnail02.jpg);
	background-repeat:no-repeat;
}

/* ボバーエフェクト */
.contents-box article::before,.contents-box article::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity 0.38s ease-in-out, transform 0.35s ease-in-out;
  content: "";
  opacity: 0;
  pointer-events: none;
}
.contents-box article::before {
  transform: scale3d(0, 1, 1);
  transform-origin: left top;
  border-top: 3px solid #fa8a05;
  border-bottom: 3px solid #fa8a05;
}
.contents-box article::after {
  transform: scale3d(1, 0, 1);
  transform-origin: right top;
  border-right: 3px solid #fa8a05;
  border-left: 3px solid #fa8a05;
}
.contents-box article:hover::before,
.contents-box article:hover::after,
.contents-box article:focus::before,
.contents-box article:focus::after {
  transform: scale3d(1, 1, 1);
  opacity: 1;
}
/*--------------------------------------
フッターバナー一覧
--------------------------------------*/
.footer_banner{
	clear:both;
	background-color: #DDFBFD;
	padding:30px 0;
}
.footer_banner ul{
	width:1120px;
	margin:0 auto;
}
.footer_banner ul li{
	float:left;
	margin-right:20px;
}
.footer_banner ul li:last-child{
	margin-right:0;
}
