/*
prefix: scs (SCS {lp site})
*/

body ,html {
padding: 0;
margin: 0;
top:0;
bottom:0;
left:0;
right: 0;
overflow-x: hidden!important;
}

*::-webkit-scrollbar {
/* chrome hide scrollbar bar */
display: none;
}

a {
text-decoration: none;
color: #000;
}

form,
input,
textarea {
-moz-user-select: all !important;
-webkit-user-select: all !important;
-ms-user-select: all !important;
user-select: all !important;
-webkit-user-select: text !important;
}

:root {
  --main-color-orange: #f39b33;
  --main-color-green: #8bc34a;
  --main-color-black: #5e6569;
  --main-color-big-tt: #00b292;
}

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

.body-font-size{
font-size: 1.25rem;
}

.hover{
font-size: 20px;
}

.hover:hover{
color:var(--main-color-orange);
}

.hover-opacity:hover{
opacity: 0.61!important;
}

.contact-btt-top{
color: #fff;
background-color: var(--main-color-orange);
}

.contact-btt-top:hover{
color: #fff;
background-color: var(--main-color-green);
}

.app-orange-tt{
color: var(--main-color-orange);
}

.app-green-tt{
color: var(--main-color-green);
}
.app-black-tt{
color: var(--main-color-black);
}

.app-big-tt-color{
color:var(--main-color-big-tt);
}

