@charset "utf-8";

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



@common



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

html,body{

	font-size:13px;

	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "sans-serif";

	font-weight:500;

	letter-spacing:1px;

    word-break: break-all;

    word-wrap: break-word;

	background: #fafafa;

	

	/*文字のアンチエイリアス設定*/

	-webkit-font-smoothing: antialiased;

	-moz-osx-font-smoothing: grayscale;/*Firefox*/

	position:relative;

	

	font-feature-settings: "palt";

	

	/*文字間詰め*/

	/*font-feature-settings : "palt";*/

}



img {

	-ms-interpolation-mode: bicubic;

	vertical-align:baseline;

}



#wrapper{

	width:100%;

	min-width:1024px;

}



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



@drawer



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

#drawerBtn{

	width:60px;

	height:60px;

	background:#fff;

	border-radius:30px;

	overflow:hidden;

	position:fixed;

	z-index:10000;

	top:20px;

	left:20px;

	cursor:pointer;

}



.drawerBtnInner{

	position:absolute;

	width:30px;

	height:22px;

	top:19px;

	left:15px;

}



.drawerLine{

	width:30px;

	height:2px;

	background:#000;

	position:absolute;

	z-index:1;

	-webkit-transition: all 0.4s ease;

	transition: all 0.4s ease;

    transform: rotate(0deg);

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

}



#drawerBtn:hover .drawerBtnInner .drawerLine:nth-child(1){

	-webkit-transition: all 0.2s ease;

	transition: all 0.2s ease;



	transform:translate(0px,-2px);

	-webkit-transform:translate(0px,-2px);

	-moz-transform:translate(0px,-2px);

}



#drawerBtn:hover .drawerBtnInner .drawerLine:nth-child(3){

	-webkit-transition: all 0.2s ease;

	transition: all 0.2s ease;



	transform:translate(0px,2px);

	-webkit-transform:translate(0px,2px);

	-moz-transform:translate(0px,2px);

}





.drawerLine:nth-child(1){

	top:0px;

	left:0px;

}



.drawerLine:nth-child(2){

	top:8px;

	left:0px;

}



.drawerLine:nth-child(3){

	top:16px;

	left:0px;

}





/***************************************************



 drawer-btn-animation

 

***************************************************/

#drawerBtn.open .drawerBtnInner .drawerLine:nth-child(1){

	transform:rotate(405deg) translate(5px,5px);

	-webkit-transform:rotate(405deg) translate(5px,5px);

	-moz-transform:rotate(405deg) translate(5px,5px);

}



#drawerBtn.open .drawerBtnInner .drawerLine:nth-child(2){

    -moz-opacity:0;

    -webkit-opacity: 0;

    opacity:0;

}



#drawerBtn.open .drawerBtnInner .drawerLine:nth-child(3){

	transform:rotate(-405deg) translate(6px,-6px);

	-webkit-transform:rotate(-405deg) translate(6px,-6px);

	-moz-transform:rotate(-405deg) translate(6px,-6px);

}







.drawerName{

	position: absolute;

    text-align: center;

    color: #000;

    top: 23px;

    left: 2px;

    font-family: 'PT Mono', monospace;

    font-size: 10px;

}



#drawerNaviContainer{

    width: 100%;

    height: 100%;

    position: fixed;

    z-index: 9999;

    top: 0px;

    left: 0px;

    right: 0px;

    bottom: 0px;

    display: none;

    overflow: hidden;

}



#drawerNaviContainerInner{

    background: #fff;

    overflow: hidden;

    position: relative;

    top: 0px;

    left: 0px;

    right: 0px;

    bottom: 0px;

    height: 100%;

}



.drawerNavi{

    width: 320px;

    position: absolute;

    font-size: 14px;

    font-weight: bold;

    text-align: center;

    top: 0px;

    left: calc((50vw - 320px)/2);

    bottom: 0px;

    margin: auto;

    display: table;

}



.drawerNavi ul li{

	padding:0 0 80px 0;

}



.drawerNavi ul li p{

	cursor:pointer;

}





.drawerBg{

	position:absolute;

	z-index:0;

	top:0px;

	left:50%;

	width:0%;

	height:100%;

	overflow:hidden;

}



.drawerBg img{

	position:absolute;

}





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



@navi



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



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

@preloader

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

