/* イタリアからの手紙一覧ページ */

/* リスト全体のスタイル */

/* タイトルの調整 */
.page-letter .post-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin: 5px 0;
  line-height: 1.4;
}

/* リンクの下線を消す */
.page-letter .post-item a {
  text-decoration: none;
}

/* 【スマホ対応】画面が狭いときは1列にする */
@media (max-width: 767px) {
  .page-letter .post-item {
    width: 100%;
  }
}

/* === お知らせ === */

.page-news .news-list {
	margin: 100px 0;
}

.page-news li,
.page-news li>div {
	display: flex;
	align-items: baseline;
}
.page-news li>div {
	gap: 1em;
}

.page-news li a {
	color: black;
}
.page-news li a:hover {
	color: var(--color-accent1);
}

.page-news time {
	font-size: 12px;
	font-weight: bold;
}

/* === リフォーム === */

.page-reform h2 {
	margin-bottom: 50px;
}

.reform-see-achievements {
	margin-top: 90px;
	text-align: center;
}

.reform-grid {
	display: grid;
	gap: 75px;
	grid-template-columns: repeat(2, 1fr);
	margin-bottom: 90px;
}
.reform-grid h4::first-letter {
	color: var(--color-accent1);
}
.reform-grid img {
	border-radius: 15px;
}

.reform-case-meta {
  margin-bottom: 30px;
}

/* リクルート */

ul.recruit-menu {
	margin: 40px 0 70px 0;
	padding: 40px;
	border-radius: 10px;
	background: var(--color-grey-light);
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
}

.recruit-menu li a {
	display: inline-flex;
	gap: 0.5em;
	padding: 10px 20px;
	border: 1px solid var(--color-accent1);
	border-radius: 3em;
	background: white;
	font-weight: bold;
	color: var(--color-accent1);
	box-shadow: var(--btn-shadow);
  align-items: center;
}
.recruit-menu li a::after {
	content: "";
	display: inline-block;
	width:  10px;
	height: 10px;
	border-bottom: 1px solid var(--color-accent1);
	border-right: 1px solid var(--color-accent1);
	transform: translateY(-4px) rotate(45deg);
}
.recruit-menu li a:hover {
	text-decoration: underline;
}

/* recruit table */
.page-recruitment .table-round {
	margin-bottom: 70px;
}
.page-recruitment td {
	padding: 2em;
}

.page-recruitment td:first-child {
	white-space: nowrap;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	background: var(--color-grey-light);
}

/* 2026/03/18 */
.page-recruitment .btn-backtolist {
	box-sizing: border-box;
	width: 600px;
	font-size: 28px;
	font-weight: bold;
}

/* よくあるご質問 */

.page-faq .important {
	font-weight: normal;
	color: red;
}

.page-faq h3::first-letter {
	color: inherit;
}

.page-faq .footer-phone {
	font-size: 48px;
}
.page-faq .footer-phone::before {
	width: 50px;
	height: 34px;
}

.faq-container {
	margin: 0 0 0 35px;
	padding: 0 0 0 35px;
}

