@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}





/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 50%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

@media (max-width:999px) {
.section {padding-left: 5%;padding-right: 5%;}
}
* {
  box-sizing: border-box;
}

html, body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  background-color: #fff;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 30px;
  color: #2a2a2a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: "Noto Sans JP", sans-serif;
}

::selection {
  background: #03a4ed;
  color: #fff;
}

::-moz-selection {
  background: #03a4ed;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.page-section {
  margin-top: 120px;
}

.section-heading h2,.section-heading h3 {
  font-size:2.5rem;
  text-transform: capitalize;
  color: #595757;
  font-weight:600;
  letter-spacing: 0.25px;
  position: relative;
  z-index: 2;text-align: left;
  line-height:3.3rem;
}

.section-heading h2 em {
  font-style: normal;
  color: #03a4ed;
}

h2 span.ttl,h3 span.ttl {
  color: rgba(0,136,179,0.6);font-size: 1.5rem;
  font-weight:600;line-height:3rem;
  opacity: 1;display: block;
  text-transform: capitalize;
}


.main-blue-button a {
  display: inline-block;
  background-color: #03a4ed;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

.main-blue-button-hover a span {color: #fff;}

.main-blue-button-hover a {
  display: inline-block;
  background-color: rgb(0, 136, 179, 0.6);
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  transition: all .3s;
}

.main-blue-button-hover a:hover {
  background-color: rgb(19, 174, 103, 0.6);
}

.main-red-button a {
  display: inline-block;
  background-color: #ff695f;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

.main-red-button-hover a {
  display: inline-block;
  background-color: #ff695f;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  transition: all .3s;
}

.main-red-button-hover a:hover {
  background-color: #03a4ed;
}

.main-white-button a {
  display: inline-block;
  background-color: #fff;
  font-size: 15px;
  font-weight: 400;
  color: #ff695f;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.background-header {
  background-color: #fff!important;
  height: 80px!important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #1e1e1e!important;
}

.background-header .main-nav .nav li:hover a {
  color: #0088b3!important;
}

.background-header .nav li a.active {
  color: #0088b3!important;
}

.header-area {
  background-color: rgba(255,255,255,0.8);
  position: absolute;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 100px;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height:5.5rem;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.background-header .main-nav .logo {
  line-height: 75px;
}

.logo img {width:85%;}

@media (max-width: 600px) {
.logo img {width:70%;}
}
.background-header .main-nav .nav {
  margin-top: 20px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 20px;font-family: "Noto Sans JP", sans-serif;
  padding-right: 20px;
}


.header-area .main-nav .nav li:last-child .main-red-button-hover a:hover,
.background-header .main-nav .nav li:last-child .main-red-button-hover a:hover {
  background-color: #03a4ed !important;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size:1rem;
  color: #2a2a2a;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li a {
  color: #2a2a2a;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #0088b3!important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #0088b3!important;
  opacity: 1;
}

.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 30px;
}

.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #2a2a2a;
  position: absolute;
  right: 18px;
  top: 12px;
}

.background-header .main-nav .nav li.submenu:after {
  color: #2a2a2a;
}

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 50px;
  opacity: 0;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.header-area .main-nav .nav li.submenu ul li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.submenu ul li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #fff;
  color: #0088b3!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.submenu:hover ul {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #0088b3;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 8px;
    padding-right:8px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 992px) {

  .background-header .main-nav .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .logo {
    color: #1e1e1e;text-align: left;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #0088b3!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }

  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .background-header .nav {
    margin-top: 80px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e7e7e7;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #0088b3!important;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width:992px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}

/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

.js-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@-webkit-keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@-webkit-keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

@keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

.preloader-inner {
    position: relative;
    width: 142px;
    height: 40px;
    background: #fff;
}

.preloader-inner .dot {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    left: 15px;
    background: #00b5ec;
    border-radius: 50%;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation: dot 2.8s infinite;
    animation: dot 2.8s infinite;
}

.preloader-inner .dots {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    margin-top: 12px;
    margin-left: 31px;
    -webkit-animation: dots 2.8s infinite;
    animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    background: #00b5ec;
    border-radius: 50%;
}



/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 236px 0px 130px 0px;
  position: relative;
  overflow: hidden;
}

.main-banner:after {
  content: '';
  background-image: url(../images/baner-dec-left.png);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 100px;
  width: 267px;
  height: 532px;
}

.main-banner:before {
  content: '';
  background-image: url(../images/banner-right-image.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  right: 0;
  top: 100px;
  width: 819px;
  height: 674px;
}

.main-banner .item {
  margin-right: 45px;
}

.main-banner .item h6 {
  text-transform: uppercase;
  font-size: 18px;
  color: #ff695f;
  margin-bottom: 15px;
}

.main-banner .item h2 {
  font-size: 50px;
  font-weight: 700;
  color: #2a2a2a;
  line-height: 72px;
}

.main-banner .item h2 em {
  color: #03a4ed;
  font-style: normal;
}

.main-banner .item h2 span {
  color: #ff695f;
}

.main-banner .item p {
  margin: 20px 0px;
}

.main-banner .item .down-buttons {
  display: inline-flex;
}

.main-banner .item .down-buttons .call-button i {
  margin-right: 5px;
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  border-radius: 50%;
  background: rgb(255,104,95);
  background: linear-gradient(105deg, rgba(255,104,95,1) 0%, rgba(255,144,104,1) 100%);
  color: #fff;
  font-size: 20px;
}

.main-banner .item .down-buttons .call-button a {
  color: #ff695f;
  font-size: 15px;
  font-weight: 500;
  margin-left: 30px;
}

.main-banner .owl-dots {
  margin-top: 60px;
  counter-reset: dots;
}

.main-banner .owl-dot:before {
  counter-increment:dots;
  content: counter(dots);
  font-size: 20px;
  font-weight: 500;
  margin-left: 10px;
  color: #2a2a2a;
  width: 15px;
  display: inline-block;
  text-align: center;
  border-bottom: 3px solid transparent;
  transition: all .5s;
}

.main-banner .active:before {
  color: #0088b3;
  border-bottom: 3px solid #0088b3;
}


/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/

.our-services .services-left-dec img {
  width: 387px;
  height: 638px;
  left: -120px;
  top: -140px;
  position: absolute;
  z-index: 1;
}

.our-services .services-right-dec img {
  width: 305px;
  height: 305px;
  right: 25px;
  bottom: -120px;
  position: absolute;
  z-index: 1;
}

.our-services .container {
  position: relative;
}

.our-services {
  position: relative;
  margin-top: 0px;background: rgb(248,236,202,0.5);
  padding-top: 120px;
}

.our-services .section-heading {
  text-align: center;
  margin-bottom: 45px;
}

.our-services .section-heading h2 {
  margin:0 auto 3%;text-align: left;
}

.our-services .section-heading h3 {
  margin:0 auto 3%;text-align:center;
}

.our-services .item {
  text-align: center;
  margin: 15px;
  border-radius: 20px;
  background-color: #fff;
  padding: 30px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.05);
}

.our-services .item h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 30px;
  line-height: 30px;
}

.our-services .item .icon {
  width: 45px;
  height: 45px;
  margin: 0 auto;
}

.our-services p,.pricing-tables p {
  margin-top:4%;text-align: left;font-size: 1.1rem;line-height: 2.1rem;color: #595757;
}

.our-services .left-image {margin-right: 5%;}
.our-services .left-image img {width: 100%; border-radius: 0 50px 50px 0;z-index: 10 !important;}

.day-image {padding: 2%;}
.day-image img {width: 100%; border-radius: 50px;z-index: 10 !important;border: solid 4px #fff;}


@media (max-width:991.8px) {
.our-services {padding-top: 13%;}
.our-services .left-image {margin: auto auto 8% !important;text-align: center;}
.our-services .left-image img { border-radius:50px;margin: auto !important;}
	.our-services p,.pricing-tables p {font-size: 1rem;line-height:1.9rem;}
}


/* 
---------------------------------------------
About
--------------------------------------------- 
*/

.about-us {
  margin-top: 0px;
  padding-top: 120px;
}

.about-us .left-image {
  margin-right: 30px;
}

.about-us .section-heading h2 {
  margin-right: 60px;
}

.about-us .section-heading p {
  margin-top: 50px;
}

.about-us .fact-item .icon {
  width: 45px;
  height: 45px;
}

.about-us .fact-item {
  margin-top: 45px;
}

.about-us .fact-item .count-digit {
  font-size: 48px;
  font-weight: 700;
  color: #2a2a2a;
  margin-top: 5px;
}

.about-us .fact-item .count-title {
  font-size: 15px;
  color: #ff695f;
}

.about-us .fact-item p {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}


/* 
---------------------------------------------
Portfolio
--------------------------------------------- 
*/

.our-portfolio .portfolio-left-dec img {
  width: 342px;
  height: 311px;
  left: 45px;
  top: 120px;
  position: absolute;
  z-index: 1;
}

.our-portfolio {
  padding-top: 120px;
  margin-top: 0px;
  position: relative;
}

.our-portfolio .section-heading {
  text-align: center;
  margin-bottom: 60px;
}

.our-portfolio .section-heading h2 {
  text-align: center;
  margin: 0px 60px 0px 60px;
  margin-bottom: -5px;
  position: relative;
  z-index: 1;
}

.our-portfolio {
  margin: 0px 15px;
}

.our-portfolio .item .thumb {
  position: relative;
}

.our-portfolio .item .thumb:hover .hover-effect {
  bottom: 30px;
}

.our-portfolio .item .thumb:hover img {
  opacity: 0.7;
}

.our-portfolio .item .hover-effect {
  position: absolute;
  background-image: url(../images/hover-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  transition: all .5s;
  bottom: -240px;
  right: 30px;
  width: 239px;
  height: 210px;
}

.our-portfolio .item .hover-effect .inner-content {
  position: absolute;
  right: 30px;
  bottom: 30px;
  text-align: right;
}

.our-portfolio .item .hover-effect .inner-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 15px;
}

.our-portfolio .item .hover-effect .inner-content span {
  font-size: 15px;
  color: #fff;
}

.our-portfolio .item .thumb img {
  border-radius: 20px;
  transition: all .3s;
}

.owl-portfolio .owl-nav {
  position: absolute;
  top: 42%;
  width: 100%;
}

.owl-portfolio .owl-nav .owl-prev {
  position: absolute;
  left: 25px;
}

.owl-portfolio .owl-nav .owl-next {
  position: absolute;
  right: 30px;
}

.owl-portfolio .owl-nav .owl-prev span {
    color: transparent;
}

.owl-portfolio .owl-nav .owl-prev span:hover::after{
  opacity: 1;
}

.owl-portfolio .owl-nav .owl-prev span:after {
  width: 46px;
  height: 46px;
  background-color: #ff695f;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  border-radius: 50%;
  color: #fff;
  content: '\f104';
  font-size: 22px;
  font-family: 'FontAwesome';
  transition: all .5s;
  opacity: 0.5;
}

.owl-portfolio .owl-nav .owl-next span {
    color: transparent;
}

.owl-portfolio .owl-nav .owl-next span:hover::after{
  opacity: 1;
}

.owl-portfolio .owl-nav .owl-next span:after {
  width: 46px;
  height: 46px;
  background-color: #ff695f;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  border-radius: 50%;
  color: #fff;
  content: '\f105';
  font-size: 22px;
  font-family: 'FontAwesome';
  transition: all .5s;
  opacity: 0.5;
}

.owl-portfolio .owl-dots {
  text-align: center;
  margin-top: 40px;
}
.owl-portfolio .owl-dots .owl-dot {
  width: 6px;
  height: 6px;
  background-color: #ff695f;
  border-radius: 50%;
  opacity: 0.3;
  margin: 0px 5px;
}

.owl-portfolio .owl-dots .active {
  opacity: 1;
  width: 10px;
  height: 10px;
}

/* 
---------------------------------------------
Pricing
--------------------------------------------- 
*/

.grid-container02 {
  display: grid;
  grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));
  gap:1% 2%; 
  margin:2% auto;
}
.welfare_in{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}



.pricing-tables .tables-left-dec img {
  width: 418px;
  height: 851px;
  left: 0;
  top: 120px;
  position: absolute;
  z-index: 1;
}

.pricing-tables .tables-right-dec img {
  width: 359px;
  height: 848px;
  right: 0;
  top: 45px;
  position: absolute;
  z-index: 1
}

.pricing-tables {
  z-index: 2;
  position: relative;background: rgb(248,236,202,0.5);
  padding-top: 8%;padding-bottom:8%;
  margin-top: 0px;
}

@media (max-width: 991.8px) {
.pricing-tables {
 padding-top: 14%;padding-bottom:14%;}
}

.pricing-tables .section-heading {
  text-align: center;
  margin-bottom: 60px;
}

.pricing-tables .section-heading h2 {
  text-align: center;
  margin: 0px 60px 0px 60px;
  margin-bottom: -5px;
  position: relative;
  z-index: 1;
}



.pricing-tables .item {
  position: relative;
  z-index: 2;background: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  padding:10% 8%;
  text-align: center;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.3);
  border-radius: 45px;display: flex;
  flex-direction: column;
  height: 100%;
}