#preloader {

	width:100%;

	height:100%;

	background:#fff;

	position: fixed;

	top: 0px;

	left: 0px;

	z-index:100001;

}



#preloaderInner{

	width:420px;

	height:200px;

	position:absolute;

	z-index:1;

	top:50%;

	left:50%;

	margin-top: -100px;

    margin-left: -210px;

}



.preloaderAnime{

	position:absolute;

	z-index:1;

	top:140px;

	left:50%;

	margin-left:-10px;

}



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



@footer



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

#footer{

	width:100%;

	background:#fff;

	padding:50px 0 0 0;

}



.footerInner{

	width:980px;

	margin:0 auto;

}



.footerNavi{

    padding: 0 0 50px 0;

}



.footerNavi ul{

	display:-webkit-flex;

	display:flex;

	font-size:14px;

	font-weight:bold;

}



.footerNavi ul li{

    padding: 40px 20px 0px 20px;

    line-height: 1em;

}

.footerNavi ul li:nth-child(1){

	padding:0 100px 0 0;

}



.footerNavi.pocket ul li:nth-child(1){

	padding:0 217px 0 0;

}



.footerNavi ul li:last-child {

    padding: 40px 0 0px 20px;

}



.footerNavi ul li p{

	cursor:pointer;

	color: #999999;

	-webkit-transition: all 0.2s ease;

	transition: all 0.2s ease;

}



.footerNavi ul li p:hover{

	opacity:0.6;

}



.heBanner{

	display:inline-block;

	-webkit-transition: all 0.2s ease;

	transition: all 0.2s ease;

}



.heBanner:hover{

	opacity:0.6;

}



.archiveNavi{

	display:-webkit-flex;

	display:flex;

	padding:40px 0;

}



.archiveBox{

	width:320px;

	height:160px;

	overflow:hidden;

	position:relative;

	cursor:pointer;

}



.archiveBox:nth-child(1),.archiveBox:nth-child(2){

	margin:0 10px 0 0;

}



.archiveBoxOverlay{

	position:absolute;

	z-index:1;

	top:0px;

	left:0px;

	background:url(../img/common/overlay.png) repeat rgba(0,0,0,0.10);

	opacity:0;

	display:block;

	-webkit-transition: all 0.2s ease;

	transition: all 0.2s ease;

}



.archiveBoxImg{

	display:block;

	-webkit-transition: all 0.2s ease;

	transition: all 0.2s ease;

}



.archiveBox:hover .archiveBoxOverlay{

	opacity:1;

}



.archiveBox:hover .archiveBoxImg{

	transform:scale(1.1);

}



.cc{

	text-align:center;

	padding:20px 0;

	font-size:10px;

	color:#000;

	font-size:10px;

	font-family: 'PT Mono', monospace;

	letter-spacing:2px;

}



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



@banner



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

#banner-container{

}





#banner-container li{

}











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



@SNS



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

#socialContainer{

	display: flex;

	flex-wrap: wrap;

	display: -webkit-flex; /* Safari */

	-webkit-flex-wrap: wrap; /* Safari */

	-webkit-justify-content: center; /* Safari */

	justify-content:         center;

	margin:0 auto;

	padding:20px 0 40px 0;

}



#socialContainer li{

	display:block;

	height:20px;

	padding:0px 5px;

}



#twitter{

}



#facebook-like{



}



#line-btn{

	width:82px;

}



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



@flex



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

.flex{

	display: flex;

	flex-wrap: wrap;

	display: -webkit-flex; /* Safari */

	-webkit-flex-wrap: wrap; /* Safari */

}



.flex-center{

  -webkit-justify-content: center; /* Safari */

  justify-content:         center;

}



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



@modules



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

a{

	text-decoration:none;

}



a:hover{

}







.inner{

}







::selection {

    background:#8fc31f; /* Safari */

}

::-moz-selection {

    background:#8fc31f; /* Firefox */

}







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



@jscrollPane



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

.jspVerticalBar{

	position: absolute;

	top: 0;

	right: 0;

	width: 6px;

	height: 100%;

	z-index:1000;

	background-color: #fafafa;

}



.jspTrack{

	background: url(../img/common/scrollBg.png) repeat-y;

	position: relative;

}



.jspDrag{

	background: #000;

	position: relative;

	top: 0;

	left: 0;

	cursor: pointer;

}