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

article#container {
	overflow-x: hidden;
	background-size: auto auto;
	background-color: rgba(255, 255, 255, 1);
	background-image: repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(254, 241, 217, 1) 50px, rgba(254, 241, 217, 1) 100px );
}

#about,
#work,
#recruit,
#voice,
#voice .svgbg {
	z-index: 10;
	display: block;
	margin: 0 auto;
	position: relative;
}

#about::before,
#work::before,
#recruit::before,
#recruit::after {
	content: "";
	position: absolute;
	width: 100%;
	left: 0;
	right: 0;
	background-position: bottom;
	background-repeat: repeat-x!important;
	background-size: cover;
}

@media screen and (max-width: 768px) {
	.sp {
		display: block!important;
	}

	.pc {
		display: none!important;
	}
}

/* --------------フェードイン-------------- */

.fadein-bottom{
  -webkit-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
  -webkit-transform: translateY(10%);
  -moz-transform: translateY(10%);
  -ms-transform: translateY(10%);
  transform: translateY(10%);
  opacity: 0;
}
.fadein-bottom.active{
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
  opacity: 1;
}
  /* --------------フェードイン-------------- */

/* ------------▼双実こども園は、どんな国? ------------ */

#about {
	background: url("../images/bg/yellow_en.svg") no-repeat;
	background-size: 100% auto;
	background-position: center;
	background-color: #FEFCD3;
}

#about::before {
	height: 60px;
	top: -60px;
	background-image: url("../images/bg/yellow_top_sen.svg");
}

#about .about {
		width: 90%;
		max-width: 1000px;
		margin: 0 auto;
		display: block;
		padding: 0 0 10em;
}


section#about h2 span{
	color: #F5A200;
}

section#about img {
	width: 20%;
	margin: 0 auto;
	display: block;
	max-width: 200px;
}

section#about p.description {
	font-size: 16px;
}

@media screen and (max-width: 768px) {
	#about {
		background: url("../images/bg/top_info_sp.svg") no-repeat;
		background-color: #FEFCD3;
	}

	#about::before {
		height: 20px;
		top: -20px;
	}

	section#about img {
		width: 40%;
	}
}

/* ------ ▼双実こども園で働く魅力! ------- */
#work {
	background-color: #F7FBF6;
	padding: 20em 0 5em;
}

#work::before {
	height: 100px;
	top: -100px;
	background-image: url("../images/adoption/green_top.svg");
}

#work .svgbg {
	background: url("../images/adoption/green_bg.svg") no-repeat;
  background-size: contain;
	background-position: center;
	padding: 5% 0;
}

#work .img,
#work .work {
	width: 90%;
	margin: 0 auto;
	display: block;
}

#work .img {
	position: absolute;
	top: -7em;
	left: 0;
	right: 0;
	max-width: 900px;
}

#work .img img.photo {
	position: relative;
	width: 100%;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	object-fit: cover;
}

#work .img img.tree {
	position: absolute;
	right: 0;
	bottom: -14%;
	height: auto;
	width: 200px;
	z-index: 12;
}

section#work h2 {
	margin: 3% auto;
}
section#work h2 span{
	color: #F5A200;
}

section#work ul {
	margin: 0 auto;
	max-width: 1200px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

section#work ul li {
	display: table-cell;
	width: calc((100% - 100px) /3);
}

section#work ul li p.point {
	text-align: center;
	font-size: 3vmin;
	line-height: 32px;
	color: #F5A200;
	font-feature-settings: "palt";
	font-weight: 700;
	font-family: fot-tsukuardgothic-std, sans-serif, 'TsukuARdGothic-Regular','ヒラギノ丸ゴ ProN','Hiragino Maru Gothic ProN','TsukuBRdGothic-Regular',sans-serif!important;	margin-bottom: 5px;
}

section#work ul li img {
	width: 100%;
	max-width: 150px;
	display: block;
	margin: 2% auto;
}

@media screen and (max-width: 1194px) {
	section#work ul li p.point {
		font-size: 2.6vmin;
	}
}
@media screen and (max-width: 768px) {
	#work {
		padding: 5em 0 5em;
	}

	#work::before {
		height: 100px;
		top: -100px;
	}

	#work .img img.tree {
		width: 20%;
	}

	section#work ul {
		display: block;
		margin: 0 auto;
	}

	section#work ul li {
		width: 95%;
		margin: 2em auto 0;
		display: block;
	}

	section#work ul li p.point {
		font-size: 26px;
		line-height: 34px;
	}
	section#work ul li img {
		width: 40%;
	}
}
/* ------------▲双実こども園は、どんな国? ------------ */

