@charset "UTF-8";
/* body{
	background: #2a2c31;
}
main{
	color: #fff;
} */
html {
	scroll-behavior: smooth;
}
.flex-box{
	display: flex;
}
/* 重なり順の制御 */
.fadein {
transform: translateY(30px);
}
.fadein.scrollin {
transform: none;
}
/*------------------------
XXXX
------------------------*/
/* PC */
@media screen and (min-width:768px) {
	body{min-width:1200px;}
	.pc{display: block;}
	.sp,.sp-nav{display: none;}
	a[href*="tel:"] {
		pointer-events: none;
		cursor: default;
	}
}
/* SP */
@media screen and (max-width:767px) {
	body{font-size: 3.73vw;}
	.pc{display: none;}
	.sp{display: block;}
}
/*------------------------
タイトル
------------------------*/
.page-title{
	display:flex;
	justify-content: center;
	background: url(../img/member/bg_pagetitle.jpg) no-repeat center;
	background-size: cover;
}
.page-title .text-area{
	text-align: center;
}
.page-title .text-area .en{
	font-weight: normal;
	display: block;
	letter-spacing: 0.06em;
	line-height: 1;
}
.page-title .text-area h1{
	letter-spacing: 0.18em;
	font-weight: 300;
}
/* PC */
@media screen and (min-width:768px) {
	.page-title{
		padding-bottom: 50px;
		height: calc(100vh - 84px);
		min-height: 620px;
		align-items: center;
	}
	.page-title h1{
		font-size: 14px;
	}
	.page-title .en{
		font-size: 34px;
	}

}
/* SP */
@media screen and (max-width:767px) {
	.page-title{
		padding-top:45vw;
		height: calc(100svh - 12vw);
	}
	.page-title h1{
		font-size: 4vw;
	}
	.page-title .en{
		font-size: 8vw;
	}
}
/*------------------------
日本エーコン概要
------------------------*/
/* トップ概要 */

#acon .intro .text-area .txt{
	margin-right: auto;
}
#acon .intro .text-area h3,#acon .intro .text-area h4,#acon .intro .text-area p{
	color: #fff;
}
#acon .intro .text-area .txt h3{
	position: relative;
	line-height: 1;
	font-weight: 500;
	letter-spacing: 0.2em;
}
#acon .intro .text-area .txt h3::after{
    content: "";
    display: block;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: rotate(-45deg);
	margin: 1px auto 0;
}
#acon .intro .text-area .txt h2{
}
#acon .intro .text-area .txt p{
    text-align: justify;
    line-height: 2.3;
		letter-spacing: 0.18em;
}
#acon .intro .content .image img{
	object-fit: cover;
	width: 100%;
	height:100%;
}
/* PC */
@media screen and (min-width:768px) {
:root {
	--side-margin: max(0px, calc((100vw - 1200px) / 2));
}
#map{
	margin-bottom: 95px;
}
#acon .intro{
	margin-bottom: 120px;
}
#acon .intro .text-area{
	position: relative;
	padding: 30px 55px 125px 60px;
	width: 600px;
	margin-top: -90px;
	margin-right: var(--side-margin);
	z-index: 1;
}	
#acon .intro .text-area::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: calc(600px + var(--side-margin));
	background: linear-gradient(255deg, rgb(62, 58, 57), rgb(102, 100, 100));
	z-index: -1;
}

#acon .intro .text-area .txt {
    min-width: 485px;
}
#acon .intro .text-area .txt h3{
	font-size: 28px;
	margin-bottom: 225px;
	font-weight: 500;
	width: fit-content;
	padding-left: 82px;
}
#acon .intro .text-area .txt h3::after{
	width: 16px;
	height: 16px;
	margin: 0 auto;
}
#acon .intro .text-area .txt h2{
	margin-bottom: 40px;
}
#acon .intro .text-area .txt h2 img{
	width: 226px;
	height: auto;
}
#acon .intro .text-area .txt h4{
	font-size: 22px;
	font-weight: 500;
	line-height: 1.8;
	margin-bottom: 30px;
	letter-spacing: 0.2em;
}
#acon .intro .text-area .txt p{
	font-size: 14px;
	text-align: justify;
	max-width: 485px;
}
#acon .intro .content .image{
	flex: 1;
	margin-top: 130px;
}
#acon .intro .content .image img{
	object-fit: cover;
	max-height: 780px;
	min-height: 425px;
	width: 100%;
	height:100%;
}
}
/* SP */
@media screen and (max-width:767px) {
#acon {
	margin-bottom: 13.33vw;
	margin-top: -16vw;
}
#acon .intro.inner{
	margin: 0;
    margin-bottom: 14.4vw;
}

