@charset "UTF-8";
/*
使用色
-------------------------------------------------- */
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, 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, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 100%;
  vertical-align: baseline;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote::before, blockquote::after, q::before, q::after {
  content: none;
}

a {
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: 100%;
  vertical-align: baseline;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  margin: 1em 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #ccc;
}

input, select {
  vertical-align: middle;
}

html {
  font-size: 62.5%;
}

body {
  color: #222222;
  font-family: helvetica, arial, メイリオ, sans-serif;
  font-size: 1.43rem;
  line-height: 220%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main, article, section {
  display: block;
}

* {
  box-sizing: border-box;
}

*:focus {
  outline: 1;
  outline-color: #868686;
}

p, li {
  font-size: 1.6rem;
  line-height: 220%;
}

ul {
  list-style: none;
}

a {
  color: #005cd0;
  text-decoration: underline;
  cursor: pointer;
}

nav a {
  letter-spacing: 1px;
  text-decoration: none;
}

.text-center {
  text-align: center !important;
}

.display-none {
  display: none;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-size: 1.4rem;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
}

.btn:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.btn img {
  display: block;
}

.f-btn-primary {
  transition: all 300ms 0s ease;
  padding: 12px 16px;
  background-color: #005cd0;
  color: #fff;
}

@media only screen and (min-width: 768px) {
  .f-btn-primary:hover {
    background-color: #003f8d;
  }
}

.f-btn-info {
  transition: all 300ms 0s ease;
  padding: 2px 16px;
  border: 1px solid #005cd0;
  background-color: #fff;
  color: #005cd0;
}

@media only screen and (min-width: 768px) {
  .f-btn-info.active, .f-btn-info:hover {
    background-color: #005cd0;
    color: #fff;
    font-weight: bolder;
  }
}

.f-btn-secondary {
  transition: all 300ms 0s ease;
  padding: 12px 16px;
  background-color: #ffab41;
  color: #fff;
}

@media only screen and (min-width: 768px) {
  .f-btn-secondary:hover {
    background-color: #c07622;
  }
}

.hover {
  opacity: 0.6;
}

.bold {
  font-weight: bolder !important;
}

.loading {
  display: none;
  position: fixed;
  z-index: 99999;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
}

.loading .loading-img {
  position: fixed;
  top: calc(50% - 45px);
  left: calc(50% - 35px);
  width: 70px;
  height: 90px;
  animation: loading-img .5s infinite alternate;
}

@keyframes loading-img {
  0% {
    opacity: .1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes end-load {
  0% {
    opacity: 1;
  }
  99% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 0;
    height: 0;
    opacity: 0;
  }
}

.end-load {
  animation: end-load 1s 1 forwards;
}

@keyframes bg-Loop {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 1800px 600px;
  }
}

.top-img {
  animation: bg-Loop 60s linear infinite;
}

/* ブレイクポイント
-------------------------------------------------- */
@media only screen and (max-width: 767px) {
  /*
PC用レイアウト
-------------------------------------------------- */
  .pc {
    display: none !important;
  }
  .mobile {
    display: block !important;
  }
  p + p {
    margin-top: 16px;
  }
  header {
    position: absolute;
    z-index: 9999;
    top: 0;
    left: 0;
    align-items: center;
    /* モバイルナビゲーション関連ここから */
    /* モバイルナビゲーション関連ここまで */
  }
  header.header {
    position: absolute;
  }
  header .head {
    display: none;
  }
  header .catch {
    display: flex;
    align-items: center;
    margin-left: 12px;
  }
  header .catch .white {
    color: #fff !important;
  }
  header .catch p {
    display: inline-block;
    margin: 0;
  }
  header .catch p:first-child {
    margin: 0 12px 8px 0;
    color: #222222;
    font-size: 10px;
    font-weight: bolder;
  }
  header .catch p:last-child {
    display: none;
  }
  header .catch .logo-fs {
    display: block;
    line-height: 0;
  }
  header .catch .logo-fs img {
    width: 80px;
  }
  header .logo {
    margin-left: 12px;
  }
  header .logo img {
    display: block;
    width: 160px;
  }
  header nav {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 88px;
    width: 100%;
    text-align: center;
  }
  header nav ul {
    width: 90%;
    max-width: 300px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background-color: #fff;
  }
  header nav a, header .sub-nav a {
    /* リンクの色を変えたい場合はこのあたりを変更する */
    display: block;
    padding: 13px 0;
    text-decoration: none;
  }
  header .active a {
    background-color: #005cd0;
    color: #fff;
  }
  header nav li {
    /* リンクの色を変えたい場合はこのあたりを変更する */
    border-top: 1px solid #005cd0;
    border-right: 1px solid #005cd0;
    border-left: 1px solid #005cd0;
    font-weight: bolder;
    line-height: 100%;
  }
  header .sub-nav li:last-child {
    border-bottom: 1px solid #005cd0;
  }
  header .mobile-nav {
    /* ハンバーガーの色を変えたい場合はこのあたりを変更する */
    position: fixed;
    z-index: 9999;
    top: 10px;
    right: 18px;
    width: 60px;
    height: 60px;
    padding: 10px;
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
  }
  header span {
    /* ハンバーガーの色を変えたい場合はこのあたりを変更する */
    display: block;
    left: 0;
    width: 100%;
    height: 3px;
    margin-top: 10px;
    border-radius: 0;
    background-color: #005cd0;
  }
  header span:first-child {
    margin-top: 6px;
  }
  header .mobile-nav-top {
    display: none;
  }
  header .mobile-nav,
  header .mobile-nav span {
    transition: all .4s;
  }
  header .mobile-nav.active {
    opacity: 1;
  }
  header .mobile-nav.active span:nth-of-type(1) {
    transform: translateY(13px) rotate(-45deg);
  }
  header .mobile-nav.active span:nth-of-type(2) {
    opacity: 0;
  }
  header .mobile-nav.active span:nth-of-type(3) {
    transform: translateY(-13px) rotate(45deg);
  }
  header .head-info {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 0;
  }
  header .head-info a {
    padding: 0;
  }
  header .head-info .tel, header .head-info .info {
    width: 174px;
  }
  header .head-info .tel {
    transition: all 300ms 0s ease;
  }
  header .head-info .tel img {
    display: block;
    height: 25px;
  }
  header .head-info .tel img:last-child {
    display: none;
  }
  header .head-info .f-btn-primary-hover img:first-child {
    display: none;
  }
  header .head-info .f-btn-primary-hover img:last-child {
    display: block;
  }
  header .head-info .info {
    margin-top: 4px;
  }
  footer {
    margin-top: 124px;
    padding: 32px 0 0;
    background-color: whitesmoke;
  }
  footer .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    margin: 0 auto;
  }
  footer .logo-fo {
    width: 160px;
  }
  footer .page-link {
    margin-top: 22px;
  }
  footer .page-link li {
    text-align: center;
  }
  footer .page-link a {
    color: #666666;
    font-size: 12px;
    text-decoration: none;
  }
  footer .page-link a:hover {
    text-decoration: underline;
  }
  footer .logo-fs {
    display: block;
    line-height: 0;
  }
  footer .logo-fs img {
    width: 82px;
  }
  footer .c-link {
    margin-top: 32px;
    padding: 24px 0;
    background-color: #fff;
    text-align: center;
  }
  footer .c-link p {
    margin-left: 12px;
    font-size: 10px;
  }
  footer .c-link .logo-area {
    display: flex;
    align-items: center;
  }
  footer .c-link ul {
    margin-top: 6px;
  }
  footer .c-link li {
    margin-right: 12px;
  }
  footer .c-link li:last-child {
    margin-right: 0;
  }
  footer .c-link a {
    color: #666666;
    font-size: 10px;
    text-decoration: none;
  }
  footer .c-link a:hover {
    text-decoration: underline;
  }
  .common-steps h2 {
    margin-top: 192px;
  }
  .common-steps h2 img {
    display: block;
    width: 290px;
    margin: 0 auto;
  }
  .common-steps ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 64px auto 0;
  }
  .common-steps ul .text {
    width: 90%;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px dotted #cccccc;
  }
  .common-steps ul .text:first-child {
    margin-top: 0;
    padding-top: 0;
    border: 0;
  }
  .common-steps ul .text img {
    display: block;
    width: 159px;
    margin: 0 auto;
  }
  .common-steps ul p {
    margin-top: 24px;
    text-align: center;
  }
  .common-steps .arrow {
    display: none;
  }
  .top .top-img {
    display: flex;
    height: 667px;
  }
  .top .top-img .top-img-box {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.3);
  }
  .top .top-img .bg-video {
    position: absolute;
    z-index: -100;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    background: url("./../images/top/top_static.jpg") no-repeat;
    background-size: cover;
    object-fit: cover;
  }
  .top .top-img h2 {
    margin-top: -10px;
  }
  .top .top-img h2 img {
    display: block;
    width: 80%;
    max-width: 440px;
    margin: 0 auto;
    line-height: 100%;
  }
  .top .top-img .btn-area {
    margin-top: 48px;
    text-align: center;
  }
  .top .top-img .btn {
    width: 256px;
    margin: 0 auto;
    border: 2px solid #fff;
  }
  .top .top-img .btn:last-child {
    margin-top: 24px;
  }
  .top .top-img .trial-btn img {
    width: 213px;
  }
  .top .top-img .trial-btn2 {
    display: inline-block;
    width: auto;
    margin-top: 0 !important;
    background-color: #ffab41;
  }
  .top .top-img .trial-btn2 img {
    width: 249px;
  }
  .top .top-img .doc-btn img {
    width: 150px;
  }
  .top .top-img2 {
    display: flex;
    position: relative;
    flex-direction: column-reverse;
    padding: 96px 0 48px;
    background: linear-gradient(0deg, #ace9dd 0%, #508ce2 50%);
  }
  .top .top-img2 .btn-area2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .top .top-img2 .btn-area2 h2 {
    position: absolute;
    top: 96px;
  }
  .top .top-img2 .btn-area2 h2 img {
    width: auto;
    height: 68px;
    margin: 0 auto;
  }
  .top .top-img2 .btn-area2 .trial-btn1, .top .top-img2 .btn-area2 .trial-btn2 {
    width: 90%;
    max-width: 400px;
    margin-top: 16px;
    margin-left: 0 !important;
    padding: 8px 18px;
    border-radius: 8px;
  }
  .top .top-img2 .btn-area2 .trial-btn1 {
    border: 4px solid #ff9b29;
    background-color: #fff;
  }
  .top .top-img2 .btn-area2 .trial-btn1 img {
    width: 90%;
    max-width: 240px;
  }
}

@media only screen and (max-width: 767px) and (min-width: 768px) {
  .top .top-img2 .btn-area2 .trial-btn1:hover {
    background-color: #fdc07a;
  }
}

@media only screen and (max-width: 767px) {
  .top .top-img2 .btn-area2 .trial-btn2 {
    border: 4px solid #ff9b29;
    background-color: #ff9b29;
  }
  .top .top-img2 .btn-area2 .trial-btn2 img {
    width: 90%;
    max-width: 296px;
  }
}

@media only screen and (max-width: 767px) and (min-width: 768px) {
  .top .top-img2 .btn-area2 .trial-btn2:hover {
    border: 4px solid #c07622;
    background-color: #c07622;
  }
}

@media only screen and (max-width: 767px) {
  .top .top-img2 .top-img-box {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    margin: 18% auto 0;
    padding-top: 50.625%;
    overflow: hidden;
  }
  .top .top-img2 .bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 100%;
    transform: translate(-30%, -52%);
    background: url("./../images/top/top_static.jpg") no-repeat;
    background-size: cover;
    object-fit: cover;
  }
  .top .top-img2 h2 {
    margin-top: -10px;
  }
  .top .top-img2 h2 img {
    display: block;
    width: 760px;
    line-height: 100%;
  }
  .top .top-img2 .btn-area {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
  }
  .top .top-img2 .btn {
    width: 273px;
    border: 2px solid #fff;
  }
  .top .top-img2 .btn:last-child {
    margin-left: 32px;
  }
  .top .top-img2 .trial-btn img {
    width: 213px;
  }
  .top .top-img2 .doc-btn img {
    width: 150px;
  }
  .top .holiday {
    position: relative;
    z-index: 100;
    width: 100%;
    margin: 0 auto 0;
    padding: 56px 10%;
    border-radius: 5px;
    background: linear-gradient(0deg, #d5ecfa 0%, white 80%);
    text-align: justify;
  }
  .top .holiday span {
    display: block;
    width: 100%;
    margin: 8px auto;
    padding: 8px 12px;
    border: 1px solid #005cd0;
    background-color: #fff;
    color: #005cd0;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
  }
  .top .top-banner {
    margin-top: 128px;
  }
  .top .top-banner .aspic, .top .top-banner .it {
    display: block;
    width: 90%;
    max-width: 450px;
    margin: 0 auto;
  }
  .top .top-banner .it {
    margin-top: 64px;
  }
  .top .top-img-info {
    width: 90%;
    margin: 64px auto;
  }
  .top .inspection {
    position: relative;
    width: calc(90% - 48px);
    max-width: 430px;
    margin: 64px auto 0;
    padding: 8px 0;
  }
  .top .inspection::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff3d0;
    box-shadow: 0 0 24px 24px #fff3d0;
  }
  .top .inspection .left {
    max-width: 430px;
  }
  .top .inspection .left .trial-btn2 {
    width: 100%;
    margin-left: 0 !important;
    padding: 16px 18px;
    border-radius: 5px;
    background-color: #ffab41;
  }
  .top .inspection .left .trial-btn2 img {
    width: 90%;
    max-width: 350px;
  }
}

@media only screen and (max-width: 767px) and (min-width: 768px) {
  .top .inspection .left .trial-btn2:hover {
    background-color: #c07622;
  }
}

