@charset "UTF-8";
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

body {
  /* background-image: url(../image/bg_bar.png);
  background-repeat: no-repeat;
  background-position: 1000px bottom;
  background-size: 2800px; */
  margin: 0;
  text-align: center;
  color: #000;
  font-size: 26px;
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

body * {
  box-sizing: border-box;
}

body table {
  border-collapse: collapse;
  font-size: 26px;
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  overflow: hidden;
}

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

body b {
  font-weight: normal;
}

body .bold {
  font-weight: bolds;
}

body.joy-sp {
  font-size: 26px;
}

body.joy-sp br.pc {
  display: none;
}

body.joy-sp table {
  font-size: 26px;
}

body.joy-sp .intro h2 {
  font-size: 48px !important;
}

body.joy-sp section,
body.joy-sp footer nav {
  width: 780px;
}

body.joy-sp .form form {
  font-size: 26px;
}

body.joy-sp .form form ul {
  font-size: 26px;
}

.view {
  height: auto;
  position: relative;
  overflow: hidden;
}

a {
  color: #000;
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  text-decoration: none;
}

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

h1 {
  user-select: none;
  margin: 0;
  line-height: 3.2em;
  color: #000;
}

h1 b,
h1 span {
  display: block;
}

h1 b {
  font-size: 5.4em;
  font-style: italic;
}

h1 span {
  font-size: 1.86em;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.6em;
}

header {
  height: 66vh;
  padding: 30vh 0 3em;
}

header h1 {
  text-indent: -9999em;
  background-image: url(../image/logo_lbo.png);
  background-repeat: no-repeat;
  background-position: center;
}

header .catch {
  font-size: 1.25em;
  font-weight: bold;
}

.view.contents {
  text-align: left;
}

.view.contents header {
  height: 80px;
  padding: .5em;
}

.view.contents header a {
  display: flex;
  align-items: center;
}

.view.contents header a h1 {
  width: 180px;
  height: 80px;
  overflow: hidden;
  background-size: cover;
  background-position: left top;
}

.view.contents header a .catch {
  font-size: .66em;
  text-indent: .5em;
}

.view.contents h2 {
  border-bottom: 1px solid #000;
}

.view.contents h3 {
  font-size: 22px;
}

.view.contents section, .view.contents ul, .view.contents li, .view.contents p {
  font-size: 18px;
}

.view.contents ul, .view.contents li, .view.contents p {
  color: #666;
}

section {
  padding: 3em 0;
  min-height: 33vh;
  position: relative;
  width: 100%;
}

section {
  margin: 0 auto;
  width: 920px;
}

section p {
  font-size: .6em;
  color: #666;
}

section.left {
  text-align: left;
}

section.left .image {
  float: right;
}

section.left .image img {
  height: 180px;
  width: auto;
}

section.right .image {
  float: left;
}

section.right .image img {
  height: 180px;
  width: auto;
}

footer {
  width: 100%;
  min-height: 10vh;
  border-top: 1px solid #eee;
  background: #000;
  color: #fff;
}

footer nav {
  padding: 1em;
  width: 920px;
  margin: 1em auto;
  text-align: left;
  font-size: .66em;
}

footer nav h4 {
  letter-spacing: .05em;
  border-bottom: 1px solid #fff;
  margin-bottom: .25em;
}

footer nav ul li a {
  color: #fff;
  display: block;
  padding: .25em;
}

footer .logo {
  padding: 3em;
}

footer .logo img {
  width: 230px;
  filter: invert(1);
}

footer small {
  color: #fff;
  font-size: .8em;
  display: block;
  width: 100%;
  padding: 1em 0 1.8em;
  text-align: center;
}

.flex {
  display: flex;
}

.intro h2 {
  padding: 2em 0;
}

.intro h2 b {
  display: inline-block;
  position: relative;
  font-weight: bold;
}

.intro h2 b::before {
  content: '';
  z-index: -1;
  display: block;
  width: 100%;
  position: absolute;
  bottom: .125em;
  border-bottom-width: .33em;
  border-bottom-style: solid;
}

.intro h2 b.line::before {
  border-bottom-color: #3af06c;
}

.intro h2 b.kintone::before {
  border-bottom-color: #ffb500;
}

.overview.right .flex {
  flex-direction: row-reverse;
}

.overview.right .flex .comment {
  padding-left: 1em;
}

.overview .flex {
  text-align: left;
  align-items: center;
}

.overview .flex .img {
  width: 40%;
  padding: 2em 0 0;
}

.overview .flex .img img {
  width: 90%;
  display: block;
  margin: 0 auto;
}

.overview .flex .comment {
  width: 60%;
  font-size: 1.5em;
  margin-top: 2em;
}

.overview .flex .comment h3 {
  font-size: 1em;
}

.overview .flex .comment b {
  border-bottom: 1px solid #000;
}

.overview.fit-bg {
  height: 800px;
  z-index: -1;
}

.overview.fit-bg .bg {
  position: absolute;
  top: -2080px;
  left: -920px;
}

.overview.fit-bg ul {
  visibility: hidden;
  position: relative;
}

.overview.fit-bg ul li {
  position: absolute;
  font-weight: bold;
  font-size: 1.1em;
  text-align: center;
}

.overview.fit-bg ul li.mess1 {
  top: 210px;
  left: 290px;
}

.overview.fit-bg ul li.mess2 {
  top: 470px;
  left: 125px;
}

.overview.fit-bg ul li.mess3 {
  top: 470px;
  left: 418px;
}

.overview.fit-bg ul li.mess4 {
  top: 620px;
  left: 120px;
}

.overview.fit-bg ul li.mess5 {
  top: 620px;
  left: 390px;
  font-size: 1em;
}

.case {
  display: flex;
  justify-content: space-around;
  padding: 4em 0;
}

.case li {
  font-size: 18px;
  width: 10em;
  height: 10em;
  line-height: 10em;
  text-align: center;
  background-color: #ffe6e0;
  border-radius: 50%;
  color: #b9543c;
}

.price-list table {
  min-width: 66%;
  margin: 1em auto;
  border-radius: .4em;
  background: #fff;
}

.price-list table th, .price-list table td {
  width: 9em;
  min-height: 2em;
  padding: .5em 0;
  text-align: center;
}

.price-list table thead th {
  font-size: .9em;
  background: #5EA5B5;
  color: #fff;
  padding: 1em;
  border-right: 1px solid #fff;
}

.price-list table thead th:last-child {
  border-right: none;
}

.price-list table tbody th {
  border: 1px solid #ddd;
  font-size: .8em;
  font-weight: normal;
  color: #5EA5B5;
}

.price-list table tbody td {
  border: 1px solid #ddd;
  color: #52767d;
}

.price-list table tbody td > label {
  letter-spacing: .1em;
  font-size: .85em;
  color: #5EA5B5;
  line-height: 3em;
}

.price-list table tbody td.s {
  background-color: #f5f9fa;
}

.price-list table tbody td.p {
  background-color: #e5eff1;
}

.price-list table tbody .price {
  font-size: 1.25em;
  color: #52767d;
  font-weight: bold;
}

.price-list table tbody .price td {
  padding: 1em 0;
}

.price-list table tbody .price td .unit {
  display: inline-block;
  font-size: .66em;
  padding-left: .25em;
}

.price-list table tbody .func.label td {
  padding: 0;
  border-bottom: none;
}

.price-list table tbody .func ul {
  display: flex;
  justify-content: center;
}

.price-list table tbody .func ul li {
  padding: 0 .5em;
}

.price-list table tbody .func ul li .icon {
  padding: .25em;
}

.price-list table tbody .func ul li .icon img {
  width: 2.4em;
}

.price-list table tbody .func ul li .icon label {
  display: block;
  font-size: .5em;
  color: #52767d;
}

.price-list table tbody .func.func-basic {
  background: #fafff6;
}

.price-list table tbody .func.func-additional td {
  border-top: none;
  padding: 1em;
}

.price-list table tbody .func.func-additional td dl {
  display: flex;
  flex-wrap: wrap;
  font-size: .66em;
}

.price-list table tbody .func.func-additional td dl dt, .price-list table tbody .func.func-additional td dl dd {
  margin: 0;
  padding: 0;
  flex-basis: 50%;
  text-align: left;
  position: relative;
}

.price-list table tbody .func.func-additional td dl dt {
  flex-basis: 44%;
}

.price-list table tbody .func.func-additional td dl dt:after {
  content: ':';
  position: absolute;
  top: auto;
  right: 1em;
}

.price-list table tbody .func.func-additional td dl dd {
  flex-basis: 56%;
  padding-left: 1em;
}

.products {
  display: flex;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  padding: 1em 0;
}

.products li {
  flex-basis: 25%;
}

.products li img {
  width: 8vw;
}

body.joy-sp .products li {
  flex-basis: 33.33%;
}

body.joy-sp .products li img {
  width: 15vw;
}

.buttons button {
  font-size: 1em;
  padding: 1em 2em;
  border: 1px solid #109cbb;
  background: #109cbb;
  color: #fff;
  text-align: center;
  border-radius: .25em;
}

.form {
  display: none;
}

.form.active {
  display: block;
  z-index: 999;
}

.form .close {
  position: fixed;
  top: 0;
  right: 0;
  font-size: 2em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #fff;
}

.form .bg {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.66);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  width: 100vw;
  height: 100vh;
}

