/* Andouble 共通スタイル
 * 作成日: 2026/10/20
 * 修正履歴: 2026/10/20 改行・インデントを整理
 */

@font-face {
	font-family:Salon;
	src:local('Hiragino Mincho ProN'),local('Yu Mincho')
}

* {
	box-sizing:border-box
}

html {
	scroll-behavior:smooth;
	scroll-padding-top:100px
}

body {
	margin:0;
	color:#443f38;
	background:#fcfaf7;
	font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
	font-size:14px;
	line-height:2
}

a {
	color:inherit;
	text-decoration:none
}

img {
	max-width:100%;
	display:block
}

h1,h2,h3,h4,p {
	margin:0
}

h1,h2,h3,h4 {
	font-weight:400
}

h1,h2,h3 {
	font-family:Salon,'Hiragino Mincho ProN','Yu Mincho',serif
}

a:focus-visible {
	outline:3px solid #9b7657;
	outline-offset:6px
}

a:hover {
	color:#947c58
}

button,a {
	-webkit-tap-highlight-color:transparent
}

.wrap {
	width:min(1180px,88%);
	margin-inline:auto
}

.eyebrow {
	display:block;
	color:#98866b;
	font-family:Georgia,serif;
	font-size:15px;
	letter-spacing:.15em
}

.site-header {
	min-height:100px;
	padding:14px 5%;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:25px;
	background:#fcfaf7;
	position:relative;
	z-index:10;
	border-bottom:1px solid #e9e3da
}

.brand img {
	width:112px;
	max-height:76px;
	object-fit:contain
}

.site-header nav {
	display:flex;
	align-items:center;
	gap:30px;
	font-size:13px
}

.nav-book {
	padding:10px 26px;
	background:#b6a581;
	color:white
}

.nav-book span {
	margin-left:25px
}

.hero {
	display:grid;
	grid-template-columns:42% 58%;
	position:relative;
	padding:40px 0 55px;
	min-height:570px
}

.hero-copy {
	padding:45px 10% 30px 14%
}

.hero h1 {
	font-size:clamp(38px,4.3vw,64px);
	line-height:1.6;
	letter-spacing:.12em;
	margin:15px 0 20px
}

.hero p {
	font-size:14px;
	line-height:2.3
}

.text-link {
	display:inline-flex;
	align-items:center;
	gap:35px;
	border-bottom:1px solid #b4a789;
	padding:10px 0;
	font-size:13px
}

.hero .text-link {
	margin-top:25px
}

.hero-image {
	position:relative;
	margin-right:5%;
	overflow:hidden;
	border-radius:48% 48% 0 0 / 30% 30% 0 0
}

.hero-image>img {
	width:100%;
	height:100%;
	min-height:460px;
	object-fit:cover;
	object-position:53% center
}

.hero-image>span {
	position:absolute;
	bottom:22px;
	right:25px;
	color:white;
	font-family:Georgia,serif;
	font-style:italic;
	font-size:23px;
	text-shadow:0 1px 8px #333
}

.hero-note {
	position:absolute;
	bottom:14px;
	right:5%;
	font-size:10px;
	letter-spacing:.2em;
	color:#9e9283
}

.services {
	padding:75px 0 100px
}

.section-heading {
	margin-bottom:42px
}

.section-heading h2 {
	font-size:32px;
	line-height:1.65;
	letter-spacing:.08em;
	margin:10px 0 18px
}

.section-heading p {
	color:#7e776e
}

.service-grid {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:26px
}

.service-card {
	background:#f2ece4;
	display:flex;
	flex-direction:column;
	transition:transform .25s
}

.service-card:hover {
	transform:translateY(-5px);
	color:inherit
}

.card-image {
	position:relative;
	overflow:hidden
}

.card-image img {
	width:100%;
	height:265px;
	object-fit:cover;
	transition:transform .5s
}

.service-card:hover img {
	transform:scale(1.035)
}

.card-number {
	position:absolute;
	left:20px;
	bottom:0;
	color:white;
	font-size:40px;
	font-family:Georgia,serif
}

.card-copy {
	padding:27px;
	display:flex;
	flex-direction:column;
	flex:1
}

.card-copy .eyebrow {
	font-size:28px;
	letter-spacing:.03em
}

.card-copy h3 {
	font-size:20px;
	margin:0 0 19px
}

.card-copy h4 {
	font-size:16px;
	margin-bottom:10px;
	font-family:Salon,serif
}

.card-copy p {
	font-size:13px;
	color:#726b62;
	margin-bottom:25px
}

