@charset "UTF-8";


html, body { font-weight: bold; background-image: linear-gradient(-45deg, #ebe8e4, #ebe8e4 50%, #f6f5f3 50%, #f6f5f3); background-size: 20px 20px; overflow-x: hidden; }

#title { width: 42px; }
#title h1 { font-size: 29px; padding: 95px 0 0 2px; }
#title h1 span { font-size: 13px; }
#title p { font-size: 11px; color: #5e9e90; background: url('/img/t2.svg')no-repeat; background-position: left 7px top 6px; background-size: 28px auto; padding: 45px 6px 0 0; }

#text { width: 13px; background: #ebe8e4; }
#text h2 { width: 100%; box-sizing: border-box; font-size: 11px; color: #fff; background: #bbb2a4; padding: 95px 0 10px 0; margin-bottom: 6px; }
#text p { font-size: 11px; color: #8b806e; }

#title h1, #title p, #text h2, #text p { writing-mode: vertical-rl; }

#main { position: relative; z-index: 1; margin-right: -55px; padding-right: 55px; }

ul.photo { background: #bbb2a4; }
ul.photo li { width: 20%; }
ul.photo li:nth-child(-n+3), ul.photo li:nth-of-type(24), ul.photo li:nth-of-type(25), ul.photo li:nth-of-type(26) { width: 33.333%; }

#memo { position: relative; font-size: 12px; color: #ebe8e4; background: #8b806e; padding: 135px 4px 18px 12px; }
#memo h2 { float: left; width: 100%; font-size: 16px; color: #cee0d7; text-shadow: 1px 1px 1px #716858; padding: 8px 0 3px 0; }
#memo ul { padding: 5px 6px 0 0; }
#memo li { padding-top: 4px; }
#memo li a { display: block; font-size: 14px; color: #e9f0ed; text-shadow: 1px 1px 1px #625e52; text-align: center; background: linear-gradient(#5e9e90, #625e52); border: 1px solid #6e695b; border-radius: 4px; padding: 12px 0; }
#memo p:nth-of-type(3) { position: absolute; z-index: 1; top: 6px; left: 8px; width: 310px; padding: 0; }

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