/* Cryptn 固定ページ（旧テーマ用に組まれていた部分の見た目を整える） */

/* 意匠・デザイン：冒頭のリード */
.echo-p-design-lead {
	margin-bottom: 64px !important;
	padding: clamp(32px, 6vw, 72px) clamp(20px, 6vw, 80px) !important;
	background: #eceef2;
	text-align: center;
}
.echo-p-design-lead p {
	line-height: 2.1;
}
.echo-p-design-lead .wp-block-image,
.echo-p-design-lead figure {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* 旧デザインの見出し（Voice 01 など）が残っている場合 */
.echo-p-design-header {
	text-align: center;
	margin-bottom: 32px;
}
.echo-text-sm {
	display: block;
	font-size: 0.6em;
	font-weight: 400;
	letter-spacing: 0.1em;
}

/* 下部の「施工事例はこちら」「住宅性能はこちら」などの誘導枠 */
.echo-p-design-next,
.echo-p-quality-next {
	margin-top: 64px !important;
}
.echo-p-design-next .is-style-box-border-first,
.echo-p-quality-next .is-style-box-border-first {
	padding: clamp(28px, 4vw, 48px) clamp(16px, 4vw, 40px);
	border: 1px solid #363e54;
}
.echo-p-design-next .wp-block-columns,
.echo-p-quality-next .wp-block-columns {
	gap: 24px;
	margin-bottom: 0;
}
.echo-p-design-next .smb-btn-box,
.echo-p-quality-next .smb-btn-box {
	padding: 0 !important;
	background: none !important;
	text-align: center;
}
.echo-p-design-next .smb-btn-box__lede,
.echo-p-quality-next .smb-btn-box__lede {
	margin-bottom: 16px;
	line-height: 1.9;
}
.echo-p-design-next .smb-btn,
.echo-p-quality-next .smb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 160px;
	min-height: 48px;
	padding: 0 28px;
	background: #363e54;
	color: #fff !important;
	text-decoration: none !important;
	letter-spacing: 0.12em;
}
.echo-p-design-next .smb-btn:hover,
.echo-p-quality-next .smb-btn:hover {
	opacity: 0.85;
}
@media (max-width: 639px) {
	.echo-p-design-next .wp-block-columns,
	.echo-p-quality-next .wp-block-columns {
		flex-direction: column;
	}
}

/* 施工品質・性能など：全幅のグループの中身を読みやすい幅で中央に */
.echo-p-section.alignfull > .wp-block-group__inner-container {
	box-sizing: border-box;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}
.echo-p-section.alignfull + .echo-p-section.alignfull {
	margin-top: 64px;
}
.echo-p-section .wp-block-image,
.echo-p-section .wp-block-image figure {
	margin-left: auto;
	margin-right: auto;
}
.echo-p-section .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}
.echo-p-section h2,
.echo-p-section h3 {
	margin-top: 40px;
}
.echo-p-quality-next {
	box-sizing: border-box;
	max-width: 960px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 20px;
	padding-right: 20px;
}

/* 下の誘導枠（旧レイアウト）：ボタンを中央に */
.echo-p-design-next .wp-block-columns,
.echo-p-quality-next .wp-block-columns {
	justify-content: center;
}
.echo-p-design-next .wp-block-column,
.echo-p-quality-next .wp-block-column {
	flex: 0 1 340px !important;
}

/* =========================================================
 * 意匠・デザイン（新レイアウト）
 * ========================================================= */
.cr-design {
	box-sizing: border-box;
	max-width: 960px;
	margin-left: auto !important;
	margin-right: auto !important;
}
.cr-design .cr-label {
	margin: 0 0 6px !important;
	font-family: 'Jost', sans-serif;
	font-size: 13px;
	letter-spacing: 0.24em;
	color: #555b6e;
}
.cr-design h2.wp-block-heading {
	margin: 0 0 40px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.6;
}
.cr-design h2.wp-block-heading::before,
.cr-design h2.wp-block-heading::after,
.cr-design h3.wp-block-heading::before,
.cr-design h3.wp-block-heading::after {
	display: none !important;
}
.cr-design p {
	line-height: 2.1;
}

