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

/*========================================
上書き
========================================*/
@media screen and (max-width: 750px) {
/*.menuBtn {
animation:menuBtn .4s ease-out 1.2s both;
}*/
}

/*========================================
lowerNav css
========================================*/
.gNavi {
position:absolute;
top: 12%;
right: 8.5%;
z-index:9900;
}
.gNavi li {
font-size: 1.2vw;
line-height: 1.4em;
font-family: 'Cabin', sans-serif;
text-align: right;
margin-bottom: 0.6em;
}
.gNavi li:nth-child(1) {
margin-bottom: 1em;
}
.gNavi li img {
width: 4vw;
}
.gNavi li a {
color: #FFF;
text-decoration: none;
}
.gNavi li a:hover {
text-decoration: underline;
}

/*========================================
bizHeader css
========================================*/
.bizHeader {
width: 100%;
position: relative;
overflow: hidden;
}
.bizHeader .ttl {
height: 100%;
margin: 0 auto;
height: 100%;
z-index: 1;
pointer-events: none;
}
.bizHeader .ttl li {
height: auto;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.bizHeader .ttl li img {
margin: -20px 0 -20px;
animation:ttl 1s ease-out both;
}

.bizHeader .ttl li:nth-child(1) img {
animation-delay: .2s;
}
.bizHeader .ttl li:nth-child(2) img {
animation-delay: .5s;
}
.bizHeader .ttl.top li:nth-child(2) img {
margin: -10px 0 -10px;
}
.bizHeader .ttl.one li:first-child img {
margin: -40px 0 -20px;
}
.bizHeader .ttl.one li:last-child img {
margin: 0 0 -20px;
animation-delay: .2s;
}
@keyframes ttl {
from {transform: translate3d(-50%, 100%, 0) rotate(45deg) scale(0.8,0.8);transform-origin:left top; opacity:0;}
to {transform: translate3d(0, 0%, 0) rotate(0deg) scale(1,1);transform-origin:left top; opacity:1;}
}
/*rightBar*/
.bizHeader .rightBar {
height: 100%;
background-color:#1a1a1a;
animation:rightBar .3s ease-out 1s both;
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
}
.bizHeader .rightBar h2 {
padding: 2em 1.4em 0;
writing-mode: vertical-rl;
font-size: 1.6vw;
line-height: 1.2em;
letter-spacing: 1em;
white-space: nowrap;
color: #FFF;
}
@keyframes rightBar {
from {opacity: 0; transform: translate3d(100%, 0, 0);}
to {opacity: 1; transform: translate3d(0, 0%, 0);}
}
/*sp*/
@media screen and (max-width: 750px) {
.bizHeader .ttl li img {
min-width: 120%;
margin: -2% 0 -2% 20%;
animation:ttl 1s ease-out both;
}
.bizHeader .ttl.top li:nth-child(2) img {
margin: -2% 0 -2% 20%;
}
.bizHeader .ttl.one li:first-child img {
margin: -4% 0 -2% 20%;
}
.bizHeader .ttl.one li:last-child img {
margin: 0 0 -2% 20%;
animation-delay: .2s;
}
.bizHeader .rightBar {
width:34px;
}
.bizHeader .rightBar h2 {
padding:40px 0 0;
writing-mode: vertical-rl;
font-size: 13px;
line-height: 1.2em;
letter-spacing: 0.2em;
white-space: nowrap;
color: #FFF;
}
}

/*========================================
bizTtl css
========================================*/
.bizTtl {
display: flex;
align-items: baseline;
justify-content: center;
padding: 70px 0 50px;
}
.bizTtl .en {
font-family: 'Cabin', sans-serif;
font-size: 55px;
line-height: 1.4em;
white-space: nowrap;
font-weight: 500;
}
.bizTtl .ttl {
display:inline;
min-width: 50px;
text-align: center;
font-size: 13px;
line-height: 1.4em;
font-weight: 500;
color: #FFF;
background-color: #000;
padding: 1px 1em;
margin-left: 15px;
}
/*sp*/
@media screen and (max-width: 750px) {
	.bizTtl {
	padding: 8% 0 8%;
	}
	.bizTtl .en {
	font-family: 'Cabin', sans-serif;
	font-size: 40px;
	line-height: 1.4em;
	font-weight: 500;
	}
	.bizTtl.long {
	width: 100%;
	display: inline-block;
	margin: 0 auto;
	text-align: center;
	}
	.bizTtl.long .en {
	font-family: 'Cabin', sans-serif;
	font-size: 40px;
	line-height: 1em;
	font-weight: 500;
	}
	.bizTtl.long .ttl {
	display: inline-block;
	margin-left: 0;
	margin-top: 2%;
	}
}

/*========================================
read
========================================*/
.business .read {
width: 88%;
max-width: 920px;
margin: 0 auto;
}
.business .read dt {
font-size: 28px;
line-height: 1.4em;
font-weight: bold;
margin-bottom: 1em;
}
.business .read dd {
font-size: 16px;
line-height: 2em;
font-weight: bold;
}
/*SP*/
@media screen and (max-width: 750px) {
	.business .read {
	width: 86%;
	margin: 0 auto;
	}
	.business .read dt {
	font-size: 22px;
	line-height: 1.4em;
	font-weight: bold;
	margin-bottom: 0.6em;
	}
	.business .read dd {
	font-size: 16px;
	line-height: 1.7em;
	font-weight: normal;
	}
}

/*========================================
read
========================================*/
.business .detaCont {
width: calc(92% - 40px);
max-width: 940px;
background-color: #FFF;
margin: 0 auto 40px;
padding: 50px 40px 0;
}
.business .detaCont h3 {
font-size: 38px;
line-height: 1.4em;
font-weight: bold;
text-align: center;
margin-bottom: 0.9em;
}
.business .detaCont .subRead {
padding: 0 80px 60px;
}
.business .detaCont .subRead dt {
font-size: 22px;
line-height: 1.4em;
font-weight: bold;
margin-bottom: 0.6em;
}
.business .detaCont .subRead dd {
font-size: 16px;
line-height: 1.7em;
font-weight: bold;
}

@media screen and (max-width: 1120px) {
.business .detaCont {
width: calc(92% - 80px);
background-color: #FFF;
margin: 0 auto 40px;
padding: 50px 40px 0;
}
}
/*sp*/
@media screen and (max-width: 750px) {
.business .detaCont {
width: 80%;
background-color: #FFF;
margin: 0 auto 6%;
padding: 8% 4% 0;
}
.business .detaCont h3 {
font-size: 24px;
line-height: 1.4em;
margin-bottom: 1em;
}
.business .detaCont .subRead {
padding: 0 5% 8%;
}
.business .detaCont .subRead dt {
font-size: 20px;
line-height: 1.4em;
font-weight: bold;
margin-bottom: 0.6em;
}
.business .detaCont .subRead dd {
font-size: 16px;
line-height: 1.7em;
font-weight: normal;
}
}

/*========================================
Approach
========================================*/
.business .aprc {
width: 100%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: 2%;
}
.business .aprc li {
width:30%;
position: relative;
font-size: 19px;
line-height: 1.5em;
font-weight: bold;
text-align: center;
padding: 1em 0;
margin-bottom: 4%;
display: flex;
justify-content: center;
align-items: center;
}
.business .aprc li:before,
.business .aprc li:after {
content:'';
width: 18%;
height: 80%;
position: absolute;
}
.business .aprc li:before {
border-left: solid 1px #c6c6c6;
border-top: solid 1px #c6c6c6;
top: 0;
left: 0;
}
.business .aprc li:after {
border-right: solid 1px #c6c6c6;
border-bottom: solid 1px #c6c6c6;
bottom: 0;
right: 0;
}

.business .aprc li.delighter {
animation:.4s ease-out both;
opacity: 0;
}
.business .aprc li:nth-child(2) {
animation-delay: 0.1s;
}
.business .aprc li:nth-child(3) {
animation-delay: 0.2s;
}
.business .aprc li:nth-child(4) {
animation-delay: 0.3s;
}
.business .aprc li:nth-child(5) {
animation-delay: 0.4s;
}
.business .aprc li:nth-child(6) {
animation-delay: 0.5s;
}
.business .aprc li.delighter.started {
animation-name: aprc-anime;
}
@keyframes aprc-anime {
0%  { opacity: 0; transform:translate3d(-10%, 10%, 0) rotate(10deg);transform-origin:left top;}
100% { opacity: 1; transform:translate3d(0, 0, 0) rotate(0deg);transform-origin:left top;}
}

/*sp*/
@media screen and (max-width: 750px) {
.business .aprc {
padding-bottom: 6%;
}
.business .aprc li {
width:90%;
font-size: 4vw;
line-height: 1.5em;
margin:0 auto 5%;
}
}

/*========================================
bizIcon
========================================*/
.business .bizIcon {
width: 100%;
margin: 0 auto;
padding-bottom: 20px;
display: flex;
justify-content: center;
}
.business .bizIcon.two {
flex-wrap: wrap;
}
.business .bizIcon li {
width: calc(100% / 5 - 10px);
padding: 0 10px;
margin-bottom: 20px;
}
.business .bizIcon li:nth-child(even) figure {
background-color: #000;
}
.business .bizIcon li p {
font-size: 12px;
line-height: 1.4em;
text-align: center;
padding-top: 1em;
}
.business .bizIcon li p span {
white-space: nowrap;
}
@media screen and (max-width: 1100px) {
.business .bizIcon li p {
font-size: 1vw;
line-height: 1.4em;
text-align: center;
padding-top: 1em;
}
}
/*sp*/
@media screen and (max-width: 750px) {
.business .bizIcon {
width: 92%;
margin: 0 auto;
padding-bottom: 4%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.business .bizIcon li {
width: calc(100% / 2 - 10px);
padding: 0;
margin-bottom: 4%;
}
.business .bizIcon li p {
font-size: 2.5vw;
line-height: 1.4em;
text-align: center;
padding-top: 0.5em;
}
.business .bizIcon li p span {
white-space: pre-wrap;
}
}

/*========================================
bizBnr
========================================*/
.bizBnr {
max-width: 1020px;
background-color: #FFF;
margin: 0 auto 40px;
}
.bizBnr a {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-end;
color: #333;
text-decoration: none;
}
.bizBnr a:hover {
opacity: 0.7;
}
.bizBnr dl {
padding: 0 0 10px 20px;
}
.bizBnr dt {
font-size: 18px;
line-height: 1.4em;
font-weight: bold;
}
.bizBnr dd {
font-size: 40px;
line-height: 1.4em;
font-weight: bold;
}
.bizBnr figure {
width: 20%;
padding: 2px;
}
@media screen and (max-width: 1100px) {
.bizBnr {
width: 92%;
background-color: #FFF;
margin: 0 auto 40px;
}
.bizBnr dt {
font-size: 1.6vw;
line-height: 1.4em;
}
.bizBnr dd {
font-size: 3.6vw;
line-height: 1.4em;
}
}
/*SP*/
@media screen and (max-width: 750px) {
.bizBnr {
width: 88%;
background-color: #FFF;
margin: 0 auto 6%;
}
.bizBnr a {
display: flex;
justify-content: space-between;
align-items:  center;
}
.bizBnr dl {
padding: 0 0 0 5%;
}
.bizBnr dt {
font-size: 1.8vw;
line-height: 1.4em;
}
.bizBnr dd {
font-size: 4.4vw;
line-height: 1.2em;
}
.bizBnr figure {
width: 35%;
padding: 2px;
}
}

/*========================================
bizIndex
========================================*/
.business .bizTopOnly {
display: none;
}
.business .leaning {
margin: 14% 0 0;
padding: 0;
position: relative;
z-index: 0;
}
.bizIndex {
padding: 60px 0 0;
}
.bizIndex .inner {
width: 100%;
position: relative;
}

.bizIndex ul {
width: calc(90% + 60px);
max-width: 1020px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.bizIndex li {
width: calc(100% / 2 - 25px);
margin: 0 0 40px;
}
.bizIndex li a {
display: flex;
justify-content: space-between;
color: #333;
text-decoration: none;
}
.bizIndex li .bizTmb {
width: 40%;
max-width: 220px;
height: 140px;
background-color: #f3f3f3;
overflow: hidden;
position: relative;
z-index: 9000;
}
.bizIndex li .bizTmb p {
position: absolute;
bottom: 8%;
left: 6%;
font-size: 2.7vw;
line-height: 1em;
font-weight: bold;
font-family: 'Cabin', sans-serif;
}
@media screen and (min-width: 1000px) {
	.bizIndex li .bizTmb p {
	bottom: 15px;
	left: 15px;
	font-size: 26px;
	}
}
.bizIndex li .bizTmb a {
width: 100%;
height: 100%;
display: block;
color: #1a1a1a;
text-decoration: none;
}
.bizIndex li .bizTmb .pac {
pointer-events: none;
display:flex;
align-items: center;
justify-content: center;
white-space: nowrap;
height: 200px;
position: absolute;
top:0px;
left:0;
}
.bizIndex li .bizTmb .pac img {
height: 200px;
}
.bizIndex li:nth-child(1) .bizTmb .pac  {
animation:slider1 5s linear infinite;
width: 300px;
}
@keyframes slider1 {
0% { left:0;}
100% { left:-300px;}
}
.bizIndex li:nth-child(2) .bizTmb .pac  {
animation:slider2 10s linear infinite;
width: 720px;
}
@keyframes slider2 {
0% { left:0;}
100% { left:-720px;}
}
.bizIndex li:nth-child(3) .bizTmb .pac  {
animation:slider3 10s linear infinite;
width: 410px;
}
@keyframes slider3 {
0% { left:0;}
100% { left:-410px;}
}
.bizIndex li:nth-child(4) .bizTmb .pac  {
animation:slider4 10s linear infinite;
width: 1190px;
}
@keyframes slider4 {
0% { left:0;}
100% { left:-1190px;}
}
.bizIndex li:nth-child(5) .bizTmb .pac  {
animation:slider5 20s linear infinite;
width: 1220px;
}
@keyframes slider5 {
0% { left:0;}
100% { left:-1220px;}
}
.bizIndex li:nth-child(6) .bizTmb .pac  {
animation:slider6 20s linear infinite;
width: 1180px;
}
@keyframes slider6 {
0% { left:0;}
100% { left:-1180px;}
}
.bizIndex li:nth-child(7) .bizTmb .pac  {
animation:slider7 15s linear infinite;
width: 740px;
}
@keyframes slider7 {
0% { left:0;}
100% { left:-740px;}
}
.bizIndex li:nth-child(8) .bizTmb .pac  {
animation:slider8 15s linear infinite;
width: 1290px;
}
@keyframes slider8 {
0% { left:0;}
100% { left:-1290px;}
}
.bizIndex li dl {
width: 57%;
padding: 0 0 0 3%;
}
.bizIndex li dt {
font-size: 22px;
line-height: 1.2em;
font-weight: bold;
height: 2.5em;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0.5em 0 0.4em;
}
.bizIndex li dd {
font-size: 12px;
line-height: 1.4em;
}

/*SP*/
@media screen and (max-width: 750px) {
	.bizIndex {
	padding: 4% 0 1%;
	}
	.bizIndex.top {
	padding-top: 8%;
	}
	.bizIndex .inner {
	width: 88%;
	margin: 0 auto;
	position: relative;
	}
	.bizIndex ul {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	display: block;
	}
	.bizIndex li {
	width: 100%;
	margin: 0 0 4%;
	}
	.bizIndex li .bizTmb {
	width: 38%;
	max-width: 38%;
	height: 120px;
	background-color: #f3f3f3;
	overflow: hidden;
	position: relative;
	z-index: 9000;
	}
	.bizIndex li .bizTmb p {
	position: absolute;
	bottom: 8%;
	left: 6%;
	font-size: 4.5vw;
	line-height: 1em;
	font-weight: bold;
	}
	.bizIndex li .bizTmb .pac img {
	height: 160px;
	}
	.bizIndex li:nth-child(1) .bizTmb .pac  {
	animation:slider1 5s linear infinite;
	width: 300px;
	}
	@keyframes slider1 {
	0% { left:0;}
	100% { left:-300px;}
	}
	.bizIndex li:nth-child(2) .bizTmb .pac  {
	animation:slider2 10s linear infinite;
	width: 720px;
	}
	@keyframes slider2 {
	0% { left:0;}
	100% { left:-720px;}
	}
	.bizIndex li:nth-child(3) .bizTmb .pac  {
	animation:slider3 10s linear infinite;
	width: 410px;
	}
	@keyframes slider3 {
	0% { left:0;}
	100% { left:-410px;}
	}
	.bizIndex li:nth-child(4) .bizTmb .pac  {
	animation:slider4 10s linear infinite;
	width: 1190px;
	}
	@keyframes slider4 {
	0% { left:0;}
	100% { left:-1190px;}
	}
	.bizIndex li:nth-child(5) .bizTmb .pac  {
	animation:slider5 20s linear infinite;
	width: 1220px;
	}
	@keyframes slider5 {
	0% { left:0;}
	100% { left:-1220px;}
	}
	.bizIndex li:nth-child(6) .bizTmb .pac  {
	animation:slider6 10s linear infinite;
	width: 1180px;
	}
	@keyframes slider6 {
	0% { left:0;}
	100% { left:-1180px;}
	}
	.bizIndex li:nth-child(7) .bizTmb .pac  {
	animation:slider7 15s linear infinite;
	width: 740px;
	}
	@keyframes slider7 {
	0% { left:0;}
	100% { left:-740px;}
	}
	.bizIndex li:nth-child(8) .bizTmb .pac  {
	animation:slider8 10s linear infinite;
	width: 1290px;
	}
	@keyframes slider8 {
	0% { left:0;}
	100% { left:-1290px;}
	}
	.bizIndex li:hover img {
	filter: none;
	}
	.bizIndex li dl {
	width: calc(62% - 10px);
	padding: 0 0 0 10px;
	}
	.bizIndex li dt {
	font-size: 20px;
	line-height: 1.2em;
	font-weight: bold;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0.1 0 0.8em;
	}
	.bizIndex li dd {
	font-size: 12px;
	line-height: 1.4em;
	}
}


/*========================================
bizContactLink
========================================*/
.bizContactLink {
width: calc(90% + 60px);
max-width: 1020px;
margin: 40px auto;
border-top: #c6c6c6 1px solid;
border-bottom: #c6c6c6 1px solid;
padding: 30px 0 35px;
}
.bizContactLink dl {
text-align: center;
}
.bizContactLink dt {
font-size: 28px;
line-height: 1.4em;
font-weight: bold;
margin-bottom: 0.5em;
}
.bizContactLink dd p {
font-size: 16px;
line-height: 1.7em;
font-weight: bold;
margin-bottom: 1.5em;
}
.bizContactLink .bizBtn {
width: 260px;
margin: 0 auto 0;
position: relative;
}
.bizContactLink .bizBtn a {
width: 100%;
background-color: #1a1a1a;
border: none;
color: #FFF;
font-size: 14px;
line-height: 1.4em;
text-align: center;
font-weight: bold;
padding: 1.2em 0;
text-decoration: none;
}
.bizContactLink .bizBtn .moreArw {
width: calc(100% - 15px);
text-align: right;
position: absolute;
right: 18px;
top: 18px;
pointer-events: none;
}
.bizContactLink .bizBtn .moreArw span {
display: inline-block;
width: 40px;
height: 8px;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
transform: skew(45deg);
}
.bizContactLink .bizBtn:hover .moreArw {
position: absolute;
right: 10px;
top: 18px;
}
.bizContactLink .bizBtn .moreArw,
.bizContactLink .bizBtn .moreArw::before,
.bizContactLink .bizBtn .moreArw::after { 
-webkit-transition: all .4s;
transition: all .4s;
}
/*SP*/
@media screen and (max-width: 750px) {
	.bizContactLink {
	width: 100%;
	margin: 6% auto;
	border-top: #c6c6c6 1px solid;
	border-bottom: #c6c6c6 1px solid;
	padding: 6% 0 7%;
	}
	.bizContactLink dl {
	text-align: center;
	padding: 0 5%;
	}
	.bizContactLink dt {
	font-size: 22px;
	line-height: 1.4em;
	font-weight: bold;
	margin-bottom: 0.5em;
	}
	.bizContactLink dd p {
	font-size: 15px;
	line-height: 1.5em;
	font-weight: normal;
	margin-bottom: 1.2em;
	text-align: left;
	}
	.bizContactLink .bizBtn {
	width: 80%;
	max-width: 260px;
	margin: 5% auto 0;
	position: relative;
	}
	.bizContactLink .bizBtn a {
	width: 100%;
	background-color: #1a1a1a;
	border: none;
	color: #FFF;
	font-size: 14px;
	line-height: 1.4em;
	text-align: center;
	font-weight: bold;
	padding: 1.2em 0;
	}
	.bizContactLink .bizBtn .moreArw {
	width: calc(100% - 15px);
	text-align: right;
	position: absolute;
	right: 18px;
	top: 18px;
	}
	.bizContactLink .bizBtn .moreArw span {
	display: inline-block;
	width: 40px;
	height: 8px;
	border-bottom: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	transform: skew(45deg);
	}
	.bizContactLink .bizBtn:hover .moreArw {
	position: absolute;
	right: 10px;
	top: 18px;
	}
}

/*========================================
backBtn
========================================*/
.business .bizBackBtn {
width: 240px;
border: #333 1px solid;
margin: 0 auto;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.business .bizBackBtn a {
width: 100%;
height: 100%;
padding: 9px 0;
font-size: 14px;
line-height: 1.4em;
color: #333;
text-decoration: none;
text-align: center;
}
.business .bizBackBtn .backArw {
width: calc(100% - 15px);
text-align: left;
position: absolute;
left: 20px;
top: 8px;
pointer-events: none;
}
.business .bizBackBtn .backArw span {
display: inline-block;
width: 48px;
height: 8px;
border-bottom: 1px solid #1a1a1a;
border-left: 1px solid #1a1a1a;
transform: skew(-45deg);
}
.business .bizBackBtn:hover .backArw {
left: 10px;
}
.business .bizBackBtn .backArw,
.business .bizBackBtn .backArw::before,
.business .bizBackBtn .backArw::after { 
-webkit-transition: all .4s;
transition: all .4s;
}