.faq-question::before,
.faq-answer::before {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.faq-question {
	position: relative;
	margin-bottom: 35px;
	font-size: 28px;
	font-weight: bold;
}
h3.faq-question {
  line-height: 1;
}
.faq-question::before {
	position: absolute;
	top: 0;
	left: -50px;
	content: "Q";
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2em;
	height: 2em;
	font-size: 16px;
	font-weight: bold;
	background: var(--color-accent1);
	color: white;
	border-radius: 1em;
}

.faq-answer {
	position: relative;
}
.faq-answer::before {
	position: absolute;
	left: -50px;
	content: "A";
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2em;
	height: 2em;
	font-size: 16px;
	font-weight: bold;
	color: var(--color-accent1);
	border: 1px solid var(--color-accent1);
	border-radius: 1em;
}

.faq-explanation {
	margin: 35px 0 60px 20px;
}

.faq-point {
	margin-bottom: 15px;
	font-size: 16px;
	position: relative;
}
.faq-point figure {
	margin: 0;
}
.faq-point::before {
	position: absolute;
	content: "■";
	left: -1em;
	color: var(--color-accent1);
}

.faq-meters figcaption {
	margin-bottom: 15px;
	font-weight: bold;
}

.faq-meters {
	gap: 15px;
}

.faq-settings {
	margin: 45px 0;
	justify-content: center;
	gap: 45px;
	font-size: 14px;
}

.faq-settings figure {
	margin: 0;
	flex: 0 1 280px;
	display: flex;
	gap: 15px;
	flex-direction: column;
}
.faq-settings figure:not(:last-child) {
	border-right: 1px dotted grey;
	padding-right: 45px;
}

.faq-settings img {
	display: block;
	margin: auto;
}

.page-faq hr {
	margin: 60px 0 85px 0;
	border: none;
	height: 1px;
	background: var(--color-grey);
}

.faq-water {
	justify-content: center;
	align-items: stretch;
	gap: 45px;
	font-size: 14px;
}
.faq-water>* {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
.faq-water>*:not(:last-child) {
	flex: 1;
	padding-right: 45px;
	border-right: 1px dotted grey;
}

.faq-water p {
	margin-top: 0;
}

.faq-water small {
	font-size: 12px;
}

.faq-explanation.water-bothsides .faq-point {
	margin-bottom: 0;
}
.faq-explanation.water-bothsides .part-text {
	padding-right: 2em;
}
.faq-explanation.water-bothsides p {
	margin-top: 0;
	font-size: 14px;
}

/* ショッピング */

.page-shopping .shopping-card {
	margin: 70px 0 160px 0;
	padding: 120px 10vw 30px 10vw;;
	border: 4px solid var(--color-wine);
	border-radius: 20px;
	text-align: center;
}

.page-shopping .shopping-card h3 {
	color: var(--color-wine);
}
.page-shopping .shopping-card h3::first-letter {
	color: inherit;
}

.page-shopping .impact1 {
	font-weight: bold;
}

.page-shopping .impact2 {
	font-weight: bold;
	font-size: 21px;
}
.page-shopping .impact2 a {
	color: var(--color-wine);
	text-decoration: underline;
	word-break: break-all;
}
.page-shopping .impact2 a:hover {
	text-decoration: none;
}

.shopping-pic-btm {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.shopping-pic-btm img {
	align-self: flex-end;
	margin-bottom: 0;
	margin-top: auto;
}

.page-shopping .columns {
	gap: 50px;
}

.page-shopping h3.section-title {
	margin-bottom: 0;
}

.page-shopping p.section-text {
	margin: 25px 0 40px 0;
}

.page-shopping .il-riposino-pic {
	max-width: min(30vw, 380px);
}
.page-shopping .il-riposino-txt {
	align-self: center;
}
.page-shopping .il-riposino-txt h3 {
	margin-bottom: 40px;
}

.page-shopping .slow-food-pic {
	max-width: min(30vw, 380px);
}
.page-shopping .slow-food-txt {
	align-self: center;
}
.page-shopping .slow-food-txt h3 {
	margin-bottom: 40px;
}

/* === お問い合わせ === */

.contact-breadcrumbs {
	--arrow-width: 34px;
	--color-contact-step: #eee;
	display: flex;
	margin: 60px var(--arrow-width) 60px 0;
}

.contact-breadcrumbs .step {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	flex: 1;
	height: 100px;
	padding: 0 20px;
	background: var(--color-contact-step);
	font-weight: bold;
	font-size: 21px;
}
.contact-breadcrumbs .step::after {
	content: "";
	position: absolute;
	top: 0;
	right: calc(-1 * var(--arrow-width));
	bottom: 0;
	width: var(--arrow-width);
	background: transparent url(images/contact-step.png) center right no-repeat;
	z-index: 1;
}
.contact-breadcrumbs .step:nth-child(n+2) {
	padding-left: calc(20px + var(--arrow-width));
}
.contact-breadcrumbs .step.selected {
	--color-contact-step: var(--color-accent1);
	color: white;
}
.contact-breadcrumbs .step.selected::after {
background-image: url(images/contact-step_on.png);
}

contact-breadcrumbs .step small {
	font-size: 14px;
}

.contact-breadcrumbs .step small {
	display: block;
}

.form-row {
	display: flex;
	padding: 18px 0;
	margin: auto;
	max-width: 1100px;
}
.form-row:not(.last-input) {
	border-bottom: 1px solid #d9d9d9;
}

.form-row>* {
	display: flex;
	align-items: flex-start;
	margin: 0  50px;
	max-width: 1010px;
}

.form-row>*:first-child {
	display: flex;
	align-items: center;
	font-weight: bold;
	flex: 0 1 230px;
}
.form-row.required>p>label::after {
	content: "必須";
	margin-left: 1em;
	color: red;
	border: 1px solid red;
	border-radius: 5px;
	padding: 3px 5px;
	font-size: 10px;
}
.form-row>*:nth-child(2) {
	flex: 1;
}

.form-row select,
.form-row input[type=text],
.form-row input[type=email],
.form-row textarea {
	padding: 10px;
	border: 1px solid #C9C9C9;
	border-radius: 5px;
	background: white;
}
.form-row input[name=zipcode] {
	width: 8em;
}
.form-row select[name=prefecture] {
	margin-bottom: 1em;
}

.form-buttons p {
	display: flex;
	justify-content: center;
	gap: 3em;
}

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

.page-contact .btn-submit {
	background: var(--color-accent1);
}

.page-contact .btn-submit:hover {
	background: var(--btn-gradient-hori);
}

.page-contact .btn-reset {
	background: #9D9D9D;
}

.page-contact .btn-reset:hover {
	background: var(--btn-gradient-hori);
}

/* plugin stypes 上書き */
.form-row .wpcf7-form-control-wrap {
	flex: 1;
}

.wpcf7-list-item {
	margin-left: 0;
	margin-right: 1em;
}


/* === 会社案内 === */

.page-about .message-with-pic .content-container {
  display: flex;
  justify-content: flex-end;
}
.page-about .message-with-pic .message-inner {
  margin: 0;
}

.page-about .company-overview .definition-item {
  grid-template-columns: 25% 1fr;
}


.page-about .certifications .heading-note {
  font-size: 0.6em;
  font-weight: normal;
  vertical-align: middle;
}

.page-about .certifications .table-round-th td {
  text-align: center;
}

/* ========================================
   コンポーネント: 事務所所在地
   HTML: <article class="office-card">
           <h4>事務所名</h4>
           <address>住所と電話番号</address>
           <div class="office-map"><iframe>...</iframe></div>
         </article>
   ======================================== */

.page-about .office-card {
  margin: 0;
}

.page-about .office-card h4 {
  font-weight: bold;
  margin-bottom: 10px;
}

.page-about .office-card h4::first-letter {
  color: inherit;
}

.page-about .office-card address {
  font-style: normal;
  font-weight: bold;
  margin-bottom: 15px;
  line-height: 1.6;
}

.page-about .office-card a {
  color: inherit;
  text-decoration: none;
  font-weight: bold;
}

.page-about .office-map {
  margin-top: 15px;
}

.page-about .office-map iframe {
  width: 100%;
  height: 250px;
  border-radius: 8px;
}

/* --------------------------------------------------
   コンポーネント: 定義グリッド
   説明: 用語と定義のペアを2カラムで表示するレイアウト
   用途: 会社情報、仕様一覧、用語集
   HTML: <dl class="definition-grid">
           <div class="definition-item">
             <dt>用語</dt>
             <dd>定義</dd>
           </div>
         </dl>
   -------------------------------------------------- */

/* .definition-grid {
  width: 100%;
  margin-bottom: 80px;
} */
/* 2026/03/17 */
.history-wrapper {
    position: relative;
}

.history-wrapper::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    pointer-events: none;
    transition: opacity 0.3s;
}

.history-wrapper.is-open::after {
    opacity: 0;
}

.definition-item {
  display: grid;
  grid-template-columns: 20% 1fr;
  gap: 20px;
  padding: 30px 20px;
  border-bottom: 1px solid #000;
}

.definition-item dt {
  font-weight: bold;
}

.definition-item dd {
  margin: 0;
}

@media (max-width: 700px) {
	.definition-item {
		display: block;
		padding: 20px;
	}

	.definition-item dt {
		padding-bottom: 0;
		/* margin-bottom: 20px; */
		margin-bottom: 12px;  /* 2026/03/16 */  
		border: none;
	}

	.definition-item dd {
		/* padding-left: 40px; */
		padding-left: 0px; /* 2026/03/16 */    
	}
}

.company-history #history-btn2 {
  display: none;
}

.company-history .history-hidden {
  display: none;
}
.company-history.history-expanded .history-hidden {
	/* display: grid; */
  /* 2026/03/17 */
	display: grid;
  flex-direction: row;
}
/* swap buttons */
.company-history.history-expanded #history-btn {
  display: none;
}
.company-history.history-expanded #history-btn2 {
  display: inline-grid;
}

