@charset "UTF-8";

/* ------------------------------------------------
                    TOP
--------------------------------------------------- */
/*---------- MV ----------*/
.sec-mv {
	width: 100%;
	margin-top: -80px;
	padding: 135px 0 125px;
	background: url("../../img/top/bg_mv_pc.jpg") center center no-repeat;
	background-size: cover;
	position: relative;
	z-index: 1;
}

.mv-copy-en {
	margin-bottom: 40px;
	color: #fff;
	font-size: 7.0rem;
	line-height: 1.4;
}
.mv-copy-ja {
	color: #fff;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 2;
}

/* scroll down */
.scroll-down{
	position:absolute;
	bottom: 145px;
	left: 2.5%;
}

.scroll-down span {
	position: absolute;
	left: 0;
	bottom: 0;
	color: #004831;
	font-size: 1.4rem;
	writing-mode: vertical-lr;
	line-height: 1;
}

.scroll-down::before{
	content: '';
	position: absolute;
	bottom: 45px;
	left: 0.6rem;
	width: 1px;
	height: 440px;
	background: #004831;
}

.scroll-down::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 4px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
	animation:
	circlemove 2.6s ease-in-out infinite,
	cirlemovehide 2.6s ease-out infinite;
}

@keyframes circlemove{
	0% { bottom: 490px;}
	100% { bottom: 40px;}
}

@keyframes cirlemovehide{
	0% { opacity: 0}
	50% { opacity: 1;}
	80% { opacity: 0.9;}
	100% { opacity: 0;}
}

@keyframes circlemoveSP{
	0% { bottom: 33vw;}
	100% { bottom: 9vw;}
}

@media (max-width: 768px) {
	.sec-mv {
		width: 100%;
		margin-top: -14vw;
		padding: 22vw 0 50vw;
		background: url("../../img/top/bg_mv_sp.jpg") center center no-repeat;
		background-size: cover;
		position: relative;
		z-index: 1;
	}

	.mv-copy-en {
		margin-bottom: 10vw;
		font-size: 11.8vw;
	}
	.mv-copy-ja {
		font-size: 6.0vw;
	}

	/* scroll down */
	.scroll-down{
		position:absolute;
		bottom: 3vw;
		left: 50%;
	}

	.scroll-down span {
		position: absolute;
		left: 0;
		bottom: 0;
		color: #fff;
		font-size: 3.4vw;
		writing-mode: vertical-lr;
		line-height: 1;
	}

	.scroll-down::before{
		content: '';
		position: absolute;
		bottom: 9vw;
		left: 1.2vw;
		width: 1px;
		height: 24vw;
		background: #fff;
	}

	.scroll-down::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0.5vw;
		width: 1.8vw;
		height: 1.8vw;
		border-radius: 50%;
		animation:
		circlemoveSP 2.0s ease-in-out infinite,
		cirlemovehide 2.0s ease-out infinite;
	}
    
}



/*---------- 共通パーツ ----------*/
.sec-ttl-en {
	margin-bottom: 40px;
	font-size: 74px;
	line-height: 1;
}
.sec-ttl-wrap {
	width: 370px;
}
@media (max-width: 768px) {
	.sec-ttl-en {
		margin-bottom: 8vw;
		font-size: 12.8vw;
	}
	.sec-ttl-wrap {
		width: 100%;
	}
    
}

/*---------- Business ----------*/
.sec-business {
	width: 100%;
	padding: 100px 0;
	background: url("../../img/top/bg_business.jpg") center center no-repeat;
	background-size: cover;
	position: relative;
}
.sec-business .cont-inn {
	position: relative;
	z-index: 2;
}
.business-txt-wrap {
	width: 49%;
}

.business-copy {
	margin-bottom: 15px;
	font-size: 2.0rem;
	font-weight: 700;
	line-height: 2;
}
.business-txt {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 2;
}

.legal-copy {
	margin: 30px auto 20px;
	font-size: 2.6rem;
	line-height: 1;
}
.legal-logo {
	width: 320px;
	margin-bottom: 40px;
}
.sec-business .btn-green {
	margin-top: 60px;
}
.sec-business .btn-lightgreen-s {
	margin-top: 10px;
}


.legal-img {
	width: 60%;
	max-width: 1000px;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 1;
}

@media (max-width: 920px) {
	.business-txt-wrap {
		width: 100%;
	}
	.legal-img {
		width: 90%;
		max-width: initial;
		margin: 40px auto 0;
		position: relative;
		top: auto;
		right: auto;
		transform: none;
		z-index: 1;
	}
    
}

