@charset "UTF-8";
/*
===============================================================================
setting　※ここに設定を記述
===============================================================================
*/
/*
===============================================================================
layout
===============================================================================
*/
@import url(whhg.css);
* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding-top: 65px;
  background-color: #ffffff;
  color: #251e1c;
  font-size: 15px;
  font-family: "Roboto", "Noto Sans JP", sans-serif, "メイリオ";
  line-height: 1.75;
  text-align: center;
  -webkit-text-size-adjust: 100%;
}

input,
textarea,
select {
  font-family: "Roboto", "Noto Sans JP", sans-serif, "メイリオ";
}

img {
  max-width: 100%;
  height: auto;
  border-style: none;
  vertical-align: bottom;
  backface-visibility: hidden;
}

h1,
h2,
h3 {
  font-weight: normal;
}

.heading_side-key,
.heading_side-flow,
.heading_side-gate,
.heading_side-apps,
.heading_side-apps-book,
.heading_side-apps-scheduler,
.heading_side-apps-gadgets,
.heading_side-bridge {
  padding-left: 20px;
  border-left: 5px solid #00a0c7;
  text-align: left !important;
}

.heading_side-flow {
  border-left-color: #f7810d;
}

.heading_side-gate {
  border-left-color: #9abd1f;
}

.heading_side-apps {
  border-left-color: #005cac;
}

.heading_side-apps-book {
  border-left-color: #259f94;
}

.heading_side-apps-scheduler {
  border-left-color: #d35857;
}

.heading_side-apps-gadgets {
  border-left-color: #c9c9c4;
}

.heading_side-bridge {
  border-left-color: #d2a029;
}

a {
  outline: none;
  cursor: pointer;
  text-underline-offset: 0.2em;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:link {
  color: #251e1c;
}
a:visited {
  color: #251e1c;
}
a:hover {
  text-decoration: none;
}
a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

*:focus {
  outline: none;
}

.color-white {
  color: #ffffff;
}

.color-key {
  color: #00a0c7;
}

.color-flow {
  color: #f7810d;
}

.color-gate {
  color: #9abd1f;
}

.color-apps {
  color: #005cac;
}

.color-apps-book {
  color: #259f94;
}

.color-apps-scheduler {
  color: #d35857;
}

.color-apps-gadgets {
  color: #c9c9c4;
}

/* .wrapper ===============*/
.wrapper {
  max-width: 1900px;
  margin: 0 auto;
}

main {
  background: #ffffff;
}
main .container {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
  overflow: hidden;
  text-align: left;
}

section.section-odd {
  padding: 60px 0;
}
section.section-even {
  padding: 60px 0;
  background: #f4f3f3;
}

p.heading,
.annotation {
  position: relative;
  padding-left: 1em;
}

p.heading::before {
  position: absolute;
  top: 0.5em;
  left: 0;
  display: block;
  width: 0.8em;
  height: 0.8em;
  border-radius: 100%;
  background-color: #00a0c7;
  content: "";
}

.annotation::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "※";
}

.udline {
  border-bottom: solid 2px;
  font-weight: bold;
}

.udline-long {
  padding-bottom: 5px;
  border-bottom: solid 1px;
  font-weight: bold;
}

.udline-flow {
  padding-bottom: 0;
  border-bottom: 2px solid #f7810d;
}

.udline-flow-b {
  padding-bottom: 3px;
  border-bottom: 5px solid #f7810d;
}

.ligntline {
  background: linear-gradient(transparent 65%, #f2f7f8 65%);
}

.ligntline-flow {
  background: linear-gradient(transparent 60%, rgb(254.1808, 242.0976, 230.2192) 60%);
}

.btn {
  display: inline-block;
  padding: 10px 15px 8px 15px;
  box-sizing: border-box;
  background: #00a0c7;
  color: #ffffff !important;
  font-weight: 300;
  font-size: 14px;
  text-decoration: none;
}
.btn:hover {
  opacity: 0.8;
  filter: alpha(opacity=80);
}
.btn.is-orange, .btn.is-orange-all {
  width: 50%;
  border-radius: 10px;
  background-color: #fa6b00;
  font-weight: bold;
  font-size: 18px;
}
.btn.is-orange.key, .btn.is-orange-all.key {
  background-color: #00a0c7;
}
.btn.is-orange-all {
  width: 100%;
  padding: 10px 5px 8px 15px;
  text-align: center;
}
.btn.is-outline, .btn.is-outline-all {
  padding: 20px;
  border: 1px solid #00a0c7;
  border-radius: 10px;
  background-color: #ffffff;
  color: #00a0c7 !important;
  font-weight: bold;
  font-size: 18px;
}
.btn.is-outline:hover, .btn.is-outline-all:hover {
  background-color: #f2f7f8;
}
.btn.is-outline-all {
  width: 100%;
  padding: 10px 10px 8px 10px;
  text-align: center;
}
.btn.is-big {
  min-width: 350px;
  padding: 15px 30px;
  font-weight: bold;
  font-size: 18px;
}
.btn i {
  margin-top: 5px;
  margin-left: 5px;
  font-size: 11px;
}
.btn.btn-flow {
  background: #f7810d;
}
.btn.btn-flow.license-btn-3d {
  border-bottom: 4px solid rgb(177.628, 91.016, 5.872);
}
.btn.btn-gate {
  background: #9abd1f;
}
.btn.btn-gate.license-btn-3d {
  border-bottom: 4px solid rgb(82.6, 101.3727272727, 16.6272727273);
}
.btn.btn-apps {
  background: #005cac;
}
.btn.btn-apps.license-btn-3d {
  border-bottom: 4px solid rgb(0, 56.5372093023, 105.7);
}
.btn.license-btn-3d:hover {
  border-bottom: none;
  transform: translateY(4px);
}

.btn-campaign {
  background: #e2a003;
}

.btn-flow-main,
.btn-flow-main_va,
.btn-flow-main_re,
.btn-flow-main_big,
.btn-flow-main_re_small,
.btn-gate-main,
.btn-gate-main_re,
.btn-gate-main_big,
.btn-key,
.btn-key_re {
  position: relative;
  display: inline-block;
  min-width: 300px;
  padding: 13px 35px 10px 35px;
  border: 1px solid #f7810d;
  border-radius: 50px;
  background: linear-gradient(0deg, rgb(214, 116, 0) 0%, rgb(247, 129, 13) 50%, rgb(247, 129, 13) 100%);
  color: #ffffff !important;
  font-weight: bold;
  font-size: 18px;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s;
}
.btn-flow-main > i,
.btn-flow-main_va > i,
.btn-flow-main_re > i,
.btn-flow-main_big > i,
.btn-flow-main_re_small > i,
.btn-gate-main > i,
.btn-gate-main_re > i,
.btn-gate-main_big > i,
.btn-key > i,
.btn-key_re > i {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-weight: normal;
  font-size: 15px;
}
.btn-flow-main:hover,
.btn-flow-main_va:hover,
.btn-flow-main_re:hover,
.btn-flow-main_big:hover,
.btn-flow-main_re_small:hover,
.btn-gate-main:hover,
.btn-gate-main_re:hover,
.btn-gate-main_big:hover,
.btn-key:hover,
.btn-key_re:hover {
  background: #ffffff;
  color: #f7810d !important;
}

.btn-flow-main {
  width: 370px;
}

.btn-flow-main_re,
.btn-flow-main_re_small {
  background: #ffffff;
  color: #f7810d !important;
}
.btn-flow-main_re:hover,
.btn-flow-main_re_small:hover {
  background: #f7810d;
  color: #ffffff !important;
}

.btn-flow-main_big,
.btn-gate-main_big {
  min-width: 500px;
  padding: 23px 45px 20px 45px;
  border-radius: 60px;
}
.btn-flow-main_big > i,
.btn-gate-main_big > i {
  right: 20px;
}

.btn-flow-main_re_small {
  min-width: 200px;
  padding: 6px 25px 5px 25px;
  border-radius: 80px;
  font-size: 15px;
}
.btn-flow-main_re_small > i {
  right: 8px;
}

.btn-gate-main,
.btn-gate-main_big {
  border-color: #9abd1f;
  background: linear-gradient(0deg, rgb(122, 151, 15) 0%, rgb(154, 189, 31) 50%, rgb(153, 190, 17) 100%);
}
.btn-gate-main:hover,
.btn-gate-main_big:hover {
  color: #9abd1f !important;
}

.btn-gate-main_re {
  border-color: #9abd1f;
  background: #ffffff;
  color: #9abd1f !important;
}
.btn-gate-main_re:hover {
  background: #9abd1f;
  color: #ffffff !important;
}

.btn-key {
  border-color: #00748c;
  background: linear-gradient(0deg, rgb(0, 116, 140) 0%, rgb(51, 177, 204) 100%);
}
.btn-key:hover {
  color: #00a0c7 !important;
}

.btn-key_re {
  border-color: #00a0c7;
  background: #ffffff;
  color: #00a0c7 !important;
}
.btn-key_re:hover {
  background: #00a0c7;
  color: #ffffff !important;
}

.btn-key_big {
  position: relative;
  display: inline-block;
  min-width: 400px;
  padding: 13px 40px 10px;
  border: 1px solid #00748c;
  border-radius: 10px;
  background: linear-gradient(0deg, rgb(0, 116, 140) 0%, rgb(51, 177, 204) 100%);
  color: #ffffff !important;
  font-weight: bold;
  font-size: 18px;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s;
}
.btn-key_big:has(i) > i {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  font-weight: normal;
  font-size: 15px;
}
.btn-key_big.demo, .btn-key_big.inquiries, .btn-key_big.download {
  padding: 13px 55px 10px 80px;
}
.btn-key_big.demo::before, .btn-key_big.inquiries::before, .btn-key_big.download::before {
  position: absolute;
  top: 50%;
  right: calc(50% + 3em);
  transform: translateY(-50%);
  width: 35px;
  height: 35px;
  background: #ffffff;
  content: "";
  -webkit-mask: url("/common/images/service/flow/common/icon_demo.svg") no-repeat center center/contain;
          mask: url("/common/images/service/flow/common/icon_demo.svg") no-repeat center center/contain;
}
.btn-key_big.inquiries::before {
  -webkit-mask: url("/common/images/service/flow/common/icon_inquiries.svg") no-repeat center center/contain;
          mask: url("/common/images/service/flow/common/icon_inquiries.svg") no-repeat center center/contain;
}
.btn-key_big.download::before {
  right: calc(50% + 4em);
  -webkit-mask: url("/common/images/service/flow/common/icon_download.svg") no-repeat center center/contain;
          mask: url("/common/images/service/flow/common/icon_download.svg") no-repeat center center/contain;
}
.btn-key_big:hover, .btn-key_big:active {
  background: #ffffff;
  color: #00a0c7 !important;
}
.btn-key_big:hover::before, .btn-key_big:active::before {
  background: #00a0c7;
}

.btn-3d {
  display: inline-block;
  background-color: #f7810d;
  border-bottom: 5px solid #995008;
  border-radius: 5px;
  padding: 8px 10px;
  text-align: center;
  text-decoration: none;
  color: #ffffff !important;
  padding: 5px 20px;
  white-space: nowrap;
}
.btn-3d.main {
  background-color: #00a0c7;
  border-bottom: 5px solid rgb(0, 118.9949748744, 148);
}

.btn-3d:hover {
  opacity: 0.8;
}

ul li {
  list-style-type: none;
  text-align: left;
}
ul.list-decimal li {
  list-style-type: decimal;
  margin-left: 20px;
}
ul.list li {
  list-style-type: disc;
  margin-left: 20px;
}
ul.list-circle li {
  list-style-type: circle;
  margin-left: 20px;
}
ul.list-anyinput, ul.list-anyinput2, ul.list-anyinput3, ul.list-anyinput4, ul.list-anyinput5 {
  position: relative;
}
ul.list-anyinput li, ul.list-anyinput2 li, ul.list-anyinput3 li, ul.list-anyinput4 li, ul.list-anyinput5 li {
  list-style: none !important;
  list-style-position: outside;
  margin: 0 !important;
  padding-left: 1.25em;
}
ul.list-anyinput li span:first-child, ul.list-anyinput2 li span:first-child, ul.list-anyinput3 li span:first-child, ul.list-anyinput4 li span:first-child, ul.list-anyinput5 li span:first-child {
  position: absolute;
  left: 0;
  margin: 0;
}
ul.list-anyinput2 li {
  padding-left: 2.25em;
}
ul.list-anyinput3 li {
  padding-left: 3.25em;
}
ul.list-anyinput4 li {
  padding-left: 4.25em;
}
ul.list-anyinput5 li {
  padding-left: 5.25em;
}

ol {
  margin-left: 20px;
}
ol.decimalb li {
  font-weight: bold;
  font-size: 18px;
}
ol.decimalb li .decimalb_inner {
  font-weight: normal;
  font-size: 15px;
}
ol.decimalb li .decimalb_inner li {
  font-weight: normal;
  font-size: unset;
}

.red {
  width: 100%;
  color: #cc0000;
  font-weight: bold;
}

.blue {
  width: 100%;
  color: #1592e6;
  font-weight: bold;
}

.pointer {
  cursor: pointer;
}

.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.click-effectnone {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.click-effectnone:focus {
  outline: none;
}

.kv,
.kv-min {
  width: 100%;
  height: 300px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.kv > .container,
.kv-min > .container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  color: #ffffff;
  text-align: center;
}
.kv > .container h1,
.kv > .container .service-ttl,
.kv-min > .container h1,
.kv-min > .container .service-ttl {
  width: 100%;
  max-width: 510px;
  font-size: 40px;
  text-align: center;
}
.kv > .container h1.big-ttl,
.kv-min > .container h1.big-ttl {
  margin: 0 !important;
  font-size: 60px !important;
  line-height: 1.25 !important;
}
.kv > .container h1.big-ttl > span,
.kv-min > .container h1.big-ttl > span {
  display: block;
  margin-top: 5px;
  font-size: 20px;
}
.kv > .container h1.bl-ttl,
.kv-min > .container h1.bl-ttl {
  color: #251e1c;
}

.kv-min {
  height: 200px;
}
.kv-min > .container {
  height: 200px;
}

.pc_none,
.pc_none-m {
  display: none !important;
}

.sp_none,
.sp_none-m {
  display: block !important;
}

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

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

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

nav.breadcrumb {
  overflow: hidden;
  box-sizing: content-box;
  background-color: #f8f8f8;
  white-space: nowrap;
  text-overflow: ellipsis;
}
nav.breadcrumb > ol {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6px 20px 5px 20px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.75;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
}
nav.breadcrumb > ol > li {
  display: inline;
  margin-right: 10px;
}
nav.breadcrumb > ol > li:not(:last-child) ::after {
  position: relative;
  top: -0.1em;
  display: inline-block;
  transform: translateX(-35%) rotate(45deg);
  width: 5px;
  height: 5px;
  margin-left: 12px;
  border-top: 1px solid #251e1c;
  border-right: 1px solid #251e1c;
  vertical-align: middle;
  content: "";
}

@media screen and (max-width: 1129px) {
  body {
    padding-top: 50px;
  }
}
@media screen and (max-width: 767px) {
  img {
    max-width: 100%;
  }
  main .container {
    padding-inline: 1em;
  }
  .pc_none-m {
    display: block !important;
  }
  .sp_none-m {
    display: none !important;
  }
}
@media screen and (max-width: 640px) {
  .udline-flow-b {
    padding-bottom: 0;
    border-bottom: 3px solid #f7810d;
  }
  .btn.is-big {
    min-width: unset;
    font-size: 18px;
  }
  .btn-flow-main,
  .btn-flow-main_va,
  .btn-flow-main_re,
  .btn-flow-main_big,
  .btn-flow-main_re_small,
  .btn-gate-main,
  .btn-gate-main_re,
  .btn-gate-main_big,
  .btn-key,
  .btn-key_big {
    min-width: unset;
  }
  .kv {
    height: 250px;
  }
  .kv > .container {
    height: 250px;
    padding-inline: 1em;
  }
  .kv > .container h1,
  .kv > .container .service-ttl {
    font-size: 30px;
  }
  .kv > .container h1.big-ttl {
    font-size: 40px !important;
  }
  .kv > .container h1.big-ttl > span {
    font-size: 16px;
  }
  .pc_none {
    display: block !important;
  }
  .sp_none {
    display: none !important;
  }
}
@media screen and (max-width: 960px) {
  .btn-flow-main {
    width: 500px;
  }
}
@media screen and (max-width: 767px) {
  .btn-flow-main {
    width: 90%;
  }
}
/* font-size：11px～40pxまで ===============*/
.fonts10 {
  font-size: 10px;
}

.fonts11 {
  font-size: 11px;
}

.fonts12 {
  font-size: 12px;
}

.fonts13 {
  font-size: 13px;
}

.fonts14 {
  font-size: 14px;
}

.fonts15 {
  font-size: 15px;
}

.fonts16 {
  font-size: 16px;
}

.fonts17 {
  font-size: 17px;
}

.fonts18 {
  font-size: 18px;
}

.fonts19 {
  font-size: 19px;
}

.fonts20 {
  font-size: 20px;
}

.fonts21 {
  font-size: 21px;
}

.fonts22 {
  font-size: 22px;
}

.fonts23 {
  font-size: 23px;
}

.fonts24 {
  font-size: 24px;
}

.fonts25 {
  font-size: 25px;
}

.fonts26 {
  font-size: 26px;
}

.fonts27 {
  font-size: 27px;
}

.fonts28 {
  font-size: 28px;
}

.fonts29 {
  font-size: 29px;
}

.fonts30 {
  font-size: 30px;
}

.fonts31 {
  font-size: 31px;
}

.fonts32 {
  font-size: 32px;
}

.fonts33 {
  font-size: 33px;
}

.fonts34 {
  font-size: 34px;
}

.fonts35 {
  font-size: 35px;
}

.fonts36 {
  font-size: 36px;
}

.fonts37 {
  font-size: 37px;
}

.fonts38 {
  font-size: 38px;
}

.fonts39 {
  font-size: 39px;
}

.fonts40 {
  font-size: 40px;
}

@media screen and (max-width: 767px) {
  .sp-fonts10 {
    font-size: 10px;
  }
  .sp-fonts11 {
    font-size: 11px;
  }
  .sp-fonts12 {
    font-size: 12px;
  }
  .sp-fonts13 {
    font-size: 13px;
  }
  .sp-fonts14 {
    font-size: 14px;
  }
  .sp-fonts15 {
    font-size: 15px;
  }
  .sp-fonts16 {
    font-size: 16px;
  }
  .sp-fonts17 {
    font-size: 17px;
  }
  .sp-fonts18 {
    font-size: 18px;
  }
  .sp-fonts19 {
    font-size: 19px;
  }
  .sp-fonts20 {
    font-size: 20px;
  }
  .sp-fonts21 {
    font-size: 21px;
  }
  .sp-fonts22 {
    font-size: 22px;
  }
  .sp-fonts23 {
    font-size: 23px;
  }
  .sp-fonts24 {
    font-size: 24px;
  }
  .sp-fonts25 {
    font-size: 25px;
  }
  .sp-fonts26 {
    font-size: 26px;
  }
  .sp-fonts27 {
    font-size: 27px;
  }
  .sp-fonts28 {
    font-size: 28px;
  }
  .sp-fonts29 {
    font-size: 29px;
  }
  .sp-fonts30 {
    font-size: 30px;
  }
  .sp-fonts31 {
    font-size: 31px;
  }
  .sp-fonts32 {
    font-size: 32px;
  }
  .sp-fonts33 {
    font-size: 33px;
  }
  .sp-fonts34 {
    font-size: 34px;
  }
  .sp-fonts35 {
    font-size: 35px;
  }
  .sp-fonts36 {
    font-size: 36px;
  }
  .sp-fonts37 {
    font-size: 37px;
  }
  .sp-fonts38 {
    font-size: 38px;
  }
  .sp-fonts39 {
    font-size: 39px;
  }
  .sp-fonts40 {
    font-size: 40px;
  }
}
/* box-shadow：alpha 5%～100%まで ===============*/
.shadowa5 {
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.05));
}

.shadowa10 {
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.1));
}

.shadowa15 {
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.15));
}

.shadowa20 {
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.2));
}

.shadowa25 {
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.25));
}

.shadowa30 {
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.3));
}

.shadowa35 {
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.35));
}

.shadowa40 {
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.4));
}

.shadowa45 {
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.45));
}

.shadowa50 {
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.5));
}

.shadowa55 {
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.55));
}

.shadowa60 {
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.6));
}

.shadowa65 {
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.65));
}

.shadowa70 {
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.7));
}

.shadowa75 {
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.75));
}

.shadowa80 {
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.8));
}

.shadowa85 {
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.85));
}

.shadowa90 {
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.9));
}

.shadowa95 {
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.95));
}

.shadowa100 {
  filter: drop-shadow(0px 1px 4px rgb(0, 0, 0));
}

/* image：中央揃え、サイズ指定 ===============*/
/* ※.img.w5p～.img.w100pを作成 */
.w5p {
  display: block;
  max-width: 5%;
  height: auto;
  margin: 30px auto;
}

.w5ptb0 {
  display: block;
  max-width: 5%;
  margin-inline: auto;
}

.w10p {
  display: block;
  max-width: 10%;
  height: auto;
  margin: 30px auto;
}

.w10ptb0 {
  display: block;
  max-width: 10%;
  margin-inline: auto;
}

.w15p {
  display: block;
  max-width: 15%;
  height: auto;
  margin: 30px auto;
}

.w15ptb0 {
  display: block;
  max-width: 15%;
  margin-inline: auto;
}

.w20p {
  display: block;
  max-width: 20%;
  height: auto;
  margin: 30px auto;
}

.w20ptb0 {
  display: block;
  max-width: 20%;
  margin-inline: auto;
}

.w25p {
  display: block;
  max-width: 25%;
  height: auto;
  margin: 30px auto;
}

.w25ptb0 {
  display: block;
  max-width: 25%;
  margin-inline: auto;
}

.w30p {
  display: block;
  max-width: 30%;
  height: auto;
  margin: 30px auto;
}

.w30ptb0 {
  display: block;
  max-width: 30%;
  margin-inline: auto;
}

.w35p {
  display: block;
  max-width: 35%;
  height: auto;
  margin: 30px auto;
}

.w35ptb0 {
  display: block;
  max-width: 35%;
  margin-inline: auto;
}

.w40p {
  display: block;
  max-width: 40%;
  height: auto;
  margin: 30px auto;
}

.w40ptb0 {
  display: block;
  max-width: 40%;
  margin-inline: auto;
}

.w45p {
  display: block;
  max-width: 45%;
  height: auto;
  margin: 30px auto;
}

.w45ptb0 {
  display: block;
  max-width: 45%;
  margin-inline: auto;
}

.w50p {
  display: block;
  max-width: 50%;
  height: auto;
  margin: 30px auto;
}

.w50ptb0 {
  display: block;
  max-width: 50%;
  margin-inline: auto;
}

.w55p {
  display: block;
  max-width: 55%;
  height: auto;
  margin: 30px auto;
}

.w55ptb0 {
  display: block;
  max-width: 55%;
  margin-inline: auto;
}

.w60p {
  display: block;
  max-width: 60%;
  height: auto;
  margin: 30px auto;
}

.w60ptb0 {
  display: block;
  max-width: 60%;
  margin-inline: auto;
}

.w65p {
  display: block;
  max-width: 65%;
  height: auto;
  margin: 30px auto;
}

.w65ptb0 {
  display: block;
  max-width: 65%;
  margin-inline: auto;
}

.w70p {
  display: block;
  max-width: 70%;
  height: auto;
  margin: 30px auto;
}

.w70ptb0 {
  display: block;
  max-width: 70%;
  margin-inline: auto;
}

.w75p {
  display: block;
  max-width: 75%;
  height: auto;
  margin: 30px auto;
}

.w75ptb0 {
  display: block;
  max-width: 75%;
  margin-inline: auto;
}

.w80p {
  display: block;
  max-width: 80%;
  height: auto;
  margin: 30px auto;
}

.w80ptb0 {
  display: block;
  max-width: 80%;
  margin-inline: auto;
}

.w85p {
  display: block;
  max-width: 85%;
  height: auto;
  margin: 30px auto;
}

.w85ptb0 {
  display: block;
  max-width: 85%;
  margin-inline: auto;
}

.w90p {
  display: block;
  max-width: 90%;
  height: auto;
  margin: 30px auto;
}

.w90ptb0 {
  display: block;
  max-width: 90%;
  margin-inline: auto;
}

.w95p {
  display: block;
  max-width: 95%;
  height: auto;
  margin: 30px auto;
}

.w95ptb0 {
  display: block;
  max-width: 95%;
  margin-inline: auto;
}

.w100p {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 30px auto;
}

.w100ptb0 {
  display: block;
  max-width: 100%;
  margin-inline: auto;
}

@media screen and (max-width: 767px) {
  .w5p,
  .w5ptb0 {
    max-width: 100%;
  }
  .w10p,
  .w10ptb0 {
    max-width: 100%;
  }
  .w15p,
  .w15ptb0 {
    max-width: 100%;
  }
  .w20p,
  .w20ptb0 {
    max-width: 100%;
  }
  .w25p,
  .w25ptb0 {
    max-width: 100%;
  }
  .w30p,
  .w30ptb0 {
    max-width: 100%;
  }
  .w35p,
  .w35ptb0 {
    max-width: 100%;
  }
  .w40p,
  .w40ptb0 {
    max-width: 100%;
  }
  .w45p,
  .w45ptb0 {
    max-width: 100%;
  }
  .w50p,
  .w50ptb0 {
    max-width: 100%;
  }
  .w55p,
  .w55ptb0 {
    max-width: 100%;
  }
  .w60p,
  .w60ptb0 {
    max-width: 100%;
  }
  .w65p,
  .w65ptb0 {
    max-width: 100%;
  }
  .w70p,
  .w70ptb0 {
    max-width: 100%;
  }
  .w75p,
  .w75ptb0 {
    max-width: 100%;
  }
  .w80p,
  .w80ptb0 {
    max-width: 100%;
  }
  .w85p,
  .w85ptb0 {
    max-width: 100%;
  }
  .w90p,
  .w90ptb0 {
    max-width: 100%;
  }
  .w95p,
  .w95ptb0 {
    max-width: 100%;
  }
  .w100p,
  .w100ptb0 {
    max-width: 100%;
  }
}
/* margin ===============*/
/* ※.mt5～.mt100, .mb5～.mb100, .ml5～.ml100, .mr5～.mr100を作成 */
.mt5 {
  margin-top: 5px;
}

.mb5 {
  margin-bottom: 5px;
}

.ml5 {
  margin-left: 5px;
}

.mr5 {
  margin-right: 5px;
}

.mt10 {
  margin-top: 10px;
}

.mb10 {
  margin-bottom: 10px;
}

.ml10 {
  margin-left: 10px;
}

.mr10 {
  margin-right: 10px;
}

.mt15 {
  margin-top: 15px;
}

.mb15 {
  margin-bottom: 15px;
}

.ml15 {
  margin-left: 15px;
}

.mr15 {
  margin-right: 15px;
}

.mt20 {
  margin-top: 20px;
}

.mb20 {
  margin-bottom: 20px;
}

.ml20 {
  margin-left: 20px;
}

.mr20 {
  margin-right: 20px;
}

.mt25 {
  margin-top: 25px;
}

.mb25 {
  margin-bottom: 25px;
}

.ml25 {
  margin-left: 25px;
}

.mr25 {
  margin-right: 25px;
}

.mt30 {
  margin-top: 30px;
}

.mb30 {
  margin-bottom: 30px;
}

.ml30 {
  margin-left: 30px;
}

.mr30 {
  margin-right: 30px;
}

.mt35 {
  margin-top: 35px;
}

.mb35 {
  margin-bottom: 35px;
}

.ml35 {
  margin-left: 35px;
}

.mr35 {
  margin-right: 35px;
}

.mt40 {
  margin-top: 40px;
}

.mb40 {
  margin-bottom: 40px;
}

.ml40 {
  margin-left: 40px;
}

.mr40 {
  margin-right: 40px;
}

.mt45 {
  margin-top: 45px;
}

.mb45 {
  margin-bottom: 45px;
}

.ml45 {
  margin-left: 45px;
}

.mr45 {
  margin-right: 45px;
}

.mt50 {
  margin-top: 50px;
}

.mb50 {
  margin-bottom: 50px;
}

.ml50 {
  margin-left: 50px;
}

.mr50 {
  margin-right: 50px;
}

.mt55 {
  margin-top: 55px;
}

.mb55 {
  margin-bottom: 55px;
}

.ml55 {
  margin-left: 55px;
}

.mr55 {
  margin-right: 55px;
}

.mt60 {
  margin-top: 60px;
}

.mb60 {
  margin-bottom: 60px;
}

.ml60 {
  margin-left: 60px;
}

.mr60 {
  margin-right: 60px;
}

.mt65 {
  margin-top: 65px;
}

