@charset "UTF-8";
/* ==========================================================
    スタイル設定 - 新卒保育士募集
    ./recruit-lp/new-graduate.html
========================================================== */

body {
	margin:0px;
	padding:0px;
	font-family: "Yu Gothic", YuGothic,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
html,body {
	font-family: 'Noto Sans JP','Kiwi Maru', serif;
	text-align: center;
	color: #000;
}
a img:hover{
	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
}

/********************************
    DISPLAY DEVICE
*********************************/
.pc { display:block !important;}
.sp { display:none !important;}

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


/********************************
    HEADER / FOOTER
*********************************/
header { padding: 0.25em; background: #1D6333; color: #fff;}
header a { text-decoration: none;}
header a:link,
header a:visited { color: #fff;}
header a:hover,
header a:active { color: #ff0;}
header img.logo { width:100%;}
header img.tel  { width:100%;}

footer { margin: 0; padding: 0; text-align: center;}
footer .copy { padding: 0.5em; background: #1D6333; color: #fff; font-size: 12px; text-align: center;}
.footer_logo img { width: 100%;}


/********************************
    COMMON STYLES
*********************************/
ul.nosign    { list-style: none; margin: 0.25em 0; padding-left: 0;}
ul.nosign li {}

ul.nakaguro            { list-style: none; margin: 0.25em 0; padding-left: 0;}
ul.nakaguro li         { text-indent: -1.25em; padding-left: 1.25em;}
ul.nakaguro li::before { content: '・ ';}
ul.kome            { list-style: none; margin: 0.25em 0; padding-left: 0;}
ul.kome li         { position: relative; padding-left: 1.125em;}
ul.kome li::before { position: absolute; content: '\0203B'; left: 0;}

small      { font-size: 0.75em;}
.xlarge    { font-size: 1.75em;}
.larger    { font-size: 1.5em;}
.large     { font-size: 1.25em;}
.small     { font-size: 0.85em;}
.smaller   { font-size: 0.7em;}
.xsmall    { font-size: 0.5em;}
.memo      { font-size: 0.75em;}

.fw_bold   { font-weight: bold;}
.fw_normal { font-weight: normal;}

.text-yellow { color: yellow;}
.text-orange { color: #FF5F00;}

.underline     { text-decoration: underline;}
.underline_yl  { border-bottom: 2px solid #FCD021;}
.emphasis_yl   { color: #FCD021}
.emphasis_maru { text-emphasis: circle #FF3030;}
.marker        { background: linear-gradient(transparent 90%, #fd7e00 90%); margin-right:4px; margin-left:4px;}
.marker40_yl   { background: linear-gradient(transparent 60%, #ff0 60%);}
.marker20_yl   { background: linear-gradient(transparent 80%, #ff0 80%);}
.marker30_Dyl  { background: linear-gradient(transparent 70%, #f7e921 70%);}

.inline-block { display: inline-block;}


/********************************
    BACKGROUND
*********************************/
.stripe {
	margin: 0;
	padding: 30px 0px;
	width: 100%;
	height: auto;
	background: url(./image/bg01.jpg);
	background-repeat: repeat;
	overflow: hidden;
}
.block {
	margin: 0;
	padding: 30px 0 60px;
	width: 100%;
	height: auto;
	background: #e4efd5;
	overflow: hidden;
}


/********************************
    BUTTON
*********************************/
.btn-pink             { background: #df89b4;}
.btn-pink:hover       { background: #b3497e;}
.btn-green            { background: #009645;}
.btn-green:hover      { background: #0f6336;}
.btn-orange-grd       { background: linear-gradient(180deg,rgba(209, 94, 18, 1) 0%, rgba(235, 115, 0, 1) 75%, rgba(239, 149, 71, 1) 100%);}
.btn-orange-grd:hover { background: linear-gradient(180deg,rgba(179, 76, 9, 1) 0%, rgba(191, 95, 2, 1) 75%, rgba(235, 128, 35, 1) 100%);}
.btn-mynavi           { background: linear-gradient(180deg,rgba(0, 100, 176, 1) 0%, rgba(64, 142, 237, 1) 75%, rgba(83, 173, 237, 1) 100%);}
.btn-mynavi:hover     { background: linear-gradient(180deg,rgba(4, 72, 125, 1) 0%, rgba(54, 119, 199, 1) 75%, rgba(14, 125, 204, 1) 100%);}

.entry-buttons {
	width: 100%;
	padding-bottom: 12px;
	display: flex;
	justify-content: center;
    align-items: center;
}
.entryButton {
    width: 100%;
    display: block;
    box-shadow: 3px 3px 3px #ccc;
    border-radius: 60px;
    border: 3px solid #fff;
    color: #fff;
    text-decoration: none;
    padding: 4px 0 5px;
    font-size: 36px;
    font-family: "M PLUS Rounded 1c", sans-serif;
}
.cButton {
    position: relative;
    display: inline-block;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    text-decoration: none;
    color: #fff;
    border: 3px solid #fff;
    box-shadow: 3px 3px 3px #ccc;
}
.cButton span {
	position: absolute;
	display: inline-block;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 140px;
	text-align:center;
	font-size: 34px;
	line-height: 1.1;
	letter-spacing: 1px;
}
.cButton span span.mynavi {
	padding: 0 0 1.35em;
	font-size: 28px;
	letter-spacing: 0;
}
@media screen and (max-width: 991.98px) {
	.entryButton {
		width: 100%;
		font-size: 24px;
		line-height: 1.1;
	}
	.cButton {
		width: 120px;
		height: 120px;
	}
	.cButton span {
		width: 115px;
		font-size: 28px;
		line-height: 1.1;
		letter-spacing: 0;
	}
	.cButton span span.mynavi {
		padding: 0 0 1.35em;
		font-size: 20px;
		letter-spacing: 0;
	}
}
@media screen and (max-width: 575.98px) {
	.entryButton {
		width: 100%;
		font-size: 24px;
		line-height: 1.1;
	}
	.cButton {
		width: 80px;
		height: 80px;
	}
	.cButton span {
		width: 75px;
		font-size: 20px;
		line-height: 1.1;
		letter-spacing: 0;
	}
	.cButton span span.mynavi {
		padding: 0 0 1.25em;
		font-size: 15px;
		letter-spacing: 0;
	}
}


/********************************
    LINE
*********************************/
.line_block {
	background: #e4efd5;
	border-radius: 20px;
	margin: 20px 0 20px;
	padding: 30px 0px;
}
.line_block p {
	font-size: 25px;
	color: #1d6333;
	font-weight: bold;
	margin: 0px auto 20px auto;
}
.line_block .line_btn {
	width: 200px;
	margin: 0 auto;
}
.line_block .line_btn img {
	width: 100%;
}
@media screen and (max-width: 991.98px) {
	.line_block {
		background: #e4efd5;
		border-radius: 20px;
		margin: 20px 0 10px;
		padding: 10px 0;
	}
	.line_block p {
		font-size: 14px;
		text-align: center;
		color: #1d6333;
		font-weight: bold;
		margin: 0 auto 10px;
		line-height: 1.3;
	}
	.line_block .line_btn img {
		width: 70%;
	}
}

/* LINE - スマホだけ表示させるブロック用 */
.line_block2 {
	background: #e4efd5;
	border-radius: 20px;
	margin: 0 0 30px;
	padding: 10px 0;
}
.line_block2 p {
	font-size: 14px;
	text-align: center;
	color: #1d6333;
	font-weight: bold;
	margin: 0 auto 10px;
	line-height: 1.3;
}
.line_block2 .line_btn {
	width: 200px;
	margin: 0 auto;
}
.line_block2 .line_btn img {
	width: 70%;
}


/********************************
    HEADINGS
*********************************/
h2.titlestyle01 {
	text-align: center;
	font-size: 35px;
	margin: 50px auto;
	font-family: 'Kiwi Maru', serif;
}
h2.titlestyle01 .en {
	display: block;
	font-size: 25px;
	color: #1d6333;
	font-weight: bold;
	font-family: 'Caveat', cursive;
	margin-bottom: 8px;
}
h2.titlestyle02{
	text-align: center;
	font-size: 35px;
	margin: 50px auto;
	font-family: 'Kiwi Maru', serif;
	background: url("./image/h2_bg.png") bottom no-repeat;
	background-size: 100%;
}
h2.titlestyle02 .en{
	display: block;
	font-size: 25px;
	color: #1d6333;
	font-family: 'Caveat', cursive;
	font-weight: bold;
	margin-bottom: 8px;
}


/********************************
    HERO
*********************************/
.hero {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 800px;
	font-family: "M PLUS Rounded 1c", sans-serif;
	background: url(./image/main_hero_bg_newgrads.jpg) center no-repeat;
	background-size: cover;
	overflow: hidden;
	position: relative;
}
.hero .subtitle {
	font-size: 62px;
	color: var(--bs-heading-color);
	font-weight: 600;
}
.white_box {
	background: rgba(255, 255, 255, 0.8);
	position: relative;
	margin: 72px auto 0;
	padding: 30px 30px 10px;
	border-radius: 20px;
	max-width: 920px;
}
.white_box h3 {
	position: relative;
	display: block;
	margin: 0 auto 20px;
	padding: 0;
	font-style: normal;
	font-size: 90px;
	font-weight: 600;
	line-height: 1.0;
	letter-spacing: 1px;
	width: 6em;
}
.white_box h3 div {
	display: block;
	position: absolute;
	left: -15%;
	top: 33.3%;
	padding: 10px 10px 10px 18px;
	background: #1d6333;
	border-radius: 5px;
	font-size: 30px;
	line-height: 1.0;
	letter-spacing: 8px;
	color: #fff;
	font-weight: 400;
}
.white_box h3 span {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	background: linear-gradient(transparent 70%, #f7e921 70%);
}
.white_box .pin_flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 14px auto;
	padding: 0;
	color: #1d6333;
	font-size: 30px;
	font-weight: bold;
}
.white_box .pin_flex .half {
	width: 49%;
	background: #e4efd5;
	margin: 0 0 10px;
	padding: 5px 0px 5px 6%;
	text-align: left;
	position: relative;
}
.white_box .pin_flex .half::before {
	content: "";
	background: url(./image/pin_icon.png) no-repeat;
	background-size: 100%;
	height: 30px;
	width: 30px;
	position: absolute;
	left: 5px;
}

@media screen and (max-width: 1199.98px) {
	.white_box {
		margin: 80px 0 0;
		padding: 30px 30px 30px;
	}
	.white_box h3 {
		margin: 30px auto 20px;
		font-size: 90px;
		letter-spacing: 4px;
		width: 6em;
	}
	.white_box h3 div {
		left: 16px;
		top: -40px;
		padding: 6px 6px 6px 14px;
		font-size: 24px;
		line-height: 1.0;
		letter-spacing: 8px;
	}
	.white_box .pin_flex {
		font-size: 24px;
	}
}
@media screen and (max-width: 991.98px) {
	.hero {
		padding: 0;
		height: 800px;
		background: url(./image/main_hero_bg_newgrads.jpg) center no-repeat;
		background-size: 430%;
		background-position: left 0 top 0;
	}
	.hero .subtitle {
		font-size: 48px;
	}
	.white_box .pin_flex {
		font-size: 22px;
	}
}
@media screen and (max-width: 767.98px) {
	.white_box {
		margin: 120px 0 0;
		background: rgba(255, 255, 255, 0.9);
		padding: 30px 20px 20px;
	}
	.white_box .pin_flex {
		font-size: 1.0em;
	}
	.white_box .pin_flex .half {
		margin: 0 0 5px;
	}
	
	.white_box .pin_flex .half::before {
		height: 18px;
		width: 18px;
		left: 2px;
	}
	.white_box h3 {
		margin: 30px auto 15px;
		font-size: 4.25em;
	}
	.hero .subtitle {
		font-size: 40px;
	}
}
@media screen and (max-width: 575.98px) {
	.hero {
		height: 700px;
		background-size: 660%;
		background-position: left 10% top 30%;
	}
	.hero .subtitle {
		font-size: 28px;
	}
	.white_box {
        margin: 200px 0 0;
		padding: 30px 10px 20px;
	}
	.white_box h3 {
		margin: 25px auto 15px;
		font-size: 3.0em;
	}
	.white_box .pin_flex {
		font-size: 0.9em;
	}
}


/***********************************************************
section
	prologue
	intro
	benefit
	voice
	selection
	flow
	recruit
	outro
***********************************************************/


/********************************
    PROLOGUE
*********************************/
.prologue {
	padding: 30px 0;
}
.box-design {
	margin: 20px auto 20px;
	padding: 20px;
	background: #c4f5c9;
	box-shadow: 0 0 0 10px #c4f5c9;
	border: 2px dashed #fff;
	/* font-family: "M PLUS Rounded 1c", sans-serif; */
}
.box-design p {
	margin: 0.5em 0;
}
.title_accent {
	text-align: center;
	margin-bottom: 0.5em;
	text-shadow: 1px 1px 0 #fff;
}
.title_accent span {
	position: relative;
	display: inline-block;
	padding: 0 1.5em;
	font-size: 1.25em;
	font-weight: 700;
}
.title_accent span::before,
.title_accent span::after {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 40px;
	height: 2px;
	background: #999999;
}
.title_accent span::before {
	left:0;
	transform: rotate(60deg);
}
.title_accent span::after {
	right: 0;
	transform: rotate(-60deg);
}
.title_border {
	position: relative;
	margin: 0 auto 0.35em;
	padding: 0 2.5em;
	font-size: 2em;
	font-weight: bold;
	text-align: center;
	color: #0f6336;
	width: fit-content;
	text-shadow:1px 1px 0 #fff;
}
.title_border::before,
.title_border::after {
	content: '';
	background: #0f6336;
	width: 1.5em;
	height: 2px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}
.title_border::before {
	left: 0;
}
.title_border::after {
	right: 0;
}
.title_sub {
	margin: 0 auto 0.5em;
	font-size: 1.5em;
	font-weight: bold;
	color: #0f6336;
	text-shadow:1px 1px 0 #fff;
}

@media screen and (max-width: 575.98px) {
	.box-design {
		margin: 20px 5px 30px;
		padding: 20px 5px;
	}
	.box-design p {
		margin-top: 0.75em;
		font-size: 0.9em;
	}
	.title_accent span::before,
	.title_accent span::after {
		width: 60px;
		height: 2px;
	}
	.title_border {
		padding: 0 2.0em;
		font-size: 1.1em;
	}
	.title_border::before,
	.title_border::after {
		width: 1.25em;
		height: 1px;
	}
	.title_sub {
		font-size: 0.9em;
	}
}


/********************************
    INTRO
*********************************/
.intro { padding: 0;}

.about p {
	font-size: 0.9em;
	line-height: 1.8;
}
.about_img1 {
	position: relative;
	width: 105%;
	right: -5%;
}
.about_img2 {
	position: relative;
	width: 105%;
	left: -5%;
}
.about_img1 img,
.about_img2 img {
	width: 100%;
}
.about_text {
	padding-left: 20px;
	text-align: left;
	line-height: 2.0;
}
.movie_block {
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0px auto 20px auto;
	padding: 10px;
}
.movie_block iframe {
	width: 100%;
	height: 100%;
}
.areamap {
	margin: 40px auto 40px;
}

@media screen and (max-width: 767.98px) {
	.intro { padding: 0 0 20px;}
	.about_text { padding-left: 0; text-align: center;}
}

.box-point {
	margin: 40px auto 30px;
	padding: 20px 25px;
	border: 2px dashed #4c9ac0;
	position: relative;
	background: #fff;
	color: #394cc4;
}
.box-point-ttl {
	position: absolute;
	top: -15px;
	left: 20px;
	background-color: #fff;
	padding: 0 0.5em;
	margin: 0;
	font-size: 20px;
	font-weight: bold;
}
.box-point p {
	margin: 0.5em 0;
	text-align: left;
}
.charm    { text-align: center;}
.charm dt { margin-top: 1em; margin-bottom: 0.25em; font-size: 1.25em;}
.charm dd { color: #444;}

@media screen and (max-width: 575.98px) {
	.box-point {
		padding: 20px 16px;
	}
	.box-point p {
		font-size: 1.0em;
	}
}

/********************************
    BENEFIT
*********************************/
.benefit_icon {
	margin: 0px auto 20px auto;
	background: #fff;
	border-radius: 50%;
	width: 180px;
	height: 180px;
	display: flex;
	justify-content: center;
	align-self: center;
	align-items: center;
}
.benefit_icon img {
	width: auto;
	height: 100px;
}
.benefitlist h3 {
	font-size: 24px;
	color: #1d6333;
	letter-spacing: 1px;
	line-height: 1.3;
	font-weight: bold;
	height: 70px;
	margin: 10px auto;
}
.benefitlist p {
	line-height: 2.0;
	text-align: justify;
}
@media screen and (max-width: 767.98px) {
	.benefitlist h3 {
		font-size: 18px;
		height: 44px;
	}
	.benefitlist p {
		line-height: 1.5;
	}
}
@media screen and (max-width: 575.98px) {
	.benefitlist h3 {
		font-size: 0.95em;
		letter-spacing: 0;
		height: 44px;
	}
	.benefitlist p {
		font-size: 0.9em;
	}
}


/********************************
    VOICE
*********************************/
.voice-block .voice-img img {
	border-radius: 25px;
	width: 100%;
}
.voice-block .voice-box .name {
	margin: 1em 0;
	text-align: center;
	color: #1d6333;
	font-family: 'Kiwi Maru', serif;
}
.voice-block .voice-box .name dt {
	text-align: center;
	font-size: 25px;
	font-weight: normal;
	margin: 0;
	padding: 0;
}
.voice-block .voice-box .name dd {
	text-align: center;
	font-size: 18px;
	margin: 0;
	padding: 0;
}
.voice-block .voice-box p {
	text-align: left;
	line-height: 2.0;
}
@media screen and (max-width: 767.98px) {
	.voice-block .voice-box p {
		font-size: 0.9em;
		line-height: 1.8;
	}
}


/********************************
    SELECTION
*********************************/
/* .selection {} */
.crop_circle { width: 80%; margin:-45px auto 10px; border: 8px solid #FDF4F7; border-radius: 100%;}
@media screen and (max-width: 575.98px) {
	.crop_circle { margin:-5px auto 10px;}
}


/********************************
    FLOW
*********************************/
.step_block {
	margin: 0px auto 60px auto;
	display: flex;
	position: relative;
	align-items: center;
	width: 100%;
}
.step_block::after {
	position: absolute;
	left: 50%;
	bottom: -40px;
	content: "";
	background: url(./image/arrow-bt.png) no-repeat;
	background-size: 100%;
	width: 30px;
	height: 20px;
	color: #1d6333;
}
.step_block:last-of-type::after{
	display: none;
}
.step_block .step_num {
	margin: 0px;
	display: flex;
	justify-content: center;
	width: 10%;
	position: absolute;
	left: 0;
	z-index: 1;
}
.step_block .step_num img {
	width: 100%;
}
.step_block .step_box {
	width: 95%;
	background: #e4efd5;
	position: relative;
	right: 0;
	left: 5%;
	padding: 0 10px 20px 10%;
	border-radius: 10px;
}
.step_block .step_box h3 {
	text-align: left;
	font-size: 25px;
	color: #1d6333;
	margin: 30px 0 0 0;
	line-height: 1.4;
}
.step_block .step_box p {
	text-align: left;
	line-height: 2.0;
	margin: 0.5em 0;
}
@media screen and (max-width: 1199.98px) {
	.step_block .step_num {
		width: 20%;
	}
	.step_block .step_box {
		width: 90%;
		right: 0;
		left: 10%;
		padding: 10px 10px 10px 15%;
	}
	.step_block .step_box h3 {
		font-size: 20px;
		margin: 10px 0 0 0;
		line-height: 1.4;
	}
	.step_block .step_box p {
		font-size: 0.9em;
		line-height: 1.8;
	}
}

.btn_kengaku {
	padding: 5px;
	max-width: 680px;
}
.btn_kengaku .recruit_btn_green a {
	display: block;
	box-shadow: 3px 3px 3px #ccc;
	border-radius: 30px;
	background: linear-gradient(to right, #7cc18d, #00a761, #009645);
	border: 3px solid #fff;
	color: #fff;
	text-decoration: none;
	padding: 1px 0 3px;
	font-size: 25px;
	font-family: 'Kiwi Maru', serif;
}
@media screen and (max-width: 767.98px) {
	.btn_kengaku .recruit_btn_green a {
		font-size: 15px;
	}
}


/********************************
    RECRUIT
*********************************/
.recruit-block {
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	font-size: 16px;
}
.recruit-block dt {
	background: #ededed;
	border-bottom: 1px solid #ccc;
	width: 26%;
	margin: 0;
	padding: 2%;
	font-weight: bold;
}
.recruit-block dd {
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	width: 74%;
	margin: 0;
	padding: 2%;
	text-align: left;
}

@media screen and (max-width: 991.98px) {
	.recruit-block {
		display: flex;
		flex-wrap: wrap;
	}
	.recruit-block dt {
		width: 100%;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		margin: 0;
		padding: 2%;
		background: #ededed;
		font-weight: bold;
		font-size: 16px;
	}
	.recruit-block dd {
		width: 100%;
		border-bottom: 1px solid #ccc;
		margin: 0;
		padding: 2%;
		font-size: 14px;
		text-align: left;
	}
}



/********************************
    OUTRO
*********************************/
.outro {
	font-family: "M PLUS Rounded 1c", sans-serif;
}