/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: 'Lato', sans-serif !important; overflow-x: hidden; position: relative; background: #000;}
img {	border:0; }

/* Reset ================================================================================= */

a { text-decoration:none; transition: all 0.4s ease-out 0s; }
a:hover { text-decoration:none; }

* { box-sizing: border-box;}

.content-Box { max-width:1300px; width: 100%; margin:0 auto; text-align:left; position:relative; clear:both;}

#content { font-size: 16px; line-height:1.5; color: #fff; letter-spacing: 0; font-weight: 400; padding-top: 0px; position: relative;}
#content p{ margin-bottom: 30px; margin-top: 0; font-size: 16px;line-height:1.5;  font-weight: 400;}
p, td, li, label { font-size: 16px;line-height:1.5;  font-weight: 400;}

.photo-fit img { object-fit: cover; width: 100%; height: 100%; position: absolute; z-index: 1; left: 0; top: 0;}

.photo {line-height: 0; height: 0; padding-bottom: 40%; overflow: hidden; position: relative; z-index: 1; margin-bottom: 0px;}
.imgCenter {position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; z-index: 2;}
.imgCenter img {max-height: 100%;}

.main-content-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -3; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around;}
.main-content-bg > div { background: #ededed; width: 1px;}

.demo-section { padding-left: 5%; padding-right: 5%;}

.banner { position: relative;}
.banner-pc {}
.banner-mobile { display: none !important;}
.loop .owl-dots { }
.loop .owl-item {position: relative; }
.loop .owl-nav { position: absolute; top:calc(50% - 40px); width: 100%; z-index: 11;}
.loop .owl-prev, .loop .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); background:none !important;}
.loop .owl-prev { left:30px; }
.loop .owl-next { right:30px;}
.loop .owl-prev:before, .loop .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 0.5;transition: all 0.4s ease-out 0s;width: 35px; height: 35px; background-size: contain; display: block; border-width: 2px 2px 0 0; border-style: solid; border-color: #fff;}
.loop .owl-prev:before { content: ""; transform: rotate(-135deg); }
.loop .owl-next:before { content: ""; transform: rotate(45deg);}
.loop .owl-prev:hover:before, .loop .owl-next:hover:before { opacity: 1;}
.loop .owl-stage-outer {z-index: 2;}
.loop .owl-dots { position: absolute; z-index: 100; bottom: 5%; width: 100%; text-align: left !important; padding: 0 10%; }
.loop .owl-dots .owl-dot span, .loop  .owl-dots .owl-dot span { background: #d6d6d6 !important; width: 10px !important; height: 10px !important;}
.loop .owl-dots .owl-dot.active span, .loop  .owl-dots .owl-dot:hover span { background: #71c7d1 !important; }

.banner-scroll { position: absolute; z-index: 5; left: 50%; transform: translateX(-50%);bottom: 60px; width: 130px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center;}
.banner-scroll > span { position: relative; overflow: hidden; width: 2px; height: 76px; background: #fff;  display: block; margin-bottom: 18px;}
.banner-scroll > span:after { position: absolute; content: ""; left: 0; width: 2px; height: 38px; background: #b29763; animation-name: line-animate;animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; display: block;}
.banner-scroll > div { font-weight: 700; color: #fff; font-size: 16px; cursor: pointer; text-transform: uppercase; line-height: 1.3;}

@keyframes line-animate {
  0% {
    top:-100%;
  }

  100% {
    top: 100%;
  }
}

.idx-about-section {padding: calc(20px + 4%) 10% calc(20px + 4%) 0%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.idx-about-section > div { width: 50%;}
.idx-about-section > div:nth-of-type(1) img { width: 100%;}
.idx-about-section > div:nth-of-type(2) { padding-left: 6%;}

.title-01 { padding-bottom:calc(20px + 1%); font-size: clamp(25px, 3.5vw, 48px); font-weight: 700; color: #fff; line-height: 1.2;}
.title-01 span { font-weight: 900; color: #b29763;}

.title-02 { font-weight: 700; font-size:clamp(20px, 1.5vw, 28px); padding: 0 0 calc(10px + 1%) 0; margin: 0; line-height: 1.4; color: #71c7d1; }

.line-type-1 { position: relative; width: 130px; height: 2px; background: #b29763; margin: calc(10px + 1%) 0  calc(25px + 2%) 0;}
.line-type-1:before, .line-type-1:after { position: absolute; content: ""; background: #b29763; border-radius: 100%; top:50%; transform: translateY(-50%);}
.line-type-1:before { left: 0; width: 10px; height: 10px;}
.line-type-1:after { left: 47px; width: 8px; height: 8px;}

.idx-solution-section { background: url("../images/idx-solution-bg.jpg") no-repeat center center / cover; padding: calc(20px + 4%) 5%; overflow-x:hidden;}
.idx-solution-top-section { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 2%);}
.idx-solution-top-section > div:nth-of-type(1) .line-type-1 { margin-top: 0;}
.idx-solution-top-section > div:nth-of-type(1) { width: 40%;}
.idx-solution-top-section > div:nth-of-type(2) { width: 60%;}

.idx-solution-list { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; }
.idx-solution-list > a { position: relative;}
.idx-solution-list > a:nth-of-type(1) { margin-left: 0 !important;}
.idx-solution-list > a:nth-child(even) { margin-left: -140px;}
.idx-solution-list > a:nth-child(odd) { margin-left: -120px;}
.idx-solution-list > a:nth-child(even) { margin-top: 270px;}
.idx-solution-list > a:nth-child(odd):before { content: ""; position: absolute; left: 44px; bottom: -45px; width: 2px; height: 45px; background: #b29763;}
.idx-solution-list > a:nth-child(odd):after { content: ""; position: absolute; left: 37.5px; bottom: -5px; width: 15px; height: 15px; border-radius: 100%; background: #b29763;}
.idx-solution-list > a:nth-child(even):before { content: ""; position: absolute; left: 44px; top: -45px; width: 2px; height: 45px; background: #b29763;}
.idx-solution-list > a:nth-child(even):after { content: ""; position: absolute; left: 37.5px; top: -5px; width: 15px; height: 15px; border-radius: 100%; background: #b29763;}
.idx-solution-list:before { position: absolute; content: ""; top:50%; transform: translateY(-50%); right: 0; height: 2px; width: 500%; background: #b29763;}
.idx-solution-list:after { position: absolute; content: ""; top:50%; transform: translateY(-50%); right: 0; height: 20px; width: 20px; border-radius: 100%; background: #b29763;}
.idx-solution-item { width: 295px; min-height: 180px; position: relative; border-radius: 40px 0 40px 20px; background: #313131; box-shadow:inset 0px 5px 0px 0 #666666, inset 0px -2px 0px 0 #b29763; padding: 20px 20px;}
.idx-solution-item:nth-child(even) { box-shadow:inset 0px 2px 0px 0 #b29763, inset 0px -5px 0px 0 #666666;}
.idx-solution-item-title { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between;}
.idx-solution-item-title > div:nth-of-type(1) { font-weight: 700;font-size: clamp(22px, 2vw, 32px); padding-right: 44px; position: relative; background: url("../images/item-arrow.png") no-repeat right center / 26px 24px; line-height: 1;}
.idx-solution-item-title > div:nth-of-type(2) img { max-width: 72px;}
.idx-solution-item-data { position: absolute; left: 20px; bottom: 20px; width: calc(100 - 40px);}
.idx-solution-item-data > div { position: relative; padding-left: 16px; background: url("../images/item-dot.png") no-repeat left center / 5px 16px ; color: #bfbfbf; font-weight: 700; font-size: 18px; line-height: 1.2; margin-bottom: 5px;}

.idx-link-section { background: url("../images/idx-link-bg.jpg") no-repeat top center #000 ; background-size: 100%; padding: calc(20px + 5%) 5%;}
.idx-link-section .title-01 { text-align: center;}
.idx-link-list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-top: calc(10px + 1.5%);}
.idx-link-list > a { width: 31.5%; background: #313131; overflow: hidden; border-radius: 40px 0; box-shadow:inset 0px -5px 0px 0 #71c7d1;}
.idx-link-list > a:hover { transform: scale(1.03); }
.idx-link-list > a:hover .idx-link-list-pto img { transform: scale(1.05); filter: brightness(50%);}
.idx-link-list > a:hover .idx-link-list-btn > span { transform: scaleX(0);}
.idx-link-list > a:hover .idx-link-list-btn > div { color: #71c7d1;}
.idx-link-list-pto { padding-bottom: 103%;}
.idx-link-list-pto img { transition: transform 2s ease-out 0s, filter 0.5s ease-out 0s; }
.idx-link-list-data { padding: 25px 25px 30px 25px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center;}
.idx-link-list-name { font-weight: 700; font-size:clamp(20px, 1.5vw, 28px); line-height: 1.3; padding-bottom: 20px;}
.idx-link-list-btn { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center;}
.idx-link-list-btn > span { width: 44px; height: 2px; background: #fff; display: inline-block;transition: all 0.2s ease-out 0s;}
.idx-link-list-btn > span:nth-of-type(1) { transform-origin: 100% 50%;}
.idx-link-list-btn > span:nth-of-type(2) { transform-origin: 0% 50%;}
.idx-link-list-btn > div { font-size: 16px; padding: 0 12px; line-height: 1;transition: all 0.2s ease-out 0s; text-align: center;}


@media only screen and (max-width: 1279px) {
	#content { }
	#content, #content p, p, td, li, label { font-size: 15px; }

	.banner-scroll { display: none;}
	
	.idx-about-section {padding-right: 0;}
	.idx-about-section > div:nth-of-type(2) { padding-left: 5%; padding-right: 5%;}
	
	.idx-link-section { background: url("../images/idx-link-bg.jpg") no-repeat top center #000; background-size: 100% 70%;}
	

	.idx-solution-top-section > div:nth-of-type(1) { width: 100%; text-align: center;}
	.idx-solution-top-section > div:nth-of-type(1) .line-type-1 { margin-left: auto; margin-right: auto; margin-bottom: 20px;}
	.idx-solution-top-section > div:nth-of-type(2) { width: 100%; text-align: center;}
	
	.idx-solution-list { flex-wrap: wrap; justify-content: space-between;}
	.idx-solution-list > a { width: 32%; margin-bottom: 20px;}
	.idx-solution-list > a { margin-left: 0 !important;}
	.idx-solution-list > a:nth-child(even) { margin-top: 0px;}
	.idx-solution-list:before, .idx-solution-list:after,  .idx-solution-list > a:before, .idx-solution-list > a:after { display: none;}
}

@media only screen and (max-width: 980px) {
	.banner-pc { display: none !important}
	.banner-mobile { display: block !important;}
	
	.idx-solution-list > a { width: 48.5%;}
}
@media only screen and (max-width: 768px) {
	.idx-about-section > div { width: 100%;}
	.idx-about-section > div:nth-of-type(1) { padding-bottom: 30px;}
	
	.idx-solution-list > a { width: 100%;}
	.idx-solution-item-data > div { font-size: 15px;}
	
}
@media only screen and (max-width: 640px) {
	.idx-link-section { background: url("../images/idx-link-bg.jpg") no-repeat top center #000; background-size:auto;}
	.idx-link-list > a { width: 100%; margin-bottom: 25px;}
	
	
}
@media only screen and (max-width: 570px) {
	
}

@media only screen and (max-width: 414px) {
	

}

@media only screen and (max-width: 320px) {
	

}