.cr-design-intro {
	max-width: 720px;
	margin: 0 auto 104px !important;
	text-align: center;
}
.cr-design-intro p + p {
	margin-top: 20px;
}

.cr-design-section {
	margin-top: 104px !important;
}
.cr-design-section:first-child {
	margin-top: 0 !important;
}

.cr-design-points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 56px 64px;
}
.cr-design-points > .wp-block-group__inner-container {
	display: contents;
}
.cr-design-point {
	margin: 0 !important;
	padding-top: 24px;
	border-top: 1px solid #363e54;
}
.cr-design-point .cr-num {
	margin: 0 !important;
	font-family: 'Jost', sans-serif;
	font-size: 14px;
	letter-spacing: 0.16em;
	color: #363e54;
}
.cr-design-point h3.wp-block-heading {
	margin: 6px 0 18px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-size: 19px;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.6;
}
.cr-design-point p + p {
	margin-top: 14px;
}

.cr-design-column {
	margin-top: 48px !important;
	padding: 24px 28px;
	background: #f2f2ef;
}

.cr-next {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px 24px;
	margin-top: 104px !important;
	padding: clamp(32px, 4vw, 48px) clamp(16px, 4vw, 40px);
	border: 1px solid #363e54;
	text-align: center;
}
.cr-next > .wp-block-group__inner-container {
	display: contents;
}
.cr-next-item {
	margin: 0 !important;
}
.cr-next-item p {
	margin: 0 0 16px !important;
	line-height: 1.9;
}
.cr-next .wp-block-buttons {
	justify-content: center;
}
.cr-next .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 180px;
	min-height: 48px;
	padding: 0 28px;
	border-radius: 0;
	background: #363e54;
	color: #fff !important;
	text-decoration: none !important;
	letter-spacing: 0.12em;
}
.cr-next .wp-block-button__link:hover {
	opacity: 0.85;
}

@media (max-width: 639px) {
	.cr-design-intro {
		text-align: left;
		margin-bottom: 72px !important;
	}
	.cr-design-section,
	.cr-next {
		margin-top: 72px !important;
	}
	.cr-design-points,
	.cr-next {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
 * 施工品質・性能（新レイアウト）：写真を背景に、本文を重ねる
 * ========================================================= */
html:has(.cr-quality) body {
	overflow-x: clip;
}
.cr-quality {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}
.cr-q {
	position: relative;
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw !important;
	min-height: 88vh;
	margin: 0 0 0 calc(50% - 50vw) !important;
	padding: clamp(64px, 10vw, 140px) max(20px, calc((100vw - 1200px) / 2));
	display: flex;
	align-items: center;
	background-color: #363e54;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	color: #2a2e3a;
}
.cr-q > .wp-block-group__inner-container {
	display: contents;
}
.cr-q::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(31, 36, 52, 0.55), rgba(31, 36, 52, 0.15));
	pointer-events: none;
}
.cr-q--right::before {
	background: linear-gradient(270deg, rgba(31, 36, 52, 0.55), rgba(31, 36, 52, 0.15));
}
.cr-q--right {
	justify-content: flex-end;
}

/* 背景写真（サイト内の写真を使用） */
.cr-q--hero { background-image: url(/wp-content/uploads/2022/03/photo_quality_03_01.jpg); }
.cr-q--structure { background-image: url(/wp-content/uploads/2022/03/photo_quality_03_02.jpg); }
.cr-q--insulation { background-image: url(/wp-content/uploads/2022/03/photo_quality_02_02.jpg); }
.cr-q--future { background-image: url(/wp-content/uploads/2022/03/photo_quality_02_05.jpg); }