.card-link {
	margin-top:auto;
	border-top:1px solid #d7cabc;
	padding-top:14px;
	display:flex;
	justify-content:space-between;
	font-size:12px
}

.detox {
	background:#eaece4
}

.bridal {
	background:#f1e6e2
}

.about {
	display:grid;
	grid-template-columns:1fr 1fr;
	background:#efebe4;
	align-items:center
}

.about>img {
	width:100%;
	height:540px;
	object-fit:cover
}

.about>div {
	padding:60px 12%
}

.about h2 {
	font-size:29px;
	line-height:1.8;
	margin:16px 0 25px
}

.about p {
	font-size:13px;
	margin-bottom:20px
}

.reservation {
	text-align:center;
	padding:95px 6%;
	background:#f7f3ed
}

.reservation h2 {
	font-size:33px;
	letter-spacing:.09em;
	line-height:1.8;
	margin:12px 0 20px
}

.reservation p {
	color:#7e776e;
	margin-bottom:30px
}

.button {
	display:inline-flex;
	background:#9c8969;
	color:white;
	padding:18px 32px;
	gap:45px;
	text-align:left
}

.button:hover {
	background:#827153;
	color:white
}

.reservation small {
	display:block;
	font-size:11px;
	color:#8f8579;
	margin-top:12px
}

.shop-section {
	padding-block:90px
}

.shop-grid {
	display:grid;
	grid-template-columns:1fr 1.1fr;
	gap:65px
}

.shop-photo {
	height:230px;
	width:100%;
	object-fit:cover
}

.shop-grid h3 {
	font-size:27px;
	margin-top:20px
}

.shop-grid h3 span {
	font-size:12px;
	margin-left:20px
}

dl {
	margin:20px 0 0
}

.shop-grid dl {
	display:grid;
	grid-template-columns:75px 1fr;
	gap:15px;
	font-size:13px
}

.shop-grid dd {
	margin:0
}

.shop-grid dt {
	color:#8e806e
}

.map iframe {
	width:100%;
	height:100%;
	min-height:380px;
	max-height:475px;
	filter:grayscale(.7)
}

.map .text-link {
	margin-top:10px
}

footer {
	padding:45px 6% 30px;
	border-top:1px solid #e1d9cc;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:25px
}

.footer-links {
	display:flex;
	gap:20px;
	font-size:12px
}

footer small {
	font-size:10px;
	color:#978c7d
}

.mobile-book,.mobile-only {
	display:none
}

.skip {
	position:absolute;
	top:-100px;
	left:10px;
	background:white;
	z-index:100
}

.skip:focus {
	top:10px
}

.breadcrumb {
	font-size:11px;
	color:#938573;
	padding-block:18px;
	display:flex;
	gap:18px
}

.detail-hero {
	display:grid;
	grid-template-columns:1fr 1fr;
	background:#eee8df;
	align-items:center
}

.detail-hero>div {
	padding:65px 12%
}

.detail-hero h1 {
	font-size:40px;
	letter-spacing:.1em;
	margin:5px 0 25px
}

.detail-hero h2 {
	font-size:23px;
	margin-bottom:15px
}

.detail-hero p {
	margin-bottom:15px
}

.detail-hero>img {
	width:100%;
	height:430px;
	object-fit:cover
}

.menu-section {
	max-width:900px;
	padding-block:80px
}

.menu-group {
	margin-top:40px
}

.menu-group h3 {
	font-size:21px;
	border-bottom:1px solid #c5b495;
	padding:12px 0
}

.price-list>div {
	display:grid;
	grid-template-columns:1fr auto;
	gap:30px;
	border-bottom:1px solid #e1d9cc;
	padding:22px 0;
	align-items:center
}

.price-list dd {
	margin:0;
	font-family:Georgia,serif;
	font-size:23px;
	white-space:nowrap
}

.menu-note {
	font-size:12px;
	color:#8d8070;
	margin-top:25px
}

.consultation {
	background:#eee8df;
	padding:30px;
	margin-top:40px
}

.consultation h3 {
	font-size:21px;
	margin-bottom:12px
}

.other-care {
	display:flex;
	justify-content:center;
	gap:50px;
	padding-bottom:70px
}

@media(min-width:1500px) {
	.hero {
		max-width:1500px;
		margin:auto
	}

	.hero-copy {
		padding-left:20%
	}

}

