*,
*:after,
*:before {
	box-sizing: inherit
}

html {
	box-sizing: border-box;
	font-size: 62.5%
}

body {
	display: flex;
	color: #323232;
	background-color: #fefefe;
	font-family: 'Segoe UI', 'Lato', Helvetica;
	font-size: 1.6em;
	font-weight: 400;
	letter-spacing: .0625em;
	line-height: 1.8em
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) {
	body {
		font-size: 1.4em;
		line-height: 1.6em
	}
}

a {
	font-weight: 700;
	color: #000;
	text-decoration: none
}

a:focus,
a:hover {
	text-decoration: underline
}

p {
	margin: 1.6rem 0 1.6rem 0
}

p a {
	font-weight: 400;
	color: #000;
	text-decoration: underline;
	text-underline-position: under
}

p a:focus,
p a:hover {
	color: #36c
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #000;
	letter-spacing: .0625em;
	margin: 3.2rem 0 1.6rem 0
}

h1 {
	font-size: 3.2rem;
	line-height: 3.2rem
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) {
	h1 {
		font-size: 2.8rem;
		line-height: 2.8rem
	}
}

h2 {
	font-size: 2.8rem;
	line-height: 2.8rem
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) {
	h2 {
		font-size: 2.4rem;
		line-height: 2.4rem
	}
}

h3 {
	font-size: 2.4rem;
	line-height: 2.4rem
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) {
	h3 {
		font-size: 2rem;
		line-height: 2rem
	}
}

h4 {
	font-size: 2.2rem;
	line-height: 2.2rem
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) {
	h4 {
		font-size: 1.8rem;
		line-height: 1.8rem
	}
}

h5 {
	font-size: 2rem;
	line-height: 2rem
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) {
	h5 {
		font-size: 1.6rem;
		line-height: 1.6rem
	}
}

h6 {
	font-size: 1.4rem;
	line-height: 1.4rem
}

pre {
	margin: 1.6rem 0 1rem 0;
	padding: 1.6rem;
	overflow-x: auto
}

code {
	display: inline-block;
	background-color: #000;
	color: #fefefe;
	padding: .4rem .8rem .4rem .8rem
}

blockquote {
	border-left: 2px solid #dcdcdc;
	padding-left: 1.6rem;
	font-style: italic
}

th,
td {
	padding: 1.6rem
}

table {
	border-collapse: collapse
}

table td,
table th {
	border: 2px solid #000
}

table tr:first-child th {
	border-top: 0
}

table tr:last-child td {
	border-bottom: 0
}

table tr td:first-child,
table tr th:first-child {
	border-left: 0
}

table tr td:last-child,
table tr th:last-child {
	border-right: 0
}

img {
	max-width: 100%
}

.wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	width: 100%
}

.container {
	margin: 0 auto;
	max-width: 120rem;
	width: 100%;
	padding-left: 2rem;
	padding-right: 2rem
}

.navigation {
	height: 6rem;
	width: 100%;
}

.navigation a {
	display: inline;
	font-size: 1.6rem;
	line-height: 6rem;
	letter-spacing: .1rem
}

@media only screen and (min-device-width:320px) and (max-device-width:768px) {
	.navigation a {
		font-size: 1.6rem
	}
}

.navigation ul {
	list-style: none;
	margin-bottom: 0;
	margin-top: 0
}

.navigation ul li {
	float: left;
	margin: 0;
	position: relative
}

.navigation ul li a {
	margin-left: 1rem;
	margin-right: 1rem
}

@media only screen and (min-device-width:320px) and (max-device-width:768px) {
	.navigation ul li {
		float: none !important
	}
}

@media only screen and (min-device-width:320px) and (max-device-width:768px) {
	.navigation ul {
		visibility: hidden;
		opacity: 0;
		max-height: 0;
		z-index: 5;
		top: 5rem;
		right: 0;
		width: 100%;
		position: absolute;
		background-color: rgba(254, 254, 254, 0.98);
		padding: 0;
		border-bottom: solid 2px #e2dfe1;
		transition: opacity .25s, max-height .15s linear
	}
}

#menu-control {
	display: none
}

.btn-mobile {
	display: none
}

@media only screen and (min-device-width:320px) and (max-device-width:768px) {
	.btn-mobile {
		display: block;
		font-size: 2rem;
		color: black;
		cursor: pointer;
		margin-top: 1.5rem
	}
	#menu-control:checked+label .btn-mobile {
		color: #e2dfe1
	}
	#menu-control:checked+label ul {
		visibility: visible;
		opacity: 1;
		max-height: 100rem
	}
	.navigation-item {
		position: relative
	}
	.mobile-menu-lang-separator-centered {
		padding-left: 7rem;
		padding-right: 7rem
	}
	.mobile-menu-lang-separator-full {
		padding-left: 1.5rem;
		padding-right: 1.5rem
	}
	.multilingual-separator {
		display: none
	}
	.align-left {
		text-align: left;
		padding-left: 1rem
	}
	.align-right {
		text-align: right;
		padding-right: 1rem
	}
	.align-center {
		text-align: center
	}
}

