@charset "UTF-8";
/* CSS Document */

/*/// ページ内共通 ///*/
.subHeading {
	/* PC時の最大45px 〜 画面幅に応じて滑らかに縮小 〜 SP時の22pxで止まる指定 */
	font-size: clamp(22px, 3.2vw, 45px); 
	line-height: 1.444;
	letter-spacing: 0.2em;
}

.subHeading02 {
	/* PC時の最大45px 〜 画面幅に応じて滑らかに縮小 〜 SP時の18pxで止まる指定 */
	font-size: clamp(18px, 3.2vw, 24px); 
	line-height: 1.444;
	letter-spacing: 0.2em;
	margin-bottom: 6.07142857%;
}

.subHeading03 {
	/* PC時の最大36px 〜 画面幅に応じて滑らかに縮小 〜 SP時の22pxで止まる指定 */
	font-size: clamp(22px, 3.2vw, 36px); 
	line-height: 1.444;
	letter-spacing: 0.2em;
	margin-bottom: 6.07142857%;
	text-align: center;
}

.read {
	/* PC時の最大15px 〜 画面幅に応じて滑らかに縮小 〜 SP時の12pxで止まる指定 */
  	font-size: clamp(14px, 1.1vw, 18px);
	line-height: 1.933;
	letter-spacing: 0.2em;
}

.small-text {
	font-size: 13px;
}

.flexBetween {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.quality {
	color: #3e3a39;
}

.quality h2 {
	font-family: 'EB Garamond', serif;
	color: #a29c97;	
	font-size: clamp(22px, 3.2vw, 45px);
	letter-spacing: 0.15em;
	text-align: center;
	margin-bottom: 60px;
}

.quality h3 {
	position: relative;
	max-width: 960px;
	font-size: calc((32 / var(--font-base)) * 1rem); 
	line-height: 1.806;
	letter-spacing: 0.2em;
	text-align: center;
	margin: 0 auto 50px;
}

.container {
	background-color: #fff;
	border: solid 1px #b2a597;
	margin-bottom: 60px;
	padding: 30px 45px;
	box-sizing: border-box;
}

/* 各段落の制御 */
.quality .read-paragraph {
  display: block; /* 縦に並べる（spanタグなどのインライン対策） */
}

/* 2つ目以降の段落の頭に、可変する空行（マージン）をつくる */
.quality .read-paragraph + .read-paragraph {
  margin-top: clamp(14px, 2.1vw, 30px); 
}


.page-header-quality {
  width: 100%;
  height: 620px;
  background-image: url("../images/h1-bg.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-header-quality h1 {
  font-family: 'EB Garamond', serif;
  font-size: calc((50 / var(--font-base)) * 1rem);
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.15em;
  line-height: 1;
  text-align: center;
  z-index: 2;
}

/*
//背景
*/
.quality-bg {
  position: relative;
  width: 100%;
  padding-top: 80px;
  padding-bottom: 80px;
  background-image: url("../../design/images/design-bg.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 50% auto;
  overflow: hidden;
}

/*
//ページ内ナビゲーション//
*/
nav.quality-nav {
	font-family: 'EB Garamond', serif;
	font-size: clamp(16px, 3.2vw, 18px);
	text-align: center;
	margin: 90px auto 0;
}

nav.quality-nav a {
	color: #7d6e4d;
	padding: 18px 0;
}

nav.quality-nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

nav.quality-nav ul li {
	width: 30%;
	margin-bottom: 20px;
	border: solid 1px #7d6e4d;
	background-color: #fff;
}

nav.quality-nav ul li a:hover {
	background-color: #7d6e4d;
	color: #fff;
}

/* ==========================================================
 共通スタイル
========================================================== */
/* 1. メインビジュアル */
.quality-main-img {
  width: 100%;
  margin-bottom: 60px;
}

.quality-main-img figure {
  position: relative;
  margin: 0;
}

.quality-main-img img {
  width: 100%;
  height: auto;
  display: block;
}

.quality-main-img figcaption {
  position: absolute;
  bottom: 10px;
  right: 15px;
  font-size: 10px;
  color: #fff;
  letter-spacing: 0.05em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}


/* 3カラム専用グリッド */
.quality-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PC時3列 */
  gap: 40px 30px;
  margin-bottom: 80px;
}

/* 4カラム専用グリッド */
.quality-grid.grid04 {
  grid-template-columns: repeat(4, 1fr); /* PC時4列 */
  gap: 30px 20px;
}

.quality-card {
  display: flex;
  flex-direction: column;
}

.quality-card figure {
  position: relative;
  margin: 0 0 15px 0;
  width: 100%;
}

.quality-card figure img {
  width: 100%;
  height: auto;
  display: block;
}

.quality-card figure figcaption {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 10px;
  color: #fff;
  letter-spacing: 0.05em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.quality-card figure figcaption.black {
  color: #000;
  text-shadow: none;
}

/* 複数キャプション配置用のベース設定 */
.quality-card figure.double-caption {
  position: relative;
}

/* 共通キャプション位置のリセットと上書き */
.quality-card figure.double-caption figcaption {
  position: absolute;
  bottom: 6px;
  font-size: 10px;
  color: #fff;
  letter-spacing: 0.05em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* 左側写真の右下位置指定（画像の中央やや左） */
.quality-card figure.double-caption figcaption.cap-left {
  right: 58%; /* 左側の写真の右下に合わせる調整値 */
}
.quality-card figure.double-caption figcaption.cap-left02 {
  right: 50%; /* 左側の写真の右下に合わせる調整値 */
}

/* 右側写真の右下位置指定（画像の一番右下） */
.quality-card figure.double-caption figcaption.cap-right {
  right: 8px;
}

.quality-card h4 {
  font-size: 16px;
  color: #8b8681;
  line-height: 1.4;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}

/* 既存のh4擬似要素（| 線）をクリア（quality全般のカード用見出し） */
.quality-card h4::before {
  content: none;
}

.quality-card p {
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.02em;
}

/* 3. 下部図解エリア */
.quality-diagram-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2.71%; /* 960pxにおける26px相当の可変余白 */
  margin-top: 60px;
}

/* 左側：コンロ＋オートバス（514pxエリア） */
.quality-diagram-container .diagram-box:first-child {
  width: 53.54%; /* 514px / 960px */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 右側：浄水器一体型水栓（420pxエリア） */
.quality-diagram-container .diagram-box:last-child {
  width: 43.75%; /* 420px / 960px */
}

/* 画像共通処理 */
.diagram-box img {
  width: 100%;
  height: auto;
  display: block;
}

/*
//kitchen//
*/
#kitchen {
  padding-top: 60px;
  padding-bottom: 100px;
}

#kitchen .inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

#kitchen h3 span {
	font-size: 120%;
}

/* BATHROOM */
#bathroom {
  padding-bottom: 100px;
}

#bathroom .bathroom-container {
  background-color: #f4f3f1;
  padding: 40px;
  box-sizing: border-box;
  margin-top: 60px;
}

