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

.contents{
    max-width: inherit;
    padding: inherit;
}
.prologueArea{
    margin: auto;
}
.mainArea section > .cntBox{
    max-width: 1130px;
    margin: 0 auto;
}
::selection {
    background-color: #ff6633;
    color: #fff;
}

/****************************
prologueArea 
****************************/
.prologueArea {
	position: relative;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	min-height: 600px;
}
.prologueArea p{
	margin:auto;
	padding-top: 40px;
}
.prologueArea p > br{
	display:none;
}
.prologueArea p.splrg {
	font-size: 3.4vw !important;
	line-height: 120% !important;
}
.prologueArea .guideArw {
	width:28px;
	height:16px;
	background-image:url("../img/common/icn_arw_down.png");
	background-repeat:no-repeat;
	background-position:top left;
	background-size:contain;
	margin-bottom: 40px;
}

/****************************
services 
****************************/
.services{
    background: #333;
    color: #FFF;
    text-align: center;
    padding: 80px 0;
    margin-bottom: 80px;
}
.services h3{
    margin-bottom: 20px;
}
.services .cntBox{
    padding: 0;
    padding: 0 1%;
}
.servicesBnr ul li a{
    color: #FFF;
}
.servicesBnr ul li a.svBnr1 {
    background-image:url("../img/top/bnr_spider_hover.png");
    background-repeat:no-repeat;
    background-position:top left;
    background-size:contain;
}
.servicesBnr ul li a.svBnr2 {
    background-image:url("../img/top/bnr_ordr_hover.png");
    background-repeat:no-repeat;
    background-position:top left;
    background-size:contain;
}
.servicesBnr ul li a.svBnr3 {
    background-image:url("../img/top/bnr_madison_hover.png");
    background-repeat:no-repeat;
    background-position:top left;
    background-size:contain;
}
.servicesBnr ul li p{
    padding-top:12px;
}
.servicesBnr ul li p.reg{
	font-size:14px !important;
	font-size:1.4rem !important;
	line-height:28px !important;
	line-height:2.8rem !important;
}
.servicesBnr ul li p em{
    display:block;
    font-style:normal;
	line-height:2rem !important;
}

/****************************
google map 
****************************/
.gmap {
    position: relative;
    width: 100%;
    padding-top: 100%;
    height: 0;
}

.gmap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 1199px) {
.prologueArea {
	height: 70vh;
}
}

@media screen and (max-width: 879px) {
.mainArea section{
    padding-left:5%;
	padding-right:5%;
}
.mainArea section.services{
    padding-left:0;
	padding-right:0;
}
/****************************
prologueArea 
****************************/
.prologueArea {
    max-width: 1130px;
    height: 50svh;
}
.prologueArea p > br{
	display:block;
}
.prologueArea p.splrg {
	font-size: 7vw !important;
	padding:8%;
}
.prologueArea .guideArw {
    width: 14px;
    height: 8px;
    margin-left: -7px;
    background-image: url("../img/common/icn_arw_down_sp.png");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: contain;
    position: absolute;
    bottom: 24px;
    left: 50%;
}
/****************************
services 
****************************/
.services{
    text-align: center;
    padding: 40px 0;
}
.prologueArea .textArea {
    width: 70%;
}
.services .cntBox{
    padding: 0 5%;
}
}


/****************************
animation 
****************************/
.fade-in-sc {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease-out, transform .3s ease-out;
  transition-delay: calc(var(--delay) * .3s);
}

.fade-in-sc.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in01 {
   animation-name: fade-in01;
   animation-duration: 1s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}
@keyframes fade-in01 {
   0% {
      opacity: 0;
      transform: translateY(20px);
   }
   100% {
      opacity: 100;
      transform: translateY(0);
   }
}
.fade-in02 {
   animation-name: fade-in02;
   animation-duration: 1.2s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}
@keyframes fade-in02 {
   0% {
      opacity: 0;
      transform: translateY(20px);
   }
   10% {
      opacity: 0;
      transform: translateY(20px);
   }
   100% {
      opacity: 100;
      transform: translateY(0);
   }
}
.fade-in03 {
   animation-name: fade-in03;
   animation-duration: 1.4s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}
@keyframes fade-in03 {
   0% {
      opacity: 0;
      transform: translateY(20px);
   }
   20% {
      opacity: 0;
      transform: translateY(20px);
   }
   100% {
      opacity: 100;
      transform: translateY(0);
   }
}
.fade-in04 {
   animation-name: fade-in04;
   animation-duration: 1.6s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}
@keyframes fade-in04 {
   0% {
      opacity: 0;
      transform: translateY(20px);
   }
   30% {
      opacity: 0;
      transform: translateY(20px);
   }
   100% {
      opacity: 100;
      transform: translateY(0);
   }
}
.fade-in05 {
   animation-name: fade-in05;
   animation-duration: 1.8s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}
@keyframes fade-in05 {
   0% {
      opacity: 0;
      transform: translateY(20px);
   }
   40% {
      opacity: 0;
      transform: translateY(20px);
   }
   100% {
      opacity: 100;
      transform: translateY(0);
   }
}