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


#contents-wrapper {
	text-align: center;
}
#contents-wrapper p {
	line-height: 2em;
	font-weight: 500
}
#contents-wrapper li {
	font-weight: 500
}
h2, h3, h4, h5, h6 {
	font-weight: bold;
}
h2 {
	font-size: 2.5rem;
}
.ju {
	justify-content: space-between;
}
#page-title {
	background-image: url(../images/pagebg-08.jpg);
	background-position: right top!important;
	background-size:100%!important;
}
/**/
#mainINDEX {
	padding: 90px 0;
	background: url(../images/main.jpg) no-repeat center / cover;
	color: #FFF;
}
#mainINDEX h2 {
	font-size: 3rem;
	text-shadow: 0 0 30px rgba(0,43,112,0.9);
}
#mainINDEX p {
	display: inline-block;
	text-align: left;
	font-size: 1.125rem;
	line-height: 2em;
	text-shadow: 0 0 8px rgba(0,43,112,1);
	padding: 2em 0 0;
}
.Inner {
	width: 1080px;
	margin: auto;
}
#aboutNaruse {
	background: url(../images/about_bg.jpg) no-repeat left bottom;
	padding: 80px 0 100px;
}

#aboutNaruse h3 strong {
  position: relative;
  font-weight: 700;
  display: inline-block;
}

/* 下線 */
#aboutNaruse h3 strong::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: .2em;
  width: 100%;
  height: .2em;
  background-color:rgba(32,82,163,0.2);

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s ease;
}

/* アニメーション発火 */
#aboutNaruse h3 strong.is-active::after {
  transform: scaleX(1);
}

#aboutNaruse p {
	text-align: left;
}
#aboutNaruse ul {
	gap: 10px;
	flex-wrap: wrap;
}
#aboutNaruse ul li img {
	width: 100%
}
#aboutNaruse h3 {
	margin: 1em 0 1.8em;
	font-size: 1.25rem;
	font-weight: bold;
	text-shadow:5px 5px 4px rgba(0,0,0,	.2)
}

#aboutNaruse h3 strong{
	font-size:3rem}
/*  */

#miryoku {
	padding: 80px 0;
	background:rgba(32,82,163,0.8);
}
#miryoku h2 {
	color: #fff;
	margin: 0 0 1em
}
#miryoku h3 {
	font-size: 1.5rem;
	text-align: center;
	font-weight: bold;
	margin: 0 0 1em;
	padding: 0 0 .8em;
	position: relative;
}
#miryoku h3::after {
	position: absolute;
	content: "";
	width: 3em;
	bottom: 0;
	height: 2px;
	background: #1d50a2;
	left: calc(50% - 1.5em);
}
#miryoku .box {
	background: #FFF;
	border-radius: 10px;
	margin: 0 0 2em;
	padding: 1.4em 2.4em;
}
#miryoku .box p {
	margin: 0 0 1.8em;
}
#miryoku .box p strong {
	position: relative;
	font-size: 1.25rem;
	font-weight: bold;
}
#miryoku .box p strong::after {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 6px;
	background: rgba(29,80,162,.14);
	content: "";
	left: 0;
}
#miryoku .box ul{
	padding:2em 0 0}
#miryoku .box li {
	padding: .2em 0 .2em 1.2em;
	background: url(../images/arrow.png) no-repeat left .48em / .82em;
	text-align: left;
}
/**/
#miryoku .box .koePhoto{
	display:flex;
	padding:1.4em;
	border-radius:8px;
	justify-content:center;
	background:rgba(29,80,162,.14);}
	#miryoku .box .koePhoto p{
		margin:0;
		width:32%;
	}
		#miryoku .box .koePhoto p:nth-of-type(2){
			margin:0 1.4%}
		#miryoku .box .koePhoto p img{
			display:block;
			margin: 0 0 .8em}
	
/**/

