@charset "UTF-8";
/* ------------------------------
- base
------------------------------ */
/* ------------------------------
- base
------------------------------ */
/* ------------------------------
- mixins
------------------------------ */
/* ------------------------------
- base
------------------------------ */
/* ------------------------------
- base
------------------------------ */
/* ------------------------------
- utility
------------------------------ */
@media screen and (min-width: 1024px) {
  .visible-md, .visible-sm {
    display: none;
  }
  .visible-lg {
    display: inherit;
  }
}
@media screen and (min-width: 897px) and (max-width: 1023px) {
  .visible-lg, .visible-sm {
    display: none;
  }
  .visible-md {
    display: inherit;
  }
}
@media screen and (max-width: 896px) {
  .visible-lg, .visible-md {
    display: none;
  }
  .visible-sm {
    display: inherit;
  }
}

.c-blue {
  color: #97eff1;
}

.c-blue02 {
  color: #0a97b0;
}

/* ------------------------------
- base
------------------------------ */
/* ------------------------------
- base
------------------------------ */
/* ------------------------------
- layout
------------------------------ */
@media screen and (min-width: 897px) {
  .l-inner {
    width: 95%;
    max-width: 1080px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 896px) {
  .l-inner {
    padding: 0 15px;
  }
}

/* ------------------------------
- 流用
------------------------------ */
/* mainBox */
.mainBox {
  background: -webkit-gradient(linear, left top, left bottom, from(#002850), to(#002882));
  background: linear-gradient(#002850 0%, #002882 100%);
  font-size: 1.6rem;
  font-weight: 500;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
}

.mainBox p {
  line-height: 2;
}

.pageTitle {
  padding: 184px 50px 71px 100px;
}

.pageTitle .headLine03 {
  max-width: 1394px;
  color: #fff;
  padding-bottom: 0;
  font-weight: 500;
  border-bottom: none;
  letter-spacing: 0;
}

.pageTitle .headLine03 .en {
  margin-bottom: -4px;
  letter-spacing: 0;
}

#conts {
  width: calc(100% - 200px);
  float: left;
}

.mainBox .content {
  max-width: 1080px;
  padding: 0 20px;
}

.mainBox .notes {
  margin-top: 6px;
  color: #002850;
  font-weight: 400;
  text-align: right;
}

.comBtmLink {
  margin-top: 0;
}

@media all and (min-width: 897px) {
  .pageTitle {
    background: #19226D;
  }
}
@media all and (max-width: 896px) {
  .pageTitle {
    margin-bottom: 0;
    padding: 100px 24px 83px;
  }
  .pageTitle .headLine03 {
    margin-bottom: 16px;
  }
  .pageTitle .headLine03 .en {
    margin-bottom: 7px;
    letter-spacing: 0;
    line-height: 0.9;
  }
  #pagePath {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
  }
  #conts {
    width: auto;
    float: none;
  }
  #conts .content {
    padding: 0 15px;
  }
  .mainBox {
    font-size: 1.3rem;
  }
  .mainBox .notes {
    margin-top: 1px;
    font-size: 1rem;
  }
  .mainBox p {
    letter-spacing: -0.02em;
  }
  .mainBox {
    background: #fff;
    font-weight: normal;
  }
}
/* sideBar */
#sideBar {
  width: 200px;
  float: right;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: absolute;
  height: 100%;
  right: 0;
  top: 0;
}

#sideBar .sideBox {
  position: absolute;
  max-height: 100vh;
  overflow: auto;
}

#sideBar .sideBox::-webkit-scrollbar {
  display: none;
}

#sideBar .sideInner {
  padding: 15px 15px;
}

#sideBar .sideBtn {
  margin-bottom: 20px;
}

#sideBar .sideList a {
  padding: 10px 0 9px 29px;
  color: #fff;
  display: block;
  position: relative;
  font-size: 1.4rem;
  line-height: 1.5;
  position: relative;
}

#sideBar .sideList a::after {
  width: 100%;
  height: 1px;
  background-color: #fff;
  opacity: 0.2;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
}

#sideBar .sideList a::before {
  margin-top: -5px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 50%;
  left: 8px;
  background: url("../img/service/infinity-marketing/side_icon.png") no-repeat left top/100% 100%;
  content: "";
  opacity: 0;
}