/* 本文の枠 */
.cr-q-card {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: min(560px, 100%);
	margin: 0 !important;
	padding: clamp(28px, 4vw, 52px);
	background: rgba(255, 255, 255, 0.94);
}
.cr-q-card p {
	line-height: 2.05;
}
.cr-q-card p + p {
	margin-top: 16px;
}
.cr-q .cr-q-label {
	margin: 0 0 6px !important;
	font-family: 'Jost', sans-serif;
	font-size: 13px;
	letter-spacing: 0.24em;
	color: #555b6e;
}
.cr-q h2.wp-block-heading,
.cr-q h3.wp-block-heading {
	margin: 0 0 24px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.6;
	color: inherit;
}
.cr-q h2.wp-block-heading::before,
.cr-q h2.wp-block-heading::after,
.cr-q h3.wp-block-heading::before,
.cr-q h3.wp-block-heading::after {
	display: none !important;
}
.cr-q h3.wp-block-heading {
	font-size: clamp(20px, 2.2vw, 24px);
}

/* 冒頭（写真の上に白文字） */
.cr-q--hero {
	min-height: 92vh;
	justify-content: center;
	text-align: center;
	color: #fff;
}
.cr-q--hero::before {
	background: rgba(31, 36, 52, 0.58);
}
.cr-q-intro {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 0 auto !important;
}
.cr-q--hero .cr-q-label {
	color: rgba(255, 255, 255, 0.85);
}
.cr-q--hero h2.wp-block-heading {
	font-size: clamp(24px, 3.4vw, 38px);
	margin-bottom: 32px !important;
}
.cr-q--hero p {
	line-height: 2.2;
}

/* 数値の並び */
.cr-q-specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 28px 0 !important;
	background: #c9cbd2;
	border: 1px solid #c9cbd2;
}
.cr-q-specs > .wp-block-group__inner-container {
	display: contents;
}
.cr-q-spec {
	margin: 0 !important;
	padding: 14px 16px;
	background: #fff;
}
.cr-q-spec p {
	margin: 0 !important;
	line-height: 1.6;
}
.cr-q-spec p:first-child {
	font-size: 12px;
	letter-spacing: 0.1em;
	color: #555b6e;
}
.cr-q-spec p + p {
	margin-top: 4px !important;
	font-family: 'Jost', 'Zen Kaku Gothic New', sans-serif;
	font-size: 18px;
	color: #363e54;
}