@media(max-width:900px) {
	.site-header nav {
		gap:16px;
		font-size:11px
	}

	.hero-copy {
		padding-left:10%;
		padding-right:6%
	}

	.card-copy {
		padding:22px 18px
	}

	.card-image img {
		height:210px
	}

	.card-copy h4 {
		font-size:14px
	}

	.about>div {
		padding:35px 8%
	}

	.shop-grid {
		gap:35px
	}

	.footer-links {
		gap:13px
	}

}

@media(max-width:640px) {
	html {
		scroll-padding-top:20px
	}

	body {
		padding-bottom:58px
	}

	.site-header {
		padding:12px 6%;
		min-height:auto;
		display:block
	}

	.brand img {
		width:92px;
		height:60px
	}

	.site-header>.brand {
		display:block;
		width:max-content;
		margin:auto auto 10px
	}

	.site-header nav {
		justify-content:center;
		gap:0;
		flex-wrap:wrap
	}

	.site-header nav a {
		padding:5px 10px;
		font-size:11px
	}

	.site-header .nav-book {
		background:none;
		color:#8d7755
	}

	.nav-book span {
		margin-left:5px
	}

	.hero {
		display:flex;
		flex-direction:column;
		padding:15px 0 38px;
		min-height:0
	}

	.hero-copy {
		padding:22px 8% 26px
	}

	.hero h1 {
		font-size:39px;
		line-height:1.6;
		margin:10px 0 16px
	}

	.hero p {
		font-size:12px
	}

	.hero .text-link {
		margin-top:10px
	}

	.hero-image {
		margin:0 6% 0 14%;
		height:300px;
		border-radius:45% 45% 0 0 / 30% 30% 0 0
	}

	.hero-image>img {
		min-height:0;
		height:100%
	}

	.hero-image>span {
		font-size:18px;
		right:15px;
		bottom:15px
	}

	.hero-note {
		font-size:8px;
		bottom:8px;
		right:6%
	}

	.eyebrow {
		font-size:13px
	}

	.services {
		padding:50px 0 60px
	}

	.section-heading h2 {
		font-size:26px
	}

	.section-heading p {
		font-size:12px
	}

	.service-grid {
		grid-template-columns:1fr;
		gap:25px
	}

	.card-image img {
		height:245px
	}

	.card-copy {
		padding:23px
	}

	.card-copy h3 {
		font-size:21px;
		margin-bottom:12px
	}

	.card-copy h4 {
		font-size:17px
	}

	.card-copy p {
		font-size:13px;
		margin-bottom:20px
	}

	.about {
		grid-template-columns:1fr
	}

	.about>img {
		height:270px
	}

	.about>div {
		padding:40px 8%
	}

	.about h2 {
		font-size:26px
	}

	.reservation {
		padding:60px 6%
	}

	.reservation h2 {
		font-size:27px
	}

	.reservation p {
		font-size:12px
	}

	.button {
		padding:16px 20px;
		gap:20px;
		font-size:12px
	}

	.mobile-only {
		display:initial
	}

	.shop-section {
		padding-block:55px
	}

	.shop-grid {
		grid-template-columns:1fr;
		gap:35px
	}

	.shop-grid dl {
		grid-template-columns:65px 1fr;
		font-size:12px;
		gap:15px
	}

	.map iframe {
		height:300px;
		min-height:300px
	}

	footer {
		flex-direction:column;
		text-align:center;
		padding:30px 6%
	}

	.footer-links {
		flex-wrap:wrap;
		justify-content:center;
		gap:12px 18px
	}

	.mobile-book {
		display:flex;
		justify-content:space-between;
		align-items:center;
		position:fixed;
		bottom:0;
		left:0;
		right:0;
		height:58px;
		padding:12px 8%;
		background:#9c8969;
		color:white;
		z-index:30;
		box-shadow:0 -2px 10px #443f3815
	}

	.detail-hero {
		grid-template-columns:1fr
	}

	.detail-hero>div {
		padding:35px 7%
	}

	.detail-hero h1 {
		font-size:32px;
		margin-bottom:15px
	}

	.detail-hero h2 {
		font-size:21px
	}

	.detail-hero p {
		font-size:13px
	}

	.detail-hero>img {
		height:260px
	}

	.menu-section {
		padding-block:50px
	}

	.menu-group h3 {
		font-size:18px
	}

	.price-list>div {
		gap:16px;
		padding:19px 0
	}

	.price-list dt {
		font-size:12px;
		line-height:1.9
	}

	.price-list dd {
		font-size:20px
	}

	.consultation {
		padding:22px
	}

	.consultation h3 {
		font-size:18px
	}

	.consultation p {
		font-size:12px
	}

	.other-care {
		gap:30px;
		padding-bottom:50px
	}

	.other-care .text-link {
		font-size:12px;
		gap:15px
	}

}

