@charset "utf-8";
:root{
	--wide: 1275px;
	/*Primary*/
	--Red1:#fa000f;
	--Red2:#cc0000;
	--White:#ffffff;
	--Gray1:#f4f4f4;
	--Gray2:#d9d9d9;
	--Gray3:#b3b3b3;
	--Gray4:#737373;
	--Gray5:#4d4d4d;
	--Gray6:#222222;
	--Black:#0c0c0c;
	/*Secondary*/
	--Orange1: #fdc796;
	--Orange2: #fa6900;
	--Orange3: #c85400;
	--Yellow1: #fdec96;
	--Yellow2: #fad200;
	--Yellow3: #967e00;
	--Pink1: #fd96d4;
	--Pink2: #fa00a5;
	--Pink3: #96005a;
	--Purple1: #d096fd;
	--Purple2: #9b00fa;
	--Purple3: #540096;
	--Blue1: #96c5fd;
	--Blue2: #0064fa;
	--Blue3: #004596;
	--Teal1: #96f0fd;
	--Teal2: #00dcfa;
	--Teal3: #008496;
	--Green1: #96fdcc;
	--Green2: #00fa82;
	--Green3: #00964e;
	--Red1_20_Tint: #ffcbce;
	--Red1_40_Tint: #ff979d;
	--Red1_60_Tint: #ff636c;
	--Red1_20_Dark: #bb000b;
	--Red1_40_Dark: #7d0008;
	--Red_Grad: linear-gradient(145deg, #FA000F, #CC0000);
}
	html {
	scroll-behavior: smooth;
}
h2 {
	background: none;
}
#Contents {
  padding-bottom: 0px;
}
#Contents * {
  box-sizing: border-box;
}
@media screen and (max-width: 994px) {
  .JS #Contents {
    padding: 0;
    width: auto;
    min-width: auto;
  }
  #top {
    min-width: auto;
  }
}
.PC #Controler {
  display: block;
}

.sp-only {
  display: none;
}
@media screen and (max-width: 994px) {
  .sp-only {
    display: inherit;
  }
  .pc-only {
    display: none;
  }
}

a ,
label {
  cursor: pointer;
  opacity: 1;
}
a:hover ,
label:hover {
  transition: 0.1s ease-in;
  opacity: 0.8;
}


/* ========== Common ========== */

#Contents .normal-width {
  width: var(--wide);
  height: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 994px) {
  #Contents .normal-width {
    width: unset;
  }
}

#Contents h2 ,
#Contents H3 ,
#Contents H4 ,
#Contents h2 span ,
#Contents h3 span ,
#Contents H4 span {
  margin: unset;
  padding: unset;
  background-color: transparent;
  border: none;
  font-size: 100%;
  color: unset;
}
#Contents H4::before {
  content: none;
}
#Contents figure {
  margin: unset;
}
#Contents figure img {
  width: 100%;
  height: auto;
}

/* ========== #SL22_HERO ========== */

#SL22_HERO {
  padding-top: 20px;
  padding-bottom: 50px;
  background-color: var(--Gray2);
}
/* ---------- .layout__head ---------- */
#SL22_HERO .layout__head {
  padding-left: 40px;
	max-width: 965px;
}
#SL22_HERO .layout__head .line {
  display: inline-block;
  line-height: 1.1;
  font-size: 150%;
  color: var(--Black);
}
#SL22_HERO .layout__head .line strong {
  font-weight: bold;
  font-size: 180%;
  color: var(--Red2);
}
/* ---------- .black-bar ---------- */
#SL22_HERO .black-bar {
  position: relative;
  margin-top: 50px;
}
#SL22_HERO .black-bar > .background {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
}
#SL22_HERO .black-bar > .background > * {
  flex-basis: 50%;
}
#SL22_HERO .black-bar > .background .black {
  background-color: var(--Black);
}
#SL22_HERO .black-bar > .foreground {
  position: relative;
  color: var(--White);
  display: flex;
}
#SL22_HERO .black-bar__body {
  padding: 20px;
  padding-left: 40px;
  background-color: var(--Black);
}
#SL22_HERO .black-bar__body .shoulder {
  margin-bottom: 0.5em;
  line-height: 1.4;
  font-size: 140%;
}
#SL22_HERO .black-bar__body .sub {
  line-height: 1.2;
  font-weight: bold;
  font-size: 185%;
  color: var(--Gray2);
}
#SL22_HERO .black-bar__body .kana {
  font-size: 90%;
}
#SL22_HERO .black-bar__foot {
  position: relative;
  flex-grow: 1;
}
#SL22_HERO .black-bar__foot > .background {
  position: absolute;
  width: 70%;
  height: 100%;
  background-color: var(--Black);
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
#SL22_HERO .black-bar__foot > .foreground {
  position: relative;
  display: flex;
  height: 100%;
}
#SL22_HERO .black-bar__foot > .foreground img {
  position: absolute;
  top: -120px;
  right: -60px;
  width: 490px;
}
#SL22_HERO .black-bar__foot > .foreground h1 {
  margin-top: auto;
  font-weight: bold;
  font-size: 420%;
}
/* ---------- .layout__foot ---------- */
#SL22_HERO .layout__foot {
  padding: 20px;
  padding-left: 50px;
  text-align: center;
}
/* ---------- .button__download ---------- */
#SL22_HERO .button__download_hero a {
  display: inline-flex;
  align-items: center;
  padding: 5px 30px;
  background-color: #ffff81;
  box-shadow: 0 3px 10px rgba(0,0,0,1);
  border-radius: 999px;
  text-decoration: none;
  font-weight: bold;
  font-size: 140%;
  color: var(--Black);
}
#SL22_HERO .button__download_hero a .icon {
  width: 114px;
  margin: -20px 0;
}
#SL22_HERO .button__download_hero a .icon img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 994px) {
  #SL22_HERO {
    overflow: hidden;
    padding-bottom: unset;
  }
  /* ---------- .layout__head ---------- */
  #SL22_HERO .layout__head {
    padding-left: 20px;
  }
  #SL22_HERO .layout__head .line {
    font-size: 100%;
  }
  /* ---------- .black-bar ---------- */
  #SL22_HERO .black-bar > .background {
    display: none;
  }
  #SL22_HERO .black-bar > .foreground {
    flex-direction: column;
  }
  #SL22_HERO .black-bar__body {
    padding: 10px 20px;
  }
  #SL22_HERO .black-bar__body .shoulder {
    margin-top: 1.0em;
    font-size: 100%;
  }
  #SL22_HERO .black-bar__body .sub {
    font-size: 145%;
  }
  #SL22_HERO .black-bar__body .kana {
    font-size: 70%;
  }
  #SL22_HERO .black-bar__foot {
    position: unset;
  }
  #SL22_HERO .black-bar__foot > .background {
    display: none;
  }
  #SL22_HERO .black-bar__foot > .foreground {
    position: unset;
    flex-direction: column;
    padding: 0 20px 20px;
    background-color: var(--Black);
  }
  #SL22_HERO .black-bar__foot > .foreground img {
    width: 250px;
    top: -60px;
    right: -50px;
  }
  #SL22_HERO .black-bar__foot > .foreground h1 {
    line-height: 1;
    font-size: 350%;
  }
  /* ---------- .layout__foot ---------- */
  #SL22_HERO .layout__foot {
    padding: 20px;
  }
  /* ---------- .button__download ---------- */
  #SL22_HERO .button__download_hero a {
    padding: 5px 20px;
    font-size: 100%;
  }
  #SL22_HERO .button__download_hero a .icon {
    width: 57px;
  }
}


/* ========== #SL22_NAV ========== */

#SL22_NAV {
  background-color: var(--Gray4);
}
#SL22_NAV .items {
  position: relative;
  display: flex;
  margin: 0 20px;
}
#SL22_NAV .item {
  position: relative;
  flex-basis: 100%;
  top: -50px;
  position: relative;
  margin-bottom: -50px;
}
#SL22_NAV .items::after ,
#SL22_NAV .item::before {
  content: "";
  position: absolute;
  top: 25%;
  left: 0;
  display: block;
  width: 1px;
  height: 50%;
  background-color: var(--White);
}
#SL22_NAV .items::after {
  left: unset;
  right: 0;
}
#SL22_NAV .item a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.4;
  text-align: center;
  color: var(--White);
}
#SL22_NAV .item a::after {
  content: "";
  width: 0;
  height: 0;
  margin: 0.5em auto 1.0em;
  border-top: 1.0em solid var(--White);
  border-right: 1.0em solid transparent;
  border-left: 1.0em solid transparent;
}
#SL22_NAV .item a .icon {
  width: 160px;
  margin: 0 auto;
}
@media screen and (max-width: 994px) {
  #SL22_NAV .items {
    flex-wrap: wrap;
    margin: 0;
  }
  #SL22_NAV .item:nth-child(odd)::before ,
  #SL22_NAV .items::after {
    content: none;
  }
  #SL22_NAV .item {
    flex-basis: 50%;
    top: unset;
    margin-bottom: unset;
  }
  #SL22_NAV .item a {
    font-size: 90%;
  }
  #SL22_NAV .item a::after {
    font-size: 70%;
  }
  #SL22_NAV .item a .icon {
    width: 80px;
  }
}



/* ========== .SL22_CONTENT ========== */
.SL22_CONTENT .layout {
  padding: 0 40px;
}
#Contents .SL22_CONTENT .content__head .title {
  margin-top: 3.0em;
  margin-bottom: 0.4em;
  font-size: 320%;
  color: var(--Gray6);
}
#Contents .SL22_CONTENT .content__head-first .title {
  margin-top: 1.2em;
  font-size: 260%;
}
#Contents .SL22_CONTENT .content__head-foot .title {
  margin-top: 1.2em;
  text-align: center;
  font-size: 220%;
}
#Contents .SL22_CONTENT .content__head-foot .title strong {
  font-weight: bold;
}
.SL22_CONTENT .content__head .title span {
  padding: unset;
  background-color: transparent;
  font-weight: normal;
  color: #373A3C;
}
.SL22_CONTENT .content__head .title strong {
  font-weight: normal;
  color: var(--Red1);
}
.SL22_CONTENT .content__head .discription {
  margin-top: 1.0em;
  margin-bottom: 1.8em;
}
.SL22_CONTENT .content__head .discription p {
  font-weight: normal;
  line-height: 1.8;
  color: var(--Gray6);
}
@media screen and (max-width: 994px) {
  .SL22_CONTENT .layout {
    padding: 0 20px;
  }
  #Contents .SL22_CONTENT .content__head .title {
    margin-top: 2.0em;
    font-size: 120%;
  }
}







