/* =========================================================
   Ciel Header Design
   Site-specific design layer
   Bootstrapに依存せず、Welina Headerの型へCielデザインを載せる
========================================================= */

/* =========================================================
   Header Base
========================================================= */

#fixed_header {
  height: 80px;
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

#fixed_header .l-header__inner {
  position: relative;
  width: min(100% - 48px, 1170px);
  height: 80px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* =========================================================
   Logo
========================================================= */

#fixed_header .l-header__logo {
  margin: 0;
}

#fixed_header .l-header__logoLink {
  display: inline-block;
  text-decoration: none;
}

#fixed_header .l-header__logoImage {
  display: block;
  width: auto;
  max-width: 280px;
  height: 50px;
  margin-top: 5px;
}

/* =========================================================
   PC Header
========================================================= */

@media (min-width: 768px) {

  #fixed_header {
    background-image:
      url("../img/header_blue.png"),
      url("../img/header_red.png");
    background-repeat: no-repeat;
    background-position:
      left top,
      right top;
    background-size:
      auto 100%,
      auto 100%;
  }

  #fixed_header .l-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #fixed_header .l-header__logo {
    flex: 0 0 auto;
  }

  #fixed_header .l-header__nav--pc {
    flex: 1 1 auto;
  }

  #fixed_header .l-header__menu {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    height: 80px;
    margin: 0;
    padding: 0 50px 0 0;
    list-style: none;
  }

  #fixed_header .l-header__menu > li {
    display: block;
  }

  #fixed_header .l-header__menu > li > a {
    position: relative;
    display: block;
    height: 40px;
    padding-top: 40px;
    margin: 0 0 0 25px;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
  }

  #fixed_header .l-header__menu > li > a::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 5px;
    background: #1d2088;
    transform: scale(0, 1);
    transform-origin: center top;
    transition: transform .5s;
  }

  #fixed_header .l-header__menu > li > a:hover::after,
  #fixed_header .l-header__menu > li.current_page_item > a::after,
  #fixed_header .l-header__menu > li.current-menu-item > a::after {
    transform: scale(1, 1);
  }

  #fixed_header .l-header__actions {
    display: none;
  }
}

/* =========================================================
   SP Header
========================================================= */

@media (max-width: 767px) {

  #fixed_header {
    height: 70px;
  }

  #fixed_header .l-header__inner {
    width: 100%;
    height: 70px;
    margin: 0;
  }

  #fixed_header .l-header__logo {
    text-align: center;
  }

  #fixed_header .l-header__logoImage {
    max-width: 190px;
    height: 52px;
    margin: 9px auto 0;
  }

  /* -------------------------------------------------------
     Menu Toggle Button
  ------------------------------------------------------- */

  #fixed_header .l-header__toggle {
    cursor: pointer;
    width: 50px;
    height: 70px;
    padding-top: 5px;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    font-size: 12px;
    line-height: 150%;
    background: #1d2088;
    background: linear-gradient(to right, #1d2088 0%, #1d2088 88%, #0f0e3f 100%);
  }

  #fixed_header .l-header__toggle::after {
    content: "Menu";
    display: block;
    margin-top: 2px;
  }

  #fixed_header .l-header__toggleLine {
    width: 26px;
    height: 3px;
    margin: 6px auto 0;
    background: #fff;
    transition:
      transform .25s ease,
      opacity .25s ease;
  }

  #fixed_header .l-header__toggleLine--top {
    margin-top: 15px;
  }

  #fixed_header .l-header__spToggle:checked ~ .l-header__actions .l-header__toggleLine--top {
    transform: translateY(9px) rotate(45deg);
  }

  #fixed_header .l-header__spToggle:checked ~ .l-header__actions .l-header__toggleLine--middle {
    opacity: 0;
  }

  #fixed_header .l-header__spToggle:checked ~ .l-header__actions .l-header__toggleLine--bottom {
    transform: translateY(-9px) rotate(-45deg);
  }

  /* -------------------------------------------------------
     Phone Button
  ------------------------------------------------------- */

  #fixed_header .l-header__phone {
    cursor: pointer;
    width: 50px;
    height: 70px;
    padding-top: 5px;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    font-size: 12px;
    line-height: 150%;
    background: #e60013;
    background: linear-gradient(to right, #aa0002 0%, #e60013 12%, #e60013 100%);
  }

  #fixed_header .l-header__phoneIcon::before {
    content: "\f095";
    display: block;
    margin-top: 11px;
    font-family: FontAwesome;
    font-size: 26px;
    line-height: 1;
  }

  #fixed_header .l-header__phoneText {
    display: block;
    margin-top: 2px;
  }

  /* -------------------------------------------------------
     SP Menu
  ------------------------------------------------------- */

  #fixed_header .l-header__nav--sp {
    top: 70px;
    left: 0;
    z-index: 9998;
  }

  #fixed_header .l-header__nav--sp .l-header__menu {
    width: 100%;
  }

  #fixed_header .l-header__nav--sp .l-header__menu > li > a {
    display: block;
    padding: 20px 0;
    background: rgba(29, 32, 136, 0.9);
    color: #fff;
    border: solid #1d2088;
    border-width: 1px 0 0 0;
    text-align: center;
    text-decoration: none;
  }

  #fixed_header .l-header__nav--sp .l-header__menu > li:first-child > a {
    border-width: 0;
  }

  #fixed_header .l-header__nav--sp .l-header__menu > li > a:hover {
    background: #1d2088;
  }
}