#sideBar .sideList .on a {
  background: url("../img/service/infinity-marketing/side_bg.jpg") repeat-y left top/100% auto;
}

#sideBar .sideList .on a::before {
  opacity: 1;
}

#sideBar .sideList .on a::after {
  display: none;
}

@media all and (min-width: 897px) {
  #sideBar .sideList a:hover {
    background: url("../img/service/infinity-marketing/side_bg.jpg") repeat-y left top/100% auto;
  }
  #sideBar .sideList a:hover::before {
    opacity: 1;
  }
  #sideBar .sideList a:hover::after {
    display: none;
  }
  #sideBar .sideBtn a:hover {
    opacity: 0.7;
  }
}
/* qa */
.qaBox {
  padding: 56px 0;
  background-color: #fff;
}

.qaBox .comTextBox {
  margin-bottom: 78px;
}

.qaBox .headLine03 {
  margin-bottom: 0;
}

.qaBox .headLine03 .en {
  margin-bottom: 27px;
  font-size: 12rem;
}

.qaBox .headLine03 .en .small {
  margin-top: 9px;
  font-size: 6.4rem;
  display: inline-block;
  vertical-align: middle;
}

.qaBox .faqDl {
  margin: -20px 0 0 32px;
  max-width: 1048px;
}

.qaBox .faqDl dd {
  display: none;
}

.qaBox .faqDl dt {
  margin-top: 20px;
  padding: 28px 73px 29px 73px;
  font-size: 1.8rem;
  background-color: #F5F5F7;
  line-height: 1.5;
  position: relative;
  cursor: pointer;
}

.qaBox .faqDl dt::before {
  position: absolute;
  top: 12px;
  left: 23px;
  font-family: "Oswald", sans-serif;
  color: #002850;
  font-size: 4rem;
  font-weight: 400;
  content: "Q";
}

