@charset "UTF-8";

/* ------------------------------
[MEMO]
- 単位指定について
px:  絶対値で指定するときに使用（PC表示の幅や高さ、配置等）
rem: 相対値で指定するときに使用（フォントサイズやpadding等）
remはhtmlのみのフォントサイズに基づいて計算されます。
------------------------------ */

/* 全ページ共通部分 START */

/* ----------------
OPEN
---------------- */

/* スマホ 幅が 0px - 599px */
@media screen and (max-width: 599px) {
  body.menu-open {
    background-color: #b1b1b1;
    overflow-y: hidden;
  }

  body.menu-open .layout_main,
  body.menu-open .layout_footer,
  body.menu-open #footer {
    display: none;
  }
}

/* ----------------
HEADER
---------------- */

.layout_header {
  background-color: #0e2c3a;
  width: 100%;
  z-index: 199;
}

.layout_header a {
  color: #fff;
}

.layout_header .inner {
  display: flex;
  height: 100%;
}

.header-site-name {
  font-size: 1.8rem;
}

.header-menu {
  display: flex;
}

.nav-menus {
  display: flex;
}

.header-contact a {
  background-color: #d23d2a;
  text-align: center;
}

.header-contact a:hover {
  background-color: #fb5e4a;
}

.header-contact a::before {
  content: '\f0e0'; /* mail icon */
  font-family: FontAwesome, sans-serif;
  font-size: 1.8rem;
  margin-right: 0.8rem;
}

/* スマホ 幅が 0px - 599px */
@media screen and (max-width: 599px) {
  .layout_header .inner,
  .header-menu,
  .nav-menus {
    flex-direction: column;
  }

  .layout_header {
    position: relative;
    background: transparent;
  }

  body.menu-open .layout_header {
    height: auto;
  }

  .header-site-name {
    align-items: center;
    background-color: #0e2c3a;
    display: flex;
    font-size: 1.8rem;
    font-feature-settings: 'palt';
    height: 5.6rem;
    padding: 0 6.9rem 0 1.6rem;
    z-index: 2;
  }

  .header-menu {
    background-color: #374962;
    position: absolute;
    top: -310px;
    transition: all 0.4s;
    width: 100%;
    z-index: 1;
  }

  .header-menu.menu-open {
    position: relative;
    top: 0;
  }

  .nav-menu {
    border-bottom: 1px solid #8592a1;
  }

  .nav-menu a {
    box-sizing: border-box;
    display: block;
    height: 100%;
    padding: 2.1rem 4rem 2.1rem 1.6rem;
    position: relative;
    width: 100%;
  }

  .nav-menu a::after {
    content: '\f105'; /* angle-right icon */
    font-family: FontAwesome, sans-serif;
    font-size: 2.4rem;
    line-height: 1;
    margin-top: -1.1rem;
    position: absolute;
    right: 2.4rem;
    top: 50%;
  }

  .header-contact {
    margin: 3.2rem auto;
  }

  .header-contact a {
    display: inline-block;
    padding: 1.6rem 3.2rem;
    vertical-align: bottom;
  }

  /* TRIGGER TO OPEN AND CLOSE THE MENU */
  .header-menu-trigger {
    background-color: transparent;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    height: 2.4rem;
    outline: none;
    position: absolute;
    right: 1.6rem;
    top: 1.9rem;
    width: 3.7rem;
    z-index: 3;
  }

  .header-menu-trigger::after {
    color: #fff;
    content: '\f107'; /* angle-down icon */
    font-family: FontAwesome, sans-serif;
    font-size: 4rem;
    line-height: 2.4rem;
  }

  .header-menu-trigger:hover::after {
    color: #c2c8cf;
  }

  .header-menu-trigger.menu-open::after {
    content: '\f106'; /* angle-up icon */
  }

  /* BUTTON TO CLOSE THE MENU */
  .header-close-button {
    background-color: #0e2c3a;
    border: none;
    border-top: 1px solid #8592a1;
    color: #fff;
    cursor: pointer;
    font-size: 1.8rem;
    padding: 2.4rem;
    position: relative;
    text-align: center;
  }

  .header-close-button::before {
    color: #fff;
    content: '\f00d'; /* close icon */
    font-family: FontAwesome, sans-serif;
    font-size: 2.2rem;
    margin-right: 0.8rem;
  }

  .header-close-button:hover,
  .header-close-button:hover::before {
    color: #c2c8cf;
  }
}

/* PC 幅が 600px 以上 */
@media screen and (min-width: 600px) {
  .layout_header {
    height: 55px;
  }

  .layout_header a {
    line-height: 55px;
    display: block;
    height: 100%;
    padding: 0 2.4rem;
  }

  .header-menu {
    flex-grow: 1;
  }

  .header-site-name a:hover,
  .nav-menu a:hover {
    background-color: #395461;
  }

  .header-contact {
    line-height: 65px;
    margin-left: auto;
    width: 180px;
  }
}