.mb65 {
  margin-bottom: 65px;
}

.ml65 {
  margin-left: 65px;
}

.mr65 {
  margin-right: 65px;
}

.mt70 {
  margin-top: 70px;
}

.mb70 {
  margin-bottom: 70px;
}

.ml70 {
  margin-left: 70px;
}

.mr70 {
  margin-right: 70px;
}

.mt75 {
  margin-top: 75px;
}

.mb75 {
  margin-bottom: 75px;
}

.ml75 {
  margin-left: 75px;
}

.mr75 {
  margin-right: 75px;
}

.mt80 {
  margin-top: 80px;
}

.mb80 {
  margin-bottom: 80px;
}

.ml80 {
  margin-left: 80px;
}

.mr80 {
  margin-right: 80px;
}

.mt85 {
  margin-top: 85px;
}

.mb85 {
  margin-bottom: 85px;
}

.ml85 {
  margin-left: 85px;
}

.mr85 {
  margin-right: 85px;
}

.mt90 {
  margin-top: 90px;
}

.mb90 {
  margin-bottom: 90px;
}

.ml90 {
  margin-left: 90px;
}

.mr90 {
  margin-right: 90px;
}

.mt95 {
  margin-top: 95px;
}

.mb95 {
  margin-bottom: 95px;
}

.ml95 {
  margin-left: 95px;
}

.mr95 {
  margin-right: 95px;
}

.mt100 {
  margin-top: 100px;
}

.mb100 {
  margin-bottom: 100px;
}

.ml100 {
  margin-left: 100px;
}

.mr100 {
  margin-right: 100px;
}

.mt0 {
  margin-top: 0 !important;
}

.mb0 {
  margin-bottom: 0 !important;
}

.ml0 {
  margin-left: 0 !important;
}

.mr0 {
  margin-right: 0 !important;
}

.anchor-space0 {
  margin-top: 0px;
  padding-top: 0px;
}

.anchor-space5 {
  margin-top: -5px;
  padding-top: 5px;
}

.anchor-space10 {
  margin-top: -10px;
  padding-top: 10px;
}

.anchor-space15 {
  margin-top: -15px;
  padding-top: 15px;
}

.anchor-space20 {
  margin-top: -20px;
  padding-top: 20px;
}

.anchor-space25 {
  margin-top: -25px;
  padding-top: 25px;
}

.anchor-space30 {
  margin-top: -30px;
  padding-top: 30px;
}

.anchor-space35 {
  margin-top: -35px;
  padding-top: 35px;
}

.anchor-space40 {
  margin-top: -40px;
  padding-top: 40px;
}

.anchor-space45 {
  margin-top: -45px;
  padding-top: 45px;
}

.anchor-space50 {
  margin-top: -50px;
  padding-top: 50px;
}

.anchor-space55 {
  margin-top: -55px;
  padding-top: 55px;
}

.anchor-space60 {
  margin-top: -60px;
  padding-top: 60px;
}

.anchor-space65 {
  margin-top: -65px;
  padding-top: 65px;
}

.anchor-space70 {
  margin-top: -70px;
  padding-top: 70px;
}

.anchor-space75 {
  margin-top: -75px;
  padding-top: 75px;
}

.anchor-space80 {
  margin-top: -80px;
  padding-top: 80px;
}

.anchor-space85 {
  margin-top: -85px;
  padding-top: 85px;
}

.anchor-space90 {
  margin-top: -90px;
  padding-top: 90px;
}

.anchor-space95 {
  margin-top: -95px;
  padding-top: 95px;
}

.anchor-space100 {
  margin-top: -100px;
  padding-top: 100px;
}

/* padding ===============*/
/* ※.pt0～.pt100, .pb0～.pb100, .pl0～.pl100, .pr0～.pr100を作成 */
.pt5 {
  padding-top: 5px;
}

.pb5 {
  padding-bottom: 5px;
}

.pl5 {
  padding-left: 5px;
}

.pr5 {
  padding-right: 5px;
}

.pt10 {
  padding-top: 10px;
}

.pb10 {
  padding-bottom: 10px;
}

.pl10 {
  padding-left: 10px;
}

.pr10 {
  padding-right: 10px;
}

.pt15 {
  padding-top: 15px;
}

.pb15 {
  padding-bottom: 15px;
}

.pl15 {
  padding-left: 15px;
}

.pr15 {
  padding-right: 15px;
}

.pt20 {
  padding-top: 20px;
}

.pb20 {
  padding-bottom: 20px;
}

.pl20 {
  padding-left: 20px;
}

.pr20 {
  padding-right: 20px;
}

.pt25 {
  padding-top: 25px;
}

.pb25 {
  padding-bottom: 25px;
}

.pl25 {
  padding-left: 25px;
}

.pr25 {
  padding-right: 25px;
}

.pt30 {
  padding-top: 30px;
}

.pb30 {
  padding-bottom: 30px;
}

.pl30 {
  padding-left: 30px;
}

.pr30 {
  padding-right: 30px;
}

.pt35 {
  padding-top: 35px;
}

.pb35 {
  padding-bottom: 35px;
}

.pl35 {
  padding-left: 35px;
}

.pr35 {
  padding-right: 35px;
}

.pt40 {
  padding-top: 40px;
}

.pb40 {
  padding-bottom: 40px;
}

.pl40 {
  padding-left: 40px;
}

.pr40 {
  padding-right: 40px;
}

.pt45 {
  padding-top: 45px;
}

.pb45 {
  padding-bottom: 45px;
}

.pl45 {
  padding-left: 45px;
}

.pr45 {
  padding-right: 45px;
}

.pt50 {
  padding-top: 50px;
}

.pb50 {
  padding-bottom: 50px;
}

.pl50 {
  padding-left: 50px;
}

.pr50 {
  padding-right: 50px;
}

.pt55 {
  padding-top: 55px;
}

.pb55 {
  padding-bottom: 55px;
}

.pl55 {
  padding-left: 55px;
}

.pr55 {
  padding-right: 55px;
}

.pt60 {
  padding-top: 60px;
}

.pb60 {
  padding-bottom: 60px;
}

.pl60 {
  padding-left: 60px;
}

.pr60 {
  padding-right: 60px;
}

.pt65 {
  padding-top: 65px;
}

.pb65 {
  padding-bottom: 65px;
}

.pl65 {
  padding-left: 65px;
}

.pr65 {
  padding-right: 65px;
}

.pt70 {
  padding-top: 70px;
}

.pb70 {
  padding-bottom: 70px;
}

.pl70 {
  padding-left: 70px;
}

.pr70 {
  padding-right: 70px;
}

.pt75 {
  padding-top: 75px;
}

.pb75 {
  padding-bottom: 75px;
}

.pl75 {
  padding-left: 75px;
}

.pr75 {
  padding-right: 75px;
}

.pt80 {
  padding-top: 80px;
}

.pb80 {
  padding-bottom: 80px;
}

.pl80 {
  padding-left: 80px;
}

.pr80 {
  padding-right: 80px;
}

.pt85 {
  padding-top: 85px;
}

.pb85 {
  padding-bottom: 85px;
}

.pl85 {
  padding-left: 85px;
}

.pr85 {
  padding-right: 85px;
}

.pt90 {
  padding-top: 90px;
}

.pb90 {
  padding-bottom: 90px;
}

.pl90 {
  padding-left: 90px;
}

.pr90 {
  padding-right: 90px;
}

.pt95 {
  padding-top: 95px;
}

.pb95 {
  padding-bottom: 95px;
}

.pl95 {
  padding-left: 95px;
}

.pr95 {
  padding-right: 95px;
}

.pt100 {
  padding-top: 100px;
}

.pb100 {
  padding-bottom: 100px;
}

.pl100 {
  padding-left: 100px;
}

.pr100 {
  padding-right: 100px;
}

.pt0 {
  padding-top: 0 !important;
}

.pb0 {
  padding-bottom: 0 !important;
}

.pl0 {
  padding-left: 0 !important;
}

.pr0 {
  padding-right: 0 !important;
}

/* flexbox ===============*/
.flexbox {
  display: flex;
  gap: 5%;
  /* ※box-col-imgの場合は上下中央揃え */
  /* ※.box-col0～.box-col100を5%刻みで作成 */
  /* ※.box-num0～.box-num10を1刻みで作成 */
}
.flexbox.middle {
  align-items: center;
}
.flexbox .box-col,
.flexbox .box-col-img {
  box-sizing: border-box;
}
.flexbox .box-col-img {
  margin: auto;
  text-align: center;
}
.flexbox .box-col0 {
  width: 0%;
}
.flexbox .box-col5 {
  width: 5%;
}
.flexbox .box-col10 {
  width: 10%;
}
.flexbox .box-col15 {
  width: 15%;
}
.flexbox .box-col20 {
  width: 20%;
}
.flexbox .box-col25 {
  width: 25%;
}
.flexbox .box-col30 {
  width: 30%;
}
.flexbox .box-col35 {
  width: 35%;
}
.flexbox .box-col40 {
  width: 40%;
}
.flexbox .box-col45 {
  width: 45%;
}
.flexbox .box-col50 {
  width: 50%;
}
.flexbox .box-col55 {
  width: 55%;
}
.flexbox .box-col60 {
  width: 60%;
}
.flexbox .box-col65 {
  width: 65%;
}
.flexbox .box-col70 {
  width: 70%;
}
.flexbox .box-col75 {
  width: 75%;
}
.flexbox .box-col80 {
  width: 80%;
}
.flexbox .box-col85 {
  width: 85%;
}
.flexbox .box-col90 {
  width: 90%;
}
.flexbox .box-col95 {
  width: 95%;
}
.flexbox .box-col100 {
  width: 100%;
}
.flexbox .box-num0 {
  order: 0;
}
.flexbox .box-num1 {
  order: 1;
}
.flexbox .box-num2 {
  order: 2;
}
.flexbox .box-num3 {
  order: 3;
}
.flexbox .box-num4 {
  order: 4;
}
.flexbox .box-num5 {
  order: 5;
}
.flexbox .box-num6 {
  order: 6;
}
.flexbox .box-num7 {
  order: 7;
}
.flexbox .box-num8 {
  order: 8;
}
.flexbox .box-num9 {
  order: 9;
}
.flexbox .box-num10 {
  order: 10;
}
.flexbox p.col-heading {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px !important;
}

/* 3分割 */
.flexbox-3split {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
.flexbox-3split > .box-col3,
.flexbox-3split > .box-col3-r {
  width: calc((100% - 60px) / 3);
  box-sizing: border-box;
}
.flexbox-3split > .box-col3-r {
  border-radius: 5px;
}

/* 4分割 */
.flexbox-4split {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.flexbox-4split > .box-col4,
.flexbox-4split > .box-col4-r {
  width: calc((100% - 36px) / 4);
  box-sizing: border-box;
}
.flexbox-4split > .box-col4-r {
  border-radius: 5px;
}

/* 横並び・均等配置 */
.flexbox-normal {
  display: flex;
  justify-content: space-between;
}
.flexbox-normal > *:not(:first-child) {
  margin-left: 10px;
}

/* 横並び・左右反転 */
.flexbox-row-rebase {
  display: flex;
  flex-direction: row-reverse;
}

@media screen and (max-width: 767px) {
  .flexbox {
    display: block;
    margin-right: auto;
    margin-left: auto;
  }
  .flexbox .box-col,
  .flexbox .box-col-img {
    width: 100%;
    margin: 20px auto;
  }
  /* 3分割 */
  .flexbox-3split {
    display: block;
    margin-right: auto;
    margin-left: auto;
  }
  .flexbox-3split > .box-col3,
  .flexbox-3split > .box-col3-r {
    width: 100%;
    margin: 0 auto;
  }
  .flexbox-3split > .box-col3:not(:first-child),
  .flexbox-3split > .box-col3-r:not(:first-child) {
    margin-top: 30px;
  }
  /* 4分割 */
  .flexbox-4split {
    display: block;
    margin-right: auto;
    margin-left: auto;
  }
  .flexbox-4split > .box-col4,
  .flexbox-4split > .box-col4-r {
    width: 100%;
    margin: 0 auto;
  }
  .flexbox-4split > .box-col4:not(:first-child),
  .flexbox-4split > .box-col4-r:not(:first-child) {
    margin-top: 15px;
  }
  /* 横並び・均等配置 */
  .flexbox-normal {
    display: block;
  }
  .flexbox-normal > *:not(:first-child) {
    margin-left: 0;
  }
  /* 横並び・左右反転 */
  .flexbox-row-rebase {
    display: block;
    flex-direction: column;
  }
}
/* iframe ===============*/
/* .iframe-boxで囲んで100%表示、横並びなどはflexboxと併用 */
.iframe-box {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.iframe-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*
===============================================================================
header
===============================================================================
*/
#header {
  position: fixed;
  top: 0;
  z-index: 10000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 65px;
  padding: 0 0 0 20px;
  border-bottom: 1px solid rgb(226.4, 225.5333333333, 225.1);
  box-sizing: border-box;
  background: #ffffff;
  text-align: left;
  transition: 0.1s;
  /* #global-nav ===============*/
  /* スクロールによる縮小時 ===============*/
}
#header a {
  display: block;
}
#header .logo a img {
  width: 100%;
  max-width: 150px;
  transition: 0.1s;
}
#header .global-nav .global-nav_inner {
  display: flex;
  gap: 0 10px;
  /* ul.gnav ===============*/
  /* ul.gnav_btn ===============*/
}
#header .global-nav .global-nav_inner ul.gnav {
  display: flex;
  list-style-type: none;
  height: 65px;
}
#header .global-nav .global-nav_inner ul.gnav > li {
  /* sub-nav */
}
#header .global-nav .global-nav_inner ul.gnav > li > a,
#header .global-nav .global-nav_inner ul.gnav > li > span {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 1em;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  transition: 0.1s;
}
#header .global-nav .global-nav_inner ul.gnav > li > a:before,
#header .global-nav .global-nav_inner ul.gnav > li > span:before {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: scale(0, 1);
  width: 100%;
  height: 3px;
  background-color: #00a0c7;
  content: "";
  transition: 0.1s;
}
#header .global-nav .global-nav_inner ul.gnav > li > a:hover,
#header .global-nav .global-nav_inner ul.gnav > li > span:hover {
  background-color: rgba(0, 160, 199, 0.05);
}
#header .global-nav .global-nav_inner ul.gnav > li > a:hover:before, #header .global-nav .global-nav_inner ul.gnav > li > a.current:before,
#header .global-nav .global-nav_inner ul.gnav > li > span:hover:before,
#header .global-nav .global-nav_inner ul.gnav > li > span.current:before {
  transform: scale(1);
}
#header .global-nav .global-nav_inner ul.gnav > li.sub-nav {
  /* sub-nav-menu */
}
#header .global-nav .global-nav_inner ul.gnav > li.sub-nav > a,
#header .global-nav .global-nav_inner ul.gnav > li.sub-nav > span {
  padding-right: 2em;
}
#header .global-nav .global-nav_inner ul.gnav > li.sub-nav > a.linknone,
#header .global-nav .global-nav_inner ul.gnav > li.sub-nav > span.linknone {
  cursor: auto;
}
#header .global-nav .global-nav_inner ul.gnav > li.sub-nav > a:after,
#header .global-nav .global-nav_inner ul.gnav > li.sub-nav > span:after {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 10px;
  height: 11px;
  background: url(/common/images/other/icon-chevrondown.svg) 0 2px no-repeat;
  content: "";
  transition: all 0.2s;
}
#header .global-nav .global-nav_inner ul.gnav > li.sub-nav > .sub-nav-menu {
  position: absolute;
  top: 65px;
  left: 0;
  transform: scaleY(0);
  transform-origin: center top;
  width: 100vw;
  background-color: #00a0c7;
  transition: all 0.3s;
}
#header .global-nav .global-nav_inner ul.gnav > li.sub-nav > .sub-nav-menu > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#header .global-nav .global-nav_inner ul.gnav > li.sub-nav > .sub-nav-menu > ul > li > a {
  display: flex;
  align-items: center;
  height: 100px;
  padding: 0 1em;
  color: #ffffff;
  text-decoration: none;
  text-align: center;
}
#header .global-nav .global-nav_inner ul.gnav > li.sub-nav > .sub-nav-menu > ul > li > a:hover {
  background-color: rgb(0, 139.4974874372, 173.5);
}
#header .global-nav .global-nav_inner ul.gnav > li.sub-nav > .sub-nav-menu > ul > li > a i {
  margin-left: 5px;
}
#header .global-nav .global-nav_inner ul.gnav > li.sub-nav:hover > a:before,
#header .global-nav .global-nav_inner ul.gnav > li.sub-nav:hover > span:before {
  transform: scale(1);
}
#header .global-nav .global-nav_inner ul.gnav > li.sub-nav:hover > .sub-nav-menu {
  transform: scaleY(1);
}
#header .global-nav .global-nav_inner ul.gnav_btn {
  display: flex;
  list-style-type: none;
  height: 65px;
  margin: 0;
  padding: 0;
}
#header .global-nav .global-nav_inner ul.gnav_btn > li {
  display: flex;
  align-items: center;
}
#header .global-nav .global-nav_inner ul.gnav_btn > li > a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 10px 15px;
  box-sizing: border-box;
  background-color: #00a0c7;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.25;
  text-decoration: none;
  text-align: center;
  transition: 0s;
}
#header .global-nav .global-nav_inner ul.gnav_btn > li > a:hover {
  background-color: rgba(0, 160, 199, 0.5);
}
#header .global-nav .global-nav_inner ul.gnav_btn > li > a:hover:before {
  transform: scale(0);
}
#header .global-nav .global-nav_inner ul.gnav_btn > li > a > i {
  margin-bottom: 4px;
  font-size: 17px;
}
#header .global-nav .global-nav_inner ul.gnav_btn > li.downloads > a {
  background-color: rgba(37, 30, 28, 0.8);
}
#header .global-nav .global-nav_inner ul.gnav_btn > li.downloads > a:hover {
  background-color: rgba(37, 30, 28, 0.5);
}
#header .global-nav .global-nav_inner ul.gnav_btn > li.partner > a {
  flex-direction: inherit;
  border: 1px solid #00a0c7;
  background-color: #ffffff;
  color: rgb(0, 118.9949748744, 148);
  font-weight: bold;
}
#header .global-nav .global-nav_inner ul.gnav_btn > li.partner > a:hover {
  opacity: 0.5;
}
#header.header-conpact {
  height: 50px;
}
#header.header-conpact .logo a img {
  max-width: 120px;
}
#header.header-conpact .global-nav .global-nav_inner {
  /* ul.gnav ===============*/
  /* ul.gnav_btn ===============*/
}
#header.header-conpact .global-nav .global-nav_inner ul.gnav {
  height: 50px;
}
#header.header-conpact .global-nav .global-nav_inner ul.gnav > li {
  /* sub-nav */
}
#header.header-conpact .global-nav .global-nav_inner ul.gnav > li.sub-nav {
  /* sub-nav-menu */
}
#header.header-conpact .global-nav .global-nav_inner ul.gnav > li.sub-nav > .sub-nav-menu {
  top: 50px;
}
#header.header-conpact .global-nav .global-nav_inner ul.gnav_btn {
  height: 50px;
}
#header.header-conpact .global-nav .global-nav_inner ul.gnav_btn > li > a {
  padding: 4px 15px;
}

#toggle {
  display: none;
}

.pc_none_header {
  display: none !important;
}

.sp_none_header {
  display: block !important;
}

/* PC表示：表示幅拡張用 ===============*/
@media screen and (max-width: 1279px) {
  #header {
    /* #global-nav ===============*/
  }
  #header .global-nav .global-nav_inner {
    /* ul.gnav ===============*/
  }
  #header .global-nav .global-nav_inner ul.gnav > li > a,
  #header .global-nav .global-nav_inner ul.gnav > li > span {
    padding: 0 8px;
    font-size: 13px;
  }
}
/* スマートフォン対応（トグルメニュー化） ===============*/
@media screen and (max-width: 1129px) {
  #header {
    display: block;
    height: 50px !important;
    padding: 0;
    /* #global-nav ===============*/
  }
  #header a {
    display: inline-block;
  }
  #header .logo {
    height: 50px;
    padding: 9px 0 0 15px;
    box-sizing: border-box;
  }
  #header .logo a img {
    max-width: 120px;
  }
  #header .global-nav {
    width: 100%;
    height: 0;
    overflow: auto;
    transition: 0.5s;
  }
  #header .global-nav.is-open {
    height: calc(100vh - 50px);
  }
  #header .global-nav .global-nav_inner {
    flex-direction: column;
    background: #ffffff;
    /* ul.gnav ===============*/
    /* ul.gnav_btn ===============*/
  }
  #header .global-nav .global-nav_inner ul.gnav {
    flex-direction: column;
    order: 1;
    height: auto !important;
  }
  #header .global-nav .global-nav_inner ul.gnav > li {
    /* sub-nav */
  }
  #header .global-nav .global-nav_inner ul.gnav > li > a,
  #header .global-nav .global-nav_inner ul.gnav > li > span {
    display: block;
    padding: 10px 15px !important;
    border-bottom: 1px solid #f4f3f3;
  }
  #header .global-nav .global-nav_inner ul.gnav > li > a:before,
  #header .global-nav .global-nav_inner ul.gnav > li > span:before {
    content: none;
  }
  #header .global-nav .global-nav_inner ul.gnav > li > a:hover,
  #header .global-nav .global-nav_inner ul.gnav > li > span:hover {
    background-color: unset;
  }
  #header .global-nav .global-nav_inner ul.gnav > li > a.current,
  #header .global-nav .global-nav_inner ul.gnav > li > span.current {
    background-color: rgba(0, 160, 199, 0.6);
    color: #ffffff;
  }
  #header .global-nav .global-nav_inner ul.gnav > li:first-child > a {
    border-top: 1px solid #f4f3f3;
  }
  #header .global-nav .global-nav_inner ul.gnav > li.sub-nav {
    /* sub-nav-menu */
  }
  #header .global-nav .global-nav_inner ul.gnav > li.sub-nav > a:after,
  #header .global-nav .global-nav_inner ul.gnav > li.sub-nav > span:after {
    content: unset;
  }
  #header .global-nav .global-nav_inner ul.gnav > li.sub-nav > .sub-nav-menu {
    position: relative;
    top: 0 !important;
    transform: scaleY(1);
    width: 100%;
    background-color: rgba(0, 160, 199, 0.05);
  }
  #header .global-nav .global-nav_inner ul.gnav > li.sub-nav > .sub-nav-menu > ul {
    display: block;
  }
  #header .global-nav .global-nav_inner ul.gnav > li.sub-nav > .sub-nav-menu > ul > li {
    border-bottom: 1px solid #ffffff;
  }
  #header .global-nav .global-nav_inner ul.gnav > li.sub-nav > .sub-nav-menu > ul > li > a {
    height: auto;
    padding: 10px 15px 10px calc(15px + 1em);
    color: #251e1c;
  }
  #header .global-nav .global-nav_inner ul.gnav_btn {
    flex-direction: column;
    order: 0;
    gap: 15px;
    height: auto !important;
    padding: 30px 0;
  }
  #header .global-nav .global-nav_inner ul.gnav_btn > li {
    width: calc(100% - 20px);
    margin: 0 auto;
  }
  #header .global-nav .global-nav_inner ul.gnav_btn > li > a {
    flex-direction: inherit;
    width: 100%;
    height: 40px !important;
    padding-left: 37px !important;
    box-sizing: border-box;
    text-align: left;
  }
  #header .global-nav .global-nav_inner ul.gnav_btn > li > a > i {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
  }
  #header .global-nav .global-nav_inner ul.gnav_btn > li.partner > a {
    padding-left: 12px !important;
    font-weight: normal;
  }
  /* toggle */
  #toggle {
    position: absolute;
    top: 12px;
    right: 15px;
    z-index: 9999;
    display: block;
    width: 25px;
    height: 18px;
    border-bottom: 2px solid #00a0c7;
    font-size: 1.4em;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  #toggle:before, #toggle:after {
    position: absolute;
    top: 10px;
    width: 25px;
    height: 2px;
    background: #00a0c7;
    content: "";
    transition: 0.1s;
  }
  #toggle:after {
    margin-top: -8px;
  }
  #toggle.is-open {
    border: none;
  }
  #toggle.is-open::before {
    top: 11px;
    transform: rotate(45deg);
  }
  #toggle.is-open::after {
    top: 11px;
    transform: rotate(-45deg);
    margin-top: 0;
  }
  .pc_none_header {
    display: block !important;
  }
  .sp_none_header {
    display: none !important;
  }
}
/*
===============================================================================
footer
===============================================================================
*/
/* #footer_cont =============================================*/
#footer_cont {
  padding-bottom: 1em;
  background: #f4f3f3;
  color: rgba(255, 255, 255, 0.9);
  /* .footer-menu ===============*/
  /* footer_row ===============*/
}
#footer_cont h2 {
  margin-bottom: 10px !important;
  font-size: 1.2em !important;
}
#footer_cont li {
  list-style-type: none;
  margin-left: 0;
}
#footer_cont .btn,
#footer_cont .btn-w {
  display: block;
  padding: 10px 5px;
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none;
  text-align: center;
}
#footer_cont .btn:hover,
#footer_cont .btn-w:hover {
  background: rgba(255, 255, 255, 0.75);
  color: #ffffff;
}
#footer_cont .btn-w {
  background: #ffffff;
  color: #251e1c;
}
#footer_cont .btn-w:hover {
  background: rgba(255, 255, 255, 0.6);
  color: rgba(37, 30, 28, 0.75);
}
#footer_cont .contents {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 1em;
  box-sizing: border-box;
}
#footer_cont section.footer-menu {
  background-color: #00a0c7;
  padding-block: 30px;
}
#footer_cont section.footer-menu .footer-menu-row {
  display: flex;
  gap: 30px 2%;
  width: 100%;
}
#footer_cont section.footer-menu .footer-menu-row > * {
  box-sizing: border-box;
}
#footer_cont section.footer-menu .footer-menu-row > * > h3 {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 18px;
  text-align: left;
}
#footer_cont section.footer-menu .footer-menu-row > * > .menu-inner {
  display: flex;
  gap: 10px 20px;
  margin-left: 5px;
  padding-left: 15px;
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  line-height: 1.5;
}
#footer_cont section.footer-menu .footer-menu-row > * > .menu-inner a {
  opacity: 1;
  padding: 5px 0;
  color: #ffffff;
  text-decoration: none;
}
#footer_cont section.footer-menu .footer-menu-row > * > .menu-inner a:hover {
  opacity: 0.8;
}
#footer_cont section.footer-menu .footer-menu-row > * > .menu-inner ul li:not(:first-child) {
  margin-top: 10px;
}
#footer_cont section.footer-menu .footer-menu-row > * > .menu-inner ul.list-inner li {
  position: relative;
  margin-top: 10px;
  padding-left: 1em;
}
#footer_cont section.footer-menu .footer-menu-row > * > .menu-inner ul.list-inner li::before {
  position: absolute;
  top: 50%;
  left: 2px;
  display: block;
  transform: translateY(-50%);
  content: "-";
}
#footer_cont .footer_row {
  display: flex;
  gap: 20px;
}
#footer_cont .footer_row > * {
  display: flex;
  flex-direction: column;
  width: 50%;
  text-align: left;
}
#footer_cont .footer_row > * > a.corporate {
  display: flex;
  gap: 20px;
  padding: 10px;
  text-decoration: none;
}
#footer_cont .footer_row > * > a.corporate:hover {
  background-color: rgba(37, 30, 28, 0.08);
  color: rgba(37, 30, 28, 0.75);
}
#footer_cont .footer_row > a.text-link {
  text-decoration: none;
}
#footer_cont .footer_row > a.text-link:hover {
  background-color: rgba(37, 30, 28, 0.08);
  color: rgba(37, 30, 28, 0.75);
}
#footer_cont .footer_row > a.text-link > p {
  margin: 10px;
}
#footer_cont .footer_row > a.text-link > span {
  padding: 10px 5px;
  background: rgba(37, 30, 28, 0.15);
  text-align: center;
}
#footer_cont .footer_sns {
  padding-inline: 1em;
}
#footer_cont .footer_sns > .inner {
  padding: 25px 15px 15px 15px;
  background: #ffffff;
  color: #251e1c;
  text-align: center;
}
#footer_cont .footer_sns > .inner p {
  margin-bottom: 10px !important;
  font-size: 13px;
}
#footer_cont .footer_sns > .inner > .sns-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
#footer_cont .footer_sns > .inner > .sns-box a img {
  height: 30px;
}
#footer_cont .footer_sns > .inner > .sns-box a.mailnews {
  display: inline-block;
  height: 30px;
  padding: 2px 20px;
  border-radius: 2px;
  background-color: #00a0c7;
  color: #ffffff;
  font-size: 12px;
  line-height: 2;
}
#footer_cont .footer_sns > .inner > .sns-box a.mailnews:hover {
  background-color: rgba(0, 160, 199, 0.8);
}