#acon .intro .flex-box{
	flex-direction: column;
}
#acon .intro .text-area{
	background: linear-gradient(255deg, rgb(62, 58, 57), rgb(102, 100, 100));
}
#acon .intro .text-area{
	padding: 4vw 6.93vw 13vw;
	width: 85.87vw;
	margin-left: auto;
}
#acon .intro .text-area .txt{
	position: relative;
}
#acon .intro .text-area .txt h3{
	font-size: 5.87vw;
	margin-bottom: 9.33vw;
	text-align: center;
}
#acon .intro .text-area .txt h3::after{
	width: 2.67vw;
	height: 2.67vw;
	max-width: 16px;
	max-height: 16px;
}
#acon .intro .text-area .txt h2{
	margin-bottom: 8vw;
}
#acon .intro .text-area .txt h2 img{
	width: 54.4vw;
	height: auto;
}
#acon .intro .text-area .txt h4{
	font-size: 4.27vw;
	font-weight: 500;
	line-height: 2.1;
	letter-spacing: 0.2em;
	margin-bottom: 8vw;
	margin-top: 79.67vw;
}
#acon .intro .text-area .txt p{
    font-size: 3.47vw;
	line-height: 2;
	letter-spacing: 0.18em;
}
#acon .intro .content .image{
	height: 65vw;
	width: 92vw;
	margin-left: auto;
	position: absolute;
	left: -21vw;
}
}
/* 日本エーコン概要 チーム紹介 */
#acon h3.team-ttl{
	font-weight: 600;
	line-height: 1.8;
	letter-spacing: 0.2em;
	text-align: center;
}
#acon .team.bg{
	background: linear-gradient(255deg, rgb(62, 58, 57), rgb(102, 100, 100));
}
#acon .team .inner{
	margin: 0 auto;
}
#acon .team .main-img img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}
#acon .team.bg .txt{
	color: #fff;
}
#acon .team h4{
	font-weight: bold;
	line-height: 1;
	letter-spacing: 0.18em;
}
div .txt-box p{
	letter-spacing: 0.18em;
	line-height: 2.3;

}
/*fade追加*/
#acon .team .loop{
  opacity: 0;
  transition: opacity .8s ease .2s;
}
#acon .team .inner.fade-child.scrollin .loop{
  opacity: 1;
}
/* PC */
@media screen and (min-width:768px) {
#acon h3.team-ttl{
	font-size: 22px;
	margin-bottom:65px;
}
#acon .team{
	margin-bottom: 130px;
}
#acon .team.bg{
	padding:130px 0;
}
#acon .team .inner{
	width: 1200px;
}
#acon .inner .flex-box.box{
    justify-content: space-between;
    align-items:flex-end;
}
#acon .team .main-img{
	width: 600px;
	height: 420px;
}
#acon .team .txt-box{
		display: flex;
		align-items: stretch;
		flex-direction: column;
		justify-content: space-between;
		width: 565px;
}
#acon .team .txt{
	padding:0 62px 100px 40px
}
#acon .team h4{
	font-size: 18px;
	margin-bottom: 25px;
}
#acon .team .loop-wrap{
    overflow: hidden;
}
/*アニメーション版#acon .team .loop{
	display:flex;
	flex-wrap:nowrap;
	width:max-content;
	animation:team-loop 20s linear infinite;
}
#acon .team .loop .img{
	width:165px;
	height:165px;
	margin-right:35px;
	flex:0 0 auto;
}
*/
#acon .team .loop{
	display:flex;
	flex-wrap:wrap;
	gap:35px;
}
#acon .team .loop .img{
	  flex: 0 0 calc((100% - 35px * 2) / 3);
		height: 165px;
}

