html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

body { line-height: 1; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

nav ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; color: inherit; text-decoration: none; }

/* change colours to suit your needs */
ins { background-color: #ff9; color: #000; text-decoration: none; }

/* change colours to suit your needs */
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

/* change border colour to suit your needs */
hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; }

input, button, textarea, select { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

textarea { resize: none; }

html, body { -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

img, video { vertical-align: bottom; max-width: 100%; height: auto; }

img[src$=".svg"] { width: 100%; }

li { list-style: none; }

main { display: block; }

h1, h2, h3, h4, h5 { font-weight: inherit; }

*:focus { outline: none; }

/* --------------------------------------------------
Common
-------------------------------------------------- */
html, body { height: 100%; font-size: 10px; }

body { font-family: dnp-shuei-gothic-gin-std, sans-serif; color: #0B0B0B; }
body *::selection { background: #363432; color: #0B0B0B; }
body *::-moz-selection { background: #363432; color: #0B0B0B; }
body.is-loaded { opacity: 1 !important; transition: opacity 1s ease 0s; }

@media screen and (orientation: portrait) { .pc { display: none !important; } }
@media screen and (orientation: landscape) { .sp { display: none !important; } }
/* --------------------------------------------------
Parts
-------------------------------------------------- */
body #wrapper .svg-wrapper { display: block; position: relative; }
body #wrapper .svg-wrapper svg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; fill: currentColor; }
body #wrapper .svg-wrapper.logo { padding: 22.8% 0 0; }
body #wrapper .svg-wrapper.top { padding: 33.66% 0 0; }
body #wrapper .svg-wrapper.collection { padding: 10.43% 0 0; }
body #wrapper .svg-wrapper.feature { padding: 15.11% 0 0; }
body #wrapper .svg-wrapper.onlinestore { padding: 9.44% 0 0; }
body #wrapper .svg-wrapper.stockist { padding: 13.99% 0 0; }
body #wrapper .svg-wrapper.news { padding: 24.11% 0 0; }
body #wrapper .svg-wrapper.info { padding: 28.1% 0 0; }
body #wrapper .svg-wrapper.instagram { padding: 22.82% 0 0; }
body #wrapper .svg-wrapper.arrow { padding: 91.67% 0 0; }
body #wrapper .svg-wrapper.arrow svg path { stroke: currentColor; }
body #wrapper .not-found { font-size: 1.1rem; letter-spacing: -.01em; line-height: 1.59; }
body #wrapper .pagination { display: flex; justify-content: flex-end; align-items: center; column-gap: 15px; }
body #wrapper .pagination .prev, body #wrapper .pagination .next { width: 19px; }
body #wrapper .pagination .prev a, body #wrapper .pagination .prev .icon-wrap, body #wrapper .pagination .next a, body #wrapper .pagination .next .icon-wrap { display: block; padding: 5px; }
body #wrapper .pagination .prev.disabled, body #wrapper .pagination .next.disabled { opacity: .3; }
body #wrapper .pagination .to-all { font-size: 1.1rem; letter-spacing: -.01em; margin: 0 -10px; }
body #wrapper .pagination .to-all a { display: block; padding: 5px; text-decoration: underline; }
body.bg-black { background: #0B0B0B; color: #FFFFFF; }
body.bg-black #wrapper header #menu-wrapper { background: #0B0B0B; }
body.bg-white { background: #FFFFFF; color: #0B0B0B; }
body.bg-white #wrapper header #menu-wrapper { background: #FFFFFF; }
body:not(.single-post) img { width: 100%; }

@media screen and (orientation: landscape) { body #wrapper a { transition: color .2s ease 0s, opacity .2s ease 0s; }
  body #wrapper a:hover { color: #363432; }
  body #wrapper .not-found { font-size: 1.8rem; line-height: 1.39; }
  body #wrapper .pagination { justify-content: flex-start; column-gap: 25px; }
  body #wrapper .pagination .prev, body #wrapper .pagination .next { width: 11px; }
  body #wrapper .pagination .prev a, body #wrapper .pagination .prev .icon-wrap, body #wrapper .pagination .next a, body #wrapper .pagination .next .icon-wrap { padding: 0; }
  body #wrapper .pagination .to-all { font-size: 1.2rem; }
  body.bg-black #wrapper header #menu-wrapper { background: none; }
  body.bg-white #wrapper header #menu-wrapper { background: none; } }
/* --------------------------------------------------
Header
-------------------------------------------------- */
body #wrapper header .header-bar { position: fixed; top: 0; left: 0; right: 0; height: 100px; display: flex; align-items: center; justify-content: center; z-index: 9; }
body #wrapper header .header-bar .header-logo { width: 97px; }
body #wrapper header .header-bar .header-logo a { pointer-events: none; }
body #wrapper header #menu-toggle { position: fixed; width: 38px; left: 7px; bottom: 15px; z-index: 999; }
body #wrapper header #menu-toggle a { display: block; padding: 5px 10px; }
body #wrapper header #menu-toggle a .svg-wrapper { padding: 167.65% 0 0; }
body #wrapper header #menu-toggle a .svg-wrapper svg path { stroke: currentColor; }
body #wrapper header #menu-wrapper { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99; padding: 40px 0 0; display: none; }
body #wrapper header #menu-wrapper .logo { width: 125px; margin: 0 auto; }
body #wrapper header #menu-wrapper nav { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; text-align: center; }
body #wrapper header #menu-wrapper nav ul { display: flex; flex-direction: column; row-gap: 3.6svh; }
body #wrapper header #menu-wrapper nav ul li a { display: inline-block; }
body #wrapper header #menu-wrapper nav ul:nth-child(1) li:nth-child(1) a { width: 50px; }
body #wrapper header #menu-wrapper nav ul:nth-child(1) li:nth-child(2) a { width: 163px; }
body #wrapper header #menu-wrapper nav ul:nth-child(1) li:nth-child(3) a { width: 112px; }
body #wrapper header #menu-wrapper nav ul:nth-child(1) li:nth-child(4) a { width: 180px; }
body #wrapper header #menu-wrapper nav ul:nth-child(2) li:nth-child(1) a { width: 121px; }
body #wrapper header #menu-wrapper nav ul:nth-child(2) li:nth-child(2) a { width: 70px; }
body #wrapper header #menu-wrapper nav ul:nth-child(2) li:nth-child(3) a { width: 60px; }
body #wrapper header #menu-wrapper nav .instagram a { display: inline-block; width: 103px; }

@media screen and (orientation: landscape) { body #wrapper header .header-bar { height: 140px; }
  body #wrapper header .header-bar .header-logo { width: 180px; }
  body #wrapper header .header-bar .header-logo a { pointer-events: auto; }
  body #wrapper header #menu-toggle { display: none; }
  body #wrapper header #menu-wrapper { top: auto; right: 30px; bottom: 35px; left: 30px; padding: 0; display: block; }
  body #wrapper header #menu-wrapper .logo { display: none; }
  body #wrapper header #menu-wrapper nav { height: auto; flex-direction: row; justify-content: space-between; }
  body #wrapper header #menu-wrapper nav ul { flex-direction: row; column-gap: 25px; }
  body #wrapper header #menu-wrapper nav ul:nth-child(1) li:nth-child(1) { display: none; }
  body #wrapper header #menu-wrapper nav ul:nth-child(1) li:nth-child(2) a { width: 178px; }
  body #wrapper header #menu-wrapper nav ul:nth-child(1) li:nth-child(3) a { width: 123px; }
  body #wrapper header #menu-wrapper nav ul:nth-child(1) li:nth-child(4) a { width: 197px; }
  body #wrapper header #menu-wrapper nav ul:nth-child(2) li:nth-child(1) a { width: 132px; }
  body #wrapper header #menu-wrapper nav ul:nth-child(2) li:nth-child(2) a { width: 77px; }
  body #wrapper header #menu-wrapper nav ul:nth-child(2) li:nth-child(3) a { width: 65px; }
  body #wrapper header #menu-wrapper nav .instagram { display: none; } }
/* --------------------------------------------------
Contents
-------------------------------------------------- */
body #wrapper #contents { padding: 100px 15px; }
body #wrapper #contents h2 { position: fixed; left: 30px; top: 50px; visibility: hidden; pointer-events: none; }

@media screen and (orientation: landscape) { body #wrapper #contents { padding: 200px 0; width: calc(100% - 100px); margin: 0 auto; }
  body #wrapper #contents h2 { visibility: visible; pointer-events: auto; z-index: 99; } }