@media screen and (max-width: 767px) {
  #footer_cont {
    /* .footer-menu ===============*/
    /* footer_row ===============*/
  }
  #footer_cont section.footer-menu .footer-menu-row {
    flex-direction: column;
  }
  #footer_cont section.footer-menu .footer-menu-row > * {
    width: 100% !important;
  }
  #footer_cont .footer_row {
    flex-direction: column;
  }
  #footer_cont .footer_row > * {
    width: auto;
  }
}
@media only screen and (max-width: 640px) {
  #footer_cont {
    /* .footer-menu ===============*/
  }
  #footer_cont section.footer-menu .footer-menu-row > * > .menu-inner {
    flex-direction: column;
  }
}
/* #footer_footer ===============*/
#footer_footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 15px 25px;
  background-color: rgba(37, 30, 28, 0.8);
  color: #ffffff;
}
#footer_footer .footer-annotation {
  width: 100%;
  font-size: 13px;
  text-align: left;
}
#footer_footer .menu {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5em 1em;
  font-size: 13px;
}
#footer_footer .menu a {
  color: #ffffff;
  text-decoration: none;
}
#footer_footer .menu a:hover {
  color: rgba(255, 255, 255, 0.75);
}
#footer_footer .copyright {
  font-size: 11px;
}

@media screen and (max-width: 899px) {
  #footer_footer {
    display: block;
    padding: 20px;
  }
  #footer_footer .menu {
    gap: 1em 3em;
    margin: 1em 0 2em 0;
  }
}
/*
===============================================================================
#nav-local　ローカルナビ
===============================================================================
*/
#nav-local {
  position: sticky;
  top: 50px;
  z-index: 9999;
  padding: 0 15px;
  background-color: #00a0c7;
}
#nav-local ul.nav-local_inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}
#nav-local ul.nav-local_inner > li {
  position: relative;
  text-align: center;
}
#nav-local ul.nav-local_inner > li:not(:first-child)::before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 15px;
  background-color: #ffffff;
  content: "";
}
#nav-local ul.nav-local_inner > li > a {
  display: block;
  padding: 0.85em 1em calc(0.85em - 4px);
  border-bottom: 4px solid rgba(0, 0, 0, 0);
  box-sizing: border-box;
  background-color: #00a0c7;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
}
#nav-local ul.nav-local_inner > li > a.current {
  border-bottom-color: rgb(0, 77.9899497487, 97);
}
#nav-local ul.nav-local_inner > li > a i {
  margin-left: 5px;
  font-size: 10px;
  line-height: 1;
}
#nav-local ul.nav-local_inner > li:hover > a {
  background-color: rgb(0, 139.4974874372, 173.5);
}
#nav-local ul.nav-local_inner > li.local-sub:after {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 10px;
  height: 11px;
  background: url(/common/images/other/icon-chevrondown_w.svg) 0 2px no-repeat;
  content: "";
  pointer-events: none;
}
#nav-local ul.nav-local_inner > li.local-sub > a {
  padding-right: 2em;
}
#nav-local ul.nav-local_inner > li.local-sub > ul.local-sub-menu {
  position: absolute;
  top: 55px;
  left: 50%;
  z-index: 1;
  transform: scaleY(0) translateX(-50%);
  transform-origin: center top;
  width: -moz-fit-content;
  width: fit-content;
  background-color: rgb(0, 139.4974874372, 173.5);
  white-space: nowrap;
  transition: all 0.3s;
}
#nav-local ul.nav-local_inner > li.local-sub > ul.local-sub-menu > li {
  border-top: 1px solid #ffffff;
}
#nav-local ul.nav-local_inner > li.local-sub > ul.local-sub-menu > li > a {
  display: block;
  padding: 7px 10px;
  color: #ffffff;
  text-decoration: none;
}
#nav-local ul.nav-local_inner > li.local-sub > ul.local-sub-menu > li > a:hover {
  background-color: rgb(0, 139.4974874372, 173.5);
}
#nav-local ul.nav-local_inner > li.local-sub > ul.local-sub-menu > li > a.current {
  background-color: rgb(0, 139.4974874372, 173.5);
}
#nav-local ul.nav-local_inner > li.local-sub:hover > ul.local-sub-menu {
  transform: scaleY(1) translateX(-50%);
}
#nav-local.local-flow {
  background-color: #f7810d;
  max-height: 65px;
}
#nav-local.local-flow ul.nav-local_inner > li.local-sub > a {
  padding-right: 2em;
}
#nav-local.local-flow ul.nav-local_inner > li.local-sub > ul.local-sub-menu {
  background-color: #f7810d;
  top: 65px;
}
#nav-local.local-flow ul.nav-local_inner > li.local-sub > ul.local-sub-menu > li > a:hover {
  background-color: rgb(212.1856, 108.7232, 7.0144);
}
#nav-local.local-flow ul.nav-local_inner > li.local-sub > ul.local-sub-menu > li > a.current {
  background-color: rgb(212.1856, 108.7232, 7.0144);
}
#nav-local.local-flow ul.nav-local_inner > li > a {
  background-color: #f7810d;
  padding: 1.55em 0.8em calc(1.55em - 4px);
  font-size: 14px;
}
#nav-local.local-flow ul.nav-local_inner > li > a#nav-flow {
  display: flex;
  align-items: center;
}
#nav-local.local-flow ul.nav-local_inner > li > a.current {
  border-bottom-color: rgb(152.944, 78.368, 5.056);
  background-color: rgb(231.9328, 118.8416, 7.6672);
}
#nav-local.local-flow ul.nav-local_inner > li:hover > a {
  background-color: rgb(212.1856, 108.7232, 7.0144);
}
#nav-local.local-flow ul.nav-local_inner > li.nav-local-logo a {
  padding: 0.8em 6em 0.8em 1.55em;
  border: none;
}
#nav-local.local-flow ul.nav-local_inner > li.nav-local-logo a:hover {
  background-color: #f7810d;
}
#nav-local.local-flow ul.nav-local_inner > li.nav-local-logo img {
  width: 190px;
}
#nav-local.local-gate {
  background-color: #9abd1f;
}
#nav-local.local-gate ul.nav-local_inner > li > a {
  background-color: #9abd1f;
}
#nav-local.local-gate ul.nav-local_inner > li > a.current {
  border-bottom-color: rgb(82.6, 101.3727272727, 16.6272727273);
}
#nav-local.local-gate ul.nav-local_inner > li:hover > a {
  background-color: rgb(125.44, 153.9490909091, 25.2509090909);
}
#nav-local.local-gate ul.nav-local_inner > li.local-sub > ul.local-sub-menu {
  background-color: #9abd1f;
}
#nav-local.local-gate ul.nav-local_inner > li.local-sub > ul.local-sub-menu > li > a:hover {
  background-color: rgb(125.44, 153.9490909091, 25.2509090909);
}
#nav-local.local-gate ul.nav-local_inner > li.local-sub > ul.local-sub-menu > li > a.current {
  background-color: rgb(125.44, 153.9490909091, 25.2509090909);
}
#nav-local.local-apps {
  background-color: #005cac;
}
#nav-local.local-apps ul.nav-local_inner > li > a {
  background-color: #005cac;
}
#nav-local.local-apps ul.nav-local_inner > li > a.current {
  border-bottom-color: rgb(0, 56.5372093023, 105.7);
}
#nav-local.local-apps ul.nav-local_inner > li:hover > a {
  background-color: rgb(0, 70.176744186, 131.2);
}
#nav-local.local-apps ul.nav-local_inner > li.local-sub > ul.local-sub-menu {
  background-color: #005cac;
}
#nav-local.local-apps ul.nav-local_inner > li.local-sub > ul.local-sub-menu > li > a:hover {
  background-color: rgb(0, 70.176744186, 131.2);
}
#nav-local.local-apps ul.nav-local_inner > li.local-sub > ul.local-sub-menu > li > a.current {
  background-color: rgb(0, 70.176744186, 131.2);
}
#nav-local.local-apps-book {
  background-color: #259f94;
}
#nav-local.local-apps-book ul.nav-local_inner > li > a {
  background-color: #259f94;
}
#nav-local.local-apps-book ul.nav-local_inner > li > a.current {
  border-bottom-color: rgb(22.5586734694, 96.9413265306, 90.2346938776);
}
#nav-local.local-apps-book ul.nav-local_inner > li:hover > a {
  background-color: rgb(29.2979591837, 125.9020408163, 117.1918367347);
}
#nav-local.local-apps-book ul.nav-local_inner > li.local-sub > ul.local-sub-menu {
  background-color: #259f94;
}
#nav-local.local-apps-book ul.nav-local_inner > li.local-sub > ul.local-sub-menu > li > a:hover {
  background-color: rgb(29.2979591837, 125.9020408163, 117.1918367347);
}
#nav-local.local-apps-book ul.nav-local_inner > li.local-sub > ul.local-sub-menu > li > a.current {
  background-color: rgb(29.2979591837, 125.9020408163, 117.1918367347);
}
#nav-local.local-apps-scheduler {
  background-color: #d35857;
}
#nav-local.local-apps-scheduler ul.nav-local_inner > li > a {
  background-color: #d35857;
}
#nav-local.local-apps-scheduler ul.nav-local_inner > li > a.current {
  border-bottom-color: rgb(135.1132075472, 36.1910377358, 35.3867924528);
}
#nav-local.local-apps-scheduler ul.nav-local_inner > li:hover > a {
  background-color: rgb(202.5320754717, 55.8603773585, 54.6679245283);
}
#nav-local.local-apps-scheduler ul.nav-local_inner > li.local-sub > ul.local-sub-menu {
  background-color: #d35857;
}
#nav-local.local-apps-scheduler ul.nav-local_inner > li.local-sub > ul.local-sub-menu > li > a:hover {
  background-color: rgb(202.5320754717, 55.8603773585, 54.6679245283);
}
#nav-local.local-apps-scheduler ul.nav-local_inner > li.local-sub > ul.local-sub-menu > li > a.current {
  background-color: rgb(202.5320754717, 55.8603773585, 54.6679245283);
}
#nav-local.local-apps-gadgets {
  background-color: #c9c9c4;
}
#nav-local.local-apps-gadgets ul.nav-local_inner > li:not(:first-child)::before {
  background-color: #251e1c;
}
#nav-local.local-apps-gadgets ul.nav-local_inner > li > a {
  background-color: #c9c9c4;
  color: #251e1c;
}
#nav-local.local-apps-gadgets ul.nav-local_inner > li > a.current {
  border-bottom-color: rgb(127.3982300885, 127.3982300885, 116.6017699115);
}
#nav-local.local-apps-gadgets ul.nav-local_inner > li:hover > a {
  background-color: rgb(181.5026548673, 181.5026548673, 174.6973451327);
}
#nav-local.local-apps-gadgets ul.nav-local_inner > li.local-sub > ul.local-sub-menu {
  background-color: #c9c9c4;
}
#nav-local.local-apps-gadgets ul.nav-local_inner > li.local-sub > ul.local-sub-menu > li > a {
  color: #251e1c;
}
#nav-local.local-apps-gadgets ul.nav-local_inner > li.local-sub > ul.local-sub-menu > li > a:hover {
  background-color: rgb(181.5026548673, 181.5026548673, 174.6973451327);
}
#nav-local.local-apps-gadgets ul.nav-local_inner > li.local-sub > ul.local-sub-menu > li > a.current {
  background-color: rgb(181.5026548673, 181.5026548673, 174.6973451327);
}
#nav-local.local-bridge {
  background-color: #d2a029;
}
#nav-local.local-bridge ul.nav-local_inner > li > a {
  background-color: #d2a029;
}
#nav-local.local-bridge ul.nav-local_inner > li > a.current {
  border-bottom-color: rgb(145.9960159363, 111.235059761, 28.5039840637);
}
#nav-local.local-bridge ul.nav-local_inner > li:hover > a {
  background-color: rgb(175.8645418327, 133.9920318725, 34.3354581673);
}
#nav-local.local-bridge ul.nav-local_inner > li.local-sub > ul.local-sub-menu {
  background-color: #d2a029;
}
#nav-local.local-bridge ul.nav-local_inner > li.local-sub > ul.local-sub-menu > li > a:hover {
  background-color: rgb(175.8645418327, 133.9920318725, 34.3354581673);
}
#nav-local.local-bridge ul.nav-local_inner > li.local-sub > ul.local-sub-menu > li > a.current {
  background-color: rgb(175.8645418327, 133.9920318725, 34.3354581673);
}

#nav-toggle {
  display: none;
}

@media screen and (max-width: 1129px) {
  #nav-local {
    top: 50px;
    padding: 0 10px;
  }
  #nav-local ul.nav-local_inner > li > a {
    padding: 0.45em 0.7em calc(0.45em - 2px);
    border-bottom: 2px solid rgba(0, 0, 0, 0);
    font-size: 13px;
  }
  #nav-local ul.nav-local_inner > li > a.current {
    border-bottom: 2px solid rgb(0, 77.9899497487, 97);
  }
  #nav-local ul.nav-local_inner > li.local-sub > ul.local-sub-menu {
    top: 34px;
  }
  #nav-local ul.nav-local_inner > li.local-sub > ul.local-sub-menu > li > a {
    padding: 5px 10px;
  }
}
@media screen and (max-width: 940px) {
  #nav-local.local-flow .nav-local_inner .nav-local-logo a {
    padding-right: 3em !important;
  }
}
@media screen and (max-width: 899px) {
  #nav-local.accordion {
    padding: 0;
  }
  #nav-local.accordion ul.nav-local_inner {
    position: absolute;
    display: block;
    max-height: 0;
    overflow: auto;
    transition: 0.5s;
  }
  #nav-local.accordion ul.nav-local_inner.is-open {
    height: auto;
    max-height: calc(100vh - 90px);
  }
  #nav-local.accordion ul.nav-local_inner > li:not(:first-child)::before {
    content: none;
  }
  #nav-local.accordion ul.nav-local_inner > li > a {
    width: 100%;
    padding: 0.75em;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 0;
    font-size: 13px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  #nav-local.accordion ul.nav-local_inner > li > a.current {
    background-color: rgb(0, 139.4974874372, 173.5);
  }
  #nav-local.accordion ul.nav-local_inner > li.local-sub:after {
    content: none;
  }
  #nav-local.accordion ul.nav-local_inner > li.local-sub > ul.local-sub-menu {
    transform: scaleY(1);
    width: 100%;
    left: 0%;
    position: relative;
    top: 0%;
  }
  #nav-local.local-flow ul.nav-local_inner > li {
    background-color: #f7810d;
    text-align: left;
  }
  #nav-local.local-flow ul.nav-local_inner > li ul.local-sub-menu li {
    background-color: rgb(254.1808, 242.0976, 230.2192);
  }
  #nav-local.local-flow ul.nav-local_inner > li ul.local-sub-menu li > a {
    height: auto;
    padding: 5px 15px 5px calc(15px + 1em);
    color: #251e1c;
  }
  #nav-local.local-flow ul.nav-local_inner > li ul.local-sub-menu li > a.current {
    background-color: rgba(247, 129, 13, 0.6) !important;
  }
  #nav-local.local-flow ul.nav-local_inner > li ul.local-sub-menu li > a:hover {
    background-color: rgba(247, 129, 13, 0.6) !important;
  }
  #nav-local.local-flow ul.nav-local_inner > li > a {
    color: #ffffff;
    text-decoration: none;
  }
  #nav-local.local-flow ul.nav-local_inner > li > a.current {
    background-color: rgb(212.1856, 108.7232, 7.0144);
  }
  #nav-local.local-flow ul.nav-local_inner > li.nav-local-logo > a {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    padding: 0.75em;
  }
  #nav-local.local-gate ul.nav-local_inner > li > a.current {
    background-color: rgb(125.44, 153.9490909091, 25.2509090909);
  }
  #nav-local.local-apps ul.nav-local_inner > li > a.current {
    background-color: rgb(0, 70.176744186, 131.2);
  }
  #nav-local.local-apps-book ul.nav-local_inner > li > a.current {
    background-color: rgb(29.2979591837, 125.9020408163, 117.1918367347);
  }
  #nav-local.local-apps-scheduler ul.nav-local_inner > li > a.current {
    background-color: rgb(202.5320754717, 55.8603773585, 54.6679245283);
  }
  #nav-local.local-apps-gadgets ul.nav-local_inner > li > a.current {
    background-color: rgb(181.5026548673, 181.5026548673, 174.6973451327);
  }
  #nav-local.local-apps-gadgets #nav-toggle {
    color: #251e1c;
  }
  #nav-local.local-apps-gadgets #nav-toggle > span::after {
    border-right-color: #251e1c;
    border-bottom-color: #251e1c;
  }
  #nav-local.local-bridge ul.nav-local_inner > li > a.current {
    background-color: rgb(175.8645418327, 133.9920318725, 34.3354581673);
  }
  #nav-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-left: 15px;
    box-sizing: border-box;
    color: #ffffff;
  }
  #nav-toggle > span {
    position: relative;
    width: 40px;
    height: 40px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  #nav-toggle > span::after {
    position: absolute;
    top: calc(50% - 4px);
    right: 15px;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    border-right: 3px solid #ffffff;
    border-bottom: 3px solid #ffffff;
    content: "";
  }
}
/*
===============================================================================
customer
===============================================================================
*/
#customer {
  /* customer/index のみ===============*/
  /* casestudy-list */
  /* casestudy-list_block_pickup */
  /* customer-list */
  /* 絞り込み機能 */
  /* 導入事例個別ページ ===============*/
}
#customer .kv {
  background-image: url("/customer/img/kv_bk.jpg");
}
#customer h2 {
  margin-bottom: 20px;
  font-weight: 500;
  font-size: 24px;
}
#customer h2.ttl {
  margin-bottom: 30px;
  font-weight: bold;
  font-size: 24px;
  text-align: center;
}
#customer h3 {
  font-weight: bold;
}
#customer .container p {
  margin-bottom: 30px;
}
#customer .casestudy-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 60px 25px;
}
#customer .casestudy-list_block,
#customer .casestudy-list_block_pickup {
  display: grid;
  grid-template-rows: subgrid;
  gap: 15px;
  text-decoration: none;
  grid-row: span 3;
}
#customer .casestudy-list_block .main-img > img.photo,
#customer .casestudy-list_block_pickup .main-img > img.photo {
  width: 100%;
  border: 1px solid #cfe4eb;
  box-sizing: border-box;
  text-align: center;
}
#customer .casestudy-list_block .main-img > img.logo,
#customer .casestudy-list_block_pickup .main-img > img.logo {
  display: block;
  width: 100%;
  max-width: 180px;
  height: 60px;
  margin: 10px auto;
}
#customer .casestudy-list_block .txt h4,
#customer .casestudy-list_block_pickup .txt h4 {
  display: inline;
  color: #00a0c7;
}
#customer .casestudy-list_block .txt .more,
#customer .casestudy-list_block_pickup .txt .more {
  display: block;
  text-align: right;
}
#customer .casestudy-list_block .txt .more > a,
#customer .casestudy-list_block_pickup .txt .more > a {
  color: #4678de;
  font-size: 13px;
}
#customer .casestudy-list_block .txt .more > a > i,
#customer .casestudy-list_block_pickup .txt .more > a > i {
  font-size: 11px;
}
#customer .casestudy-list_block_pickup {
  grid-template-rows: max-content;
  max-width: 1920px;
  margin: 0 auto;
  padding: 60px 80px;
  box-sizing: border-box;
  text-align: left;
}
#customer .casestudy-list_block_pickup .pickup {
  color: #cfcfcf;
  font-weight: bold;
  font-size: 24px;
}
#customer .casestudy-list_block_pickup .pickup-ttl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  color: #707070;
  font-weight: bold;
  font-size: 30px;
  line-height: 1.25em;
  text-decoration: none;
}
#customer .casestudy-list_block_pickup .pickup-ttl > img {
  width: 30%;
  max-width: 200px;
}
#customer ul.category {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: auto;
}
#customer ul.category li {
  padding: 3px 8px 0 8px;
  border: 1px solid #7a7a79;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 11px;
  line-height: 20px;
}
#customer ul.category li.service, #customer ul.category li.service_flow, #customer ul.category li.service_gate, #customer ul.category li.service_apps, #customer ul.category li.service_apps-book, #customer ul.category li.service_apps-scheduler, #customer ul.category li.service_apps-gadgets {
  border: none;
  background-color: #7a7a79;
  color: #ffffff;
}
#customer ul.category li.service_flow {
  background-color: #f7810d;
}
#customer ul.category li.service_gate {
  background-color: #9abd1f;
}
#customer ul.category li.service_apps {
  background-color: #005cac;
}
#customer ul.category li.service_apps-book {
  background-color: #259f94;
}
#customer ul.category li.service_apps-scheduler {
  background-color: #d35857;
}
#customer ul.category li.service_apps-gadgets {
  background-color: #c9c9c4;
  color: #251e1c;
}
#customer .customer-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
#customer .customer-list > div {
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
}
#customer [value=All]:checked ~ .casestudy-list [data-category] {
  display: grid;
}
#customer [value=flow]:checked ~ .casestudy-list .casestudy-list_block:not([data-category~=flow]),
#customer [value=gate]:checked ~ .casestudy-list .casestudy-list_block:not([data-category~=gate]),
#customer [value=apps]:checked ~ .casestudy-list .casestudy-list_block:not([data-category~=apps]) {
  display: none;
}
#customer input[type=radio] {
  display: none;
}
#customer .categories-box {
  display: flex;
  justify-content: space-between;
}
#customer .categories-box label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(25% - 10px);
  padding: 10px 10px 7px 10px;
  border-bottom: 2px solid #00a0c7;
  border-radius: 10px 10px 0 0;
  box-sizing: border-box;
  color: #00a0c7;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
#customer [value=All]:checked ~ .categories-box [for=All],
#customer [value=flow]:checked ~ .categories-box [for=flow],
#customer [value=gate]:checked ~ .categories-box [for=gate],
#customer [value=apps]:checked ~ .categories-box [for=apps] {
  pointer-events: none;
}
#customer [value=All] ~ .categories-box [for=All]:hover, #customer [value=All]:checked ~ .categories-box [for=All] {
  background-color: #00a0c7;
  color: #ffffff;
}
#customer [value=flow] ~ .categories-box [for=flow] {
  border-color: #f7810d;
  color: #f7810d;
}
#customer [value=flow] ~ .categories-box [for=flow]:hover, #customer [value=flow]:checked ~ .categories-box [for=flow] {
  background-color: #f7810d;
  color: #ffffff;
}
#customer [value=gate] ~ .categories-box [for=gate] {
  border-color: #9abd1f;
  color: #9abd1f;
}
#customer [value=gate] ~ .categories-box [for=gate]:hover, #customer [value=gate]:checked ~ .categories-box [for=gate] {
  background-color: #9abd1f;
  color: #ffffff;
}
#customer [value=apps] ~ .categories-box [for=apps] {
  border-color: #005cac;
  color: #005cac;
}
#customer [value=apps] ~ .categories-box [for=apps]:hover, #customer [value=apps]:checked ~ .categories-box [for=apps] {
  background-color: #005cac;
  color: #ffffff;
}
#customer section.ttl {
  width: 100%;
  box-sizing: border-box;
  background: #e9ecee;
  text-align: center;
}
#customer section.ttl .block {
  padding: 60px 0;
  vertical-align: middle;
}
#customer section.ttl .block h1 {
  font-size: 30px;
}
#customer section.ttl .block p {
  margin: 0;
}
#customer section.ttl .block .top {
  margin-bottom: 20px;
}
#customer .inner-kv {
  padding: 30px 0;
}
#customer .inner-kv .logo {
  margin-bottom: 20px;
  text-align: center;
}
#customer .inner-kv .logo > a {
  display: inline-block;
}
#customer .customer-flex {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr 260px;
  gap: 40px 60px;
  /* col-l */
  /* col-r */
}
#customer .customer-flex .col-l {
  width: 660px;
  /* .result */
}
#customer .customer-flex .col-l section {
  margin-bottom: 60px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgb(0, 118.9949748744, 148);
}
#customer .customer-flex .col-l .interviewee1 {
  color: #f39a00;
}
#customer .customer-flex .col-l .interviewee2 {
  color: #20b11a;
}
#customer .customer-flex .col-l .interviewee3 {
  color: #a96fff;
}
#customer .customer-flex .col-l .interviewee4 {
  color: #4456fc;
}
#customer .customer-flex .col-l .campaign {
  margin-top: 60px;
}
#customer .customer-flex .col-l .campaign h3 {
  margin-bottom: 20px;
  text-align: center;
}
#customer .customer-flex .col-l .campaign img {
  margin-bottom: 20px;
}
#customer .customer-flex .col-l ul.list {
  margin-bottom: 30px;
}
#customer .customer-flex .col-l ul.list li {
  list-style-type: disc;
  margin-left: 20px;
}
#customer .customer-flex .col-l .result {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
}
#customer .customer-flex .col-l .result h3 {
  padding: 10px;
  background: #00a0c7;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}
#customer .customer-flex .col-l .result .before,
#customer .customer-flex .col-l .result .after {
  position: relative;
  width: calc(50% - 20px);
  border: #cfe4eb;
  background: #f2f7f8;
}
#customer .customer-flex .col-l .result .before ul,
#customer .customer-flex .col-l .result .after ul {
  padding: 20px;
}
#customer .customer-flex .col-l .result .before ul li,
#customer .customer-flex .col-l .result .after ul li {
  list-style: disc;
  margin-left: 20px;
}
#customer .customer-flex .col-l .result .after::before {
  position: absolute;
  top: 50%;
  left: -30px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-width: 23px 0 23px 20px;
  border-style: solid;
  border-color: transparent transparent transparent #00a0c7;
  content: "";
}
#customer .customer-flex .col-l .result__updown h3.al-l {
  text-align: left;
}
#customer .customer-flex .col-l .result__updown .before,
#customer .customer-flex .col-l .result__updown .after {
  width: 100%;
}
#customer .customer-flex .col-l .result__updown .after {
  margin-top: 40px;
}
#customer .customer-flex .col-l .result__updown .after::before {
  top: -40px;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  border-width: 18px 0 18px 15px;
}
#customer .customer-flex .col-l .product {
  margin-bottom: 60px;
  padding: 30px;
  background-color: #f2f7f8;
}
#customer .customer-flex .col-l .box-column {
  margin: 30px 0;
  padding: 10px 15px;
  border: solid 3px #00a0c7;
  border-radius: 10px;
  background: #ffffff;
  color: #00a0c7;
  font-weight: bold;
  font-size: 14px;
}
#customer .customer-flex .col-r {
  width: 260px;
}
#customer .customer-flex .col-r dl dt {
  font-weight: bold;
}
#customer .customer-flex .col-r dl dt.pdf-link {
  display: flex;
}
#customer .customer-flex .col-r dl dt.pdf-link > a {
  display: flex;
  align-items: center;
  padding: 6px 15px 5px 15px;
  border: 1px solid #c80a0a;
  color: #c80a0a;
  text-decoration: none;
}
#customer .customer-flex .col-r dl dt.pdf-link > a > img {
  width: 23px;
  margin-right: 10px;
}
#customer .customer-flex .col-r dl dt.pdf-link > a:hover {
  opacity: 0.75;
}
#customer .customer-flex .col-r dl dd {
  margin-bottom: 15px;
}
#customer .customer-flex .col-r .sns {
  margin-top: 30px;
}
#customer .customer-flex .col-r .sns img {
  width: 30px;
}
#customer .customer-flex .col-r .sns ul {
  display: flex;
}
#customer .customer-flex .col-r .sns ul li:not(:last-child) {
  margin-right: 15px;
}

