@charset "UTF-8";
@font-face { font-family: YuGothicM; src: local(Yu Gothic Medium); }

* { margin: 0; padding: 0; }
body { color: #333; font-family: YuGothic,YuGothicM,Meiryo,'繝｡繧､繝ｪ繧ｪ','�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け',sans-serif; font-size: 100%; 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.5s 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; }

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

/* --------------------------------------------------
	GLOBAL HEADER
-------------------------------------------------- */

header#globalHeader {}
header#globalHeader div.inner { margin: 0 auto; width: 1200px; height: 160px; position: relative; }
header#globalHeader img.logo { width: 160px; height: auto; position: absolute; top: 18px; }
header#globalHeader p { position: absolute; top: 24px; right: 0; }
nav#globalNavi { position: absolute; bottom: 24px; right: 0; }
nav#globalNavi ul { list-style: none; }
nav#globalNavi li { margin: 0 0 0 2.4em; padding: 0 0 0 12px; background: url(../img/common/naviArrow.svg) 0 center no-repeat; background-size: auto 12px; float: left; }
nav#globalNavi li a { color: #333; font-weight: bold; }
nav#globalNavi li a:hover { color: #e60013; text-decoration: none; }
nav#globalNavi li a.active { color: #e60013; }

@media screen and (max-width: 767px) {
header#globalHeader div.inner { padding: 15px 0; width: auto; height: auto; text-align: center; }
header#globalHeader img.logo { margin: 0 auto 15px; width: 120px; display: inline-block; position: static; }
header#globalHeader p { text-align: center; position: static; }
nav#globalNavi { padding: 20px 0; width: 100%; display: none; background: #e60013; top: 0; bottom: auto; left: 0; z-index: 5; }
nav#globalNavi ul { margin: 0 0 20px; }
nav#globalNavi li { margin: 0; padding: 0; width: 100%; border-bottom: solid 1px #fff; float: none; }
nav#globalNavi li a { padding: 15px 20px; color: #fff; display: block; }
nav#globalNavi li a:hover { color: #fff; }
nav#globalNavi li a.active { color: #fff; }
}

/* --------------------------------------------------
	PATH
-------------------------------------------------- */

div#path { margin: 20px auto; width: 1200px; font-size: 95%; }
div#path span { margin: 0 0.5em; }
div#path strong { font-weight: normal; }

@media screen and (max-width: 767px) {
div#path { padding: 0 10px; width: auto; }
}

/* --------------------------------------------------
	MAIN
-------------------------------------------------- */

main { margin: 0 auto; padding: 0 0 80px; display: block; }
main section {}
main div#title { height: 240px; background: #000; color: #fff; text-align: center; line-height: 240px; }
main div#title h1 { font-size: 200%; text-shadow: #000 1px 1px 15px, #000 -1px 1px 15px, #000 1px -1px 15px, #000 -1px -1px 15px; }
main div#contents { margin: 0 auto; width: 1200px; }
main h2 { margin: 3em 0 2em; width: 100%; font-size: 160%; text-align: center; display: inline-block; position: relative; }
main h2::before { content: ""; width: 48px; height: 4px; background: #e60013; display: inline-block; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); }
main h2:nth-of-type(1) { margin: 1em 0 2em; }
main h3 { margin-bottom: 1em; padding-left: 10px; border-left: solid 4px #e60013; font-size: 130%; }
main p { margin: 1.5em 0; }
main img { max-width: 100%; height: auto; }

@media screen and (max-width: 767px) {
main { padding: 0 0 30px; }
main div#title { height: 160px; line-height: 160px; }
main div#title h1 { font-size: 150%; }
main div#contents { padding: 0 10px; width: auto; }
main h2 { margin: 2em 0; font-size: 130%; }
main h2::before { width: 36px; height: 3px; }
main h2:nth-of-type(1) { margin: 1em 0 2em; }
main h3 { margin-bottom: 0.5em; padding-left: 10px; border-left: solid 3px #e60013; font-size: 120%; }
}

/* --------------------------------------------------
	GLOBAL FOOTER
-------------------------------------------------- */

footer#globalFooter { padding: 30px 0; background: #e60013; color: #fff; font-size: 90%; text-align: center; }
footer#globalFooter div.inner { margin: 0 auto; width: 1200px; }

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

/* --------------------------------------------------
	OVERLAY
-------------------------------------------------- */

div#overlay { width: 100%; background: rgba(255,255,255,0.8); position: absolute; top: 0; }
a#sp { display: none; }

@media screen and (max-width: 767px) {
/* a#sp { width: 50px; height: 50px; background: #fc0; display: block; position: fixed; top: 20px; right: 20px; z-index: 4; } */
a#sp { width: 48px; height: 48px; background: #e60013; border-radius: 3px; color: #fff; font-size: 11px; 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 span { margin: 0 auto; width: 32px; height: 2px; background: #fff; display: block; position: absolute; left: 0; right: 0; transition: all 0.3s; }
a#sp span:nth-of-type(1) { top: 8px; }
a#sp span:nth-of-type(2) { top: 16px; }
a#sp span:nth-of-type(3) { top: 24px; }
a#sp p { width: 100%; position: absolute; bottom: 6px; }
a#sp.active { background: rgba(230,0,19,0.5); color: #fff; }
a#sp.active span { background: #fff; }
a#sp.active span:nth-of-type(1) { transform: translateY(8px) rotate(-45deg); }
a#sp.active span:nth-of-type(2) { opacity: 0; }
a#sp.active span:nth-of-type(3) { transform: translateY(-8px) rotate(45deg); }
}


/*20211014*/
@media screen and (max-width: 767px) {
col { width:100%; }
}