/* 下の誘導枠：施工品質ページでは本文幅に */
.cr-quality .cr-next {
	max-width: 960px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* スマホ・タブレット：写真を見せてから本文 */
@media (max-width: 1023px) {
	.cr-q {
		background-attachment: scroll;
	}
}
@media (max-width: 639px) {
	.cr-q {
		min-height: 0;
		padding: 46vh 16px 24px;
		align-items: flex-end;
	}
	.cr-q::before,
	.cr-q--right::before {
		background: linear-gradient(180deg, rgba(31, 36, 52, 0) 30%, rgba(31, 36, 52, 0.45));
	}
	.cr-q--hero {
		min-height: 80vh;
		padding: 72px 20px;
		align-items: center;
	}
	.cr-q--hero::before {
		background: rgba(31, 36, 52, 0.6);
	}
	.cr-q-card {
		padding: 24px 20px;
	}
	.cr-q-specs {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
 * クリプトンについて
 * ========================================================= */

/* 代表者のメッセージ：本文側を写真の色味（明るいグレー）になじませる */
.echo-p-about-greeting .smb-media-text {
	margin-bottom: 72px;
}
.echo-p-about-greeting .smb-media-text > .c-row {
	margin: 0 !important;
	align-items: stretch !important;
	background: #ececea;
}
.echo-p-about-greeting .smb-media-text > .c-row > .c-row__col {
	margin: 0 !important;
	padding: 0 !important;
}
.echo-p-about-greeting .smb-media-text__contents-wrapper {
	box-sizing: border-box;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(28px, 4vw, 56px) !important;
}
.echo-p-about-greeting .smb-media-text__contents-wrapper h2,
.echo-p-about-greeting .smb-media-text__contents-wrapper h3 {
	margin-top: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-weight: 500;
	letter-spacing: 0.08em;
}
.echo-p-about-greeting .smb-media-text__contents-wrapper p {
	line-height: 2.05;
	color: #33363c;
}
.echo-p-about-greeting .smb-media-text__contents-wrapper p:last-child {
	margin-top: 28px;
	font-size: 14px;
	letter-spacing: 0.08em;
}
.echo-p-about-greeting .smb-media-text__figure {
	height: 100%;
	margin: 0 !important;
}
.echo-p-about-greeting .smb-media-text__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 会社概要：事務所の写真2枚を横並びに */
.echo-p-about-outline .wp-block-columns {
	flex-wrap: nowrap !important;
	gap: 12px !important;
	margin-bottom: 40px;
}
.echo-p-about-outline .wp-block-columns > .wp-block-column {
	flex: 1 1 0 !important;
	min-width: 0;
	margin: 0 !important;
}
.echo-p-about-outline .wp-block-columns img {
	display: block;
	width: 100%;
	height: auto;
}

/* =========================================================
 * ほかのページへの導線（[cryptn_links]）
 * ========================================================= */
.cr-links {
	box-sizing: border-box;
	margin: 96px 0 0;
}
.cr-links__head {
	margin: 0 0 28px;
}
.cr-links__en {
	font-family: 'Jost', sans-serif;
	font-weight: 300;
	font-size: clamp(32px, 3.4vw, 44px);
	line-height: 1.1;
	letter-spacing: 0.04em;
	color: #2a2e3a;
}
.cr-links__ja {
	margin-top: 6px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.24em;
	color: #2a2e3a;
}
.cr-links__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
.cr-links a.cr-links__item {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #363e54;
	color: #fff !important;
	text-decoration: none !important;
}
.cr-links__item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}
.cr-links__item::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(31, 36, 52, 0.1) 30%, rgba(31, 36, 52, 0.75));
}
.cr-links__item:hover img {
	transform: scale(1.05);
}
.cr-links__text {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 16px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.4;
}
.cr-links__text-en {
	font-family: 'Jost', sans-serif;
	font-weight: 300;
	font-size: 24px;
	letter-spacing: 0.04em;
}
.cr-links__text-ja {
	font-size: 12px;
	letter-spacing: 0.16em;
}
@media (max-width: 781px) {
	.cr-links__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.cr-links__text-en {
		font-size: 20px;
	}
}

/* 自動で入る導線（フッターの上） */
.cr-links-auto {
	box-sizing: border-box;
	padding: 0 max(20px, calc((100% - 1200px) / 2)) 96px;
}
.cr-links-auto .cr-links {
	margin-top: 64px;
	padding-top: 64px;
	border-top: 1px solid #d9dade;
}
@media (max-width: 639px) {
	.cr-links-auto {
		padding-bottom: 64px;
	}
	.cr-links-auto .cr-links {
		margin-top: 40px;
		padding-top: 48px;
	}
}

/* 下の「施工事例は〜」「性能・品質は〜」の誘導枠は、下の導線（More）と重なるので非表示 */
.cr-next,
.echo-p-design-next,
.echo-p-quality-next {
	display: none !important;
}

/* =========================================================
 * お問い合わせ（Snow Monkey Forms）
 * ========================================================= */
.cr-contact {
	max-width: 880px;
	margin-left: auto !important;
	margin-right: auto !important;
}
.cr-contact-lead {
	margin-bottom: 40px !important;
	text-align: center;
	line-height: 2;
}
.cr-contact-boxes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 64px !important;
}
.cr-contact-boxes > .wp-block-group__inner-container {
	display: contents;
}
.cr-contact-box {
	margin: 0 !important;
	padding: 28px 28px 24px;
	background: #f2f2ef;
}
.cr-contact-box .cr-contact-box__label {
	margin: 0 0 8px !important;
	font-family: 'Jost', sans-serif;
	font-size: 13px;
	letter-spacing: 0.24em;
	color: #555b6e;
}
.cr-contact-box .cr-contact-box__tel {
	margin: 0 0 6px !important;
	font-family: 'Jost', sans-serif;
	font-weight: 300;
	font-size: 34px;
	line-height: 1.2;
	letter-spacing: 0.04em;
}
.cr-contact-box .cr-contact-box__tel a {
	color: #2a2e3a !important;
	text-decoration: none !important;
}
.cr-contact-box p {
	margin: 0 !important;
	font-size: 13px;
	line-height: 1.9;
}
.cr-contact-box p + p {
	margin-top: 6px !important;
}

