@charset "UTF-8";

@import url("define.css");


/****************************************************************
  common
****************************************************************/
:root {
  --mb-bar-spacing:7px !important;
  --mb-button-size:70px !important;
  --mb-bar-width:0.4 !important;
  --mb-bar-height:2px !important;
  --mm-max-size: 280px!important;
}

@media screen and (max-width: 768px)
{
  :root {
    --mb-button-size:60px !important;
  }
}
/****************************************************************
  comon
****************************************************************/

html{
    font-size: 62.5%;
}

.sul-document{
}
body {
  font-size:        1.6rem;
  font-family:      var(--global--font-primary);
  font-weight:      300;
  line-height:      var(--global--line-height);
}

main {
  margin-top: 7rem;
}

main.full {
  margin-top: 0;
}

h1, .h1, .headline {
  font-size: 4rem;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 1.8rem;
}

h2, .h2, .title {
  font-size: 3.0rem;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 1.5rem;
}

h3, .h3, .subheader {
  font-size: 2.0rem;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 1rem;
}
h4, .h4{
  font-size: 1.8rem;
  font-weight: 500;
}
h5, .h5{
  
}
input[type="radio"]{
  transform: scale(1.5);
}


.btn, .btn:focus, .btn:visited {
  line-height: 1;
  padding: 1.5rem 3rem;
}
.btn.wire{
  border: solid 1px var(--global--color-secondary)!important;
}
.btn.wire:hover, .btn.wire.active {
  background-color:  var( --global--color-secondary);
  color: white;
}
.btn.wire:hover *, .btn.wire.active * {
  color: white!important;
}

.hide{
  display: none;
}

.tag-category{
  font-size:1.3rem;
  font-weight: 400;
  line-height:1;
  background: #F2F2F2;
  padding: 4px 15px;
  border-radius: 20px;
}

@media screen and (max-width: 768px)
{
  main {
    margin-top: 6rem;
  }
  body {
    font-size:        1.4rem;
  }
  h1, .h1, .headline {
    font-size: 3rem;
    margin-bottom: 1.8rem;
  }
  
  h2, .h2, .title {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
  }
  
  h3, .h3, .subheader {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }
  h4, .h4{
    font-size: 1.6rem;
  }
  .tag-category{
    font-size:1.2rem;
    padding: 4px 15px;
    border-radius: 20px;
  }
  .btn, .btn:focus, .btn:visited {
    padding: 1.5rem 2rem;
  }
}

/****************************************************************
  header
****************************************************************/
header{
  position: relative;
  height:70px;
  border-bottom: 1px solid var(--global--color-more-light-gray);
}

.sul-sp-navigation{
  display: block;
}

.mburger b {
  border-radius: 0!important;
}
.header-logo{
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 5px;
  margin: auto;
}
.btn-project{

}
header.sul-header.fixed {
  transition: 0.3s;
  z-index: 100;
}
header.sul-header.fixed.full{
  background:transparent;
  border: none;
}
header.sul-header.fixed.full .header-logo{
  display: none;
}
header.sul-header.fixed.active {
  background:white;
  transition: 0.3s;
  top: -100px;
}
header.sul-header.fixed.active .header-logo{
  display: inline-block;
}

header.sul-header.fixed.active.open{
  top: 0px;
}

#sp-navigation-menu--left{
  display: none;
}
.mm-navbar__title,
.mm-listitem__text{
  font-weight: 400;
}
@media screen and (max-width: 768px)
{
  header{
    height:60px;
  }
  .btn-project{
  }
  .header-logo{
    width:160px;
    bottom: 3px;
  }
}

/****************************************************************
  footer
****************************************************************/
footer{
  margin-top: 10rem;
  position: relative;
  background: var(--global--color-gray);
  font-size: 1.4rem;
}
.company-caption{
  font-size:1.3rem;
}
footer ul li{
  margin-bottom: 1rem;
}
.footer-menu li{
  font-weight: 500;
}
footer .service-menu-title{
  font-size: 1.2rem;
  font-weight: 500;
}
footer .service-menu-caption{
  font-size: 1.2rem;
  color: #7D7D80;
}
footer ul li a:hover,
footer .service-menu-title:hover,
footer .service-menu-caption a:hover{
  text-decoration: underline;
}

