/* --------------------------------------------------
00: Reset Style
-------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h3, 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, menu, nav, section, summary,
time, mark, audio, video {	
	border: 0;
	font-size: 100%;
	font: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}


/* --------------------------------------------------
01: Basic Style
-------------------------------------------------- */

*,
*:before,
*:after {
	box-sizing: border-box;
}

html{
	font-size: 62.5%;
}

body {
	color: #000;
	font-family: "helvetica", sans-serif;
	font-size: 1.5rem;
	font-style: normal;
	font-weight: 200;
	line-height: 1.3;
    overflow-x: hidden;
    position: fixed;
	-webkit-text-size-adjust: 100%;	
}

p.pS {
	font-size: 1.25rem;
}


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

}

	a:hover {
		color: #1D2088;
	}

.hover {
	color: #1D2088 !important;
}

ul {
	list-style: none;
	text-align: right;
}

li {
	cursor: pointer;
}


@media only screen and (max-width: 812px) {

	body {
		font-size: 1.3rem;
	}

	p.pS {
		font-size: 1.05rem;
	}

}

img {
	max-width: 100%;
	height: auto;
}

/* Highlight Selection
-------------------------------------------------- */
/* Black */
/*::-moz-selection { background: rgba(0, 0, 0, 0.99); color: #fff; }
::selection { background: rgba(0, 0, 0, 0.99); color: #fff;}*/

/* Mamoru Blue */
::-moz-selection { background: rgba(29, 32, 136, 0.99); color: #fff; }
::selection { background: rgba(29, 32, 136, 0.99); color: #fff;}


/* Grey */
::-moz-selection { background: rgba(90, 90, 90, 0.99); color: #fff; }
::selection { background: rgba(90, 90, 90, 0.99); color: #fff; }



/* DarkGrey */
::-moz-selection { background: rgba(180, 180, 180, 0.99); color: #fff; }
::selection { background: rgba(180, 180, 180, 0.99); color: #fff; }


/* --------------------------------------------------
02: Common Styles
-------------------------------------------------- */

.hidden {
	display: none !important; 
}

 /* Scroll Bar
-------------------------------------------------- */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 1); }




/* --------------------------------------------------
03-1: Information Style
-------------------------------------------------- */

.info-item {
            display: grid;
            grid-template-columns: 100px 3fr 2fr 2fr;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #ddd;
        }

.info-image {
            width: 80px;
            height: 80px;
	    align-items: center;
            object-fit: cover;
            border-radius: 8px;
            margin-right: 10px;
        }
.year, .type {
            padding: 10px;
	    align-items: center;
            color: #555;
        }
.title {
            padding: 30px;
	    align-items: center;
        }
.title a {
            text-decoration: none;
            color: #000000;
            transition: color 0.3s;
        }
.title a:hover {
            color: #1D2088;;
        }



/* --------------------------------------------------
03: Wrapper & Inner Style
-------------------------------------------------- */


.wrapper {
	height: 100vh;
	overflow: hidden;
	padding: 140px 60px;
	/*padding: 137px 60px 140px;*/ /* -3px from top */
	position: absolute;
	width: 100vw;
}

	#header.wrapper {
		padding: 70px 60px;
	}

	#sec_about.wrapper {
		padding: 70px 60px 140px;
	}

.inner {
	height: 100%;
	position: relative;
}

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

@media only screen and (max-width: 812px) {

	.wrapper {
		padding: 55px 25px;
		/*padding: 52px 25px 55px;*/ /* -3px from top */
	}

		#header.wrapper {
			padding: 25px 25px;
		}

		#sec_about.wrapper {
			padding: 25px 25px 55px;
		}

}


/* --------------------------------------------------
04: Header Style
-------------------------------------------------- */

#header {
	position: absolute;
}

	#header .inner > * {
		cursor: pointer;
		margin: 0;
		position: absolute;
		z-index: 1000;
	}

#btn_title {
	left: 0;
	top: 0;
}

#btn_info {
	right: 0;
	top: 0;
}