/* === 事業紹介 === */

.page-business .soft-pet-system article:not(:last-child),
.page-business .water-dispenser-products article:not(:last-child),
.page-business .water-dispenser-features article:not(:last-child),
.page-business .safety-quality article:not(:last-child) {
  margin-bottom: 80px;
}

.page-business .content-container img {
  max-width: 100%;
  height: auto;
}

/* ========================================
   コンポーネント: 四角バレット付き記事見出し
   説明: 記事内の h4 見出し前に色付きの四角（■）を追加
   デフォルト: ほとんどのページで緑色（var(--color-accent1)）
   上書き: 水関連ページでは青色（var(--color-water)）
   ======================================== */

.page-about .content-container article h4,
.page-business .content-container article h4 {
  margin-bottom: 20px;
}

.page-about .content-container article h4::before,
.page-business .content-container article h4::before {
  content: "\25A0";
  color: var(--color-accent1);
  margin-right: 10px;
}

/* ========================================
   コンポーネント: ナビゲーションカードボタン
   説明: アイコン・テキスト・矢印を持つ立体的な緑のカード
   用途: サービスナビゲーション、カテゴリリンク
   HTML: <nav class="service-navigation">
           <ul class="service-list">
             <li><a href="..." class="nav-card">ラベル</a></li>
           </ul>
         </nav>
   ======================================== */

