:root {
	--color-bg: white;
	--color-text: black;
	--color-accent1: #006600;
	--color-accent2: #24af24;
	--color-warning: #FFD000;
	--color-warning2: #FF6A00;
	--color-light: #f5f5f5;
	--color-grey: #AEAEAE;
	--color-grey-menu: #F0F0F0;
	--color-grey-light: #f7f7f7;
	--color-tag-reform: #FF6A00;
	--color-water: #0063B3;
	--color-wine: #BB1E4A;
	--width-content: 1280px;
	--width-safe-padding: 15px;
	--btn-shadow: 1px 1px 10px rgba(100, 100, 100, 0.3);
	--btn-gradient-hori: linear-gradient(90deg,rgba(0, 102, 0, 1) 0%, rgba(0, 204, 0, 1) 100%);
	--btn-gradient-hori-02: rgba(0, 102, 0, 1);	/* add arai 2026/03/13 */
	--btn-bg-shift: 0.3s background-position ease;
	/* 投稿タイプのタグ設定 */
	--color-tag-blog: #FF2D62;
	--color-tag-important: #C89900;
	--color-tag-info: #03923E;
	--color-tag-private: #FF6A00;
	--color-tag-office: #2643A4;
	--btn-grad-trans-speed: 0.3s;
	--tag-width-size:120px;
}

.todo {
	border: 1px solid magenta;
}

html, body {
	margin: 0;
	padding: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
}

body.modal-active {
	overflow: hidden;
}

body.modal-active .modal-filter {
	content: "";
	z-index: 100;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
}

.modal-outer:not(.open) {
	display: none;
}

.modal-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	align-items: baseline;
}

.modal-outer {
	z-index: 101;
	position: fixed;
	display: flex;
	flex-direction: column;
	padding: 30px;
	gap: 15px;
	top: 50%;
	left: 50%;
	max-width: 70%;
	max-height: 70%;
	transform: translate(-50%, -50%);
	background: white;
	border-radius: 20px;
}

.modal-content {
	overflow: auto;
	width: min(1000px, 70vw);
}
.btn-modal-close {
	margin-left: auto;
	margin-right: 0;
	width: 36px;
	height: 36px;
	background: url(images/icon-close.svg) center center no-repeat;
	background-size: contain;
}

.modal-content h3 {
	color: var(--color-accent1);
	font-size: 24px;
	margin-top: 30px;
	margin-bottom: 20px;
}

blockquote {
	margin: 0;
	padding: 10px;
}

#modal-gaz-emergency blockquote {
	background: var(--color-grey-light);
}

#modal-gaz-certificate h2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 60px;
}

#modal-gaz-certificate table {
	margin: auto;
	max-width: 600px;
}

#modal-gaz-certificate th {
	font-weight: normal;
	vertical-align: top;
	text-align: left;
}
#modal-gaz-certificate th,
#modal-gaz-certificate td {
	padding: 15px;
}

.certificate-address {
	display: flex;
	gap: 2em;
}
.certificate-address :first-child {
	flex: 0 1 6em;
}

a {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}

h2 {
	font-size: 36px;
}

