@charset "utf-8";
h2 {
	font-size: clamp(1.5rem, -0.569rem + 4.31vw, 2.125rem);
	text-align: center;
	margin-bottom: 50px;
}
h2 span {
	position: relative;
	display: inline-block;
	width: fit-content;
}
h2 span::before {
	content: '';
	width: 100%;
	height: 5px;
	border-radius: 999px;
	background: #e6002e;
	position: absolute;
	left: 0;
	bottom: -0.5rem;
}
h2.genre {
	background: #004ca0;
	color: #fff;
	padding: 16px 64px 20px;
	border-radius: 10px;
	display: block;
	width: fit-content;
	margin: 40px auto 32px;
}
#main_contents > *:first-of-type h2.genre {
	margin-top: 0;
}
h2.genre span:before {
	content: none;
}
h3 {
	font-size: clamp(1.25rem, 0.56vw + 1.08rem, 1.50rem);
	margin: 0 0 24px;
	color: #004ca0;
}
* + h3, * + div:has(h3) h3 {
	margin-top: 40px;
}
h3 span {
	position: relative;
}
.sub_container:has(h3.numbering), .sub_container:has(h3.numbering-1), .sub_container:has(h3.numbering-2) {
	counter-reset: numbering-title;
}
.sub_container h3.numbering:before {
	counter-increment: numbering-title;
	content: counter(numbering-title);
	border: 3px solid #004ca0;
	border-radius: 10px;
	display: inline-block;
	margin-right: 0.75em;
	aspect-ratio: 1 / 1;
	max-width: 56px;
	max-height: 56px;
	height: auto;
	padding: 0 0.5em 3px;
	text-align: center;
}
.sub_container h3[class^="numbering-"] {
	display: flex;
}
.sub_container h3.numbering-1 {
	border-bottom: 2px solid #004ca0;
	padding: 16px 8px;
}
.sub_container h3.numbering-2 {
	color: #333;
	border-bottom: 1px solid #333;
	padding: 8px;
}
.sub_container h3.numbering-2 span {
	display: inline-block;
}
.sub_container h3.numbering-1:before,
.sub_container h3.numbering-2:before {
	counter-increment: numbering-title;
	content: counter(numbering-title) ".";
	display: inline-block;
	white-space: nowrap;
	width: fit-content;
}
.sub_container h3.numbering-1:before {
	margin-right: 0.5em;
}
.sub_container h3.numbering-2:before {
	margin-right: 0.275em;
}