#threePOINT {
	background: url(../images/3_bg.jpg) no-repeat center bottom / 100%;
	background-color:rgba(32,82,163,0.1);
	padding: 80px 0 160px
}
#threePOINT h2 {
}
#threePOINT ul.list3 {
	display: inline-flex;
	align-items: center;
	min-height: 380px;
	gap: 30px;
}
#threePOINT ul.list3 li {
	width: 230px;
	font-size: 1.75rem;
	font-weight: bold;
	position: relative;
}
#threePOINT ul.list3 li::after {
	width: 220px;
	content: "";
	height: 220px;
	position: absolute;
	left: 0;
	top: 0;
	background: #FFF;
	border: 5px solid rgba(29,80,162,.14);
	border-radius: 220px;
	z-index: 0;
}
#threePOINT ul.list3 li span {
	z-index: 10;
	display: block;
	position: relative;
	padding: 1.8em 0 0
}
#threePOINT ul.list3 li img {
	display: block;
	margin: .4em auto 0;
}
#threePOINT h3 {
	margin: 2em 0 1em;
	font-size: 1.875rem;
}
#threePOINT .Inner .box {
	background: #FFF;
	padding: 1.4em;
	border-radius: 10px;
}
#threePOINT .Inner .box h4 {
	padding: .8em 0 0;
	font-size: 1.25rem;
}
#threePOINT .Inner .box p {
	text-align: left;
	line-height: 1.6em;
	margin: 1.4em 0
}
#threePOINT .Inner .box li {
	text-align: left;
	padding: 0 0 .6em 1.67em;
	background: url(../images/ico-check.png) no-repeat left .2em / 1.2em;
}
#threePOINT .Inner .box figure {
	margin: 1em 0
}
#threePOINT .Inner .box figure img {
	width: 100%
}
/**/


#CV.index {
	padding: 100px 0
}
#CV.index p {
	font-size: 1.875rem;
	margin: 0 0 1em;
	font-weight:bold;
}
#CV.index figure {
	padding: 2em 0
}
#CV.index ul {
	display: inline-block;
	padding: 2em 0;
}
#CV.index ul li {
	font-size: 1.5rem;
	font-weight: bold;
	padding: 0 0 .8em;
	text-align: left;
}
#CV.index p.btn a {
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
	text-shadow: 2px 2px 1px rgba(0,0,0,.4);
	display: inline-block;
	padding: .8em 1em;
	border-radius: 10px;
	background: #FF9900;
}
#CV h2 span {
	margin-bottom: 30px;
	position: relative;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
#CV h2 span::after {
	content: '';
	position: absolute;
	bottom: 5px;
	left: 0;
	width: 100%;
	height: 12px;
	background: rgba(255, 105, 180, 0.3);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1.8s ease;
}
#CV h2 span.visible {
	opacity: 1;
	transform: translateY(0);
}
#CV h2 span.visible::after {
	transform: scaleX(1);
}
/**/
	
#Numbers {
	background:rgba(32,82,163,0.7);
	padding: 80px 0;
	color: #FFF;
}
#Numbers ul.graph li {
	margin: 0 0 2em;
	padding: 1.6em;
	background: #FFF;
	border-radius: 10px;
}
#Numbers ul.graph img {
	width: 100%
}
#Numbers ul.graph h3 {
	font-size: 1.5rem;
	font-weight: bold;
	color: #000033;
	margin: .8em 0 1em;
}
#Numbers p{
	color:#000}
/* */


#Interview {
	padding: 80px 0 0
}
#Interview h3 {
	font-size: 2rem;
	margin: 2em 0 0;
	padding: 1em 0;
	border-top: 1px solid #0a83d0;
}
.InterviewCo figure {
	padding: 0;
	margin: 0 0 2.2em;
}
.InterviewCo figure img {

	width: 100%
}
.InterviewCo .box {
	padding: 0 0 3em;
	text-align: left;
}
.InterviewCo .box .Inn {
	position: relative;
}
.InterviewCo h4 {
	position: absolute;
	left: .6em;
	bottom: .6em;
	padding: 1.4em;
	background:rgba(32,82,163,0.8);
	color: #FFF;
}
.InterviewCo h4 span {
	display: block;
	font-size: 1.875rem
}
.InterviewCo .box {
		border-radius: 10px;
		overflow:hidden;
	background: rgba(29,80,162,.14);
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}
.InterviewCo .box.visible {
	opacity: 1;
	transform: translateY(0);
}
.InterviewCo .box p{
	line-height:1.688em!important;
	margin: 0 1.4em}
 @media screen and (min-width:768px) {
section {
	min-width: 1080px;
}
.flexPC {
	display: flex;
}
.sp {
	display: none
}
#CV .btn br {
	display: none
}
/**/
#aboutNaruse p {
	margin: 2em 0 0 18em;
	display: inline-block;
}

#aboutNaruse figure img{
	width:100%;
	max-width: 1460px;}
	
#aboutNaruse ul {
	max-width: 1600px;
	padding: 0 0 40px;
	display: inline-flex;
	justify-content:center;
}
#aboutNaruse ul li {
	width: 30%;
}
#aboutNaruse p {
	font-size: 1.125rem;
	padding: 1.4em;
	background: rgba(255,255,255,.68);
}
/**/
#miryoku .flexPC .box {
	width: 48%
}
#miryoku .box.koe ul {
	justify-content: space-between;
	display: flex;
	flex-wrap: wrap;
}
#miryoku .box.koe ul li {
	width: 38.8%;
}
#miryoku .box.koe ul li:nth-of-type(even) {
	width: 60%
}
#miryoku .box.koe ul li:last-child{
	width:100%}