ul.nolist {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.nolist li {
	margin: 0;
	padding: 0;
}
li {
	line-height: 2;
}

.btn {
	display: inline-block;
	--btn-text-color: var(--color-text);
	background: white;
	padding: 0.7em 1.5em;
	border-radius: 2em;
	color: var(--btn-text-color);
	border: 2px solid var(--btn-text-color);
	line-height: 1;
	text-align: center;
}
.btn:hover {
	text-decoration: none;
}

.btn-default {
	--btn-text-color: var(--color-accent1);
}
.btn-default:hover {
	--btn-text-color: white;
	background: var(--color-accent1);
	border-color: var(--color-accent1);
}

.btn-inverse {
	--btn-text-color: white;
	/* background: var(--btn-gradient-hori); */ /* del arai 2026/03/13 */
	background: var(--btn-gradient-hori-02);	/* add arai 2026/03/13 */
	border-color: white;
	background-size: 200% 100%;
	transition: var(--btn-bg-shift);
}
.btn-inverse:hover {
	background-position: 100% 0;
	background: var(--btn-gradient-hori);	/* add arai 2026/03/13 */
}

.btn-chevron-right {
	position: relative;
	padding-right: 2.5em;
	--chevron-size: 0.5em;
}
.btn-chevron-right::after {
	position: absolute;
	right: 1em;
	top: 50%;
	content: "";
	display: inline-block;
	margin-left: 0.5em;
	border-top: 2px solid var(--btn-text-color);
	border-right: 2px solid var(--btn-text-color);
	height: var(--chevron-size);
	width: var(--chevron-size);
	transform: translateY(-50%) rotate(45deg);
}


.top-cards {
	display: flex;
	justify-content: space-between;
}

.card {
	flex: 0 0 280px;
	background: white;
	border-radius: 11px;
	overflow: hidden;
	box-shadow: 0 2px 5px rgba(100, 100, 100, 0.2);
}

a.card {
	color: black;
}
a.card:hover {
	text-decoration: none;
}

.card-image {
	width: 100%;
  aspect-ratio: 77 / 60;   /* 画像の比率を固定して高さを揃える */
  overflow: hidden;
}

.card img {
	object-fit: cover;      /* ★重要：比率を保ったまま枠を埋め尽くし、余分をカットする */
  display: block;
  width: 100%;
  height: 100%;
}

.card-tag {
	display: flex;
	gap: 1em;
	align-items: center;
	font-size: 10px;
}

.card h3 {
	margin: 10px 0;
	font-weight: bold;
	font-size: 16px;
	line-height: 1.5;
}

.card-text {
	padding: 15px 25px 25px 25px;
}

.card .blog-excerpt {
	font-size: 14px;
}


#TopArrowScrollBtn {
	content: url("images/btn-top-arrow.png");
	position: fixed;
	bottom: 60px;
	right: 20px;
	z-index: 10;
}

p {
	line-height: 2;
}

.page-start {
	--header-main-space: 130px;
	padding-top: var(--header-main-space);
}
.page-start .content-container {
	--width-content: 1225px;
}
/* 2026/03/17 */
.content-container h2{
	margin-bottom:1.0em;
}

.header-container,
.content-container {
	margin: auto;
	max-width: var(--width-content);
	padding-left: var(--width-safe-padding);
	padding-right: var(--width-safe-padding);
}

.header-container {
	padding-top: var(--header-main-space);
}

.page-start section {
	margin-bottom: 100px;
}

.page-start h3 {
	font-size: 28px;
	margin-bottom: 40px;
}
.page-start h3::first-letter {
	color: var(--color-accent1);
}

.footer-container {
	box-sizing: border-box;
	margin:auto;
	padding: 55px 0;
	max-width: var(--width-content);
}

.footer-container.breadcrumbs {
	padding-top: 30px;
	padding-bottom: 30px;
}

/* utilities */

.scroller { /* テーブル用 */
	padding-bottom: 10px;
	overflow-x: auto;
}

.text-center {
	text-align: center;
}

.tag {
	display: inline-block;
	padding: 5px 10px;
	background-color: lightgrey;
	color: white;
	font-size: 10px;
	border-radius: 2em;
	min-width: 5em;
	text-align: center;
	width:var(--tag-width-size);
}

/* header */

header {
	background-color: white;
	box-sizing: border-box;
	width: 100%;
	z-index: 99;
	border-bottom: 2px solid var(--color-grey-light);
}

header .logo a {
	display: block;
}

header .submenu-pane a:hover {
	color: var(--color-accent1);
	text-decoration: none;
}

.header-sep {
	height: 2px;
	border: none;
	margin: 0;
	background-color: var(--color-light);
}

.header-pc {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 110px;
}

.pc-nav {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.pc-nav a:not(.btn) {
	color: var(--color-text);
}

.pc-nav-first-links {
	display: flex;
	justify-content: flex-end;
	gap: 20px;
	font-size: 12px;
}

.pc-nav-links {
	display: flex;
	justify-content: flex-end;
	align-items: baseline;
	gap: 25px;
}

.pc-nav-links .btn {
	font-size: 13px;
}

.pc-nav-links .submenu {
	position: relative;
}
.pc-nav-links .submenu  .submenu-pane {
	display: none;
}
.pc-nav-links .submenu.open .submenu-pane /* touch対応 */
{
	display: block;
	position: absolute;
	left: 0;
	width: 335px;
	padding-top: 15px;
}

.pc-nav-links .submenu ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 30px;
	background: var(--color-grey-menu);
	border-radius: 10px;
	font-weight: bold;
}

