@charset "UTF-8";

/**************************************************

	ヘッダー

**************************************************/
#header{
	display: flex;
	position: relative;
}
#header_inner{
	display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;
	bottom: 5%;
	left: 50%;
  transform: translateX(-50%);
	order: 1;
	z-index: 0;
}
#header_inner h1{
	margin-top: 10px;
	order: 2;
}
#header_inner p{
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 1.4em;
  font-weight: 600;
  font-style: normal;
	order: 1;
}
#header_inner p br{
	display: none;
}
#header_img{
	width: 100%;
	padding-top: 48.92%;
	position: relative;
	order: 2;
	z-index: -1;
}
#header_img img{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
}
#header_txt{
	position: absolute;
	top: 8%;
	right: 5%;
}

#search_header{
  width: 100%;
	min-height: auto;
  padding-top: 28.9231%;
	position: relative;
  background: url('../search_header.jpg') no-repeat;
	background-position: center;
  background-size: cover;
}
#search_logo{
	position: absolute;
	top: 50%;
	left: 10%;
	transform: translateY(-50%);
	z-index: 0;
}
#search_header > p:last-child{
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
}

#header.s-r-header{
	padding: 12px 0 0;
	display: flex;
	flex-grow: 1;
	align-items: center;
	justify-content: space-between;
	color: #614A3F;
}
#header.s-r-header h1{
	height: 118px;
	margin: 0 0 -2px 5%;
	padding-left: 138px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	position: relative;
	font-family: "Zen Maru Gothic", serif;
	font-size: 3.2em;
  font-weight: 600;
  font-style: normal;
	line-height: 1.3;
	letter-spacing: 5px;
}
#header.s-r-header h1::before{
	width: 118px;
	height: 118px;
	position: absolute;
	top: 0;
	left: 0;
	content: "";
  background: url(../encil_btn.png) no-repeat 0 0;
  background-size: contain;
}
#header.s-r-header h1 span{
	padding-left: 3px;
	font-size: 0.40625em;
}
#header.s-r-header h1 > br{
	display: none;
}
#header.s-r-header h1.small{
	font-size: 2.6em;
}
#header.s-r-header h1.small span{
	padding-bottom: 10px;
	font-size: 0.5em;
}


/**************************************************

	ナビ

**************************************************/
#nav_btn, #sp_nav{
	display: none;
}
#nav{
	width: 480px;
	margin: 0 5% 0 2%;
	flex-shrink: 0;
	font-family: "Zen Maru Gothic", serif;
  font-weight: 400;
  font-style: normal;
}
#nav ul{
	display: flex;
	align-items: center;
}
#nav ul li{
	padding: 0 20px;
	position: relative;
}
#nav ul li::before{
	height: 20%;
  position: absolute;
  left: 0;
  bottom: 3px;
	content: "";
  border-left: 1px solid #614A3F;
}
#nav ul li:last-child::after{
	height: 20%;
  position: absolute;
  right: 0;
  bottom: 3px;
	content: "";
  border-right: 1px solid #614A3F;
}
#nav ul li a{
	display: flex;
	flex-direction: column;
	align-items: center;
}
#nav ul li a::before{
	width: 42px;
  height: 42px;
	margin-bottom: 5px;
  content: "";
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
#nav ul li:first-child a::before{
  background-image: url('../i_recruit_01.png');
}
#nav ul li:nth-child(2) a::before{
  background-image: url('../i_about_01.png');
}
#nav ul li:nth-child(3) a::before{
  background-image: url('../i_contact_01.png');
}
#nav ul li:last-child a::before{
  background-image: url('../i_website.png');
}
#nav ul li a:hover{
	color: #614A3F;
  transform: translateY(-2px);
  opacity: .8;
}
#nav ul li a:hover::before{
  transform: scale(1.1) rotate(5deg);
}


/**************************************************

	共通部分

**************************************************/
main{}
main section{}

.mw{
	width: 1000px;
	margin: 0 auto;
}


/**************************************************

	フッター

**************************************************/
#footer{
	background: #F6EDD6;
}
#footer_inner{
	width: 1000px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	flex-direction: column;
}
#footer_inner h2{
	margin: 40px 0;
	order: 2;
}
#footer_inner ul{
	margin-top: 80px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	order: 1;
	gap: 50px;
}
#footer_inner_bottom{
	min-height: 77px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	font-size: 0.7em;
	color: #FFF;
	background: url('../footer_back.png') 0 100% repeat-x;
	background-size: contain;
}
#footer_inner_bottom p{
	padding-bottom: 6px;
}

#footer.s-r-footer #footer_inner ul{
	margin-top: 0;
	gap: 0;
}
#footer.s-r-footer #footer_inner ul li{
	width: 32%;
}
#footer.s-r-footer #footer_inner ul li:nth-child(n+4){
	margin-top: 20px;
}
#footer.s-r-footer #footer_inner ul::after{
	width: 32%;
	display: block;
  content: "";
}