@media(prefers-reduced-motion:reduce) {
	html {
		scroll-behavior:auto
	}

	* {
		transition:none!important
	}

}

/* The supplied logo contains wide transparent margins. */
.brand {
	display:block;
	width:112px;
	height:82px;
	overflow:hidden;
	flex-shrink:0
}

.brand img {
	width:400px;
	max-width:none;
	max-height:none;
	height:auto;
	position:relative;
	left:-138px;
	object-fit:initial
}

@media(max-width:640px) {
	.site-header>.brand,.brand {
		width:92px;
		height:67px
	}

	.brand img {
		width:330px;
		height:auto;
		left:-114px
	}

}

.hero-image>.hero-video {
	display:block;
	width:100%;
	height:100%;
	min-height:460px;
	object-fit:cover;
	object-position:53% center
}

@media(max-width:640px) {
	.hero-image>.hero-video {
		height:100%;
		min-height:0
	}

}

/* A soft sepia film over the hero movie. */
.hero-image>.hero-video {
	filter:sepia(.35) saturate(.72) contrast(.94)
}

.hero-image::after {
	content:"";
	position:absolute;
	inset:0;
	background:rgba(151,111,64,.15);
	pointer-events:none
}

.hero-image>span {
	z-index:1
}

.care-jump {
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:12px 35px;
	padding:30px 0;
	border-bottom:1px solid #e1d9cc;
	font-size:12px
}

.care-jump a {
	border-bottom:1px solid #b4a789
}

.care-story {
	display:grid;
	grid-template-columns:1fr 1fr;
	align-items:center;
	gap:65px;
	padding-block:80px
}

.care-story>img {
	width:100%;
	height:390px;
	object-fit:cover
}

.care-story .section-heading {
	margin-bottom:22px
}

.care-story p {
	color:#726b62;
	margin-bottom:20px;
	line-height:2.2
}

.care-concerns {
	background:#eee9df;
	padding:45px 5%;
	margin-block:0 65px
}

.care-concerns .section-heading {
	margin-bottom:22px
}

.care-concerns h2 {
	font-size:26px
}

.care-concerns ul {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:16px 35px;
	list-style:none;
	margin:0;
	padding:0
}

.care-concerns li:before {
	content:'✓';
	color:#a18c67;
	margin-right:12px
}

.care-features {
	padding-bottom:75px
}

.care-feature-grid {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:28px
}

.care-feature-grid article {
	border-top:1px solid #bcad91;
	padding:25px 0
}

.feature-no {
	color:#b6a581;
	font:36px Georgia,serif
}

.care-feature-grid h3 {
	font-size:21px;
	margin:18px 0 14px
}

.care-feature-grid p {
	font-size:13px;
	color:#726b62
}

.care-flow,.care-faq,.care-schedule {
	max-width:960px;
	padding-block:40px 65px
}

.care-flow ol {
	list-style:none;
	margin:0;
	padding:0
}

.care-flow li {
	display:flex;
	gap:28px;
	padding:25px 0;
	border-top:1px solid #e1d9cc
}

.care-flow li>span {
	font:29px Georgia,serif;
	color:#ad9775;
	padding-top:5px
}

.care-flow h3,.timeline h3 {
	font-size:21px;
	margin-bottom:7px
}

.care-flow p,.timeline p {
	font-size:13px;
	color:#726b62
}

.care-caption {
	max-width:960px;
	font-size:11px;
	color:#8d8070
}

.care-faq details {
	border-bottom:1px solid #d7cbbb
}

.care-faq summary {
	cursor:pointer;
	padding:23px 35px 23px 0;
	line-height:1.8
}

.care-faq summary::marker {
	color:#aa936f
}

.care-faq details p {
	padding:0 20px 25px;
	font-size:13px;
	line-height:2.2;
	color:#726b62;
	max-width:850px
}

.timeline {
	border-left:1px solid #b7a583;
	padding-left:35px;
	margin-left:10px
}

.timeline article {
	padding-bottom:35px;
	position:relative
}

.timeline article:before {
	content:'';
	position:absolute;
	left:-42px;
	top:10px;
	width:13px;
	height:13px;
	border-radius:50%;
	background:#ac9573
}

.timeline article>span {
	display:block;
	color:#99815c;
	font-size:13px;
	margin-bottom:8px
}

