@charset "UTF-8";


@font-face {
	font-family: 'Noto Sans JP';
	src: url('fonts/NotoSansJP-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Noto Sans JP';
	src: url('fonts/NotoSansJP-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Noto Sans JP';
	src: url('fonts/NotoSansJP-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
}

:root {
	--themebeige: #f7f2fa;
	--themebrown: #901c32;
	--themegray: #575757;
	--themegreen: #80a5a2;
}

/* 全体フォント指定 */
body {
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 1.6;
	color: var(--themegray);
}


.site-main {
	padding-top: var(--header-min-height);
}


.logo {
	width: 40%;
}

.logo img {
	width: 60%;
}

body.loaded .logo img {
	opacity: 1;
}

.red-text {
	color: red;
}

.coolingoff {
    border: solid;
    border-radius: 5pt;
    border-color: red;
    border-width: 3px;
    padding: 10px;
}
.small-text p {
	font-size: calc(var(--res-p) - 1px);
}

.text-link {
	color: rgb(147 139 202);
}

#breadCrumbs {
	width: var(--res-width);

}
/* -----------------------------
  ヘッダー全体
----------------------------- */

header {
	position: fixed;
	background-color: white;
	width: 100%;
	height: var(--header-min-height);
	z-index: 999;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--header-padding-block);
	padding-inline: var(--space-md);
	min-height: var(--header-min-height);
	box-sizing: border-box;
	max-width: 1400px;
	margin: 0 auto;
}

/* ヘッダーメニュー横並び */
.header-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.header-menu>li {
	position: relative;
	margin-right: 30px;
}

/* メニューリンク */
.header-menu a {
	text-decoration: none;
	color: #333;
	position: relative;
	display: inline-block;
	padding: 10px 0;
	font-weight: 500;
	transition: color 0.3s;
}

/* 下線アニメーション */
.header-menu a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: #000;
	transition: width 0.3s;
}

.header-menu a:hover::after {
	width: 100%;
}

/* サブメニュー */
.header-menu li .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	list-style: none;
	padding: 10px 0;
	background: #fff;
	min-width: 200px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	z-index: 999;
}

.header-menu li.has-dropdown:hover .sub-menu {
	display: block;
}

.header-menu li .sub-menu li a {
	padding: 10px 20px;
	display: block;
	white-space: nowrap;
}


/* -----------------------------
	フッター
  ----------------------------- */
.footer {
	background: #f7f7f7;
	color: #eee;
	padding: 40px 0 20px;
	font-size: 14px;
	margin-top: 40px;
}

.footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

/* ─────────────
   サイトマップ部分
───────────── */
.footer-sitemap {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 30px;

	place-content: center;
}

.sitemap-column {
	display: var(--res-flex-input);
}

.sitemap-column ul {
	list-style: none;
	padding: 0;
	margin: 0;
	margin-right: 40px;
}

.sitemap-column>ul>li {
	margin-bottom: 10px;
}

.sitemap-column>ul>li>p {
	color: var(--themegray);
	text-decoration: none;
	font-weight: 600;
	display: inline-block;
	margin-bottom: 4px;
}

.sitemap-column>ul>li>a:hover {
	color: #ced7dc;
}

/* サブ項目 */
.sitemap-column ul ul {
	padding-left: 16px;
	margin-top: 4px;
	border-left: 1px solid var(--themegray);
}

.sitemap-column ul ul li {
	margin-bottom: 4px;
}

.sitemap-column ul ul a {
	color: var(--themegray);
	text-decoration: none;
	font-weight: 400;
}

.sitemap-column ul ul a:hover {
	color: #ced7dc;
}

/* ─────────────
   SNS・コピーライト部分
───────────── */
.footer-bottom {
	border-top: 1px solid var(--themegray);
	padding-top: 20px;
	text-align: center;
}

.footer-sns {
	margin-bottom: 15px;
}

.footer-sns a {
	color: var(--themegray);
	margin: 0 8px;
	font-size: 20px;
	transition: color 0.3s;
}

.footer-sns a:hover {
	color: #ced7dc;
}

.footer-license p {
	margin: 4px 0;
	color: var(--themegray);
	font-size: 13px;
}

@media (max-width: 1024px) {
	.footer-sitemap {
		justify-content: space-between;
		/* 左右に振る */
	}

	.footer-sitemap>.sitemap-column {
		flex: 1 1 auto;
	}
}

