@charset "UTF-8";

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 10px; }
body { color: #111; font-family: "BIZ UDPGothic",YuGothic, YuGothicM, メイリオ, Meiryo, 'ＭＳ ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif; font-size: 1.5rem; line-height: 1.8; -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; }

body { position: relative; }

@media screen and (max-width: 767px) {
	body.on-menu { height: 100%; overflow: hidden; }
}

.inner { margin: 0 auto; padding: 0 20px; width: 100%; }

/* --------------------------------------------------
	globalHeader
-------------------------------------------------- */
#globalHeader { padding: 15px 20px; }
#globalHeader .flex { display: flex; align-items: center; justify-content: space-between; }
#globalHeader img { height: 50px; }
#globalHeader .h-logo a { display: flex; align-items: center; gap: 20px; text-decoration: none; color: #000; }
#globalHeader .h-logo p { font-size: 2.4rem; }
#globalHeader .h-text { margin: 12px 0 0; font-size: 1.6rem; }
@media screen and (max-width: 767px) {
	#globalHeader img { width: 50px; height: auto; }
	#globalHeader .flex { padding-right: 48px; }
	#globalHeader .h-logo p { font-size: 1.6rem; }
	#globalHeader .h-text { font-size: 1.2rem; }
	#globalHeader .saga { display: none; }
}

#globalNavi { width: 100%; }
#globalNavi ul { display: flex; }
#globalNavi li { width: calc(100% / 7); list-style: none; border-right: solid 1px #fff; }
#globalNavi li:last-of-type { border-right: none; }
#globalNavi a { padding: 10px; width: 100%; height: 100%; display: block; text-align: center; background: #2b69a3; color: #fff; font-size: 1.4vw; text-decoration: none; transition: all .3s; }
#globalNavi a:hover { background: #15426c; }
#globalNavi a.is-current { background: #15426c; }
#globalNavi .saga-sp { display: none; }
@media screen and (max-width: 1000px) {
	#globalNavi a { font-size: 1.5rem; }
}
@media screen and (max-width: 767px) {
	#globalNavi { width: 250px; height: 100vh; padding: 100px 0; background: #2b69a3; position: fixed; top: 0; right: 0; transform: translateX(100%); opacity: 0; pointer-events: none; transition: all .3s; z-index: 999; }
	.on-menu #globalNavi { transform: translateX(0); opacity: 1; pointer-events: visible; }
	#globalNavi ul { flex-direction: column; padding: 0 20px; }
	#globalNavi li { width: 100%; border-right: none; border-bottom: solid 1px #fff; }
	#globalNavi a { padding: 14px 10px; }
	#globalNavi a:hover { background: none; }
	#globalNavi .saga-sp { margin: 40px auto 0; width: calc(100% - 40px); display: block; }
	#globalNavi .saga-sp a { width: 100%; padding: 10px 0; background: #fff; }
}

/* --------------------------------------------------
	globalFooter
-------------------------------------------------- */
#globalFooter { padding: 10px 0 0; background: #e0f0ff; font-size: 1.4rem; }
#globalFooter strong { font-size: 1.6rem; font-weight: bold; display: block; }
#globalFooter .copy { margin-top: 10px; padding: 5px 0; background: #2b69a3; color: #fff; font-size: 1.2rem; text-align: center; }
@media screen and (max-width: 767px) {
	#globalFooter .copy { font-size: 1.0rem; }
}

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

div#overlay {}
a#sp_menu { 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: 998; }
.on-menu div#overlay { height: 100%; }
a#sp_menu { width: 48px; height: 48px; background: #2b69a3; border-radius: 3px; color: #fff; font-size: 12px; text-align: center; text-decoration: none; line-height: 1; display: block; position: fixed; top: 40px; right: 10px; z-index: 1000; transform: translateY(-50%); }
a#sp_menu span { margin: 0 auto; width: 22px; height: 2px; background: #fff; display: block; position: absolute; left: 0; right: 0; transition: all 0.3s; }
a#sp_menu span:nth-of-type(1) { top: 10px; }
a#sp_menu span:nth-of-type(2) { top: 16px; }
a#sp_menu span:nth-of-type(3) { top: 22px; }
a#sp_menu::after { content: 'MENU'; width: 100%; position: absolute; bottom: 8px; left: 0; right: 0; font-size: 1.0rem; white-space: nowrap; }
a#sp_menu.open span:nth-of-type(1) { transform: translateY(6px) rotate(-45deg); }
a#sp_menu.open span:nth-of-type(2) { opacity: 0; }
a#sp_menu.open span:nth-of-type(3) { transform: translateY(-6px) rotate(45deg); }
a#sp_menu.open::after { content: 'CLOSE'; }
}


/* --------------------------------------------------
	下層ページ
-------------------------------------------------- */
h2 { margin: 30px 0 20px; font-size: 2.8rem; border-bottom: solid 2px #d6d6d6; }
h3 { margin: 16px 0; padding: 10px; font-size: 2.0rem; background: #d6d6d6; }
@media screen and (max-width: 767px) {
	h2 { margin: 16px 0; font-size: 2.4rem; }
	h3 { margin: 10px 0; font-size: 1.8rem; }
}