:root {
	--header-height:135px;
	--color-main-rgb:145 56 58;
	--color-main:rgb(var(--color-main-rgb));
	--color-main-light-rgb:184 97 111;
	--color-main-light:rgb(var(--color-main-light-rgb));
	--color-sub-rgb:45 111 183;
	--color-sub:rgb(var(--color-sub-rgb));
	--color-gray-rgb:237 237 236;
	--color-gray:rgb(var(--color-gray-rgb));

	--trans:0.3s ease;
}
body {
	margin: 0;
	padding: 0;
	font-family:"Noto Sans JP", sans-serif;
	font-size:clamp(0.875rem, calc(0.709rem + 0.568vw), 1rem);/* vp:468-820px 14-16px */
	font-weight:500;
	line-height:1.8;
	color: #000;
	-webkit-text-size-adjust:100%;

	&:has(header .smBtn.isActive) {
		height:100vh;
		overflow:clip;
	}
}
*, *::before, *::after { margin:0px; padding:0px; font-size:1em; box-sizing:border-box;}
h1, h2, h3, h4, h5, h6 { font-size:1rem; font-weight:500;}
ul, ol { list-style:none;}
img { max-width:100%; height: auto; vertical-align:bottom;}
/* div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd {
	font-size:100%;
	margin: 0;
	padding: 0;
	list-style:none;
	box-sizing:border-box;
} */
/* div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd, ol, ol li, table, th, td {
	background-image:url(../image/spacer.gif);
} */
address { font-style:normal;}
:is(header, footer) {

	& a { color:inherit; text-decoration:none;}
	& button { border:none; cursor:pointer;}
}

/* aタグ設定 */
a {
	&:is(:focus-visible, :active) {
		& img { opacity:0.7;}
	}
	@media(hover:hover) { &:hover {
		& img { opacity:0.7;}
	}}
}
@media(min-width:769px){
	a[href^="tel"] { pointer-events:none;}
}

.inner { width:min(1000px, 90%); margin-inline:auto;}
.inner_small { width:min(800px, 90%); margin-inline:auto;}
main { padding-bottom:clamp(6.25rem, calc(0.4rem + 20vw), 10rem);/* vp:468-768px 100-160px */}
[id] { scroll-margin-top:var(--header-height);}

.pc { display:block;}
.sm { display:none;}

