@charset "UTF-8";
/* COMMON STYLE */
.sa-kobot { color: #333; font-size: 16px;}
.sa-kobot a:hover { color: #1a86d1; opacity: 0.8;}
.sa-kobot h2 { margin-bottom: 30px; color: #009bdc; font-size: 20px!important; line-height: 1.5!important;}
.sa-kobot h2 big { font-size: 30px!important}
.sa-kobot h2 small { display: block; font-size: 14px!important;}
.sa-kobot strong { font-weight: bold;}
@media screen and (min-width: 768px) {
  #sa-common.sa-kobot section .contents-inr { padding-top: 80px!important; padding-bottom: 80px!important}
  .sa-kobot { color: #333; font-size: 14px;}
  .sa-kobot h2 { font-size: 30px!important; font-weight: bold!important;}
  .sa-kobot h2 big { font-size: 40px!important;}
  .sa-kobot h2 small { display: block; font-size: 24px!important;}
}
.sec-sa-common h2 { font-weight: normal!important;}
/* .mv */
.sa-kobot .mv { position: relative; background: #f0faff url(../img/sa-kobot/bg-mv-sp.jpg)no-repeat center center/cover;}
.sa-kobot .mv .mv-inr { overflow: hidden; height: 480px;}
.sa-kobot h1 { margin: 60px 0 20px -0.5em!important; font-size: 15px; line-height: 1.5;}
.sa-kobot .logo-top { font-size: 18px; font-weight: bold; line-height: 1.3!important;}
.sa-kobot .logo-top big { display: block; font-size: 24px;}
.sa-kobot .mv-logo { max-width: 70%;}
@media screen and (max-width: 767px) {
  .sa-kobot h1 { margin-top: 100px; text-align: center;}
  .sa-kobot .logo-top { text-align: center;}
  .sa-kobot .mv-logo { margin: 20px auto 0;}
}
@media screen and (min-width: 768px) { 
  .sa-kobot .mv { background-image: url(../img/sa-kobot/bg-mv-pc.jpg);}
  .sa-kobot .mv .mv-inr { display: flex; align-items: center; height: 440px;}
  .sa-kobot h1 { margin: 40px 0 55px -0.5em!important;}
  .sa-kobot  .logo-top { font-size: 20px;}
  .sa-kobot  .logo-top big { font-size: 30px;}
  .sa-kobot  .mv-logo { max-width: 500px; margin: 20px 0 30px;}
}
/* .sec-service */
.sa-kobot .sec-service h2 { margin: 0 0 20px; font-weight: normal!important;}
.sa-kobot .sec-service .inr { min-width: 320px; max-width: 990px; margin: auto; padding: 40px 20px 50px}
@media screen and (max-width: 767px) { 
  .sa-kobot .sec-service .box-image { width: fit-content; max-width: 80%; margin: 0 auto 30px; text-align: center;}
}
@media screen and (min-width: 768px) { 
  .sa-kobot .sec-service h2 { text-align: left!important;}
  .sa-kobot .sec-service p { font-size: 16px;}
}
/* .sec-kobot */
.sa-kobot .sec-kobot { background: #f2f3f7;}
.sa-kobot .sec-kobot .box { width: 100%;}
.sa-kobot .sec-kobot .box .ttl { position: relative; display: flex; justify-content: center; align-items: center; height: 95px; font-size: 18px; line-height: 2; letter-spacing: 0.09em; text-align: center; font-weight: bold;}
.sa-kobot .sec-kobot .box .ttl big { margin-right: 5px; color: #009bdc; font-size: 22px;}
.sa-kobot .sec-kobot .box .ttl img { position: absolute; bottom: 0;}
.sa-kobot .sec-kobot .box.left .ttl img { left: 0;}
.sa-kobot .sec-kobot .box.right .ttl img { right: 0;}
.sa-kobot .sec-kobot .box.left .ttl { padding-left: 15%;}
.sa-kobot .sec-kobot .box.right .ttl { padding-right: 15%;}
.sa-kobot .sec-kobot .box-white { padding: 20px; text-align: center; background: #fff; border-radius: 8px}
.sa-kobot .sec-kobot .box-white .catch { margin-bottom: 15px!important; font-weight: bold;}
.sa-kobot .sec-kobot .box-white .catch big { font-size: 18px; background: linear-gradient(transparent 70%, #f9f248 70%);}
.sa-kobot .sec-kobot .box-white ul { margin-top: 20px!important; background: #f2f3f7;}
.sa-kobot .sec-kobot .box-white ul li { position: relative; margin-right: 10px; padding: 10px 0 10px 20px; font-size: 16px; font-weight: bold;}
.sa-kobot .sec-kobot .box-white ul li::before { position: absolute; left: 0; top: 12px; content: ""; width: 14px; height: 9px; border-bottom: 3.5px solid #1a86d1; border-left: 3.5px solid #1a86d1; transform: rotate(-45deg);}
.sa-kobot .sec-kobot .box-white .btn { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; margin: 30px auto 0; color: #fff; font-weight: bold; background: #1a86d1; border-radius: 50px;}
.sa-kobot .sec-kobot .box-white .btn::after { position: absolute; right: 15px; content: ""; width: 14px; height: 14px; border-top: 4px solid #f8ef1a; border-right: 4px solid #f8ef1a; transform: rotate(45deg);}
.sa-kobot h3 { margin: 70px 0 40px; color: #009bdc; font-size: 20px; text-align: center;}
.sa-kobot .sec-kobot .box-other a { position: relative; display: flex; justify-content: center; flex-direction: column; min-height: 95px; padding: 20px; background: #fff; border-radius: 4px;}
.sa-kobot .sec-kobot .box-other a::after { position: absolute; right: 15px; content: ""; width: 14px; height: 14px; border-top: 4px solid #1a86d1; border-right: 4px solid #1a86d1; transform: rotate(45deg);}
.sa-kobot .sec-kobot .box-other .catch { margin: 0 0 5px 5px!important; font-size: 13px; line-height: 1.3!important; font-weight: bold;}
.sa-kobot .sec-kobot .box-link { color: #1a86d1; border-color: #1a86d1;}
@media screen and (max-width: 767px) { 
  .sa-kobot .sec-kobot .box:nth-of-type(n + 2) { margin-top: 60px;}
  .sa-kobot .sec-kobot .box .ttl big { position: relative;}
  .sa-kobot .sec-kobot .box .ttl big::before { position: absolute; top: -1em; left: 6px; content: "･･･"; font-size: 23px; letter-spacing: 0.5em;}
  .sa-kobot .sec-kobot .box.right .ttl big::before { content: "････"; }
  .sa-kobot .sec-kobot .box-other a:nth-of-type(n + 2) { margin-top: 20px;}
  .sa-kobot .sec-kobot .box-other .catch { padding-right: 30px;}
  .sa-kobot .sec-kobot .box-other a img { width: 90%;}
}
@media screen and (min-width: 768px) { 
  .sa-kobot .sec-kobot .box { display: flex; flex-direction: column; width: 48%;}
  .sa-kobot .sec-kobot .box .ttl { font-size: 23px; height: 95px;}
  .sa-kobot .sec-kobot .box .ttl big { font-size: 30px; background: radial-gradient(.10em .10em at center center,#009bdc,#009bdc 100%,transparent) repeat-x top left -2px/1em .4em;}
  .sa-kobot .sec-kobot .box.left .ttl { padding-left: 8%;}
  .sa-kobot .sec-kobot .box.right .ttl { padding-right: 6%;}
  .sa-kobot .sec-kobot .box.left .ttl img { left: 15px;}
  .sa-kobot .sec-kobot .box.right .ttl img { right: 15px;}
  .sa-kobot h3 { font-size: 23px;}
  .sa-kobot .sec-kobot .box-white { flex-grow: 1; display: flex; flex-direction: column}
  .sa-kobot .sec-kobot .box-white .catch {flex-grow: 1;  font-size: 18px}
  .sa-kobot .sec-kobot .box-white .catch big { font-size: 20px;}
  .sa-kobot .sec-kobot .box-white .btn { width: 80%; font-size: 16px;}
  .sa-kobot .sec-kobot .box-other a { width: 48%; padding: 20px 30px;}
  .sa-kobot .sec-kobot .box-other a::before, .sa-kobot .sec-kobot .box-other a::after {right: 20px;}
  .sa-kobot .sec-kobot .box-other a:nth-of-type(n + 3) { margin-top: 20px;}
  .sa-kobot .sec-kobot .box-other .catch { margin: 0 0 5px 5px;}
}
/* .sec-example */
.sa-kobot .sec-example { padding: 40px 0;}
.sa-kobot .sec-example .inr { max-width: 990px; margin: auto;}
.sa-kobot .sec-example .text-lead { margin-bottom: 34px!important; font-size: 14px;}
.sa-kobot .box-example { margin: 0 30px; border: 1.5px solid #009bdc; border-radius: 10px;}
.sa-kobot .box-example .ttl { display: flex; align-items: center; height: 60px; padding: 0 15px; color: #fff; font-size: 18px; background: #009bdc; border-top-left-radius: 8px; border-top-right-radius: 8px;}
.sa-kobot .box-example .ttl img { margin-right: 15px;}
.sa-kobot .box-example-inr { padding: 10px 20px 10px;}
.sa-kobot .box-example .head { display: flex; justify-content: space-between;}
.sa-kobot .box-example .head figure { width: 100px;}
.sa-kobot .box-example .head figure img { border-radius: 10px;}
.sa-kobot .box-example .head .text { width: calc(100% - 115px); font-weight: bold;}
.sa-kobot .box-example .head .text strong { color: #dc1357;}
.sa-kobot .box-example dl { margin-top: 10px; line-height: 1.5;}
.sa-kobot .box-example dl dt { padding-bottom: 10px; color: #009bdc; font-size: 18px; font-weight: bold; border-bottom: 1px solid #009bdc;}
.sa-kobot .box-example dl dd { padding-top: 10px; line-height: 2;}
.sa-kobot .box-example dl dt:last-of-type { margin-top: 20px;}
@media screen and (max-width: 767px) { 
  .sa-kobot .sec-example .text-lead { margin-left: 20px!important; margin-right: 20px!important;}
  .sa-kobot .box-example .ttl img { width: 50px;}
}
@media screen and (min-width: 768px) { 
  .sa-kobot .sec-example { margin: 0 50px; padding: 64px 0 80px;}
  .sa-kobot .box-example .ttl { padding: 0 30px; font-size: 2.323vw;}
  .sa-kobot .box-example-inr { padding: 30px 30px 10px;}
  .sa-kobot .box-example .head figure { width: 25%;}
  .sa-kobot .box-example .head .text { width: calc(100% - 28%); font-size: 2.323vw;}
  .sa-kobot .box-example dl { margin-top: 30px;}
  .sa-kobot .box-example dl dt { font-size: 20px;}
  .sa-kobot .box-example dl dt:last-of-type { margin-top: 35px;}
  .sa-kobot .box-example dl dd { font-size: 16px;}
}
@media screen and (min-width: 980px) {
  .sa-kobot .box-example .ttl { font-size: 24px;}
  .sa-kobot .box-example .head .text { font-size: 23px}
}
/* .sec-example > SLICK Arrows */
.sa-kobot .slick-prev, .sa-kobot .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent;}
.sa-kobot .slick-prev::before, .sa-kobot .slick-next::before { color: #fff; font-size: 20px; line-height: 1;}
.sa-kobot .slick-prev { top: 50%; left: 10px; width: 40px; height: 40px; background:rgba(46,56,76,0.95);  border-radius: 50px; z-index:10;}
.sa-kobot .slick-prev::before { content: '←';}
.sa-kobot .slick-next { top: 50%; right:  10px; width: 40px; height: 40px; background:rgba(46,56,76,0.95); border-radius: 50px; z-index:10;}
.sa-kobot .slick-next::before { content: '→';}
.sa-kobot .slick-track { display: flex;}
.sa-kobot .slick-slide { height: auto !important;}
@media print, (min-width: 769px) { 
  .sa-kobot .slick-prev, .sa-kobot .slick-next { width: 60px; height: 60px;}
  .sa-kobot .slick-prev::before, .sa-kobot .slick-next::before { font-size: 30px;}
}
@media screen and (min-width: 1201px) {
  .sa-kobot .slick-prev, .sa-kobot .slick-next { width: 60px; height: 60px;}
  .sa-kobot .slick-prev::before, .sa-kobot .slick-next::before { font-size: 30px;}
  .sa-kobot .slick-prev { left: 270px;}
  .sa-kobot .slick-next { right: 270px;}
}