@charset "UTF-8";
/*-----スマホログ用-------*/
.q-message-container.row {
  --bs-gutter-x: auto!important; }

.q-message-container.row > * {
  width: auto !important;
  flex-shrink: inherit !important; }

/*------for ECF efo chatbot--------*/
#smart-dialog input:focus,
#smart-dialog select:focus {
  border: 2px solid #fc6514;
  outline: 1px solid #fc6514;
  animation-name: focuswave;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: infinite; }

@keyframes focuswave {
  0% {
    border: 2px solid #fc6514;
    outline: 1px solid #fc6514;
    box-shadow: 0 0 0 1px #fc6514, 0 0 0 1px #fff, 0 0 0 2px #fc6514; }
  100% {
    border: 2px solid #fc6514;
    outline: 1px solid #fc6514;
    box-shadow: 0 0 0 1px #fc6514, 0 0 0 4px rgba(255, 255, 255, 0), 0 0 0 12px rgba(100, 37, 16, 0); } }
/*-----BASE--------*/
* {
  margin: 0;
  padding: 0; }

:root {
  scroll-behavior: unset !important; }

body {
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  background: #f1f2f3;
  color: #333333;
  position: relative;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal; }
  @media (max-width: 767px) {
    body {
      font-size: .95rem; } }

h1, h2, h3, h4, h5, h6 {
  line-height: 1.6 !important; }

a {
  color: #333333;
  text-decoration: underline; }
  a:hover {
    color: #333333;
    text-decoration: none; }

.container {
  width: 750px;
  margin: 0 auto;
  padding: 0;
  background: #fff; }
  @media (max-width: 767px) {
    .container {
      max-width: 100% !important; } }

.container_inner {
  background: #fff; }

.container_inner_padding {
  padding: 30px; }
  @media (max-width: 767px) {
    .container_inner_padding {
      padding: 15px; } }

.fc-white {
  color: #fff; }

.fs-small {
  font-size: .85rem;
  display: inline-block;
  line-height: 1.5; }
  @media (max-width: 575px) {
    .fs-small {
      font-size: .75rem; } }

.titlebar1 {
  font-size: 2.6rem;
  text-align: center;
  letter-spacing: .1rem;
  margin-right: -.2rem;
  font-weight: 600; }
  @media (max-width: 575px) {
    .titlebar1 {
      font-size: 1.5rem; } }

.titlebar1b {
  font-size: 2.2rem;
  text-align: center;
  letter-spacing: .1rem;
  margin-right: -.2rem;
  font-weight: 600; }
  @media (max-width: 575px) {
    .titlebar1b {
      font-size: 1.3rem; } }

.titlebar1 span, .titlebar2 span {
  font-weight: normal;
  font-size: 70%;
  font-weight: 400; }

.titlebar1 .titlesmall, .titlebar1b .titlesmall {
  font-size: 60%;
  font-weight: normal; }

/*----animation-----*/
@keyframes fadeRightLoop {
  0% {
    opacity: 0;
    transform: translateX(-20px); }
  50% {
    opacity: 1;
    transform: translateX(0); }
  100% {
    opacity: 0;
    transform: translateX(20px);
    /* 左に消える */ } }
.fade-right {
  animation: fadeRightLoop 1.2s ease-in infinite;
  /* 無限ループ */ }

@keyframes fadeDownLoop {
  0% {
    opacity: 0;
    transform: translateY(-30px);
    /* 上から開始 */ }
  30% {
    opacity: 1;
    transform: translateY(0); }
  70% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0;
    transform: translateY(30px);
    /* 下に消える */ } }
.fade-down {
  animation: fadeDownLoop 0.4s ease-in-out infinite; }

/*----FIX/CTAボタン-----*/
#fixCta {
  width: 160px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  -webkit-animation: fuwafuwa 2s infinite linear alternate;
  animation: fuwafuwa 2s infinite linear alternate;
  z-index: 998; }
  @media (max-width: 575px) {
    #fixCta {
      width: 100%;
      position: fixed;
      bottom: 0;
      right: 0;
      z-index: 998;
      animation: none;
      -webkit-animation: none; } }
  #fixCta img {
    width: 100%; }

@-webkit-keyframes fuwafuwa {
  0% {
    -webkit-transform: translateY(0); }
  50% {
    -webkit-transform: translateY(-10px); }
  100% {
    -webkit-transform: translateY(0); } }
@keyframes fuwafuwa {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(-10px); }
  100% {
    transform: translateY(0); } }
/*-----動画-----*/
.mov1 {
  width: 100%;
  height: 100%;
  vertical-align: middle; }

/*-----CTA--------*/
.coupon {
  background: #e5e5e4; }

.cta {
  background: url("https://d2w53g1q050m78.cloudfront.net/stenajp/uploads/lp/img/cta_bg.jpg") no-repeat #e1e1e1;
  background-size: 100% auto;
  position: relative;
  padding: 60px 40px; }
  @media (max-width: 575px) {
    .cta {
      padding: 30px 20px; } }

@keyframes shine {
  0% {
    left: -20%; }
  10% {
    left: 120%; }
  100% {
    left: 120%; } }
@keyframes brightness {
  0% {
    filter: brightness(100%); }
  10% {
    filter: brightness(115%); }
  50% {
    filter: brightness(100%); }
  60% {
    filter: brightness(108%); }
  100% {
    filter: brightness(105%); } }
@-webkit-keyframes pulsebtn {
  0% {
    -webkit-transform: scale(0.85); }
  100% {
    -webkit-transform: scale(1); } }
@-moz-keyframes pulsebtn {
  0% {
    -moz-transform: scale(0.85); }
  100% {
    -moz-transform: scale(1); } }
.shine {
  position: relative;
  display: block;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  /*--animation: pulsebtn 1.0s ease 0s infinite alternate;--*/ }
  .shine img {
    animation-name: brightness;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite; }
  .shine:after {
    content: '';
    position: absolute;
    top: -10%;
    left: -20%;
    width: 60px;
    height: 100%;
    transform: scale(2) rotate(15deg);
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.5) 100%, rgba(255, 255, 255, 0) 0%);
    animation-name: shine;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite; }

