@charset "UTF-8";

/* ----------
spHeader
---------- */

@media screen and (max-width: 900px) {
	#spHeader.pcOFF{
		display:block !important;
	}
}


#spHeader .header {
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	background:#fff;
	position:fixed;
	z-index: 999;
	box-shadow: 0px 6px 10px 0px rgba(209, 209, 209, 0.30);
}

#spHeader .header:after {
	content:"";
	display:block;
	width: 100%;
	height:26px;
	background:url(../img/header_logo_bottom.png) no-repeat left top;
	background-size:auto 100%;
	position:absolute;
	bottom:-25px;
	right: 0;
	left: 0;
	margin: 0 auto;
	margin-left:10px;
	z-index:20;
}

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

/* ヘッダーのロゴ */
#spHeader .logo {
	width:100%;
	padding-right:10px;
}

#spHeader .logo {
	display:flex;
	justify-content:space-between;
	align-items: center;
	padding: 0.5rem 10px 0;
}

#spHeader .logoarea-logo {
	color:#000;
	text-decoration:none;
	display:flex;
	justify-content:space-between;
	align-items: center;
}
#spHeader .logoarea-logo .pic img{
  width: auto;
  height: 40px;
  vertical-align:bottom;
}
#spHeader .logoarea-logo .txt{
	font-size:13px;
	margin-left:10px;
	padding-bottom:10px;
}

/* ハンバーガーボタン */
#spHeader .drawer__button {
  position: relative;
  width: 3rem;
  height: 3rem;
  background-color: transparent;
  border: none;
  cursor: pointer;
  z-index: 999;
  background:#333333;
  padding: 0.5rem 27px;
}
/* ハンバーガーボタン内の線 */
#spHeader .drawer__button > span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2rem;
  height: 1px;
  background-color:#fff;
  transform: translateX(-50%);
}
#spHeader .drawer__button > span:first-child {
  transform: translate(-50%, calc(-50% - 0.5rem));
  transition: transform 0.3s ease;
}
#spHeader .drawer__button > span:nth-child(2) {
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}
#spHeader .drawer__button > span:last-child {
  transform: translate(-50%, calc(-50% + 0.5rem));
  transition: transform 0.3s ease;
}
/* 展開時 */
#spHeader .drawer__button.active > span:first-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}
#spHeader .drawer__button.active > span:nth-child(2) {
  opacity: 0;
}
#spHeader .drawer__button.active > span:last-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

/* メニューのデザイン */
#spHeader .drawer__nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100vh + 40px);
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s ease;
  opacity: 0;
  visibility: hidden;
  z-index:99;
}
#spHeader .drawer__nav.active {
  opacity: 1;
  visibility: visible;
}
#spHeader .drawer__nav__inner {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: white;
  padding: 2rem 1.5rem 3rem;
  margin: 0 0 0 auto;
  overflow: scroll;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
#spHeader .drawer__nav.active .drawer__nav__inner {
  transform: translateX(0);
}

/* ----- */
#spHeader .drawer__nav__menu {
  list-style: none;
  padding-left: 0;
  padding: 30px 0;
}

/* リンク共通 */
#spHeader .drawer__nav__menu .drawer__nav__link {
  display: block;
  text-decoration: none;
  font-size: 18px;
  letter-spacing: 0.1em;
  text-align: left;
  color: #000;
  padding: 10px;
  border-top: solid 1px #000;
  cursor: pointer;
}

#spHeader .drawer__nav__menu .drawer__nav__link:hover {
  color: #153E0E;
}

/* サブメニュー */
#spHeader .drawer__nav__menu .sub-menu {
  display: none;
  padding-left: 1em;
  margin: 0;
}
#spHeader .drawer__nav__menu .sub-menu a{
	color:#153E0E;
	border:none;
}
#spHeader .drawer__nav__menu .sub-menu.is-open {
  display: block;
}

/* ----- アコーディオン矢印ここから ----- */

/* 矢印アイコン（閉じている状態） */
#spHeader .drawer__nav__link.js-accordion-trigger {
  position: relative;
  padding-right: 30px; /* 矢印分のスペース */
}

#spHeader .drawer__nav__link.js-accordion-trigger::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 14px;
  height: 14px;
  background: url(../img/accordion_arrow01.png) no-repeat center center;
  background-size: contain;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s ease;
}

/* 開いたとき（180度回転） */
#spHeader .drawer__nav__link.js-accordion-trigger.is-open::after {
  transform: translateY(-50%) rotate(180deg);
}

/* ----- アコーディオン矢印ここまで ----- */


/* ----- */
.accordion-content {
  display: none;
  padding-left: 15px;
}

.accordion-toggle::after {
  content: '＋';
  float: right;
  font-size: 16px;
  transition: transform 0.3s ease;
}

.accordion-toggle.active::after {
  content: '－';
}

/* ----- ボタン系 ----- */
.spMenu-btn {
	display:flex;
	flex-direction:column;
	gap:10px;
}
.spMenu-btn a{
	display:block;
	background:#013F78;
	border:solid 1px #013F78;
	border-radius:5px;
	padding:10px 15px;
	text-align:center;
	font-size:16px;
	color:#fff;
	border-radius:100px;
	font-weight:bold;
}
.spMenu-btn a span{
	display:block;
	width:100%;
}
.spMenu-btn a:hover {
  background: #fff;
  color:#000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: background 0.3s, box-shadow 0.3s;
  cursor: pointer;
}
.spMenu-btn .item-banner a{
	background:none;
	box-shadow:none;
}
.spMenu-btn .item-crop a{
	color:#258C56;
	background:#fff;
}
.spMenu-btn .item-crop a span{
	background:url(../img/target_link.png) no-repeat right center;
	background-size:22px auto;
}
.spMenu-btn .item-crop a:hover{
	color:#153E0E;
}

#spHeader .drawer__nav__menu-sub {
	margin-top:15px;
}