/*
h3 span::before {
	content: '';
	width: 100%;
	height: 5px;
	border-radius: 999px;
	background: #e6002e;
	position: absolute;
	left: 0;
	bottom: -0.5rem;
}
*/
.sub_container {
	max-width: 1220px;
	margin: 120px auto 0;
}
.sub_container table {
	width: 100%;
}
.sub_container table tr th {
	background: #ecf4ff;
	max-width: max-content;
	width: fit-content;
	padding: 1rem 2rem;
	white-space: nowrap; 
}
.sub_container table tr td {
	padding-left: 2rem;
	padding: 1rem;
}
.sub_container ul {
	padding: 0;
	margin: 16px 0 32px;
}
.sub_container ul li {
	position: relative;
	padding-left: 1rem;
	line-height: 1.7;
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
	font-feature-settings: "palt";
	letter-spacing: 0.05em;
}
.sub_container ul li + li {
	margin-top: 8px;
}
.sub_container ul li::before {
	content: '';
	width: 5px;
	height: 5px;
	background: #004ca0;
	position: absolute;
	left: 0;
	/*top: 50%;
	transform: translateY(-50%);*/
	top: 0.7em;
}
.sub_container p, .sub_container table tr th, .sub_container table tr td {
	line-height: 1.7;
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
	font-feature-settings: "palt";
	letter-spacing: 0.05em;
}
.sub_container p.large_txt {
	font-size: clamp(1.13rem, 0.83vw + 0.88rem, 1.50rem);
	font-weight: bold;
	margin: 16px auto 24px;
	text-align: center;
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.sub_container .flexbox {
	display: flex;
	align-items: center;
	gap: 24px 48px;
	margin: 24px auto 40px;
}
.sub_container .flexbox:has(img + span) {
	gap: 32px 48px;
}
.sub_container .flexbox:has(> div:only-child) {
	justify-content: center;
}
.sub_container .flexbox:has(> div:nth-child(3)) {
	flex-wrap: wrap;
}
.sub_container .flexbox > div {
	width: calc(50% - 24px);
	max-width: 50%;
}
.sub_container .flexbox > div:has(.photo-l) {
	max-width: 960px;
	width: fit-content;
}
.sub_container .flexbox > div:nth-of-type(odd):last-of-type {
	margin: 0 auto;
}
.sub_container .flexbox > div img {
	width: fit-content;
	height: auto;
}
.sub_container .flexbox > div img + span {
	margin-top: 4px;
	display: block;
	text-align: center;
}
#breadcrumbs {
	margin-bottom: 90px;
}
#breadcrumbs > div {
	max-width: 1300px;
	margin: 0 auto;
	line-height: 2;
}
#breadcrumbs > div span {
	display: inline-block;
	width: fit-content;
}
#page_title {
	min-height: 550px;
	display: flex;
	align-items: center;
	position: relative;
	background-repeat: no-repeat;
	margin-bottom: 25px;
}
#page_title::after {
	content: '';
	width: 50%;
	height: 100%;
	background-image: url('../img/sub/page_title.png');
	background-size: cover;
	background-position: right top;
	position: absolute;
	left: 0;
	top: 0;
}
#page_title h1 {
	padding-left: calc((100% - 1300px) / 2);
	z-index: 2;
	color: #fff;
	font-size: clamp(1.5rem, -0.569rem + 4.31vw, 2.125rem);
	 text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}
