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

    Element

-------------------------------------------------------------------------------------------*/
html{
	-webkit-font-smoothing: antialiased;
	font-size: 62.5%;
}
body{
	background: #F5F7FA;
    font-family: noto-sans-cjk-jp, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, sans-serif;
	font-weight: 400;
    color: #000;
	font-size: 1.4rem;
	line-height: 1;
    min-width: 1000px;
}


a{
	transition: .3s all;
}
.inner{
	max-width: 1000px;
	margin: 0 auto;
}
h2 {
	font-weight: normal;
}
.object-fit-img img {
	height: 294px;
	object-fit: cover;
}
/*　IE(edge,11)用*/
.object-fit-img {
	object-fit: cover;
	object-position: center;
	font-family: 'object-fit: cover; object-position: center;'
}
@media screen and (min-width:320px) and ( max-width: 767px) {
	html{
		-webkit-font-smoothing: antialiased;
		font-size: 62.5%;
	}
	body{
		min-width: 0;
		padding: 60px 0 0;
	}
	body.clicked{
		overflow: hidden;
	}

	a{
		transition: .3s all;
	}

	.inner{
		max-width: 1000px;
		margin: 0 auto;
	}
}

.font01{
	font-family: caflisch-script-pro, sans-serif;
	font-weight: 400;
	font-style: normal;
}

#bread{
    padding: 60px 0 0;
}
#bread ul li{
	display: inline-block;
	vertical-align: middle;
	margin: 0 20px 0 0;
	font-size: 1.2rem;
	letter-spacing: 0.1em;
	color: #777;
}
#bread ul li a{
	color: #777;
	position: relative;
}
#bread ul li a::after{
    content: ">";
    display: block;
    position: absolute;
    right: -16px;
    top: 40%;
    transform: translateY(-50%);
}
@media screen and (min-width:320px) and ( max-width: 767px) {
	#bread{
	    padding: 20px 20px 0;
	}
	#bread ul li{
		display: inline-block;
		vertical-align: middle;
		margin: 0 20px 0 0;
		font-size: 1.2rem;
		letter-spacing: 0.1em;
		color: #777;
	}
	#bread ul li a{
		color: #777;
		position: relative;
	}
	#bread ul li a::after{
	    content: ">";
	    display: block;
	    position: absolute;
	    right: -16px;
	    top: 40%;
	    transform: translateY(-50%);
	}
}

/*-----------------------------------------------------------------------------------------

    main

-------------------------------------------------------------------------------------------*/
#main{
    background: url(images/fv_bg.jpg);
    background-size: cover;
    padding: 150px 20px 100px;
    margin: 0 5%;
    position: relative;
    text-align: center;
}
#main .main_txt{
	position: relative;
	z-index: 1;
}
#main h1{
    color: #fff;
    font-size: 10.6rem;
    font-weight: normal;
    margin: 0 0;
    line-height: 1.4;
    letter-spacing: 0em;
    opacity: 0.7;
}
#main h2{
	font-family: '游明朝', 'YuMincho', "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", 'HG明朝E', "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight: 300;
	font-size: 2.2rem;
	line-height: 2;
	letter-spacing: .3em;
	color: #fff;
	margin: 0 0 40px;
}
#main p{
	font-size: 1.4rem;
	line-height: 2;
	letter-spacing: .14em;
	color: #fff;
	margin: 0 0 40px;
}

