@charset "UTF-8";

/* default
----------------------------------------------- */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, section, summary, time, mark, audio, video { margin: 0; padding: 0; font: inherit; word-wrap: break-word; border: 0; vertical-align: baseline; outline: none; }
body { padding: 0; margin: 0; color: #000; background: #000; font-size: 3.4vw; font-family: 游ゴシック体, YuGothic, 'Yu Gothic', "游ゴシック Medium", "Yu Gothic Medium", 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; font-weight: 400; font-style: normal; line-height: 1; -webkit-text-size-adjust: 100%; }
_:-ms-lang(x)::-ms-backdrop, body { font-family: "メイリオ", Meiryo, sans-serif; }
article, aside, canvas, details, figcaption, figure, header, footer, hgroup, main, menu, nav, section, summary { display: block; }
blockquote, q { quotes: none; }
strong, b { font-weight: bold; }
ul, ol, li { list-style: none; }
table { border-spacing: 0; border-collapse: collapse; }
img, video, object { height: auto; border: none; display: block; }
ins { background: none; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
hr { height: 1px; padding: 0; margin: 1em 0; border: 0; border-top: 1px solid #ccc; display: block; }
*:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-transition: all 0.4s cubic-bezier(0.05, 0.05, 0.31, 0.97); -o-transition: all 0.4s cubic-bezier(0.05, 0.05, 0.31, 0.97); -webkit-transition: all 0.4s cubic-bezier(0.05, 0.05, 0.31, 0.97); transition: all 0.4s cubic-bezier(0.05, 0.05, 0.31, 0.97); }
a { color: #615c61; text-decoration: none; display: block; -moz-transition: all 0.4s cubic-bezier(0.05, 0.05, 0.31, 0.97); -o-transition: all 0.4s cubic-bezier(0.05, 0.05, 0.31, 0.97); -webkit-transition: all 0.4s cubic-bezier(0.05, 0.05, 0.31, 0.97); transition: all 0.4s cubic-bezier(0.05, 0.05, 0.31, 0.97); }
a:hover { opacity: 0.6; }
.clearfix:after { content: ''; display: block; clear: both; }
.pc { display: none; }
.sp { display: block; }
img { max-width:100%;}


/* move
----------------------------------------------- */
.fade { opacity: 0; -moz-transition: 1.2s; -o-transition: 1.2s; -webkit-transition: 1.2s; transition: 1.2s; }
.fade-left { -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -webkit-transform: translateX(-10px); transform: translateX(-10px); }
.fade-right { -moz-transform: translateX(10px); -ms-transform: translateX(10px); -webkit-transform: translateX(10px); transform: translateX(10px); }
.fade-bottom { -moz-transform: translateY(10px); -ms-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px); }
.fade-active { opacity: 1; -moz-transform: translate(0); -ms-transform: translate(0); -webkit-transform: translate(0); transform: translate(0); }

.yureru-updown {animation: yureru-updown 2s infinite;}
@keyframes yureru-updown {
	0% {transform: translate(0px, 4px);}
	5% {transform: translate(0px, -4px);}
	10% {transform: translate(0px, 4px);}
	15% {transform: translate(0px, -4px);}
	20% {transform: translate(0px, 4px);}
	25% {transform: translate(0px, -4px)}
	30% {transform: translate(0px, 0px);}
}


/* sp
----------------------------------------------- */
.inner { width: 100%; }

header { background: #fff; position: fixed;height: auto; width: 100%; z-index: 10;  }
header .wrap { display: -webkit-box; display: -webkit-flex; display: box; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap;align-items:center;justify-content:space-between; }
header .header-logo {width: 20%; padding-left: 1vw;}
header .header-tel {width: 34%;}
header .header-cta {width: 38%;}

.hero {padding-top: 13vw;background: url("../images/hero.jpg") no-repeat center top 12vw;background-size: 100%;position: relative;}
.visual-midashi {position: relative;top: -4vw;width: 65vw;}
.visual-txt {margin-top: -15.1vw;margin-left: 1.9vw;width: 64.8vw;}
.visual-point {margin-top: -16vw;}
.visual-point01 {margin: 0 0 0 auto;width: 51.4vw;}
.visual-point02 {margin: -8.6vw 0 0 auto;width: 52.7vw;}
.visual-point03 {margin: -9vw 0 0 auto;width: 53.4vw;}
.visual-h02 {text-align: center;font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;font-size: 6vw;font-weight: bold;font-feature-settings: "palt";margin-top: 9.8vw;line-height: 1.25;color: #fff;text-shadow: 0 30px 30px rgb(0 0 0 / 40%);}
.visual-h02 .small {font-size: 80%;}
.visual-h02 .pink {color: #ff57f1;}
.visual-btm {margin: 3vw auto 0;width: 87vw;}

.cta { margin: 3vw auto; width: 90vw;}

.ba {background: url("../images/ba/ba-bg.jpg")no-repeat top center;background-size: cover;padding-bottom: 4vw;}
.ba .ttl {padding-top: 3vw;width: 90vw;margin: 0 auto;}
.ba .ast {color: #fff;text-align: center;font-size: 2.8vw;}
.ba-list {margin: 0 auto 10vw;width: 90vw;}
  
.effect {background: url("../images/effect.jpg") no-repeat center top;background-size: 100%;padding: 3.9vw 0 7.6vw;}
.effect-ttl {margin: 0 auto;width: 86%;}
.effect-in {margin-top: -42.1vw;}
  
.point-top {background: url("../images/point-top.jpg") no-repeat center top;background-size: 100%;padding-top: 2.2vw;}
.point-ttl {margin: 0 0 0 auto;width: 97vw;}
.point-top-list {display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: center;justify-content: center;align-items: center;margin-top: -1vw;margin-bottom: -41vw;position: relative;}
.point-top-list li {margin: 0 2vw 2vw;width: 40%;}

.point-in-top {background: url("../images/point01-in-top.png") no-repeat center top;background-size: 89.7vw;padding: 7vw 0 0;}
.point-in-mid {position: relative;background: url("../images/point01-in-mid.png") repeat-y center top;background-size: 89.7vw;padding-bottom: 2vw;}
.point-in-btm {margin: 0px auto;background: url("../images/point01-in-btm.png") center bottom no-repeat;background-size: 89.7vw;padding-bottom: 15vw;}

.point01 {background: url("../images/point01-bg.jpg")no-repeat top center;position: relative;background-size: 100%;padding: 5vw 0 4vw;margin-top: 3vw;}
.point01-ttl {margin: 0 auto;width: 46%;}
.point01-midashi {margin: 5vw auto 0;width: 88%;}
.point01 .point-in {margin: 6.5vw auto 0;}
.point01 .robot {position: absolute;top: 38vw;right: 0;z-index: 2;width: 23vw;}
.point01 .gekisugo {position: absolute;top: 58vw;left: 0;z-index: 2;width: 42vw;}
.point01 .fig {width: 81.5vw;margin: 0 auto;}
.point01 .point-in-mid {position: relative;padding-bottom: 91vw;}
.point01-in-txt {font-size: 3.7vw;font-feature-settings: "palt";line-height: 1.6;width: 80vw;margin: 0 auto 5vw;padding-top: 11vw;text-align: justify;}
.point01-in-txt span {color: #ef2adf; font-size: 120%; font-weight: bold;}
.point01-box {width: 80%;margin: 0 auto;padding: 5% 0;border: 2px solid #b366da;background: #fff;}
.point01-box-txt {font-size: 4.4vw;text-align: center;}
.point01-parts {display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: center;justify-content: center;align-items: flex-start;margin-top: 4vw;margin-bottom: 4vw;}
.point01-parts dl {font-size: 3vw;font-feature-settings: "palt";text-align: center;width: 24vw;background: url("../images/arrow.png") no-repeat center top 13vw;background-size: 80%;margin: 0 0.5vw;}
.point01-parts dt {padding: 3.7vw 0;background: #d8c3fe;margin-bottom: 9vw;}
.point01-parts dl:nth-child(2) dt {padding: 2.2vw 0;}
.point01-parts dd {padding: 2.8vw 0;font-weight: bold;color: #fff;background: #f02adf;line-height: 1.4;}
.point01-parts dl:nth-child(1) dd {padding: 0.6vw 0;}
.point01-box-btm {margin: 0 auto;width: 90%;}
.point01-btm {margin: -2vw auto 0;width: 90%;}
.point01-four {position: relative;}
.point01-four-img {position: relative;z-index: 1;}
.point01-four-bg {position: absolute;top: 50%;transform: translate(0, -50%);mix-blend-mode: overlay;}
.point01-close-img {position: absolute;left: 12vw;width: 80%;}

.point02 {background: url("../images/point02.jpg")no-repeat top center;position: relative;background-size: auto;padding: 2vw 0;}
.point02 .point-in {margin-top: 8vw;}
.point02 .gekisugo {position: absolute;top: 98vw;left:0;z-index: 2;width: 42vw;}
.point02-pilot {position: absolute;top: -10vw;width: 35vw;}
.point02-ttl {margin: 0 auto; width:46%;}
.point02-midashi {margin: 4vw auto 0;width: 88%;}
.point02-img {margin: 0 auto;width: 80%;}
.point02-in {margin: 34px auto 0;background: url("../images/point02-in.png") no-repeat center top;padding: 10px 0 56px;}
.point02-in .gekisugo {position: absolute;top: 1150px;left:0;z-index: 2;}
.point02-in-txt {font-size: 3.7vw;font-feature-settings: "palt";line-height: 1.6;width: 80vw;margin: 0 auto;padding-top: 14vw;text-align: justify;}
.point02-in-txt span {color: #ef2adf; font-size: 120%; font-weight: bold;}
.point02-btm {margin: 8vw auto 0;width: 90vw;}

.point03 {background: url("../images/point03.jpg")no-repeat top center;background-size: 100%;position: relative;padding: 4vw 0 0;}
.point03 .point-in {margin-top: 8vw;position: relative;}
.point03 .gekisugo {position: absolute;top: 42vw;left:0;z-index: 2;width: 42vw;}
.costcut-midashi {margin: 0 auto 6vw;width: 80%;}
.costcut-contents {margin: 0 auto 6vw;width: 80%;}
.costcut-arrow {margin: 0 auto 8vw;width: 50%;}
.point03-ttl {margin: 0 auto; width:46%;}
.point03-midashi {margin: 4vw auto 0;width: 88%;}
.point03-img {margin: 0 auto;width: 80%;}
.point03-in-txt {font-size: 3.7vw;font-feature-settings: "palt";line-height: 1.6;width: 80vw;margin: 0 auto;padding-top: 12vw;text-align: justify;}
.point03-in-txt span {color: #ef2adf; font-size: 120%; font-weight: bold;}
.point03-in-txt span.mini{color: #000; font-weight: normal; font-size: 80%;text-align: left; display: block;}
.point03-arrow01 {margin: -20vw auto 0;width: 90%;}
.point03-midashi02 {margin: 5vw auto 0;width: 90%;}
.point03-img02 {margin: 5vw auto 0;width: 80%;position: relative;}
.point03-arrow02 {margin: -12vw auto 0;width: 90%;}

.point04 {background: url("../images/point04.jpg")no-repeat top center;background-size: 100%;position: relative;padding: 5vw 0;}
.point04 .point-in {margin-top: 3vw;}
.point04 .point04-robot {position: absolute;top: 65vw;left:0;z-index: 3;width: 36vw;}
.point04 .gekisugo {position: absolute;top: 100vw;left:0;z-index: 2;width: 42vw;}
.point04-ttl {margin: 0 auto; width:46%;}
.point04-midashi {margin: 4vw auto 0;width: 59%;}
.point04-img {margin: 0 auto; width: 80%;}
.point04-in-txt {font-size: 3.7vw;font-feature-settings: "palt";line-height: 1.6;width: 80vw;margin: 0 auto;padding-top: 16vw;text-align: justify;}
.point04-in-txt span {color: #ef2adf; font-size: 120%; font-weight: bold;}
.point04-btm {margin: 0 5vw 0 auto;width: 46%;}
.point04-btm01 {margin: -23vw auto 0;width: 80%;}
.point04-btm02 {margin: 4vw auto 0;width: 80%;}
.point04-btm03 {margin: 4vw auto;width: 80%;}

.support {background: url("../images/support.jpg") no-repeat center top;background-size: 100%;padding-bottom: 38vw;}
.support-top {margin: 0;}
.support-ttl {position: relative;margin: -46vw auto 0;left: 2vw;width: 90%;}
.support-list {display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: center;justify-content: center;align-items: center;margin-top: 7vw;}
.support-list li {margin: 0 2% 4%;width: 43%;}
.support-list li:nth-child(7) {/* margin: 2% 0 0; */}
.support-btm {margin: 12vw auto 0;width: 84%;}

.close {background: url("../images/close.jpg") no-repeat center top;background-size: 100%;padding: 3vw 0 0;}
.close-arrow {margin: 0 auto 0;width: 93%;}
.close-img {margin: 3% auto 0;width: 90%;}
.close-ttl {margin: 4vw auto 0;width: 86%;}
.close-midashi {margin: 3.9vw auto -15px;width: 78%;}
.close-machine {margin: 0 auto;width: 77%;}

footer {background: #111834;padding: 9% 0 0;}
footer img {width: 44%;margin: 0 auto 9%;}
footer p {text-align: center;color: #fff;line-height: 1.6;margin-bottom: 19%;}
footer p span {display: block;font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;font-size: 3.7vw;margin-bottom: 8%;line-height: 1;}
footer p span em {display: block;font-size: 8vw;letter-spacing: 0.3em;margin-bottom: 3%;}
footer p a {display: inline-block;color: #aaa;}
.chatbot-pd {text-align:center;width: 100%;display: block;padding: 4% 0 5%;font-size: 3vw;border-top: 1px solid #81838f;color: #fff; padding-bottom: 38%;}
.js-pagetop {position: fixed;bottom: 0;left: 0;z-index: 9;width: 11.2%;}

.slick-slide img {width: 100%; padding: 2vw;}

/* =============================================
pc-size
================================================*/
@media screen and (min-width: 736px) { 

  .bg { background-attachment: fixed; }
  .bg:before { position:fixed; top:0; left:0; z-index:-1; width:100%; height:1686px; background:url("../images/bg.jpg") no-repeat; -webkit-background-size:cover; background-size:cover;content:"";}
  .inner{width: 760px;margin:0 auto;box-shadow: 1px 10px 10px 10px rgb(64 21 69);padding-bottom: 40px;background: #000;}

  header .wrap { width: 760px; margin: 0 auto ; }
  header .header-logo {width: 170px;padding-left: 20px;}
  header .header-tel {width: 240px;}
  header .header-cta {width: 260px;}

  .hero {padding-top: 86px;background: url("../images/hero.jpg") no-repeat center top 86px;}
  .visual-midashi {top: -25px;width: auto;}
  .visual-txt {margin-top: -114px;margin-left: 15px;width: auto;}
  .visual-point {margin-top: -119px;}
  .visual-point01 {width: auto;}
  .visual-point02 {margin: -65px 0 0 auto;width: auto;}
  .visual-point03 {margin: -68px 0 0 auto;width: auto;}
  .visual-h02 {font-size: 48px;margin-top: 67px;}
  .visual-h02 .small {font-size: 80%;}
  .visual-h02 .pink {color: #ff57f1;}
  .visual-btm {margin: 25px auto 0;width: auto;}

  .cta { margin: 30px auto; width: 686px;}

  .ba {background-size: auto;padding-bottom: 19px;}
  .ba .ttl { padding-top: 3vw; width: 752px;}
  .ba .ast {font-size: 13px;padding-top: 60px;}
  .ba-list { margin: 0 auto 20px;width: 700px;}
  
  .effect {background: url("../images/effect.jpg") no-repeat center top;padding: 28px 0 60px;}
  .effect-ttl {margin: 0 auto;}
  .effect-in {margin-top: -320px;}
  
  .point-top {background: url("../images/point-top.jpg") no-repeat center top;padding-top: 18px;}
  .point-ttl {margin: 0 0 0 auto;}
  .point-top-list {display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: center;justify-content: center;align-items: center;margin-top: -10px;margin-bottom: -322px;position: relative;}
  .point-top-list li {margin: 0 10px 18px;}

  .point-in-top {background: url("../images/point01-in-top.png") no-repeat center top;padding: 56px 0 0;}
  .point-in-mid {background: url("../images/point01-in-mid.png") repeat-y center top;padding-bottom: 0;}
  .point-in-btm {background: url("../images/point01-in-btm.png") center bottom no-repeat;padding-bottom: 118px;}
  
  .point01 {background: url("../images/point01-bg.jpg")no-repeat top center;position: relative;padding: 40px 0 20px;}
  .point01-ttl {width: auto;}
  .point01-midashi {margin: 34px auto 0;width: auto;}
  .point01 {margin-top: 6px;}
  .point01 .point-in {margin-top: 46px;}
  .point01 .robot {top: 300px;width: auto;}
  .point01 .gekisugo {top: 453px;width: auto;}
  .point01 .fig {width: 620px;}
  .point01 .point-in-mid {padding-bottom: 685px;}
  .point01-in-txt {font-size: 30px;width: 620px;margin: 0 auto 30px;padding-top: 96px;}
  .point01-in-txt span {color: #ef2adf; font-size: 120%; font-weight: bold;}
  .point01-box {width: 620px;padding: 40px 0 46px;}
  .point01-box-txt {font-size: 32px;}
  .point01-parts {margin-top: 24px;margin-bottom: 31px;}
  .point01-parts dl {font-size: 24px;width: 175px;background: url("../images/arrow.png") no-repeat center top 110px;margin: 0 8px;}
  .point01-parts dt {padding: 30px 0;margin-bottom: 66px;}
  .point01-parts dl:nth-child(2) dt {padding: 18px 0;}
  .point01-parts dd {padding: 31px 0;line-height: 1.2;}
  .point01-parts dl:nth-child(1) dd {padding: 16.5px 0;}
  .point01-box-btm {width: auto;}
  .point01-btm {margin: -40px auto 0;}
  .point01-close-img {position: absolute;left: 100px;}

  .point02 {background: url("../images/point02.jpg")no-repeat top center;position: relative;background-size: auto;padding: 40px 0;}
  .point02 .point-in {margin-top: 71px;}

  .point02 .gekisugo {top: 763px;width: auto;}
  .point02-pilot {top: -135px;width: auto;}
  .point02-ttl {width: auto;}
  .point02-midashi {margin: 34px auto 0;width: auto;}
  .point02-img {width: auto;}
  .point02-in {margin: 34px auto 0;background: url("../images/point02-in.png") no-repeat center top;padding: 10px 0 56px;}
  .point02-in .gekisugo {position: absolute;top: 1150px;left:0;z-index: 2;}
  .point02-in-txt {font-size: 30px;width: 620px;padding-top: 105px;}
  .point02-in-txt span {color: #ef2adf; font-size: 120%; font-weight: bold;}
  .point02-btm {margin: 80px auto 0;width: auto;}

  .point03 {background: url("../images/point03.jpg")no-repeat top center;padding: 46px 0 0;}
  .point03 .point-in {margin-top: 46px;}
  .point03 .gekisugo {top: 311px;width: auto;}
  .costcut-midashi {margin: 0 auto 28px;width: auto;}
  .costcut-contents {margin: 0 auto 45px;width: auto;}
  .costcut-arrow {margin: 0 auto 46px;width: auto;}
  .point03-ttl {width: auto;}
  .point03-midashi {margin: 25px auto 0;width: auto;}
  .point03-img {width: auto;}
  .point03-in-txt {font-size: 30px;width: 620px;padding-top: 85px;}
  
  .point03-arrow01 {margin: -114px auto 0;width: auto;}
  .point03-midashi02 {margin: 45px auto 0;width: auto;}
  .point03-img02 {margin: 50px auto 0;width: auto;}
  .point03-arrow02 {margin: -82px auto 0;width: auto;}

  .point04 {background: url("../images/point04.jpg")no-repeat top center;padding: 50px 0;}
  .point04 .point-in {margin-top: 34px;}
  .point04 .point04-robot {top: 500px;width: auto;}
  .point04 .gekisugo {top: 767px;width: auto;}
  .point04-ttl {width: auto;}
  .point04-midashi {margin: 14px auto 0;width: auto;}
  .point04-img {width: auto;}
  .point04-in-txt {font-size: 30px;width: 620px;padding-top: 130px;}
  .point04-btm {margin: 0 43px 0 auto;width: auto;}
  .point04-btm01 {margin: -150px auto 0;width: auto;}
  .point04-btm02 {margin: 30px auto 0;width: auto;}
  .point04-btm03 {margin: 30px auto;width: auto;}
  
  .support {background: url("../images/support.jpg") no-repeat center top;padding-bottom: 287px;}
  .support-top {margin: 0;}
  .support-ttl {margin: -359px auto 0;left: 15px;width: auto;}
  .support-list {margin-top: 53px;}
  .support-list li {margin: 0 19px 31px;width: auto;}
  .support-list li:nth-child(7) {/* margin: 11px 0 0; */}
  .support-btm {margin: 92px auto 0;width: auto;}
  
  .close {background: url("../images/close.jpg") no-repeat center top;padding: 18px 0 0;}
  .close-arrow {width: auto;}
  .close-img {margin: 25px auto 0;width: auto;}
  .close-ttl {margin: 35px auto 0;width: auto;}
  .close-midashi {margin: 35px auto -15px;width: auto;}
  .close-machine {width: auto;}

  footer { padding: 40px 0 80px;}
  footer img {width: auto;margin: 0 auto 23px;}
  footer p {font-size: 13px;color: #fff;line-height: 1.7;margin-bottom: 48px;}
  footer p span {font-size: 14px;margin-bottom: 44px;}
  footer p span em {font-size: 30px;margin-bottom: 10px;}
  footer p a {display: inline-block;color: #aaa;}
  .chatbot-pd {width: 100%;padding: 14px 0 11px;font-size: 12px;border-top: 1px solid #81838f; padding-bottom: 11px;}
  .js-pagetop {position: fixed;height: 40px;bottom: 0;right: 0;z-index: 1;width: 100%;}
  .js-pagetop .page-top-in {width: 760px;margin: 0 auto;position: relative;}
  .js-pagetop .page-top-in a {width: 40px;position: absolute;right: 0;}

  .slick-slide img {width: 336px; padding: 10px;}


}