#page_title h1 span {
	font-weight: 900;
	margin-top: 1.4em;
	display: block;
	font-size: clamp(2.125rem, -5.323rem + 15.52vw, 4.375rem);
}
#page_company #page_title {
	background-image: url('../img/sub/back_company.jpg');
	background-size: 120%;
	background-position: bottom 34% right 15%;
}
#page_business #page_title {
	background-image: url('../img/sub/back_business.jpg');
	background-position: left 0% bottom 60%;
}
#page_business.details02 #page_title {
	background-image: url('../img/sub/back_business-02.jpg');
	background-position: left 0% bottom 70%;
    background-size: 110%;
}
#page_business.details03 #page_title {
	background-image: url('../img/sub/back_business-03.jpg');
	background-position: left 0% bottom 59%;
}
#page_disposal #page_title {
	background-image: url('../img/sub/back_disposal.jpg');
	background-position: right 0% center;
}
#page_contact #page_title {
	background-image: url('../img/sub/back_contact.jpg');
	background-position: right 30% bottom;
}
#page_privacy #page_title {
	background-image: url('../img/sub/back_privacy.jpg');
	background-position: left -20% bottom 23%;
	background-size: 120%;
}
#vision {
	max-width: 1360px;
	margin: 0 auto;
	background: #f4f4f4 url('../img/sub/back_vision.jpg') no-repeat top center;
	background-size: 100% auto;
	padding: 100px 0 80px;
}
#vision .catch {
	margin: 0 auto;
	max-width: 1220px;
	font-weight: bold;
	font-size: clamp(1.5rem, -0.569rem + 4.31vw, 2.125rem);
	color: #fff;
	text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.8);
	line-height: 1.8;
}
#vision .message {
	padding: 25px 40px;
	background: #fff;
	border-radius: 5px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0 40px;
	margin-top: 30%;
}
#vision .message > div:first-child {
	width: 200px;
}
#vision .message > div:last-child {
	width: calc(100% - 240px);
}
.message p:last-child {
	text-align: right;
	margin-top: 30px;
}
.designation {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 50px;
}
.designation span {
	display: inline-block;
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.designation span:nth-child(odd) {
	color: #004ca0;
	font-weight: bold;
	width: 222px;
	text-align: center;
	padding: 0.6rem 0;
	border: 2px solid #004ca0;
	border-radius: 5px;
}
.designation span:nth-child(even) {
	width: calc(100% - 222px);
	padding-left: 2rem;
}
.designation span:first-child {
	margin-bottom: 10px;
}
#page_company #main_contents > div:last-child > h3 {
	border-bottom: 2px solid #004ca0;
	padding: 16px 8px;
}
#page_company .sub_container .flex {
	gap: 32px 24px;
}
#page_company .sub_container .flex > div {
	background: #f9f9f9;
	padding: clamp(1.5rem, -1.267rem + 5.86vw, 3.125rem) clamp(1.125rem, -0.152rem + 2.7vw, 1.875rem);
	width: calc(50% - 24px);
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
#page_company .sub_container .flex > div h3 {
	padding: 1rem;
	border: #004ca0 2px solid;
	border-radius: 5px;
	background: #fff;
	margin: 0 auto clamp(0.75rem, 0.25rem + 1.67vw, 1.5rem);
	width: 100%;
}
#page_company .sub_container .flex > div h3 span {
	display: block;
	position: relative;
}
#page_company .sub_container .flex > div h3 span:before {
	content: "\f3c5";
	position: relative;
	top: -1px;
	display: inline-block;
	margin-right: 1.125rem;
    font-family: "Font Awesome 6 Free";
    color: #004ca0;
    font-size: clamp(1.25rem, 1.083rem + 0.56vw, 1.5rem);
}
#page_company .sub_container .flex ul{
	margin-bottom: clamp(1.5rem, 0.5rem + 3.33vw, 3rem);
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
#page_company .sub_container .flex ul li  {
	padding: 1rem 0;
	border-bottom: 1px solid #c0c0c0;
	display: flex;
	position: relative;
	gap: 0 30px;
	margin: 0;
}
#page_company .sub_container .flex ul li:last-of-type {
	border-bottom: none;
}
#page_company .sub_container .flex ul li:before {
	content: none;
}
#page_company .sub_container .flex ul li span {
	color: #004ca0;
	font-weight: bold;
	min-width: 96px;
	text-align: center;
	display: inline-block;
	position: relative;
	padding: 0 12px;
}
#page_company .sub_container .flex ul li span:after {
	content: "";
	height: 1px;
	width: 100%;
	left: 0;
	background: #004ca0;
	display: inline-block;
	position: absolute;
	bottom: -17px;
}
#page_company .sub_container .flex ul li:last-of-type span:after {
	content: none;
}

#page_company .sub_container .flex ul dd {
	padding-inline: clamp(1rem, 0.333rem + 2.22vw, 2rem);
}

#page_company .sub_container .flex div:has(> iframe),
#page_company .sub_container .flex div iframe {
	aspect-ratio: 108 / 55;
}
#page_company .sub_container .flex div:has( > iframe),
#page_company .sub_container .flex div iframe {
	width: 100%;
	height: auto;
}
/*--- business ---*/
#page_business #ippan-gas {
	scroll-margin-top: 160px;
}
#page_business ul.linklist li {
	padding-left: 0;
}
#page_business ul.linklist li + li {
	margin-top: 16px;
}
#page_business ul.linklist li::before {
	content: "\f138";
	font-weight: 900;
	font-family: "Font Awesome 6 Free";
	color: #004ca0;
	font-size: 0.9rem;
	width: 1em;
	height: 1em;
	background: transparent;
	margin-right: 1rem;
	display: inline-block;
	position: relative;
	left: auto;
	top: auto;
	transform: translateY(0);
}

#page_business .sub_container p:has(+ *) {
	margin: 16px auto;
}

#page_business table.centering tr td {
	text-align: center;
}

/*--- business ---*/
/*--- disposal ---*/