/*-----FV-----*/
.fvtitle {
  margin: 0;
  padding: 0; }

/*---VOICE-----*/
.voice {
  position: relative;
  background: -webkit-linear-gradient(top left, #8b94a3 0%, #9fa8b5 100%);
  background: -o-linear-gradient(top left, #8b94a3 0%, #9fa8b5 100%);
  background: linear-gradient(to bottom right, #8b94a3 0%, #9fa8b5 100%);
  padding: 100px 0;
  overflow: hidden; }
  @media (max-width: 767px) {
    .voice {
      padding: 70px 0; } }
  .voice:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 16.666%;
    height: 100%;
    background-image: url("https://d2w53g1q050m78.cloudfront.net/stenajp/uploads/lp/img/bg_voice.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% auto;
    pointer-events: none;
    z-index: 1; }
    @media (max-width: 767px) {
      .voice:before {
        width: 25%; } }

/*---design-----*/
.design {
  position: relative;
  background: #545662;
  padding: 100px 0;
  overflow: hidden; }
  @media (max-width: 767px) {
    .design {
      padding: 70px 0; } }
  .design:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 16.666%;
    height: 100%;
    background-image: url("https://d2w53g1q050m78.cloudfront.net/stenajp/uploads/lp/img/bg_design.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% auto;
    pointer-events: none;
    z-index: 1; }
    @media (max-width: 767px) {
      .design:before {
        width: 25%; } }

/*---feature-----*/
.feature {
  background: -webkit-linear-gradient(left, #8b94a3 0%, #c8cfd9 50%, #8b94a3 100%);
  background: -o-linear-gradient(left, #8b94a3 0%, #c8cfd9 50%, #8b94a3 100%);
  background: linear-gradient(to right, #8b94a3 0%, #c8cfd9 50%, #8b94a3 100%);
  padding: 100px 30px 50px 30px; }
  @media (max-width: 575px) {
    .feature {
      padding: 60px 15px 30px 15px; } }
  .feature .container_inner {
    margin-bottom: 6rem; }
    @media (max-width: 575px) {
      .feature .container_inner {
        margin-bottom: 3rem; } }

.feature-movbg {
  margin-top: 4rem;
  position: relative; }
  @media (max-width: 575px) {
    .feature-movbg {
      margin-top: 2rem; } }
  .feature-movbg .feature_mov1 {
    width: 47%;
    display: block;
    position: absolute;
    left: 0;
    bottom: 34%; }
  .feature-movbg .feature_mov2 {
    width: 47%;
    display: block;
    position: absolute;
    right: 0;
    bottom: 4%; }
  .feature-movbg .feature_mov3 {
    width: 37%;
    display: block;
    position: absolute;
    left: 0;
    bottom: 7%; }

.feature2 {
  background: #666a78;
  text-align: center;
  padding: 70px 40px 25px 40px; }
  @media (max-width: 575px) {
    .feature2 {
      padding: 35px 20px 20px 20px; } }

.feature3 {
  background: #0f0f0d;
  padding: 70px 40px 70px 40px;
  color: #fff; }
  @media (max-width: 575px) {
    .feature3 {
      padding: 35px 20px 35px 20px; } }

.tank {
  background: #545662; }

.method {
  background: #eceef7;
  padding: 5rem 0; }
  @media (max-width: 575px) {
    .method {
      padding: 3rem 0; } }

.rec {
  background: #9aa4b7; }
  .rec .rec-movbg {
    position: relative; }
    .rec .rec-movbg .rec_mov1 {
      width: 47%;
      display: block;
      position: absolute;
      right: 0;
      bottom: 0; }

.spec {
  text-align: center;
  padding: 3rem 0 5rem 0; }
  @media (max-width: 575px) {
    .spec {
      padding: 2rem 0 3rem 0; } }

#qa {
  background: #e2e4e8;
  padding: 100px 40px; }
  @media (max-width: 575px) {
    #qa {
      padding: 30px 20px; } }
  #qa .accordion {
    margin-bottom: 3rem; }
  #qa .accordion-item {
    border-bottom: 1px solid #c2c2c2 !important; }
  #qa .accordion-button {
    background: url("https://d2w53g1q050m78.cloudfront.net/stenajp/uploads/lp/img/qa-icon-q.png") no-repeat 0 50% #e2e4e8 !important;
    background-size: 41px 41px !important;
    font-weight: 600;
    font-size: 1.2rem;
    padding: 1.6rem 1.6rem 1.6rem 4rem;
    line-height: 1.4; }
    @media (max-width: 767px) {
      #qa .accordion-button {
        background: url("https://d2w53g1q050m78.cloudfront.net/stenajp/uploads/lp/img/qa-icon-q.png") no-repeat 0 50% #e2e4e8 !important;
        font-size: .95rem;
        background-size: 26px 26px !important;
        padding: 1.2rem 1rem 1.2rem 2.5rem; } }
  #qa .accordion-collapse {
    padding: 1rem;
    font-size: 1.2rem;
    font-weight: 600; }
    @media (max-width: 575px) {
      #qa .accordion-collapse {
        font-size: .95rem;
        padding: 0; } }

.footer {
  color: #fff;
  text-align: center;
  background: #262626;
  font-size: .9rem;
  padding: 3.5rem 0; }
  @media (max-width: 575px) {
    .footer {
      font-size: .8rem; } }