#SL22_TOP__FUNCTION .content__head {
  font-size: 125%;
}
#SL22_TOP__FUNCTION .content__function {
  font-size: 125%;
}
#SL22_TOP__FUNCTION .content__function .subtitle {
  padding-top: 1.0em;
  padding-bottom: 0.5em;
  text-align: center;
  font-weight: bold;
  font-size: 160%;
  color: var(--Black);
}
#SL22_TOP__FUNCTION .content__function .items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#SL22_TOP__FUNCTION .content__function .items > * {
  flex-basis: 33.33333333%;
  text-align: center;
}
#SL22_TOP__FUNCTION .content__function .items .icon {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  background-color: var(--White);
  border-radius: 999px;
}
#SL22_TOP__FUNCTION .content__function .items .icon img {
  width: 100%;
  height: auto;
}
#SL22_TOP__FUNCTION .content__function .items .label {
  display: inline-block;
  margin-top: 0.5em;
  margin-bottom: 1.0em;
  font-weight: bold;
  color: var(--Gray5);
}
#SL22_TOP__FUNCTION .content__function .layout__foot .image {
  width: 85%;
  margin: 0 auto;
}
#SL22_TOP__FUNCTION .content__erp {
  padding-bottom: 3.5em;
  font-size: 112%;
}
#SL22_TOP__FUNCTION .content__erp .subtitle {
  padding-top: 2.0em;
  padding-bottom: 1.0em;
  text-align: center;
  font-weight: bold;
  font-size: 150%;
  color: var(--Red2);
}
#SL22_TOP__FUNCTION .content__erp .panel-layout {
  display: flex;
  margin: 0 -0.5em;
}
#SL22_TOP__FUNCTION .content__erp .panel-layout > * {
  flex-basis: 50%;
  margin: 0 0.5em;
}
#SL22_TOP__FUNCTION .content__erp .panel {
  margin-top: 2.0em;
}
#SL22_TOP__FUNCTION .content__erp .panel .head {
  margin: unset;
  padding: 0.2em;
  background-color: var(--Gray5);
  font-size: 110%;
  color: var(--White);
}
#SL22_TOP__FUNCTION .content__erp .panel .body {
  padding: 1.0em 0;
}
#SL22_TOP__FUNCTION .content__erp .panel .list {
  margin-left: 1.0em;
}
#SL22_TOP__FUNCTION .content__erp .panel .list > * {
  margin: 0.6em 0;
  list-style-type: disc;
}
#SL22_TOP__FUNCTION .content__erp .panel__main .head {
  text-align: center;
}
#SL22_TOP__FUNCTION .content__erp .panel__main .body {
  padding: 1.0em 2.0em;
  background-color: white;
  font-size: 115%;
}
#SL22_TOP__FUNCTION .content__erp .panel__main strong {
  font-weight: normal;
  color: var(--Red1_40_Dark);
}
#SL22_TOP__FUNCTION .button {
  text-align: center;
}
@media screen and (max-width: 994px) {
  #SL22_TOP__FUNCTION .content__head .title {
    font-size: 120% !important;
  }
  #SL22_TOP__FUNCTION .content__function {
    font-size: 100%;
  }
  #SL22_TOP__FUNCTION .content__function .subtitle {
    font-size: 150%;
  }
  #SL22_TOP__FUNCTION .content__function .items > * {
    flex-basis: 50%;
  }
  #SL22_TOP__FUNCTION .content__function .items .icon {
    width: 120px;
    height: 120px;
  }
  #SL22_TOP__FUNCTION .content__function .items .label {
    font-size: 90%;
  }
  #SL22_TOP__FUNCTION .content__erp {
    font-size: 100%;
  }
  #SL22_TOP__FUNCTION .content__erp .subtitle {
    font-size: 120%;
  }
  #SL22_TOP__FUNCTION .content__erp .panel-layout {
    flex-direction: column;
    margin: 1.0em 0;
  }
  #SL22_TOP__FUNCTION .content__erp .panel-layout > * {
    margin: 0;
  }
  #SL22_TOP__FUNCTION .content__erp .panel {
    margin-top: 0.5em;
  }
  #SL22_TOP__FUNCTION .content__erp .panel__main .body {
    padding: 0.5em 1.0em;
  }
}



#SL22_TOP__EFFECT .content__body {
  padding-top: 2.5em;
  padding-bottom: 3.5em;
  font-size: 112%;
}
#SL22_TOP__EFFECT .layout__head {
  margin-bottom: 1.0em;
}
#SL22_TOP__EFFECT .layout__body {
  margin-bottom: 2.5em;
}
#SL22_TOP__EFFECT .subtitle {
  padding: 0.6em 1.0em;
  background-color: var(--White);
  border-radius: 999px;
  border: 1px solid var(--Gray3);
  font-weight: bold;
  font-size: 110%;
  color: var(--Gray5);
}
#SL22_TOP__EFFECT .subtitle strong {
  font-weight: bold;
  font-size: 150%;
  color: var(--Gray6);
}
#SL22_TOP__EFFECT .subtitle::before {
  content: "▼";
  margin-right: 0.6em;
  font-size: 120%;
  color: var(--Red1);
}
#SL22_TOP__EFFECT .layout__body p {
  line-height: 1.8;
}
#SL22_TOP__EFFECT .button {
  margin-top: 3.0em;
  text-align: center;
}
@media screen and (max-width: 994px) {
  #SL22_TOP__EFFECT .content__body {
    font-size: 100%;
  }
  #SL22_TOP__EFFECT .subtitle {
    position: relative;
    padding-left: 2.0em;
    line-height: 1.4;
    text-align: center;
  }
  #SL22_TOP__EFFECT .subtitle strong {
    font-size: 120%;
  }
  #SL22_TOP__EFFECT .subtitle::before {
    position: absolute;
    top: 50%;
    left: 0.6em;
    margin-top: -0.5em;
    margin-right: 0.2em;
    font-size: 100%;
  }
}


#SL22_TOP__CASE .layout__head {
  padding: 60px 0;
}
#SL22_TOP__CASE .layout__foot {
  text-align: center;
  padding-bottom: 60px;
}
#SL22_TOP__CASE .title {
  padding: 0.25em;
  background-color: var(--White);
  text-align: center;
  font-size: 160%;
  color: var(--Gray5);
}
#SL22_TOP__CASE .item {
  margin-bottom: 40px;
}
#SL22_TOP__CASE .item a {
  display: block;
  text-decoration: none;
}
#SL22_TOP__CASE .sidebyside {
  display: flex;
}
#SL22_TOP__CASE .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 160px;
  height: 160px;
  background-color: var(--Gray4);
  border-radius: 999px;
}
#SL22_TOP__CASE .icon > * {
  width: 80%;
  height: 80%;
}
#SL22_TOP__CASE .sidebyside .side__info {
  padding-left: 40px;
}
#SL22_TOP__CASE .name {
  margin-bottom: 0.5em;
  font-weight: bold;
  font-size: 120%;
  color: var(--Black);
}
#SL22_TOP__CASE .shoulder {
  font-weight: bold;
  font-size: 120%;
  color: var(--Gray6);
}
#SL22_TOP__CASE .description {
  margin-bottom: 0.25em;
  color: #373A3C;
}
@media screen and (max-width: 994px) {
  #SL22_TOP__CASE .layout__head {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  #SL22_TOP__CASE .item {
    margin-bottom: 20px;
  }
  #SL22_TOP__CASE .title {
    font-size: 100%;
  }
  #SL22_TOP__CASE .sidebyside {
    flex-direction: column;
    align-items: center;
  }
  #SL22_TOP__CASE .sidebyside .side__info {
    padding-left: 0;
  }
  #SL22_TOP__CASE .icon {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
  }
  #SL22_TOP__CASE .name ,
  #SL22_TOP__CASE .shoulder ,
  #SL22_TOP__CASE .description {
    font-size: 100%;
  }
  #SL22_TOP__CASE .name {
    text-align: center;
  }
}


#Contents .dialog-module .dialog-flag {
  display: none;
}
#Contents .dialog-module #dialog_01:checked + .dialog ,
#Contents .dialog-module #dialog_02:checked + .dialog ,
#Contents .dialog-module #dialog_03:checked + .dialog ,
#Contents .dialog-module #dialog_04:checked + .dialog ,
#Contents .dialog-module #dialog_05:checked + .dialog {
  display: inherit;
}

