/*
Theme Name: Hakushi
Version: 1.0
Author:  FujinoTakuya
*/

/*site-coloring style area =========================================================*/
body{
	color:#0045E4;
	background: #fff;
}

a{
	color: #22e;
}

a>img{
	background:transparent;
}

a:hover{
	color: #fff;
}

a:hover img{
	transition: opacity 0.3s linear;
	opacity:0.8;
}

a.no-hover:hover img{
	background:#fff;
	opacity:1;
}


/* header-tag =================================================================*/
h1.site-title{/* Website header */

}

h1{

}

h2{

}

h3{

}

h4{

}


/* header style area ==========================================================*/
header{
	width: 100%;
}


/*content style area ==========================================================*/
#content-wrapper{
	width: 100%;
	min-height:100%;
}

/* entrance-area style area ====================================================*/
.entrance-area{
	width: 100%;
	height:100%;
}

#animation_container{
	overflow: hidden;
	height:66% !important;
}

#canvas{
	width:100% !important;
	height:100% !important;
}

.entrance-content{
	display: -webkit-flex;
	display: flex;
	-webkit-align-items:center;
	align-items: center;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	width: 100%;
	height: 34%;
}

.entrance-content p{
	width: 33%;
	text-align: center;
}


/* main-content style area ====================================================*/
#main-content{
	position: relative;	
	max-width: 100%;
}

#main-content>div{

}

#main-content>div p{

}

.page-content{
	position: relative;
	min-height:100%;
	margin-left:60px;
}

/* project slider style area ====================================================*/
#project{
	user-select: none;
}
.project-list-large{
	position: relative;
	height:100%;
}

.project-list-large>li{
	display: none;
	-webkit-align-items:center;
	align-items:center;
	position: absolute;
	top: 25%;
	width:35%;
	height:50%;
	-webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	cursor: pointer;
}

.project-list-large>li.active{
	display: flex;
	top:0;
	left:15%;
	width: 70%;
	height:100%;
	z-index:100;
}

.project-list-large>li.prev{
	display: flex;
	left:-20%;
}

.project-list-large>li.next{
	display: flex;
	left:85%;
}


.project-list-large .project-image{
	border-radius: 50%;
	width: 100%;
	height:100%;
	margin: 0 auto;
	background-position: center center;
	background-size: cover;
	-webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.project-list-large>li dl{
	display: none;
	position: absolute;
	left: -5%;
	bottom:80px;
	width: 400px;
	text-align: center;
	font-family:"Oswald","游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	font-size: 1.5em;
	text-indent:0.2ex;
	letter-spacing:0.2ex;
}

.project-list-large>li.active dl{
	display:block;
}

.project-list-large>li dl dt .category{
	display: block;
	margin-bottom: 10px;
}

.project-list-large>li dl dt .project-name{
	display: inline-block;
	padding-bottom: 10px;
	border-bottom: 2px solid #0045E4;
	margin-bottom: 22px;
	font-weight: bold;
	font-size: 1.5em;
}

.project-list-large>li dl dd{
	line-height: 1.7
}

.project-list-large>li dl dd span{
	display: inline-block;
}


.project-view-switcher{
	position: absolute;
	right: 10px;
	bottom: 15px;
	text-align: center;
	font-size: 0.8em;
}

.project-view-switcher>p,
.project-view-switcher li{
	margin-top: 15px;
}

.switch-button{
	cursor: pointer;
}

.switch-button li{
	background-repeat: no-repeat;
	background-position: top center;
}

.switch-button img{
	transition:all 0.5s ease-in-out;
}

.switch-button .switch-active img{
	opacity:0;
}


.project-navigation{
	position: absolute;
	top:50%;
	margin-top: -20px;
	z-index:200;
}

.prev-arrow{
	left: 20px;
}
.next-arrow{
	right: 20px;
}

/* project small style area ====================================================*/
.home .project-small-area{
	display: none;
}

.project-list-small{
	position: absolute;
	top: 0;
	left: -60px;
	width:90%;
	padding: 3% 10%;
}

.project-list-small>li{
	float: left;
	margin-bottom: 1em;
	width: 33%;
	text-align: center;
	cursor: pointer;
}

.project-small-image{
	margin-bottom: 1em;
	border-radius: 50%;
	margin:0 auto 1em;
	width:80%;
	background-repeat:no-repeat;
	background-size:cover;
	background-position: center center;
}

.project-small-image:before{
	content:' ';
}

.project-list-small>li dl{
	font-size: 0.9em;
	font-family:"Oswald","游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	text-indent:0.2ex;
	letter-spacing: 0.2ex;
}

.project-list-small>li dl dt .category{
	display: block;
	margin-bottom: 10px;
}

.project-list-small>li dl dt .project-name{
	display: inline-block;
	padding-bottom: 10px;
	border-bottom: 2px solid #0045E4;
	margin-bottom: 22px;
	font-weight: bold;
	font-size: 1.5em;
}

.project-list-small>li dl dd{
	line-height: 1.7
}


/* page 
====================================================*/
#content-wrapper.page-wrapper{

}

