@charset "utf-8";

/*
* Globals
* Common parts (header)
* Common parts (footer)
* Common parts (breadcrumb)
*/

/* タブレットサイズでメニューを切り替える */
@media (max-width: 991px) {

/* ==================================================

	Common parts (header)

================================================== */

header {
  padding: 40px 0;
}

/* header-logo
-------------------------------------------------- */
.header-logo {
  margin: 0;
}

/* navigation
-------------------------------------------------- */
.nav-list {
  display: none;
  width: auto;
}
.nav-list li {
  display: block;
}
.nav-list a {
  display: inline-block;
  margin-top: 3px; /* paddingではなく、marginを追加して行間を調整する */
  margin-bottom: 3px;
}
/* アイコンの場合 */
.nav-list li.nav-list-icon {
  display: inline-block; /* アイコンは横並びにする */
  margin: 10px 0 0;
  font-size: 1.25rem;
}
/* フッターでnav-listを表示 */
.footer-nav .nav-list {
  display: block;
}

/* ハンバーガーメニューボタン
-------------------------------------------------- */
.navsp-btn {
  position: fixed;
  right: 20px;
  top: 20px;
  height: 20px;
  width: 30px;
  z-index: 99;
}
.navsp-btn-line {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background-color: #555; /* Theme customize */
  transition: transform .3s;
}
.navsp-btn-line-center {
  top: 9px;
}
.navsp-btn-line-bottom {
  bottom: 0;
}
.navsp-btn-line-top.active {
  top: 8px;
  transform: rotate(45deg);
}
.navsp-btn-line-center.active {
  transform: scaleX(0);
}
.navsp-btn-line-bottom.active {
  bottom: 10px;
  transform: rotate(135deg);
}

/* フルスクリーンナビゲーション
-------------------------------------------------- */
.navsp {
  background: rgba(255,255,255,0.95);
  display: none;
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 98;
}
.navsp-inner {
  display: flex;
  position: absolute;
  height: 100%;
  width: 100%;
  align-items:center;
  justify-content: center;
}
.navsp .nav-list {
  display: block;
}

/* SPサイズに戻す */
} @media (max-width: 767px) {

/* ==================================================

  Common parts (footer)

================================================== */

footer {
  margin: 60px 0 0 0;
}

/* footer-banner */
.footer-banner {
  padding: 20px 0;
}

/* footer-contact */
.footer-contact {
  padding: 30px 0;
}



/* ==================================================

  Common parts (breadcrumb)

================================================== */

.breadcrumb {
  margin-bottom: 0;
  padding: 6px 15px;
}



/* End @media screen */
}