/* ─────────────
   スマホ対応
───────────── */
@media (max-width: 768px) {
	.footer-sitemap {
		flex-direction: column;
	}

	.sitemap-column ul ul {
		padding-left: 10px;
	}
}

/* -----------------------------
	ハンバーガーボタン
  ----------------------------- */
.menu-toggle {
	display: none;
	/* PCでは非表示 */
	flex-direction: column;
	justify-content: space-between;
	width: 25px;
	height: 20px;
	border: none;
	background: transparent;
	cursor: pointer;
	z-index: 1000;
	/* 確実に前面に表示 */
	position: relative;
	/* 必要に応じて */
}

.menu-toggle span {
	display: block;
	height: 3px;
	background: #333;
	border-radius: 2px;
	width: 100%;
	transition: all 0.3s ease;
}


/* オーバーレイ初期状態 */
.menu-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
	z-index: 998;
	/* メニューより下 */
}

/* メニュー表示時に overlay 表示 */
.header-nav.active+.menu-overlay {
	display: block;
}

/* ハンバーガー → × 変化 */
.menu-toggle.active span:nth-child(1) {
	transform: rotate(45deg);
	position: absolute;
	top: 9px;
}

.menu-toggle.active span:nth-child(2) {
	opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
	transform: rotate(-45deg);
	position: absolute;
	top: 9px;
}




/* FAQセクション */
.faq {
	margin-top: 80px;
	text-align: center;
}

.faq h2 {
	font-size: 40pt;
	font-weight: lighter;
	color: 595959;
}

.faq h3 {
	font-size: 20pt;
	font-weight: 100;
	color: 595959;
}


.faq-list {
	margin-top: var(--services-panel-mar);
}

.accordion {
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	margin-bottom: 1rem;
	overflow: hidden;
	width: var(--accordion-head-w);
	justify-content: center;
	/* 水平方向の中央寄せ */
	align-items: center;
	/* 垂直方向の中央寄せ */
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

.accordion-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.5rem;
	cursor: pointer;
	color: var(--themegray);
	font-size: var(--res-div);
	font-weight: 400;
}

.accordion-header span {
	display: inline-block;
	transition: transform 0.3s ease;
	font-size: 1.2rem;
}

.accordion.active span {
	transform: rotate(45deg);
	/* + を × の形に */
}



.accordion-header:hover {
	background-color: #f0f0f0;
}


.accordion-content {
	max-height: 0;
	overflow: hidden;
	padding: 0 1.5rem;
	background-color: #fafafa;
	transition: max-height 0.3s ease, padding 0.3s ease;
}

.accordion-content p {
	margin: 1rem 0;
	font-size: var(--res-p);
}

.accordion.active .accordion-content {
	padding: 1rem 1.5rem;
	max-height: 800px;
	/* 充分な高さを指定 */
}


/* お知らせのパネル */
.news-list {
	justify-content: center;
	/* 水平方向の中央寄せ */
	align-items: center;
	/* 垂直方向の中央寄せ */
	margin-left: auto;
	margin-right: auto;
	margin-top: var(--services-panel-mar);
	width: var(--res-width);
	line-height: 3;
}

.news-list a {
	color: inherit;
}

.news-list-content {
	border-bottom: 1px solid #ddd;
	transition: transform 0.2s ease;
	cursor: pointer;
	white-space: nowrap;
}

.news-list-content:hover {
	transform: scale(1.01);
}

.news-list p {
	font-size: var(--res-p);
	font-weight: lighter;
	padding-left: 20px;
}

.news-list h4 {
	font-size: 20pt;
	font-weight: lighter;
	margin-left: 20px;
}



/* 買取品目一覧のパネル */
.items {
	margin-top: 80px;
	text-align: center;
	background-color: F7F7F7;
	height: var(--res-items-h);
}

.items h2 {
	font-size: 40pt;
	font-weight: lighter;
	color: 595959;
}

.items h3 {
	font-size: 20pt;
	font-weight: 100;
	color: 595959;
}

.items h4 {
	font-size: 25pt;
	font-weight: normal;
	color: 595959;
	margin-top: 20px;
}

.items p {
	font-size: var(--res-p);
}

.itemsPanels {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;

	max-width: 1300px;
	margin: 0 auto;
	margin-top: 20px;
	gap: 20px 20px;
}

.itemsPanel {
	width: 200px;
	/* パネル幅 */
	height: 200px;
	/* パネル高さ */
	text-align: center;
	/* 画像・文字を中央揃え */
	background-color: #fff;
	border-radius: 10px;
	transition: transform 0.2s ease;
	cursor: pointer;
}