.qaBox .faqDl dt::after {
  width: 46px;
  height: 46px;
  position: absolute;
  top: 50%;
  right: 17px;
  background: url("../img/service/infinity-marketing/faq_icon01.png") no-repeat left top/100% 100%;
  content: "";
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.qaBox .faqDl dt.on::after {
  background-image: url("../img/service/infinity-marketing/faq_icon02.png");
}

.qaBox .faqDl .aBox {
  padding: 16px 40px 27px 132px;
  position: relative;
  background-color: #D8E0E5;
}

.qaBox .faqDl .aBox::before {
  padding-bottom: 3px;
  position: absolute;
  top: 28px;
  left: 69px;
  width: 45px;
  height: 45px;
  font-family: "Oswald", sans-serif;
  color: #fff;
  font-size: 2.8rem;
  font-weight: 400;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #002850;
  content: "A";
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.qaBox .btn a {
  margin: 0 auto;
  width: 450px;
  height: 100px;
  border-radius: 50px;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 500;
  background: url("../img/service/infinity-marketing/faq_btn_bg.jpg") repeat-y left top/100% auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.qaBox .btn {
  margin-top: 35px;
}

.qaBox .btn a:hover {
  opacity: 0.7;
}

@media all and (max-width: 896px) {
  .qaBox .headLine03 .en {
    margin-bottom: 10px;
    font-size: 3.7rem;
  }
  .qaBox .headLine03 .en .small {
    margin-top: -12px;
    font-size: 3.7rem;
  }
  .qaBox {
    padding: 16px 0;
  }
  .qaBox .faqDl {
    margin: -10px 0 0 0;
    max-width: inherit;
  }
  .qaBox .comTextBox {
    margin-bottom: 35px;
  }
  .qaBox .faqDl dt {
    margin-top: 10px;
    padding: 21px 37px 19px 37px;
    font-size: 1.3rem;
  }
  .qaBox .faqDl dt::before {
    top: 15px;
    left: 12px;
    font-size: 2rem;
  }
  .qaBox .faqDl dt::after {
    width: 24px;
    height: 24px;
    right: 7px;
  }
  .qaBox .faqDl .aBox {
    padding: 10px 10px 11px 44px;
  }
  .qaBox .faqDl .aBox::before {
    padding-bottom: 2px;
    top: 13px;
    left: 13px;
    width: 23px;
    height: 23px;
    font-size: 1.4rem;
  }
  .qaBox .btn a {
    width: 100%;
    max-width: 300px;
    height: 60px;
    font-size: 1.4rem;
  }
  .qaBox .btn {
    margin-top: 20px;
  }
}
#sideBar {
  background: #002850;
}

#main .bgBox01 {
  background: url(../img/service/infinity-marketing/bg12.jpg) no-repeat center/cover;
}

/* ------------------------------
- mixin
------------------------------ */
/* ------------------------------
- mugen-asp
------------------------------ */
.intro,
.strong,
.perform,
.special,
.brand,
.message,
.flow,
.download {
  background: #fff;
}

.mainBox * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.headLine03.-white {
  color: #fff !important;
}
.headLine03.-white .en {
  color: #fff !important;
}

@media screen and (max-width: 896px) {
  .qaBox {
    padding: 3rem 0;
  }
}

@media screen and (min-width: 897px) {
  .sec {
    padding: 10rem 0 6.4rem;
  }
}
.sec__title {
  line-height: 1;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
}
@media screen and (min-width: 897px) {
  .sec__title {
    margin-bottom: 3.2rem;
    font-size: clamp(5rem, 6.25vw, 10rem);
  }
}
@media screen and (max-width: 896px) {
  .sec__title {
    margin-bottom: 2.4rem;
    font-size: 3.7rem;
  }
}
.sec__title.-white {
  color: #fff;
}

@media screen and (min-width: 897px) {
  .sec__lead {
    margin-bottom: 3.2rem;
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 896px) {
  .sec__lead {
    margin-bottom: 1.6rem;
    font-size: 1.3rem;
  }
}
.sec__lead.-white {
  color: #fff;
}

@media screen and (min-width: 897px) {
  .sec__subHead {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0 2.8rem;
    margin-bottom: 3rem;
  }
}
@media screen and (max-width: 896px) {
  .sec__subHead {
    margin-bottom: 1.5rem;
  }
}

.sec__subHead__icon {
  border: 1px solid #fff;
  color: #fff;
  font-weight: 500;
  background: linear-gradient(45deg, #002e87, #006dbd);
}
@media screen and (min-width: 897px) {
  .sec__subHead__icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 1rem;
    width: 10rem;
    height: 10rem;
    font-size: clamp(1.8rem, 1.5vw, 2.4rem);
  }
}
@media screen and (max-width: 896px) {
  .sec__subHead__icon {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0 1.6em;
    font-size: 1.6rem;
  }
}

.sec__subHead__title {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-weight: 500;
}
@media screen and (min-width: 897px) {
  .sec__subHead__title {
    font-size: clamp(2.4rem, 2.625vw, 4.2rem);
  }
}
@media screen and (max-width: 896px) {
  .sec__subHead__title {
    line-height: 1.6 !important;
    font-size: 1.6rem;
  }
}
.-white .sec__subHead__title {
  color: #fff;
}

.intro {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}
@media screen and (min-width: 897px) {
  .intro {
    padding: 9rem 0 10rem;
    background-image: url(../img/service/mugen-asp/intro_bg01.jpg);
  }
}
@media screen and (max-width: 896px) {
  .intro {
    padding: 3.5rem 0 2rem;
    background-image: url(../img/service/mugen-asp/intro_bg01_sp.jpg);
  }
}

.intro__area {
  position: relative;
}

@media screen and (min-width: 897px) {
  .intro__box {
    width: 54.6296296296%;
  }
}

@media screen and (min-width: 897px) {
  .introBlock:not(:first-of-type) {
    margin-top: 4rem;
  }
}
@media screen and (max-width: 896px) {
  .introBlock:not(:first-of-type) {
    margin-top: 2rem;
  }
}

.intro__title,
.intro__text {
  color: #fff;
}

.intro__title {
  margin-bottom: 1.5rem;
}
@media screen and (min-width: 897px) {
  .intro__title {
    font-size: 2.4rem;
  }
}
@media screen and (max-width: 896px) {
  .intro__title {
    font-size: 1.8rem;
  }
}

.intro__text {
  line-height: 2.2 !important;
}

@media screen and (min-width: 1300px) {
  .intro__img {
    top: -30%;
  }
}
@media screen and (min-width: 897px) and (max-width: 1299px) {
  .intro__img {
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
@media screen and (min-width: 897px) {
  .intro__img {
    position: absolute;
    right: -16.2962962963%;
    width: 71.8518518519%;
  }
}
@media screen and (max-width: 896px) {
  .intro__img {
    margin-top: -2.5rem;
    margin-left: -6.231884058%;
    width: 112.4637681159%;
  }
}
.intro__img img {
  width: 100%;
}

.strong {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-position: top center;
}
@media screen and (min-width: 897px) {
  .strong {
    background-image: url(../img/service/mugen-asp/strong_bg.jpg);
  }
}
@media screen and (max-width: 896px) {
  .strong {
    padding: 40vw 0 3rem;
    background-image: url(../img/service/mugen-asp/strong_bg_sp.jpg);
  }
}

@media screen and (min-width: 897px) {
  .strong__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 2.7777777778%;
  }
}

.strong__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #fff;
}
@media screen and (min-width: 897px) {
  .strong__item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 3.5rem 3rem;
    width: 31.4814814815%;
  }
}
@media screen and (max-width: 896px) {
  .strong__item {
    gap: 0 2rem;
    padding: 2.5rem 1.5rem;
  }
}
@media screen and (max-width: 896px) {
  .strong__item:not(:first-of-type) {
    margin-top: 1.2rem;
  }
}

@media screen and (min-width: 897px) {
  .strong__item__inner {
    display: contents;
  }
}
@media screen and (max-width: 896px) {
  .strong__item__inner {
    width: 55.5555555556%;
  }
}

.strong__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  margin-bottom: 1.5rem;
  font-weight: normal;
}
@media screen and (min-width: 897px) {
  .strong__title {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    width: 100%;
  }
}
.strong__title span {
  display: block;
}
.strong__title .num {
  line-height: 1;
  font-family: "Oswald", sans-serif;
}
@media screen and (min-width: 897px) {
  .strong__title .num {
    margin-right: 1.2rem;
    margin-bottom: 0.05em;
    font-size: clamp(3rem, 4vw, 6.4rem);
  }
}
@media screen and (max-width: 896px) {
  .strong__title .num {
    margin-right: 0.8rem;
    font-size: 4.6rem;
  }
}
.strong__title .en {
  letter-spacing: 0.08em;
}
@media screen and (max-width: 896px) {
  .strong__title .en {
    font-size: 1.2rem;
  }
}
.strong__title .main {
  line-height: 1.4;
  font-weight: 500;
}
@media screen and (min-width: 897px) {
  .strong__title .main {
    font-size: clamp(1.8rem, 1.625vw, 2.6rem);
  }
}
@media screen and (max-width: 896px) {
  .strong__title .main {
    font-size: 1.6rem;
  }
}