#page_disposal .sub_container > div > .btn {
	max-width: inherit;
	word-break: keep-all;
	overflow-wrap: anywhere;
	width: fit-content;
	padding-inline: 32px 80px;
	margin: 0 auto;
}
#page_disposal .sub_container > div > .btn:after {
	transform: translate(0, -50%);
	transition: .3s;
}
@media (hover: hover) {
	#page_disposal .sub_container > div > .btn:hover {
		transform: scale(1.02);
	}
	#page_disposal .sub_container > div > .btn:hover:after {
		transform: translate(3px, -50%);
	}
}
@media (hover: none) {
	#page_disposal .sub_container > div > .btn:active {
		transform: scale(1.02);
	}
	#page_disposal .sub_container > div > .btn:active:after {
		transform: translate(3px, -50%);
	}
}
/*--- disposal ---*/
/*--- disposal-contact ---*/
#page_disposal .sub_container form table tr td input#re-gas {
	width: 6em;
	margin-left: 4px;
	margin-right: 8px;
}
/*--- disposal-contact ---*/

/*--- contact, disposal-contact (form) ---*/
div:has(+ form), #page_contact .align-c:has(+ table) {
	margin-bottom: clamp(2.50rem, 3.33vw + 1.50rem, 4.00rem);
}
.sub_container p + p {
	margin-top: 8px;
}
.sub_container form table {
	max-width: 90%;
	margin: auto;
}
.sub_container form table tr th {
	width: 30%;
}
.sub_container form table tr td {
	width: 70%;
}
.sub_container form table tr td input, .sub_container form table tr td textarea, .sub_container form table tr td select {
	line-height: 1.5;
	padding: 2px 4px;
}
.sub_container form table tr td input[type="text"], .sub_container form table tr td input[type="email"], .sub_container form table tr td input[type="tel"], .sub_container form table tr td textarea {
	width: 100%;
}

.sub_container form table tr td input[type="radio"] + label {
	display: inline-block;
	margin-left: 8px;
}