@media screen and (max-width: 960px) {
  #customer {
    /* customer/index のみ===============*/
    /* casestudy-list */
    /* casestudy-list_block_pickup */
    /* 導入事例個別ページ ===============*/
  }
  #customer .casestudy-list_block_pickup {
    padding: 30px 40px;
  }
  #customer .casestudy-list_block_pickup .pickup-ttl {
    flex-direction: column;
  }
  #customer .customer-flex {
    grid-template-columns: 1fr;
    /* col-l */
    /* col-r */
  }
  #customer .customer-flex .col-l {
    width: 100%;
  }
  #customer .customer-flex .col-r {
    width: 100%;
    padding: 60px 0;
    border-top: 1px solid rgb(0, 118.9949748744, 148);
  }
  #customer .customer-flex .col-r dl dd {
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 640px) {
  #customer {
    /* customer/index のみ===============*/
    /* casestudy-list_block_pickup */
    /* 絞り込み機能 */
    /* 導入事例個別ページ ===============*/
  }
  #customer .casestudy-list_block_pickup {
    padding: 2em 1em;
  }
  #customer .categories-box label {
    width: calc(25% - 5px);
    font-size: 13px;
  }
  #customer section.ttl h1 {
    font-size: 24px;
    line-height: 1.5em;
  }
  #customer .inner-kv {
    position: relative;
  }
  #customer .inner-kv .logo img {
    max-width: 50%;
  }
  #customer h2 {
    font-size: 18px;
  }
  #customer .customer-flex {
    /* col-l */
    /* col-r */
  }
  #customer .customer-flex .col-l section {
    margin-bottom: 40px;
    padding: 0 0 20px 0;
  }
  #customer .customer-flex .col-l .result .before,
  #customer .customer-flex .col-l .result .after {
    width: 100%;
  }
  #customer .customer-flex .col-l .result .after {
    margin-top: 40px;
  }
  #customer .customer-flex .col-l .result .after::before {
    top: -40px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
    border-width: 18px 0 18px 15px;
  }
  #customer .customer-flex .col-r .sns ul {
    justify-content: center;
  }
  #customer .customer-flex .col-r .sns ul li:not(:last-child) {
    margin-right: 30px;
  }
}
/*
===============================================================================
home
===============================================================================
*/
#home {
  /* .main-slider ===============*/
}
#home h1 {
  font-weight: bold;
  text-align: center;
  /** あとで消す **/
  padding: 5px 10px;
  background-color: #00a0c7;
  color: #ffffff;
  font-size: 24px;
}
#home h2 {
  font-weight: bold;
  font-size: 18px;
  text-align: center;
}
#home h3 {
  font-weight: bold;
  font-size: 16px;
}
#home h3.center {
  min-height: 56px;
}
#home p {
  margin-bottom: 30px;
}
#home p.apps-exp {
  min-height: 79px;
}
#home a.image-apps {
  align-items: center;
  height: 80px;
  display: flex;
  padding: 20px 15px;
  border: solid 1px rgb(189, 187, 186);
  /**
  img {
    height: 58px;
    padding: 20px 10px;
  }
    **/
}
#home .top-flex-box {
  gap: 10px;
  padding: 20px 30px;
}
#home .top-flex-box a {
  width: calc((100% - 50px) / 6);
  height: 60px;
  font-size: 20px;
  font-weight: bold;
  padding: 13px 3px 7px 3px;
}
@media screen and (max-width: 860px) {
  #home .top-flex-box a {
    font-size: 16px;
  }
}
#home .main-slider .slide-inner img {
  width: 100vw;
}
#home .main-slider .slide-inner.double-link {
  position: relative;
}
#home .main-slider .slide-inner.double-link > a {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 50%;
  height: 100%;
}
#home .main-slider .slide-inner.double-link > a + a {
  left: 50%;
}
#home .main-slider .slide-inner.double-link > a:hover {
  opacity: 0.2;
  background-color: #ffffff;
}
#home p.header-sub {
  text-align: center;
  margin-bottom: 0px;
}
#home .home_btn {
  text-align: center;
}
#home .home_btn > a {
  width: 80%;
  border-radius: 100vh;
  border-bottom: 5px solid #175868;
}
#home .home_btn > .btn:hover {
  margin-top: 3px;
  border-bottom: 2px solid #175868;
}
@media screen and (max-width: 767px) {
  #home a.image-apps {
    height: auto;
  }
  #home h1 {
    font-size: 20px;
  }
  #home h2 {
    text-align: center;
  }
  #home h3 {
    text-align: left;
  }
  #home .top-flex-box {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 15px;
  }
  #home .top-flex-box a {
    width: calc((100% - 10px) / 2);
  }
}
@media screen and (max-width: 640px) {
  #home {
    /* .main-slider ===============*/
  }
  #home .main-slider .slide-inner img {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    -o-object-fit: cover;
       object-fit: cover;
  }
  #home .main-slider .slide-inner.double-link > a {
    width: 100vw;
    height: 50%;
  }
  #home .main-slider .slide-inner.double-link > a + a {
    top: 50%;
    left: 0;
  }
}

/** お知らせ **/
.info-area {
  max-width: 980px;
  padding: 10px 50px;
  margin: auto;
  font-size: 14px;
}
.info-area p {
  margin-bottom: 0px !important;
  text-align: left !important;
}
.info-area .info-date {
  min-width: 112px;
}
.info-area .info-card {
  display: flex;
  align-items: flex-start;
  padding: 15px 0px;
}
.info-area .info-card .info-data {
  display: flex;
}
.info-area a {
  text-decoration: none;
}
.info-area a:hover {
  opacity: 0.7;
  transition: 0.3s all;
}
.info-area .info-category {
  padding: 2px 10px;
  border-radius: 3px;
  word-break: keep-all;
  margin: 0px 20px;
}
.info-area .info-category.customer {
  background-color: #c7ff99;
}
.info-area .info-category.information {
  background-color: #fff599;
}
.info-area .info-category.release {
  background-color: #ffb2b2;
}
.info-area .info-category.event {
  background-color: #99dcff;
}
.info-area .info-category.news {
  background-color: #fff599;
}

@media screen and (max-width: 640px) {
  .info-area {
    padding: 10px;
  }
  .info-area .info-card {
    flex-direction: column;
  }
  .info-area .info-card .info-category {
    margin: 0px 0px 10px 0px;
  }
}
/*
===============================================================================
service
※今後、逐次分割予定
===============================================================================
*/
/* kv
------------------------------------------------------------------------------  */
#service {
  /* service-top */
  /* flow　※情シスクラウド以外は_flow.scssで管理 */
  /* gate ※_gate.scssで管理*/
  /* Apps */
  /* addressbook */
  /* scheduler */
  /* gadgets */
  /* bridge */
  /* faq */
  /* license */
}
#service .service-top .kv {
  background-image: url(/common/images/service/josys-cloud/kv_bk.webp);
}
#service .service-top .kv h1.service-top-ttl {
  margin: 0;
  color: #ffffff;
  font-weight: normal;
  font-size: 40px;
}
#service .flow .kv {
  background-image: url(/common/images/service/josys-cloud/kv_flow.jpg);
}
#service .apps .kv-min {
  background-image: url(/common/images/service/apps/kv_bk.webp);
}
#service .addressbook .kv-min {
  background-image: url(/common/images/service/apps/kv_bk.webp);
}
#service .addressbook .kv-min .service-ttl img {
  max-height: 89px;
}
#service .scheduler .kv-min {
  background-image: url(/common/images/service/apps/kv_bk.webp);
}
#service .gadgets .kv-min {
  background-image: url(/common/images/service/apps/kv_bk.webp);
}
#service .bridge .kv-min {
  background-image: url(/common/images/service/bridge/kv_bk.jpg);
}
#service .bridge .kv-min .service-ttl img {
  max-height: 95px;
}
#service .faq_top .kv {
  background-image: url(/faq/img/kv_faq.webp);
}
#service .license_top .kv {
  background-image: url(/license/img/kv_license.webp);
}

/* 見出し
------------------------------------------------------------------------------  */
#service h1 {
  margin-bottom: 30px;
  font-weight: bold;
  font-size: 38px;
  line-height: 1.5;
  text-align: center;
}
#service h2 {
  margin-bottom: 30px;
  font-weight: bold;
  font-size: 24px;
  text-align: center;
}
#service h2.ttl {
  margin-bottom: 60px;
  font-weight: normal;
  font-size: 30px;
  line-height: 1;
}
#service h2 > span.sub-ttl {
  display: block;
  margin-top: 7px;
  font-size: 14px;
  line-height: 2;
}
#service h2 .note {
  font-size: 12px;
}
#service h3 {
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.5;
}
#service h3.centerback-key, #service h3.centerback-key02, #service h3.centerback-flow, #service h3.centerback-gate, #service h3.centerback-apps, #service h3.centerback-apps-addressbook, #service h3.centerback-apps-scheduler, #service h3.centerback-apps-gadgets {
  margin-bottom: 0 !important;
  padding: 10px !important;
  border: none !important;
  background-color: #00a0c7;
  color: #ffffff;
  font-size: 22px !important;
  text-align: center;
}
#service h3.centerback-key::before, #service h3.centerback-key02::before, #service h3.centerback-flow::before, #service h3.centerback-gate::before, #service h3.centerback-apps::before, #service h3.centerback-apps-addressbook::before, #service h3.centerback-apps-scheduler::before, #service h3.centerback-apps-gadgets::before {
  content: none !important;
}
#service h3.centerback-key02 {
  background-color: rgb(0, 118.9949748744, 148);
}
#service h3.centerback-flow {
  background-color: #f7810d;
}
#service h3.centerback-gate {
  background-color: #9abd1f;
}
#service h3.centerback-apps {
  background-color: #005cac;
}
#service h3.centerback-apps-addressbook {
  background-color: #259f94;
}
#service h3.centerback-apps-scheduler {
  background-color: #d35857;
}
#service h3.centerback-apps-gadgets {
  background-color: #c9c9c4;
}
#service h3.heading {
  padding: 10px 15px;
  background-color: #f2f7f8;
  line-height: 30px;
}
#service h3.center-big {
  margin: 60px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 22px !important;
  text-align: center;
}
#service h3.center-big::before {
  content: none !important;
}
#service p {
  margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
  #service h1 {
    font-size: 28px;
  }
  #service h2 {
    font-size: 20px;
  }
}
@media screen and (max-width: 640px) {
  #service h3.centerback-key, #service h3.centerback-flow, #service h3.centerback-gate, #service h3.centerback-apps, #service h3.centerback-apps-addressbook, #service h3.centerback-apps-scheduler, #service h3.centerback-apps-gadgets {
    font-size: 18px;
  }
  #service h3.heading {
    padding: 10px;
    font-size: 16px;
    line-height: 24px;
  }
  #service h3.center-big {
    margin: 30px 0;
    font-size: 18px;
  }
}
/* colum */
ul.colum-bnr {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px 20px;
  width: 100%;
  margin-inline: auto;
}
ul.colum-bnr li {
  width: calc((100% - 20px) / 2);
  text-align: center;
}
ul.colum-bnr li a {
  display: block;
}

@media screen and (max-width: 767px) {
  ul.colum-bnr {
    flex-direction: column;
  }
  ul.colum-bnr li {
    width: 100%;
  }
}
/* リード
------------------------------------------------------------------------------  */
#service .lead .text-l {
  text-align: left;
}

/* feature 特徴
------------------------------------------------------------------------------ */
#service .new {
  padding: 2px 10px;
  background: #cc0000;
  color: #ffffff;
  font-size: 12px;
}

#service {
  /* .collab-list ===============*/
}
#service .feature-list > * {
  background-color: #ffffff;
  /* .problem ===============*/
}
#service .feature-list > * > .blank {
  background-color: unset;
}
#service .feature-list > * + p {
  margin-top: 30px;
}
#service .feature-list > * > a {
  display: block;
  width: 100%;
}
#service .feature-list > * img {
  display: block;
  width: 100%;
  margin: auto;
}
#service .feature-list > * img.lineup-list {
  width: auto;
  max-height: 150px;
  padding-top: 20px;
}
#service .feature-list > * .image-center {
  display: flex;
  align-items: center;
  height: 170px;
}
#service .feature-list > * .txt {
  padding: 20px;
}
#service .feature-list > * .problem,
#service .feature-list > * .problem_w {
  padding-bottom: 50px;
  background: url(/common/images/service/problem_arrow.svg) no-repeat bottom 10px center;
  background-color: #f4f3f3;
}
#service .feature-list > * .problem + img,
#service .feature-list > * .problem_w + img {
  width: 100%;
}
#service .feature-list > * .problem p,
#service .feature-list > * .problem_w p {
  margin: 0;
  padding: 15px;
  border: 3px solid #15395d;
  font-weight: bold;
  text-align: center;
}
#service .feature-list > * .problem_w {
  background-color: #ffffff;
}
#service .collab-list {
  display: flex;
  justify-content: space-between;
}
#service .collab-list a {
  display: block;
  width: calc(50% - 15px);
  margin-bottom: 30px;
  padding: 30px;
  border: 1px solid #bdbbba;
  border-radius: 5px;
  box-sizing: border-box;
  text-align: center;
}

@media screen and (max-width: 767px) {
  #service .collab-list {
    display: block;
  }
  #service .collab-list a {
    width: 100%;
  }
}
/* function 機能
------------------------------------------------------------------------------ */
#service .function-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#service .function-sub li {
  padding: 5px 10px;
  border-radius: 3px;
  background-color: #f4f3f3;
  font-size: 13px;
}
#service .function-sub li:last-child {
  margin-right: 0;
}

/* price
------------------------------------------------------------------------------  */
#service {
  /* price-box ===============*/
  /* table.price_table ===============*/
}
#service .price-box {
  margin: 0 auto 30px auto;
  padding: 30px;
  border-top: 3px solid #00a0c7;
  background: #ffffff;
  text-align: center;
}
#service .price-box .price {
  font-size: 24px;
}
#service .price-box h3 {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 3px;
  background: #00a0c7;
  color: #ffffff;
  font-size: 13px;
}
#service .price-box p {
  margin: 0;
}
#service .price-box.flow {
  border-top-color: #f7810d;
}
#service .price-box.apps-book {
  border-top-color: #259f94;
}
#service .price-box.apps-scheduler {
  border-top-color: #d35857;
}
#service .price-box.apps-gadgets {
  border-top-color: #c9c9c4;
}
#service .section-odd .price-box {
  border-bottom: 1px solid #251e1c;
}
#service table.price_table {
  background-color: #ffffff;
  border-collapse: separate;
  line-height: 1.2;
  /* /summary ==============*/
  /* .flow ===============*/
  /* .gate ===============*/
  /* .apps ===============*/
}
#service table.price_table thead th, #service table.price_table thead td {
  border-top: 3px solid #00a0c7;
}
#service table.price_table thead .borderb_none {
  border-bottom: 0;
}
#service table.price_table thead .price_row {
  padding: 15px 10px;
}
#service table.price_table thead .price_row > a,
#service table.price_table thead .price_row > span {
  display: flex;
  justify-content: center;
  height: 100%;
  padding: 5px;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: #00a0c7;
  color: #ffffff;
  text-align: center;
}
#service table.price_table thead .price_row .txt {
  background-color: #ffffff;
  line-height: 1.25;
}
#service table.price_table tr {
  border-bottom: 1px solid #bdbbba;
}
#service table.price_table tr th,
#service table.price_table tr td {
  padding: 10px;
  border-right: 1px solid #bdbbba;
  border-bottom: 1px solid #bdbbba;
  box-sizing: border-box;
}
#service table.price_table tr th:last-child,
#service table.price_table tr td:last-child {
  border-right: none;
}
#service table.price_table tr th .price-note,
#service table.price_table tr td .price-note {
  font-size: 13px;
  line-height: 1.5;
}
#service table.price_table tr th.w3split,
#service table.price_table tr td.w3split {
  width: 33.3333333333%;
}
#service table.price_table tr th.w4split,
#service table.price_table tr td.w4split {
  width: 25%;
}
#service table.price_table tr th.w6split,
#service table.price_table tr td.w6split {
  width: 16.6666666667%;
}
#service table.price_table tr th {
  background-color: rgba(0, 160, 199, 0.05);
  font-weight: normal;
}
#service table.price_table tr td {
  text-align: center;
}
#service table.price_table tr td:last-child {
  border-left: 1px solid #bdbbba !important;
}
#service table.price_table.summary {
  margin-bottom: 30px;
  border: 1px solid #bdbbba;
}
#service table.price_table.summary tr th {
  background-color: #ffffff;
  text-align: center;
}
#service table.price_table.summary tr td {
  border-right: none;
}
#service table.price_table.summary tr td .price_desc {
  font-size: 12px;
  color: #999999;
}
#service table.price_table.summary tr .flow_label {
  background-color: #f7810d;
  color: #ffffff;
}
#service table.price_table.summary tr .gate_label {
  background-color: #9abd1f;
  color: #ffffff;
}
#service table.price_table.summary tr .apps_label {
  background-color: #005cac;
  color: #ffffff;
}
#service table.price_table.flow thead {
  border-top-color: #f7810d;
}
#service table.price_table.flow thead th, #service table.price_table.flow thead td {
  border-top-color: #f7810d;
}
#service table.price_table.flow thead tr > td.business {
  background-color: #f7810d;
  color: #ffffff;
  font-weight: bold;
  font-size: 1.2em;
}
#service table.price_table.flow thead tr > td.business .recommend {
  padding: 3px;
  background-color: #ffffff;
  color: #f7810d;
  font-size: 13px;
}
#service table.price_table.flow thead tr > td.basic,
#service table.price_table.flow thead tr > td.premium {
  background-color: #f4f3f3;
  vertical-align: bottom;
}
#service table.price_table.flow thead tr > td.basic {
  color: #999999;
}
#service table.price_table.flow tr th {
  background-color: rgba(247, 129, 13, 0.05);
}
#service table.price_table.gate thead th, #service table.price_table.gate thead td {
  border-top-color: #9abd1f;
}
#service table.price_table.gate thead .price_row > span, #service table.price_table.gate thead .price_row a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.5em;
  padding: 5px;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: #9abd1f;
  color: #fff;
  text-align: center;
  font-size: 13px;
  line-height: 1.2;
}
#service table.price_table.gate thead .price_row_medical > span, #service table.price_table.gate thead .price_row_medical a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.5em;
  padding: 5px;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: #1290CC;
  color: #fff;
  text-align: center;
  font-size: 13px;
  line-height: 1.2;
}
#service table.price_table.gate tr th {
  background-color: rgba(154, 189, 31, 0.05);
}
#service table.price_table.apps thead th, #service table.price_table.apps thead td {
  border-top-color: #005cac;
}
#service table.price_table.apps thead .price_row > a,
#service table.price_table.apps thead .price_row > span {
  background-color: #005cac;
}
#service table.price_table.apps tr th {
  background-color: rgba(0, 92, 172, 0.05);
}
#service .license_btn {
  text-align: center;
  height: 63px;
}
#service .license_btn a {
  padding: 12px 0px;
  font-size: 20px;
  font-weight: bold;
  width: 40%;
  border-radius: 10px;
}
#service table.price_table.flow .business-cell {
  border-left: solid 8px #f7810d;
  border-right: solid 8px #f7810d;
  font-size: 19px;
  font-weight: bold;
}
#service table.price_table.flow .business-price {
  font-size: 25px;
}
#service table.price_table.flow .business-cell-last {
  border-bottom: solid 8px #f7810d;
}
#service table.price_table.flow .basic-cell {
  color: #999999;
}

@media screen and (max-width: 1129px) {
  #service table.price_table thead {
    top: 80px;
  }
}
@media screen and (max-width: 767px) {
  .price_table.gate .sp_none {
    display: none !important;
  }
  .price_table.gate .pc_none {
    display: table-row !important;
  }
}
@media screen and (min-width: 768px) {
  .price_table.gate .sp_none {
    display: table-row !important;
  }
  .price_table.gate .pc_none {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  #service .price-box {
    padding: 15px 10px;
  }
  #service table.price_table {
    font-size: 13px;
  }
  #service table.price_table thead {
    top: 50px;
  }
  #service table.price_table thead .price_row, #service table.price_table thead .price_row_medical {
    padding: 10px 5px;
  }
  #service table.price_table.sp_w2split tr, #service table.price_table.sp_w3split tr, #service table.price_table.sp_w4split tr {
    display: flex;
    flex-wrap: wrap;
  }
  #service table.price_table.sp_w2split tr th.sp_none_price,
  #service table.price_table.sp_w2split tr td.sp_none_price, #service table.price_table.sp_w3split tr th.sp_none_price,
  #service table.price_table.sp_w3split tr td.sp_none_price, #service table.price_table.sp_w4split tr th.sp_none_price,
  #service table.price_table.sp_w4split tr td.sp_none_price {
    display: none;
  }
  #service table.price_table.sp_w2split tr th .price-note,
  #service table.price_table.sp_w2split tr td .price-note, #service table.price_table.sp_w3split tr th .price-note,
  #service table.price_table.sp_w3split tr td .price-note, #service table.price_table.sp_w4split tr th .price-note,
  #service table.price_table.sp_w4split tr td .price-note {
    font-size: 11px;
  }
  #service table.price_table.sp_w2split tr th, #service table.price_table.sp_w3split tr th, #service table.price_table.sp_w4split tr th {
    display: block;
    width: 100%;
    padding: 5px 10px;
    border-right: none;
    border-bottom: 1px solid #bdbbba;
    text-align: center;
  }
  #service table.price_table.sp_w2split tr th.sp_gray, #service table.price_table.sp_w3split tr th.sp_gray, #service table.price_table.sp_w4split tr th.sp_gray {
    background-color: #f4f3f3 !important;
    text-align: left;
  }
  #service table.price_table.sp_w2split tr td, #service table.price_table.sp_w3split tr td, #service table.price_table.sp_w4split tr td {
    display: inline-block;
    width: 50%;
  }
  #service table.price_table.sp_w2split tr td.splitall, #service table.price_table.sp_w3split tr td.splitall, #service table.price_table.sp_w4split tr td.splitall {
    width: 100%;
  }
  #service table.price_table.sp_w3split tr td {
    width: 33.3333333333%;
  }
  #service table.price_table.sp_w4split tr td {
    width: 25%;
    border-bottom: none !important;
    vertical-align: top;
  }
  #service table.price_table.sp_w4split tr td.medical-edition-cell {
    height: 4.7em;
    vertical-align: top;
  }
  #service table.price_table.flow .business-cell {
    font-size: 16px;
  }
  #service table.price_table.flow .business-price {
    font-size: 16px;
  }
  #service table.price_table.flow tr th,
  #service table.price_table.flow tr td {
    padding: 5px;
  }
  .license_btn a {
    width: 100% !important;
  }
  table.summary {
    font-size: 12px !important;
  }
  table.summary span {
    font-size: 12px !important;
  }
}
/* サービス：TOP
------------------------------------------------------------------------------ */
#service a.image-flame, #service a.image-lineup {
  display: flex;
  align-items: center;
  height: 80px;
  padding: 30px 20px;
  border: 1px solid #bdbbba;
}
#service a.image-lineup {
  height: 40px;
}
@media screen and (max-width: 767px) {
  #service a.image-flame, #service a.image-lineup {
    height: auto;
  }
}

/* casestudy
------------------------------------------------------------------------------ */
#service .casestudy-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 50px 30px;
}
#service .casestudy-list a {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: calc((100% - 30px) / 2);
  box-sizing: border-box;
  text-decoration: none;
}
#service .casestudy-list a .image {
  width: 160px;
}
#service .casestudy-list a .txt {
  width: calc(100% - 180px);
}
#service .casestudy-list a .txt > h4 {
  display: block;
  color: #00a0c7;
  font-size: 18px;
}
#service .casestudy-list a .txt > img {
  margin-bottom: 10px;
}
#service .casestudy-list a .txt > span {
  text-decoration: underline;
}
#service .casestudy-list a:hover .txt > span {
  text-decoration: none;
}
#service .casestudy-list a:not(:has(.image)) .txt {
  width: 100%;
}

@media screen and (max-width: 767px) {
  #service .casestudy-list {
    flex-direction: column;
  }
  #service .casestudy-list a {
    flex-direction: column;
    width: 100%;
    text-align: center;
  }
  #service .casestudy-list a .image {
    margin: auto;
  }
  #service .casestudy-list a .txt {
    width: 100%;
  }
}
/* bridge
------------------------------------------------------------------------------  */
.bridge-operating-table {
  width: 80%;
  margin: auto;
  border: solid #fff 1px;
}
.bridge-operating-table tr {
  border-bottom: solid #fff 1px;
}
.bridge-operating-table tr:last-child {
  border-bottom: none;
}
.bridge-operating-table th {
  background-color: #d2a029;
  color: #ffffff;
  padding: 3px;
}
.bridge-operating-table td {
  background-color: #f2f7f8;
  padding: 3px;
  padding-left: 10px;
}

ul.bridge-price-note {
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
}
ul.bridge-price-note li {
  list-style-type: disc;
}

/* other
------------------------------------------------------------------------------  */
#service {
  /** .boxone
  ===================================*/
  /** .boxtwo
  ===================================*/
}
#service .boxone,
#service .boxone_min,
#service .boxone_only {
  width: 100%;
}
#service .boxone > .boxone_col,
#service .boxone_min > .boxone_col,
#service .boxone_only > .boxone_col {
  position: relative;
  padding: 10px 15px;
  border: 1px solid #00a0c7;
  box-sizing: border-box;
  text-align: center;
}
#service .boxone > .boxone_col:not(:first-child),
#service .boxone_min > .boxone_col:not(:first-child),
#service .boxone_only > .boxone_col:not(:first-child) {
  margin-top: 40px;
}
#service .boxone > .boxone_col:not(:first-child)::before,
#service .boxone_min > .boxone_col:not(:first-child)::before,
#service .boxone_only > .boxone_col:not(:first-child)::before {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  width: 0;
  height: 0;
  border-width: 18px 0 18px 15px;
  border-style: solid;
  border-color: transparent transparent transparent #00a0c7;
  content: "";
}
#service .boxone_min > .boxone_col {
  padding: 3px 5px;
}
#service .boxone_min > .boxone_col:not(:first-child) {
  margin-top: 20px;
}
#service .boxone_min > .boxone_col:not(:first-child)::before {
  top: -20px;
  border-width: 10px 0 10px 10px;
}
#service .boxone_only > .boxone_col {
  padding: unset;
  border: none;
}
#service .boxone_only > .boxone_col:not(:first-child) {
  margin-top: 50px;
}
#service .boxone_only > .boxone_col:not(:first-child)::before {
  top: -43px;
}
#service .boxtwo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* ※.boxtwo_col0～.boxtwo_col100を5%刻みで作成 */
}
#service .boxtwo > .boxtwo_col,
#service .boxtwo > .boxtwo_col_gray {
  position: relative;
  width: calc(50% - 30px);
  border: 1px solid #cfe4eb;
}
#service .boxtwo > .boxtwo_col:not(:first-child)::before,
#service .boxtwo > .boxtwo_col_gray:not(:first-child)::before {
  position: absolute;
  top: 50%;
  left: -38px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-width: 23px 0 23px 20px;
  border-style: solid;
  border-color: transparent transparent transparent #00a0c7;
  content: "";
}
#service .boxtwo > .boxtwo_col > .boxtwo_ttl,
#service .boxtwo > .boxtwo_col_gray > .boxtwo_ttl {
  padding: 10px 15px 8px 15px;
  background-color: #00a0c7;
  color: #ffffff;
}
#service .boxtwo > .boxtwo_col > .boxtwo_content,
#service .boxtwo > .boxtwo_col_gray > .boxtwo_content {
  padding: 10px 15px;
}
#service .boxtwo > .boxtwo_col > .boxtwo_content + .boxtwo_content,
#service .boxtwo > .boxtwo_col_gray > .boxtwo_content + .boxtwo_content {
  border-top: 1px solid #cfe4eb;
}
#service .boxtwo > .boxtwo_col_gray {
  border-color: #7a7a79;
}
#service .boxtwo > .boxtwo_col_gray > .boxtwo_ttl {
  background-color: #7a7a79;
}
#service .boxtwo > .boxtwo_col_gray > .boxtwo_content + .boxtwo_content {
  border-color: #7a7a79;
}
#service .boxtwo > .boxtwo_col0 {
  width: calc(0% - 30px);
}
#service .boxtwo > .boxtwo_col5 {
  width: calc(5% - 30px);
}
#service .boxtwo > .boxtwo_col10 {
  width: calc(10% - 30px);
}
#service .boxtwo > .boxtwo_col15 {
  width: calc(15% - 30px);
}
#service .boxtwo > .boxtwo_col20 {
  width: calc(20% - 30px);
}
#service .boxtwo > .boxtwo_col25 {
  width: calc(25% - 30px);
}
#service .boxtwo > .boxtwo_col30 {
  width: calc(30% - 30px);
}
#service .boxtwo > .boxtwo_col35 {
  width: calc(35% - 30px);
}
#service .boxtwo > .boxtwo_col40 {
  width: calc(40% - 30px);
}
#service .boxtwo > .boxtwo_col45 {
  width: calc(45% - 30px);
}
#service .boxtwo > .boxtwo_col50 {
  width: calc(50% - 30px);
}
#service .boxtwo > .boxtwo_col55 {
  width: calc(55% - 30px);
}
#service .boxtwo > .boxtwo_col60 {
  width: calc(60% - 30px);
}
#service .boxtwo > .boxtwo_col65 {
  width: calc(65% - 30px);
}
#service .boxtwo > .boxtwo_col70 {
  width: calc(70% - 30px);
}
#service .boxtwo > .boxtwo_col75 {
  width: calc(75% - 30px);
}
#service .boxtwo > .boxtwo_col80 {
  width: calc(80% - 30px);
}
#service .boxtwo > .boxtwo_col85 {
  width: calc(85% - 30px);
}
#service .boxtwo > .boxtwo_col90 {
  width: calc(90% - 30px);
}
#service .boxtwo > .boxtwo_col95 {
  width: calc(95% - 30px);
}
#service .boxtwo > .boxtwo_col100 {
  width: calc(100% - 30px);
}