#Contents .dialog-module .dialog {
  position: fixed;
  left: 0;
  top: 0;
  display: none;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--Black);
  z-index: 100;
}
#Contents .dialog-module .dialog-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#Contents .dialog-module .dialog-front {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#Contents .dialog-module .content__body .content {
  padding: 0;
}
#Contents .dialog-module .content__body h3 {
	color: var(--Black);
}
#Contents .dialog-module .content__body .content h4 {
  padding: 0.5em;
  border-bottom: 3px solid var(--White);
  font-weight: normal;
  font-size: 150%;
  color: var(--Black);
}
#Contents .dialog-module .content__body .content .detail {
  padding: 0.5em;
}
#Contents .dialog-module .content__body .content .detail p {
  font-weight: normal;
}
#Contents .dialog-module .content__body .effect .detail p ,
#Contents .dialog-module .content__body .point .detail p {
  margin-bottom: 0.8em;
  padding-left: 1.0em;
}
#Contents .dialog-module .content__body .content .detail strong {
  font-weight: normal;
  color: var(--Red2);
}
#Contents .dialog-module .content__body .content .detail h5 {
  margin-bottom: 0.5em;
  background-color: unset;
  border-radius: unset;
  padding: unset;
  font-weight: normal;
  color: var(--Red2);
}
#Contents .dialog-module .icon {
  top: -80px;
  width: 190px;
  height: 190px;
}
#Contents .dialog-module .icon > * {
  width: 140px;
  height: 140px;
}
#Contents .dialog-module .content__body .title {
  margin-left: 210px;
}
#Contents .dialog-module .arrange__spec {
  margin-left: 110px;
}
#Contents .dialog-module .content__body .layout__body {
  overflow: scroll;
  height: 95%;
  padding-top: 0;
}
#Contents .dialog-module .panel {
  position: relative;
  width: 100%;
  height: 60%;
  max-height: 60%;
  background-color: var(--Gray2);
  box-shadow: 0 3px 20px rgba(0,0,0,0.5);
  pointer-events: auto;
}
#Contents .dialog-module .layout__head {
  height: 60px;
}
#Contents .dialog-module .arrange__effect .head {
  flex-basis: 40%;
}
#Contents .dialog-module .arrange__effect .body {
  flex-basis: 60%;
}
#Contents .dialog-module .arrange__effect .wrap {
  background-color: transparent;
  border: 3px solid var(--White);
}
#Contents .dialog-module .arrange__effect .head .wrap {
  margin-right: 50px;
  border-right: none;
}
#Contents .dialog-module .arrange__effect .head .wrap::after {
  right: -3px;
  border-top-color: var(--Gray2);
  border-bottom-color: var(--Gray2);
}
#Contents .dialog-module .arrange__effect .head .wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0px;
  display: block;
  width: 0;
  height: 0;
  border-left: 90px solid transparent;
  border-top: 300px solid var(--White);
  border-bottom: 300px solid var(--White);
  transform: translate(0,-50%);
}
#Contents .dialog-module .arrange__effect .body {
  padding-left: 0;
}
#Contents .dialog-module .arrange__spec {
  border: none;
}
#Contents .dialog-module .arrange__spec > * {
  border-right: none;
  color: var(--Black);
}
#Contents .dialog-module .arrange__spec > *:first-child {
  border-right: 3px solid var(--Gray2);
}
#Contents .dialog-module .point {
  background-color: transparent;
  border: 3px solid var(--White);
}
#Contents .dialog-module .close_button {
  display: block;
  position: absolute;
  top: -90px;
  right: 0;
  width: 64px;
  height: 64px;
  cursor: pointer;
  pointer-events: none;
}
#Contents .dialog-module .close_button::before ,
#Contents .dialog-module .close_button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 64px;
  background: var(--White);
}
#Contents .dialog-module .close_button::before {
  transform: translate(-50%,-50%) rotate(45deg);
}
#Contents .dialog-module .close_button::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}
#Contents .dialog-module .layout {
  padding-bottom: 40px;
}
@media screen and (max-width: 994px) {
  #Contents .dialog-module .icon {
    top: -30px;
    width: 100px;
    height: 100px;
    left: 0;
    transform: translate(0,0);
  }
  #Contents .dialog-module .icon > * {
    width: 70%;
    height: 70%;
  }
  #Contents .dialog-module .content__body .title {
    margin-left: 60px;
    padding-top: 0;
    font-size: 100%;
  }
  #Contents .dialog-module .arrange__spec {
    margin-left: 110px;
  }
  #Contents .dialog-module .layout__head {
    height: unset;
    padding-bottom: 10px;
  }
  #Contents .dialog-module .arrange__spec > *:first-child {
    border-right: none;
  }
  #Contents .dialog-module .arrange__effect .head .wrap::before ,
  #Contents .dialog-module .arrange__effect .head .wrap::after {
    content: none;
  }
  #Contents .dialog-module .arrange__effect .head .wrap {
    margin-right: 0;
    border-right: 3px solid var(--White);;
  }
  #Contents .dialog-module .layout {
    padding-bottom: 40px;
  }
  #Contents .dialog-module .panel {
    height: 100%;
    max-height: 100%;
  }
  #Contents .dialog-module .dialog-front {
    padding-top: 80px;
  }
  #Contents .dialog-module .close_button {
    top: -50px;
    width: 30px;
    height: 30px;
  }
  #Contents .dialog-module .close_button::before,
  #Contents .dialog-module .close_button::after {
    width: 6px;
    height: 30px;
  }
}



#SL22_REQUIREMENT .content__body {
  padding-top: 2.5em;
  padding-bottom: 3.5em;
}
#SL22_REQUIREMENT .layout__body {
  display: flex;
  margin: 0 -7px;
}
#SL22_REQUIREMENT .layout__body > * {
  flex-basis: 50%;
  margin: 0 7px;
}
#SL22_REQUIREMENT .panel {
  margin-bottom: 15px;
  padding: 0.5em 1.0em 1.0em;
  background-color: rgb(243, 243, 243);
  border-top: 1px solid #707070;
}
#SL22_REQUIREMENT .style__color-gray .panel {
  background-color: rgb(232, 232, 232);
}
#SL22_REQUIREMENT .panel .head {
  margin-bottom: 0.5em;
  font-weight: bold;
  color: var(--Red2);
}
#SL22_REQUIREMENT .panel .body {
  padding: 0;
}
#SL22_REQUIREMENT .panel .list {
  padding-left: 1.5em;
}
#SL22_REQUIREMENT .panel .list > * {
  list-style: disc;
}
#SL22_REQUIREMENT .button {
  margin-top: 3.0em;
  text-align: center;
}
@media screen and (max-width: 994px) {
  #SL22_REQUIREMENT .layout__body {
    flex-direction: column;
    margin: 0;
  }
  #SL22_REQUIREMENT .layout__body > * {
    margin: 0;
  }
}


#SL22_FAQ .content__body {
  font-size: 112%;
}
#SL22_FAQ .item {
  padding-top: 1.0em;
  padding-bottom: 1.0em;
  border-top: 1px solid #707070;
}
#SL22_FAQ .content__body .q {
  position: relative;
  padding-bottom: 0.5em;
  padding-left: 2.8em;
  font-weight: bold;
  color: var(--Red2);
}
#SL22_FAQ .content__body .q .num {
  position: absolute;
  top: 0;
  left: 0;
}
#SL22_FAQ .content__body .a {
  padding-left: 2.8em;
  font-weight: bold;
  color: var(--Gray4);
}



#SL22_FUNCTION__FEAT .item {
  display: flex;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid #707070;
}
#SL22_FUNCTION__FEAT .item > *:first-child {
  margin-right: 2.2em;
}
#SL22_FUNCTION__FEAT .item .icon {
  flex-shrink: 0;
  width: 150px;
}
#SL22_FUNCTION__FEAT .item .info {
  flex-grow: 1;

}
#SL22_FUNCTION__FEAT .item .info * {
  line-height: 1.8;
}
#SL22_FUNCTION__FEAT .item .head {
  margin-bottom: 0.25em;
  font-size: 175%;
  color: var(--Red2);
}
#SL22_FUNCTION__FEAT .item .subhead {
  margin: 0;
  color: var(--Gray5);
}
@media screen and (max-width: 994px) {
  #SL22_FUNCTION__FEAT .item {
    flex-direction: column;
  }
  #SL22_FUNCTION__FEAT .item .head {
    line-height: 1.4;
    font-size: 120%;
  }
  #SL22_FUNCTION__FEAT .item .head .label {
    line-height: 1.4;
  }
  #SL22_FUNCTION__FEAT .item > *:first-child {
    margin-right: 0;
  }
  #SL22_FUNCTION__FEAT .item .icon {
    order: 1;
    margin-bottom: 1.0em;
  }
  #SL22_FUNCTION__FEAT .item .info {
    order: 2;
  }
}