.bathroom-bathtub-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  margin-bottom: 30px;
}

.bathroom-bathtub-box .bathtub-main-img {
  width: 62%;
}

.bathtub-main-img figure {
  position: relative;
  margin: 0;
}

.bathtub-main-img img {
  width: 100%;
  height: auto;
  display: block;
}

.bathtub-main-img figcaption {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 10px;
  color: #fff;
  letter-spacing: 0.05em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.bathroom-bathtub-box .bathtub-info {
  width: 35%;
}

.bathtub-info h4 {
  font-size: 20px;
  color: #8b8681;
  margin-bottom: 12px;
  line-height: 1.3;
}

.bathtub-info .read {
  font-size: 12px;
  line-height: 1.7;
  margin-bottom: 25px;
  letter-spacing: 0.02em;
}

.drain-plug-img figure {
  position: relative;
  margin: 0;
}

.drain-plug-img img {
  width: 100%;
  height: auto;
  display: block;
}

.drain-plug-img figcaption {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 10px;
  color: #333;
  letter-spacing: 0.02em;
}

#bathroom .bathroom-floor {
  background-color: #fff;
  border: solid 1px #b2a597;
  box-sizing: border-box;
}

#bathroom .bathroom-floor h4 {
  font-size: 16px;
  font-weight: bold;
  line-height: 2.2;
  color: #fff;
  background-color: #b2a597;
  text-align: center;
  margin: 0;
  letter-spacing: 0.1em;
}

.bathroom-floor-inner {
  padding: 25px 30px 30px;
  box-sizing: border-box;
}

#bathroom .bathroom-floor-read {
  font-size: 12px;
  line-height: 1.8;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 0.02em;
}

.bathroom-floor .floor-img figure {
  position: relative;
  margin: 0;
}

#bathroom .bathroom-floor img {
  width: 100%;
  max-width: 633px;
  height: auto;
  margin: 0 auto;
  display: block;
}