/* ------------▼求人情報 ------------ */
#recruit {
	background-color: #F7FBF6;
}

#recruit::before {
	height: 45px;
	top: -45px;
	background-size: contain;
	background-image: url("../images/adoption/blue_top.svg");
}
#recruit::after {
	height: 55px;
	bottom: -55px;
	z-index: 12;
	background-position: top;
	background-size: contain;
	background-image: url("../images/adoption/blue_under.svg");
}

#recruit .svgbg {
	background: url("../images/adoption/blue_bg.svg") no-repeat;
	background-color: rgba(208,230,247,1);
	background-size: contain;
	padding: 10% 0;
}

section#recruit img.child4 {
		position: absolute;
		top: -7%;
		left: 22%;
		width: 40%;
		max-width: 200px;
}

section#recruit table {
	border-collapse: collapse;
	width: 95%;
	max-width: 750px;
	margin: 2% auto;
	word-break: break-all;
	border: 2px solid #707070;
}

section#recruit th,
section#recruit td {
	padding: 20px;
	color: #000;
	border: 2px solid #707070;
}

section#recruit th {
	width: 150px;
	font-weight: bold;
	vertical-align: middle;
	text-align: center;
	background-color: #fff;
}
section#recruit td {
	width: 600px;
	text-align: left;
	line-height: 24px;
	background-color: #fff;
}

.btn a { /*ボタン*/
	position: relative;
	background-color: #64B450;
	color: #fff;
	width: 230px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	padding: 1% 4%;
	font-size: 24px;
	border-radius: 150px;
	font-weight: 700;
	transition: 0.3s;
	font-family: fot-tsukuardgothic-std, sans-serif, 'TsukuARdGothic-Regular','ヒラギノ丸ゴ ProN','Hiragino Maru Gothic ProN',sans-serif!important;
}
.btn a:hover {
	color: #00973B;
	transition: 0.3s;
	background-color: #C4D700;
}
.btn a img {
	position: absolute;
	top: 0;
	right: 20px;
	bottom: 0;
	margin: auto 0;
	width: 20px;
}

@media screen and (max-width: 1194px) {
	section#recruit img.child4 {
			top: -4%;
			left: 16%;
			max-width: 150px;
	}
}

@media screen and (max-width: 768px) {
	#recruit::before {
		background-image: url("../images/adoption/blue_top_sp.svg");
	}
	#recruit::after {
		background-image: url("../images/bg/blue_under_sp.svg");
	}

	.btn a { /*ボタン*/
		display: block;
		padding: 2% 8%;
	}
	.btn a img {
		width: 15px;
	}

	section#recruit img.child4 {
			top: -4%;
			left: 10%;
	}

	section#recruit th,
	section#recruit td {
		padding: 20px 10px;
	}

	section#recruit th {
		padding: 20px 5px;
		white-space: nowrap;
	}
}


/* ------------▲求人情報 ------------ */


/* ------------▼先輩の声 ------------ */
#voice .svgbg {
	background: url("../images/bg/orange_en.svg") no-repeat;
	background-size: 100% auto;
	background-position: center;
	padding: 10% 0 0;
}

#voice img.child2 {
	position: absolute;
	top: -6%;
	right: 18%;
	width: 40%;
	z-index: 5;
	max-width: 200px;
}

#voice ul  {
	margin: 0 auto;
	width: 90%;
	max-width: 1200px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

#voice ul li {
	position: relative;
	display: table-cell;
	width: calc((100% - 100px) /3);
	font-family: fot-tsukuardgothic-std, sans-serif, 'TsukuARdGothic-Regular','ヒラギノ丸ゴ ProN','Hiragino Maru Gothic ProN','TsukuBRdGothic-Regular',sans-serif!important;
}

#voice ul li .popupModal1 label,
#voice ul li .popupModal1 img.card  {
	width: 100%;
}

#voice ul li h3 {
	width: 100%;
	position: absolute;
	bottom: 14%;
	color: #F5A200;
	font-size: 30px;
}

#voice ul li h3 span {
	display: block;
	color: #956936;
	font-size: 24px;
	line-height: 34px;
}

#voice ul li .btn-2 {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -10px;
}