/*
#SL22_TOOLS .content__body .title {
	margin-bottom: 0.5em;
	font-weight: bold;
	font-size: 140%;
	color: var(--Black);
}
#SL22_TOOLS h3.title {
	background: #ffff81;
	padding: .5em 1em;
	border-radius: 26px;
}
#SL22_TOOLS .panels {
	display: flex;
	margin: 1em 0 2em;
}
#SL22_TOOLS .panels .panel:first-child {
	margin: 0 1em 0 0;
	display: flex;
	flex-wrap: wrap;
	flex-flow: column;
	justify-content: space-between;
}
#SL22_TOOLS .panels .panel .TableStyle3 {
	border-collapse: separate;
	border: none;
}
#SL22_TOOLS .panels .panel .TableStyle3 * {
	font-size: 1em;
}
#SL22_TOOLS .panels .panel .TableStyle3 th {
	background: #00777c;
	color: #fff;
	border: 2px solid #fff;
}
*/
#SL22_TOOLS .content__body .title {
	margin-bottom: 0.5em;
	font-weight: bold;
	font-size: 140%;
	color: var(--White);
}
#SL22_TOOLS h3.title {
	background: var(--Gray5);
	padding: .5em 1em;
	border-radius: 26px;
}
#SL22_TOOLS .panels {
	display: flex;
	margin: 1em 0 2em;
}
#SL22_TOOLS .panels .panel:first-child {
	margin: 0 1em 0 0;
	display: flex;
	flex-wrap: wrap;
	flex-flow: column;
	justify-content: space-between;
}
#SL22_TOOLS .panels .panel:first-child .ImgOnlyStyle {
	text-align: center;
	margin: auto;
}
#SL22_TOOLS .panels .panel .TableStyle3 {
	border-collapse: separate;
	border: none;
}
#SL22_TOOLS .panels .panel .TableStyle3 * {
	font-size: 1.05em;
}
#SL22_TOOLS .panels .panel .TableStyle3 th {
	background: var(--Gray4);
	color: #fff;
	border: 2px solid #fff;
	white-space: nowrap;
}
#SL22_TOOLS .panels .panel .TableStyle3 td {
	border: 2px solid #fff;
	background: #f0f0f0;
}
/*
#SL22_TOOLS .panels .panel a.button:link,
#SL22_TOOLS .panels .panel a.button:visited {
	background: #00777c;
	color: #fff;
	font-weight: bold;
	text-align: center;
	padding: 1em;
	margin: auto;
	width: 100%;
	display: block;
	border-radius: 2px;
	text-decoration: none;
}
*/
#SL22_TOOLS .panels .panel a.button:link, #SL22_TOOLS .panels .panel a.button:visited {
	background: var(--Red2);
	color: #fff;
	font-weight: bold;
	text-align: center;
	padding: 1em;
	margin: auto;
	width: 100%;
	display: block;
	border-radius: 26px;
	/*box-shadow: 0 5px 5px rgb(0 0 0 / 50%);*/
	box-shadow: 0 5px 0 var(--Gray3);
	text-decoration: none;
}
@media screen and (max-width: 994px) {
	.JS #SL22_TOOLS .panels .panel:first-child {
		width: 80%;
	}
}
@media screen and (max-width: 767px) {
	.JS #SL22_TOOLS .panels {
		flex-flow: column-reverse;
	}
	.JS #SL22_TOOLS .panels .panel:first-child {
		width: 100%;
		margin: auto;
	}
	.JS #SL22_TOOLS .panels .panel a.button:link,
	.JS #SL22_TOOLS .panels .panel a.button:visited {
		width: 80%;
		margin: 1em auto;
	}
}
#SL22_BUTTONS {
  color: var(--White);
}
#SL22_BUTTONS .content__body {
  padding-bottom: 1.0em;
}
#SL22_BUTTONS .item {
  padding-top: 3.0em;
  padding-bottom: 3.0em;
  border-bottom: 2px solid var(--White);
}
#SL22_BUTTONS .item:last-child {
  border-bottom: none;
}
#SL22_BUTTONS .title {
  margin-bottom: 0.25em;
  font-size: 180%;
}
#SL22_BUTTONS .shoulder {
  font-size: 125%;
  color: var(--White);
}
#SL22_BUTTONS .layout__body .list {
  margin-top: 0.5em;
  margin-bottom: 2.5em;
  margin-left: 1.2em;
}
#SL22_BUTTONS .layout__body .list > * {
  margin: 0.25em 0;
  list-style-type: disc;
}
#SL22_BUTTONS .button {
  margin-top: 1.5em;
  text-align: center;
}
@media screen and (max-width: 994px) {
  #SL22_BUTTONS .content__body {
    padding-top: 0;
  }
  #SL22_BUTTONS .layout__body .head {
    font-size: 100%;
  }
  #SL22_BUTTONS .title {
    font-size: 120%;
  }
  #SL22_BUTTONS .shoulder {
    font-size: 100%;
  }
}





#SL22_DOWNLOAD .content__body {
  padding-top: 3.0em;
  padding-bottom: 3.5em;
}
#SL22_DOWNLOAD .title {
  margin-bottom: 1.0em;
  text-align: center;
  font-size: 135%;
}
#SL22_DOWNLOAD .title .label {
  color: var(--Red2);
}
@media screen and (max-width: 994px) {
  #SL22_DOWNLOAD .title {
    font-size: 100%;
  }
}



#SL22_FOOT-CONTACT {
  color: var(--White);
}
#SL22_FOOT-CONTACT .content__body {
  padding-top: 2.0em;
  padding-bottom: 1.0em;
}
#SL22_FOOT-CONTACT .title {
  margin-bottom: 0.25em;
  text-align: center;
  font-size: 135%;
}
#SL22_FOOT-CONTACT .title .label {
  font-weight: normal;
  color: var(--Black);
}
#SL22_FOOT-CONTACT .tel {
  text-align: center;
  font-size: 320%;
}
#SL22_FOOT-CONTACT .announce {
  text-align: center;
  font-size: 100%;
  color: #EBFF00;
}
#SL22_FOOT-CONTACT .message {
  text-align: center;
}
#SL22_FOOT-CONTACT .button {
  margin-top: 1.0em;
  margin-bottom: 1.0em;
  padding: 0 40px;
  text-align: center;
}
#Contents #SL22_FOOT-CONTACT .button a {
  background-color: var(--Red2);
  box-shadow: none;
  color: var(--White);
}
@media screen and (max-width: 994px) {
  #SL22_FOOT-CONTACT .title {
    font-size: 100%;
  }
  #SL22_FOOT-CONTACT .tel {
    font-size: 200%;
  }
}


#SL22_COLOPHON {
  padding: 1.0em 0;
  margin-bottom: 10.0em;
}
#SL22_COLOPHON .content {
  background-color: var(--White);
}
#SL22_COLOPHON ul {
  font-size: 80%;
}
#SL22_COLOPHON li {
  position: relative;
  padding-left: 0.8em;
}
#SL22_COLOPHON li::before {
  content: '*';
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 994px) {
  #SL22_COLOPHON {
    padding: 1.0em 20px;
  }
  #SL22_COLOPHON ul {
    font-size: 67%;
  }
}


#SL22_FOOT-NAVI {
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #f6f6f6;
}
#SL22_FOOT-NAVI.layout__article {
  margin-top: 40px;
  margin-bottom: 10px;
}
#SL22_FOOT-NAVI .items {
  margin: 0 -10px;
  display: flex;
  flex-wrap: wrap;
}
#SL22_FOOT-NAVI .items > * {
  flex-basis: 20%;
  padding: 5px 10px;
}
#SL22_FOOT-NAVI .items a {
  font-weight: normal;
  color: var(--Red2);
}
#SL22_FOOT-NAVI .items:first-child a {
  font-weight: bold;
}
#SL22_FOOT-NAVI .items a::after {
  content: ">";
  margin-left: 0.6em;
  color: #c41626;
}
@media screen and (max-width: 994px) {
  #SL22_FOOT-NAVI {
    padding-right: 20px;
    padding-left: 20px;
  }
  #SL22_FOOT-NAVI .items > * {
    flex-basis: auto;
  }
}



#SL22_FUNCTION__DOWNLOAD .content__body {
  padding-top: 2.5em;
  padding-bottom: 3.5em;
}
#SL22_FUNCTION__DOWNLOAD .title {
	margin-bottom: 1.0em;
	text-align: center;
	font-size: 135%;
  color: var(--Red2);
}
#SL22_FUNCTION__DOWNLOAD .button {
  margin-top: -0.5em;
}
@media screen and (max-width: 994px) {
  #SL22_FUNCTION__DOWNLOAD .title {
    margin-bottom: 1.5em;
    text-align: center;
  }
}

