@charset "utf-8";

/* PAGER --------------------------------------------- */

#base .pager{
	display:table;
	margin:auto;
	position:relative;
}

#base .pager ul{
	display:table;
}

#base .pager ul li{
	display:table-cell;
	padding:12px;
}

#base .pager ul li .btn{
	background: rgba(255,255,255,1.0);
	overflow: hidden;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	width:6px;
	height:6px;
}

#base .pager .slct{
	position:absolute;
	left:7px;
	top:7px;
	overflow: hidden;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	
	width:16px;
	height:16px;
	
	box-sizing: border-box;
	border:solid 1px rgba(255,255,255,0.6);
	
	-webkit-transition: left .3s cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition: left .3s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: left .3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@media all and (max-width: 767px){
#base .pager ul li{
	padding:12px;
	
	padding:7px;
}

#base .pager ul li .btn{
	width:6px;
	height:6px;
	
	width:5px;
	height:5px;
}

#base .pager .slct{
	left:7px;
	top:7px;
	
	width:16px;
	height:16px;
	
	left:2px;
	top:2px;
	
	width:15px;
	height:15px;
}
}

/* HOME --------------------------------------------- */

#base .home{
	width: 100%;
}

#base .home .secbg{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow:hidden;
	background:#666666;
}

#base .home .secbg ul li:nth-child(n+2){
	display:none;
}

#base .home .secbg ul li .pc_only,
#base .home .secbg ul li .sp_only{
	position: absolute;
	left:-30px;
	top:-30px;
	width:calc(100% + 60px);
	height:calc(100% + 60px);
	/*background: url(../img/fv.png) no-repeat 50% 50%;
	background-size: cover;*/
	filter: blur(20px);
	opacity:0.85;
}

#base .home .secont{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height:calc(100% - 166px);
	overflow:hidden;
}

#base .home .secont .thum{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:40px;
	bottom:24px;
	margin:auto;
	overflow:hidden;
	background:#333333;
}

#base .home .secont .thum ul{
	position:absolute;
	left:0;
	top:0;
	
	-webkit-transition: left .5s cubic-bezier(0.76, 0, 0.24, 1);
	-o-transition: left .5s cubic-bezier(0.76, 0, 0.24, 1);
	transition: left .5s cubic-bezier(0.76, 0, 0.24, 1);
}

#base .home .secont .thum ul li{
	position:absolute;
	top:0;
}
/*#base .home .secont .thum ul li:nth-child(1){ left:0; }
#base .home .secont .thum ul li:nth-child(2){ left:100px; }
#base .home .secont .thum ul li:nth-child(3){ left:200px; }
#base .home .secont .thum ul li:nth-child(4){ left:300px; }
#base .home .secont .thum ul li:nth-child(5){ left:400px; }
#base .home .secont .thum ul li:nth-child(6){ left:500px; }
#base .home .secont .thum ul li:nth-child(7){ left:600px; }
#base .home .secont .thum ul li:nth-child(8){ left:700px; }
#base .home .secont .thum ul li:nth-child(9){ left:800px; }
#base .home .secont .thum ul li:nth-child(10){ left:900px; }*/

#base .home .secont .thum ul li img{
	position:absolute;
	left:0;
	top:0;
}

#base .home .secont .thum ul li a img{
	-webkit-transition:filter .3s;
	-o-transition:filter .3s;
	transition:filter .3s;
}
#base.hvr_on .home .secont .thum ul li a:hover img{
	filter:brightness(60%);
}

#base .home .secont .arrow .lft,
#base .home .secont .arrow .rgh{
	position:absolute;
	top:0;
	bottom:0;
	margin:auto;
	
	width:45px;
	height:32px;
	
	cursor:pointer;
}
#base .home .secont .arrow .lft{
	left:25px;
}
#base .home .secont .arrow .rgh{
	right:25px;
}

#base .home .secont .arrow img{
	position:relative;
	width:45px;
	height:32px;
	
}
#base .home .secont .arrow .lft img{
	left:0;
	-webkit-transition: left .2s cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition: left .2s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: left .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#base .home .secont .arrow .rgh img{
	right:0;
	-webkit-transition: right .2s cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition: right .2s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: right .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#base.hvr_on .home .secont .arrow .lft:hover img{
	left:-15px;
}
#base.hvr_on .home .secont .arrow .rgh:hover img{
	right:-15px;
}

#base .home .secont .pgr{
	position:absolute;
	left:0;
	bottom:28px;
	
	width:100%;
	height:30px;
}

@media all and (max-width: 767px){
#base .home .secont{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height:calc(100% - 166px);
	overflow:hidden;
	
	
	height:calc(100% - 94px);
}

#base .home .secont .thum{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:40px;
	bottom:24px;
	margin:auto;
	overflow:hidden;
	
	
	bottom:50px;
}

#base .home .secont .thum ul{
	position:absolute;
	left:0;
	top:0;
	
	-webkit-transition: left .5s cubic-bezier(0.76, 0, 0.24, 1);
	-o-transition: left .5s cubic-bezier(0.76, 0, 0.24, 1);
	transition: left .5s cubic-bezier(0.76, 0, 0.24, 1);
}

#base .home .secont .thum ul li{
	position:absolute;
	top:0;
}

#base .home .secont .thum ul li img{
	position:absolute;
	left:0;
	top:0;
}

#base .home .secont .arrow .lft,
#base .home .secont .arrow .rgh{
	position:absolute;
	top:0;
	bottom:0;
	margin:auto;
	
	width:45px;
	height:32px;
	
	
	top:calc(80vw + 44px);
	bottom:0;
	width:34px;
	height:24px;
}
#base .home .secont .arrow .lft{
	left:25px;
	left:15px;
}
#base .home .secont .arrow .rgh{
	right:25px;
	right:15px;
}

#base .home .secont .arrow img{
	width:45px;
	height:32px;
	
	
	width:34px;
	height:24px;
	
}
#base .home .secont .arrow .lft img{
	left:0;
	-webkit-transition: left .2s cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition: left .2s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: left .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#base .home .secont .arrow .rgh img{
	right:0;
	-webkit-transition: right .2s cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition: right .2s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: right .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#base.hvr_on .home .secont .arrow .lft:hover img{
	left:-15px;
}
#base.hvr_on .home .secont .arrow .rgh:hover img{
	right:-15px;
}