.btn-backtotop{
  background: white;
  border:1px solid var( --global--color-secondary);
  position:absolute;
  top: -100px;
  right: calc( 50vw - 550px );
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-backtotop > img{
  width: 38%;
}

#account-block{
  position:fixed;
  bottom: -300px;
  right: 0;
  width: 300px;
  height: auto;
  background: rgba(230,230,230,0.8);
  /*box-shadow: 0 0 15px gainsboro;*/
  transition: 0.3s;
}
#account-block.active.open{
  bottom: 0;
  transition: 0.3s;
}
@media screen and (max-width: 1100px)
{
  .btn-backtotop{
    right: 2rem;
  }
}
@media screen and (max-width: 768px)
{
  footer{
    margin-top: 5rem;
    font-size:1.3rem;
  }
  footer .logo{
    width: 120px;
  }
  footer .service-menu-title{
    font-size: 1.1rem;
  }
  footer .service-menu-caption{
    font-size: 1.1rem;
  }
  .btn-backtotop{
    width: 50px;
    height: 50px;
  }
}
@media screen and (max-width: 480px)
{
  #account-block{
    background: rgba(230,230,230,0.8);
    left: 0;
    width: 100%;
    height: auto;
  }
}

/****************************************************************
  KV
****************************************************************/

#kv{
  background:var(--global--color-gray);
  height: auto;
  min-height: 200px;
}
#kv > .container{
  min-height: 200px;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content:space-between;
}
#kv h1{
  margin: 0;
  font-size:4rem;
}



@keyframes fuwafuwa {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@media screen and (max-width: 768px)
{
  #kv{
    min-height: 175px;
  }

  #kv > .container{
    flex-direction: column;
    justify-content:center;

  }
  #kv h1{
    font-size:2.8rem;
    margin-bottom: 2rem;
  }
  #kv .kv-caption{
    text-align: center;
  }
}

/****************************************************************
  information
****************************************************************/
.info-list{
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  grid-auto-rows: minmax( calc( 250px + 5rem + 1rem + 2rem ) , auto);

}
.info-thumbnail{
  position: relative;
  grid-column-end: span 1;
  grid-row-end: span 1;
  /*border: 1px solid blue;*/
}

.info-thumbnail.large{
  grid-column-end: span 2;
  grid-row-end: span 2;
}

.info-thumbnail-img-block{
  overflow: hidden;
  width: 100%;
  height: 260px;
  margin-bottom: 5px;
}
.large .info-thumbnail-img-block{
  width: 100%;
  height: 100%;
}
.info-thumbnail-img-block img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: 0.2s;
}
.info-thumbnail:hover .info-thumbnail-img-block img{
  transform: scale(1.1,1.1);
  transition: 0.2s;
}
.info-thumbnail-title{
  font-size:1.5rem;
  font-weight:500;
  line-height:1.3;
  margin-bottom: 1rem;
/*
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
*/
}
.info-cate-block{
  display: flex;
  justify-content:space-between;
  align-items:center;
}
.info-post-date{
  font-size:1.4rem;
}
.info-cate{
  display: inline-block;
  font-size:1.3rem;
  line-height:1;
  background: #F2F2F2;
  padding: 4px 15px;
  border-radius: 20px;
}

.large .info-caption-block{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  padding: 10rem 2rem 2rem 2rem;
  background: linear-gradient(rgba(20,20,20,0),rgba(20,20,20,0.8));
}
.large .info-thumbnail-title,
.large .info-post-date,
.large .info-cate
{
  color: white;
  background: transparent;
}
.large .info-thumbnail-title{
  font-size:2.2rem;
  line-height:1.6;
}

.btn-sns{
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content:center;
  border: 1px solid var(--global--color-light-gray);
  transition: 0.3s;
  border-radius:25px;

}

.btn-sns:hover{
  border: 1px solid black;
}



@media screen and (max-width: 1099px)
{
  .info-thumbnail-img-block{
    height: 23vw;
  }

}

@media screen and (max-width: 768px)
{
 
  .info-list{
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap:2rem;  
    grid-row-gap: 3rem;
    grid-auto-rows: minmax( calc( 30vw + 5rem + 1rem + 2rem ) , auto);
  }
  .info-thumbnail-img-block{
    height: 30vw;
  }

  .info-thumbnail-title{
    font-size:1.4rem;
  }
  .large .info-thumbnail-title{
    font-size:1.8rem;
  }
  .info-post-date{
    font-size:1.3rem;
  }
  .info-cate{
    font-size:1.2rem;
    padding: 4px 15px;
    border-radius: 20px;
  }

}

