@charset "utf-8";


.news-area2 .sec-inner { position: relative; }
.info-illust { width:120px; height:auto; position:absolute; right:0; bottom:0; }
@media (max-width:980px){
  .news-area2 .sec-inner { padding-bottom:100px; }
  .info-illust { width:88px; }}

.news-area1 { background-color:#fff !important; padding-top: 0;
  margin-top: 64px; border-radius: 8px; }
.side-ban-wrap { text-align: center; }
.side-ban-wrap img { width:160px; }
/* common
-------------------------------------------------------------*/
* { box-sizing: border-box; }
html { font-size: 100%; overflow-x: hidden; }
body {
    margin:0; color:#333; line-height:1.6; font-size:100%;
    font-family: 'メイリオ', Meiryo,'ヒラギノ角ゴシック','Hiragino Sans',YuGothic,'Yu Gothic',sans-serif;
    font-weight: 500;
    background:#ffffff;
    overflow-x: hidden; box-sizing: border-box; }
body::before {
    content: "";
    background: url(../img/syspo_bg202211.png) no-repeat center center;
    background-size: cover;
    display: block;
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; opacity: .8;}
@media (max-width:980px){
body::before {
    content: "";
    background: url(../img/syspo_spbg202211.jpg) no-repeat center right;
}}


@media (min-width:981px){
body { line-height:1.8;}
p {  line-height:180%; letter-spacing:.5px;}}


