/*---------------------------------------------------------------------------------

	Theme Name: JapanDesignHistory
	Version: 1.0
	Description:
	Tags:
	Author: Ian Lynam
	Author URI: https://ianlynam.com
	License:
	Theme URI:
	Requires PHP: 5.4
	Tested up to: 6.3

-------------------------------------------------------------------------------- */



/* generated 2026-01-29T03:24:42+09:00 */


/**********
 * file: 0-fonts.css
 *
 */


  @font-face {
    font-family: "Onick";
    src: url("assets/fonts/Onick.woff") format("woff"),
         url("assets/fonts/Onick.otf"),
    font-weight: normal;
    font-style:  normal;
    }



  @font-face {
    font-family: "VaudPro";
    src: url("assets/fonts/VaudPro-Regular.woff") format("woff"),
         url("assets/fonts/VaudPro-Regular.otf"),
    font-weight: normal;
    font-style:  normal;
    }


  @font-face {
    font-family: "VaudPro";
    src: url("assets/fonts/VaudPro-RegularItalic.woff") format("woff"),
         url("assets/fonts/VaudPro-RegularItalic.otf"),
    font-weight: normal;
    font-style:  italic;
    }


  @font-face {
    font-family: "VaudPro";
    src: url("assets/fonts/VaudPro-Bold.woff") format("woff"),
         url("assets/fonts/VaudPro-Bold.otf"),
    font-weight: bold;
    font-style:  normal;
    }


  @font-face {
    font-family: "VaudPro";
    src: url("assets/fonts/VaudPro-Thin.woff") format("woff"),
         url("assets/fonts/VaudPro-Thin.otf"),
    font-weight: 300;
    font-style:  normal;
    }




/**********
 * file: 1-typography.css
 *
 */

body {
	font-family: VaudPro, sans-serif;
}

section a {
	text-decoration: none;
	border-bottom: 2px solid red;
	color: black;
}

section a:hover { color: red; }


h1, h2 { font-weight: bold; }
h3, h4 { font-weight: 300; }

ul li::marker {
  color: red;
}



/**********
 * file: 2-base.css
 *
 */

html, body { margin: 0; padding: 0; }



/**********
 * file: empty.css
 *
 */




/**********
 * file: footer.css
 *
 */

footer {
  align-items    : center;
  display        : flex;
  justify-content: space-evenly;
  }

footer .menu-footer-container {}
footer .menu-footer-container ul {
  display        : flex;
  list-style-type: none;
  padding        : 0;
  flex-wrap: wrap;
  }

footer .menu-footer-container li {
  border-left: 2px solid red;
  line-height: 1;
  }

footer .menu-footer-container li:nth-of-type(1) {
  border: none;
  }

footer .menu-footer-container li a {
  color          : black;
  font-family    : VaudPro;
  font-size      : 10pt;
  font-weight    : bold;
  padding        : 0 5px;
  text-decoration: none;
  }

footer .menu-footer-container li.red-button {
  border: none;
  }

footer .menu-footer-container li.red-button a {
  background-color: red;
  border-radius   : 8pt;
  color           : white;
  display         : inline-block;
  margin-left     : 0.5em;
  padding         : 4px 8px;
  }



/**********
 * file: header.css
 *
 */

header {
  align-items    : center;
  display        : flex;
  justify-content: space-between;
  margin: 16px 0;
  padding: 0 10px;
  }

header h1 {
  color      : red;
  font-family: Onick;
  font-size  : 28pt;
  font-weight: 500;
  white-space: nowrap;
  margin: 0;
  text-transform: lowercase;
  }

header h1 a {
  color      : red;
  text-decoration: none;
	}

header .burger { display: none; }

header .menu-header-container {}
header .menu-header-container ul {
  align-items: center;
  display        : flex;
  flex-wrap      : wrap;
  list-style-type: none;
  margin         : 0;
  padding        : 0;
  }

header .menu-header-container li {
  border-left: 2px solid red;
  line-height: 0.8;
  }

header .menu-header-container li:nth-of-type(1) {
  border: none;
  }

header .menu-header-container li a {
  color          : black;
  display: inline-block;
  font-family    : VaudPro;
  font-size      : 9pt;
  font-weight    : bold;
  padding        : 0 5px;
  text-decoration: none;
  }