#base .home .secont .pgr{
	position:absolute;
	left:0;
	bottom:28px;
	
	width:100%;
	height:30px;
	
	top:calc(80vw + 44px);
	bottom:0;
	margin:auto;
	height:19px;
}

}

/* OBI --------------------------------------------- */

#base .obi{
	background:#383838;
}

#base .obi .sub{
	height:100px;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
}

#base .obi_about .sub{
	background:url(../img/obi_about.svg) 0 0;
	background-size:359px 100px;
	animation-name:obi_about_anime;
	animation-duration:3.59s;
}

#base .obi_project .sub{
	background:url(../img/obi_project.svg) 0 0;
	background-size:473px 100px;
	animation-name:obi_project_anime;
	animation-duration:4.73s;
}

#base .obi_media .sub{
	background:url(../img/obi_media.svg) 0 0;
	background-size:326px 100px;
	animation-name:obi_media_anime;
	animation-duration:3.26s;
}

#base .obi_web .sub{
	background:url(../img/obi_web.svg) 0 0;
	background-size:216px 100px;
	animation-name:obi_web_anime;
	animation-duration:2.16s;
}

#base .obi_product .sub{
	background:url(../img/obi_product.svg) 0 0;
	background-size:485px 100px;
	animation-name:obi_product_anime;
	animation-duration:4.85s;
}

@keyframes obi_about_anime {
0%   { background-position:0 0; }
100% { background-position:-359px 0; }
}

@keyframes obi_project_anime {
0%   { background-position:0 0; }
100% { background-position:-473px 0; }
}

@keyframes obi_media_anime {
0%   { background-position:0 0; }
100% { background-position:-326px 0; }
}

@keyframes obi_web_anime {
0%   { background-position:0 0; }
100% { background-position:-216px 0; }
}

@keyframes obi_product_anime {
0%   { background-position:0 0; }
100% { background-position:-485px 0; }
}

@media all and (max-width: 767px){
#base .obi .sub{
	height:70px;
}

#base .obi_about .sub{
	background:url(../img/obi_about.svg) 0 0;
	background-size:251px 70px;
	animation-name:obi_about_anime_sp;
	animation-duration:2.51s;
}

#base .obi_project .sub{
	background:url(../img/obi_project.svg) 0 0;
	background-size:331px 70px;
	animation-name:obi_project_anime_sp;
	animation-duration:3.31s;
}

#base .obi_media .sub{
	background:url(../img/obi_media.svg) 0 0;
	background-size:228px 70px;
	animation-name:obi_media_anime_sp;
	animation-duration:2.28s;
}

#base .obi_web .sub{
	background:url(../img/obi_web.svg) 0 0;
	background-size:151px 70px;
	animation-name:obi_web_anime_sp;
	animation-duration:1.51s;
}

#base .obi_product .sub{
	background:url(../img/obi_product.svg) 0 0;
	background-size:340px 70px;
	animation-name:obi_product_anime_sp;
	animation-duration:3.40s;
}
}

@keyframes obi_about_anime_sp {
0%   { background-position:0 0; }
100% { background-position:-251px 0; }
}

@keyframes obi_project_anime_sp {
0%   { background-position:0 0; }
100% { background-position:-331px 0; }
}

@keyframes obi_media_anime_sp {
0%   { background-position:0 0; }
100% { background-position:-228px 0; }
}

@keyframes obi_web_anime_sp {
0%   { background-position:0 0; }
100% { background-position:-151px 0; }
}

@keyframes obi_product_anime_sp {
0%   { background-position:0 0; }
100% { background-position:-340px 0; }
}

/* コンテンツタイトル --------------------------------------------- */

#base .sec .sec_hdr{
	width:93%;
	margin:auto;
}

#base .sec .sec_hdr .sub{
	display:table;
	border-bottom:solid 6px #383838;
	width:100%;
}

#base .sec .sec_hdr .sub .en{
	display:table-cell;
	vertical-align:bottom;
	text-align:left;
	
	font-family:'Poppins', sans-serif;
	font-weight:900;
	color:#383838;
	font-size:4.0em;
	letter-spacing:0.02em;
	line-height:1.0;
	padding-bottom:15px;
}

#base .sec .sec_hdr .sub .ja{
	display:table-cell;
	vertical-align:bottom;
	text-align:right;
}

#base .sec .sec_hdr .sub .ja img{
	width:auto;
	height:21px;
	padding-bottom:20px;
}

@media all and (max-width: 767px){
#base .sec .sec_hdr{
	width:calc(100% - 40px);
}

#base .sec .sec_hdr .sub{
	border-bottom:solid 4px #383838;
}

#base .sec .sec_hdr .sub .en{
	font-size:2.7em;
	padding-bottom:10px;
}

#base .sec .sec_hdr .sub .ja img{
	height:14px;
	padding-bottom:14px;
}
}

/* ABOUT --------------------------------------------- */

#base .about{
	padding:150px 0;
}

#base .about .cont{
	width:93%;
	margin:auto;
}

#base .about .cont .freaksvillage{
	margin-top:70px;
}

#base .about .cont .freaksvillage img{
	width:100%;
	height:auto;
}

#base .about .cont .subcont{
	position:relative;
	margin-top:70px;
	
	box-sizing: border-box;
	border-top:solid 1px #383838;
	border-bottom:solid 1px #383838;
}

#base .about .cont .subcont .subsubcont{
	width:calc(100% - 30px);
	margin:0 auto;
}

#base .about .cont .subcont .subsubcont .subsubsubcont{
	display:table;
	margin:60px auto;
}

#base .about .cont .subcont .subsubcont .subsubsubcont .ttl{
	display:table-cell;
	vertical-align:top;
	padding-top:14px;
	/*padding-right:70px;*/
	text-align:center;
	position:relative;
}

#base .about .cont .subcont .subsubcont .subsubsubcont .ttl img{
	width:18.75vw;
	height:auto;
}

#base .about .cont .subcont .subsubcont .subsubsubcont .txt{
	display:table-cell;
	vertical-align:top;
	/*padding-left:70px;*/
	/*width:68.5%;*/
	
	font-weight:700;
	font-size:1.9em;
	line-height:2.5;
	letter-spacing:0.02em;
	color:#383838;
	
	border-left:solid 1px #383838;
}