.care-notice {
	max-width:960px;
	background:#eee9df;
	padding:40px;
	margin-block:0 45px
}

.care-notice .section-heading {
	margin-bottom:20px
}

.care-notice h2 {
	font-size:25px
}

.care-notice p,.care-notice ul {
	font-size:13px;
	color:#726b62
}

.care-notice ul {
	padding-left:20px;
	margin-block:20px
}

.care-notice li {
	margin-bottom:8px
}

@media(max-width:640px) {
	.care-jump {
		gap:10px 20px;
		padding-block:23px;
		font-size:11px
	}

	.care-story {
		grid-template-columns:1fr;
		gap:30px;
		padding-block:45px
	}

	.care-story>img {
		height:250px
	}

	.care-story p {
		font-size:13px
	}

	.care-concerns {
		padding:28px 7%;
		margin-bottom:40px
	}

	.care-concerns ul {
		grid-template-columns:1fr;
		gap:12px;
		font-size:13px
	}

	.care-concerns h2 {
		font-size:23px
	}

	.care-feature-grid {
		grid-template-columns:1fr;
		gap:10px
	}

	.care-feature-grid article {
		padding:22px 0
	}

	.care-feature-grid h3 {
		margin:10px 0;
		font-size:21px
	}

	.care-features {
		padding-bottom:25px
	}

	.care-flow,.care-faq,.care-schedule {
		padding-block:30px 40px
	}

	.care-flow li {
		gap:18px
	}

	.care-flow h3,.timeline h3 {
		font-size:18px
	}

	.care-flow li>span {
		font-size:25px
	}

	.care-faq summary {
		font-size:13px;
		padding:20px 0
	}

	.care-faq details p {
		padding-inline:0
	}

	.care-notice {
		padding:27px 7%;
		margin-bottom:15px
	}

	.care-notice h2 {
		font-size:23px
	}

	.timeline {
		padding-left:25px
	}

	.timeline article:before {
		left:-32px
	}

}

.detail-hero>.shaving-key-visual {
	object-fit:contain;
	background:#e3d6cf
}

.shaving-movie {
	display:grid;
	grid-template-columns:1fr 370px;
	align-items:center;
	gap:80px;
	max-width:1000px;
	padding:45px 0 85px
}

.movie-copy h2 {
	font-size:35px;
	line-height:1.8;
	letter-spacing:.06em;
	margin:15px 0 25px
}

.movie-copy p {
	color:#726b62;
	margin-bottom:20px
}

.shaving-movie-frame {
	background:#e8dfd4;
	padding:14px;
	border-radius:200px 200px 8px 8px;
	overflow:hidden
}

.shaving-movie-frame video {
	display:block;
	width:100%;
	aspect-ratio:9/16;
	object-fit:contain;
	background:#ede3d8;
	border-radius:180px 180px 0 0
}

.shaving-photo-flow {
	max-width:1180px;
	padding-block:40px 55px
}

.shaving-photo-flow ol {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:35px 26px;
	list-style:none;
	padding:0;
	margin:0
}

.shaving-photo-flow li {
	background:#f1ebe3
}

.shaving-photo-flow li>img {
	width:100%;
	height:auto;
	aspect-ratio:16/9;
	object-fit:cover
}

.shaving-photo-flow li>div {
	padding:23px
}

.shaving-photo-flow h3 {
	font-size:19px;
	line-height:1.7;
	margin:9px 0 12px
}

.shaving-photo-flow p {
	font-size:13px;
	color:#726b62
}

.shaving-photo-flow .eyebrow {
	font-size:13px
}

@media(max-width:900px) {
	.shaving-photo-flow ol {
		grid-template-columns:repeat(2,1fr)
	}

	.shaving-movie {
		gap:35px;
		grid-template-columns:1fr 320px
	}

}

@media(max-width:640px) {
	.detail-hero>.shaving-key-visual {
		height:340px
	}

	.shaving-movie {
		grid-template-columns:1fr;
		gap:25px;
		padding-block:15px 45px
	}

	.movie-copy h2 {
		font-size:28px
	}

	.movie-copy p {
		font-size:13px
	}

	.shaving-movie-frame {
		width:min(100%,330px);
		margin:auto;
		padding:10px
	}

	.shaving-photo-flow {
		padding-block:25px 35px
	}

	.shaving-photo-flow ol {
		grid-template-columns:1fr;
		gap:25px
	}

	.shaving-photo-flow li>div {
		padding:22px
	}

	.shaving-photo-flow h3 {
		font-size:21px
	}

}