#SL22_FUNCTION__FUNC .layout__head {
  padding: 2.0em 0;
}
#SL22_FUNCTION__FUNC .layout__head .list {
  margin-left: 1.25em;
  font-weight: bold;
  font-size: 110%;
}
#SL22_FUNCTION__FUNC .layout__head .list > * {
  margin-bottom: 0.25em;
  list-style: disc;
  line-height: 1.4;
}
#SL22_FUNCTION__FUNC .layout__body {
  margin-top: 4.0em;
  padding-bottom: 6.0em;
}
#SL22_FUNCTION__FUNC .corner-title {
  margin-bottom: 0.5em;
  font-size: 140%;
  color: var(--Red2);
}
#SL22_FUNCTION__FUNC .panels {
  display: flex;
  background-color: var(--White);
  box-shadow: 0 3px 6px rgba(0,0,0,0.16);
  border-radius: 1.0em;
}
#SL22_FUNCTION__FUNC .tab-flag {
  display: none;
}
#SL22_FUNCTION__FUNC .panel__tab {
  flex-shrink: 0;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-right: 3.0em;
}
#SL22_FUNCTION__FUNC .panel__tab .item label {
  position: relative;
  display: block;
  margin-bottom: 0.5em;
  padding: 0.75em 1.0em;
  background-color: currentcolor;
  line-height: 1.0;
  font-size: 140%;
  color: var(--Gray1);
}
#SL22_FUNCTION__FUNC #tab-flag_01:checked ~ * .panel__tab .tab-switch_01 label ,
#SL22_FUNCTION__FUNC #tab-flag_02:checked ~ * .panel__tab .tab-switch_02 label ,
#SL22_FUNCTION__FUNC #tab-flag_03:checked ~ * .panel__tab .tab-switch_03 label ,
#SL22_FUNCTION__FUNC #tab-flag_04:checked ~ * .panel__tab .tab-switch_04 label ,
#SL22_FUNCTION__FUNC #tab-flag_05:checked ~ * .panel__tab .tab-switch_05 label ,
#SL22_FUNCTION__FUNC #tab-flag_06:checked ~ * .panel__tab .tab-switch_06 label ,
#SL22_FUNCTION__FUNC #tab-flag_07:checked ~ * .panel__tab .tab-switch_07 label ,
#SL22_FUNCTION__FUNC #tab-flag_08:checked ~ * .panel__tab .tab-switch_08 label ,
#SL22_FUNCTION__FUNC #tab-flag_09:checked ~ * .panel__tab .tab-switch_09 label {
  color: var(--Gray5);
}
#SL22_FUNCTION__FUNC .panel__tab .item label .label {
  color: var(--Gray4);
}
#SL22_FUNCTION__FUNC #tab-flag_01:checked ~ * .panel__tab .tab-switch_01 label .label ,
#SL22_FUNCTION__FUNC #tab-flag_02:checked ~ * .panel__tab .tab-switch_02 label .label ,
#SL22_FUNCTION__FUNC #tab-flag_03:checked ~ * .panel__tab .tab-switch_03 label .label ,
#SL22_FUNCTION__FUNC #tab-flag_04:checked ~ * .panel__tab .tab-switch_04 label .label ,
#SL22_FUNCTION__FUNC #tab-flag_05:checked ~ * .panel__tab .tab-switch_05 label .label ,
#SL22_FUNCTION__FUNC #tab-flag_06:checked ~ * .panel__tab .tab-switch_06 label .label ,
#SL22_FUNCTION__FUNC #tab-flag_07:checked ~ * .panel__tab .tab-switch_07 label .label ,
#SL22_FUNCTION__FUNC #tab-flag_08:checked ~ * .panel__tab .tab-switch_08 label .label ,
#SL22_FUNCTION__FUNC #tab-flag_09:checked ~ * .panel__tab .tab-switch_09 label .label {
  color: var(--White);
}
#SL22_FUNCTION__FUNC .panel__tab .item label::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1.25em;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.25em;
  border-right-width: 0;
  border-color: transparent;
  border-left-color: currentcolor;
  transform: translate(0,-50%);
}
#SL22_FUNCTION__FUNC .panel__body {
  flex-grow: 1;
  padding-top: 30px;
}
#SL22_FUNCTION__FUNC .panel__body .unit {
  margin-top: 1.0em;
  padding-bottom: 2.0em;
}
#SL22_FUNCTION__FUNC .panel__body .unit__red {
  border-top-color: var(--Red2);
}
#SL22_FUNCTION__FUNC .panel__body .sidebyside {
  display: flex;
  flex-wrap: wrap;
}
#SL22_FUNCTION__FUNC .panel__body .sidebyside > * {
  flex-basis: 50%;
}
#SL22_FUNCTION__FUNC .panel__body .title {
  font-weight: normal;
  font-size: 250%;
  color: var(--Red1);
}
#SL22_FUNCTION__FUNC .panel__body .head {
  margin-right: 60px;
  margin-bottom: 0.5em;
  padding-top: 0.5em;
  border-top: 1px solid var(--Gray4);
  font-weight: bold;
  font-size: 120%;
  color: var(--Black);
}
#SL22_FUNCTION__FUNC .panel__body .mention {
  position: relative;
  top: -0.25em;
  display: inline-block;
  padding: 0.25em 0.5em;
  background-color: var(--Red2);
  border-radius: 999px;
  line-height: 1;
  font-weight: normal;
  font-size: 70%;
  color: var(--White);
}
#SL22_FUNCTION__FUNC .panel__body .unit__red .head {
  color: var(--Red2);
}
#SL22_FUNCTION__FUNC .panel__body .list {
  margin-right: 60px;
  margin-left: 1.5em;
  color: var(--Gray3);
}
#SL22_FUNCTION__FUNC .panel__body .sidebyside > .list:nth-child(2) {
  margin-right: 0;
}
#SL22_FUNCTION__FUNC .panel__body .list > * {
  list-style: disc;
}
#SL22_FUNCTION__FUNC .panel__body .list > * .label {
  color: var(--Gray5);
}
#SL22_FUNCTION__FUNC .panel__body .unit__red .list {
  color: var(--Red2);
}
#SL22_FUNCTION__FUNC .panel__body .item {
  display: none;
}
#SL22_FUNCTION__FUNC #tab-flag_01:checked ~ * .panel__body .tab-switch_01 ,
#SL22_FUNCTION__FUNC #tab-flag_02:checked ~ * .panel__body .tab-switch_02 ,
#SL22_FUNCTION__FUNC #tab-flag_03:checked ~ * .panel__body .tab-switch_03 ,
#SL22_FUNCTION__FUNC #tab-flag_04:checked ~ * .panel__body .tab-switch_04 ,
#SL22_FUNCTION__FUNC #tab-flag_05:checked ~ * .panel__body .tab-switch_05 ,
#SL22_FUNCTION__FUNC #tab-flag_06:checked ~ * .panel__body .tab-switch_06 ,
#SL22_FUNCTION__FUNC #tab-flag_07:checked ~ * .panel__body .tab-switch_07 ,
#SL22_FUNCTION__FUNC #tab-flag_08:checked ~ * .panel__body .tab-switch_08 ,
#SL22_FUNCTION__FUNC #tab-flag_09:checked ~ * .panel__body .tab-switch_09 {
  display: inherit;
}
@media screen and (max-width: 994px) {
  #SL22_FUNCTION__FUNC .layout__body {
    margin-top: 0;
  }
  #SL22_FUNCTION__FUNC .panels {
    flex-direction: column;
    border-radius: 4px;
  }
  #SL22_FUNCTION__FUNC .panel__tab {
    padding-top: 4px;
    padding-right: 0;
    padding-bottom: 0;
  }
  #SL22_FUNCTION__FUNC .panel__tab .items {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0 2px;
  }
  #SL22_FUNCTION__FUNC .panel__tab .items > * {
    flex-basis: 33.33333333%;
    padding: 2px;
    text-align: center;
  }
  #SL22_FUNCTION__FUNC .panel__tab .item label {
    margin-bottom: 0;
    border-radius: 4px;
    font-size: 100%;
  }
  #SL22_FUNCTION__FUNC .panel__tab .item label::after {
    content: none;
  }
  #SL22_FUNCTION__FUNC .panel__body {
    /* padding-top: 0; */
    padding: 20px;
  }
  #SL22_FUNCTION__FUNC .panel__body .sidebyside {
    flex-direction: column;
  }
  #SL22_FUNCTION__FUNC .panel__body .head {
    margin-right: 0;
    font-size: 100%;
  }
  #SL22_FUNCTION__FUNC .panel__body .unit {
    margin-top: 0.5em;
    padding-bottom: 0;
  }
  #SL22_FUNCTION__FUNC .panel__body .title {
    font-size: 120%;
  }
  #SL22_FUNCTION__FUNC .panel__body .list {
    margin-right: 0;
  }
}



#SL22_FEATURE {
  font-size: 112%;
}
#SL22_FEATURE .content__body .title-bar {
  padding: 0.5em 0;
  background: rgb(0,74,87);
  background: linear-gradient(0deg, var(--Gray5) 0%, var(--Gray4) 100%);
  color: var(--White);
}
#SL22_FEATURE .content__body .title-bar .layout {
  display: flex;
  align-items: center;
}
#SL22_FEATURE .content__body .title-bar .num {
  margin-right: 0.5em;
  line-height: 1;
  font-weight: bold;
  font-size: 280%;
}
#SL22_FEATURE .content__body .title-bar strong {
  font-size: 150%;
  color: var(--White);
}
#SL22_FEATURE .content__body .layout__body {
  margin-top: 2.0em;
  margin-bottom: 6.0em;
}
#SL22_FEATURE .content__body .description {
  margin: 2.0em 0;
  line-height: 1.6;
  color: #504100;
}
#SL22_FEATURE .switches .items {
  display: flex;
}
#SL22_FEATURE .switches .items > * {
  flex-basis: 100%;
}
#SL22_FEATURE .switches label {
  display: block;
  width: 100%;
  padding: 0.75em;
  background-color: var(--White);
  box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
  text-align: center;
  font-weight: bold;
  color: var(--Red2);
}
#SL22_FEATURE .switches .style_blue label {
  color: var(--Red2);
}
#SL22_FEATURE .panels .item {
  padding: 2.0em;
  background-color: var(--Gray1);
}
#SL22_FEATURE .panels .title {
  margin-bottom: 0.5em;
  line-height: 1.6;
  font-size: 140%;
  color: var(--Gray5);
}
#SL22_FEATURE .panels .style_blue .title {
  color: var(--Red2);
}
#SL22_FEATURE .panels .list > * {
  position: relative;
  margin-bottom: 0.5em;
  padding-left: 1.5em;
}
#SL22_FEATURE .panels .list > *::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--Gray5);
}
#SL22_FEATURE .panels .style_blue .list > *::before {
  color: var(--Gray6);
}
#SL22_FEATURE .panels figure {
  margin: 0 auto;
  width: 75%;
}
#Contents .switch-module .switch-flag {
  display: none;
}
#Contents .switch-module .switch_01:checked ~ * .switches .switch_01 label ,
#Contents .switch-module .switch_02:checked ~ * .switches .switch_02 label ,
#Contents .switch-module .switch_03:checked ~ * .switches .switch_03 label {
  background-color: currentcolor;
  box-shadow: none;
}
#Contents .switch-module .switch_01:checked ~ * .switches .switch_01 label .label ,
#Contents .switch-module .switch_02:checked ~ * .switches .switch_02 label .label ,
#Contents .switch-module .switch_03:checked ~ * .switches .switch_03 label .label {
  color: var(--White);
}
#Contents .switch-module .panels .item {
  display: none;
}
#Contents .switch-module .switch_01:checked ~ * .panels .switch_01 ,
#Contents .switch-module .switch_02:checked ~ * .panels .switch_02 ,
#Contents .switch-module .switch_03:checked ~ * .panels .switch_03 {
  display: inherit;
}
@media screen and (max-width: 994px) {
  #SL22_FEATURE {
    font-size: 100%;
  }
  #SL22_FEATURE .switches .items {
    flex-direction: column;
  }
  #SL22_FEATURE .switches label {
    padding: 0.5em;
  }
  #SL22_FEATURE .panels .title {
    font-size: 100%;
  }
  #SL22_FEATURE .panels .item {
    padding: 1em;
  }
  #SL22_FEATURE .panels figure {
    width: 100%;
  }
  #SL22_FEATURE .content__body .title-bar .num {
    font-size: 200%;
  }
  #SL22_FEATURE .content__body .title-bar strong {
    font-size: 120%;
  }
  #SL22_FEATURE .content__body .layout__body {
    margin-top: 1.0em;
  }
  #SL22_FEATURE .content__body .description {
    margin: 1.0em 0;
  }
  #SL22_FEATURE .content__body .layout__body {
    margin-bottom: 2.0em;
  }
}