#base .about .cont .subcont .subsubcont .subsubsubcont .txt .subtxt{
	display:table;
	margin:0 auto;
	position:relative;
}

#base .about .cont .subcont .subsubcont .subsubsubcont .txt p{
	padding-top:28px;
}
#base .about .cont .subcont .subsubcont .subsubsubcont .txt p:nth-child(1){
	padding-top:0;
}

#base .about .cont .subcont .bdr{
	position:absolute;
	top:0;
	width:3px;
	height:100%;
	overflow:hidden;
	background:#383838;
}
#base .about .cont .subcont .bdr1{ left:0; }
#base .about .cont .subcont .bdr2{ left:6px; }
#base .about .cont .subcont .bdr3{ left:12px; }
#base .about .cont .subcont .bdr4{ right:0; }
#base .about .cont .subcont .bdr5{ right:6px; }
#base .about .cont .subcont .bdr6{ right:12px; }

@media all and (max-width: 767px){
#base .about{
	padding:55px 0 60px;
}

#base .about .cont{
	width:calc(100% - 40px);
}

#base .about .cont .freaksvillage{
	margin-top:70px;
	margin-top:35px;
}

#base .about .cont .subcont{
	margin-top:70px;
	margin-top:36px;
}

#base .about .cont .subcont .subsubcont{
	width:calc(100% - 20px);
}

#base .about .cont .subcont .subsubcont .subsubsubcont{
	margin:60px auto;
	margin:35px auto;
}

#base .about .cont .subcont .subsubcont .subsubsubcont .ttl{
	display:table-cell;
	vertical-align:top;
	padding-top:14px;
	/*padding-right:70px;*/
	text-align:center;
	position:relative;
	
	display:block;
	padding-top:3px;
	position:static;
}

#base .about .cont .subcont .subsubcont .subsubsubcont .ttl img{
	width:18.75vw;
	height:auto;
	
	width:56.5vw;
}

#base .about .cont .subcont .subsubcont .subsubsubcont .txt{
	display:table-cell;
	vertical-align:top;
	/*padding-left:70px;*/
	/*width:68.5%;*/
	
	font-weight:700;
	font-size:1.9em;
	line-height:2.5;
	letter-spacing:0.02em;
	color:#383838;
	
	border-left:solid 1px #383838;
	
	display:block;
	border-left:none;
	font-size:1.5em;
	line-height:2.25;
	text-align:center;
	padding-top:27px;
}

#base .about .cont .subcont .subsubcont .subsubsubcont .txt .subtxt{
	display:table;
	margin:0 auto;
	position:relative;
	position:static;
}

#base .about .cont .subcont .subsubcont .subsubsubcont .txt p{
	padding-top:28px;
	padding-top:15px;
}
#base .about .cont .subcont .subsubcont .subsubsubcont .txt p:nth-child(1){
	padding-top:0;
}

#base .about .cont .subcont .bdr{
	width:2px;
}
#base .about .cont .subcont .bdr1{ left:0; }
#base .about .cont .subcont .bdr2{ left:4px; }
#base .about .cont .subcont .bdr3{ left:8px; }
#base .about .cont .subcont .bdr4{ right:0; }
#base .about .cont .subcont .bdr5{ right:4px; }
#base .about .cont .subcont .bdr6{ right:8px; }
}

/* PROJECT --------------------------------------------- */

#base .project{
	padding:150px 0;
}

#base .project .cont{
	width:93%;
	margin:auto;
	
	box-sizing: border-box;
	border-bottom:solid 6px #383838;
}

#base .project .cont .subcont{
	display:table;
	width:100%;
	border-top:solid 1px #383838;
}
#base .project .cont .subcont:nth-child(1){
	border-top:none;
}

#base .project .cont .subcont .subcont1{
	display:table-cell;
	/*width:18.5%;*/
	vertical-align:middle;
	position:relative;
}

#base .project .cont .subcont .subcont1 .txt1{
	font-family:'Poppins', sans-serif;
	font-weight:800;
	color:#383838;
	font-size:2.2em;
	letter-spacing:0.02em;
	line-height:1.0;
}

#base .project .cont .subcont .subcont1 .txt2{
	font-weight:400;
	color:#383838;
	font-size:1.6em;
	letter-spacing:0.02em;
	line-height:2.0;
	padding-right:45px;
	padding-top:15px;
}

#base .project .cont .subcont .subcont1 .bdr{
	position:absolute;
	right:0;
	top:20px;
	width:1px;
	height:calc(100% - 40px);
	overflow:hidden;
	background:#383838;
}

#base .project .cont .subcont .subcont2{
	display:table-cell;
	vertical-align:top;
	/*width:auto;*/
}

#base .project .cont .subcont .subcont2 .msk{
	position:relative;
	overflow:hidden;
	width:calc(100% - 50px);
	/*height:calc(16vw + 50px);*/
	margin-left:auto;
}

#base .project .cont .subcont .subcont2 .msk .thumall{
	position:absolute;
	left:0;
	top:0;
}

#base .project .cont .subcont .subcont2 .msk .thumall ul{
	position:absolute;
	left:0;
	top:0;
	display:table;
}

#base .project .cont .subcont .subcont2 .msk .thumall ul li{
	display:table-cell;
	vertical-align:top;
	position:relative;
	padding-top:50px;
	padding-right:40px;
}

#base .project .cont .subcont .subcont2 .msk .thumall ul li img{
	/*width:16vw;*/
	height:auto;
}

#base .project .cont .subcont .subcont2 .msk .thumall ul li .btn{
	position:relative;
	display:table;
	background:#fff;
}

#base .project .cont .subcont .subcont2 .msk .thumall ul li .btn img{
	-webkit-transition:filter .3s;
	-o-transition:filter .3s;
	transition:filter .3s;
}
#base.hvr_on .project .cont .subcont .subcont2 .msk .thumall ul li .btn:hover img{
	filter:brightness(60%);
}

#base .project .cont .subcont .subcont2 .msk .thumall ul li .btn .icn{
	position:absolute;
	right:0;
	bottom:0;
	width:30px;
	height:30px;
	background:#383838;
	pointer-events:none;
	
}

