@charset "utf-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
html {
max-width: 100%;
scrollbar-gutter: stable;
}
body {
font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
font-size: 16px;
font-weight: normal;
line-height: 1.8;
max-width: 100%;
margin: 0;
padding: 0;
width: 100%;
box-sizing: border-box;
}

ol, ul {list-style: none;}
a {
color: #000;
display: block;
}
a:hover, a img:hover, input:hover{opacity: 0.8;}
img {
max-width: 100%;
height: auto;
}
table{
border-collapse:collapse;
border:none;
border-spacing:0;
}
th,td{
vertical-align:top;
border:solid 1px #000;
font-weight:normal;
text-align:left;
}
img{
width: 100%;
}
.main{
display: flex;
flex-direction: column; /* 縦並びにする */
width: 100%;
min-height: 100vh; /* PCはシンプルな100vhでOK */
background-color: #000985;
color: #fff;
}
.content {
flex-grow: 1;/* 余ったスペースをすべて埋める */
display: flex;
justify-content: center;
align-items: center;
padding: 40px 0;
}
.logo_area{
width: min(40%, 500px);
margin: 0 auto;
}
.txt_area{
margin:40px 0 20px 0;
text-align: center;
}
.txt_area .ttl{
  margin-top: 40px;
}
.txt_area p{
margin-bottom:10px;
}
.txt_area p:last-child{
margin-bottom: 0;
}
.txt_area .note_txt{
  font-size: 0.8em;
}
.btn_mail {
text-align: center;
margin-top: 20px;
}
.btn_mail a {
padding: 0.5em 1em;
text-decoration: none;
background: #fff;
color: #000985;
border-bottom: solid 4px #8b95a9;
border-radius: 3px;
position: relative;
display: inline-block;
/* 動くときの変化を滑らかにする（お好みで） */
transition: all 0.1s; 
}
.btn_mail a:hover {
/* 枠線の色は透明にする（高さを維持して周りを動かさないコツ） */
border-bottom-color: transparent;
/* ボタン全体を4px下にずらす */
top: 4px;
}
.add_area{

}
.map_area {
width: 100%;
}
iframe {
width: 100%;
}
.footer {
font-size:max(0.833333333333333vw, 12px);
text-align: center;
}

.switch_pc{display: block;}
.switch_sp{display: none;}

@media (max-width: 767px) {
.main{
 min-height: 100dvh;
  width: 100%; /* 横幅を親要素（bodyなど）いっぱいに広げる */
  box-sizing: border-box;
}
.logo_area{
width: 80%;
}
.txt_area {
font-size:max(3.73333333333333vw, 14px);
padding: 0 20px;
}
.btn_mail a {
-webkit-tap-highlight-color: transparent;
}
.btn_mail a:active {
border-bottom-color: transparent;
top: 4px;
}
.footer {
font-size:max(2.66666666666667vw, 10px);
}
.switch_pc{display: none;}
.switch_sp{display: block;}

}