@charset "UTF-8";
/*
    Template: swell
    Theme Name: COMMON Header Footer for SWELL
    Theme URI: https://common.legal/
    Description: common.legalと共通のヘッダー・フッターを使用する専用子テーマ
    Version: 2.0.0
    Author: COMMON
    Author URI: https://common.legal/
    Text Domain: common-swell-child
    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* Based on SWELL CHILD by LOOS WEB STUDIO (GPL).
 * Scope the public site's reset to its header and mobile menu.
 * Pixel values below preserve its 16px rem baseline even when SWELL changes
 * the article/root font size. Source: php-main-page/common/css/header.css.
 */
:where(#common-site-header, #sp-header) {
  color: #000;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
  overflow-wrap: normal;
  word-break: normal;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
:where(#common-site-header, #sp-header),
:where(#common-site-header, #sp-header) *,
:where(#common-site-header, #sp-header)::before,
:where(#common-site-header, #sp-header)::after,
:where(#common-site-header, #sp-header) *::before,
:where(#common-site-header, #sp-header) *::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}
:where(#common-site-header, #sp-header) * {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
:where(#common-site-header, #sp-header) a {
  color: inherit;
  background-color: transparent;
  text-decoration: none;
}
:where(#common-site-header, #sp-header) ul {
  list-style: none;
}
:where(#common-site-header, #sp-header) img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
:where(#common-site-header, #sp-header) button {
  appearance: none;
  -webkit-appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: inherit;
  cursor: pointer;
}
:is(#common-site-header, #sp-header) .line_btn.mobile {
  padding: 12px 0;
}
:is(#common-site-header, #sp-header) .line_btn span.person {
  font-size: 12px;
  line-height: 1;
}

/* Public site header */
#common-site-header {
  display: flex;
  align-items: center;
  width: 100%;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 99;
}
@media screen and (min-width: 768px) {
  #common-site-header {
    padding-left: 24px;
  }
}
@media screen and (max-width: 1300px) {
  #common-site-header {
    justify-content: space-between;
  }
}
@media screen and (max-width: 767px) {
  #common-site-header {
    padding-left: 16px;
  }
}

/* logo */
#common-site-header .logo {
  width: 104px;
}
#common-site-header .logo img {
  display: flex;
  width: 100%;
  height: auto;
}

/* pc nav */
@media screen and (min-width: 1301px) {
  #common-site-header nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  #common-site-header nav a {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1;
  }
  #common-site-header nav a + a {
    margin-left: 24px;
  }
  #common-site-header nav a.active {
    color: #183d8d;
  }
}
@media screen and (max-width: 1300px) {
  #common-site-header nav {
    display: none;
  }
}


/* btn */
#common-site-header .btn_area {
  display: flex;
  margin-left: 32px;
}
#common-site-header .btn_area a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 64px;
  padding: 0 32px 0 34px;
}
#common-site-header .btn_area a span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}
#common-site-header .btn_area a span img {
  display: block;
  margin-right: 10px;
}
#common-site-header .btn_area .contact_btn {
  background: #f2f2f2;
  color: #183D8D;
}
#common-site-header .btn_area .contact_btn .number {
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .04em;
}
#common-site-header .btn_area .contact_btn .time {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .02em;
}
#common-site-header .btn_area .line_btn {
  background: #183D8D;
  color: #fff;
}
#common-site-header .btn_area .line_btn span {
  letter-spacing: -.04em;
}
@media screen and (min-width: 1301px) {
  #toggle-menu {
    display: none;
  }
}
@media screen and (max-width: 1300px) {
  #common-site-header .btn_area a {
    display: none;
  }
  #toggle-menu {
    width: 64px;
    height: 64px;
    background: #183d8d;
    position: relative;
  }
  #toggle-menu span {
    display: block;
    width: 20px;
    height: 2px;
    margin: auto;
    background: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: all .2s .2s;
  }
  #toggle-menu span:before,
  #toggle-menu span:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    position: absolute;
    left: 0;
    transition: all .2s;
  }
  #toggle-menu span:before {
    top: -6px;
  }
  #toggle-menu span:after {
    bottom: -6px;
  }

  #toggle-menu.active span {
    background: #183d8d;
    transition: all .2s;
  }
  #toggle-menu.active span:before,
  #toggle-menu.active span:after {
    transition: all .2s .2s;
  }
  #toggle-menu.active span:before {
    top: 0;
    transform: rotate(45deg);
  }
  #toggle-menu.active span:after {
    bottom: 0;
    transform: rotate(-45deg);
  }
}


