@charset "utf-8";

* {
	box-sizing: border-box;
}
body {
	-webkit-text-size-adjust: none;
	font-size: 16px;
	line-height: 1.7em;
	color: #424242;
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", sans-serif;
	overflow-x: hidden;
}
@media only screen and (max-width: 767px) {
	body {
	font-size: 14px!important;	
	}
}
img{
	vertical-align: bottom;
	width: 100%;
}
.spOnly,
.tabOnly{
	display: none;
}
@media only screen and (max-width: 500px) {
	.pcOnly {
		display: none;
	}
	.spOnly {
		display: block;
	}
}

/*=================================

	main

================================ */
.inner{
	display: block;
	margin: auto;
	width: 90vw;
	max-width: 1300px;
}
@media screen and (max-width:1100px){
	.inner{
		width: 100%;
		padding: 0 15px;
	}	
}

.mainVisual{
	position: relative;
 	width: 100%;
 	padding: 8% 0 26%;
 	overflow: hidden;
 	background-image: url(/jinji/images/mainimg_bg01.jpg);
 	background-repeat: no-repeat;
  	background-position: 80% center;
 	background-size: cover;
 	font-weight: bold;
}
.mainVisual::before{
 	content: "";
 	position: absolute;
 	inset: 0;
 	background-image: url(/jinji/images/mainimg_bg02.svg);
 	background-repeat: no-repeat;
 	background-position: left top;
 	background-size: 24% auto;
 	z-index: 3;
}
@media only screen and (max-width: 1024px) {
	.mainVisual::before{
	 	background-size: 40% auto;
	}
}
.mainVisual::after{
 	content: "";
 	position: absolute;
 	bottom: -1px;
 	left: 0;
 	right: 0;
 	top: 0;
 	background-image: url(/jinji/images/index_line01.svg);
 	background-repeat: no-repeat;
 	background-position: left bottom;
 	background-size: 100% auto;
 	z-index: 3;
}

h1{
	line-height: 1.4;
	color: #ffffff;
	margin-left: -16px;
	font-size: 88px;
	font-weight: bold;
	text-shadow: 0px 0px 9px #2e2b3c;
	-webkit-text-shadow: 0px 0px 9px #2e2b3c;
	-moz-text-shadow: 0px 0px 9px #2e2b3c;
	-o-text-shadow: 0px 0px 9px #2e2b3c;
	-ms-text-shadow: 0px 0px 9px #2e2b3c;
}
h1 .spOnly {
	line-height: 1.2;
	color: #ffffff;
	margin-left: -16px;
	font-size: 88px;
	font-weight: bold;
	text-shadow: 0px 0px 9px #2e2b3c;
	-webkit-text-shadow: 0px 0px 9px #2e2b3c;
	-moz-text-shadow: 0px 0px 9px #2e2b3c;
	-o-text-shadow: 0px 0px 9px #2e2b3c;
	-ms-text-shadow: 0px 0px 9px #2e2b3c;
}
.subCopy{
	margin-top: 40px;
}
.subCopy span.line{
	display: inline-block; 
	margin: 0 0 .6em 0; 
	padding: 4px 0 4px 20px;
	background-color: #ffffff;
	color: #1A005D;
	font-size: 24px;
	font-weight: 900; 
}
.subCopy span.line + span.line{
	margin-top: 16px;
}
.subCopy span.greenTxt{
	color: #6B9400;
}
@media screen and (max-width:769px) {
	h1{
		font-size: 44px;
	}
	.subCopy{
		margin-top: 20px;
	}
	.subCopy span.line{
		margin: 0 0 .6em 0; 
		padding: 2px 0 2px 10px;
		font-size: 16px;
	}	
}
@media only screen and (max-width: 1024px) {
	h1{
		margin-left: 0;
	}
}
@media screen and (min-width:769px) and (max-width:1024px){
	h1{
		font-size: 66px;
	}
}

/*scroll*/
.scroll_down{
	position:absolute;
	bottom: 11vw;
	right: 3.5%;
	z-index: 99;
	text-shadow: 0px 0px 3.6px rgba(0, 0, 0, 0.6);
	-webkit-text-shadow: 0px 0px 3.6px rgba(0, 0, 0, 0.6);
	-moz-text-shadow: 0px 0px 3.6px rgba(0, 0, 0, 0.6);
	-o-text-shadow: 0px 0px 3.6px rgba(0, 0, 0, 0.6);
	-ms-text-shadow: 0px 0px 3.6px rgba(0, 0, 0, 0.6);
}
.scroll_down span{
	position: absolute;
	right: -8px;
	bottom: 30px;
	color: #FFFFFF;
	font-size: 11px;
	letter-spacing: .2em;
	writing-mode: vertical-lr;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	font-family: "Roboto", sans-serif;
}

.scroll_down:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: -24px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background:#FFFFFF;
	animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}
