@charset "UTF-8";
/* basic settings */
html, body, h1, h2, h3, h4, h5, h6,
a, p, span, em, small, strong, sub, sup,
mark, del, ins, strike, abbr, dfn,
blockquote, q, cite, code, pre,
ol, ul, li, dl, dt, dd,
div, section, article,
header, main, aside, nav, footer,
img, figure, figcaption,
address, time,
audio, video,
canvas, iframe,
details, summary,
fieldset, form, label, legend,
table, caption,tbody, tfoot, thead,tr, th, td { margin: 0; padding: 0; border: 0; }

html { font-size: 62.5%; width: 100%; min-width: 320px; min-height:100%; -webkit-text-size-adjust:100%; }
body { font-size: 16px; line-height: 1.5; width: 100%; min-height:100%; min-width: 320px; overflow-x: hidden; color:#333; background:#FFF; font-family:'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif;}
* { box-sizing: border-box; font-family: inherit; font-size: inherit; line-height: inherit; }
*:before, *:after { box-sizing: inherit; }
article, aside, footer, header, nav, section, main { display: block;}
a, a:visited, a img { color: inherit; transition: all .3s;}
table { border-collapse: collapse; border-spacing: 0; }
ol, ul { list-style: none; }
img, video { max-width: 100%; }
img { border-style: none; vertical-align: middle;}
blockquote, q { quotes: none; }
	blockquote:after, blockquote:before, q:after, q:before { content: ""; content: none; }
[hidden] { display: none !important; }
[disabled] { cursor: not-allowed; }
:focus:not(:focus-visible) { outline: none; }

.cb { height:1px; display:block; clear:both; font-size:1px; line-height:1px; overflow:hidden; }
.f10 { font-size:10px;}
.f12 { font-size:12px;}
.f14 { font-size:14px;}
.f16 { font-size:16px;}
.f18 { font-size:18px;}
.f20 { font-size:20px;}
.f22 { font-size:22px;}
.f24 { font-size:24px;}
.f28 { font-size:28px;}
.blue { color:#0C4F95;}
.navy { color:#2E3192;}
.red { color:#CC0000;}
.white { color:#FFF;}
.orange { color:#F90;}
.purple { color:#310080;}
.green { color:#B3DD21;}
.tac { text-align:center;}
.tar { text-align:right;}
.tal { text-align:left;}
.fb { font-weight:bold;}
.fbn { font-weight:normal;}
.fr { float:right;}
.fl { float:left;}
.fg { font-family:Arial, Helvetica, sans-serif;}
.btn {}
.zm50 { zoom:.5;}


header { width: 480px; position: relative; z-index: 10;}
    #head { display: flex; flex-wrap: wrap; flex-direction: row-reverse; justify-content: space-between; width:480px;}
    span#menu { display: block; width:100px; height:100px; cursor: pointer; opacity: 1;}
        span#menu:hover { opacity: .8;}
        span#menu.active { opacity: .8;}
        span#menu:before { content: url(../images/hmenu.svg);}
    #head p { display: flex; width: 380px; padding:0; margin:0; text-align: left;}
	nav { display: none; width:480px; clear:both; position: absolute; top: 130px;}
		nav ul { display: block; width:480px; text-align:left; color: #333; list-style:none; margin: 0; padding: 0;}
			nav li { margin:0; padding:0; font-size:18px; background: #FFF;}
			nav li a { display:block; padding:16px 80px; margin:0; color:#333; text-decoration:none; background: #FFF; border-top:1px solid #CCC;}
                nav li a:hover { background: #EEE;}
			nav li a:before { content:"\003e"; float:right; font-size:16px; font-weight:bold; }
		nav ul li ul { padding-bottom: 8px}
		nav ul li ul li a { border-top: none; text-indent: 1em; padding:8px 80px; font-size: 16px;}
		nav li span { display:block; padding:16px 80px 8px 80px; margin:0; color:#333; text-decoration:none; background: #FFF; border-top:1px solid #CCC;}
    span#menuclose { display: block; margin: 0; padding:16px 0; text-align: center; font-size: 14px; line-height: 18px; color: #FFF; font-weight: bold; background: #E02229; border-top:1px solid #CCC; cursor: pointer;}
        span#menuclose:before { content:"MENUを閉じる";}


#commonhead {width:480px; padding: 30px 0; background:#000 url(../images/hometop-bg.jpg) no-repeat 120px 20px / 60%; color: #FFF;}

#title { padding: 20px 30px;}

h2.title { display: flex; justify-content: flex-start; width: 420px; margin:0 30px; padding: 20px 0 10px 0; border-bottom: 1px solid #666;}
	h2.title::before { display: block; width: 5px; min-height: 40px; align-items: stretch; background: #E02229; content:""; margin-right: 15px; }

main { display: block; width: 480px; padding:20px 0; position: relative; z-index: 1;}

footer { display: block; width:480px; clear:both; padding:40px 30px; position: relative; z-index:0; background:#F1F1F1;}
	footer ul {padding:10px 0; margin: 0; list-style: none;}
	footer li { display: block; padding:8px 0; font-size: 16px; line-height: 1.5em; }
		footer li strong  { font-size: 24px;}
		footer li a { color: #333;}
		footer .fg {color:#666; font-size: 12px;}


.pagetop { display: none; position: fixed; text-decoration: none; text-align: center; font-family: Arial, Helvetica, "sans-serif"; bottom: 30px; right: 30px; width: 80px; height: 80px; border: 1px solid #FFF; line-height: 1.5em; border-radius:40px; color: #FFF; background:#555; }
		.pagetop:after { content: "PAGE TOP"; display: block; padding:0; font-size: 12px; }
		.pagetop:before { content: "↑"; display: block; padding:14px 0 0 0; font-size: 14px; }
		.pagetop:hover { color:#FFF; background:#E02229;}