#base .project .cont .subcont .subcont2 .msk .thumall ul li .btn .icn img{
	width:30px !important;
	height:30px !important;
}

#base .project .cont .subcont .subcont2 .pgr{
	width:calc(100% - 50px);
	margin-left:auto;
	padding:30px 0;
	position:relative;
}

#base .project .cont .subcont .subcont2 .pgr .pager{
}

#base .project .cont .subcont .subcont2 .pgr .pager ul{
}

#base .project .cont .subcont .subcont2 .pgr .pager ul li{
}

#base .project .cont .subcont .subcont2 .pgr .pager ul li .btn{
	background:rgba(56,56,56,1.0);
}

#base .project .cont .subcont .subcont2 .pgr .pager .slct{
	border:solid 1px rgba(56,56,56,0.6);
}

#base .project .cont .subcont .subcont2 .pgr .arrow .lft,
#base .project .cont .subcont .subcont2 .pgr .arrow .rgh{
	position:absolute;
	top:0;
	bottom:0;
	margin:auto;
	
	width:45px;
	height:32px;
	
	width:37px;
	height:26px;
	
	cursor:pointer;
}
#base .project .cont .subcont .subcont2 .pgr .arrow .lft{
	left:0;
}
#base .project .cont .subcont .subcont2 .pgr .arrow .rgh{
	right:0;
}

#base .project .cont .subcont .subcont2 .pgr .arrow img{
	position:relative;
	width:45px;
	height:32px;
	
	width:37px;
	height:26px;
	
}
#base .project .cont .subcont .subcont2 .pgr .arrow .lft img{
	left:0;
	-webkit-transition: left .2s cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition: left .2s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: left .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#base .project .cont .subcont .subcont2 .pgr .arrow .rgh img{
	right:0;
	-webkit-transition: right .2s cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition: right .2s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: right .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#base.hvr_on .project .cont .subcont .subcont2 .pgr .arrow .lft:hover img{
	left:-10px;
}
#base.hvr_on .project .cont .subcont .subcont2 .pgr .arrow .rgh:hover img{
	right:-10px;
}

@media all and (max-width: 767px){
#base .project{
	padding:55px 0 60px;
}

#base .project .cont{
	width:calc(100% - 40px);
	border-bottom:solid 4px #383838;
}

#base .project .cont .subcont .subcont1{
	display:table-cell;
	/*width:18.5%;*/
	vertical-align:middle;
	position:relative;
	
	display:block;
	padding-top:28px;
}

#base .project .cont .subcont .subcont1 .txt1{
	font-family:'Poppins', sans-serif;
	font-weight:800;
	color:#383838;
	font-size:2.2em;
	letter-spacing:0.02em;
	line-height:1.0;
	
	font-size:2.0em;
}

#base .project .cont .subcont .subcont1 .txt2{
	font-weight:400;
	color:#383838;
	font-size:1.6em;
	letter-spacing:0.02em;
	line-height:2.0;
	padding-right:45px;
	padding-top:15px;
	
	
	font-size:1.4em;
	padding-right:0;
	padding-top:7px;
	padding-bottom:16px;
}

#base .project .cont .subcont .subcont1 .bdr{
	display:none;
}

#base .project .cont .subcont .subcont2{
	display:table-cell;
	vertical-align:top;
	/*width:auto;*/
	
	display:block;
}

#base .project .cont .subcont .subcont2 .msk{
	position:relative;
	overflow:hidden;
	width:calc(100% - 50px);
	/*height:calc(16vw + 50px);*/
	margin-left:auto;
	
	
	margin-left:0;
	width:calc(100% + 20px);
}

#base .project .cont .subcont .subcont2 .msk .thumall{
	position:absolute;
	left:0;
	top:0;
}

#base .project .cont .subcont .subcont2 .msk .thumall ul{
	position:absolute;
	left:0;
	top:0;
	display:table;
}

#base .project .cont .subcont .subcont2 .msk .thumall ul li{
	display:table-cell;
	vertical-align:top;
	position:relative;
	padding-top:50px;
	padding-right:40px;
	
	padding-top:0;
	padding-right:20px;
}

#base .project .cont .subcont .subcont2 .msk .thumall ul li img{
	/*width:16vw;*/
	height:auto;
}

#base .project .cont .subcont .subcont2 .msk .thumall ul li .btn{
	position:relative;
	display:table;
}

#base .project .cont .subcont .subcont2 .msk .thumall ul li .btn .icn{
	position:absolute;
	right:0;
	bottom:0;
	width:30px;
	height:30px;
	background:#383838;
	pointer-events:none;
	
	width:26px;
	height:26px;
}

#base .project .cont .subcont .subcont2 .msk .thumall ul li .btn .icn img{
	width:30px !important;
	height:30px !important;
	
	width:26px !important;
	height:26px !important;
}

#base .project .cont .subcont .subcont2 .pgr{
	width:calc(100% - 50px);
	margin-left:auto;
	padding:30px 0;
	position:relative;
	
	
	width:100%;
	padding:25px 0;
}

#base .project .cont .subcont .subcont2 .pgr .pager{
}

#base .project .cont .subcont .subcont2 .pgr .pager ul{
}

#base .project .cont .subcont .subcont2 .pgr .pager ul li{
}

#base .project .cont .subcont .subcont2 .pgr .pager ul li .btn{
	background:rgba(56,56,56,1.0);
}

#base .project .cont .subcont .subcont2 .pgr .pager .slct{
	border:solid 1px rgba(56,56,56,0.6);
}

#base .project .cont .subcont .subcont2 .pgr .arrow .lft,
#base .project .cont .subcont .subcont2 .pgr .arrow .rgh{
	position:absolute;
	top:0;
	bottom:0;
	margin:auto;
	
	width:45px;
	height:32px;
	
	width:37px;
	height:26px;
	
	width:34px;
	height:24px;
}
#base .project .cont .subcont .subcont2 .pgr .arrow .lft{
	left:0;
}
#base .project .cont .subcont .subcont2 .pgr .arrow .rgh{
	right:0;
}