/* FOOTER */

footer {
	padding: 0 var(--width-safe-padding);
}

footer hr {
	margin: 0 calc(-1 * var(--width-safe-padding));
	height: 1px;
	border: none;
	background-color: var(--color-grey);
}

footer a {
	color: var(--color-text);
}

/* .footer-container.breadcrumbs { */ 	/* del arai 2026/03/13 */
.footer-container .breadcrumbs {		/* add arai 2026/03/13 */	
	padding-bottom: 30px;
	font-size: 12px;
	/* add arai 2026/03/13 */
	display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: flex-start;
}

.breadcrumbs ol {
	display: flex;
	gap: 1em;
	list-style: none;
}

.footer-cols {
	display: flex;
	justify-content: space-between;
}

footer address {
	margin-top: 23px;
	font-style: normal;
	font-size: 14px;
}

.footer-phone {
	/* font-family: "Aoboshi One", serif; */
	font-size: 33px;
	font-weight: bold;
	display: flex;
	align-items: baseline;
	gap: 15px;
	color: black;
}
.footer-phone::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 20px;
	background: url(images/icon-phone.svg) center center no-repeat;
	background-size: cover;
}

.footer-cols nav {
	display: flex;
	gap: 70px;
}

.footer-nav {
	--color-chevron: var(--color-text);
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.footer-nav a {
	font-weight: bold;
}
.footer-nav a::before {
	content: "";
	display: inline-block;
	border-top: 2px solid var(--color-chevron);
	border-right: 2px solid var(--color-chevron);
	width: 8px;
	height: 8px;
	margin-right: 16px;
	transform: rotate(45deg);
}
.footer-nav a.link-top {
	--color-chevron: var(--color-accent1);
	color: var(--color-accent1);
}

.footer-nav-sub {
	margin-top: -10px !important;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.footer-nav-sub a {
	padding-left: 2em;
	font-size: 14px;
	font-weight: normal;
}
.footer-nav-sub a::before {
	width: 5px;
	height: 5px;
}

.footer-last {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	padding: 23px 0;
}
.footer-privacy-policy {
	display: flex;
	gap: 1.8em;
}

/* TOP PAGE */

/* トップキャッチ */

.top-catch {
	position: relative;
}

.top-catch::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% + 15px);
	right: 0;
	background-image: url(images/top-swipe_fade.svg);
	background-position: left center;
	background-repeat: no-repeat;
}

.top-catch .content-container {
	position: relative;
	max-width: 1440px;
	display: flex;
	align-items: center;
	justify-content: end;
	height: 690px;
	background-image: url(images/top-catch.png);
	background-position: left 40px center;
	background-repeat: no-repeat;
}

.top-catch h2 {
	font-size: 54px;
	line-height: 1.8;
	margin-right: 100px;
}

@keyframes scroll-indicator {
	0% {
		transform: translate(0, 3px);
		opacity: 1;
	}

	100% {
		transform: translate(calc(var(--bar-length) - var(--stub-length)), 3px);
		opacity: 0;
	}
}

.top-scroll-indicator {
	--bar-length: 170px;
	--stub-length: 34px;
	position: absolute;
	bottom: 15px;
	right: 115px;
	width: var(--bar-length);
	height: 20px;
	border-bottom: 5px solid var(--color-grey-light);
	transform-origin: bottom right;
	transform: rotate(90deg);
	line-height: 1;
}
.top-scroll-indicator::after {
	content: "";
	width: var(--stub-length);
	height: 7px;
	display: block;
	transform: translateY(3px);
	background-color: var(--color-accent1);
	animation: 1.5s scroll-indicator ease infinite;
}
.top-scroll-indicator::before {
	content: "SCROLL";
	font-size: 14px;
}

/* gaz usage */

.top-gazusage {
	background-color: #e9f7e9;
	padding: 115px 0 77px 0;
}

.top-gazusage-title {
	margin-bottom: 45px;
	text-align: center;
}

.top-gazusage-title h2 {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.8em;
	margin-bottom: 22px;
}
.top-gazusage-title h2::before{
	content: url(images/icon-contract.svg);
}

