@charset "UTF-8";
.mod-freeHTML #brotherhack h1,
.mod-freeHTML #brotherhack h2,
.mod-freeHTML #brotherhack h3 {
  margin: 0;
  font-size: 100%;
}
.mod-freeHTML #brotherhack ul:not(.st-contents ul):not(.l-menu_sp ul) {
  margin: 0;
}
.mod-freeHTML #brotherhack ul:not(.st-contents ul) {
  padding: 0;
}
.mod-freeHTML #brotherhack ul {
  list-style: none;
}
.mod-freeHTML #brotherhack p {
  margin: 0;
}
.mod-freeHTML #brotherhack img {
  height: auto;
  max-width: 100%;
  width: auto;
}
.mod-freeHTML #brotherhack img[src$=".svg"] {
  width: 100%;
}
.mod-freeHTML #brotherhack sup {
  font-size: 0.714em;
}
.mod-freeHTML #brotherhack *:not(.st-contents) {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.mod-freeHTML #brotherhack *:not(.st-contents)::after, .mod-freeHTML #brotherhack *:not(.st-contents)::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.mod-freeHTML #brotherhack input[type=text] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: 0;
  border: none;
  height: 1.5em;
}
.mod-freeHTML #brotherhack table {
  border-collapse: collapse;
  border: none;
  border-spacing: 0;
}
.mod-freeHTML #brotherhack th, .mod-freeHTML #brotherhack td {
  vertical-align: top;
  border: none;
  font-weight: normal;
  text-align: left;
}
.mod-freeHTML #brotherhack caption {
  text-align: left;
}

/*--------------------------------------------------

ページ内共通(common)

--------------------------------------------------*/
.mod-freeHTML #brotherhack {
  width: 100%;
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, "Yu Gothic", YuGothic, "MS PGothic", Osaka, arial, sans-serif;
  font-size: 10px;
  color: #000000;
  text-align: left;
  position: relative;
}
@media (min-width: 641px) {
  .mod-freeHTML #brotherhack {
    width: 100%;
    margin: 0 auto;
  }
}
.mod-freeHTML #brotherhack * {
  min-height: 0vw; /* Safari clamp関数対策 */
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack .u-pc {
    display: none;
  }
}
@media (min-width: 641px) {
  .mod-freeHTML #brotherhack .u-sp {
    display: none;
  }
}
.mod-freeHTML #brotherhack .l-inner {
  width: 75%;
  max-width: 960px;
  margin: 0 auto;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack .l-inner {
    width: 86%;
    max-width: 335px;
  }
}
.mod-freeHTML #brotherhack .iBlock {
  display: inline-block;
}
.mod-freeHTML #brotherhack #lower-bradmin {
  color: #000000;
  letter-spacing: 0.04em;
}
.mod-freeHTML #brotherhack #lower-bradmin .l-tit--bgyellow {
  position: relative;
  font-size: clamp(14px, 2.1875vw, 28px);
  font-weight: bold;
  text-align: center;
  z-index: 1;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .l-tit--bgyellow {
    font-size: clamp(10px, 4.8vw, 18px);
  }
}
.mod-freeHTML #brotherhack #lower-bradmin .l-tit--bgyellow::before {
  position: absolute;
  content: "";
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8em;
  height: 0.8em;
  background-color: #FFFF96;
  border-radius: 99px;
  z-index: -1;
}
.mod-freeHTML #brotherhack #lower-bradmin .l-tit--bgblue {
  position: relative;
  font-size: clamp(10px, 1.640625vw, 21px);
  font-weight: bold;
  text-align: center;
  z-index: 1;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .l-tit--bgblue {
    font-size: clamp(10px, 4.2666666667vw, 20px);
  }
}
.mod-freeHTML #brotherhack #lower-bradmin .l-tit--bgblue::before {
  position: absolute;
  content: "";
  top: 75%;
  left: 50%;
  width: 19em;
  height: 0.6em;
  background-color: #C5D5F5;
  transform: translate(-50%, -50%);
  border-radius: 99px;
  z-index: -1;
}
.mod-freeHTML #brotherhack #lower-bradmin .l-lead__txt {
  margin-top: 1em;
  font-size: clamp(10px, 1.640625vw, 21px);
  font-weight: bold;
  text-align: center;
  line-height: 300%;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .l-lead__txt {
    font-size: clamp(10px, 3.7333333333vw, 18px);
    line-height: 200%;
  }
}
.mod-freeHTML #brotherhack #lower-bradmin .l-lead__txt__box {
  display: inline;
  border-bottom: 3px dashed #C5D5F5;
  padding-bottom: 3px;
}
.mod-freeHTML #brotherhack #lower-bradmin .l-download__btn {
  display: block;
  width: 35.1666666667%;
  max-width: 422px;
  margin: 1.5em auto 0;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .l-download__btn {
    width: 80%;
    max-width: 300px;
    margin: 3em auto 0;
  }
}
.mod-freeHTML #brotherhack #lower-bradmin .l-tit--scene {
  display: inline-block;
  width: max-content;
  color: #FFFFFF;
  background-color: #407BD8;
  font-size: clamp(10px, 1.40625vw, 18px);
  font-weight: bold;
  border-radius: 0 0 10px 0;
  padding: 0.2em 1.4em 0.2em 0.7em;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .l-tit--scene {
    font-size: clamp(10px, 2.9333333333vw, 13px);
  }
}