@media screen and (max-width: 640px) {
  #service {
    /** .boxtwo
    ===================================*/
  }
  #service .boxtwo {
    display: block;
    /* ※.boxtwo_col0～.boxtwo_col100は全て100%に */
  }
  #service .boxtwo > .boxtwo_col,
  #service .boxtwo > .boxtwo_col_gray {
    width: 100%;
  }
  #service .boxtwo > .boxtwo_col:not(:first-child),
  #service .boxtwo > .boxtwo_col_gray:not(:first-child) {
    margin-top: 30px;
  }
  #service .boxtwo > .boxtwo_col:not(:first-child)::before,
  #service .boxtwo > .boxtwo_col_gray:not(:first-child)::before {
    top: -34px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
    border-width: 18px 0 18px 15px;
  }
  #service .boxtwo > .boxtwo_col.anser,
  #service .boxtwo > .boxtwo_col_gray.anser {
    margin-top: 0;
    border-top: none;
  }
  #service .boxtwo > .boxtwo_col.anser::before,
  #service .boxtwo > .boxtwo_col_gray.anser::before {
    content: unset;
  }
  #service .boxtwo > .boxtwo_col0 {
    width: 100%;
  }
  #service .boxtwo > .boxtwo_col5 {
    width: 100%;
  }
  #service .boxtwo > .boxtwo_col10 {
    width: 100%;
  }
  #service .boxtwo > .boxtwo_col15 {
    width: 100%;
  }
  #service .boxtwo > .boxtwo_col20 {
    width: 100%;
  }
  #service .boxtwo > .boxtwo_col25 {
    width: 100%;
  }
  #service .boxtwo > .boxtwo_col30 {
    width: 100%;
  }
  #service .boxtwo > .boxtwo_col35 {
    width: 100%;
  }
  #service .boxtwo > .boxtwo_col40 {
    width: 100%;
  }
  #service .boxtwo > .boxtwo_col45 {
    width: 100%;
  }
  #service .boxtwo > .boxtwo_col50 {
    width: 100%;
  }
  #service .boxtwo > .boxtwo_col55 {
    width: 100%;
  }
  #service .boxtwo > .boxtwo_col60 {
    width: 100%;
  }
  #service .boxtwo > .boxtwo_col65 {
    width: 100%;
  }
  #service .boxtwo > .boxtwo_col70 {
    width: 100%;
  }
  #service .boxtwo > .boxtwo_col75 {
    width: 100%;
  }
  #service .boxtwo > .boxtwo_col80 {
    width: 100%;
  }
  #service .boxtwo > .boxtwo_col85 {
    width: 100%;
  }
  #service .boxtwo > .boxtwo_col90 {
    width: 100%;
  }
  #service .boxtwo > .boxtwo_col95 {
    width: 100%;
  }
  #service .boxtwo > .boxtwo_col100 {
    width: 100%;
  }
}
/* column
------------------------------------------------------------------------------  */
#column section {
  margin: 60px 0;
}

#column .lead {
  text-align: center;
}

#column .lead h1 {
  font-weight: 500;
  font-size: 38px;
  text-align: center;
}

#column h2 {
  margin-bottom: 20px;
  padding: 10px 20px 7px 20px;
  border-left: 10px solid #bdbbba;
  background: #f4f3f3;
  font-weight: 500;
  font-size: 24px;
  text-align: left;
}

@media screen and (max-width: 640px) {
  #column .lead h1 {
    font-size: 20px;
  }
  #column h2 {
    font-size: 18px;
  }
}
/* .content-footer ===============*/
.content-footer {
  border-top: 1px solid #bdbbba;
}
.content-footer h2 {
  margin-bottom: 5px !important;
  font-size: 16px !important;
  text-align: center;
}
.content-footer .btn-area {
  max-width: 510px;
  margin: 0 auto;
}
.content-footer .btn-area li {
  text-align: center;
}

@media screen and (max-width: 640px) {
  .content-footer .btn-area li {
    margin-bottom: 10px;
  }
  .content-footer .btn-area li .btn {
    width: 80%;
  }
}
/*
===============================================================================
workswith　※works with Gluegent
===============================================================================
*/
/* workswith */
#workswith {
  /* .bnr-list ===============*/
  /* table.sso-table ===============*/
  /* table.table-workswith_gate ===============*/
}
#workswith .kv {
  background-image: url(../images/service/workswith/kv_bk.webp);
}
#workswith .kv .container h1.workswith {
  margin: 0;
}
#workswith .kv .container h1.workswith > span {
  display: block;
  margin-top: 20px;
  color: #251e1c;
  font-weight: normal;
  font-size: 18px;
}
#workswith .box-lead > ul {
  display: flex;
}
#workswith .box-lead > ul li:first-child {
  width: 80px;
}
#workswith .box-lead > ul li:nth-child(2) {
  width: calc(100% - 80px);
}
#workswith .box-lead > ul + ul {
  margin-top: 10px;
}
#workswith .tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  color: #ffffff;
  font-size: 13px;
  line-height: 1;
}
#workswith .tag + .tag {
  margin-left: 5px;
}
#workswith .tag.sso {
  background-color: #ba769e;
}
#workswith .tag.propositioning {
  background-color: #70af41;
}
#workswith .tag.function {
  background-color: #f39a00;
}
#workswith .bnr-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 30px 15px;
  padding-block: 30px;
}
#workswith .bnr-list + .bnr-list {
  border-top: 1px solid #8d8d8d;
}
#workswith .bnr-list .bnr {
  box-sizing: border-box;
  font-size: 12px;
  text-align: center;
}
#workswith .bnr-list .bnr .bnr-img {
  position: relative;
}
#workswith .bnr-list .bnr .bnr-img .new {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 5px;
  background: #ea0000;
  color: #ffffff;
  font-size: 10px;
  word-spacing: 2px;
}
#workswith .bnr-list .bnr .bnr-img img {
  border: 1px solid #e5ebf2;
  box-sizing: border-box;
}
#workswith .bnr-list .bnr__innerlink {
  position: relative;
  display: grid !important;
  grid-template-rows: subgrid;
  gap: 5px;
  padding: 5px;
  border: 1px solid #e5ebf2;
  border-radius: 5px;
  box-shadow: 0 2px 3px 0 rgba(37, 30, 28, 0.4);
  background-color: #ffffff;
  text-decoration: none;
  grid-row: span 3;
}
#workswith .bnr-list .bnr__innerlink:hover {
  opacity: 0.8;
}
#workswith .bnr-list .bnr__innerlink:active {
  top: 1px;
  box-shadow: 0 0 1px 0 rgba(37, 30, 28, 0.1);
}
#workswith .bnr-list .bnr__innerlink > img {
  width: 100%;
}
#workswith table.sso-table {
  width: 80%;
  margin: 0 auto 60px auto;
  background: #ffffff;
  text-align: center;
  border-collapse: collapse;
}
#workswith table.sso-table th {
  width: 50%;
  padding: 5px;
  border: 1px solid #cfe4eb;
  background-color: #f2f7f8;
}
#workswith table.sso-table th.function {
  background-color: #00a0c7;
  color: #ffffff;
}
#workswith table.sso-table td {
  padding: 15px;
  border: 1px solid #cfe4eb;
  font-size: 20px;
}
#workswith table.table-workswith_gate {
  width: 100%;
  margin: 0 auto 50px auto;
  background: #ffffff;
  text-align: center;
  border-collapse: collapse;
}
#workswith table.table-workswith_gate th,
#workswith table.table-workswith_gate td {
  padding: 5px 15px;
  border: 1px solid #cfe4eb;
}
#workswith table.table-workswith_gate thead {
  background-color: #00a0c7;
  color: #ffffff;
  font-weight: bold;
}
#workswith table.table-workswith_gate tbody th {
  width: 20%;
  background-color: #f2f7f8;
}
#workswith table.table-workswith_gate tbody th.function {
  background-color: #00a0c7;
  color: #ffffff;
}
#workswith table.table-workswith_gate tbody td {
  width: 30%;
}
#workswith ul.regretdate {
  margin: 30px 0;
  font-size: 14px;
}
#workswith ul.regretdate > li {
  text-align: right;
}
#workswith ul.under-link {
  display: flex;
  gap: 30px;
}
#workswith ul.under-link > li {
  position: relative;
  width: 50%;
  box-sizing: border-box;
}
#workswith ul.under-link > li > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 15px;
  border-radius: 10px;
  box-sizing: border-box;
  background-color: #00a0c7;
  color: #ffffff;
  font-weight: bold;
  font-size: 18px;
  text-decoration: none;
  text-align: center;
}
#workswith ul.under-link > li > a:hover {
  opacity: 0.8;
}
#workswith ul.under-link > li > i {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 4px 0 0 6px;
  border-radius: 50px;
  box-sizing: border-box;
  background-color: #ffffff;
  color: #00a0c7;
  line-height: 1;
}
#workswith ul.under-link > li.flow > a {
  background-color: #f7810d;
}
#workswith ul.under-link > li.flow > i {
  color: #f7810d;
}
#workswith ul.under-link > li.gate > a {
  background-color: #9abd1f;
}
#workswith ul.under-link > li.gate > i {
  color: #9abd1f;
}
#workswith .workswith-txt {
  margin: 10px 0 45px 0;
}
@media screen and (max-width: 767px) {
  #workswith {
    /* table.sso-table ===============*/
    /* table.table-workswith_gate ===============*/
  }
  #workswith table.sso-table {
    width: 100%;
  }
  #workswith table.table-workswith_gate {
    font-size: 13px;
  }
  #workswith table.table-workswith_gate th,
  #workswith table.table-workswith_gate td {
    padding: 5px 5px;
  }
  #workswith table.table-workswith_gate tbody th {
    width: 30%;
  }
  #workswith table.table-workswith_gate tbody td {
    width: 20%;
  }
  #workswith ul.under-link {
    flex-direction: column;
  }
  #workswith ul.under-link > li {
    width: 100%;
  }
  #workswith ul.under-link > li > a {
    font-size: 15px;
  }
}
@media screen and (max-width: 640px) {
  #workswith .kv .container {
    flex-flow: column;
    justify-content: center;
  }
  #workswith .kv .container h1 {
    margin-bottom: 30px;
    font-size: 14px;
    text-align: center;
  }
  #workswith .workswith-txt {
    margin: 15px 0 30px 0;
  }
}

/*
===============================================================================
about
===============================================================================
*/
#about > main, #support > main {
  /* section */
  /* .ci-searvice */
  /* history */
}
#about > main .kv, #support > main .kv {
  background-image: url(/about/img/kv_bk_about.webp);
}
#about > main .kv .container > h1, #support > main .kv .container > h1 {
  max-width: none;
  margin: 0;
  font-weight: bold;
  filter: drop-shadow(0px 0px 10px rgb(0, 0, 0));
}
#about > main h2, #support > main h2 {
  font-weight: bold;
  font-size: 28px;
}
#about > main h2.service, #support > main h2.service {
  max-width: 600px;
  font-size: 24px;
  text-align: center;
  margin-inline: auto;
}
#about > main h2.service > a, #support > main h2.service > a {
  display: block;
  margin-top: 10px;
}
#about > main h3, #support > main h3 {
  font-weight: bold;
  font-size: 24px;
}
#about > main section, #support > main section {
  position: relative;
  max-width: 1200px;
  margin: 100px auto;
  padding: 0 20px;
  overflow: hidden;
  text-align: left;
}
#about > main section.main-lead, #support > main section.main-lead {
  position: relative;
  max-width: unset;
  margin: 0 auto;
  padding: 100px 0 150px 0;
  overflow: hidden;
}
#about > main section.main-lead > .lead_txt, #support > main section.main-lead > .lead_txt {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: left;
}
#about > main section.main-lead > img, #support > main section.main-lead > img {
  position: absolute;
  top: 46%;
  right: 5%;
  z-index: 0;
  display: block;
  opacity: 0.6;
  -o-object-fit: cover;
     object-fit: cover;
}
#about > main section.min-width, #support > main section.min-width {
  max-width: 980px;
}
#about > main .bg-gray, #support > main .bg-gray {
  overflow: hidden;
  background-color: #f4f3f3;
}
#about > main ul.ci-searvice, #support > main ul.ci-searvice {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
#about > main ul.ci-searvice li, #support > main ul.ci-searvice li {
  display: inline-block;
  width: calc((100% - 30px) / 4);
  text-align: center;
  vertical-align: top;
}
#about > main ul.ci-searvice li > a, #support > main ul.ci-searvice li > a {
  display: block;
  width: 100%;
  padding: 20px 10px;
  box-sizing: border-box;
  background-color: #ffffff;
  text-decoration: none;
  font-size: 15px;
}
#about > main ul.ci-searvice li > a img, #support > main ul.ci-searvice li > a img {
  height: 50px;
}
#about > main .history, #support > main .history {
  font-size: 15px;
}
#about > main .history .history_list, #support > main .history .history_list {
  display: flex;
  gap: 20px;
}
#about > main .history .history_list > .time, #support > main .history .history_list > .time {
  flex-shrink: 0;
  opacity: 0.3;
  width: 2.25em;
  color: #00a0c7;
  font-weight: bold;
  font-size: 30px;
  line-height: 1;
}
#about > main .history .history_list > ul, #support > main .history .history_list > ul {
  padding: 2px 0 20px 15px;
  border-left: 2px solid #dddddd;
}
#about > main .history .history_list > ul > li, #support > main .history .history_list > ul > li {
  position: relative;
  display: flex;
  gap: 10px;
}
#about > main .history .history_list > ul > li::before, #support > main .history .history_list > ul > li::before {
  position: absolute;
  top: 8px;
  left: -20px;
  width: 9px;
  height: 9px;
  border-radius: 100%;
  background: #00a0c7;
  content: "";
}
#about > main .history .history_list > ul > li:not(:first-child), #support > main .history .history_list > ul > li:not(:first-child) {
  margin-top: 7px;
}
#about > main .history .history_list > ul > li > p, #support > main .history .history_list > ul > li > p {
  flex-shrink: 0;
  width: 2.5em;
  color: #00a0c7;
}
#about > main .history .history_list > ul > li .history_list_inner h3, #support > main .history .history_list > ul > li .history_list_inner h3 {
  padding: 1px 0 5px 0;
  font-size: 18px;
  line-height: 1.5;
}

@media screen and (max-width: 640px) {
  #about > main {
    font-size: 15px;
    /* section */
    /* .ci-searvice */
    /* history */
  }
  #about > main .kv .container > h1 {
    font-size: 26px;
  }
  #about > main h2 {
    font-size: 22px;
  }
  #about > main h2.service {
    font-size: 18px;
  }
  #about > main h3 {
    font-size: 18px;
  }
  #about > main section {
    margin: 60px auto;
  }
  #about > main section.main-lead {
    padding: 60px 0;
  }
  #about > main section.main-lead > img {
    position: relative;
    right: auto;
    width: calc(100% - 40px);
    height: auto;
    margin: 30px auto 0;
  }
  #about > main ul.ci-searvice {
    display: block;
  }
  #about > main ul.ci-searvice li {
    width: 100%;
    margin: 0 0 30px 0;
  }
  #about > main ul.ci-searvice li:last-child {
    margin: 0;
  }
  #about > main .history {
    font-size: 13px;
  }
  #about > main .history .history_list > .time {
    width: 2em;
    font-size: 24px;
  }
  #about > main .history .history_list > ul > li::before {
    top: 6px;
  }
  #about > main .history .history_list > ul > li .history_list_inner h3 {
    font-size: 15px;
  }
}
/*
===============================================================================
security
===============================================================================
*/
.security .list li {
  list-style-type: inherit;
}
.security h3 {
  font-size: 20px !important;
}

/*
===============================================================================
service-system
===============================================================================
*/
.support-useful-info {
  gap: 10px 20px;
  flex-wrap: wrap;
  margin: 15px 0px;
  display: flex;
}
.support-useful-info > div {
  background-color: #ffffff;
  border-radius: 5px;
  filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.2));
  padding: 10px 20px;
  text-align: center;
  font-size: 13px;
  width: calc((100% - 160px) / 3);
}
.support-useful-info > div .flexbox {
  justify-content: space-between;
}
.support-useful-info > div .ttl {
  font-size: 16px;
  font-weight: bold;
  color: #00a0c7;
  margin-bottom: 20px;
}
.support-useful-info > div img {
  height: 80px;
}
.support-useful-info > div img.small {
  height: 65px;
}
.support-useful-info > div img.big {
  height: 100px;
}
.support-useful-info > div a {
  text-align: left;
}

.case-study-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}
.case-study-list .case {
  text-decoration: none;
  width: calc((100% - 40px) / 3);
  background-color: #ffffff;
  border-radius: 10px;
  border: solid 1px #dbdbdb;
  display: grid;
  justify-content: space-between;
  gap: 15px;
  box-sizing: border-box;
  padding: 10px;
  grid-row: span 4;
  grid-template-areas: "area1" "area2" "area3" "area4";
}
.case-study-list .case .image {
  width: 160px;
  grid-area: area1;
}
.case-study-list .case h3 {
  font-size: 18px !important;
  grid-area: area2;
}
.case-study-list .case .txt {
  grid-area: area3;
}
.case-study-list .case .detail {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  line-height: 1;
  margin: 10px 0 0 auto;
  padding: 7px 15px 7px;
  background-color: #00a0c7;
  color: #ffffff;
  font-weight: bold;
  font-size: 13px;
  border-radius: 5px;
  text-decoration: none;
}
.case-study-list .case .category {
  grid-area: area4;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: auto;
}
.case-study-list .case .category li {
  margin-left: 0;
  padding: 1px 8px 0 8px;
  border: 1px solid #dbdbdb;
  border-radius: 2px;
  background-color: #ffffff;
  font-size: 12px;
}
.case-study-list .case .category li.service {
  color: #ffffff;
  border: none;
  background-color: #7a7a79;
}
.case-study-list .case .category li.gate {
  background-color: #9abd1f;
}
.case-study-list .case .category li.flow {
  background-color: #f7810d;
}
.case-study-list .case .category li.apps {
  background-color: #005cac;
}

.support-btn-area {
  margin: 30px 150px;
}

@media screen and (max-width: 767px) {
  .support-box {
    display: grid;
    gap: unset;
  }
  .support-box .box-col60 {
    order: 1;
  }
  .support-box .box-col40 {
    order: 0;
    text-align: center;
  }
  .support-useful-info > div {
    width: calc(100% - 20px);
  }
  .support-useful-info .flexbox {
    display: flex;
    gap: 5%;
  }
  .case-study-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px 20px;
  }
  .case-study-list .case {
    width: 100%;
  }
  .support-btn-area {
    margin: 30px 0px;
  }
}
/*
===============================================================================
partner
===============================================================================
*/
#partner .kv {
  background-image: url(/partner/img/kv_bk.jpg);
}
#partner h2 {
  margin-bottom: 30px;
  font-weight: bold;
  font-size: 24px;
  line-height: 150%;
  text-align: center;
}
#partner .lead {
  text-align: center;
  padding-inline: 20px;
}
#partner ul.partner-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 30px 20px;
  font-size: 12px;
}
#partner ul.partner-list li {
  width: 180px;
  box-sizing: border-box;
  margin-inline: auto;
}
#partner ul.partner-list li img {
  display: block;
  margin-bottom: 5px;
}
#partner .btn {
  display: block;
  width: auto;
  max-width: 420px;
  margin: 20px auto 0 auto;
  text-align: center;
}

@media screen and (max-width: 767px) {
  #partner .lead {
    padding-inline: 10px;
  }
}
/*
===============================================================================
errpage
===============================================================================
*/
#errpage .err-ttl {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 120px;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
}
#errpage .err-ttl h1 {
  font-size: 45px;
  font-weight: bold;
  color: #4d4d4d;
}
#errpage .err-ttl p {
  font-size: 18px;
}
#errpage .container {
  padding: 60px 20px 160px;
}

@media screen and (max-width: 640px) {
  #errpage .err-ttl {
    padding: 2em 1em;
  }
  #errpage .err-ttl h1 {
    font-size: 24px;
  }
}
/*
===============================================================================
privacy　※プライバシーポリシー
===============================================================================
*/
#privacy {
  /* kv */
}
#privacy h1 {
  margin-bottom: 30px;
  font-weight: bold;
  font-size: 38px;
  line-height: 1.5;
  text-align: center;
}
#privacy h2 {
  margin-bottom: 20px;
  font-size: 24px;
}
#privacy h2.ttl-center {
  text-align: center;
}
#privacy h3 {
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.5;
}
#privacy .privacy_top .kv {
  background-image: url(/privacy/img/kv_privacy.jpg);
}
#privacy .ttl {
  display: table;
  width: 100%;
  box-sizing: border-box;
  background: #e9ecee;
  text-align: center;
}
#privacy .ttl .block {
  display: table-cell;
  height: 160px;
  vertical-align: middle;
}
#privacy .ttl h1 {
  margin: 0;
  font-weight: normal;
  font-size: 30px;
}
#privacy p {
  margin-bottom: 30px;
}
#privacy p + ol {
  margin-top: -20px;
}
#privacy ol {
  margin-bottom: 30px;
}
#privacy ol li {
  list-style-type: decimal;
  margin-bottom: 10px;
  margin-left: 20px;
}
#privacy ol li > ul li {
  list-style-type: disc;
  margin-bottom: 0;
}

@media screen and (max-width: 640px) {
  #privacy h1 {
    font-size: 28px;
  }
  #privacy .ttl {
    padding: 2em 1em;
  }
  #privacy .ttl .block {
    height: auto;
  }
  #privacy .ttl h1 {
    font-size: 24px;
  }
}
/*
===============================================================================
※旧cssからの未分割をまるごと入れています。
※今後分割予定、scss構文には逐次変えていきます。
===============================================================================
*/
/** #pagePath
===================================*/
#pagePath {
  margin: 15px 0;
  font-size: 12px;
}
#pagePath li {
  display: inline;
  margin-right: 10px;
}
#pagePath li a {
  margin-right: 15px;
}

@media screen and (max-width: 640px) {
  #pagePath {
    display: none;
  }
}
/** table
===================================*/
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
table.normal-table tr, table.normal-table_col2 tr, table.normal-table_col3 tr, table.normal-table_col4 tr {
  border: 1px solid #cfe4eb;
}
table.normal-table tr th,
table.normal-table tr td, table.normal-table_col2 tr th,
table.normal-table_col2 tr td, table.normal-table_col3 tr th,
table.normal-table_col3 tr td, table.normal-table_col4 tr th,
table.normal-table_col4 tr td {
  padding: 10px;
  border: 1px solid #cfe4eb;
  box-sizing: border-box;
}
table.normal-table thead tr:only-child, table.normal-table_col2 thead tr:only-child, table.normal-table_col3 thead tr:only-child, table.normal-table_col4 thead tr:only-child {
  border-bottom: 0;
}
table.normal-table thead tr th, table.normal-table_col2 thead tr th, table.normal-table_col3 thead tr th, table.normal-table_col4 thead tr th {
  min-width: 170px;
  background: #00a0c7;
  color: #ffffff;
  font-weight: 500;
}
table.normal-table thead tr th.back_key02, table.normal-table_col2 thead tr th.back_key02, table.normal-table_col3 thead tr th.back_key02, table.normal-table_col4 thead tr th.back_key02 {
  background-color: rgb(0, 118.9949748744, 148);
}
table.normal-table tbody tr th, table.normal-table_col2 tbody tr th, table.normal-table_col3 tbody tr th, table.normal-table_col4 tbody tr th {
  min-width: 170px;
  border-right: 1px solid #cfe4eb;
  background: #f2f7f8;
  font-weight: 500;
}
table.normal-table_col2 tr th {
  width: 20%;
}
table.normal-table_col2 tr td {
  width: 40%;
}
table.normal-table_col3 tr th {
  width: 25%;
  min-width: unset !important;
}
table.normal-table_col3 tr td {
  width: 25%;
}
table.normal-table_col4 tr th {
  width: 30%;
  min-width: unset !important;
}
table.normal-table_col4 tr td {
  width: 17.5%;
}
table.normal-table_min tr th,
table.normal-table_min tr td {
  padding: 5px 10px;
  line-height: 1.5;
}
table.normal-table_nores th {
  padding: 10px;
  border: solid 1px #bdbbba;
  background: #f2f7f8;
  text-align: center;
}
table.normal-table_nores td {
  padding: 10px;
  border: solid 1px #bdbbba;
}
table.noframe tr {
  border: none;
}
table.noframe tr th,
table.noframe tr td {
  border: none !important;
  background: none !important;
}
table.noframe-line tr, table.noframe-line-min tr {
  border: none;
  border-bottom: 1px solid #cfe4eb;
}
table.noframe-line tr:first-child, table.noframe-line-min tr:first-child {
  border-top: 1px solid #cfe4eb;
}
table.noframe-line tr th,
table.noframe-line tr td, table.noframe-line-min tr th,
table.noframe-line-min tr td {
  padding: 20px 10px 20px 0 !important;
  border: none !important;
  background: none !important;
  color: #251e1c !important;
}
table.noframe-line-min tr th,
table.noframe-line-min tr td {
  padding: 10px 10px 10px 0 !important;
}
table.noframe-color tr {
  border: none;
}
table.noframe-color tr:nth-child(even) {
  background: #f2f7f8;
}
table.noframe-color tr th,
table.noframe-color tr td {
  padding: 7px 10px !important;
  border: none !important;
  background: none !important;
}
table.noframe-color tr th {
  font-weight: bold !important;
}
table .fixed100 {
  width: 100px;
  min-width: unset !important;
}
table .fixed110 {
  width: 110px;
  min-width: unset !important;
}
table .fixed120 {
  width: 120px;
  min-width: unset !important;
}
table .fixed130 {
  width: 130px;
  min-width: unset !important;
}
table .fixed140 {
  width: 140px;
  min-width: unset !important;
}
table .fixed150 {
  width: 150px;
  min-width: unset !important;
}
table .fixed160 {
  width: 160px;
  min-width: unset !important;
}
table .fixed170 {
  width: 170px;
  min-width: unset !important;
}
table .fixed180 {
  width: 180px;
  min-width: unset !important;
}
table .fixed190 {
  width: 190px;
  min-width: unset !important;
}
table .fixed200 {
  width: 200px;
  min-width: unset !important;
}
table .fixed210 {
  width: 210px;
  min-width: unset !important;
}
table .fixed220 {
  width: 220px;
  min-width: unset !important;
}
table .fixed230 {
  width: 230px;
  min-width: unset !important;
}
table .fixed240 {
  width: 240px;
  min-width: unset !important;
}
table .fixed250 {
  width: 250px;
  min-width: unset !important;
}
table .fixed260 {
  width: 260px;
  min-width: unset !important;
}
table .fixed270 {
  width: 270px;
  min-width: unset !important;
}
table .fixed280 {
  width: 280px;
  min-width: unset !important;
}
table .fixed290 {
  width: 290px;
  min-width: unset !important;
}
table .fixed300 {
  width: 300px;
  min-width: unset !important;
}
table .fixed5p {
  width: 5% !important;
  min-width: unset !important;
  word-break: break-all;
}
table .fixed10p {
  width: 10% !important;
  min-width: unset !important;
  word-break: break-all;
}
table .fixed15p {
  width: 15% !important;
  min-width: unset !important;
  word-break: break-all;
}
table .fixed20p {
  width: 20% !important;
  min-width: unset !important;
  word-break: break-all;
}
table .fixed25p {
  width: 25% !important;
  min-width: unset !important;
  word-break: break-all;
}
table .fixed30p {
  width: 30% !important;
  min-width: unset !important;
  word-break: break-all;
}
table .fixed35p {
  width: 35% !important;
  min-width: unset !important;
  word-break: break-all;
}
table .fixed40p {
  width: 40% !important;
  min-width: unset !important;
  word-break: break-all;
}
table .fixed45p {
  width: 45% !important;
  min-width: unset !important;
  word-break: break-all;
}
table .fixed50p {
  width: 50% !important;
  min-width: unset !important;
  word-break: break-all;
}
table .fixed55p {
  width: 55% !important;
  min-width: unset !important;
  word-break: break-all;
}
table .fixed60p {
  width: 60% !important;
  min-width: unset !important;
  word-break: break-all;
}
table .fixed65p {
  width: 65% !important;
  min-width: unset !important;
  word-break: break-all;
}
table .fixed70p {
  width: 70% !important;
  min-width: unset !important;
  word-break: break-all;
}
table .fixed75p {
  width: 75% !important;
  min-width: unset !important;
  word-break: break-all;
}
table .fixed80p {
  width: 80% !important;
  min-width: unset !important;
  word-break: break-all;
}
table .fixed85p {
  width: 85% !important;
  min-width: unset !important;
  word-break: break-all;
}
table .fixed90p {
  width: 90% !important;
  min-width: unset !important;
  word-break: break-all;
}
table .fixed95p {
  width: 95% !important;
  min-width: unset !important;
  word-break: break-all;
}
table .fixed100p {
  width: 100% !important;
  min-width: unset !important;
  word-break: break-all;
}
table .pc_tablenone {
  display: none !important;
}
table .sp_tablenone {
  display: table-cell !important;
}

