@charset "UTF-8";
html{ overflow:auto; height: 100%; color:#000;background:#FFF}
html {font-size: 100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,figure,figcaption{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
abbr,acronym{border:0;font-variant:normal}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{font-size:100%}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section { display: block }
caption { text-align: left; }
img { vertical-align: top; }
main {display: block;overflow:hidden;/* for IE */}
li { list-style: none;  }
img { width: 100%; height: auto; }
/*==================================================
Body_Bace
==================================================*/
body {
/* 	overflow: hidden; */
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	font-size: 14px;
	line-height: 170%;
	color: #fff;
	letter-spacing: 0.03em;
	background: #ccc;
	font-family:'Hiragino Kaku Gothic ProN', Meiryo;
	word-wrap: break-word;
}
#frgppl {
	position: relative;
	z-index:21;
}
#contreadFixed .cont_inr,
#frgppl .cont_inr,
#frgppl .footer_inr {
	width: 75%;/* 480px */
	padding: 0 13.3%;
}
/*------ link ------*/
a , .a:hover {
	color: #333;
	text-decoration: none;
}
#wrapper{
}
/*------------------------------------
	BORDERS
------------------------------------*/
#border-top{
	background:#ffffff;
	z-index:3000;
	position:fixed;
	width:100%;
	height: 10px;
	left:0;
	right:0;
	top:0;
	margin: 0px;
}
#border-bottom{
	background:#ffffff;
	z-index:3000;
	position:fixed;
	width:100%;
	height: 10px;
	left:0;
	right:0;
	bottom:0;
	margin: 0px;
}
#border-left{
	background:#ffffff;
	z-index:3000;
	position:fixed;
	width: 10px;
	height:100%;
	top:0;
	bottom:0;
	left:0;
}
#border-right{
	background:#ffffff;
	z-index:3000;
	position:fixed;
	width: 10px;
	height:100%;
	top:0;
	right:0;
	bottom:0;
}
/*==================================================
#Header
==================================================*/
#frgppl #header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
}
#frgppl .header {
	padding-top: 9%;
}
#frgppl .header h1 {
	position: relative;
	width: 30.78%;
	float: left;
	padding: 0 0 0 12.5%;
	z-index: 100;
}
#frgppl .header .btn_open {
	position: relative;
	width: 6.1%;
	margin: 0 12.5% 0 0;
	float: right;
	z-index: 9991;
}
/* gnav */
#gnav {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	overflow: auto;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.9);
	z-index: 9991;
}
#gnav .gnav {
	position: relative;
	height: 100%;
	margin: 0 auto;
}
#gnav .btn_toTop {
	width: 30.8%;
	padding: 9% 0 0 12.4%;
}
#gnav ul {
	margin: 15.14% 0 36.43%;
	text-align: center;
}
#gnav ul li {
	text-align: center;
	margin: 0 auto 14.05%;
}
#gnav ul li.gnav01 { width: 18.125%; }
#gnav ul li.gnav02 { width: 70%; }
#gnav ul li.gnav03 { width: 48.91%; }
#gnav ul li.gnav04 { width: 32.5%; }
#gnav ul li.gnav05 { width: 27.66%; }
#gnav ul li.gnav06 { width: 26.09%; }
#gnav .btn_close {
	position: absolute;
	top: 6.5%;
	right: 13.5%;
	width: 4.69%;
}
	@media(min-width:1px) and (max-width:480px){
		#gnav .btn_close {
			top: 4%;
		}
	}
/*==================================================
#main
==================================================*/
/* txt */
.cont_inr .txt {
	font-size: 18px;
	line-height: 170%;
	padding-bottom: 1em
}
.cont_inr .txt em {
	text-decoration: underline;
	font-style: normal;
	font-weight: bold;
}
.cont_inr .txt a {
	color: #fff;
}
	@media(min-width:1px) and (max-width:480px){
		.cont_inr .txt {
			font-size: 14px;
			line-height: 170%;
		}
		.cont .cont_inr .txt {
			line-height: 200%;
		}
	}
	@media(min-width:1px) and (max-width:415px){
		.cont_inr .txt {
			font-size: 12px;
			line-height: 170%;
		}
		.cont .cont_inr .txt {
			line-height: 200%;
		}
	}
	@media(min-width:1px) and (max-width:360px){
		.cont_inr .txt {
			font-size: 11px;
			line-height: 170%;
		}
		.cont .cont_inr .txt {
			line-height: 200%;
		}
	}
