:root{
  --paper-width:1000px;
  --page-height:1292px;
  --ink:#090909;
  --left:70px;
  --right:70px;
  --gap:28px;
}
*{box-sizing:border-box}

html {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position: relative;
	background: url(../img/purty_wood.png) repeat;
	-webkit-text-size-adjust: ('none' '100%' 'auto');
	/*
	========================================================
	 This pattern is downloaded from www.subtlepatterns.com 
	 If you need more, that's where to get'em.
	 ========================================================
	*/
	background-size: 400px;
	min-width: 1200px;
	height: 6200px;
}

body{
	width:var(--paper-width);
	margin:36px auto 100px;
	padding:0;
	background:transparent;
	color:var(--ink);
	font-family:"Times New Roman",Times,serif;font-size:15px;
	line-height:1.18
}

a{
	color:inherit;
	text-decoration:none
}

a:hover{
	text-decoration:underline
}

body>header,body>div[id^="page"],body>div[id^="publication"]{
	width:var(--paper-width);
	height:var(--page-height);
	margin:0 0 34px;
	background:#fff;
	box-shadow:0 1px 6px rgba(0,0,0,.14);
	position:relative;
	overflow:hidden;
	padding:78px var(--right) 75px var(--left)
}
	

/* ----- first page: IJRR ca. 2009 ----- */
header#main-nav{
	padding-top:135px
}

header#main-nav:before{
	content:"";
	position:absolute;
	left:70px;
	right:70px;
	top:77px;
	border-top:7px solid #000
	}

#header{
	position:static
}

h1#title{
	position:absolute;
	left:505px;
	top:139px;
	width:425px;
	margin:0;
	font-size:39px;
	line-height:1.02;
	font-weight:bold;
	letter-spacing:-.55px
	}
	
h2#subtitle{
	position:absolute;
	left:70px;
	top:123px;
	font-size:23px;
	font-weight: bold;
}

p#affiliation{
	margin-top: 35px;
	line-height:1.32;
}


hr#header{
	display:none
}


nav:before{display:none}

p#abst{
	position:absolute;
	left:70px;
	top:464px;
	width:410px;
	margin:0;
	line-height:1.3;
	font-style:italic;
	text-align:justify
}

p#abst:before{
	content:"Abstract";
	display:block;
	margin:0 0 33px;
	font-size:20px;
	line-height:1;
	font-style:normal;
	font-weight:bold
}

div.content {
	position:absolute;
	left:70px;
	top:830px;
	width:410px;
	margin:0;
}

hr.clear {
	display:none;
}

h1.clear {
	display:none;
}

h2.content {
	display: inline;
	font-size:16px;
	font-weight:normal
}

h2.content:after {
	content: "—";
	font-weight: normal;
	font-style: normal;
}

ul.content {
	display: inline;
	margin-left: -50px;
	font-size:16px;
}

ul.content li:not(:last-child):after {
	content: ",";
	margin-right: -8px;
}

div.information {
	position:absolute;
	left:70px;
	top:1100px;
	width:410px;
	margin:0;
	line-height:0.2;
	font-size:14px;
}

h2.language {
	display: inline;
	font-size:14px;
	font-weight:normal
}

h2.language:after {
	content: ":";
	font-weight: normal;
	font-style: normal;
}

ul.language {
	display: inline;
	margin-left: -50px;
	font-size:16px;
	font-size:14px;
}

ul.language li:not(:last-child):after {
	content: ",";
	margin-right: -8px;
}

hr.n_line {
	border: none;
	border-top: 1px solid #000000;
	color: #000000;
}

li{
	display:inline;
	margin-left:8px
}

.intro{
	position:absolute;
	left:70px;
	top:900px;
	width:425px;
	height:770px;
	overflow:hidden
}

.intro h1{
	margin:0 0 10px;
	font-size:20px;
	line-height:1;
	font-weight:bold
}

.intro h1:before{
	content:"1. ";
}

.intro p{
	margin:0 0 8px;
	text-indent:0;
	text-align:justify;
	font-size:16px;
	line-height:1.2
}

.page1{
	position:absolute;
	left:505px;
	top:485px;
	width:425px;
	height:770px;
	overflow:hidden
}

.page1 #intro,.page1 #research1{
	position:static;
	width:auto;
	margin:0;
	padding:0
}