@media (max-width: 768px) {
	.sec-business {
		width: 100%;
		padding: 12vw 0 10vw;
	}
	.sec-business .cont-inn {
		position: relative;
		z-index: 2;
	}

	.business-copy {
		margin-bottom: 4vw;
		font-size: 4.6vw;
	}
	.business-txt {
		font-size: 3.8vw;
	}

	.legal-copy {
		margin: 8vw auto 6vw;
		font-size: 3.8vw;
		line-height: 1.6;
	}
	.legal-logo {
		width: 80%;
		margin-bottom: 8vw;
	}
	.sec-business .btn-green {
		margin-top: 6vw;
	}
	.sec-business .btn-lightgreen-s {
		margin-top: 4vw;
	}


	.legal-img {
		width: 100%;
		max-width: initial;
		margin: 40px auto 0;
		position: relative;
		top: auto;
		right: auto;
		transform: none;
		z-index: 1;
	}
    
}


/*---------- News ----------*/
.sec-news {
	padding: 80px 0 40px;
	position: relative;
}
.news-cont-wrap {
	width: calc(100% - 370px);
}

.news-list {
	width: 100%;
	margin-bottom: 20px;
	border-top: 1px solid #dadada;
}
.news-list li {
	width: 100%;
	padding: 30px 0;
	border-bottom: 1px solid #dadada;
}
.news-list li a {
	width: 100%;
	display: flex;
	align-items: flex-start;
}

.news-date {
	margin-right: 30px;
	color: #80a398;
	font-size: 1.6rem;
	line-height: 1.2;
}
.news-ttl {
	font-weight: 700;
	line-height: 1.2;
}
.sec-news .btn-green {
	margin-left: auto;
}


@media (max-width: 768px) {
	.sec-news {
		padding: 10vw 0 4vw;
	}
	.news-cont-wrap {
		width: 100%;
	}

	.news-list {
		width: 100%;
		margin-bottom: 6vw;
	}
	.news-list li {
		width: 100%;
		padding: 7vw 0;
	}
	.news-list li a {
		width: 100%;
		flex-wrap: wrap;
	}

	.news-date {
		width: 100%;
		margin-right: 0;
		margin-bottom: 3vw;
		font-size: 3.6vw;
	}
	.news-ttl {
		width: 100%;
		font-weight: 700;
		line-height: 1.2;
	}
	.sec-news .btn-green {
		margin-left: auto;
	}
    
}


/*---------- Company ----------*/
.sec-company {
	width: 100%;
	padding: 40px 0 80px;
	background: url("../../img/top/bg_company.jpg") center center no-repeat;
	background-size: cover;
	position: relative;
}
.company-cont-wrap {
	width: calc(100% - 370px);
}

.company-info {
	width: 100%;
}
.company-info th {
	width: 92px;
	padding: 20px 0 20px 10px;
	border-bottom: 1px solid #80a398;
	color: #80a398;
	text-align: left;
	font-weight: 700;
	vertical-align: top;
}
.company-info td {
	width: calc(100% - 92px);
	padding: 20px 30px;
	border-bottom: 1px solid #dadada;
	text-align: left;
	font-weight: 700;
}
.company-info tr:last-child th, 
.company-info tr:last-child td {
	border-bottom: none;
}
.company-info td .txt-indent {
	display: inline-block;
	text-indent: -1.5em;
	padding-left: 1.5em;
}

.company-info-position-wrap {
	align-items: flex-start;
}
.company-info-position {
	width: 170px;
    margin-bottom: 24px;
}
.company-info-adviser {
	margin-bottom: 5px;
}
.company-info-name {
	width: calc(100% - 170px);
    margin-bottom: 24px;
}
@media (max-width: 1200px) {
	.company-info-position {
		width: 100%;
	}
	.company-info-position {
		margin-bottom: 5px;
	}
	.company-info-name {
		width: 100%;
    	margin-bottom: 15px;
	}
}

@media (max-width: 768px) {
	.sec-company {
		width: 100%;
		padding: 12vw 0 25vw;
	}
	.company-cont-wrap {
		width: 100%;
	}

	.company-info {
		width: 100%;
	}
	.company-info tr {
		display: flex;
		flex-wrap: wrap;
	}
	.company-info th {
		width: 100%;
		display: block;
		padding: 4vw 0 4vw 2vw;
		border-bottom: none;
		border-top: 1px solid #80a398;
	}
	.company-info td {
		width: 100%;
		display: block;
		padding: 4vw 3vw;
		border-bottom: none;
		border-top: 1px solid #dadada;
	}
	.company-info tr:last-child th, 
	.company-info tr:last-child td {
		border-bottom: none;
	}
	
	.company-info-position, 
	.company-info-adviser {
		width: 100%;
        margin-bottom: 0;
	}
	.company-info-position ~ .company-info-position, 
	.company-info-adviser ~ .company-info-adviser {
		margin-top: 3vw;
	}
	.company-info-name {
		width: 100%;
        margin-bottom: 2.4vw;
	}
}