#base .project .cont .subcont .subcont2 .pgr .arrow img{
	position:relative;
	width:45px;
	height:32px;
	
	width:37px;
	height:26px;
	
	width:34px;
	height:24px;
	
}
#base .project .cont .subcont .subcont2 .pgr .arrow .lft img{
	left:0;
	-webkit-transition: left .2s cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition: left .2s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: left .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#base .project .cont .subcont .subcont2 .pgr .arrow .rgh img{
	right:0;
	-webkit-transition: right .2s cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition: right .2s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: right .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

}

/* MEDIA --------------------------------------------- */

#base .media{
	padding:150px 0;
}

#base .media .cont{
	position:relative;
	margin-top:45px;
	/*width:93%;
	margin:auto;
	
	box-sizing: border-box;
	border-bottom:solid 6px #383838;*/
}

#base .media .cont img{
	/*width:100%;
	height:auto;*/
}

#base .media .cont .subcont .subsubcont{
	position:relative;
	width:100%;
	height:auto;
	overflow:hidden;
	/*width:93%;
	margin:auto;
	
	box-sizing: border-box;
	border-bottom:solid 6px #383838;*/
}

#base .media .cont .subcont .subsubcont .area img{
	width:100%;
	height:auto;
}

#base .media .cont .subcont .subsubcont ul{
}

#base .media .cont .subcont .subsubcont ul li{
	position:absolute;
	top:50%;
	display:none;
	background:#FF0000;
	
	-webkit-transition: left 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), z-index 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition: left 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), z-index 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: left 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), z-index 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#base .media .cont .subcont .subsubcont ul li img{
	position:absolute;
	width:424px;
	height:600px;
	left:-212px;
	top:-300px;
	cursor:pointer;
	
	-webkit-transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#base .media .cont .subcont .subsubcont ul li img{
	-webkit-transition:filter .3s;
	-o-transition:filter .3s;
	transition:filter .3s;
}
#base.hvr_on .media .cont .subcont .subsubcont ul li img:hover{
	filter:brightness(60%);
}

#base .media .cont .subcont .subsubcont ul li.ctr{
	display:block;
	left:50%;
	z-index:10;
}
#base .media .cont .subcont .subsubcont ul li.ctr img{
	transform: scale(1.0);
}

#base .media .cont .subcont .subsubcont ul li.rgh1{
	display:block;
	left:70.4166666%;
	z-index:9;
}
#base .media .cont .subcont .subsubcont ul li.rgh1 img{
	transform: scale(0.8);
}

#base .media .cont .subcont .subsubcont ul li.rgh2{
	display:block;
	left:86.8055555%;
	z-index:8;
}
#base .media .cont .subcont .subsubcont ul li.rgh2 img{
	transform: scale(0.64);
}

#base .media .cont .subcont .subsubcont ul li.rgh3{
	display:block;
	left:100%;
	z-index:7;
}
#base .media .cont .subcont .subsubcont ul li.rgh3 img{
	transform: scale(0.512);
}

#base .media .cont .subcont .subsubcont ul li.rgh4{
	display:block;
	left:110.4166666%;
	z-index:6;
}
#base .media .cont .subcont .subsubcont ul li.rgh4 img{
	transform: scale(0.4096);
}


#base .media .cont .subcont .subsubcont ul li.lft1{
	display:block;
	left:29.5833333%;
	z-index:9;
}
#base .media .cont .subcont .subsubcont ul li.lft1 img{
	transform: scale(0.8);
}

#base .media .cont .subcont .subsubcont ul li.lft2{
	display:block;
	left:13.1944444%;
	z-index:8;
}
#base .media .cont .subcont .subsubcont ul li.lft2 img{
	transform: scale(0.64);
}

#base .media .cont .subcont .subsubcont ul li.lft3{
	display:block;
	left:0%;
	z-index:7;
}
#base .media .cont .subcont .subsubcont ul li.lft3 img{
	transform: scale(0.512);
}

#base .media .cont .subcont .subsubcont ul li.lft4{
	display:block;
	left:-10.4166666%;
	z-index:6;
}
#base .media .cont .subcont .subsubcont ul li.lft4 img{
	transform: scale(0.4096);
}

#base .media .cont .txt{
	position:absolute;
	left:3.5%;
	top:-5px;
	
	font-family:'Poppins', sans-serif;
	font-weight:800;
	color:#FFFFFF;
	font-size:2.4em;
	letter-spacing:0.02em;
	line-height:0.8;
	background:#383838;
}

#base .media .cont .pgr{
	width:93%;
	margin:auto;
	box-sizing: border-box;
	border-bottom:solid 6px #383838;
	padding:30px 0;
	position:relative;
}

#base .media .cont .pgr .pager{
}

#base .media .cont .pgr .pager ul{
}

#base .media .cont .pgr .pager ul li{
}

#base .media .cont .pgr .pager ul li .btn{
	background:rgba(56,56,56,1.0);
}

#base .media .cont .pgr .pager .slct{
	border:solid 1px rgba(56,56,56,0.6);
}

#base .media .cont .pgr .arrow .lft,
#base .media .cont .pgr .arrow .rgh{
	position:absolute;
	top:0;
	bottom:0;
	margin:auto;
	
	width:45px;
	height:32px;
	
	cursor:pointer;
}
#base .media .cont .pgr .arrow .lft{
	left:0;
}
#base .media .cont .pgr .arrow .rgh{
	right:0;
}

#base .media .cont .pgr .arrow img{
	position:relative;
	width:45px;
	height:32px;
	
}
#base .media .cont .pgr .arrow .lft img{
	left:0;
	-webkit-transition: left .2s cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition: left .2s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: left .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#base .media .cont .pgr .arrow .rgh img{
	right:0;
	-webkit-transition: right .2s cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition: right .2s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: right .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#base.hvr_on .media .cont .pgr .arrow .lft:hover img{
	left:-15px;
}
#base.hvr_on .media .cont .pgr .arrow .rgh:hover img{
	right:-15px;
}

@media all and (max-width: 767px){

#base .media{
	padding:55px 0 60px;
}

#base .media .cont{
	position:relative;
	margin-top:45px;
	
	margin-top:55px;
}

#base .media .cont .subcont{
	position:relative;
	width:100%;
	height:auto;
	overflow:hidden;
}