#SL22_CASE__INTRO .content__body {
  padding-top: 3.0em;
  padding-bottom: 3.0em;
  font-size: 112%;
}
#SL22_CASE__INTRO .content__body .title {
  margin-bottom: 0.5em;
  font-weight: bold;
  font-size: 140%;
  color: var(--Black);
}
#SL22_CASE__INTRO .description {
  margin-bottom: 0.5em;
  font-weight: bold;
  font-size: 120%;
  color: var(--Red2);
}
#SL22_CASE__INTRO .arrange__spec {
  display: flex;
  background-color: var(--White);
  border: 1px solid var(--Black);
  border-right: none;
  font-weight: bold;
  font-size: 80%;
}
#SL22_CASE__INTRO .arrange__spec > * {
  flex-basis: 100%;
  padding: 0.5em 1.0em;
  border-right: 1px solid var(--Black);
}
#SL22_CASE__INTRO .arrange__sidebyside {
  display: flex;
  margin: 0 -7px;
  padding: 2.0em 0;
}
#SL22_CASE__INTRO .arrange__sidebyside > * {
  flex-basis: 100%;
  padding: 0 7px;
}
#SL22_CASE__INTRO .arrange__info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#SL22_CASE__INTRO .message {
  margin-bottom: 0.5em;
  font-size: 90%;
}
#SL22_CASE__INTRO .button__detail a {
  display: block;
  padding: 0.5em;
  background-color: var(--Gray5);
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
  font-size: 100%;
  color: var(--White);
}
#SL22_CASE__INTRO .corner-title {
  margin-top: 2.0em;
  margin-bottom: 0.5em;
  text-align: center;
  font-weight: bold;
  font-size: 112%;
  color: var(--Black);
}
#SL22_CASE__INTRO .movie-title {
  margin-bottom: 0.5em;
  font-weight: bold;
  font-size: 120%;
  color: #004F79;
}
#SL22_CASE__INTRO .addition-title {
  margin-top: 2.0em;
  margin-bottom: 0.5em;
  font-weight: bold;
  font-size: 140%;
  color: var(--Red2);
}
#SL22_CASE__INTRO .button {
  margin-top: 2.0em;
}
@media screen and (max-width: 994px) {
  #SL22_CASE__INTRO .content__body {
    padding-top: 2.0em;
  }
  #SL22_CASE__INTRO .content__body ,
  #SL22_CASE__INTRO .content__body .title ,
  #SL22_CASE__INTRO .description ,
  #SL22_CASE__INTRO .corner-title ,
  #SL22_CASE__INTRO .movie-title ,
  #SL22_CASE__INTRO .addition-title {
    font-size: 100%;
  }
  #SL22_CASE__INTRO .arrange__spec {
    flex-direction: column;
    border-bottom: none;
  }
  #SL22_CASE__INTRO .arrange__spec > * {
    border-bottom: 1px solid var(--Black);
  }
  #SL22_CASE__INTRO .arrange__sidebyside {
    flex-direction: column;
  }
  #SL22_CASE__INTRO .message {
    margin: 1.0em 0;
  }
  #SL22_CASE__INTRO .corner-title {
    margin-top: 1.0em;
  }
}


#SL22_CASE__USE .anchor {
  position: relative;
  top: -100px;
}
#SL22_CASE__USE .content__body {
  margin-top: 60px;
  margin-bottom: 6.0em;
  padding-top: 3.0em;
  padding-bottom: 3.0em;
  font-size: 112%;
}
#SL22_CASE__USE .content__body .layout__head {
  position: relative;
}
#SL22_CASE__USE .content__body .layout__head .wrap {
  position: absolute;
  top: -40px;
  width: 100%;
}
#SL22_CASE__USE .icon {
  position: absolute;
  top: -50px;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
  background-color: var(--Gray4);
  border-radius: 999px;
}
#SL22_CASE__USE .icon > * {
  width: 110px;
  height: 110px;
}
#SL22_CASE__USE .content__body .title {
  margin-left: 170px;
  margin-bottom: 0.25em;
  font-size: 170%;
}
#SL22_CASE__USE .arrange__spec {
  display: flex;
  margin-left: 70px;
  background-color: var(--White);
  border: 1px solid var(--Black);
  border-right: none;
  font-weight: bold;
  font-size: 80%;
}
#SL22_CASE__USE .arrange__spec > * {
  flex-basis: 100%;
  padding: 0.5em 2.0em;
  border-right: 1px solid var(--Black);
  text-align: left;
}
#SL22_CASE__USE .arrange__spec .head {
  padding-left: 100px;
}
#SL22_CASE__USE .content__body .layout__body {
  padding-top: 80px;
  /* font-size: 112%; */
}
#SL22_CASE__USE .arrange__effect {
  display: flex;
}
#SL22_CASE__USE .arrange__effect > * {
  flex-basis: 100%;
}
#SL22_CASE__USE .arrange__effect .head {
  overflow: hidden;
  position: relative;
}
#SL22_CASE__USE .arrange__effect .body {
  padding-left: 7px;
}
#SL22_CASE__USE .arrange__effect .wrap {
  height: 100%;
  background-color: var(--White);
}
#SL22_CASE__USE .arrange__effect .wrap .content {
  position: relative;
  z-index: 2;
}
#SL22_CASE__USE .arrange__effect .head .wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  display: block;
  width: 0;
  height: 0;
  border-left: 90px solid transparent;
  border-top: 300px solid var(--Gray1);
  border-bottom: 300px solid var(--Gray1);
  transform: translate(0,-50%);
}
#SL22_CASE__USE .content__body .content {
  padding: 1.0em;
}
#SL22_CASE__USE .content__body .content h4 {
  margin-bottom: 0.5em;
  font-weight: bold;
  font-size: 130%;
  color: var(--Black);
}
#SL22_CASE__USE .content__body .effect h4 {
  color: var(--Red2);
}
#SL22_CASE__USE .content__body .point h4 {
  color: var(--Red1);
}
#SL22_CASE__USE .content__body .list > * {
  position: relative;
  margin-bottom: 0.5em;
  padding-left: 1.3em;
  font-weight: bold;
  font-size: 108%;
  color: var(--Gray6);
}
#SL22_CASE__USE .content__body .list > *::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 0.1em;
  font-size: 90%;
  color: var(--Gray3);
}
#SL22_CASE__USE .content__body .effect .list > *::before {
  color: var(--Red2);
}
#SL22_CASE__USE .content__body .point .list > *::before {
  color: var(--Red1);
}
#SL22_CASE__USE .point {
  margin-top: 1.0em;
  background-color: var(--White);
  /* font-size: 108%; */
}
#SL22_CASE__USE .button__detail {
  position: relative;
}
#SL22_CASE__USE .button__detail a ,
#SL22_CASE__USE .button__detail label {
  position: absolute;
  bottom: -1.0em;
  right: 0;
  display: block;
  padding: 0.75em 4.5em;
  background-color: var(--Gray5);
  box-shadow: 0 3px 6px rgba(0,0,0,0.16);
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
  font-size: 112%;
  color: var(--White);
}
@media screen and (max-width: 994px) {
  #SL22_CASE__USE .content__body {
    font-size: 100%;
    padding-bottom: 2.0em;
  }
  #SL22_CASE__USE .arrange__effect {
    flex-direction: column;
  }
  #SL22_CASE__USE .content__body .layout__head .wrap {
    position: relative;
    top: 0;
    margin-top: -40px;
  }
  #SL22_CASE__USE .arrange__effect .head .wrap::after {
    content: none;
  }
  #SL22_CASE__USE .icon {
    left: 50%;
    width: 80px;
    height: 80px;
    transform: translate(-50%,0);
  }
  #SL22_CASE__USE .icon > * {
    width: 80%;
    height: 80%;
  }
  #SL22_CASE__USE .content__body .title {
    margin-left: 0;
    padding-top: 40px;
    font-size: 120%;
    text-align: center;
  }
  #SL22_CASE__USE .arrange__spec {
    margin-left: 0;
    flex-direction: column;
  }
  #SL22_CASE__USE .arrange__spec > * {
    padding-left: 0.5em;
  }
  #SL22_CASE__USE .arrange__spec > *:first-child {
    border-bottom: 1px solid var(--Black);
  }
  #SL22_CASE__USE .arrange__spec .head {
    padding-left: 0.5em;
  }
  #SL22_CASE__USE .content__body .layout__body {
    padding-top: 20px;
  }
  #SL22_CASE__USE .arrange__effect .head {
    margin-bottom: 20px;
  }
  #SL22_CASE__USE .arrange__effect .body {
    padding-left: 0;
  }
  #SL22_CASE__USE .content__body .list > * {
    font-size: 100%;
  }
  #SL22_CASE__USE .content__body .content h4 {
    font-size: 120%;
  }
  #SL22_CASE__USE .button__detail a ,
  #SL22_CASE__USE .button__detail label {
    margin-top: 20px;
    position: relative;
    bottom: 0;
    font-size: 112%;
  }
}



#SL22_CASE__MAP .content__body .layout__body {
  background-color: var(--Gray1);
}
#SL22_CASE__MAP .content__body .layout__body .body {
  padding: 2.0em 3.0em;
}
#SL22_CASE__MAP .arrange {
  display: flex;
}

#SL22_CASE__MAP .arrange .site {
  flex-basis: 60%;
}
#SL22_CASE__MAP .arrange .industry {
  flex-basis: 40%;
}
#SL22_CASE__MAP .volume {
  display: flex;
  padding-right: 40px;
}
#SL22_CASE__MAP .volume > * {
  flex-basis: 100%;
}
#SL22_CASE__MAP .content__body h4 {
  margin-bottom: 0.5em;
  color: var(--Red2);
}
#SL22_CASE__MAP .content__body .volume .list > * ,
#SL22_CASE__MAP .content__body .kind .list > * {
  position: relative;
  margin-bottom: 0.25em;
  padding-left: 1.3em;
  font-weight: bold;
  font-size: 100%;
  color: var(--Gray5);
}
#SL22_CASE__MAP .content__body .volume .list > *::before ,
#SL22_CASE__MAP .content__body .kind .list > *::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 0.1em;
  font-size: 80%;
  color: var(--Red2);
}
#SL22_CASE__MAP .content__body .note .list > * {
  position: relative;
  padding-left: 0.5em;
  font-weight: normal;
  font-size: 90%;
}
#SL22_CASE__MAP .content__body .note .list > *::before {
  content: "*";
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (max-width: 994px) {
  #SL22_CASE__MAP .content__body .layout__body .body {
    padding: 20px 40px;
  }
  #SL22_CASE__MAP .arrange {
    flex-direction: column;
  }
  #SL22_CASE__MAP .volume {
    flex-direction: column;
  }
  #SL22_CASE__MAP .arrange .site {
    margin-bottom: 20px;
  }
}