.bathroom-floor .floor-img figcaption {
  position: absolute;
  bottom: -16px;
  right: 100px;
  font-size: 10px;
  color: #333;
  letter-spacing: 0.05em;
}

/*/////////////////////
   POWDER ROOM & TOILET 
//////////////////////*/
#powder {
  padding-bottom: 45px;
}
.toilet-container {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 30px;
	margin-top: 60px;
}

.toilet-left-box {
	width: 48.5%;
}

.toilet-main-img {
	position: relative;
	margin: 0;
	width: 100%;
}

.toilet-main-img img {
	width: 100%;
	height: auto;
	display: block;
}

.toilet-main-img figcaption {
	position: absolute;
	bottom: 12px;
	right: 15px;
	font-size: 10px;
	color: #fff;
	letter-spacing: 0.05em;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.toilet-right-box {
	width: 48.5%;
}

.toilet-head-info {
	margin-bottom: 45px;
}

.toilet-head-info h4 {
	font-size: 16px;
	color: #8b8681;
	margin-bottom: 6px;
	line-height: 1.4;
	letter-spacing: 0.05em;
}

.toilet-head-info p {
	font-size: 12px;
	line-height: 1.75;
	letter-spacing: 0.02em;
}

.toilet-sub-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 20px;
}

.toilet-sub-grid .grid-item figure {
	position: relative;
	margin: 0;
	width: 100%;
}

.toilet-sub-grid .grid-item figure img {
	width: 100%;
	height: auto;
	display: block;
}

.toilet-sub-grid .grid-item figure figcaption {
	position: absolute;
	bottom: 6px;
	right: 8px;
	font-size: 10px;
	color: #fff;
	letter-spacing: 0.05em;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.toilet-sub-grid .grid-item figure figcaption.black {
	color: #000;
	text-shadow: none;
}

.toilet-sub-grid .text-item {
	margin-bottom: 15px;
}

.toilet-sub-grid .text-item h4 {
	font-size: 15px;
	color: #8b8681;
	margin-bottom: 4px;
	line-height: 1.4;
	letter-spacing: 0.05em;
}

.toilet-sub-grid .text-item p {
	font-size: 11px;
	line-height: 1.6;
	letter-spacing: 0.02em;
}


/*/////////////////////
   SECURITY 
//////////////////////*/
.security-bg {
	margin-top: 45px;
	padding-top: 30px;
	background-image: radial-gradient(circle farthest-side at 50% 49%, rgba(255, 255, 255, 1) 68%, rgba(239, 239, 239, 1));
}
#security,
#structure {
	padding-top: 60px;
	padding-bottom: 100px;
  
}

#security .security-container {
	background-color: #f4f3f1;
	padding: 35px 40px;
	margin: 40px auto 0;
	box-sizing: border-box;
}

#security .security-figure-container {
	margin: 40px auto 0;
}

#security .security-title {
	font-size: 20px;
	color: #8b8681;
	letter-spacing: 0.05em;
	padding-bottom: 12px;
	margin-bottom: 25px;
	border-bottom: 1px solid #8b8681;
	line-height: 1.4;
}

.security-flex {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 30px;
}

.security-left {
	width: 33%;
}

.alsok-logo {
  margin: 0 0 20px 0;
  text-align: center;
}

.alsok-logo img {
  width: 100%;
  max-width: 140px;
  height: auto;
  display: block;
  margin: 0 auto 6px;
}

.alsok-logo figcaption {
  font-size: 12px;
  letter-spacing: 0.02em;
}

.security-read {
  font-size: 12px;
  line-height: 1.85;
  letter-spacing: 0.02em;
  text-align: justify;
}

.security-right {
  width: 63%;
}

.security-diagram {
  margin: 0;
  width: 100%;
}

.security-diagram img {
  width: 100%;
  height: auto;
  display: block;
}

#security .security-lead {
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 25px;
  letter-spacing: 0.02em;
}

.security-flex.align-center {
  align-items: center;
}

.security-left-diagram {
  width: 66%;
}

.security-left-diagram figure {
  margin: 0;
  width: 100%;
}

.security-left-diagram img {
  width: 100%;
  height: auto;
  display: block;
}

.security-right-photos {
  width: 30%;
}

.security-right-photos figure {
  margin: 0;
  width: 100%;
}

.security-right-photos img {
  width: 100%;
  height: auto;
  display: block;
}

.tebra-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
}

.tebra-logo {
  width: 48%;
}