.top-gazusage-buttons {
	display: flex;
	gap: 40px;
	justify-content: space-between;
}

.top-gazusage .btn {
	flex: 1;
	font-size: 24px;
	font-weight: bold;
	border: 3px solid white;
	box-shadow: var(--btn-shadow);
	padding: 40px;
	border-radius: calc(40px + 1em);
	--chevron-size: 0.7em;
}
.top-gazusage-buttons .btn::after {
	border-width: 3px;
	right: 2em;
}

@property --btn-move-gradient {
	syntax: '<color>';
	initial-value: #006600; /* can't use var() here */
	inherits: false;
}

.top-gazusage-buttons .btn-move {
	--btn-text-color: white;
	background: linear-gradient(90deg, var(--color-accent1), var(--btn-move-gradient));
	transition: --btn-move-gradient var(--btn-grad-trans-speed)  ease;
}
.top-gazusage-buttons .btn-move:hover {
	--btn-move-gradient: #00CC00;
}

@property --btn-credit-gradient {
	syntax: '<color>';
	initial-value: #24AF24; /* can't use var() here */
	inherits: false;
}
.top-gazusage-buttons .btn-credit {
	--btn-text-color: white;
	background: linear-gradient(90deg, var(--color-accent2), var(--btn-credit-gradient));
	transition: --btn-credit-gradient var(--btn-grad-trans-speed)  ease;
}
.top-gazusage-buttons .btn-credit:hover {
	--btn-credit-gradient: #FFD900;
}

.top-gazusage-emergency {
	margin: 80px 100px 0 100px;
	padding: 50px;
	border-radius: 5px;
	background: white;
	display: flex;
	gap: 24px;
	flex-direction: column;
	align-items: center;
}

.top-gazusage-emergency h2 {
	display: flex;
	align-items: center;
}
.top-gazusage-emergency h2::before {
	margin-right: 15px;
	content: url(images/icon-warning.svg);
}

@property --btn-warning-gradient1 {
	syntax: '<color>';
	initial-value: #FFD000; /* can't use var() here */
	inherits: false;
}

@property --btn-warning-gradient2 {
	syntax: '<color>';
	initial-value: #FFD000; /* can't use var() here */
	inherits: false;
}
.btn-warning {
	--btn-text-color: black;
	box-sizing: border-box;
	width: 600px;
	background: linear-gradient(90deg, var(--btn-warning-gradient1), var(--btn-warning-gradient2));
	transition: color,--btn-warning-gradient1,--btn-warning-gradient2 var(--btn-grad-trans-speed) ease;
}
.btn-warning:hover {
	--btn-warning-gradient1: #FF6A00;
	--btn-warning-gradient2: #FF2583;
	--btn-text-color: white;
}
.btn-warning::after {
	border-width: 3px;
	right: 2em;
}

/* services */

.top-services {
	background-color: var(--color-grey-light);
	padding: 110px var(--width-safe-padding);
}

.top-services-title {
	margin-bottom: 55px;
}

.top-services h2 {
	margin-bottom: 32px;
}

.services-icons {
	display: grid;
	grid-template-columns: repeat(6, 180px);
	justify-content: space-between;
}

@property --btn-gradient {
	syntax: '<color>';
	initial-value: #006600; /* can't use var() here */
	inherits: false;
}

.service {
	box-sizing: border-box;
	background: linear-gradient(180deg,var(--color-accent1), var(--btn-gradient));
	transition: --btn-gradient var(--btn-grad-trans-speed) ease;
	border: 3px solid white;
	color: white;
	box-shadow: 0 2px 5px rgba(100, 100, 100, 0.5);
	border-radius: 10px;
	font-weight: bold;
	padding: 30px 10px 20px 10px;
	display: flex;
	flex-direction: column;
	text-align: center;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	width: 200px; /* 2026/03/16 */	
}
.service::before {
	content: "";
	height: 100px;
	width: 100px;
	border-radius: 50px;
	background: white;
	box-shadow: inset 3px 3px 5px rgba(100, 100, 100, 0.5);
	background-position: center center;
	background-repeat: no-repeat;
}
.service::after {
	content: "";
	width: 12px;
	height: 12px;
	border-right: 3px solid white;
	border-bottom: 3px solid white;
	transform: rotate(45deg);
}
.service:hover {
	--btn-gradient: var(--color-accent2);
	text-decoration: none;
}

