@charset "UTF-8";
/* IBiSE CSS Document */
html {font-size:16px;}
body {color:#20261C;line-height:1.7;}
ul,ol,li{list-style:none;margin: 0;padding: 0;}
dt,dd {margin: 0;}
img {display:block;}
[data-ruby] {position: relative;}
[data-ruby]::before {content: attr(data-ruby);position: absolute;top: -0.75em;left: 0;right: 0;margin: auto;font-size: 0.45em;font-weight: 500;}
a {color:#404E4D;text-decoration:underline;transition: 0.5s;}
a:visited {color:#404E4D;}
header a,footer a{text-decoration: none;}
a:hover {color:#404E4D; text-decoration:none;opacity: 0.8; -webkit-transition: 0.3s ease-in-out;-moz-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out;transition: 0.3s ease-in-out;}
a:active {color:#404E4D;}
/* btn */
.btn {display: block;}
.btn a {background-color:#0447b4; color: #fff; font-weight: 900; text-decoration: none; display: block; padding: 10px 28px; border-radius:48px; position: relative; line-height: 1.4}
.btn a:hover {filter: saturate(140%);opacity: 1;}
.btn a::after {content:"";width: 7px; height: 7px; border-top: 2px solid #fff; border-right: 2px solid #fff; display: block; transform: rotate(45deg); position: absolute; top: 50%; right: 14px; margin-top: -4px;}
.btn a.trial {background-color:#F76A31;}
.btn a.common {background-color:inherit; border:1px solid #20261C; color: #20261C;font-size:0.95rem;font-weight: 600; text-decoration: none;display: inline-block; padding:0.5rem 2rem;border-radius:5em; position: relative;}
.btn a.common::after {content:"";width: 8px; height: 8px; border-top: 2px solid #20261C; border-right: 2px solid #20261C; display: block; transform: rotate(45deg); position: absolute; top: 50%; right: 15px; margin-top: -4px;}
.btn a.common:hover {background-color:#F2F5FA; }
.cv-area { width:90%; margin: 0 auto 2em; text-align: center; font-size: 0.85rem}
.cv-area ul li:first-of-type { position:relative;}
.cv-area ul li.btn { margin-top: 1.6em; line-height: 1.4; font-size: 12px}
.cv-area ul li.btn:first-child { margin-top: 0}
.cv-common.cv-area ul li.btn, .page-btn {padding: 0 16px}

.cv-area .btn span { color: #F76A31 ; font-weight: 900; margin-bottom: 4px; display: block; font-size: 1.1rem }
.footer-cv .cv-area .btn span { margin-bottom: 0; font-size: 1rem}
.cv-area .btn a, .page-btn a {font-weight: 900; text-align:center; margin:0 0 .6em; padding:14px 0; font-size: 14px}
.btn-area { margin-top: 2em; text-align:center;}
header.site-header nav ul.buttons{display:block;}
/* text */
h1 {font-weight:900;}
h2 {font-weight:700; line-height: 1.5;}
h3 {font-size:1.2rem; line-height: 1.5;}
.text-note {width:85%; max-width: 360px; font-size:11px; line-height: 1.5; color:#8B8B8B; margin:0 auto;}
.text-note br {display:none;}
/* color */
.c-green {color:#0447b4;}
/* bg */
.bg-gray {background-color:#F2F5Fa;}
.bg-darkgray {background-color:#40454e; color: #FFFFFF;}
.bg-green {background-color:#0447b4; color: #FFFFFF;}
.bg-lightgreen {background-color:#F2F5FA;}
.bg-gold {background-color:#B18D26; color: #FFFFFF;}
.bg-lightgold {background-color:#F4F1EA;}
.bg-lightblue{background-color:#839cd0; color:white;}
.bg-standardblue{background-color:#4b70b6; color:white;}
.bg-darkblue{background-color:#132775; color:white;}
/* banner */
.bnr-control { width: 274px; margin: 0; position:fixed;bottom: 50px; right: 23px; z-index: 10;}
.bnr-control a:hover { opacity: 1; filter: brightness(105%);}
.bnr-close .btn {width: 36px;line-height: 28px;color: #fff;background:#3A486B; border: 4px solid #FFFFFF; padding:0;border-radius: 5em;text-align: center;display: table;cursor: pointer;}
.bnr-close .btn:hover {cursor: pinter;}
.bnr-close .btn:active {background: rgb(127, 194, 239);}
.bnr-close .box {height: auto;}
.bnr-close {position: relative;}
.bnr-close .btn {position: absolute;right: -10px;top: -10px;z-index: 1;}
.bnr-control .checkbox {display: none;}
.bnr-control .bnr-close #close:checked ~ .btn {display: none;}
.bnr-control .bnr-close #close:checked ~ .box {display: none;}
/* layout */
.inner {width:90%;max-width: 600px; margin:0 auto;}
.wide {width:100%;max-width: 600px; margin:0 auto;}
/* header */
header {position: fixed;width: 100%;height: 70px;transition: 0.5s;z-index: 100;}
/* header.hide {transform: translateY(-80px);} */
header.site-header {height:60px;background-color: #FFFFFF; display:flex;align-items: center;margin: 0;padding: 0 10px;}
header.site-header.is-fixed {box-shadow: 0 2px 3px rgba(32,38,28,0.1);}
header.site-header .logo {width:236px;margin-right: 10px;}
header.site-header .logo img {display:block}
header.site-header nav {width:calc(100% - 236px);}
header.site-header nav .drawer-menu {display:flex;justify-content: space-between;align-items: center;}
header.site-header nav ul {font-size:0;}
header.site-header nav ul li {display:inline-block; font-size: .9rem; margin: 0 1vw;}
header.site-header nav ul li a {color:#222222;font-weight: 500;}
header.site-header nav ul li a:hover {color:#0447b4;border-bottom:2px solid #0447b4;}
header.site-header nav ul li.btn {margin:0 5px; width:auto;}
header.site-header nav ul li.btn a {color:#fff;font-weight: 600;border-radius: 48px;}
header.site-header nav ul li.btn a:hover {color:#fff;border-bottom:none;}
header.site-header nav ul li.btn a.contact {box-shadow: 0 3px 0 #567619;}

/* drawer */
.drawer-overlay {z-index:1;}
.drawer-hamburger{display:none}
.button:focus,
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus {background:inherit;}

/* local-navigations */
.local-navigations {padding:0.5em 20px;}
ul.bread-crumb li {font-size:0.75rem;display:inline-block;margin-right:20px;position: relative;}
ul.bread-crumb li::after {content:"";display: block;width: 7px;height: 7px;border-top: solid 1px #404E4D;border-right: solid 1px #404E4D;-webkit-transform: rotate(45deg);transform: rotate(45deg);position: absolute;top: 50%; right:-14px;margin-top:-4px;}
ul.bread-crumb li:last-of-type::after {content:"";display: block;width: 0;height: 0;border:none;}
ul.bread-crumb li a {color:#404E4D;text-decoration: none;}

/* footer */
.site-footer {background-color:#20261C;padding: 2em;}
.site-footer nav {margin-bottom:15px;}
.site-footer nav ul {font-size:0;text-align: center;}
.site-footer nav ul li {font-size: 0.85rem;display: inline-block;padding: 0 20px;border-right: 1px solid #5695fb;line-height: 1.3;}
.site-footer nav ul li:last-of-type {border-right:none;}
.site-footer nav ul li a {color:#FFFFFF;}
.footerCopyright {color:#FFFFFF;text-align: center;}

@media screen and (max-width: 1179px){
  header.site-header nav ul li { font-size: .9rem;}
}

@media screen and (max-width: 959px){
  header.site-header nav {width:100%;display:block;}
  header.site-header .logo {position:absolute;z-index: 3;margin: 0;left: 50%;margin-left: -118px;}
  header.site-header nav ul,header.site-header nav ul li {width:100%;}
  header.site-header nav ul li,header.site-header nav ul li.btn {margin:0;padding:1em;}
  header.site-header nav ul li.btn a {display:inline-block;}
  .drawer-hamburger{display:block;position: absolute;}
  .drawer--right.drawer-open .drawer-nav, .drawer--right.drawer-open .drawer-navbar .drawer-hamburger {right:0;}
  .drawer--right .drawer-hamburger, .drawer--right.drawer-open .drawer-hamburger {top:6px;right:6px;}
  .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {top: -8px;}
  .drawer-hamburger-icon:after {top: 8px;}
  .drawer-navbar .drawer-navbar-header{background-color:rgba(255,255,255,0);height:auto;border-bottom:none;z-index:9999}
  .drawer-nav{width:100%}
  .drawer--right .drawer-nav{right:-100%}
  .drawer-navbar .drawer-brand{display:none}
  .drawer-navbar .container{padding:0}
  .drawer-menu{margin-top:70px;text-align:center;flex-wrap: wrap;}
  .drawer-menu-link{margin-bottom:50px}
  .drawer-menu-thanks img{width:80%}
  .drawer-menu-item{font-weight:700;font-size:1.4rem;color:#444;padding:.75rem 1.5rem}
  .drawer-hamburger{background:rgba(255,255,255,0.5);padding:10px;width:25px;height:25px}
  .drawer-hamburger:hover{background:rgba(255,255,255,0.5)}
  .drawer--right.drawer-open .drawer-hamburger{color:#444;background:#FFF}
  .drawer-open .drawer-hamburger-icon,.drawer-open .drawer-hamburger-icon:after,.drawer-open .drawer-hamburger-icon:before{background:#444 !important}
  .drawer-hamburger-icon{margin-top:0 !important}
  .drawer-open .drawer-hamburger-icon{background:none !important}
  .drawer-navbar .drawer-nav{background:#FFF}
  .nav-wp{display:none}
  .nav-sns{display:none}
  .sp-socel{margin-top:100px}
  .sp-socel ul{display:flex;justify-content:center}
  .sp-socel ul li{padding-left:10px;padding-right:10px}
  .sp-socel ul li a{font-size:2.2rem;color:#444;display:block;text-align:center;background:#FFF}
}
@media screen and (max-width: 767px){
  header.hide {transform: translateY(-70px);}
  header.site-header .logo {width: 200px; margin-left: -100px;}
}
@media screen and (max-width: 559px){
  ul.bread-crumb {overflow-x: scroll;white-space: nowrap;}
  .site-footer nav ul li {margin: 5px 0; padding: 0 15px;}
  .footerCopyright {font-size: 0.8rem;}
}

/* content */
.site-content {padding-top:60px;}
.contents-top {padding-top: 2em;padding-bottom: 2em; text-align:center;}
#usecase .contents-top {padding-bottom:0;}
.contents-top h1 {font-size:1.5rem;line-height: 1.3;margin:0 0 0.5em;}
.contents-top p {font-size:0.9rem;line-height: 1.5;margin:0;}
.hero {}
.hero-text { text-align: center;}
.hero h1 {font-family: "Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 800; font-size:1.9rem; line-height: 1.3; margin: 0 0 0.5em;}
.hero h1 small {font-size:0.7rem;vertical-align: super;margin-right: -10px;}
.inner h2{font-size:1.35rem; margin-bottom:1em;}
.contents-top .inner h2{font-size:1.35em;}
.hero h2 {font-size:13px;font-weight: normal; margin: 0 0 2em; padding: 0 20px}
.hero-text {padding:2em 0 0 0}
.topics { width:90%; border: 1px solid #D2D3D1; margin: 0 auto; padding: 24px;}
.topics dl {line-height:1.3;}
.topics dt, .topics dd { font-size:0.85rem; display:inline; margin: 0;}
.topics dd {display: block; margin-top: 8px}
.topics dt { font-weight: 500; color: #8FD113}
.topics span { background:#FD0044; font-size: 0.65rem; color: #FFFFFF; margin-right: 5px; padding: 3px 0; border-radius: 5em; width: 60px; display: inline-block; letter-spacing: -.04em; line-height: 1; text-align: center}
.topics a {display: block; padding: 6px 0}
.topics div {margin-top: 16px}
.topics div:first-child {margin-top: 0}

.main-contents > div {padding-top:3em;padding-bottom: 3em;}
.main-contents > div.contents-okwave{padding-top:0;}
.main-contents h2 { font-size: 1.35rem; text-align: center;margin:0 0 1em;}

.main-contents > div.contents-task {padding-bottom:0;}
.contents-task .inner {background-color:#FFFFFF; padding: 2em 1.75em 1em; display: block; border-radius: 5px;position: relative;}
.contents-task .inner::after {content:"";width: 0;height: 0;border-style: solid;border-width: 20px 15px 0 15px;border-color: #ffffff transparent transparent transparent;position: absolute;bottom:-20px;left:50%;margin-left: -15px;}
.contents-task h2 {width: 90%; font-size:1.1rem; margin-left: auto; margin-right: auto;}
.contents-task ul li { font-size:0.9rem; line-height: 1.5; margin:0.75em 0;padding-left: 20px; position: relative;}
.contents-task ul li::before {content:""; background: no-repeat; background-size: cover;width: 15px; height: 13px; display: block; position: absolute; left: 0; top:4px;}
.contents-solution .inner {text-align:center; margin-bottom: 2em;}
.contents-solution h2 {margin-bottom:0.2em;}
.contents-solution .inner p, .contents-feature .inner p, .contents-flow .inner .flow-text p {font-size:0.8rem;line-height: 1.5;text-align: center;}
.contents-solution .inner p strong {font-size:1.0rem;}
.solution-box {text-align: center; padding: 5px; position: relative;z-index: 0;}
.solution-box a, .solution-box a:visited {display: block; cursor:  pointer; text-decoration: none; background: #FFFFFF; width:100%; max-width: 320px; font-size: 1.1rem; font-weight: 600; line-height: 1.5; text-align: center;display: inline-block; padding: 1.2em; box-shadow: 0 0 16px rgba(32,38,28,0.1); position: relative;border-radius: 5px;}
.solution-box a:visited { text-decoration: none}
.solution-box a img {width: 70px; position:absolute;left:15px;top:-45px;}
.contents-solution .btn a.common {padding:0.7rem 4rem;}
.contents-feature h2, .contents-flow h2 {margin-bottom:0.2em;}
.feature-text {width:100%; max-width: 500px; margin: 0 auto; padding:3em 2em; text-align: center; position: relative;}
.feature-text > span { background-color:#20261C; font-size: 0.8rem; font-weight: 500; color:#FFFFFF; display: inline-block; padding: 0.25em 1.5em; border-radius: 3px;}
.feature-text h3 { font-size:1.35rem; text-align:center}
.feature-text p {font-size:0.85rem;line-height: 1.7; text-align: left;}
.feature-01::after {content:""; background: no-repeat; background-size: cover;width:70px; height: 56px; display: block; position: absolute;bottom:30px; right: 0; z-index: -1;}
.feature-02::after {content:""; background: no-repeat; background-size: cover;width:70px; height: 56px; display: block; position: absolute;bottom:30px; right: 0; z-index: -1;}
.feature-03::after {content:""; background: no-repeat; background-size: cover;width:70px; height: 56px; display: block; position: absolute;bottom:30px; right: 0; z-index: -1;}
.feature-image {max-height:300px;overflow: hidden;}
.contents-cv.cv-area {max-width:500px; margin-bottom:0;padding-top: 0;}
.contents-cv .inner {width:100%;background-color:#F2F7F6;padding:1em; border-radius: 5px;}
.contents-cv p {font-size:12px; line-height:1.5; margin:1.5em 5% 1em;}
.contents-cv .cv-text p {font-size:1rem; text-align:center; margin-top:0.5em;}
.contents-cv.cv-area .btn a {max-width:420px; margin-left:auto; margin-right:auto;}
.main-contents > div.contents-flow {padding-top:0;}
.flow-text {padding:0 0 2em;}
.flow-step-01,.flow-step-02,.flow-step-03 {display: flex;align-items: center; padding:1.5em;position: relative;}
.flow-step-01 { background-color:#F2F7F6;}
.flow-step-02 { background-color:#D5EFA8;}
.flow-step-03 { background-color:#8FD113;}
.flow-step-01::before,.flow-step-02::before {content:"";background-color: #FFFFFF; width: 36px; height: 36px; display: block; border-radius: 5em; position: absolute;left:50%;bottom:-18px;margin-left:-18px;z-index: 1;}
.flow-step-01::after,.flow-step-02::after {content:"";width: 0;height: 0;border-style: solid;border-width: 10px 7px 0 7px;border-color: #8ed113 transparent transparent transparent; position: absolute;left:50%;bottom:-6px;margin-left:-7px;z-index: 2;}
.flow-img-step,.flow-text-step {width:50%;}
.flow-img-step { max-width: 180px; display: flex;align-items: center;justify-content: center;}
.flow-img-step img {margin:0 auto;}
.flow-img-step span img {width:60px;}
.flow-img-step figure img { margin:1em 1.5em;}
.flow-text-step p {font-size:0.8rem;line-height: 1.5;}
.flow-text-step p:first-of-type {font-size:1rem; font-weight: 700;}
.case-pickup-txt{margin-top:48px;}
.case-pickup-company{display:inline-block ;padding-bottom:10px; width:100%;}
.case-pickup-category{display:inline-block; width:100%;}
.case-pickup-img{margin-top:21px; width:100%;}
.case-pickup-title{font-size:20px; margin-bottom:24px; display:inline-block; padding-top:10px; border-top:solid 2px #8FD111; width:100%;}
.case-pickup-img{width: 100%;
    min-height: 48vw;
    background-size: cover;
    margin: 30px auto 0px auto;}
@media screen and (min-width: 768px){.contents-case .case-pickup-txt .btn-wrap{float:left; margin-top:20px;} .inner h2{font-size:40px; margin-bottom:5px;} .cv-common.cv-area ul li.btn{font-size:16px;} }
@media screen and (min-width: 960px){.contents-case .case-pickup-txt .btn-wrap{float:right;}}
.contents-security .col-2-box .box {display:flex; align-items: center;margin-bottom: 1.25em;}
.contents-security .col-2-box .box figure {width:53px;margin-right:13px;}
.security-text {width:100%;}
.security-text p {font-size:0.8rem;line-height: 1.5;}
.security-text p:first-of-type {font-size:0.9rem; font-weight: bold; color: white;}
.footer-cv {position:relative;}
.footer-cv > div {padding-top:3em;padding-bottom: 3em;}
.cv-common.cv-area {width:100%;max-width: 100%;margin:0; position: relative;z-index: 2;}
.cv-common.cv-area.bg-green { background-repeat: no-repeat;background-position: bottom center; background-size: 150% auto;}
.cv-common.cv-area .cv-text {text-align:center;margin-bottom:1.25em;}
.cv-common.cv-area .cv-text p {font-size:1.2rem;font-weight: 900;margin:0.1em 0;}
.footer-cv > div.page-top {width:85%;max-width: 1100px; margin: 0 auto;height: 60px;padding: 0; position: absolute;left:50%;top: -50px; transform: translateX(-50%);transition: 0.5s;}
.footer-cv > div.page-top a {background-color:#20261C;width:80px; height: 60px; text-indent: -9999px; display: block;float: right;border-radius: 0.5em;position: relative;top: 10px;}
.footer-cv > div.page-top a:hover {top:5px; opacity: 1.0;}
.footer-cv > div.page-top a::after {content: "";width: 14px;height: 14px;border-top: 2px solid #D2D3D1;border-right: 2px solid #D2D3D1;display: block;transform: rotate(-45deg);position: absolute;top:18px;left:50%;margin-left: -7px;}
.footer-cv > div.page-top a:hover::after {border-top: 2px solid #0447b4;border-right: 2px solid #0447b4;}