.form form {
  z-index: 1;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  width: 34em;
  margin: 0 auto;
  background: #e7f3ff;
  padding: 2.4em 1.6em;
  box-sizing: border-box;
  border-radius: .25em;
  font-size: 20px;
  max-height: 92vh;
  overflow-y: scroll;
}

.form form h4 {
  color: #109cbb;
  padding: 1em 0;
  margin: 0;
}

.form form > p {
  font-size: .66em;
  color: #268ba2;
}

.form form > .main-error {
  font-size: .66em;
  color: lightcoral;
}

.form form > .main-success {
  display: none;
  padding: 1em 0;
  color: #109cbb;
}

.form form > .main-success button {
  background-color: #109cbb;
}

.form form ul {
  font-size: 20px;
  text-align: left;
}

.form form ul li {
  padding: .25em .25em;
  display: flex;
}

.form form ul li > label {
  flex-basis: 36%;
  padding: 1em;
  text-align: left;
  font-size: .66em;
  color: #fff;
  background: #268ba2;
  border-radius: .25em;
  position: relative;
}

.form form ul li.required > label:after {
  content: '必須';
  display: block;
  position: absolute;
  top: .88em;
  right: 1em;
  background: lightcoral;
  color: #fff;
  padding: .25em;
  text-align: center;
  border-radius: .25em;
}