/*--------------------------------------------------

ヘッダー（header）

--------------------------------------------------*/
.mod-freeHTML #brotherhack #lower-bradmin .p-header img {
  height: 100%;
  max-width: 100%;
  width: 100%;
  object-fit: cover;
}

/*--------------------------------------------------

BRAdminとは（about）

--------------------------------------------------*/
.mod-freeHTML #brotherhack #lower-bradmin .p-about {
  padding: 2em 0 3em;
  background-color: #F0F7FF;
}
.mod-freeHTML #brotherhack #lower-bradmin .p-about__ann {
  margin-top: 3em;
  font-size: clamp(7px, 0.78125vw, 10px);
  font-weight: bold;
  text-align: center;
  line-height: 140%;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-about__ann {
    font-size: clamp(6px, 2.1333333333vw, 8px);
  }
}
.mod-freeHTML #brotherhack #lower-bradmin .p-about__img {
  max-width: 960px;
  margin: 3em auto 0;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-about__img {
    max-width: 335px;
  }
}

/*--------------------------------------------------

そのお悩み、BRAdminで解決できます！（worry）

--------------------------------------------------*/
.mod-freeHTML #brotherhack #lower-bradmin .p-worry__tit {
  margin-top: 1em;
}
.mod-freeHTML #brotherhack #lower-bradmin .p-worry__img {
  max-width: 960px;
  margin: 3em auto 0;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-worry__img {
    max-width: 335px;
  }
}
.mod-freeHTML #brotherhack #lower-bradmin .p-worry__txt {
  margin-top: 1em;
  font-size: clamp(10px, 1.40625vw, 18px);
  font-weight: bold;
  text-align: center;
  line-height: 180%;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-worry__txt {
    font-size: clamp(10px, 3.7333333333vw, 18px);
  }
}

/*--------------------------------------------------

さまざまな“お困りシーン”に役立つ機能をご紹介（menu）

--------------------------------------------------*/
.mod-freeHTML #brotherhack #lower-bradmin .p-menu__tit {
  margin-top: 3em;
}
.mod-freeHTML #brotherhack #lower-bradmin .p-menu__tit::before {
  width: 23em;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-menu__tit::before {
    width: 14em;
  }
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-menu .p-menu__tit.u-sp + .p-menu__tit.u-sp {
    margin-top: 0;
  }
  .mod-freeHTML #brotherhack #lower-bradmin .p-menu .p-menu__tit.u-sp + .p-menu__tit.u-sp::before {
    width: 10em;
  }
}
.mod-freeHTML #brotherhack #lower-bradmin .p-menu__wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 2em 2em;
  margin-top: 1.5em;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-menu__wrap {
    gap: 1.5em 1.5em;
  }
}
.mod-freeHTML #brotherhack #lower-bradmin .p-menu__box {
  display: flex;
  flex-direction: column;
  position: relative;
  width: calc(25% - 1.5em);
  background-color: #F0F7FF;
  border-radius: 5px;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-menu__box {
    width: calc(50% - 0.75em);
  }
}
.mod-freeHTML #brotherhack #lower-bradmin .p-menu__box:nth-of-type(7) .p-menu__box__txt {
  margin: auto 1em;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-menu__box:nth-of-type(7) .p-menu__box__txt {
    margin: auto 0.9em;
  }
}
.mod-freeHTML #brotherhack #lower-bradmin .p-menu__box::before {
  position: absolute;
  content: "";
  top: 2%;
  left: 2%;
  width: 98%;
  height: 98%;
  box-shadow: 2px 2px #2B326A;
  border-radius: 7px;
  z-index: -1;
}
.mod-freeHTML #brotherhack #lower-bradmin .p-menu__box__txt {
  font-size: clamp(10px, 1.09375vw, 14px);
  font-weight: normal;
  margin: 1em;
  line-height: 150%;
  letter-spacing: 0;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-menu__box__txt {
    font-size: clamp(10px, 2.9333333333vw, 13px);
    line-height: 130%;
    height: 4.5em;
  }
}
.mod-freeHTML #brotherhack #lower-bradmin .p-menu__box__link {
  position: relative;
  display: block;
  font-size: clamp(10px, 1.09375vw, 14px);
  font-weight: bold;
  text-align: center;
  color: #2B326A;
  background-color: #C5D5F5;
  border-radius: 0 0 5px 5px;
  padding-top: 0.8em;
  padding-bottom: 1.5em;
  margin-top: auto;
  line-height: 100%;
}
.mod-freeHTML #brotherhack #lower-bradmin .p-menu__box__link::before {
  position: absolute;
  content: "";
  bottom: 20%;
  left: calc(50% - 6.5px);
  width: 8px;
  height: 1.5px;
  background-color: #2B326A;
  border-radius: 999px;
  transform: rotateZ(45deg);
}
.mod-freeHTML #brotherhack #lower-bradmin .p-menu__box__link::after {
  position: absolute;
  content: "";
  bottom: 20%;
  right: calc(50% - 6.5px);
  width: 8px;
  height: 1.5px;
  background-color: #2B326A;
  border-radius: 999px;
  transform: rotateZ(315deg);
}