#Contents .youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
#Contents .youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

#Contents .button__next a {
  display: inline-block;
  min-width: 90%;
	max-width: 80%;
  padding: 0.75em 1.0em 0.5em;
  background-color: var(--Gray5);
	box-shadow: 0 5px 0px var(--Gray3);
  border-radius: 999px;
  line-height: 1.0;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 133%;
  color: var(--White);
}
@media screen and (max-width: 994px) {
  #Contents .button__next a {
    line-height: 1.4;
    font-size: 100%;
  }
}
#Contents .button__price {
	text-align: center;
}
#Contents .button__price a {
  display: inline-flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
	max-width: 80%;
  padding: 0.5em 2.0em;
  background-color: var(--Red2);
  border-radius: 999px;
  line-height: 1.0;
  text-decoration: none;
  color: var(--White);
}
#Contents .button__price .head {
  font-weight: bold;
  font-size: 170%;
}
#Contents .button__price .icon {
  width: 80px;
}
#Contents .button__price .guide {
  line-height: 1.4;
  text-align: left;
}
@media screen and (max-width: 994px) {
  #Contents .button__price a {
    flex-direction: column;
    padding: 1.0em;
    border-radius: 2.0em;
		max-width: inherit;
  }
  #Contents .button__price .head {
    font-size: 120%;
  }
  #Contents .button__price .icon {
    width: 60px;
    margin: 0.5em;
  }
}


#Contents .button__faq a {
  display: inline-flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
	max-width: 80%;
  padding: 1.0em;
  background-color: var(--Gray4);
  /*box-shadow: 0 5px 10px rgba(0,0,0,1);*/
	box-shadow: 0 5px 0 var(--Gray6);
  border-radius: 999px;
  line-height: 1.0;
  text-decoration: none;
  color: var(--White);
}
#Contents .button__faq .head {
  padding-left: 40px;
  font-weight: bold;
  font-size: 170%;
}
#Contents .button__faq .bound {
  flex-grow: 1;
  position: relative;
  margin-left: 80px;
  padding: 0.5em;
  padding-left: 80px;
  border-radius: 999px;
  border: 2px solid var(--White);
}
#Contents .button__faq .icon {
  position: absolute;
  left: -40px;
  top: -40px;
  width: 120px;
}
#Contents .button__faq .guide {
  line-height: 1.4;
  text-align: left;
  font-weight: bold;
  font-size: 170%;
}
@media screen and (max-width: 994px) {
  #Contents .button__faq a {
    display: block;
    border-radius: 2em;
		max-width: inherit;
  }
  #Contents .button__faq .head {
    display: block;
    margin-bottom: 0.5em;
    font-size: 120%;
  }
  #Contents .button__faq .bound {
    display: block;
    margin-left: 30px;
    padding-left: 30px;
    border-radius: 1.5em;
  }
  #Contents .button__faq .icon {
    top: -20px;
    width: 80px;
  }
  #Contents .button__faq .guide {
    font-size: 100%;
  }
}



/* ---------- .button__requirement ---------- */
#Contents .button__requirement a {
display: inline-flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	max-width: 80%;
	padding: 1.0em;
	background-color: var(--Gray4);
	/* box-shadow: 0 5px 10px rgba(0, 0, 0, 1); */
	box-shadow: 0 5px 0 var(--Gray6);
	border-radius: 999px;
	line-height: 1.0;
	text-decoration: none;
	color: var(--White);
}
#Contents .button__requirement .head {
  min-width: 3em;
  padding-left: 40px;
  font-weight: bold;
  font-size: 170%;
}
#Contents .button__requirement .bound {
  flex-grow: 1;
  position: relative;
  margin-left: 80px;
  padding: 0.5em;
  padding-left: 80px;
  border-radius: 999px;
  border: 2px solid var(--White);
}
#Contents .button__requirement .icon {
  position: absolute;
  left: -50px;
  top: -22px;
  width: 150px;
}
#Contents .button__requirement .guide {
  line-height: 1.4;
  text-align: left;
  font-weight: bold;
  font-size: 170%;
}
@media screen and (max-width: 994px) {
  #Contents .button__requirement a {
    display: block;
    border-radius: 2em;
		max-width: inherit;
  }
  #Contents .button__requirement .head {
    display: none;
  }
  #Contents .button__requirement .bound {
    display: block;
    margin-left: 30px;
    padding-left: 30px;
    border-radius: 1.5em;
  }
  #Contents .button__requirement .icon {
    top: 5px;
    width: 80px;
  }
  #Contents .button__requirement .guide {
    font-size: 100%;
  }
}




/* ---------- .button__contact ---------- */
#Contents .button__contact a {
display: inline-flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	max-width: 80%;
	margin-top: 20px;
	padding: 1.0em;
	/*border: 2px solid var(--White);*/
	background-color: var(--Red2);
	border-radius: 999px;
	line-height: 1.0;
	text-decoration: none;
	color: var(--White);
}
#Contents .button__contact .head {
  min-width: 3em;
  padding-left: 40px;
  font-weight: bold;
  font-size: 170%;
}
#Contents .button__contact .bound {
  flex-grow: 1;
  position: relative;
  margin-left: 80px;
  padding: 0.5em;
  padding-left: 80px;
  border-radius: 999px;
  /* border: 2px solid var(--White); */
}
#Contents .button__contact .icon {
  position: absolute;
  left: -100px;
  top: -50px;
  width: 220px;
}
#Contents .button__contact .guide {
  line-height: 1.4;
  text-align: left;
  font-weight: bold;
  font-size: 170%;
}
@media screen and (max-width: 994px) {
  #Contents .button__contact a {
    display: block;
    border-radius: 2em;
		max-width: inherit;
  }
  #Contents .button__contact .head {
    display: none;
  }
  #Contents .button__contact .bound {
    display: block;
    margin-left: 30px;
    padding-left: 30px;
    border-radius: 1.5em;
  }
  #Contents .button__contact .icon {
    top: -5px;
    left: -50px;
    width: 80px;
  }
  #Contents .button__contact .guide {
    font-size: 100%;
  }
}





/* ---------- .button__download ---------- */
.button.button__download {
	text-align: center;
}
#Contents .button__download a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
	max-width: 80%;
  padding: 5px 30px;
  background-color: var(--Gray4);
  /*box-shadow: 0 3px 10px rgba(0,0,0,1);*/
	box-shadow: 0 3px 0 var(--Gray3);
  border-radius: 999px;
  text-decoration: none;
  font-weight: bold;
  font-size: 170%;
  color: var(--White);
}
#Contents .button__download a .icon {
  width: 200px;
  margin: -30px 0;
  /* padding-right: 20px; */
}
#Contents .button__download a .icon img {
  width: 100%;
  height: auto;
}
#Contents .button__download a .label {
  padding-left: 20px;
}
@media screen and (max-width: 994px) {
  #Contents .button__download a {
    padding: 5px 20px;
    font-size: 100%;
		max-width: inherit;
  }
  #Contents .button__download a .icon {
    width: 70px;
    margin: 0;
  }
  #Contents .button__download a .label {
    padding-left: 10px;
  }
}



/* ---------- .button__download ---------- */
#Contents .button__foot-contact a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 90%;
  padding: 0.75em 30px;
  background-color: var(--White);
  border: 1px solid #00AAB1;
  border-radius: 999px;
  text-decoration: none;
  font-weight: normal;
  font-size: 120%;
  color: #00AAB1;
}
@media screen and (max-width: 994px) {

}



.style__color-sky {
  background-color: var(--Gray1);
}
.style__color-gray {
  background-color: rgb(241, 241, 241);
}
.style__color-blue {
  background-color: var(--Gray5);
}
.style__color-blue-gradation {
  background-color: var(--Gray3);
	color: var(--Black);
}



@media screen and (min-width: 995px) {
  #FloatingContacts {
    display: none;
  }
}

#Controler {
  text-align: right;
}
#Controler .CampBanner {
  width: 72px;
  height: auto;
  margin-right: 10px;
}
#FloatingContacts button {
  height: inherit !important;
  padding: 4px;
  border-radius: 999px;
}
#FloatingContacts button span {
  display: block;
  width: 100%;
  height: 100%;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--White);
}
#FloatingContacts button:after {
  right: 10px !important;
}
#FloatingContacts button.CP22-cta__consult ,
#FloatingContacts button.CP22-cta__inquiry {
  background-position: 18px center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  -moz-background-size: 20px auto;
  -webkit-background-size: 20px auto;
  -o-background-size: 20px auto;
  -ms-background-size: 20px auto;
}
#FloatingContacts button.CP22-cta__consult {
  background-color: #009fab;
  background-image: url(/-/media/sp/platform/image/ICON/cta_consult.svg);
}
#FloatingContacts button.CP22-cta__inquiry {
  background-color: #1d2088;
  background-image: url(/-/media/sp/platform/image/ICON/cta_inquiry.svg);
}

#Controler {
  bottom: unset;
  top: 15px;
}
@media screen and (max-width: 994px) {
  .JS #GlobalNaviTop {
    display: none;
  }
}