@media screen and (max-width: 767px) {
  table.normal-table tr th,
  table.normal-table tr td, table.normal-table_col2 tr th,
  table.normal-table_col2 tr td, table.normal-table_col3 tr th,
  table.normal-table_col3 tr td, table.normal-table_col4 tr th,
  table.normal-table_col4 tr td {
    display: block;
    width: 100%;
    border: 0;
  }
  table.normal-table tbody tr th, table.normal-table_col2 tbody tr th, table.normal-table_col3 tbody tr th, table.normal-table_col4 tbody tr th {
    border-right: 0;
    border-bottom: 1px solid #cfe4eb;
  }
  table.normal-table_col2 tr, table.normal-table_col3 tr, table.normal-table_col4 tr {
    display: flex;
    flex-wrap: wrap;
  }
  table.normal-table_col2 tr th,
  table.normal-table_col2 tr td, table.normal-table_col3 tr th,
  table.normal-table_col3 tr td, table.normal-table_col4 tr th,
  table.normal-table_col4 tr td {
    width: 50%;
  }
  table.normal-table_col2 thead tr th:not(:last-child), table.normal-table_col3 thead tr th:not(:last-child), table.normal-table_col4 thead tr th:not(:last-child) {
    border-right: 1px solid #cfe4eb;
  }
  table.normal-table_col2 thead tr th:only-child, table.normal-table_col3 thead tr th:only-child, table.normal-table_col4 thead tr th:only-child {
    width: 100%;
  }
  table.normal-table_col2 tbody tr + tr, table.normal-table_col3 tbody tr + tr, table.normal-table_col4 tbody tr + tr {
    border-top: 0;
  }
  table.normal-table_col2 tbody tr th, table.normal-table_col3 tbody tr th, table.normal-table_col4 tbody tr th {
    width: 100%;
  }
  table.normal-table_col2 tbody tr td:not(:last-child), table.normal-table_col3 tbody tr td:not(:last-child), table.normal-table_col4 tbody tr td:not(:last-child) {
    border-right: 1px solid #cfe4eb;
  }
  table.normal-table_col3 tr th,
  table.normal-table_col3 tr td {
    width: 33.3333333333%;
    min-width: unset !important;
  }
  table.normal-table_col4 tr th,
  table.normal-table_col4 tr td {
    width: 25%;
    min-width: unset !important;
  }
  table.noframe-line tr th, table.noframe-line-min tr th {
    padding: 20px 0 0 0 !important;
    font-weight: bold !important;
  }
  table.noframe-line tr td, table.noframe-line-min tr td {
    padding: 0 0 20px 0 !important;
  }
  table.noframe-line-min tr th {
    padding: 10px 0 0 0 !important;
  }
  table.noframe-line-min tr td {
    padding: 0 0 10px 0 !important;
  }
  table.noframe-color tr {
    border: none;
  }
  table.noframe-color tr:nth-child(even) {
    background: none;
  }
  table.noframe-color tr th,
  table.noframe-color tr td {
    padding: 7px 10px !important;
    border: none !important;
    background: none !important;
  }
  table.noframe-color tr th {
    background: #cfe4eb !important;
    text-align: center;
  }
  table .fixed100 {
    width: auto;
  }
  table .fixed110 {
    width: auto;
  }
  table .fixed120 {
    width: auto;
  }
  table .fixed130 {
    width: auto;
  }
  table .fixed140 {
    width: auto;
  }
  table .fixed150 {
    width: auto;
  }
  table .fixed160 {
    width: auto;
  }
  table .fixed170 {
    width: auto;
  }
  table .fixed180 {
    width: auto;
  }
  table .fixed190 {
    width: auto;
  }
  table .fixed200 {
    width: auto;
  }
  table .fixed210 {
    width: auto;
  }
  table .fixed220 {
    width: auto;
  }
  table .fixed230 {
    width: auto;
  }
  table .fixed240 {
    width: auto;
  }
  table .fixed250 {
    width: auto;
  }
  table .fixed260 {
    width: auto;
  }
  table .fixed270 {
    width: auto;
  }
  table .fixed280 {
    width: auto;
  }
  table .fixed290 {
    width: auto;
  }
  table .fixed300 {
    width: auto;
  }
  table .fixed5sp {
    width: 5% !important;
    min-width: unset !important;
    word-break: break-all;
  }
  table .fixed10sp {
    width: 10% !important;
    min-width: unset !important;
    word-break: break-all;
  }
  table .fixed15sp {
    width: 15% !important;
    min-width: unset !important;
    word-break: break-all;
  }
  table .fixed20sp {
    width: 20% !important;
    min-width: unset !important;
    word-break: break-all;
  }
  table .fixed25sp {
    width: 25% !important;
    min-width: unset !important;
    word-break: break-all;
  }
  table .fixed30sp {
    width: 30% !important;
    min-width: unset !important;
    word-break: break-all;
  }
  table .fixed35sp {
    width: 35% !important;
    min-width: unset !important;
    word-break: break-all;
  }
  table .fixed40sp {
    width: 40% !important;
    min-width: unset !important;
    word-break: break-all;
  }
  table .fixed45sp {
    width: 45% !important;
    min-width: unset !important;
    word-break: break-all;
  }
  table .fixed50sp {
    width: 50% !important;
    min-width: unset !important;
    word-break: break-all;
  }
  table .fixed55sp {
    width: 55% !important;
    min-width: unset !important;
    word-break: break-all;
  }
  table .fixed60sp {
    width: 60% !important;
    min-width: unset !important;
    word-break: break-all;
  }
  table .fixed65sp {
    width: 65% !important;
    min-width: unset !important;
    word-break: break-all;
  }
  table .fixed70sp {
    width: 70% !important;
    min-width: unset !important;
    word-break: break-all;
  }
  table .fixed75sp {
    width: 75% !important;
    min-width: unset !important;
    word-break: break-all;
  }
  table .fixed80sp {
    width: 80% !important;
    min-width: unset !important;
    word-break: break-all;
  }
  table .fixed85sp {
    width: 85% !important;
    min-width: unset !important;
    word-break: break-all;
  }
  table .fixed90sp {
    width: 90% !important;
    min-width: unset !important;
    word-break: break-all;
  }
  table .fixed95sp {
    width: 95% !important;
    min-width: unset !important;
    word-break: break-all;
  }
  table .fixed100sp {
    width: 100% !important;
    min-width: unset !important;
    word-break: break-all;
  }
  table .pc_tablenone {
    display: table-cell !important;
  }
  table .sp_tablenone {
    display: none !important;
  }
  table .spbt {
    border-top: 1px solid #cfe4eb !important;
  }
  table .spbt0 {
    border-top: 0 !important;
  }
  table .spbb {
    border-bottom: 1px solid #cfe4eb !important;
  }
  table .spbb0 {
    border-bottom: 0 !important;
  }
  table .spbr {
    border-right: 1px solid #cfe4eb !important;
  }
  table .spbr0 {
    border-right: 0 !important;
  }
  table .spbl {
    border-left: 1px solid #cfe4eb !important;
  }
  table .spbl0 {
    border-left: 0 !important;
  }
}
input[type=checkbox] {
  cursor: pointer;
}

input[type=submit] {
  width: 100%;
  max-width: 300px;
  height: auto;
  padding: 10px;
  border-style: none;
  border-radius: 5px;
  background-color: rgb(102, 102, 102);
  color: #ffffff;
  font-weight: bold;
  font-size: 110%;
}
input[type=submit].active {
  cursor: pointer;
}

/**************************************************** */
.docalign {
  display: inline-block;
  padding: 10px;
  vertical-align: top;
}

.imgborder {
  border: 1px solid #eeeeee;
  box-sizing: border-box;
}

.evt {
  width: 100px;
  height: auto;
  vertical-align: top;
}

.evt_big {
  width: 180px;
  height: auto;
  vertical-align: top;
}

.floR {
  display: block;
  float: right;
  margin: 0 0 20px 30px;
}

.floL {
  display: block;
  float: left;
  margin: 0 30px 20px 0;
}

@media screen and (max-width: 767px) {
  .floR,
  .floL {
    float: unset;
    margin: 0 auto 20px;
  }
}
/** .definition-list
===================================*/
.definition-list01 {
  margin: 30px 0;
  padding: 20px 25px;
  border: solid 3px #f4f3f3;
  background-color: #ffffff;
  word-break: break-all;
}
.definition-list01 + .definition-list01 {
  margin: 0 0 30px 0;
}

.definition-list02 {
  margin: 30px 0;
  padding: 20px 25px;
  background-color: #f4f3f3;
  word-break: break-all;
}
.definition-list02 + .definition-list02 {
  margin: 0 0 30px 0;
}

.definition-list03 {
  margin: 30px 0;
  padding: 15px 20px;
  border: 1px solid #cfe4eb;
  background-color: #f2f7f8;
  word-break: break-all;
}
.definition-list03 + .definition-list03 {
  margin: 0 0 30px 0;
}

.definition-list04 {
  padding: 5px 10px;
  border-radius: 3px;
  background-color: #f4f3f3;
  font-size: 13px;
  word-break: break-all;
}
.definition-list04 + .definition-list03 {
  margin: 0 0 10px 0;
}

.flow .definition-list03 {
  border: 1px solid rgb(252.5488, 216.3936, 180.8512);
  background-color: rgb(254.1808, 242.0976, 230.2192);
}

.gate .definition-list03 {
  border: 1px solid rgb(213.9, 235.6954545455, 137.3045454545);
  background-color: rgb(244.5, 250.0681818182, 224.9318181818);
}

@media screen and (max-width: 767px) {
  .definition-list01 {
    padding: 15px 20px;
  }
}
/** .topic-square
===================================*/
.topic-square,
.topic-square_noborder {
  position: relative;
  width: 100%;
  padding: 20px 30px 15px 30px;
  border: 1px solid #00a0c7;
  border-radius: 10px;
  box-sizing: border-box;
  background-color: #ffffff;
}
.topic-square > span:first-child,
.topic-square_noborder > span:first-child {
  position: absolute;
  top: -14px;
  left: 0;
  padding: 0 20px;
  border-radius: 50px;
  box-sizing: border-box;
  background-color: #00a0c7;
  color: #ffffff;
  font-weight: bold;
  margin-inline: 20px;
}
.topic-square > span:first-child.center,
.topic-square_noborder > span:first-child.center {
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 40px);
  margin: 0;
}

.topic-square_noborder {
  border: none;
}

@media screen and (max-width: 767px) {
  .topic-square,
  .topic-square_noborder {
    width: 100%;
    padding: 15px 20px 10px 20px;
  }
  .topic-square > span,
  .topic-square_noborder > span {
    top: -13px;
    left: 10px;
    padding: 0 20px;
    font-size: 14px;
  }
}
/* anchorlink_box
------------------------------------------------------------------------------ */
.anchorlink_box2 ul,
.anchorlink_box3 ul,
.anchorlink_box4 ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.anchorlink_box2 ul li,
.anchorlink_box3 ul li,
.anchorlink_box4 ul li {
  position: relative;
  display: flex;
}
.anchorlink_box2 ul li a,
.anchorlink_box3 ul li a,
.anchorlink_box4 ul li a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 13px 15px;
  border: 1px solid #00a0c7;
  border-radius: 10px;
  box-sizing: border-box;
  background-color: #ffffff;
  color: #00a0c7;
  font-weight: bold;
  line-height: 1.25em;
  text-decoration: none;
  text-align: center;
}
.anchorlink_box2 ul li a:hover,
.anchorlink_box3 ul li a:hover,
.anchorlink_box4 ul li a:hover {
  background: rgba(0, 160, 199, 0.1);
}
.anchorlink_box2 ul li i,
.anchorlink_box3 ul li i,
.anchorlink_box4 ul li i {
  position: absolute;
  top: 51%;
  right: 10px;
  transform: translateY(-50%);
  color: #00a0c7;
  font-size: 10px;
  pointer-events: none;
}

/* .anchorlink_box3 ===============*/
.anchorlink_box3 ul {
  grid-template-columns: 1fr 1fr 1fr;
}

/* .anchorlink_box4 ===============*/
.anchorlink_box4 ul {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.anchorlink_box4 ul li a {
  padding: 13px 25px;
  font-size: 13px;
}

.flow .anchorlink_box2 ul li a,
.flow .anchorlink_box3 ul li a,
.flow .anchorlink_box4 ul li a, .josys-cloud .anchorlink_box2 ul li a,
.josys-cloud .anchorlink_box3 ul li a,
.josys-cloud .anchorlink_box4 ul li a {
  border: 1px solid #f7810d;
  color: #f7810d;
}
.flow .anchorlink_box2 ul li a:hover,
.flow .anchorlink_box3 ul li a:hover,
.flow .anchorlink_box4 ul li a:hover, .josys-cloud .anchorlink_box2 ul li a:hover,
.josys-cloud .anchorlink_box3 ul li a:hover,
.josys-cloud .anchorlink_box4 ul li a:hover {
  background: rgba(247, 129, 13, 0.1);
}
.flow .anchorlink_box2 ul li i,
.flow .anchorlink_box3 ul li i,
.flow .anchorlink_box4 ul li i, .josys-cloud .anchorlink_box2 ul li i,
.josys-cloud .anchorlink_box3 ul li i,
.josys-cloud .anchorlink_box4 ul li i {
  color: #f7810d;
}
.flow .anchorlink_box2 ul li .anchorlink_box_current,
.flow .anchorlink_box3 ul li .anchorlink_box_current,
.flow .anchorlink_box4 ul li .anchorlink_box_current, .josys-cloud .anchorlink_box2 ul li .anchorlink_box_current,
.josys-cloud .anchorlink_box3 ul li .anchorlink_box_current,
.josys-cloud .anchorlink_box4 ul li .anchorlink_box_current {
  background-color: #f7810d;
  color: #ffffff;
}
.flow .anchorlink_box2 ul li .anchorlink_box_current:hover,
.flow .anchorlink_box3 ul li .anchorlink_box_current:hover,
.flow .anchorlink_box4 ul li .anchorlink_box_current:hover, .josys-cloud .anchorlink_box2 ul li .anchorlink_box_current:hover,
.josys-cloud .anchorlink_box3 ul li .anchorlink_box_current:hover,
.josys-cloud .anchorlink_box4 ul li .anchorlink_box_current:hover {
  background: rgba(247, 129, 13, 0.8);
}

.gate .anchorlink_box2 ul li a,
.gate .anchorlink_box3 ul li a,
.gate .anchorlink_box4 ul li a {
  border: 1px solid #9abd1f;
  color: #9abd1f;
}
.gate .anchorlink_box2 ul li a:hover,
.gate .anchorlink_box3 ul li a:hover,
.gate .anchorlink_box4 ul li a:hover {
  background: rgba(154, 189, 31, 0.1);
}
.gate .anchorlink_box2 ul li i,
.gate .anchorlink_box3 ul li i,
.gate .anchorlink_box4 ul li i {
  color: #9abd1f;
}

.addressbook .anchorlink_box2 ul li a,
.addressbook .anchorlink_box3 ul li a,
.addressbook .anchorlink_box4 ul li a {
  border: 1px solid #259f94;
  color: #259f94;
}
.addressbook .anchorlink_box2 ul li a:hover,
.addressbook .anchorlink_box3 ul li a:hover,
.addressbook .anchorlink_box4 ul li a:hover {
  background: rgba(37, 159, 148, 0.1);
}
.addressbook .anchorlink_box2 ul li i,
.addressbook .anchorlink_box3 ul li i,
.addressbook .anchorlink_box4 ul li i {
  color: #259f94;
}

.scheduler .anchorlink_box2 ul li a,
.scheduler .anchorlink_box3 ul li a,
.scheduler .anchorlink_box4 ul li a {
  border: 1px solid #d35857;
  color: #d35857;
}
.scheduler .anchorlink_box2 ul li a:hover,
.scheduler .anchorlink_box3 ul li a:hover,
.scheduler .anchorlink_box4 ul li a:hover {
  background: rgba(211, 88, 87, 0.1);
}
.scheduler .anchorlink_box2 ul li i,
.scheduler .anchorlink_box3 ul li i,
.scheduler .anchorlink_box4 ul li i {
  color: #d35857;
}

.gadgets .anchorlink_box2 ul li a,
.gadgets .anchorlink_box3 ul li a,
.gadgets .anchorlink_box4 ul li a {
  border: 1px solid rgb(127.3982300885, 127.3982300885, 116.6017699115);
  color: rgb(127.3982300885, 127.3982300885, 116.6017699115);
}
.gadgets .anchorlink_box2 ul li a:hover,
.gadgets .anchorlink_box3 ul li a:hover,
.gadgets .anchorlink_box4 ul li a:hover {
  background: rgba(127.3982300885, 127.3982300885, 116.6017699115, 0.1);
}
.gadgets .anchorlink_box2 ul li i,
.gadgets .anchorlink_box3 ul li i,
.gadgets .anchorlink_box4 ul li i {
  color: rgb(127.3982300885, 127.3982300885, 116.6017699115);
}

@media screen and (max-width: 960px) {
  .anchorlink_box2 ul,
  .anchorlink_box3 ul,
  .anchorlink_box4 ul {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 767px) {
  .anchorlink_box2 ul,
  .anchorlink_box3 ul,
  .anchorlink_box4 ul {
    grid-template-columns: 1fr;
  }
  .anchorlink_box2 ul li i,
  .anchorlink_box3 ul li i,
  .anchorlink_box4 ul li i {
    right: 20px;
  }
}
/*
===============================================================================
FAQ　※よくあるご質問関係
===============================================================================
*/
#faq {
  /* #fullopen ===============*/
  /* .faq_accordion ===============*/
}
#faq *:focus {
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#faq #fullopen {
  position: relative;
  display: block;
  width: 200px;
  margin: auto;
  padding: 10px 5px 10px 20px;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: #00a0c7;
  color: #ffffff;
  font-weight: bold;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#faq #fullopen::before {
  position: absolute;
  top: 9px;
  right: 20px;
  font-weight: bold;
  font-size: 28px;
  line-height: 1;
  content: "+";
}
#faq #fullopen.active::before {
  content: "−";
}
#faq .faq_accordion {
  padding-top: 50px;
}
#faq .faq_accordion h3 {
  margin-bottom: 20px;
  padding-left: 20px;
  border-left: 5px solid #00a0c7;
  font-weight: normal;
  font-size: 22px;
}
#faq .faq_accordion ul li:not(:first-child) {
  margin-top: 5px;
}
#faq .faq_accordion ul li .js-accordion-trigger {
  position: relative;
  padding: 15px 45px 12px 60px;
  background-color: #f2f7f8;
  font-size: 18px;
  text-indent: -47px;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#faq .faq_accordion ul li .js-accordion-trigger span {
  margin-right: 15px;
  padding: 5px 10px;
  border-radius: 100vh;
  background-color: #ffffff;
  font-weight: bold;
  font-size: 18px;
}
#faq .faq_accordion ul li .js-accordion-trigger::before {
  position: absolute;
  top: 50%;
  right: -15px;
  transform: translateY(-50%);
  font-weight: bold;
  font-size: 28px;
  line-height: 1;
  content: "+";
}
#faq .faq_accordion ul li .js-accordion-trigger.active::before {
  content: "−";
}
#faq .faq_accordion ul li .accordion-inner {
  display: none;
  padding: 20px;
  border: 1px solid #f2f7f8;
}
#faq.flow .faq_accordion h3 {
  padding-left: 0px;
  border-left: none;
  border-bottom: solid 1px #ddd;
  position: relative;
  cursor: pointer;
}
#faq.flow .faq_accordion h3::before {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  font-weight: bold;
  font-size: 28px;
  line-height: 1;
  content: "+";
}
#faq.flow .faq_accordion h3.active::before {
  content: "−";
}
#faq.josys-cloud .faq_accordion h3 {
  border-left-color: #f7810d;
}
#faq.gate .faq_accordion h3 {
  border-left-color: #9abd1f;
}
#faq.addressbook .faq_accordion h3 {
  border-left-color: #259f94;
}
#faq.scheduler .faq_accordion h3 {
  border-left-color: #d35857;
}
#faq.gadgets .faq_accordion h3 {
  border-left-color: rgb(127.3982300885, 127.3982300885, 116.6017699115);
}

.faq_top .flexbox {
  gap: 10px !important;
  text-align: center;
}
.faq_top .flexbox .box-col {
  width: calc((100% - 60px) / 7);
}
.faq_top .flexbox a {
  text-decoration: none;
}
.faq_top .flexbox img {
  padding: 10px 30px;
}
.faq_top .qa {
  padding: 5px 10px;
  border-radius: 100vh;
  font-weight: bold;
  font-size: 18px;
}
.faq_top .qa.question {
  color: #fff;
  margin-right: 15px;
}
.faq_top .qa.question.flow {
  background-color: #f7810d !important;
}
.faq_top .qa.question.gate {
  background-color: #9abd1f !important;
}
.faq_top .qa.question.address {
  background-color: #259f94 !important;
}
.faq_top .qa.question.scheduler {
  background-color: #d35857 !important;
}
.faq_top .qa.question.gadgets {
  background-color: #c9c9c4 !important;
}
.faq_top .qa.question.bridge {
  background-color: #d2a029 !important;
}
.faq_top .qa.question.gluegent {
  background-color: #00a0c7 !important;
}
.faq_top .qa.answer.flow {
  color: #f7810d;
}
.faq_top .qa.answer.gate {
  color: #9abd1f;
}
.faq_top .qa.answer.address {
  color: #259f94;
}
.faq_top .qa.answer.scheduler {
  color: #d35857;
}
.faq_top .qa.answer.gadgets {
  color: #c9c9c4;
}
.faq_top .qa.answer.bridge {
  color: #d2a029;
}
.faq_top .qa.answer.gluegent {
  color: #00a0c7 !important;
}

@media screen and (max-width: 767px) {
  .faq_top .flexbox {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
  .faq_top .flexbox .box-col {
    width: 80%;
  }
  .faq_top .flexbox img {
    padding: 0px;
  }
  #faq {
    /* .faq_accordion ===============*/
  }
  #faq .faq_accordion ul li .js-accordion-trigger {
    font-size: 15px;
  }
  #faq .faq_accordion ul li .accordion-inner {
    padding: 15px;
  }
}
/*
===============================================================================
PRICE　※価格関係
===============================================================================
*/
#license *:focus {
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/*
===============================================================================
information　※ニュース
===============================================================================
*/
#news {
  border-bottom: 1px solid #cfe4eb;
}
#news li {
  border-top: 1px solid #cfe4eb;
}
#news li a {
  display: flex;
  align-items: flex-start;
  gap: 5px 20px;
  padding: 15px 0;
  text-decoration: none;
}
#news li a:hover .news-data {
  opacity: 0.85;
}
#news li a:hover p {
  text-decoration: none;
}
#news li a .news-data {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 180px;
}
#news li a .news-data:has(span + span) {
  min-width: 230px;
}
#news li a .news-data time {
  min-width: 115px;
  color: rgb(0, 118.9949748744, 148);
  font-weight: bold;
  font-size: 13px;
}
#news li a .news-data span {
  padding: 2px 10px;
  background: #e5ebf2;
  color: #ffffff;
  font-size: 11px;
  line-height: 1.2rem;
  word-break: keep-all;
}
#news li a .news-data span + span {
  margin-left: 5px;
}
#news li a .news-data span.release {
  background-color: #d53593;
}
#news li a .news-data span.news {
  background-color: #047aba;
}
#news li a .news-data span.event {
  background-color: #20b11a;
}
#news li a .news-data span.seminar {
  background-color: #f39a00;
}
#news li a .news-data span.info {
  background-color: #a96fff;
}
#news li a .news-data span.end {
  background-color: #666666;
}
#news li a p {
  margin: 0;
  line-height: 1.5;
  text-decoration: underline;
  word-break: break-all;
}

#information main {
  width: 100%;
  max-width: 980px;
  margin: 60px auto;
  padding: 0 20px;
  box-sizing: border-box;
  text-align: justify;
  word-break: break-all;
  /* .info-top ===============*/
}
#information main.info-top {
  max-width: unset;
  margin: 0;
  padding: 0;
}
#information main.info-top .kv,
#information main.info-top .kv-min {
  background-image: url("/information/img/kv_news.jpg");
}
#information main .information_detail {
  margin-top: 30px;
  /* .information_seminar ===============*/
}
#information main .information_detail__title {
  font-weight: bold;
}
#information main .information_detail__data {
  margin: 10px 0 30px;
  padding-bottom: 30px;
  border-bottom: 3px solid #00a0c7;
  color: #666666;
}
#information main .information_detail p {
  margin-bottom: 30px;
}
#information main .information_detail a {
  word-break: break-all;
}
#information main .information_detail img.size-auto,
#information main .information_detail img.size-full,
#information main .information_detail img.size-large,
#information main .information_detail img.size-medium,
#information main .information_detail .attachment img {
  max-width: 100%;
  height: auto;
}
#information main .information_detail .information_seminar .seminar_entry {
  background-color: #eeeeee;
  text-align: center;
}
#information main .information_detail .information_seminar .seminar_entry p {
  margin: 30px 0;
  padding: 15px 0;
}
#information main .information_detail .information_seminar .seminar_entry a {
  display: inline-block;
  padding: 10px 30px;
  border: 1px solid #00a0c7;
  border-radius: 10px;
  background-color: #00a0c7;
  color: #ffffff;
}
#information main .information_detail .information_seminar .seminar_entry a:hover {
  border: 1px solid #00a0c7;
  background-color: #ffffff;
  color: #00a0c7;
}
#information main .information_detail .information_seminar > dl {
  display: flex;
  background-color: #00a0c7;
}
#information main .information_detail .information_seminar > dl dt {
  width: 150px;
  padding: 10px 15px;
  border-bottom: 1px solid #ffffff;
  box-sizing: border-box;
  color: #ffffff;
}
#information main .information_detail .information_seminar > dl dd {
  width: calc(100% - 150px);
  padding: 10px 15px;
  border-top: 1px solid #8d8d8d;
  border-right: 1px solid #8d8d8d;
  border-bottom: 1px solid #8d8d8d;
  box-sizing: border-box;
  background-color: #ffffff;
}
#information main .information_detail .information_seminar > dl + dl dd {
  border-top: none;
}

@media screen and (max-width: 640px) {
  #news li a {
    flex-direction: column;
  }
  #information main {
    padding: 0 1em;
  }
  #information main .information_detail {
    /* .information_seminar ===============*/
  }
  #information main .information_detail__data {
    margin-bottom: 15px;
    padding-bottom: 15px;
  }
  #information main .information_detail p {
    margin-bottom: 20px;
  }
  #information main .information_detail .information_seminar > dl {
    display: block;
  }
  #information main .information_detail .information_seminar > dl dt,
  #information main .information_detail .information_seminar > dl dd {
    width: 100%;
    border: none;
  }
}
/*
===============================================================================
seminar　※セミナー
===============================================================================
*/
/* セミナーページトップ ===============*/
#seminar {
  /* .tab-area ===============*/
  /* .seminar-box ===============*/
  /* セミナー下位ページ
  ------------------------------------------------------------------------------  */
}
#seminar .kv {
  background-image: url("/common/images/seminar/webinar.webp");
}
#seminar .kv221108 {
  background-image: url("/common/images/seminar/thumbnail/seminar_20221108.jpg");
}
#seminar .kv_seminar-gate-event {
  background-image: url("/common/images/seminar/seminar-gate-event.jpg");
}
#seminar .kv_seminar-gate {
  position: relative;
  background-image: url("/common/images/seminar/top2.jpg");
}
#seminar .kv_seminar-gate::before {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  content: "";
}
#seminar .tab-area {
  width: 100%;
  padding: 60px 20px 0;
  box-sizing: border-box;
  background: #f4f3f3;
}
#seminar .tab-area .tab-btn {
  display: none !important;
}
#seminar .tab-area .tab-list-wrap {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  box-sizing: border-box;
}
#seminar .tab-area .tab-list-wrap .tab-list {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  padding: 20px 10px;
  border: 1px solid rgba(189, 187, 186, 0.5);
  box-sizing: border-box;
  background: #ffffff;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#seminar .tab-area #seminar-future_btn:checked ~ .tab-list-wrap #seminar-future_tab,
