/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer theme {
    :root,:host {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --spacing: .25rem;
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono)
    }
}
:root {
    --ink: #403a36;
    --blue: #8b6f5b;
    --pale: #ece6de;
    --cream: #f5f1eb;
    --white: #fffdf9;
}
#contents{
	.consulting{
		all: unset;
		all: revert;
		h1{
			all: unset;
			all: revert;
		}
		h2{
			all: unset;
			all: revert;
		}
		h3{
			all: unset;
			all: revert;
		}
		dt {
			all: unset;
			all: revert;
		}
	}
}
img{
	vertical-align:bottom;
}
#contents{
	.consulting{
		color: var(--ink);
    	background: #fffdf9;
		margin: 0;
		font-family: Yu Mincho, Hiragino Mincho ProN, Georgia, serif;
		* {
			box-sizing: border-box;
		}
		a {
			color: inherit;
			text-decoration: none;
		}
		.pickup-complete {
			padding: 42px 0 58px;
		}
		.image-section-inner {
			overflow: hidden;
			&.gr{
				display:grid;
				grid-template-columns: 3fr 4fr;
				grid-template-rows: 1fr 1fr;
				gap: 10px;
				a{
					background:#333;
				}
				.gr1{
					grid-row: 1 / 3;
				}
				.gr2{
					grid-row: 1;
					grid-column: 2;
					img{
						height: 100%;
					}
				}
				.gr3{
					grid-row: 2;
					grid-column: 2;
					img{
						height: 100%;
					}
				}
				img{
					max-width:100%;
					position:relative;
					&:hover{
						opacity:0.7;
					}
				}
			}
		}
		.fields {
			background: #fffdf9;
			padding-bottom: 62px;
			padding: 125px 0;
		}
		.fields-head {
			text-align: center;
			border-bottom: 1px solid #ded7cf;
			justify-content: center;
			align-items: baseline;
			gap: 18px;
			margin-bottom: 34px;
			padding-bottom: 20px;
			display: flex;
			h2 {
				letter-spacing: .09em;
				color: #403a36;
				margin: 0;
				font: 400 40px / 1.2 Georgia, Times New Roman, serif;
			}
			span {
				letter-spacing: .1em;
				color: #8b6f5b;
				font-size: 13px;
			}
		}
		.field {
			border-color: #d8d0c7;
			border-bottom: 1px solid #ccd2d0;
			grid-template-columns: 1fr 1fr;
			align-items: center;
			gap: 80px;
			min-height: 410px;
			padding: 55px 0;
			display: grid;
		}
		.field-image {
			height: 320px;
			position: relative;
			>span {
				background: #4a4039;
				color: #fff;
				padding: 14px 17px;
				font: 11px Arial, sans-serif;
				position: absolute;
				top: 0;
				left: 0;
			}
		}
		.field-image>img, .field-preview img, .gallery-item>img {
			filter: brightness(1.07) saturate(.96);
		}
		img {
			object-fit: cover;
			width: 100%;
			height: 100%;
			display: block;
		}
		.field-copy>p {
			font-size: 13px;
			line-height: 2.05;
		}
		.field-en {
			letter-spacing: .22em;
			color: var(--blue);
			font: 10px Arial, sans-serif !important;
		}
		.eyebrow, .field-en {
			color: #8b6f5b;
		}
		.field-copy h3 {
			letter-spacing: .06em;
			margin: 16px 0 24px;
			font-size: 28px;
			font-weight: 400;
		}
		.tags {
			flex-wrap: wrap;
			gap: 7px;
			margin: 24px 0 30px;
			display: flex;
			span {
				background: #eee8e1;
				padding: 8px 12px;
				font-size: 10px;
			}
		}
		.field-preview {
			margin: 26px 0 17px;
			>p {
				color: #746b65;
				letter-spacing: .08em;
				justify-content: space-between;
				align-items: center;
				margin: 0 0 8px;
				font-size: 10px;
				display: flex;
				small {
					color: #929a9a;
					font: 8px Arial, sans-serif;
				}
			}
			>div {
				grid-template-columns: repeat(4, 1fr);
				gap: 6px;
				display: grid;
				button {
					background: #e8e1d9;
					cursor: zoom-in;
					border: 0;
					height: 65px;
					padding: 0;
					position: relative;
					overflow: hidden;
					&:hover img{
						transform:scale(1.06)
					}
					img {
						transition: transform .35s;
					}
				}
				span {
					background: #3a2d25a3;
					color: #fff;
					place-items: center;
					font: 12px Arial, sans-serif;
					display: grid;
					position: absolute;
					inset: 0;
				}
			}
		}
		.field-image>img, .field-preview img, .gallery-item>img {
			filter: brightness(1.07) saturate(.96);
		}
		.field-view {
			color: #4a4039;
			border-color: #4a4039;
		}
		.field-view {
			border: 0;
			border-bottom: 1px solid var(--ink);
			cursor: pointer;
			letter-spacing: .08em;
			background: 0 0;
			padding: 0 0 8px;
			font: 11px Arial, sans-serif;
		}
		.field.reverse .field-image {
			order: 2;
		}
		.contact.contact-visual {
			background: linear-gradient(#f0ebe4c7, #f0ebe4c7), url(../pic/consulting/cons_f.png) 50% 48% / cover no-repeat;
			position: relative;
			text-align: center;
			padding: 110px 30px;
			.contact-inner {
				z-index: 1;
				position: relative;
				.eyebrow {
					color: #6f594b;
					letter-spacing: .28em;
					margin: 0 0 26px;
					font: 600 11px / 1.2 Arial, sans-serif;
				}
			}
			h2 {
				font-size: 36px;
				letter-spacing: .06em;
				margin: 0;
				font-weight: 400;
				line-height: 1.7;
			}
			a {
				background: #403a36;
				margin-top: 38px;
				color: #fff;
				letter-spacing: .08em;
				justify-content: space-between;
				min-width: 290px;
				padding: 20px 25px 20px 30px;
				font-size: 12px;
				display: inline-flex;
			}
		}
		.lightbox {
			z-index: 100;
			background: #231d19e0;
			justify-content: center;
			align-items: center;
			padding: 56px;
			position: fixed;
			inset: 0;
			color: #fff;
			display:none;
			&.active{
				display: flex;
			}
		}
		.lightbox-close {
			font-size: 30px;
			font-weight: 200;
			top: 25px;
			right: 32px;
		}
		.lightbox-close, .lightbox-prev, .lightbox-next {
			color: #fff;
			cursor: pointer;
			background: 0 0;
			border: 0;
			font-family: Arial, sans-serif;
			position: absolute;
		}
		.lightbox-prev {
			left: 12px;
		}
		.lightbox-prev, .lightbox-next {
			padding: 20px;
			font-size: 27px;
			top: 50%;
			transform: translateY(-50%);
		}
		.lightbox-card {
			color: #403a36;
			background: #fbfaf7;
			grid-template-columns: 1.25fr .9fr;
			width: min(1080px, 100vw - 150px);
			min-height: 520px;
			display: grid;
			box-shadow: 0 24px 70px #18120e57;
   			height: min(720px, 82vh);
		}
		.lightbox-next {
			right: 12px;
		}
		.lightbox-image {
			min-height: 520px;
			overflow: hidden;
			img {
				object-position: center;
				filter: brightness(1.08) saturate(.94);
			}
		}
		.lightbox-copy {
			flex-direction: column;
			justify-content: center;
			padding: 58px 52px;
			display: flex;
			overflow: auto;
			>span {
				color: #8b6f5b;
				letter-spacing: .18em;
				font: 600 10px / 1.5 Arial, sans-serif;
			}
			h3 {
				letter-spacing: .05em;
				margin: 22px 0 20px;
				font-size: 28px;
				font-weight: 400;
				line-height: 1.55;
			}
			>p {
				color: #6c635d;
				margin: 0 0 34px;
				font-size: 13px;
				line-height: 2;
			}
			dl {
				border-top: 1px solid #ded7cf;
				margin: 0;
				padding-top: 20px;
				>div {
					grid-template-columns: 78px 1fr;
					gap: 14px;
					margin-bottom: 14px;
					display: grid;
					border-top: 1px solid #dce0df;
					padding: 12px 0;
				}
			}
			dt {
				font-size: 11px;
				font-weight: 600;
				color: #7d8889;
				margin-bottom: 5px;
			}
			dd {
				margin: 0;
				font-size: 11px;
				line-height: 1.7;
			}
			small {
				color: #8b817a;
				margin-top: 18px;
				font-size: 9px;
			}
		}
		
	}
}
@media screen and (max-width: 767px){
	#contents{
		.consulting{
			.field {
				grid-template-columns: 1fr;
				gap:20px;
				&.reverse{
					.field-image {
            			order:1;
					}
					.field-copy{
            			order:2;
					}
				}
			}
			.lightbox {
				padding: 2%;
				&.active {
                    display: block;
                    padding-top: 70px;
					z-index: 10000;
				}
			}
			.lightbox-card {
				grid-template-columns: 1fr;
				width: 100%;
				height: 100%;
			}
			.lightbox-image {
            	min-height: 260px;
            	height: 260px;
			}
			.lightbox-copy {
				padding: 5% 4%;
				h3 {
					font-size: min(5vw, 28px);
					margin: 12px 0 10px;
				}
			}
			.lightbox-prev, .lightbox-next {
				top: 25%;
				background: rgba(0, 0, 0, 0.7);
    			z-index: 120;
				padding: 7px;
                padding-top: 3px;
				border-radius: 50%;
			}
			.lightbox-close {
				top: 18px;
        	}
		}
	}
}
body:has(.lightbox.active){
	overflow: hidden;
}