@media screen and (max-width: 480px)
{
 
  .info-list{
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap:1rem;  
    grid-row-gap: 3rem;
    grid-auto-rows: minmax( calc( 45vw + 5rem + 1rem + 2rem ) , auto);
  }
  .info-thumbnail-img-block{
    height: 45vw;
  }


}


.section-title{
  font-size:2rem;
  margin-bottom:2.5rem;
  font-weight: 500;
}
.content-link{
  display: flex;
  align-items: center;
  font-weight: 400;
  text-decoration: underline;
}
.content-link:after{
  content:"";
  width: 19px;
  height: 17px;
  background:url(../img/ico_link.svg) no-repeat;
  background-size:contain;
  margin-left: 5px;
}

.detail-img-block{
  text-align: center;
}
.detail-img-caption{
  margin-top:5px;
  font-size: 1.3rem;
  text-align: center;
}

.detail-movie-block iframe{
  width: 100%;
  height: calc( 1100px / 16 * 9 );
}
@media screen and (max-width: 1100px)
{
  .detail-movie-block iframe{
    width: 100%;
    height: calc( 100vw / 16 * 9 );
  }
}
@media screen and (max-width: 768px)
{
  .section-title{
    font-size:1.6rem;
    margin-bottom:2rem;
    font-weight: 500;
  }
  .detail-img-caption{
    font-size: 1.2rem;
  }
}

/****************************************************************
  General Menu
****************************************************************/

.ico-fv{
  width: auto;
  height: auto;
  max-height: 152px;
}
.tag.general{
  font-size:1.6rem;
  background:#F2F2F2;
  border: none;
  line-height:1;
  padding: 0.5rem 1.5rem;
  border-radius: 3rem;
  font-weight: 500;
}
.general-menu-title{
  font-size:1.6rem;
  font-weight: 500;
  
}
.general-menu-thumbnail-outer{
  padding: 1rem;
  width: 25%;
}

.general-menu-thumbnail-block{
  position: relative;
  background: white;
  padding: 1rem;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  transition: 0.2s;
}
.general-menu-thumbnail-block:hover{
  box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
  transition: 0.2s;
}
.general-menu-thumbnail-block .tag.general{
  position: absolute;
  top: 1rem;
  left: 1rem;
}
.general-menu-thumbnail-block .general-menu-title{
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  font-size:1.4rem;
  line-height: 1.4;
  text-align:right;
}
.general-menu-icon,
.general-menu-icon--selected{
  width: 65%;
}
.general-menu-icon{
  max-width:170px
}
.general-menu-icon img,
.general-menu-icon--selected img{
  object-fit: contain;
}

.general-menu-ico{
  padding: 2rem;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  transition: 0.2s;
  margin-bottom: 1rem;
}
.general-menu-ico:hover{
  box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
  transition: 0.2s;
}
.general-menu-ico-title{
  font-size:1.8rem;
  font-weight: bold;
  text-align: center;
}
.general-submenu{
  padding-left: 1rem;
  font-size:1.4rem;
}
.general-submenu li{
  position:relative;
}
.general-submenu li:before{
  content: "-- ";
}

@media screen and (max-width: 1100px)
{
  .general-menu-thumbnail-block{
  }
}
@media screen and (max-width: 768px)
{
  .tag.general{
    font-size:1.3rem;
  }
  .general-menu-title{
    font-size:1.3rem;
  }
  .general-menu-thumbnail-block .general-menu-title {
    font-size:1.3rem;
  }
  .general-menu-thumbnail-outer{
    padding: 1rem;
    width: 33.333333333%;
  }
}
@media screen and (max-width: 480px)
{
  .ico-fv{
    height: 100px;
  }
  .tag.general{
    font-size:1.2rem;
  }
  .general-menu-title{
    font-size:1.2rem;
  }
  .general-menu-thumbnail-block{
    min-height: 200px;
  }
  .general-menu-thumbnail-outer{
    padding: 0.5rem;
    width: 50%;
  }
  .general-menu-ico-title{
    font-size:1.6rem;
  }
  .general-submenu{
    font-size:1.2rem;
  }
  
}



