@charset "UTF-8";


#main { position: relative; z-index: 1; padding: 0 230px 0 240px; }

p.text { font-size: 12px; text-align: center; margin-bottom: 8px; }

p.memo { font-size: 11px; color: #8b806e; text-align: right; padding: 0 1%; margin-top: -12px; }
p.memo a { color: #8b806e; text-decoration: underline; }
p.memo a:hover { color: #534f43; text-decoration: none; }
p.memo:last-of-type { padding-bottom: 10px; margin-top: 0; }

#title { text-align: center; background: #ebe8e4; padding: 16px 0 0 0; }
#title .big { font-size: 20px; padding-bottom: 3px; }
#title .text { color: #8b806e; margin-bottom: 1px; }

#ban { background: #ebe8e4; padding: 0 1% 2px 0; }
#ban div div { width: 24%; text-align: center; margin: 1px 0 0 1%; }
#ban div a { font-size: 14px; color: #5e9e90; font-weight: bold; }
#ban div a:hover { text-decoration: underline; }
#ban div p:nth-of-type(1) { font-size: 13px; color: #534f43; margin-top: 2px; }
#ban div a p:nth-of-type(2) { font-size: 12px; color: #534f43; font-weight: normal; margin-top: 1px; }
#ban img { margin-bottom: 4px; }

#photo { background: #ebe8e4; }
#photo ul { margin-top: 1px; }
#photo li { width: 6.25%; }
#photo li:nth-of-type(1) { width: 18.75%; }
#photo li:nth-of-type(15) { width: 12.5%; }

#memo { background: #c1d5ca; padding: 15px 1.2% 12px 1.5%; }
#memo h3 { float: left; font-size: 12px; color: #5e9e90; margin: -1px 5px 0 0; }
#memo p { float: none; width: auto; font-size: 11px; color: #fff; line-height: 1.3; }
#memo p a { color: #fff; text-decoration: underline; }
#memo p a:hover { text-decoration: none; }

#site { position: relative; font-size: 11px; text-align: center; background-image: linear-gradient(135deg, #d3cfc8 25%, transparent 25%), linear-gradient(225deg, #d3cfc8 25%, transparent 25%), linear-gradient(45deg, #d3cfc8 25%, transparent 25%), linear-gradient(315deg, #d3cfc8 25%, #c8c2b8 25%); background-position: 20px 0, 20px 0, 0 0, 0 0; background-size: 40px 40px; background-repeat: repeat; padding-top: 15px; }

#koakuma { position: relative; }
#koakuma span { position: absolute; z-index: 100; top: 0; left: 0; width: 50px; font-size: 11px; color: #fff; text-align: center; background: #534f43; }

#right_left { position: fixed; z-index: 2; top: 0; right: 90px; width: 140px; height: 100%; font-size: 13px; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; }
#right_left { background: #cee0d7; background-image: radial-gradient(circle, #99c2b4 1.5px, transparent 1.5px), radial-gradient(circle, #99c2b4 1.5px, transparent 1.5px); background-position: 0 0, 10.5px 23px; background-size: 21px 46px; }
#right_left::-webkit-scrollbar { display:none; }
#right_left p:nth-of-type(1) { position: absolute; z-index: 1; top: 0; right: 0; width: 160px; }
#right_left ul { font-weight: bold; margin-top: 170px; }
#right_left li a { position: relative; float: left; width: 100%; box-sizing: border-box; color: #534f43; text-shadow: 2px 1px 1px #e9f0ed; padding: 4px 0; }
#right_left li a::before { content: "≫"; color: #5e9e90; padding-right: 3px; }
#right_left li a:hover { color: #fff; text-shadow: initial; background: #99c2b4; }

#right_right { position: fixed; z-index: 2; top: 0; right: 0; width: 90px; height: 100%; font-size: 13px; background: #99c2b4; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; }
#right_right::-webkit-scrollbar { display:none; }
#right_right ul { background: #5e9e90; }
#right_right li a { float: left; width: 100%; box-sizing: border-box; color: #fff; text-align: center; border-bottom: 1px solid #aac9be; padding: 6px 0; }
#right_right li a:hover { color: #534f43; font-weight: bold; background: #fff; }
#right_right li:nth-of-type(1), #right_right li:nth-of-type(2) { font-weight: bold; background-image: repeating-linear-gradient(310deg, #99c2b4, #99c2b4 3px, #5e9e90 3px, #5e9e90 6px); }
#right_right li:nth-of-type(1) a { background: url('icon/01.svg')no-repeat; background-position: center top 8px; background-size: 50% auto; padding: 60px 0 5px 0; }
#right_right li:nth-of-type(2) a { background: url('icon/02.svg')no-repeat; background-position: center top 8px; background-size: 50% auto; padding: 60px 0 5px 0; }
#right_right li:nth-of-type(1):hover, #right_right li:nth-of-type(2):hover { background: #fff; }

#right_bottom { position: fixed; z-index: 3; bottom: 0; right: 0; width: 230px; }
#right_bottom p { position: relative; display: inline-block; width: 94%; font-size: 12px; color: #fff; text-align: center; background: #c75050; border-radius: 4px; padding: 5px; margin: 6px 3%; }
#right_bottom p:before { content: ""; position: absolute; top: 100%; left: 50%; border: 6px solid transparent; border-top: 6px solid #c75050; margin-left: -6px; }
#right_bottom p span { font-size: 10px; line-height: 1.8; background: #7e3a3a; padding: 2px 4px; margin-right: 5px; }
#right_bottom p img { position: absolute; z-index: 1; bottom: 22px; right: -8%; width: 240px; filter: alpha( opacity=12 ); opacity: 0.12; -moz-opacity: 0.12; }