#base .media .cont .subcont .subsubcont{
	position:relative;
	width:220%;
	height:auto;
	overflow:hidden;
}

#base .media .cont .subcont .subsubcont .area img{
	width:100%;
	height:auto;
}

#base .media .cont .subcont .subsubcont ul{
}

#base .media .cont .subcont .subsubcont ul li{
	position:absolute;
	top:50%;
	display:none;
	
	-webkit-transition: left 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), z-index 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition: left 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), z-index 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: left 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), z-index 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#base .media .cont .subcont .subsubcont ul li img{
	position:absolute;
	width:424px;
	height:600px;
	left:-212px;
	top:-300px;
	cursor:pointer;
	
	-webkit-transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#base .media .cont .subcont .subsubcont ul li.ctr{
	display:block;
	left:50%;
	z-index:10;
}
#base .media .cont .subcont .subsubcont ul li.ctr img{
	transform: scale(1.0);
}

#base .media .cont .subcont .subsubcont ul li.rgh1{
	display:block;
	left:70.4166666%;
	z-index:9;
}
#base .media .cont .subcont .subsubcont ul li.rgh1 img{
	transform: scale(0.8);
}

#base .media .cont .subcont .subsubcont ul li.rgh2{
	display:block;
	left:86.8055555%;
	z-index:8;
}
#base .media .cont .subcont .subsubcont ul li.rgh2 img{
	transform: scale(0.64);
}

#base .media .cont .subcont .subsubcont ul li.rgh3{
	display:block;
	left:100%;
	z-index:7;
}
#base .media .cont .subcont .subsubcont ul li.rgh3 img{
	transform: scale(0.512);
}

#base .media .cont .subcont .subsubcont ul li.rgh4{
	display:block;
	left:110.4166666%;
	z-index:6;
}
#base .media .cont .subcont .subsubcont ul li.rgh4 img{
	transform: scale(0.4096);
}


#base .media .cont .subcont .subsubcont ul li.lft1{
	display:block;
	left:29.5833333%;
	z-index:9;
}
#base .media .cont .subcont .subsubcont ul li.lft1 img{
	transform: scale(0.8);
}

#base .media .cont .subcont .subsubcont ul li.lft2{
	display:block;
	left:13.1944444%;
	z-index:8;
}
#base .media .cont .subcont .subsubcont ul li.lft2 img{
	transform: scale(0.64);
}

#base .media .cont .subcont .subsubcont ul li.lft3{
	display:block;
	left:0%;
	z-index:7;
}
#base .media .cont .subcont .subsubcont ul li.lft3 img{
	transform: scale(0.512);
}

#base .media .cont .subcont .subsubcont ul li.lft4{
	display:block;
	left:-10.4166666%;
	z-index:6;
}
#base .media .cont .subcont .subsubcont ul li.lft4 img{
	transform: scale(0.4096);
}

#base .media .cont .txt{
	position:absolute;
	left:50px;
	top:-5px;
	
	font-family:'Poppins', sans-serif;
	font-weight:800;
	color:#FFFFFF;
	font-size:2.4em;
	letter-spacing:0.02em;
	line-height:0.8;
	background:#383838;
	
	
	left:20px;
	top:-30px;
	font-size:2.2em;
	z-index:10;
}

#base .media .cont .pgr{
	width:93%;
	margin:auto;
	box-sizing: border-box;
	border-bottom:solid 6px #383838;
	padding:30px 0;
	position:relative;
	
	
	
	width:calc(100% - 40px);
	padding:25px 0;
	border-bottom:solid 4px #383838;
}

#base .media .cont .pgr .pager{
}

#base .media .cont .pgr .pager ul{
}

#base .media .cont .pgr .pager ul li{
}

#base .media .cont .pgr .pager ul li .btn{
	background:rgba(56,56,56,1.0);
}

#base .media .cont .pgr .pager .slct{
	border:solid 1px rgba(56,56,56,0.6);
}

#base .media .cont .pgr .arrow .lft,
#base .media .cont .pgr .arrow .rgh{
	position:absolute;
	top:0;
	bottom:0;
	margin:auto;
	
	width:45px;
	height:32px;
	
	cursor:pointer;
	
	width:34px;
	height:24px;
}
#base .media .cont .pgr .arrow .lft{
	left:0;
}
#base .media .cont .pgr .arrow .rgh{
	right:0;
}

#base .media .cont .pgr .arrow img{
	position:relative;
	width:45px;
	height:32px;
	
	width:34px;
	height:24px;
	
}
#base .media .cont .pgr .arrow .lft img{
	left:0;
	-webkit-transition: left .2s cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition: left .2s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: left .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#base .media .cont .pgr .arrow .rgh img{
	right:0;
	-webkit-transition: right .2s cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition: right .2s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: right .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
}

/* web --------------------------------------------- */

#base .web{
	padding:150px 0;
}

#base .web .cont{
	width:93%;
	margin:auto;
	
	box-sizing: border-box;
	border-bottom:solid 6px #383838;
}

#base .web .cont .subcont{
	display:table;
	width:100%;
}

#base .web .cont .subcont .ttl{
	display:table-cell;
	width:20%;
	vertical-align:middle;
	position:relative;
}

#base .web .cont .subcont .ttl .freakmag img{
	width:92%;
	height:auto;
}

#base .web .cont .subcont .ttl .bdr{
	position:absolute;
	right:0;
	top:20px;
	width:1px;
	height:calc(100% - 40px);
	overflow:hidden;
	background:#383838;
}

#base .web .cont .subcont .article{
	display:table-cell;
	width:auto;
	vertical-align:top;
}

#base .web .cont .subcont .article ul{
	display:table;
	width:calc(100% + 40px);
}

#base .web .cont .subcont .article ul li{
	display:table-cell;
	vertical-align:top;
	width:33.33333%;
	position:relative;
}

#base .web .cont .subcont .article ul li .thum{
	margin-top:45px;
	padding:0 40px;
	
	-webkit-transition:filter .3s;
	-o-transition:filter .3s;
	transition:filter .3s;
}
#base.hvr_on .web .cont .subcont .article ul li a:hover .thum{
	filter:brightness(60%);
}