/* modify 202409 */
#Controler_tabs.SL22_FLOAT a,
#Controler.SL22_FLOAT a {
  display: block;
  padding: 0.8em;
  margin-top: 1.0em;
  margin-bottom: 1.0em;
  margin-right: -2em;
  padding-right: 2.8em;
  /*box-shadow: 2px 4px 10px rgba(0,0,0,0.7);*/
	box-shadow: 0 5px 0px var(--Gray3);
  border-radius: 30px;
  border: 1px solid var(--White);
  line-height: 1.3;
  font-weight: bold;
  font-size: 140%;
  color: var(--White);
}
#Controler_tabs.SL22_FLOAT a span,
#Controler.SL22_FLOAT a span {
  display: inline-block;
  width: 1.0em;
}
#Controler_tabs.SL22_FLOAT a span .tate,
#Controler.SL22_FLOAT a span .tate {
  transform: rotate(90deg);
}
#Controler_tabs.SL22_FLOAT .contact,
#Controler.SL22_FLOAT .contact {
  background-color: var(--Red2);
}
#Controler_tabs.SL22_FLOAT .tools,
#Controler.SL22_FLOAT .tools {
  background-color: var(--White);
	border: 2px solid var(--Red2);
	color: var(--Red2);
}
#Controler_tabs{
  position: fixed;
	right: 0px;
  top: 15px;
	display: block;
	width: auto;
	height: auto;
	padding: 8px 0px 0 8px;
	background: none;
	z-index: 1000;
	border-radius: none;
	animation:SlideUp ease-in 0.8s 1 normal;
  display: none;
}

#SL22_HERO .layout__buttons{
  display: flex;
  justify-content: center;
  gap: 0 40px;
  padding: 20px;
}
#SL22_HERO .layout__buttons a{
  width: 300px;
  height: 50px;
  border: 2px solid #fff;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*box-shadow: 0 3px 6px rgba(0, 0, 0, 0.8);*/
	box-shadow: 0 5px 0px var(--Gray3);
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  padding-top: 2px;
  color: #fff;
}
#SL22_HERO .layout__buttons a.contact{
  background-color: var(--Red2);
}
#SL22_HERO .layout__buttons a.tools{
  background-color: var(--White);
	border: 2px solid var(--Red2);
	color: var(--Red2);
}

#SL22_HERO.sub{
  padding: 20px 0 20px 0;
}
#SL22_HERO.sub .layout__text{
  width: 640px;
  margin: 0 auto;
  margin-top: 20px;
  color: var(--Black);
  font-weight: bold;
}
#SL22_HERO.sub .black-bar__body{
  padding: 44px 0 36px 0;
  padding-left: 160px;
}
#SL22_HERO.sub .black-bar__body .sub{
  font-size: 20px;
  margin-bottom: 15px;
}
#SL22_HERO.sub .black-bar__body h1{
  font-size: 32px;
  font-weight: bold;
  color: var(--White);
}
#SL22_HERO.sub.sub_function .black-bar__foot > .foreground img{
  width: 280px;
  top: -50px;
  right: 0;
}
#SL22_HERO.sub.sub_feature .black-bar__foot > .foreground img{
  width: 320px;
  top: -45px;
  right: 0;
}
#SL22_HERO.sub.sub_case .black-bar__foot > .foreground img{
  width: 260px;
  top: -50px;
  right: 0;
}
#SL22_HERO.sub.sub_requirement .black-bar__foot > .foreground img{
  width: 320px;
  top: -50px;
  right: 0;
}
#SL22_HERO.sub.sub_faq .black-bar__foot > .foreground img{
  width: 300px;
  top: -50px;
  right: 0;
}

#SL22_TOP__FUNCTION .content__erp .panel-layout{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 2em 0;
  gap: 1em;
}
#SL22_TOP__FUNCTION .content__erp .panel-layout .panel{
  margin: 0;
  flex-basis: auto;
  width: calc((100% - 1em) / 2);
}
#SL22_TOP__FUNCTION .content__erp .panel.fullw{
  width: 100%;
}
#SL22_TOP__FUNCTION .content__function .items .icon.fig6{
  display: flex;
  align-items: center;
  justify-content: center;
}
#SL22_TOP__FUNCTION .content__function .items .icon.fig6 img{
  width: 70%;
}

#SL22_strength .content__body {
  padding-top: 40px;
  padding-bottom: 60px;
}
#SL22_strength .content__body .layout {
  display: flex;
  gap: 30px;
}
#SL22_strength .content__body .layout .image{
  min-width: 300px;
}
#SL22_strength .content__body .layout .image img{
  max-width: 100%;
}
#SL22_strength .content__body .layout .texts .title{
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

#SL22_whitepaper .content__body {
  padding-top: 40px;
  padding-bottom: 60px;
}
#SL22_whitepaper .content__body .item{
  background-color: #fff;
  padding: 30px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
#SL22_whitepaper .content__body .item .image{
  flex-basis: 300px;
}
#SL22_whitepaper .content__body .item .image img{
  max-width: 100%;
}
#SL22_whitepaper .content__body .item .texts{
  flex-basis: calc(100% - 300px - 20px);
}
#SL22_whitepaper .content__body .item .texts table{
  margin: 0;
}
#SL22_whitepaper .content__body .item .texts table th,
#SL22_whitepaper .content__body .item .texts table td{
  padding: 10px;
  border: none;
}
#SL22_whitepaper .content__body .item .texts table th{
  background-color: var(--Gray5);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  width: auto;
  white-space: nowrap;
  text-align: center;
  border-top: 5px solid #fff;
}
#SL22_whitepaper .content__body .item .texts table td{
  background-color: #F1F1F1;
  font-size: 16px;
  border-left: 5px solid #fff; 
  border-top: 5px solid #fff;
}
#SL22_whitepaper .content__body .item .texts table tr:first-child th,
#SL22_whitepaper .content__body .item .texts table tr:first-child td{
  border-top: none;
}

#SL22_whitepaper .content__body .item .btn{
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
#SL22_whitepaper .content__body .item .btn a{
  width: 300px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--White);
  border-radius: 32px;
	border: 2px solid var(--Red2);
  font-size: 20px;
  color: var(--Red2);
  /*box-shadow: 0 3px 6px rgba(0, 0, 0, 0.8);*/
  text-decoration: none;
  padding-top: 4px;
  line-height: 1;
}
#SL22_whitepaper .layout__foot{
  text-align: center;
  margin-top: 60px;
}

#SL22_FEATURE .feature-04 figure{
  width: 86%;
  margin-top: 40px;
}
#SL22_FEATURE .feature-05 .panels .table{
  width: 86%;
  margin: 0 auto;
  margin-top: 40px;
}
#SL22_FEATURE .feature-05 .panels .table .caption{
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}
#SL22_FEATURE .feature-05 .panels .table table{
  width: 100%;
  margin: 0;
}
#SL22_FEATURE .feature-05 .panels .table table th,
#SL22_FEATURE .feature-05 .panels .table table td{
  border: none;
  padding: 8px 5px;
}
#SL22_FEATURE .feature-05 .panels .table table th{
  background-color: #CCCCCC;
  border-top: 5px solid rgb(249, 252, 249);
  white-space: nowrap;
}
#SL22_FEATURE .feature-05 .panels .table table td{
  background-color: #F2F2F2;
  border-top: 5px solid rgb(249, 252, 249);
  border-left: 5px solid rgb(249, 252, 249);
}
#SL22_FEATURE .feature-05 .panels .table table tr:first-child th,
#SL22_FEATURE .feature-05 .panels .table table tr:first-child td{
  border-top: none;
}
#SL22_FEATURE .feature-05 .panels .table table td ul{
  margin-left: 1em;
}
#SL22_FEATURE .feature-05 .panels .table table td ul ul{
  margin-left: 0;
}
#SL22_FEATURE .feature-05 .panels .table table td ul li{
  text-indent: -1em;
  margin-left: 1em;
}
@media screen and (min-width: 995px) and (max-width: 1304px) {
	.OptionWideRWD .GridSet {
		margin: 0;
	}
	.OptionWideRWD #Contents,
	.OptionWideRWD .Grid4 {
		padding: 0;
	}
	.OptionWideRWD #Contents .normal-width {
		width: 100%;
	}
	.OptionWideRWD #SL22_FOOT-NAVI .items {
		margin: 0;
	}
}
@media screen and (max-width: 994px) {
  #SL22_HERO .layout__buttons{
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  #SL22_HERO.sub{
    padding-top: 0;
  }
  #SL22_HERO.sub .black-bar{
    margin-top: 0;
  }
  #SL22_HERO.sub .layout__text{
    width: auto;
    padding: 0 20px;
  }
  #SL22_HERO.sub .black-bar__body{
    padding-left: 20px;
  }
  #SL22_HERO.sub .black-bar__body .sub{
    font-size: 16px;
  }
  #SL22_HERO.sub .black-bar__body h1{
    font-size: 26px;
  }
  #SL22_HERO.sub .black-bar__foot > .foreground{
    padding: 0;
    top: auto;
    bottom: 0;
  }
  #SL22_HERO.sub.sub_function .black-bar__foot > .foreground img{
    width: 27%;
    top: auto;
    bottom: -15px;
    right: 10px;
  }
  #SL22_HERO.sub.sub_feature .black-bar__foot > .foreground img{
    width: 30%;
    top: auto;
    bottom: -20px;
    right: 10px;
  }
  #SL22_HERO.sub.sub_case .black-bar__foot > .foreground img{
    width: 25%;
    top: auto;
    bottom: -10px;
    right: 10px;
  }
  #SL22_HERO.sub.sub_requirement .black-bar__foot > .foreground img{
    width: 30%;
    top: auto;
    bottom: -10px;
    right: 10px;
  }
  #SL22_HERO.sub.sub_faq .black-bar__foot > .foreground img{
    width: 30%;
    top: auto;
    bottom: -10px;
    right: 10px;
  }

  #SL22_FUNCTION__FUNC .panel__body .subti{
    font-size: 11px;
  }

  #SL22_TOP__FUNCTION .content__erp .panel-layout .panel{
    width: 100%;
  }
  #SL22_strength .content__body .layout{
    display: flex;
    flex-direction: column;
  }
  #SL22_whitepaper .content__body .item{
    flex-direction: column;
  }
  #SL22_whitepaper .content__body .item .image{
    flex-basis: auto;
  }
}