.pricing-tables .item img {width: 100%;border-radius: 20px;margin-bottom: 5%;}

.pricing-tables .item h4 {
  font-size:1.15rem;margin-bottom: 5%;
  font-weight:600;
  color: #0088b3;
}

.pricing-tables .item h4 span {font-size:2rem;display: inline-block;vertical-align:-16%; padding-left: .6rem;}

.pricing-tables .item h3 {
  font-size:1.8rem;margin-bottom: 5%;
  font-weight:600;
  color: #0088b3;
}

.pricing-tables .item p {
 font-size: 1rem;line-height: 1.7rem; text-align: left;color: #595757;margin-bottom:5%;
}

.pricing-tables .item ul li {
  display: block;
  font-size: 15px;
  color: #7a7a7a;
  margin-bottom: 20px;
}

.pricing-tables .item .main-blue-button {
  margin-top: 40px;
}


@media (max-width: 991.8px) {
.grid-container02 {gap:1% 5%;}
}
@media screen and (max-width:767.9px) {
.grid-container02 {margin-bottom:5% !important;gap:0.3%;margin-top:5%;}
.pricing-tables .item {width:95%; margin: auto;}
}




/* 
---------------------------------------------
Subscribe
--------------------------------------------- 
*/

.subscribe {
  padding-top:5%;padding-bottom:5%;background-image: url("../images/info_back.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.subscribe .inner-content {
  background-image: url(../images/subscribe-bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 20px;
  padding: 60px 0px;
  width: 100%;
  position: relative;
}

.subscribe .inner-content:after {
  content: '';
  background-image: url(../images/subscribe-dec.png);
  position: absolute;
  width: 195px;
  height: 138px;
  background-repeat: no-repeat;
  background-position: center center;
  right: -20px;
  top: -20px;
}

.subscribe h2 {
  text-align: center;color: #fff;
  margin: 0px auto 8% !important;
  position: relative;
  z-index: 1;
}

.subscribe h2 span {color: #fff;}

@media only screen and (max-width:767.9px) {
.inner-content .c-btn {margin-top:5% !important;}
}

.subscribe .inner-content form {
  width: 100%;
  height: 80px;
  border-radius: 40px;
  background-color: #fff;
}

.subscribe .inner-content form input {
  width: 38.5%;
  margin-top: 20px;
  line-height: 40px;
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0px 20px;
  font-size: 15px;
  color: #2a2a2a;
}

.subscribe .inner-content form input#website {
  border-right: 1px solid #eee;
}

.subscribe .inner-content form input::placeholder {
  color: #afafaf;
}

.subscribe .inner-content form button {
  display: inline-block;
  background-color: #03a4ed;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  width: 20%;
  margin-right: 10px;
  text-transform: capitalize;
  padding: 12px 20px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border: none;
  text-align: center;
  transition: all .3s;
}

.subscribe .inner-content form button:hover {
  background-color: #ff695f;
}

@media only screen and (max-width:767.9px) {
.subscribe {padding-top: 10%; padding-bottom: 13%;}
}
/* 
---------------------------------------------
contact
--------------------------------------------- 
*/

.contact-dec img {
  position: absolute;
  z-index: 1;
  width: 459px;
  height: 702px;
  right: 0;
  bottom: -400px;
}

.contact-left-dec img {
  position: absolute;
  z-index: 1;
  width: 174px;
  height: 319px;
  left: 0;
  top: 120px;
}

.contact-us {
  z-index: 2;background: rgb(248,236,202,0.5);
  position: relative;
  padding-top:5%;padding-bottom:5%;
  margin:auto;
}

.contact-us h2 {text-align: center;}

@media only screen and (max-width:1080px) {
.contact-us {padding-top:8%;padding-bottom:8%;}
}

#googlemap  {
	position: relative;
	padding: 0 0 40%;width:80%;margin:auto;
	height: 0;border-radius: 20px;
	overflow: hidden;border: solid 5px #fff;

 }
#googlemap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	min-height: 100% !important;

 }