#seminar .tab-area #seminar-past_btn:checked ~ .tab-list-wrap #seminar-past_tab {
  background: #00a0c7;
  color: #ffffff;
  font-weight: bold;
}
#seminar .tab-area #seminar-future_btn:checked ~ .tab-list-wrap #seminar-future_tab::before,
#seminar .tab-area #seminar-past_btn:checked ~ .tab-list-wrap #seminar-past_tab::before {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  width: 0;
  height: 0;
  border-width: 18px 0 18px 15px;
  border-style: solid;
  border-color: transparent transparent transparent #00a0c7;
  content: "";
}
#seminar .tab-area #seminar-future_btn:checked ~ .tab-content-wrap #seminar-future_content,
#seminar .tab-area #seminar-past_btn:checked ~ .tab-content-wrap #seminar-past_content {
  display: block !important;
}
#seminar .tab-area .tab-content-wrap .tab-content {
  display: none;
  max-width: 1360px;
  margin: 0 auto;
  padding: 60px 0 10px;
  text-align: left;
}
#seminar .tab-area .tab-content-wrap .tab-content h4.year {
  margin-bottom: 60px;
  padding: 20px;
  border-left: 10px solid #00a0c7;
  background-color: rgba(255, 255, 255, 0.5);
  font-weight: bold;
  font-size: 24px;
}
#seminar .seminar-box {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px 20px;
  margin-bottom: 90px;
}
#seminar .seminar-box > .seminar-box-col {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  gap: 20px;
  padding: 10px 10px 20px;
  border-radius: 10px;
  box-sizing: border-box;
  background-color: #ffffff;
  grid-row: span 3;
}
#seminar .seminar-box > .seminar-box-col > span {
  position: absolute;
  top: -7px;
  left: -5px;
  z-index: 1;
  display: none;
  height: 24px;
  padding: 0 10px;
  border: 1px solid #ffffff;
  background-color: #c20a0a;
  color: #ffffff;
  font-weight: bold;
  line-height: 24px;
  text-align: center;
}
#seminar .seminar-box > .seminar-box-col > a.image {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;
  box-sizing: border-box;
  text-decoration: none;
}
#seminar .seminar-box > .seminar-box-col > a.image > img {
  width: 100%;
  height: 245px;
  transition: 0.3s all;
  -o-object-fit: cover;
     object-fit: cover;
}
#seminar .seminar-box > .seminar-box-col > a.image > span {
  position: absolute;
  right: 8px;
  bottom: 8px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background-color: rgb(66.0307692308, 53.5384615385, 49.9692307692);
  color: #ffffff;
  line-height: 30px;
}
#seminar .seminar-box > .seminar-box-col > a:hover.image img {
  transform: scale(1.03, 1.03);
  transition: 0.3s all;
}
#seminar .seminar-box > .seminar-box-col > .txt > h3 {
  margin-bottom: 20px;
  font-weight: bold;
  font-size: 17px;
  text-align: center;
}
#seminar .seminar-box > .seminar-box-col > .txt > h3 > b,
#seminar .seminar-box > .seminar-box-col > .txt > h3 > span {
  display: block;
  font-weight: normal;
  font-size: 13px;
}
#seminar .seminar-box > .seminar-box-col > .txt > h3 > b {
  font-weight: bold;
}
#seminar .seminar-box > .seminar-box-col > .txt > .txt-time {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 20px;
  line-height: 1.25;
}
#seminar .seminar-box > .seminar-box-col > .txt > .txt-time .txt-time-day {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  padding: 5px 5px 3px 5px;
  box-sizing: border-box;
  background-color: rgb(0, 118.9949748744, 148);
  color: #ffffff;
  font-weight: normal;
  font-size: 13px;
}
#seminar .seminar-box > .seminar-box-col > .txt > .txt-time p {
  width: calc(100% - 50px);
  font-weight: bold;
  font-size: 20px;
}
#seminar .seminar-box > .seminar-box-col > .txt > .txt-time p > span {
  font-weight: normal;
  font-size: 17px;
}
#seminar .seminar-box > .seminar-box-col > .txt > .txt-sub {
  font-size: 13px;
}
#seminar .seminar-box > .seminar-box-col > .btn-seminar {
  text-align: center;
}
#seminar .seminar-box > .seminar-box-col > .btn-seminar > a {
  display: inline-block;
  min-width: 140px;
  height: 40px;
  padding: 0 25px;
  border-radius: 30px;
  background-color: #c20a0a;
  color: #ffffff;
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  text-align: center;
}
#seminar .seminar-box > .seminar-box-col > .btn-seminar > a > i {
  font-size: 14px;
}
#seminar .seminar-box > .seminar-box-col > .btn-seminar > a:hover {
  opacity: 0.8;
}
#seminar #seminar-picup.seminar-box {
  grid-template-columns: 1fr;
  margin: 30px 0 0 0;
}
#seminar #seminar-picup.seminar-box > .seminar-box-col {
  grid-template-columns: 400px 1fr;
  grid-template-rows: max-content;
  padding: 20px;
  background-color: #f4f3f3;
  grid-template-areas: "area1 area2" "area1 area3";
}
#seminar #seminar-picup.seminar-box > .seminar-box-col > a {
  height: 245px;
  grid-area: area1;
}
#seminar #seminar-picup.seminar-box > .seminar-box-col > .txt {
  grid-area: area2;
}
#seminar #seminar-picup.seminar-box > .seminar-box-col > .txt > h3 > b,
#seminar #seminar-picup.seminar-box > .seminar-box-col > .txt > h3 > span {
  font-size: 15px;
}
#seminar #seminar-picup.seminar-box > .seminar-box-col > .txt > .txt-time p {
  font-size: 24px;
}
#seminar #seminar-picup.seminar-box > .seminar-box-col > .txt > .txt-time p > span {
  font-size: 20px;
}
#seminar #seminar-picup.seminar-box > .seminar-box-col > .txt > .txt-sub {
  font-size: 15px;
}
#seminar #seminar-picup.seminar-box > .seminar-box-col > .btn-seminar {
  grid-area: area3;
}
#seminar #seminar-past_content .seminar-box > .seminar-box-col > span {
  display: block;
}
#seminar #seminar-past_content .seminar-box > .seminar-box-col > .txt > .txt-time p {
  font-size: 17px;
}
#seminar #seminar-past_content .seminar-box > .seminar-box-col > .txt > .txt-time p > span {
  display: block;
}
#seminar #seminar-past_content .seminar-box > .seminar-box-col > .btn-seminar > a {
  background-color: rgba(37, 30, 28, 0.5);
}
@media screen and (max-width: 767px) {
  #seminar {
    /* .tab-area ===============*/
    /* .seminar-box ===============*/
  }
  #seminar .tab-area {
    padding: 60px 1em 0;
  }
  #seminar .seminar-box {
    grid-template-columns: 1fr;
  }
  #seminar .seminar-box > .seminar-box-col > a.image {
    height: auto;
  }
  #seminar .seminar-box > .seminar-box-col > a.image img {
    height: auto;
  }
  #seminar .seminar-box > .seminar-box-col > .txt > .txt-time p > span {
    display: block;
  }
  #seminar #seminar-picup.seminar-box > .seminar-box-col {
    grid-template-columns: 1fr;
    padding: 10px 10px 20px 10px;
    grid-template-areas: "area1 area1" "area2 area2" "area3 area3";
  }
  #seminar #seminar-picup.seminar-box > .seminar-box-col > a {
    height: auto;
  }
}
#seminar .kv-praria {
  position: relative;
  max-width: 1200px;
  margin: 60px auto auto auto;
  filter: drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.3));
}
#seminar .kv-praria > .kv-praria-txt,
#seminar .kv-praria > .kv-praria-txt_white,
#seminar .kv-praria > .kv-praria-txt_flow,
#seminar .kv-praria > .kv-praria-txt_gate {
  position: absolute;
  top: calc(50% - 25px);
  left: 20px;
  transform: translateY(-50%);
  width: calc(100% - 40px);
  text-align: left;
}
#seminar .kv-praria > .kv-praria-txt > h1,
#seminar .kv-praria > .kv-praria-txt > h2,
#seminar .kv-praria > .kv-praria-txt_white > h1,
#seminar .kv-praria > .kv-praria-txt_white > h2,
#seminar .kv-praria > .kv-praria-txt_flow > h1,
#seminar .kv-praria > .kv-praria-txt_flow > h2,
#seminar .kv-praria > .kv-praria-txt_gate > h1,
#seminar .kv-praria > .kv-praria-txt_gate > h2 {
  display: inline-block;
  padding: 5px 15px;
  box-sizing: border-box;
  background-color: #00a0c7;
  color: #ffffff;
  font-weight: bold;
  font-size: 3em;
  line-height: 1.25;
}
#seminar .kv-praria > .kv-praria-txt > h2,
#seminar .kv-praria > .kv-praria-txt_white > h2,
#seminar .kv-praria > .kv-praria-txt_flow > h2,
#seminar .kv-praria > .kv-praria-txt_gate > h2 {
  margin: 10px 0 0 0;
  padding: 5px 15px;
  font-size: 18px;
}
#seminar .kv-praria > .kv-praria-txt_white > h1,
#seminar .kv-praria > .kv-praria-txt_white > h2 {
  background-color: #ffffff;
  color: #251e1c;
}
#seminar .kv-praria > .kv-praria-txt_flow > h1,
#seminar .kv-praria > .kv-praria-txt_flow > h2 {
  background-color: #f7810d;
}
#seminar .kv-praria > .kv-praria-txt_gate > h1,
#seminar .kv-praria > .kv-praria-txt_gate > h2 {
  background-color: #9abd1f;
}
#seminar .kv-praria > .kv-praria-sub {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
  background-color: rgba(37, 30, 28, 0.5);
  color: #ffffff;
  font-size: 15px;
  text-align: left;
}
#seminar .kv-praria > .kv-praria-sub > h3 {
  font-weight: bold;
  font-size: 18px;
}
#seminar .kv-praria > img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#seminar .seminar-ttl {
  margin: 0 0 15px 0;
  padding: 10px 10px;
  background-color: #00a0c7;
  color: #ffffff;
  font-weight: bold;
  line-height: 1.5;
}
#seminar .evtcontents {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 600px;
  vertical-align: bottom;
}
#seminar .evtcontents .item {
  padding: 5px;
  box-sizing: border-box;
  text-align: left;
}
#seminar .evtcontents .item:nth-child(1) {
  width: 120px;
}
#seminar .evtcontents .item:nth-child(2) {
  width: calc(100% - 120px);
}
@media screen and (max-width: 767px) {
  #seminar .kv-praria {
    margin: 0;
  }
  #seminar .kv-praria > .kv-praria-txt,
  #seminar .kv-praria > .kv-praria-txt_white,
  #seminar .kv-praria > .kv-praria-txt_flow,
  #seminar .kv-praria > .kv-praria-txt_gate {
    top: 30px;
    left: 10px;
    transform: none;
    width: calc(100% - 20px);
  }
  #seminar .kv-praria > .kv-praria-txt > h1,
  #seminar .kv-praria > .kv-praria-txt > h2,
  #seminar .kv-praria > .kv-praria-txt_white > h1,
  #seminar .kv-praria > .kv-praria-txt_white > h2,
  #seminar .kv-praria > .kv-praria-txt_flow > h1,
  #seminar .kv-praria > .kv-praria-txt_flow > h2,
  #seminar .kv-praria > .kv-praria-txt_gate > h1,
  #seminar .kv-praria > .kv-praria-txt_gate > h2 {
    font-size: 2em;
  }
  #seminar .kv-praria > .kv-praria-txt > h2,
  #seminar .kv-praria > .kv-praria-txt_white > h2,
  #seminar .kv-praria > .kv-praria-txt_flow > h2,
  #seminar .kv-praria > .kv-praria-txt_gate > h2 {
    font-size: 15px;
  }
  #seminar .kv-praria > .kv-praria-sub {
    padding: 10px 10px;
  }
  #seminar .kv-praria > img {
    height: 350px;
    -o-object-position: 80%;
       object-position: 80%;
  }
  #seminar .kv-praria > img.seminar-bnr {
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    margin-top: 10px;
  }
  #seminar .evtcontents {
    max-width: unset;
  }
}
@media screen and (max-width: 640px) {
  #seminar {
    /* .evtcontents ===============*/
  }
  #seminar .evtcontents {
    display: block;
    max-width: unset;
  }
  #seminar .evtcontents .item:nth-child(1) {
    width: 100%;
    text-align: center;
  }
  #seminar .evtcontents .item:nth-child(2) {
    width: 100%;
  }
}

/*
===============================================================================
service Gluegent Gate 専用
※CIMによるスタイル分割　Gate専用のスタイルはここに記載
※ #service 配下で共通化できるものは「_service.scssに記載」
===============================================================================
*/
#service main.gate {
  /* main.gate-index　/service/gate/ で使用
  ------------------------------------------------------------------------------ */
  /* Gate用：見出し（修正版）
  ------------------------------------------------------------------------------ */
  /* main.gate-floating　※サイドボタン＆フローティングバナーで使用
  ------------------------------------------------------------------------------ */
  /* 共通サイドメニュー　※ソリューション配下と機能詳細で使用
  ------------------------------------------------------------------------------ */
  /* main.gate-function　/service/gate/function/ で使用
  ------------------------------------------------------------------------------ */
  /* main.solutions　※/service/gate/solutions/ で使用
  ------------------------------------------------------------------------------ */
}
#service main.gate .kv {
  height: 200px;
  background-image: url(/common/images/service/gate/kv_gate.webp);
}
#service main.gate .kv > .container {
  height: 200px;
}
#service main.gate .kv > .container > .service-ttl {
  line-height: 0;
}
#service main.gate .kv > .container > .service-ttl > img {
  width: 100%;
  max-width: 350px;
}
@media screen and (max-width: 767px) {
  #service main.gate .kv {
    height: 250px;
  }
  #service main.gate .kv > .container {
    height: 250px;
  }
}
#service main.gate.gate-index {
  /*背景カラー*/
  /*三角の区切り*/
  /*kv*/
  /*Reason*/
  /*Function*/
  /*Usecase*/
  /*Column*/
  /*Price*/
}
#service main.gate.gate-index section {
  padding-block: 60px;
}
#service main.gate.gate-index section.bg-gate {
  background-color: #f7f9f0;
}
#service main.gate.gate-index section.bg-gray {
  background-color: #f4f3f3;
}
#service main.gate.gate-index section > .container {
  max-width: 1200px;
}
#service main.gate.gate-index .medical-mv-img {
  display: block;
  margin: 24px auto 30px auto;
  max-width: 100%;
  width: 400px;
  height: auto;
}
#service main.gate.gate-index .triangle_gray,
#service main.gate.gate-index .triangle_gate {
  position: relative;
  padding-block: 60px 30px;
}
#service main.gate.gate-index .triangle_gray:after,
#service main.gate.gate-index .triangle_gate:after {
  position: absolute;
  bottom: -99px;
  left: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  width: 100%;
  height: 100px;
  background: #f4f3f3;
  content: "";
}
#service main.gate.gate-index .triangle_gray + section,
#service main.gate.gate-index .triangle_gate + section {
  padding-top: 150px;
}
#service main.gate.gate-index .triangle_gate:after {
  background: #f7f9f0;
}
@media screen and (max-width: 767px) {
  #service main.gate.gate-index .triangle_gray:after,
  #service main.gate.gate-index .triangle_gate:after {
    bottom: -59px;
    height: 60px;
  }
  #service main.gate.gate-index .triangle_gray + section,
  #service main.gate.gate-index .triangle_gate + section {
    padding-top: 100px;
  }
}
#service main.gate.gate-index .arrow-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  margin: 45px auto 5px auto;
  padding: 13px 30px;
  border: 1px solid #00a0c7;
  border-radius: 10px;
  box-sizing: border-box;
  background-color: #00a0c7;
  color: #ffffff;
  font-weight: bold;
  font-size: 18px;
  text-decoration: none;
  transition: 0.2s;
  filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.2));
}
#service main.gate.gate-index .arrow-btn > i {
  margin-left: 10px;
  font-size: 15px;
}
#service main.gate.gate-index .arrow-btn:hover {
  background-color: #ffffff;
  color: #00a0c7;
}
#service main.gate.gate-index .arrow-btn:active {
  filter: none;
}
#service main.gate.gate-index .kv-gate-top {
  background: url(/common/images/service/gate/top-kv.jpg) no-repeat center/cover;
  background-color: rgba(255, 255, 255, 0.5);
  background-blend-mode: lighten;
}
#service main.gate.gate-index .kv-gate-top .kv-gate-top_inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 1rem;
}
#service main.gate.gate-index .kv-gate-top .kv-gate-top_inner .kv-gate-top_title {
  margin-bottom: 30px;
}
#service main.gate.gate-index .kv-gate-top .kv-gate-top_inner .kv-gate-top_inner-bottom {
  display: grid;
  grid-template-columns: 1fr 470px;
  grid-template-rows: auto 1fr;
  gap: 45px 10px;
  grid-template-areas: "area1 area2" "area3 area2";
}
#service main.gate.gate-index .kv-gate-top .kv-gate-top_inner .kv-gate-top_inner-bottom h1 {
  margin-bottom: 0 !important;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.7);
  font-weight: bold;
  font-size: 32px !important;
  line-height: 1.5;
  grid-area: area1;
}
#service main.gate.gate-index .kv-gate-top .kv-gate-top_inner .kv-gate-top_inner-bottom h1 .txt-color-blue {
  color: rgb(0, 118.9949748744, 148);
}
#service main.gate.gate-index .kv-gate-top .kv-gate-top_inner .kv-gate-top_inner-bottom h1 .txt-color-green {
  color: #9abd1f;
}
#service main.gate.gate-index .kv-gate-top .kv-gate-top_inner .kv-gate-top_inner-bottom h1 .txt-size-min {
  font-size: 28px;
}
#service main.gate.gate-index .kv-gate-top .kv-gate-top_inner .kv-gate-top_inner-bottom .img-screen {
  margin-inline: auto;
  grid-area: area2;
}
#service main.gate.gate-index .kv-gate-top .kv-gate-top_inner .kv-gate-top_inner-bottom ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 15px 30px;
  margin-bottom: auto;
  grid-area: area3;
}
#service main.gate.gate-index .kv-gate-top .kv-gate-top_inner .kv-gate-top_inner-bottom ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  border: 1px solid #f9852e;
  border-radius: 100vh;
  background-image: linear-gradient(to top, rgb(250, 107, 0) 0%, rgb(248, 158, 91) 100%);
  color: #ffffff;
  font-weight: bold;
  font-weight: bold;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.2rem;
  text-decoration: none;
  transition: 0.2s;
  filter: drop-shadow(0px 2px 4px rgba(212, 92, 0, 0.6));
}
#service main.gate.gate-index .kv-gate-top .kv-gate-top_inner .kv-gate-top_inner-bottom ul li a > img {
  opacity: 1;
}
#service main.gate.gate-index .kv-gate-top .kv-gate-top_inner .kv-gate-top_inner-bottom ul li a.demo {
  border: solid 1px rgb(0, 116, 140);
  background-image: linear-gradient(to top, rgb(0, 116, 140) 0%, #33b1cc 85%);
  filter: drop-shadow(0px 2px 4px rgba(0, 116, 140, 0.6));
}
#service main.gate.gate-index .kv-gate-top .kv-gate-top_inner .kv-gate-top_inner-bottom ul li a:hover {
  transform: translate(0, 2px);
  filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.3));
}
#service main.gate.gate-index .kv-gate-top .kv-gate-top_inner .kv-gate-top_inner-bottom ul li a:active {
  top: 1px;
  box-shadow: none;
  filter: none;
}
@media screen and (max-width: 960px) {
  #service main.gate.gate-index .kv-gate-top .kv-gate-top_inner .kv-gate-top_inner-bottom {
    grid-template-columns: 1fr 350px;
  }
  #service main.gate.gate-index .kv-gate-top .kv-gate-top_inner .kv-gate-top_inner-bottom h1 {
    font-size: 22px !important;
  }
  #service main.gate.gate-index .kv-gate-top .kv-gate-top_inner .kv-gate-top_inner-bottom h1 .txt-size-min {
    font-size: 18px;
  }
}
@media screen and (max-width: 767px) {
  #service main.gate.gate-index .kv-gate-top .kv-gate-top_inner {
    padding-block: 1.5rem 2rem;
  }
  #service main.gate.gate-index .kv-gate-top .kv-gate-top_inner .kv-gate-top_inner-bottom {
    grid-template-columns: 1fr;
    gap: 20px;
    grid-template-areas: "area1" "area2" "area3";
  }
  #service main.gate.gate-index .kv-gate-top .kv-gate-top_inner .kv-gate-top_inner-bottom h1 {
    font-size: 18px !important;
  }
  #service main.gate.gate-index .kv-gate-top .kv-gate-top_inner .kv-gate-top_inner-bottom h1 .txt-size-min {
    font-size: 15px;
  }
  #service main.gate.gate-index .kv-gate-top .kv-gate-top_inner .kv-gate-top_inner-bottom .img-screen {
    width: 80%;
  }
}
#service main.gate.gate-index .reason-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
  gap: 45px 75px;
}
#service main.gate.gate-index .reason-list .reason-list_box {
  display: flex;
  gap: 20px;
}
#service main.gate.gate-index .reason-list .reason-list_box .reason-list_image {
  position: relative;
}
#service main.gate.gate-index .reason-list .reason-list_box .reason-list_image span {
  color: #00a0c7;
  font-weight: bold;
  font-size: 40px;
  line-height: 1;
}
#service main.gate.gate-index .reason-list .reason-list_box .reason-list_image .reason-list_circle {
  width: 230px;
  height: 230px;
  border: solid 2px #00a0c7;
  border-radius: 100vh;
  background: #ffffff;
  text-align: center;
}
#service main.gate.gate-index .reason-list .reason-list_box .reason-list_image .reason-list_circle h3 {
  position: relative;
  top: 15px;
  width: 100%;
  background: #f7f9f0;
  color: #00a0c7;
  font-weight: bold;
  font-size: 15px !important;
  padding-block: 3px;
}
#service main.gate.gate-index .reason-list .reason-list_box .reason-list_image .reason-list_circle img {
  position: relative;
  bottom: -15px;
}
#service main.gate.gate-index .reason-list .reason-list_box .reason-list_text {
  margin-top: 50px;
}
#service main.gate.gate-index .reason-list .reason-list_box .reason-list_text span {
  background: linear-gradient(transparent 75%, #fab58a 75%);
}
@media screen and (max-width: 980px) {
  #service main.gate.gate-index .reason-list {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  #service main.gate.gate-index .reason-list .reason-list_box {
    flex-direction: column;
    align-items: center;
  }
  #service main.gate.gate-index .reason-list .reason-list_box .reason-list_text {
    margin-top: 10px;
  }
}
#service main.gate.gate-index .function-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 45px 20px;
  max-width: 980px;
  margin-inline: auto;
}
#service main.gate.gate-index .function-box .function-box-inner {
  width: 300px;
  text-decoration: none;
}
#service main.gate.gate-index .function-box .function-box-inner .circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 170px;
  height: 170px;
  margin: 0 auto 10px auto;
  border-radius: 100vh;
  background: linear-gradient(to top, #11576a 0%, #279ebf 85%);
  transition: 0.3s all;
}
#service main.gate.gate-index .function-box .function-box-inner .txt {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}
#service main.gate.gate-index .function-box .function-box-inner .txt > h3 {
  margin-bottom: 0 !important;
  color: #00a0c7;
}
#service main.gate.gate-index .function-box .function-box-inner .txt .yazirusi {
  position: relative;
  left: -10%;
  display: block;
  transform: skew(45deg);
  width: 110%;
  height: 11px;
  border-right: 3px solid;
  border-bottom: 2px solid;
  -o-border-image: linear-gradient(to right, #279ebf, #2189a3, #11576a) 1;
     border-image: linear-gradient(to right, #279ebf, #2189a3, #11576a) 1;
  transition: 0.3s all;
  margin-inline: auto;
}
#service main.gate.gate-index .function-box .function-box-inner:hover .circle {
  transform: scale(1.03, 1.03);
  filter: drop-shadow(0 0 4px rgba(0, 116, 140, 0.4));
}
#service main.gate.gate-index .function-box .function-box-inner:hover .circle > img {
  opacity: 1;
}
#service main.gate.gate-index .function-box .function-box-inner:hover .txt .yazirusi {
  left: -15%;
  width: 120%;
}
#service main.gate.gate-index .function-box .function-box-inner:active .circle {
  transform: scale(1, 1);
}
#service main.gate.gate-index .function-box .function-box-inner:active .txt .yazirusi {
  left: -10%;
  width: 110%;
}
#service main.gate.gate-index .top-usecase {
  display: flex;
  gap: 40px;
  box-sizing: border-box;
}
#service main.gate.gate-index .top-usecase a.usecase-box {
  display: block;
  width: calc((100% - 80px) / 3);
  padding: 30px;
  border-top: 4px solid #9abd1f;
  border-radius: 0 0 10px 10px;
  box-sizing: border-box;
  background-color: white;
  text-decoration: none;
  transition: 0.2s;
}
#service main.gate.gate-index .top-usecase a.usecase-box h3 {
  color: #9abd1f;
  font-size: 22px;
  text-align: center;
}
#service main.gate.gate-index .top-usecase a.usecase-box .image {
  width: min(200px, 100%);
  margin: 20px auto;
  overflow: hidden;
  border-radius: 100vh;
}
#service main.gate.gate-index .top-usecase a.usecase-box .image img {
  opacity: 1;
  border-radius: 100vh;
  transition: 0.2s;
  -o-object-fit: fill;
     object-fit: fill;
}
#service main.gate.gate-index .top-usecase a.usecase-box p {
  margin: 0;
}
#service main.gate.gate-index .top-usecase a.usecase-box:hover {
  filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));
}
#service main.gate.gate-index .top-usecase a.usecase-box:hover .image img {
  transform: scale(1.03, 1.03);
}
@media screen and (max-width: 767px) {
  #service main.gate.gate-index .top-usecase {
    flex-direction: column;
  }
  #service main.gate.gate-index .top-usecase a.usecase-box {
    width: 100%;
    padding: 20px;
  }
}
#service main.gate.gate-index .column-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
#service main.gate.gate-index .column-list a {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: calc((100% - 30px) / 2);
  padding: 20px;
  border-radius: 10px;
  box-sizing: border-box;
  background: #ffffff;
  text-decoration: none;
  transition: 0.2s;
}
#service main.gate.gate-index .column-list a .image {
  width: 160px;
  height: 160px;
  margin: auto;
  overflow: hidden;
  border-radius: 100vh;
}
#service main.gate.gate-index .column-list a .image > img {
  opacity: 1;
  height: 100%;
  transition: 0.2s;
  -o-object-fit: fill;
     object-fit: fill;
}
#service main.gate.gate-index .column-list a .txt {
  width: 100%;
}
#service main.gate.gate-index .column-list a .txt > h3 {
  color: #9abd1f;
  font-size: 18px;
}
#service main.gate.gate-index .column-list a:has(.image) .txt {
  width: calc(100% - 180px);
}
#service main.gate.gate-index .column-list a:hover {
  filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));
}
#service main.gate.gate-index .column-list a:hover .image > img {
  transform: scale(1.03, 1.03);
}
@media screen and (max-width: 767px) {
  #service main.gate.gate-index .column-list {
    flex-direction: column;
  }
  #service main.gate.gate-index .column-list a {
    flex-direction: column;
    width: 100%;
  }
  #service main.gate.gate-index .column-list a:has(.image) .txt {
    width: 100%;
  }
}
#service main.gate.gate-index .price-box-gate {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
#service main.gate.gate-index .price-box-gate .price-box-gate-inner {
  width: calc((100% - 60px) / 3);
  padding: 30px;
  border-top: 3px solid #9abd1f;
  border-radius: 0 0 10px 10px;
  box-sizing: border-box;
  background-color: #ffffff;
  text-align: center;
  filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.1));
}
#service main.gate.gate-index .price-box-gate .price-box-gate-inner h3 {
  padding: 10px;
  border-radius: 10px;
  background: #9abd1f;
  color: #ffffff;
  font-size: 24px;
}
#service main.gate.gate-index .price-box-gate .price-box-gate-inner .price {
  margin-top: 30px;
}
#service main.gate.gate-index .price-box-gate .price-box-gate-inner .price span {
  font-size: 24px;
}
@media screen and (max-width: 767px) {
  #service main.gate.gate-index .price-box-gate {
    flex-direction: column;
  }
  #service main.gate.gate-index .price-box-gate .price-box-gate-inner {
    width: 100%;
  }
}
#service main.gate .gate-ttl {
  margin-bottom: 45px;
  font-size: 30px;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
#service main.gate .gate-ttl > .gate-ttl-sub {
  display: block;
  margin-bottom: 5px;
  color: rgba(0, 160, 199, 0.5);
  font-size: 24px;
  font-family: "Sawarabi Gothic", sans-serif;
  letter-spacing: initial;
}
@media screen and (max-width: 767px) {
  #service main.gate .gate-ttl {
    margin-bottom: 30px;
    font-size: 24px;
  }
  #service main.gate .gate-ttl > .gate-ttl-sub {
    font-size: 16px;
  }
}
#service main.gate.gate-floating {
  /* .bnr-download */
  /* .bnr-demo */
}
#service main.gate.gate-floating .bnr-download {
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 9999;
  display: none;
  width: min(100% - 30px, 380px);
}
#service main.gate.gate-floating .bnr-download-close {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 1;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
#service main.gate.gate-floating .bnr-download-link {
  display: block;
  border-radius: 5px;
  background-color: #ffffff;
}
#service main.gate.gate-floating .bnr-download-img {
  width: 100%;
  filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.2));
}
#service main.gate.gate-floating .bnr-demo {
  position: fixed;
  top: 50%;
  right: -55px;
  z-index: 10000;
  transform: translateY(-50%);
  width: 50px;
  border-radius: 10px 0 0 10px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  background: linear-gradient(180deg, #00a0c7 0%, rgb(0, 118.9949748744, 148) 100%);
  color: #ffffff;
  text-decoration: none;
}
#service main.gate.gate-floating .bnr-demo-inner {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 0 15px 0;
  font-weight: bold;
  letter-spacing: 0.05em;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
