@charset "UTF-8";


html, body { overflow-x: hidden; }

#title { position: fixed; top: 0; left: 240px; width: 70px; height:100%; background: repeating-linear-gradient(#f6f5f3, #f6f5f3 12px, #fff 12px, #fff 24px); }
#title h1 { font-size: 42px; writing-mode: vertical-rl; padding: 12px 0 0 10px; }
#title h1 span { font-size: 12px; }
#title p:nth-of-type(1) { font-size: 19px; color: #9a8561; background: url('/img/t1.svg')no-repeat; background-position: left 18px top 0; background-size: 36px auto; padding: 45px 0 0 12px; }
#title p:nth-of-type(1) span { float: left; width: 100%; font-size: 72px; margin-top: -8px; }
#title p:nth-of-type(2) { font-size: 12px; color: #9a8561; writing-mode: vertical-rl; padding: 8px 20px 0 0; }

#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; writing-mode: vertical-rl; background: #bbb2a4; padding: 12px 3px 12px 0; margin-bottom: 8px; }
#text p { font-size: 12px; color: #8b806e; writing-mode: vertical-rl; padding-right: 3px; }

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

.swiper-container { width: 86.2%; }
.photo { width: 13.8%; }

.shop { position: relative; z-index: 1; background-color: #e6e1d8; background-image: repeating-radial-gradient( circle at 0 0, transparent 0, #e2d6c3 20px ), repeating-linear-gradient( #eae3d9, #f1e8d9 ); padding: 20px 10px 0 225px; }
.shop h3 { font-size: 27px; text-shadow: 1px 1px 1px #f9f6f0; }
.shop p { line-height: 1.4; padding: 5px 5px 0 0; }
.shop p:nth-of-type(1) { display:inline-block; width: auto; font-size: 15px; font-weight: bold; background: linear-gradient(transparent 60%, #fff2c4 30%); }
.shop p:nth-of-type(2) { display:inline-block; float: none; width: auto; background: linear-gradient(transparent 60%, #fff2c4 30%); }
.shop p:nth-of-type(4) { margin-bottom: 15px; }
.shop img { position: absolute; z-index: 1; top: -20px; left: 10px; width: 200px; border: 1px solid #f6f5f3; padding: 3px; }

#memo div { 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: #dbd0b9; 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: #efece6; text-shadow: 1px 1px 1px #625e52; font-weight: bold; text-align: center; background: linear-gradient(#9a8561, #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: 345px; width: 305px; 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; }