.company_ph img {border-radius: 20px;border: solid 5px #fff;}
.access {padding:2%;z-index: 10;}

@media only screen and (max-width:767.9px) {
#googlemap {padding: 0 0 70%;margin-bottom: 8%;width:100%;}
.access {margin-top:3%;margin-bottom: 8%;}
.contact-us {
	padding-top:8%;padding-bottom:10%;}
}


@media only screen and (max-width:500px) {
.contact-us {padding-bottom:20%;}
}


.contact-us #map iframe {
  border-radius: 23px;
  position: relative;
  z-index: 2;
}

.contact-us .info {
  margin-top: 30px;
  position: relative;
  z-index: 5;
  display: inline-flex;
}

.contact-us .info span {
  opacity: 1;
  display: inline-flex;
  margin-right: 30px;
}

.contact-us .info span i {
  float: left;
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  background: rgb(255,104,95);
  background: linear-gradient(105deg, rgba(255,104,95,1) 0%, rgba(255,144,104,1) 100%);
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  margin-left: 30px;
  margin-right: 15px;
}

.contact-us .info span a {
  color: #0088b3;
  font-size: 14px;
  font-weight: 400;
  line-height: 25px;
  text-transform: none;
}




/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

.footer-dec {
  width: 100%;
  margin-top: -100px;
}

