/*==========================
* Target: Global, index.vue
* Rule: MindBEMding
* Author: Rapahel-D
* Type: SSG
* Description: Fack me!(female only)
==========================*/
/*==========================
Base & Utility
==========================*/
body {
  background-color: transparent;
  color: #333; }

[data-prefix="fab"],
[data-prefix="far"],
[data-prefix="fas"] {
  margin-right: .5em; }

.logo {
  max-width: 100%;
  width: inherit; }

.sabu-taitoru {
  text-align: center; }

/*==========================
Layout
==========================*/
.l-section {
  margin-bottom: 8em; }
  .l-section:first-of-type {
    padding-top: 3em; }

.l-wrapper {
  margin: 0 auto;
  max-width: 960px;
  padding-right: 1em;
  padding-left: 1em; }

.l-side {
  padding-right: 1em;
  padding-left: 1em; }

.l-article {
  padding-top: 3em;
  padding-bottom: 3em; }

/*==========================
Component
==========================*/
.header {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  background-color: #fff;
  width: 100%;
  box-shadow: 2px 0px 2px #ccc; }

.header__wrapper,
.footer__wrapper {
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; }

.header__home-link,
.footer__home-link {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: calc(100% - 3em); }
  @media screen and (min-width: 768px) {
    .header__home-link,
    .footer__home-link {
      max-width: 400px;
      width: 100%; } }

.header__site-title,
.footer__site-title {
  width: 12em;
  font-size: 1rem;
  font-weight: bold;
  padding: 0 1em;
  display: block;
  white-space: nowrap; }

.header__logo,
.footer__logo {
  width: 50%; }
  @media screen and (min-width: 768px) {
    .header__logo,
    .footer__logo {
      width: 240px; } }

.header__toggle-btn,
.footer__toggle-btn {
  display: block;
  width: 2em;
  height: 2em;
  background-color: #fff;
  position: relative;
  box-shadow: 1px 1px 1px #ccc; }
  @media screen and (min-width: 768px) {
    .header__toggle-btn,
    .footer__toggle-btn {
      display: none; } }
  .header__toggle-btn::before, .header__toggle-btn::after,
  .footer__toggle-btn::before,
  .footer__toggle-btn::after {
    content: '';
    display: block;
    background-color: #c00;
    width: 1em;
    height: 1px; }
  .header__toggle-btn::before,
  .footer__toggle-btn::before {
    position: absolute;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 0.8em;
    left: 50%; }
  .header__toggle-btn::after,
  .footer__toggle-btn::after {
    position: absolute;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 1.2em;
    left: 50%; }

.header__nav,
.footer__nav {
  width: 100%;
  font-weight: bold;
  text-align: center;
  padding-top: 1em;
  margin-top: 1em;
  position: relative;
  border-top: 1px solid #0d2538; }
  @media screen and (min-width: 768px) {
    .header__nav,
    .footer__nav {
      display: flex;
      flex-wrap: nowrap;
      text-align: right;
      border-top-width: 0;
      margin-top: 0;
      padding-top: 0;
      width: 600px; } }
  .header__nav-link,
  .footer__nav-link {
    display: block;
    margin-bottom: 1em;
    padding-top: 1em;
    white-space: nowrap; }
    @media screen and (min-width: 768px) {
      .header__nav-link,
      .footer__nav-link {
        margin-right: 1em;
        margin-left: 1em; }
        .header__nav-link:first-of-type,
        .footer__nav-link:first-of-type {
          margin-left: 0; }
        .header__nav-link:last-of-type,
        .footer__nav-link:last-of-type {
          margin-right: 0; } }

.footer {
  background-color: #0d2538;
  color: #fff; }
  .footer__contact {
    background-color: #008350;
    padding: .5em 1em;
    text-align: right; }

/*==========================
Modules
==========================*/
.section-title {
  font-size: 4rem;
  text-align: center;
  margin-bottom: .5em;
  color: #0d2538; }
  @media screen and (min-width: 768px) {
    .section-title {
      margin-bottom: 1em; } }

.hero {
  padding-top: 68px; }
  @media screen and (min-width: 768px) {
    .hero {
      padding-top: 82px; } }
  .hero__heading {
    background-color: #0d2538;
    color: #fff;
    padding: .2em 1em;
    text-align: center;
    font-size: 1.6rem;
    padding-top: .5em;
    padding-bottom: .5em;
    line-height: 1.7; }

.info-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  line-height: 15px;
  padding-top: .5em;
  padding-bottom: .5em;
  font-size: 1.2rem;
  white-space: nowrap; }
  @media screen and (min-width: 768px) {
    .info-links {
      flex-wrap: nowrap;
      font-size: 1.4rem;
      font-weight: bold; } }
  .info-links__item {
    display: block;
    color: #3b7aad;
    width: 100%;
    margin-bottom: .5em; }
    @media screen and (min-width: 768px) {
      .info-links__item {
        margin-bottom: 0;
        text-align: center; } }
    @media screen and (min-width: 768px) {
      .info-links__item:not(:first-of-type) {
        border-left: 1px solid #0d2538; } }

.feature__list {
  width: 100%;
  margin-bottom: 2em; }
  @media screen and (min-width: 768px) {
    .feature__list {
      margin-bottom: 4em;
      padding: 0 1em;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center; } }
  .feature__list:last-of-type {
    margin-bottom: 0; }

.feature__image {
  width: 100%; }

.feature__content {
  width: 100%; }
  @media screen and (min-width: 768px) {
    .feature__content {
      padding-left: 3em; } }

.feature__title {
  text-align: center;
  margin-bottom: .5em;
  font-size: 1.8rem; }
  @media screen and (min-width: 768px) {
    .feature__title {
      font-size: 2.4rem; } }

@media screen and (min-width: 768px) {
  .feature__list:nth-of-type(2n) .feature__image {
    order: 2; } }

@media screen and (min-width: 768px) {
  .feature__list:nth-of-type(2n) .feature__content {
    padding-left: 0;
    padding-right: 3em; } }