.content {
	flex: 1;
	margin-top: 1.6rem;
	margin-bottom: 3.2rem
}

.content article header {
	margin-top: 3.2rem;
	margin-bottom: 3.2rem
}

.content article header h1,
.content article header h2 {
	margin: 0
}

.content article header h2 {
	margin-top: 1rem;
	font-size: 1.8rem;
	color: #323232
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) {
	.content article header h2 {
		font-size: 1.6rem
	}
}

.avatar img {
	width: 20rem;
	height: auto;
	border-radius: 50%
}

@media only screen and (max-device-width:768px) {
	.avatar img {
		width: 10rem
	}
}

.list ul {
	margin: 3.2rem 0 3.2rem 0;
	list-style: none;
	padding: 0
}

.list ul li {
	font-size: 1.6rem
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) {
	.list ul li {
		font-size: 1.4rem;
		margin: 1.6rem 0 1.6rem 0
	}
}

.list ul li span {
	display: inline-block;
	text-align: right;
	width: 20rem;
	margin-right: 3rem
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) {
	.list ul li span {
		display: block;
		text-align: left
	}
}


.pagination {
	margin-top: 6rem;
	text-align: center
}

.pagination li {
	display: inline;
	text-align: center
}

.pagination li span {
	margin: 0;
	text-align: center;
	width: 3.2rem
}

.pagination li a span {
	margin: 0;
	text-align: center;
	width: 3.2rem
}

.centered {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center
}

.centered .about {
	text-align: center
}

.centered .about h1 {
	margin-top: 2rem;
	margin-bottom: .5rem
}

.centered .about h2 {
	margin-top: 1rem;
	margin-bottom: .5rem;
	font-size: 2.4rem
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) {
	.centered .about h2 {
		font-size: 2rem
	}
}

.centered .about ul {
	list-style: none;
	margin: 3rem 0 1rem 0;
	padding: 0
}

.centered .about ul li {
	display: inline-block;
	position: relative
}

.centered .about ul li a {
	margin-left: 1rem;
	margin-right: 1rem;
	font-size: 1.6rem
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) {
	.centered .about ul li a {
		font-size: 1.4rem
	}
}

.centered .error {
	text-align: center
}

.centered .error h1 {
	margin-top: 2rem;
	margin-bottom: .5rem;
	font-size: 4.6rem
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) {
	.centered .error h1 {
		font-size: 3.2rem
	}
}

.centered .error h2 {
	margin-top: 2rem;
	margin-bottom: 3.2rem;
	font-size: 3.2rem
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) {
	.centered .error h2 {
		font-size: 2.8rem
	}
}

.footer {
	width: 100%;
	text-align: center;
	line-height: 2rem;
	margin-bottom: 1rem;
}

.float-right {
	float: right
}

.float-left {
	float: left
}

.title {
	font-weight: bold
}

a {
	position: relative;
	transition: .5s
}

@media (pointer: fine) {
a:before,
a:after {
	position: absolute;
	bottom: -2px;
	content: "";
	display: inline-block;
	width: 0;
	height: 2px;
	background: #9f7fe9;
	transition: .5s
}
}

a:before {
	left: 50%
}

a:after {
	right: 50%
}

a:hover {
	text-decoration: none;
	color: #585858;
}

@media (pointer: fine) {
a:hover:before,
a:hover:after {
	width: 50%;
}
}

.private {
	display: none
}

.private-inner {
	display: table-cell
}

.portfolio .portfolio-inner {
	display: flex;
	align-items: stretch;
}

.portfolio .portfolio-inner .portfolio-image {
	display: flex;
	align-items: center;
	margin-right: 5%;
	width: 45%;
}

.portfolio .portfolio-inner .portfolio-content {
	flex: 1
}

#privateTrigger {
	cursor: pointer
}

#privateTrigger:hover:before,
#privateTrigger:hover:after {
	width: 0
}

.navigation {
	height: auto;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.08);
	border-bottom: 1px solid rgba(0, 0, 0, 0.15)
}

.fixed-bar {
	position: fixed;
	bottom: 0;
	margin: 0;
	height: 65px;
	width: 100%;
	border-top: 1px solid rgba(0, 0, 0, 0.05);
	background: #fefefe
}

.fixed-bar .container {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: 65px
}

code {
	background: #364549 !important
}

.sns-shares {
	display: flex;
	align-items: center;
	justify-content: space-around;
	position: absolute;
	right: 0
}

.sns-shares .sns-share {
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: 56px;
	width: 56px;
	text-decoration: none
}

.sns-shares .sns-share:hover:before,
.sns-shares .sns-share:hover:after {
	width: 0
}

.sns-shares .twitter-share .fa-twitter {
	font-size: 24px
}

.sns-shares .fb-share .fa-facebook-f {
	font-size: 24px
}

.sns-shares .hatena-share .fa-bookmark {
	font-size: 24px
}

.sns-shares .line-share .fa-line {
	font-size: 30px
}

.sp-sns-shares {
	display: none
}