.form form ul li .error-message {
  display: none;
  color: lightcoral;
  font-size: .66em;
}

.form form ul li .error-message:before {
  content: '＊ ';
}

.form form ul li.error input[type="text"],
.form form ul li.error textarea {
  color: lightcoral;
  border-color: lightcoral;
}

.form form ul li.error .error-message {
  display: block;
}

.form form ul li > div {
  flex-basis: 64%;
  padding: .5em 1em;
}

.form form ul li > div input[type="text"],
.form form ul li > div textarea {
  font-size: .8em;
  display: inline-block;
  padding: .5em;
  width: 15em;
  height: 3em;
  color: #268ba2;
  border: 1px solid #268ba2;
  border-radius: .25em;
  box-shadow: none;
  outline: none;
}

.form form ul li > div textarea {
  height: 8em;
}

.form form ul li > div .long {
  width: 22em !important;
}

.form form ul li > div p {
  font-size: .66em;
  color: #268ba2;
}

.form form ul .radios div {
  display: block;
  padding: .25em;
}

.form form ul .radios div label {
  font-size: .8em;
  color: #268ba2;
}

.form form .buttons {
  width: 100%;
  text-align: center;
  padding: 1em 0;
}

.form form .buttons button {
  font-size: .8em;
  text-align: center;
  border-radius: .25em;
}

.form form .buttons button.cancel {
  background: #666;
  border-color: #666;
}

.form input[type=radio], .form input[type=checkbox] {
  display: none;
}

.form .radio, .form .checkbox {
  box-sizing: border-box;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  margin: 0 20px 8px 0;
  padding: 12px 12px 12px 42px;
  border-radius: 8px;
  background-color: #f6f7f8;
  vertical-align: middle;
  cursor: pointer;
}

.form .radio:hover, .form .checkbox:hover {
  background-color: #c3e2e9;
}

.form .radio:hover:after, .form .checkbox:hover:after {
  border-color: #268ba2;
}

.form .radio:after, .form .checkbox:after {
  -webkit-transition: border-color 0.2s linear;
  transition: border-color 0.2s linear;
  position: absolute;
  top: 50%;
  left: 15px;
  display: block;
  margin-top: -10px;
  width: 16px;
  height: 16px;
  border: 2px solid #bbb;
  border-radius: 6px;
  content: '';
}

.form .radio:before {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  left: 20px;
  display: block;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #268ba2;
  content: '';
  opacity: 0;
}

.form input[type=radio]:checked + .radio:before {
  opacity: 1;
}

.form .checkbox:before {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  left: 21px;
  display: block;
  margin-top: -7px;
  width: 5px;
  height: 9px;
  border-right: 3px solid #268ba2;
  border-bottom: 3px solid #268ba2;
  content: '';
  opacity: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.form input[type=checkbox]:checked + .checkbox:before {
  opacity: 1;
}

.blend {
  width: 100vw;
  height: 100vh;
  position: relative;
  background: white;
  overflow: hidden;
}

.blend p {
  background: black;
  color: white;
  margin: 0;
  position: absolute;
}

.blend p.en {
  font-size: 8rem;
  text-transform: capitalize;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  padding: 10px 20px;
  padding-left: 100px;
  top: 30px;
  left: 0;
}

.blend p.ja {
  font-size: 4rem;
  writing-mode: vertical-rl;
  font-family: 'HiraMinProN-W6', serif;
  letter-spacing: 1rem;
  padding: 20px 10px;
  position: absolute;
  bottom: 0;
  right: 60px;
}

.blend .bg {
  width: 60vw;
  height: 400vh;
  background-color: white;
  mix-blend-mode: difference;
  transform: rotate(45deg);
  position: absolute;
  top: -120vh;
}