
html {
	font-size: 100%;
}
body{
	margin:0;
	font-family:'Noto Sans JP',sans-serif;
	background:#fff;
	color: #2B2B2B;
	line-height:1.7;
    font-size: clamp(18px, 2vw, 28px);
}
a:hover {
	opacity: 0.5;
	pointer-events: all;
}
*, *::before, *::after {
  box-sizing: border-box;
}

img{
  max-width:100%;
  display:block;
}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:30px 10px;
}

.section{
  padding:60px 0;
}



.section-brown{
	background:#4b2e1e;
}

.hero {
	width: 100%;
	background:#d3edf9;
	text-align:center;
	background-image: url("../img/bg.png");
	padding: 50px 10px 50px;
	position: relative;
}
.hero-title {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto 40px;
	padding: 5px;
}
.hero-title-sp {
	display: none;
}
.hero-title img {
	width: 100%;
}
.hero-tel {
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -30px;
	
}
.hero-tel img {
	width: 100%;
}
.hero-title img{
	width: 100%;
}
.read-copy {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	padding-top: 120px;
}
.read-img {
	width: 100%;
}
.read-img img {
	width: 100%;
}
.read-text {
	text-align: left;
	font-size: 1em;
	line-height: 1.5em;
}
.grid-2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
width: 100%;
max-width:1100px;
}

.grid-3{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:20px;
}
.grid-2-2-f {
	display:grid;
	grid-template-columns:1fr 1fr;
	align-items: start;
	column-gap:20px;
}
.grid-2-2-text {
	grid-column: 1 / 3;
	font-size: 0.8em;
	padding: 20px;
	align-items: start;
	background-color: #E9E9E9;
	border: 1px solid #000;
}

.caption{
	width:100%;
	max-width: 1100px;
  font-size:1em;
  margin:8px auto 0;
	color:#fff;
}

.caption.center{
  text-align:left;
  margin-top:20px;
}
.caption-sp {
		display: none;
	}
.caption-sp-none {
	display: 
}
.spacer{
  height:60px;
}

.tel{
  border-radius:999px;
  padding:20px;
  text-align:center;
  font-size:22px;
  max-width:750px;
  margin:60px auto;
}

footer{
  background:#fff;
  text-align:center;
  padding:10px 20px 50px;
  font-size:14px;
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
}

@media(max-width:768px){
	.hero-title-sp {
	display: block;
}
	.hero-title {
		display: none;
	}
  .grid-2,
  .grid-3{
    grid-template-columns:1fr;
  }
.grid-2,
.grid-3,
.grid-2-2-f,
.read-copy {
  min-width: none;
}

.read-img,
.read-img img {
  width: 100%;
	max-width: 100%;
	}
.read-img img,
.g-f img,
.grid-2 img,
.grid-3 img {
  display: block;
  margin: 0 auto;
}
.caption{
	width:100%;
	max-width: none;
	text-align: center;
}
	.caption-sp {
		display: block;
	}
	.caption-sp-none{
		display: none;
	}
}