/**************************************************

	ページトップへ戻るボタン

**************************************************/
#pagetop{
	position: fixed;
	bottom: 20px;
	right: 10%;
	z-index: 5;
}
#pagetop a{
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFF;
	background: #46838F;
	border-radius: 100px;
}
#pagetop a:hover{
	background: #F7E550;
}


/**************************************************

	トップページ

**************************************************/
#top_news_box{
	margin-bottom: 100px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#top_news_box iframe{
	width: 74%;
	height: 240px;
	display: block;
	background: #FFF;
}

#top_search_box{
	position: relative;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-style: normal;
	background: linear-gradient(#FFFFFF 0px, #FFFFFF 200px, #EFECF1 200px);
	z-index: 0;
}
#top_search_box::before{
	width: 100%;
	height: 100%;
	position: absolute;
	top: -20px;
	left: 0;
	content: "";
	background: url('../../img/search_bg.png') 50% 0 no-repeat;
	background-size: 100% auto;
	z-index: -1;
}
#top_search_box h3{
	position: relative;
  font-size: 3.6em;
  font-weight: 800;
  text-align: center;
}
#top_search_box h3::before{
	width: 204px;
	height: 135px;
	margin: 0 auto;
	display: block;
	content: "";
	background: url('../../img/search_title_icon.png') 0 50% no-repeat;
  background-size: contain;
}
#top_search_box h3 span{
	color: #46838F;
}
#top_search_box_inner{
	padding: 20px 0;
	position: relative;
}
#top_search_box_inner > p:first-child{
	margin-bottom: 10px;
}
#top_search_osaka, #top_search_hyogo{
	margin-bottom: 80px;
	background: #FFF;
}
#top_search_osaka h4, #top_search_hyogo h4{
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.6em;
	font-weight: 800;
	letter-spacing: 8px;
	color: #FFF;
}
#top_search_osaka ul, #top_search_hyogo ul{
	margin: 0 auto;
	padding: 50px 0 60px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 40px;
}
#top_search_osaka li, #top_search_hyogo li{
	font-size: 2em;
	font-weight: 600;
}
#top_search_osaka li:hover, #top_search_hyogo li:hover{
	opacity: .6;
}
#top_search_osaka li a, #top_search_hyogo li a{
	width: 100%;
	height: 100%;
	padding: 6px 0 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	color: #333;
	border-radius: 20px;
}
#top_search_osaka li a::after, #top_search_hyogo li a::after{
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	content: "→";
	font-size: 0.7em;
}
#top_search_osaka h4{
	background: url('../../img/search_title_bg_01.png') 0 50% no-repeat;
}
#top_search_osaka ul{
	width: 50%;
}
#top_search_osaka li{
	width: 46%;
}
#top_search_osaka li a{
	background: #FAE9EE;
	border: solid 2px #E78AA6;
}
#top_search_osaka li:nth-child(n+2) a{
	letter-spacing: 10px;
}
#top_search_osaka li:nth-child(n+2) a::after{
	letter-spacing: 0;
}
#top_search_hyogo h4{
	background: url('../../img/search_title_bg_02.png') 0 50% no-repeat;
}
#top_search_hyogo ul{
	width: 80%;
}
#top_search_hyogo li{
	width: 30%;
}
#top_search_hyogo li a{
	background: #EBF7FC;
	border: solid 2px #2CA6E0;
}


/**************************************************

	園をさがそう

**************************************************/
#search_box{
	padding: 80px 0 120px;
	position: relative;
}
#search_nav{
	display: flex;
	position: absolute;
	top: 10px;
	right: 0;
	font-size: 0.9em;
}
#search_nav li::after{
	margin: 0 10px 0 8px;
	content: ">";
}
#search_nav li:last-child::after{
	margin-right: 0;
	content: none;
}
#search_nav span{
	padding-bottom: 1px;
	color: #614A3F;
}
#search_nav a{
	border-bottom: solid 1px #333;
}
#search_box h2{
	margin-bottom: 50px;
	padding-left: 80px;
	position: relative;
	font-size: 2.4em;
	font-weight: 600;
	letter-spacing: 3px;
}
#search_box h2::before{
	width: 56px;
	height: 58px;
	display: inline-block;
	position: absolute;
	top: -2px;
	left: 0;
	content: "";
	background: url(../i_about_01.png) no-repeat 50% 50%;
  background-size: contain;
}
#search_box section h3{
	margin-bottom: 30px;
	font-size: 1.4em;
	font-weight: 600;
	letter-spacing: 1px;
	color: #614A3F;
}
#search_box section ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
}
#search_box section ul::after{
	width: 32%;
	display: block;
  content: "";
}
#search_box section ul li{
	width: 32%;
	margin-bottom: 10px;
}
#search_box section ul li span{
	margin-right: 10px;
	font-size: 0.9em;
}