/*---------- Board member ----------*/
.sec-member {
	width: 100%;
	padding: 0;
	position: relative;
}
.bg-member {
	width: 100%;
	padding: 100px 0 10px;
	background: url("../../img/top/bg_member.jpg") center center no-repeat;
	background-size: cover;
	position: relative;
	overflow: hidden;
}
.sec-member .sec-ttl-en {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto 60px;
	color: #FFFFFF;
	/*position: absolute;
	top: -62px;
	left: 50%;
	transform: translateX(-50%);*/
}

.ceo-ttl-en {
	color: rgba(255, 255, 255, 0.02);
	font-size: 14.1rem;
	line-height: 1.2;
	writing-mode: vertical-lr;
	position: absolute;
	top: 140px;
	right: 0;
	transform: rotate(180deg);
}

/* CEO Message */
.ceo-wrap {
	margin-bottom: 90px;
	justify-content: space-between;
}
.ceo-profile {
	width: 30%;
}
.ceo-photo {
	width: 100%;
	margin-bottom: 30px;
}
.ceo-career-ttl {
	margin-bottom: 25px;
	border-bottom: 1px solid #fff;
	line-height: 1;
}
.ceo-career-ttl span {
	padding: 5px 20px;
	display: inline-block;
	background: #fff;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1;
}
.ceo-career-txt {
	color: #fff;
	font-size: 1.4rem;
	line-height: 2;
}

.ceo-message {
	width: calc(70% - 50px);
	color: #fff;
}
.ceo-message-ttl {
	margin-bottom: 40px;
	padding: 20px 0 30px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	font-size: 2.1rem;
	font-weight: 700;
}
.ceo-message-ttl .txt-dropcap {
	font-size: 150%;
}
.ceo-message-point{
    margin: 20px 0 0;
    font-size: 1.8rem;
    font-weight: bold;
}
.ceo-message-txt {
	font-weight: 500;
	line-height: 2;
}
.ceo-message-txt-small {
    font-size: 1.35rem;
	font-weight: 500;
	line-height: 2;
}

.ceo-message-signature {
	width: 100%;
	margin-top: 60px;
	justify-content: flex-end;
	align-items: center;
}
.signature-date {
	font-size: 1.4rem;
	font-weight: 500;
}
.signature-position {
	margin: 0 20px 0 25px;
	font-size: 1.4rem;
	font-weight: 700;
}
.signature-name {
	font-size: 2.6rem;
	font-weight: 700;
}


/* board member */
.board-member-list {
	width: 100%;
	margin: 0 auto;
	justify-content: flex-start;
}
.board-member-list li {
	width: 30%;
	margin-right: 5%;
	margin-bottom: 80px;
}
.board-member-list li:nth-child(3n) {
	margin-right: 0;
}

.board-member-photo {
	width: 100%;
	margin-bottom: 30px;
}
.board-member-position {
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
}
.board-member-company {
	height: 2.5em;
	margin-top: 10px;
	color: #fff;
	font-size: 1.3rem;
	line-height: 1;
}
.board-member-name {
	width: 100%;
	margin: 10px auto 15px;
	color: #fff;
	font-size: 2.0rem;
}
.board-member-career-ttl {
	margin-bottom: 25px;
	border-bottom: 1px solid #fff;
	line-height: 1;
}
.board-member-career-ttl span {
	padding: 5px 20px;
	display: inline-block;
	background: #fff;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1;
}
.board-member-career-txt {
	color: #fff;
	font-size: 1.4rem;
	line-height: 1.6;
}