.service-icon-gaz::before {
	background-image: url(images/service-icon-flame.svg);
}

.service-icon-electricity::before {
	background-image: url(images/service-icon-lightbulb.svg);
}

.service-icon-kitchen::before {
	background-image: url(images/service-icon-kitchen.svg);
}

.service-icon-house::before {
	background-image: url(images/service-icon-house.svg);
}

.service-icon-water::before {
	background-image: url(images/service-icon-water.svg);
}

.service-icon-treatment::before {
	background-image: url(images/service-icon-treatment.svg);
}


/* リフォーム */

.top-reform {
	padding: 115px var(--width-safe-padding) 130px var(--width-safe-padding);
}

.top-reform  .btn {
	font-size: 13px;
	font-weight: bold;
}

.top-reform-title {
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin-bottom: 60px;
}
.top-reform-title h2 {
	margin-bottom: 30px;
}

/* news */

.top-news {
	padding-top: 115px;
	padding-bottom: 130px;
	background-color: var(--color-grey-light);
}

.top-news-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
}

.top-news .btn {
	font-size: 13px;
	font-weight: bold;
}

.news-list li {
	display: flex;
	padding: 30px 0 !important;
	border-bottom: 1px solid black;
	line-height: 2;
}

.post-date {
	/* flex: 0 1 215px;*/
	flex: 0 1 120px;	/* 2026/03/16 */ 
	font-size: 12px;
}
/* 2026/03/16 */
.post-items{
	display:flex;
	flex-direction: row;
	line-height:1.8;
	gap:0.4em;
}

.news-title-link {
	color: black;
}

.news-title-link:hover {
	color: var(--color-accent1);
	text-decoration: underline;
}

/* message */

.message {
	padding-top: 107px;
	padding-bottom: 80px;
	background: url(images/message-pic.jpg) right bottom no-repeat;
	background-size: 720px;
}

.message-inner {
	max-width: 1000px;
	margin-right: 260px;
}

.message h2 {
	margin-bottom: 45px;
}

.message p {
	margin: 0;
	font-size: 18px;
	line-height: 1.8;
}

.message .message-sign {
	display: block;
	margin-left: auto;
}

/* company info */

.compa-info {
	padding: 85px var(--width-safe-padding) 125px var(--width-safe-padding);
	background: url(images/company-img1.jpg) left top no-repeat;
	background-size: 700px;
}

.compa-info .content-container {
	display: flex;
	/* border: 1px solid red; */
}

.compa-info h2 {
	margin-bottom: 45px;
}

.compa-info p {
	line-height: 1.8;
}

.compa-info-inner {
	margin-left: auto;
	/* border: 1px solid blue; */
}

.compa-info-buttons {
	display: flex;
	gap: 30px;
}

.btn-compa-info {
	--btn-text-color: white;
	flex: 0 0 300px;
	box-sizing: border-box;
	font-size: 21px;
	font-weight: bold;
	background: var(--color-accent1);
	border: 3px solid white;
	padding-top: 1em;
	padding-bottom: 1em;
	box-shadow: var(--btn-shadow);
}

.btn-compa-info:hover {
	background: var(--btn-gradient-hori);
}

/* letter from italy */

.letter-from-italy {
	padding: 120px 0;
	background: var(--color-accent1) url(images/letter-img.jpg) bottom left no-repeat;
	background-size: 800px;
}

.italia-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 45px;
}

.letter-from-italy h2 {
	color: white;
}

.italia-title a {
	font-size: 13px;
	font-weight: bold;
}

.italia-title a.btn-default:hover {
	border-color: white;
}

.letter-from-italy .content-container {
	box-sizing: border-box;
}


/** demo styles **/

.page-company-message {
	--message-width: 55%;
	background: url(images/message-pic2.jpg) left top no-repeat;
}

.message-with-pic {
	padding-top: 30px;
	padding-bottom: 100px;
}

.message-with-pic .message-inner {
	margin-left: auto;
	max-width: var(--message-width);
}

/* column layouts */
.columns {
	display: flex;
	align-items: flex-start;
}

.columns.same-height {
	align-items: stretch;
}

.columns>* {
	flex: 1;
}

.col-gap30 {
	gap: 30px;
}


/* table layouts */