#search_box section a{
	color: #333;
	border-bottom: solid 1px #333;
}
#search_box section a:hover{
	border-bottom: solid 1px #FFF;
}


/**************************************************

	採用情報個別ページ

**************************************************/
#mainvisual{
	padding: 0;
	position: relative;
}
#mainvisual > p:first-child{
	position: relative;
	z-index: 0;
}
#mainvisual > p:first-child img{
	width: 100%;
	height: auto;
}
#mainvisual #btn_recruit_contact{
	position: absolute;
	bottom: 2%;
	right: 18%;
	z-index: 5;
}
#mainvisual #btn_recruit_contact:hover{
  transform: scale(1.1) rotate(5deg);
}
#mainvisual #btn_recruit_contact a:hover img{
	opacity: 1;
}
#mainvisual::after{
	height: 40px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
	content: "";
  background-color: #F9F7F5;
  z-index: -1;
}
#mainvisual.recruit_none::after{
  background-color: #EFCCF1;
}

#contents_box{}
.contents_titles{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: relative;
	font-family: "Zen Maru Gothic", serif;
	font-weight: 600;
  font-style: normal;
}
.contents_titles h2{
	margin: 0;
	padding: 0 0 8px 102px;
	font-size: 2.8em;
	letter-spacing: 8px;
	order: 2;
}
.contents_titles p{
	margin: 0 0 -5px 0;
	padding-left: 105px;
	letter-spacing: 1px;
	order: 1;
}
#contents_box section{
	color: #614A3F;
}
#contents_box section::after{
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	content: "";
	background-size: contain;
	z-index: 0;
	pointer-events: none;
}
#contents_box section .contents_titles::before{
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	content: "";
  background-size: contain;
}


/* 採用案内 */
#recruit_box{
	padding: 80px 0 200px;
	position: relative;
	background: #F9F7F5;
}
#recruit_box::after{
  background: url('../search_back_01.png') 50% 100% no-repeat;
}
#recruit_box .contents_titles::before{
	width: 82px;
	height: 62px;
  background: url(../i_recruit_01.png) no-repeat 50% 50%;
}
#recruit_box_inner{
	position: relative;
	z-index: 0;
}
.recruit_txt{
	margin: 40px 0;
	font-size: 1.6em;
  font-weight: 600;
	letter-spacing: 1px;
}
.recruit_voice{
	position: relative;
}
.recruit_voice_inner{
	display: flex;
	justify-content: space-between;
	position: relative;
	line-height: 1.8;
	background: #FFF;
	border-radius: 60px;
	z-index: 1;
}
.recruit_voice_inner > p:first-child{
	width: 430px;
}
.recruit_voice_inner > p:first-child img{
	border-radius: 60px 0 0 60px;
}
.voice_txt{
	width: calc(100% - 430px);
	padding: 60px 30px 50px;
	position: relative;
	font-size: 1.2em;
}
.voice_txt > p:last-child{
 position: absolute;
 top: 8px;
 left: 16px;
}
#recruit_voice_02{
	margin-top: 150px;
}
#voice_img_01{
	position: absolute;
	top: -110px;
	right: 5px;
	z-index: 0;
}
#voice_img_02{
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 0;
}

#recruit_tag{
	margin-top: 50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	position: relative;
	font-size: 1.5em;
	color: #FF8200;
	gap: 20px;
}
#recruit_tag li::before{
	margin-right: 6px;
	content: "《";
}
#recruit_tag li::after{
	margin-left: 6px;
	content: "》";
}

#recruit_Bubble{
	width: 100%;
	margin-top: 36px;
  padding: 16px;
  position: relative;
  display: inline-block;
	font-family: "Zen Maru Gothic", serif;
	font-size: 1.3em;
	font-weight: 400;
  font-style: normal;
	color: #FF0000;
  background: #FFF;
  border: 2px solid #908078;
  border-radius: 12px;
	text-align: center;
}
#recruit_Bubble::before{
  content: "";
  position: absolute;
  top: 0;
  left: 16%;
  border-style: solid;
  border-width: 0 10px 24px 10px;
  border-color: transparent transparent #908078;
  transform: translate(-50%, -100%) skew(-28deg); transform-origin: bottom;
}
#recruit_Bubble::after{
  content: "";
  position: absolute;
  top: 0;
  left: 16%;
  border-style: solid;
  border-width: 0 7.8px 18.8px 7.8px;
  border-color: transparent transparent #FFF;
  transform: translate(-50%, -100%) skew(-28deg); transform-origin: bottom;
}