#base .web .cont .subcont .article ul li .thum .sub{
	mask-repeat:no-repeat;
	mask-position:0 0;
	mask-size:100%;
	/* Chrome, Safari用 */
	-webkit-mask-repeat:no-repeat;
	-webkit-mask-position:0 0;
	-webkit-mask-size:100%;
}
#base .web .cont .subcont .article ul li:nth-child(1) .thum .sub{
	mask-image:url("../img/web_mask1.svg");
	-webkit-mask-image:url("../img/web_mask1.svg");
}
#base .web .cont .subcont .article ul li:nth-child(2) .thum .sub{
	mask-image:url("../img/web_mask2.svg");
	-webkit-mask-image:url("../img/web_mask2.svg");
}
#base .web .cont .subcont .article ul li:nth-child(3) .thum .sub{
	mask-image:url("../img/web_mask3.svg");
	-webkit-mask-image:url("../img/web_mask3.svg");
}

#base .web .cont .subcont .article ul li .thum .sub img{
	width:100%;
	height:auto;
}

#base .web .cont .subcont .article ul li .arttl{
	padding:0 35px 0 40px;
	color:#383838;
	font-weight:700;
	font-size:1.9em;
	letter-spacing:0.02em;
	line-height:1.7;
	padding-top:19px;
	padding-bottom:100px;
	
	-webkit-transition:opacity .3s;
	-o-transition:opacity .3s;
	transition:opacity .3s;
}
#base.hvr_on .web .cont .subcont .article ul li a:hover .arttl{
	opacity:0.5;
}

#base .web .cont .subcont .article ul li .date{
	position:absolute;
	left:40px;
	bottom:45px;
	
	font-family:'Poppins', sans-serif;
	font-weight:400;
	color:#383838;
	font-size:1.3em;
	letter-spacing:0.05em;
	line-height:1.0;
	
	-webkit-transition:opacity .3s;
	-o-transition:opacity .3s;
	transition:opacity .3s;
}
#base.hvr_on .web .cont .subcont .article ul li a:hover .date{
	opacity:0.5;
}

#base .web .cont .subcont .article ul li .bdr{
	position:absolute;
	right:0;
	top:20px;
	width:1px;
	height:calc(100% - 40px);
	overflow:hidden;
	background:#383838;
}
#base .web .cont .subcont .article ul li:nth-last-child(1) .bdr{
	display:none;
}

#base .web .cont .subcont .article .bdr2{
	width:calc(100% - 20px);
	height:1px;
	overflow:hidden;
	background:#383838;
	margin-left:20px;
}

#base .web .cont .subcont .article .more{
	position:relative;
	text-align:center;
	
	-webkit-transition:opacity .15s;
	-o-transition:opacity .15s;
	transition:opacity .15s;
}
#base.hvr_on .web .cont .subcont .article a:hover .more{
	opacity:0.4;
}

#base .web .cont .subcont .article .more p{
	padding:43px 0;
	
	font-family:'Poppins', sans-serif;
	font-weight:800;
	color:#383838;
	font-size:2.2em;
	letter-spacing:0.02em;
	line-height:1.0;
}

#base .web .cont .subcont .article .more .icn img{
	position:absolute;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	width:26px;
	height:26px;
}

@media all and (max-width: 767px){
#base .web{
	padding:55px 0 60px;
}

#base .web .cont{
	width:93%;
	margin:auto;
	
	box-sizing: border-box;
	border-bottom:solid 6px #383838;
	
	
	width:calc(100% - 40px);
	border-bottom:solid 4px #383838;
}

#base .web .cont .subcont{
	display:table;
	width:100%;
}

#base .web .cont .subcont .ttl{
	display:table-cell;
	width:20%;
	vertical-align:middle;
	position:relative;
	
	
	display:block;
	width:auto;
	text-align:center;
}

#base .web .cont .subcont .ttl .freakmag img{
	width:auto;
	height:45px;
	padding:18px 0;
}

#base .web .cont .subcont .ttl .bdr{
	position:absolute;
	right:0;
	top:20px;
	width:1px;
	height:calc(100% - 40px);
	overflow:hidden;
	background:#383838;
	
	
	position:static;
	width:100%;
	height:1px;
}

#base .web .cont .subcont .article{
	display:table-cell;
	width:auto;
	vertical-align:top;
	
	
	display:block;
	width:auto;
}

#base .web .cont .subcont .article ul{
	display:table;
	width:calc(100% + 40px);
	
	width:100%;
}

#base .web .cont .subcont .article ul li{
	display:table-cell;
	vertical-align:top;
	width:33.33333%;
	position:relative;
	
	
	display:block;
	width:auto;
}

#base .web .cont .subcont .article ul li .tbl{
	display:table;
	width:100%;
	margin:30px 0;
}

#base .web .cont .subcont .article ul li .tbl .td{
	display:table-cell;
	vertical-align:middle;
	width:auto;
}
#base .web .cont .subcont .article ul li .tbl .td:nth-child(1){
	width:45%;
}

#base .web .cont .subcont .article ul li .thum{
	margin-top:45px;
	padding:0 40px;
	
	
	margin-top:0;
	padding:0;
}

#base .web .cont .subcont .article ul li .thum .sub{
	width:calc(100% - 25px);
}

#base .web .cont .subcont .article ul li .arttl{
	padding:0 35px 0 40px;
	color:#383838;
	font-weight:700;
	font-size:1.9em;
	letter-spacing:0.02em;
	line-height:1.7;
	padding-top:19px;
	padding-bottom:100px;
	
	
	padding:0;
	padding-top:0;
	padding-bottom:0px;
	font-size:1.5em;
}

#base .web .cont .subcont .article ul li .date{
	position:absolute;
	left:40px;
	bottom:45px;
	
	font-family:'Poppins', sans-serif;
	font-weight:400;
	color:#383838;
	font-size:1.3em;
	letter-spacing:0.05em;
	line-height:1.0;
	
	
	position:static;
	font-size:1.1em;
	padding-top:15px;
}

#base .web .cont .subcont .article ul li .bdr{
	position:absolute;
	right:0;
	top:20px;
	width:1px;
	height:calc(100% - 40px);
	overflow:hidden;
	background:#383838;
	
	
	position:static;
	width:100%;
	height:1px;
}