/*==================================================
contIndex
==================================================*/
#headerWrap {
}
#contWrap {
}
#contIndex {
	position: relative;
	padding: 59% 0 15%;
}
#contIndex h1 {
	width: 68%;
	padding: 0 0 5%;
	margin: 0 auto;
	opacity:0;
	position:relative;
}
#contIndex h2 {
	width: 67.22%;
	margin: 0 auto;
	opacity:0;
	position:relative;
}


#contIndexFixed{
	position: fixed;
	padding: 59% 0 15%;
	z-index:6;
	top:0px;
	left:0px;
	display:none;

}
#contIndexFixed h1 {
	width: 68%;
	padding: 0 0 5%;
	margin: 0 auto;
	opacity:1;
	position:relative;
}
#contIndexFixed h2 {
	width: 67.22%;
	margin: 0 auto;
	opacity:1;
	position:relative;
}


#contIndex .btn_scroll {
	position: absolute;
	width: 13.3%;
	bottom: 0;
	left: 50%;
	margin-left: -6.65%;
}
/*contread*/
#contread {
	position: relative;
	padding: 51.5% 0 40%;
/*
	padding: 51.5% 0 77.4%;
*/
}
#contread .cont_inr{
	opacity:0;
	position:relative;
}
#contread h2 {
	padding: 0 0 8.5%;
	width: 99.17%;

}

#contreadFixed {
	position: fixed;
	padding: 51.5% 0 40%;
/*
	padding: 51.5% 0 77.4%;
*/
	z-index:15;
	top:0px;
	left:0px;
	display:none;
	z-index:7;
}
#contreadFixed .cont_inr{
	opacity:0;
	position:relative;
}
#contreadFixed h2 {
	padding: 0 0 8.5%;
	width: 99.17%;
}

#contread .btn_scroll {
	position: absolute;
	width: 13.3%;
	bottom: 0;
	left: 50%;
	margin-left: -6.65%;
	z-index: 110;
}
/*==================================================
cont01
==================================================*/
#cont01 {
	padding: 45.5% 0 0;
}
#cont01 h2 {
	padding: 0 0 8.5%;
	width: 97.08%;
	opacity:0;
	position:relative;
}
#cont01 p {
	opacity:0;
	position:relative;
}
/*==================================================
cont02
==================================================*/
#cont02 {
	padding: 25% 0 17.45%;
}
#cont02 h2 {
	padding: 0 0 8.5%;
	width: 84.58%;
	opacity:0;
	position:relative;
}
#cont02 p {
	opacity:0;
	position:relative;
}
/*==================================================
cont03
==================================================*/
#cont03 {
	background: #000;
	padding: 18.45% 0 29.38%;
}
#cont03 .mainimg {
	margin-bottom: 12.8%;
	position: relative;
	opacity:0;
}
#cont03 .mainimg::after {
	position: absolute;
	content: "";
	background: url(../img/cont03_cover.png) repeat;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