h2.page-title{

}

.page-content{

}

/* about style area ====================================================*/
.about .page-wrapper{
	min-height:100%;
}

.about-page{
}

.about-page .title-area{
	position: absolute;
	top: 6vh;
	left: 0;
	width: 100%;
	text-align: center;
}

@media screen and (min-width: 1500px){/* 大きい画面 ==*/
	.about-page .title-area{
		top: 9vh;
	}
}

.about-page .about-page-title{
	display: inline-block;
	top: 0;
	font-size: 2vw;
	padding-bottom: 10px;
	border-bottom: 2px solid #0045E4;
	text-indent:0.2ex;
	letter-spacing: 0.2ex;
	line-height: 1.5;
}

.about-page .page-content{
	-webkit-background-size: contain;
	background-size: contain;
	background-repeat: no-repeat;
}

.tategaki-area{
	overflow: auto;
	position: absolute;
	padding: 15px 0;
	top: 30%;
	right:15%;
	width: 75%;
	height:50%;
	-ms-writing-mode: tb-rl;
	writing-mode:vertical-rl;
	line-height: 1.7;
}

.message-area{
	overflow: hidden;
}

.tategaki-area p{
	margin-left: 1.5em;
}

.tategaki-area .second-title{
	font-size: 1.3em;
	padding:1px;
	margin:-2px 0 0 0;
	margin-left: 1.5em;
	font-weight: bold;
}

.message-area .second-title:last-child{
	margin-left: 0;
}

.tategaki-area .second-title>span{
	display: inline-block;
	padding:5px 1px;
}

.message-area{
	height:100%;
	background:
		url('/wp-content/uploads/bg_about01.png') top left,
		url('/wp-content/uploads/bg_about02.png') bottom left;
}

.message-area .message-title{
	opacity:0;
}

.message-area .second-title>span{
	color:#fff;
	background: #0044E3;
}

.message-content{
	display:inline;
	position:absolute;
	top:65%;
	left:50%;
	right: auto;
	width: auto;
	height:auto;
	padding: 0;
	transform:translate(-50%, -50%);
}

.message-content .second-title{
	height:600px
}

.history-area{
	background:
		url('/wp-content/uploads/bg_about03.png') top left,
		url('/wp-content/uploads/bg_about04.png') bottom left;
	background-color: #0500D0;
}

.history-title{
	position: absolute;
	top: 15%;
	width: 100%;
	text-align: center;
	color:#fff;
	font-size: 1.5em;
	font-weight: bold;
}

.history-area .tategaki-area{
	top: 20%;
	height:60%;
	color:#fff;
}

.history-area .second-title>span{
	color:#0500D0;
	background: #fff;
}

.company-content{
	color:#fff;
}

.company-area{
	height:100%;
	background:
		url('/wp-content/uploads/bg_about05.png') top left,
		url('/wp-content/uploads/bg_about06.png') bottom left;
	background-color: #000;
}

.company-title{
	position: absolute;
	top: 15%;
	width: 100%;
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
}

.company-area .tategaki-area{
	top: 30%;
	right:20%;
	height:60%;
	width:60%;
}



/*	single
 ====================================================*/
.sub_title{
	margin-top: 150px;
	text-align: center;
	font-weight: bold;
	font-size: 1.2em;
	text-indent:0.2ex;
	letter-spacing: 0.2ex;
}

/* project detail style area ====================================================*/
.project-detail{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-left: 60px;
}

.project-detail-text{
	margin: 30px auto;
	min-width:300px;
	max-width:600px;
	line-height: 1.7;
	font-size: 0.9em;
}

.project-name-area{
	margin: 30px 0;
}

