/* 廃車手続きガイド：既存ページへ追加する独立セクション */

.haisha-guide{
    background:#fff8dc;
    padding:72px 0 82px;
    color:#17233b;
}

.haisha-guide * {
	box-sizing:border-box
}
.haisha-guide .hg-inner {
	width:min(1100px, calc(100% - 40px));
	margin:0 auto
}
.hg-intro {
	display:grid;
grid-template-columns:1.05fr .95fr;
	min-height:330px;
	border-radius:18px;
	overflow:hidden;
	background:#082f6b;
	box-shadow:0 14px 36px rgba(15, 35, 68, .18)
}
.hg-intro__copy {
	padding:52px 54px;
	color:#fff;
	position:relative
}
.hg-kicker {
	font-size:15px;
	font-weight:700;
	letter-spacing:.12em;
	color:#ffd733;
	margin:0 0 14px
}
.hg-intro h2 {
	font-size:38px;
	line-height:1.35;
	margin:0 0 20px;
	color:#fff
}
.hg-intro h2 em {
	font-style:normal;
	color:#ffd733
}
.hg-intro p {
	font-size:17px;
	line-height:2;
	margin:0
}
.hg-intro__photo {
	background:linear-gradient(90deg, rgba(8, 47, 107, .08), rgba(8, 47, 107, 0)), url('/haisyaou/img/shopPhoto05.jpg') center/cover no-repeat;
	min-height:330px
}
.hg-section {
	margin-top:34px;
	background:#fff;
	border:1px solid #f0df9a;
	border-radius:18px;
	padding:44px 50px;
	box-shadow:0 9px 24px rgba(83, 70, 18, .07)
}
.hg-section__head {
	text-align:center;
	margin-bottom:30px
}
.hg-section__head h3 {
	font-size:30px;
	line-height:1.45;
	color:#07336f;
	margin:0 0 10px;
	font-weight:bold;
}
.hg-section__head h3 span {
	color:#d91c24
}
.hg-section__head p {
	font-size:15px;
	line-height:1.9;
	margin:0;
	color:#546176
}
.hg-section__head:after {
	content:"";
	display:block;
	width:70px;
	height:5px;
	border-radius:4px;
	background:#ffd400;
	margin:18px auto 0
}
.hg-compare {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:24px
}
.hg-compare__box {
	border-radius:14px;
	overflow:hidden;
	border:1px solid #d8e0e8
}
.hg-compare__box h4 {
	margin:0;
	padding:14px;
	text-align:center;
	color:#fff;
	font-size:20px;
	background:#07336f
}
.hg-compare__box--kei h4 {
	background:#168441
}
.hg-compare__body {
	padding:26px 28px
}
.hg-compare__body dl {
	display:grid;
	grid-template-columns:120px 1fr;
	margin:0
}
.hg-compare__body dt, .hg-compare__body dd {
	padding:11px 0;
	border-bottom:1px solid #e6e8ec;
	line-height:1.65
}
.hg-compare__body dt {
	font-weight:700
}
.hg-note {
	margin:24px 0 0;
	padding:16px 20px;
	background:#fff8d4;
	border-left:5px solid #ffd400;
	line-height:1.8
}
.hg-docs {
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:15px
}
.hg-doc {
	min-height:150px;
	border:1px solid #dfe4ea;
	border-radius:13px;
	padding:18px 12px;
	text-align:center;
	background:#fff
}
.hg-doc img {
	width:58px;
	height:58px;
	margin-bottom:10px
}
.hg-doc strong {
	display:block;
	font-size:15px;
	line-height:1.5
}
.hg-doc small {
	display:block;
	margin-top:5px;
	color:#677184
}
.hg-topic {
	display:grid;
	grid-template-columns:150px 1fr;
	gap:32px;
	align-items:center;
	padding:34px 0;
	border-top:1px solid #e9dfb9
}
.hg-topic:first-of-type {
	border-top:0
}
.hg-topic__visual {
	text-align:center
}
.hg-topic__visual img {
	width:92px;
	height:92px;
	object-fit:contain
}
.hg-topic h4 {
	font-size:25px;
	color:#07336f;
	margin:0 0 12px
}
.hg-topic p {
	font-size:16px;
	line-height:1.95;
	margin:0
}
.hg-topic .hg-alert {
	color:#d91c24;
	font-weight:700
}
.hg-offices {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:22px
}

.hg-office{
    padding:27px;
    border-radius:14px;
    background:#fff;
    border:1px solid #e6e6e6;
    border-top:6px solid #07336f;
}

.hg-office--kei {
	border-top-color:#168441
}
.hg-office h4 {
	font-size:20px;
	margin:0 0 14px
}
.hg-office dl {
	margin:0
}
.hg-office dt {
	font-weight:700;
	margin-top:10px
}
.hg-office dd {
	margin:4px 0 0;
	line-height:1.75
}

.hg-office__map{
    margin-top:18px;
    height:150px;
    border-radius:10px;
    background:#f5f5f5;
    border:1px solid #ddd;
    position:relative;
    overflow:hidden;
}