#acon .team .loop .img img{
	object-fit:cover;
	width:100%;
	height:100%;
	
}
@keyframes team-loop{
0%{
	transform:translateX(0);
}
100%{
	transform:translateX(-50%);
}
}
}
/* SP */
@media screen and (max-width:767px) {
#acon h2 {
	text-align: left;
}
#acon h3.team-ttl{
	font-weight: bold;
	font-size: 4.27vw;
	margin: 0 4vw;
	margin-bottom: 8vw;
}
#acon .team{
	margin-bottom: 9.33vw;
}
#acon .team.bg{
    padding: 17vw 0 10.66vw;
		margin-bottom: 17vw;
}
#acon .inner .flex-box.box{
	flex-direction: column-reverse;
}
#acon .bg .flex-box.box{
	flex-direction: column;
}
#acon .team .main-img{
	margin: 0 auto;
	width: 80vw;
	height: 56vw;
    margin-bottom: 6vw;
}
#acon .team h4{
	font-size: 4.8vw;
	margin-bottom: 6vw;
	text-align: center;
}
#acon .team p.sp.main-txt{
	padding: 0 11.33vw;
	font-size: 3.47vw;
	line-height: 2;
	letter-spacing: 0.18em;
	text-align: justify;
}
#acon .bg p.sp.main-txt{
	color: #fff;
}

/*アニメーション版
#acon .team .loop-wrap{
	overflow: hidden;
	margin-bottom: 5vw;
	width: 100vw;
}
#acon .team .loop{
	display:flex;
	flex-wrap:nowrap;
	width:max-content;
	animation:team-loop 20s linear infinite;
}
#acon .team .loop .img{
	width:26.67vw;
	height:26.67vw;
	margin-right:6vw;
	flex:0 0 auto;
}
*/
#acon .team .loop{
  transition: opacity .8s ease .3s;
}
#acon .team .loop-wrap{
	padding: 0 4vw;
	margin-bottom: 5vw;
}
#acon .team .loop{
	display:flex;
	flex-wrap:nowrap;
	gap:6vw;
}
#acon .team .loop .img{
	width: calc((100% - 6 * 2 )/ 3);
	width:26.67vw;
	height:26.67vw;
}
#acon .team .loop .img img{
	object-fit:cover;
	width:100%;
	height:100%;
}
@keyframes team-loop{
0%{
	transform:translateX(0);
}
100%{
	transform:translateX(-50%);
}
}
}
/*------------------------
日本エーコンS、日本エーコンE
------------------------*/
#branch .txt{
	color: #fff;
}
#branch .acon-e .txt-box{
    margin-left: auto;
    width: fit-content;
}
#branch .txt h2 img{
	height: auto;
}
#branch .acon-e .txt h3,#branch .acon-e .txt p{
	color: #fff;
}
#branch .txt p{
	text-align: justify;
	line-height: 2.3;
	letter-spacing: 0.18em;
}
#branch .img{
	height: auto;
}
#branch .img img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}
/* PC */
@media screen and (min-width:768px) {

#branch .acon-s{
	margin-bottom: 130px;
}
#branch .acon-e{
	margin-bottom: 130px;
}
#branch .acon-s .txt,
#branch .acon-e .txt{
	position: relative;
	padding: 130px 62px 200px 60px;
	width: 600px;
	margin-right: var(--side-margin);
	z-index: 1;
}
#branch .acon-e .txt{
	margin-left: var(--side-margin);
	margin-right: 0;
}
#branch .acon-s .txt:after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: calc(600px + var(--side-margin));
	background: linear-gradient(255deg, rgb(0, 0, 1), rgb(83, 122, 146));
	z-index: -1;
}
#branch .acon-e .txt:after{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: calc(600px + var(--side-margin));
	background: linear-gradient(255deg, rgb(0, 0, 0), rgb(38, 77, 50));
	z-index: -1;
}
#branch .acon-s .img,
#branch .acon-e .img{
	height: 635px;
}

