@charset "UTF-8";

* { margin: 0; padding: 0; }
html { font-size: 10px; }
body { background: url(../img/common/background.jpg); color: #333; font-family: 'Sawarabi Mincho'; font-size: 1.5rem; line-height: 2; -webkit-text-size-adjust: 100%; }
img { border: 0; vertical-align: top; -ms-interpolation-mode: bicubic; }
a { outline: none; }
a:link { color: #; text-decoration: none; }
a:visited { color: #; text-decoration: none; }
a:hover { color: #; text-decoration: underline; transition: all 0.3s ease; }
a:hover img { opacity: 0.8; transition: all 0.3s ease; }
button { background: transparent; border: none; appearance: none; cursor: pointer; outline: none; }
.clearfix::after { content: ''; display: block; clear: both; }
/*div#wrapper { width: 100%; height: 100%; opacity: 0; }*/

@media screen and (max-width: 767px) {
body { font-size: 1.4rem; line-height: 1.6; }
}

/* --------------------------------------------------
	グローバルヘッダ
-------------------------------------------------- */

header#globalHeader {}
header#globalHeader div.inner { margin: 0 auto; padding: 20px 0; width: 900px; text-align: center; }
header#globalHeader img.logo { width: 90px; height: auto; display: inline-block; }

@media screen and (max-width: 767px) {
header#globalHeader div.inner { width: auto; }
header#globalHeader img.logo { width: 64px; }
}

/* --------------------------------------------------
	グローバルナビ
-------------------------------------------------- */

nav#globalNavi { height: 72px; background: rgba(28,43,32,0.95); display: flex; align-items: center; justify-content: center; position: relative; top: 0; z-index: 9999; }
nav#globalNavi ul { list-style: none; white-space: nowrap; }
nav#globalNavi li { margin: 0 40px; display: inline-block; }
nav#globalNavi li a { color: #fff; font-size: 1.8rem; text-decoration: none; display: inline-block; position: relative; }
nav#globalNavi li a::after { content: ''; width: 100%; height: 1px; background: #fff; position: absolute; left: 0; bottom: -3px; transform: scale(0,1); transform-origin: center top; transition: transform 0.3s; }
nav#globalNavi li a:hover::after { transform: scale(1,1); }
nav#globalNavi li a.active::after { content: ''; width: 100%; height: 1px; background: #fff; position: absolute; left: 0; bottom: -3px; transform: scale(1,1); }

@media screen and (max-width: 767px) {
nav#globalNavi { width: 100%; height: auto; display: block; position: absolute !important; top: 0; left: 0; }
nav#globalNavi ul { padding: 20px 0 40px; }
nav#globalNavi li { margin: 30px 32px; text-align: center; display: block; }
nav#globalNavi li a { font-size: 1.5rem; font-weight: normal; }
nav#globalNavi li a::after { bottom: -1px; }
nav#globalNavi li a.active::after { bottom: -1px; }
nav#globalNavi { display: none; }
}

/* --------------------------------------------------
	メイン
-------------------------------------------------- */

main { padding: 0 0 60px; display: block; }
main div#title { margin: 64px 0; }
main div#title h1 { font-size: 2.4rem; text-align: center; }
main div#title h1::after { content: ''; margin: 0.5em auto 0; width: 36px; height: 1px; background: #2e3f32; display: block; }
main section { margin: 60px 0 30px; }
main h2 { margin-bottom: 0.5em; font-size: 2rem; }
main h2 span { font-size: 2rem; }
main table { width: 100%; border-collapse: collapse; }
maion thead th { padding: 10px 20px; border: solid 1px #ccc; }
main tbody td { padding: 10px 20px; border: solid 1px #ccc; }

@media screen and (max-width: 767px) {
main div#title { margin: 24px 0 48px; }
main div#title h1 { font-size: 2rem; }
main div#title h1::after { width: 28px; }
main section { margin: 48px 0 24px; }
main h2 { font-size: 1.7rem; }
}

/* --------------------------------------------------
	ページ下部のお問い合わせ
-------------------------------------------------- */

div.contact { margin: 0 auto 60px; text-align: center; }
div.contact div.inner { padding: 30px 100px; background: rgba(255,255,255,0.75); text-align: left; display: inline-block; }
div.contact strong { margin-bottom: 0.5em; font-size: 2rem; text-align: center; display: block; }

@media screen and (max-width: 767px) {
div.contact { margin: 0 auto 40px; }
div.contact div.inner { padding: 24px; }
div.contact strong { font-size: 1.8rem; }
}

/* --------------------------------------------------
	グローバルフッタ
-------------------------------------------------- */

footer#globalFooter { padding: 60px 0; background: rgba(28,43,32,0.95); color: #fff; }
footer#globalFooter div.inner { margin: 0 auto; width: 900px; text-align: center; }

@media screen and (max-width: 767px) {
footer#globalFooter { padding: 40px 0; }
footer#globalFooter div.inner { width: auto; }
}

/* --------------------------------------------------
	オーバーレイ + スマートフォンメニュー
-------------------------------------------------- */

div#overlay {}
a#sp { display: none; }

@media screen and (max-width: 767px) {
div#overlay { width: 100%; height: 0; background: rgba(255,255,255,0.9); position: absolute; top: 0; left: 0; z-index: 100; }
a#sp { width: 54px; height: 54px; background: rgba(255,255,255,0.8); color: #2e3f32; font-family: sans-serif; font-size: 12px; text-align: center; text-decoration: none; line-height: 1; display: block; position: fixed; top: 40px; right: 10px; z-index: 10000; transform: translateY(-50%); }
a#sp span { margin: 0 auto; width: 32px; height: 2px; background: #2e3f32; display: block; position: absolute; left: 0; right: 0; transition: all 0.3s; }
a#sp span:nth-of-type(1) { top: 10px; }
a#sp span:nth-of-type(2) { top: 20px; }
a#sp span:nth-of-type(3) { top: 30px; }
a#sp p { width: 100%; position: absolute; bottom: 4px; }
a#sp.active { background: none; color: #fff; }
a#sp.active span { background: #fff; }
a#sp.active span:nth-of-type(1) { transform: translateY(10px) rotate(-45deg); }
a#sp.active span:nth-of-type(2) { opacity: 0; }
a#sp.active span:nth-of-type(3) { transform: translateY(-10px) rotate(45deg); }
}

/* --------------------------------------------------
	フェード効果
-------------------------------------------------- */

.fadeIn { opacity: 0; transform: translate(0, 20px); transition: all 1s; }
.fadeIn.scrollIn { opacity: 1; transform: translate(0,0); }