#miryoku .box.chiiki ul {
	display: inline-block
}
#threePOINT .Inner .box {
	width: 32%
}
#Numbers ul.graph {
	padding: 4em 0 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#Numbers ul.graph li {
	width: 48%;
}
/**/
.InterviewCo {
	justify-content: space-between;
	display: flex;
	flex-wrap: wrap;
}
.InterviewCo .box{
	width: 48%;
	margin: 0 0 50px;
}
.InterviewCo .box p {
	font-size: 1.063rem;
}
.InterviewCo .box:nth-of-type(odd) h4 {
	text-align: right;
	left: auto;
	right: .6em
}
#CV.index p a{
	font-size: 1.313rem}
	#Numbers p{
		font-size:1.5rem}
/*
	.InterviewCo .box:nth-of-type(1),
	.InterviewCo .box:nth-of-type(4),
	.InterviewCo .box:nth-of-type(7){
		margin-left:0}
	
	*/
	
/*閉じタグ*/
}
 @media screen and (max-width:767px) {
.Inner {
	width: 94%
}
.pc {
	display: none
}
p, li {
	font-size: 3.8vw
}
h2 {
	font-size: 6vw
}
/**/
#mainINDEX {
	background: #2052A3 url(../images/main-sp.jpg) no-repeat center top / 100%;
	padding: 5em 0 3em;
}
#mainINDEX h2 {
	font-size: 6vw
}
#mainINDEX p {
	font-size: 4vw;
	text-align: left;
	display: block;
	margin: 1em 1.8em 0
}
/**/
#aboutNaruse {
	padding: 2.4em .8em 12em;
	background-size: 70%;
}
#aboutNaruse h2 {
	font-size: 7.2vw
}
#aboutNaruse h3 {
	line-height: 2.2em;
	font-size: 4vw
}
#aboutNaruse h3 strong::after {
	bottom:-4px;}
#aboutNaruse h3 strong{
	font-size:8vw}
#aboutNaruse ul {
	display: flex;
	justify-content: space-between;
}
#aboutNaruse ul li {
	width: 48%
}
#aboutNaruse figure{
	margin:0 0 1em;
	padding:0}
#aboutNaruse p {
	margin: 2em 1em 0;
}
/**/
	
#miryoku {
	padding: 2em 0
}
#miryoku .box {
	margin: 1.5em 0 0;
	padding:1.4em .8em
}
#miryoku h3 {
	font-size: 5.2vw;
}
#miryoku .box .koePhoto{
	padding: .4em;}
	#miryoku .box .koePhoto p{
		font-size:2.4vw}
/**/
	.InterviewCo .box{
		margin:0 0 1.6em}
		
		#miryoku .box.koe h3+p{
}
			

			
				/**/
#threePOINT {
	padding: 2em 0 10em;
	background-size: 200%
}
#threePOINT ul.list3 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: auto;
	min-height: auto;
	gap: 0px;
}
#threePOINT .Inner .box {
	margin: 1.5em 0 0
}
#threePOINT ul.list3 li {
	width: 180px;
	height: 180px;
	font-size: 4.4vw;
}
#threePOINT ul.list3 li img {
	width: 40%
}
#threePOINT ul.list3 li::after {
	width: 160px;
	height: 160px;
	border-radius: 160px;
}
#threePOINT .Inner .box h4 {
	font-size: 5.8vw;
	padding: 1em 0
}
/**/
#CV.index {
	padding: 3em 1em 1em
}
#CV h2 span::after {
	display: none;
}
#CV h2 {
	font-feature-settings: "palt";
	background: linear-gradient(transparent 70%, rgba(255, 105, 180, 0.3) 70%);
	background-size: 0% 100%;
	background-repeat: no-repeat;
	transition: background-size 1.8s ease;
	display: inline-block;
}
#CV h2.line-active {
	background-size: 100% 100%;
}
#CV.index ul li {
	font-size: 5.8vw
}
#CV.index p {
	font-size: 4vw;
	text-align: left
}
#CV.index p.btn {
	text-align: center;
}
#CV.index p.btn a {
	display: block;
	margin: 1.5em 0
}
/**/
		
#Numbers {
	padding: 2em
}
#Numbers ul.graph li {
	margin: 1.6em 0 0
}
#Numbers ul.graph h3 {
	font-size: 5.89vw;
	margin: 0 0 .6em
}

/**/

#Interview h3{
	font-size:6vw}
	
	.InterviewCo h4 span{
		font-size:5vw}
	
	
/*閉じタグ*/
}