@charset "utf-8";

/* ------------------------------- */
/* 石川泰之建築設計室様用メインCSS */
/* ------------------------------- */
/* Modified : 2021/01/06 20:50 */


/* ===================== */
/* ■全環境用のベースCSS */
/* ===================== */

	/* ------------ */
	/* ▼ページ全体 */
	/* ------------ */
	html {
		font-size: 1rem;
	}
	body {
		font-family: 'Noto Sans JP',"メイリオ",Meiryo,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic","游ゴシック","YuGothic",sans-serif;
		margin: 0px;
		padding: 0px;
		background-color: #fff;
		color: #615147;
		-webkit-text-size-adjust: 100%;
	}

	/* Noto Sans JP以外のWebフォント */
	.topCopy,
	.caseHeader {
		font-family: 'Noto Serif JP', serif;
	}

	.en,
	.date,
	.addressDetail,
	.oneStepBox h4,
	h2 {
		font-family: 'Roboto Condensed', sans-serif;
		letter-spacing: 1px;
	}

	.enc,
	.copyright {
		font-family: 'Roboto', sans-serif;
		letter-spacing: 1px;
	}

	/* 文字間隔を広めに */
	.topicBox li ,
	.sentenceBox p ,
	/*.personDetails p ,*/
	.stepGuide ,
	.caseHeader , .basicInfoHead h4 , .basicInfoHead p , .caseMessages ,
	.companyInfo td ,
	.sentenceBox p , .targetAreas {
		letter-spacing: 1px;
	}

	/* ……… */
	/* ▼汎用 */
	/* ……… */
	a:hover img {
		opacity: 0.75;	/* 画像リンクにマウスが載ったときの半透明化度 */
	}

	/* ▽消極的な改行 */
	i {
		font-style: normal;
		display: inline-block;
	}

	/* 画像幅自動調整 */
	.autoResize {
		display: block;
		max-width: 100%;
	}

	h1,h2,h3,h4,h5 {
		font-weight: normal;
		font-size: 1em;
	}

	/* 箱形グローバルメニュー中身 */
	.globalmenuBox {
		margin: 0;
		padding: 0;
		font-size: 0.725em;
	}
		.menuItem {
			display: inline-block;
			max-width: 7em;
			text-align: center;
			list-style-type: none;
			margin: 0 1.2em 0 0;
		}
		.menuItem.menuIcon {
			vertical-align: bottom;
		}
			.menuButton {
				display: block;
				text-decoration: none;
				padding-bottom: 5px;
				border-bottom: 3px solid transparent;
				color: #615147;
			}
			.menuItem.menuIcon .menuButton {
				padding-bottom: 1px;
			}

			/* 現在位置表示 */
			.homePage .menuButton.pHome				,
			.architectPage .menuButton.pArchitect	,
			.worksPage .menuButton.pWorks			,
			.flowPage .menuButton.pFlow				,
			.infoPage .menuButton.pTopics			,
			.voicePage .menuButton.pVoice			,
			.companyPage .menuButton.pCompany		,
			.areaPage .menuButton.pArea				,
			.contactPage .menuButton.pContact {
				 border-bottom: 3px solid #615147;
			}

			/* ヘッダにあるメニュー項目の英字枠だけ、背景色を白くする */
			.headbox .menuButton .en {
				background-color: #fff;
			}

			/* マウスオーバー表示 */
			.menuButton:hover { border-bottom: 3px solid #615147; }
			.menuButton:hover .ja { color: #615147; }
			.menuButton:hover .en { background-color: #615147; color: white; }

				.menuButton .ja {
				}
				.menuButton .en {
					border: 1px solid #615147;
					display: block;
					margin: 3px auto 0;
					width: 4.7rem;			/* ＝6.5em */
					font-size: 1.2em;
					letter-spacing: 0;
				}
				.menuButton .icon {
					display: block;
					width: 4.7rem;			/* ＝6.5em */
					margin: 3px auto 0;
				}
				.menuButton .icon img {
					border-radius: 4px;
				}

	/* ------------ */
	/* ▼ヘッダ区画 */
	/* ------------ */

	/* トップページだけの特別装飾 */
	.homePage header {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 20;
	}

		/* ▼上端ロゴ領域 */
		h1 {
			margin: 0;
			padding: 10px 0 0 15px;
		}
		h1 img {
			height: 100px;
			width: auto;
		}

		/* ロゴの選択(白orブラウン) */
		.whiteLogo { display: none; }
		.homePage .brownLogo { display: none; }
		.homePage .whiteLogo { display: inline; }

	/* ---------------- */
	/* ▼上部大画像区画 */
	/* ---------------- */
	.topImageZone {
		position: relative;
	}
		.topPhotoBox {
			margin: 0;
			padding: 0;
		}
			.topPhoto {
				width: 100%;	/* 縮小だけでなく拡大もする */
			}

			/* ▼スライドショー区画 */
			.slideshowCover {
				position: relative;
				margin: 0;
				padding: 0;
			}

			#HeadSlideshow {
				margin: 0px;
				padding: 0px;
			}

				/* ---------------------------- */
				/* ▽スライドショー用表示候補群 */
				/* ---------------------------- */
				#SlideshowBox {
					width: 100%;
					position: relative;
				}

				#SlideshowBox p {
					position: absolute;
					top:  0;
					left: 0;
					right: 0;	/* 左右0にすることで原寸を超えて拡大もできる */
					z-index: 8;
					opacity: 0.0;
					background-color: white;
					margin: 0;
				}

				#SlideshowBox p.active {
					z-index: 10;
					opacity: 1.0;
				}

				#SlideshowBox p.last-active {
					z-index: 9;
				}

				#SlideshowBox p img {
					width: 100%;
					height: auto;
					display: block;
				}

				/* ▼スクリプト無効の場合の固定表示（＋表示空間確保） */
				#NoSlideshow img {
					width: 100%;
					height: auto;
					display: block;
				}

		.topCopy {
			position: absolute;
			top: 115px;				/* ロゴ高さサイズと連動させる */
			left: 0;
			right: 0;
			z-index: 30;
			background-color: rgba(97,81,71,0.5);
			color: white;
			text-align: center;
			margin: 0;
			padding: 1.25em 0;
			box-shadow: 0px 25px 0px rgba(97,81,71,0.25);
		}
			.topCopy p {
				margin: 0;
				line-height: 1.2;
			}
			.topCopyMain {
				font-size: 27pt;
				font-weight: 600;	/* SemiBold */
			}
			.topCopySub {
				padding-top: 0.5em;
				font-size: 15pt;
				font-weight: 300;	/* Light */
			}

		/* ▼TOPIC枠 */
		.topicBox {
			background-color: #615147;
			color: white;
			box-shadow: 0px -25px 0px rgba(97,81,71,0.5);
			margin: -8px 0 0 0;
			padding: 1em;
			box-sizing: border-box;
			position: relative;
			z-index: 30;
		}
			.topicBox h2 {
				font-size: 1.5em;
				letter-spacing: 3px;
			}
			.topicBox h2,
			.topicBox ul {
				margin: 0;
				padding: 0;
			}
				.topicBox li {
					list-style-type: none;
					margin: 0;
					padding: 0.5em 0;
					font-size: 0.95em;
				}
				.topicBox .date {
					display: inline-block;
					min-width: 5em;
				}
				.topicBox .topic a {
					color: white;
				}

	/* ------------ */
	/* ▼メイン区画 */
	/* ------------ */
	main {
	}

		/* 共通見出し(英) */
		main h2 {
			margin: 3em 0 1em 0;
			text-align: center;
			position: relative;
			font-size: 1.5em;
			letter-spacing: 3px;
		}
			main h2 img {
				width: 100%;
			}
			main h2 b {
				position: absolute;
				display: block;
				top: 25%;
				left: 0;
				right: 0;
				font-weight: normal;
			}
				main h2 span {
					display: inline-block;
					padding: 1.5% 1em;
					border-style: solid;
					border-color: white;
					border-width: 0 1px 0 1px;
					color: white;
					font-size: 1em;
				}

		/* メイン区画 先頭の見出しの余白量を調整 */
		.deepPage main div:first-child h2 {
			margin-top: 1.25em;
		}

		/* 共通見出し(日) */
		main h3 {
			text-align: center;
			font-size: 1.5em;
			letter-spacing: 3px;
			font-weight: bold;
			margin: 5rem 0 2.5rem 0;	/* PCでは、上80px・下40pxの空きになる */
		}

		/* 汎用文章ボックス */
		.sentenceBox {
			text-align: center;
		}
		.sentenceBox p {
			margin: 1em;
			line-height: 2;		/* Double Space */
		}
		.sentenceBox p + p {
			margin-top: 2.5em;
		}

		/* 汎用セパレータ */
		.shortSeparator {
			margin: 2em auto;
			width: 33%;
			min-width: 300px;
			border-style: solid;
			border-color: gray;
			border-width: 1px 0 0 0;
		}

		/* 上端へ戻るリンク */
		.bottomSeparator {
			text-align: center;
			margin: 3.5em 0 2em 0;
		}
			#scroll2Top {
				text-decoration: none;
				color: #615147;
			}
			#scroll2Top .en {
				font-size: 0.9em;
			}
			#scroll2Top .mark {
				vertical-align: middle;
				font-size: 0.95em;
				display: inline-block;
				margin: 0 1.1em;
			}
			#scroll2Top:hover {
				text-decoration: underline;
			}

		/* …………………… */
		/* ▼コンセプト領域 */
		/* …………………… */
		.conceptArea {
		}
			.conceptArea .companyName {
				margin-bottom: 0;
				letter-spacing: 3px;
				font-size: 1.05em;
			}
			.conceptArea .personName {
				margin-top: 0;
				font-size: 1.4em;
				letter-spacing: 4px;
			}

		/* …………………… */
		/* ▼建築士紹介領域 */
		/* …………………… */
		.aboutMeArea {
		}

			.personCover {
				margin: 0;
				padding: 1em;
			}
				.personImageBox {
					margin: 0;
					padding: 0;
				}
					.personImageBox img {
						max-width: 100%;
						display: block;
						margin: 0 auto 0.5em auto;
					}

				.personDetails {
					margin: 1em 0;
					text-align: center;		/* 建築士写真を入れない場合の一時対処 */
				}
					.personDetails h4 {
					}
						.personDetails h4 .ja {
							font-size: 2em;
							display: block;
							font-weight: bold;
						}
						.personDetails h4 .en {
							font-size: 1em;
							display: block;
						}

						.personTitles {
							font-weight: bold;
							margin: 1.2em 0 2em;
						}

					.personDetails h5 {
						margin-bottom: 0;
					}
					.personDetails h5 + p {
						margin-top: 0.5em;
					}

					/* 本文末の署名単独（建築士写真を入れない場合の一時対処） */
					.personSignature {
						padding: 1em;
						text-align: right;
						margin: 1.5em auto 0;
						max-width: 890px;
					}
					.personSignature img {
						display: inline-block;
						max-width: 100%;
					}

					/* 建築士写真を入れないために、一時的に親ボックスに .sentenceBox を追加した対策 */
					.sentenceBox .personSignature {
						padding-right: 0;
						margin-right: 0;
					}

			.architectPhoto {
				margin: 0 0 10em 0;	/* 写真の下に広めの余白を設ける */
				padding: 1em;
			}
			.architectPhoto img {
				margin: auto;
			}

		/* ………………… */
		/* ▼施工例群領域 */
		/* ………………… */
		.worksArea {
		}
			.worksImageList {
				margin: 1em auto;
				padding: 0;
				list-style-type: none;
			}
			.worksImageList::after {
				/* ClearFix */
				content: "";
				clear: both;
				display: block;
			}
				.worksImageBox {
					display: block;
					float: left;
				}
					.worksImageBox a {
						display: block;
						position: relative;
						text-decoration: none;
						color: white;
					}
						.worksImageBox a span {
							display: block;
							width: 3em;
							font-weight: bold;
							text-align: right;
							position: absolute;
							bottom: 0.5em;
							right: 0.5em;
						}
					.worksImageBox img {
						display: block;
						width: auto;		/* 表示サイズは @media ごとに個別指定 */
						height: auto;
					}

					/* ▽一覧では表示しないがLightboxでは表示する付属画像群 */
					.attachedPhotos {
						display: none;
						margin: 0;
						padding: 0;
					}

			/* ▽初期状態で隠す */
			.hideFirst {
				display: none;
			}

			/* ▽もっと見るボタン */
			.worksMoreButton {
				clear: both;
				text-align: center;
				margin: 2.5em 15%;
			}
				.moreButton {
					text-decoration: none;
					background-color: #615147;
					color: white;
					max-width: 600px;
					display: block;
					margin: auto;
					padding: 0.75em;
					font-weight: bold;
					letter-spacing: 3px;
				}
				.moreButton:hover {
					opacity: 0.75;
				}

		/* ……………………… */
		/* ▼お客さまの声領域 */
		/* ……………………… */
		.voiceArea {
			margin: 0 0 4em 0;
		}

		/* …………………………………… */
		/* ▼お客さまの声(１ケース)領域 */
		/* …………………………………… */
		.voiceCaseArea {
			margin: 1em;
			padding: 4em 0 0 0;
			border-top: 1px solid gray;
			box-sizing: border-box;
		}
		.voiceArea + .voiceCaseArea {
			/* 先頭の場合だけは上端の罫線を引かない */
			padding: 0;
			border-top: none;
		}
			.voiceCaseArea h3 {
				margin: 0;
				padding: 0.2em;
				background-color: #d1c0a5;
				font-size: 1.25em;
				font-weight: normal;
			}
			.caseHeader {
				margin: 0;
				padding: 0.75em;
				font-size: 2em;
				background-color: #615147;
				color: white;
				text-align: center;
			}

			.caseImageBox {
				margin: 0;
				padding: 0;
			}
				.caseImageBox img {
					width: 100%;
					display: block;
				}

			.caseCover {
				margin-bottom: 4em;
			}

			/* ‥‥‥‥‥‥‥‥ */
			/* ▽詳細データ段組 */
			/* ‥‥‥‥‥‥‥‥ */
			.caseDetails {
			}
				.casePersonPhotoBox {
					position: relative;
				}
					.casePersonPhoto {
					}
						.casePersonPhoto img {
							max-width: 100%;
						}
					.caseInformation {
						margin: 0;
						padding: 16px 8px;							/* サイズ調整：配置 */
						position: absolute;
						box-sizing: content-box;
						width: 140px;								/* サイズ調整：横幅 */
						height: 70px;								/* サイズ調整：高さ */
						/* Original Size: 562×326 = 2:1 */
						background-image: url("/imgs/frame.png");
						background-repeat: no-repeat;
						background-size: contain;
						font-size: 9px;								/* サイズ調整：文字 */
						line-height: 12px;							/* サイズ調整：行高 */
						transform: rotate(-10deg);	/* 回転値 */
						transform-origin:120% 20%;	/* 軸 */
					}
					.caseInformation.placeTopLeft {
						top: 0;
						left: 0;
					}
					.caseInformation.placeBottomLeft {
						bottom: 30px;
						left: 0;
					}
						.caseInfoItem {
							display: block;
							width: 100%;
							box-sizing: border-box;
							border-top: 1px solid black;
							margin: 0;
							padding: 0.45em;
						}
						.caseInfoItem:first-child {
							border-top: 0 none;
						}
							.caseInfoItem br {
								display: block;
								margin-top: 0.34em;
							}

					.morePhotoButtonBox {
						margin: 1em 0 0.67em 0;
						padding: 0;
					}
						.morePhotoButton {
							text-decoration: none;
							text-align: center;
							background-color: #615147;
							color: white;
							font-weight: bold;
							letter-spacing: 1px;
							display: block;
							margin: 0;
							padding: 0.75em 0;
						}
						.morePhotoButton:hover {
							opacity: 0.75;
						}

					.basicInfoHead {
					}
						.basicInfoHead h4 {
							font-weight: bold;
							font-size: 1.1em;
							margin: 1em 0 0.125em 0;
						}
						.basicInfoHead h4:first-child {
							margin-top: 0;
						}
						.basicInfoHead p {
							margin: 0;
							font-size: 0.95em;
						}

						h4.basicInfoTableTitle {
							margin-top: 5em;
							font-size: 0.75em;
							font-weight: normal;
						}

						.basicInfoTable {
							margin: 0;
							padding: 0;
						}
							.basicInfoTable th,
							.basicInfoTable td {
								vertical-align: top;
								font-size: 0.75em;
							}
							.basicInfoTable th {
								min-width: 6.5em;
								font-weight: normal;
								text-align: left;
							}
							.basicInfoTable th::before { content: '| '; }
							.basicInfoTable th::after  { content: ' |'; }

			/* ‥‥‥‥‥‥‥‥ */
			/* ▽付属情報(文章) */
			/* ‥‥‥‥‥‥‥‥ */
			.caseMessages {
			}
				.caseMessages h4 {
					margin: 1.75em 0 1em;
					padding: 0.85em 1em;
					border: 1px solid #615147;
					font-weight: bold;
				}
				.caseMessages ul {
					margin: 0;
					padding: 0 2em;
				}
					.caseMessages li {
						margin-bottom: 0.67em;
					}
				.caseMessages p {
					margin: 0;
					padding: 0 1em;
					line-height: 1.7;
				}

		/* ……………………………… */
		/* ▼お住まいまでの流れ領域 */
		/* ……………………………… */
		.flowArea {
		}

			/* ステップテーブル */
			.stepTable {
				margin: 1em;
				padding: 0 0 4.5em 0;
				letter-spacing: 0.1em;
			}

				.stepTable h4 {
					background-color: #b7b1ad;
					color: white;
					font-weight: bold;
					line-height: 1;
					padding: 0.5em;
					clear: right;
				}

				.oneStepOnTable {
					line-height: 1.35;
					margin: 1em 0;
					clear: right;
				}

				.stepTable .feeBox {
					margin: 0 0 0 0.5em;
					padding: 0.5em;
					background-color: #8f857f;
					color: white;
					float: right;
					line-height: 1;
					width: 12em;
					box-sizing: border-box;
					clear: right;
					text-align: center;
					letter-spacing: 0;
				}

			/* ステップ枠 */
			.oneStepBox {
				margin: 1em;
				padding: 2em 1em;
				border: 1px solid black;
			}
				.oneStepBox h4 {
					font-weight: bold;
					font-size: 1.75em;
					letter-spacing: 0.15em;
					margin: 0;
					padding: 0;
				}
				.stepGuide {
					margin: 0.5em 0 0 0;
				}
				.stepImages {
					margin: 2em 0 0 0;
				}
					.stepImages img {
						display: inline-block;
						max-width: 100%;
					}

				.oneStepBox ul {
					list-style-type: circle;
					margin-left: 0;
					padding-left: 1.2em;
				}

		/* ………………… */
		/* ▼会社概要領域 */
		/* ………………… */
		.companyArea {
		}

			/* 会社概要テーブル */
			.companyInfo {
				margin: 1em auto 5.5em;
			}
				.companyInfo th {
					font-weight: normal;
					text-align: left;
					min-width: 7em;
				}
				.companyInfo th::before,
				.companyInfo th::after {
					content: '｜';
				}
				.companyInfo th,
				.companyInfo td {
					padding: 1em;
					vertical-align: top;
				}
					.companyInfo a {
						color: #615147;
						
					}

			/* 写真列挙領域 */
			.companyPhotoBox img {
				margin: auto;
			}

		/* ……………………… */
		/* ▼▼施工エリア領域 */
		/* ……………………… */
		.areaArea {
			margin-bottom: 5.5em;
		}

			.targetAreas {
				margin: 3.5em 0;
			}
				.targetAreaName {
					margin: 0;
					font-size: 1.1em;
				}
				.targetAreas .shortSeparator {
					margin: 1em auto;
					min-width: 300px;
					width: 20%;
				}

		/* ……………………… */
		/* ▼お問い合わせ領域 */
		/* ……………………… */
		.contactArea {
			margin: 1em auto;
			padding: 0;
			max-width: 630px;
		}

			.formTitle {
				font-weight: bold;
				font-size: 1.1em;
				letter-spacing: 2px;
				background-color: #5f5148;
				color: white;
				padding: 0.3em;
				text-align: center;
			}

			/* ▼入力TABLE */
			.contacttable {
				margin: auto;
				border-collapse: collapse;
				max-width: 100%;
			}
			.contacttable th,
			.contacttable td {
				text-align: left;
				font-weight: normal;
				margin: 0.25em 0 0 0;
				padding: 0;
			}
			.contacttable th {
				padding: 0.5em 1em 0.5em 0;
				white-space: nowrap;	/* 見出し列を折り返さない */
			}

			/* 必須案内 */
			.requireGuide {
				margin: 0;
				padding: 0;
				color: red;
			}

			/* 必須サイン */
			.required-sign {
				color: red;
				display: inline-block;
				padding: 0 3px;
			}

			.inputGuides {
				text-align: left;
				margin-bottom: 1.5em;
			}
			.inputGuideHead {
				margin: 1em 0 2.5em 0;
			}

			.contacttable th.tallinputbox {
				vertical-align: top;
			}
			.contacttable td {
				padding: 0.5em 0;
			}
			.contacttable input.freetext { width: 400px; font-size: 1.2em; }
			.contacttable .freeinputbox { max-width: 100%; width: 400px; height: 9em; font-size: 1.2em; }

			/* ▼フォーム内ボタンの装飾 */
			.formbuttons { padding-top: 1.5em !important; text-align: center !important; }
			.formbuttons input { font-size: 1.25em; margin-right: 1em; padding: 0.25em 0.75em; min-width: 10em; border: 1px solid #bbb; /* border-radius: 0.6em; */ }
			.formbuttons .confirmbutton { background-color: #5f5148; color: white; border: 1px solid #5f5148; padding: 0.4em 0.75em; text-align: center; min-width: 18em; font-weight: bold; }
			.formbuttons .confirmbutton .labelMain { font-size: 1.29rem; }
			.formbuttons .confirmbutton .labelSub { font-size: 1rem; }
			.formbuttons .confirmbutton:hover { background-color: #f1efed; color: #5f5148; }
			.formbuttons input.clearbutton   { background-color: #fff; }
			.formbuttons input.sendbutton { background-color: #5f5148; color: white; border-color: #5f5148; font-weight: bold; }
			.formbuttons input.sendbutton:hover { background-color: white; color: #5f5148; }
			.formbuttons input.backbutton { background-color: #cfcbc8; color: #5f5148; font-weight: bold;  }
			.formbuttons input.backbutton:hover { background-color: white; color: #5f5148; }

		.policyBox {
			margin: 4.5em auto;
			font-weight: 300;
		}

	/* ------------ */
	/* ▼フッタ区画 */
	/* ------------ */
	footer {
		margin: 0;
		padding: 1em;
		background-color: #615147;
		color: white;
	}

		/* ▼お問い合わせ枠 */
		.contactBox h2 {
			border: 1px solid white;
			color: white;
			font-size: 1em;
			margin: 0;
			padding: 0;
			text-align: center;
		}
		.contactBox h2 a {
			display: block;
			color: white;
			margin: 0;
			padding: 1em;
			text-decoration: none;
			background-color: #7d6b5a;
		}
		.contactBox h2 a:hover {
			background-color: #edeae6; color: brown;
		}
		.contactBox h2 .en {
			display: inline-block;
			padding: 0 1em 0.3em;
			/*border-bottom: 1px solid white;*/
			font-weight: bold;
		}
		.contactBox h2 .ja {
			padding: 0.35em 0;
			display: block;
			font-size: 0.85em;
		}

			.contactGuide {
				line-height: 1.67;
				font-size: 0.8em;
			}

			/* ▽連絡先枠 */
			.addressBox {
				margin: 2em 0 0 0;
			}
				.addressGuide {
					font-size: 0.8em;
				}
				.addressDetail {
					display: table;
					width: 100%;
					margin: 0.5em 0 0 0;
				}
					.addressDetail h3,
					.addressDetail p {
						display: table-cell;
						font-size: 1em;
						letter-spacing: 3px;
					}
					.addressDetail h3 {
						width: 5em;
						line-height: 1;
					}
						.addressDetail h3 span {
							display: inline-block;
							margin: 0;
							padding: 3px 0;
					/*		border-style: solid;
							border-color: white;
							border-width: 0 1px;	*/
						}
						.addressDetail p a {
							text-decoration: none;
							color: white;
						}
						.addressDetail p a:hover {
							text-decoration: underline;
						}

		/* ▼サイトマップ枠 */
		.sitemapBox .menuButton {
			color: white;
			border-color: #615147;
		}

			.sitemapList.globalmenuBox {
				font-size: 0.8em;
			}

			.sitemapList .menuItem {
				margin: 0 1em 2.5em 0;
			}

			/* 現在位置表示 */
			.homePage .sitemapBox .pHome			,
			.architectPage .sitemapBox .pArchitect	,
			.worksPage .sitemapBox .pWorks			,
			.flowPage .sitemapBox .pFlow			,
			.infoPage .sitemapBox .pTopics			,
			.voicePage .sitemapBox .pVoice			,
			.companyPage .sitemapBox .pCompany		,
			.areaPage .sitemapBox .pArea			,
			.contactPage .sitemapBox .pContact {
				border-bottom: 2px solid white;
			}

			/* マウスオーバー表示 */
			.sitemapBox .menuButton:hover { border-bottom: 2px solid #fcc; }
			.sitemapBox .menuButton:hover .ja { color: #fcc; }
			.sitemapBox .menuButton:hover .en { background-color: white; color: brown; }

				.sitemapBox .menuButton .ja {
				}
				.sitemapBox .menuButton .en {
					border: 1px solid white;
					margin: 5px auto 0;
				}
				.sitemapBox .menuButton .icon {
					text-align: left;
				}
				.sitemapBox .menuButton .icon .text {
					vertical-align: middle;
					display: inline-block;
					margin-left: 1em;
				}
				.sitemapBox .menuButton .icon img {
					background-color: white;
					display: inline-block;
					padding: 3px;
					border-radius: 6px;
					vertical-align: middle;
				}

		.bottomFooter {
			margin-top: 3em;
			text-align: center;
		}

			.copyright {
				margin: 0;
				padding: 1.5em 0 4em 0;
			}


/* ========================================================= */
/* ■総合モバイル端末（横幅1023px以下）共通の追加・上書きCSS */
/* ========================================================= */
@media all and (max-width:1023px) {

	.pc-only { display: none !important; }

	/* ------------ */
	/* ▼ヘッダ区画 */
	/* ------------ */

		/* ▼ドロワーメニュー(モバイルのみ) */
		.drawerMenu * {
			margin: 0;
			padding: 0;
			outline: none;
			border: none;
			font: inherit;
			font-family: inherit;
			font-size: 100%;
			font-style: inherit;
			font-weight: inherit;
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			text-align: left;
			text-decoration: none;
			list-style: none;
		}

			/* ▼ドロワーボタンの表示と動作 */
			.drawerMenu .drawerBg {
				width: 100%;
				height: 100%;
				position: fixed;
				z-index: 999;
				background-color: rgba(51, 51, 51, 0.5);
				display: none;
				top: 0;
				left: 0;
			}
			.drawerMenu .drawerBtn {
				display: block;
				background: none;
				border: none;
				width: 42px;
				letter-spacing: 0.1em;
				cursor: pointer;
				position: fixed;
				top: 6px;		/* ボタンの配置(上) */
				right: 10px;	/* ボタンの配置(右) */
				z-index: 1001;
				text-align: center;
				outline: none;
				background-color: rgba(255,255,255,0.4);
				padding: 0 7px;
				box-sizing: content-box;
			}
			.drawerMenu .drawerBtn.active .drawerBar {	width: 49px; }
			.drawerMenu .drawerBtn.active .drawerBar1 {	transform: rotate(30deg); }
			.drawerMenu .drawerBtn.active .drawerBar2 {	opacity: 0;	}
			.drawerMenu .drawerBtn.active .drawerBar3 {	transform: rotate(-30deg); }
			.drawerMenu .drawerBtn.active .drawerLabelMenu {	display: none;	}
			.drawerMenu .drawerBtn.active .drawerLabelClose {	display: block;	}
			.drawerMenu .drawerBar {
				display: block;
				height: 2px;
				margin: 10px 0;
				transition: all 0.2s;
				transform-origin: 0 0;
			}

			/* ▼ドロワーボタンの色 */
			.drawerMenu .drawerBtn { color: darkred; }
			.drawerMenu .drawerBtn .drawerBar { background-color: darkred; }

			/* ▼ドロワーボタン下のラベル */
			.drawerMenu .drawerText {
				text-align: center;
				font-size: 10px;
			}
			.drawerMenu .drawerLabelClose {
				letter-spacing: 0.08em;
				display: none;
			}
			.drawerMenu .drawerLabelMenu {
				display: block;
			}

			/* ▼モバイル用メニュー本体(ラッパー) */
			.drawerMenu .drawerNaviWrapper {
				background-color: rgba(255,255,255,0.8);	/* 重なるメニューの背景色 */
				width: 12em;								/* 重なるメニューの横幅 */
				height: 100%;
				transition: all 0.2s;
				transform: translate(312px);
				position: fixed;
				top: 0;
				right: 0;
				z-index: 1000;	/* 最前面表示 */
			}
			.drawerMenu .drawerNaviWrapper.open {
				transform: translate(0);
			}

			/* ▼モバイル用メニュー本体 */
			.drawerMenu .drawerNaviList {
				padding: 100px 6px;
			}

			/* ▼モバイル用メニュー項目 */
			.drawerMenu a {
				color: inherit;
				text-decoration: none;
				display: block;
				padding: 9px 18px;
				border-bottom: 1px dashed #ccc;
			}
			.drawerMenu a:visited {
			  color: inherit;
			}
			.drawerMenu a:hover {
				background-color: snow;
			}

	/* ------------ */
	/* ▼メイン区画 */
	/* ------------ */
	main {
	}

		/* 共通見出し */
			main h2 b {
				top: 24%;
			}
				main h2 span {
					font-size: 0.9em;
				}

		/* ………………… */
		/* ▼施工例群領域 */
		/* ………………… */
			.worksImageList {
				max-width: 600px;
			}
					.worksImageBox img {
						width: 200px;
					}

		/* …………………………………… */
		/* ▼お客さまの声(１ケース)領域 */
		/* …………………………………… */
						h4.basicInfoTableTitle {
							margin-top: 1.5em;
						}

	/* ------------ */
	/* ▼フッタ区画 */
	/* ------------ */
	footer {
		padding-top: 3em;
	}
		.upperFooter {
			max-width: 550px;
			margin: auto;
		}

			.leftFooter {
				margin-bottom: 3.5em;
			}

		/* ▼サイトマップ枠 */
			.sitemapList .menuItem.menuInstagram {
				display: block;
			}

}


/* ====================================================== */
/* ■スマートフォン（横幅599px以下）専用の追加・上書きCSS */
/* ====================================================== */
@media all and (max-width:599px) {

	/* ------------ */
	/* ▼ページ全体 */
	/* ------------ */
	body {
		font-size: 0.9em;
	}

	/* 文字間隔を標準に */
	.topicBox li ,
	.sentenceBox p ,
	.personDetails p ,
	.stepGuide ,
	.caseHeader , .basicInfoHead h4 , .basicInfoHead p , .caseMessages ,
	.companyInfo td ,
	.sentenceBox p , .targetAreas {
		letter-spacing: 0px;
	}

	/* ------------ */
	/* ▼ヘッダ区画 */
	/* ------------ */
		/* ▼上端ロゴ領域 */
		h1 {
			padding: 5px 0 0 7px;
		}
		h1 img {
			height: 60px;
			width: auto;
		}

	/* ---------------- */
	/* ▼上部大画像区画 */
	/* ---------------- */
		.topCopy {
			top: 67px;				/* ロゴ高さサイズと連動させる */
			padding: 0.2em 0;
		}
			.topCopyMain {
				font-size: 16pt;
			}
			.topCopySub {
				font-size: 10pt;
			}

	/* ------------ */
	/* ▼メイン区画 */
	/* ------------ */
	main {
	}

		/* 共通見出し */
			main h2 b {
				top: 15%;
			}
				main h2 span {
					padding: 1% 1em;
					font-size: 0.8em;
				}

		/* ………………… */
		/* ▼施工例群領域 */
		/* ………………… */
			.worksImageList {
				max-width: 360px;
			}
					.worksImageBox img {
						width: 120px;
					}

		/* …………………………………… */
		/* ▼お客さまの声(１ケース)領域 */
		/* …………………………………… */
			.caseHeader {
				font-size: 1.5em;
			}

						h4.basicInfoTableTitle {
							margin-top: 1.5em;
						}

		/* ……………………… */
		/* ▼お問い合わせ領域 */
		/* ……………………… */
		.contactform {
		}
			/* ▼TABLEを崩す */
			.contacttable {
				display: block;
			}
			.contacttable th,
			.contacttable td {
				display: block;
				margin: 0.25em 0 0 0;
				padding: 0;
			}

			.contacttable th { margin-top: 1.2em; font-weight: bold; }
			.contacttable th::before { content: '▼'; }
			.contacttable th:empty::before { content: ''; }
			.contacttable td { padding-left: 0.5em; }

			.contacttable input.freetext { width: 100%; box-sizing: border-box; }
			.contacttable input.addresstext { max-width: 170px; }
			.contacttable .freeinputbox { width: 100%; box-sizing: border-box; }

			/* 選択肢群 */
			.selectOptions {
				min-width: 7em;
			}

			/* ▼フォーム内ボタンの装飾 */
			.formbuttons input { font-size: 1em; margin-right: 10px; padding: 0.34em 5px; min-width: 135px; }

	/* ------------ */
	/* ▼フッタ区画 */
	/* ------------ */
		/* ▼お問い合わせ枠 */
			/* ▽連絡先枠 */
				.addressDetail {
					margin: 1.5em 0 0 0;
				}
					.addressDetail h3,
					.addressDetail p {
						font-size: 1.3em;
					}

}


/* ========================================================== */
/* ■小型スマートフォン（横幅375px以下）専用の追加・上書きCSS */
/* ========================================================== */
@media all and (max-width:375px) {

	/* ------------ */
	/* ▼メイン区画 */
	/* ------------ */
	main {
	}

		/* 共通見出し */
			main h2 b {
				top: 12%;
			}
				main h2 span {
					padding: 0.5% 1em;
					font-size: 0.75em;
				}

		/* ………………… */
		/* ▼施工例群領域 */
		/* ………………… */
			.worksImageList {
				max-width: 240px;
			}

		/* …………………………………… */
		/* ▼お客さまの声(１ケース)領域 */
		/* …………………………………… */
			/* ‥‥‥‥‥‥‥‥ */
			/* ▽詳細データ段組 */
			/* ‥‥‥‥‥‥‥‥ */
					.caseInformation {
						padding: 16px 8px;							/* サイズ調整：配置 */
						width: 120px;								/* サイズ調整：横幅 */
						height: 60px;								/* サイズ調整：高さ */
						font-size: 7px;								/* サイズ調整：文字 */
						line-height: 10px;							/* サイズ調整：行高 */
					}
					.caseInformation.placeBottomLeft {
						bottom: 10px;
					}
					.caseInformation.miniSize {
						width: 110px;
					}

	/* ------------ */
	/* ▼フッタ区画 */
	/* ------------ */
		/* ▼お問い合わせ枠 */
			/* ▽連絡先枠 */
					.addressDetail h3,
					.addressDetail p {
						font-size: 1.1em;
						word-break: break-all;
					}

}


/* ===================================================== */
/* ■PCサイズ画面（横幅1024px以上）専用の追加・上書きCSS */
/* ===================================================== */
@media screen and (min-width:1024px) {

	.mobile-only { display: none !important; }

	/* ------------ */
	/* ▼ヘッダ区画 */
	/* ------------ */
	.headbox {
		display: table;
		width: 100%;
		box-sizing: border-box;
	}

		/* ▼上端ロゴ領域 */
		h1 {
			display: table-cell;
			vertical-align: middle;
			padding: 0.5em 1em 0.5em 6.5em;
		}

		/* ▼グローバルメニュー領域 */
		.globalmenuArea {
			display: table-cell;
			text-align: right;
			vertical-align: top;
			padding: 2.2em 1.8em 1em 1em;
		}

	/* ---------------- */
	/* ▼上部大画像区画 */
	/* ---------------- */
	.topImageZone {
	}
		.topCopy {
			top: 130px;				/* ロゴ高さサイズと連動させる */
		}
			.topCopyMain {
				letter-spacing: 0.3em;
				font-size: 32pt;
			}
			.topCopySub {
				letter-spacing: 0.15em;
				font-size: 18pt;
			}

		/* ▼TOPIC枠 */
		.topicBox {
			display: table;
			width: 100%;
		}
			.topicBox h2,
			.topicBox ul {
				display: table-cell;
				vertical-align: middle;
				padding: 1em;
			}

			.topicBox h2 {
				text-align: center;
			}
				.topicBox h2 span {
					display: inline-block;
					padding: 1em;
					border-style: solid;
					border-color: white;
					border-width: 0 1px 0 1px;
					font-size: 1.1em;
				}

	/* ------------ */
	/* ▼メイン区画 */
	/* ------------ */
	main {
	}

		/* 汎用セパレータ */
		.shortSeparator {
			min-width: 450px;
			border-style: solid;
			border-color: gray;
			border-width: 1px 0 0 0;
		}

		/* …………………… */
		/* ▼建築士紹介領域 */
		/* …………………… */
		.aboutMeArea {
		}
			.personCover {
				display: table;
				max-width: 1000px;
				margin: auto;
			}
				.personImageBox,
				.personDetails {
					display: table-cell;
					vertical-align: bottom;
					width: 50%;
				}
				.personDetails {
					padding: 0 0 70px 0;
					line-height: 1.6;
				}

		/* ………………… */
		/* ▼施工例群領域 */
		/* ………………… */
			.worksImageList {
				max-width: 960px;
			}
					.worksImageBox img {
						width: 318px;
					}

		/* …………………………………… */
		/* ▼お客さまの声(１ケース)領域 */
		/* …………………………………… */
		.voiceCaseArea {
			margin: 1em auto;
			max-width: 1152px;
		}

			/* ‥‥‥‥‥‥‥‥ */
			/* ▽付属情報(文章) */
			/* ‥‥‥‥‥‥‥‥ */
			.caseMessages {
			}
				.caseMessages h4 {
					padding: 0.85em 4em;
				}
				.caseMessages ul {
					padding: 0 5em;
				}
				.caseMessages p {
					padding: 0 4em;
				}

			/* ‥‥‥‥‥‥‥‥ */
			/* ▽詳細データ段組 */
			/* ‥‥‥‥‥‥‥‥ */
			.caseDetails {
				display: table;
			}
				.casePersonPhotoBox,
				.basicInfoBox {
					display: table-cell;
					width: 50%;
					vertical-align: top;
				}
					.caseInformation {
						padding: 27px 16px;							/* サイズ調整：配置 */
						width: 220px;								/* サイズ調整：横幅 */
						height: 110px;								/* サイズ調整：高さ */
						/* Original Size: 562×326 = 2:1 */
						font-size: 15px;							/* サイズ調整：文字 */
						line-height: 18px;							/* サイズ調整：行高 */
					}
					.caseInformation.miniSize {
						width: 200px;
					}
				.basicInfoBox {
					padding: 0 0 0 1.5em;
				}

		/* ……………………………… */
		/* ▼お住まいまでの流れ領域 */
		/* ……………………………… */
		.flowArea {
		}

			/* ステップテーブル */
			.stepTable {
				max-width: 820px;
				margin: 2em auto 4em;
				padding: 2.5em 0;
			}

				.stepTable .feeBox {
					width: 19em;
				}

			/* ステップ枠 */
			.oneStepBox {
				max-width: 820px;
				margin: 2em auto 4em;
				padding: 2.5em 4.5em;
				border: 1px solid black;
			}
				.oneStepBox h4 {
					font-weight: bold;
					font-size: 1.75em;
					margin: 0;
					padding: 0;
				}
				.stepGuide {
					margin: 0.5em 0 0 0;
				}
				.stepImages {
					margin: 2em 0 0 0;
				}
				.stepImages::after {
					/* Clearfix */
					content: "";
					clear: both;
					display: block;
				}
					.stepImages img {
						display: block;
						float: left;
						max-width: 100%;
					}

	/* ------------ */
	/* ▼フッタ区画 */
	/* ------------ */
	.upperFooter {
		display: table;
		margin: 2em auto;
		max-width: 1100px;
	}
		.leftFooter,
		.rightFooter {
			display: table-cell;
			width: 50%;
			padding: 0 3em;
		}
		.leftFooter {
			border-right: 1px solid white;
		}

}


/* ========================= */
/* ■スクリプト用CSSの上書き */
/* ========================= */
body .lightbox .lb-image {
    border-width: 0;		/* Lightboxの周囲に出る白枠線を消す */
}

/* END OF CSS FILE */