.itemsPanel:active {
	opacity: 0.5;
}

.itemsPanel:hover {
	transform: scale(1.03);
}



.itemsIcon {
	margin-top: 20px;
	width: var(--items-img-w);
	height: var(--items-img-h);
}

.itemsPanel p {
	font-weight: 500;
	font-size: var(--res-items-p);
	margin-top: 10px;
}


.itemsPanel a {
	margin-top: 30px;
	display: inline-block;
	/* transformを使う場合はinline-block以上が必要 */
	transition: transform 0.2s ease;
	/* アニメーションの速さ・種類 */
	cursor: pointer;
}

.itemsPanel a:hover {
	transform: scale(1.05);
	/* 5%だけ拡大 */

}

.commonSection {
	padding: var(--res-section-pad);
	margin-top: var(--section-mar);
	text-align: center;
}

.commonSection h1 {
	font-size: var(--res-h1);
	font-weight: 400;
	color: 595959;
}

.commonSection h2 {
	font-size: var(--res-h2);
	font-weight: 100;
	color: 595959;
}

.commonSection h3 {
	font-size: var(--res-h3);
	font-weight: 100;
	color: 595959;
}

.commonSection h4 {
	font-size: var(--res-h3);
	font-weight: normal;
	color: 595959;
	margin-top: 20px;
}


/* 買取サービス一覧のパネル */

.servicePanels {
	display: flex;
	margin-top: var(--services-panel-mar);
	width: 60%;
	justify-content: center;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
}

.servicesPanel {
	width: 320px;
	height: var(--services-panel-h);
	box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.45);

	margin-right: 10px;
	margin-left: 10px;
	transition: transform 0.2s ease;
	/* アニメーションの速さ・種類 */
	cursor: pointer;
}

.servicesPanel:hover {
	transform: scale(1.05);
	/* 5%だけ拡大 */

}

.servicesPanel:active {
	background-color: #e8e8e8;
}

.servicesIcon {
	margin-top: 30px;
	width: 60px;
	height: 50px;
}

.servicesPanel p {
	font-weight: 500;
	margin-top: 10px;
	line-height: 2;
	font-size: 8pt;
}

/* オーバーレイとポップアップ */
.overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	transition: opacity 0.4s ease, visibility 0.4s ease;
	opacity: 0;
	visibility: hidden;
}

.popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	padding: 2rem;
	border-radius: 12px;
	z-index: 9999;
	text-align: center;
	width: 600px;
	transition: opacity 0.4s ease, visibility 0.4s ease;
	opacity: 0;
	visibility: hidden;
}

.popup .close {
	position: absolute;
	top: 10px;
	right: 10px;
	background: none;
	border: none;
	font-size: 2rem;
	cursor: pointer;
}

.popup.activeOverlay,
.overlay.activeOverlay {
	opacity: 1;
	visibility: visible;
}

.popup a {
	text-align: -webkit-center;

}

.popup-content {
	font-size: var(--res-div);
	margin-top: 20px;
}

.popupBtn {
	margin-top: 20px;
	background-color: #839ba5;
	color: white;
	width: 50%;
	text-align: center;
	border-radius: 50pt;
	height: 50px;
	align-content: center;
	font-size: var(--res-div);
	justify-content: center;
	align-items: center;
	margin-left: auto;
	margin-right: auto;

}

.popupBtn:active {
	background-color: #a4bac4;
}



/* -----------------------------
	買取実績セクション
  ----------------------------- */



.swiper-slide {
	height: var(--swiper-height);
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white;
	width: auto;
	/* または固定幅を指定 */
	flex-shrink: 0;
}

.swiper-slide a {
	width: 100%;
	height: 100%;
}

.swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.mySwiper {
	width: 90%;
	height: var(--swiper-height);
	margin: 30px auto;
	position: relative;
}

.kaitori-swiper {
	width: var(--kaitori-swiper-w);
	height: var(--swiper-height);
	margin: 30px auto;
	position: relative;
	max-width: 1024px;
}

.kaitori-slide-overlay {
	position: relative;
	color: rgba(255, 255, 255, 0);
	width: 100%;
	height: 100%;
	border-radius: 12pt;
	position: absolute;
	background-color: #00000000;
	transition: opacity 0.4s ease, visibility 0.4s ease;
	opacity: 0;
	/* ← 初期は透明 */

}