#cont03 h2 {
	padding: 0 0 8.5%;
	width: 98.33%;
	position: relative;
	opacity:0;
}
#cont03 p {
	position: relative;
	opacity:0;
}
#cont03 ul.cont03_slider {
	position: relative;
	opacity:0;
}
/* slider */
#cont03 ul.cont03_slider {
	position: relative;
	padding: 10.5% 0 25%;
}
/*
#cont03 ul.cont03_slider::after {
	position: absolute;
	content: "";
	background: url(../img/cont03_btn_pager.png) no-repeat;
	background-size: contain;
	width: 17.5%;
	height: 3.6%;
	top: 84%;
	left: 40%;
}
*/
#cont03 ul li {
	position: relative;
}
/*==================================================
cont04
==================================================*/
.cont04Wrap {
}
#cont04 {
	padding: 26.72% 0 8%;
}
#cont04 h2 {
	padding: 0 0 8.5%;
	width: 98.13%;
	position: relative;
	opacity:0;
}
#cont04 p{
	position: relative;
	opacity:0;
}
#cont04 p:last-of-type {
	padding-top: 6.3%;
}
/*==================================================
works01
==================================================*/
#works01 {
	padding: 24.6% 0 16.41%;
}
#works01 h2 {
	width: 69.4%;
	padding: 0 0 10%;
	margin: 0 auto;
	opacity:0;
	position:relative;
}
#works01 .btn li {
	padding-bottom: 4.6%;
	width: 100%;
	opacity:0;
	position:relative;
}
/*==================================================
works02
==================================================*/
#works02 {
	padding: 0 0 35.5%;
}
#works02 h2 {
	width: 69.6%;
	padding: 0 0 6.25%;
	margin: 0 auto;
	opacity:0;
	position:relative;
}
#works02 .slider{
	opacity:0;
	position:relative;
}
/* slider */
#works02 ul li img {
	width: 100%;
}
#works02 li.img01 img,
#works02 li.img02 img,
#works02 li.img03 img,
#works02 li.img04 img {
	padding: 7.1% 0 0;
}
#works02 li.img01 p img{
	width: 44.17%;
	padding-top: 6.25%
}
#works02 li.img02 p img{
	width: 80%;
	padding-top: 6.25%
}
#works02 li.img03 p img{
	width: 30%;
	padding-top: 6.25%
}
#works02 li.img04 p img{
	width: 20%;
	padding-top: 6.25%
}
#works02 li.img05 img{
	display: block;
	width: 42.3%;
	margin: 0 auto;
}
#works02 li.img05 p img{
	width: 68%;
	padding-top: 6.25%
}
#works02 ul.slider {
	position: relative;
}
#works02 ul.slider li a:before {
	position: absolute;
	content: "";
	background: url(../img/works02_icn_arrow.png) no-repeat;
	background-size: contain;
	width: 17.4%;
	height: 22.62%;
	top: 37%;
	left: 43%;
	z-index: 999;
}
#works02 ul.slider li.img05 a:before {
	background: none;
}
#works02 ul.slider li {
	position: relative;
}
/* project */
#project {
	padding: 29.7% 0 0;
}
#project h3 {
	width: 45.42%;
	margin: 0 auto 8.75%;
	opacity:0;
	position:relative;
}
#project h3:last-of-type {
	width: 23.7%;
	margin: 6.7% auto 8.75%;
}
#project ul li {
	padding-bottom: 4.25%;
	width: 100%;
	opacity:0;
	position:relative;
}
/*credit*/
#credit {
	padding: 32.84% 0 0;
}
#credit h2 {
	margin: 0 auto 10.3%;
}
#credit dl{
	opacity:0;
	position:relative;
}
#credit dl.txt01 dt img{
	display: block;
	width: 78.33%;
	margin: 0 auto;
	padding-bottom: 3.7%;
}
#credit dl.txt01 dd img{
	display: block;
	width: 40.83%;
	margin: 0 auto;
	padding-bottom: 12.4%;
}
#credit dl.txt02 dt img{
	display: block;
	width: 41.04%;
	margin: 0 auto;
	padding-bottom: 3.7%;
}
#credit dl.txt02 dd img{
	display: block;
	width: 24.38%;
	margin: 0 auto;
	padding-bottom: 3.7%;
}
#credit dl.txt02 dd a img{
	display: block;
	width: 47.5%;
	margin: 0 auto;
	padding-bottom: 0;
}
#credit .btn_sns {
	padding: 27.3% 0 0;
	opacity:0;
	position:relative;
}
#credit .btn_sns p {
	width: 16.25%;
	margin: 0 auto;
}
#credit .btn_sns ul {
	text-align: center;
	padding: 4% 0 0;
}
#credit .btn_sns li {
	display: inline-block;
	width: 14.8%;
	margin: 0 2.5%;
}
/*==================================================
pager
==================================================*/
.pager {
	position: fixed;
	top: 50%;
	right: 4.7%;
	margin-top: -95px;
}
.pager li a {
	display: block;
	width: 9px;
	height: 10px;
	content: "";
	margin: 10px 0;
	background: url(../img/icn_pager_off.png) no-repeat 0 0;
	background-size: contain;
}
.pager li a.current {
	background: url(../img/icn_pager_on.png) no-repeat 0 0;
	background-size: contain;
}
/*==================================================
Footer
==================================================*/
#footer {
	border-top: 1px solid #eee;
	color: #000;
	background: #eee url(../img/footer_bg.gif) no-repeat 0 bottom;
	background-size: contain;
	position:relative;
	z-index:5000;
}
#footer .pagetop {
	text-align: center;
	background: #fff;
}
#footer .pagetop a {
	display: block;
	padding: 7% 0;
}
#footer .pagetop img {
	width: 15.9%;
}
#footer .foot_bucknumber {
	overflow: hidden;
	padding: 13% 0 16.4%;
	background: #eee;
	position:relative;
	z-index:5000;
}
#footer .foot_bucknumber h2 {
	padding: 0 0 45px;
	font-size: 32px;
	text-align: center;
	letter-spacing: 0.1em;
	line-height: 115%;
	font-family: 'Roboto', sans-serif;
}
	@media(min-width:1px) and (max-width:480px){
		#footer .foot_bucknumber h2 {
			font-size: 24px;
			line-height: 115%;
		}
	}