#recruit_link{
	width: 577px;
	height: 99px;
	margin: 60px auto 0;
	position: relative;
	background: url('../btn_bg_01.png') 0 50% no-repeat;
	background-size: contain;
	z-index: 1;
}
#recruit_link span{
	font-size: 0.7em;
}
#recruit_link a{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5em;
	letter-spacing: 1px;
	color: #FFF;
}
#recruit_link a:hover{
	opacity: .8;
	transition: .6s;
}

/* 園紹介 */
#about_box{
	padding: 70px 0 200px;
	position: relative;
	background: url('../about_back_01.png') 80% 76px no-repeat, #EFECF1;
}
#about_box::after{
  background: url('../search_back_02.png') 50% 100% no-repeat;
}
#about_box .contents_titles{
	margin-bottom: 70px;
}
#about_box .contents_titles h2{
	padding-bottom: 0;
}
#about_box .contents_titles::before{
	width: 75px;
	height: 77px;
  background: url(../i_about_01.png) no-repeat 50% 50%;
}
#movie_box{
	width: 100%;
	margin: 0 auto 70px;
	position: relative;
	z-index: 1;
}
#movie_box video{
	width: 100%;
	height: auto;
}
#switch-contents{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#switch-contents::after{
	width: 32%;
	display: block;
  content: "";
}
#switch-contents button{
	width: 32%;
	margin-bottom: 20px;
	padding: 5px 10px;
	display: flex;
	justify-content: center;
	font-size: 1.2em;
	border-radius: 5px;
}
#switch-contents .btn_01{
	color: #FFF;
	background: #E78AA6;
}
#switch-contents .btn_02{
	background: #E8D093;
}
#switch-contents .btn_03{
	color: #FFF;
	background: #46838f;
}
#movie_list .movie-contents-block{
  display: none;
}
#movie_list .movie-contents-block.active{
  display: block;
}
#movie_list video:nth-child(n+2){
	margin-top: 40px;
}
#movie_box > p:last-child{
	position: absolute;
	bottom: -25px;
	right: 0;
	font-size: 0.9em;
}
#about_photo{
	width: 1300px;
  margin: 0 auto;
  position: relative;
	background: url('../Aphoto_back_01.png') 0 108px no-repeat,
	url('../Aphoto_back_02.png') 97% 160px no-repeat,
	url('../Aphoto_back_03.png') 4% 100% no-repeat,
	url('../Aphoto_back_04.png') 98% 94% no-repeat;
}
#about_photo ul{
	padding-bottom: 150px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#about_photo ul li:nth-child(n+3){
	margin-top: 45px;
}
#about_photo ul li img{
	border-radius: 40px;
}
.about_txt{
	margin: 0 auto 50px;
	padding: 30px 5%;
	font-size: 1.4em;
  font-weight: 600;
	line-height: 1.8;
	background: #fff;
	border-radius: 30px;
}
#about_photo .about_txt{
	margin: 0 auto 60px auto;
}


/* 申込み・問合せ */
#contact_box{
	padding: 20px 0 200px;
	position: relative;
	background: #FFF;
}
#contact_box::after{
  background: url('../search_back_03.png') 50% 100% no-repeat;
}
#contact_box .contents_titles{
	padding-bottom: 15px;
	border-bottom: solid 1px #614A3F;
}
#contact_box .contents_titles::before{
	width: 77px;
	height: 54px;
  background: url(../i_contact_01.png) no-repeat 50% 50%;
}
#contact_box ul, #contact_box table{
	width: 80%;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
#contact_box ul{
	margin: 40px auto;
}
#contact_box table th{
	text-align: center;
}
#contact_box table td label{
	margin-right: 20px;
	display: inline-block;
}
#contact_box table label:last-child{
	margin-right: 0;
}
.address td textarea{
	height: 80px;
}
.questions td textarea{
	height: 120px;
}
#contact_privacy > div{
	height: 200px;
	margin: 10px 0;
  padding: 10px;
  background: #F7F6F5;
	overflow-y: scroll;
}
#contact_privacy > div p{
	margin-bottom: 20px;
}
#contact_privacy > div span{
	margin-bottom: 5px;
	display: block;
	font-size: 1.05em;
	font-weight: bold;
}
#contact_privacy input{
	margin-right: 5px;
}
#recruit_contact_btn{
	position: relative;
	z-index: 1;
}
#recruit_contact_btn input{
	width: 150px;
	margin: 50px auto;
	padding: 1px 0 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25em;
	letter-spacing: 10px;
	color: #FFF;
	background: #FF8200;
	border: solid 2px #FFF;
	border-radius: 20px;
	text-align: center;
}
#recruit_contact_btn input:hover{
	color: #FF8200;
	background: #FFF;
	border: solid 2px #FF8200;
}