.strong__text {
  margin-top: 1.5rem;
}
@media screen and (min-width: 897px) {
  .strong__text {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
    text-align: center;
  }
}

.strong__img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (min-width: 897px) {
  .strong__img {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    width: 13rem;
    height: 15rem;
  }
}
@media screen and (max-width: 896px) {
  .strong__img {
    width: 10rem;
  }
}

.perform {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media screen and (min-width: 897px) {
  .perform {
    background-image: url(../img/service/mugen-asp/perform_bg.jpg);
  }
}
@media screen and (max-width: 896px) {
  .perform {
    padding: 3.5rem 0 2.5rem;
    background-image: url(../img/service/mugen-asp/perform_bg_sp.jpg);
  }
}

@media screen and (min-width: 897px) {
  .perform__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.perform__item:not(:last-of-type) {
  position: relative;
}
.perform__item:not(:last-of-type)::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  aspect-ratio: 15/25;
  background: url(../img/service/mugen-asp/icon_arrow_b.png) no-repeat center/contain;
}
@media screen and (min-width: 897px) {
  .perform__item:not(:last-of-type)::before {
    width: 1.5rem;
  }
}
@media screen and (max-width: 896px) {
  .perform__item:not(:last-of-type)::before {
    width: 1rem;
  }
}
@media screen and (min-width: 897px) {
  .perform__item:not(:first-of-type) {
    margin-top: 3rem;
  }
}
@media screen and (max-width: 896px) {
  .perform__item:not(:first-of-type) {
    margin-top: 2.1rem;
  }
}

.perform__num {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  background: #000;
}
@media screen and (min-width: 897px) {
  .perform__num {
    padding: 1rem;
    width: 14rem;
    height: 10rem;
    letter-spacing: 0.05em;
  }
}
@media screen and (max-width: 896px) {
  .perform__num {
    padding: 0.5rem 1.5rem;
    font-size: 1.2rem;
    letter-spacing: 0.08em !important;
  }
}

.perform__item__text {
  color: #fff;
  background: #072b42;
}
@media screen and (min-width: 897px) {
  .perform__item__text {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 1rem;
    line-height: 1.6 !important;
    text-align: center;
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 896px) {
  .perform__item__text {
    padding: 1.2rem 1.5rem 1.5rem;
    line-height: 2 !important;
    text-align: center;
  }
}

.perform__text {
  color: #fff;
}
@media screen and (min-width: 897px) {
  .perform__text {
    margin-top: 3.8rem;
  }
}
@media screen and (max-width: 896px) {
  .perform__text {
    margin-top: 2rem;
  }
}

@media screen and (min-width: 897px) {
  .perform__img {
    margin-top: 3.5rem;
  }
}
@media screen and (max-width: 896px) {
  .perform__img {
    margin-top: 2.2rem;
  }
}

.special {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media screen and (min-width: 897px) {
  .special {
    background-image: url(../img/service/mugen-asp/special_bg.jpg);
  }
}
@media screen and (max-width: 896px) {
  .special {
    padding: 3.5rem 0 3rem;
    background-image: url(../img/service/mugen-asp/special_bg_sp.jpg);
  }
}

.special__title {
  text-align: center;
  color: #fff;
  font-weight: 400;
  background: #072b42;
}
@media screen and (min-width: 897px) {
  .special__title {
    padding: 1.5rem;
    font-size: 2.4rem;
  }
}
@media screen and (max-width: 896px) {
  .special__title {
    padding: 1rem 1.5rem;
    font-size: 1.6rem;
  }
}

.special__img {
  position: relative;
}
.special__img::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border-style: solid;
  border-bottom: 0;
  width: 0;
  height: 0;
}
@media screen and (min-width: 897px) {
  .special__img::before {
    border-top: 3.4rem solid #fff;
    border-right: 3rem solid transparent;
    border-left: 3rem solid transparent;
  }
}
@media screen and (max-width: 896px) {
  .special__img::before {
    border-top: 2.4rem solid #fff;
    border-right: 2rem solid transparent;
    border-left: 2rem solid transparent;
  }
}
.special__img img {
  width: 100%;
}

.merit {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media screen and (min-width: 897px) {
  .merit {
    padding: 7rem 4.1666666667%;
    background-image: url(../img/service/mugen-asp/special_merit_img.jpg);
  }
}
@media screen and (max-width: 896px) {
  .merit {
    padding: 5.5rem 1.5rem 46.6666666667vw;
    background-image: url(../img/service/mugen-asp/special_merit_img_sp.jpg);
    background-position: bottom center;
  }
}

@media screen and (min-width: 897px) {
  .merit__textBox {
    width: 50.5050505051%;
  }
}

.merit__title {
  letter-spacing: 0.05em;
  color: #fff;
  font-weight: 500;
}
@media screen and (min-width: 897px) {
  .merit__title {
    margin-bottom: 2rem;
    font-size: 3.2rem;
  }
}
@media screen and (max-width: 896px) {
  .merit__title {
    margin-bottom: 1.6rem;
    font-size: 1.6rem;
  }
}

.merit__text {
  letter-spacing: 0.04em;
  line-height: 2.2 !important;
  color: #fff;
}

.brand {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media screen and (min-width: 897px) {
  .brand {
    padding: 7rem 4.1666666667%;
    background-image: url(../img/service/mugen-asp/brand_bg.jpg);
  }
}
@media screen and (max-width: 896px) {
  .brand {
    padding: 3rem 0;
    background-image: url(../img/service/mugen-asp/brand_bg_sp.jpg);
  }
}

@media screen and (min-width: 897px) {
  .brand__box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 5.5555555556%;
  }
}

@media screen and (min-width: 897px) {
  .brand__left {
    width: 31.4814814815%;
  }
}
.brand__left .brand__item {
  width: 100%;
}

.brand__right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (min-width: 897px) {
  .brand__right {
    width: 62.962962963%;
  }
}
.brand__right .brand__item {
  position: relative;
  width: 50%;
}
.brand__right .brand__item:nth-of-type(odd)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  z-index: 10;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 1px;
  background: #002850;
}
@media screen and (min-width: 897px) {
  .brand__right .brand__item:nth-of-type(odd)::before {
    height: calc(100% - 2rem);
  }
}
@media screen and (max-width: 896px) {
  .brand__right .brand__item:nth-of-type(odd)::before {
    height: calc(100% - 1rem);
  }
}
.brand__right .brand__item:nth-of-type(even)::before, .brand__right .brand__item:nth-of-type(even)::after {
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 10;
  aspect-ratio: 1;
}
.brand__right .brand__item:nth-of-type(even)::before {
  right: 92.6470588235%;
  width: 14.7058823529%;
  background: #fff;
}
.brand__right .brand__item:nth-of-type(even)::after {
  right: 91.4705882353%;
  width: 17.0588235294%;
  background: url(../img/service/mugen-asp/icon_brand_batsu.png) no-repeat center/contain;
}
@media screen and (max-width: 896px) {
  .brand__right .brand__item .brand__subtitle {
    height: 2.6em;
    line-height: 1 !important;
  }
}
@media screen and (max-width: 896px) {
  .brand__right .brand__item .brand__text {
    padding: 0 1rem;
  }
}

.brand__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: #fff;
}
@media screen and (min-width: 897px) {
  .brand__item {
    padding: 1rem 1rem 3rem;
  }
}
@media screen and (max-width: 896px) {
  .brand__item {
    padding: 0.5rem 0.5rem 3rem;
  }
}

.brand__title {
  padding: 1rem 1.5rem;
  width: 100%;
  text-align: center;
  color: #fff;
  font-weight: 400;
  background: #002850;
}
@media screen and (min-width: 897px) {
  .brand__title {
    margin-bottom: 2rem;
    font-size: clamp(2rem, 1.5vw, 2.4rem);
  }
}
@media screen and (max-width: 896px) {
  .brand__title {
    margin-bottom: 1.6rem;
    font-size: 1.6rem;
  }
}

.brand__subtitle {
  -ms-flex-line-pack: center;
      align-content: center;
  line-height: 1.5 !important;
  text-align: center;
  font-weight: 500;
}
@media screen and (min-width: 897px) {
  .brand__subtitle {
    height: 3em;
    font-size: clamp(2rem, 1.5vw, 2.4rem);
  }
}
@media screen and (max-width: 896px) {
  .brand__subtitle {
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
  }
}
.brand__subtitle .-sm {
  font-size: 0.6666666667em;
}

.brand__img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (min-width: 897px) {
  .brand__img {
    width: 14.2rem;
    height: 13.8rem;
  }
}
@media screen and (max-width: 896px) {
  .brand__img {
    width: 11.3rem;
    height: 10.9rem;
  }
}

.brand__text {
  width: 100%;
  text-align: center;
}
@media screen and (min-width: 897px) {
  .brand__text {
    margin-top: 1rem;
  }
}
@media screen and (max-width: 896px) {
  .brand__text {
    margin-top: 0.6rem;
    line-height: 1.8 !important;
  }
}

@media screen and (min-width: 897px) {
  .structure {
    margin-top: 4rem;
  }
}
@media screen and (max-width: 896px) {
  .structure {
    margin-top: 2.5rem;
  }
}

.structure__title {
  text-align: center;
  color: #fff;
  font-weight: 500;
  background: #002850;
}
@media screen and (min-width: 897px) {
  .structure__title {
    margin-bottom: 2rem;
    padding: 1.2rem 1.5rem;
    font-size: clamp(2rem, 1.5vw, 2.4rem);
  }
}
@media screen and (max-width: 896px) {
  .structure__title {
    margin-bottom: 1.5rem;
    padding: 0.9rem 1.5rem;
    font-size: 1.6rem;
  }
}

@media screen and (min-width: 897px) {
  .structure__box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0 2.5925925926%;
  }
}

