@charset "UTF-8";


html, body { overflow-x: hidden; }

#title { position: fixed; top: 0; left: 240px; width: 70px; height:100%; background-image: linear-gradient(-45deg, #ebe8e4, #ebe8e4 50%, #f6f5f3 50%, #f6f5f3); background-size: 20px 20px; }
#title h1 { font-size: 42px; padding: 12px 0 0 10px; }
#title h1 span { font-size: 12px; }
#title p { font-size: 12px; color: #5e9e90; background: url('/img/t2.svg')no-repeat; background-position: left 18px top 10px; background-size: 36px auto; padding: 55px 20px 0 12px; }

#text { position: fixed; top: 0; left: 310px; width: 20px; height:100%; background: #ebe8e4; }
#text h2 { width: 100%; box-sizing: border-box; font-size: 12px; color: #fff; background: #bbb2a4; padding: 12px 3px 12px 0; margin-bottom: 8px;}
#text p { font-size: 12px; color: #8b806e; padding-right: 3px; }

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

#main { position: relative; z-index: 1; float: right; padding: 0 0 0 330px; }

ul.photo { background: #bbb2a4; }
ul.photo li { width: 14.285%; }
ul.photo li:nth-child(-n+4), ul.photo li:nth-of-type(26), ul.photo li:nth-of-type(27), ul.photo li:nth-of-type(28), ul.photo li:nth-of-type(29) { width: 25%; }

#memo { position: relative; font-size: 12px; color: #ebe8e4; background: #8b806e; padding: 25px 25px 5px 15px; }
#memo h2 { float: left; width: 100%; box-sizing: border-box; font-size: 20px; color: #cee0d7; text-shadow: 1px 1px 1px #716858; padding-left: 320px; }
#memo p { line-height: 1.4; padding: 2px 0 8px 320px; }
#memo h2:nth-of-type(2) { font-size: 14px; }
#memo li { width: 33.333%; padding: 10px 3px 20px 3px; }
#memo li a { display: block; font-size: 14px; color: #e9f0ed; text-shadow: 1px 1px 1px #625e52; font-weight: bold; text-align: center; background: linear-gradient(#5e9e90, #625e52); border: 1px solid #6e695b; border-radius: 20px; padding: 12px 0; }
#memo li a:hover { background: #625e52; }
#memo p:nth-of-type(3) { position: absolute; z-index: 1; top: 20px; left: 10px; width: 315px; padding: 0; }

#koakuma { position: relative; 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; margin-left: 330px; padding-right: 330px; }
#koakuma div { position: relative; text-align: center; background:rgba(83,79,67,0.4); }
#koakuma div img { float: none; width: 720px; }
#koakuma span { position: absolute; z-index: 100; top: 0; left: 0; width: 50px; font-size: 11px; color: #fff; text-align: center; background: #534f43; }