.kaitori-slide-overlay p {
	width: 100%;
	height: 100%;
	position: absolute;
	align-content: center;
	justify-content: center;
	/* 水平方向の中央寄せ */
	align-items: center;
	/* 垂直方向の中央寄せ */
	margin-left: auto;
	margin-right: auto;
}

.kaitori-slide-overlay:hover {
	color: white;
	background-color: #0000008b;
	opacity: 1;

}



/* 画像を拡大・トリミングして枠内にフィット */
.kaitori-swiper .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}


/* ページャー（ドット）の位置を調整 */
.swiper-pagination {
	bottom: 10px !important;
	/* デフォルトより上に */
}

/* ナビゲーション矢印 */
.swiper-button-prev,
.swiper-button-next {
	color: #333;
}

/* ページネーションドット */
.swiper-pagination-bullet {
	background: #ccc;
	opacity: 1;
}

.swiper-pagination-bullet-active {
	background: #333;
}




/* アクセシビリティ：ユーザが動き控えめを選んでいる場合はアニメOFF */
@media (prefers-reduced-motion: reduce) {
	.fade-up {
		transition: none;
		transform: none;
	}
}


/* -----------------------------
	かんたんライン査定セクション
  ----------------------------- */

.line-assessment {
	background-color: #f7f2ea;
	border-radius: 20px;
	padding: 20px 20px;
	text-align: center;
	font-family: 'Noto Sans JP', sans-serif;
	width: var(--line-assessment-w);
	justify-content: center;
	/* 水平方向の中央寄せ */
	align-items: center;
	/* 垂直方向の中央寄せ */
	margin-left: auto;
	margin-right: auto;
	color: #555;
	margin-top: var(--section-mar);
}

.line-assessment .title {
	font-size: var(--res-h1);
	font-weight: 400;
	margin-bottom: 1rem;
	color: #555;
}

.line-assessment .description {
	font-size: var(--res-p);
	line-height: 1.8;

}

.steps {
	display: flex;
	justify-content: center;
	gap: 40px;
	flex-wrap: wrap;
}

.step {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	padding: 40px 30px;
	width: 220px;
	position: relative;
}

.step-number {
	position: absolute;
	top: -15px;
	left: 20px;
	background: #a85b46;
	color: #fff;
	font-size: 1.2rem;
	font-weight: bold;
	padding: 6px 12px;
	border-radius: 8px;
	width: 40px;
	box-shadow: 0 2px 8px rgb(0 0 0 / 22%);
}

.step-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.step-icon {
	width: 90px;
	height: 90px;
	margin-bottom: 20px;
	opacity: 0.8;
}

.step p {
	font-size: var(--res-p);
	color: #555;
	white-space: nowrap;
}

/* お問い合わせフォーム */

.description {
	justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    text-align: left;
    margin-top: 40px;
    margin-bottom: 40px;
    font-size: var(--res-p);
}

::placeholder {
	color: rgb(156, 156, 156);
}

.flex-input p {
	display: flex;
	align-items: center;
}

.flex-input {
	display: flex;
}

.flex-input-file {
	display: var(--res-flex-input);
}

.form-wrapper {
	justify-content: center;
	/* 水平方向の中央寄せ */
	align-items: center;
	/* 垂直方向の中央寄せ */
	margin-left: auto;
	margin-right: auto;
	background-color: F7F2EA;
	border-radius: 10pt;
	padding: var(--form-wrapper-pad);
	width: var(--form-wrapper-w);
}

.form-wrapper input {
	background-color: white;
	width: 100%;
	padding: 0.5em;
	border-radius: 5pt;
}


.form-wrapper select {
	background-color: white;
	width: 100%;
	padding: 0.5em;
	border-radius: 5pt;
}

.form-wrapper textarea {
	width: 100%;
	background-color: white;
	resize: none;
	padding: 0.5em;
	border-radius: 5pt;
}

.form-txt {
	font-size: var(--res-label-txt);
}

.form-wrapper h2 {
	font-size: var(--res-h2);
	font-weight: 400;
	color: 595959;
	text-align: center;
	margin: 20px 0px 20px 0px;
}

.form-wrapper label {
	font-size: var(--res-label-txt);
}

.name-input input {
	background-color: white;
	width: 95%;
	border-radius: 5pt;
}

.form-wrapper p {
	margin-top: 20px;

}