.structure__text {
  letter-spacing: 0.04em;
  color: #fff;
}
@media screen and (min-width: 897px) {
  .structure__text {
    width: 34.2592592593%;
    line-height: 2.2;
  }
}

@media screen and (min-width: 897px) {
  .structure__img {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}
@media screen and (max-width: 896px) {
  .structure__img {
    margin: 2.5rem auto 0;
    width: 94.2028985507%;
  }
}

@media screen and (min-width: 897px) {
  .flow {
    background: linear-gradient(135deg, #d6dce1 70%, #bdccd1);
  }
}
@media screen and (max-width: 896px) {
  .flow {
    padding: 3.5rem 0 3rem;
    background: -webkit-gradient(linear, left top, right top, color-stop(50%, #d6dce1), to(#abc4cb));
    background: linear-gradient(90deg, #d6dce1 50%, #abc4cb);
  }
}

@media screen and (min-width: 897px) {
  .message__bg {
    height: 38rem;
  }
}
@media screen and (max-width: 896px) {
  .message__bg {
    height: 14rem;
  }
}
.message__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.message__main {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media screen and (min-width: 897px) {
  .message__main {
    padding: 9rem 0 5.4rem;
    background-image: url(../img/service/mugen-asp/message_bg02.jpg);
  }
}
@media screen and (max-width: 896px) {
  .message__main {
    padding: 4rem 0 2.5rem;
    background-image: url(../img/service/mugen-asp/message_bg02_sp.jpg);
  }
}

@media screen and (min-width: 897px) {
  .message__inner {
    margin-top: -14rem;
  }
}
@media screen and (max-width: 896px) {
  .message__inner {
    margin-top: -5.5rem;
  }
}

@media screen and (min-width: 897px) {
  .message__box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0 2.3148148148%;
  }
}

.message__title {
  line-height: 1;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
}
@media screen and (min-width: 897px) {
  .message__title {
    font-size: clamp(5rem, 6.25vw, 10rem);
  }
}
@media screen and (max-width: 896px) {
  .message__title {
    margin-bottom: 2.3rem;
    font-size: 3.2rem;
  }
}

.message__text {
  color: #fff;
}
@media screen and (min-width: 897px) {
  .message__text {
    width: 56.4814814815%;
  }
}

@media screen and (min-width: 897px) {
  .message__img {
    width: 40.8333333333%;
  }
}
@media screen and (max-width: 896px) {
  .message__img {
    margin: 1.7rem auto 0;
    width: 95.652173913%;
  }
}

.download {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-position: top center;
}
@media screen and (min-width: 897px) {
  .download {
    padding: 9rem 0 5.4rem;
    background-image: url(../img/service/mugen-asp/download_bg.jpg);
  }
}
@media screen and (max-width: 896px) {
  .download {
    padding: 5.5rem 0 3rem;
    background-image: url(../img/service/mugen-asp/download_bg_sp.jpg);
  }
}
@media screen and (min-width: 897px) {
  .download .comTextBox {
    margin-bottom: 4.5rem;
  }
}
@media screen and (max-width: 896px) {
  .download .comTextBox {
    margin-bottom: 4rem;
  }
}
.download .hs-form-field {
  position: relative;
}
@media screen and (min-width: 897px) {
  .download .hs-form-field {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 0.5rem 1rem;
  }
}
@media screen and (min-width: 897px) {
  .download .hs-form-field:not(:first-of-type) {
    margin-top: 2rem;
  }
}
@media screen and (max-width: 896px) {
  .download .hs-form-field:not(:first-of-type) {
    margin-top: 1.5rem;
  }
}
.download .hs-form-field > label {
  display: block;
  width: 12rem;
  color: #fff;
}
@media screen and (min-width: 897px) {
  .download .hs-form-field > label {
    font-size: 2rem;
  }
}
@media screen and (max-width: 896px) {
  .download .hs-form-field > label {
    margin-bottom: 0.8rem;
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 897px) {
  .download .hs-form-field .input {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}
.download .hs-form-field input:not([type=radio]):not([type=checkbox]):not([type=button]) {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0;
  border: none;
  width: 100%;
}
@media screen and (min-width: 897px) {
  .download .hs-form-field input:not([type=radio]):not([type=checkbox]):not([type=button]) {
    padding: 0.8em 1.5rem;
    height: 6rem;
  }
}
@media screen and (max-width: 896px) {
  .download .hs-form-field input:not([type=radio]):not([type=checkbox]):not([type=button]) {
    padding: 0.6em 1rem;
    height: 4rem;
    font-size: 1.3rem;
  }
}
.download .hs-form-field .hs-error-msgs {
  pointer-events: none;
}
@media screen and (min-width: 897px) {
  .download .hs-form-field .hs-error-msgs {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    left: 14.5rem;
    color: red;
  }
}
@media screen and (max-width: 896px) {
  .download .hs-form-field .hs-error-msgs {
    margin-top: 0.5rem;
    color: #fff;
  }
}
.download .hs-richtext {
  margin-top: 2rem;
  padding: 1.5rem;
  background: #fff;
}
@media screen and (min-width: 897px) {
  .download .hs-richtext {
    margin-left: auto;
    width: calc(100% - 13rem);
  }
}
.download .hs_inquary_privacy {
  text-align: center;
}
@media screen and (min-width: 897px) {
  .download .hs_inquary_privacy {
    margin-top: 3rem !important;
  }
}
@media screen and (max-width: 896px) {
  .download .hs_inquary_privacy {
    margin-top: 2rem !important;
  }
}
.download .hs_inquary_privacy .hs-error-msgs {
  display: none !important;
}
.download .hs-form-booleancheckbox-display {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem;
}
.download .hs-form-booleancheckbox-display > span {
  color: #fff;
}
.download .hs_error_rollup {
  margin-top: 1.5rem;
  text-align: center;
}
.download .hs_error_rollup .hs-error-msgs label {
  display: inline-block;
  padding: 1rem 1.5rem;
  color: red;
  background: #fff;
}
.download .hs_submit {
  max-width: 80rem;
}
@media screen and (min-width: 897px) {
  .download .hs_submit {
    margin: 3rem auto 0;
  }
}
@media screen and (max-width: 896px) {
  .download .hs_submit {
    margin: 2rem auto 0;
  }
}
.download .hs_submit .actions {
  position: relative;
  border-radius: 9999px;
  width: 100%;
  overflow: hidden;
}
.download .hs_submit .actions::before {
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  aspect-ratio: 45/52;
  background: url(../img/service/mugen-asp/icon_formbtn.png) no-repeat center/contain;
}
@media screen and (min-width: 897px) {
  .download .hs_submit .actions::before {
    left: 10%;
    width: clamp(2.75rem, 5.625%, 4.5rem);
  }
}
@media screen and (max-width: 896px) {
  .download .hs_submit .actions::before {
    left: 2rem;
    width: 2.25rem;
  }
}
.download .hs-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 9999px;
  width: 100%;
  border: none;
  color: #fff;
  font-weight: 500;
  background: -webkit-gradient(linear, right top, left top, from(#39c7eb), to(#009aff));
  background: linear-gradient(to left, #39c7eb, #009aff);
  cursor: pointer;
}
@media screen and (min-width: 897px) {
  .download .hs-button {
    padding: 1.5rem;
    height: 10rem;
    font-size: clamp(2.2rem, 1.75vw, 2.8rem);
  }
}
@media screen and (max-width: 896px) {
  .download .hs-button {
    padding: 1rem 1rem 1rem 3rem;
    height: 6rem;
    font-size: 1.4rem;
  }
}
@media (hover: hover) {
  .download .hs-button:hover {
    opacity: 0.7;
  }
}

.sideBtn {
  margin-bottom: 1rem !important;
}

.sideSubBtn__list {
  margin-bottom: 2rem;
}

.sideSubBtn__item:not(:first-of-type) {
  margin-top: 1rem;
}

.sideSubBtn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 0.6rem;
  padding: 1rem;
  height: 7rem;
  line-height: 1.3 !important;
  text-align: center;
  color: #fff !important;
  font-size: 1.6rem;
  background: #006ebe;
}
@media (hover: hover) {
  .sideSubBtn:hover {
    opacity: 0.7;
  }
}

/* ------------------------------
- sp__cta
------------------------------ */
.sp__cta{
  display: none;
}

@media (max-width: 896px) {
  .sp__cta {
    display: block;
    padding: 1rem;
    background-color: #002851;
  }

  .sp_cta_btn_download{
    margin-bottom: 1rem;
  }

  .cta__flex{
    display: flex;
    justify-content: space-between;
  }
  .cta__flex li{
    width: 49%;
  }

  .sp__cta li a,
  .sp__cta li a img{
    width: 100%;
  height: auto;
  }
}