td {
	padding: 10px;
}

.table-round {
	border: 1px solid black;
	border-radius: 10px;
	overflow: hidden;
}
.table-round table {
	border-spacing: 0;
	border-collapse: collapse;
	width: 100%;
}
.table-round tr:not(:first-child) td {
	border-top: 1px solid black;
}
.table-round td:not(:last-child) {
	border-right: 1px solid black;
}

.table-definition table {
	width: 100%;
	border-spacing: 0;
	border-collapse:collapse;
}

.table-definition td {
	padding: 30px 20px;
	vertical-align: top;
	border-bottom: 1px solid black;
}
.table-definition td:first-child {
	font-weight: bold;
	width: 20%;
}

/* ページング用 */

.navigation.pagination {
	padding-top: var(--padding);
	display: flex;
	justify-content: center;
	gap: 2em;
}

.navigation.pagination .page-numbers {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	min-width: 50px;
	border-radius: 30px;
	color: black;
	text-decoration: none;
	font-size: 18px;
	font-weight: bold;
}
.navigation.pagination .page-numbers:hover,
.navigation.pagination .page-numbers.current {
	background: var(--color-accent1);
	color: white;
}

.navigation.pagination .page-numbers.next,
.navigation.pagination .page-numbers.prev {
	padding: 0 1em;
	color: var(--color-accent1);
	border: 3px solid var(--color-accent1);
}
.navigation.pagination .page-numbers.next:hover,
.navigation.pagination .page-numbers.prev:hover {
	color: white;
}

/* 投稿のタイトルと本文の間に表示するタグ＋日付用 */

.post-meta {
	display: flex;
	align-items: center;
	gap: 1em;
	margin-top: 30px;
	font-size: 12px;
}

.single article img {
	display: block;
	margin: 30px auto;
	border-radius: 15px;
	max-width: 480px;
}


/* 投稿のタグの設定 */

.tag {
	width: 80px;
}

.tag.tag-blog {
	background: var(--color-tag-blog);
}
.tag.tag-info {
	background: var(--color-tag-info);
}
.tag.tag-important {
	background: var(--color-tag-important);
}
.tag.tag-private {
	background: var(--color-tag-private);
}
.tag.tag-office {
	background: var(--color-tag-office);
}

/* reform + letter */

ul.grid-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin: 50px 0 80px 0;
}

/* 画像の調整 */
.grid-item .post-thumbnail {
  width: 100%;
  aspect-ratio: 77 / 60;   /* 画像の比率を固定して高さを揃える */
  overflow: hidden;
  border-radius: 10px;
  background-color: #f0f0f0; /* 画像読み込み前や無い時の背景色 */
	margin-bottom: 20px;
}

/* 中の画像自体の設定 */
.grid-item .post-thumbnail img {
  object-fit: cover;      /* ★重要：比率を保ったまま枠を埋め尽くし、余分をカットする */
  display: block;
  width: 100%;
  height: 100%;
}

/* 日付の調整 */
.grid-item .post-date {
  font-size: 13px;
  color: black;
	/* font-weight: bold; */
}

.grid-item .post-title {
	color: black;
	font-size: 18px;
	font-weight: bold;
}
.grid-item a:hover {
	text-decoration: none;
}

/* 投稿詳細用 */

.page-letter article,
.page-news article {
	margin-bottom: 100px;
}

/* 2026/03/18 */
.btn-backtolist {
	--btn-text-color: white;
	background: linear-gradient(90deg, var(--color-accent1), var(--btn-move-gradient));
	transition: --btn-move-gradient var(--btn-grad-trans-speed)  ease;
	background-size: 200% 100%;
    padding: 1.5em 3em;	
	font-weight: bold;
	font-size: 21px;

	/* --btn-text-color: white; */
	/* flex: 0 0 300px;
	box-sizing: border-box;
	font-size: 21px;
	font-weight: bold;
	background: var(--color-accent1);
	border: 3px solid white;
	padding-top: 1em;
	padding-bottom: 1em;
	box-shadow: var(--btn-shadow);  */
}
.btn-backtolist-old {
	padding: 1em 3em;
	--btn-text-color: white;
	/* background: var(--btn-gradient-hori); */
	background: var(--btn-gradient-hori-02);	/* 2026/03/17 */
	border-color: white;
	background-size: 200% 100%;
	transition: var(--btn-bg-shift);
	box-shadow: var(--btn-shadow);
	font-size: 18px;
}

