/*==============================================================================
Media
============================================================================= */
/*==============================================================================
fv
============================================================================= */
@media screen and (min-width: 769px) { .fv .fv-bg { padding: 75px 0 150px; background: url(../../images/jp/customer-success/fv_bg01_pc.jpg) no-repeat top center; background-size: cover; }
  .fv .fv-block01 { display: flex; justify-content: space-between; }
  .fv .fv-block01 .fv-ttl { position: relative; padding: 0 0 30px; font-size: 48px; line-height: 1.17; letter-spacing: .06em; }
  .fv .fv-block01 .fv-ttl::after { position: absolute; bottom: 0; left: -30px; width: 155px; height: 1px; border-bottom: solid 1px #000; content: ''; }
  .fv .fv-block01 .fv-txt { margin: 37px 0 0; font-size: 18px; line-height: 2; letter-spacing: .14em; }
  .fv .fv-block01 .fv-img { width: 551px; margin: 0 -30px 0 0; }
  .fv .fv-block02 { margin: 100px 0 0; }
  .fv .fv-block02 .fv-ttl02 { font-size: 36px; letter-spacing: .02em; text-align: center; }
  .fv .fv-block02 .fv-desc { margin: 63px 0 0; text-align: center; font-size: 16px; line-height: 2; }
  .fv .fv-block02 .fv-list { display: flex; margin: 100px -43px 0; }
  .fv .fv-block02 .fv-item { width: calc(100%/3); margin: 0 43px; }
  .fv .fv-block02 .fv-item-ico { width: 227px; margin: 0 auto; }
  .fv .fv-block02 .fv-item-ttl { margin: 43px 0 0; font-size: 20px; letter-spacing: .02em; text-align: center; }
  .fv .fv-block02 .fv-item-txt { margin: 30px 0 0; font-size: 16px; letter-spacing: .02em; line-height: 1.81; }
  .fv .fv-block02 .fv-item:first-of-type .fv-item-ico { width: 227px; } }

@media screen and (max-width: 768px) { .fv .fv-bg { padding: 1rem 0 1.3rem; background: url(../../images/jp/customer-success/fv_bg01_sp.png) no-repeat; background-size: 100% auto; background-position: top -.6rem center; }
  .fv .fv-inner { position: relative; }
  .fv .fv-block01 .fv-txt-box { margin-left: .25rem; }
  .fv .fv-block01 .fv-ttl { position: relative; padding: 0 0 .4rem; font-size: .6rem; letter-spacing: .08em; }
  .fv .fv-block01 .fv-ttl::after { position: absolute; bottom: 0; left: -.55rem; width: 1.55rem; height: .01rem; border-bottom: solid 1px #000; content: ''; }
  .fv .fv-block01 .fv-txt { margin: .4rem -.25rem 0 0; font-size: .26rem; line-height: 1.8; letter-spacing: .12em; }
  .fv .fv-block01 .fv-img { width: 6.24rem; margin: .82rem auto 0; }
  .fv .fv-block02 { margin: 1.6rem 0 0; }
  .fv .fv-block02 .fv-ttl02 { font-size: .42rem; letter-spacing: .02em; text-align: center; line-height: 1.69; }
  .fv .fv-block02 .fv-desc { width: 7.5rem; margin: .5rem 0 0; font-size: .24rem; line-height: 2; text-align: center; position: relative; left: 50%; transform: translateX(-50%); }
  .fv .fv-block02 .fv-item { width: 6rem; margin: .9rem auto 0; }
  .fv .fv-block02 .fv-item-ttl { margin: .25rem 0 0; font-size: .4rem; letter-spacing: .02em; text-align: center; }
  .fv .fv-block02 .fv-item-txt { margin: .15rem 0 0; font-size: .24rem; letter-spacing: .04em; line-height: 2.16; }
  .fv .fv-block02 .fv-item:nth-child(1) { margin: .8rem auto 0; }
  .fv .fv-block02 .fv-item:nth-child(1) .fv-item-ico { width: 4.05rem; margin: 0 auto; }
  .fv .fv-block02 .fv-item:nth-child(2) .fv-item-ico { width: 3.73rem; margin: 0 auto; }
  .fv .fv-block02 .fv-item:nth-child(3) .fv-item-ico { width: 3.7rem; margin: 0 auto; } }

/*==============================================================================
flow
============================================================================= */
@media screen and (min-width: 769px) { .flow .flow-bg { padding: 150px 0 214px; background: #f5f5f5; }
  .flow .flow-ttl { font-size: 36px; text-align: center; line-height: 1; }
  .flow .flow-list { display: flex; margin: 80px 0 0; }
  .flow .flow-item { width: calc(100%/3); }
  .flow .flow-item-num { position: absolute; top: 50%; left: 6%; width: 42px; height: 58px; background-size: cover; transform: translate(0, -50%); }
  .flow .flow-item-ttl { position: relative; padding: 30px 0; font-size: 32px; letter-spacing: .02em; text-align: center; }
  .flow .flow-item-txt { padding: 23px 86px; font-size: 16px; line-height: 2.1; }
  .flow .flow-item:nth-child(1) .flow-item-ttl { background: #606060; }
  .flow .flow-item:nth-child(1) .flow-item-ttl::before { position: absolute; z-index: 2; top: 0; right: -36px; width: 0; height: 0; border-style: solid; border-width: 52px 0 52px 35px; border-color: transparent transparent transparent #fff; content: ''; }
  .flow .flow-item:nth-child(1) .flow-item-ttl::after { position: absolute; z-index: 2; top: 0; right: -35px; width: 0; height: 0; border-style: solid; border-width: 52px 0 52px 35px; border-color: transparent transparent transparent #606060; content: ''; }
  .flow .flow-item:nth-child(2) .flow-item-num { left: 14%; }
  .flow .flow-item:nth-child(2) .flow-item-ttl { background: #3f3f3f; }
  .flow .flow-item:nth-child(2) .flow-item-ttl::before { position: absolute; z-index: 2; top: 0; right: -36px; width: 0; height: 0; border-style: solid; border-width: 52px 0 52px 35px; border-color: transparent transparent transparent #fff; content: ''; }
  .flow .flow-item:nth-child(2) .flow-item-ttl::after { position: absolute; z-index: 2; top: 0; right: -35px; width: 0; height: 0; border-style: solid; border-width: 52px 0 52px 35px; border-color: transparent transparent transparent #3f3f3f; content: ''; }
  .flow .flow-item:nth-child(3) .flow-item-num { left: 14%; }
  .flow .flow-item:nth-child(3) .flow-item-ttl { background: #282828; }
  .flow .flow-content { margin: 85px 0 0; }
  .flow .flow-content-sec { margin: 180px 0 0; position: relative; }
  .flow .flow-content-sec::before { content: ''; width: 251px; height: 200px; background: url(../../images/jp/customer-success/flow_bg01.png) no-repeat center/cover; position: absolute; top: -87px; left: -120px; }
  .flow .flow-content-sec::after { content: ''; width: 56px; height: 48px; background: url(../../images/jp/customer-success/flow_arrow01.png) no-repeat center/cover; position: absolute; bottom: -137px; left: 454px; }
  .flow .flow-content-sec.sec01 { margin: 0; }
  .flow .flow-content-sec.sec03::after { content: none; }
  .flow .flow-content-ttl { display: flex; width: 214px; padding: 0 0 20px 29px; border-bottom: 1px solid #000; position: relative; }
  .flow .flow-content-ttl .num { width: 48px; }
  .flow .flow-content-ttl .txt { margin: 10px 0 0 15px; font-size: 50px; line-height: 1; letter-spacing: .02em; }
  .flow .flow-content-list { width: 494px; margin: 60px 0 0 126px; }
  .flow .flow-content-list .ttl { margin: 20px 0 0; font-size: 18px; line-height: 1; letter-spacing: .02em; }
  .flow .flow-content-list .desc { margin: 10px 0 0; font-size: 14px; line-height: 1.7; letter-spacing: .02em; }
  .flow .flow-content .illust01 { width: 372px; position: absolute; top: 70px; left: 682px; }
  .flow .flow-content .illust02 { width: 385px; position: absolute; top: 109px; left: 673px; }
  .flow .flow-content .illust03 { width: 336px; position: absolute; top: 34px; left: 711px; } }

@media screen and (max-width: 768px) { .flow .flow-bg { padding: 1.03rem 0 1.2rem; background: #f5f5f5; }
  .flow .flow-ttl { font-size: .48rem; letter-spacing: .02em; text-align: center; }
  .flow .flow-list { margin: 0.65rem 0 0; }
  .flow .flow-item { display: flex; justify-content: space-between; }
  .flow .flow-item-ttl { position: relative; width: 2.35rem; margin: 0 0 0 .5rem; font-size: .42rem; letter-spacing: .02em; text-align: center; }
  .flow .flow-item-num { display: inline-block; width: .42rem; margin: 0 0.17rem 0 0; }
  .flow .flow-item-txt { position: relative; width: 3.45rem; padding: .35rem 0 0; font-size: .24rem; letter-spacing: .02em; line-height: 2; }
  .flow .flow-item-txt::before { position: absolute; top: 27%; right: 102%; width: .8rem; height: .01rem; border-bottom: solid 1px #000; content: ''; }
  .flow .flow-item:nth-child(1) .flow-item-ttl { padding: 0.75rem 0.4rem 0.7rem; background: #606060; }
  .flow .flow-item:nth-child(1) .flow-item-ttl::before { position: absolute; z-index: 2; bottom: -.23rem; left: 0; width: 0; height: 0; border-style: solid; border-width: .23rem 1.15rem 0 1.15rem; border-color: #fff transparent transparent transparent; content: ''; }
  .flow .flow-item:nth-child(1) .flow-item-ttl::after { position: absolute; z-index: 2; bottom: -.22rem; left: 0; width: 0; height: 0; border-style: solid; border-width: .23rem 1.15rem 0 1.15rem; border-color: #606060 transparent transparent transparent; content: ''; }
  .flow .flow-item:nth-child(2) .flow-item-num { left: 14%; }
  .flow .flow-item:nth-child(2) .flow-item-ttl { padding: 0.8rem 0.4rem 0.7rem; background: #3f3f3f; }
  .flow .flow-item:nth-child(2) .flow-item-ttl::before { position: absolute; z-index: 2; bottom: -.23rem; left: 0; width: 0; height: 0; border-style: solid; border-width: .23rem 1.15rem 0 1.15rem; border-color: #fff transparent transparent transparent; content: ''; }
  .flow .flow-item:nth-child(2) .flow-item-ttl::after { position: absolute; z-index: 2; bottom: -.22rem; left: 0; width: 0; height: 0; border-style: solid; border-width: .23rem 1.15rem 0 1.15rem; border-color: #3f3f3f transparent transparent transparent; content: ''; }
  .flow .flow-item:nth-child(2) .flow-item-txt { padding: 0.1rem 0 0; }
  .flow .flow-item:nth-child(2) .flow-item-txt::before { top: 18%; }
  .flow .flow-item:nth-child(3) .flow-item-num { left: 14%; }
  .flow .flow-item:nth-child(3) .flow-item-ttl { padding: 0.85rem 0.4rem .7rem; background: #282828; }
  .flow .flow-item:nth-child(3) .flow-item-txt { padding: .2rem 0 0; }
  .flow .flow-item:nth-child(3) .flow-item-txt::before { top: 16%; }
  .flow .flow-content { margin: 1.53rem 0 0; }
  .flow .flow-content-sec { margin: 1.8rem 0 0; position: relative; }
  .flow .flow-content-sec::before { content: ''; width: 3rem; height: 2.39rem; background: url(../../images/jp/customer-success/flow_bg01.png) no-repeat center/cover; position: absolute; top: -1.04rem; left: -1.64rem; }
  .flow .flow-content-sec::after { content: ''; width: .8rem; height: .69rem; background: url(../../images/jp/customer-success/flow_arrow01.png) no-repeat center/cover; position: absolute; bottom: -1.32rem; left: 50%; transform: translateX(-50%); }
  .flow .flow-content-sec.sec01 { margin: 0; }
  .flow .flow-content-sec.sec03::after { content: none; }
  .flow .flow-content-ttl { display: flex; width: 2.56rem; margin: 0 0 0 -.3rem; padding: 0 0 .24rem .35rem; border-bottom: 1px solid #000; position: relative; }
  .flow .flow-content-ttl .num { width: .58rem; }
  .flow .flow-content-ttl .txt { margin: .14rem 0 0 .18rem; font-size: .58rem; line-height: 1; letter-spacing: .02em; }
  .flow .flow-content-list { width: 5.98rem; margin: .7rem 0 0 .3rem; }
  .flow .flow-content-list .ttl { margin: .25rem 0 0; font-size: .28rem; line-height: 1; letter-spacing: .02em; }
  .flow .flow-content-list .desc { margin: .1rem 0 0; font-size: .22rem; line-height: 1.7; letter-spacing: .02em; }
  .flow .flow-content .illust01 { width: 4.6rem; margin: .42rem auto 0; }
  .flow .flow-content .illust02 { width: 4.64rem; margin: .6rem auto 0; }
  .flow .flow-content .illust03 { width: 3.68rem; margin: .5rem auto 0; } }

/*==============================================================================
other
============================================================================= */
@media screen and (min-width: 769px) { .other .other-bg { padding: 100px 0; }
  .other .other-ttl { font-size: 28px; line-height: 2; letter-spacing: .02em; text-align: center; }
  .other .other-list { display: flex; flex-wrap: wrap; width: 996px; margin: 70px auto 0; }
  .other .other-item { width: 332px; height: 295px; position: relative; }
  .other .other-item .icon { position: absolute; left: 50%; transform: translateX(-50%); }
  .other .other-item .ttl { margin: 172px 0 0; font-size: 22px; line-height: 1; letter-spacing: .02em; text-align: center; }
  .other .other-item .txt { margin: 15px 0 0; font-size: 16px; line-height: 1.4; letter-spacing: .02em; text-align: center; }
  .other .other-item:nth-child(odd) { background: #ebebeb; }
  .other .other-item.item01 .icon { width: 82px; top: 63px; }
  .other .other-item.item02 .icon { width: 79px; top: 65px; }
  .other .other-item.item03 .icon { width: 91px; top: 64px; }
  .other .other-item.item04 .icon { width: 80px; top: 64px; }
  .other .other-item.item05 .icon { width: 78px; top: 66px; }
  .other .other-item.item06 .icon { width: 86px; top: 69px; } }

@media screen and (max-width: 768px) { .other .other-bg { padding: 1rem 0 .75rem; }
  .other .other-ttl { font-size: .36rem; line-height: 2; letter-spacing: .02em; text-align: center; }
  .other .other-list { display: flex; flex-wrap: wrap; justify-content: center; width: 6.84rem; margin: .5rem auto 0; }
  .other .other-item { width: 3.32rem; height: 2.95rem; position: relative; }
  .other .other-item .icon { position: absolute; left: 50%; transform: translateX(-50%); }
  .other .other-item .ttl { margin: 1.65rem 0 0; font-size: .3rem; line-height: 1; letter-spacing: .02em; text-align: center; }
  .other .other-item .txt { margin: .15rem 0 0; font-size: .2rem; line-height: 1.6; letter-spacing: .02em; text-align: center; }
  .other .other-item.item01 { background: #ebebeb; }
  .other .other-item.item01 .icon { width: .82rem; top: .63rem; }
  .other .other-item.item02 .icon { width: .79rem; top: .65rem; }
  .other .other-item.item03 .icon { width: .91rem; top: .64rem; }
  .other .other-item.item04 { background: #ebebeb; }
  .other .other-item.item04 .icon { width: .8rem; top: .64rem; }
  .other .other-item.item05 { background: #ebebeb; }
  .other .other-item.item05 .icon { width: .78rem; top: .66rem; }
  .other .other-item.item06 .icon { width: .86rem; top: .69rem; } }

/*==============================================================================
case
============================================================================= */
@media screen and (min-width: 769px) { .case .case-bg { padding: 30px 0 117px; }
  .case .case-ttl { font-size: 40px; letter-spacing: .02em; text-align: center; }
  .case .case-flex { display: flex; flex-direction: row-reverse; margin: 66px auto 0; box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.1); }
  .case .case-img { height: 100%; }
  .case .case-box { width: 626px; padding: 30px 40px; position: relative; background-color: #fff; border-left: 5px solid #000; }
  .case .case-box .top { padding: 10px 0; border-bottom: 1px solid #eaeaea; }
  .case .case-box .top .icon { width: 156px; position: absolute; top: -47px; left: 12px; }
  .case .case-box .top .ttl { font-size: 20px; line-height: 1.55; letter-spacing: .1em; }
  .case .case-box .top .name { margin: 22px 0 0; font-size: 14px; line-height: 1.3; letter-spacing: .1em; }
  .case .case-box .bottom { padding: 30px 0 0; }
  .case .case-box .bottom .txt { width: 500px; font-size: 14px; line-height: 1.92; letter-spacing: .1em; }
  .case .case-box .bottom .more { width: 125px; margin: 20px 0 0 auto; font-size: 13px; text-align: right; line-height: 1; }
  .case .case-box .bottom .more span { display: inline-block; padding: 0 0 8px; border-bottom: 1px solid #000; } }

@media screen and (max-width: 768px) { .case .case-bg { padding: .6rem 0 1.3rem; }
  .case .case-ttl { font-size: .48rem; letter-spacing: .02em; text-align: center; }
  .case .case-flex { position: relative; width: 6.2rem; margin: .85rem auto 0; box-shadow: 0 0.05rem 0.3rem 0 rgba(0, 0, 0, 0.1); }
  .case .case-box { padding: .25rem .3rem .45rem; background-color: #fff; border-left: .05rem solid #000; }
  .case .case-box .top { border-bottom: 1px solid #eaeaea; }
  .case .case-box .top .icon { width: 2.1rem; position: absolute; top: -0.4rem; left: -0.3rem; }
  .case .case-box .top .ttl { font-size: .3rem; line-height: 1.56; letter-spacing: .1em; }
  .case .case-box .top .name { margin: .2rem 0 0; padding: 0 0 0.1rem; font-size: .2rem; letter-spacing: .1em; }
  .case .case-box .bottom { padding: .3rem 0 0; }
  .case .case-box .bottom .txt { font-size: .22rem; line-height: 1.9; letter-spacing: .1em; }
  .case .case-box .bottom .more { width: 2.5rem; margin: .7rem 0 0 auto; font-size: .26rem; text-align: right; line-height: 1; }
  .case .case-box .bottom .more span { display: inline-block; padding: 0 0 .15rem; border-bottom: 1px solid #000; } }

/*==============================================================================
cta
============================================================================= */
@media screen and (min-width: 769px) { .cta .cta-bg { padding: 100px 0 80px; background: url(../../images/jp/common/cta_bg01_pc.jpg) no-repeat center/cover; }
  .cta .cta-ttl { font-size: 24px; letter-spacing: .06em; line-height: 1; text-align: center; }
  .cta .cta-block { display: flex; flex-wrap: wrap; justify-content: center; margin: 71px 0 0; }
  .cta .cta-block .btn { display: flex; justify-content: center; align-self: center; background: #fff; width: 505px; height: 120px; position: relative; border-radius: 10px; color: #282828; font-size: 24px; letter-spacing: .06em; line-height: 1; }
  .cta .cta-block .btn .txt { display: flex; align-self: center; text-align: center; }
  .cta .cta-block .btn.btn01 .icon { width: 120px; position: absolute; top: -46px; left: -19px; }
  .cta .cta-block .btn.btn02 { margin: 0 0 0 30px; background-image: linear-gradient(-50deg, #902e2b 0%, #b02c3c 64%, #be2b4b 100%); }
  .cta .cta-block .btn.btn03 { margin: 40px 0 0; font-size: 20px; line-height: 1.65; } }

@media screen and (max-width: 768px) { .cta .cta-bg { padding: 1rem 0 1.4rem; background: url(../../images/jp/common/cta_bg01_sp.jpg) no-repeat center/cover; }
  .cta .cta-ttl { font-size: .38rem; letter-spacing: .06em; line-height: 1.7; text-align: center; }
  .cta .cta-block { margin: .71rem 0 0; }
  .cta .cta-block .btn { display: flex; justify-content: center; align-self: center; background: #fff; width: 6rem; height: 1.4rem; margin: auto; position: relative; border-radius: .1rem; color: #282828; font-size: .32rem; letter-spacing: .06em; line-height: 1; }
  .cta .cta-block .btn .txt { display: flex; align-self: center; text-align: center; }
  .cta .cta-block .btn.btn01 .icon { width: 1.2rem; position: absolute; top: -.45rem; left: -.28rem; }
  .cta .cta-block .btn.btn02 { margin: .4rem auto 0; background-image: linear-gradient(-50deg, #902e2b 0%, #b02c3c 64%, #be2b4b 100%); }
  .cta .cta-block .btn.btn03 { margin: .4rem auto 0; font-size: .28rem; line-height: 1.65; } }