footer {
  padding-top:2%;padding-bottom:2%;
  z-index: 2;background: #00b5ec;
  position: relative;
}

footer .footer-item p {
  font-size:1rem;color: #fff !important; text-align: center;line-height:1.6rem;margin:2% auto !important;}
footer .footer-item p span {display:inline-block;}

.footer-item .logo {width:35%;margin: 2% auto 2%;}
.footer-item .logo img {
  width:100%;
 
}

footer ul {
  margin:3% auto auto; text-align: center;
}

footer ul li {
  display: inline-block !important;
  margin-right: 5px;
}

footer ul li a {
  width: 32px;
  height: 32px;background-color: rgb(19, 174, 103, 0.6);
  
  color: #fff !important;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  line-height: 32px;
  font-size: 15px;
}

footer ul li a:hover {
  background-color: #03a4ed;
}


@media (max-width: 767.9px) {
.footer-item .logo {width:55%;margin:4% auto;}
}

@media (max-width: 500px) {
.footer-item .logo {width: 80%;margin-top:6%;}
}
/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/


@media (max-width: 1240px) {
  .main-banner::before {
    width: 640px;
    height: 526px;
  }

}

@media (max-width: 992px) {
  .main-banner::before {
    display: none;
  }
  .main-banner .item {
    margin-right: 0px;
  }
  .main-banner  {
    padding-bottom: 0px;
  }
  .about-us .section-heading h2 {
    margin-right: 0px;
  }
  .fact-item {
    text-align: center;
  }
  .fact-item .icon {
    margin: 0 auto;
  }
  .our-portfolio .section-heading h2,
  .pricing-tables .section-heading h2 {
    margin: 0px;
  }
  .pricing-tables .item {
    margin-bottom: 30px;
  }
  .subscribe .inner-content {
    padding: 60px 30px;
  }
  .our-videos ul.nacc {
    margin-bottom: 30px;
  }
  .our-videos .naccs .menu div img {
    border-radius: 50px;
  }
  .our-videos .menu .thumb .inner-content {
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
  }
  .contact-us .section-heading h2 {
    margin-right: 0px;
    text-align: center;
  }
  .our-videos ul.nacc li {
    transform: translateX(0px);
    transform: translateY(-50px);
  }
  .our-videos .nacc .thumb iframe {
    height: 500px;
  }
  form#contact {
    margin-left: 0px;
    margin-top: 60px;
  }
  form#contact {
    padding: 45px 30px;
  }
  .footer-item {
    margin-bottom: 45px;
  }
  .subscribe-newsletters {
    margin-bottom: 0px;
  }
}