.tebra-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.tebra-catch {
  width: 48%;
}

.tebra-catch p {
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.security-flex.tebra-body {
  align-items: flex-start;
}

.tebra-left-photo {
  width: 45%;
}

.tebra-left-photo figure {
	position: relative;
	margin: 0;
	width: 100%;
}

.tebra-left-photo figure figcaption {
	position: absolute;
	bottom: 6px;
	left: 8px;
	font-size: 10px;
	color: #000;
	letter-spacing: 0.05em;
}

.tebra-left-photo img {
  width: 100%;
  height: auto;
  display: block;
}

.tebra-right-info {
  width: 54%;
}

.tebra-desc {
  font-size: 12px;
  line-height: 1.85;
  margin-bottom: 20px;
  letter-spacing: 0.02em;
  text-align: justify;
}

.tebra-diagram-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
  margin-top: 15px;
}

.tebra-diagram-box figure.tebra-diagram {
	position: relative;
	width: 56%;
	margin: 0;
}

.tebra-diagram-box figure.tebra-diagram figcaption {
	position: absolute;
	bottom: 6px;
	right: 8px;
	font-size: 10px;
	letter-spacing: 0.05em;
}

.tebra-diagram img {
  width: 100%;
  height: auto;
  display: block;
}

.tebra-notes {
  width: 42%;
}

.tebra-notes p {
  font-size: 10px;
  line-height: 1.5;
  margin-bottom: 4px;
}

/* ==========================================================
   SERVICE 
========================================================== */
#service .container {
  padding: 40px 45px;
  margin-bottom: 60px;
}

.service-item {
  display: flex;
  justify-content: space-between;
  align-items: center; /* ロゴとテキストの垂直中央揃え */
  gap: 30px;
}

.service-item + .service-item {
  margin-top: 35px;
  padding-top: 35px;
}

/* 左側テキスト領域 */
.service-text {
  width: calc(100% - 210px); /* 180pxロゴ + gap 30px 分を差し引き */
}

.service-text h4 {
  font-family: 'EB Garamond', serif;
  font-size: 20px;
  color: #8b8681;
  margin-bottom: 12px;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.service-desc {
  font-size: 12px;
  line-height: 1.85;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
  text-align: justify;
}

.service-note {
  font-size: 10px;
  line-height: 1.6;
}

.service-logo {
  width: 180px;
  flex-shrink: 0; /* レスポンシブで縮まないよう固定 */
}

.service-logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================
   EVALUATION 
========================================================== */

#evaluation {
	padding-bottom: 100px;
  
}

#evaluation .container {
  padding: 40px 45px;
  margin-bottom: 50px;
}

.evaluation-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
}

.evaluation-item + .evaluation-item {
  margin-top: 35px;
  /*padding-top: 35px;*/
}

.evaluation-text {
  width: calc(100% - 220px); /* 右側バナー200px + gap分差し引き */
}

.evaluation-text h4 {
  font-size: 18px;
  color: #8b8681;
  margin-bottom: 10px;
  line-height: 1.3;
}

.eval-desc {
  font-size: 12px;
  line-height: 1.85;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
  text-align: justify;
}

.eval-note {
  font-size: 10px;
  line-height: 1.6;
}

.evaluation-banner {
  width: 200px;
  flex-shrink: 0;
}

.evaluation-banner img {
  width: 100%;
  max-width: 150px;
  height: auto;
  margin: 0 auto;
}

.evaluation-banner figure {
	margin-bottom: 1rem;
}

.evaluation-banner figcaption {
	font-size: 12px;
	line-height: 1.4;
	text-align: center;
}

/*注釈帯エリア*/
.quality-caption {
	color: #fff;
	font-size: 10px;
	line-height: 1.444;
	padding: 30px 0;
}

/* sp */
@media (max-width: 768px) {
.quality h2 {
	margin-bottom: 20px;
}

.quality h3 {
	text-align: center;
	max-width: 100%;
	font-size: calc((22 / var(--font-base)) * 1rem);
}

/* 文章の行間（スマホ用に少し詰める） */
.quality .read-paragraph + .read-paragraph {
	margin-top: 20px; 
}

.page-header-quality {
 	height: 340px;
}

.quality-bg {
    padding-top: 50px;
	padding-bottom: 0;
    background-size: 100% auto;
}

nav.quality-nav {
	margin: 60px auto 30px;
}

nav.quality-nav ul li {
	width: 49%;
	margin-bottom: 15px;
}

/*#kitchen h4 {
	margin-bottom: 15px;
}*/

#kitchen {
    padding-top: 40px;
    padding-bottom: 60px;
  }
  