form a.btn, .btn.back-b {
	padding: 10px 24px 12px;
	max-width: inherit;
	font-size: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: auto;
	margin-top: 1em;
}
form a.btn:after, .btn.back-b:after {
	position: relative;
	top: auto;
	right: auto;
	transform: translateY(0);
	margin-left: 0.5em;
	font-size: 1.35em;
	transition: .3s;
	bottom: -1px;
}
@media (hover: hover) {
	form a.btn:hover, .btn.back-b:hover {
		opacity: .6;
	}
	form a.btn:hover:after, .btn.back-b:hover:after {
		transform: translate(3px, 0);
		opacity: .6;
	}
}
@media (hover: none) {
	form a.btn:active, .btn.back-b:active {
		opacity: .6;
	}
	form a.btn:active:after, .btn.back-b:active:after {
		transform: translate(3px, 0);
		opacity: .6;
	}
}
.required {
	color: #de003d;
	font-size: smaller;
	display: inline-block;
	margin-left: 8px;
}
.optional {
	color: #848484;
	font-size: smaller;
	display: inline-block;
	margin-left: 8px;
}
.required:before, .required:after,
.optional:before, .optional:after {
	display: inline-block;
	font-size: smaller;
}
.required:before,
.optional:before {
	content: "（";
}
.required:after,
.optional:after {
	content: "）";
}
.flex {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 50px;
	gap: 24px 48px;
}
.btn.reset-b, .btn.submit-b {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 300px;
	text-align: center;
	position: relative;
	border: 2px solid #004ca0;
	background: #fff;
	border-radius: 999px;
	padding: 10px 24px 12px;
	font-size: clamp(1rem, 0.586rem + 0.86vw, 1.125rem);
	font-weight: bold;
	transition: .3s;
	cursor: pointer;
	justify-content: center;
	gap: 24px;
}
.btn.reset-b, .btn.reset-b.revise {
	font-size: 1.0em;
	color: #666;
	border: 2px solid #666;
	font-weight: normal;
}
.btn.submit-b {
	border: 2px solid #de003d;
	color: #de003d;
	position: relative;
	width: 100%;
	font-size: 1em;
	min-width: 240px;
	opacity: 0;
}
.btn.submit-b:after {
	content: "\f0a9";
	font-weight: 900;
	font-family: "Font Awesome 6 Free";
	font-size: 1.25em;
	color: #de003d;
	position: relative;
	margin-left: 0.5em;
	transition: .3s;
	display: inline-block;
	margin-bottom: -2px;
	opacity: 0;
}
.btn.submit-b:disabled {
	pointer-events: none;
	cursor: auto;
	opacity: 0.3;
}
.btn.submit-b:disabled:after {
	opacity: 0.3;
}
.btn.submit-b:not(:disabled) {
	opacity: 1;
	pointer-events: auto;
}
.btn.submit-b:not(:disabled):after {
	opacity: 1;
}
.btn.reset-b.revise:before {
	content: "\f0a8";
	font-weight: 900;
	font-family: "Font Awesome 6 Free";
	font-size: 1.25em;
	color: #666;
	position: relative;
	margin-left: 0.5em;
	transition: .3s;
	display: inline-block;
	margin-bottom: -2px;
}
@media (hover: hover) {
	button.btn:not(:disabled):hover {
		transform: scale(1.02);
	}
	button.btn.submit-b:not(:disabled):hover {
		transform: scale(1.05);
	}
	button.btn.submit-b:not(:disabled):hover:after {
		transform: translate(3px, 0);
	}
}
@media (hover: none) {
	button.btn:not(:disabled):active {
		transform: scale(1.02);
	}
	button.btn.submit-b:not(:disabled):active {
		transform: scale(1.05);
	}
	button.btn.submit-b:not(:disabled):active:after {
		transform: translate(3px, 0);
	}
}
/*--- contact, disposal-contact (form) ---*/
/*--- other ---*/
.align-c {
	text-align: center;
}
.align-r {
	text-align: right;
}
.msg {
	color: #de003d;
}
.bold {
	font-weight: bold;
}
/*--- other ---*/
@media screen and (min-width: 1920px){
	body[id^='page_'] #page_title {
		background-size: cover;
	}
}
@media screen and (max-width: 1500px) {
	#breadcrumbs > div, .sub_container, #vision .catch {
		width: 95%;
	}
	#page_title h1 {
		padding-left: 2.5%;
	}
}
@media screen and (max-width: 1200px) {
	#vision {
		padding: 50px 0 80px;
	}
	#vision .message > div:first-child, #vision .message > div:last-child {
		width: calc(50% - 20px);
	}
}
@media screen and (max-width: 1100px) {
	#vision .catch br {
		display: none;
	}
	#vision .message {
		margin-top: 20%;
	}
}
@media screen and (max-width: 960px) {
	#vision {
		padding-top: 45px;
	}
	#page_title {
		min-height: 350px;
	}
	#page_company .sub_container .flex {
		flex-wrap: wrap;
	}
	#page_company .sub_container .flex > div {
		width: 85%;
		max-width: 540px;
	}
	/*--- business ---*/
	#page_business #ippan-gas {
		scroll-margin-top: 140px;
	}
	/*--- business ---*/
}
@media screen and (max-width: 768px) {
	h2, h3 {
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	h2.genre {
		padding: 16px 1.5em 20px;
	}
	.sub_container {
		margin: 72px auto 0;
	}
	.sub_container table tr, .sub_container table tr th, table tr td {
		display: block;
		width: 100%;
	}
	.sub_container table tr:has(th[rowspan]) + tr {
		border-top: 1px solid #ddd;
	}
	.sub_container table tr:has(> th):not(:has(> :not(th))) {
		display: none;
	}
	.sub_container table tr th {
		text-align: left;
		max-width: inherit;
		white-space: normal;
		padding: 1rem;
	}
	.sub_container table tr td {
		padding: 1.25rem 1rem 0;
	}
	.sub_container table tr td + td {
		padding-top: 1.5rem;
	}
	.sub_container table tr td:last-of-type {
		padding-bottom: 1rem;
	}
	/*.sub_container table tr th[data-heading],*/
	.sub_container table tr td[data-heading] {
		width: 100%;
	}
	.sub_container table tr:has(td) + tr:has(th) {
		margin-top: 2rem;
	}
	/*.sub_container table tr th[data-heading]::before,*/
	.sub_container table tr td[data-heading]::before {
		content: attr(data-heading);
		font-weight: bold;
		width: 100%;
		max-width: 7.5em;
		display: block;
		padding: 4px 12px;
		margin-right: 1em;
		border: 2px solid #004ca0;
		color: #004ca0;
		border-radius: 5px;
		text-align: center;
		min-width: 0;
		margin-bottom: 0.5em;
		font-size: 0.925em;
	}
	.sub_container table.inline-table tr td[data-heading]::before {
		display: inline-block;
	}
	.sub_container .flexbox {
		flex-wrap: wrap;
		gap: 24px;
		justify-content: center;
	}
	.sub_container .flexbox > div {
		width: fit-content;
		max-width: 480px;
	}
	.sub_container .flexbox > div {
		width: 85%;
	}
	.sub_container, #vision .catch {
		width: 90%;
	}
	#page_title {
		min-height: 250px;
	}
	#page_title::after {
		width: 70%;
	}
	#page_title h1 {
		padding-left: 5%;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	#page_company #page_title {
		background-size: 120%;
		background-position: bottom 16% right 65%;
	}
	#page_business #page_title {
		background-size: 120%;
		background-position: left 0% bottom 65%;
	}
	#page_disposal #page_title {
		background-size: 102%;
	}
	#page_contact #page_title {
		background-size: 100%;
		background-position: right bottom;
	}
	#page_privacy #page_title {
		background-size: 140%;
		background-position: right 100% bottom 30%;
	}
	#vision {
		background: #f4f4f4 url(../img/sub/back_vision_sp.jpg) no-repeat top -80% center;
		background-size: 100% auto;
	}
	#vision .catch {
		line-height: 1.5;
	}
	#vision .message {
		display: block;
		margin-top: 30%;
		max-width: 600px;
	}
	#vision .message > div:first-child, #vision .message > div:last-child {
		width: 100%;
	}
	#vision .message > div:first-child {
		text-align: center;
	}
	#vision .message > div:last-child {
		margin-top: 35px;
	}
	.designation, .designation span {
		display: block;
	}
	.designation span:nth-child(even) {
		width: 100%;
		margin-top: 10px;
		padding-left: 0;
	}
	.designation span:nth-child(3) {
		margin-top: 30px;
	}
	.designation span:first-child {
		margin-bottom: 0;
	}

	/*--- business ---*/
	#page_business table.centering tr td {
		text-align: left;
	}

	/*--- business ---*/
	/*--- contact, disposal-contact(form) ---*/
	.sub_container form table tr th, .sub_container form table tr td, .sub_container form table tr td input[type="text"], .sub_container form table tr td input[type="email"], .sub_container form table tr td input[type="tel"], .sub_container form table tr td textarea {
		width: 100%;
	}
	.sub_container form table tr td:has(input[type="checkbox"]) {
		text-align: center;
	}
	/*--- contact, disposal-contact(form) ---*/
}
@media screen and (max-width: 640px) {
	#vision {
		background-size: 140%;
	}
	#vision .message {
		display: block;
		margin-top: 30%;
	}

	/*--- contact, disposal-contact(form) ---*/
	body[id="page_disposal"] .sub_container .flex:has(.btn),
	body[id="page_contact"] .sub_container .flex:has(.btn) {
		flex-wrap: wrap;
		gap: 32px;
	}
	.btn.submit-b, .flex div:has(.btn.submit-b) {
		order: 1;
	}
	.btn.reset-b, .btn.reset-b.revise, .flex div:has(.btn.reset-b) {
		order: 2;
		width: auto;
	}
	.btn.back-b {
		margin: 32px auto 0;
	}
	/*--- contact, disposal-contact(form) ---*/
}
@media screen and (max-width: 479px) {
	#page_company #page_title {
		background-size: 150%;
		background-position: bottom 0 right 35%;
	}
	#vision {
		background: #f4f4f4 url(../img/sub/back_vision_sp.jpg) no-repeat top -16% center;
		background-size: 140%;
	}

}