.service-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-navigation .service-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* gap: 10px; */
  gap: 40px;  /* 2026/03/16 */   
}

.nav-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 20px;
  height: 220px;
  flex: 0 1 386px;
  min-width: 300px;

  background: var(--color-accent1);
  border: 3px solid white;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(100, 100, 100, 0.5);

  color: white;
  font-weight: bold;
  text-align: center;

  transition: transform 0.2s;
}
.nav-card,
.nav-card:hover,
.nav-card:focus,
.nav-card:active {
	text-decoration: none;
}

.nav-card:hover {
  background: linear-gradient(
    to bottom,
    var(--color-accent1) 25%,
    #0cc243 100%
  );
}

/* 上部のアイコン円 */
.nav-card::before {
  content: "";
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  background: white;
  border-radius: 50%;
  box-shadow: inset 3px 3px 5px rgba(100, 100, 100, 0.5);
  background-position: center;
  background-repeat: no-repeat;
}

/* 下部の矢印 */
.nav-card::after {
  content: "";
  width: 12px;
  height: 12px;
  border-right: 3px solid white;
  border-bottom: 3px solid white;
  transform: rotate(45deg);
}

/* アイコンのバリアント */
.nav-card[href*="gas"]::before {
  background-image: url(images/service-icon-flame.svg);
}
.nav-card[href*="kitchen"]::before {
  background-image: url(images/service-icon-kitchen.svg);
}
.nav-card[href*="reform"]::before {
  background-image: url(images/service-icon-house.svg);
}
.nav-card[href*="coat"]::before {
  background-image: url(images/service-icon-treatment.svg);
}
.nav-card[href*="delivery"]::before {
  background-image: url(images/service-icon-water.svg);
}
.nav-card[href*="business-pdf"]::before {
  background-image: url(images/service-icon-lightbulb.svg);
}