.project-name-area dl{
	bottom:80px;
	text-align: center;
	font-family:"Oswald","游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	text-align: center;
	text-indent:0.2ex;
	letter-spacing: 0.2ex;
}

.project-name-area.active dl{
	display:block;
}

.project-name-area dl dt .category{
	display: block;
	margin-bottom: 10px;
}

.project-name-area dl dt .project-name{
	display: inline-block;
	padding-bottom: 10px;
	border-bottom: 2px solid #0045E4;
	margin-bottom: 22px;
	font-weight: bold;
	font-size: 2em;
}

.project-name-area dl dd{
	line-height: 1.7
}

.project-website{
	text-align: center;
}

.project-website>li{
	display: inline-block;
	position: relative;
	margin: 0 20px;
	width: 240px;
	text-align: center;
	color: #fff;
	text-indent: 0,2ex;
	letter-spacing: 0.2ex;
	font-size: 1.2em;
}

.project-website a{
	display: block;
	padding: 35px 0;
	color: #fff;
	border: 1px solid #0045E4;
	background-color: #0045E4;
	text-decoration: none;
}

.project-website>li:hover a{
	color: #0045E4;
	background: #fff;
}

.project-website span{
	display: block;
	position: absolute;
	top: 50%;
	margin-top: -0.6em;
	right:20px;
	font-size: 1.5em;
}

.project-website>li:hover span{
	color: #0045E4;
}

.other-project-area{
	position: relative;
	width: 100%;
}

.other-project-area .project-list-small{
	overflow: hidden;
	position: relative;
	left: 0;
	width:90%;
	padding: 3% 5%;
}

/* archive */
h2.archive-title{

}

.archive-post{

}

h3.archive-post-title{

}

.archive-timestamp{

}

.archive-author{

}

.archive-text{

}

.single-nav .archive-footer{

}

.single-nav .archive-nav{

}


/* side-bar style area =======================================================*/
#sidebar{
	overflow: hidden;
	position: fixed;
	top: 0;
	left:-60px;
	box-sizing: border-box;
	padding: 15px 10px;
	height:100%;
	width: 60px;
	background: #0045E4;
	z-index:1000;
	-webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

#sidebar.sidebar-display{
	left: 0;
}

#sidebar.sidebar-active{
	left:0;
	width: 350px;
}

.sidebar-active .sidebar-logo-text img{
	transform-origin:32px 32px;
	transform:rotate(-90deg);
	margin-top: -32px;
}

.sidebar-logo-image{
	margin-bottom: 15px;
}

.sidebar-open{
	position: absolute;
	top: 30%;
}

.sidebar-menu,
.sns-list{
	margin-left: 1ex;
}

.sidebar-menu li{
	font-size: 1.7em;
	margin-bottom: 1.7em;
	text-indent:0.5ex;
	letter-spacing: 0.5ex;
}

.sidebar-menu a{
	color:#fff;
	text-decoration: none;;
}

.sidebar-menu-icon-area{
	position: absolute;
	bottom: 15px;
}

.sidebar-open{
	display: none;
}

.sidebar-active .sidebar-open{
	display: block;
}

.sns-list{
	overflow: hidden;
	width: 100%;
}

.sns-list li{
	display: inline-block;
	margin:50px 40px 0 0;
	font-size: 2.5em;
}

.sns-list li a{
	color:#fff;
}


.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  width: 40px;
  height: 30px;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 13px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
.menu-trigger.active {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(13px) rotate(-45deg);
  transform: translateY(13px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  -webkit-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
}
.menu-trigger.active span:nth-of-type(3) {
  opacity: 0;
}

/* footer style area
	一番下固定がデフォルト
	.footer-spzcing の padding-bottom に footer の height を指定
==========================================================================*/

footer{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	left: 0;
	padding: 50px 0;
	width: 100%;
	text-align: center;
}

footer .sns-list{
	margin: 0;
}

footer .sns-list li{
	color:#0045E4;
	margin: 50px 20px;
}

footer .sns-list li a{
	color:#0045E4;
}

footer .copy-right{
	padding-left: 60px;
}

@media screen and (max-width: 1000px){/* タブレット=== =========================*/

}

@media screen and (max-width: 760px){ /* スマホ横画面 =========================*/

}

@media screen and (max-width: 480px){/* スマホ縦画面 =========================*/

}