.shaving-movie-frame {
	border-radius:16px
}

.shaving-movie-frame video {
	border-radius:8px
}

.bridal-plan-photo {
	width:100%;
	aspect-ratio:16/10;
	object-fit:cover;
	margin-bottom:22px
}

.bridal-atmosphere {
	padding-block:20px 65px
}

.bridal-photo-pair {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:30px
}

.bridal-photo-pair figure {
	margin:0
}

.bridal-photo-pair img {
	width:100%;
	height:auto;
	aspect-ratio:16/10;
	object-fit:cover
}

.bridal-photo-pair figure:first-child img {
	object-position:center 53%
}

.bridal-photo-pair figcaption {
	font-size:12px;
	color:#8d8070;
	padding-top:12px
}

.bridal-movie {
	max-width:1060px;
	padding-block:25px 75px
}

.bridal-video-frame {
	position:relative;
	aspect-ratio:16/9;
	background:#e7dfd3;
	overflow:hidden;
	border-radius:8px
}

.bridal-video-frame iframe {
	display:block;
	width:100%;
	height:100%;
	border:0
}

.bridal-movie>.text-link {
	margin-top:15px
}

@media(max-width:640px) {
	.bridal-photo-pair {
		grid-template-columns:1fr;
		gap:25px
	}

	.bridal-atmosphere {
		padding-block:20px 35px
	}

	.bridal-plan-photo {
		margin-bottom:18px
	}

	.bridal-movie {
		padding-block:20px 45px
	}

	.bridal-movie .section-heading p {
		font-size:12px
	}

}

.nav-line {
	color:#318652
}

.contact-options {
	margin:30px auto 0;
	max-width:490px;
	padding-top:26px;
	border-top:1px solid #ded3c3
}

.line-button {
	display:flex;
	justify-content:center;
	align-items:center;
	gap:16px;
	background:#21864c;
	color:white;
	padding:16px 20px
}

.line-button:hover {
	background:#176b3b;
	color:white
}

.line-mark {
	font-size:12px;
	font-weight:700;
	letter-spacing:.04em;
	border:1px solid #ffffff90;
	border-radius:5px;
	padding:0 6px
}

.contact-options p {
	font-size:12px;
	margin:12px 0 15px
}

.phone-link {
	font-size:13px;
	border-bottom:1px solid #baa78a;
	padding-bottom:5px
}

.mobile-contact {
	display:none
}

@media(min-width:641px) and (max-width:1000px) {
	.site-header nav {
		gap:12px
	}

	.site-header .nav-book {
		padding:10px 14px
	}

	.nav-book span {
		margin-left:10px
	}

}

@media(max-width:640px) {
	.site-header nav a {
		padding:5px 7px
	}

	.site-header .nav-line {
		color:#318652
	}

	.contact-options {
		margin-top:25px
	}

	.line-button {
		font-size:12px;
		gap:12px
	}

	.phone-link {
		font-size:11px
	}

	.mobile-contact {
		display:grid;
		grid-template-columns:1fr 1.35fr;
		position:fixed;
		bottom:0;
		left:0;
		right:0;
		z-index:30;
		height:58px;
		box-shadow:0 -2px 10px #443f3815
	}

	.mobile-contact .mobile-book {
		position:static;
		display:flex;
		height:58px;
		padding:12px 15px;
		box-shadow:none;
		font-size:12px
	}

	.mobile-line {
		display:flex;
		align-items:center;
		justify-content:center;
		background:#21864c;
		color:white;
		font-size:12px
	}

}

@media(max-width:640px) {
	.site-header nav {
		display:grid;
		grid-template-columns:repeat(4,max-content);
		justify-content:center;
		align-items:center;
		gap:6px 0
	}

	.site-header nav .nav-line {
		grid-column:1 / 3;
		grid-row:2;
		justify-self:end;
		padding-right:20px
	}

	.site-header nav .nav-book {
		grid-column:3 / 5;
		grid-row:2;
		justify-self:start;
		padding-left:20px
	}

}

@media(max-width:640px) {
	.footer-links {
		display:grid;
		grid-template-columns:repeat(4,max-content);
		justify-content:center;
		align-items:center;
		gap:12px 14px
	}

	.footer-links a:nth-child(5) {
		grid-column:3 / 5;
		grid-row:2;
		justify-self:start;
		padding-left:12px
	}

	.footer-links a:nth-child(6) {
		grid-column:1 / 3;
		grid-row:2;
		justify-self:end;
		padding-right:12px
	}

}