/****************************************************************
  General Menu selected
****************************************************************/
.selected-category-block{
  background:#F4F6FA;
}
.selected-category-block .container{
}
.general-menu-icon--selected{
  /*background: white;*/
}
.selected-category-block .tag.general{
  background: white;
}
.btn-consultation{
  width: 44%;
  max-width:180px;
  font-size: 1.4rem;
}
.btn.wire.btn-estimation{
  width: 44%;
  max-width:180px;
  font-size: 1.4rem;
  border: 1px solid var(--global--color-primary)!important;
  background:white;
}
.btn.wire.btn-estimation:hover{
  color: white;
  background:var(--global--color-primary);
}

/*
.general-submenu-list{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  grid-auto-rows: minmax( calc( 280px  ) , auto);
}

.general-submenu-thumbnail-outer{
  position: relative;
  grid-column-end: span 1;
  grid-row-end: span 1;
  transition: 0.2s;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  background: white;
  padding: 2rem;
  display: flex;
  flex-direction:column;
}
.general-submenu-thumbnail-outer.selected{
  transition: 0.2s;
  grid-column-end: span 2;
  grid-row-end: span 2;  
}
*/

.general-submenu-list{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-right:-1rem;
  margin-left:-1rem;
  
}

.general-submenu-thumbnail-outer{
  width: 33.333%;
  height: calc( 80px );
  padding: 1rem;
}
.general-submenu-thumbnail-outer > .inner{
  position: relative;
  transition: 0.2s;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  background: white;
  height: 100%;
  padding: 2rem;
  display: flex;
  flex-direction:column;
}
.general-submenu-thumbnail-outer:hover > .inner{
  box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
  transition: 0.2s;
}
.general-submenu-thumbnail-outer.selected{
  transition: 0.2s;
  /*width: calc( 66.6666%  );*/
  height: auto;
  
}

.general-submenu-thumbnail-outer .tag.general{
  background:#F2F2F2;
}
.general-submenu-thumbnail-block{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height:100%;
  max-height: calc( 280px );
}
.general-submenu-thumbnail-block .tag.general{
  position: absolute;
  top: 0;
  left: 0;
}
.general-submenu-thumbnail-block .general-menu-title{
  /*
  position: absolute;
  bottom: 0;
  */
  left: 1rem;
  font-size:1.4rem;
  line-height: 1.4;
  text-align:right;
}

.general-submenu-thumbnail-outer .submenu-arrow{
 /*
  position: absolute;
  bottom: 0;
  top: 0;
  right: 1rem;
  margin: auto;
  */
  transition:0.3s;
}
.general-submenu-thumbnail-outer.selected .submenu-arrow{
  transition:0.3s;
  transform: rotate(90deg);
}

.general-submenu-caption-block{
  flex: 1;
  position: relative;
  overflow: hidden;
  height: 0;
  opacity: 0;
}
.general-submenu-caption-block p{
  font-size:1.4rem;
}
.general-submenu-thumbnail-outer.selected .general-submenu-caption-block{
  margin-top: 3rem;
  height: auto;
  opacity: 1;
  transition: 1s;
  padding-bottom:7rem;
}
.general-submenu-caption-block .btn-block{
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  opacity: 0;
  margin-left: -1rem;
  margin-right: -1rem;
  
}
.general-submenu-thumbnail-outer.selected .general-submenu-caption-block .btn-block{
  opacity: 1;
  transition: 1s;
  bottom: 0;
}

@media screen and (max-width: 1100px)
{
  .general-submenu-thumbnail-outer{
    /*height: calc( 25vw);*/
  }
  .general-submenu-thumbnail-outer.selected{
    /*height: calc( 50vw);*/
  }
  .general-submenu-thumbnail-block{
    max-height: calc( 25vw);
  }
}
@media screen and (max-width: 768px)
{
  
  .general-submenu-thumbnail-outer{
    width: 50%;
  }
  .general-submenu-thumbnail-outer.selected{
    /*width: 100%;*/
    height: auto;
  }
  .general-submenu-thumbnail-block{
    max-height: calc( 33.33333vw);
  }
}
@media screen and (max-width: 480px)
{
  .selected-category-caption-block{
  }
  .selected-category-caption-block .tag.general{
    position: absolute;
    top: 0;
    left: 0;
  }
  .selected-category-caption-block .general-menu-title{
    text-align: right;
  }
  .general-submenu-thumbnail-outer{
    width: 100%;
    height: 60px;
    padding: 0.5rem;
  }
  .general-submenu-thumbnail-outer.selected{
    width: 100%;
    height: auto;
  }
  .general-submenu-thumbnail-outer > .inner{
    padding: 1rem;
  }
  .general-submenu-thumbnail-block .general-menu-title{
    font-size:1.2rem;
  }
  .general-submenu-thumbnail-outer.selected .general-submenu-caption-block{
    margin-top:1.5rem;
  }
  .general-submenu-thumbnail-outer.selected .general-submenu-caption-block p{
    font-size:1.3rem;
  }
  .general-submenu-thumbnail-block{
    max-height: calc( 50vw);
  }
}

