@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 100;
  src: url("/font/NotoSansJP-Thin.woff2") format('woff2'), url("/font/NotoSansJP-Thin.woff") format('woff'), url("/font/NotoSansJP-Thin.otf") format('opentype');
}
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 200;
  src: url("/font/NotoSansJP-Light.woff2") format('woff2'), url("/font/NotoSansJP-Light.woff") format('woff'), url("/font/NotoSansJP-Light.otf") format('opentype');
}
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 300;
  src: url("/font/NotoSansJP-DemiLight.woff2") format('woff2'), url("/font/NotoSansJP-DemiLight.woff") format('woff'), url("/font/NotoSansJP-DemiLight.otf") format('opentype');
}
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 400;
  src: url("/font/NotoSansJP-Regular.woff2") format('woff2'), url("/font/NotoSansJP-Regular.woff") format('woff'), url("/font/NotoSansJP-Regular.otf") format('opentype');
}
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 500;
  src: url("/font/NotoSansJP-Medium.woff2") format('woff2'), url("/font/NotoSansJP-Medium.woff") format('woff'), url("/font/NotoSansJP-Medium.otf") format('opentype');
}
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 700;
  src: url("/font/NotoSansJP-Bold.woff2") format('woff2'), url("/font/NotoSansJP-Bold.woff") format('woff'), url("/font/NotoSansJP-Bold.otf") format('opentype');
}
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 900;
  src: url("/font/NotoSansJP-Black.woff2") format('woff2'), url("/font/NotoSansJP-Black.woff") format('woff'), url("/font/NotoSansJP-Black.otf") format('opentype');
}
/* ========================================================================
   Component: Common
========================================================================== */
html {
  font-size: 62.5%;
}
body {
  font-size: 1.6rem;
  font-weight: 500;
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
  color: #004036;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
menu,
nav,
section,
time,
mark,
audio,
video,
details,
summary {
  line-height: 1.6em;
}
button,
a {
  font-family: 'Noto Sans Japanese';
  color: #004036;
}
button {
  outline: 0;
  border: 0;
}
main {
  position: relative;
}
main:before {
  content: "";
  background: #f5f6f8;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
ul,
ol,
li,
.list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.list-asterisk > li,
.list-bullet > li {
  position: relative;
  padding-left: 1em;
  counter-increment: cnt;
  line-height: 1.6;
}
.list-asterisk > li::before,
.list-bullet > li::before {
  position: absolute;
  top: 0;
  left: 0;
  width: $list-bullet-size;
  height: $list-bullet-size;
}
.list-asterisk,
.list-bullet,
.list-asterisk-num {
  font-size: 1.2rem;
}
.list-asterisk > li {
  padding-left: $list-bullet-size;
}
.list-asterisk > li::before {
  content: "※";
}
.list-bullet > li {
  padding-left: $list-bullet-size;
}
.list-bullet > li::before {
  content: "・";
}
.list ul,
.list ol {
  counter-reset: cnt;
}
.list-asterisk-num > li {
  position: relative;
  padding-left: 1.5em;
  counter-increment: cnt;
}
.list-asterisk-num > li::before {
  position: absolute;
  top: 0;
  left: 0;
  width: $list-bullet-size;
  height: $list-bullet-size;
}
.list-asterisk-num > li {
  padding-left: 2em;
}
.list-asterisk-num > li::before {
  content: "※" counter(cnt);
}
.show-sp {
  display: none !important;
}
@media screen and (max-width: 820px) {
  .show-sp {
    display: inherit !important;
  }
}
@media screen and (max-width: 820px) {
  .show-pc {
    display: none !important;
  }
}
sup {
  font-size: 1rem;
}
.wrapper {
  overflow: hidden;
}
a {
  transition: 0.3s;
  cursor: pointer;
}
* {
  box-sizing: border-box;
}
a:hover {
  opacity: 0.6;
}
img {
  max-width: inherit;
}
@media screen and (max-width: 640px) {
  img {
    height: auto;
  }
}
picture img {
  max-width: inherit;
}
@media screen and (max-width: 780px) {
  picture img {
    max-width: 100%;
    height: auto;
  }
}
.text-link {
  text-decoration: underline;
}
.text-link:hover {
  text-decoration: none;
}
/* ========================================================================
   Component: cta
========================================================================== */
.cta {
  background: url("/images/service/virtual_restaurant/bg_cta.svg") no-repeat;
  background-size: cover;
  padding: 64px 20px;
}
.cta-button {
  position: relative;
  display: block;
  width: 100%;
  max-width: 560px;
  line-height: 85px;
  margin: auto;
  background: linear-gradient(to bottom, #f46411 0%, #f46411 50%, #f0540e 50%, #f0540e 100%);
  font-size: 2.2rem;
  font-weight: bold;
  color: #fff;
  text-align: center;
  border-radius: 50px;
  border: 4px solid #fff;
  box-shadow: 0px 10px 10px rgba(95,108,136,0.302);
  transition: 0.3s;
}
@media screen and (max-width: 480px) {
  .cta-button {
    font-size: 1.8rem;
    line-height: 70px;
  }
}
.cta-button span {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffdb46;
  border-radius: 50px;
  font-size: 15px;
  color: #004036;
  line-height: 1.1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  margin: auto;
}
@media screen and (max-width: 480px) {
  .cta-button span {
    left: 10px;
  }
}
.cta-button:after {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  right: 30px;
  top: 0;
  bottom: 0;
  margin: auto;
}
@media screen and (max-width: 480px) {
  .cta-button:after {
    right: 15px;
  }
}
.cta-button:hover {
  opacity: 0.7;
}
.cta-button:hover:before {
  border: 3px solid transparent;
}
.cta-catch {
  text-align: center;
  font-size: 2.4rem;
  font-weight: bold;
  margin-bottom: 20px;
}
@media screen and (max-width: 1200px) {
  .cta-catch {
    font-size: clamp(10px, 1.666666666666667vw, 24px);
  }
}
@media screen and (max-width: 820px) {
  .cta-catch {
    font-size: 1.6rem;
  }
}
.cta-catch span {
  position: relative;
}
@media screen and (min-width: 481px) {
  .cta-catch span:before,
  .cta-catch span:after {
    content: "";
    display: block;
    width: 2px;
    height: 80%;
    background: #004036;
    position: absolute;
    bottom: 0;
  }
  .cta-catch span:before {
    left: -20px;
    transform: rotate(-45deg);
  }
  .cta-catch span:after {
    right: -20px;
    transform: rotate(45deg);
  }
}
/* ========================================================================
   Component: section
========================================================================== */
.section-inner {
  width: 100%;
  max-width: 1120px;
  margin: auto;
  padding: 0 20px;
}
.section-title {
  font-size: clamp(10px, 2.638888888888889vw, 38px);
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 20px;
}
@media screen and (max-width: 820px) {
  .section-title {
    font-size: 3.6rem;
  }
}
@media screen and (max-width: 480px) {
  .section-title {
    font-size: 2.8rem;
  }
}
.section-title span {
  font-size: clamp(10px, 1.666666666666667vw, 24px);
}
@media screen and (max-width: 480px) {
  .section-title span {
    font-size: 1.4rem;
  }
}
.section-subtitle {
  font-size: clamp(10px, 1.388888888888889vw, 20px);
  font-weight: bold;
  color: #27a08d;
  text-align: center;
  margin-bottom: 10px;
}
@media screen and (max-width: 820px) {
  .section-subtitle {
    font-size: 1.6rem;
  }
}
.section-lead {
  font-size: 1.8rem;
}
@media screen and (min-width: 481px) {
  .section-lead {
    text-align: center;
  }
}
@media screen and (max-width: 820px) {
  .section-lead {
    font-size: 1.6rem;
  }
}
/* ========================================================================
   Component: header
========================================================================== */
.header-corp {
  z-index: 4;
}
.header {
  z-index: 3;
  width: 100%;
}
@media screen and (max-width: 1024px) {
  .header {
    height: 60px;
    box-sizing: border-box;
    position: relative;
    background: #fff;
  }
}
@media screen and (max-width: 1024px) {
  .header:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
}
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (min-width: 1024px) {
  .header-inner {
    padding: 18px 20px;
  }
}
.header-logo {
  display: flex;
  align-items: center;
  line-height: 1;
}
.header-logo a {
  margin-right: 20px;
}
@media screen and (max-width: 1024px) {
  .header-logo a {
    margin-right: 0;
    margin-left: 8px;
  }
}
.header-logo a:nth-child(2) {
  display: none;
}
@media screen and (max-width: 1024px) {
  .header-logo a:nth-child(2) img {
    height: 22px;
  }
}
@media screen and (max-width: 767px) {
  .header-logo img {
    width: auto;
    height: 28px;
  }
}
.header-button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  text-align: center;
  line-height: 60px;
  background: linear-gradient(to bottom, #f46411 0%, #f46411 50%, #f0540e 50%, #f0540e 100%);
  position: relative;
}
@media screen and (max-width: 1024px) {
  .header-button {
    padding: 0 2.777777777777778vw;
  }
}
@media screen and (min-width: 1025px) {
  .header-button {
    height: 60px;
    border-radius: 50px;
    padding: 0;
    width: 200px;
    box-sizing: border-box;
    border: 2px solid #fff;
  }
}
@media screen and (max-width: 480px) {
  .header-button {
    font-size: 1.2rem;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2.083333333333333vw;
  }
}
@media screen and (max-width: 360px) {
  .header-button {
    font-size: clamp(10px, 1.25vw, 18px);
    padding: 0 1.388888888888889vw;
  }
}
@media screen and (min-width: 821px) {
  .header-button::before {
    content: "";
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    position: absolute;
    right: 15px;
    top: 0;
    bottom: 0;
    margin: auto;
  }
}
.header-button:hover {
  outline: 2px solid transparent;
  opacity: 0.7;
}
.header-button-online {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  font-size: 1.4rem;
  line-height: 1;
  color: #fff;
  text-align: center;
  padding: 0 1.736111111111111vw;
  background: linear-gradient(to bottom, #f46411 0%, #f46411 50%, #f0540e 50%, #f0540e 100%);
  position: relative;
  background: #27a08d;
}
@media screen and (min-width: 1025px) {
  .header-button-online {
    border-radius: 50px;
    width: 200px;
    box-sizing: border-box;
    border: 2px solid #fff;
    padding: 0;
  }
}
@media screen and (max-width: 480px) {
  .header-button-online {
    padding: 0 5px;
  }
}
.header-button-online span {
  display: inline-block;
  line-height: 1.2;
}
@media screen and (max-width: 480px) {
  .header-button-online span {
    font-size: clamp(10px, 1.25vw, 18px);
  }
}
@media screen and (max-width: 480px) {
  .header-button-online span small {
    font-size: clamp(10px, 0.972222222222222vw, 14px);
  }
}
@media screen and (min-width: 821px) {
  .header-button-online::before {
    content: "";
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    position: absolute;
    right: 15px;
    top: 0;
    bottom: 0;
    margin: auto;
  }
}
.header-button-online:hover {
  outline: 2px solid transparent;
  opacity: 0.7;
}
@media screen and (min-width: 1025px) {
  .header-button-online.tab {
    display: none;
  }
}
@media screen and (min-width: 1025px) {
  .header-button.tab {
    display: none;
  }
}
.header-navi {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 1024px) {
  .header-nav {
    margin: 0;
    display: block;
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 58px;
    left: 0;
    background: #fff;
    transform: translateY(-120%);
    transition: transform, 400ms;
    z-index: -2;
  }
}
@media screen and (max-width: 480px) {
  .header-nav {
    top: 60px;
  }
}
.header-nav-button {
  height: 60px;
  line-height: 60px;
  padding: 0 30px;
}
@media screen and (max-width: 1024px) {
  .header-nav-button {
    max-width: 400px;
    margin: auto;
  }
}
@media screen and (min-width: 1025px) {
  .header-nav-list {
    display: flex;
    align-items: center;
  }
}
@media screen and (max-width: 1024px) {
  .header-nav-list {
    width: 100%;
    padding: 40px 20px;
    margin: auto;
  }
}
@media screen and (max-width: 480px) {
  .header-nav-list {
    padding: 20px;
  }
}
@media screen and (min-width: 1025px) {
  .header-nav-list > li {
    padding: 0 12px;
  }
}
@media screen and (max-width: 1024px) {
  .header-nav-list > li {
    margin-bottom: 0;
    text-align: center;
  }
}
.header-nav-list > li:first-child button {
  color: #3f84a7;
  padding: 0 25px 0 50px;
}
@media screen and (min-width: 1025px) {
  .header-nav-list > li:last-child {
    padding: 0 0 0 14px;
  }
}
@media screen and (max-width: 1024px) {
  .header-nav-list > li.show-pc {
    display: none !important;
  }
}
@media screen and (min-width: 1025px) {
  .header-nav-list > li.show-sp {
    display: none !important;
  }
}
@media screen and (max-width: 1024px) {
  .header-nav-list > li.show-sp {
    display: inherit !important;
  }
}
.header-nav-list > li a,
.header-nav-list > li button {
  font-size: clamp(10px, 1.111111111111111vw, 16px);
  font-weight: bold;
}
@media screen and (max-width: 1024px) {
  .header-nav-list > li a,
  .header-nav-list > li button {
    display: block;
    font-size: 1.8rem;
    font-weight: bold;
  }
}
@media screen and (max-width: 1024px) {
  .header-nav-list > li > a {
    width: 100%;
    position: relative;
    padding: 20px 10px;
  }
}
@media screen and (max-width: 1024px) {
  .header-nav-list > li > a:after {
    content: "";
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    position: absolute;
    right: 15px;
    top: 0;
    bottom: 0;
    margin: auto;
  }
}
.header-nav-list > li > button {
  position: relative;
}
@media screen and (max-width: 1024px) {
  .header-nav-list > li > button {
    width: 200px;
    position: relative;
    padding: 10px 60px;
    border-radius: 50px;
    border: 1px solid #004036;
    margin: 40px auto 0;
    background: #fff;
    font-size: 1.4rem;
    font-weight: bold;
  }
}
@media screen and (max-width: 1024px) {
  .header-nav-list > li > button:before,
  .header-nav-list > li > button:after {
    content: "";
    width: 14px;
    height: 2px;
    background: #004036;
    position: absolute;
    right: 15px;
    top: 0;
    bottom: 0;
    margin: auto;
  }
}
@media screen and (max-width: 1024px) {
  .header-nav-list > li > button:before {
    transform: rotate(-45deg);
  }
}
@media screen and (max-width: 1024px) {
  .header-nav-list > li > button:after {
    transform: rotate(45deg);
  }
}
@media screen and (min-width: 1025px) {
  .header-nav-list > li.is-active .header-nav-list-pulldown {
    visibility: visible;
    opacity: 1;
    transition-duration: 500ms;
    padding: 30px;
  }
}
@media screen and (max-width: 1024px) {
  .header-nav-list > li.is-active .header-nav-list-pulldown {
    max-height: 500px;
  }
}
@media screen and (min-width: 1025px) {
  .header-nav-list-menu button {
    height: 60px;
    line-height: 60px;
  }
}
.hamburger {
  position: relative;
  padding: 5px 18px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
  z-index: 2;
}
@media screen and (min-width: 1025px) {
  .hamburger {
    display: none;
  }
}
.hamburger-box {
  width: 20px;
  height: 20px;
  display: inline-block;
  position: relative;
}
.hamburger-box:after {
  content: "メニュー";
  font-size: 9px;
  font-weight: bold;
  white-space: nowrap;
  position: absolute;
  bottom: -17px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  line-height: 1;
}
.hamburger-inner {
  top: 3px;
  left: 0;
}
.hamburger-inner:before,
.hamburger-inner:after {
  content: "";
  position: absolute;
  left: 0;
}
.hamburger-inner:before {
  top: 8px;
  transition-property: transform, opacity;
  transition-timing-function: ease;
  transition-duration: 0.15s;
}
.hamburger-inner:after {
  top: 16px;
}
.hamburger-inner,
.hamburger-inner:before,
.hamburger-inner:after {
  background-color: #41464c;
  height: 2px;
  width: 20px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}
.is-active .hamburger-inner {
  transform: translate3d(0, 8px, 0) rotate(45deg);
}
.is-active .hamburger-inner:before {
  transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
  opacity: 0;
}
.is-active .hamburger-inner:after {
  transform: translate3d(0, -16px, 0) rotate(-90deg);
}
.is-active .hamburger-box:after {
  content: "閉じる";
}
.header.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
}
@media screen and (max-width: 1024px) {
  .header.is-fixed .header-nav {
    top: 60px;
  }
}
@media screen and (max-width: 1024px) {
  .header.is-active .header-nav {
    transform: translateY(0vh);
  }
}
/* ========================================================================
   Component: mainvisual
========================================================================== */
.mainvisual {
  padding: 60px 0 160px;
  position: relative;
}
@media screen and (max-width: 1024px) {
  .mainvisual {
    padding: 50px 20px 120px;
  }
}
.mainvisual::before {
  content: "";
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: calc(100% + 95px);
  position: absolute;
  top: -95px;
  left: 0;
  z-index: -1;
}
.webp .mainvisual::before {
  background-image: url("/images/service/virtual_restaurant/bg.png.webp") !important;
}
.no-webp .mainvisual::before {
  background-image: url("/images/service/virtual_restaurant/bg.png");
}
@media screen and (max-width: 480px) {
  .mainvisual::before {
    background-size: cover;
  }
  .webp .mainvisual::before {
    background-image: url("/images/service/virtual_restaurant/bg_mainvisual_sp.png.webp") !important;
  }
  .no-webp .mainvisual::before {
    background-image: url("/images/service/virtual_restaurant/bg_mainvisual_sp.png");
  }
}
.mainvisual-inner {
  width: 50vw;
  max-width: 720px;
  margin: auto;
}
@media screen and (max-width: 820px) {
  .mainvisual-inner {
    width: 70%;
  }
}
@media screen and (max-width: 787px) {
  .mainvisual-inner {
    width: 100%;
  }
}
.mainvisual-content {
  background: #fff;
  border: 4px solid #004036;
  border-radius: 40px;
  box-shadow: 0px 15px 15px rgba(0,0,0,0.1);
  text-align: center;
  font-weight: bold;
  position: relative;
}
.mainvisual-content-inner {
  padding: 30px 10px 60px;
}
@media screen and (max-width: 480px) {
  .mainvisual-content-inner {
    padding: 30px 10px 60px;
  }
}
.mainvisual-subtitle {
  width: 314px;
  text-align: center;
  border: 2px solid #004036;
  background: #fff;
  margin: -19px auto 0;
  padding: 5px 10px;
  position: relative;
}
@media screen and (max-width: 480px) {
  .mainvisual-subtitle {
    width: 82%;
    margin: -15px auto 0;
  }
}
.mainvisual-subtitle span {
  font-size: 3.2rem;
  line-height: 1;
}
.mainvisual-subtitle:before,
.mainvisual-subtitle:after {
  content: "";
  border-style: solid;
  position: absolute;
  top: -2px;
}
.mainvisual-subtitle:before {
  border-width: 0 0 15px 12px;
  border-color: transparent transparent #005356 transparent;
  left: -12px;
}
.mainvisual-subtitle:after {
  border-width: 15px 0 0 12px;
  border-color: transparent transparent transparent #005356;
  right: -12px;
}
.mainvisual-catch {
  font-size: 2.4rem;
}
@media screen and (max-width: 820px) {
  .mainvisual-catch {
    font-size: 1.8rem;
  }
}
.mainvisual-title {
  font-size: clamp(10px, 3.472222222222222vw, 50px);
  line-height: 1.2;
}
@media screen and (max-width: 820px) {
  .mainvisual-title {
    font-size: 3.2rem;
  }
}
@media screen and (max-width: 480px) {
  .mainvisual-title {
    font-size: 2.8rem;
  }
}
.mainvisual-title span {
  font-size: clamp(10px, 4.166666666666666vw, 60px);
  line-height: 1.2;
}
@media screen and (max-width: 820px) {
  .mainvisual-title span {
    font-size: 4rem;
  }
}
@media screen and (max-width: 480px) {
  .mainvisual-title span {
    font-size: 3.6rem;
  }
}
.mainvisual-title span.underline {
  position: relative;
  z-index: 1;
}
.mainvisual-title span.underline:after {
  content: "";
  width: 100%;
  height: 15px;
  background: #ffdb46;
  position: absolute;
  bottom: 5px;
  left: 0;
  z-index: -1;
}
.mainvisual-service-name {
  font-size: clamp(10px, 1.388888888888889vw, 20px);
  color: #27a08d;
  margin: 15px 0;
}
@media screen and (max-width: 820px) {
  .mainvisual-service-name {
    font-size: 1.8rem;
    margin: 15px 0 10px;
  }
}
.mainvisual-cta-text {
  font-size: clamp(10px, 1.25vw, 18px);
  margin-bottom: 10px;
}
@media screen and (max-width: 820px) {
  .mainvisual-cta-text {
    font-size: 1.5rem;
  }
}
.mainvisual-cta-button {
  padding-left: 20px;
}
.mainvisual-point {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -100px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 480px) {
  .mainvisual-point {
    margin: 0 -20px;
    bottom: -60px;
  }
}
.mainvisual-point-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mainvisual-point li {
  width: 184px;
  margin: 0 20px;
  position: relative;
}
@media screen and (max-width: 820px) {
  .mainvisual-point li {
    width: 33.3333%;
    margin: 0;
  }
}
.mainvisual-point li:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 100%;
  height: 0;
  background: #ffdb46;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 0;
}
.mainvisual-point li:after {
  content: "";
  border-radius: 100%;
  width: 100%;
  padding-top: 100%;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translateY(-50%) translateX(-50%);
  z-index: -1;
}
.mainvisual-point dl {
  z-index: 1;
}
.mainvisual-point dt,
.mainvisual-point dd {
  font-size: clamp(10px, 1.388888888888889vw, 20px);
  font-weight: bold;
  line-height: 1.3;
}
@media screen and (max-width: 820px) {
  .mainvisual-point dt,
  .mainvisual-point dd {
    font-size: clamp(10px, 2.083333333333333vw, 30px);
  }
}
@media screen and (max-width: 480px) {
  .mainvisual-point dt,
  .mainvisual-point dd {
    font-size: clamp(10px, 3.472222222222222vw, 50px);
  }
}
.mainvisual-point dt {
  margin-bottom: 5px;
}
@media screen and (max-width: 820px) {
  .mainvisual-point dd {
    font-size: 1.3rem;
  }
}
.mainvisual-point dd span {
  font-size: clamp(10px, 4.166666666666666vw, 60px);
  line-height: 0.8;
}
@media screen and (max-width: 820px) {
  .mainvisual-point dd span {
    font-size: clamp(10px, 6.944444444444445vw, 100px);
  }
}
@media screen and (max-width: 480px) {
  .mainvisual-point dd span {
    font-size: clamp(10px, 10.416666666666668vw, 150px);
  }
}
.mainvisual .icon-clock {
  position: relative;
}
@media screen and (max-width: 480px) {
  .mainvisual .icon-clock {
    margin-left: 10px;
  }
}
.mainvisual .icon-clock:before {
  content: "";
  background: url("/images/service/virtual_restaurant/icon_clock.svg");
  background-size: contain;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  bottom: -10px;
  left: -45px;
  margin: auto;
}
@media screen and (max-width: 787px) {
  .mainvisual .icon-clock:before {
    width: 20px;
    height: 20px;
    left: -20px;
  }
}
@media screen and (max-width: 480px) {
  .mainvisual .cta-catch {
    margin-bottom: 10px;
  }
}
/* ========================================================================
   Component: about
========================================================================== */
.about {
  padding: 130px 0;
  position: relative;
  background: url("/images/service/virtual_restaurant/bg_vr.svg") no-repeat;
  background-size: contain;
  background-position: 10% 10%;
}
@media screen and (max-width: 820px) {
  .about {
    padding: 90px 0 70px;
  }
}
@media screen and (max-width: 820px) {
  .about {
    background-size: 160% auto;
  }
}
@media screen and (max-width: 480px) {
  .about {
    background-position: 10% 5%;
  }
}
.about:before,
.about:after {
  content: "";
  position: absolute;
}
.about:before {
  background-repeat: no-repeat;
  background-size: contain;
  width: 443px;
  height: 445px;
  top: -150px;
  right: -200px;
}
.webp .about:before {
  background-image: url("/images/service/virtual_restaurant/about_deco_right.png.webp") !important;
}
.no-webp .about:before {
  background-image: url("/images/service/virtual_restaurant/about_deco_right.png");
}
@media screen and (max-width: 1024px) {
  .about:before {
    width: 222px;
    height: 223px;
    top: -80px;
    right: -100px;
  }
}
@media screen and (max-width: 480px) {
  .about:before {
    top: -80px;
    right: -120px;
  }
}
.about:after {
  background-repeat: no-repeat;
  background-size: contain;
  width: 460px;
  height: 463px;
  bottom: -100px;
  left: -200px;
  z-index: -1;
}
.webp .about:after {
  background-image: url("/images/service/virtual_restaurant/about_deco_left.png.webp") !important;
}
.no-webp .about:after {
  background-image: url("/images/service/virtual_restaurant/about_deco_left.png");
}
@media screen and (max-width: 1024px) {
  .about:after {
    width: 230px;
    height: 232px;
    bottom: -50px;
    left: -100px;
  }
}
@media screen and (max-width: 480px) {
  .about:after {
    bottom: -80px;
    left: -120px;
  }
}
@media screen and (min-width: 768px) {
  .about-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 80px;
  }
}
@media screen and (max-width: 767px) {
  .about-content {
    margin-top: 40px;
  }
}
.about-content-title {
  text-align: center;
}
.about-content-title span {
  display: block;
  font-size: 14px;
}
.about-content-left {
  position: relative;
}
@media screen and (max-width: 767px) {
  .about-content-left {
    text-align: center;
  }
}
.about-content-left .about-content-title {
  margin-bottom: 36px;
}
@media screen and (max-width: 480px) {
  .about-content-left .about-content-title {
    margin-bottom: 10px;
  }
}
@media screen and (min-width: 768px) {
  .about-content-center {
    margin-top: 50px;
  }
}
@media screen and (max-width: 820px) {
  .about-content-center {
    padding: 0 20px;
  }
}
@media screen and (max-width: 767px) {
  .about-content-center {
    text-align: center;
    margin: 10px 0;
  }
}
.about-content-right .about-content-title {
  margin-bottom: 10px;
}
.about-content-lead {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 15px;
}
@media screen and (min-width: 481px) {
  .about-content-lead {
    text-align: center;
  }
}
.about-content-image-cap {
  display: flex;
  margin-top: 5px;
}
.about-content-image-cap li {
  width: 33.3333%;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
}
@media screen and (max-width: 820px) {
  .about-content-image-cap li {
    font-size: 1.6rem;
  }
}
.about-content-text {
  text-align: center;
  font-weight: bold;
  margin-top: 15px;
}
/* ========================================================================
   Component: merit
========================================================================== */
.merit {
  padding: 130px 0 0;
  position: relative;
}
@media screen and (max-width: 820px) {
  .merit {
    padding: 70px 0 0;
  }
}
.merit-cards {
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .merit-cards {
    margin-top: 100px;
  }
}
@media screen and (min-width: 767px) {
  .merit-cards {
    display: flex;
    justify-content: space-between;
  }
}
.merit-card {
  position: relative;
  z-index: 0;
  display: block;
  font-weight: bold;
}
@media screen and (min-width: 768px) {
  .merit-card {
    width: 32%;
    max-width: 333px;
  }
}
@media screen and (max-width: 767px) {
  .merit-card {
    margin-top: 80px;
  }
}
.merit-card:before,
.merit-card:after {
  content: "";
  background: #fff;
  border-radius: 100%;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
.merit-card:before {
  width: 110px;
  height: 110px;
  top: -60px;
  border: 4px solid #004036;
  z-index: -1;
}
.merit-card:after {
  width: 102px;
  height: 102px;
  top: -56px;
  z-index: 0;
}
.merit-card-inner {
  border: 4px solid #004036;
  box-shadow: 0px 10px 10px rgba(95,108,136,0.2);
  border-radius: 40px;
  background: #fff;
  padding: 40px 30px 30px;
  z-index: 1;
}
.merit-card-num {
  width: 110px;
  position: absolute;
  top: -56px;
  left: 0;
  right: 0;
  margin: auto;
  padding-top: 15px;
  z-index: 1;
}
.merit-card-num span {
  display: block;
  width: 100%;
  font-size: 14px;
  letter-spacing: -0.05em;
  text-align: center;
  line-height: 1;
}
.merit-card-num span:before {
  content: "メリット";
  display: block;
  margin-bottom: 5px;
}
.merit-card-num span img {
  line-height: 1;
}
.merit-card-title {
  font-size: 2.8rem;
  font-weight: bold;
  text-align: center;
  position: relative;
  z-index: 1;
}
.merit-card-icon {
  text-align: center;
  margin: 10px 0;
}
.merit-card-icon img {
  margin-right: -15px;
}
.merit-card-subtitle {
  font-size: 1.6rem;
  height: 48px;
  line-height: 40px;
  font-weight: bold;
  text-align: center;
  background: #ffdb46;
  padding: 5px;
  margin-bottom: 10px;
}
.merit-card-subtitle span {
  display: inline-block;
  font-size: 3.2rem;
  line-height: 1;
}
.merit-card:first-child .merit-card-subtitle {
  font-size: 1.8rem;
}
.merit-detail {
  width: 100%;
  max-width: 880px;
  border-top: 2px dotted #b2b2b2;
  padding: 100px 0;
  margin: auto;
}
@media screen and (max-width: 820px) {
  .merit-detail {
    padding: 50px 0;
  }
}
.merit-detail:first-child {
  border: none;
}
.merit-detail-num {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 820px) {
  .merit-detail-num {
    margin-bottom: 15px;
  }
}
.merit-detail-num span {
  display: flex;
  align-items: center;
}
.merit-detail-num span:before {
  content: "メリット";
  font-size: 14px;
  font-weight: bold;
  margin-right: 8px;
}
.merit-detail-title {
  font-size: clamp(10px, 2.638888888888889vw, 38px);
  font-weight: bold;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
@media screen and (max-width: 820px) {
  .merit-detail-title {
    font-size: 2.8rem;
  }
}
.merit-detail-title span {
  display: inline-block;
  line-height: 1;
}
.merit-detail-title > span {
  font-size: 1.8rem;
  background: #004036;
  color: #fff;
  border-radius: 10px;
  padding: 3px 15px 5px;
  margin-left: 20px;
  position: relative;
}
.merit-detail-title > span:before {
  content: "";
  border-style: solid;
  border-width: 5px 10px 5px 0;
  border-color: transparent #004036 transparent transparent;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -10px;
}
.merit-detail-title > span > span {
  font-size: 3rem;
  padding: 0 5px;
}
.merit-detail-text {
  margin: 50px 0 20px;
}
@media screen and (max-width: 480px) {
  .merit-detail-text {
    margin: 20px 0;
  }
}
.merit-detail-text .underline {
  position: relative;
  z-index: 0;
  background: linear-gradient(transparent 66%, #ffdb46 66%);
}
@media screen and (min-width: 481px) {
  .merit-detail-lead {
    text-align: center;
    line-height: 2;
  }
}
@media screen and (min-width: 768px) {
  .merit-detail-flows {
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
  }
}
.merit-detail-flow {
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .merit-detail-flow {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 50px;
  }
}
@media screen and (min-width: 768px) {
  .merit-detail-flow:first-child {
    max-width: 172px;
  }
}
.merit-detail-flow:first-child .merit-detail-flow-text {
  margin-top: 20px;
}
.merit-detail-flow:first-child:after {
  content: "";
  position: absolute;
}
@media screen and (min-width: 768px) {
  .merit-detail-flow:first-child:after {
    background: #004036;
    width: 100%;
    height: 5px;
    top: 45%;
    right: -80%;
    z-index: -1;
  }
}
@media screen and (max-width: 767px) {
  .merit-detail-flow:first-child:after {
    border-style: solid;
    border-width: 26px 15px 0 15px;
    border-color: #004036 transparent transparent transparent;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
  }
}
.merit-detail-flow:nth-child(2) .merit-detail-flow-title {
  width: 100%;
  position: static;
  text-align: center;
  margin-bottom: 10px;
}
@media screen and (max-width: 767px) {
  .merit-detail-flow:nth-child(2) .merit-detail-flow-image {
    width: 100%;
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  .merit-detail-flow:nth-child(2) .merit-detail-flow-image img {
    width: 100%;
  }
}
.merit-detail-flow:nth-child(2):before,
.merit-detail-flow:nth-child(2):after {
  content: "";
  position: absolute;
  z-index: -1;
}
.merit-detail-flow:nth-child(2):before {
  border-style: solid;
  border-width: 14px 0 14px 24px;
  border-color: transparent transparent transparent #004036;
}
@media screen and (min-width: 768px) {
  .merit-detail-flow:nth-child(2):before {
    top: 42%;
    right: -42%;
  }
}
@media screen and (max-width: 767px) {
  .merit-detail-flow:nth-child(2):before {
    border-width: 26px 15px 0 15px;
    border-color: #004036 transparent transparent transparent;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
  }
}
.merit-detail-flow:nth-child(2):after {
  width: 40%;
  height: 5px;
  background: #004036;
  top: 45%;
  right: -40%;
}
@media screen and (max-width: 767px) {
  .merit-detail-flow:nth-child(2):after {
    content: none;
  }
}
@media screen and (max-width: 767px) {
  .merit-detail-flow:nth-child(2) .merit-detail-flow-button {
    width: 100%;
  }
}
.merit-detail-flow-title {
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 25px;
}
@media screen and (max-width: 767px) {
  .merit-detail-flow-title {
    font-size: 2.2rem;
    position: absolute;
    top: 0;
    left: 50%;
  }
}
.merit-detail-flow-button {
  margin-top: 20px;
}
.merit-detail-flow-button a {
  display: block;
  text-align: center;
  border: 2px solid #004036;
  background: #fff;
  border-radius: 30px;
  padding: 8px;
  position: relative;
}
.merit-detail-flow-button a:before {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1px solid #004036;
  border-right: 1px solid #004036;
  transform: rotate(135deg);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  margin: auto;
}
.merit-detail-flow-text {
  margin-top: 20px;
  margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
  .merit-detail-flow-text {
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  .merit-detail-flow-text {
    flex: 1;
    padding-top: 1.6em;
  }
}
.merit-detail-flow-image {
  text-align: center;
}
@media screen and (max-width: 767px) {
  .merit-detail-flow-image {
    width: 45%;
    margin-right: 5%;
  }
  .merit-detail-flow-image img {
    max-width: 100%;
    height: auto;
  }
}
.merit-detail-point-deco {
  width: 94px;
  height: 94px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: -56px;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.merit-detail-point-deco span {
  font-size: 1.4rem;
  font-weight: bold;
  display: inline-block;
  padding-bottom: 10px;
  border-bottom: 2px dashed #004036;
  position: relative;
}
.merit-detail-point-deco span:before {
  content: "";
  background: url("/images/service/virtual_restaurant/deco_point.svg") no-repeat;
  background-size: contain;
  width: 30px;
  height: 10px;
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  margin: auto;
}
.merit-detail-point-title {
  margin-bottom: 20px;
}
@media screen and (min-width: 481px) {
  .merit-detail-point-title {
    text-align: center;
  }
}
.merit-detail-point-title span {
  font-size: 2rem;
  font-weight: bold;
  background: linear-gradient(transparent 66%, #ffdb46 66%);
}
.merit-detail-point-list {
  margin-bottom: 10px;
  padding-left: 1.5em;
  position: relative;
}
.merit-detail-point-list:before {
  content: "";
  background: url("/images/service/virtual_restaurant/icon_check.svg");
  background-size: contain;
  width: 1.4em;
  height: 1.4em;
  vertical-align: middle;
  margin-right: 0.2em;
  position: absolute;
  top: 2px;
  left: 0;
}
.merit-bg-white {
  box-sizing: border-box;
  background: #fff;
  border-radius: 30px;
  padding: 30px;
  margin-top: 100px;
  position: relative;
}
@media screen and (max-width: 480px) {
  .merit-bg-white {
    margin-top: 60px;
  }
}
@media screen and (min-width: 481px) {
  .merit-bg-white {
    display: flex;
    justify-content: center;
  }
}
@media screen and (min-width: 481px) {
  .merit-bg-white > dl {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.merit-bg-white > dl dt {
  font-weight: bold;
}
@media screen and (max-width: 480px) {
  .merit-bg-white > dl dt {
    text-align: center;
    margin-bottom: 10px;
  }
}
.merit-bg-white > dl > dd {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 480px) {
  .merit-bg-white > dl > dd {
    justify-content: space-between;
  }
}
.merit-bg-white > dl > dd img {
  margin-left: 40px;
}
@media screen and (max-width: 480px) {
  .merit-bg-white > dl > dd img {
    margin: 0;
  }
}
.merit-case {
  padding: 30px;
}
@media screen and (min-width: 481px) {
  .merit-case {
    justify-content: space-between;
  }
}
@media screen and (min-width: 481px) {
  .merit-case {
    padding: 30px 0;
  }
}
@media screen and (min-width: 768px) {
  .merit-case-detail {
    display: flex;
    box-sizing: border-box;
    padding: 0 30px;
  }
}
@media screen and (min-width: 481px) {
  .merit-case-detail.left,
  .merit-case-detail.right {
    width: 50%;
  }
}
@media screen and (min-width: 481px) {
  .merit-case-detail.left {
    border-right: 1px solid #000;
  }
}
@media screen and (max-width: 480px) {
  .merit-case-detail.right {
    margin-top: 40px;
    border-top: 1px solid #000;
    padding-top: 40px;
  }
}
@media screen and (max-width: 767px) {
  .merit-case-detail-col {
    padding: 0 30px;
  }
}
@media screen and (max-width: 480px) {
  .merit-case-detail-col {
    padding: 0;
  }
}
@media screen and (min-width: 768px) {
  .merit-case-detail-col:nth-child(1n) {
    width: 166px;
  }
}
@media screen and (min-width: 481px) {
  .merit-case-detail-col:nth-child(2n) {
    padding-left: 20px;
    flex: 1;
  }
}
.merit-case-detail-col dt,
.merit-case-detail-col dd {
  width: 100%;
}
.merit-case-detail-col-title {
  font-size: 1.4rem;
  font-weight: bold;
}
.merit-case-detail-col-title span {
  font-size: 2.2rem;
}
.merit-case-detail-col-list dt,
.merit-case-detail-col-list dd {
  padding: 2px 10px;
  box-sizing: border-box;
}
.merit-case-detail-col-list dt {
  font-size: 1.4rem;
  background: #f5f6f8;
}
.merit-case-detail-col-list dd {
  font-size: 1.8rem;
  font-weight: bold;
}
.merit-case-detail-title > span {
  display: inline-block;
  font-size: 1.8rem;
  line-height: 1.2;
  background: linear-gradient(transparent 70%, #ffdb46 70%);
  margin-bottom: 15px;
  padding: 0 10px 0 0;
}
@media screen and (max-width: 480px) {
  .merit-case-detail-title > span {
    font-size: 3.2rem;
  }
}
.merit-case-detail-title > span .text-large {
  font-size: 3.6rem;
  letter-spacing: -0.02em;
  line-height: 0.8;
}
@media screen and (max-width: 480px) {
  .merit-case-detail-title > span .text-large {
    font-size: 3.2rem;
  }
}
@media screen and (max-width: 480px) {
  .merit-case-detail-image {
    margin-bottom: 15px;
  }
}
@media screen and (max-width: 480px) {
  .merit-case-detail-image img {
    width: 100%;
  }
}
#MERIT02 .merit-bg-white {
  margin-top: 50px;
  padding: 20px;
}
@media screen and (min-width: 821px) {
  #MERIT02 .video {
    max-width: 468px;
    margin: auto;
  }
}
#MERIT02 .video-box {
  width: 100%;
  height: auto;
}
#MERIT02 .video-box video {
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 768px) {
  #MERIT02 .merit-detail-flow:nth-child(2):before {
    right: -32px;
  }
}
@media screen and (min-width: 768px) {
  #MERIT02 .merit-detail-flow:nth-child(2):after {
    width: 25px;
    right: -25px;
  }
}
@media screen and (max-width: 480px) {
  #MERIT03 .merit-detail-lead {
    text-align: center;
    margin-bottom: 10px;
  }
}
#MERIT03 .merit-detail-flow-image {
  margin-top: 30px;
}
@media screen and (max-width: 767px) {
  #MERIT03 .merit-detail-flow-image {
    width: 100%;
  }
}
/* ========================================================================
   Component: brand
========================================================================== */
.brand {
  padding: 120px 0 0;
}
@media screen and (max-width: 820px) {
  .brand {
    padding: 70px 0 0;
  }
}
.brand-lists {
  margin-top: 65px;
}
@media screen and (min-width: 481px) {
  .brand-lists {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 820px) {
  .brand-lists {
    margin-top: 40px;
  }
}
.brand-list {
  margin-bottom: 60px;
}
@media screen and (min-width: 768px) {
  .brand-list {
    width: 32%;
    max-width: 333px;
  }
}
@media screen and (min-width: 481px) {
  .brand-list {
    width: 48%;
  }
}
.brand-list-name {
  font-size: 2.2rem;
  font-weight: bold;
  margin: 15px 0;
}
@media screen and (max-width: 480px) {
  .brand-list-image img {
    width: 100%;
  }
}
.brand-cta-area {
  width: 100%;
  max-width: 880px;
  background: #fff;
  box-shadow: 0px 10px 10px rgba(95,108,136,0.2);
  border: 3px solid #004036;
  border-radius: 40px;
  padding: 40px;
  margin: auto;
}
@media screen and (max-width: 480px) {
  .brand-cta-area {
    padding: 20px;
  }
}
.brand-cta-text {
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
}
.brand-cta-button .cta-button {
  max-width: 450px;
  font-size: 1.8rem;
}
@media screen and (max-width: 480px) {
  .brand-cta-button .cta-button {
    font-size: 1.4rem;
  }
}
/* ========================================================================
   Component: brand
========================================================================== */
.faq {
  width: 100%;
  max-width: 880px;
  margin: auto;
  padding: 120px 0 0;
}
@media screen and (max-width: 820px) {
  .faq {
    padding: 70px 0 0;
  }
}
.faq-title {
  margin-bottom: 40px;
}
.faq-button {
  text-align: center;
}
.faq-button button {
  font-size: 1.6rem;
  font-weight: bold;
  width: 100%;
  padding: 10px;
  border: 1px solid #004036;
  background: #fff;
  border-radius: 50px;
  margin: auto;
  position: relative;
  cursor: pointer;
}
@media screen and (min-width: 481px) {
  .faq-button button {
    max-width: 290px;
  }
}
.faq-button button:before,
.faq-button button:after {
  display: block;
  content: '';
  background-color: #004036;
  position: absolute;
  width: 14px;
  height: 2px;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 20px;
}
.faq-button button:after {
  transform: rotate(90deg);
}
.faq-button.is-btn-hidden {
  display: none;
}
.faq-list {
  opacity: 1;
  transition: 0.5s;
}
.faq-list.is-hidden {
  opacity: 0;
  height: 0;
  margin: 0;
}
.faqbody-question,
.faqbody-answer {
  padding: 25px 22px;
}
@media screen and (max-width: 480px) {
  .faqbody-question,
  .faqbody-answer {
    padding: 20px 10px;
  }
}
.faqbody-question-text,
.faqbody-answer-text {
  position: relative;
  padding-left: 48px;
}
.faqbody-question-text:before,
.faqbody-answer-text:before {
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  top: -2px;
  left: 0;
}
.faqbody-question {
  background: #fff;
}
.faqbody-question-text {
  font-size: 1.8rem;
  font-weight: bold;
}
.faqbody-question-text:before {
  content: "Q";
  background: #004036;
  color: #fff;
}
.faqbody-answer-text {
  line-height: 1.8;
}
.faqbody-answer-text:before {
  content: "A";
  background: #ffdb46;
  color: #004036;
}
/* ========================================================================
   Component: support
========================================================================== */
.support {
  padding: 100px 0;
}
@media screen and (max-width: 820px) {
  .support {
    padding: 70px 0;
  }
}
.support-content {
  background: #fff;
  padding: 32px 20px;
  border-radius: 40px;
}
@media screen and (min-width: 768px) {
  .support-content {
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.support-content-inner {
  padding-bottom: 30px;
}
@media screen and (min-width: 768px) {
  .support-content-inner {
    padding-right: 50px;
    padding-bottom: 0;
  }
}
@media screen and (max-width: 820px) {
  .support-content-image {
    text-align: center;
  }
}
.support-subtitle {
  font-size: 1.8rem;
  font-weight: bold;
}
.support-title {
  font-size: 2.2rem;
  font-weight: bold;
  margin: 15px 0;
}
/* ========================================================================
   Component: pagetop
========================================================================== */
.pagetop {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 5;
  display: none;
}
@media screen and (max-width: 767px) {
  .pagetop {
    right: 15px;
    bottom: 15px;
  }
}
.pagetop a {
  display: block;
  width: 80px;
  height: 80px;
  background: rgba(255,255,255,0.7);
  border-radius: 50%;
  border: 3px solid #004036;
  position: relative;
}
@media screen and (max-width: 767px) {
  .pagetop a {
    width: 68px;
    height: 68px;
  }
}
.pagetop a:before {
  content: "";
  width: 12px;
  height: 12px;
  border-top: 3px solid #004036;
  border-right: 3px solid #004036;
  transform: rotate(-45deg);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .pagetop a:before {
    width: 10px;
    height: 10px;
  }
}
.pagetop a:hover {
  opacity: 0.5;
}
/* ========================================================================
   Component: footer
========================================================================== */
.footer-inner {
  max-width: 1260px;
  margin: auto;
}
.footer p {
  font-weight: inherit;
  line-height: 1.6em;
}