@media (max-width: 767px) {
  .main-banner .item .down-buttons {
    display: inline-block;
  }
  .main-banner .item .down-buttons .main-blue-button {
    margin-right: 0px;
    margin-bottom: 15px;
  }
  .main-banner .item .down-buttons .call-button a {
    margin-left: 0px;
  }
  .subscribe .inner-content:after {
    z-index: -1;
  }
  .subscribe .inner-content {
    padding:5% 5% 8%;
  }
  .subscribe .inner-content form input {
    width: 49%;
  }
  .subscribe .inner-content form button {
    width: 100%;
    background-color: #ff695f;
    margin-top: 30px;
  }
  .our-videos ul.nacc li {
    transform: translateX(0px);
    transform: translateY(-50px);
  }
  .contact-left-dec {
    display: none;
  }
  .contact-us .info {
    display: inline-block;
  }
  .contact-us .info span {
    margin-bottom: 20px;
  }
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#box {
            width: 100%;background: #fff;
            height: 100vh;
            background-position: top center;
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: left;
            overflow: hidden !important;
  padding:3%;position: relative;
}

	


#box:before {
  content: "";
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}


.video-wrap {
  width: 100%;
  height: 100vh !important;
  position: absolute;
  overflow: hidden !important;

  top: 0%;
  left: 0%;
}

.video-wrap::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .3;
}

.video-wrap video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}
#box h2 {color:rgba(255, 255, 255, 0.85);font-size: 2rem;line-height:2.6rem;margin-bottom: 2%;text-shadow: 0 0 6px rgb(0, 0, 0, 1);}
#box h1 {color: rgba(255, 255, 255, 0.4);font-size:5rem;text-shadow: 0 0 8px rgb(0, 0, 0, 0.4);}

@media (max-width:992px) {
#box {margin-top: -50px;}
}
@media (max-width: 600px) {
#box h2 {font-size: 1.5rem;line-height:2.2rem;}
#box h1 {font-size:3rem;margin-bottom: 5%;}
}

.nav_logo {width:75%;margin-top:3%;}
.nav_logo:hover {opacity: .7;}

.recruit_btn {margin-bottom: 5%;padding: 10px 0;color: var(--dark);margin-left:1.5rem;box-shadow: inset 0 0 0 50px transparent;}

.recruit_btn:hover {box-shadow: inset 0 0 0 0 var(--primary);}

