@charset "UTF-8";
body { min-width: 320px; font-size: 16px; overflow-x: hidden}
section { padding: 80px 0 40px}
section h2 { margin-bottom: 20px; font-size: 22px; text-align: center; font-weight: bold}
section h3 { line-height: 40px; margin-bottom: 30px; font-size: 18px; text-align: center}

@media screen and (min-width:768px) {
  section { padding: 80px 0} 
  section h2 { font-size: 30px}
}
/* -----------------------------------------------
 HEADER
----------------------------------------------- */
header figure { width: 70%;}
header .header-inr { height: 90px; max-width: 1024px; margin: auto; padding: 0 20px}
header .btn-area .btn-doc-request { background-color: #dc1357;}
@media screen and (max-width:768px) {
  header .header-inr { padding: 10px 20px; text-align: center}
  header .header-inr .logo { width: auto; height: 20px}
  header .header-inr .btn-home img { width: auto; height: 40px}
  header .btn-area {justify-content: center;  margin-top: 10px}
}
@media screen and (min-width:769px) {
  header .header-inr { display: flex; align-items: center; height: 70px;}
  header figure { width: 39%;}
  header .btn-area { width: 61%;}
}
/* -----------------------------------------------
 COMMON STYLE
----------------------------------------------- */
.men-kobot .button { display: flex; justify-content: center; align-items: center; height: 60px; color: #fff; font-weight: 500px; border-radius: 100vh}
.men-kobot .button.inq { background: linear-gradient(180deg, #dc1357 30%, #d2517c 130%)}
.men-kobot .button.back { background: linear-gradient(180deg, #191a1a 30%, #444447 130%)}
.img-border { border: 1px solid #ddd}
.desc.func { text-align: center}
@media screen and (min-width:768px) {
  .men-kobot a:hover { opacity: .7}
  .men-kobot .button { font-size: 18px}
}
/* TOP COMMON */
.men-kobot.top .button.inq { width: 90%; max-width: 450px; margin: 50px auto 0}
.men-kobot.top .button.small { height: 50px; font-size: 16px; font-weight: normal}
.men-kobot.top sup { font-size: 10px}
.men-kobot.top h2 { line-height: 1.5}
.men-kobot.top h2 small { font-size: 14px}
.men-kobot.top h2 img { margin-right: 10px}
@media screen and (min-width:768px) {
  .men-kobot.top h2 { margin-bottom: 50px}
  .men-kobot.top h2 small { font-size: 20px}
}
.scroll-cont { overflow: hidden; display: flex; margin-top: 30px}
.scroll-wrap { display: flex; justify-content: flex-start; width: 100%; animation: loop 20s linear infinite}
.scroll-wrap img { min-width: 1148px; height: 50px}
@keyframes loop {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
@media screen and (min-width:768px) {
  .scroll-wrap { animation: loop 50s linear infinite}
  .scroll-wrap img { min-width: 1722px; height: 75px}
}
/* -----------------------------------------------
TOP
----------------------------------------------- */
/* MAIN VISUAL */
.men-kobot .mv { overflow: hidden; margin-top: 90px; background: linear-gradient(to right,  #d5dae1 50%,#bdc0c5 100%)}
.men-kobot .mv .mv-inner { max-width: 1024px; padding: 0 20px; margin: auto}
.men-kobot .mv h1 { color: #33afe3; font-weight: 500}
.men-kobot .mv h1 small { display: block; margin-bottom: 10px; font-size: 18px; line-height: 1.5}
.men-kobot .mv .ul-target { display: flex; justify-content: space-between; margin-top: 30px; color: #fff}
.men-kobot .mv .ul-target li { display: flex; justify-content: center; align-items: center; width: 32.5%; height: 30px; font-size: 12px; font-weight: bold; background: linear-gradient(135deg, #353535 10%, #191a1a 90%)}
.men-kobot .mv .ul-target li:first-child { margin-left: 0}
.men-kobot .mv .catch { margin-top: 20px; font-size: 22px; font-weight: bold; line-height: 1.5}
.men-kobot .mv .catch big { margin-top: -10px; color: #1a86d1}
@media screen and (max-width:767px) {
  .men-kobot .mv { padding: 40px 0 0}
}
@media screen and (min-width:768px) {
  .men-kobot .mv { margin-top: 70px; height: 475px}
  .men-kobot .mv .mv-inner { position: relative; height: 475px; margin-top: -80px; z-index: 0}
  .men-kobot .mv .mv-inner .box-left { position: absolute; z-index: 1}
  .men-kobot .mv .mv-inner .image { position: absolute; bottom: 0; right: -100px; width: auto; height: 475px}
  .men-kobot .mv h1 { margin-top: 50px}
  .men-kobot .mv h1 img { width: 400px; height: auto}
  .men-kobot .mv .ul-target { justify-content: flex-start}
  .men-kobot .mv .ul-target li { max-width: 140px; margin-left: 1%}
  .men-kobot .mv .catch { margin-bottom: 50px!important; font-size: 28px}
  .men-kobot .mv .catch big { font-size: 43px}
}

/* SEC-WORRIES */
.sec-worries ul { margin-top: 50px}
.sec-worries ul li { padding: 20px; border: 1.5px solid #333; border-radius: 8px}
.sec-worries ul li .problem { font-size: 18px; font-weight: bold; text-align: center}
.sec-worries ul li .solution { margin-top: 20px; padding: 25px 10px 10px; color: #009bdc; font-weight: bold; background: #e1f2ff; border-radius: 6px}
.sec-worries ul li .solution p { margin: 0 10px}
.sec-worries ul li .button { margin-top: 30px}
.sec-worries ul li .ttl { display: flex; justify-content: center; margin-bottom: 20px!important;  font-size: 20px; line-height: 1}
.sec-worries ul li .logo { width: auto; height: 20px; margin: 0 10px 0 0}
@media screen and (max-width:767px) {
  
  .sec-worries ul li { margin-bottom: 50px}
  .sec-worries ul li:last-child { margin-bottom: 0}
  .sec-worries ul li figure { overflow: hidden; width: 100px; height: 100px; margin-top: -50px; background: #eee; border: 1.5px solid #333; border-radius: 100vh}
  .sec-worries ul li:nth-child(odd) figure { margin-left: auto; padding-top: 10px}
  .sec-worries ul li:nth-child(even) figure { padding: 5px 20px 0 0}
  .sec-worries ul li figure img { width: 120px; height: 120px; object-fit: cover; object-position: top center}
}
@media screen and (min-width:768px) {
  .sec-worries ul { display: flex; justify-content: space-between; margin-top: 80px}
  .sec-worries ul li img { width: calc(100% - 20px); margin: -70px auto 10px}
  .sec-worries ul li { display: flex; flex-direction: column; width: 32%}
  .sec-worries ul li .solution { display: flex; flex-direction: column; flex-grow: 1}
  .sec-worries ul li .solution .text { flex-grow: 1}
}
/* SEC-SERVICE */
.sec-service { background: #e1f2ff}
.sec-service h2 { display: flex; justify-content: center; align-items: center; color: #009bdc}
.sec-service .desc { margin-bottom: 30px; text-align: left}
.sec-service h3 { margin-top: 80px; font-size: 18px; font-weight: bold}
.sec-service .box-white { padding: 20px;background: #fff; border-radius: 10px}
.sec-service .three-column { margin-bottom: 50px}
.sec-service .three-column:last-of-type { margin-bottom: 0}
.sec-service .three-column .yabane { position: relative; width: 100%; height: 80px; margin-bottom: 40px; padding: 10px; color: #fff; font-size: 21px; text-align: center; line-height: 1.5;  font-weight: 500; background: #33afe3}
.sec-service .three-column .yabane::after  { content: ""; position: absolute; top: 80px; left: 50%; transform: translateX(-50%); height: 40px; border-left: 40.5vw solid transparent; border-right: 40.5vw solid transparent; border-top: 30px solid #33afe3;　z-index: 2}
.sec-service .three-column .yabane small { display: block; margin-bottom: 5px; font-size: 18px}
.sec-service .three-column:nth-of-type(2) img,
.sec-service .three-column:nth-of-type(4) img,
.sec-service .three-column:nth-of-type(5) img { border: 1px solid #ddd}
.sec-service .button.back { max-width: 600px; margin: 50px auto 0}
@media screen and (max-width:767px) {
  .sec-service .three-column figure { max-width: 80%; margin: 60px auto 20px}
  .sec-service .three-column figure img { width: 100%}
  .sec-service .three-column .text .button { margin-top: 30px}
}
@media screen and (min-width:768px) {
  .sec-service h3 { font-size: 32px}
  .sec-service .box-white { padding: 30px}
  .sec-service .button.back.small { max-width: 300px; margin: 20px 0 0 auto}
  .sec-service .three-column { display: flex; justify-content: space-between; margin-bottom: 20px}
  .sec-service .three-column .yabane { width: 180px; min-width: 180px; height: 100%;  padding: 25px 0 20px}
  .sec-service .three-column .yabane::after  { top: 100%; border-left: 90px solid transparent; border-right: 90px solid transparent; border-top: 40px solid #33afe3;　z-index: 2}
  .sec-service .three-column .yabane small { margin-bottom: 20px}
  .sec-service .three-column figure { width: 25%; text-align: center}
  .sec-service .three-column .text { width: 46%; margin-top: -10px}
}
/* SEC-MOVIE */
.sec-movie { color: #fff; background: #009bdc}
.sec-movie .movie-wap { max-width: 673px; margin: auto}
.sec-movie .movie-wap iframe { width: 100%; height: 100%; aspect-ratio: 16 / 9}
.ytp-pause-overlay.ytp-pause-overlay-round-corners { display: none!important; opacity: inherit!important}
/* SEC-PLAN */
.sec-plan { background: #f0f4f6}
.sec-plan .notes { color: #333; line-height: 1.8}
.sec-plan table { width: 100%; max-width: 680px; margin: auto}
.sec-plan table th, .sec-plan table td { padding: 15px 20px; text-align: center; background: #fff;  border: 1px solid #333}
.sec-plan table th.no-border { border: 0; background: none}
.sec-plan table thead th { color: #fff; background: #009bdc}
.sec-plan table tbody th { background: #a1b5c3}
.sec-plan .notes { max-width: 680px; margin: 30px auto 0}
/* SEC-CASESTUDY */
.sec-casestudy .inner { position: relative; overflow: hidden; padding: 0 30px}
.box-case { margin: 0 10px; padding: 0; border: 1px solid #aaa; border-radius: 8px}
.box-case img { width: 100%; height: auto; border-radius: 8px 8px 0 0}
.box-case .ttl { margin: 15px 15px 10px; font-weight: bold; line-height: 1.5}
.box-case .name { margin: 0 15px 5px; font-weight: bold}
.box-case .profile { padding: 0 15px 25px; line-height: 1.8}
.box-case .profile .item { font-weight: bold}
.box-case .profile .item::before { content: "■"; margin-right: 3px; color: #1a86d1; font-size: 10px}
.box-case .profile .item::after { content: "："}
@media screen and (min-width:768px) {
  .box-case .name, .box-case .profile { font-size: 14px}
}
/* SLICK Arrows */
.slick-list { overflow: visible}
.slick-track { display: flex}
.slick-prev, .slick-next { position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; color: transparent; width: 40px; height: 40px; background:rgba(0,155,220,0.8); border-radius: 100vh; z-index: 10}
.slick-prev:before, .slick-next:before { color: #fff; font-size: 20px}
.slick-prev { left: 10px}
.slick-prev:before { content: '←'; margin-left: 22%}
.slick-next { right: 10px}
.slick-next:before { content: '→'; margin-left: 22%}
@media screen and (min-width: 769px) { 
  .slick-prev, .slick-next { width: 60px; height: 60px}
  .slick-prev { left: 0}
  .slick-next { right: 0}
  .slick-prev:before, .slick-next:before { font-size: 30px}
}
.sec-flow  { background: #e1f2ff}
.ul-flow li { position: relative; padding: 0 20px 20px; background: #fff; border-radius: 6px; box-shadow: 5px 5px 5px rgba(0,0,0,.2)}
.ul-flow li::after { content: ""; position: absolute;}
.ul-flow li:last-child::after { border: 0}
.ul-flow li .number { display: block; max-width: 50px; margin: auto; padding: 10px 15px; color: #fff; font-size: 30px; text-align: center; background: #009bdc; border-radius: 0 0 8px 8px}
.ul-flow li .ttl { margin: 10px 15px; font-size: 16px; font-weight: bold; text-align: center;}
@media screen and (max-width:768px) {
  .ul-flow li { margin-bottom: 30px; text-align: center}
  .ul-flow li::after { bottom: -22px; left: 50%; transform: translateX(-50%); border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 10px solid #009bdc}
}
@media screen and (min-width:768px) {
  .ul-flow { display: flex; justify-content: space-between}
  .ul-flow li { width: 18%; font-size: 14px}
  .ul-flow li::after { top: 50%; right: -19px; border-left: 12px solid #009bdc;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;}
}
/* SEC-FAQ */
.sec-faq  { background: #f4faff}
.sec-faq h3 { text-align: left; font-size: 20px; font-weight: bold}
.sec-faq h3:nth-of-type(n+2) { margin-top: 60px}
.sec-faq .mt20 { margin-top: 20px}
.faq-acco summary { position: relative; padding: 10px 40px 10px 35px; font-weight: bold; line-height: 1.8; background: #fff; border: 1px solid #e1e4ed}
.faq-acco summary::before { position: absolute; top: 50%; transform: translateY(-50%); left: 10px; content: "Q"; color: #009bdc; font-size: 21px}
.faq-acco summary i::before, .faq-acco summary i::after { position: absolute; top: 50%; transform: translateY(-50%); right: 15px; content: ""; width: 18px; height: 2px; background: #009bdc; transition: all 0.3s}
.faq-acco summary i::after {transform: rotate(90deg);}
.faq-acco[open] summary i::after { background: #fff; transform: rotate(180deg);}
.faq-acco .detail { padding: 20px; background: #fff;  border: 1px solid #e1e4ed; border-top: 0}
.faq-acco[open] summary { color: #fff; background: #009bdc}
.faq-acco[open] summary::before { color: #fff}

.faq-acco { max-height: 110px; transition: all 0.8s; overflow: hidden;}
.faq-acco[open] {max-height: 400px;}
@media screen and (min-width:768px) {
  .faq-acco summary { padding: 20px 30px 20px 60px}
  .faq-acco summary::before { left: 30px}
  .faq-acco summary i::before, .faq-acco summary i::after { width: 25px; height: 3px}
  .faq-acco .detail { padding: 30px}
}
/* -----------------------------------------------
FUNCTION
----------------------------------------------- */
/* KEY VISUAL */
.men-kobot .kv { padding: 0; background: linear-gradient(135deg, #dfe4e9, #c7cacf)}
.men-kobot .kv h1 { color: #33afe3; font-weight: 500}
.men-kobot .kv h1 small { display: block; margin-bottom: 10px; font-size: 18px; line-height: 1.5}
.men-kobot .kv h1 span { display: inline-block; margin: 0 0 0 10px; padding: 10px 20px; font-size: 20px; border: 1px solid #33afe3;} 
@media screen and (max-width:820px) {
  .men-kobot .kv .inner { padding-top: 50px; padding-bottom: 50px}
  .men-kobot .kv h1 { margin-bottom: 30px; text-align: center}
  .men-kobot .kv h1 span { margin-top: 10px}
  .men-kobot .kv .button.inq { margin-top: 10px}
}
@media screen and (min-width:821px) {
  .men-kobot .kv { height: 250px}
  .men-kobot .kv h1 small { font-size: 15px}
  .men-kobot .kv h1 img { width: 100%; max-width: 698px}
  .men-kobot .kv h1 span { font-size: 27px}
  .men-kobot .kv .button-area { display: flex; justify-content: space-between; margin-top: 30px}
  .men-kobot .kv .button-area .button { width: 48%}
}
@media screen and (max-width:767px) {
    .men-kobot .kv { margin-top: 90px}
}
@media screen and (min-width:768px) {
    .men-kobot .kv { margin-top: 70px; padding-top: 40px}
}
/* YABANE */
.yabane .ttl { font-size: 18px; text-align: center; font-weight: bold}
.yabane .ttl .logo { margin-right: 10px}
.yabane .desc { text-align: center}
.yabane .arrow-right { margin-top: 25px}
.yabane .arrow-right li { z-index:1; height: 50px; font-size: 18px; line-height: 1.3; color: #fff; font-weight: 500}
.yabane .arrow-right li small { display: block; font-size: 12px}
@media screen and (max-width:767px) {
  .yabane .arrow-right li { position: relative; display: flex; justify-content: flex-end; align-items: center; flex-direction: column; width: 70%; margin: auto; margin-bottom: 40px; background: #33afe3}
  .yabane .arrow-right li::after { content: ""; position: absolute; bottom: -79px; left: 50%; transform: translateX(-50%); width: 175px; height: 80px; border-left: 32vw solid transparent; border-right: 32vw solid transparent; border-top: 30px solid #33afe3;　z-index: 2}
}
@media screen and (min-width:768px) {
  .yabane .ttl { display: flex; justify-content: center; align-items: center; font-size: 30px}
  .yabane .arrow-right { display: flex; justify-content: space-between}
  .yabane .arrow-right li { width: 20%; height: 60px}
  .yabane .arrow-right li span { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; width: calc(100% - 30px); height: 100%; font-size: 1.7578vw; background: #33afe3}
  .yabane .arrow-right li span::after { content: ""; position: absolute; top: 0; left: 100%; border: 30px solid; border-color: #fff #fff #fff #33afe3; z-index: 2}
}
@media screen and (min-width:1024px) {
  .yabane .arrow-right li span { font-size: 18px}
}
/* SEC-FUNC */
.sec-func { position: relative}
.sec-func.one, .sec-func.three, .sec-func.five { background: #f4faff}
.sec-func.two, .sec-func.four { background: #e1f2ff}
.sec-func .icon-func { display: flex; justify-content: center; align-items: flex-end; position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: 175px; height: 40px; color: #fff; font-size: 20px; font-weight: bold; background: #33afe3}
.sec-func .icon-func::after { content: ""; position: absolute; top: 40px; left: 50%; transform: translateX(-50%); width: 175px; height: 40px; border-left: 87.5px solid transparent; border-right: 87.5px solid transparent; border-top: 30px solid #33afe3;　z-index: 2}
.sec-func.one .desc, .sec-func.three .desc { margin-bottom: 30px}
.sec-func .box-func { margin-bottom: 30px; padding: 20px; background: #fff; border-radius: 10px; box-shadow: 5px 5px 5px rgba(0,0,0,.1)}
.sec-func .box-func:last-of-type { margin-bottom: 0}
.box-func-outline { display: flex; justify-content: space-between; flex-wrap: wrap}
.box-func h3 { position: relative; color: #fff; background: #33afe3; border-radius: 3px}
.box-func .icon-paid { height: 25px; line-height: 25px; margin-right: 10px; padding: 0 10px; color: #33afe3; font-size: 12px; text-align: center; font-weight: bold; background: #fff}
.box-func-outline .text p { margin-bottom: 10px; line-height: 1.8}
.box-func-outline .text p:last-of-type { margin-bottom: 0}
.box-func-outline .text strong,
.two-column .text strong { font-weight: bold}
.sec-func.four .two-column .text { margin-top: 30px}
.sec-func .button {max-width: 600px; margin: 50px auto 0}
.sec-func .notes { color: #333}
.sec-func .two-column .box-func .text p { margin-bottom: 10px}
.sec-func .two-column .box-func .text p:last-of-type { margin-bottom: 0}
.img-func-three { max-width: 80%; margin: auto}
@media screen and (max-width:767px) {
  .desc.func { margin-bottom: 20px}
  .box-func h3 { font-size: 14px}
  .box-func-outline img { width: 80%; margin: auto}
  .box-func-outline .text { margin-top: 30px}
  .sec-func .two-column { margin-bottom: 30px}
  .sec-func .two-column .box-func { text-align: center}
  .sec-func .two-column .box-func .text { margin-top: 30px; text-align: left}
  .sec-func.four .two-column .box-func .img-border { max-width: 80%}
  .img-func-three { text-align: center}
  .img-func-three .img-right { max-width: 50%; margin: 30px 0 20px}
}
@media screen and (min-width:768px) {
  .desc.func { margin-bottom: 20px; font-size: 20px; font-weight: 500}
  .sec-func.three .desc { margin-bottom: 55px}
  .sec-func .box-func { padding: 30px}
  .box-func .icon-paid { position: absolute; top: 50%; transform: translateY(-50%); left: 10px}
  .box-func-outline img { width: 42%}
  .box-func-outline .text { width: 54%}
  .sec-func.three .box-func-outline img { width: 45%}
  .sec-func.three .box-func-outline .text { width: 50%}
  .sec-func .two-column { display: flex; justify-content: space-between}
  .sec-func .two-column .box-func { width: 48%; margin-bottom: 30px}
  .img-func-three { display: flex; justify-content: space-between; max-width: 885px; margin: 50px auto 30px}
  .img-func-three .img-left { width: 62%}
  .img-func-three .img-right { width: 29%}
}