/*--------------------------------------------------

BRAdminのダウンロードはこちら（download）

--------------------------------------------------*/
.mod-freeHTML #brotherhack #lower-bradmin .p-download {
  position: absolute;
  transform: translateY(70px);
  transition: transform 0.3s;
}
.mod-freeHTML #brotherhack #lower-bradmin .p-download__btn {
  display: block;
  width: 40%;
  max-width: 476px;
  margin: 0 auto;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-download__btn {
    width: 100%;
  }
}
.mod-freeHTML #brotherhack #lower-bradmin .p-download.js-fixed {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 99;
  background-color: #0050B4;
  transform: translateY(0px);
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-download.js-fixed {
    background-color: #FFFFFF;
  }
}

/*--------------------------------------------------

シーンの一覧（scene）

--------------------------------------------------*/
.mod-freeHTML #brotherhack #lower-bradmin .p-scene {
  position: relative;
  margin-top: 10em;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-scene {
    margin-top: 3em;
  }
}
.mod-freeHTML #brotherhack #lower-bradmin .p-scene__box {
  padding-top: 80px;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-scene__box {
    padding-top: 40px;
  }
}
.mod-freeHTML #brotherhack #lower-bradmin .p-scene__box__tit__wrap {
  position: relative;
  display: flex;
}
.mod-freeHTML #brotherhack #lower-bradmin .p-scene__box__tit {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  border-bottom: 2px solid #FFFFFF;
  border-right: 2px solid #FFFFFF;
  font-size: clamp(14px, 2.109375vw, 27px);
  margin-right: 1em;
  line-height: 140%;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-scene__box__tit {
    font-size: clamp(10px, 3.4666666667vw, 17px);
    border-bottom: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    margin-right: 0.7em;
    padding: 0.2em 1em 0.2em 0.6em;
  }
}
.mod-freeHTML #brotherhack #lower-bradmin .p-scene__box__read {
  width: 100%;
  font-size: clamp(10px, 1.40625vw, 18px);
  font-weight: bold;
  color: #FFFFFF;
  padding: 1em 1em 1em 10em;
  background-color: #407BD8;
  border-radius: 5px;
  line-height: 140%;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-scene__box__read {
    font-size: clamp(10px, 3.2vw, 15px);
    border-radius: 0;
    padding: 0.7em 0.7em 0.7em 6.5em;
    letter-spacing: 0;
  }
}
.mod-freeHTML #brotherhack #lower-bradmin .p-scene__box__wrap {
  display: flex;
  margin-top: 1em;
}
.mod-freeHTML #brotherhack #lower-bradmin .p-scene__box__img {
  width: 31.0416666667%;
  flex: 0 0 auto;
  max-width: 298px;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-scene__box__img {
    width: 44.776119403%;
    max-width: 150px;
  }
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-scene #scene01 {
    padding-top: 3em;
  }
}
.mod-freeHTML #brotherhack #lower-bradmin .p-scene #scene10 .p-scene__box__read,
.mod-freeHTML #brotherhack #lower-bradmin .p-scene #scene11 .p-scene__box__read {
  padding: 1em 1em 1em 11em;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-scene #scene10 .p-scene__box__read,
  .mod-freeHTML #brotherhack #lower-bradmin .p-scene #scene11 .p-scene__box__read {
    padding: 0.7em 0.7em 0.7em 7em;
  }
}
.mod-freeHTML #brotherhack #lower-bradmin .p-scene #other01 {
  padding-bottom: 8em;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-scene #other01 {
    padding-bottom: 0em;
  }
}
.mod-freeHTML #brotherhack #lower-bradmin .p-scene #other01 .p-scene__box__read {
  padding: 1em 1em 1em 9em;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-scene #other01 .p-scene__box__read {
    padding: 0.7em 0.7em 0.7em 6em;
  }
}
.mod-freeHTML #brotherhack #lower-bradmin .p-scene__area {
  width: 100%;
  margin-left: 0.5em;
}
.mod-freeHTML #brotherhack #lower-bradmin .p-scene__area__img {
  width: 22.6356589147%;
  max-width: 146px;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-scene__area__img {
    width: 66.6666666667%;
    max-width: 120px;
  }
}
.mod-freeHTML #brotherhack #lower-bradmin .p-scene__area__tit {
  margin-left: 0.6em;
  font-size: clamp(12px, 1.875vw, 24px);
  font-weight: bold;
  color: #2B326A;
  border-bottom: 2px solid #407BD8;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-scene__area__tit {
    margin-left: 0.4em;
    font-size: clamp(10px, 3.7333333333vw, 18px);
    line-height: 140%;
  }
}
.mod-freeHTML #brotherhack #lower-bradmin .p-scene__area__txt {
  margin-top: 1em;
  padding: 0 0.3em;
  font-size: clamp(10px, 1.40625vw, 18px);
  font-weight: normal;
  line-height: 200%;
  letter-spacing: 0;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-scene__area__txt {
    margin-top: 0.5em;
    padding: 0;
    font-size: clamp(10px, 3.2vw, 15px);
    line-height: 150%;
  }
}
.mod-freeHTML #brotherhack #lower-bradmin .p-scene__area__txt__mid, .mod-freeHTML #brotherhack #lower-bradmin .p-scene__area__txt__mid--i {
  padding: 0 0.3em;
  font-size: clamp(10px, 1.09375vw, 14px);
  font-weight: normal;
  line-height: 140%;
  letter-spacing: 0;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-scene__area__txt__mid, .mod-freeHTML #brotherhack #lower-bradmin .p-scene__area__txt__mid--i {
    font-size: clamp(10px, 2.9333333333vw, 13px);
  }
}
.mod-freeHTML #brotherhack #lower-bradmin .p-scene__area__txt__mid--i {
  text-indent: -1em;
  padding-left: 1em;
}
.mod-freeHTML #brotherhack #lower-bradmin .p-scene__area__txt__wrap {
  margin-left: 0.6em;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-scene__area__txt__wrap {
    margin-left: 0em;
  }
}
.mod-freeHTML #brotherhack #lower-bradmin .p-scene__area .p-scene__area__txt + .p-scene__area__txt__mid,
.mod-freeHTML #brotherhack #lower-bradmin .p-scene__area .p-scene__area__txt + .p-scene__area__txt__mid--i {
  margin-top: 1em;
}