.hg-office__map:after {
	content:"所在地・受付時間をご確認ください";
	position:absolute;
	left:12px;
	bottom:12px;
	background:rgba(255, 255, 255, .92);
	padding:8px 12px;
	border-radius:6px;
	font-weight:700;
	font-size:13px
}
.hg-cost {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:24px
}
.hg-cost__box {
	border-radius:15px;
	padding:28px;
	background:#f6f7f9
}
.hg-cost__box--king {
	background:#fff5c5;
	border:2px solid #ffd400
}
.hg-cost__box h4 {
	font-size:21px;
	margin:0 0 18px;
	color:#07336f
}
.hg-cost__box ul {
	margin:0;
	padding:0;
	list-style:none
}
.hg-cost__box li {
	display:flex;
	justify-content:space-between;
	gap:20px;
	padding:12px 0;
	border-bottom:1px solid rgba(0, 0, 0, .09)
}
.hg-cost__box strong {
	color:#d91c24;
	font-size:24px
}
.hg-cost__caption {
	font-size:13px;
	line-height:1.75;
	color:#687183;
	margin-top:16px
}
.hg-flow {
	display:grid;
	grid-template-columns:repeat(5, 1fr);
	gap:20px;
	position:relative
}
.hg-flow:before {
	content:"";
	position:absolute;
	left:9%;
	right:9%;
	top:57px;
	height:4px;
	background:#ffd400;
	z-index:0
}
.hg-step {
	position:relative;
	z-index:1;
	text-align:center
}
.hg-step__photo {
	height:115px;
	border-radius:14px;
	background:#eef3f8 center/cover no-repeat;
	border:5px solid #fff;
	box-shadow:0 3px 14px rgba(0, 0, 0, .12)
}
.hg-step:nth-child(1) .hg-step__photo {
background-image:url('/haisyaou/img_2026/flow01.jpg')
}
.hg-step:nth-child(2) .hg-step__photo {
background-image:url('/haisyaou/img_2026/flow02.jpg')
}
.hg-step:nth-child(3) .hg-step__photo {
background-image:url('/haisyaou/img_2026/flow03.jpg')
}
.hg-step:nth-child(4) .hg-step__photo {
background-image:url('/haisyaou/img_2026/flow04.jpg')
}
.hg-step:nth-child(5) .hg-step__photo {
background-image:url('/haisyaou/img_2026/flow05.jpg')
}
.hg-step__num {
	display:inline-grid;
	place-items:center;
	width:34px;
	height:34px;
	margin:-16px auto 10px;
	border-radius:50%;
	background:#07336f;
	color:#fff;
	font-weight:700
}
.hg-step h4 {
	font-size:16px;
	line-height:1.55;
	margin:0 0 7px;
	color:#07336f
}
.hg-step p {
	font-size:13px;
	line-height:1.7;
	margin:0;
	color:#596679
}
.hg-area {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:34px;
	align-items:center
}
.hg-area__map{
	min-height:300px;
	border-radius:16px;
	background:#eef6ff url('/haisyaou/img_2026/hiroshima_area.png') center center / cover no-repeat;
	position:relative;
}

.hg-area__map:after{
	content:"";
}