#base .web .cont .subcont .article .bdr2{
	width:calc(100% - 20px);
	height:1px;
	overflow:hidden;
	background:#383838;
	margin-left:20px;
	
	
	width:100%;
	margin-left:0;
}

#base .web .cont .subcont .article .more{
	position:relative;
	text-align:center;
}

#base .web .cont .subcont .article .more p{
	padding:30px 0;
	
	font-family:'Poppins', sans-serif;
	font-weight:800;
	color:#383838;
	font-size:2.2em;
	letter-spacing:0.02em;
	line-height:1.0;
	
	
	font-size:1.7em;
}

#base .web .cont .subcont .article .more .icn img{
	position:absolute;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	
	width:20px;
	height:20px;
}
}

/* product --------------------------------------------- */

#base .product{
	padding:150px 0 190px;
}

#base .product .cont{
	position:relative;
	width:100%;
	height:650px;
}

#base .product .cont .cont1,
#base .product .cont .cont2,
#base .product .cont .cont3{
	position:absolute;
	left:0;
	width:100%;
	height:400px;
	overflow:hidden;
	
	background:url(../img/product.png);
	background-size:3150px 400px;
	animation-name:product_anime;
	animation-duration:31.5s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
	
	-webkit-transition: opacity .3s;
	-o-transition: opacity .3s;
	transition: opacity .3s;
}
#base.hvr_on .product .cont:hover .cont1,
#base.hvr_on .product .cont:hover .cont2,
#base.hvr_on .product .cont:hover .cont3{
	opacity:0.6;
}
#base .product .cont .cont1{
	top:-10px;
}
#base .product .cont .cont2{
	bottom:-60px;
	animation-delay:-15.75s;
}
#base .product .cont .cont3{
	display:none;
}

#base .product .cont .cont1 .sub,
#base .product .cont .cont2 .sub{
}
#base .product .cont .cont1 .sub{
	left:0px;
}
#base .product .cont .cont2 .sub{
	left:-1575px;
}

@keyframes product_anime {
0%   { background-position:0 0; }
100% { background-position:-3150px 0; }
}

#base .product .cont .btn{
	position:absolute;
	right:45px;
	right:calc(3.5% - 10px);
	bottom:-30px;
}

#base.hvr_on .product .cont:hover .btn .bg{
	animation-name:product_hover_anime;
	animation-duration:8.0s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
}

#base .product .cont .btn .bg img{
	width:184px;
	height:184px;
	
	-webkit-transition: filter .1s linear, transform .1s ease-out;
	-o-transition: filter .1s linear, transform .1s ease-out;
	transition: filter .1s linear, transform .1s ease-out;
}
#base.hvr_on .product .cont:hover .btn .bg img{
	/*filter: brightness(170%);*/
	filter: brightness(0%);
	transform: scale(1.1);
}

#base .product .cont .btn .txt img{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	
	width:120px;
	height:120px;
}

@keyframes product_hover_anime {
0%   { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

@media all and (max-width: 767px){

#base .product{
	padding:55px 0 55px;
}

#base .product .cont{
	height:620px;
	height:500px;
}

#base .product .cont .cont1,
#base .product .cont .cont2,
#base .product .cont .cont3{
	background-size:1890px 240px;
	animation-name:product_anime_sp;
	animation-duration:18.9s;
	height:240px;
	
	background-size:1512px 192px;
	animation-name:product_anime_sp;
	animation-duration:15.12s;
	height:192px;
}
#base .product .cont .cont1{
	top:-6px;
}
#base .product .cont .cont2{
	top:0;
	bottom:0;
	margin:auto;
	animation-delay:-12.8s;
	
	animation-delay:-10.24s;
}
#base .product .cont .cont3{
	bottom:-6px;
	display:block;
	animation-delay:-6.7s;
	
	animation-delay:-5.36s;
}

#base .product .cont .cont1 .sub,
#base .product .cont .cont2 .sub{
}
#base .product .cont .cont1 .sub{
	left:0px;
}
#base .product .cont .cont2 .sub{
	left:-1280px;
	left:-1024px;
}
#base .product .cont .cont3 .sub{
	left:-670px;
	left:-536px;
}

#base .product .cont .btn{
	right:10px;
	bottom:0;
}

#base .product .cont .btn .bg img{
	width:130px;
	height:130px;
}

#base .product .cont .btn .txt img{
	width:86px;
	height:86px;
}
}

@keyframes product_anime_sp {
0%   { background-position:0 0; }
100% { background-position:-1512px 0; }
}

/* instagram --------------------------------------------- */

#base .instagram{
}

#base .instagram .cont{
	width:calc(100% - 24px);
	height:300px;
	margin:0 auto 12px;
	
	box-sizing:border-box;
	border:solid 6px #383838;
	display:table;
	
	-webkit-transition: background .3s;
	-o-transition: background .3s;
	transition: background .3s;
}
#base.hvr_on .instagram a:hover .cont{
	background:#383838;
}

#base .instagram .cont .subcont{
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	
	position:relative;
}

#base .instagram .cont .subcont p{
	font-family:'Poppins', sans-serif;
	font-weight:800;
	color:#383838;
	font-size:7.0em;
	letter-spacing:-0.02em;
	line-height:1.0;
	
	-webkit-transition: color .3s;
	-o-transition: color .3s;
	transition: color .3s;
}
#base.hvr_on .instagram a:hover .cont .subcont p{
	color:#FFFFFF;
}

#base .instagram .cont .icn{
	position:absolute;
	right:24px;
	top:0;
	bottom:0;
	margin:auto;
	width:52px;
	height:52px;
	
	right:24px;
	width:46px;
	height:46px;
}

#base .instagram .cont .icn img{
	width:100%;
	height:100%;
	
	-webkit-transition: filter .3s;
	-o-transition: filter .3s;
	transition: filter .3s;
}
#base.hvr_on .instagram a:hover .cont .icn img{
	filter:brightness(0%) invert(100%);
}

@media all and (max-width: 767px){
#base .instagram .cont{
	width:calc(100% - 16px);
	height:120px;
	margin:0 auto 8px;
	border:solid 4px #383838;
}

#base .instagram .cont .subcont p{
	font-size:2.8em;
	padding-right:5px;
}

#base .instagram .cont .icn{
	right:8px;
	width:24px;
	height:24px;
}
}