p {  line-height:160%; color:#092c3f; margin:0; font-size:95%; }
img { max-width: 100%; height: auto; }
h1 { margin:0; }
.bold1 { font-weight:700; color:#092c3f; }
.kec1 { color:#5fb8e8; }
.kec2 { color:#96d3da; }

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; }
::-webkit-scrollbar-thumb { background:#5fb8e8; border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }

.flex { display: flex; }
.sp { display: none; }
.spbr { display: none; }
.slide .slick-prev, .slide .slick-next { width: 56px; height: 56px; }
.slide .slick-prev:before, .slide .slick-next:before { font-size: 56px; color:#5fb8e8; }
.slide .slick-next { right:-56px; z-index: 25; }
.slide .slick-prev { left:-56px; z-index: 26; }
.slide .slick-dots { bottom: -40px;}
.slide .slick-dots li button:before {font-size: 20px;}
.slide .slick-dots li.slick-active button:before,.slide .slick-dots li:hover button:before { color: #5fb8e8; }

.slide-arrow {
  position: absolute; left:-56px; top:50%; transform: translate(0, -50%);
  width:40px; height:auto; z-index: 25; opacity:0.8; }
.next-arrow { left:inherit; right:-56px; }
.slide-arrow:hover { opacity: 1; }
/*
.slide .slick-next:before{
  background-image: url(img/arrow_right.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.slide .slick-prev:before{
  background-image: url(img/arrow_left.png);
  background-size: contain;
  background-repeat: no-repeat;
}
*/
.hBox {
  text-align: center;
  margin-bottom:30px;
  padding: 0.5em 0 0.8em;
  border-top: solid 2px #5fb8e8;
  border-bottom: solid 2px #5fb8e8;
  background: -webkit-repeating-linear-gradient(-45deg, #e5f3fb, #e5f3fb 3px,#eef8f9 3px, #eef8f9 7px);
  background: repeating-linear-gradient(-45deg, #e5f3fb, #e5f3fb 3px,#eef8f9 3px, #eef8f9 7px);
}
.hBox h2 {
  line-height: 1.2;
  color: #5fb8e8;
  font-size:150%;
  text-align: center;
  margin:0;
  font-family: 'Noto Sans JP', sans-serif;
  background-repeat: no-repeat,no-repeat;
  background-size: 36px auto,36px auto;
  background-position: left 10px center, right 10px center;
}
.hBox h2 .sub { 
  font-size:70%; color:#e88f5f; margin-top:4px;
  display:block; font-family: 'Roboto', sans-serif; letter-spacing: 1px;
}

h3 { text-align: center; font-size:130%; color:#2a72a0; position: relative;
  display: inline-block;
  font-family: 'Noto Sans JP', sans-serif;
  text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff;
  padding: 0 55px;  margin:0 auto 20px;}
h3:before, h3:after{
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 45px;
height: 1px;
background-color: #2a72a0;
}
h3:before {left:0;}
h3:after {right: 0;}

@media (max-width:787px){
  .slide .slick-prev, .slide .slick-next { width: 40px; height: 40px; }
  .slide .slick-prev:before, .slide .slick-next:before { font-size: 40px; }
  .slide .slick-next { right:-16px; }
  .slide .slick-prev { left:-16px; }
  .slide-arrow { width: 32px; left:-6%; }
  .next-arrow { width: 32px; left:inherit; right:-6%; }
  .slide .slick-dots { bottom: -24px;}
  .pc { display:none; }
  .sp { display: block; }
  .spbr { display: block; }

  .hBox h2 { background-size: 24px auto,24px auto; }
  h3 { font-size:110%; }
}




/* rayout
-------------------------------------------------------------*/
.main-wrap { max-width:1200px; width:100%; margin:auto; position: relative; }
/* 外枠（.pc-leftbar）は元の状態（背景指定なし）に戻す */
.pc-leftbar { 
    width: 160px; 
    margin-right: 80px; 
    position: absolute; 
    left: 0px; 
    top: 64px; 
    z-index: 2;
}

/* 中身（.pc-leftbar-inner）の幅と余白を修正 */
.pc-leftbar .pc-leftbar-inner { 
    position: fixed;
    width: 200px; /* 幅を160pxから200pxに広げます */
    background: rgba(255, 255, 255, 0.75); 
    padding: 20px; /* 上下左右に20pxの余白を追加します（元は 20px 0） */
    border-radius: 10px; 
}
.pc-leftbar .pc-leftbar-inner { position: fixed;}
.main-contents { width:calc(1200px - 240px); margin-left:auto; }
.telbanar { position:fixed; top:64px; right:0px; z-index: 12000; }

footer { padding:8px 0px; }
section { padding-top:64px; }
section .sec-inner { border-radius:8px; background:rgba(255,255,255,0.85); padding:40px; }

.splogo { display:none; background-color:#fff; padding:4px 0px; text-align:center; line-height: 1;}
.splogo img { width:160px; }

.cd-nav-trigger { display:none; }


@media (max-width:1280px){
  .main-contents { width:calc(100% - 240px); margin-right:40px; }}

@media (max-width:980px){
    .cd-nav-trigger { display:block; }
    .pc-leftbar { display:none; }
    .main-wrap { padding:0 4%;}
    .main-contents { width:100%; }
    section { border-radius:8px; }
    section .sec-inner { border-radius:8px; background:rgba(255,255,255,0.85); padding:4%; }
    .telbanar { display:none; }
}

@media (max-width:767px){
    body { font-size:90%; }
    .splogo { display: block; }
}


/* header
-------------------------------------------------------------*/
header h1 img { width:160px; }
.menu-text {
  font-size:160%; text-align: center; margin-top: 16px;
  font-family: 'Roboto', sans-serif; color:#2a72a0;
  letter-spacing: 1px; }
.sidenavi { margin:16px 0px; padding:0; }
.sidenavi li { text-align: center; margin-bottom:48px; line-height:0.1; }
.sidenavi li a p { color:#2a72a0; font-size:100%; margin-top:2px; }
.sidenavi li a { display:block; }
.sidenavi li a img { width:48px; height:auto; }
.sidenavi li a:hover img {  
    opacity:1;  
    transform: rotate(360deg);
    transition: transform 1s ease-out; }
.tel_list { font-size:120%; font-family: 'Roboto', sans-serif; }
.sptel { font-size:120%; font-family: 'Roboto', sans-serif; }
.sptel a { color:#e88f5f; }




/* videosec
-------------------------------------------------------------*/
.topslide .slick-next { right: 15px;  z-index: 99; }
.topslide .slick-prev { left: 10px; z-index: 100; }
.topslide .slick-prev:before, .topslide .slick-next:before { font-size: 30px; color:#111; }
.topslide .slick-dots { bottom: -30px;}

.topslide .slick-dots li button:before {
    font-size: 12px;
    line-height: 20px;
    width: 20px;
    height: 20px;
    color: #111;
}
.topslide .slick-dots li.slick-active button:before { color: #111; }
.topslide img { border-radius:10px; }


/* news-area
-------------------------------------------------------------*/
.news-area .hBox h2 { background-image:url(../img/icon12.png) ,url(../img/icon13.png); }
.celebration { float: left; width:48.5%; margin-right:1.5%; }
.txtarea { float: right; width:48.5%; margin-left:1.5%; }
.celebration img { width:100%; }
@media (max-width: 767px){
  .news-area h2 { font-size:110%; background-size: 28px auto,28px auto; }
  .news-area h3 { font-size:110%; }

  .celebration { float: none; width:100%; margin-right:0%; margin-bottom:20px; }
  .txtarea { float: none; width:100%; margin-left:0%; }
  .celebration img { width:100%; }
}

/* product-area
-------------------------------------------------------------*/
.product-area .hBox h2 { background-image:url(../img/icon07.png) ,url(../img/icon07.png); }

.news-text { font-size: 120%; color: #2a72a0; }
.new { display: inline-block; margin-right:8px; color:#e88f5f; font-family: 'Roboto', sans-serif; }
.slide01 .banner { margin:8px auto 40px; }
.slide01 .banner img { margin:auto; }
.table-conts { margin-left:160px; }
.product-area .image { float:left; width:30%; margin-right:3%; margin-bottom:1.5%; }
.product-area .image img { width:100%; }
.product-area .text { width: 67%; float: right; }
@media (max-width: 767px){
  .table-conts { margin-left:0px; }
  .product-area .image { float:none; width:100%; margin-right:0%; margin-bottom:20px; }
  .product-area .text { width: 100%; float: none; }
}
@media (max-width: 480px){
  .product-area .hBox h2 { font-size: 120%; }}

/* support-area
-------------------------------------------------------------*/
.support-area .hBox h2 { background-image:url(../img/icon02.png) ,url(../img/icon02.png); }
.support-area .image { float:left; width:30%; margin-right:3%; margin-bottom:1.5%; }
.support-area .text {  width: 67%; float: right;}
@media (max-width: 767px){
.support-area .image { float:none; width:100%; margin-right:0%; margin-bottom:20px; }
.support-area .text {  width: 100%; float: none;}
}

/* orcanavi-area
-------------------------------------------------------------*/
/*
.orcanavi-area .hBox h2 { background-image:url(../img/icon02.png) ,url(../img/icon02.png); }
.orcanavi-area .image { float:left; width:30%; margin-right:3%; margin-bottom:1.5%; }
.orcanavi-area .text {  width:100%; }

@media (max-width: 767px){
.orcanavi-area .image { float:none; width:100%; margin-right:0%; margin-bottom:20px; }
}
*/

/* company-area
-------------------------------------------------------------*/
.company-area .hBox h2 { background-image:url(../img/icon04.png) ,url(../img/icon04.png); }
.company-area .nintei { position:absolute; top:0px; right:0px; width:120px; }
.company-area table { color:#092c3f; }
.company-area table th { text-align: left; width:120px; font-weight:700; }
.company-area .sameheight { height:520px; overflow-y: auto; padding-right:30px;}
.fa-fax { display: inline-block; margin-left:16px; }
.company-area a { color:#e88f5f; text-decoration: underline !important; }
.company-area a.maplink { display: inline-block; margin-left:8px; }
.company-area a svg { vertical-align: sub; }
.company-area a:hover { text-decoration: none !important; }
.declaration-image { width: 400px; height:auto; margin:auto; }
.company-area ol { padding-left:40px; list-style-type:decimal; }
ol li { color: #092c3f; }
@media (max-width: 767px){
.company-area .sameheight { padding-right:12px; height:640px; }
.fa-fax { margin-left:0px; }
.company-area .nintei {  width:60px; }}
@media (max-width: 480px){
  .company-area .sameheight { height:800px; }
.company-area table { margin-top: 20px; }
.company-area .nintei { top:0px; width:32px; }}


/* link-area
-------------------------------------------------------------*/
.link-area h2 { background-image:url(../img/icon11.png) ,url(../img/icon11.png); }
.link-area .wrap a img { float:left; width:48%; margin:0 1% 2%; }
.parallel-line {
  margin:24px auto 40px; border:none; box-shadow: none;
  height: 8px;
  background-image: linear-gradient(-45deg,
  #5fb8e8,
  #5fb8e8 25%,
  #fff 25%,
  #fff 50%,
  #5fb8e8 50%,
  #5fb8e8 75%,
  #fff 75%);
  background-size: 8px 8px;
  width: 480px;
}

@media (max-width: 767px){
  .link-area .wrap a img { float:none; width:100%; margin:0 0% 2%; }
  .parallel-line { width: 280px; }
}

/* sp-menu
-------------------------------------------------------------*/

.cd-nav-trigger {
  position: fixed;
  z-index: 1003;
  left: 12px;
  top: 12px;
  height: 54px;
  width: 54px;
  background-color: #5fb8e8;
  border-radius: 50%;
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
}
.cd-nav-trigger .cd-nav-icon {
  /* icon created in CSS */
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 22px;
  height: 2px;
  background-color: #ffffff;
}
.cd-nav-trigger .cd-nav-icon::before, .cd-nav-trigger .cd-nav-icon:after {
  /* upper and lower lines of the menu icon */
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.5s, width 0.5s, top 0.3s;
  -moz-transition: -moz-transform 0.5s, width 0.5s, top 0.3s;
  transition: transform 0.5s, width 0.5s, top 0.3s;
}
.cd-nav-trigger .cd-nav-icon::before {
  -webkit-transform-origin: right top;
  -moz-transform-origin: right top;
  -ms-transform-origin: right top;
  -o-transform-origin: right top;
  transform-origin: right top;
  -webkit-transform: translateY(-6px);
  -moz-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  -o-transform: translateY(-6px);
  transform: translateY(-6px);
}
.cd-nav-trigger .cd-nav-icon::after {
  -webkit-transform-origin: right bottom;
  -moz-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  -o-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transform: translateY(6px);
  -moz-transform: translateY(6px);
  -ms-transform: translateY(6px);
  -o-transform: translateY(6px);
  transform: translateY(6px);
}
.no-touch .cd-nav-trigger:hover .cd-nav-icon::after {
  top: 2px;
}
.no-touch .cd-nav-trigger:hover .cd-nav-icon::before {
  top: -2px;
}
.cd-nav-trigger svg {
  position: absolute;
  top: 0;
  left: 0;
}
.cd-nav-trigger circle {
  /* circle border animation */
  -webkit-transition: stroke-dashoffset 0.4s 0s;
  -moz-transition: stroke-dashoffset 0.4s 0s;
  transition: stroke-dashoffset 0.4s 0s;
}
.navigation-is-open .cd-nav-trigger {
  /* rotate trigger when navigation becomes visible */
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::after,
.navigation-is-open .cd-nav-trigger .cd-nav-icon::before {
  /* animate arrow --> from hamburger to arrow */
  width: 50%;
  -webkit-transition: -webkit-transform 0.5s, width 0.5s;
  -moz-transition: -moz-transform 0.5s, width 0.5s;
  transition: transform 0.5s, width 0.5s;
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.no-touch .navigation-is-open .cd-nav-trigger:hover .cd-nav-icon::after, .no-touch .navigation-is-open .cd-nav-trigger:hover .cd-nav-icon::before {
  top: 0;
}
.navigation-is-open .cd-nav-trigger circle {
  stroke-dashoffset: 0;
  -webkit-transition: stroke-dashoffset 0.4s 0.3s;
  -moz-transition: stroke-dashoffset 0.4s 0.3s;
  transition: stroke-dashoffset 0.4s 0.3s;
}
@media only screen and (min-width: 1170px) {
  .cd-nav-trigger {
    top: 40px;
  }
}
 
.cd-nav {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(255,255,255,0.8);
  visibility: hidden;
  -webkit-transition: visibility 0s 0.7s;
  -moz-transition: visibility 0s 0.7s;
  transition: visibility 0s 0.7s;
}
.cd-nav .cd-navigation-wrapper {
  /* all navigation content */
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 40px 5% 40px calc(5% + 80px);
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transition: -webkit-transform 0.7s;
  -moz-transition: -moz-transform 0.7s;
  transition: transform 0.7s;
  -webkit-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
  -moz-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
  transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
}
.navigation-is-open .cd-nav {
  visibility: visible;
  -webkit-transition: visibility 0s 0s;
  -moz-transition: visibility 0s 0s;
  transition: visibility 0s 0s;
}
.navigation-is-open .cd-nav .cd-navigation-wrapper {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
  -moz-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
  transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
}
.cd-nav .cd-primary-nav {
  margin-top: 30px;
}
.cd-nav .cd-primary-nav li {
  margin: 1.2em 0;
}
.cd-nav .cd-primary-nav a.selected {
  color: #ffffff;
}
.no-touch .cd-nav .cd-primary-nav a:hover {
  color: #ffffff;
}
.cd-nav .cd-contact-info {
  margin-top: 80px;
}
.cd-nav .cd-contact-info li {
  font-family: "Merriweather", serif;
  margin-bottom: 1.5em;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.3);
}
.cd-nav .cd-contact-info a {
  color: #ffffff;
}
.cd-nav .cd-contact-info span {
  display: block;
}
@media only screen and (min-width: 1170px) {
  .cd-nav .cd-navigation-wrapper {
    padding: 62px 20%;
  }
  .cd-nav .cd-navigation-wrapper::after {
    clear: both;
    content: "";
    display: table;
  }
  .cd-nav .cd-half-block {
    width: 50%;
    float: left;
  }
  .cd-nav .cd-primary-nav {
    margin-top: 0;
  }
  .cd-nav .cd-primary-nav li {
    margin: 1.5em 0;
  }
  .cd-nav .cd-primary-nav a {
    font-size: 4.4rem;
  }
  .cd-nav .cd-contact-info {
    margin-top: 120px;
    text-align: right;
  }
  .cd-nav .cd-contact-info li {
    margin-bottom: 2.4em;
  }
  .cd-nav .cd-contact-info li, .cd-nav .cd-contact-info a, .cd-nav .cd-contact-info span {
    font-size: 2rem;
  }
}
.no-js .cd-nav .cd-navigation-wrapper {
  height: auto;
  overflow: visible;
  padding: 100px 5%;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.cd-primary-nav li a { font-size:20px; color:#5fb8e8; text-shadow: 1px 1px 2px #fff; font-family: 'Noto Sans JP', sans-serif; }
.cd-primary-nav li a img { width:24px; vertical-align: sub; margin-right:10px; }

.pagetop { position:fixed; bottom:20px; right:20px; z-index: 40; }
.pagetop a img { display: block; width:50px; height:50px; }
.pagetop a:hover img {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transition: transform 0.5s ease-out;
    -webkit-transition: -webkit-transform 0.5s ease-out;
    -moz-transition: -moz-transform 0.5s ease-out; } 

footer { background:#5fb8e8; color:#fff; margin-top:80px; }