.hg-area__cities {
	display:flex;
	flex-wrap:wrap;
	gap:10px
}
.hg-area__cities span {
	padding:11px 18px;
	border-radius:999px;
	background:#fff5c5;
	border:1px solid #efd566;
	font-weight:700
}
.hg-area p {
	font-size:16px;
	line-height:1.9
}
.hg-faq {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px 18px
}
.hg-faq__item {
	border:1px solid #d8dee8;
	border-radius:10px;
	background:#fff;
	overflow:hidden
}
.hg-faq__q {
	display:flex;
	align-items:center;
	width:100%;
	min-height:64px;
	padding:14px 48px 14px 18px;
	border:0;
	background:#fff;
	color:#07336f;
	text-align:left;
	font-size:15px;
	font-weight:700;
	line-height:1.6;
	cursor:pointer;
	position:relative
}
.hg-faq__q:before {
	content:"Q";
	flex:0 0 30px;
	height:30px;
	display:grid;
	place-items:center;
	margin-right:10px;
	border-radius:50%;
	background:#07336f;
	color:#fff
}
.hg-faq__q:after {
	content:"＋";
	position:absolute;
	right:18px;
	font-size:22px
}
.hg-faq__item.is-open .hg-faq__q:after {
	content:"−"
}
.hg-faq__a {
	display:none;
	padding:0 20px 19px 58px;
	color:#4f5d71;
	font-size:14px;
	line-height:1.9
}
.hg-faq__item.is-open .hg-faq__a {
	display:block
}
.hg-cta {
	margin-top:34px;
	display:grid;
	grid-template-columns:155px 1fr 220px;
	align-items:center;
	gap:28px;
	padding:25px 34px;
	border-radius:18px;
	background:linear-gradient(110deg, #fff0a0, #fff8dc);
	border:2px solid #ffd400
}
.hg-cta__mascot img {
	display:block;
	max-width:145px;
	max-height:170px;
	margin:-20px auto -25px;
	object-fit:contain
}
.hg-cta__main strong {
	display:block;
	font-size:20px
}
.hg-cta__tel {
	display:block;
	color:#d91c24;
	font-size:37px;
	font-weight:800;
	line-height:1.3;
	text-decoration:none
}
.hg-cta__main small {
	color:#555
}
.hg-cta__buttons {
	display:grid;
	gap:10px
}
.hg-btn {
	display:block;
	padding:15px 12px;
	border-radius:8px;
	text-align:center;
	color:#fff!important;
	text-decoration:none!important;
	font-weight:700
}
.hg-btn--line {
	background:#12a63b
}
.hg-btn--mail {
	background:#d91c24
}
@media(max-width:768px) {
.haisha-guide {
padding:45px 0 55px
}
.haisha-guide .hg-inner {
width:min(100% - 24px, 1100px)
}
.hg-intro {
grid-template-columns:1fr
}
.hg-intro__copy {
padding:34px 24px
}
.hg-intro h2 {
font-size:28px
}
.hg-intro__photo {
min-height:220px
}
.hg-section {
padding:32px 20px;
margin-top:22px
}
.hg-section__head h3 {
font-size:24px
}
.hg-compare, .hg-offices, .hg-cost, .hg-area {
grid-template-columns:1fr
}
.hg-docs {
grid-template-columns:repeat(2, 1fr)
}
.hg-topic {
grid-template-columns:82px 1fr;
gap:16px
}
.hg-topic__visual img {
width:70px;
height:70px
}
.hg-topic h4 {
font-size:20px
}
.hg-flow {
grid-template-columns:1fr;
gap:18px
}
.hg-flow:before {
display:none
}
.hg-step {
display:grid;
grid-template-columns:180px 1fr;
grid-template-rows:auto auto;
text-align:left;
gap:8px 15px;
align-items:start;
padding:0 0 18px;
border-bottom:1px solid #e6e8ec
}
.hg-step:last-child {
border-bottom:0;
padding-bottom:0
}
.hg-step__photo {
grid-column:1;
grid-row:2;
height:auto;
aspect-ratio:4 / 3
}
.hg-step__num {
position:absolute;
left:-8px;
top:38px;
margin:0
}
.hg-step h4 {
grid-column:1/-1;
grid-row:1;
margin:0;
font-size:16px;
font-weight:700
}
.hg-step p {
grid-column:2;
grid-row:2;
align-self:center
}
.hg-faq {
grid-template-columns:1fr
}
.hg-cta {
grid-template-columns:95px 1fr;
gap:12px;
padding:18px
}
.hg-cta__mascot img {
max-width:95px
}
.hg-cta__buttons {
grid-column:1/-1;
grid-template-columns:1fr 1fr
}
.hg-cta__tel {
font-size:27px
}
.hg-area__map {
min-height:220px
}
}
@media(max-width:480px) {
.hg-docs {
grid-template-columns:1fr 1fr
}
.hg-compare__body dl {
grid-template-columns:1fr
}
.hg-compare__body dt {
padding-bottom:0;
border-bottom:0
}
.hg-topic {
grid-template-columns:1fr;
text-align:left
}
.hg-topic__visual {
text-align:left
}
.hg-step {
grid-template-columns:145px 1fr
}
.hg-cta {
grid-template-columns:1fr;
text-align:center
}
.hg-cta__mascot {
display:none
}
.hg-cta__buttons {
grid-template-columns:1fr
}
.hg-cta__tel {
font-size:25px
}
}

.hg-office__map {
	margin-bottom: 30px;
}

.hg-office {
	background: #f8f9fb;
	border: 1px solid #d8e3ef;
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 20px;
}

.hg-office h4 {
	margin: 0 0 15px;
	font-size: 20px;
	color: #005bac;
}

.hg-office dl {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 10px 15px;
	margin: 0;
}

.hg-office dt {
	font-weight: bold;
}

.hg-office dd {
	margin: 0;
}

.hg-section .hg-office__map {
	width: 48%;
	float: left;
	height: 380px;
}

.hg-section .hg-office {
	width: 48%;
	float: right;
}

.hg-section .hg-office--kei {
	margin-top: 20px;
}

.hg-section .hg-note {
	clear: both;
	padding-top: 20px;
}

@media (max-width: 768px) {
	.hg-section .hg-office__map,
	.hg-section .hg-office {
		float: none;
		width: 100%;
	}

	.hg-section .hg-office__map {
		height: 300px;
		margin-bottom: 20px;
	}
}

.hg-intro__photo img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	border-radius:12px;
}

.hg-intro__photo{
    position: relative;
    min-height: 340px;
    border-radius: 18px;
    overflow: hidden;
    background: #eef7ff;
}

.hg-intro__photo::before{
    content:"";
    position:absolute;
    inset:0;
    background:url("/haisyaou/img_2026/hiroshima_map.png") center center no-repeat;
    background-size:85%;
    opacity:.18;
}