/*--------------------------------------------------

リード文（lead）

--------------------------------------------------*/
.mod-freeHTML #brotherhack #lower-bradmin .p-lead__txt {
  margin-top: 2em;
  font-size: clamp(10px, 1.40625vw, 18px);
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-lead__txt {
    margin-top: 4em;
    font-size: clamp(10px, 3.7333333333vw, 18px);
  }
}
.mod-freeHTML #brotherhack #lower-bradmin .p-lead__btn {
  margin: 5em auto 10em;
}
@media screen and (max-width: 640px) {
  .mod-freeHTML #brotherhack #lower-bradmin .p-lead__btn {
    margin: 4em auto 5em;
  }
}

/*--------------------------------------------------

ページ上部に戻るボタン 追加css

--------------------------------------------------*/
body .st-wrapper footer .st-backToTopFixed {
  z-index: 999;
}

/* ========================================

下部バナー リセットcss

========================================*/
.mod-freeHTML #brotherhack .mod-inIcon {
  vertical-align: middle;
  margin: -0.25em 0 0 10px;
  height: 20px;
  width: auto !important;
}

.mod-freeHTML #brotherhack .mod-bannerList.mod-bannerList-grid4 li img {
  width: 100%;
}/*# sourceMappingURL=bradmin.css.map */