@keyframes circlemove{
  0%{bottom:60px;}
  100%{bottom:0px;}
}
@keyframes cirlemovehide{
  0%{opacity:0}
  50%{opacity:1;}
  80%{opacity:0.9;}
  100%{opacity:0;}
}
.scroll_down:after{
	content:"";
	position: absolute;
	bottom:0;
	left:-20px;
	width:2px;
	height: 80px;
	background:#FFFFFF;
}
@media screen and (max-width: 769px) {
	.scroll_down{
		bottom: 14vw;
	}
	.scroll_down span{
		right: -3px;
		bottom: 90px;
	}
	.scroll_down:before {
		bottom: 0;
		left: -14px;
	}
	.scroll_down:after{
		bottom:0;
		left:-10px;
	}
}

h2{
	line-height: 1.2;
	margin-bottom: 56px;
	color: #1A005D;
	font-size: 40px;
	font-weight: bold;
}
h2 span{
	margin-bottom:18px;
	display: block;
	width: 62%;
}
@media screen and (max-width:768px){
	h2{
		font-size: 32px;
		margin-bottom: 32px;
	}
	h2 span{
		margin-bottom:8px;
		width: 88%;
	}
}

ul.clmWrap{
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 24px;
}
ul.clmWrap li{
	display: flex; 
	width: 100%;
}
ul.clmWrap li.clm2{
	width: calc((100% - 24px) / 2);
}
ul.clmWrap li.clm3{
	width: calc((100% - 48px) / 3); 
}
@media screen and (min-width:768px) and (max-width:1023px){
	ul.clmWrap li.clm3{
		width: calc((100% - 24px) / 2);
	}
}
@media screen and (max-width:767px){
	ul.clmWrap li.clm2,ul.clmWrap li.clm3{
		width: 100%;
	}
}
ul.clmWrap li a{
	position: relative;
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	width: 100%;
	height: 100%;
	overflow: hidden;
	text-decoration: none;
	transition: .4s;
}
.clmWrap li a::before{
	content:"";
 	position: absolute;
 	left: 0;
 	right: 0;
 	bottom: 0;
 	height: 100%;
  	background-image: linear-gradient(180deg, rgba(77, 73, 87, 0.5) 30%, rgba(21, 17, 32, 1) 70%);
  	opacity: 0.7;
 	z-index: 1;
}
ul.clmWrap li a:hover{
	opacity: 0.7;
}
ul.clmWrap li a:hover{
	opacity: 0.7;
}
.clmWrap  li  a .clmImg{
	position: absolute;
	inset: 0;
	z-index: 0;
}
.clmWrap li a .clmImg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
ul.clmWrap li a dl{
  position: relative;
  z-index: 2;
  margin-top: clamp(160px, 12vw, 260px);
  padding: 22px;
  color: #fff;
}
@media screen and (max-width:767px){
	ul.clmWrap li a dl{
	  margin-top: clamp(120px, 12vw, 120px);
	}
}
ul.clmWrap li dt{
	line-height: 1.6;
	padding-bottom: 16px;
	font-size: 24px;
}
@media only screen and (max-width: 767px) {
	.clmWrap li a::before{
	  	background-image: linear-gradient(180deg, rgba(77, 73, 87, 0.5), rgba(21, 17, 32, 1) 70%);
	}
	ul.clmWrap li dt{
		padding-bottom: 8px;
		font-size: 18px;
	}
	ul.clmWrap li dt .pcOnly {
		display: none;
	}
}


a.greenTri::after{
 	content:"";
 	position: absolute;
 	right: 0;
 	bottom: 0;
 	width: 0;
 	height: 0;
  	border-style: solid;
 	border-width: 0 0 56px 64px; /* サイズ調整 */
 	border-color: transparent transparent #2f8a1f transparent;
 	z-index: 3;
}
span.linkArrow{
 	content: "";
 	position: absolute;
 	bottom:9px;
 	right: 9px;
 	width: 20px;
 	height: 20px;
 	background-image: url(/jinji/images/index_ic01.svg);
 	background-repeat: no-repeat;
 	background-position: right top;
 	background-size: 20px auto;
 	transition: .3s;
 	z-index: 4;
}
a:hover span.linkArrow{
 	right: 6px;
}