#footer .foot_bucknumber .tmbWrap {
	width: 96%;
	margin: 0 0 0 0;
	padding: 0 3% 0 3%;
}
#footer .foot_bucknumber .tmbWrap li {
	width: 7.2% !important;
	margin: 0 6px;
}
#footer .foot_bucknumber .tmbWrap {
	position: relative;
	overflow: hidden;
}
#footer .foot_bucknumber .tmbWrap .bx-viewport {
	overflow: visible !important;
}
#footer .footer {
	padding: 20% 10% 5%;
	position:relative;
	z-index:5000;
}
#footer .footer h1 {
	width: 33.6%;
	float: left;
}
#footer .footer .footnav li a {
	font-family: 'Roboto', sans-serif;
}
#footer .footercopyright {
	width: 56.5%;
	float: right;
	padding: 5% 0 0;
}
#footer .footercopyright p {
	line-height: 100%;
}
#footer .footercopyright .name {
	width: 52%;
	margin: 0 0 4% auto;
}
/*==================================================
BACKGROUND IMAGE
==================================================*/
.cont_bg{
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
	background-size:100%;
	background-repeat:no-repeat;

}
.cont_bg .cont_bg_black{
	width:100%;
	height:100%;
	background-color:#000000;
	opacity:0;
}
#contIndex_bg{
	background-image: url(../img/contindex_bg.png);
	opacity:1;
	z-index:1;
}
#contIndex_bg_movie{
	opacity:1;
	background: url(../img/sp_loel_low.gif) no-repeat 0 0;
	background-size:cover;
	z-index:5;
}
#cont01_bg {
	background-image: url(../img/cont01_bg.jpg);
	opacity:0;
	z-index:10;
}
#cont02_bg{
	background-image: url(../img/cont02_bg.jpg);
	opacity:0;
	z-index:15;
}

#cont04_bg{
	background-image: url(../img/cont04_bg.jpg);
	opacity:0;
	z-index:20;
}
/*==================================================
SLICK THEME
==================================================*/
.slick-prev,
.slick-next {
	position: absolute;
	display: block;
	width: 4.17%;
	height: 20%;
	padding: 0;
	top: 42%;
   	 cursor: pointer;
   	 color: transparent;
   	border: none;
    	outline: none;
    	background-color: transparent;
	background-repeat:no-repeat;
	background-size: contain;
}
.slick-prev {
	background-image:url("../img/cont03_btn_pev.png");
	left: -9.5%;
}
.slick-next {
	background-image:url("../img/cont03_btn_next.png");
	right: -9.5%;
}
.slick-dotted.slick-slider {
}
.slick-dots {
    position: absolute;
    bottom: 18%;
    display: block;
    width: 100%;
	height:4%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
#works02 .slick-dots{
	bottom: -8%;
	height:5.5%;
}
.slick-dots li {
    position: relative;
    display: inline-block;
	width: 4%;
	height:100%;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}
#cont03 ul.cont03_slider .slick-dots li {
    margin: 5% 5px;
}
.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0px;
    cursor: pointer;/*
    color: transparent;
*/
    border: 0;
    outline: none;
    background-color: transparent;
	background-image:url("../img/cont03_btn_pager_off.png");
	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
}
.slick-dots li.slick-active button {
	background-image:url("../img/cont03_btn_pager_current.png");
}
/*==================================================
SLICK
==================================================*/
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus {
    outline: none;
}
.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}
.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after {
    display: table;
    content: '';
}
.slick-track:after {
    clear: both;
}
.slick-loading .slick-track {
    visibility: hidden;
}
.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide {
    float: right;
}
.slick-slide img {
    display: block;
}
.slick-slide.slick-loading img {
    display: none;
}
.slick-slide.dragging img {
    pointer-events: none;
}
.slick-initialized .slick-slide {
    display: block;
}
.slick-loading .slick-slide {
    visibility: hidden;
}
.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
/*==================================================
clearfix
==================================================*/
#frgppl .header:after,
#frgppl .cont_inr:after,
#footer .foot_bucknumber:after,
#footer .footer:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}