#voice ul li .btn-2 a { /*ボタン*/
	position: relative;
	border-radius: 3px;
 	box-shadow: 3px 3px 0 rgba(196,215,0,1);
	background-color: #64B450;
	color: #fff;
	width: 130px;
	margin: 0 auto;
	text-align: center;
	padding: .25em 1em;
	font-size: 24px;
	border-radius: 150px;
	font-weight: 700;
	transition: 0.3s;
}

#voice ul li .btn-2 a img {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 15px;
	margin: auto 0;
	width: 10px;
}

#voice ul li label:first-of-type:hover .btn-2 a {
	color: #00973B;
	transition: 0.3s;
	box-shadow: 0 0 0 rgba(196,215,0,1);
	background-color: #C4D700;
}


@media screen and (max-width: 1194px) {
	#voice img.child2 {
		top: -6%;
		right: 9%;
		max-width: 150px;
	}

	#voice ul li h3 {
		bottom: 11%;
		color: #F5A200;
		font-size: calc(100vw / 35);
	}
	#voice ul li h3 span {
		font-size: calc(100vw / 40);
		line-height: 30px;
	}
}


/*============= ポップアップ ============ */
.popupModal1 > input { /* ラジオボックス非表示 */
    display: none;
}

.popupModal1 > input:nth-child(1) + label {
    cursor: pointer;
}
.popupModal1 > input:nth-child(1) + label ~ label {
    display: none;
}

.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.70);
		display: block;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 101;
}

/* ポップ内スクロールバー */
.modalPopup3::-webkit-scrollbar {
  width: 5px;
	border-radius: 10px;
}
.modalPopup3::-webkit-scrollbar-thumb {
	background: #fdbd38;
	border-radius: 10px;
}
.modalPopup3::-webkit-scrollbar-track {
	 background: rgba(100,100,100, .3);
}
/* ポップ内スクロールバー */


.modalPopup3 {
	display: none;
	background-color: #fffcdb;
	border: 7px solid #64b450;
	border-radius: 15px;
	width: 100%;
	max-width: 750px;
	height: 65%;
	margin: 12em auto 0;
	overflow-y: scroll;
	z-index: 10;
}

.modalPopup3 img {
	width: 100%;
	display: block;
}

.modalPopup3 h2 {
	text-align: center;
	color: #64b450;
	font-size: 34px;
	margin: 1em auto;
}

.modalPopup3 .modalMain {
	width: 80%;
	margin: 0 auto;
}

.modalPopup3 .modalMain p{/*紹介文*/
	text-align: justify;
	font-size: 20px;
	line-height: 1.2em;
  font-feature-settings: 'palt';
	margin-bottom: 5%;
	color: #956936;
	font-weight: 700;
	font-family: fot-tsukuardgothic-std, sas-serif, 'TsukuARdGothic-Regular','TsukuBRdGothic-Regular'!important;
}
.modalPopup3 .modalMain p span {
	color: #107A2D;
}

.close-btn {
  appearance: none;
}

.position {
	cursor: pointer;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 70px;
	margin: 0 auto;
}

label .position {
	width: 180px;
	margin: 0 auto;
}

@media screen and (max-width: 768px) {
	#voice .svgbg {
		background: url("../images/bg/orange_en_sp.svg") no-repeat;
		background-position: center;
	}

	#voice img.child2 {
		top: 0%;
		right: 4%;
		width: 30%;
	}

	#voice ul {
		display: block;
		padding-bottom: 5em;
	}

	#voice ul li {
		width: 70%;
		display: block;
		margin: 0 auto;
	}

	#voice ul li + li {
		margin-top: 4em;
	}

	#voice ul li h3 {
		bottom: 13%;
		font-size: calc(100vw / 12);
	}
	#voice ul li h3 span {
		font-size: calc(100vw / 15);
	}

	#voice ul li .btn-2 {
	  position: absolute;
		left: 0;
		right: 0;
		bottom: -10px;
	}

	.modalPopup3 {
	  width: 90%;
		height: 65%;
		margin: 5em auto 0;
	}

	.modalPopup3 h2 {
		margin: 4% auto;
		font-size: 28px;
	}

	.modalPopup3 .modalMain {
		width: 90%;
		text-align: center;
	}

	.modalPopup3 .modalMain p {
		font-size: 18px;
		line-height: 1.3em;
	}

	.position {
		bottom: 6em;
		border: 1px solid blue;
	}

	label .position {
		width: 160px;
	}
}

input[type="radio"] {
	-webkit-appearance: none;
	pointer-events: none;
	display: none;
}