/****************************************************************
  login
****************************************************************/

.alert-danger {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}

.login-page {
  background: #F2F2F2;
  
}
.login-page input{
  border-color: #F2F2F2;
}
.login-page .header-logo,
.login-page .btn-project{
  display: none;
}

.login-page .container{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: calc( 90vh - 70px );
}

.login-block {
  border: 1px solid #AEB1AD;
  border-radius:1rem;
  padding: 0 5rem 3rem 5rem;
  height: 100%;
  display: flex;
  flex-direction:column;
}
.login-title{
  display: inline-block;
  background: #F2F2F2;
  margin-top: -12px;
  padding: 0 3rem;
  font-weight: 400;
  font-size:2rem;
  text-align: center;
}
.login-page .sul-header{
  background: transparent!important;
}

#login-form{
  width: 100%;
  max-width: 500px;
  margin: auto;
}
@media screen and (max-width: 480px)
{
  .login-page .container{
    display: block;
  }
  
  .login-block {
    padding: 0 3rem 2rem 3rem;
  }
  .login-title{
    display: inline-block;
    background: #F2F2F2;
    margin-top: -12px;
    font-size:1.6rem;
  }
}
/****************************************************************
  アカウント登録
****************************************************************/

#account-form{
  width: 100%;
  max-width: 800px; 
  margin: auto;
}

.reqired{
  display: inline-block;
  color: red;
  font-size:1.2;
  line-height:1;
  padding: 0.4rem 1.3rem;
  margin-left: 5px;
}

.form-step-block{
  display: flex;
  align-items: center;
  justify-content: center;
}
.step{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: gray;
}
.step > span{
  font-size:3rem;
  color: gray;
  font-weight:bold;
  background:whitesmoke;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 5rem;
  border-radius:3rem;
  margin-right: 1rem;
}

.step.active{
  color: var(--global--font-color);
  font-weight:500;
}
.step.active  > span{
  color: white;
  background: var(--global--color-secondary);

}

.alert-primary {
  color: #084298;
  background-color: #cfe2ff;
  border-color: #b6d4fe;
}

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

  .step{
    padding: 1rem;
  }
  .step > span{
    font-size:2rem;
    width: 3rem;
    height: 3rem;
    border-radius:3rem;
    margin-right: 1rem;
  }
}


/****************************************************************
  トップページ
****************************************************************/


body.home #kv{
  position: relative;
  height: auto;
  background: white;
}
body.home #kv2{
  position: relative;
  height: auto;
  background: #F7F8FA;
  height: 700px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.home #kv2 video {
  position: absolute;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.kv-block .inner{
  
  position: relative;
  display: flex;
  width:750px;
  height: 550px;
  margin-bottom: 70px;
   align-items: center;
  justify-content: center;
  flex-direction: column;
  /*background: url(../img/top/mv_circle.svg) no-repeat;*/
  background-size:contain;
  background-position: center;
  animation: 1s circle forwards;  
  opacity: 0;
}
.kv-block .inner p{
  text-shadow: #Fff 0 0 20px;
}
.kv-block .inner .logo-block{
  opacity: 0;
  animation: 1s riseup forwards;
  animation-delay:0.8s; 
}
.kv-block .inner .logo{
  width: 50%;
  filter: drop-shadow(0 0 20px #fff);
}

.play-end #video{
  transition:4s;
  opacity: 0!important;
}
.illust-img-01{
  position: absolute;
  left: calc( 50% - 500px );
  bottom: 50px;
}
.illust-img-02{
  position: absolute;
  right: calc( 50% - 500px );
  bottom: 50px;
}