/*
  sticky 設定
 */

@media screen and (min-width: 600px) {
  .js-is-sticky {
    /* sticky 未対応のブラウザ向けCSS */
    position: fixed;
    top: 0;
  }

  .js-is-sticky + .layout_main::before {
    /* ヘッダーが fixed で抜ける分を代わりに埋め込みます */
    content: '';
    display: block;
    height: 55px; /* ヘッダーの高さ */
    width: 100%;
  }

  @supports (position: sticky) or (position: -webkit-sticky) {
    .layout_header {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
    }

    .js-is-sticky + .layout_main::before {
      display: none;
    }
  }
}

/* sticky 設定 ここまで */

/* ----------------
FOOTER
---------------- */

/* フッターお問い合わせ */

.layout_footer-contact {
  color: #fff;
  text-align: center;
}

.footer-contact-head {
  border-left: 1px solid #9e9e9e;
  border-right: 1px solid #9e9e9e;
  display: inline-block;
  font-size: 3.2rem;
  margin-bottom: 0;
  text-shadow: 0 0 6px #444;
}

.footer-contact-sub-head {
  color: #fb5e4a;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1;
  margin: 1.6rem 0;
}

.footer-contact-copy {
  text-shadow: 0 0 6px #444;
}

.footer-contact-button a {
  color: inherit;
  background-color: #d23d2a;
  border-radius: 4px;
  display: inline-block;
}

.footer-contact-button a:hover {
  background-color: #fb5e4a;
}

/* スマホ 幅が 0px - 599px */
@media screen and (max-width: 599px) {
  .layout_footer-contact {
    background: url(../../partners/common/images/contact-img_sp.png) top center no-repeat;
    background-size: cover;
    padding: 3.2rem 1.6rem;
  }

  .footer-contact-head {
    padding: 0 3.2rem;
  }

  .footer-contact-copy {
    text-align: left;
    line-height: 2;
  }

  .footer-contact-button {
    margin-top: 3.2rem;
  }

  .footer-contact-button a {
    padding: 1.6rem 9.6rem;
  }
}

/* PC 幅が 600px 以上 */
@media screen and (min-width: 600px) {
  .layout_footer-contact {
    background: url(../../partners/common/images/contact-img_pc.png) top center no-repeat;
    background-size: cover;
    padding: 55px 0;
  }

  .footer-contact-head {
    padding: 0 4.8rem;
  }

  .footer-contact-copy {
    line-height: 2.5;
  }

  .footer-contact-button {
    margin-top: 4.8rem;
  }

  .footer-contact-button a {
    padding: 1.6rem 6.4rem;
  }
}

/* さくらインターネットパートナーネットワークとは */

.layout_footer-partners-network {
  background-color: #f1f1f1;
}

.footer-partners-network {
  background-color: #fff;
  border: 1px solid #e0e0e0;
}

.footer-partners-network::before {
  content: url(../../partners/common/images/sipn_logo.svg);
  display: block;
}

.footer-partners-network-head {
  color: #0e2c3a;
  font-size: 2.4rem;
  margin-bottom: 1.6rem;
}

.footer-partners-network-head::after {
  border-bottom: 3px solid #d23d2a;
  content: '';
  display: block;
  margin-top: 1.6rem;
  width: 7.2rem;
}

.footer-partners-network-description {
  line-height: 2;
}

.footer-partners-network-link {
  line-height: 2;
  margin-top: 3.2rem;
}

.footer-partners-network-link a {
  color: #5596c8;
}

.footer-partners-network-link a:hover {
  color: #88b5d8;
}

.footer-partners-network-link a::after {
  content: '\f054'; /* > icon */
  font-family: FontAwesome, sans-serif;
  margin-left: 0.8rem;
}

/* スマホ 幅が 0px - 599px */
@media screen and (max-width: 599px) {
  .layout_footer-partners-network {
    padding: 4.8rem 1.6rem;
  }

  .footer-partners-network {
    padding: 3.2rem 1.6rem 1.6rem;
  }

  .footer-partners-network::before {
    margin: 0 auto 1.6rem;
    max-width: 220px;
    width: 100%;
  }

  .footer-partners-network-link {
    text-align: center;
  }
}

/* PC 幅が 600px 以上 */
@media screen and (min-width: 600px) {
  .layout_footer-partners-network {
    padding: 70px 0;
  }

  .footer-partners-network {
    padding: 42px 39px 42px 322px;
    position: relative;
  }

  .footer-partners-network::before {
    left: 60px;
    position: absolute;
    top: 42px;
    width: 200px;
  }
}

.layout_main {
  display: block;
  margin-bottom: 70px;
}

/* 全ページ共通部分 END */