@charset "UTF-8";
/* CSS Document */

body {
font-family: "Noto Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
color:#1C1C1C;
background: url(../images/content_bg.webp) repeat-y center top;
background-size: 100% auto;
}
img {
width: 100%;
vertical-align: bottom;
}
a {
color:#1C1C1C;
text-decoration: none;
}
main {
display: block;
background: url(../images/content_bg.webp) repeat-y center top;
background-size: 100% auto;
}

#loading {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #C8C3BB;
position: fixed;
top: 0;
left: 0;
z-index: 12000;
}
#loading img {
width: 120px;
}
h2 {
text-align: center;
}
h2 span {
font-family: "Tinos", "Palatino Linotype", "Book Antiqua", Palatino, "serif";
display: table;
margin-left: auto;
margin-right: auto;
background: url(../images/h2_border.webp) no-repeat center bottom;
letter-spacing: 2px;
}

.w-l, .w-m {
width: 90%;
margin-left: auto;
margin-right: auto;
}
.w-l {
max-width: 1024px;
}
.w-m {
max-width: 728px;
}

#header {
width: 100%;
background: #fff;
}
#header > div {
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
nav#gNav ul li a {
font-family:"Arapey", "Times New Roman", Times, "serif";
display: block;
letter-spacing: 4px;
}

#blogList ul li {
float: left;
position: relative;
}
#blogList ul li img {
position: relative;
z-index: 200;
}
#blogList ul li time {
display: table;
position: absolute;
left: 0;
z-index: 400;
color: #fff;
background: rgba(235,20,23,1.00);
font-family:"Arapey", "Times New Roman", Times, "serif";
}
#blogList ul li h3 {
position: absolute;
z-index: 300;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
background: rgba(255,255,255,0.70);
display: flex;
justify-content: center;
align-items: center;
}

#maps iframe {
width: 100%;
}

#footer  {
width: 90%;
max-width: 768px;
margin: 0 auto;
}
#footer ul li:nth-last-of-type(1) a {
margin-right: 10px;
}
#footer ul li:nth-last-of-type(1) a:nth-last-of-type(1) {
margin-right: 0;
}
#footer ul li span {
display: block;
font-weight: bold;
}

@media screen and (max-width:560px){
body {
font-size: 14px;
}
h2 {
font-size: 0.9em;
margin-bottom: 20px;
}
h2 span {
font-size: 1.6em;
padding-bottom: 4px;
margin-bottom: 6px;
background-size: auto 3px;
}
p {
line-height: 1.5em;
}
p > img {
padding: 10px 0;
}

#header {
padding: 12px 0;
height: 30px;
}
#header > div {
height: 30px;
}
#header > div h1 {
width: 50vw;
}
	
.w-l, .w-m {
padding-top: 50px;
}
	
#blogList ul li {
margin-bottom: 20px;
}
#blogList ul li time {
top: -10px;
font-size: 1em;
padding: 2px 2px;
}
	
#maps iframe, .location iframe {
height: 250px;
}

#footer ul li:nth-last-of-type(1) a {
margin-top: 20px;
font-size: 2.2em;
}
}

@media screen and (min-width:561px){
body {
font-size: 16px;
}
a[href^="tel:"] {
pointer-events: none;
}
	
#header {
padding: 18px 0;
}
}

@media (min-width:561px) and (max-width:960px){
h2 {
font-size: 1em;
margin-bottom: 30px;
}
h2 span {
font-size: 2em;
padding-bottom: 8px;
margin-bottom: 8px;
}
p {
line-height: 1.8em;
}

#header > div h1 {
width: 200px;
}	
	
.w-l, .w-m {
padding-bottom: 60px;
}
	
#blogList ul li {
margin-bottom: 30px;
}
#blogList ul li time {
top: -15px;
font-size: 1.1em;
padding: 2px 4px;
}
	
#maps iframe, .location iframe {
height: 400px;
}
	
#footer ul li:nth-last-of-type(1) a {
margin-top: 15px;
font-size: 1.8em;
}
}

@media screen and (max-width:960px){
#header > div {
z-index: 1000;
width: 100%;
position: relative;
}
#header > div h1 {
padding-left: 10px;
}
.menu_button {
padding-right: 10px;
}
.menu_button i {
font-size: 24px;
}
	
#header nav {
position: absolute;
top: 100%;
background-color: #FFF;
width: 100%;
}
#header nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#header nav ul li {
border-bottom: dotted 1px #2D2D2D;
text-align: center;
padding: 1em;
}
#header nav ul li:nth-last-of-type(1) {
border-bottom: solid 1px #2D2D2D;
}

#blogList ul li {
width: 48%;
}
#blogList ul li:nth-child(2n) {
float: right;
}
	
#footer {
padding: 20px 0;
}
#footer h6 {
width: 20%;
margin: 0 auto 20px;
}
#footer ul {
display: table;
padding: 10px 30px;
text-align: center;
border-top: 1px solid #393939;
margin: 0 auto;
}
#footer ul li {
padding-bottom: 20px;
font-size: 0.8em;
}
#footer ul li:nth-last-of-type(1) {
padding-bottom: 0;
}
#footer ul li span {
font-size: 0.95em;
margin-bottom: 5px;
}
}

@media screen and (min-width:961px){
h2 {
font-size: 1.1em;
margin-bottom: 40px;
}
h2 span {
font-size: 2.2em;
padding-bottom: 10px;
margin-bottom: 10px;
}
p {
line-height: 2em;
}

.w-l, .w-m {
padding-bottom: 80px;
}

#header > div h1 {
width: 300px;
}
	
.menu_button {
display: none;
}
	
nav#gNav ul {
display: table;
padding-top: 5px;
border-collapse: separate;
}
nav#gNav ul li {
display: table-cell;
}
	
#blogList ul li {
width: 23.5%;
margin-right: 2%;
margin-bottom: 40px;
}
#blogList ul li:nth-child(4n) {
margin-right: 0;
}
#blogList ul li time {
top: -20px;
font-size: 1.3em;
padding: 2px 5px;
}
	
#maps iframe, .location iframe {
height: 500px;
}
	
#footer {
padding: 100px 0 30px;
display: flex;
justify-content: center;
}
#footer h6 {
width: 120px;
padding: 0 20px;
}
#footer ul {
display: flex;
border-right: 1px solid #1C1C1C;
box-sizing: border-box;
}
#footer ul li {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
text-align: center;
padding: 0 10px;
box-sizing: border-box;
border-left: 1px solid #1C1C1C;
font-size: 16px;
}
#footer ul li span {
margin-bottom: 10px;
}
#footer ul li:nth-last-of-type(1) {
flex-direction: row;
}
#footer ul li:nth-last-of-type(1) a {
font-size: 22px;
}
}

@media (min-width:961px) and (max-width:1279px){
#header > div {
width: 96%;
max-width: 1024px;
}
nav#gNav ul {
border-spacing: 20px 0;
}
nav#gNav ul li a {
font-size: 1em;
}
}

@media screen and (min-width:1280px){
#header > div {
width: 1024px;
}
nav#gNav ul {
border-spacing: 30px 0;
}
nav#gNav ul li a {
font-size: 1.2em;
}

#blogList ul li h3 {
transition: .6s;
opacity:0;
}
#blogList ul li:hover h3 {
opacity:1;
}
}