/* フォーム本体 */
.cr-contact .smf-form .smf-item {
	margin: 0 !important;
	padding: 22px 0;
	border-top: 1px solid #e3e4e8;
}
.cr-contact .smf-form .smf-item:last-of-type {
	border-bottom: 1px solid #e3e4e8;
}
.cr-contact .smf-item__label__text {
	font-weight: 500;
	letter-spacing: 0.06em;
}
/* 「必須」は説明欄に入れて、紺のバッジで表示 */
.cr-contact .smf-item__description {
	display: inline-block;
	margin: 6px 0 0 !important;
	padding: 1px 8px;
	background: #363e54;
	color: #fff;
	font-size: 11px;
	letter-spacing: 0.1em;
	line-height: 1.7;
}
.cr-contact .smf-text-control__control,
.cr-contact .smf-textarea-control__control,
.cr-contact .smf-select-control__control {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	padding: 12px 14px;
	border: 1px solid #c9cbd2;
	border-radius: 0;
	background: #fafafa;
	font-size: 16px;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.cr-contact .smf-text-control__control:focus,
.cr-contact .smf-textarea-control__control:focus,
.cr-contact .smf-select-control__control:focus {
	border-color: #363e54;
	background: #fff;
	outline: none;
}
.cr-contact .smf-textarea-control__control {
	min-height: 200px;
}
.cr-contact .smf-radio-buttons-control__control,
.cr-contact .smf-checkboxes-control__control {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}
.cr-contact .smf-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
}
.cr-contact .smf-action {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 40px;
}
.cr-contact .smf-button-control__control {
	min-width: 260px;
	min-height: 58px;
	padding: 0 32px;
	border: 1px solid #363e54;
	border-radius: 0;
	background: #363e54;
	color: #fff;
	font-size: 15px;
	letter-spacing: 0.16em;
	cursor: pointer;
	transition: opacity 0.2s ease;
}
.cr-contact .smf-button-control__control:hover {
	opacity: 0.85;
}
.cr-contact .smf-button-control__control[data-action="back"] {
	background: #fff;
	color: #363e54;
}
.cr-contact .smf-error-messages {
	color: #b3261e;
	font-size: 13px;
}
.cr-contact .smf-complete-content {
	padding: 40px 32px;
	background: #f2f2ef;
	text-align: center;
	line-height: 2;
}
@media (min-width: 640px) {
	.cr-contact .smf-form .smf-item {
		display: grid;
		grid-template-columns: 200px minmax(0, 1fr);
		gap: 0 32px;
		align-items: start;
	}
	.cr-contact .smf-item__col--label {
		padding-top: 12px;
	}
}
@media (max-width: 639px) {
	.cr-contact-boxes {
		grid-template-columns: 1fr;
	}
	.cr-contact .smf-item__col--label {
		margin-bottom: 10px;
	}
	.cr-contact .smf-button-control__control {
		width: 100%;
	}
}
/* 個人情報の項目の説明はバッジにせず、ふつうの文章で */
.cr-contact .cr-item-note .smf-item__description {
	display: block;
	padding: 0;
	background: none;
	color: #555b6e;
	font-size: 12px;
	letter-spacing: 0.04em;
	line-height: 1.8;
}
.cr-contact .cr-item-note .smf-item__description a {
	color: #363e54;
	text-decoration: underline;
}