@media screen and (max-width: 768px)
{
  body.home #kv2{
    height: 90vw;
  }
  .kv-block .inner{
    width:65vw;
    height: 65vw;
   }
   .illust-img-01{
    left: 1vw;
    bottom: 50px;
  }
  .illust-img-02{
    right: 1vw;
    bottom: 50px;
  }
  body.home #kv2 video {
    width: auto;
    height: 100%;
  }
}

@media screen and (max-width: 480px)
{
  body.home #kv2{
    height: 150vw;
  }
  .kv-block .inner .logo{
    width: 60%;
  }
  .kv-block .inner{
    width:88vw;
    height: 88vw;
   }
  .illust-img-01{
    width: 30vw;
    left: -10vw;
    bottom: 0px;
  }
  .illust-img-01 svg{
    width: 100%;
  }
  .illust-img-02{
    width: 35vw;
    right: -10vw;
    bottom: 0px;
  }
  .illust-img-02 svg{
    width: 100%;
  }
  .kv-block .inner .btn{
    font-size: 1.2rem!important;
  }
  
}
@keyframes circle {
  0% {
    opacity: 0;
    transform: scale(0,0);
  }
  100% {
    opacity: 1;
    transform: scale(1,1);
  }
}
@keyframes riseup {
  0% {
    opacity:0;
    transform:translateY(30px);
  }
  100% {
    opacity:1;
    transform:translateY(0px);
  }
}

.tag.primary{
  padding: .5rem 1rem;
  border: none;
  font-weight: 500;
}
.btn-scroll{
  position: absolute;
  left: 3rem;
  bottom: 5rem;
  z-index: 10;
}
.btn-scroll.center{
  left: 0;
  right: 0;
  bottom: 3rem;
  margin:auto;
  /*display: none;*/
}
.btn-scroll img{
  width: 50px;
  animation: 2s fuwafuwa infinite;  
}
.btn-sound{
  position: absolute;
  top: 3rem;
  right: 3rem; 
  z-index: 10;
}
.btn-sound img{
  width: 20vw;
  max-width: 120px;
}
.btn-sound.sound-on .ico-sound-off{
  display: inline-block;
}
.btn-sound.sound-on .ico-sound-on{
  display: none;
}
.btn-sound.sound-off .ico-sound-off{
  display: none;
}
.btn-sound.sound-off .ico-sound-on{
  display: inline-block;
}

.seasonal-thumbnail-title{
  font-size: 1.4rem;
  font-weight: 500;
}

.outsourcing-title{
  font-size: 1.8rem;
  font-weight: 500;
}
.outsourcing-caption{
  font-size: 1.4rem;
}

#outsourcing-package{
  position:relative;
  background: #F2F2F2;
}

#outsourcing-package:before{
  content:"";
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-top: 30px white solid;
  border-left: 30px transparent solid;
  border-right: 30px transparent solid;  
}