/* sp header */
@media screen and (max-width: 1300px) {
  #sp-header {
    width: 100%;
    height: 0;
    background: #183d8d;
    position: fixed;
    top: 64px;
    left: 0;
    z-index: 99;
    transition: all .3s;
    overflow-y: scroll;
  }
  #sp-header.active {
    height: -webkit-calc(100vh - 64px);
    height: calc(100vh - 64px);
  }

  #sp-header nav a {
    color: #fff;
  }

  #sp-header .btn_area a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 64px;
    padding: 0 32px 0 34px;
    border: 1px solid #fff;
  }
  #sp-header .btn_area a span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
  }
  #sp-header .btn_area a span img {
    display: block;
    margin-right: 10px;
  }
  #sp-header .btn_area .contact_btn {
    color: #fff;
  }
  #sp-header .btn_area .contact_btn .number {
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .04em;
  }
  #sp-header .btn_area .contact_btn .time {
    margin-top: 6px;
    font-size: 12px;
    letter-spacing: .02em;
  }
  #sp-header .btn_area .line_btn {
    background: #fff;
    color: #183d8d;
  }
  #sp-header .btn_area .line_btn span {
    letter-spacing: -.04em;
  }
  #sp-header .btn_area .line_btn span.person {
    font-size: 12px;
    line-height: 1;
    letter-spacing: .02em;
  }
}
@media screen and (max-width: 767px) {
  #sp-header .inner {
    padding: 64px 16px 32px;
  }
  #sp-header nav {
    margin: 0 -16px 32px;
  }
  #sp-header nav a {
    display: block;
    padding: 14px 32px 14px 16px;
    position: relative;
  }
  #sp-header nav a:after {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    margin: auto;
    background: url(/common/images/header_arrow.svg) center / contain no-repeat;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 16px;
  }
  #sp-header .btn_area .line_btn {
    margin-top: 12px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1300px) {
  #sp-header .inner {
    padding: 64px 50px;
  }
  #sp-header nav {
    max-width: 360px;
    margin: 0 auto 48px;
  }
  #sp-header nav a {
    display: block;
    text-align: center;
  }
  #sp-header nav a + a {
    margin-top: 24px;
  }
  #sp-header .btn_area {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #sp-header .btn_area .line_btn {
    margin-left: 12px;
  }
}
@media screen and (min-width: 1301px) {
  #sp-header {
    display: none;
  }
}
/* Public site column dropdowns */
/* --- PC用ドロップダウン --- */
#common-site-header nav {
  position: relative;
}
/* 小さな下向き矢印 */
#common-site-header nav .dropdown-trigger::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
  vertical-align: middle;
}
#common-site-header nav .dropdown-trigger.is-open::after {
  transform: rotate(-135deg) translateY(-2px);
}
/* 子メニューのボックス（標準のaタグ並びから浮유させてレイアウト干渉をゼロにする） */
#pc-column-menu {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateX(-50%) translateY(4px);
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  min-width: 150px;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  margin: 0 !important; /* 隣接セレクタ等の余白を打ち消す */
}
#pc-column-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* 子メニュー内のリンク調整 */
#pc-column-menu a {
  display: block !important;
  width: 100% !important;
  padding: 10px 20px !important;
  margin: 0 !important;
  color: #333333 !important;
  font-size: 14px !important;
  text-align: center !important;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
#pc-column-menu a::after,
#pc-column-menu a::before {
  display: none !important;
}
#pc-column-menu a:hover {
  background-color: #f5f7fa;
}

/* --- スマホ（#sp-header）用アコーディオン --- */
#sp-header nav .sp-dropdown-trigger::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}
#sp-header nav .sp-dropdown-trigger.is-open::after {
  transform: rotate(-135deg) translateY(-2px);
}
#sp-column-menu {
  display: none;
  width: 100%;
  padding-left: 1em;
  background: rgba(255, 255, 255, 0.08);
}
#sp-column-menu.is-open {
  display: block;
}

/* Keep the public navigation below WordPress's toolbar when logged in. */
#common-site-header {
  top: var(--common-adminbar-offset, 0px);
}
@media screen and (max-width: 1300px) {
  #sp-header {
    top: calc(64px + var(--common-adminbar-offset, 0px));
  }
  #sp-header.active {
    height: calc(100vh - 64px - var(--common-adminbar-offset, 0px));
  }
}