/* for background image amd color */
.section-background-1{
background-image: url('../images/image/background-1.svg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding: 1rem 0 3rem 0;
}

.section-about_scs{
background-image: url('../images/image/background-2.svg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding: 1rem 0rem;
}

.section-background-2{
background-image: url('../images/image/background-3.svg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding: 1rem 0 3rem 0;
}

.section-background{
background-image: url('../images/image/scs-meaning.png');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding: 1rem 0 3rem 0;
}

.section-company-overview{
background-image: url('../images/image/not-leaf-background-1.png');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding: 1rem 0rem;
}

.section-features{
background-image: url('../images/image/background-2.svg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding: 1rem 0rem;
}

.section-background-white{
background: #fff;
padding: 1rem 0rem;
}
/* end background image amd color */

.wrapper {
display: flex;
align-items: center;
align-content: center;
justify-content: flex-end;
/* margin-top:6.5rem; */
white-space: nowrap;
}

/* for service */
.circle-singleline {
margin: 20px;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 28px;
line-height: 20px;
text-align: center;
background:var(--main-color-orange);
color: #fff;
padding: 10px;
line-height: 2;
}
/* end service */


/* for slide css*/
.top_section_sub{
  position: absolute;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: flex-end;
  bottom: 1%;
}
.diamond {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
}

.top-img-section{
height: 37vh;
object-fit: cover;
}
.point-image{
height: 16vh;
object-fit: cover;
}

.top_section
{
height:85vh;
background: #fceabb; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #fceabb 50%, #8bc34a 50%, #f8b500 100%, #fbdf93 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #fceabb 50%,#8bc34a 50%,#f8b500 100%,#fbdf93 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #fceabb 50%,#8bc34a 50%,#f8b500 100%,#fbdf93 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
display:flex;
}
.tokucho-div {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
}
.tokucho {
display: flex; /* or inline-flex */
align-items: center;
justify-content: center;
}
.span-1{
color: #fff;
background-color: var(--main-color-big-tt);
}
.span-2{
color: #fff;
background-color: var(--main-color-orange);
}
.span-3{
color: #fff;
background-color: var(--main-color-green);
}
.span-1:hover{
background-color: #009688;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.span-2:hover{
background-color: #ef860a;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.span-3:hover{
background-color:#68bd05;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

.circle {
width: 150px;
height: 150px;
border-radius: 50%;
display: flex; /* or inline-flex */
align-items: center;
justify-content: center;
margin: 0 6px 0 6px;
font-size: 22px;
}
.badge {
background-color: #ee7e08;
border: 2px solid white;
border-radius: 50%;
box-shadow: 1px 1px 1px black;
color: white;
font: bold 15px/13px Helvetica, Verdana, Tahoma;
height: 50px;
min-width: 70px;
padding: 17px 0px 0 0px;
text-align: center;
font-size: 50px;
}
.badge-title{
color: #fff;
font-size: 30px;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
.mb-tokucho-div-display-block{
display: none;
}
.my-5-margin{
margin-top: 3rem;
margin-bottom: 3rem;
}
/* end slide css*/


/* for header */
.navbar-toggler {
border-color: rgb(139 195 74)!important;
}
.navbar-toggler:hover {
border-color: rgb(242 143 75)!important;
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(139 195 74)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}
.navbar-toggler-icon:hover {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(242 143 75)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}
.display-contact-mb-sm{
display: none;
}
/* end header */

/* start question css */
.collapsible {
  background-color: #81c784;
  color: #000;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
  font-weight: 600;
}
.collapsible:first-letter {
  font-size: 1.5em;
  font-weight: 900;
  color: var(--main-color-orange);
}
.collapsible-p{
  font-size: 18px;
  font-weight: 600;
}
.collapsible-p:first-letter {
  font-size: 1.2em;
  font-weight: 900;
  color: var(--main-color-green);
}
.active, .collapsible:hover {
  background-color: #4caf50;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
.padding{
  padding: 15px;
}
/* end question css */


/* Contact section css */
.confirmation-contact {
position: relative;
top: -400px;
}
.iso-code-group {
display: flex;
}
.scs-phone {
width: 75%;
}

.scs-btn-custom {
color: #fff;
background-color: var(--main-color-green);
border-color:var(--main-color-green)!important;
margin-left: 1.2rem;
}
.scs-btn-custom:hover {
background-color: #8bc449a8;
color: white;
}
.scs-policy-title {
font-weight: bold;
}

.scs-contact-wrapper {
padding: 4rem 4rem;
padding-bottom: 2rem;
background-color: rgba(255, 255, 255, .75);
margin: 4em 0em;
border: 1px solid #4caf50;
}

.scs-btn-back {
background-color:#f39b33 ;
color: white;
}

.scs-btn-back:hover {
background-color: #f39b33b8;
color: white;
}

.scs-form-element {
padding: 0.5rem 0rem;
}

.scs-input {
height: 3rem;
background-color: #ededed;
}

.scs-msg-input {
background-color: #ededed;
}

.scs-checkbox {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}

.scs-check-label {
height: 22px !important;
}

.scs-privacy-policy {
height: 10rem;
border: 1px solid rgba(0, 0, 0, 0.3);
padding: 0em 1em;
margin: 1em 0em;
overflow-y: scroll;
}

.inactive {
display: none !important;
}

.error {
padding: 1em;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ff0000;
background: rgba(192, 0, 0, 0.25);
}

.error p {
color: #ff0000;
}

.err-name,
.err-email,
.err-message {
color: #ff0000;
padding: .25em 0em;
}

.svg-btn {
width: 170px;
height: 170px;
pointer-events: none;
}

.svg-btn:focus{
outline: none !important;
border: none !important;
}

.scs-btn-wrapper {
padding: 1rem 0rem;
}

.scs-form-btn {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}

.scs-information {
padding: 1em 0em;
text-align: center;
}


/* start footer css */
.footer-img{
height: 15vh;
object-fit: cover;
}
.img-footer{
width: 20%;
}

.text-container {
padding: 1em 0em;
}

.scs-logo-title {
font-size: 1.6rem;
font-family: 'effra'
}

.scs-logo-sub-title {
font-size: 1.65rem;
display: block;
}

.scs-content-wrapper {
border-left: 1px solid #fff;
}

.scs-sns-conent {
display: flex;
align-items: center;
justify-content: center;
align-content: center;
padding: 0 0 1.2rem 0;
}

.scs-sns-conent img {
width: 2.55rem;
margin-left: 1.85rem;
}

.scs-address {
padding: 0;
display: flex;
flex-direction: column;
/* align-items: center; */
}
.scs-address-tt{
text-align: left;
color: #fff;
}
.disabled {
pointer-events: none;
color: #fff;
}
.scs-copywrite {
color: #fff;
padding: 2rem 0 0 0;
text-align: center;
}
.scs-content-wrapper-center{
display: flex;
flex-direction: column;
align-items: center;
}
.img-fluid-center{
display: flex;
align-items: center;
}
.img-footer{
height: 30vh;
object-fit: cover;
}

.scs-section-title {
font-size: 2.5em;
font-family: 'bickham';
}

.scs-map {
width: 100%;
height: 320px;
}

.gmap_canvas {
height: 320px;
}

.scs-go-to-top {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
background-color: #8bc349;
border: 1px solid #fff;
width: 60px;
height: 60px;
border-radius: 100%;
color: #fff;
right: 10px;
bottom: 20px;
z-index: 90;
}

.transitionFiveSec,
.scs-go-to-top {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.scs-go-to-top:hover {
background-color: #fff;
color: #8bc349;
border: 1px solid #8bc349;
}

.display-5{
color: var(--main-color-orange);
font-weight: bold;
}
/* end footer css */


/* Start features css */
.bi_title{
margin-right: 1rem;
}
.pb-2{
font-size: 40px;
}
/* end features css */


/* start point css */

.about-scs-tt{
position: relative;
background: transparent;
line-height: 1.4;
padding: 0.4em 0.5em;
margin: 2em 0 0.5em;
padding-left: 2em;
color: var(--main-color-black);
}

.about-scs-tt-span{
position: absolute;
top: auto;
left: 0;
padding: 0 0.5rem;
color: #ffffff;
background: #ffe0b2;
border-radius: 50%;
}

.about-scs-tt:after {
/*タブ*/
position: absolute;
font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
font-weight: 900;
background: #80c8d1;
content: '\f0a7\ POINT';
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 5px 7px 3px;
font-size: 0.7em;
line-height: 1;
letter-spacing: 0.05em;
}
.about-scs-tt-1{
  border-top: solid 2px var(--main-color-big-tt);
  border-bottom: solid 2px var(--main-color-big-tt);
}
.about-scs-tt-1:after {
  background: var(--main-color-big-tt);
}
.about-scs-tt-2{
  border-top: solid 2px #f39e3b;
  border-bottom: solid 2px #f39e3b;
}
.about-scs-tt-2:after {
  background: #f39e3b;
}
.about-scs-tt-3{
  border-top: solid 2px var(--main-color-green);
  border-bottom: solid 2px var(--main-color-green);
}
.about-scs-tt-3:after {
  background: var(--main-color-green);
}
.bg-color-1{
background: #00948512;
}
.bg-color-2{
background: #f39a3512;
}
.bg-color-3{
background: #8bc34b12;
}
/* end point css */

/* start about_scs */
#atlanticlight button svg {/* play video */
     fill: #000!important;
   }
   #atlanticlight {
 position: relative;
 font-size: 0;
 width: 100%;
 margin: 0 auto;
}
#atlanticlight video,
#atlanticlight button {
 width: 100%;
 height: auto;
 border-radius: 10px;
}

#atlanticlight button svg {
 width: 50%;
 margin: 0 auto;
}

#atlanticlight video,
#atlanticlight button {
 position: absolute;
 top: 0;
}

#atlanticlight button {
 background: transparent;
 outline: none;
 border: none;
 cursor: pointer;
}

#atlanticlight button svg {
 fill: #fff;
 /* padding: 13rem; */
 transition: .6s opacity;
}
#atlanticlight video, #atlanticlight button {
   top: 2rem;
}
#playpause {
 display: none;
}