@media (max-width: 768px) {
	.sec-member {
		width: 100%;
		padding: 0;
		position: relative;
	}
	.bg-member {
		width: 100%;
		padding: 12vw 0 6vw;
	}
	.sec-member .sec-ttl-en {
        width: 90%;
        max-width: initial;
        margin: 0 auto 8vw;
		/*top: -10.8vw;
		left: 50%;
		transform: translateX(-50%);*/
	}

	.ceo-ttl-en {
		color: rgba(255, 255, 255, 0.04);
		font-size: 22vw;
		position: absolute;
		top: 100vw;
		right: 0;
	}

	/* CEO Message */
	.ceo-wrap {
		margin-bottom: 10vw;
		justify-content: space-between;
	}
	.ceo-profile {
		width: 100%;
		margin-bottom: 8vw;
	}
	.ceo-photo {
		width: 100%;
		margin-bottom: 5vw;
	}
	.ceo-career-ttl {
		margin-bottom: 4vw;
		border-bottom: 1px solid #fff;
		line-height: 1;
	}
	.ceo-career-ttl span {
		padding: 1vw 4vw;
		font-size: 3.6vw;
	}
	.ceo-career-txt {
		font-size: 3.6vw;
	}

	.ceo-message {
		width: 100%;
	}
	.ceo-message-ttl {
		margin-bottom: 6vw;
		padding: 4vw 0 6vw;
		font-size: 4.8vw;
	}
	.ceo-message-ttl .txt-dropcap {
		font-size: 150%;
	}
    .ceo-message-point{
        margin: 5% 0 1%;
        font-size: 4.4vw;
    }
    .ceo-message-txt {
        font-size: 3.8vw;
    }
    .ceo-message-txt-small {
        font-size: 3.4vw;
    }
	

	.ceo-message-signature {
		width: 100%;
		margin-top: 6vw;
		justify-content: flex-end;
		align-items: center;
	}
	.signature-date {
		width: 100%;
		text-align: right;
		font-size: 3.6vw;
	}
	.signature-position {
		margin: 0 4vw 0 auto;
		font-size: 3.6vw;
	}
	.signature-name {
		font-size: 6.6vw;
	}


	/* board member */
	.board-member-list {
		width: 100%;
		margin: 0 auto;
		justify-content: space-between;
	}
	.board-member-list li {
		width: 100%;
		margin-right: 0;
		margin-bottom: 10vw;
	}

	.board-member-photo {
		width: 100%;
		margin-bottom: 5vw;
	}
	.board-member-position {
		font-size: 3.6vw;
	}
	.board-member-company {
		height: auto;
		margin-top: 2vw;
		font-size: 3.2vw;
	}
	.board-member-name {
		margin: 2vw auto 3vw;
		font-size: 4.6vw;
	}
	.board-member-career-ttl {
		margin-bottom: 4vw;
		border-bottom: 1px solid #fff;
		line-height: 1;
	}
	.board-member-career-ttl span {
		padding: 1vw 4vw;
		font-size: 3.6vw;
	}
	.board-member-career-txt {
		font-size: 3.6vw;
	}
    
}


/*---------- Recruit ----------*/
.sec-recruit {
	width: 100%;
	padding: 80px 0;
	background: url("../../img/top/bg_recruit.jpg") center center no-repeat;
	background-size: cover;
	position: relative;
}
.sec-recruit .cont-inn {
	align-items: center;
}
.sec-recruit .sec-ttl-wrap {
	color: #fff;
}
.sec-recruit .sec-ttl-en {
	margin-bottom: 40px;
}
.sec-recruit .sec-ttl-txt {
	font-size: 2.0rem;
	font-weight: 700;
}

.recruit-bnr {
	width: calc(100% - 370px);
	padding: 60px;
	background: url("../../img/top/bg_recruit_bnr.jpg") center center no-repeat;
	background-size: cover;
	border-radius: 40px;
}
.recruit-bnr-txt {
	margin-bottom: 40px;
	font-size: 2.0rem;
	font-weight: 700;
}


@media (max-width: 768px) {
	.sec-recruit {
		width: 100%;
		padding: 12vw 0;
	}
	.sec-recruit .cont-inn {
		align-items: center;
	}
	.sec-recruit .sec-ttl-wrap {
		margin-bottom: 6vw;
	}
	.sec-recruit .sec-ttl-en {
		margin-bottom: 2vw;
	}
	.sec-recruit .sec-ttl-txt {
		font-size: 4.0vw;
	}

	.recruit-bnr {
		width: 100%;
		padding: 6vw;
		background: url("../../img/top/bg_recruit_bnr.jpg") center center no-repeat;
		background-size: cover;
		border-radius: 5vw;
	}
	.recruit-bnr-txt {
		margin-bottom: 8vw;
		font-size: 4.2vw;
	}
    
}



/*---------- Contact----------*/
.sec-contact {
	width: 100%;
	padding: 80px 0;
	background: url("../../img/top/bg_contact.jpg") center center no-repeat;
	background-size: cover;
	position: relative;
}
.sec-contact .cont-inn {
	align-items: center;
}

.sec-contact .sec-ttl-en {
	margin-bottom: 40px;
}
.sec-contact .sec-ttl-txt {
	font-size: 2.0rem;
	font-weight: 700;
}
.sec-contact .btn-contact {
	margin-left: auto;
}

@media (max-width: 768px) {
	.sec-contact {
		width: 100%;
		padding: 12vw 0;
	}
	.sec-contact .cont-inn {
		align-items: center;
	}
	.sec-contact .sec-ttl-wrap {
		margin-bottom: 6vw;
	}

	.sec-contact .sec-ttl-en {
		margin-bottom: 2vw;
	}
	.sec-contact .sec-ttl-txt {
		font-size: 4.0vw;
	}
	.sec-contact .btn-contact {
		margin-left: auto;
	}
    
}