@media only screen and (max-width: 767px) {
  .top .inspection .left p {
    margin-top: 16px;
  }
  .top .inspection .right {
    margin-top: 16px;
    line-height: 100%;
  }
  .top .inspection .right img {
    width: 100%;
    max-width: 400px;
    border-radius: 5px;
  }
  .top .special-news {
    margin: 0 0 64px;
    padding: 64px 0;
    background: linear-gradient(0deg, white 10%, ivory 50%, white 90%);
  }
  .top .special-news h3 {
    line-height: 0;
    text-align: center;
  }
  .top .special-news h3 img {
    width: 132px;
  }
  .top .special-news ul {
    margin-top: 48px;
  }
  .top .special-news ul li {
    width: 90%;
    max-width: 282px;
    margin: 48px auto 0;
  }
  .top .special-news ul li:first-child {
    margin-top: 0;
  }
  .top .special-news ul a {
    display: block;
  }
  .top .special-news h4 {
    margin-top: 4px;
    font-size: 15px;
    font-weight: normal;
    line-height: 180%;
  }
  .top .special-news .s-news-img {
    width: 100%;
    padding-top: 66.666%;
    border: 1px solid #cccccc;
    background-color: #fff;
    background-image: url("./../images/common/dummy-img.gif");
    background-position: center;
    background-size: cover;
  }
  .top .special-news .more-btn {
    width: 200px;
    margin: 48px auto 0;
    padding: 8px 0;
    font-weight: bolder;
  }
  .top .about p:first-child {
    margin-top: -8px;
  }
  .top .about .bg {
    height: 405px;
    background: linear-gradient(90deg, #508ce2 0%, #ace9dd 100%);
  }
  .top .about .box {
    width: 474px;
    max-width: 90%;
    margin: -405px auto 0;
    padding: 64px 0;
  }
  .top .about .text {
    width: 100%;
  }
  .top .about h2 img {
    display: block;
    width: 100%;
  }
  .top .about .text-box {
    width: 100%;
    margin-top: 32px;
    padding: 32px;
    background-color: #fff;
  }
  .top .about .pc-img {
    width: 100%;
    height: 0;
    padding-top: 60.7052%;
    background-image: url("./../images/top/pc@2x.png?20220915b");
    background-size: cover;
  }
  .top .about .pc-img video {
    display: block;
    width: 71%;
    margin: -58% auto 0;
    background: url("./../images/top/fam_cap2.jpg") no-repeat;
  }
  .top .about .function .tab-nav {
    width: 90%;
    margin: 0 auto;
    padding: 64px 0 0 0;
    border-top: 1px dashed #cccccc;
  }
  .top .about .function .tab-nav .slick-track {
    display: flex;
    flex-wrap: wrap;
    width: 100% !important;
    max-width: 350px;
    margin: 0 auto;
  }
  .top .about .function .f-btn-info {
    width: 46% !important;
    padding: 6px 10px;
    line-height: 100%;
    text-align: center;
    white-space: nowrap;
  }
  .top .about .function .f-btn-info:last-child {
    margin-right: 0;
  }
  .top .about .function .f-btn-info:nth-child(2n) {
    margin-left: 8%;
  }
  .top .about .function .f-btn-info:nth-child(n + 3) {
    margin-top: 16px;
  }
  .top .about .function .f-btn-info.active {
    background-color: #005cd0;
    color: #fff;
    font-weight: bolder;
  }
  .top .about .function .text-area .btn {
    margin: 16px auto 0;
  }
  .top .about .function .tab-contents {
    margin-top: 32px;
    overflow: hidden;
  }
  .top .about .function .tab-contents li {
    margin: 0 auto;
  }
  .top .about .function .tab-contents p {
    margin-top: 12px;
  }
  .top .about .function .tab-contents .text-area {
    width: 90%;
    max-width: 350px;
    margin: 0 auto 22px;
  }
  .top .about .function .cap1, .top .about .function .cap2, .top .about .function .cap3 {
    width: 90%;
    max-width: 350px;
    margin: 0 auto 8px;
    border-radius: 3px;
    background-position: center;
    background-size: cover;
    box-shadow: 8px 8px 9px -5px rgba(102, 102, 102, 0.3);
  }
  .top .about .function .cap1 .mobile, .top .about .function .cap2 .mobile, .top .about .function .cap3 .mobile {
    width: 100%;
    padding-top: 100%;
  }
  .top .about .function .f01, .top .about .function .f02, .top .about .function .f03, .top .about .function .f04, .top .about .function .f05, .top .about .function .f06, .top .about .function .f07 {
    display: flex;
    flex-direction: column-reverse;
  }
  .top .about .function .f01 .cap1 .mobile, .top .about .function .f01 .cap2 .mobile, .top .about .function .f01 .cap3 .mobile, .top .about .function .f02 .cap1 .mobile, .top .about .function .f02 .cap2 .mobile, .top .about .function .f02 .cap3 .mobile, .top .about .function .f03 .cap1 .mobile, .top .about .function .f03 .cap2 .mobile, .top .about .function .f03 .cap3 .mobile, .top .about .function .f04 .cap1 .mobile, .top .about .function .f04 .cap2 .mobile, .top .about .function .f04 .cap3 .mobile, .top .about .function .f05 .cap1 .mobile, .top .about .function .f05 .cap2 .mobile, .top .about .function .f05 .cap3 .mobile, .top .about .function .f06 .cap1 .mobile, .top .about .function .f06 .cap2 .mobile, .top .about .function .f06 .cap3 .mobile, .top .about .function .f07 .cap1 .mobile, .top .about .function .f07 .cap2 .mobile, .top .about .function .f07 .cap3 .mobile {
    text-indent: -9999px;
  }
  .top .about .function .f01 .cap2 {
    background-image: url("./../images/top/function/f01.jpg?20220910");
  }
  .top .about .function .f01 h3 img {
    width: 111px;
  }
  .top .about .function .f02 .cap1 {
    background-image: url("./../images/top/function/f02.jpg?20220915b");
  }
  .top .about .function .f02 h3 img {
    width: 140px;
  }
  .top .about .function .f03 .cap2 {
    background-image: url("./../images/top/function/f03.jpg?20220910");
  }
  .top .about .function .f03 h3 img {
    width: 110px;
  }
  .top .about .function .f04 .cap2 {
    background-image: url("./../images/top/function/f04.jpg?20220910");
  }
  .top .about .function .f04 h3 img {
    width: 140px;
  }
  .top .about .function .f05 .cap2 {
    background-image: url("./../images/top/function/f05.jpg?20220910");
  }
  .top .about .function .f05 h3 img {
    width: 111px;
  }
  .top .about .function .f06 .cap2 {
    background-image: url("./../images/top/function/f06.jpg?20220915b");
  }
  .top .about .function .f06 h3 img {
    width: 85px;
  }
  .top .about .function .f07 .cap3 {
    background-image: url("./../images/top/function/f07.jpg?20220910");
  }
  .top .about .function .f07 h3 img {
    width: 230px;
  }
  .top .function {
    overflow: hidden;
  }
  .top .function h2 {
    margin-top: 124px;
  }
  .top .function h2 img {
    display: block;
    width: 282px;
    margin: 0 auto;
  }
  .top .function .box {
    position: relative;
    padding: 64px 0;
  }
  .top .function .box p {
    margin-top: 24px;
  }
  .top .function .explanation {
    width: 90%;
    margin: 0 auto;
  }
  .top .function .communication {
    flex-direction: row-reverse;
    margin-top: 124px;
  }
  .top .function .communication h3 img {
    display: block;
    width: 100%;
    max-width: 354px;
  }
  .top .function .communication::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: skewY(6deg);
    background: linear-gradient(138deg, #fff9ff 20%, #ffffd7 100%);
  }
  .top .function .communication .ani {
    width: 297px;
    margin: 22px auto;
  }
  .top .function .management {
    margin-top: 64px;
  }
  .top .function .management .img {
    display: block;
    width: 90%;
    max-width: 200px;
    margin: 32px auto 0;
  }
  .top .function .management h3 img {
    display: block;
    width: 100%;
    max-width: 419px;
  }
  .top .function .team-work {
    flex-direction: row-reverse;
    margin-top: 64px;
  }
  .top .function .team-work .img {
    display: block;
    width: 90%;
    max-width: 250px;
    margin: 22px auto 0;
  }
  .top .function .team-work h3 img {
    display: block;
    width: 100%;
    max-width: 382px;
  }
  .top .function .team-work::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: skewY(-6deg);
    background: linear-gradient(138deg, #dcf6ff 0%, #fff6ff 100%);
  }
  .top .function .support {
    margin-top: 64px;
    padding-bottom: 0;
  }
  .top .function .support .img {
    display: block;
    width: 90%;
    max-width: 232px;
    margin: 22px auto 0;
  }
  .top .function .support .explanation {
    width: 90%;
    margin: 0 auto;
  }
  .top .function .support h3 img {
    display: block;
    width: 100%;
    max-width: 260px;
  }
  .top .a-day h2 {
    margin-top: 124px;
  }
  .top .a-day h2 img {
    display: block;
    width: 243px;
    margin: 0 auto;
  }
  .top .a-day p {
    width: 90%;
    margin: 56px auto 0;
  }
  .top .a-day .movie {
    width: 90%;
    margin: 32px auto 0;
  }
  .top .a-day .movie .box {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
  }
  .top .a-day .movie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .top .a-day .movie video {
    width: 100%;
  }
  .top .movies h2 {
    margin-top: 188px;
  }
  .top .movies h2 img {
    display: block;
    width: 237px;
    margin: 0 auto;
  }
  .top .movies .movies-list {
    margin-top: 64px;
  }
  .top .movies .movies-list li {
    margin: 32px auto 0;
  }
  .top .movies .movies-list .youtube {
    width: 80%;
    max-width: 640px;
    aspect-ratio: 16 / 9;
  }
  .top .movies .movies-list .youtube iframe {
    width: 100%;
    height: 100%;
  }
  .top .voice h2 {
    margin-top: 124px;
  }
  .top .voice h2 img {
    display: block;
    width: 300px;
    margin: 0 auto;
  }
  .top .voice .box {
    width: 90%;
    margin: 0 auto;
  }
  .top .voice .tweet {
    flex-direction: row-reverse;
    margin-top: 64px;
  }
  .top .voice .tweet h3 img {
    display: block;
    width: 202px;
  }
  .top .voice .tweet p {
    width: 100%;
    margin: 24px auto 0;
  }
  .top .voice .tweet .ani {
    width: 100%;
    max-width: 596px;
    margin: 8px auto 0;
  }
  .top .voice .motion {
    margin-top: 80px;
  }
  .top .voice .motion h3 img {
    display: block;
    width: 174px;
  }
  .top .voice .motion p {
    width: 100%;
    margin: 24px auto 0;
  }
  .top .voice .motion .ani {
    width: 100%;
    max-width: 347px;
    height: 362px;
    margin: 22px auto 0;
  }
  .top .top-case-study h2 {
    margin-top: 64px;
  }
  .top .top-case-study h2 img {
    display: block;
    width: 198px;
    margin: 0 auto;
  }
  .top .top-case-study p {
    width: 90%;
    margin: 0 auto;
  }
  .top .top-case-study .bg {
    padding: 52px 0 0 0;
    text-align: center;
  }
  .top .top-case-study .logo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin: 24px auto 0;
  }
  .top .top-case-study .logo li {
    width: calc(50% - 64px);
    max-width: 180px;
    margin: 32px 32px;
  }
  .top .top-case-study .logo li img {
    display: block;
    width: 100%;
  }
  .top .info h2 {
    margin-top: 124px;
  }
  .top .info h2 img {
    display: block;
    width: 198px;
    margin: 0 auto;
  }
  .top .info ul {
    width: 90%;
    margin: 64px auto 0;
  }
  .top .info li {
    margin-bottom: 16px;
    padding: 0 16px 16px;
    border-bottom: 1px solid #cccccc;
  }
  .top .info li:last-child {
    padding-bottom: 0;
    border: 0;
  }
  .top .info li span {
    display: block;
    width: 150px;
    margin-bottom: 8px;
    padding: 8px 16px;
    background-color: #005cd0;
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 100%;
    text-align: center;
  }
  .top .info .btn-area {
    margin-top: 48px;
    text-align: center;
  }
  .top .info .btn-area .btn {
    display: inline-block;
  }
  .top .fam-series h2 {
    margin-top: 124px;
  }
  .top .fam-series h2 img {
    display: block;
    width: 215px;
    margin: 0 auto;
  }
  .top .fam-series .fs-info {
    width: 90%;
    margin: 56px auto 0;
    text-align: justify;
  }
  .top .fam-series .fs-link-box {
    width: 90%;
    margin: 32px auto 0;
    padding: 32px 24px;
    border: 1px solid #cccccc;
    border-radius: 5px;
  }
  .top .fam-series .fs-link {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .top .fam-series .fs-link a {
    width: 80%;
    max-width: 285px;
  }
  .top .fam-series .fs-link a img {
    width: 100%;
  }
  .top .fam-series .fs-link .fs-text p {
    margin-top: 8px;
    text-align: justify;
  }
  .top .fam-series .fs-link .fs-text .btn {
    margin: 23px auto 0;
  }
  .top .fam-series .fs-link + .fs-link {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid #cccccc;
  }
  .blog, .blog-single {
    width: 90%;
    margin: 0 auto 0;
    padding-top: 48px;
    /* リンクをカード形式で表示させる時のスタイル */
  }
  .blog .news-icon img, .blog-single .news-icon img {
    display: block;
    width: 132px;
    margin: 0 auto;
  }
  .blog .seminar-icon img, .blog-single .seminar-icon img {
    display: block;
    width: 84px;
    margin: 0 auto;
  }
  .blog .useful-info-icon img, .blog-single .useful-info-icon img {
    display: block;
    width: 128px;
    margin: 0 auto;
  }
  .blog .case-study-icon img, .blog-single .case-study-icon img {
    display: block;
    width: 85px;
    margin: 0 auto;
  }
  .blog .post-thumbnail, .blog-single .post-thumbnail {
    margin: 0 0 0;
  }
  .blog .post-thumbnail img, .blog-single .post-thumbnail img {
    display: block;
    width: 100%;
  }
  .blog h1, .blog-single h1 {
    margin-top: 48px;
    font-size: 3.2rem;
    font-weight: bolder;
    line-height: 48px;
  }
  .blog h1:first-child, .blog-single h1:first-child {
    margin-top: -5px;
  }
  .blog h2, .blog-single h2 {
    font-size: 2.6rem;
    font-weight: bolder;
    line-height: 40px;
  }
  .blog h3, .blog-single h3 {
    font-size: 2rem;
    font-weight: bolder;
    line-height: 44px;
  }
  .blog p, .blog-single p {
    text-align: justify;
  }
  .blog p, .blog li, .blog-single p, .blog-single li {
    font-size: 1.8rem;
    line-height: 42px;
  }
  .blog ul, .blog-single ul {
    margin: 0 0 0 24px;
    list-style: disc;
  }
  .blog ul li + li, .blog-single ul li + li {
    margin-top: 12px;
  }
  .blog .blog-table, .blog-single .blog-table {
    font-size: 1.8rem;
    line-height: 42px;
  }
  .blog .blog-table th, .blog-single .blog-table th {
    width: 120px;
    max-width: 150px;
    padding: 16px 8px;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    line-height: 150%;
    vertical-align: middle;
  }
  .blog .blog-table .label, .blog-single .blog-table .label {
    font-weight: bold;
    text-align: center;
  }
  .blog .blog-table td, .blog-single .blog-table td {
    padding: 16px 8px;
    border-top: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    vertical-align: middle;
  }
  .blog .blog-table tr:nth-child(2 + n) th, .blog .blog-table tr:nth-child(2 + n) td, .blog-single .blog-table tr:nth-child(2 + n) th, .blog-single .blog-table tr:nth-child(2 + n) td {
    border-top: 0;
  }
  .blog .blog-table tr:nth-child(2n) th, .blog .blog-table tr:nth-child(2n) td, .blog-single .blog-table tr:nth-child(2n) th, .blog-single .blog-table tr:nth-child(2n) td {
    background-color: whitesmoke;
  }
  .blog .img-one, .blog-single .img-one {
    display: flex;
    justify-content: center;
  }
  .blog .img-one img, .blog-single .img-one img {
    display: block;
    max-width: 100%;
  }
  .blog .img-two, .blog-single .img-two {
    display: flex;
  }
  .blog .img-two img, .blog-single .img-two img {
    display: block;
    width: 47%;
  }
  .blog .img-two img:first-child, .blog-single .img-two img:first-child {
    margin-right: 6%;
  }
  .blog h1 + p, .blog-single h1 + p {
    margin-top: 44px;
  }
  .blog h1 + .blogcard, .blog-single h1 + .blogcard {
    margin-top: 28px;
  }
  .blog h1 + h2
, .blog h1 + h3
, .blog h1 + ul
, .blog h1 + table, .blog-single h1 + h2
, .blog-single h1 + h3
, .blog-single h1 + ul
, .blog-single h1 + table {
    margin-top: 44px;
  }
  .blog p + h2
, .blog p + h3
, .blog .blogcard + h2
, .blog .blogcard + h3, .blog-single p + h2
, .blog-single p + h3
, .blog-single .blogcard + h2
, .blog-single .blogcard + h3 {
    margin-top: 48px;
  }
  .blog h2 + p
, .blog h3 + p
, .blog h2 + .blogcard
, .blog h3 + .blogcard, .blog-single h2 + p
, .blog-single h3 + p
, .blog-single h2 + .blogcard
, .blog-single h3 + .blogcard {
    margin-top: 8px;
  }
  .blog h2 + h3, .blog-single h2 + h3 {
    margin-top: 16px;
  }
  .blog h2 + .img-one
, .blog p + .img-one
, .blog h3 + .img-one
, .blog ul + .img-one
, .blog .blogcard + .img-one
, .blog h2 + .img-two
, .blog p + .img-two
, .blog h3 + .img-two
, .blog ul + .img-two
, .blog .blogcard + .img-two, .blog-single h2 + .img-one
, .blog-single p + .img-one
, .blog-single h3 + .img-one
, .blog-single ul + .img-one
, .blog-single .blogcard + .img-one
, .blog-single h2 + .img-two
, .blog-single p + .img-two
, .blog-single h3 + .img-two
, .blog-single ul + .img-two
, .blog-single .blogcard + .img-two {
    margin-top: 60px;
  }
  .blog .img-one + h2
, .blog .img-one + p
, .blog .img-one + h3
, .blog .img-one + ul
, .blog .img-one + .blogcard
, .blog .img-two + h2
, .blog .img-two + p
, .blog .img-two + h3
, .blog .img-two + ul
, .blog .img-two + .blogcard, .blog-single .img-one + h2
, .blog-single .img-one + p
, .blog-single .img-one + h3
, .blog-single .img-one + ul
, .blog-single .img-one + .blogcard
, .blog-single .img-two + h2
, .blog-single .img-two + p
, .blog-single .img-two + h3
, .blog-single .img-two + ul
, .blog-single .img-two + .blogcard {
    margin-top: 60px;
  }
  .blog h2 + ul
, .blog ul + h2
, .blog h3 + ul
, .blog ul + h3
, .blog ul + p
, .blog p + ul
, .blog .blogcard + ul
, .blog ul + .blogcard, .blog-single h2 + ul
, .blog-single ul + h2
, .blog-single h3 + ul
, .blog-single ul + h3
, .blog-single ul + p
, .blog-single p + ul
, .blog-single .blogcard + ul
, .blog-single ul + .blogcard {
    margin-top: 48px;
  }
  .blog h2 + table
, .blog p + table
, .blog h3 + table
, .blog ul + table
, .blog .blogcard + table
, .blog table + h2
, .blog table + p
, .blog table + h3
, .blog table + ul
, .blog table + .blogcard, .blog-single h2 + table
, .blog-single p + table
, .blog-single h3 + table
, .blog-single ul + table
, .blog-single .blogcard + table
, .blog-single table + h2
, .blog-single table + p
, .blog-single table + h3
, .blog-single table + ul
, .blog-single table + .blogcard {
    margin-top: 60px;
  }
  .blog .blogcard + p
, .blog p + .blogcard, .blog-single .blogcard + p
, .blog-single p + .blogcard {
    margin-top: 24px;
  }
  .blog .page-navi, .blog-single .page-navi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 124px;
  }
  .blog .page-navi a, .blog-single .page-navi a {
    display: flex;
    align-items: center;
    text-decoration: none;
  }
  .blog .page-navi a img, .blog-single .page-navi a img {
    display: block;
    height: 16px;
  }
  .blog .page-navi a span, .blog-single .page-navi a span {
    display: block;
    font-size: 1.4rem;
    line-height: 0;
  }
  .blog .page-navi a:hover span, .blog-single .page-navi a:hover span {
    text-decoration: underline;
  }
  .blog .page-navi a:first-child span, .blog-single .page-navi a:first-child span {
    margin-left: 12px;
  }
  .blog .page-navi a:last-child span, .blog-single .page-navi a:last-child span {
    margin-right: 12px;
  }
  .blog .blogcard, .blog-single .blogcard {
    margin-top: 48px;
    border: 1px solid #cccccc;
    box-shadow: 0 0 5px 3px rgba(102, 102, 102, 0.1);
    color: #000;
    line-height: 1;
    word-wrap: break-word;
  }
  .blog .blogcard a, .blog-single .blogcard a {
    transition: all .2s ease;
    opacity: 1;
    color: #222222;
    text-decoration: none;
  }
  .blog .blogcard a:hover, .blog-single .blogcard a:hover {
    opacity: .6;
    color: #003f8d;
  }
  .blog .blogcard .blogcard-thumbnail, .blog-single .blogcard .blogcard-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(102, 102, 102, 0.05);
  }
  .blog .blogcard .blogcard-thumbnail img, .blog-single .blogcard .blogcard-thumbnail img {
    display: block;
    width: 100%;
    padding: 20px;
  }
  .blog .blogcard .blogcard-thumbnail .logo, .blog-single .blogcard .blogcard-thumbnail .logo {
    width: 60%;
    padding: 20px 0;
    opacity: .5;
  }
  .blog .blogcard .blogcard-title, .blog-single .blogcard .blogcard-title {
    padding: 20px 20px 10px;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.4;
  }
  .blog .blogcard .blogcard-excerpt, .blog-single .blogcard .blogcard-excerpt {
    padding: 0 20px 15px;
    font-size: .85em;
    line-height: 1.6;
  }
  .blog .blogcard .blogcard-link, .blog-single .blogcard .blogcard-link {
    padding: 0 20px 20px;
    font-size: .65em;
    text-align: left;
  }
  .blog .blogcard .blogcard-link .icon-external-link-alt::before, .blog-single .blogcard .blogcard-link .icon-external-link-alt::before {
    font-size: .75em;
  }
  .blog-list {
    margin: 64px auto 0;
  }
  .blog-list .list {
    width: 100%;
    padding: 0 5%;
  }
  .blog-list .list a {
    display: block;
    text-decoration: none;
  }
  .blog-list .list a:hover {
    opacity: 0.6;
  }
  .blog-list .list a .setsumei {
    color: #222222;
  }
  .blog-list .list .img-area {
    width: 100%;
    height: 200px;
    border: 1px solid #cccccc;
    background-image: url("./../images/common/dummy-img.gif");
    background-position: center;
    background-size: cover;
  }
  .blog-list .list .img-area + .title {
    margin-top: 21px;
  }
  .blog-list .list .setsumei, .blog-list .list th, .blog-list .list td {
    font-size: 15px;
    line-height: 23px;
  }
  .blog-list .list .title {
    margin-top: -3px;
    font-size: 18px;
    font-weight: bold;
    line-height: 24px;
  }
  .blog-list .list .setsumei {
    margin-top: 9px;
  }
  .blog-list .list .bottom-box {
    margin-top: 12px;
    margin-bottom: 64px;
  }
  .blog-list .list .bottom-box table {
    width: 100%;
  }
  .blog-list .list .bottom-box th, .blog-list .list .bottom-box td {
    padding: 8px 16px;
    border-top: 1px solid #cccccc;
  }
  .blog-list .list .bottom-box tr:last-child th, .blog-list .list .bottom-box tr:last-child td {
    border-bottom: 1px solid #cccccc;
  }
  .blog-list .list .bottom-box th {
    width: 70px;
    color: #005cd0;
  }
  .blog-list .list:last-child .bottom-box {
    margin-bottom: 0;
  }
  .blog-title {
    margin-top: 43px;
  }
  .blog-title img {
    display: block;
    margin: 0 auto;
  }
  .blog-title .case-study-title {
    width: 85px;
  }
  .blog-title .seminar-title {
    width: 84px;
  }
  .blog-title .news-title {
    width: 83px;
  }
  .blog-title .column-title {
    width: 60px;
  }
  .blog-title .useful-info-title {
    display: block;
    width: 128px;
    margin: 0 auto;
  }
  .bread-crumbs {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    margin: 96px auto 0;
    line-height: 180%;
  }
  .bread-crumbs a {
    color: #222222;
    text-decoration: none;
  }
  .bread-crumbs a:hover {
    text-decoration: underline;
  }
  .bread-crumbs .material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0,"opsz" 48;
  }
  .blog-list-common {
    margin-top: 24px;
  }
  .blog-sub-title {
    margin-top: 8px;
    color: #005cd0;
    font-weight: bold;
    text-align: center;
  }
  .blog-list-box .right, .blog-box .right {
    width: 90%;
    margin: 64px auto 0;
    padding: 24px 24px 20px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
  }
  .blog-list-box .right h3, .blog-box .right h3 {
    line-height: 100%;
  }
  .blog-list-box .right li, .blog-box .right li {
    margin-top: 8px;
    padding: 6px 12px;
    font-size: 1.4rem;
    line-height: 160%;
  }
  .blog-list-box .right li:first-child, .blog-box .right li:first-child {
    margin-top: 14px;
  }
  .blog-list-box .right li a, .blog-box .right li a {
    text-decoration: none;
  }
  .blog-list-box .right li a:hover, .blog-box .right li a:hover {
    text-decoration: underline;
  }
  .blog-list-box .right li.active, .blog-box .right li.active {
    border-radius: 4px;
    background-color: rgba(102, 102, 102, 0.1);
    font-weight: bold;
  }
  .blog-box .cot-list {
    margin: 28px 0;
    padding: 48px 32px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 5px 5px 10px rgba(102, 102, 102, 0.05);
  }
  .blog-box .cot-list:first-child {
    margin-top: 0;
  }
  .blog-box .cot-list .mokuji-text {
    display: block;
    margin-bottom: 16px;
    padding: 0 0 8px 16px;
    border-bottom: 1px solid rgba(102, 102, 102, 0.2);
    font-size: 1.6rem;
    font-weight: bolder;
  }
  .blog-box .single-mokuji {
    margin-left: 16px;
    list-style-type: none;
    counter-reset: item;
  }
  .blog-box .single-mokuji a {
    color: #222222;
    text-decoration: underline;
  }
  .blog-box .single-mokuji a:hover {
    text-decoration: none;
  }
  .blog-box .single-mokuji li {
    margin: 12px 0 0;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 150%;
    counter-increment: item;
  }
  .blog-box .single-mokuji li::before {
    content: counters(item, ".") ". ";
  }
  .blog-box .single-mokuji li:first-child {
    margin-top: 0;
  }
  .blog-box .single-mokuji li ol {
    margin-left: 16px;
    list-style-type: none;
    counter-reset: subitem;
  }
  .blog-box .single-mokuji li ol li {
    font-size: 1.4rem;
    font-weight: bold;
    counter-increment: subitem;
  }
  .blog-box .single-mokuji li ol li::before {
    content: counter(item) "-" counters(subitem, ".") ". ";
  }
  .blog-box .single-mokuji li ol li:first-child {
    margin-top: 12px;
  }
  .blog-not-found {
    margin-top: 54px;
    text-align: center;
  }
  .contact, .trial {
    margin-top: 130px;
  }
  .contact h1 img, .trial h1 img {
    display: block;
    margin: 0 auto;
  }
  .contact h1 .trial, .trial h1 .trial {
    height: 42px;
  }
  .contact h1 .doc-req, .trial h1 .doc-req {
    height: 42px;
  }
  .contact h1 .send-complete, .trial h1 .send-complete {
    width: 290px;
  }
  .contact .conditions, .trial .conditions {
    margin-top: 56px;
    color: #005cd0;
    font-size: 1.8rem;
    line-height: 100%;
    text-align: center;
  }
  .contact .conditions-list, .trial .conditions-list {
    width: 90%;
    margin: 24px auto 0;
    padding-left: 16px;
    list-style: disc;
    text-align: justify;
  }
  .contact .conditions-list li + li, .trial .conditions-list li + li {
    margin-top: 16px;
  }
  .contact .conditions-info, .trial .conditions-info {
    margin: 24px auto 0;
    padding: 16px;
    border-radius: 5px;
    background: linear-gradient(150deg, #ace9dd 0%, #508ce2 60%);
    color: #fff;
  }
  .contact .conditions-info img, .trial .conditions-info img {
    display: block;
    width: 30px;
    margin: 0 auto 12px;
  }
  .contact .conditions-info table, .trial .conditions-info table {
    width: 100%;
    vertical-align: middle;
  }
  .contact .conditions-info th, .trial .conditions-info th {
    padding: 8px 12px;
    border-bottom: 1px solid #fff;
    color: #fff;
    font-size: 1.2rem;
    line-height: 130%;
    text-align: left;
  }
  .contact .conditions-info td, .trial .conditions-info td {
    padding: 8px 12px 8px;
    border-bottom: 1px solid #fff;
    font-size: 1.7rem;
    font-weight: bold;
    line-height: 100%;
  }
  .contact .send-complete-img, .trial .send-complete-img {
    display: block;
    width: 280px;
    margin: 80px auto;
  }
  .contact .info, .trial .info {
    width: 100%;
    margin: 52px auto 0;
    font-size: 1.6rem;
    line-height: 32px;
    text-align: justify;
  }
  .contact .info + p, .trial .info + p {
    height: 0;
    margin: 0;
  }
  .contact article, .trial article {
    width: 90%;
    margin: 0 auto;
  }
  .contact table, .trial table {
    font-size: 1.65rem;
  }
  .contact table th, .contact table .label, .trial table th, .trial table .label {
    padding: 15px;
    border-bottom: 1px solid #cccccc;
    color: #005cd0;
    vertical-align: middle;
  }
  .contact table .label, .trial table .label {
    font-weight: bold;
    text-align: center;
  }
  .contact table td, .trial table td {
    padding: 15px;
    border-bottom: 1px solid #cccccc;
    vertical-align: middle;
  }
  .contact table tr:last-child th, .contact table tr:last-child td, .trial table tr:last-child th, .trial table tr:last-child td {
    border-bottom: 0;
  }
  .contact table ul, .trial table ul {
    margin-left: 25px;
    list-style: disc;
  }
  .price {
    margin: 130px auto 0;
  }
  .price h1 img {
    display: block;
    width: 65px;
    margin: 0 auto;
  }
  .price .title-info {
    margin-top: 16px;
    color: #868686;
    font-size: 1.2rem;
    line-height: 100%;
    text-align: center;
  }
  .price h2 {
    margin-top: 64px;
    line-height: 100%;
  }
  .price h2 img {
    margin: 0 auto;
  }
  .price .title-charges img {
    width: 267px;
  }
  .price .title-option img {
    width: 245px;
  }
  .price .sub-text {
    margin-top: 23px;
    text-align: center;
  }
  .price .price-head-img {
    display: block;
    width: 90%;
    max-width: 478px;
    margin: 23px auto 0;
  }
  .price .price-box {
    width: 90%;
    margin: 0 auto;
  }
  .price .price-table {
    margin: 32px auto 0;
    padding: 32px;
    border: 1px solid #cccccc;
    border-radius: 5px;
  }
  .price .price-table table {
    width: 100%;
  }
  .price .price-table tr {
    display: flex;
    flex-direction: column;
  }
  .price .price-table th {
    padding: 24px 0 0;
    border-top: 1px solid #cccccc;
    font-size: 2.4rem;
  }
  .price .price-table td {
    padding: 16px 0 24px 0;
    text-align: center;
  }
  .price .price-table tr:first-child th {
    padding-top: 0;
    border-top: 0;
  }
  .price .price-table .price-num {
    color: #005cd0;
    font-size: 3rem;
    font-weight: bolder;
    line-height: 100%;
  }
  .price .price-table .price-unit {
    display: inline-block;
    margin-left: 4px;
    font-size: 1.4rem;
    font-weight: bolder;
    line-height: 100%;
  }
  .price .price-table .price-info {
    display: block;
    margin-top: 8px;
    font-size: 1.6rem;
    line-height: 100%;
  }
  .price .price-table ul {
    margin-top: 14px;
    margin-left: 24px;
    list-style: disc;
  }
  .price .option-box {
    margin-top: 96px;
    padding: 96px 10% 72px;
    background-color: #e9f7ff;
  }
  .price .option-box h2 {
    margin-top: 0;
  }
  .price .option-box table {
    width: 100%;
    margin-top: 32px;
  }
  .price .option-box tr {
    display: flex;
    flex-direction: column;
  }
  .price .option-box th {
    padding: 32px 0 0;
    border-top: 1px solid #cccccc;
    font-size: 1.8rem;
  }
  .price .option-box tr:first-child th {
    padding-top: 0;
    border-top: 0;
  }
  .price .option-box td {
    padding: 24px 0 23px;
    text-align: center;
  }
  .price .option-box td p {
    text-align: justify;
  }
  .price .option-box .price-num {
    color: #005cd0;
    font-size: 3rem;
    font-weight: bolder;
    line-height: 100%;
  }
  .price .option-box .price-unit {
    display: inline-block;
    margin-left: 8px;
    font-size: 1.4rem;
    font-weight: bolder;
    line-height: 100%;
  }
  .price .option-box .price-unit:first-child {
    margin-right: 8px;
    margin-bottom: 0;
  }
  .price .option-box .price-info {
    margin-top: 7px;
    font-size: 1.6rem;
  }
  .price .option-box ul {
    margin-top: 15px;
    margin-left: 24px;
    list-style: disc;
    text-align: left;
  }
  .price .common-steps {
    margin: 96px auto 0;
  }
  .price .common-steps h2 {
    margin-top: 0;
  }
  .seminar {
    margin: 0 auto 0;
  }
  .doc-dl {
    margin: 66px auto 0;
    padding-top: 64px;
  }
  .case-study h1 img, .doc-dl h1 img, .blog-list-common h1 img {
    display: block;
    margin: 0 auto;
  }
  .case-study .blog-list .sp-box, .doc-dl .blog-list .sp-box, .blog-list-common .blog-list .sp-box {
    margin-top: 48px;
    padding-top: 48px;
    border-top: 1px solid #cccccc;
  }
  .case-study .blog-list .list:first-child .sp-box, .doc-dl .blog-list .list:first-child .sp-box, .blog-list-common .blog-list .list:first-child .sp-box {
    margin-top: 0;
    padding-top: 0;
    border: 0;
  }
  .doc-dl h1 img {
    width: 171px;
  }
  .doc-dl .btn {
    margin-top: 16px;
    padding: 2px 8px;
    font-weight: bold;
  }
  .doc-dl .img-area {
    margin-top: 8px;
  }
  .doc-dl .all-doc-area {
    width: 90%;
    max-width: 500px;
    margin: 64px auto 0;
  }
  .doc-dl .all-doc-area .btn {
    padding: 6px 8px;
  }
  .doc-dl-all {
    margin: 48px auto 0;
  }
  .doc-dl-all h1 img {
    display: block;
    width: 128px;
    margin: 0 auto;
  }
  .functions {
    margin: 66px auto 0;
    padding-top: 64px;
  }
  .functions h1 img {
    display: block;
    width: 84px;
    margin: 0 auto;
  }
  .functions .section-nav p {
    width: 90%;
    margin: 64px auto 0;
  }
  .functions .section-nav .title-img {
    display: block;
    width: 90%;
    max-width: 540px;
    margin: 48px auto 0;
  }
  .functions .section-nav ul {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    max-width: 300px;
    margin: 32px auto 0;
    padding: 32px 24px;
    border: 2px solid #005cd0;
  }
  .functions .section-nav li {
    position: static;
    margin: 24px 0 0 16px;
    padding: 0 0 0 10px;
    color: #005cd0;
    font-weight: bolder;
    cursor: pointer;
  }
  .functions .section-nav li:first-child {
    margin-top: 0;
  }
  .functions .section-nav li::before {
    content: "";
    position: relative;
    top: 14px;
    left: -5px;
    width: 0;
    height: 0;
    border-width: 10px 7.5px 0 7.5px;
    border-style: solid;
    border-color: #005cd0 transparent transparent transparent;
  }
  .functions .section-nav li.no-arrow::before {
    border: 0;
  }
  .functions .f-section {
    margin: 96px auto 0;
  }
  .functions .f-section:last-child {
    padding-bottom: 88px;
    border-bottom: 1px dashed #cccccc;
  }
  .functions .f-section .title-area {
    padding-top: 48px;
    padding-bottom: 39px;
  }
  .functions .f-section .title-area .svg-icon {
    fill: #fff;
  }
  .functions .f-section .title-area .s-title {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #005cd0;
    font-size: 2rem;
    line-height: 100%;
  }
  .functions .f-section .title-area .s-title img {
    margin-right: 6px;
  }
  .functions .f-section .title-area .f-info {
    width: 90%;
    margin: 23px auto 0;
    text-align: justify;
  }
  .functions .f-section .bg1 {
    background: linear-gradient(145deg, #fff9ff 20%, #ffffd7 100%);
  }
  .functions .f-section .bg2 {
    background: linear-gradient(290deg, #dcf6ff 0%, #fff6ff 100%);
  }
  .functions .f-section .bg3 {
    background: linear-gradient(290deg, #fff9ff 20%, #ffffd7 100%);
  }
  .functions .f-section .bg4 {
    background: linear-gradient(145deg, #dcf6ff 0%, #fff6ff 100%);
  }
  .functions .f-section .bg5 {
    background-color: rgba(0, 92, 208, 0.05);
  }
  .functions .f-section .section-wrap {
    width: 90%;
    margin: 45px auto 0;
  }
  .functions .f-section .f-list {
    display: flex;
    flex-wrap: wrap;
  }
  .functions .f-section .f-list li {
    width: 100%;
    padding: 16px 16px 12px;
    border: 1px solid #cccccc;
    border-radius: 5px;
  }
  .functions .f-section .f-list li:nth-child(n + 2) {
    margin-top: 32px;
  }
  .functions .f-section .f-list li h3 {
    display: flex;
    align-items: center;
    margin-top: 5px;
    padding-left: 8px;
    border-left: 5px solid #005cd0;
    font-size: 1.6rem;
    line-height: 160%;
  }
  .functions .f-section .f-list li h3 span {
    padding-left: 8px;
    font-size: 1rem;
  }
  .functions .f-section .f-list li ul {
    list-style: disc;
  }
  .functions .f-section .f-list li ul li {
    width: 100%;
    margin-left: 16px;
    padding: 0 16px 0 0;
    border: 0;
  }
  .functions .f-section .f-list .f-image {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 8px;
  }
  .functions .f-section .f-list .f-image img {
    width: 100%;
    max-width: 300px;
    max-height: 200px;
  }
  .functions .f-section .f-list .f-image .border {
    border: 1px solid #cccccc;
  }
  .functions .f-section .f-list p {
    margin-top: 15px;
  }
  .functions .f-section .section-foot-nav-area {
    margin-top: 48px;
    line-height: 100%;
    text-align: right;
  }
  .functions .f-section .section-foot-nav-area .section-foot-nav {
    position: relative;
    color: #005cd0;
    cursor: pointer;
  }
  .functions .f-section .section-foot-nav-area .section-foot-nav:hover {
    text-decoration: underline;
  }
  .functions .f-section .section-foot-nav-area .section-foot-nav::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -16px;
    width: 0;
    height: 0;
    margin-top: -6px;
    border-width: 6px 0 6px 8px;
    border-style: solid;
    border-color: transparent transparent transparent #005cd0;
  }
  .functions .f-section .info-table {
    width: 100%;
    margin: 48px auto 0;
  }
  .functions .f-section .info-table table {
    width: 100%;
  }
  .functions .f-section .info-table th, .functions .f-section .info-table td {
    display: block;
    padding: 0 16px;
  }
  .functions .f-section .info-table th {
    padding-top: 16px;
    color: #005cd0;
    font-size: 1.7rem;
    text-align: left;
  }
  .functions .f-section .info-table .th-only {
    text-align: left;
    white-space: normal;
  }
  .functions .f-section .info-table td {
    padding-bottom: 16px;
    border-bottom: 1px solid #cccccc;
    font-size: 1.5rem;
  }
  .functions .f-section .info-table td ul {
    list-style: disc;
  }
  .functions .f-section .info-table td ul li {
    margin-left: 16px;
    font-size: 1.5rem;
  }
  .functions .f-section .info-table tr:first-child th, .functions .f-section .info-table tr:first-child td {
    padding-top: 0;
    border-top: 0;
  }
  .functions .f-section .info-table tr:last-child td {
    padding-bottom: 0;
    border: 0;
  }
  .service {
    margin: 66px auto 0;
    padding-top: 64px;
  }
  .service h1 img {
    display: block;
    width: 128px;
    margin: 0 auto;
  }
  .service .service-img-area {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    margin-top: 90px;
    padding: 48px 0;
    background: linear-gradient(90deg, #cdf2eb 0%, #61a0e1 100%);
  }
  .service .service-img-area .service-img {
    width: 90%;
    max-width: 498px;
    margin-top: 48px;
  }
  .service .service-img-area p img {
    display: block;
    width: 90%;
    max-width: 413px;
    margin: 0 auto 0;
  }
  .service .background {
    margin-top: 96px;
  }
  .service .background .title img {
    width: 355px;
    margin: 0 auto;
  }
  .service .background .text {
    width: 90%;
    max-width: 645px;
    margin: 55px auto 0;
    text-align: justify;
  }
  .service .background .text p {
    text-align: justify;
  }
  .service .background .comment {
    margin-top: 48px;
    padding: 24px 0;
    background: linear-gradient(180deg, #cdf2eb 0%, #fff 100%);
  }
  .service .background .comment .box:first-child p:first-child {
    margin-top: 0;
  }
  .service .background .comment .box .fukidashi {
    position: relative;
    box-sizing: border-box;
    width: 310px;
    margin: 32px auto 0;
    padding: 12px 16px;
    border: solid 3px #cdf2eb;
    border-radius: 5px;
    background: #fff;
  }
  .service .background .comment .box .fl::before, .service .background .comment .box .fr::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 50%;
    border: 12px solid transparent;
  }
  .service .background .comment .box .fl::after, .service .background .comment .box .fr::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    border: 14px solid transparent;
  }
  .service .background .comment .box .fl::before {
    left: -24px;
    margin-top: -12px;
    border-right: 12px solid #fff;
  }
  .service .background .comment .box .fl::after {
    left: -30px;
    margin-top: -14px;
    border-right: 14px solid #cdf2eb;
  }
  .service .background .comment .box .fr::before {
    right: -24px;
    margin-top: -12px;
    border-left: 12px solid #fff;
  }
  .service .background .comment .box .fr::after {
    right: -30px;
    margin-top: -14px;
    border-left: 14px solid #cdf2eb;
  }
  .service .background .comment .box .fukidashi p {
    margin: 0;
    padding: 0;
  }
  .service .difference {
    margin-top: 48px;
  }
  .service .difference .title {
    margin-top: 96px;
  }
  .service .difference .title img {
    width: 287px;
    margin: 0 auto;
  }
  .service .difference .text {
    width: 90%;
    max-width: 443px;
    margin: 39px auto 0;
  }
  .service .difference .sheet {
    display: block;
    width: 90%;
    max-width: 715px;
    margin: 39px auto 0;
  }
  .service .difference .box {
    margin-top: 39px;
  }
  .service .difference .box p {
    width: 90%;
    max-width: 443px;
    margin: 0 auto;
    text-align: justify;
  }
  .service .difference .box img {
    display: block;
    width: 90%;
    max-width: 518px;
    margin: 39px auto 0;
  }
  .service .use-case {
    margin-top: 96px;
  }
  .service .use-case .title img {
    width: 220px;
    margin: 0 auto;
  }
  .service .use-case .text1 {
    margin-top: 39px;
    text-align: center;
  }
  .service .use-case .people {
    width: 90%;
    max-width: 450px;
    margin: 48px auto 0;
    padding: 24px;
    border: 1px solid #005cd0;
  }
  .service .use-case .people h3 {
    margin-top: 8px;
    line-height: 100%;
    text-align: center;
  }
  .service .use-case .people h3 img {
    width: 94px;
  }
  .service .use-case .people .people-box {
    margin-top: 32px;
  }
  .service .use-case .people .people-box .box {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px dashed #cccccc;
  }
  .service .use-case .people .people-box .box img {
    display: block;
    width: 88px;
    margin: 0 auto;
  }
  .service .use-case .people .people-box .box p {
    margin-top: 13px;
    text-align: justify;
  }
  .service .use-case .people .people-box .box:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .service .use-case .flow {
    padding: 48px 0;
  }
  .service .use-case .flow h4 {
    line-height: 100%;
  }
  .service .use-case .flow h4 img {
    max-width: 95%;
    height: 22px;
  }
  .service .use-case .flow .text3 {
    width: 90%;
    max-width: 340px;
    margin: 0 auto;
  }
  .service .use-case .flow .text3 p {
    margin-top: 23px;
  }
  .service .use-case .flow .img-box {
    width: 90%;
    max-width: 559px;
    margin: 29px auto 0;
  }
  .service .use-case .flow-img {
    display: block;
    width: 100%;
  }
  .service .use-case .flow1 {
    margin-top: 48px;
  }
  .service .use-case .flow2 {
    background: linear-gradient(0deg, #d7e7f7 0%, #f7fff3 100%);
  }
  .service .use-case .flow4 {
    background: linear-gradient(0deg, #f7fff3 0%, #fff4de 100%);
  }
  .service .use-case .flow6 {
    background: linear-gradient(0deg, #fff4de 0%, #e3e8ff 100%);
  }
  .service .effect {
    margin-top: 96px;
  }
  .service .effect .title img {
    width: 279px;
    margin: 0 auto;
  }
  .service .effect .box .flow-img {
    display: block;
    width: 90%;
    margin: 32px auto 0;
  }
  .service .effect .box .text-box {
    width: 90%;
    margin: 64px auto 0;
  }
  .service .effect .box + .box {
    margin-top: 48px;
  }
  .service .effect .box h3 {
    line-height: 100%;
  }
  .service .effect .effect1 h3 img {
    width: 216px;
  }
  .service .effect .effect1 p {
    margin-top: 15px;
    text-align: justify;
  }
  .service .effect .effect1 .flow-img {
    max-width: 427px;
  }
  .service .effect .effect2 {
    padding: 48px 0;
    background-color: #f0f5fc;
  }
  .service .effect .effect2 .text-box {
    margin-top: 0;
  }
  .service .effect .effect2 h3 img {
    width: 93px;
  }
  .service .effect .effect2 p {
    max-width: 443px;
    margin-top: 15px;
    text-align: justify;
  }
  .service .effect .effect2 .flow-img {
    max-width: 517px;
  }
  .service .effect .effect3 .text-box h3 img {
    width: 194px;
  }
  .service .effect .effect3 .text-box p {
    max-width: 443px;
    margin: 15px auto 0;
  }
  .service .effect .effect3 .img-box {
    width: 90%;
    max-width: 327px;
    margin: 0 auto;
  }
  .service .effect .effect3 .img-box .flow-img {
    width: 100%;
  }
  .service .effect .effect3 .img-box p {
    width: 100%;
    margin-top: 15px;
    color: rgba(0, 0, 0, 0.3);
    font-size: 1.2rem;
  }
  .useful-info {
    margin: 66px auto 0;
    padding-top: 64px;
  }
  .useful-info h1 img {
    display: block;
    width: 128px;
    margin: 0 auto;
  }
  .useful-info .cat-tab {
    margin-top: 64px;
  }
  .useful-info .cat-tab ul {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .useful-info .cat-tab ul li {
    margin-left: 32px;
    opacity: .5;
    font-weight: bolder;
    letter-spacing: 3px;
  }
  .useful-info .cat-tab ul li:first-child {
    margin-left: 0;
  }
  .useful-info .cat-tab ul li:hover {
    opacity: 1;
  }
  .useful-info .cat-tab ul .cat-tab-active {
    opacity: 1;
  }
  .useful-info .cat-tab ul .btn {
    border: 2px solid #005cd0;
  }
  .useful-info .blog-list {
    display: none;
    animation-name: fade-in;
    animation-duration: .5s;
    opacity: 0;
  }
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .useful-info .blog-list .sp-box {
    margin-top: 48px;
    padding-top: 48px;
    border-top: 1px solid #cccccc;
  }
  .useful-info .blog-list .list:first-child .sp-box {
    margin-top: 0;
    padding-top: 0;
    border: 0;
  }
  .useful-info .blog-list .cat-name {
    width: 60px;
    padding: 6px 0;
    border: 1px solid #005cd0;
    border-radius: 3px;
    font-size: 1.2rem;
    line-height: 100%;
    text-align: center;
  }
  .useful-info .blog-list.list-active {
    display: block;
    opacity: 1;
  }
  .useful-info .blog-list .tags {
    display: flex;
    flex-wrap: wrap;
    margin-top: 16px;
  }
  .useful-info .blog-list .tags li {
    margin: 8px 8px 0 0;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: rgba(0, 92, 208, 0.1);
    color: #222222;
    font-size: 1rem;
    line-height: 120%;
  }
  .useful-info .img-area {
    margin-top: 8px;
  }
  .faq {
    margin: 48px auto 0;
  }
  .faq h1 img {
    display: block;
    width: 126px;
    margin: 130px auto 0;
  }
  .faq .cat-tab {
    margin-top: 64px;
  }
  .faq .cat-tab ul {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    max-width: 600px;
    margin: 0 5%;
  }
  .faq .cat-tab ul li {
    width: 47.5%;
    max-width: 290px;
    opacity: .5;
    font-size: 1.2rem;
    font-weight: bolder;
    letter-spacing: 3px;
  }
  .faq .cat-tab ul li:nth-child(2n) {
    margin-left: 5%;
  }
  .faq .cat-tab ul li:nth-child(n + 3) {
    margin-top: 5%;
  }
  .faq .cat-tab ul li:hover {
    opacity: 1;
  }
  .faq .cat-tab ul .cat-tab-active {
    opacity: 1;
  }
  .faq .cat-tab ul .btn {
    border: 2px solid #005cd0;
  }
  .faq .blog-list {
    display: none;
    flex-direction: column;
    width: 90%;
    max-width: 680px;
    margin-right: auto;
    margin-left: auto;
    animation-name: fade-in;
    animation-duration: .5s;
    opacity: 0;
  }
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .faq .blog-list.list-active {
    display: flex;
    opacity: 1;
  }
  .faq .blog-list .anq-btn {
    display: inline-block;
    position: relative;
    width: 24px;
    height: 24px;
    border: 1px solid #005cd0;
    border-radius: 12px;
    cursor: pointer;
  }
  .faq .blog-list .anq-btn span::before,
  .faq .blog-list .anq-btn span::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 10%;
    margin: -5% 0 0 -30%;
    background: #005cd0;
  }
  .faq .blog-list .anq-btn span::after {
    transform: rotate(90deg);
  }
  .faq .blog-list .faq-list {
    width: 100%;
    padding: 16px 24px;
    border: 1px solid #005cd0;
    border-radius: 3px;
  }
  .faq .blog-list .faq-list .title span {
    display: block;
    width: calc(100% - 35px);
    line-height: 160%;
    text-align: justify;
  }
  .faq .blog-list .faq-list + .faq-list {
    margin-top: 32px;
  }
  .faq .blog-list .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #005cd0;
    cursor: pointer;
  }
  .faq .blog-list .ans-text {
    transition: all 300ms 0s ease;
    height: 0;
    overflow: hidden;
  }
  .faq .blog-list .ans-text p {
    transition: all 300ms 0s ease;
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
    line-height: 0;
    text-align: justify;
  }
  .faq .blog-list .ans-text ul {
    transition: all 300ms 0s ease;
    visibility: hidden;
    margin-top: 0;
    padding-left: 32px;
    overflow: hidden;
    list-style: disc;
    opacity: 0;
    line-height: 0;
  }
  .faq .blog-list .ans-text ul + p {
    margin-top: 0;
  }
  .faq .blog-list .ans-text p + p {
    margin-top: 0;
  }
  .faq .blog-list .ans-text li {
    transition: all 300ms 0s ease;
    visibility: hidden;
    opacity: 0;
    line-height: 0;
  }
  .faq .blog-list .faq-list-active .anq-btn span::after {
    display: none;
  }
  .faq .blog-list .faq-list-active .ans-text {
    height: 100%;
    margin-top: 8px;
    padding-top: 9px;
    overflow: hidden;
    border-top: 1px solid rgba(102, 102, 102, 0.3);
  }
  .faq .blog-list .faq-list-active p {
    visibility: visible;
    opacity: 1;
    line-height: 220%;
  }
  .faq .blog-list .faq-list-active p + p {
    margin-top: 16px;
  }
  .faq .blog-list .faq-list-active ul {
    visibility: visible;
    margin-top: 16px;
    overflow: hidden;
    opacity: 1;
    line-height: 220%;
  }
  .faq .blog-list .faq-list-active ul + p {
    margin-top: 16px;
  }
  .faq .blog-list .faq-list-active li {
    visibility: visible;
    opacity: 1;
    line-height: 220%;
  }
  .common-trial-btn .btn {
    width: 90%;
    max-width: 300px;
    margin: 96px auto 0;
    font-size: 1.8rem;
    font-weight: bolder;
  }
  .contact-trial {
    margin: 124px auto 0;
  }
  .contact-trial h1 img {
    display: block;
    width: 150px;
    margin: 0 auto;
  }
  .contact-trial .ct-contact {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    max-width: 500px;
    margin: 64px auto 0;
  }
  .contact-trial .ct-contact .box {
    transition: all 300ms 0s ease;
    display: block;
    padding: 32px 32px 23px;
    border: 1px solid #005cd0;
    border-radius: 5px;
    text-decoration: none;
  }
  .contact-trial .ct-contact .box:nth-child(n + 2) {
    margin-top: 32px;
  }
  .contact-trial .ct-contact .box:hover {
    background-color: #005cd0;
    color: #fff;
  }
  .contact-trial .ct-contact .box:hover h2 {
    color: #fff;
  }
  .contact-trial .ct-contact h2 {
    transition: all 300ms 0s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #005cd0;
    font-weight: lighter;
  }
  .contact-trial .ct-contact h2 .material-symbols-outlined {
    margin-right: 6px;
    font-size: 2.8rem;
  }
  .contact-trial .ct-contact h2 .text {
    font-size: 2.4rem;
  }
  .contact-trial .ct-contact p {
    margin-top: 15px;
    text-align: center;
  }
  .contact-trial .tel-info {
    margin-top: 48px;
  }
  .contact-trial .tel-info p {
    text-align: center;
  }
  .contact-trial .tel-info .tel {
    margin-top: 24px;
  }
  .contact-trial .tel-info .tel a {
    transition: all 300ms 0s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bolder;
    text-decoration: none;
    text-indent: 2px;
  }
  .contact-trial .tel-info .tel a span:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 8px;
    border-radius: 3px;
    background-color: #005cd0;
    color: #fff;
    font-size: 3rem;
    font-weight: 500;
  }
  .contact-trial .tel-info .tel a span:last-child {
    font-size: 4rem;
  }
  .contact-trial .tel-info .tel a:hover {
    opacity: 0.6;
  }
  .contact-trial .tel-info .tel .sub-info {
    text-align: center;
  }
  .contact-trial .tel-info .tel .sub-info span {
    margin-top: 8px;
    display: inline-block;
    line-height: 140%;
    text-align: center;
  }
  #lf_form_div {
    width: 100%;
    /* ===================================
    画面全体のレイアウト
    =================================== */
    /* フォームエリア全体の設定 */
    /* ===================================
    設問エリアのレイアウト
    =================================== */
    /* 設問エリア全体の設定 */
    /*設問名のセルのデザイン */
    /* 設問の入力セルおよび表示セルのデザイン */
    /* 設問の入力例/説明セルのデザイン */
    /* 入力セルの「氏」「名」の文字のデザイン */
    /* 入力確認画面、完了画面の入力された文字のデザイン */
    /* ボタンの表示エリアの設定 */
    /* 入力エラーメッセージのデザイン */
    /* 公開終了メッセージのデザイン */
    /* ===================================
    入力コントロールのデザイン
    =================================== */
    /* 確認／送信／戻る／登録ボタン */
    /* 入力中のフィールドの背景色 */
    /* それぞれの入力フィールドにカーソルが移動したときに背景の色が変わります。不要な場合は削除してください。 */
    /* ===================================
    必須項目のマークおよびメッセージなど
    =================================== */
    /* 必須項目のマーク */
    /* 必須項目についての説明文 */
    /* メールアドレスの再入力メッセージ */
  }
  #lf_form_div [type="text"] {
    padding: 6px;
    border: 1px solid rgba(102, 102, 102, 0.3);
    border-radius: 3px;
    font-size: 2.4rem;
  }
  #lf_form_div :-ms-input-placeholder {
    color: rgba(102, 102, 102, 0.3);
    font-size: 1.5rem;
  }
  #lf_form_div ::placeholder {
    color: rgba(102, 102, 102, 0.3);
    font-size: 1.5rem;
  }
  #lf_form_div :-ms-input-placeholder {
    color: rgba(102, 102, 102, 0.3);
    font-size: 1.5rem;
  }
  #lf_form_div td {
    padding: 0 0 15px;
    display: block;
  }
  #lf_form_div td [type="text"], #lf_form_div td textarea {
    width: 100% !important;
    padding: 6px;
    border: 1px solid rgba(102, 102, 102, 0.3);
    border-radius: 3px;
    font-size: 1.8rem;
  }
  #lf_form_div table {
    width: 100%;
  }
  #lf_form_div tr:last-child .label {
    border-bottom: 0;
  }
  #lf_form_div select + br {
    display: none;
  }
  #lf_form_div br + textarea {
    margin-top: 15px;
  }
  #lf_form_div [type="radio"], #lf_form_div [type="checkbox"] {
    margin-right: 10px;
  }
  #lf_form_div select {
    font-size: 1.5rem;
  }
  #lf_form_div form {
    margin-top: 24px;
  }
  #lf_form_div .container {
    width: 100%;
  }
  #lf_form_div .items {
    margin-top: 0;
  }
  #lf_form_div .label {
    padding: 15px 0 10px;
    border-bottom: 0;
    color: #005cd0;
    font-weight: bold;
    text-align: left;
    line-height: 100%;
    vertical-align: middle;
  }
  #lf_form_div .comment {
    display: none;
  }
  #lf_form_div .label_name {
    color: rgba(102, 102, 102, 0.7);
    font-size: 1.2rem;
  }
  #lf_form_div .value {
    margin-top: 0;
  }
  #lf_form_div .button_area {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  #lf_form_div .message {
    padding: 20px 30px;
    margin-bottom: 25px;
    background-color: #e9f7ff;
    color: #ee6a77;
  }
  #lf_form_div [type=button] {
    transition: all 300ms 0s ease;
    display: block;
    margin: 0 15px;
    padding: 2px 18px;
    border: 2px solid #868686;
    border-radius: 3px;
    background-color: #868686;
    color: #fff;
    font-size: 1.4rem;
    line-height: inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }
  #lf_form_div [type=button]:disabled {
    opacity: .3;
    cursor: not-allowed;
  }
  #lf_form_div [type=button]:hover {
    opacity: .5;
    cursor: pointer;
  }
  #lf_form_div #button_confirm_back {
    background-color: #fff;
    color: #868686;
  }
  #lf_form_div .required {
    display: inline-block;
    padding-left: 10px;
    color: #ee6a77;
    font-size: 60%;
    font-weight: bold;
  }
  #lf_form_div .required:after {
    /* ここを編集することで表示されるマークを変更できます */
    content: "※必須";
  }
  #lf_form_div .required_msg {
    margin-right: 4px;
    padding-bottom: 0;
    color: #ee6a77;
    font-size: 80%;
    font-weight: bold;
    text-align: center;
  }
  #lf_form_div .required_msg:after {
    /* ここを編集することで表示されるマークを変更できます */
    content: "「※必須」となっている項目は必ず入力してください。";
    width: 100%;
    height: auto;
  }
  #lf_form_div .label_mail {
    margin-top: 0;
    margin-right: 4px;
    padding-bottom: 0;
    color: rgba(102, 102, 102, 0.7);
    font-size: 70%;
  }
  #lf_form_div .label_mail:after {
    /* ここを編集することで表示されるメッセージを変更できます */
    content: "確認のため、もう一度メールアドレスを入力してください";
    width: 100%;
    height: auto;
    margin-top: 10px;
  }
  .dummy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 150px;
    border: 1px solid #666666;
    background-color: rgba(102, 102, 102, 0.1);
    text-align: center;
  }
}