.form-wrapper p:has(.consent) {
	justify-content: center;
	/* 水平方向の中央寄せ */
	align-items: center;
	/* 垂直方向の中央寄せ */
	margin-left: auto;
	margin-right: auto;
	text-align: center;

}

.consent input {
	width: 20px;
	height: 20px;
	margin-right: 5px;
	appearance: auto;

}


.form-wrapper p:has(.submit) {
	justify-content: center;
	/* 水平方向の中央寄せ */
	align-items: center;
	/* 垂直方向の中央寄せ */
	margin-left: auto;
	margin-right: auto;
	text-align: center;

}


.form-wrapper .wpcf7-spinner {
	position: absolute;
}

.submit input {
	width: 160px;
	height: 50px;
	border-radius: 5pt;
	background-color: 516866;
	color: white;
	text-align: center;
}


/* input を完全隠蔽 */
.upload-area .wpcf7-form-control[type="file"] {
	display: none;
}

.upload-area {
	padding: 30px;
}

.upload-label {
	display: inline-block;
	background: #333;
	color: #fff;
	padding: 10px 12px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	margin-bottom: 8px;
}

.preview {
	width: 160px;
	height: 120px;
	border: 1px dashed #ccc;
	border-radius: 6px;
	background: #fafafa;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}




.flex {
	display: flex;
}

.res-margin-top {
	margin-top: var(--services-panel-mar);
}


input.hidden:disabled,
select.hidden:disabled,
textarea.hidden:disabled {
  background-color: #f0f0f0; /* 灰色背景 */
  color: #999;              /* 文字色も薄く */
  cursor: not-allowed;      /* 禁止カーソル */
  opacity: 0.7;             /* 全体を少し薄くする */
}


/* モバイル対応 */
@media (max-width: 600px) {
	.id-list-wrapper {
		grid-template-columns: 1fr;
		/* スマホでは縦並び */
	}
}




@media (max-width: 900px) {
	.steps {
		flex-direction: column;
		align-items: center;
	}

	.step {
		width: 60%;
	}
}

/* 2カラム表示（768px〜1024px） */
@media (min-width: 900px) and (max-width: 1024px) {
	.steps {
		flex-wrap: wrap;
		justify-content: center;
	}

	.step {
		width: 45%;
	}
}

/* 1カラム表示（768px未満） */
@media (max-width: 767px) {
	.steps {
		flex-direction: column;
		align-items: center;
	}

	.step {
		width: 60%;
	}

	.popup {
		width: 400px;
	}
}

/* -----------------------------
	レスポンシブ対応
  ----------------------------- */



@media (max-width: 1024px) {

	.header-menu li.has-dropdown:hover .sub-menu {
	display: none;
}
	.itemPanelsWrapper {
		justify-content: center;
		/* 水平方向の中央寄せ */
		align-items: center;
		/* 垂直方向の中央寄せ */
		margin-left: auto;
		margin-right: auto;
		display: flex;
	}

	.itemsPanels {
		display: block;
		margin-top: var(--items-panel-mar);

		justify-self: center;

		justify-content: center;
		/* 水平方向の中央寄せ */
		align-items: center;
		/* 垂直方向の中央寄せ */
		margin-left: auto;
		margin-right: auto;
	}



	.itemsPanel {
		width: var(--res-items-panel-w);
		height: 60px;
		border-radius: 10px;
		margin: 10px;
		background-color: #ffffff;
		transition: transform 0.2s ease;
		cursor: pointer;
		display: flex;
		padding: 10px;
	}

	.itemsIcon {
		width: var(--items-img-w);
		height: var(--items-img-h);
		align-self: center;
		margin-top: 0;
	}

	.itemsPanel p {
		font-size: var(--res-items-p);
		font-weight: normal;
		color: 595959;
		align-self: auto;
		margin: var(--res-txt-top-mar) 10px 10px var(--res-txt-left-mar);
		white-space: nowrap;
	}

	.service {
		margin-top: var(--section-mar);
	}

	.service h2 {
		font-size: var(--res-h2);
	}

	.servicePanels {
		display: flex;
		margin-top: var(--services-panel-mar);
		width: 75%;
	}

	.servicesPanel {
		width: 200px;
		height: var(--services-panel-h);
		box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.45);
		border-radius: 50pt;
		margin-right: 10px;
		display: flex;
		margin-left: 10px;
		transition: transform 0.2s ease;
		cursor: pointer;
		background-color: #f9f9f9;
		padding: 8px 10px 10px 9px;
	}

	.servicesPanel:active {
		background-color: #e8e8e8;
	}

	.servicesPanel:hover {
		transform: scale(1.05);
		/* 5%だけ拡大 */

	}



	.servicesIcon {
		width: 30px;
		height: 25px;
		margin: 5px;
	}

	.servicesPanel p {

		display: none;
	}

	.commonSection h4 {
		font-size: var(--res-h4);
		font-weight: normal;
		color: 595959;
		margin: 0 0 0 10px;
		white-space: nowrap;
	}

	/* PCメニュー非表示 */
	.header-menu {
		display: none;
	}

	/* ハンバーガー表示 */
	.menu-toggle {
		display: flex;
	}

	.logo img {
		width: 70%;
	}

	/* スライドメニュー */
	.header-nav {
		display: none;
		position: fixed;
		top: 0;
		right: -250px;
		width: 250px;
		height: 100vh;
		background: #fff;
		transition: right 0.3s ease;
		z-index: 999;
		padding-top: 60px;
		overflow-y: scroll;
	}

	.header-nav.active {
		display: block;
		right: 0;
	}

	.header-nav .header-menu {
		display: flex;
		flex-direction: column;
	}

	.header-menu>li {
		margin: 0;
		border-bottom: 1px solid #eee;
	}




	/* サブメニュー初期状態 */
	.header-menu li .sub-menu {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}

	/* active時に展開 */
	.header-menu li.has-dropdown.active .sub-menu {
		max-height: 500px;
		/* サブメニューの最大高さ */
	}

	/* サブメニュー非表示 */
	.header-menu li .sub-menu {
		position: static;
		display: none;
		box-shadow: none;
	}

	.header-menu li.has-dropdown.active .sub-menu {
		display: block;
	}

	.header-menu li a {
		padding: 15px 20px;
	}



	/* ----------------------------
  共通リセット
---------------------------- */
	.header-menu a {
		text-decoration: none;
		color: #333;
		padding: 10px 0;
		display: block;
		font-weight: 500;
	}

	/* 下線アニメーションはスマホでは無効化 */
	@media (max-width: 768px) {
		.header-menu a::after {
			display: none;
		}

		/* タップ時に背景色変更 */
		.header-menu li.active>a,
		.header-menu li a:active {
			background-color: #eee;
			/* 薄い灰色 */
		}

		/* 子リストのインデント */
		.header-menu li .sub-menu li a {
			margin-left: 20px;
			/* 親より右にずらす */
		}

		.servicePanels {
			width: 95%;
		}
	}

	/* ----------------------------
	ハンバーガーアイコンを前面に
  ---------------------------- */
	.menu-toggle {
		z-index: 1001;
		/* メニューやオーバーレイより前面 */
		position: relative;
	}

	/* ハンバーガー→×アニメーション */
	.menu-toggle.active span:nth-child(1) {
		transform: rotate(45deg);
		position: absolute;
		top: 9px;
	}

	.menu-toggle.active span:nth-child(2) {
		opacity: 0;
	}

	.menu-toggle.active span:nth-child(3) {
		transform: rotate(-45deg);
		position: absolute;
		top: 9px;
	}



}