.corporate{
	position: relative;
	padding: 88px 0;
	background-color: #ffffff;
}
.corporate::before{
 	content: "";
 	position: absolute;
 	inset: 0;
 	background-image: url(/jinji/images/index_bg01.svg);
 	background-repeat: no-repeat;
 	background-position: right top;
 	background-size: 48% auto;
 	z-index: 1;
}
.corporate .inner{
	position: relative;
 	z-index: 2;
}
@media screen and (max-width:768px){
	.corporate{
		padding: 32px 0 40px;
	}
	.corporate::before{
	 	background-size: 70% auto;
	}
}
.group{
	position: relative;
 	padding: 22% 0 120px;
	color: #ffffff;
 	background-image: url('/jinji/images/index_bg02.jpg');
 	background-size: cover;
 	background-position: center;
}
@media screen and (min-width: 768px) {
	.group{
        background-attachment: fixed;
    }
}
*/@media screen and (max-width:768px){
	.group{
		padding: 22% 0 40px;
	}
}
.group::after{
 	content: "";
 	position: absolute;
 	inset: 0;
 	background-image: url(/jinji/images/index_line02.svg);
 	background-repeat: no-repeat;
 	background-position: left top;
 	background-size: 100% auto;
 	z-index: 1;
 	pointer-events: none;
}
.group h2{
	color: #ffffff;
}
.group h2 span{
	width: 70%;
}
@media screen and (max-width:768px){
	.group h2 span{
		margin-bottom:8px;
		width: 100%;
	}
}
.banner a{
  position: relative;
  display: block;
}
.banner a::after{
 	content:"";
	position:absolute;
	inset:0;
	background:#fff;
	opacity:0;
	transition: opacity .3s;
}
.banner a:hover::after{
	opacity:.25;
}
.boxWrap {
	margin: auto;
	width: 88%;
	max-width: 1100px;
	margin-top: 88px;
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
.boxWrap .imgBox{ 
    content: "";
    position: absolute;
    bottom: -24px;
    left: 0;
    width:calc(50%  + 48px);
    height: auto;
    z-index: 1;
}
.boxWrap .txtBox {
	width:calc(50%  + 48px);
	height: auto;
	padding: 24px 24px 40px;
	background-color: rgba(15, 16, 59, 0.7);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);	
	font-weight: bold;
	z-index: 2;
}
@media screen and (max-width:767px) {
	.boxWrap {
		width: 100%;
		margin-top: 32px;
		flex-direction: column; 
		align-items: center;  
	}
	.boxWrap .imgBox{
	    position: relative; 
	    bottom: auto;
	    top: -24px;
	    left: 0;
	    width:95%;
	    order: 2;
	    align-self: flex-start;
        margin-left: 0;
        margin-right: 0;
	}
	.boxWrap .txtBox {
		width:95%;
		order: 1;
	    align-self: flex-end;
        margin-left: 0; 
        margin-right: 0;
	}
}
@media screen and (min-width:767px){
	.wrap .boxWrap:nth-child(even)  {
	    -webkit-justify-content: flex-start;
	    justify-content: flex-start;
	}
	.wrap .boxWrap:nth-child(even) .imgBox{ 
	    left: auto;
	    right: 0;
	}
	.wrap .boxWrap:nth-child(even) .txtBox {
	width:calc(50%  + 48px);
	}
}

.btn a{
	position: relative;
	display: inline-block;
	margin-top: 40px;
	padding: 16px 64px 16px 32px;
	background-color: #357F0F;
	border: 1px solid #357F0F;
	border-radius: 100px;
	transition: .3s;
}
.btn a:hover{
	color: #357F0F;
	display: inline-block;
	background-color: #ffffff;
}
.btn span.linkArrow{
 	content: "";
 	position: absolute;
 	bottom:auto;
 	top: 49%;
 	right: 32px;
 	width: 20px;
 	height: 20px;
 	transform: translate(0%,-50%); 
}
.btn a:hover span.linkArrow{
 	right: 28px;
	filter: invert(36%) sepia(66%) saturate(711%) hue-rotate(58deg) brightness(60%) contrast(89%);
}
@media screen and (max-width:768px) {
	.btn a{
		display: block;
		width: 100%;
	}
}

/*fadein*/
.anim-box {
	opacity: 0;
	transform: translateX(0);
}
.anim-box.fadein.is-animated {
	animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes fadeIn {
  0% {
	opacity: 0;
  }
  100% {
	opacity: 1;
  }
}
/*fadeup*/
.anim-box.fadeup.is-animated {
  animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes fadeup {
  0% {
	transform: translateY(30px);
	opacity: 0;
  }
  80% {
	opacity: 1;
  }
  100% {
	opacity: 1;
	transform: translateY(0);
  }
}

/*pageTop*/
.pageTop a {
    content: "";
    display: block;
    position: fixed;
    bottom: 30px;
    right: 40px;
    width: 50px;
    height: 50px;
    background-color: #357F0F;
	border: 1px solid #357F0F;
    border-radius: 100%;
    z-index: 999;
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.20);
	-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.20);
	-moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.20);
	-o-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.20);
	-ms-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.20);
	transition: .3s;
}
.pageTop a::after {
    content: "";
    z-index: 500;
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 16px;
    height: 16px;
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    transition: .4s;
}
.pageTop a:hover{
    background-color: #FFF;
}
.pageTop a:hover::after {
    top: 16px;
	border-top: 3px solid #357F0F;
    border-right: 3px solid #357F0F;
}
@media (max-width: 767px) {
.pageTop a {
    bottom: 20px;
    right: 20px;
}	
}