@media (max-width: 700px) {
  .service-navigation .service-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(120px, 300px));
      gap: 20px;
      justify-content: center;
      padding: 0 10px;
      box-sizing: border-box;
  }
  .nav-card {
    min-width: unset;
    font-size:0.9em; /* 2026/03/17 */
  }
	.nav-card::before {
		width: 80px;
		height: 80px;
	}
  
}

/* === ガス・灯油 === */
.page-gas .manufacturers .dotted-detail-list {
  padding: 0;
}

/* ========================================
   コンポーネント: 料金計算式表示
   説明: ピル型のアイテムと演算子で構成された視覚的な計算式
   レイアウト: 横並びのインライン表示
   スタイル: 緑色のピルボタン（両端丸型）＋グレーの演算子
   ======================================== */

.pricing-formula {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  margin: 30px 0;
}

.formula-group {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
}

.formula-item {
  background-color: var(--color-accent1);
  color: white;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 600;
  white-space: nowrap;
}

.formula-operator {
  color: #d9d9d9;
  font-size: 2rem;
  font-weight: bold;
}

@media (max-width: 700px) {
  .pricing-formula {
    gap: 10px;
  }

  .formula-item {
    padding: 10px 20px;
    font-size: 0.9rem;
  }

  .formula-operator {
    font-size: 1.5rem;
  }
  .company-history.history-expanded .history-hidden {
    /* display: grid; */
    /* 2026/03/17 */
    display: flex;
    flex-direction: row;
  }
}

@media (max-width: 500px) {
  .formula-group:first-child {
    width: 100%;
  }
  /* .formula-group:nth-child(2) {
    margin-left: auto;
  } */
   /* 2026/03/17 */
  .formula-group:nth-child(2) {
      margin-left: 20px;
  }  
  /* .service-navigation .service-list {
        display: grid;
        grid-template-columns: repeat(2, 160px);
        justify-content: center;
    }
  .nav-card {
      max-width: 180px;
      height: 220px;
      min-width: unset;
      font-size: 0.82rem;
      padding: 20px 15px;
  } */
}

/* ========================================
   コンポーネント: 宣言カード
   HTML: <section class="declaration-section">
           <div class="card-elevated">
             <h3>タイトル</h3>
             <p>コンテンツ...</p>
           </div>
         </section>
   ======================================== */

.declaration-section .card-elevated {
  padding: 60px 80px;
}

.declaration-section h3 {
  text-align: center;
  margin-bottom: 30px;
}

.declaration-section h3::first-letter {
  color: inherit;
}

.declaration-section p {
  margin-bottom: 30px;
}

.declaration-author {
  font-weight: bold;
}

@media (max-width: 700px) {
  .declaration-section .card-elevated {
    padding: 40px 30px;
  }

  .declaration-section p {
    margin-bottom: 20px;
  }
}
/* === 設備・厨房機器 === */
/* === 抗ウィルス・抗菌コート剤 === */
.page-coat .four-effects h3,
.page-coat .four-effects h3::first-letter {
  color: #3599fe;
  text-align: center;
}

.page-coat .four-effects .text-highlight {
  color: var(--color-wine);
}

.page-coat .four-effects p {
  font-weight: bold;
  text-align: center;
  padding: 0 100px;
}

.page-coat .four-effects .effects-gallery {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 5px;
  margin-bottom: 20px;
}

.page-coat .four-effects .effects-gallery figure {
  margin: 0;
  min-width: 0;
  flex: 1 1 0;
  max-width: 196px;
}

.page-coat .four-effects .effects-gallery figure img {
  display: block;
  max-width: 100%;
  height: auto;
}

@media (max-width: 700px) {
  .page-coat .four-effects p {
    padding: 0 40px;
  }
}

.page-coat .test-data .dotted-detail-list .detail-label{
  /* width: 250px; */
  width: 230px;  /* 2026/03/17 */
}

/* === 水の宅配 === */
.page-water .content-container h3::first-letter,
.page-water .content-container article h4::before {
  color: var(--color-water);
}

.page-water .tagline {
  border-left-color: var(--color-water);
}

.page-water .list-check li {
  margin-bottom: 10px;
}