@media (max-width: 900px) {
	.servicePanels {
		width: 90%;

	}
}

@media (max-width: 730px) {
	.servicePanels {
		display: block;
	}

	.servicesPanel {
		width: 80%;
		display: block;
		height: var(--services-panel-h);
		box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.45);
		border-radius: 50pt;
		/* margin-right: 10px; */
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 15px;
		margin-left: 10px;
		transition: transform 0.2s ease;
		cursor: pointer;
		background-color: white;
		justify-content: center;
		align-items: center;
		margin-left: auto;
		margin-right: auto;
		/* padding: 8px 10px 10px 9px; */
	}

}

@media (max-width: 376px) {
	.itemsPanel {
		margin: 5px;
	}
}


@media (max-width: 320px) {
	.itemsPanel {
		width: var(--res-items-panel-w);
		height: 60px;
		border-radius: 10px;
		margin: 5px;
		background-color: #ffffff;
		transition: transform 0.2s ease;
		cursor: pointer;
		display: flex;
		padding: 10px;
	}

	.itemsPanel p {
		font-size: var(--res-items-p);
		font-weight: normal;
		color: 595959;
		align-self: auto;
		margin: var(--res-txt-top-mar) 10px 10px var(--res-txt-left-mar);
		white-space: nowrap;
	}
}