@charset "UTF-8";
/* -----------------------------------------------
 KOBOT TOP
----------------------------------------------- */
/* main visual */
.sec-fv { margin-top: 45px; padding: 0}
.sec-fv h1 { color: #009bdc; font-size: 18px; font-weight: 700; text-align: center}
.sec-fv h1 img { margin-top: 10px}
.sec-fv .catch { font-weight: 700}
.sec-fv .catch .marker { background: #f8ef1a}
.sec-fv .btn.fv { height: 50px; max-width: 90%; margin: 20px auto 0; color: #fff; background: #009bdc}
.sec-fv { background: url('../images/top/fv-bg-sp.webp') no-repeat top center/100% auto; overflow: hidden}
.fv-inner { max-width: 1260px; margin: auto; background: url('../images/top/fv-comment.webp') no-repeat left top 29%/85% auto}
.sec-fv .catch { font-size: 8.3333vw}/*50px*/
.sec-fv .catch small  { font-size: 6.6666vw}
@media (max-width: 599px) {
  .fv-inner .text-area { height: 700px; padding: 20px; text-align: right!important}
  .sec-fv .catch.top { margin-bottom: 270px; line-height: 1.3!important; text-align: right}
  .sec-fv .catch.btm { margin-bottom: 20px; text-align: right; line-height: 1.3!important}
  .sec-fv .catch .marker { padding: 0 20px;}
}
@media (min-width: 600px) {
  .sec-fv { height: 530px; margin-top: 70px; background: url('../images/top/fv-bg-md.webp') no-repeat top left/cover;}
  .fv-inner { display: flex; justify-content: center; align-items: center; height: 530px; background-size:  auto 430px}
  .fv-inner .text-area { margin: 0 20px 0 35%}
  .sec-fv h1 { font-size: 22px}
  .sec-fv .catch { font-size: 3.6507vw}
  .sec-fv .catch small { font-size: 2.3809vw}
  .sec-fv .catch.btm { margin: -20px 0 40px}
  .sec-fv .btn.fv { max-width: 400px}
}
@media (min-width: 1260px) {
  .sec-fv { background: url('../images/top/fv-bg-pc.webp') no-repeat top center/cover;}
  .fv-inner { background-size:  auto 530px}
  .sec-fv .catch { font-size: 46px}
  .sec-fv .catch small  { font-size: 30px}
}
@media (min-width: 1700px) {
  .sec-fv { background: url('../images/top/fv-bg-pc.webp') no-repeat top center/contain;}
}
/* .sec-about */
.sec-about h2 small { color: #009bdc;}
.sec-about .box-about { padding: 20px; background: linear-gradient(180deg, #fff 0%, #fff 32%, #f2f3f7 32%, #f2f3f7 100%); border-radius: 6px}
.sec-about .box-text { width: 100%; font-size: 14px}
.sec-about .box-text p { text-align: left}
.sec-about .box-text .marker { background: #f8ef1a}
@media (max-width: 844px) {
  .sec-about .box-about img { max-width: 90%; margin: 0 auto 30px} 
}
@media (min-width: 845px) {
  .sec-about .box-about { align-items: flex-end; padding: 20px 0 0 40px; background: linear-gradient(180deg, #fff 0%, #fff 20%, #f2f3f7 20%, #f2f3f7 100%); }
  .sec-about .box-about img { width: 27.77%; min-width: 350px}
  .sec-about .box-about .box-text { width: calc(100% - 50px - 350px)}
  .sec-about .box-about .box-text .f-bold { margin-bottom: 20px}
}
@media (min-width: 1260px) {
  .sec-about h2 { margin-bottom: -50px}
  .sec-about .box-about { background: linear-gradient(180deg, #fff 0%, #fff 35%, #f2f3f7 35%, #f2f3f7 100%)}
}
/* .sec-series */
.box-series-outline { margin-top: 30px}
.box-series-outline .box-series { display: flex; flex-direction: column; position: relative; width: 100%; margin-top: 1vw; border-radius: 6px; box-shadow: 0 2px 5px #0003}
.box-series h3 { padding-top: 13px; height:75px; margin-top: 0; color: #fff; font-size: 24px; font-weight: 700; background: #009bdc; border-radius: 6px 6px 0 0}
.three-column .box-series .cat { position: absolute; top: 55px; right: 20px; display: flex; align-items: center; width: fit-content; height: 30px; padding: 0 15px; color: #009bdc; font-weight: 700;
    background: #fff; border: 1.5px solid #009bdc; border-radius: 4px}
.box-series .gray-window { flex-grow: 1; position: relative; margin: 30px 20px 0; padding: 0 0 20px; text-align: left; background: #f2f3f7; border-radius: 3px}
.box-series .gray-window img {width: 35%; max-width: 95px; margin: -45px 0 0 -10px}
.box-series .gray-window ul { padding: 10px 20px 0}
.box-series .gray-window ul li { position: relative; padding-left: 16px; text-align: left; font-weight: 700}
.box-series .gray-window ul li::before { position: absolute; top: 8px; left: 0; content: "●"; color: #009bdc; font-size: 8px}
.box-series .text-btn-top { margin: 20px 20px 6px; font-weight: 700; text-align: center}
.box-series .text-btn-top big { color: #009bdc; font-size: 150%}
.box-series .btn.bg-black { margin: 0 30px 30px}
@media (max-width: 844px) {
  .three-column .box-series { margin-bottom: 20px}
}
@media (min-width: 845px) {
  .box-series-outline .box-series { width: 32%}
  .box-series h3 { font-size: 2.0634vw}
  .three-column .box-series .cat { right: 30px}
  .box-series .btn.bg-black { margin: 0 20px 20px}
  .box-series .gray-window { margin: 30px 30px 0}
  .box-series .gray-window img { margin: -50px 0 0 -20px}
  .box-series .gray-window ul li::before { font-size: 0.6349vw}
}
@media (min-width: 1260px) {
  .box-series h3 { font-size: 26px}
  .box-series .gray-window ul li::before { font-size: 8px}
}
/* .sec-service */
.sec-service .inner { padding-top: 40px}
.sec-service .product { align-items: flex-end}
.sec-service .product .box-text h3 { font-weight: 700; font-size: 24px}
.sec-service .product-btm { padding-bottom: 40px; background: linear-gradient(180deg, #fff 0%, #fff 8%, #e1e4ed 8%, #e1e4ed 100%)}
.sec-service .white-window { width: 100%; padding: 30px; background: #fff; border-radius: 6px; box-shadow: 0 2px 5px #0003}
.sec-service .white-window .fukidashi { position: relative; width: fit-content; margin: -60px 0 0 -50px; padding: 10px 20px; background: #fff; border: 1.5px solid #009bdc; border-radius: 3px}
.sec-service .white-window .fukidashi::after { content: ""; position: absolute; bottom: -17px; right: 50px; display: inline-block; width: 16px; height: 17px; background: url('../images/top/arrow-btm.png') no-repeat center right/contain; z-index: 2}
.sec-service .white-window .fukidashi.one { width: 15em}
.sec-service .white-window .fukidashi.two { width: 18em}
.sec-service .white-window .fukidashi span { display: inline-block; color: #009bdc; text-align: left; line-height: 1.3; font-weight: 700}
.sec-service .white-window .logo { margin: 30px 0}
.sec-service .white-window .chara { margin: auto}
.sec-service .white-window .btn { position: relative; z-index: 2; margin: -52px auto 0}
@media (max-width: 844px) {
  .sec-service .product .btn.bg-black { width: 90%; margin: 30px auto}
  .sec-service .white-window { margin: 0 10px 60px}
  .sec-service .white-window:nth-of-type(2n) { margin-bottom: 0}
}
@media (min-width: 845px) {
  .sec-service { padding-top: 20px; padding-bottom: 0}
  .sec-service .inner { padding-top: 80px}
  .sec-service .product .btn { width: 280px}
  .sec-service .product .box-text { width: calc(100% - 50px - 280px)}
  .sec-service .product .box-text h3 { text-align: left; font-size: 2.0634vw}
  .sec-service .product-btm { padding-bottom: 60px; background: linear-gradient(180deg, #fff 0%, #fff 25%, #e1e4ed 25%, #e1e4ed 100%)}
  .sec-service .white-window { width: 48%}
  .sec-service .white-window .btn { max-width: 360px}
  .sec-service .white-window .btn:hover { opacity: 1!important; background: #6fb7e1}
}
@media (min-width: 1260px) {
  .sec-service .product .box-text h3 { font-size: 26px}
}
/* .sec-pickup */
.ul-picup { margin-top: 30px}
.ul-picup li { width: 100%}
.ul-picup li img { width: 100%; height: 190px; object-fit: cover; object-position: 50% 50%; border-radius: 12px 12px 0 0}
.ul-picup li .flex-between { margin-top: 20px}
.ul-picup li .cat { display: flex; align-items: center; height: 25px; padding: 0 8px; color: #009bdc; font-size: 12px; border: 1.5px solid #009bdc; border-radius: 3px}
.ul-picup li time { font-size: 13px}
.ul-picup li .ttl { display: inline-block; margin-top: 20px; color: #000; text-align: left}
@media (max-width: 844px) {
  .ul-picup li { margin-bottom: 50px}
  .ul-picup li:last-child { margin-bottom: 0}
}
@media (min-width: 845px) {
  .ul-picup { margin-top: 50px}
  .ul-picup li { width: 23.5%}
  .ul-picup li img { height: 160px}
  .ul-picup li .ttl  { font-size: 15px}
}
/* -----------------------------------------------
 COMMON
----------------------------------------------- */
/* .sec-useful */
.sec-useful { background: #f2f3f7;}
.sec-useful .btn.border-b { width: 100%; min-width: 300px; height: 70px; background: #fff; border: 4px solid #3898ec; box-shadow: 0 2px 5px #0003; overflow: hidden}
.ul-useful { margin-top: 30px}
.ul-useful li { width: 100%; margin-bottom: 40px}
.ul-useful li span { font-size: 16px}
.ul-useful li img { width: auto; height: 30px}
@media (max-width: 844px) {
  .sec-useful .btn.border-b { margin-top: 10px}
}
@media (min-width: 845px) {
  .sec-useful .btn.border-b { width: 60%; border-width: 2px}
  .ul-useful { margin-top: 50px}
  .ul-useful li { display: flex; justify-content: space-between; align-items: center; width: 48%}
  .ul-useful li span { font-size: 14px}
}