@media only screen and (min-width: 768px) {
  /*
PC用レイアウト
-------------------------------------------------- */
  .pc {
    display: block !important;
  }
  .mobile {
    display: none !important;
  }
  .mobile-nav {
    display: none;
  }
  a:hover {
    text-decoration: none;
  }
  p {
    font-size: 1.5rem;
  }
  p + p {
    margin-top: 16px;
  }
  header {
    z-index: 9999;
    top: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.85);
  }
  header.header {
    position: static;
  }
  header.fixed {
    position: fixed;
  }
  header .head-border, header.head-border {
    border-bottom: 1px solid rgba(102, 102, 102, 0.2);
  }
  header .catch-bg {
    background-color: rgba(102, 102, 102, 0.1);
  }
  header .header-box {
    max-width: 1080px;
    margin-right: auto;
    margin-left: auto;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  header .header-box {
    width: 740px;
  }
}

@media only screen and (min-width: 768px) {
  header .catch {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  header .catch p {
    display: inline-block;
    margin: 0;
  }
  header .catch p:first-child {
    margin-right: 16px;
    font-size: 12px;
    font-weight: bolder;
  }
  header .catch p:last-child {
    font-size: 12px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  header .catch p:last-child {
    font-size: 10px;
  }
}

@media only screen and (min-width: 768px) {
  header .catch .logo-fs {
    display: block;
    line-height: 0;
  }
  header .catch .logo-fs img {
    width: 82px;
  }
  header .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px auto;
  }
  header .head .header-logo img {
    width: 160px;
  }
  header .head .request-info {
    display: flex;
    align-items: center;
  }
  header .head .btns {
    display: flex;
  }
  header .head .btns .btn {
    margin-right: 20px;
    padding: 8px 15px;
    font-size: 1.4rem;
    font-weight: bolder;
    line-height: 100%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  header .head .btns .btn {
    font-size: 1.2rem;
  }
}

@media only screen and (min-width: 768px) {
  header .head .tel a {
    transition: all 300ms 0s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bolder;
    text-decoration: none;
    text-indent: 2px;
  }
  header .head .tel a span:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 4px;
    border-radius: 3px;
    background-color: #005cd0;
    color: #fff;
    font-size: 2rem;
    font-weight: 500;
  }
  header .head .tel a span:last-child {
    font-size: 2.4rem;
  }
  header .head .tel a:hover {
    opacity: 0.6;
  }
  header .head .tel .sub-info {
    margin-top: 4px;
    font-size: 1.2rem;
    line-height: 100%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 820px) {
  header .head .tel .sub-info {
    font-size: 1.1rem;
  }
}

@media only screen and (min-width: 768px) {
  @keyframes show {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  header .menu-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
  }
  header .menu-box img {
    display: block;
  }
  header .menu-box .logo, header .menu-box .sub-nav {
    display: none;
    opacity: 0;
  }
  header .menu-box .logo img {
    width: 135px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  header .menu-box .logo img {
    width: 60px;
  }
}

@media only screen and (min-width: 768px) {
  header .menu-box nav {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
  }
  header .menu-box nav ul {
    display: flex;
    align-items: center;
  }
  header .menu-box nav ul li {
    transition: all 300ms 0s ease;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 100%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  header .menu-box nav ul li {
    font-size: 1.2rem;
  }
}

@media only screen and (min-width: 768px) {
  header .menu-box nav .main-nav {
    transition: all 300ms 0s ease;
  }
  header .menu-box nav .main-nav li {
    padding: 0 12px;
    color: #005cd0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  header .menu-box nav .main-nav li {
    padding: 6px 12px;
  }
}

@media only screen and (min-width: 768px) {
  header .menu-box nav .main-nav li:hover {
    color: #005cd0;
    text-decoration: underline;
  }
  header .menu-box nav .main-nav li:first-child {
    margin-left: 10px;
  }
  header .menu-box nav .main-nav .active {
    border-bottom: 1px solid #005cd0;
    font-weight: bold;
  }
  header .menu-box nav .sub-nav {
    transition: all 300ms 0s ease;
  }
  header .menu-box nav .sub-nav .active .btn {
    background-color: #005cd0;
    color: #fff;
  }
  header .menu-box nav .btn {
    margin-right: 16px;
    padding: 6px 10px;
    font-size: 1.2rem;
    font-weight: bolder;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  header .menu-box nav .f-btn-info {
    margin-right: 8px;
    padding: 6px 6px;
  }
  header .menu-box nav .sub-nav a {
    font-size: .8rem;
  }
}

@media only screen and (min-width: 768px) {
  header .menu-box nav .head-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  header .menu-box nav .head-info a {
    text-decoration: none;
  }
  header .menu-box nav .head-info .tel, header .menu-box nav .head-info .info {
    width: 154px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  header .menu-box nav .head-info .tel, header .menu-box nav .head-info .info {
    width: 80px;
  }
}

@media only screen and (min-width: 768px) {
  header .menu-box nav .head-info .tel {
    transition: all 300ms 0s ease;
  }
  header .menu-box nav .head-info .tel img:last-child {
    display: none;
  }
  header .menu-box nav .head-info .tel:hover img:first-child {
    display: none;
  }
  header .menu-box nav .head-info .tel:hover img:last-child {
    display: block;
  }
  header .menu-box nav .head-info .info {
    margin-top: 4px;
  }
  header.fixed .menu-box .logo, header.fixed .menu-box .sub-nav {
    animation: show .3s linear 0s forwards;
  }
  header.fixed .menu-box .logo {
    display: block;
  }
  header.fixed .menu-box nav {
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 135px);
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  header.fixed .menu-box nav {
    width: calc(100% - 70px);
  }
}

@media only screen and (min-width: 768px) {
  header.fixed .menu-box nav a {
    letter-spacing: 0;
  }
  header.fixed .menu-box nav ul li {
    font-size: 1.2rem;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  header.fixed .menu-box nav ul li {
    font-size: .8rem;
  }
}

@media only screen and (min-width: 768px) {
  header.fixed .menu-box nav .main-nav li {
    padding: 6px 8px;
  }
  header.fixed .menu-box nav .main-nav li:hover {
    font-weight: bolder;
  }
  header.fixed .menu-box nav .main-nav li:first-child {
    margin-left: 18px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  header.fixed .menu-box nav .main-nav li {
    padding: 6px 5px;
  }
  header.fixed .menu-box nav .main-nav li:first-child {
    margin-left: 10px;
  }
}

@media only screen and (min-width: 768px) {
  header.fixed .menu-box nav .main-nav .active {
    border-bottom: 1px solid #005cd0;
    font-weight: bold;
  }
  header.fixed .menu-box .sub-nav {
    display: flex;
  }
  header.fixed .menu-box .sub-nav .pc-nav {
    display: block;
  }
  header.fixed .menu-box .sub-nav .tablet-nav {
    display: none;
  }
  header.fixed .menu-box .sub-nav .btn {
    font-size: 1.1rem;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  header.fixed .menu-box .sub-nav .pc-nav {
    display: none;
  }
  header.fixed .menu-box .sub-nav .tablet-nav {
    display: block;
    line-height: 120%;
    text-align: center;
  }
}

@media only screen and (min-width: 768px) {
  footer {
    margin-top: 124px;
    padding: 32px 0 0;
    background-color: whitesmoke;
  }
  footer .box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    max-width: 1024px;
    margin: 0 auto;
  }
  footer .logo-fo {
    width: 160px;
  }
  footer .nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  footer .nav {
    flex-wrap: wrap;
  }
}

@media only screen and (min-width: 768px) {
  footer .page-link {
    width: calc(100% - 185px);
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  footer .page-link {
    width: calc(100% - 300px);
  }
}

@media only screen and (min-width: 768px) {
  footer .page-link li {
    margin-right: 16px;
  }
  footer .page-link li:last-child {
    margin-right: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  footer .page-link li {
    margin-right: 0;
    margin-left: 16px;
  }
}

@media only screen and (min-width: 768px) {
  footer .page-link a {
    color: #666666;
    font-size: 12px;
    text-decoration: none;
  }
  footer .page-link a:hover {
    text-decoration: underline;
  }
  footer .logo-fs {
    display: block;
    line-height: 0;
  }
  footer .logo-fs img {
    width: 82px;
  }
  footer .c-link {
    margin-top: 32px;
    padding: 8px 0;
    background-color: #fff;
  }
  footer .c-link p {
    margin-left: 12px;
    font-size: 10px;
  }
  footer .c-link .logo-area {
    display: flex;
    align-items: center;
    white-space: nowrap;
  }
  footer .c-link li {
    margin-right: 12px;
  }
  footer .c-link li:last-child {
    margin-right: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  footer .c-link li {
    margin-right: 0;
    margin-left: 16px;
  }
}

@media only screen and (min-width: 768px) {
  footer .c-link a {
    color: #666666;
    font-size: 10px;
    text-decoration: none;
  }
  footer .c-link a:hover {
    text-decoration: underline;
  }
  .common-steps h2 {
    margin-top: 192px;
  }
  .common-steps h2 img {
    display: block;
    width: 414px;
    margin: 0 auto;
  }
}

@media only screen and (min-width: 768px) and (min-width: 801px) {
  .common-steps ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 814px;
    margin: 64px auto 0;
  }
  .common-steps ul li:nth-child(n + 6) {
    margin-top: 32px;
  }
  .common-steps ul .text {
    width: 255px;
  }
  .common-steps ul .text img {
    display: block;
    width: 159px;
    margin: 0 auto;
  }
  .common-steps ul p {
    margin-top: 24px;
    text-align: center;
  }
  .common-steps .arrow {
    width: 24px;
    padding-top: 68px;
    text-align: center;
  }
  .common-steps .arrow img {
    width: 100%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 800px) {
  .common-steps ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 648px;
    margin: 64px auto 0;
  }
  .common-steps ul li:nth-child(n + 6) {
    margin-top: 32px;
  }
  .common-steps ul .text {
    width: 200px;
  }
  .common-steps ul .text img {
    display: block;
    width: 159px;
    margin: 0 auto;
  }
  .common-steps ul p {
    margin-top: 24px;
    text-align: center;
  }
  .common-steps .arrow {
    width: 24px;
    padding-top: 68px;
    text-align: center;
  }
  .common-steps .arrow img {
    width: 100%;
  }
}

@media only screen and (min-width: 768px) {
  .top .top-img {
    display: flex;
    position: relative;
    height: 550px;
  }
  .top .top-img .top-img-box {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.3);
  }
  .top .top-img .bg-video {
    position: absolute;
    z-index: -100;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    background: url("./../images/top/top_static.jpg") no-repeat;
    background-size: cover;
    object-fit: cover;
  }
  .top .top-img h2 {
    margin-top: -10px;
  }
  .top .top-img h2 img {
    display: block;
    width: 760px;
    line-height: 100%;
  }
  .top .top-img .btn-area {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
  }
  .top .top-img .btn {
    width: 273px;
    border: 2px solid #fff;
  }
  .top .top-img .btn:last-child {
    margin-left: 32px;
  }
  .top .top-img .trial-btn img {
    width: 213px;
  }
  .top .top-img .doc-btn img {
    width: 150px;
  }
  .top .top-img2 {
    display: flex;
    position: relative;
    height: 550px;
  }
  .top .top-img2 .btn-area2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40%;
    background: linear-gradient(0deg, #ace9dd 0%, #508ce2 50%);
  }
  .top .top-img2 .btn-area2 h2 img {
    width: 90%;
    margin: 0 auto;
  }
  .top .top-img2 .btn-area2 .trial-btn1, .top .top-img2 .btn-area2 .trial-btn2 {
    width: 90%;
    max-width: 400px;
    margin-top: 16px;
    margin-left: 0 !important;
    padding: 8px 18px;
    border-radius: 8px;
  }
  .top .top-img2 .btn-area2 .trial-btn1 {
    border: 4px solid #ff9b29;
    background-color: #fff;
  }
  .top .top-img2 .btn-area2 .trial-btn1 img {
    width: 90%;
    max-width: 240px;
  }
}

@media only screen and (min-width: 768px) and (min-width: 768px) {
  .top .top-img2 .btn-area2 .trial-btn1:hover {
    background-color: #fdc07a;
  }
}

@media only screen and (min-width: 768px) {
  .top .top-img2 .btn-area2 .trial-btn2 {
    border: 4px solid #ff9b29;
    background-color: #ff9b29;
  }
  .top .top-img2 .btn-area2 .trial-btn2 img {
    width: 90%;
    max-width: 296px;
  }
}

@media only screen and (min-width: 768px) and (min-width: 768px) {
  .top .top-img2 .btn-area2 .trial-btn2:hover {
    border: 4px solid #c07622;
    background-color: #c07622;
  }
}

@media only screen and (min-width: 768px) {
  .top .top-img2 .top-img-box {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60%;
    overflow: hidden;
  }
  .top .top-img2 .bg-video {
    position: absolute;
    z-index: -100;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 100%;
    transform: translate(-37%, -50%);
    background: url("./../images/top/top_static.jpg") no-repeat;
    background-size: cover;
    object-fit: cover;
  }
  .top .top-img2 h2 {
    margin-top: -10px;
  }
  .top .top-img2 h2 img {
    display: block;
    width: 760px;
    line-height: 100%;
  }
  .top .top-img2 .btn-area {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
  }
  .top .top-img2 .btn {
    width: 273px;
    border: 2px solid #fff;
  }
  .top .top-img2 .btn:last-child {
    margin-left: 32px;
  }
  .top .top-img2 .trial-btn img {
    width: 213px;
  }
  .top .top-img2 .doc-btn img {
    width: 150px;
  }
  .top .holiday {
    position: relative;
    z-index: 100;
    width: 664px;
    margin: -64px auto 96px;
    padding: 23px 32px;
    border-radius: 5px;
    background: linear-gradient(0deg, #d5ecfa 0%, white 80%);
    text-align: center;
  }
  .top .holiday span {
    display: block;
    width: 80%;
    margin: 8px auto;
    padding: 8px 12px;
    border: 1px solid #005cd0;
    background-color: #fff;
    color: #005cd0;
    font-size: 2rem;
    font-weight: bold;
  }
  .top .top-banner {
    display: flex;
    justify-content: center;
    margin-top: 128px;
  }
  .top .top-banner .aspic, .top .top-banner .it {
    display: block;
    width: 90%;
    max-width: 450px;
  }
  .top .top-banner .it {
    margin-left: 64px;
  }
  .top .top-img-info {
    width: 600px;
    margin: 64px auto;
  }
  .top .inspection {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: calc(90% - 48px);
    max-width: 862px;
    margin: 128px auto 0;
  }
  .top .inspection::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff3d0;
    box-shadow: 0 0 48px 48px #fff3d0;
  }
  .top .inspection .left {
    width: 47.5%;
    max-width: 430px;
  }
  .top .inspection .left .trial-btn2 {
    width: 100%;
    margin-left: 0 !important;
    padding: 16px 18px;
    border-radius: 5px;
    background-color: #ffab41;
  }
  .top .inspection .left .trial-btn2 img {
    width: 90%;
    max-width: 350px;
  }
}

@media only screen and (min-width: 768px) and (min-width: 768px) {
  .top .inspection .left .trial-btn2:hover {
    background-color: #c07622;
  }
}

@media only screen and (min-width: 768px) {
  .top .inspection .left p {
    margin-top: 24px;
  }
  .top .inspection .right {
    width: 47.5%;
    max-width: 400px;
    line-height: 100%;
  }
  .top .inspection .right img {
    width: 100%;
    border-radius: 5px;
  }
  .top .special-news {
    margin-top: 128px;
    margin-bottom: 124px;
    padding: 64px 0;
    background: linear-gradient(0deg, white 10%, ivory 50%, white 90%);
  }
  .top .special-news h3 {
    line-height: 0;
    text-align: center;
  }
  .top .special-news h3 img {
    width: 132px;
  }
  .top .special-news ul {
    display: flex;
    justify-content: center;
    margin-top: 48px;
  }
  .top .special-news ul li {
    width: 280px;
    margin-right: 80px;
  }
  .top .special-news ul li:last-child {
    margin-right: 0;
  }
  .top .special-news ul a {
    display: block;
  }
  .top .special-news h4 {
    margin-top: 10px;
    font-size: 15px;
    font-weight: normal;
    line-height: 180%;
  }
  .top .special-news .s-news-img {
    width: 100%;
    height: 188px;
    border: 1px solid #cccccc;
    background-color: #fff;
    background-image: url("./../images/common/dummy-img.gif");
    background-position: center;
    background-size: cover;
  }
  .top .special-news .more-btn {
    width: 200px;
    margin: 48px auto 0;
    padding: 8px 0;
    font-weight: bolder;
  }
  .top .about p:first-child {
    margin-top: -8px;
  }
  .top .about .bg {
    height: 405px;
    background: linear-gradient(90deg, #508ce2 0%, #ace9dd 100%);
  }
}

@media only screen and (min-width: 768px) and (min-width: 1081px) {
  .top .about .box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -405px;
    padding: 64px 0;
  }
  .top .about .text {
    width: 474px;
    margin-right: 64px;
  }
  .top .about h2 img {
    display: block;
    width: 414px;
    margin: 0 auto;
  }
  .top .about .text-box {
    width: 474px;
    margin-top: 32px;
    padding: 32px;
    background-color: #fff;
  }
  .top .about .pc-img {
    width: 558px;
    height: 339px;
    background-image: url("./../images/top/pc@2x.png?20220915b");
    background-size: cover;
  }
  .top .about .pc-img video {
    display: block;
    width: 74%;
    margin: 1.7% auto 0;
    border-radius: 5px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .top .about .box {
    width: 70%;
    margin: -405px auto 0;
    padding: 64px 0;
  }
  .top .about h2 img {
    display: block;
    width: 414px;
  }
  .top .about .text-box {
    width: 100%;
    margin-top: 32px;
    padding: 32px;
    background-color: #fff;
  }
  .top .about .pc-img {
    width: 558px;
    height: 339px;
    margin: 0 auto;
    padding-top: 1.6%;
    background-image: url("./../images/top/pc@2x.png?20220915b");
    background-size: cover;
  }
  .top .about .pc-img video {
    display: block;
    width: 74%;
    margin: 0 auto 0;
    background: url("./../images/top/fam_cap2.jpg") no-repeat;
  }
}

@media only screen and (min-width: 768px) {
  .top .about .function .tab-nav {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .top .about .function .tab-nav .slick-track {
    width: 100% !important;
  }
  .top .about .function .f-btn-info {
    width: auto !important;
    margin-right: 16px;
    padding: 6px 10px;
    line-height: 100%;
    text-align: center;
    white-space: nowrap;
  }
  .top .about .function .f-btn-info:last-child {
    margin-right: 0;
  }
  .top .about .function .text-area .btn {
    width: 200px !important;
    margin: 16px auto 0;
  }
}

@media only screen and (min-width: 768px) and (min-width: 861px) {
  .top .about .function .tab-contents {
    margin-top: 32px;
  }
  .top .about .function .tab-contents p {
    margin-top: 12px;
  }
  .top .about .function .tab-contents li {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .top .about .function .cap1 {
    width: 350px;
    height: 350px;
  }
  .top .about .function .cap2 {
    width: 450px;
    height: 350px;
  }
  .top .about .function .cap3 {
    width: 506px;
    height: 350px;
  }
  .top .about .function .cap1, .top .about .function .cap2, .top .about .function .cap3 {
    margin-right: 64px;
    margin-bottom: 8px;
    border-radius: 3px;
    background-size: cover;
    box-shadow: 8px 8px 9px -5px rgba(102, 102, 102, 0.3);
  }
}

@media only screen and (min-width: 768px) and (max-width: 860px) {
  .top .about .function .tab-contents {
    margin-top: 48px;
    overflow: hidden;
  }
  .top .about .function .tab-contents li {
    margin: 0 auto;
  }
  .top .about .function .tab-contents p {
    margin-top: 12px;
  }
  .top .about .function .tab-contents .text-area {
    width: 90%;
    max-width: 350px;
    margin: 0 auto 22px;
  }
  .top .about .function .tab-contents .text-area br {
    display: none !important;
  }
  .top .about .function .cap1, .top .about .function .cap2, .top .about .function .cap3 {
    width: 90%;
    max-width: 350px;
    margin: 0 auto 8px;
    border-radius: 3px;
    background-position: center;
    background-size: cover;
    box-shadow: 8px 8px 9px -5px rgba(102, 102, 102, 0.3);
  }
  .top .about .function .cap1 .mobile, .top .about .function .cap2 .mobile, .top .about .function .cap3 .mobile {
    display: block !important;
    width: 100%;
    padding-top: 100%;
  }
  .top .about .function .f01, .top .about .function .f02, .top .about .function .f03, .top .about .function .f04, .top .about .function .f05, .top .about .function .f06, .top .about .function .f07 {
    display: flex;
    flex-direction: column-reverse;
  }
  .top .about .function .f01 .cap1 .mobile, .top .about .function .f01 .cap2 .mobile, .top .about .function .f01 .cap3 .mobile, .top .about .function .f02 .cap1 .mobile, .top .about .function .f02 .cap2 .mobile, .top .about .function .f02 .cap3 .mobile, .top .about .function .f03 .cap1 .mobile, .top .about .function .f03 .cap2 .mobile, .top .about .function .f03 .cap3 .mobile, .top .about .function .f04 .cap1 .mobile, .top .about .function .f04 .cap2 .mobile, .top .about .function .f04 .cap3 .mobile, .top .about .function .f05 .cap1 .mobile, .top .about .function .f05 .cap2 .mobile, .top .about .function .f05 .cap3 .mobile, .top .about .function .f06 .cap1 .mobile, .top .about .function .f06 .cap2 .mobile, .top .about .function .f06 .cap3 .mobile, .top .about .function .f07 .cap1 .mobile, .top .about .function .f07 .cap2 .mobile, .top .about .function .f07 .cap3 .mobile {
    text-indent: -9999px;
  }
}

@media only screen and (min-width: 768px) {
  .top .about .function .f01 .cap2 {
    background-image: url("./../images/top/function/f01.jpg?20220910");
  }
  .top .about .function .f01 h3 img {
    width: 111px;
  }
  .top .about .function .f02 .cap1 {
    background-image: url("./../images/top/function/f02.jpg?20220915b");
  }
  .top .about .function .f02 h3 img {
    width: 140px;
  }
  .top .about .function .f03 .cap2 {
    background-image: url("./../images/top/function/f03.jpg?20220910");
  }
  .top .about .function .f03 h3 img {
    width: 110px;
  }
  .top .about .function .f04 .cap2 {
    background-image: url("./../images/top/function/f04.jpg?20220910");
  }
  .top .about .function .f04 h3 img {
    width: 140px;
  }
  .top .about .function .f05 .cap2 {
    background-image: url("./../images/top/function/f05.jpg?20220910");
  }
  .top .about .function .f05 h3 img {
    width: 111px;
  }
  .top .about .function .f06 .cap2 {
    background-image: url("./../images/top/function/f06.jpg?20220915b");
  }
  .top .about .function .f06 h3 img {
    width: 85px;
  }
  .top .about .function .f07 .cap3 {
    background-image: url("./../images/top/function/f07.jpg?20220910");
    background-position: left center;
  }
  .top .about .function .f07 h3 img {
    width: 230px;
  }
  .top .function {
    overflow: hidden;
  }
  .top .function h2 {
    margin-top: 192px;
  }
  .top .function h2 img {
    display: block;
    width: 366px;
    margin: 0 auto;
  }
  .top .function .box {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 64px 0;
  }
  .top .function .box p {
    margin-top: 24px;
  }
  .top .function .communication {
    flex-direction: row-reverse;
    margin-top: 124px;
  }
  .top .function .communication .explanation {
    width: 354px;
  }
  .top .function .communication h3 img {
    display: block;
    width: 100%;
  }
  .top .function .communication::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: skewY(6deg);
    background: linear-gradient(138deg, #fff9ff 20%, #ffffd7 100%);
  }
  .top .function .communication .ani {
    width: 297px;
    margin-right: 64px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 860px) {
  .top .function .communication .ani {
    margin-right: 48px;
  }
}

@media only screen and (min-width: 768px) {
  .top .function .management {
    margin-top: 64px;
  }
  .top .function .management .img {
    display: block;
    width: 200px;
    margin-left: 80px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 860px) {
  .top .function .management .img {
    margin-left: 64px;
  }
}

@media only screen and (min-width: 768px) {
  .top .function .management .explanation {
    width: 419px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 860px) {
  .top .function .management .explanation {
    width: 380px;
  }
}

@media only screen and (min-width: 768px) {
  .top .function .management h3 img {
    display: block;
    width: 100%;
  }
  .top .function .management p {
    text-align: justify;
  }
  .top .function .team-work {
    flex-direction: row-reverse;
    margin-top: 64px;
  }
  .top .function .team-work .img {
    width: 300px;
    margin-right: 64px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 860px) {
  .top .function .team-work .img {
    margin-right: 48px;
  }
}

@media only screen and (min-width: 768px) {
  .top .function .team-work .explanation {
    width: 382px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 860px) {
  .top .function .team-work .explanation {
    width: 360px;
  }
}

@media only screen and (min-width: 768px) {
  .top .function .team-work h3 img {
    display: block;
    width: 100%;
  }
  .top .function .team-work::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: skewY(-6deg);
    background: linear-gradient(138deg, #dcf6ff 0%, #fff6ff 100%);
  }
  .top .function .support {
    margin-top: 64px;
    padding-bottom: 0;
  }
  .top .function .support .img {
    display: block;
    width: 232px;
    margin-left: 64px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 860px) {
  .top .function .support .img {
    margin-left: 48px;
  }
}

@media only screen and (min-width: 768px) {
  .top .function .support .explanation {
    width: 354px;
  }
  .top .function .support h3 img {
    display: block;
    width: 260px;
  }
  .top .a-day h2 {
    margin-top: 188px;
  }
  .top .a-day h2 img {
    display: block;
    width: 432px;
    margin: 0 auto;
  }
  .top .a-day p {
    margin-top: 56px;
    text-align: center;
  }
  .top .a-day .movie {
    width: 698px;
    margin: 32px auto 0;
  }
  .top .a-day .movie .box {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
  }
  .top .a-day .movie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .top .a-day .movie video {
    width: 100%;
  }
  .top .movies h2 {
    margin-top: 188px;
  }
  .top .movies h2 img {
    display: block;
    width: 428px;
    margin: 0 auto;
  }
  .top .movies .movies-list {
    display: flex;
    width: 90%;
    max-width: 1120px;
    margin: 32px auto 0;
  }
  .top .movies .movies-list li {
    margin: 48px auto 0;
  }
  .top .movies .movies-list .youtube {
    width: 30%;
    max-width: 320px;
    aspect-ratio: 16 / 9;
  }
  .top .movies .movies-list .youtube iframe {
    width: 100%;
    height: 100%;
  }
  .top .voice h2 {
    margin-top: 192px;
  }
  .top .voice h2 img {
    display: block;
    width: 561px;
    margin: 0 auto;
  }
  .top .voice .box {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .top .voice .tweet {
    flex-direction: row-reverse;
    margin-top: 64px;
  }
  .top .voice .tweet h3 img {
    display: block;
    width: 202px;
  }
  .top .voice .tweet p {
    width: 300px;
    margin-top: 24px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 860px) {
  .top .voice .tweet p {
    width: 230px;
  }
}

@media only screen and (min-width: 768px) {
  .top .voice .tweet .ani {
    width: 646px;
    height: 340px;
    margin-right: 14px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 860px) {
  .top .voice .tweet .ani {
    width: 446px;
    height: auto;
    margin-right: 18px;
  }
}

@media only screen and (min-width: 768px) {
  .top .voice .motion {
    margin-top: 96px;
  }
  .top .voice .motion h3 img {
    display: block;
    width: 354px;
  }
  .top .voice .motion p {
    width: 354px;
    margin-top: 24px;
  }
  .top .voice .motion .ani {
    width: 347px;
    height: 362px;
    margin-left: 48px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 860px) {
  .top .voice .motion .ani {
    margin-left: 16px;
  }
}

@media only screen and (min-width: 768px) {
  .top .top-case-study {
    margin: 128px 0 64px;
  }
  .top .top-case-study h2 img {
    display: block;
    width: 265px;
    margin: 0 auto;
  }
  .top .top-case-study .bg {
    margin-top: 64px;
    padding: 0;
    text-align: center;
  }
  .top .top-case-study .logo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 90%;
    max-width: 1220px;
    margin: 24px auto 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 960px) {
  .top .top-case-study .logo {
    width: 736px;
  }
}

@media only screen and (min-width: 768px) {
  .top .top-case-study .logo li {
    width: 14.75%;
    margin: 2.622% 2.622%;
  }
  .top .top-case-study .logo li img {
    display: block;
    width: 100%;
  }
  .top .top-case-study .wrap4 {
    max-width: 960px;
  }
  .top .top-case-study .wrap4 li {
    width: 18.75%;
    margin: 3.125%;
  }
  .top .top-case-study .wrap3 {
    max-width: 720px;
  }
  .top .top-case-study .wrap3 li {
    width: 25%;
    margin: 4.166%;
  }
  .top .top-case-study .wrap2 {
    max-width: 480px;
  }
  .top .top-case-study .wrap2 li {
    width: 37.5%;
    margin: 6.25%;
  }
  .top .info h2 {
    margin-top: 192px;
  }
  .top .info h2 img {
    display: block;
    width: 285px;
    margin: 0 auto;
  }
  .top .info ul {
    width: 680px;
    margin: 64px auto 0;
  }
  .top .info li {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 16px 16px;
    border-bottom: 1px solid #cccccc;
  }
  .top .info li:last-child {
    padding-bottom: 0;
    border: 0;
  }
  .top .info li span {
    display: inline-block;
    min-width: 135px;
    margin-right: 24px;
    padding: 8px 16px;
    background-color: #005cd0;
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 100%;
    text-align: center;
  }
  .top .info .btn-area {
    margin-top: 48px;
    text-align: center;
  }
  .top .info .btn-area .btn {
    display: inline-block;
  }
  .top .fam-series h2 {
    margin-top: 192px;
  }
  .top .fam-series h2 img {
    display: block;
    width: 305px;
    margin: 0 auto;
  }
  .top .fam-series .fs-info {
    margin-top: 56px;
    text-align: center;
  }
  .top .fam-series .fs-link-box {
    width: 1027px;
    margin: 56px auto 0;
    padding: 64px;
    border: 1px solid #cccccc;
    border-radius: 5px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1081px) {
  .top .fam-series .fs-link-box {
    width: 777px;
  }
}

@media only screen and (min-width: 768px) {
  .top .fam-series .fs-link {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .top .fam-series .fs-link a img {
    height: 73px;
  }
  .top .fam-series .fs-link .fs-text {
    width: 458px;
    margin-left: 56px;
  }
  .top .fam-series .fs-link .fs-text .btn {
    width: 350px;
    margin: 24px auto 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1081px) {
  .top .fam-series .fs-link a img {
    height: 50px;
  }
  .top .fam-series .fs-link .fc-text {
    width: 492px;
  }
  .top .fam-series .fs-link .fc-text .btn {
    width: 100%;
  }
}

@media only screen and (min-width: 768px) {
  .top .fam-series .fs-link + .fs-link {
    margin-top: 48px;
    padding-top: 39px;
    border-top: 1px solid #cccccc;
  }
  .blog-box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 90%;
    max-width: 1120px;
    margin: 64px auto 0;
  }
  .blog-box .right {
    width: 23.4375%;
    padding: 24px 24px 20px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
  }
  .blog-box .right h3 {
    line-height: 100%;
  }
  .blog-box .right li {
    margin-top: 12px;
    font-size: 1.4rem;
    line-height: 180%;
  }
  .blog-box .right li:first-child {
    margin-top: 18px;
  }
  .blog-box .right li a {
    text-decoration: none;
  }
  .blog-box .right li a:hover {
    text-decoration: underline;
  }
  .blog-box .cot-list {
    margin: 28px 0;
    padding: 48px 32px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 5px 5px 10px rgba(102, 102, 102, 0.05);
  }
  .blog-box .cot-list:first-child {
    margin-top: 0;
  }
  .blog-box .cot-list .mokuji-text {
    display: block;
    margin-bottom: 16px;
    padding: 0 0 8px 16px;
    border-bottom: 1px solid rgba(102, 102, 102, 0.2);
    font-size: 1.6rem;
    font-weight: bolder;
  }
  .blog-box .single-mokuji {
    margin-left: 32px;
    list-style-type: none;
    counter-reset: item;
  }
  .blog-box .single-mokuji a {
    color: #222222;
    text-decoration: underline;
  }
  .blog-box .single-mokuji a:hover {
    text-decoration: none;
  }
  .blog-box .single-mokuji li {
    margin: 12px 0 0;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 150%;
    counter-increment: item;
  }
  .blog-box .single-mokuji li::before {
    content: counters(item, ".") ". ";
  }
  .blog-box .single-mokuji li:first-child {
    margin-top: 0;
  }
  .blog-box .single-mokuji li ol {
    margin-left: 16px;
    list-style-type: none;
    counter-reset: subitem;
  }
  .blog-box .single-mokuji li ol li {
    font-size: 1.4rem;
    font-weight: bold;
    counter-increment: subitem;
  }
  .blog-box .single-mokuji li ol li::before {
    content: counter(item) "-" counters(subitem, ".") ". ";
  }
  .blog-box .single-mokuji li ol li:first-child {
    margin-top: 12px;
  }
  .blog, .blog-single {
    width: 70.3125%;
    /* リンクをカード形式で表示させる時のスタイル */
  }
  .blog .post-thumbnail img, .blog-single .post-thumbnail img {
    display: block;
    max-width: 100%;
    max-height: 340px;
    margin: 0 auto;
  }
  .blog h1, .blog-single h1 {
    margin-top: 48px;
    font-size: 3.2rem;
    font-weight: bolder;
    line-height: 48px;
  }
  .blog h1:first-child, .blog-single h1:first-child {
    margin-top: -5px;
  }
  .blog h2, .blog-single h2 {
    font-size: 2.6rem;
    font-weight: bolder;
    line-height: 40px;
  }
  .blog h3, .blog-single h3 {
    font-size: 2rem;
    font-weight: bolder;
    line-height: 44px;
  }
  .blog p, .blog-single p {
    text-align: justify;
  }
  .blog p, .blog li, .blog-single p, .blog-single li {
    font-size: 1.8rem;
    line-height: 42px;
  }
  .blog ul, .blog-single ul {
    margin: 0 0 0 64px;
    list-style: disc;
  }
  .blog ul li + li, .blog-single ul li + li {
    margin-top: 12px;
  }
  .blog .blog-table, .blog-single .blog-table {
    font-size: 1.8rem;
    line-height: 42px;
  }
  .blog .blog-table th, .blog-single .blog-table th {
    padding: 20px 16px;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    vertical-align: middle;
    white-space: nowrap;
  }
  .blog .blog-table .label, .blog-single .blog-table .label {
    font-weight: bold;
    text-align: center;
  }
  .blog .blog-table td, .blog-single .blog-table td {
    padding: 20px 16px;
    border-top: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    vertical-align: middle;
  }
  .blog .blog-table tr:nth-child(2 + n) th, .blog .blog-table tr:nth-child(2 + n) td, .blog-single .blog-table tr:nth-child(2 + n) th, .blog-single .blog-table tr:nth-child(2 + n) td {
    border-top: 0;
  }
  .blog .blog-table tr:nth-child(2n) th, .blog .blog-table tr:nth-child(2n) td, .blog-single .blog-table tr:nth-child(2n) th, .blog-single .blog-table tr:nth-child(2n) td {
    background-color: whitesmoke;
  }
  .blog .img-one, .blog-single .img-one {
    display: flex;
    justify-content: center;
  }
  .blog .img-one img, .blog-single .img-one img {
    display: block;
    max-width: 100%;
    max-height: 340px;
    margin: 0 auto;
  }
  .blog .img-two, .blog-single .img-two {
    display: flex;
  }
  .blog .img-two img, .blog-single .img-two img {
    display: block;
    width: 47%;
  }
  .blog .img-two img:first-child, .blog-single .img-two img:first-child {
    margin-right: 6%;
  }
  .blog h1 + p, .blog-single h1 + p {
    margin-top: 44px;
  }
  .blog h1 + .blogcard, .blog-single h1 + .blogcard {
    margin-top: 28px;
  }
  .blog h1 + h2
, .blog h1 + h3
, .blog h1 + ul
, .blog h1 + table, .blog-single h1 + h2
, .blog-single h1 + h3
, .blog-single h1 + ul
, .blog-single h1 + table {
    margin-top: 44px;
  }
  .blog p + h2
, .blog p + h3
, .blog .blogcard + h2
, .blog .blogcard + h3, .blog-single p + h2
, .blog-single p + h3
, .blog-single .blogcard + h2
, .blog-single .blogcard + h3 {
    margin-top: 48px;
  }
  .blog h2 + p
, .blog h3 + p
, .blog h2 + .blogcard
, .blog h3 + .blogcard, .blog-single h2 + p
, .blog-single h3 + p
, .blog-single h2 + .blogcard
, .blog-single h3 + .blogcard {
    margin-top: 8px;
  }
  .blog h2 + h3, .blog-single h2 + h3 {
    margin-top: 16px;
  }
  .blog h2 + .img-one
, .blog p + .img-one
, .blog h3 + .img-one
, .blog ul + .img-one
, .blog .blogcard + .img-one
, .blog h2 + .img-two
, .blog p + .img-two
, .blog h3 + .img-two
, .blog ul + .img-two
, .blog .blogcard + .img-two, .blog-single h2 + .img-one
, .blog-single p + .img-one
, .blog-single h3 + .img-one
, .blog-single ul + .img-one
, .blog-single .blogcard + .img-one
, .blog-single h2 + .img-two
, .blog-single p + .img-two
, .blog-single h3 + .img-two
, .blog-single ul + .img-two
, .blog-single .blogcard + .img-two {
    margin-top: 60px;
  }
  .blog .img-one + h2
, .blog .img-one + p
, .blog .img-one + h3
, .blog .img-one + ul
, .blog .img-one + .blogcard
, .blog .img-two + h2
, .blog .img-two + p
, .blog .img-two + h3
, .blog .img-two + ul
, .blog .img-two + .blogcard, .blog-single .img-one + h2
, .blog-single .img-one + p
, .blog-single .img-one + h3
, .blog-single .img-one + ul
, .blog-single .img-one + .blogcard
, .blog-single .img-two + h2
, .blog-single .img-two + p
, .blog-single .img-two + h3
, .blog-single .img-two + ul
, .blog-single .img-two + .blogcard {
    margin-top: 65px;
  }
  .blog h2 + ul
, .blog ul + h2
, .blog h3 + ul
, .blog ul + h3
, .blog ul + p
, .blog p + ul
, .blog .blogcard + ul
, .blog ul + .blogcard, .blog-single h2 + ul
, .blog-single ul + h2
, .blog-single h3 + ul
, .blog-single ul + h3
, .blog-single ul + p
, .blog-single p + ul
, .blog-single .blogcard + ul
, .blog-single ul + .blogcard {
    margin-top: 48px;
  }
  .blog h2 + table
, .blog p + table
, .blog h3 + table
, .blog ul + table
, .blog .blogcard + table
, .blog table + h2
, .blog table + p
, .blog table + h3
, .blog table + ul
, .blog table + .blogcard, .blog-single h2 + table
, .blog-single p + table
, .blog-single h3 + table
, .blog-single ul + table
, .blog-single .blogcard + table
, .blog-single table + h2
, .blog-single table + p
, .blog-single table + h3
, .blog-single table + ul
, .blog-single table + .blogcard {
    margin-top: 60px;
  }
  .blog .blogcard + p
, .blog p + .blogcard, .blog-single .blogcard + p
, .blog-single p + .blogcard {
    margin-top: 24px;
  }
  .blog .page-navi, .blog-single .page-navi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 124px;
  }
  .blog .page-navi a, .blog-single .page-navi a {
    display: flex;
    align-items: center;
    text-decoration: none;
  }
  .blog .page-navi a img, .blog-single .page-navi a img {
    display: block;
    height: 16px;
  }
  .blog .page-navi a span, .blog-single .page-navi a span {
    display: block;
    font-size: 1.4rem;
    line-height: 0;
  }
  .blog .page-navi a:hover span, .blog-single .page-navi a:hover span {
    text-decoration: underline;
  }
  .blog .page-navi a:first-child span, .blog-single .page-navi a:first-child span {
    margin-left: 12px;
  }
  .blog .page-navi a:last-child span, .blog-single .page-navi a:last-child span {
    margin-right: 12px;
  }
  .blog .blogcard, .blog-single .blogcard {
    margin-top: 48px;
    border: 1px solid #cccccc;
    box-shadow: 0 0 5px 3px rgba(102, 102, 102, 0.1);
    color: #000;
    line-height: 1;
    word-wrap: break-word;
  }
  .blog .blogcard a, .blog-single .blogcard a {
    display: flex;
    transition: all .2s ease;
    opacity: 1;
    color: #222222;
    text-decoration: none;
  }
  .blog .blogcard a:hover, .blog-single .blogcard a:hover {
    opacity: .6;
    color: #003f8d;
  }
  .blog .blogcard .blogcard-thumbnail, .blog-single .blogcard .blogcard-thumbnail {
    display: flex;
    align-items: center;
    width: 50%;
    max-width: 200px;
    background-color: rgba(102, 102, 102, 0.05);
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .blog .blogcard .blogcard-thumbnail, .blog-single .blogcard .blogcard-thumbnail {
    width: 45%;
  }
}

@media only screen and (min-width: 768px) {
  .blog .blogcard .blogcard-thumbnail img, .blog-single .blogcard .blogcard-thumbnail img {
    display: block;
    width: 100%;
  }
  .blog .blogcard .blogcard-thumbnail .logo, .blog-single .blogcard .blogcard-thumbnail .logo {
    padding: 0 20px;
    opacity: .5;
  }
  .blog .blogcard .blogcard-title, .blog-single .blogcard .blogcard-title {
    padding: 20px 20px 10px;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.4;
  }
  .blog .blogcard .blogcard-excerpt, .blog-single .blogcard .blogcard-excerpt {
    padding: 0 20px 15px;
    font-size: .85em;
    line-height: 1.6;
  }
  .blog .blogcard .blogcard-link, .blog-single .blogcard .blogcard-link {
    padding: 0 20px 20px;
    font-size: .65em;
    text-align: left;
  }
  .blog .blogcard .blogcard-link .icon-external-link-alt::before, .blog-single .blogcard .blogcard-link .icon-external-link-alt::before {
    font-size: .75em;
  }
  .blog-single {
    width: 100%;
    margin: 0 auto;
  }
  .blog-single {
    width: 736px;
    margin: 48px auto 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 800px) {
  .blog-single {
    width: 90%;
  }
}

@media only screen and (min-width: 768px) {
  .blog-title {
    margin-top: 36px;
  }
  .blog-title img {
    display: block;
    margin: 0 auto;
  }
  .blog-title .case-study-title {
    width: 85px;
  }
  .blog-title .seminar-title {
    width: 84px;
  }
  .blog-title .news-title {
    width: 83px;
  }
  .blog-title .column-title {
    width: 60px;
  }
  .blog-title .useful-info-title {
    display: block;
    width: 128px;
    margin: 0 auto;
  }
  .bread-crumbs {
    display: flex;
    align-items: center;
    width: 90%;
    max-width: 1120px;
    margin: 24px auto 0;
    line-height: 100%;
  }
  .bread-crumbs a {
    color: #222222;
    text-decoration: none;
  }
  .bread-crumbs a:hover {
    text-decoration: underline;
  }
  .bread-crumbs .material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0,"opsz" 48;
  }
  .blog-list-common {
    margin-top: 24px;
  }
  .blog-sub-title {
    margin-top: 8px;
    color: #005cd0;
    font-weight: bold;
    text-align: center;
  }
  .blog-list-box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 90%;
    max-width: 1120px;
    margin: 64px auto 0;
  }
  .blog-list-box .left {
    width: 74.2857%;
  }
  .blog-list-box .right {
    width: 21.4286%;
    padding: 24px 24px 20px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
  }
  .blog-list-box .right h3 {
    line-height: 100%;
  }
  .blog-list-box .right li {
    margin-top: 4px;
    padding: 6px 12px;
    font-size: 1.4rem;
    line-height: 160%;
  }
  .blog-list-box .right li:first-child {
    margin-top: 12px;
  }
  .blog-list-box .right li a {
    text-decoration: none;
  }
  .blog-list-box .right li a:hover {
    text-decoration: underline;
  }
  .blog-list-box .right li.active {
    border-radius: 4px;
    background-color: rgba(102, 102, 102, 0.1);
    font-weight: bold;
  }
  .blog-list {
    display: flex;
    flex-wrap: wrap;
  }
  .blog-list .list {
    width: 29.5823%;
    margin-right: 5.5684%;
  }
  .blog-list .list:nth-child(3n) {
    margin-right: 0;
  }
  .blog-list .list:nth-child(n + 4) {
    margin-top: 64px;
  }
  .blog-list .list a {
    transition: all 300ms 0s ease;
    display: block;
    text-decoration: none;
  }
  .blog-list .list a:hover {
    opacity: 0.6;
  }
  .blog-list .list a .setsumei {
    color: #222222;
  }
  .blog-list .list .img-area {
    padding-top: 66.6667%;
    border: 1px solid #cccccc;
    background-image: url("./../images/common/dummy-img.gif");
    background-position: center;
    background-size: cover;
  }
  .blog-list .list .title, .blog-list .list .setsumei, .blog-list .list th, .blog-list .list td {
    font-size: 15px;
    line-height: 23px;
  }
  .blog-list .list .title {
    margin-top: 20px;
    font-weight: bold;
  }
  .blog-list .list .setsumei {
    margin-top: 8px;
  }
  .blog-list .list .bottom-box {
    margin-top: 20px;
  }
  .blog-list .list .bottom-box table {
    width: 100%;
  }
  .blog-list .list .bottom-box th {
    width: 55px;
    padding: 8px 4px 8px 8px;
    color: #005cd0;
  }
  .blog-list .list .bottom-box td {
    padding: 8px 8px 8px 4px;
  }
  .blog-list .list .bottom-box th, .blog-list .list .bottom-box td {
    border-top: 1px solid #cccccc;
  }
  .blog-list .list .bottom-box tr:last-child th, .blog-list .list .bottom-box tr:last-child td {
    border-bottom: 1px solid #cccccc;
  }
  .blog-list-single {
    width: 906px;
    margin: 64px auto 0;
  }
  .blog-list-single .list {
    width: 270px;
    margin-right: 48px;
  }
  .blog-list-single .list .sp-box {
    display: none;
  }
  .blog-list-single .list .title {
    margin-top: 0;
  }
  .blog-list-single .list a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    text-decoration: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .blog-list-single {
    width: 90%;
  }
  .blog-list-single .list {
    width: 29.5823%;
    margin-right: 5.5684%;
  }
  .blog-list-single:nth-child(3n) {
    margin-right: 0;
  }
  .blog-list-single:nth-child(n + 4) {
    margin-top: 64px;
  }
}

@media only screen and (min-width: 768px) {
  .blog-not-found {
    margin-top: 22px;
    text-align: center;
  }
  .contact, .trial {
    margin-top: 48px;
  }
  .contact h1 img, .trial h1 img {
    display: block;
    margin: 0 auto;
  }
  .contact h1 .trial, .trial h1 .trial {
    height: 42px;
  }
  .contact h1 .doc-req, .trial h1 .doc-req {
    height: 42px;
  }
  .contact h1 .send-complete, .trial h1 .send-complete {
    width: 290px;
  }
  .contact .conditions, .trial .conditions {
    margin-top: 56px;
    color: #005cd0;
    font-size: 1.8rem;
    line-height: 100%;
    text-align: center;
  }
  .contact .conditions-list, .trial .conditions-list {
    width: 500px;
    margin: 24px auto 0;
    padding-left: 16px;
    list-style: disc;
    text-align: justify;
  }
  .contact .conditions-list li + li, .trial .conditions-list li + li {
    margin-top: 16px;
  }
  .contact .conditions-info, .trial .conditions-info {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 500px;
    margin: 24px auto 0;
    padding: 16px;
    border-radius: 5px;
    background: linear-gradient(150deg, #ace9dd 0%, #508ce2 60%);
    color: #fff;
  }
  .contact .conditions-info img, .trial .conditions-info img {
    display: block;
    width: 50px;
    margin-right: 8px;
  }
  .contact .conditions-info th, .trial .conditions-info th {
    padding: 0 12px;
    font-size: 1.8rem;
    text-align: left;
  }
  .contact .conditions-info td, .trial .conditions-info td {
    padding: 0 12px;
    font-size: 1.8rem;
    font-weight: bold;
  }
  .contact .conditions-info tr:first-child th, .contact .conditions-info tr:first-child td, .trial .conditions-info tr:first-child th, .trial .conditions-info tr:first-child td {
    border: 0;
  }
  .contact .send-complete-img, .trial .send-complete-img {
    display: block;
    width: 280px;
    margin: 80px auto;
  }
  .contact .info-contact, .trial .info-contact {
    width: 400px;
  }
  .contact .info-trial, .trial .info-trial {
    width: 500px;
  }
  .contact .info, .trial .info {
    margin: 56px auto 0;
    font-size: 1.6rem;
    line-height: 32px;
    text-align: justify;
  }
  .contact .info + p, .trial .info + p {
    height: 0;
    margin: 0;
  }
  .contact article, .trial article {
    width: 768px;
    margin: 0 auto;
  }
  .price {
    margin: 64px auto 0;
  }
  .price h1 img {
    display: block;
    width: 48px;
    margin: 0 auto;
  }
  .price .title-info {
    margin-top: 16px;
    color: #868686;
    font-size: 1.2rem;
    line-height: 100%;
    text-align: center;
  }
  .price h2 {
    margin-top: 64px;
    line-height: 100%;
  }
  .price h2 img {
    margin: 0 auto;
  }
  .price .title-charges img {
    width: 356px;
  }
  .price .title-option img {
    width: 315px;
  }
  .price .sub-text {
    margin-top: 39px;
    text-align: center;
  }
  .price .price-head-img {
    display: block;
    width: 478px;
    margin: 55px auto 0;
  }
  .price .price-table {
    width: 600px;
    margin: 64px auto 0;
    padding: 32px;
    border: 1px solid #cccccc;
    border-radius: 5px;
  }
  .price .price-table table {
    width: 90%;
    margin: 24px auto 0;
  }
  .price .price-table th, .price .price-table td {
    padding: 24px;
    border-top: 1px solid #cccccc;
    vertical-align: middle;
  }
  .price .price-table th {
    font-size: 2.4rem;
  }
  .price .price-table td {
    border-top: 1px solid #cccccc;
    text-align: center;
  }
  .price .price-table tr:first-child th, .price .price-table tr:first-child td {
    padding-top: 0;
    border-top: 0;
  }
  .price .price-table .price-num {
    color: #005cd0;
    font-size: 3rem;
    font-weight: bolder;
    line-height: 100%;
  }
  .price .price-table .price-unit {
    display: inline-block;
    margin-left: 4px;
    font-size: 1.4rem;
    font-weight: bolder;
    line-height: 100%;
  }
  .price .price-table .price-info {
    display: block;
    margin-top: 8px;
    font-size: 1.6rem;
    line-height: 100%;
  }
  .price .price-table ul {
    margin-top: 22px;
    margin-left: 24px;
    list-style: disc;
  }
  .price .option-box {
    margin-top: 96px;
    padding: 96px 0 72px;
    background-color: #e9f7ff;
  }
  .price .option-box h2 {
    margin-top: 0;
  }
  .price .option-box table {
    width: 600px;
    margin: 48px auto 0;
  }
  .price .option-box th, .price .option-box td {
    padding: 24px;
    border-top: 1px solid #cccccc;
    vertical-align: middle;
  }
  .price .option-box th {
    font-size: 1.8rem;
    white-space: nowrap;
  }
  .price .option-box td {
    border-top: 1px solid #cccccc;
  }
  .price .option-box tr:first-child th, .price .option-box tr:first-child td {
    padding-top: 0;
    border-top: 0;
  }
  .price .option-box .price-num {
    color: #005cd0;
    font-size: 3rem;
    font-weight: bolder;
    line-height: 100%;
  }
  .price .option-box .price-unit {
    display: inline-block;
    margin-left: 8px;
    font-size: 1.4rem;
    font-weight: bolder;
    line-height: 100%;
  }
  .price .option-box .price-unit:first-child {
    margin-right: 8px;
    margin-bottom: 0;
  }
  .price .option-box .price-info {
    margin-top: 7px;
    font-size: 1.6rem;
  }
  .price .option-box ul {
    margin-top: 6px;
    margin-left: 24px;
    list-style: disc;
  }
  .price .common-steps {
    margin: 96px auto 0;
  }
  .price .common-steps h2 {
    margin-top: 0;
  }
  .seminar {
    margin: 24px auto 0;
  }
  .seminar h1 img {
    display: block;
    width: 84px;
    margin: 0 auto;
  }
  .case-study {
    margin: 24px auto 0;
  }
  .case-study h1 img {
    display: block;
    width: 85px;
    margin: 0 auto;
  }
  .doc-dl {
    margin: 48px auto 0;
  }
  .doc-dl h1 img {
    display: block;
    width: 171px;
    margin: 0 auto;
  }
  .doc-dl .btn {
    margin-top: 16px;
    padding: 2px 8px;
    font-weight: bold;
    text-align: center;
  }
  .doc-dl .blog-list a:hover {
    opacity: 1;
  }
  .doc-dl .blog-list a:hover .f-btn-info {
    background-color: #005cd0;
    color: #fff;
    font-weight: bolder;
  }
  .doc-dl .img-area {
    margin-top: 8px;
  }
  .doc-dl .all-doc-area {
    width: 300px;
    margin: 64px auto 0;
  }
  .doc-dl .all-doc-area .btn {
    padding: 6px 8px;
  }
  .doc-dl-all {
    margin: 48px auto 0;
  }
  .doc-dl-all h1 img {
    display: block;
    width: 128px;
    margin: 0 auto;
  }
  .functions {
    margin: 64px auto 0;
  }
  .functions h1 img {
    display: block;
    width: 84px;
    margin: 0 auto;
  }
  .functions .section-nav p {
    margin: 64px auto 0;
    text-align: center;
  }
  .functions .section-nav .title-img {
    display: block;
    width: 550px;
    margin: 48px auto 0;
  }
  .functions .section-nav ul {
    display: flex;
    flex-wrap: wrap;
    width: 850px;
    margin: 64px auto 0;
    padding: 32px 24px;
    border: 2px solid #005cd0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .functions .section-nav ul {
    width: 750px;
  }
  .functions .section-nav ul li {
    font-size: 1.3rem;
  }
}

@media only screen and (min-width: 768px) {
  .functions .section-nav li {
    position: static;
    width: calc(25% - 16px);
    margin: 0 0 0 16px;
    padding: 0 0 0 10px;
    color: #005cd0;
    font-weight: bolder;
    cursor: pointer;
  }
  .functions .section-nav li:hover {
    font-weight: normal;
  }
  .functions .section-nav li:first-child, .functions .section-nav li:nth-child(5n) {
    margin-left: 0;
  }
  .functions .section-nav li:nth-child(1), .functions .section-nav li:nth-child(5) {
    width: calc(28% - 16px);
  }
  .functions .section-nav li:nth-child(2), .functions .section-nav li:nth-child(6) {
    width: calc(31% - 16px);
  }
  .functions .section-nav li:nth-child(4) {
    width: calc(16% - 16px);
  }
  .functions .section-nav li:nth-child(n + 5) {
    margin-top: 20px;
  }
  .functions .section-nav li::before {
    content: "";
    position: relative;
    top: 14px;
    left: -5px;
    width: 0;
    height: 0;
    border-width: 10px 7.5px 0 7.5px;
    border-style: solid;
    border-color: #005cd0 transparent transparent transparent;
  }
  .functions .section-nav li.no-arrow::before {
    border: 0;
  }
  .functions .f-section {
    margin: 128px auto 0;
  }
  .functions .f-section:last-child {
    padding-bottom: 88px;
    border-bottom: 1px dashed #cccccc;
  }
  .functions .f-section .title-area {
    padding-top: 48px;
    padding-bottom: 39px;
  }
  .functions .f-section .title-area .svg-icon {
    fill: #fff;
  }
  .functions .f-section .title-area .s-title {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #005cd0;
    font-size: 2rem;
    line-height: 100%;
  }
  .functions .f-section .title-area .s-title img {
    margin-right: 6px;
  }
  .functions .f-section .title-area .f-info {
    width: 600px;
    margin: 23px auto 0;
    text-align: justify;
  }
  .functions .f-section .bg1 {
    background: linear-gradient(145deg, #fff9ff 20%, #ffffd7 100%);
  }
  .functions .f-section .bg2 {
    background: linear-gradient(290deg, #dcf6ff 0%, #fff6ff 100%);
  }
  .functions .f-section .bg3 {
    background: linear-gradient(290deg, #fff9ff 20%, #ffffd7 100%);
  }
  .functions .f-section .bg4 {
    background: linear-gradient(145deg, #dcf6ff 0%, #fff6ff 100%);
  }
  .functions .f-section .bg5 {
    background-color: rgba(0, 92, 208, 0.05);
  }
  .functions .f-section .section-wrap {
    width: 996px;
    margin: 45px auto 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .functions .f-section .section-wrap {
    width: 90%;
  }
}

@media only screen and (min-width: 768px) {
  .functions .f-section .f-list {
    display: flex;
    flex-wrap: wrap;
  }
  .functions .f-section .f-list li {
    padding: 16px 16px 12px;
    border: 1px solid #cccccc;
    border-radius: 5px;
  }
}

@media only screen and (min-width: 768px) and (min-width: 1081px) {
  .functions .f-section .f-list li {
    width: calc((100% - 64px) / 3);
    margin-right: 32px;
  }
  .functions .f-section .f-list li:nth-child(3n) {
    margin-right: 0;
  }
  .functions .f-section .f-list li:nth-child(n + 4) {
    margin-top: 32px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .functions .f-section .f-list li {
    width: calc((100% - 32px) / 2);
    margin-right: 32px;
  }
  .functions .f-section .f-list li:nth-child(2n) {
    margin-right: 0;
  }
  .functions .f-section .f-list li:nth-child(n + 3) {
    margin-top: 32px;
  }
}

@media only screen and (min-width: 768px) {
  .functions .f-section .f-list li h3 {
    display: flex;
    align-items: center;
    margin-top: 5px;
    padding-left: 8px;
    border-left: 5px solid #005cd0;
    font-size: 1.6rem;
    line-height: 160%;
  }
  .functions .f-section .f-list li h3 span {
    padding-left: 8px;
    font-size: 1rem;
  }
  .functions .f-section .f-list li ul {
    list-style: disc;
  }
  .functions .f-section .f-list li ul li {
    width: 100%;
    margin-left: 16px;
    padding: 0 16px 0 0;
    border: 0;
  }
  .functions .f-section .f-list .f-image {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 8px;
  }
  .functions .f-section .f-list .f-image img {
    width: 100%;
    max-width: 300px;
    max-height: 200px;
  }
  .functions .f-section .f-list .f-image .border {
    border: 1px solid #cccccc;
  }
  .functions .f-section .f-list p {
    margin-top: 15px;
  }
  .functions .f-section .section-foot-nav-area {
    margin-top: 48px;
    line-height: 100%;
    text-align: right;
  }
  .functions .f-section .section-foot-nav-area .section-foot-nav {
    position: relative;
    color: #005cd0;
    cursor: pointer;
  }
  .functions .f-section .section-foot-nav-area .section-foot-nav:hover {
    text-decoration: underline;
  }
  .functions .f-section .section-foot-nav-area .section-foot-nav::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -16px;
    width: 0;
    height: 0;
    margin-top: -6px;
    border-width: 6px 0 6px 8px;
    border-style: solid;
    border-color: transparent transparent transparent #005cd0;
  }
  .functions .f-section .info-table {
    width: 700px;
    margin: 48px auto 0;
  }
  .functions .f-section .info-table table {
    width: 100%;
  }
  .functions .f-section .info-table th, .functions .f-section .info-table td {
    padding: 24px;
    border-top: 1px solid #cccccc;
    vertical-align: middle;
  }
  .functions .f-section .info-table th {
    width: 240px;
    color: #005cd0;
    font-size: 1.7rem;
    white-space: wrap;
  }
  .functions .f-section .info-table .th-only {
    text-align: left;
    white-space: normal;
  }
  .functions .f-section .info-table td {
    border-top: 1px solid #cccccc;
    font-size: 1.5rem;
  }
  .functions .f-section .info-table td ul {
    list-style: disc;
  }
  .functions .f-section .info-table td ul li {
    margin-left: 16px;
    font-size: 1.5rem;
  }
  .functions .f-section .info-table tr:first-child th, .functions .f-section .info-table tr:first-child td {
    padding-top: 0;
    border-top: 0;
  }
  .service {
    margin: 64px auto 0;
  }
  .service h1 img {
    display: block;
    width: 128px;
    margin: 0 auto;
  }
  .service .service-img-area {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 90px;
    padding: 45px 0;
    background: linear-gradient(90deg, #cdf2eb 0%, #61a0e1 100%);
  }
  .service .service-img-area .service-img {
    width: 498px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .service .service-img-area .service-img {
    width: 350px;
  }
}

@media only screen and (min-width: 768px) {
  .service .service-img-area p {
    margin-left: 65px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .service .service-img-area p {
    margin-left: 32px;
  }
}

@media only screen and (min-width: 768px) {
  .service .service-img-area p img {
    display: block;
    width: 413px;
    margin-top: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .service .service-img-area p img {
    width: 300px;
  }
}

@media only screen and (min-width: 768px) {
  .service .background {
    margin-top: 96px;
  }
  .service .background .title img {
    width: 512px;
    margin: 0 auto;
  }
  .service .background .text {
    width: 645px;
    margin: 55px auto 0;
  }
  .service .background .text p {
    text-align: justify;
  }
  .service .background .comment {
    margin-top: 96px;
    padding: 56px 0;
    background: linear-gradient(180deg, #cdf2eb 0%, #fff 100%);
  }
  .service .background .comment .box {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .service .background .comment .box .fukidashi {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    width: 310px;
    padding: 12px 16px;
    border: solid 3px #cdf2eb;
    border-radius: 5px;
    background: #fff;
  }
  .service .background .comment .box .fl::before, .service .background .comment .box .fr::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 50%;
    border: 12px solid transparent;
  }
  .service .background .comment .box .fl::after, .service .background .comment .box .fr::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    border: 14px solid transparent;
  }
  .service .background .comment .box .fl::before {
    left: -24px;
    margin-top: -12px;
    border-right: 12px solid #fff;
  }
  .service .background .comment .box .fl::after {
    left: -30px;
    margin-top: -14px;
    border-right: 14px solid #cdf2eb;
  }
  .service .background .comment .box .fr::before {
    right: -24px;
    margin-top: -12px;
    border-left: 12px solid #fff;
  }
  .service .background .comment .box .fr::after {
    right: -30px;
    margin-top: -14px;
    border-left: 14px solid #cdf2eb;
  }
  .service .background .comment .box .fukidashi p {
    margin: 0;
    padding: 0;
  }
  .service .background .comment p + p {
    margin-top: 0;
  }
  .service .background .comment .box + .box {
    margin-top: 32px;
  }
  .service .background .comment .box1 .fukidashi:first-child {
    margin-right: 22px;
  }
  .service .background .comment .box1 .fukidashi:last-child {
    margin-left: 47px;
  }
  .service .background .comment .box2 .fukidashi:first-child {
    margin-right: 127px;
  }
  .service .background .comment .box2 .fukidashi:last-child {
    margin-left: 111px;
  }
  .service .background .comment .box3 .fukidashi:first-child {
    margin-right: 57px;
  }
  .service .background .comment .box3 .fukidashi:last-child {
    margin-left: 108px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 820px) {
  .service .background .comment .box1 .fukidashi:first-child {
    margin-right: 0;
  }
  .service .background .comment .box1 .fukidashi:last-child {
    margin-left: 47px;
  }
  .service .background .comment .box2 .fukidashi:first-child {
    margin-right: 80px;
  }
  .service .background .comment .box2 .fukidashi:last-child {
    margin-left: 50px;
  }
  .service .background .comment .box3 .fukidashi:first-child {
    margin-right: 57px;
  }
  .service .background .comment .box3 .fukidashi:last-child {
    margin-left: 28px;
  }
}

@media only screen and (min-width: 768px) {
  .service .difference {
    margin-top: 48px;
  }
  .service .difference .title {
    margin-top: 96px;
  }
  .service .difference .title img {
    width: 485px;
    margin: 0 auto;
  }
  .service .difference .text {
    width: 600px;
    margin: 39px auto 0;
    text-align: justify;
  }
  .service .difference .sheet {
    display: block;
    width: 715px;
    margin: 48px auto 0;
  }
  .service .difference .box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 48px;
  }
  .service .difference .box p {
    width: 443px;
    margin-right: 64px;
  }
  .service .difference .box img {
    width: 518px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .service .difference .box {
    display: block;
  }
  .service .difference .box p {
    width: 443px;
    margin: 0 auto;
    text-align: justify;
  }
  .service .difference .box img {
    display: block;
    margin: 39px auto 0;
  }
}

@media only screen and (min-width: 768px) {
  .service .use-case {
    margin-top: 96px;
  }
  .service .use-case .title img {
    width: 290px;
    margin: 0 auto;
  }
  .service .use-case .text1 {
    margin-top: 39px;
    text-align: center;
  }
  .service .use-case .people {
    width: 958px;
    margin: 48px auto 0;
    padding: 48px;
    border: 1px solid #005cd0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .service .use-case .people {
    width: 740px;
    padding: 48px 32px;
  }
}

@media only screen and (min-width: 768px) {
  .service .use-case .people h3 {
    line-height: 100%;
    text-align: center;
  }
  .service .use-case .people h3 img {
    width: 94px;
  }
  .service .use-case .people .people-box {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
  }
  .service .use-case .people .people-box .box {
    width: 180px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .service .use-case .people .people-box .box {
    width: 145px;
  }
}

@media only screen and (min-width: 768px) {
  .service .use-case .people .people-box .box img {
    display: block;
    width: 88px;
    margin: 0 auto;
  }
  .service .use-case .people .people-box .box p {
    margin-top: 13px;
  }
}

@media only screen and (min-width: 768px) and (min-width: 1081px) {
  .service .use-case .flow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 0;
  }
  .service .use-case .flow h4 img {
    height: 22px;
  }
  .service .use-case .flow .text3 p {
    width: 340px;
  }
  .service .use-case .flow .img-box {
    display: flex;
    justify-content: center;
    width: 559px;
  }
  .service .use-case .flow-img {
    display: block;
    margin-left: 48px;
  }
  .service .use-case .flow1 {
    margin-top: 48px;
  }
  .service .use-case .flow1 .flow-img {
    width: 519px;
  }
  .service .use-case .flow2 {
    background: linear-gradient(0deg, #d7e7f7 0%, #f7fff3 100%);
  }
  .service .use-case .flow2 .flow-img {
    width: 427px;
  }
  .service .use-case .flow3 .flow-img {
    width: 519px;
  }
  .service .use-case .flow4 {
    background: linear-gradient(0deg, #f7fff3 0%, #fff4de 100%);
  }
  .service .use-case .flow4 .flow-img {
    width: 420px;
  }
  .service .use-case .flow5 .flow-img {
    width: 519px;
  }
  .service .use-case .flow6 {
    background: linear-gradient(0deg, #fff4de 0%, #e3e8ff 100%);
  }
  .service .use-case .flow6 .flow-img {
    width: 559px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .service .use-case .flow {
    padding: 48px 0;
  }
  .service .use-case .flow h4 {
    line-height: 100%;
  }
  .service .use-case .flow h4 img {
    max-width: 95%;
    height: 22px;
  }
  .service .use-case .flow .text3 {
    width: 90%;
    max-width: 650px;
    margin: 0 auto;
  }
  .service .use-case .flow .text3 p {
    margin-top: 23px;
    text-align: justify;
  }
  .service .use-case .flow .img-box {
    width: 90%;
    max-width: 450px;
    margin: 29px auto 0;
  }
  .service .use-case .flow-img {
    display: block;
    width: 100%;
  }
  .service .use-case .flow1 {
    margin-top: 48px;
  }
  .service .use-case .flow2 {
    background: linear-gradient(0deg, #d7e7f7 0%, #f7fff3 100%);
  }
  .service .use-case .flow4 {
    background: linear-gradient(0deg, #f7fff3 0%, #fff4de 100%);
  }
  .service .use-case .flow6 {
    background: linear-gradient(0deg, #fff4de 0%, #e3e8ff 100%);
  }
}

@media only screen and (min-width: 768px) {
  .service .effect {
    margin-top: 96px;
  }
  .service .effect .title img {
    width: 349px;
    margin: 0 auto;
  }
}

@media only screen and (min-width: 768px) and (min-width: 1081px) {
  .service .effect .box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 64px;
  }
  .service .effect .effect1 .text-box {
    margin-right: 56px;
  }
  .service .effect .effect1 h3 img {
    width: 216px;
  }
  .service .effect .effect1 p {
    width: 443px;
    margin-top: 7px;
  }
  .service .effect .effect1 .flow-img {
    width: 427px;
  }
  .service .effect .effect2 {
    flex-direction: row-reverse;
    padding: 38px 0 29px;
    background-color: #f0f5fc;
  }
  .service .effect .effect2 .text-box {
    margin-left: 56px;
  }
  .service .effect .effect2 h3 img {
    width: 93px;
  }
  .service .effect .effect2 p {
    width: 443px;
    margin-top: 7px;
  }
  .service .effect .effect2 .flow-img {
    width: 517px;
  }
  .service .effect .effect3 .text-box {
    margin-right: 114px;
  }
  .service .effect .effect3 .text-box h3 img {
    width: 194px;
  }
  .service .effect .effect3 .text-box p {
    width: 443px;
    margin-top: 7px;
  }
  .service .effect .effect3 .img-box {
    width: 327px;
  }
  .service .effect .effect3 .img-box .flow-img {
    width: 100%;
  }
  .service .effect .effect3 .img-box p {
    width: 100%;
    margin-top: 15px;
    color: rgba(0, 0, 0, 0.3);
    font-size: 1.2rem;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .service .effect .box .flow-img {
    display: block;
    width: 90%;
    margin: 32px auto 0;
  }
  .service .effect .box .text-box {
    width: 90%;
    max-width: 650px;
    margin: 64px auto 0;
  }
  .service .effect .box + .box {
    margin-top: 48px;
  }
  .service .effect .box h3 {
    line-height: 100%;
  }
  .service .effect .effect1 h3 img {
    width: 216px;
  }
  .service .effect .effect1 p {
    margin-top: 15px;
    text-align: justify;
  }
  .service .effect .effect1 .flow-img {
    max-width: 427px;
  }
  .service .effect .effect2 {
    padding: 48px 0;
    background-color: #f0f5fc;
  }
  .service .effect .effect2 .text-box {
    margin-top: 0;
  }
  .service .effect .effect2 h3 img {
    width: 93px;
  }
  .service .effect .effect2 p {
    margin-top: 15px;
    text-align: justify;
  }
  .service .effect .effect2 .flow-img {
    max-width: 517px;
  }
  .service .effect .effect3 {
    display: flex;
    align-items: center;
    max-width: 650px;
    margin: 0 auto;
  }
  .service .effect .effect3 .text-box {
    margin: 0 64px 0 0;
  }
  .service .effect .effect3 .text-box h3 img {
    width: 194px;
  }
  .service .effect .effect3 .text-box p {
    width: 400px;
    margin-top: 7px;
    text-align: justify;
  }
  .service .effect .effect3 .img-box .flow-img {
    width: 100%;
    margin-top: 0;
  }
  .service .effect .effect3 .img-box p {
    width: 100%;
    margin-top: 15px;
    color: rgba(0, 0, 0, 0.3);
    font-size: 1.2rem;
  }
}

@media only screen and (min-width: 768px) {
  .useful-info {
    margin: 48px auto 0;
  }
  .useful-info .cat-tab {
    margin-top: 64px;
  }
  .useful-info .cat-tab ul {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .useful-info .cat-tab ul li {
    margin-left: 32px;
    opacity: .5;
    font-weight: bolder;
    letter-spacing: 3px;
  }
  .useful-info .cat-tab ul li:first-child {
    margin-left: 0;
  }
  .useful-info .cat-tab ul li:hover {
    opacity: 1;
  }
  .useful-info .cat-tab ul .cat-tab-active {
    opacity: 1;
  }
  .useful-info .cat-tab ul .btn {
    border: 2px solid #005cd0;
  }
  .useful-info .blog-list {
    display: none;
    animation-name: fade-in;
    animation-duration: .5s;
    opacity: 0;
  }
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .useful-info .blog-list .cat-name {
    width: 60px;
    padding: 6px 0;
    border: 1px solid #005cd0;
    border-radius: 3px;
    font-size: 1.2rem;
    line-height: 100%;
    text-align: center;
  }
  .useful-info .blog-list.list-active {
    display: flex;
    opacity: 1;
  }
  .useful-info .blog-list .tags {
    display: flex;
    flex-wrap: wrap;
    margin-top: 16px;
  }
  .useful-info .blog-list .tags li {
    margin: 8px 8px 0 0;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: rgba(0, 92, 208, 0.1);
    color: #222222;
    font-size: 1rem;
    line-height: 120%;
  }
  .useful-info .img-area {
    margin-top: 8px;
  }
  .faq {
    margin: 48px auto 0;
  }
  .faq h1 img {
    display: block;
    width: 126px;
    margin: 0 auto;
  }
  .faq .cat-tab {
    margin-top: 64px;
  }
  .faq .cat-tab ul {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .faq .cat-tab ul li {
    margin-left: 32px;
    opacity: .5;
    font-weight: bolder;
    letter-spacing: 3px;
  }
  .faq .cat-tab ul li:first-child {
    margin-left: 0;
  }
  .faq .cat-tab ul li:hover {
    opacity: 1;
  }
  .faq .cat-tab ul .cat-tab-active {
    opacity: 1;
  }
  .faq .cat-tab ul .btn {
    border: 2px solid #005cd0;
  }
  .faq .blog-list {
    display: none;
    width: 80%;
    max-width: 680px;
    margin-top: 64px;
    margin-right: auto;
    margin-left: auto;
    animation-name: fade-in;
    animation-duration: .5s;
    opacity: 0;
  }
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .faq .blog-list.list-active {
    display: flex;
    opacity: 1;
  }
  .faq .blog-list .anq-btn {
    display: inline-block;
    position: relative;
    width: 24px;
    height: 24px;
    border: 1px solid #005cd0;
    border-radius: 12px;
    cursor: pointer;
  }
  .faq .blog-list .anq-btn span::before,
  .faq .blog-list .anq-btn span::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 10%;
    margin: -5% 0 0 -30%;
    background: #005cd0;
  }
  .faq .blog-list .anq-btn span::after {
    transform: rotate(90deg);
  }
  .faq .blog-list .faq-list {
    width: 100%;
    padding: 16px 24px;
    border: 1px solid #005cd0;
    border-radius: 3px;
  }
  .faq .blog-list .faq-list .title span {
    display: block;
    width: calc(100% - 35px);
    text-align: justify;
  }
  .faq .blog-list .faq-list + .faq-list {
    margin-top: 32px;
  }
  .faq .blog-list .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #005cd0;
    cursor: pointer;
  }
  .faq .blog-list .ans-text {
    transition: all 300ms 0s ease;
    height: 0;
    overflow: hidden;
  }
  .faq .blog-list .ans-text p {
    transition: all 300ms 0s ease;
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
    line-height: 0;
    text-align: justify;
  }
  .faq .blog-list .ans-text ul {
    transition: all 300ms 0s ease;
    visibility: hidden;
    margin-top: 0;
    padding-left: 32px;
    overflow: hidden;
    list-style: disc;
    opacity: 0;
    line-height: 0;
  }
  .faq .blog-list .ans-text ul + p {
    margin-top: 0;
  }
  .faq .blog-list .ans-text p + p {
    margin-top: 0;
  }
  .faq .blog-list .ans-text li {
    transition: all 300ms 0s ease;
    visibility: hidden;
    opacity: 0;
    line-height: 0;
  }
  .faq .blog-list .faq-list-active .anq-btn span::after {
    display: none;
  }
  .faq .blog-list .faq-list-active .ans-text {
    height: 100%;
    margin-top: 8px;
    padding-top: 9px;
    overflow: hidden;
    border-top: 1px solid rgba(102, 102, 102, 0.3);
  }
  .faq .blog-list .faq-list-active p {
    visibility: visible;
    opacity: 1;
    line-height: 220%;
  }
  .faq .blog-list .faq-list-active p + p {
    margin-top: 16px;
  }
  .faq .blog-list .faq-list-active ul {
    visibility: visible;
    margin-top: 16px;
    overflow: hidden;
    opacity: 1;
    line-height: 220%;
  }
  .faq .blog-list .faq-list-active ul + p {
    margin-top: 16px;
  }
  .faq .blog-list .faq-list-active li {
    visibility: visible;
    opacity: 1;
    line-height: 220%;
  }
  .common-trial-btn .btn {
    width: 500px;
    margin: 124px auto 0;
    font-size: 1.8rem;
    font-weight: bolder;
  }
  .contact-trial {
    margin: 48px auto 0;
  }
  .contact-trial h1 img {
    display: block;
    width: 150px;
    margin: 0 auto;
  }
  .contact-trial .ct-contact {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    max-width: 740px;
    margin: 48px auto 0;
  }
  .contact-trial .ct-contact .box {
    transition: all 300ms 0s ease;
    display: block;
    width: 47.5%;
    padding: 32px 32px 23px;
    border: 1px solid #005cd0;
    border-radius: 5px;
    text-decoration: none;
  }
  .contact-trial .ct-contact .box:nth-child(2n) {
    margin-left: 5%;
  }
  .contact-trial .ct-contact .box:nth-child(n + 3) {
    margin-top: 5%;
  }
  .contact-trial .ct-contact .box:hover {
    background-color: #005cd0;
    color: #fff;
  }
  .contact-trial .ct-contact .box:hover h2 {
    color: #fff;
  }
  .contact-trial .ct-contact h2 {
    transition: all 300ms 0s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #005cd0;
    font-weight: lighter;
  }
  .contact-trial .ct-contact h2 .material-symbols-outlined {
    margin-right: 6px;
    font-size: 2.8rem;
  }
  .contact-trial .ct-contact h2 .text {
    font-size: 2.4rem;
  }
  .contact-trial .ct-contact p {
    margin-top: 15px;
    text-align: center;
  }
  .contact-trial .tel-info {
    margin-top: 48px;
  }
  .contact-trial .tel-info p {
    text-align: center;
  }
  .contact-trial .tel-info .tel {
    display: flex;
    justify-content: center;
    margin-top: 24px;
  }
  .contact-trial .tel-info .tel a {
    transition: all 300ms 0s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bolder;
    text-decoration: none;
    text-indent: 2px;
  }
  .contact-trial .tel-info .tel a span:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 8px;
    border-radius: 3px;
    background-color: #005cd0;
    color: #fff;
    font-size: 3.2rem;
    font-weight: 500;
  }
  .contact-trial .tel-info .tel a span:last-child {
    font-size: 4.4rem;
  }
  .contact-trial .tel-info .tel a:hover {
    opacity: 0.6;
  }
  .contact-trial .tel-info .tel .sub-info {
    margin-left: 16px;
    padding-left: 8px;
    border-left: 1px solid #cccccc;
  }
  .contact-trial .tel-info .tel .sub-info span {
    display: block;
    line-height: 140%;
    text-align: center;
  }
  #lf_form_div {
    width: 100%;
    /* ===================================
    画面全体のレイアウト
    =================================== */
    /* フォームエリア全体の設定 */
    /* ===================================
    設問エリアのレイアウト
    =================================== */
    /* 設問エリア全体の設定 */
    /* 設問の表 */
    /* 設問の行 */
    /*設問名のセルのデザイン */
    /* 設問の入力セルおよび表示セルのデザイン */
    /* 設問の入力例/説明セルのデザイン */
    /* 入力セルの「氏」「名」の文字のデザイン */
    /* 入力確認画面、完了画面の入力された文字のデザイン */
    /* ボタンの表示エリアの設定 */
    /* 入力エラーメッセージのデザイン */
    /* 公開終了メッセージのデザイン */
    /* ===================================
    入力コントロールのデザイン
    =================================== */
    /* 確認／送信／戻る／登録ボタン */
    /* 入力中のフィールドの背景色 */
    /* それぞれの入力フィールドにカーソルが移動したときに背景の色が変わります。不要な場合は削除してください。 */
    /* ===================================
    必須項目のマークおよびメッセージなど
    =================================== */
    /* 必須項目のマーク */
    /* 必須項目についての説明文 */
    /* メールアドレスの再入力メッセージ */
  }
  #lf_form_div [type="text"] {
    padding: 6px;
    border: 1px solid rgba(102, 102, 102, 0.3);
    border-radius: 3px;
    font-size: 2.4rem;
  }
  #lf_form_div :-ms-input-placeholder {
    color: rgba(102, 102, 102, 0.3);
    font-size: 1.5rem;
  }
  #lf_form_div ::placeholder {
    color: rgba(102, 102, 102, 0.3);
    font-size: 1.5rem;
  }
  #lf_form_div :-ms-input-placeholder {
    color: rgba(102, 102, 102, 0.3);
    font-size: 1.5rem;
  }
  #lf_form_div td [type="text"], #lf_form_div td textarea {
    width: 100% !important;
    padding: 6px;
    border: 1px solid rgba(102, 102, 102, 0.3);
    border-radius: 3px;
    font-size: 1.8rem;
  }
  #lf_form_div table {
    width: 100%;
    font-size: 1.65rem;
  }
  #lf_form_div table th, #lf_form_div table .label {
    padding: 15px;
    border-bottom: 1px solid #cccccc;
    color: #005cd0;
    vertical-align: middle;
  }
  #lf_form_div table .label {
    font-weight: bold;
    text-align: center;
  }
  #lf_form_div table td {
    padding: 15px;
    border-bottom: 1px solid #cccccc;
    vertical-align: middle;
  }
  #lf_form_div table tr:last-child th, #lf_form_div table tr:last-child td {
    border-bottom: 0;
  }
  #lf_form_div table tr:last-child .label {
    border-bottom: 0;
  }
  #lf_form_div table ul {
    margin-left: 25px;
    list-style: disc;
  }
  #lf_form_div select + br {
    display: none;
  }
  #lf_form_div br + textarea {
    margin-top: 15px;
  }
  #lf_form_div [type="radio"], #lf_form_div [type="checkbox"] {
    margin-right: 10px;
  }
  #lf_form_div select {
    font-size: 1.5rem;
  }
  #lf_form_div form {
    margin-top: 64px;
  }
  #lf_form_div .container {
    width: 100%;
  }
  #lf_form_div .items {
    margin-top: 0;
  }
  #lf_form_div .label {
    width: 300px;
    padding: 15px;
    border-bottom: 1px solid #cccccc;
    color: #005cd0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
  }
  #lf_form_div .comment {
    display: none;
  }
  #lf_form_div .label_name {
    color: rgba(102, 102, 102, 0.7);
    font-size: 1.2rem;
  }
  #lf_form_div .value {
    margin-top: 0;
  }
  #lf_form_div .button_area {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  #lf_form_div .message {
    margin-bottom: 32px;
    padding: 20px 30px;
    background-color: #e9f7ff;
    color: #ee6a77;
    font-weight: bold;
  }
  #lf_form_div [type=button] {
    transition: all 300ms 0s ease;
    display: block;
    margin: 0 15px;
    padding: 2px 18px;
    border-radius: 3px;
    background-color: #868686;
    border: 2px solid #868686;
    color: #fff;
    font-size: 1.4rem;
    font-weight: bolder;
    line-height: inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }
  #lf_form_div [type=button]:disabled {
    opacity: .3;
    cursor: not-allowed;
  }
  #lf_form_div [type=button]:hover {
    border: 2px solid #575757;
    background-color: #575757;
    cursor: pointer;
  }
  #lf_form_div #button_confirm_submit {
    background-color: #005cd0;
    border: 2px solid #005cd0;
  }
  #lf_form_div #button_confirm_submit:hover {
    background-color: #003f8d;
    border: 2px solid #003f8d;
  }
  #lf_form_div .required {
    display: inline-block;
    padding-left: 10px;
    color: #ee6a77;
    font-size: 60%;
    font-weight: bold;
  }
  #lf_form_div .required:after {
    /* ここを編集することで表示されるマークを変更できます */
    content: "※必須";
  }
  #lf_form_div .required_msg {
    margin-right: 4px;
    padding-bottom: 0;
    color: #ee6a77;
    font-size: 80%;
    font-weight: bold;
    text-align: right;
  }
  #lf_form_div .required_msg:after {
    /* ここを編集することで表示されるマークを変更できます */
    content: "「※必須」となっている項目は必ず入力してください。";
    width: 100%;
    height: auto;
  }
  #lf_form_div .label_mail {
    margin-top: 0;
    margin-right: 4px;
    color: rgba(102, 102, 102, 0.7);
    font-size: 80%;
  }
  #lf_form_div .label_mail:after {
    /* ここを編集することで表示されるメッセージを変更できます */
    content: "確認のため、もう一度メールアドレスを入力してください";
    width: 100%;
    height: auto;
    margin-top: 10px;
  }
  .dummy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 150px;
    border: 1px solid #666666;
    background-color: rgba(102, 102, 102, 0.1);
    text-align: center;
  }
}
/*# sourceMappingURL=style.css.map */