/*====================================================================================================
  HEADER
====================================================================================================*/
header {
	/* radius値 */
	--radius:clamp(1.25rem, calc(0.818rem + 1.478vw), 2rem);/* vp:468-1280px 20-32px; */
	position:fixed;
	inset:0 auto auto 0;
	display:flex;
	align-items:center;
	justify-content:space-between;
	width:100%;
	z-index:9999;

	& .logo a {
		display:flex;
		align-items:center;
		padding-block:0.5em;
		padding-inline:1.5em 2.5em;
		background-color:#fff;
		border-end-end-radius:1em;
		color:var(--color-main);
		letter-spacing:-0.05em;
		font-weight:900;
		font-size:var(--radius);
	}
	& .logo a::before {
		content:"";
		display:block;
		height:calc(var(--radius) * 1.5);
		aspect-ratio:27/5;
		background-color:var(--color-main);
		mask:url(../image/logo.svg) no-repeat center / contain;
	}
	& nav ul {
		display:flex;
		gap:1px 1em;
		margin-right:2em;
		padding:0.5em 1em;
		background-color:#fff;
		border-radius:100vmax;
		font-weight:500;
	}
	& nav a {
		&:is(:focus-visible, :active) { text-decoration:underline;}
		@media(hover:hover) { &:hover { text-decoration:underline;}}
	}
	& .smBtn { display:none}
}
@media(max-width:768px){
header {
	--header-height:4rem;

	display:grid;
	grid-template:
		"logo btn" auto
		"nav nav" 1fr / 1fr auto;
	align-items:start;
	transition:background-color var(--trans);

	& .smBtn { display:block;}
	& .logo { grid-area:logo;}
	& .smBtn { grid-area:btn;}
	& nav { grid-area:nav;}

	& .logo a {
		width:fit-content;
		height:var(--header-height);
		padding-block:0px;
	}
	& .smBtn {
		display:block;
		width:4em;
		padding:1.25em 1em;
		aspect-ratio:1;
		background-color:#fff;
		border-end-start-radius:var(--radius);

		& .btnWrap {
			position:relative;
			width:100%;
			height:100%;
		}
		& span {
			position:absolute;
			inset-inline:0 auto;
			width:100%;
			height:2px;
			background-color:var(--color-main);
			transition:
				opacity var(--trans),
				rotate var(--trans),
				translate var(--trans),
				inset var(--trans);
		}
		& span:nth-of-type(1) { inset-block:0 auto;}
		& span:nth-of-type(2) { inset-block:50% auto; translate:0 -50%;}
		& span:nth-of-type(3) { inset-block:auto 0;}
	}
	& nav {
		height:0px;
		overflow:hidden;
		transition:height var(--trans);

		& ul {
			flex-direction:column;
			margin:2em 1em 0;
			border-radius:1em;
		}
		& li + li { border-top:solid 1px var(--color-main-light);}
		& a {
			display:grid;
			grid-template-columns:1fr 0.5em;
			gap:0.5em;
			padding:0.25em 1em;
			background-color:#fff;
			font-size:1.125em;

			&::after {
				content:"";
				display:block;
				width:0.5em;
				height:1lh;
				background-color:var(--color-main);
				mask:url(../image/arrow_right1.svg) no-repeat center / contain;
			}
		}
	}
	
	/* .smBtn.isActive */
	&:has(.smBtn.isActive) { background-color:var(--color-main-light);}
	.smBtn.isActive {
		& span:nth-of-type(1) { rotate:45deg; inset-block:50% auto; translate:0 -50%;}
		& span:nth-of-type(2) { opacity:0;}
		& span:nth-of-type(3) { rotate:-45deg; inset-block:auto 50%; translate:0 50%;}

		& ~ nav { height:calc(100vh - var(--header-height));}
	}
}
}




/*====================================================================================================
  main
====================================================================================================*/



/*====================================================================================================
  FOOTER
====================================================================================================*/
footer {
	padding-block:1.5em;
	background-color:var(--color-main-light);
	color:#fff;

	& .inner { display:flex; flex-direction:column; align-items:center; gap:1em;}
	& .logo {
		width:270px;
		aspect-ratio:27/5;
		background-color:#fff;
		mask:url(../image/logo.svg) no-repeat center / contain;
	}
	& address {
		display:grid;
		grid-template-columns:repeat(2, 1fr);
		justify-content:center;
		gap:0 1em;

		& .double { grid-column:span 2;}
	}
}
@media(max-width:768px){
footer {

	& address {
		grid-template-columns:1fr;
		text-align:center;

		& .double { grid-column:span 1;}
	}
}
}


/*====================================================================================================
  PAGE
====================================================================================================*/



/*====================================================================================================
  COLOR eto.. [No Touch]
====================================================================================================*/
.light-blue { color: #40A6DD;}
.blue { color: #0000FF;}
.dark-blue { color: #000099;}
.purple { color: #660099;}
.pink { color: #FF6699;}
.red { color: #FF0000;}
.orange { color: #FF6600;}
.yellow { color: #FFCC00;}
.white { color: #FFFFFF;}
.gray { color: #666666;}
.brown { color: #663300;}
.green { color: #339900;}
.italic { font-style: italic;}
.strong { font-weight: bold;}
.large { font-size: 115%; line-height: 140%;}
.small { font-size: 80%;}
.underline { text-decoration: underline;}
.line-through { text-decoration: line-through;}
.left { text-align: left;}
.center { text-align: center;}
.right { text-align: right;}