#research1 h1{
	margin:0 0 10px;
	font-size:20px;
	line-height:1;
	font-weight:bold
}

#research1 h1:before{
	content:"2. ";
}

#research1 h2,
#research2 h2,
#research3 h2,
#research4 h2,
#research5 h2{
	margin:0 0 6px;
	font-size:17px;
	font-style:italic;
	line-height:1.8
}


#research1 h2:before{
	content:"2.1. "
}

#research2 h2:before{
	content:"2.2. "
}

#research3 h2:before{
	content:"2.3. "
}

#research4 h2:before{
	content:"2.4. "
}

#research5 h2:before{
	content:"2.5. "
}


#research3,
#research5 {
    break-before: column;
}

.page1 p{
	margin:0 0 0px;
	text-indent:1em;
	text-align:justify;
	font-size:16px;
	line-height:1.2
}

#first{
	text-indent:0em;
}

figure{
	margin:30px 0;
	text-align:center
}

img{
	max-width:250px;
	height:auto
}

figcaption{
	font-size:16px;
	line-height:1.15;
	margin-top:30px;
	text-align:left
}

.page1 hr.bottom {
	border-style: none;
}

.page1 hr.bottom:after {
	font-size: 17px;
	content: "1";
	position: absolute;
	right: 5px;
	bottom: 10px;
    color: #000;
}

/* ----- later pages ----- */
body>div[id^="page"],
body>div[id^="publication"]{
	padding-top:128px;
	column-count:2;
	column-gap:var(--gap);
	column-fill:auto
}

body>div[id^="page"]:before,
body>div[id^="publication"]:before{
	position:absolute;
	left:70px;
	top:75px;
	font-size:16px;
	font-weight:400;
	letter-spacing:-.1px
}

body>div[id^="page"]:after,
body>div[id^="publication"]:after{
	position:absolute;
	right:70px;
	top:75px;
	font-size:16px;
	font-weight:400;
	letter-spacing:-.1px
}


#page2:before{
	font-size:17px;
	content:"2\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0THIS IS THE PERSONAL WEBSITE OF SHOUHEI SHIRAFUJI / August 2026"
}
	
#page3:after{
	font-size:17px;
	content:"Shouhei Shirafuji / Dexterous Motion Generated by Mechanisms in Humans and Robots\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0 3"
}
	

#publication1:before {
	font-size:17px;
	content:"4\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0THIS IS THE PERSONAL WEBSITE OF SHOUHEI SHIRAFUJI / August 2026"
}

#publication2:after{
	font-size:17px;
	content:"Shouhei Shirafuji / Dexterous Motion Generated by Mechanisms in Humans and Robots\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0 5"
}

#publication3:before {
	font-size:17px;
	content:"6\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0THIS IS THE PERSONAL WEBSITE OF SHOUHEI SHIRAFUJI / August 2026"
}

#publication4:after{
	font-size:17px;
	content:"Shouhei Shirafuji / Dexterous Motion Generated by Mechanisms in Humans and Robots\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0 7"
}

body>div[id^="page"] p{
	margin:0 0 0px;
	text-indent:1em;
	text-align:justify;
	font-size:16px;
	line-height:1.2
}

	
.bold{
	font-weight:700;
	margin-right:4px
}

/* publications */
body>div[id^="publication"]{
	font-size:12px;line-height:1.16
}
body>div[id^="publication"] h1{
	margin:0 0 10px;
	font-size:20px;
	line-height:1;
	font-weight:bold
}
	
body>div[id^="publication"] ol{
	list-style:none;
	padding:0;
	margin:0;
	width:auto!important;
	text-align:left!important
}

body>div[id^="publication"] li.j_type{
	margin:0 0 6px;
	font-size:17px;
	font-weight:bold;
	font-style:italic;
	line-height:1.8
}

body>div[id^="publication"] li.j_type>ol{
	font-size:16px;
	font-weight:normal;
	font-style:normal;
	line-height:1.17;
}

body>div[id^="publication"] li.j_type>ol>li{
	display: flex;
	margin:0 0 0px 1em;
	text-indent: -1em;
	line-height:1.2
}

@media(max-width:1060px){html{min-width:0}body{transform-origin:top left}}
@media print{html{background:#fff}body{margin:0}body>header,body>div[id^="page"],body>div[id^="publication"]{box-shadow:none;margin:0;page-break-after:always}}