#branch .txt h2{
	margin-bottom: 55px;
}
#branch .txt h2 img{
	width: 250px;
}
#branch .txt h3{
	font-size: 22px;
	font-weight: 500;
	line-height: 2;
	margin-bottom: 30px;
	letter-spacing: 0.2em;
}
#branch .txt p{
	font-size: 14px;
	max-width: 482px;
}
#branch .img{
	margin-top: 130px;
	flex: 1;
}
}
@media screen and (min-width: 768px) and (max-width: 1400px) {
	#branch .acon-s .img,
	#branch .acon-e .img{
	height: 530px;
}
#branch .acon-s .txt,
#branch .acon-e .txt{
	padding-bottom: 140px;
}

}
/* SP */
@media screen and (max-width:767px) {
#branch .acon-s .txt{
    background:linear-gradient(255deg, rgb(0, 0, 1), rgb(83, 122, 146));
}
#branch .acon-e .txt{
	background: linear-gradient(255deg, rgb(0, 0, 0), rgb(38, 77, 50));
}
#branch .inner{
	margin: 0;
	position: relative;
}
#branch .acon-s{
	margin-bottom: 8.67vw;
}
#branch .acon-e{
	margin-bottom: 14vw;
}
#branch .txt{
    padding: 11.07vw 8vw 13.33vw;
    width: 86vw;
}
#branch .acon-e .txt {
	margin-left: auto;
}
#branch .txt h2{
    margin-bottom: 6vw;
	text-align: left;
}
#branch .txt h2 img{
    width: 54.4vw;
}
#branch .txt h3{
	font-size: 4.27vw;
	font-weight: 500;
	line-height: 2.1;
	margin-bottom: 3.33vw;
	letter-spacing: 0.2em;
	margin-top: 80.33vw;
}
#branch .txt p{
    font-size: 3.47vw;
	line-height: 2;
	letter-spacing: 0.05em;
}
#branch .img{
	width: 95vw;
	height: 68vw;
	position: absolute;
	right: 0;
}
#branch .acon-e .img {
	left: 0;
}
#branch .img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
}


/*------------------------
会社紹介
------------------------*/
#office h2{
	text-align: center;
    font-weight: 500;
    line-height: 1;
		letter-spacing: 0.2em;
}
#office .inner{
	margin: 0 auto;
}
#office .img{
	margin: 0 auto;
}
#office .img img{ 
	object-fit: cover;
	width: 100%;
	height: 100%;
}
#office .arrow a {
    line-height: 1;
    position: relative;
    width: fit-content;
    margin: 0 auto;
	transition: 0.3s all;
}
#office .arrow a::before {
    content: '';
    display: block;
    position: absolute;
    margin: auto;
    background: var(--black);
    height: 1px;
    transition: all 0.3s ease 0s;
}
#office .arrow a::after {
	height: 1px;
	content: '';
	display: block;
	position: absolute;
	background: var(--black);
	transform: rotate(50deg);
	transition: all 0.3s ease 0s;
}
#office .arrow span.link {
    display: inline-block;
}
/* PC */
@media screen and (min-width:768px) {
#office h2{
	font-size: 22px;
	margin-bottom: 60px;
}
#office .inner{
	width: 1200px;
}
#office .img{
    width: 484px;
    height: 190px;
    margin-bottom: 50px;
}
#office .arrow a {
	padding-left: 260px;
}
#office .arrow a::before {
    width: 290px;
    bottom: 8px;
    left: -32px;
}
#office .arrow a::after {
	bottom: 17px;
	left: 238px;
	width: 25px;
}
#office .arrow span.link {
    font-size: 34px;
    margin-left: 15px;
    margin-right: 10px;
}
#office .arrow a:hover::before {
    width: 295px;
}
#office .arrow a:hover::after {
	left: 243px;
}
#office .arrow a:hover span.link {
	color: var(--red);
}
}
/* SP */
@media screen and (max-width:767px) {
#office h2{
	font-size: 4.27vw;
	margin-bottom: 8vw;
	font-weight: bold;
}
#office .img{
    width: 77.33vw;
    height: 30.4vw;
    margin-bottom: 5.33vw;
}
#office .arrow a {
    padding-left: 37.67vw;
}
#office .arrow a::before {
	width: 44.4vw;
	bottom: 8px;
	left: -13.33vw;
}
#office .arrow a::after {
	bottom: 18px;
	left: 25.54vw;
	width: 6.67vw;
}
#office .arrow span {
	font-size: 4.27vw;
	letter-spacing: 0.08em;
}
#office .arrow span.link {
	font-size: 8vw;
	margin-right: 2.67vw;
}
}