@charset "utf-8";

/* ======================================================
 * special_layout_sp.css
 * ------------------------------------------------------
 * @media only screen and (max-width: 767px)
 * - Common
 * - Boogieboard Layout
 * -  >>> Header
 * -  >>> Main
 * -  >>> Footer
 * -  >>> Other
 * - Hitotoki Layout
 * -  >>> Header
 * -  >>> Main
 * -  >>> Footer
 * -  >>> Other
 * - Clearfix
 * Media Queries
====================================================== */

@media only screen and (max-width: 767px) {
  /* ------------------------------------------------------
   * Common
  ------------------------------------------------------ */
  /* ----- font ----- */

  /* ----- a ----- */
  
  /* ----- opacity ----- */
  
  /* ----- transition ----- */
  
  /* ----- sprite ----- */
  
  
  /* ------------------------------------------------------
   * Boogieboard Layout
  ------------------------------------------------------ */
  
  /* Header
  ------------------------------------------------------ */
  .bb-Header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 56px;
    padding: 0 15px;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
  }
  .bb-HeaderBody > *:first-child {
    margin-top: 0 !important;
  }
  /* ----- bb-header-identity ----- */
  .bb-header-identity {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    height: 55px;
    line-height: 1;
  }
  .bb-header-identity .identity_logo_1 img {
    width: 190px;
  }
  .bb-header-identity .identity_logo_2 img {
    width: 95px;
  }

  /* Main
  ------------------------------------------------------ */
  .bb-Main {
    padding-top: 56px;
  }
  /* ----- bb-pageGuide ----- */
  .bb-pageGuide {
    position: relative;
    height: 35px;
  }
  /* social-button */
  .bb-pageGuide .social-button {
    position: absolute;
    bottom: 0;
    right: 15px;
  }
  .bb-pageGuide .social-button > li {
    float: left;
    margin-left: 10px;
    line-height: 1;
  }
  
  /* ----- bb-container ----- */
  .bb-container {
    overflow: hidden;
    padding: 15px 15px 40px;
  }
  /* bb-contents */
  .bb-contents > *:first-child,
  .bb-contents > section:first-child > [class*="heading-lv"] {
    margin-top: 0 !important;
  }
  /* ----- bb-contents-wrap ----- */
  .bb-contents-wrap > *:first-child,
  .bb-contents-wrap > section:first-child > [class*="heading-lv"] {
    margin-top: 0 !important;
  }
  
  /* Footer
  ------------------------------------------------------ */
  .bb-Footer {
    position: relative;
    padding-top: 45px;
  }
  
  /* ----- bb-footer-wrap ----- */
  .bb-footer-wrap {
    padding: 15px 15px 25px;
  }
  .bb-footer-wrap > *:first-child {
    margin-top: 0 !important;
  }
  
  /* ----- bb-footer-copyright ----- */
  .bb-footer-copyright {
    color: #777;
    font-size: 1.2rem;
    text-align: center;
  }
  
  /* ----- bb-Pagetop ----- */
  .bb-Pagetop {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 1 !important;
  }
  .bb-Pagetop a {
    display: block;
    position: relative;
    height: 45px;
    background-color: #ccc;
    text-indent: -9999em;
    outline: none;
    overflow: hidden;
  }
  .bb-Pagetop a::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -3px 0 0 -7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    content: "";
  }
  
  /* Other
  ------------------------------------------------------ */
  
  
  /* ------------------------------------------------------
   * Hitotoki Layout
  ------------------------------------------------------ */
  /* Header
  ------------------------------------------------------ */
  .hitotoki-Header {
    background-color: #fff;
  }
  .hitotoki-HeaderBody {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    height: 70px;
    padding: 0 15px;
    line-height: 1;
  }
  .hitotoki-HeaderBody > *:first-child {
    margin-top: 0 !important;
  }
  /* ----- hitotoki-header-identity ----- */
  .hitotoki-header-identity .identity_logo img {
    width: 137px;
  }
  /* ----- hitotoki-header-utility ----- */
  .hitotoki-header-utility {
    display: flex;
    align-items: center;
  }
  /* ----- hitotoki-header-social ----- */
  .hitotoki-header-social {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
  }
  .hitotoki-header-social > li + li {
    margin-left: 10px;
  }
  .hitotoki-header-social > li.social_ig img {
    width: 21px;
  }
  /* ----- hitotoki-header-ec ----- */
  .hitotoki-header-ec {
    display: flex;
    flex-wrap: wrap;
  }
  .hitotoki-header-ec + .hitotoki-header-social {
    margin-left: 25px;
  }
  .hitotoki-header-ec > li img {
    width: 21px;
  }

  /* Main
  ------------------------------------------------------ */
  /* ----- hitotoki-container ----- */
  .hitotoki-container {
    overflow: hidden;
    padding: 0 15px 25px;
  }
  /* hitotoki-contents */
  .hitotoki-contents > *:first-child,
  .hitotoki-contents > section:first-child > [class*="heading-lv"] {
    margin-top: 0 !important;
  }
  /* ----- hitotoki-contents-wrap ----- */
  .hitotoki-contents-wrap > *:first-child,
  .hitotoki-contents-wrap > section:first-child > [class*="heading-lv"] {
    margin-top: 0 !important;
  }
  
  /* Footer
  ------------------------------------------------------ */
  .hitotoki-Footer {
    background-color: #fff;
  }
  /* ----- hitotoki-footer-wrap ----- */
  .hitotoki-footer-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 10px 15px;
  }
  .hitotoki-footer-wrap > *:first-child {
    margin-top: 0 !important;
  }
  /* v2 */
  .hitotoki-footer-wrap-v2 {
    padding: 15px 15px 25px;
  }
  .hitotoki-footer-wrap-v2 > *:first-child {
    margin-top: 0 !important;
  }
  /* ----- hitotoki-footer-identity ----- */
  .hitotoki-footer-identity {
    margin-right: 35px;
  }
  .hitotoki-footer-identity .identity_logo img {
    width: 137px;
  }
  /* ----- hitotoki-footer-social ----- */
  .hitotoki-footer-social {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-items: center;
    align-items: center;
  }
  .hitotoki-footer-social > li + li {
    margin-left: 25px;
  }
  .hitotoki-footer-social > li img {
    width: 21px;
  }
  /* ----- hitotoki-footer-copyright ----- */
  .hitotoki-footer-copyright {
    font-size: 1.2rem;
    text-align: center;
  }
  
  /* Other
  ------------------------------------------------------ */
  
  /* ------------------------------------------------------
   * Clearfix
  ------------------------------------------------------ */
  .social-button::after {
    display: block;
    clear: both;
    content: "";
  }
}


/* ======================================================
 * Media Queries
====================================================== */
/***
@media only screen and (min-width: 320px) and (max-width: 767px) {
}
@media only screen and (max-width: 736px) {
}
@media only screen and (max-width: 667px) {
}
@media only screen and (max-width: 640px) {
}
@media only screen and (max-width: 568px) {
}
@media only screen and (max-width: 480px) {
}
@media only screen and (max-width: 414px) {
}
@media only screen and (max-width: 375px) {
}
@media only screen and (max-width: 360px) {
}
@media only screen and (max-width: 320px) {
}
***/