.page-water .list-check li::before {
  background-image: url(images/check-circle-blue.svg);
}

.page-water .table-round-th th[scope="row"] {
  text-align: center;
  font-weight: bold;
  vertical-align: middle;
  width: 350px;
}

.page-water .table-round-th td {
  padding-left: 30px;
}

.page-water .water-dispenser-features .table-round-th th[scope="row"] {
  width: 168px;
}

.page-water .pricing-section .table-round-th th[scope="row"] {
  background: #ebf5fc;
}

.page-water .pricing-section .table-round-th .text-highlight {
  font-weight: bold;
}

.page-water .campaign-section h3::first-letter {
  color: var(--color-wine);
}

.page-water .campaign-section .text-highlight {
  color: var(--color-wine);
  font-weight: bold;
}

.page-water .campaign-section .table-round-th th[scope="row"] {
  background: #fff1f1;
}

.page-water .natural-water .content-container .section-content {
  margin-top: 20px;
}

@media (max-width: 700px) {
  .page-water .table-round-th th[scope="row"] {
    width: 150px;
  }
}
/* ========================================
   コンポーネント: チャイルドロック手順
   説明: 画像とテキストで構成された操作手順を横並びで表示
   HTML: <ol class="childlock-instructions">
           <li>
             <figure><img src="..."></figure>
             <p>手順テキスト</p>
           </li>
         </ol>
   ======================================== */
.page-water .childlock-instructions {
  display: flex;
  gap: 40px;
  list-style: none;
  padding: 0;
  margin-left: 100px;
}

.page-water .childlock-instructions li {
  text-align: center;
  flex: 1 1 auto;
}

.page-water .childlock-instructions figure {
  margin-bottom: 10px;
}
/* 2026/03/17 */
@media (max-width: 500px) {
  .page-water .childlock-instructions {
      margin-left: 20px;
  }   
}
/* ========================================
   コンポーネント: ミネラル／元素周期表風表示
   説明: 元素記号の四角とその説明文をグリッドレイアウトで表示
   HTML: <dl class="mineral-list">
           <div class="mineral-item">
             <dt class="element">Ca</dt>
             <dd class="name">カルシウム 6.4mg</dd>
             <dd class="description">説明文</dd>
           </div>
         </dl>
   ======================================== */

.page-water .mineral-item {
  display: grid;
  grid-template-columns: 60px 1fr;
  grid-template-rows: auto auto;
  column-gap: 20px;
  row-gap: 5px;
  margin-bottom: 20px;
}

.page-water .mineral-item .element,
.page-water .mineral-item .property {
  grid-row: 1 / 3;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: 2px solid var(--color-water);
}

.page-water .mineral-item .element {
  background-color: var(--color-water);
  color: white;
}

.page-water .mineral-item .property {
  background-color: white;
  color: var(--color-water);
}

.page-water .mineral-item .name {
  font-weight: bold;
  margin: 0;
  align-self: end;
}

.page-water .mineral-item .description {
  margin: 0;
  align-self: start;
}

/* ========================================
   コンポーネント: ウォーターサーバー種別バッジ
   ======================================== */

.page-water .water-dispenser-type {
  display: flex;
  flex-direction: column;
}

.page-water .water-dispenser-type > h4 {
  width: fit-content;
  text-align: center;
  background-color: #000;
  color: #fff;
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 16px;
  margin-left: auto;
  margin-right: auto;
}

.page-water .water-dispenser-type > h4::before {
  content: none !important;
}

.page-water .water-dispenser-type > dl {
  margin-top: auto;
}

.page-water .water-dispenser-specs {
  line-height: 1.6;
}

.page-water .water-dispenser-specs dt,
.page-water .water-dispenser-specs dd {
  display: inline;
  margin: 0;
}

.page-water .water-dispenser-specs dt::after {
  content: "：";
}

.page-water .water-dispenser-specs
  dd:not(:nth-last-of-type(1)):not(:nth-last-of-type(2))::after {
  content: " / ";
}

.page-water .water-dispenser-specs dd:nth-of-type(3)::after {
  content: "\A";
  white-space: pre;
}