.btn-backtolist-another {
	box-sizing: border-box;
	width: 600px;
	font-size: 28px;
	font-weight: bold;
}

.btn-backtolist:hover {
	background-position: 100% 0;
	background: var(--btn-gradient-hori);	/* 2026/03/17 */
}

/* supply */ /* 2026/03/16 */
.supply-image{
	display:block;
}
.supply-image-sp{
	display:none;
}

/* コーディングサンプル用 */

.demo-LPgaz .table-round {
	width: fit-content;
}
.demo-LPgaz td{
	min-width: 250px;
}
.demo-LPgaz td:first-child {
	width: 120px;
	text-align: center;
	font-weight: bold;
}

.demo-LPgaz tr:first-child td {
	text-align: center;
	font-weight: bold;
}

.content-3parts {
	display: grid;
	gap: 15px;
	grid-template-columns: auto min-content;
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"title pic"
		"paragraph pic";
}

.content-3parts>.part-title,
.content-3parts>h4 {
	grid-area: title;
	font-size: 16px;
}
.content-3parts>.part-text,
.content-3parts>p {
	margin: 0;
	grid-area: paragraph;
}


.content-3parts>.part-image,
.content-3parts>img {
	grid-area: pic;
}

.demo-water .content-3parts h4::before {
	content: "■ ";
	color: var(--color-water);
}

.demo-treatment .content-3parts h3 {
	margin-bottom: 0;
}

/* ========================================
   コンポーネント: 立体カード
   説明: 影と角丸を持つ白いカード
   用途: お問い合わせカード、宣言カード、情報ボックス
   バリアント: 中央寄せには .text-center を追加
   HTML: <div class="card-elevated">
           <h3>タイトル</h3>
           <p>コンテンツ...</p>
         </div>
   ======================================== */

.card-elevated {
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  padding: 40px 30px;
  margin: 0 auto;
}

.card-elevated.text-center {
  text-align: center;
}

/* ========================================
   コンポーネント: 角丸テーブルコンテナ
   説明: テーブルを角丸で囲むラッパーdiv
   用途: <div class="table-round-th">
            <table>...</table>
          </div>
   ======================================== */

.table-round-th {
  border: 1px solid #000;
  border-radius: 10px;
  align-self: start;
  overflow: hidden;
}

.table-round-th table {
  width: 100%;
  border-collapse: collapse;
}

.table-round-th th,
.table-round-th td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  vertical-align: top;
}

.table-round-th th:last-child,
.table-round-th td:last-child {
  border-right: none;
}

.table-round-th tbody tr:last-child th,
.table-round-th tbody tr:last-child td {
  border-bottom: none;
}


/* ============================================================
   コンポーネント: ドット区切りリスト (dotted-detail-list)
   ラベルと詳細の間にドットリーダーを表示するテーブル風リスト

   構造:
   <ul class="dotted-detail-list">
     <li>
       <span class="detail-label">ラベル</span>
       <span class="detail-text">詳細テキスト...</span>
     </li>
   </ul>
============================================================ */

.dotted-detail-list {
  padding: 0;
}

.dotted-detail-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 15px;
}

.dotted-detail-list li::before {
  content: "\25A0";
  color: var(--color-accent1);
  flex-shrink: 0;
}

.dotted-detail-list .detail-label {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 150px;
  font-weight: bold;
  white-space: nowrap;
  gap: 10px;
}

.dotted-detail-list .detail-label:has(~ .detail-text)::after {
  content: "";
  flex: 1;
  height: 2px;
  background-image: repeating-linear-gradient(
    to left,
    #000 0px,
    #000 2px,
    transparent 2px,
    transparent 14px
  );
}

.dotted-detail-list .detail-text {
  flex-shrink: 1;
  min-width: 150px;
}

/* ========================================
   コンポーネント: お問い合わせカード
   説明: 電話番号・会社名・住所を表示するお問い合わせ情報カード
   レイアウト: 大きな電話番号とアイコンを中央に配置
   用途: parts/contact-card.php テンプレートから読み込む
   HTML: <section class="contact-card">
           <div class="card-elevated text-center">
             <h3>まずはお見積もりから</h3>
             <p class="phone-number"><a href="tel:...">...</a></p>
             <p class="company-name">...</p>
             <address class="contact-details">...</address>
           </div>
         </section>
   ======================================== */