#kitchen .inner {
	padding-left: 20px; /* スマホ時は左右一律20pxの余白にして中央に流す */
	padding-right: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}  

.quality-main-img {
	margin-bottom: 35px;
}

.quality-grid {
	grid-template-columns: repeat(2, 1fr);
	gap: 30px 15px;
	margin-bottom: 50px;
}

.quality-grid.grid04 {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px 15px;
}

.quality-card h4 {
	font-size: 14px;
	margin-bottom: 6px;
}

.quality-card p {
	font-size: 11px;
	line-height: 1.6;
}

.quality-diagram-container {
    flex-direction: column;
    gap: 20px;
	margin-top: 0;
}

.quality-diagram-container .diagram-box:first-child,
.quality-diagram-container .diagram-box:last-child {
    width: 100%;
}

#bathroom .bathroom-container {
    padding: 20px;
    margin-top: 40px;
}

.bathroom-bathtub-box {
	flex-direction: column;
	gap: 20px;
}

.bathroom-bathtub-box .bathtub-main-img,
.bathroom-bathtub-box .bathtub-info {
	width: 100%;
}

.bathtub-info h4 {
	font-size: 16px;
}

.bathtub-info .read {
	font-size: 11px;
	margin-bottom: 15px;
}

.drain-plug-img {
	max-width: 200px;
}

.bathroom-floor-inner {
	padding: 15px;
}

#bathroom .bathroom-floor-read {
	font-size: 11px;
	text-align: left;
	margin-bottom: 15px;
}

.bathroom-floor .floor-img figcaption {
  bottom: 8px;
  right: 12px;
}

/*/////////////////////
   POWDER ROOM & TOILET 
//////////////////////*/
.toilet-container {
    flex-direction: column;
    gap: 30px;
    margin-top: 40px;
}

  .toilet-left-box,
  .toilet-right-box {
    width: 100%;
}

  .toilet-sub-grid {
    gap: 10px 15px;
}

/*/////////////////////
   SECURITY 
//////////////////////*/
#security .security-container {
	padding: 20px 15px;
}

.security-flex {
	flex-direction: column;
	gap: 20px;
}

.security-left,
.security-right {
	width: 100%;
}

.alsok-logo img {
	max-width: 120px;
}

.security-read {
	font-size: 11px;
	line-height: 1.7;
}

.security-left-diagram {
	width: 100%;
}

.security-right-photos {
	width: 60%;
}

.tebra-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}

.tebra-logo,
.tebra-catch {
    width: 100%;
    text-align: left;
}

.tebra-catch p {
    font-size: 12px;
}

.tebra-left-photo,
.tebra-right-info {
    width: 100%;
}

.tebra-diagram-box {
    flex-direction: column;
	justify-content: center;
    gap: 12px;
}

.tebra-diagram,
.tebra-notes {
    width: 100%;
}

.tebra-diagram-box figure.tebra-diagram {
	margin: 0 auto;
}

#service .container {
	padding: 25px 20px;
}

.service-item {
	flex-direction: column-reverse;
	align-items: flex-start;
	gap: 15px;
}

.service-text {
	width: 100%;
}

.service-logo {
	width: 180px;
	margin: 0 auto 5px;
}

.service-text h4 {
	font-size: 18px;
}

#evaluation .container {
	padding: 25px 20px;
}

.evaluation-item {
	flex-direction: column-reverse;
	align-items: flex-start;
	gap: 15px;
}

.evaluation-text {
	width: 100%;
}

.evaluation-banner {
	width: 100%;
	margin-bottom: 5px;
}

.evaluation-eco-box {
	padding: 25px 20px;
	border-radius: 12px;
}  

}


/* 調整 */
@media (max-width: 430px) {
.page-header-quality h1 {
  font-size: calc((23 / var(--font-base)) * 1rem);
}

.page-header-quality {
  height: 200px;
}

nav.quality-nav ul li {
	width: 100%;
	margin-bottom: 5px;
}

.quality h3 span {
	display: block;
}

.quality-grid {
	grid-template-columns: 1fr;
	gap: 30px;
}

.quality-grid.grid04 {
    grid-template-columns: 1fr;
 }
 
 #security .security-title {
  font-size: 16px;
}

.tebra-diagram-box figure.tebra-diagram {
	width: 100%;
}

}