@media (min-width: 992px) {
.recruit_btn {background:#0c9dd0;padding:.5rem 1.5rem !important;margin-left: 2rem !important;color: #fff;margin-bottom: 0;}
}

@media (min-width: 1500px) {
.nav_logo {width: 75%;margin-top:5%;}
}
@media (min-width: 1200px) {
.nav_logo {width: 80%;margin-top:4%;}
}

.pc {display:block !important;}
.m_sp {display: none !important;}
.sp {display: none !important;}

@media (max-width: 991.98px) {
.pc {display:none !important;}
.m_sp {display:block !important;}

}

@media (max-width:767.9px) {
.sp {display:block !important;}
}




.site-hero {
  background-size: cover;
  height: 100vh;
  min-height: 700px;
  width: 100%;
  position: relative; }
  .site-hero .heading {
    font-family:"M PLUS 1p" !important;letter-spacing: .1em; text-shadow: #333 1px 0 10px;
    font-weight: bold;font-size: 4rem !important; line-height: 4.8rem !important;margin-top: 3%;}

.site-hero .heading span {display: inline-block;}

@media (max-width: 991.98px) {
	.site-hero .heading {font-size: 3rem !important;line-height: 3.8rem !important;}
}
@media (max-width:500px) {
	.site-hero .heading {font-size: 1.95rem !important;line-height:2.65rem !important;}
}

.banner_part {
  height: 100vh;width: 100%;
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
  background-size: cover;
  z-index: 2;
  display: flex;justify-content: center;
  align-items: center;
}

.sub_top {height:40vh;width: 100%;background: #00b5ec;z-index: 2;
  display: flex;justify-content: center;
  align-items: center;
  position: relative;}

@media (max-width: 575px) {
  /* line 2, ../../01 cl html template/New folder/May 2019/176 Interior Heaven/Interior Heaven Html/sass/_banner.scss */
  .banner_part {
    height: 650px;
    background-size: cover;
  }
	.sub_top {height:300px;}
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  /* line 2, ../../01 cl html template/New folder/May 2019/176 Interior Heaven/Interior Heaven Html/sass/_banner.scss */
  .banner_part {
    height: 650px;
    background-size: cover;
  }
.sub_top {height:300px;}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  /* line 2, ../../01 cl html template/New folder/May 2019/176 Interior Heaven/Interior Heaven Html/sass/_banner.scss */
  .banner_part {
    height: 700px;
    background-size: cover;
  }
	.sub_top {height:350px;}
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  /* line 2, ../../01 cl html template/New folder/May 2019/176 Interior Heaven/Interior Heaven Html/sass/_banner.scss */
  .banner_part {
    height: 650px;
    background-size: cover;
  }
.sub_top {height:350px;}
}

@media only screen and (min-width: 1200px) and (max-width: 1440px) {
  /* line 2, ../../01 cl html template/New folder/May 2019/176 Interior Heaven/Interior Heaven Html/sass/_banner.scss */
  .banner_part {
    background-size: cover;
  }

}

/* line 33, ../../01 cl html template/New folder/May 2019/176 Interior Heaven/Interior Heaven Html/sass/_banner.scss */
.banner_part .banner_text {
  padding-top: 40px;z-index: 99999 !important;
}

/* line 35, ../../01 cl html template/New folder/May 2019/176 Interior Heaven/Interior Heaven Html/sass/_banner.scss */
.banner_part .banner_text h5 {
  font-size:1.4rem;
  text-transform: capitalize;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  margin-bottom:4%;
  color: #fff;
  position: relative;
  z-index: 1;
  letter-spacing: 1px;
  color: #ffff00;
}


.banner_part .banner_text p {
  color: #fff;font-size:1.7rem;font-weight: 500;text-indent: 0.3rem;
  line-height: 2.7rem;margin-top:3%;text-shadow:
      2px 2px 1px #0088b3, -2px -2px 1px #0088b3,
      -2px 2px 1px #0088b3, 2px -2px 1px #0088b3,
      2px 0px 1px #0088b3, -2px -0px 1px #0088b3,
      0px 2px 1px #0088b3, 0px -2px 1px #0088b3;
}

.sub_top h1 {margin-left:5%;}

.banner_part .banner_text h1,.sub_top h1 {
  font-size:3rem;text-shadow:
      3px 3px 2px #0088b3, -3px -3px 2px #0088b3,
      -3px 3px 2px #0088b3, 3px -3px 2px #0088b3,
      3px 0px 2px #0088b3, -3px -0px 2px #0088b3,
      0px 3px 2px #0088b3, 0px -3px 2px #0088b3;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  margin-bottom: 19px;text-indent: -1.2rem;
  line-height:3.7rem;letter-spacing: 1px;
  color: #fff;
}
.sub_top h1 {margin-top:13%;z-index:9999 !important;position: relative;}
.sub_top h1 span {font-size:2rem;padding-right: 0.6rem;vertical-align:.4rem;}

@media (max-width:1020px) {
	.banner_part .banner_text h1,.banner_part .banner_text p {margin-left: 2%;}
}
@media (max-width:1080px) {
	.sub_top h1 {margin-left:5%;font-size:2.6rem;}
	.sub_top h1 span {font-size:1.8rem;}
}
@media (max-width: 575px) {
  .banner_part .banner_text h1,.sub_top h1 {
    font-size: 2.2rem;
    line-height: 3rem;
  }
	.sub_top h1 {margin-top:20%;}
	.sub_top h1 span {font-size:1.4rem;}
}



/* line 70, ../../01 cl html template/New folder/May 2019/176 Interior Heaven/Interior Heaven Html/sass/_banner.scss */
.banner_part .banner_text h1 span {
  color: #ff7e00;
}

/* line 74, ../../01 cl html template/New folder/May 2019/176 Interior Heaven/Interior Heaven Html/sass/_banner.scss */
.banner_part .banner_text .btn_1 {
  color: #fff;
  display: flex;
  align-items: center;
}

/* line 78, ../../01 cl html template/New folder/May 2019/176 Interior Heaven/Interior Heaven Html/sass/_banner.scss */
.banner_part .banner_text .btn_1 img {
  max-width: 20px;
  margin: 0 auto;
  padding-top: 20px;
}

/* line 83, ../../01 cl html template/New folder/May 2019/176 Interior Heaven/Interior Heaven Html/sass/_banner.scss */
.banner_parf7t .banner_text .btn_1:hover {
  color: #fe00 !important;
}

@media (max-width: 575px) {
  /* line 74, ../../01 cl html template/New folder/May 2019/176 Interior Heaven/Interior Heaven Html/sass/_banner.scss */
  .banner_part .banner_text .btn_1 {
    padding: 9.5px 28px 9.5px 0;
  }
}

/*========= waveを描画するエリア設定 ===============*/

canvas{
	position: absolute;
	bottom: 0;
	left:0;
	width: 100%;
}

/*	波の高さの指定　*/
@media screen and (min-width: 767.9px) {
	.waveCanvas {
		width: 100%;
		height: 250px;
	}
}
@media screen and (min-width: 575px) {
	.waveCanvas {
		width: 100%;
		height: 150px;
	}
}

.c-text {
	overflow: hidden;
	display: flex;
	width: 100vw;
	position: absolute;
	bottom:3%;
	left: 0;
	
/*
	margin-inline: calc(100% - 100vw);
*/
}
.c-text__item,.c-text2__item {
	margin-top:1%;z-index: 1;
}

.c-text__item02,.c-text2__item02 {
	z-index: 1;margin-top:5%;
	opacity: 0.9;
}

.c-text__item03,.c-text2__item03 {
	z-index: 1;margin-top:3%;
	opacity: 0.9;
}


.c-text__item img {
	animation-name: slide-out-left;width: 100%;
	animation-timing-function: linear; /*一定の速度で動く*/
	animation-iteration-count: infinite; /*無限ループ*/
	animation-direction: normal; /*順方向に再生*/
	animation-duration: 24s; 
}
.c-text__item02 img {
	animation-name: slide-out-left;width: 100%;
	animation-timing-function: linear; /*一定の速度で動く*/
	animation-iteration-count: infinite; /*無限ループ*/
	animation-direction: normal; /*順方向に再生*/
	animation-duration: 28s; 
	transition-delay: 3s;
}

.c-text__item03 img {
	animation-name: slide-out-left;width: 100%;
	animation-timing-function: linear; /*一定の速度で動く*/
	animation-iteration-count: infinite; /*無限ループ*/
	animation-direction: normal; /*順方向に再生*/
	animation-duration: 30s; 
	transition-delay: 8s;
}

.c-text2__item img {
	animation-name: slide-out-left;width:60%;
	animation-timing-function: linear; /*一定の速度で動く*/
	animation-iteration-count: infinite; /*無限ループ*/
	animation-direction: normal; /*順方向に再生*/
	animation-duration: 24s; 
}
.c-text2__item02 img {
	animation-name: slide-out-left;width:60%;
	animation-timing-function: linear; /*一定の速度で動く*/
	animation-iteration-count: infinite; /*無限ループ*/
	animation-direction: normal; /*順方向に再生*/
	animation-duration: 28s; 
	transition-delay: 3s;
}

.c-text2__item03 img {
	animation-name: slide-out-left;width:60%;
	animation-timing-function: linear; /*一定の速度で動く*/
	animation-iteration-count: infinite; /*無限ループ*/
	animation-direction: normal; /*順方向に再生*/
	animation-duration: 30s; 
	transition-delay: 8s;
}

@media (max-width: 575px) {
	.c-text2__item img,.c-text2__item02 img,.c-text2__item03 img {width:100%;}
}


.slide-out-left {
  animation-name: slide-out-left;
  animation-direction: normal;
}

@keyframes slide-out-left {
  0% {
    transform: translateX(100vw);
    transform-origin: left;
  }
	100% {
    transform: translateX(-100vw);
    transform-origin: left;
	}
}


/*
.c-text__item {
margin-top: 8%;
  &:nth-child(odd) {
    animation: MoveLeft 24s -12s infinite linear; //24秒かけて-12秒後に無限ループさせる
  }

  &:nth-child(even) {
    animation: MoveLeft2 24s infinite linear; //24秒かけて無限ループさせる
  }
}
.c-text__item img {width: 100%;}

@keyframes MoveLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes MoveLeft2 {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}

*/


.btn_area {text-align: left !important;margin-top: 4%;}
.c-btn.slide {
  background:rgb(255, 255, 255, 0.6);
  color: #0088b3;display: inline-block;
  overflow: hidden;padding:.3rem 1.5rem .7rem;
  position: relative;border: solid 2px rgb(0, 136, 179, 0.6);border-radius: 100px;
  z-index: 1;font-size:1.15rem !important;
}
.c-btn.slide span {padding-left: 1% !important;color: #0088b3;}
.c-btn.slide::after {
  background: rgb(0, 136, 179, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}
.c-btn.slide:hover,.c-btn.slide:hover span {
  color: #fff;
}
.c-btn.slide:hover::after {
  transform: scale(1, 1);
}
 

.dli-arrow-right {
  display: inline-block;
  vertical-align: middle;
 color: #0088b3;
  line-height: 1;
  position: relative;
  width: 1em;
  height: 0.1em;
  background: currentColor;
}

.dli-arrow-right::before {
  content: '';
  width: 0.65em;
  height: 0.65em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(45deg);
  transform-origin: top right;
  position: absolute;
  top: 50%;
  right: -0.05em;
  box-sizing: border-box;
}

.info .first-item {
  background-image: url(../images/first-plan-bg.png);
}

.info .second-item {
  background-image: url(../images/second-plan-bg.png);
}

.info .third-item {
  background-image: url(../images/third-plan-bg.png);
}

.information-content__list {
    padding: 5px 0;list-style: none;margin:3% auto!important;width: 90%;
}


.information-content__list li {
    border-bottom: 1px solid #9fa0a0;font-size: 1.15rem !important;
    margin: 1% 0 15px;color: #231815;
    padding: 15px 1rem 1rem;
}
.information-content__list li span {display: inline-block;}
.information-content__list li a {
    display: flex;font-size: 1.15rem !important;
    justify-content: flex-start;color: #595757;margin-top:.5rem;
    align-items: center;display:block !important;margin-bottom: .5rem;
}

.information-content__list li p {
	font-size: 1.15rem;
	color: #595757;
}
.information-content__list-icon {
    width: 99px;
}

.information-content__list li .date {
    font-size: 1.15rem;;color: #898989;
}


.information-content__list li a:hover { color: #0088b3;}

.label1:after {
  content: "お知らせ";
  font-size: .9rem !important;
  background: #66b8d1;
  color: #fff;border-radius:20px;
  padding: 0.2em 2.8em;
 margin-right:.6em;margin-left: .6rem;
}

.label2:after {
  content: "グループホーム";
  font-size:.9rem !important;
  background: #42be85;border-radius:20px;
  color: #fff;
  padding: 0.2em 1.4em;
  margin-right:.6em;margin-left: .6rem;
}

.label3:after {
  content: "デイサービス";
  font-size:.9rem !important;border-radius:20px;
  background: #f9c573;
  color: #fff;
  padding: 0.2em 1.8em;
 margin-right:.6em;margin-left: .6rem;
}

.label4:after {
  content: "ヘルパーサービス";
  font-size:.9rem !important;border-radius:20px;
  background: #f9a9bb;
  color: #fff;
  padding: 0.2em .9em;
  margin-right:.6em;margin-left: .6rem;
}
.label4:after {
  content: "有料老人ホーム";
  font-size:.9rem !important;border-radius:20px;
  background: #f9a9bb;
  color: #fff;
  padding: 0.2em .9em;
  margin-right:.6em;margin-left: .6rem;
}


@media (max-width: 991.9px) {
.information-content__list {
    padding: 15px 2% 0;list-style: none;width:95%;
}
}
@media (max-width:434px) {
.information-content__list li span {display:block !important;}
.label1:after,.label2:after,.label3:after,.label4:after {margin-right:0;margin-left:0;}
	.information-content__list li {
    padding: 0 0 15px !important;
}
}


.text-overflow-lines {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:5;
    overflow: hidden;
}


.company_profile_in {max-width: 1100px; background:rgb(0, 136, 179, 0.6);padding:3% 1.5% !important;margin:7% auto 8%;z-index: 999 !important;position: relative;border-radius:20px;}
.table_back {background: #fff;padding:2% 3% !important;width: 85%;border-radius:20px;margin: 4% auto;}
/* table02 */
#table02 { width:100%; margin:2% auto 6%;font-size: 1.1rem;line-height: 2rem;color: #595757;border-radius:20px;}
#table02 tr {
  border-bottom: 2px solid #bbbbbc;
}

#table02 th,
#table02 td {
  padding: 24px 1rem;text-align: left;
  border: none;color: #595757 !important;
}

#table02 th {
  width:24%;border-bottom: 2px solid #54bade;
}




#googlemap02  {
	position: relative;max-width: 1100px;
	padding: 0 0 36%;width:100%;margin:auto;
	height: 0;border: solid 4px #fff;
	overflow: hidden;border-radius: 20px;

 }
#googlemap02 iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	min-height: 100% !important;

 }