.playing {
 opacity: 0;
}
.modal{
 background-color: rgba(0,0,0,0.6)!important;
}
.modal-content {
   position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
   pointer-events: auto;
   background-color: transparent;
   background-clip: padding-box;
   border: none!important;
   border-radius: 0.3rem;
   outline: 0;
}
.modal-header {
 border-style: none!important;
 justify-content: flex-end!important;
}
/* The Close Button */
.close {
   font-weight: bold;
   background: #f44336;
   border-radius: 50%;
   width: 35px;
   height: 35px;
   transform: scale(1.1);
}
.modal-header .btn-close {
   padding: 0px 17px 13px 2px!important;
 }

.close:hover,
.close:focus {
 background:#d2b8b1;
 text-decoration: none;
 cursor: pointer;
}
/* the introducation button  */
.cta {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
padding: 5px 20px;
text-decoration: none;
font-size: 26px;
color: #fff;
background: var(--main-color-green);
transition: 1s;
box-shadow: 6px 6px 0 var(--main-color-black);
transform: skewX(-15deg);
}

.cta:focus {
outline: none;
}

.cta:hover {
transition: 0.5s;
box-shadow: 10px 10px 0 #FBC638;
white-space: nowrap;
}

.cta span:nth-child(2) {
transition: 0.5s;
margin-right: 0px;
}

.cta:hover  span:nth-child(2) {
transition: 0.5s;
margin-right: 45px;
}

path.one {
transition: 0.4s;
transform: translateX(-60%);
}

path.two {
transition: 0.5s;
transform: translateX(-30%);
}

.cta:hover path.three {
animation: color_anim 1s infinite 0.2s;
}

.cta:hover path.one {
transform: translateX(0%);
animation: color_anim 1s infinite 0.6s;
}

.cta:hover path.two {
transform: translateX(0%);
animation: color_anim 1s infinite 0.4s;
}

/* SVG animations */

@keyframes color_anim {
0% {
fill: white;
}
50% {
fill: #FBC638;
}
100% {
fill: white;
}
}
/* end about_scs */