header .menu-header-container li a:hover { color: red; }


header .menu-header-container li.red-button {
  border: none;
  }

header .menu-header-container li.red-button a {
  background-color: red;
  border-radius   : 10pt;
  color           : white;
  display         : inline-block;
  margin-left     : 0.5em;
  padding         : 8px 8px;
  }

header .menu-header-container li.red-button a:hover { color: white; }



/**********
 * file: home.css
 *
 */

.home section {
	font-size: 16pt;
	}



/**********
 * file: menu.css
 *
 */

.burger {
  height  : 40px;
  position: relative;
  width   : 40px;
  }

.burger span {
  background-color: red;
  display         : block;
  height          : 2px;
  left            : 6px;
  position        : absolute;
  transition      : transform 0.3s ease, opacity 0.3s ease;
  width           : 28px;
  }

.burger span:nth-child(1) {
  transform-origin: top left;
  top: 12px;
  }

.burger span:nth-child(2) {top: 20px;}

.burger span:nth-child(3) {
  top: 28px;
  transform-origin: bottom left;
  }

.menu-open  .burger span { width: 24px; }

.menu-open  .burger span:nth-child(1) { transform: rotate(45deg); }
.menu-open  .burger span:nth-child(2) { opacity: 0; }
.menu-open  .burger span:nth-child(3) { transform: rotate(-45deg); }



/**********
 * file: shortcodes.css
 *
 */

.redbox, .blackbox {
	width: 100%;
	background-color: red;
	color: white;
}

.redbox > p, .blackbox > p { /* header image banner */
	width: 100%;
	margin: 0;
	background-size: contain;
	background-repeat: repeat-x;
	height: 150px;
}

.redbox > div, .blackbox > div { /* actual content */
  margin   : 0 auto;
  padding  : 1em 0;
  max-width: 650px;
  }

.redbox h2, .blackbox h2 {
	margin: 0 0 1em;
	}

.redbox + br,
.blackbox + br { display: none; }


.redbox {
	background-color: red;
	color: white;
	}

.blackbox {
	background-color: black;
	color: white;
	}


/* in-box stylings */

.redbox h2, .blackbox h2 { text-transform: uppercase; }


.redbox h2, .redbox a {
	color: black;
	text-decoration: none;
	}

.blackbox h2, .blackbox a { color: red; }

.blackbox input[type="submit"],
.blackbox button,
.blackbox .button {
  border-radius   : 18px;
  border          : none;
  color           : white !important;
  display         : inline-block;
  font-size       : 1.2em;
  padding         : 3px 16px;
  background-color: red;
  }

/* not-a-box */

.column {
	max-width: 650px;
	margin: 0 auto;
}



/**********
 * file: vimeo.css
 *
 */

.vimeobox {
	width: 100%;background-color: black;
	}

.vimeobox > div {
	}

.vimeobox iframe {
  border    : none;
  margin    : 0 auto;
  display   : block;
  min-height: 400px;
	width: 100%;
  }





/**********
 * file: widgets.css
 *
 */

button, .button {
  background-color: black;
  border-radius   : 14px;
  color           : white !important;
  display: inline-block;
  font-size       : 1.2em;
  padding         : 3px 16px;
  }



b { font-weight: bold; }
em { fonct-style: italic; }

.alignright, .align-right {
	 }

.aligncenter, .align-center { text-align: center; }



/* === begin @media === */

@media all and ( max-width:1070px ) {

/**********
 * file: media 10 all and ( max-width=1070px )/empty.css
 *
 */




/**********
 * file: media 10 all and ( max-width=1070px )/header.css
 *
 */

header .menu-header-container {
  position        : absolute;
  right           : 20px;
  background-color: white;
  display         : none;
  border          : 2px solid red;
  border-radius   : 10px;
  padding         : 10px;
	top: 84px;
}
.menu-open header .menu-header-container {
	display: block;
	}

header .burger { display: block; }


header .menu-header-container ul {
	display: block;
}

header .menu-header-container li {
	border: none;
	}

header .menu-header-container li a {
	font-size: 14pt;
	padding: 8px 0;
	}

header .menu-header-container li.red-button a {
	margin: 8px 0 4px 0;
	}

}



/* === begin @theme === */