@media only screen and (max-width:1199.8px) {
#table02,#googlemap02 {width:90%;}
.company_profile_in {padding: 1% 5% 3% !important;}
}

@media only screen and (max-width:991.8px) {
.table_back {width: 90%;}
#table02 {width:100%;}
#googlemap02  {margin: auto auto 8%;width: 100%;padding: 0 0 60%;}
.company_profile_in {margin-bottom:15%;}
}



/* sp */
@media only screen and (max-width:600px) {
.company_profile_in {padding: 1% 7% 3% !important;margin-top:13% !important;margin-bottom:17%;}	
  #table02 th,
  #table02 td {
    width: 95%;
    display: block;
  }
	#table02 tr {border-bottom: none;}
  #table02 th {
    width: 95%;
	  padding-top: 6%;
	  padding-bottom: 0%;
	}
  #table02 td {
	  padding-top: 5%;
	  padding-bottom: 5%;
  }
	
	
}

/*brのレスポンシブ対応*/
.sp_br {
	display: none;
}
@media screen and (max-width:600px){
	.sp_br {
		display: block;
}
}



.insta_area {width: 100%; margin:6% auto; max-width: 1100px;z-index: 99;}
@media screen and (max-width:600px){
.insta_area {
	width: 100%; margin:6% auto; max-width: 1100px;z-index: 99;
	padding-bottom: 100px;
	}
}