.contact-card h3::first-letter {
  color: inherit !important;;
}

.contact-card h3 {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.phone-number {
  margin: 20px 0;
}

.phone-number a {
  font-size: 2rem;
  font-weight: bold;
  color: #000;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.phone-number a::before {
  content: "";
  width: 1.2em;
  height: 0.8em;
  background-image: url(images/icon-contact.svg);
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
  margin-top: 0.1em;
}

.company-name,
.contact-details {
  font-size: 1rem;
  margin: 10px 0;
  font-style: normal;
}

/* ========================================
   コンポーネント: 四角バレットリスト
   用途: <ul class="list-square"><li>項目</li></ul>
   ======================================== */

.list-square {
  list-style: none;
}

.list-square li::before {
  content: "\25A0";
  color: var(--color-accent1);
  margin-right: 10px;
}

/* ========================================
   コンポーネント: チェックマーク丸アイコンリスト
   用途: <ul class="list-check"><li>項目</li></ul>
   ======================================== */

.list-check {
  list-style: none;
}

.list-check li::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url(images/check-circle.svg);
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 10px;
  vertical-align: middle;
}

/* ==========================================================================
   コンポーネント: アウトラインボタン (.btn-outline)
   用途:
   <button type="button" class="btn-outline">ボタンテキスト</button>
   状態: :hover — ボーダー色で背景を塗りつぶす
   ========================================================================== */

.btn-outline {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 48px;
  border: 2px solid var(--color-accent1);
  border-radius: 9999px;
  background: transparent;
  color: var(--color-accent1);
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}

.btn-outline::after {
  content: "";
  position: absolute;
  right: 12px;
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, 1px);
}

/* ========================================
   コンポーネント: ページキャッチコピー
   説明: 緑のアクセントバー付きの強調サブタイトル
   HTML: <p class="tagline">キャッチコピーテキスト</p>
   ======================================== */

.tagline {
	margin: 50px 0;
	border-left: 7px solid var(--color-accent1);
	padding-left: 10px;
	font-size: 24px;
}

/* ========================================
   2. ユーティリティ
   ======================================== */

/* --------------------------------------------------
   ユーティリティ: 記事内画像配置
   バリアント: image-right、image-left、image-gallery
   用途: <article class="image-right">
            <div>...</div>
            <figure><img></figure>
          </article>
   -------------------------------------------------- */

.image-right {
	/* 20266/03/17 */
  /* display: grid; */
  grid-template-columns: 1fr auto;
  gap: 30px;
}

.image-right figure {
  order: 2;
}
.image-right > :not(figure) {
  order: 1;
}

.image-left {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 30px;
}

.image-left figure {
  order: 1;
}
.image-left > :not(figure) {
  order: 2;
}

.image-gallery {
  display: flex;
  gap: 20px;
}

.image-gallery-centered {
  padding-top: 20px;
  display: flex;
  justify-content: space-evenly;
  gap: 20px;
}

/* --------------------------------------------------
   ユーティリティ: レスポンシブグリッドレイアウト
   備考: 汎用ユーティリティ（サービスナビには使用しない）
   -------------------------------------------------- */

.grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.grid-2col.gap-sm {
  gap: 15px;
}
.grid-2col.gap-lg {
  gap: 40px;
}


/* --------------------------------------------------
   ユーティリティ: テーブルセルのスタイル
   -------------------------------------------------- */

.no-border-bottom {
  border-bottom: none !important;
}
.bg-pink {
  background-color: #fff1f1;
}
.bg-blue {
  background-color: #ebf5fc;
}

/* --------------------------------------------------
   ユーティリティ: テキスト配置
   -------------------------------------------------- */

.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-indent {
  text-indent: 1em;
}

/* --------------------------------------------------
   ユーティリティ: 重要テキスト
   -------------------------------------------------- */

.text-important {
  color: #ff0000;
  font-weight: bold;
}

/* --------------------------------------------------
   ユーティリティ: 視覚的に非表示
   用途: <span class="visually-hidden">スクリーンリーダー専用テキスト</span>
   -------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}