#btn_about {
	bottom: 0;
	left: 0;
}

#btn_work {
	bottom: 0;
	right: 0;
}


/* --------------------------------------------------
05: Common Layout Style
-------------------------------------------------- */

section:not(#sec_main) .inner {
	overflow: auto;
}

#sec_main {
	z-index: 999;
}

.top_block {
	display: flex;
	-webkit-flex-direction: row-reverse;
 	flex-direction: row-reverse;
	height:100%;
	margin-bottom: 10px;
	position: absolute;
	width: 100%;

}
	
.top_block > * {
	width: 50% ;
}


.top_block_inner > * {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.top_block_inner.right > *{
	display: inline-block;
	position: absolute;
	right: 0;
	text-align: right;
	z-index: 999;
}

.proj_list_name_container li {
	float: right;
}

.top_block_inner.left > * {
	height: 100%;
	overflow: hidden;
	position: relative;
}

	.top_block_inner.left > * > * {
	  	position: relative;
	    width: 100%;
	}

.bottom_block {
	height: auto;
}

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

@media screen and (max-width: 812px) {

	.top_block {
		margin-bottom: 15px;
	}

}


/* --------------------------------------------------
06: Project Page Style
-------------------------------------------------- */

.block {
	/*bottom: -3px;*/ /* to account for strange 3px gap at bottom */
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
	height: 100%;
	/*margin-bottom: -3px;*/ /* to account for strange 3px gap at bottom */
	overflow-y: auto;
	overflow-x: hidden;
	position: absolute;
	width: 100%;
}

.block_inner {
	position: relative;
	width: 50%;
}

	.block_inner *:not(:last-child){
		margin-bottom: 40px;
	}

.block_inner.right > * {
	display: inline-block; 
	padding-left: 40px;
	position: relative;
	right: 0;
	text-align: right;
	width: 100%;
	z-index: 999;
}

	.block_inner.right > *:not(#btn_proj_close)  {
	    top: 50%;
	    -webkit-transform: translateY(-50%);
	    transform: translateY(-50%);
	}

.proj_img {
	line-height: 0;
}

#btn_proj_close {
	cursor: pointer;
    line-height: 0.85;
    position: absolute;
    right: 0;
    top: 3px;
    z-index: 1000;
}

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

@media screen and (max-width: 812px) {

	.block_inner *:not(:last-child){
		margin-bottom: 15px;
	}

	.block_inner.right > * {
		margin-top: 26px;
		padding-left: 15px;
	}

		.block_inner.right > *:not(#btn_proj_close)  {
		    top: 0;
		    -webkit-transform: none;
		    transform: none;
		}

	#btn_proj_close {
	    line-height: 0.9;
	}

}

@media screen and (max-width: 812px) 
and (orientation: portrait) {

	.block {
		display: block;
	}

	.block_inner {
		width: 100%;
	}

	.block_inner.right > *{
		margin-bottom: 15px;
		position: relative;
	}

}

 
/* --------------------------------------------------
07: About Style
-------------------------------------------------- */

#sec_about .inner {
	width: 50%;
}

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

@media only screen and (max-width: 812px)
and (orientation: portrait) {
	#sec_about .inner {
		width: 70%;
	}
}

 
/* --------------------------------------------------
08: Info Style
-------------------------------------------------- */

.info_text > *:first-child {
	margin-bottom: 20px;

}

.info_text > *:not(:first-child):not(:last-child) {
	margin-bottom: 8px;

}

.info_divider {
	background-color: grey;
	height: 1.5px;
}

.soon {
	position: absolute;
	top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    right: 0;
    text-align: center;
}

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

@media only screen and (max-width: 812px) {
	
	.info_text > *:first-child {
		margin-bottom: 10px;

	}

	.info_text > *:not(:first-child):not(:last-child) {
		margin-bottom: 5px;
	}

	#sec_info .block_inner {
		/*padding-right: 12px;*/ /*uncomment once more than one info entry*/
	}


}