.seasonal-thumbnail-img-block{
  overflow: hidden;
  width: 100%;
  height: 350px;
}
.seasonal-thumbnail-img-block img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: 0.2s;
}
.info-thumbnail:hover .seasonal-thumbnail-img-block img{
  transform: scale(1.1,1.1);
  transition: 0.2s;
}
.client-logo-block{
  display: flex;
  flex-wrap: wrap;
  margin-left: -20px;
  margin-right: -20px;

}
.client-brand-logo{
  width: 10%;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.client-brand-logo img{
  width: 100%;
}

.service-flow-block{
  position: relative;
}
.service-flow-block:before{
  content:"";
  display: block;
  position: absolute;
  width: 3px;
  height: 70%;
  top: 45px;
  left: 35px;
  background: gainsboro;
  z-index: -1;
}
.service-step-block{
  display: flex;
  justify-content: space-between;
  align-items:flex-start;
  margin-bottom: 5rem;
}
.service-step{
  width: 70px;
  height: 70px;
  border-radius: 45px;
  border: 2px solid black;
  display: flex;
  justify-content:center;
  align-items: center;
  font-size: 3rem;
  font-weight: 500;
  background: white;
  margin-top: -18px;
}
.service-step-block:nth-child(even) .service-step{
  background:#E7E7E7;
}
.service-step-caption{
  flex: 1;
  padding-left: 5rem;
}

.account-banner-block{
  background:#F2F2F2;
}


.btn-reg-account{
  position: relative;
  border:2px solid var(--global--color-primary);
  background: white;
  color: var(--global--color-primary);
  font-weight: 500;
  padding: 3rem;
  line-height: 1.6;
}
.btn-reg-account2{
  position: relative;
  border:2px solid black;
  background: white;
  color: black;
  font-weight: 500;
  /*padding: 3rem;*/
  line-height: 1.6;
}

.btn-reg-account i,
.btn-reg-account2 i{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 3rem;
  margin: auto;
  display: flex;
  align-items: center;
}
.btn-reg-account:hover,
.btn-reg-account:focus{
  background: var(--global--color-primary);
  color: white;
  font-weight: 500;
  line-height: 1.6;
}
.btn-reg-account2:hover,
.btn-reg-account2:focus{
  background: var(--global--color-primary);
  color: white;
  font-weight: 500;
  line-height: 1.6;
  border-color: var(--global--color-primary);
}






@keyframes fuwafuwa {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@media screen and (max-width: 1099px)
{
  .seasonal-thumbnail-img-block{
    height: calc( 50vw - 1rem );
  }

  
}
@media screen and (max-width: 768px)
{
  .client-logo-block{
    margin-left: 0px;
    margin-right:0px;
  
  }
  .client-brand-logo{
    width: 20%;
    padding: 30px;
  }

  .btn-scroll{
   display: none;
  }
  .btn-scroll.center{
    display: block;
  }
  body.home #kv2 .btn-scroll img {
    width: 40px;
  }
  .seasonal-thumbnail-img-block{
    height: calc( 33vw - 1rem );
  }
}

@media screen and (max-width: 480px)
{
  .outsourcing-title{
    font-size: 1.6rem;
    text-align:center;
  }
  .client-logo-block{
    margin-left: 0px;
    margin-right:0px;
  
  }
  .client-brand-logo{
    width: 20%;
    padding: 10px;
  }
  .service-flow-block:before{
    height: 70%;
    top: 35px;
    left: 25px;
  }
  
  .service-step{
    display: flex;
    width: 50px;
    height: 50px;
    font-size: 2rem;
    margin-top: -10px;
  }
  
  .service-step-caption{
    padding-left: 2rem;
  }
  .btn-reg-account{
    padding: 1.5rem 3rem;
  }
  .btn-scroll{
    left: 1rem;
    bottom: 1rem;
    z-index: 10;
  }
  .btn-scroll img{
    width: 2.3vw;
  }
  .btn-sound{
    position: absolute;
    top: 0;
    right: 1rem; 
    z-index: 10;
  }
  .btn-sound img{
    width: 20vw;
    max-width: 120px;
  }
  .seasonal-thumbnail-img-block{
    height: calc( 45vw - 1rem );
  }
}


/****************************************************************
  FAQ
****************************************************************/
hr.faq{
  color:gainsboro;
}
.question-block,
.answer-block{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 3rem 0;
}
.answer-block .inner{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.answer-block{
  display: none;
}


.question-block p,
.answer-block  .body{
  flex: 1;
  padding-top: 1.5rem;
}
.question-block p{
  font-weight: 600;
}
.ico-question,
.ico-answer{
  display: flex;
  align-items:center;
  justify-content:center;
  width: 60px;
  height: 60px;
  font-size:3.4rem;
  font-weight: 500;
  margin-right: 2rem;
  color: black;
  background: #E7E7E7;
  border: 3px solid #707070;
  border-radius: 30px;
}
.ico-question{
  color: white;
  background: black;
  border: none;
}
.btn-expander{
  border: 1px solid black;
  display: flex;
  align-items:center;
  justify-content:center;
  padding:1rem!important;
  margin-left: 2rem;
  margin-top: 1rem;
}
.btn-expander .fa-plus{ display: inline-block; }
.btn-expander .fa-minus{ display: none; }

.open .btn-expander .fa-plus{ display: none; }
.open .btn-expander .fa-minus{ display:  inline-block; }

@media screen and (max-width: 480px)
{
  .ico-question,
  .ico-answer{
    display: flex;
    align-items:center;
    justify-content:center;
    width: 50px;
    height: 50px;
    font-size:2.6rem;
    font-weight: 500;
    margin-right: 2rem;
    border-radius: 30px;
  }
  .question-block p,
  .answer-block .body{
    flex: 1;
    padding-top: 1.2rem;
  }
  .btn-expander{
    border: 1px solid black;
    display: flex;
    align-items:center;
    justify-content:center;
    padding:.8rem!important;
    margin-top: 1rem;
  }

}