.snap_area span.mask{
  position:relative;/*背景色の基点となる位置を定義*/
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}

.snap_area span.mask::before{
  content:"";
  position: absolute;
  z-index: 2;
  left:0;
  top:0;
  opacity:0;/*透過0*/
  transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
    transform: translateY(100%);
  background:rgba(63, 57, 57, 0.7); 
  width:100%;
  height: 100%; 
}

.snap_area:hover span.mask::before{/*hoverした時の変化*/
  opacity:1;/*透過なしに変化*/
  transform: translateY(0);
}

.snap_area span.cap{/*画像の上のテキスト*/
  position: absolute;
  opacity:0;/*透過0*/
  transition: .5s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
  z-index:3;/*テキストを前面に出す*/
  top: 50%;
    left: 50%;font-size:1.5rem;
  transform: translate(-50%,-50%);/*テキストの位置中央指定*/
  color: #fff;/*テキストの色を変えたい場合はここを修正*/
    line-height: 1.5;/*行の高さを1.5にする*/
}

.snap_area:hover span.cap{/*hoverした時の変化*/
  opacity:1;/*透過なしに変化*/
}

@media (max-width:600px){
	
.snap_area span.mask::before{
  content:"";
  position: absolute;
  z-index: 2;
  left:0;
  top:0;
  opacity:0;/*透過0*/
  transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
    transform: translateY(100%);
  background:rgba(63, 57, 57, 0.7); 
  width:100%;
  height: 120px!important; 
}
.snap_area iframe {
	width: 100%!important;
	height: 110px!important;
}
}

.wrapper {overflow-x:hidden !important;}