@media screen and (min-width:320px) and ( max-width: 767px) {
	#main {
	    padding: 60px 15px;
	    margin: 0;
	    position: relative;
	}
	#main::after{
		width: 100%;
		opacity: 0.6;
	}
	#main h1 {
	    color: #fff;
	    font-size: 4.6rem;
	    font-weight: normal;
	    margin: 0 0 10px;
	    line-height: 1;
	    letter-spacing: 0em;
	    opacity: 0.7;
	}
	#main h2{
		font-size: 4vw;
		margin: 0 0 20px;
	}
	#main p {
	    font-size: 2vw;
	    letter-spacing: 0;
	}
}
/*-----------------------------------------------------------------------------------------

    header

-------------------------------------------------------------------------------------------*/
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
header .logo{
    display: flex;
    align-items: flex-end;
	width: 20rem;
    margin-left: 2.875rem;
    padding: 5px 20px 5px;
    position: fixed;
    top: 0;
    background: #fff;
    border-radius: 0 0 6px 6px;
}
header svg{
    width: 151px;
	height: 16px;
    margin-right: 15px;
	vertical-align: super;
}
header .ttl{
	font-family: 'Roboto',sans-serif;
	color: #fff;
    letter-spacing: .2em;
    font-size: 12px;
    font-weight: 300;
    margin-bottom: 3px;
}
.cls-1{
	fill:#fff;
}
header .entry{
    position: absolute;
    right: 0;
    top: 0;
    text-align: center;
    font-size: 3rem;
    margin-right: 2.875rem;
}
header .entry a {
    background: linear-gradient(-135deg, #BFE8FF, #A3E9E9);
    display: block;
    width: 200px;
    color: #FFF;
    border-radius: 100px;
    padding: 15px 0 10px;
    margin: 10px 0 0;
    box-shadow: 1px 2px 4px rgba(0,0,0,0.3);
}
header .entry a:hover{
	letter-spacing: 0.15em;
}
.page-template-page-contact header .entry{
    display: none;
}
header #g_nav ul{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
header #g_nav ul li a {
	font-family: 'Roboto',sans-serif;
    position: relative;
    letter-spacing: .2em;
    text-indent: .2em;
    font-size: 1.2rem;
    color: #fff;
    margin: 0 0 0 40px;
    text-align: center;
    display: block;
}
header #g_nav ul li.entry a{
    background: #fff;
    color: #000;
    padding: 20px 40px;
    text-align: center;
}
header #g_nav ul li a:before {
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    content: "";
    left: 0;
    bottom: -4px;
    background: #fff;
    transform: scale(0,1);
    transform-origin: right top;
    transition: transform .4s ease;
}
header #g_nav ul li a:hover:before {
    transform-origin: left top;
    transform: scale(1,1);
}
header #g_nav ul li.entry a:before{
	display: none;
}
header #g_nav ul li.entry a:hover{
    background: #000;
    color: #fff;
}
@media screen and (min-width:320px) and ( max-width: 767px) {
	header{
		background: #FFF;
		padding: 0;
		position: fixed;
		z-index: 100;
	}
	header .logo {
	    width: 100px;
	    padding: 10px 10px 10px;
	    margin: 0 0 0 10px;
	    position: relative;
	    z-index: 9999;
	    box-sizing: border-box;
	}
	header svg {
		width: 29.17vw;
		height: 2.5vh;
		vertical-align: bottom;
	}
	header .ttl{
		font-size: 2.35vw;
		white-space: nowrap;
		margin-bottom: 0;
	}
	header.clicked .cls-1{
		fill:#000;
	}
	header.clicked .ttl{
	    color: #000;
	}
	header .entry {
	    position: absolute;
	    right: 0;
	    top: 0;
	    text-align: center;
	    font-size: 2rem;
	    margin-right: 0;
	}
	header .entry a {
	    background: linear-gradient(-135deg, #BFE8FF, #A3E9E9);
	    display: block;
	    width: 100px;
	    color: #FFF;
	    border-radius: 100px;
	    padding: 15px 0 10px;
	    margin: 6px 20px 0 0;
	    box-shadow: 1px 2px 4px rgba(0,0,0,0.3);
	}
	header #g_nav {
		position: fixed;
		right: 0;
		left: 0;
		top: 0;
		z-index: 999;
		background: #fff;
		width: 100%;
		height: 100%;
		display: none;
	}
	header #g_nav.clicked {
		position: fixed;
		right: 0;
		left: 0;
		top: 0;
		z-index: 999;
		height: 100%;
		width: 100%;
	}
	header #g_nav ul{
		flex-direction: column;
		justify-content: center;
		height: 100%;
	}
	header #g_nav ul li a {
		font-size: 1.6rem;
		color: #000;
		margin: 0 0 0;
		padding: 20px 0;
	}
	header #g_nav ul li:nth-of-type(1)::after {
		content: "メッセージ";
		display: block;
		letter-spacing: 0.2em;
		text-indent: 0.2em;
		text-align: center;
		font-size: 1.2rem;
		margin: -15px auto 10px;
		color: #7f7f7f;
	}
	header #g_nav ul li:nth-of-type(2)::after {
		content: "インフォメーション";
		display: block;
		letter-spacing: 0.2em;
		text-indent: 0.2em;
		text-align: center;
		font-size: 1.2rem;
		margin: -13px auto 10px;
		color: #7f7f7f;
	}
	header #g_nav ul li:nth-of-type(3)::after {
		content: "ノバレーゼについて";
		display: block;
		letter-spacing: 0.2em;
		text-indent: 0.2em;
		text-align: center;
		font-size: 1.2rem;
		margin: -13px auto 10px;
		color: #7f7f7f;
	}
	header #g_nav ul li:nth-of-type(4)::after {
		content: "スタッフインタビュー";
		display: block;
		letter-spacing: 0.2em;
		text-indent: 0.2em;
		text-align: center;
		font-size: 1.2rem;
		margin: -13px auto 10px;
		color: #7f7f7f;
	}
	header #g_nav ul li:nth-of-type(5)::after {
		content: "キャリアプラン";
		display: block;
		letter-spacing: 0.2em;
		text-indent: 0.2em;
		text-align: center;
		font-size: 1.2rem;
		margin: -13px auto 10px;
		color: #7f7f7f;
	}
	header #g_nav ul li.entry{
		display: block;
		width: 100%;
		max-width: 80%;
		margin: 30px 0 0;
	}
	header #g_nav ul li.entry a {
		background: #000;
		color: #fff;
		padding: 20px 40px;
		display: block;
	}
	#sp-menu{
		position: absolute;
		width: 3.65vw;
		height: 2.87vw;
		right: 6.52vw;
		top: 5.21vw;
		z-index: 999999;
		display: block;
		cursor: pointer;
	}
	#sp-menu span {
		display: inline-block;
		box-sizing: border-box;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		width: 3.65vw;
		height: .66vw;
		transition: transform ease .4s;
		background: #fff;
	}
	#sp-menu span.top-border {
		top: 0;
	}
	#sp-menu span.middle-border {
		top: 50%;
		transform: translate(-50%,-50%);
	}
	#sp-menu span.bottom-border {
		bottom: 0;
	}
	#sp-menu.clicked span{
		background: #000;
	}
	#sp-menu.clicked span.top-border {
		transform: translate(-50%,1.17vw) rotate(-45deg);
	}
	#sp-menu.clicked span.middle-border {
		width: 0;
	}
	#sp-menu.clicked span.bottom-border {
		transform: translate(-50%,-1.17vw) rotate(45deg);
	}
}
/*-----------------------------------------------------------------------------------------

    footer

-------------------------------------------------------------------------------------------*/
footer{
    background: #FFF;
    text-align: center;
    padding: 20px 20px;
    border-top: solid 50px #CAE6F8;
}
footer svg {
    width: 186px;
	height: 30px;
}
footer a{
	display: inline-block;
	width: 14rem;
	margin: 0 0 25px;
}
footer p{
	font-family: 'Roboto',sans-serif;
	font-size: 1rem;
	letter-spacing: 2px;
	color: #919191;
	text-align: center;
}
@media screen and (min-width:320px) and ( max-width: 767px) {
	footer {
		padding: 15.63vw 0 3.91vw;
		position: relative;
	}
	footer svg  {
		position: absolute;
		bottom: 70px;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 39.59vw;
 	   	height: 4.69vw;
		margin-bottom: 3.91vw;
	}
	footer a:hover:before {
		transform-origin: left top;
		transform: scale(1,1);
	}	
	footer ul.ft_nav01{
		margin: 0 0 45px;
		display: block;
		text-align: center;
	}
	footer ul{
		display: block;
		align-items: center;
		justify-content: flex-end;
	}
	footer ul.ft_nav01 li{
		font-family: 'Roboto',sans-serif;
		padding: 0 0 30px;
		position: relative;
		letter-spacing: .2em;
		font-size: 2.87vw;
		color: #7f7f7f;
	}
	footer ul.ft_nav01 li:nth-of-type(1)::after{
		content: "メッセージ";
		display: block;
		margin-top: 5px;
	}
	footer ul.ft_nav01 li:nth-of-type(2)::after{
		content: "インフォメーション";
		display: block;
		margin-top: 5px;
	}
	footer ul.ft_nav01 li:nth-of-type(3)::after{
		content: "ノバレーゼについて";
		display: block;
		margin-top: 5px;
	}
	footer ul.ft_nav01 li:nth-of-type(4)::after{
		content: "スタッフインタビュー";
		display: block;
		margin-top: 5px;
	}
	footer ul.ft_nav01 li:nth-of-type(5)::after{
		content: "キャリアプラン";
		display: block;
		margin-top: 8px;
	}
	footer ul.ft_nav01 li a{
		font-size: 3.91vw;
		margin-left: 0;
	}
	footer ul.ft_nav01 li:nth-child(n+6){
		display: inline-block;
		vertical-align: middle;
		margin: 11.72vw 0;
		padding: 0;
	}
	footer ul.ft_nav01 li:nth-child(n+6) img{
		width: 5.99vw;
		margin: 0 6vw;
	}
	footer ul.ft_nav01 li:nth-child(n+6) a{
		margin: 0 0 0;
	}
	footer ul.ft_nav02{
		display: flex;
		text-align: center;
		justify-content: center;
	}
	footer ul.ft_nav02 li {
		padding: 0 0 0 2.61vw;
		margin: 0 2.61vw 0 0;
	}
	footer ul.ft_nav02 li:first-child {
		padding: 0 0 0 2.61vw;
		margin: 0 2.61vw 0 0;
	}
	footer ul.ft_nav02 li:last-child {
		padding: 0 0 0 2.61vw;
	}
	footer ul.ft_nav02 li a{
		display: block;
		font-size: 2.35vw;
		letter-spacing: 0;
		margin: 0;
	}
	footer .ft_right {
		margin: 0 auto;
	}
	footer p {
		font-size: 2.6vw;
		text-align: center;
	}
}