@media(max-width:920px) {
	.pc-sns-shares {
		display: none
	}
	.sp-sns-shares {
		display: flex;
		position: relative;
		justify-content: space-around;
		width: 100%
	}
	.portfolio .portfolio-inner {
		display: block;
	}
	.portfolio .portfolio-inner .portfolio-image {
		width: 100%
	}
}

.chroma {
	color: #e3e3e3;
	background-color: #364549
}

.chroma .err {
	color: #ddd;
	border-bottom: 2px dotted #c01b1b
}

.chroma .lntd {
	vertical-align: top;
	padding: 0;
	margin: 0;
	border: 0
}

.chroma .lntable {
	border-spacing: 0;
	padding: 0;
	margin: 0;
	border: 0;
	width: auto;
	overflow: auto;
	display: block
}

.chroma .hl {
	display: block;
	width: 100%;
	background-color: #ffc
}

.chroma .lnt {
	margin-right: .4em;
	padding: 0 .4em 0 .4em
}

.chroma .ln {
	margin-right: .4em;
	padding: 0 .4em 0 .4em
}

.chroma .k {
	color: #ebd247
}

.chroma .kc {
	color: #ebd247
}

.chroma .kd {
	color: #ebd247
}

.chroma .kn {
	color: #ff8095
}

.chroma .kp {
	color: #ebd247
}

.chroma .kr {
	color: #ebd247
}

.chroma .kt {
	color: #ebd247
}

.chroma .na {
	color: #8bdf4c
}

.chroma .nc {
	color: #8bdf4c
}

.chroma .no {
	color: #ebd247
}

.chroma .nd {
	color: #8bdf4c
}

.chroma .ne {
	color: #8bdf4c
}

.chroma .nf {
	color: #8bdf4c
}

.chroma .nx {
	color: #8bdf4c
}

.chroma .nt {
	color: #ff8095
}

.chroma .l {
	color: #a980f5
}

.chroma .ld {
	color: #41b7d7
}

.chroma .s {
	color: #41b7d7
}

.chroma .sa {
	color: #41b7d7
}

.chroma .sb {
	color: #41b7d7
}

.chroma .sc {
	color: #41b7d7
}

.chroma .dl {
	color: #41b7d7
}

.chroma .sd {
	color: #41b7d7
}

.chroma .s2 {
	color: #41b7d7
}

.chroma .se {
	color: #a980f5
}

.chroma .sh {
	color: #41b7d7
}

.chroma .si {
	color: #41b7d7
}

.chroma .sx {
	color: #41b7d7
}

.chroma .sr {
	color: #41b7d7
}

.chroma .s1 {
	color: #41b7d7
}

.chroma .ss {
	color: #41b7d7
}

.chroma .m {
	color: #a980f5
}

.chroma .mb {
	color: #a980f5
}

.chroma .mf {
	color: #a980f5
}

.chroma .mh {
	color: #a980f5
}

.chroma .mi {
	color: #a980f5
}

.chroma .il {
	color: #a980f5
}

.chroma .mo {
	color: #a980f5
}

.chroma .o {
	color: #ff8095
}

.chroma .ow {
	color: #ff8095
}

.chroma .c {
	color: #9dabae
}

.chroma .ch {
	color: #9dabae
}

.chroma .cm {
	color: #9dabae
}

.chroma .c1 {
	color: #9dabae
}

.chroma .cs {
	color: #9dabae
}

.chroma .cp {
	color: #9dabae
}

.chroma .cpf {
	color: #9dabae
}

.chroma .gd {
	color: #ff8095
}

.chroma .ge {
	font-style: italic
}

.chroma .gi {
	color: #8bdf4c
}

.chroma .gs {
	font-weight: bold
}

.chroma .gu {
	color: #9dabae
}

img[src$='#center']
{
    display: block;
    margin: 0.7rem auto; /* you can replace the vertical '0.7rem' by
                            whatever floats your boat, but keep the
                            horizontal 'auto' for this to work */
    /* whatever else styles you fancy here */
}

img[src$='#floatleft']
{
    float:left;
    margin: 0.7rem;      /* this margin is totally up to you */
    /* whatever else styles you fancy here */
}

img[src$='#floatright']
{
    float:right;
    margin: 0.7rem;      /* this margin is totally up to you */
    /* whatever else styles you fancy here */
}


.portfolio-image {
	width: 100%;
	margin: 0;
    overflow: hidden;
	background: #fff;
}

.portfolio-image img {
    opacity: 1;
	width: 100%;
	transition: transform 0.5s, opacity 0.5s;
}

.portfolio-image img:hover {
    opacity: 0.5;
}

.portfolio-image a:before,
.portfolio-image a:after {
    display: none;
}

.about-section-wrapper {
	display: flex;
	align-items: stretch
}

.about-image {
	display: flex;
	align-items: center;
	margin-right: 5%;
	width: 45%
}

.about-text {
	flex: 1
}

@media(max-width:920px) {
	.about-section-wrapper {
		display: block
	}
	.about-image {
		width: 100%
	}
}