#service main.gate.gate-floating .bnr-demo-inner::before {
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  border-radius: 100%;
  background-image: url(/common/images/service/gate/bnr_ico_monitor.svg);
  background-position: center;
  background-size: 20px auto;
  background-repeat: no-repeat;
  background-color: #ffffff;
  content: "";
  mix-blend-mode: screen;
}
#service main.gate.gate-floating .bnr-demo:hover {
  background: #81ccdc;
}
@media screen and (max-width: 767px) {
  #service main.gate.gate-floating {
    /* .bnr-demo */
  }
  #service main.gate.gate-floating .bnr-demo {
    display: none;
  }
}
#service main.gate.solutions .container-sticky, #service main.gate.gate-function .container-sticky {
  overflow: initial;
}
#service main.gate.solutions .container-separate, #service main.gate.gate-function .container-separate {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr 210px;
  -moz-column-gap: 5%;
       column-gap: 5%;
}
@media screen and (max-width: 767px) {
  #service main.gate.solutions .container-separate, #service main.gate.gate-function .container-separate {
    display: block;
  }
}
#service main.gate.solutions .container-separate-side, #service main.gate.gate-function .container-separate-side {
  position: sticky;
  top: 130px;
  margin-top: 60px;
  margin-bottom: 60px;
}
@media screen and (min-width: 768px) and (max-width: 1129px) {
  #service main.gate.solutions .container-separate-side, #service main.gate.gate-function .container-separate-side {
    top: 105px;
  }
}
#service main.gate.solutions .container-separate-main, #service main.gate.gate-function .container-separate-main {
  margin-top: 60px;
  margin-bottom: 60px;
}
#service main.gate.solutions .side-bnr, #service main.gate.gate-function .side-bnr {
  display: block;
  text-align: center;
}
#service main.gate.solutions .side-bnr img, #service main.gate.gate-function .side-bnr img {
  width: min(100%, 360px);
}
#service main.gate.solutions .side-bnr + .side-bnr, #service main.gate.gate-function .side-bnr + .side-bnr {
  margin-top: 20px;
}
#service main.gate.solutions .side-menu, #service main.gate.gate-function .side-menu {
  border-left: 1px solid #bdbbba;
}
#service main.gate.solutions .side-menu > h2, #service main.gate.gate-function .side-menu > h2 {
  margin-bottom: initial;
  padding: 0 0 15px 15px;
  border-bottom: 1px solid #9abd1f;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.5;
  text-align: left;
}
#service main.gate.solutions .side-menu > ul > li > a, #service main.gate.gate-function .side-menu > ul > li > a {
  position: relative;
  display: block;
  padding: 10px 10px 10px 15px;
  font-size: 14px;
  text-decoration: none;
  transition: 0.3s all;
}
@media (hover: hover) {
  #service main.gate.solutions .side-menu > ul > li > a:hover, #service main.gate.gate-function .side-menu > ul > li > a:hover {
    color: #9abd1f;
  }
}
#service main.gate.solutions .side-menu > ul > li > a > i, #service main.gate.gate-function .side-menu > ul > li > a > i {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  color: #7a7a79;
  font-size: 10px;
}
#service main.gate.solutions .side-menu > ul > li.current > a, #service main.gate.gate-function .side-menu > ul > li.current > a {
  background-color: #9abd1f;
  color: #ffffff;
  font-weight: bold;
}
#service main.gate.solutions .side-menu > ul > li.current > a > i, #service main.gate.gate-function .side-menu > ul > li.current > a > i {
  display: none;
}
#service main.gate.gate-function {
  /* .grid  ===============*/
  /* .card  ===============*/
  /* .ttl  ===============*/
  /* .figure  ===============*/
  /* .bnr  ===============*/
  /* .column-box  ===============*/
}
#service main.gate.gate-function .container {
  max-width: 1200px;
}
#service main.gate.gate-function .grid-index {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 40px;
  margin-top: 60px;
}
@media screen and (min-width: 768px) {
  #service main.gate.gate-function .grid-index {
    gap: 60px 40px;
    margin-bottom: 40px;
  }
}
#service main.gate.gate-function .grid-figure {
  display: grid;
  grid-template-columns: 60% 1fr;
  gap: 30px 40px;
}
@media screen and (max-width: 1129px) {
  #service main.gate.gate-function .grid-figure {
    grid-template-columns: 1fr;
  }
}
#service main.gate.gate-function .grid-figure-center {
  align-self: center;
}
#service main.gate.gate-function .card-index {
  display: grid;
  border-radius: 15px;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1019607843), 0 3px 6px rgba(0, 0, 0, 0.1607843137);
  background: #ffffff;
  text-decoration: initial !important;
}
@media screen and (min-width: 768px) and (max-width: 1129px) {
  #service main.gate.gate-function .card-index {
    width: calc((100% - 40px) / 2);
  }
}
@media screen and (min-width: 1130px) {
  #service main.gate.gate-function .card-index {
    width: calc((100% - 80px) / 3);
  }
}
@media (hover: hover) {
  #service main.gate.gate-function .card-index:hover {
    opacity: 0.75;
  }
  #service main.gate.gate-function .card-index:hover .card-index-ico {
    transform: scale(1.1);
  }
}
#service main.gate.gate-function .card-index-body {
  padding: 25px;
}
#service main.gate.gate-function .card-index-foot {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: end;
  height: 180px;
  background-color: #f4f3f3;
}
#service main.gate.gate-function .card-index-ttl {
  font-weight: bold;
  font-size: 20px;
  text-decoration: underline;
  text-align: center;
}
#service main.gate.gate-function .card-index-desc {
  margin-top: 25px;
  font-size: 14px;
  line-height: 1.7;
}
#service main.gate.gate-function .card-index-ico {
  height: 120px;
  transition: 0.3s transform;
}
#service main.gate.gate-function .ttl-ico {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
#service main.gate.gate-function .ttl-ico-img {
  width: 50px;
}
#service main.gate.gate-function .ttl-ico-hx {
  margin-bottom: initial;
  font-size: 32px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: left;
  font-feature-settings: "palt";
}
@media screen and (max-width: 1129px) {
  #service main.gate.gate-function .ttl-ico {
    flex-direction: column;
    align-items: center;
  }
  #service main.gate.gate-function .ttl-ico-hx {
    text-align: center;
  }
  #service main.gate.gate-function .ttl-ico-hx {
    font-size: 28px;
  }
}
#service main.gate.gate-function .ttl-hline {
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 3px solid #9abd1f;
  font-weight: bold;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: left;
  font-feature-settings: "palt";
}
@media screen and (min-width: 768px) {
  #service main.gate.gate-function .ttl-hline {
    font-size: 28px;
  }
}
#service main.gate.gate-function .ttl-vline-lg {
  position: relative;
  margin-bottom: 20px;
  padding-left: 20px;
  font-weight: bold;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
}
@media screen and (min-width: 768px) {
  #service main.gate.gate-function .ttl-vline-lg {
    font-size: 24px;
  }
}
#service main.gate.gate-function .ttl-vline-lg::before, #service main.gate.gate-function .ttl-vline-lg::after {
  position: absolute;
  top: 0.25em;
  display: block;
  height: 1em;
  background-color: #9abd1f;
  content: "";
}
#service main.gate.gate-function .ttl-vline-lg::before {
  left: 0;
  width: 2px;
}
#service main.gate.gate-function .ttl-vline-lg::after {
  left: 4px;
  width: 5px;
  border-radius: 0 4px 4px 0;
}
#service main.gate.gate-function .ttl-vline-md {
  position: relative;
  margin-bottom: 25px;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: rgb(244.5, 250.0681818182, 224.9318181818);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
}
@media screen and (min-width: 768px) {
  #service main.gate.gate-function .ttl-vline-md {
    font-size: 20px;
  }
}
#service main.gate.gate-function .ttl-vline-md::before {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  transform: translateY(-50%);
  width: 5px;
  height: 20px;
  border-radius: 0 4px 4px 0;
  background-color: #9abd1f;
  content: "";
}
#service main.gate.gate-function .ttl-disc {
  position: relative;
  margin-bottom: 10px;
  padding-left: 20px;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  #service main.gate.gate-function .ttl-disc {
    font-size: 20px;
  }
}
#service main.gate.gate-function .ttl-disc::before {
  position: absolute;
  top: 8px;
  left: 0;
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: #9abd1f;
  content: "";
}
#service main.gate.gate-function .txt-bold {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  #service main.gate.gate-function .txt-bold {
    font-size: 20px;
  }
}
#service main.gate.gate-function .txt-center br {
  text-align: center;
}
@media screen and (max-width: 1129px) {
  #service main.gate.gate-function .txt-center br {
    display: none;
  }
}
@media screen and (min-width: 1130px) {
  #service main.gate.gate-function .figure-main {
    padding: 40px 25px;
    border: 1px solid #bdbbba;
    border-radius: 15px;
  }
}
#service main.gate.gate-function .figure-sub {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: auto;
  padding: 35px 25px;
  border: 1px solid #bdbbba;
  border-radius: 15px;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  #service main.gate.gate-function .figure-sub {
    padding: 0;
    border: 0;
  }
}
#service main.gate.gate-function .bnr-link {
  display: flex;
  align-items: flex-start;
  gap: 25px;
  padding: 35px 25px;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1019607843), 0 3px 6px rgba(0, 0, 0, 0.1607843137);
  background-color: #ffffff;
  text-decoration: initial !important;
}
@media screen and (max-width: 960px) {
  #service main.gate.gate-function .bnr-link {
    flex-direction: column;
  }
}
@media (hover: hover) {
  #service main.gate.gate-function .bnr-link:hover {
    opacity: 0.75;
  }
  #service main.gate.gate-function .bnr-link:hover .bnr-link-img img {
    transform: scale(1.1);
  }
}
#service main.gate.gate-function .bnr-link-img {
  width: 100%;
  overflow: hidden;
}
@media screen and (min-width: 1130px) {
  #service main.gate.gate-function .bnr-link-img {
    flex: none;
    width: 160px;
  }
}
#service main.gate.gate-function .bnr-link-img img {
  width: 100%;
  transition: 0.3s transform;
}
#service main.gate.gate-function .bnr-link-ttl {
  margin-bottom: 15px;
  color: rgb(0, 118.9949748744, 148);
  font-weight: bold;
  text-decoration: underline;
}
#service main.gate.gate-function .bnr-link-desc {
  font-size: 14px;
}
#service main.gate.gate-function .column-box {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}
#service main.gate.gate-function .column-box .column-box-col {
  display: grid;
  grid-template-rows: subgrid;
  gap: 15px;
  padding: 0 10px 10px 10px;
  border-radius: 10px;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1019607843), 0 3px 6px rgba(0, 0, 0, 0.1607843137);
  background: #ffffff;
  text-decoration: initial !important;
  grid-row: span 3;
}
@media (hover: hover) {
  #service main.gate.gate-function .column-box .column-box-col:hover > figure img {
    transform: scale(1.03, 1.03);
  }
}
#service main.gate.gate-function .column-box .column-box-col > figure {
  height: 130px;
  margin: 0 -10px;
  overflow: hidden;
  border-radius: 9px 9px 0 0;
}
#service main.gate.gate-function .column-box .column-box-col > figure img {
  width: 100%;
  transition: 0.3s all;
  -o-object-fit: cover;
     object-fit: cover;
}
#service main.gate.gate-function .column-box .column-box-col > h3 {
  color: #9abd1f;
  font-size: 15px !important;
}
#service main.gate.gate-function .column-box .column-box-col > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: auto;
}
#service main.gate.gate-function .column-box .column-box-col > ul > li {
  list-style-type: none;
  margin-left: 0;
  padding: 1px 10px 0 10px;
  border-radius: 100vh;
  background-color: #f4f3f3;
  font-size: 12px;
}
@media screen and (max-width: 640px) {
  #service main.gate.gate-function .column-box {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  #service main.gate.gate-function .column-box > a.column-box-col {
    align-items: center;
    grid-template-columns: 130px 1fr;
    grid-template-rows: auto;
    gap: 10px;
    padding: 10px 10px 10px 0;
    grid-template-areas: "area1 area2" "area1 area3";
  }
  #service main.gate.gate-function .column-box > a.column-box-col > figure {
    width: 130px;
    height: calc(100% + 20px);
    margin: -10px 0;
    border-radius: 9px 0 0 9px;
    grid-area: area1;
  }
  #service main.gate.gate-function .column-box > a.column-box-col > figure img {
    width: 130px;
    height: 100%;
  }
  #service main.gate.gate-function .column-box > a.column-box-col > h3 {
    font-size: 13px !important;
    grid-area: area2;
  }
  #service main.gate.gate-function .column-box > a.column-box-col > ul {
    grid-area: area3;
  }
}
#service main.gate.solutions {
  /* .solutions-box  ===============*/
  /* article-head ===============*/
  /* .btn-row  ===============*/
  /* solutions：記事トップ絞り込み機能 ===============*/
}
#service main.gate.solutions .solutions-box {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
}
#service main.gate.solutions .solutions-box > .solutions-box-col3 {
  position: relative;
  width: calc((100% - 30px) / 3);
  margin: 0 10px 0 0;
  overflow: hidden;
  border: 1px solid rgba(37, 30, 28, 0.2);
  border-radius: 10px;
  box-sizing: border-box;
  background-color: #ffffff;
}
#service main.gate.solutions .solutions-box > .solutions-box-col3:nth-child(n+4) {
  margin-top: 10px;
}
#service main.gate.solutions .solutions-box > .solutions-box-col3 a {
  display: block;
  height: 100%;
  text-decoration: none;
}
#service main.gate.solutions .solutions-box > .solutions-box-col3 a > .image {
  height: 150px;
  margin: 0 auto;
  overflow: hidden;
}
#service main.gate.solutions .solutions-box > .solutions-box-col3 a > .image img {
  width: 100%;
  height: 150px;
  transition: 0.3s all;
  -o-object-fit: cover;
     object-fit: cover;
}
#service main.gate.solutions .solutions-box > .solutions-box-col3 a:hover > .image img {
  transform: scale(1.03, 1.03);
  transition: 0.3s all;
}
#service main.gate.solutions .solutions-box > .solutions-box-col3 a > .txt {
  padding: 10px 15px;
}
#service main.gate.solutions .solutions-box > .solutions-box-col3 a > .txt > h4 {
  color: #9abd1f;
  line-height: 1.5;
}
#service main.gate.solutions .solutions-box > .solutions-box-col3 a > .txt > span {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 15px;
  background-color: #f4f3f3;
  font-size: 12px;
  line-height: 1;
}
#service main.gate.solutions .solutions-box > .solutions-box-col3 a > .txt > span:not(:last-child) {
  margin-right: 8px;
}
#service main.gate.solutions .solutions-box > .solutions-box-col3 a > .txt > span.customer {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 6px 10px 5px 10px;
  border-radius: 0;
  background-color: #00a0c7;
  color: #ffffff;
}
#service main.gate.solutions section.article-head {
  margin-bottom: 0;
  text-align: center;
}
#service main.gate.solutions section.article-head h1 {
  font-weight: bold;
}
#service main.gate.solutions section.article-head p:last-of-type {
  margin-bottom: 0;
}
#service main.gate.solutions .btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
#service main.gate.solutions .btn-row .btn-fill {
  position: relative;
  width: 240px;
  padding: 10px;
  box-sizing: border-box;
  background: #f4f3f3;
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
}
#service main.gate.solutions .btn-row .btn-fill > i {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: #bdbbba;
  font-size: 0.5em;
}
#service main.gate.solutions .btn-row .btn-fill:hover {
  opacity: 0.75;
}
@media screen and (max-width: 767px) {
  #service main.gate.solutions {
    /* .solutions-box  ===============*/
  }
  #service main.gate.solutions .solutions-box {
    display: block;
    margin-right: auto;
    margin-left: auto;
  }
  #service main.gate.solutions .solutions-box > .solutions-box-col3 {
    width: 100%;
    margin: 0 auto;
  }
  #service main.gate.solutions .solutions-box > .solutions-box-col3:not(:first-child) {
    margin-top: 30px;
  }
  #service main.gate.solutions .solutions-box > .solutions-box-col3 a > .image {
    height: auto;
  }
  #service main.gate.solutions .solutions-box > .solutions-box-col3 a > .image img {
    height: auto;
  }
}
#service main.gate.solutions [value=zerotrust]:checked ~ .gate-tab-list .gate-tab-list_block:not([data-category~=zerotrust]),
#service main.gate.solutions [value=idaas]:checked ~ .gate-tab-list .gate-tab-list_block:not([data-category~=idaas]),
#service main.gate.solutions [value=certification]:checked ~ .gate-tab-list .gate-tab-list_block:not([data-category~=certification]),
#service main.gate.solutions [value=security]:checked ~ .gate-tab-list .gate-tab-list_block:not([data-category~=security]) {
  display: none;
}
#service main.gate.solutions input[type=radio] {
  display: none;
}
#service main.gate.solutions .categories-box {
  display: flex;
  justify-content: space-between;
}
#service main.gate.solutions .categories-box label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(25% - 10px);
  padding: 10px 10px 7px 10px;
  border-bottom: 2px solid #9abd1f;
  border-radius: 10px 10px 0 0;
  box-sizing: border-box;
  color: #9abd1f;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
#service main.gate.solutions [value=zerotrust]:checked ~ .categories-box [for=zerotrust],
#service main.gate.solutions [value=idaas]:checked ~ .categories-box [for=idaas],
#service main.gate.solutions [value=certification]:checked ~ .categories-box [for=certification],
#service main.gate.solutions [value=security]:checked ~ .categories-box [for=security] {
  background-color: #9abd1f;
  color: #ffffff;
  pointer-events: none;
}
#service main.gate.solutions [value=zerotrust] ~ .categories-box [for=zerotrust]:hover,
#service main.gate.solutions [value=idaas] ~ .categories-box [for=idaas]:hover,
#service main.gate.solutions [value=certification] ~ .categories-box [for=certification]:hover,
#service main.gate.solutions [value=security] ~ .categories-box [for=security]:hover {
  background-color: #9abd1f;
  color: #ffffff;
}
#service main.gate.solutions .category-tab {
  padding-top: 0;
}
#service main.gate.solutions .category-tab .tab-title {
  width: 100%;
}
#service main.gate.solutions .category-tab .tab-title p {
  margin-bottom: 0;
}

/* Gate用：コンバージョンボタン
------------------------------------------------------------------------------ */
#cv-area,
#cv-area-top {
  max-width: 940px;
  margin: 0 auto;
  /* .cv-btn-area ===============*/
  /* .contact-btn-area ===============*/
}
#cv-area h2,
#cv-area-top h2 {
  color: #00a0c7;
  font-size: 24px !important;
  text-align: center;
}
#cv-area a,
#cv-area-top a {
  font-weight: bold;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.2rem;
  text-decoration: none;
  transition: 0.2s;
}
#cv-area .cv-btn-area,
#cv-area-top .cv-btn-area {
  display: flex;
  gap: 45px 5%;
  margin: 30px auto;
}
#cv-area .cv-btn-area .cv-btn-area_col,
#cv-area-top .cv-btn-area .cv-btn-area_col {
  display: flex;
  flex-direction: column;
  justify-content: end;
  width: 100%;
}
#cv-area .cv-btn-area .cv-btn-area_col .txt,
#cv-area-top .cv-btn-area .cv-btn-area_col .txt {
  width: 65%;
  margin: 0 0 5px 1.25rem;
  color: rgb(250, 107, 0);
  font-weight: bold;
}
#cv-area .cv-btn-area .cv-btn-area_col a,
#cv-area-top .cv-btn-area .cv-btn-area_col a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 1rem;
  border: 1px solid #f9852e;
  border-radius: 100vh;
  background-image: linear-gradient(to top, rgb(250, 107, 0) 0%, rgb(248, 158, 91) 100%);
  color: #ffffff;
  text-shadow: 0 0 black;
  filter: drop-shadow(2px 5px 5px rgba(250, 107, 0, 0.4));
}
#cv-area .cv-btn-area .cv-btn-area_col a img,
#cv-area-top .cv-btn-area .cv-btn-area_col a img {
  position: absolute;
  top: -50%;
  right: 1%;
  transform: rotate(15deg);
  width: 28%;
  border: 1px solid #eeeeee;
  filter: drop-shadow(3px 3px 1px rgba(0, 0, 0, 0.3));
}
#cv-area .cv-btn-area .cv-btn-area_col a i,
#cv-area-top .cv-btn-area .cv-btn-area_col a i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  border: 1px solid #f9852e;
  border-radius: 50px;
  background: linear-gradient(-30deg, rgb(248, 158, 91) 0%, rgb(250, 107, 0) 100%);
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0;
}
#cv-area .cv-btn-area .cv-btn-area_col a:hover,
#cv-area-top .cv-btn-area .cv-btn-area_col a:hover {
  transform: translate(0, 4px);
  filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.3));
}
#cv-area .cv-btn-area .cv-btn-area_col a:hover img,
#cv-area-top .cv-btn-area .cv-btn-area_col a:hover img {
  opacity: 1;
}
#cv-area .cv-btn-area .cv-btn-area_col a:active,
#cv-area-top .cv-btn-area .cv-btn-area_col a:active {
  top: 1px;
  filter: none;
}
#cv-area .contact-btn-area,
#cv-area-top .contact-btn-area {
  margin: 0 auto;
  padding: 0 60px 20px;
}
#cv-area .contact-btn-area > .txt,
#cv-area-top .contact-btn-area > .txt {
  margin-bottom: 10px;
  color: #00a0c7;
  font-weight: bold;
  text-align: center;
}
#cv-area .contact-btn-area a,
#cv-area-top .contact-btn-area a {
  position: relative;
  display: block;
  justify-content: center;
  margin: 0 auto;
  padding: 11px 15px;
  border: solid 1px rgb(0, 116, 140);
  border-radius: 1rem;
  background-image: linear-gradient(to top, rgb(0, 116, 140) 0%, #33b1cc 85%);
  color: #ffffff;
  line-height: 1.5;
  text-align: center;
  filter: drop-shadow(4px 2px 4px rgba(0, 116, 140, 0.4));
}
#cv-area .contact-btn-area a .text,
#cv-area-top .contact-btn-area a .text {
  padding-left: 10px;
  text-shadow: 0 0 #000000;
  vertical-align: super;
}
#cv-area .contact-btn-area a i::before,
#cv-area-top .contact-btn-area a i::before {
  font-size: 1.7rem;
  text-shadow: 0 0 #000000;
}
#cv-area .contact-btn-area a:hover,
#cv-area-top .contact-btn-area a:hover {
  opacity: 0.8;
}
#cv-area .contact-btn-area a:active,
#cv-area-top .contact-btn-area a:active {
  top: 1px;
  filter: none;
}
@media screen and (max-width: 640px) {
  #cv-area,
  #cv-area-top {
    width: 100%;
    /* .cv-btn-area ===============*/
    /* .contact-btn-area ===============*/
  }
  #cv-area h2,
  #cv-area-top h2 {
    font-size: 20px !important;
  }
  #cv-area .cv-btn-area,
  #cv-area-top .cv-btn-area {
    flex-direction: column;
  }
  #cv-area .cv-btn-area .cv-btn-area_col .txt,
  #cv-area-top .cv-btn-area .cv-btn-area_col .txt {
    width: 80%;
    margin: 0 0 5px 20px;
  }
  #cv-area .cv-btn-area .cv-btn-area_col a img,
  #cv-area-top .cv-btn-area .cv-btn-area_col a img {
    width: 20%;
  }
  #cv-area .cv-btn-area .cv-btn-area_col a i,
  #cv-area-top .cv-btn-area .cv-btn-area_col a i {
    width: 30px;
    height: 30px;
    font-size: 10px;
  }
  #cv-area .contact-btn-area,
  #cv-area-top .contact-btn-area {
    padding-inline: 0;
  }
  #cv-area .contact-btn-area a i::before,
  #cv-area-top .contact-btn-area a i::before {
    font-size: 1.4rem;
  }
  #cv-area .contact-btn-area a .text,
  #cv-area-top .contact-btn-area a .text {
    vertical-align: text-bottom;
  }
}

/*
===============================================================================
downloads
===============================================================================
*/
#downloads .kv {
  background-image: url(/common/images/downloads/kv_bk.webp);
}
#downloads .downloads-subcategory {
  font-size: 22px;
  font-weight: bold;
  color: #7a7a79;
}
#downloads a.magazin {
  position: relative;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: 0 auto 10px;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}
#downloads a.magazin:active {
  top: 1px;
  box-shadow: none;
}
#downloads a.magazin > img {
  width: 100%;
}
#downloads .subheading {
  position: relative;
  margin-bottom: 25px;
  padding: 0 0 5px 15px;
  border-bottom: solid 1px;
  font-size: 18px;
}
#downloads .subheading::before {
  position: absolute;
  left: 0;
  width: 3px;
  height: calc(100% - 8px);
  content: "";
}
#downloads .subheading.flow {
  border-color: #f7810d;
}
#downloads .subheading.flow::before {
  background: #f7810d;
}
#downloads .subheading.gate {
  border-color: #9abd1f;
}
#downloads .subheading.gate::before {
  background: #9abd1f;
}
#downloads .magazinbox + .subheading {
  margin-top: 50px;
}
#downloads .magazinbox {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
}
#downloads .magazinbox-inner {
  display: grid;
  grid-template-rows: subgrid;
  gap: 15px;
  padding: 10px 10px 20px 10px;
  background-color: #f5f7fa;
  grid-row: span 4;
}
#downloads .magazinbox-inner.picup {
  display: flex;
  flex-direction: column;
  padding: 0;
  background-color: unset;
  padding-left: 20px;
}
#downloads .magazinbox-inner.no-bg {
  background-color: unset;
}
#downloads .magazinbox-inner > h2 {
  font-weight: bold;
  line-height: 1.5;
}
#downloads .magazinbox-inner > h2 > span {
  display: block;
  font-size: 15px;
  line-height: 1.8;
}
#downloads .magazinbox-inner > ul > li {
  list-style-type: disc;
}
#downloads .magazinbox-inner > .note {
  width: -moz-fit-content;
  width: fit-content;
  padding: 2px 10px 0 10px;
  background-color: #bdbbba;
  color: #ffffff;
  font-size: 13px;
  border-left: solid 5px #00a0c7;
}
#downloads .magazinbox-inner > .note.flow {
  border-left: solid 5px #f7810d;
}
#downloads .magazinbox-inner > .note.gate {
  border-left: solid 5px #9abd1f;
}
#downloads .magazinbox-inner > .note.apps {
  border-left: solid 5px #005cac;
}
#downloads .magazinbox-inner__btn {
  display: block;
  width: 180px;
  padding: 5px 5px 4px 5px;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: #00a0c7;
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  margin-inline: auto;
}
#downloads .magazinbox-inner__btn.flow {
  background-color: #f7810d;
}
#downloads .magazinbox-inner__btn:hover {
  opacity: 0.8;
}
#downloads .magazinbox-inner__btn > i {
  font-weight: normal;
  font-size: 12px;
}

@media screen and (max-width: 640px) {
  #downloads .magazinbox {
    grid-template-columns: 1fr;
  }
}
/*
===============================================================================
support
===============================================================================
*/
#support {
  /* .section-even */
}
#support h2 {
  font-weight: bold;
  font-size: 24px;
  text-align: center;
}
#support h3 {
  font-size: 24px;
}
#support .lead {
  padding: 60px 0;
}
#support .tag {
  padding: 3px 10px;
  border-radius: 20px;
  background: #ffffff;
  font-size: 12px;
}
#support .section-even .container_about {
  max-width: 1180px;
}

@media screen and (max-width: 640px) {
  #support .kv .container > h1 {
    font-size: 24px;
  }
}
/*
===============================================================================
seminar-policy/ で使用
===============================================================================
*/
.seminar-policy {
  position: relative;
  max-width: 1000px;
  margin: 100px auto;
  padding: 0 20px;
  overflow: hidden;
  text-align: left;
}
.seminar-policy h1 {
  font-weight: bold;
  text-align: center;
}
.seminar-policy h2 {
  margin-top: 30px;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: bold;
  text-align: left;
}
.seminar-policy h3 {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
}
.seminar-policy .main-content {
  margin-top: 20px;
}
.seminar-policy .main-content p {
  margin-bottom: 10px;
}
.seminar-policy .main-content ul li {
  list-style-type: disc;
  margin-left: 20px;
}

/*font*//*# sourceMappingURL=style.css.map */