/* CSS Document */

/* -------------Addendum------------- */
html{-webkit-text-size-adjust: 100%;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
html, body, #wrapper {
    height: 100%;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
/* -------------Addendum------------- */

/* -------------all------------- */
html, body {
	margin: 0;
	padding: 0;
	position:relative;
	height:100%; 
	width: 100%;
	background:#171715;
}
section{z-index: 1!important;}

/* -------------all------------- */

div,dl,dt,dd,img,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,p,blockquote,th,td,hr{margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{font-size:10px;}
h5{ font-weight: lighter;}
table{border-collapse:collapse; border-spacing:0; border:0;}
caption,th,td{text-align:left;}
fieldset,img{border:none;}
address,cite,code,dfn,em,strong,th,var{font-style:normal; font-weight:normal;}
th,td,img{vertical-align:top;}
ol,ul,li{list-style:none;}
a{ text-decoration:none!important; color:#b69e71;}

.clear{clear:both;}
.clearfix:after{content:".";
				display:block;
				height:0;
				clear:both;
				visibility:hidden;
}
::selection {
    background: #b69e71; /* WebKit, Opera, & IE9 */
    color: #000;
}
 
::-moz-selection {
    background: #b69e71; /* Firefox */
    color: #000;
}

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

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@keyframes fadeInMove {
    0% {margin-top: -20px}
    100% {margin-top: 0}
}

@-webkit-keyframes fadeInMove {
    0% {margin-top: -20px}
    100% {margin-top: 0}
}

@keyframes fadeOut {
    0% {opacity: 1}
    100% {opacity: 0}
}

@-webkit-keyframes fadeOut {
    0% {opacity: 1}
    100% {opacity: 0}
}


/*----------------------------------------*/
#skrollr-body{z-index: 0;}
.ityped-cursor {
    font-size: 2.2rem;
    opacity: 1;
    -webkit-animation: blink 0.3s infinite;
    -moz-animation: blink 0.3s infinite;
    animation: blink 0.3s infinite;
    animation-direction: alternate;
}
/*--------------------overlay--------------------*/
#st_overlay {
    background: url(../img3/bg_op.png) repeat-x scroll left bottom transparent;
    width: 100%;
    height: 100%;
	opacity:0.1;
    position: fixed;
    top: 0;
    left: 0;
	z-index:10;
	position:absolute;
}

/*--------------------marquee--------------------*/
#wrap{
    position: relative;
	z-index: 9999;
}
#wrap .fade_mask{
    width: 150px;
}
#wrap .fade_mask img{
    width:150px;
    height:auto;
}
#wrap .marquee{
    position: absolute;
    top: 0;
}
#wrap .marquee p {
    background:#fcfcf6;
    margin:0;
    width:100vw;
    height:100vh;
    padding-left:300px;
    display:inline-block;
    white-space:nowrap;
    animation-name:marquee;
    animation-timing-function:ease;
    animation-duration:2s;
    animation-iteration-count:infinite;
}
#wrap .marquee p.active {display: none;}
@keyframes marquee {
    from   { transform: translateX(100%); opacity: 1;}
    to 	   {transform: translateX(-100%); opacity: 0;display: none;}
}
/*--------------------marquee--------------------*/


/*--------------------overlay--------------------*/
body > #wrapper {
	height:auto;
}
body > #wrapper_sec {
	height:auto;
	opacity: 0;transform: translateY(-10px);transition: all 1.0s ease;
}
/*--------------------pagetop--------------------*/

.page-top {
    position: absolute;
    right: 15px;
    bottom: 15px;
    width: 50px;
    text-align: center;
    margin: 0;
    padding: 0;
    z-index: 9999!important;
    display: inline-block;
}

.page-top p
{
	margin: 0 ;
	padding: 0 ;
	position: fixed ;
    right: 6px;
    bottom:6px;
}
.move-page-top
{
	display: block ;
	width: 50px ;
	height: 50px ;
	cursor: pointer ;
	line-height: 50px ;
	text-decoration: none ;
	text-align: center ;
	background: url(../img3/pagetop.png) no-repeat;
	-webkit-transition:all 0.3s ;
	-moz-transition:all 0.3s ;
	transition:all 0.3s ;
	position: absolute;
	bottom: 68px;
	right: 10px;
}
.move-page-top:hover{
	background: url(../img3/pagetop_over.png) no-repeat;
	width: 50px ;
	height: 50px ;
}
.move-page-top_black
{
	display: block ;
	width: 50px ;
	height: 50px ;
	cursor: pointer ;
	line-height: 50px ;
	text-decoration: none ;
	text-align: center ;
	background: url(../img3/pagetop_black.png) no-repeat;
	position: absolute;
	bottom: 68px;
	right: 10px;
	border: 0.1px solid #fcfcf6!important;
	animation: fadeIn 4s ease-out 4s 1 forwards;
	-webkit-animation: fadeIn 4s ease-out 4s 1 forwards;
	opacity: 0;	
}
.move-page-top_black:hover{
	background: url(../img3/pagetop_over.png) no-repeat;
	width: 50px ;
	height: 50px ;
}

/*--------------------pagetop--------------------*/

/*--------------------section--------------------*/
	#section1{}
	#section2{}
	#section3{}
	#section4{}
/*--------------------section--------------------*/

/*--------------------renewal--------------------*/
#wrapper{
	width: 100%;
	height: 100%;
	position: absolute;
	min-height: 100%;
	background: #171715!important;
	right: 0;
	bottom: 0;
	top:0;
	left:0;
	background-size: 100% 100%;
	background-position: center center;
	background-size: contain;
	object-fit: cover; /*cover video background */
	z-index: 9800!important;
}
/*
#wrapper #list_img{
	width:0; 
	height:100%;
	position:absolute;
	top:0;
	right:0;
	opacity:0.9;
	z-index:5;
}
*/
#list_img a .list_img_portfolio .list_img_portfolio_title{
	width:100%; 
	height:35PX;
	background:url(../img3/top_img_text01.png) no-repeat;
	text-indent:-9999px;
	margin-bottom:20px;
	z-index:100;
}
#list_img a .list_img_portfolio .list_img_portfolio_title:hover{
	width:430px; 
	height:35PX;
	background:url(../img3/top_img_text01_over.png) no-repeat;
}
#list_img a .list_img_portfolio{
    width: 30vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 10;
    background: #171715;
}
.subnav_inner {
    text-align: center;
}
.subnav_inner img:hover{
    transition: .3s!important;
    opacity: 0.7;
    z-index: 1;
}
#list_img .list_img_portfolio_l{
	position: absolute;
    left: 4vw;
	text-align: right;
    z-index: 9999;
}
#list_img .list_img_portfolio_r{
	position: absolute;
	right: -95vw!important;
	text-align: left;
    top: -60px;
	padding-left:21px;
    z-index: 9999;
}
.icon_PHOTOGRAPH{
	position: relative;
	display: block;
	height: 5vh!important;
    position: relative;
    margin: 0 10px 0 auto;
}
.icon_PHOTOGRAPH span {
    display: block;
    color: #a9894a;
	margin-top: -2vh;
     margin-left: 1vw;
	font-size:12px!important;
	font-weight: bold;
	text-shadow: 0 0 1px #fcfcf6;
	transition: .3s;
	font-family: "source-han-serif-japanese","Osaka","Helvetica","sans-serif",serif;
    z-index: 99999;
}
.icon_PHOTOGRAPH span:hover {
    color: #ee4123!important;
}
.icon_HANGER_PLATE{
	position: relative;
	height: 5vh!important;
	display: block;
}
.icon_HANGER_PLATE span {
    display: block;
    color: #a9894a;
	margin-top: -3vh;
	font-size:12px!important;
	font-weight: bold;
	text-shadow: 0 0 1px #fcfcf6;
	transition: .3s;
	font-family: "source-han-serif-japanese","Osaka","Helvetica","sans-serif",serif;
}
.icon_HANGER_PLATE span:hover {
    color: #ee4123!important;
}
.icon_YANAKABOSSA{
	position: relative;
	height: 5vh!important;
	display: block;
}
.icon_YANAKABOSSA span {
    display: block;
    color: #a9894a;
	margin-top: -3vh;
	font-size:12px!important;
	font-weight: bold;
	text-shadow: 0 0 1px #fcfcf6;
	transition: .3s;
	font-family: "source-han-serif-japanese","Osaka","Helvetica","sans-serif",serif;
}
.icon_YANAKABOSSA span:hover {
    color: #ee4123!important;
}
.icon_DEKOBOKO{
	position: relative;
	height: 5vh!important;
	display: block;
}
.icon_DEKOBOKO span {
    display: block;
    color: #a9894a;
	margin-top: -3vh;
	font-size:12px!important;
	font-weight: bold;
	text-shadow: 0 0 1px #fcfcf6;
	transition: .3s;
	font-family: "source-han-serif-japanese","Osaka","Helvetica","sans-serif",serif;
}
.icon_DEKOBOKO span:hover {
    color: #ee4123!important;
}
.icon_AKARI{
	position: relative;
	height: 4vh!important;
	display: block;
}
.icon_AKARI span {
    display: block;
    color: #a9894a;
	margin-top: -3vh;
	font-size:12px!important;
	font-weight: bold;
	text-shadow: 0 0 1px #fcfcf6;
	transition: .3s;
	font-family: "source-han-serif-japanese","Osaka","Helvetica","sans-serif",serif;
}
.icon_AKARI span:hover {
    color: #ee4123!important;
}
.icon_GAITO{
	position: relative;
	height: 5vh!important;
	display: block;
}
.icon_GAITO span {
    display: block;
    color: #a9894a;
	margin-top: -3vh;
	font-size:12px!important;
	font-weight: bold;
	text-shadow: 0 0 1px #fcfcf6;
	transition: .3s;
	font-family: "source-han-serif-japanese","Osaka","Helvetica","sans-serif",serif;
}
.icon_GAITO span:hover {
    color: #ee4123!important;
}
.icon_IRUST{
	position: relative;
	height: 5vh!important;
	display: block;
}
.icon_IRUST span {
    display: block;
    color: #a9894a;
	margin-top: -3vh;
	font-size:12px!important;
	font-weight: bold;
	text-shadow: 0 0 1px #fcfcf6;
	transition: .3s;
	font-family: "source-han-serif-japanese","Osaka","Helvetica","sans-serif",serif;
}
.icon_IRUST span:hover {
    color: #ee4123!important;
}
.icon_WEB{
	position: relative;
	height: 5vh!important;
	display: block;
}
.icon_WEB span {
    display: block;
    color: #a9894a;   
	margin-top: -3vh;
	font-size:12px!important;
	font-weight: bold;
	text-shadow: 0 0 1px #fcfcf6;
	transition: .3s;
	font-family: "source-han-serif-japanese","Osaka","Helvetica","sans-serif",serif;
}
.icon_WEB span:hover {
    color: #ee4123!important;
}
.icon_GRAPHIC{
	position: relative;
	height: 5vh!important;
	display: block;
}
.icon_GRAPHIC span {
    display: block;
    color: #a9894a;
	margin-top: -6vh;
	font-size:12px!important;
	font-weight: bold;
	text-shadow: 0 0 1px #fcfcf6;
	transition: .3s;
	font-family: "source-han-serif-japanese","Osaka","Helvetica","sans-serif",serif;
}
.icon_GRAPHIC span:hover {
    color: #ee4123!important;
}
.list_img_portfolio{
	position: absolute;
    left: 40px;
}
#wrapper #list_img a .list_img_portfolio{ height:700px; margin:10px;}
#wrapper #list_img a .list_img_portfolio .list_img_portfolio_img{background:url(../img3/top_img_portfolio.png) no-repeat; width:244px; height:524px;display:block;text-indent:-9999px; text-align:center; margin:0 auto; right:0; left:0; position:absolute;}
#wrapper #list_img a .list_img_portfolio .list_img_portfolio_img:hover{background:url(../img3/top_img_portfolio_over.png) no-repeat;  width:244px; height:524px;display:block;text-indent:-9999px;}

#wrapper #list_img .list_img_mail{
	width:285px; 
	height:35PX;
	background:url(../img3/top_img_text02.png) no-repeat 0px 25px;
	position:absolute;
	top:660px;
	right:0;
	border:3px solid #000;
	background-color:#fcfcf6;
	padding:30px 0px!important;
	text-indent:-9999px;
	margin-bottom:10px;
	border-right:none;
}

#wrapper #list_img .list_img_mail:hover{
	width:285px; 
	height:35PX;
	background:url(../img3/top_img_text02_over.png) no-repeat 0px 25px;
	background-color:#fcfcf6;
}
#wrapper #headder_right{
	width:78.7%; 
	height:92%;
	position:absolute;
	top:0;
	right:0;
	border:1px solid #fff;
	box-sizing: border-box;
	z-index:1;
	}
#wrapper #headder{
	width:0; 
	height:100vh;
	position:absolute;
	top:0;
	left:0;
	text-align:center;
	margin:auto;
	opacity:1;
	z-index:9999!important;
}
#wrapper #headder .rogo{
	width:472px;
	height:192px;
	margin:0 auto;
	text-align:center;
	background:url(../img3/rogo.jpg) no-repeat;
}
#wrapper #headder .rogo_name{
	width:170px;
	height:300px;
	margin:0 auto 0px auto;
	text-align:center;
	display:block;
}
#wrapper #headder .head_line{
	background:url(../img3/head_bg.gif) repeat-x; 
	width:100%; 
	height:7px; 
	text-indent:-9999px;
}
#wrapper #headder .submain_bg{
	position: absolute;
	top: 0;
	left: 10vw;
	width:440px; 
	height:48px;
	margin:20px auto 10px auto;
}
#wrapper #headder .timebox .date{
	font-size:3rem;
	font-family:"freight-big-pro","Book Antiqua",sans-serif; 
	font-weight:lighter; 
	color:#fcfcf6;
	margin:50px auto 0 auto; 
	text-align:center; 
	letter-spacing:8px;
    z-index: 9999;
    text-shadow: 0 0 1px #000;
    position: fixed;
    bottom: 25vh;
    left:4vw;
}
#wrapper #headder .timebox{
	margin:0; 
	letter-spacing:5px; 
	position:absolute; 
	bottom:20%; 
	left:75px; 
	z-index:1000; 
	color: #fcfcf6;
	}
#wrapper #headder .timebox_address{
	margin:0; 
	letter-spacing:4px; 
	margin:0;
}

#wrapper #headder .submain_bg .submain{ 
	width:440px; 
	margin:0 auto;
	color: #fcfcf6!important;
	text-align: left;
	vertical-align: middle;
    position: absolute;
    left: 1.5vw;
    top: 28vh;
}

#wrapper #headder .submain_bg .submain .submain_l .address{background:url(../img3/submain_url.gif) no-repeat; width:124px; height:16px; text-indent:-9999px; padding-bottom:10px;}
#wrapper #headder .submain_bg .submain .submain_l .mail a{background:url(../img3/submain_address.gif) no-repeat; width:153px; height:17px; text-indent:-9999px; margin-top:5px;display:block;}
#wrapper #headder .submain_bg .submain .submain_l .mail a:hover{background:url(../img3/submain_address_over.gif) no-repeat; width:153px; height:17px; text-indent:-9999px; margin-top:5px;}
#wrapper #headder .submain_bg .submain .submain_l .flash a{background:url(../img3/submain_flash.gif) no-repeat; width:78px; height:14px; text-indent:-9999px;display:block;}
#wrapper #headder .submain_bg .submain .submain_l .flash a:hover{background:url(../img3/submain_flash_over.gif) no-repeat; width:78px; height:14px; text-indent:-9999px; margin-top:5px;}
#wrapper #headder .submain_bg .submain .submain_r .submain_line{float:left; width:1px;}
#wrapper #headder .submain_bg .submain .submain_r{
		opacity: 0;
		animation: fadeIn 2s ease-out 4s 1 forwards;
    	-webkit-animation: fadeIn 2s ease-out 3s 1 forwards;
}
	@keyframes fadeIn { /*「fadeIn」と名前をそろえる*/
		0% {opacity: 0} /*アニメーション開始時は完全に透過*/
		100% {opacity: 1;display: block;} /*アニメーション終了時は透過しない*/
	}

	/*旧 Safari 用のベンダー処理*/
	@-webkit-keyframes fadeIn {
		0% {opacity: 0}
		100% {opacity: 1;display: block;}
	}
#wrapper #headder .submain_bg .submain .submain_r li{ line-height:2;}
#wrapper #headder .submain_bg .submain .submain_r .portfolio{ background:url(../img3/submain_mark.gif) no-repeat!important; background-position:0 3px;width:440px;height:16px;text-shadow: 0 0 1px #000;}
#wrapper #headder .submain_bg .submain .submain_r .news{ background:url(../img3/submain_mark.gif) no-repeat!important; background-position:0 3px;width:440px;height:16px;text-shadow: 0 0 1px #000;}

#wrapper #headder .submain_bg .submain .submain_r li{ line-height:5;}
#wrapper #headder .submain_bg .submain .submain_r .portfolio{ 
	background:url(../img3/submain_mark.gif) no-repeat!important; 
	background-position:0 3px;
	width:440px;
	height:16px; 
	text-shadow: 0 0 1px #000;
    margin: 10px 0;
	z-index:1000; 
}
#wrapper #headder .submain_bg .submain .submain_r .news{ background:url(../img3/submain_mark.gif) no-repeat; background-position:0 3px;width:440px;height:16px;padding: 15px 0;}
#wrapper #headder .submain_bg .submain .submain_r .news_text{font-family:Book Antiqua, Arial, Helvetica, sans-serif; font-size:14px; line-height:1;padding-left:18px; vertical-align:middle;width:440px; font-weight:normal;color:#fcfcf6!important; }
#wrapper #headder .submain_bg .submain .domain{font-family: "Palatino Linotype", "Book Antiqua", Palatino, "serif"; font-size:18px; line-height:1; vertical-align:middle;width:300px; font-weight:bold;text-shadow: 0 0 1px #000;}
.f10{font-size:10px;}
.f8{font-size:8px;}
#wrapper #headder .submain_bg #rogo_name_top{
	text-indent: -9999px;
	display: block!important;
	position: absolute;
	background:url(../img3/rogo_top_2.png) no-repeat;
	text-shadow: 0 0 1px #000;
	width:700px;
	height:270px;
	left: -13vw;
    top: 5vh;
	transform: scale(0.6);
	opacity: 0;
		animation: fadeIn 4s ease-out 4s 1 forwards;
    	-webkit-animation: fadeIn 4s ease-out 4s 1 forwards;
}
	@keyframes fadeIn { /*「fadeIn」と名前をそろえる*/
		0% {opacity: 0} /*アニメーション開始時は完全に透過*/
		100% {opacity: 1;display: block;} /*アニメーション終了時は透過しない*/
	}

	/*旧 Safari 用のベンダー処理*/
	@-webkit-keyframes fadeIn {
		0% {opacity: 0}
		100% {opacity: 1;display: block;}
	}
#wrapper #headder .submain_bg #rogo_name_top:hover{
	opacity: 0.9;
}
#wrapper #headder .submain_bg .menu_domain{
	position: absolute;
	background: url(../img3/menu__rogo_name_adress.png) no-repeat; 
	width:210px;
	height:29px; 
	text-indent:-9999px; 
	color:#FFFFFF; 
	text-align:center;
	text-shadow: 0 0 1px #000;
	opacity: 0;
    top: 24vh;
	left: 0;
		animation: fadeIn 2s ease-out 1s 1 forwards;
    	-webkit-animation: fadeIn 2s ease-out 1s 1 forwards;
}
	@keyframes fadeIn { /*「fadeIn」と名前をそろえる*/
		0% {opacity: 0} /*アニメーション開始時は完全に透過*/
		100% {opacity: 1} /*アニメーション終了時は透過しない*/
	}

	/*旧 Safari 用のベンダー処理*/
	@-webkit-keyframes fadeIn {
		0% {opacity: 0}
		100% {opacity: 1}
	}
#loader { transition: opacity 500 ease-in-out;	opacity: 1;}
#wrapper #headder .submain_bg .menu_domain.active{opacity: 1;}
#wrapper #headder .timebox_address .menu_mail{ color:#FFFFFF;font-family:Book Antiqua, Arial, Helvetica, sans-serif; }
#wrapper #headder .timebox_address .menu_flash{ 
	position: absolute;
	top: 30vh;
    left: 2.5vw;
	margin-bottom:40px; 
	color:#FFFFFF;
	font-family:Book Antiqua, Arial, Helvetica, sans-serif;
	opacity: 0;
		animation: fadeIn 2s ease-out 2s 1 forwards;
    	-webkit-animation: fadeIn 2s ease-out 2s 1 forwards;
}
	@keyframes fadeIn { /*「fadeIn」と名前をそろえる*/
		0% {opacity: 0} /*アニメーション開始時は完全に透過*/
		100% {opacity: 1} /*アニメーション終了時は透過しない*/
	}

	/*旧 Safari 用のベンダー処理*/
	@-webkit-keyframes fadeIn {
		0% {opacity: 0}
		100% {opacity: 1}
	}
#wrapper #headder .timebox_address .menu_mail a{padding-bottom:20px; color:#FFFFFF; text-align:left;}
#wrapper #headder .timebox_address .menu_flash a{ color:#FFFFFF; text-align:left;}

#menu_top_line{
    background: url(http://be-channel.com/test/css/../img3/head_bg.gif) repeat-x;background-position: bottom;
    width: 50vw;
    height: 7px;
    text-indent: -9999px;
}
/*-----------menu---------*/

#wrapper #headder #menu .menu_bg{position:relative; width:440px; text-align:center; margin:0 auto;}

#wrapper .menu{
	width:440px;
	height: 48px;
	position:relative;
/*f-bottom:2px solid #CCCCCC;*/
}

#wrapper #headder #menu{
	width:440px;
	height:48px;
	z-index:100;
	top:0;
	left:0;
	margin:0 auto;
	text-align:center;

}

#wrapper #headder #menu li{
	height:48px;
	float:left;
}


/*-----------------------------------------LI TOP-----------------------------------------*/
#wrapper #headder #menu li.home{width:110px; height:48px; text-indent:-9999px; background:url(../img3/menu__top.png) no-repeat;}
#wrapper #headder #menu li.home:hover{width:110px; height:48px; text-indent:-9999px; background:url(../img3/menu__top_over.png) no-repeat;}
#wrapper #headder #menu li.home a{width:110px; height:48px;display:block;}
/*
#wrapper #headder #menu li.home#anime1	{
	width:110px;
	height:48px;
	background-color: #000;
	padding:0px;
	-webkit-animation: anime1 5s linear infinite;
	animation: anime1 5s linear infinite;
	opacity:1; 
}
*/
@keyframes anime1 {
	0%	{
		background-color:#fff;
		}

	40%	{
		background-color:#e5e5e5;
		}

	70%	{
		background-color:#fff;
		}

	100%	{
		background-color:#e5e5e5;
		}
	}

@-webkit-keyframes anime1 {
	0%	{
		background-color:#fff;
		}

	40%	{
		background-color:#e5e5e5;
		}

	70%	{
		background-color:#fff;
		}

	100%	{
		background-color:#e5e5e5;
		}
	}
/*-----------------------------------------LI TOP-----------------------------------------*/

/*-----------------------------------------LI NEWS-----------------------------------------*/
#wrapper #headder .menu ul#menu li.news{width:110px; height:48px;text-indent:-9999px; background:url(../img3/menu__news.png) no-repeat;}
#wrapper #headder .menu ul#menu li.news:hover{width:110px; height:48px;text-indent:-9999px; background:url(../img3/menu__news_over.png) no-repeat;text-indent:-9999px;}
#wrapper #headder .menu ul#menu li.news a{width:110px; height:48px;display:block; width:105px;}
/*
#wrapper #headder .menu ul#menu li.news#anime2	{
	width:110px;
	height:48px;
	background-color: #e9e9e9;
	padding:0px;
	-webkit-animation: anime2 5s linear infinite;
	animation: anime2 5s linear infinite;
	opacity:0.8;
	}
*/
@keyframes anime2 {
	0%	{
		background-color:#fff;
		}

	40%	{
		background-color:#e5e5e5;
		}

	70%	{
		background-color:#fff;
		}

	100%	{
		background-color:#e5e5e5;
		}
	}

@-webkit-keyframes anime2 {
	0%	{
		background-color:#fff;
		}

	40%	{
		background-color:#e5e5e5;
		}

	70%	{
		background-color:#fff;
		}

	100%	{
		background-color:#e5e5e5;
		}
	}
/*-----------------------------------------LI NEWS-----------------------------------------*/

/*-----------------------------------------LI PORTFOLIO-----------------------------------------*/
#wrapper #headder .menu ul#menu li.portfolio{width:110px; height:48px;text-indent:-9999px; background:url(../img3/menu__portfolio.png) no-repeat;}
#wrapper #headder .menu ul#menu li.portfolio:hover{ width:110px; height:48px;text-indent:-9999px; background:url(../img3/menu__portfolio_over.png) no-repeat;text-indent:-9999px;}
#wrapper #headder .menu ul#menu li.portfolio a{ display:block;width:110px; height:48px;}
/*
#wrapper #headder .menu ul#menu li.portfolio#anime3	{
	width:110px;
	height:48px;
	background-color: #e9e9e9;
	padding:0px;
	-webkit-animation: anime3 5s linear infinite;
	animation: anime3 5s linear infinite;
	opacity:0.8;
	}
*/
@keyframes anime3 {
	0%	{
		background-color:#fff;
		}

	40%	{
		background-color:#e5e5e5;
		}

	70%	{
		background-color:#fff;
		}

	100%	{
		background-color:#e5e5e5;
		}
	}

@-webkit-keyframes anime3 {
	0%	{
		background-color:#fff;
		}

	40%	{
		background-color:#e5e5e5;
		}

	70%	{
		background-color:#fff;
		}

	100%	{
		background-color:#e5e5e5;
		}
	}
/*-----------------------------------------LI PORTFOLIO-----------------------------------------*/

/*-----------------------------------------LI CONTACT-----------------------------------------*/
@keyframes anime5 {
	0%	{
		background-color:#fff;
		}

	40%	{
		background-color:#e5e5e5;
		}

	70%	{
		background-color:#fff;
		}

	100%	{
		background-color:#e5e5e5;
		}
	}

@-webkit-keyframes anime5 {
	0%	{
		background-color:#fff;
		}

	40%	{
		background-color:#e5e5e5;
		}

	70%	{
		background-color:#fff;
		}

	100%	{
		background-color:#e5e5e5;
		}
	}

/*-----------------------------------------LI CONTACT-----------------------------------------*/

.p-l10{padding-left:10px;}
.p-l18{padding-left:18px;}
.pr-15{padding-right:15px;}
#wrapper .main{ margin:30px auto 0px auto; width:584px; min-height:780px;}
#wrapper .top_main{ margin:25px auto 35px auto; width:584px;  height:1000px;min-height:100%;}

#footer{
	position:fixed; 
	display:block;
	width:100%;
	height: 60px;
	bottom:0;
	left: 0;
	right: 0;
	padding-top: 0;
	clear: both;
	background:url(../img3/footer_bg.png) repeat-x;
	background-color:#171715;
	color:#fcfcf6;
	margin-top:10px;
	z-index:9900;
	font-size: 9px;
	line-height: 2;
	letter-spacing: 1.4px;
	font-family: "Helvetica", sans-serif,"Book Antiqua","Arial";
	opacity: 0.9;
}
#footer_contents{
     padding-bottom:90px; /*フッターの高さと同じ*/
}
#footer a{
	color:#fcfcf6;
	transition: .3s;
}
#footer small {
    width: auto;
    display: block;
    padding: 0;
	color:#fcfcf6;
    float: right;
	padding-right: 8vw;
}

#footer .footer_box{ 
	margin:15px auto 0 auto;
	text-align:center;
}

#footer .footer_box ul.foter_link{ 
	float:left;
	width:50%;
	text-align:left; 
	padding-left: 12vw;	
}
#footer .footer_box ul.foter_link li{
	display: inline-block;
	width: 15%;
	color:#fcfcf6;
	border-left:2px solid #fcfcf6;
	padding-left:12px;
	letter-spacing: 10;
	vertical-align:middle;
	font-family:"Helvetica", sans-serif,"Book Antiqua","Arial";
}
#footer .footer_box ul.foter_link li a:hover{
	color:#b69e71;
	text-decoration:none;
}

/*-----------portfolio---------*/
#wrapper .portfolio_main{ margin:25px auto 35px auto; width:584px;position:relative; text-align:center;height:80vh;display:block;}
#wrapper .portfolio_main .portfolio_title{ background:url(../img3/title_portfolio.gif) no-repeat; width:584px; height:21px; text-indent:-9999px; border-bottom:1px solid #000000;}

#wrapper #portfolio_main3{ margin:25px auto 5px auto; width:584px;position:relative; }
#wrapper #portfolio_main3 .portfolio_title3{ background:url(../img3/title_portfolio.gif) no-repeat; width:584px; height:21px; text-indent:-9999px;border-bottom:1px solid #000000; padding-bottom:1px;}

#wrapper .portfolio_main .portfolio_list{ margin:20px 0 0 0; padding:0;width:584px;}
#wrapper .portfolio_main .portfolio_list li{ float:left; width:184px; height:145px; padding-bottom:10px;}

#wrapper .portfolio_main .portfolio_list_title{ 
font-size: 20px;
font-family: Arial, Helvetica, sans-serif; 
width:100%;
height: 100%;
margin:10px auto 10px auto;
text-align:center;
padding:2px 0;
height: 5vh;
position: absolute;
left: 5vw;
display: block;
}
#wrapper .portfolio_main .portfolio_list_title a{
display: block;
width:100%;
height: 100%;
position: absolute;
}
#wrapper .portfolio_main .portfolio_list_title2{ font-family: Arial, Helvetica, sans-serif; width:150px; margin:10px auto 10px auto; text-align:center;position: absolute;
left: 5vw;}
#wrapper .portfolio_main .portfolio_list_title3{ font-family: Arial, Helvetica, sans-serif; width:150px; margin:10px auto 10px auto; text-align:center; padding:2px 0;text-align:center;position: absolute;
left: 5vw; width:564px;}
#wrapper .portfolio_main .portfolio_list_title4{ font-family: Arial, Helvetica, sans-serif; margin:10px auto 10px auto; text-align:center; width:564px;position: absolute;
left: 5vw;}

#wrapper .portfolio_main .portfolio_list_thumbnail li{ float:left; width:50px; height:50px; padding-bottom:10px;}

#wrapper .portfolio_main .portfolio_graphic{ width:584px;}
#wrapper .portfolio_main .portfolio_graphic li{ float:left; width:50px; height:50px; padding-bottom:10px;}

#wrapper .dis-non{ display:none;}


/*-----------NEWS---------*/
#wrapper .news_main{ margin:25px auto 0px auto; width:584px; border-left:1px solid #000000;border-right:1px solid #000000; height: 80vh;}
#wrapper .news_main .news_title{ background:url(../img3/title_news.gif) no-repeat; width:584px; height:21px; text-indent:-9999px;}
#wrapper .news_main dl.news_list{
background-image:url(../img3/submain_mark.gif)!important;
background-position:0px 1px;
background-repeat:no-repeat;
border-bottom:1px solid #AEAEA5; 
height:40px; 
margin:10px auto 0 auto;
width:545px;
display:block;
padding-bottom:10px;
}

#wrapper .news_main dl.news_list dt{color:#91835F; font-size:10px; padding-left:15px; padding-bottom:10px; font-weight:bold;}
#wrapper .news_main dl.news_list dd{font-size:14px; font-weight:bold;padding-left:15px;}

/*-----------LINK---------*/
#wrapper .link_main{ margin:25px auto 35px auto; width:584px; border-left:1px solid #000000;border-right:1px solid #000000; height:1000px;min-height:100%;}

#wrapper .link_main .link_list_top{ margin-top:5px; width:100%;}
#wrapper .link_main .link_list{ margin-top:15px; width:100%;}

#wrapper .link_main .link_title{ background:url(../img3/title_link.gif) no-repeat; width:584px; height:21px; text-indent:-9999px;}
#wrapper .link_main .link_img_bn{float:left!important; width:183px; display:block; height:130px; margin:3px 3px 15px 3px;}
#wrapper .link_main .link_img_bn .link_text{font-size:14px; font-weight:bold; margin-top:5px; padding:3px 0;}
#wrapper .link_main .link_img_bn .link_url{font-size:9px; color:#888888;}
#wrapper .link_main .link_gallery{width:570px; margin:0 auto;}
#wrapper .link_main .link_01 a{ background:url(../img3/link_img_01.jpg) no-repeat; width:183px; height:91px; display:block;}
#wrapper .link_main .link_01 a:hover{ background:url(../img3/link_img_01_over.jpg) no-repeat;width:193px; height:91px;display:block;}
#wrapper .link_main .link_02 a{ background:url(../img3/link_img_02.jpg) no-repeat; width:183px; height:91px; display:block;}
#wrapper .link_main .link_02 a:hover{ background:url(../img3/link_img_02_over.jpg) no-repeat;width:193px; height:91px;display:block;}
#wrapper .link_main .link_03 a{ background:url(../img3/link_img_03.jpg) no-repeat; width:183px; height:91px; display:block;}
#wrapper .link_main .link_03 a:hover{ background:url(../img3/link_img_03_over.jpg) no-repeat;width:193px; height:91px;display:block;}
#wrapper .link_main .link_04 a{ background:url(../img3/link_img_04.jpg) no-repeat; width:183px; height:91px; display:block;}
#wrapper .link_main .link_04 a:hover{ background:url(../img3/link_img_04_over.jpg) no-repeat;width:193px; height:91px;display:block;}
#wrapper .link_main .link_05 a{ background:url(../img3/link_img_05.jpg) no-repeat; width:183px; height:91px; display:block;}
#wrapper .link_main .link_05 a:hover{ background:url(../img3/link_img_05_over.jpg) no-repeat;width:193px; height:91px;display:block;}
#wrapper .link_main .link_06 a{ background:url(../img3/link_img_06.jpg) no-repeat; width:183px; height:91px; display:block;}
#wrapper .link_main .link_06 a:hover{ background:url(../img3/link_img_06_over.jpg) no-repeat;width:193px; height:91px;display:block;}
#wrapper .link_main .link_07 a{ background:url(../img3/link_img_07.jpg) no-repeat; width:183px; height:91px; display:block;}
#wrapper .link_main .link_07 a:hover{ background:url(../img3/link_img_07_over.jpg) no-repeat;width:193px; height:91px;display:block;}
#wrapper .link_main .link_08 a{ background:url(../img3/link_img_08.jpg) no-repeat; width:183px; height:91px; display:block;}
#wrapper .link_main .link_08 a:hover{ background:url(../img3/link_img_08_over.jpg) no-repeat;width:193px; height:91px;display:block;}
#wrapper .link_main .link_09 a{ background:url(../img3/link_img_09.jpg) no-repeat; width:183px; height:91px; display:block;}
#wrapper .link_main .link_09 a:hover{ background:url(../img3/link_img_09_over.jpg) no-repeat;width:193px; height:91px;display:block;}
#wrapper .link_main .link_100 a{ background-color:#FFFFFF; width:183px; height:91px; display:block;}
#wrapper .link_main .link_100 a:hover{ width:193px; height:91px;display:block;}

#popup
{z-index: 99;animation: 1s ease 0s alternate none infinite transform-7; transform: perspective(400px) rotateY(0deg);}

/*------------------------PASWORD------------------------*/
#pasward_main{margin:0 auto; width:584px;position:relative;}
#pasward_main #pasward{
	width:300px;
	height:361px;
	margin:100px auto 0 auto; 
	text-align:center;
	}
#pasward_main input#pasword_btn{
    width:300px;
    height:361px;
	background-image:url(../img/pasword_btn.jpg)!important;
	background-position:left top;
	background-repeat:no-repeat;
	display:block;
	border:none;
	overflow:hidden;
	margin:0;
	padding:0;
}
#pasward_main input#pasword_btn:hover{
    width:300px;
    height:361px;
	background:url(../img/pasword_btn_over.jpg)no-repeat left top!important;
	display:block;
	border:none;
	overflow:hidden;
	margin:0;
	padding:0;
}
.pasward_works{ margin:0 auto; text-align:center;width:564px;}
.img_border{border:1px solid #171715;}
.m_b200{ margin-bottom:200px;}
.m_b100{ margin-bottom:100px;}
.m_b80{ margin-bottom:80px;}
.m_b60{ margin-bottom:60px;}
.m_b50{ margin-bottom:50px;}
/*------------------------PASWORD------------------------*/

/*------------------------"2WAY"------------------------*/

.box {

  width: 100%;

  height: 1320px;
	
  min-height:1320px;

  display: flex;

  align-items: center; /* 縦方向中央揃え */

  justify-content: center; /* 横方向中央揃え */

  flex-direction: column;

}

.box__bg_black {

  background-color: #333;

}

.box__bg_gray {

  background-color: #ccc;

}

.box__bg_photo {

	
  background: #000000;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  margin-top:100vh;

}

p {

  margin: 0;

  padding: 0;

  line-height: 1;

}
.iframe_box{
	height: 100%;
	width: 100%;
}
.arrow {
    position: fixed;
    bottom: 25px;
    /* top: 0; */
    left: 50%;
    margin-left: -24px;
    z-index: 100;
	-webkit-transition:all 0.3s ;
	-moz-transition:all 0.3s ;
	transition:all 0.3s ;
	background: url(../img3/arrow.png) no-repeat;
	width: 48px;
	height: 29px;
	opacity: 1;	
	display: block;
}
.arrow:hover{
	opacity: 0.85 ;
	color:#b69e71;
	background: url(../img3/arrow_over.png) no-repeat;
	width: 48px;
	height: 29px;
	display: block;
}
.arrow a{ 
	display:block;
	width: 48px;
	height: 29px;
	text-shadow: 0 0 1px #000;
}

/*------------------------"2WAY"------------------------*/

/*------------------------"#wrapper_sec"------------------------*/

#wrapper_sec{
     width: 100%;
     position: absolute;
   	 height: 100%!important;
     min-height: 100%!important;
	 background-color:#fcfcf6!important;
	 z-index: 1;
	 right: 0;
	 bottom: 0;
	 top:0;
	 left:0;
	 background-size: 100% 100%;
	 background-position: center center;
	 background-size: contain;
	 object-fit: cover; /*cover video background */	
	 font-size: 10px;
	 font-family: "source-han-serif-japanese","Osaka","Helvetica","sans-serif",serif;
	 letter-spacing: 10px;
	 line-height: 1.5;
	 font-weight:normal;
}
#wrapper_sec_bg{
	background: #171715!important;
}
/*
.top_line{
	 border-top:15px solid #171715;
}
*/
#wrapper_sec .headder{
	width: 584px;
    height: 100px;
    position: absolute;
    margin: 26px 0 20px 0;
    top: 0;
    right: 87px;
}
#wrapper_sec .headder .rogo{
	width: 425px;
    height: 185px;
	position:absolute;
	right:0;
	top: 0;
	text-align: center;
	margin: 0 auto;
	padding: 0;
}
#wrapper_sec .headder .rogo_name{
	background:url(../img3/menu__rogo_name_portfolio.png) no-repeat;
	width:590px;
	height:145px;
	position:absolute;
	text-indent:-9999px;
	right: 0px;
	top: 20px;
}

#wrapper_sec .headder .rogo #rogo_link{ width:483px; height:126px; display:block; position:absolute;left: 50px;top: 40px; }
#wrapper_sec .headder .rogo_name #rogo_link_name{ width:590px; height:145px; display:block; position:absolute;left: 0px;top: 40px; }

#wrapper_sec .head_line{background:url(../img3/head_bg.gif) repeat-x; width:50%; height:7px; text-indent:-9999px;}
#wrapper_sec .submain_l .date{font-size:35px;font-family:"freight-big-pro","Helvetica", sans-serif,"Book Antiqua","Arial";font-weight:bold;text-shadow: 0 0 1px #000;}
#wrapper_sec .submain_l .mail{font-size:20px;font-family:"freight-big-pro","Helvetica", sans-serif,"Book Antiqua","Arial";font-weight:bold;}
#horizontal_menu{font-size:30px;font-family:"freight-big-pro","Helvetica", sans-serif,"Book Antiqua","Arial";font-weight:bold;}
#wrapper_sec .submain,#wrapper_sec .submain2,#wrapper_sec .submain3,#wrapper_sec .submain4,#wrapper_sec .submain5,#wrapper_sec .submain6,#wrapper_sec .submain7,#wrapper_sec .submain8,#wrapper_sec .submain9{     
    margin: 0px auto 0 auto;
    z-index: 9900;
	position: absolute;
    left: 3vw;
    top:75vh;
	-webkit-transition: all 1s ease-out 2s;
	-moz-transition: all 1s ease-out 2s;
	-o-transition: all 1s ease-out 2s;
	transition: all 1s ease-out 2s;
	opacity:1;
}
#wrapper_sec .submain.active,#wrapper_sec .submain2.active,#wrapper_sec .submain3.active,#wrapper_sec .submain4.active,#wrapper_sec .submain5.active,#wrapper_sec .submain6.active,#wrapper_sec .submain7.active,#wrapper_sec .submain8.active,#wrapper_sec .submain9.active{
		-webkit-transform: translate3d(0px, 0px, 0px);
		-moz-transform: translate3d(0px, 0px, 0px);
		-ms-transform:translate3d(0px, 0px, 0px);
		transform: translate3d(0px, 0px, 0px);
	opacity: 1;
}

#wrapper_sec .submain_l{}
#wrapper_sec .submain_l .address{background:url(../img3/submain_url.gif) no-repeat; width:124px; height:16px; text-indent:-9999px; padding-bottom:10px;}
#wrapper_sec .submain_l .mail a{ height:17px; margin-bottom:20px;margin-top:5px;display:block;font-family:"freight-big-pro","Helvetica", sans-serif,"Book Antiqua","Arial";color: #171715;font-size: 12px;}
#wrapper_sec .submain_l .mail a:hover{ height:17px;margin-bottom:20px; margin-top:5px;font-family:"freight-big-pro","Helvetica", sans-serif,"Book Antiqua","Arial";font-size: 12px;}
#wrapper_sec .submain_l .flash a{height:14px; margin-top:5px;display:block;font-family:"freight-big-pro","Helvetica", sans-serif,"Book Antiqua","Arial";color: #171715;font-size: 12px;}
#wrapper_sec .submain_l .flash a:hover{ height:14px; margin-top:5px;font-family:"freight-big-pro","Helvetica", sans-serif,"Book Antiqua","Arial";font-size: 12px;}
#wrapper_sec .submain_line{float:left; width:1px;}
#wrapper_sec .submain_r{float:left; width:40%;padding-left:30px;margin-top: 10px;}
#wrapper_sec .submain_r ul li{}
#wrapper_sec .submain_r li{ line-height:2;letter-spacing: 3.5px!important;}
#wrapper_sec .submain_r .portfolio{ background:url(../img3/submain_mark.gif) no-repeat; background-position:0 3px;height:16px;}
#wrapper_sec .submain_r .news{ background:url(../img3/submain_mark.gif) no-repeat!important; background-position:0 3px;height:16px;}
#wrapper_sec .submain_r .news_text{font-family:"Book Antiqua", "Arial", "Helvetica", sans-serif; font-size:14px; line-height:1;padding-left:18px; font-weight:bold; vertical-align:middle;}
.f10{font-size:10px;}
.f8{font-size:8px;width:440px;}

#wrapper_sec .menu_top_line{
	background:url(../img3/menu_bg_1.gif) repeat-x; 
	width: 41vw;
    height: 10px;
	text-indent:-9999px;
	transition-property: background-position;
	transition-timing-function: linear;
	transition-duration: 3600s;
    position: absolute;
    right: 0;
}

/*-----------menu---------*/
#wrapper_sec .menu{
	background: url(../img3/menu_bg_2.gif) repeat-x;
	width: 100%;
	height: 41px;
	position: relative;
/*f-bottom:2px solid #CCCCCC;*/
}

#wrapper_sec .menu .menu_bg{position:relative; width:584px; text-align:center; margin:0 auto;}

#wrapper_sec .menu ul#menu{
	width:584px;
	height:41px;
	z-index:100;
	top:0;
	left:25%;
	margin:0 auto;
	text-align:center;
}

#wrapper_sec .menu ul#menu li{height:41px; float:left; border-right:1px solid #787877;}
/*-----------------------------------------*/
#wrapper_sec #slide {
	position:absolute;
	bottom:1px;
	height:2px;
	background:#ee4123;
	z-index:10;
	left: 320px;
}

#wrapper_sec .menu_box{ 
	width:584px;
	height:41px;
	margin:0 auto;
	text-align:center;
}
#wrapper_sec .menu_box  #menu_text_news {
	position: absolute;
	height: 15px;
	z-index: 100;
	width: 70px;
	height: 15px;
	top:25px;
	left: 248px;
	display: block;
	color: #91835F;
	font-size: 35px;
    font-family: "freight-big-pro","Helvetica", sans-serif,"Book Antiqua","Arial";
    font-weight: bold;
    text-shadow: 0 0 1px #000;	
}

#wrapper_sec .menu_box  #menu_text_news {
	position: absolute;
	height: 15px;
	z-index: 100;
	font-size: 8px;
	width: 70px;
	height: 15px;
	top: 25px;
	left: 113px;
	display: block;
	color: #91835F;
}
#wrapper_sec #menu_text_portfolio {
	position: absolute;
	height: 15px;
	z-index: 10;
	font-size: 8px;
	width: 70px;
	height: 15px;
	top: 25px;
	left: 245px;
	display: block;
	color: #91835F;
}
#wrapper_sec #menu_text_link {
	position: absolute;
	height: 15px;
	z-index: 10;
	font-size: 8px;
	width: 70px;
	height: 15px;
	top: 25px;
	left: 378px;
	display: block;
	color: #91835F;
}
/*-----------menu---------*/
#bg_champagne{
	width:100%; 
	height: 1000px; 
	margin: 0 auto; 
	text-align: center; 
	background-size: cover; 
	background:url(../img3/bg_champagne.png)repeat-x top;
}

.p-l10{padding-left:10px;}
.p-l18{padding-left:18px;}
.pr-15{padding-right:15px;}
.pr-30{padding-right:30px;}
.m-30{ margin:30px;}
.m-30 a{color: #fcfcf6;display: block;cursor: pointer; width: 200px; height: 175px;}
.m-30 a:hover{color: #b69e71;display: block;}

#wrapper_sec .main{ margin:30px auto 0px auto; width:584px; min-height:780px;}
#wrapper_sec .top_main{ margin:25px auto 35px auto; width:584px;  height:1000px;min-height:100%;}

/*-----------portfolio---------*/
#wrapper_sec .portfolio_main{ 
	margin:0 auto 0 auto; 
	width:80%; 
	text-align:center; 
	min-height:100%!important;
	height:100%!important;
    height:auto !important;
	background-color:none; 
	opacity:1;
	position:absolute; 
	top:0px!important;
	left: 0; 
	right: 0; 
	z-index:100;
	cursor: pointer;
}
#wrapper_sec .portfolio_main .portfolio_title{ 
	width:100%; 
	height:21px; 
	color: #fcfcf6;
	margin: 80px 0; 
	font-size: 50px;
	font-family:"freight-big-pro","Book Antiqua", "Arial", "Helvetica", sans-serif;	
    font-weight:lighter;
    letter-spacing: 60px;	
}

#wrapper_sec #portfolio_main3{ margin:0 auto; width:100%;position:relative; }
#wrapper_sec #portfolio_main3 .portfolio_title3{width:100%;height:21px;padding-bottom:1px;margin:0 auto;color: #fcfcf6;}
#wrapper_sec .portfolio_main .portfolio_list{ margin:20px 0 0 0; padding:0;width:584px;font-weight:lighter;}
#wrapper_sec .portfolio_main .portfolio_list li{ float:left; width:184px; height:145px; padding-bottom:10px;letter-spacing: 8px;font-weight:lighter;}
#wrapper_sec .portfolio_main .portfolio_list_title2{ font-family:"Arial", "Helvetica",sans-serif; width:150px; margin:10px auto 10px auto; text-align:center;color:#fcfcf6;letter-spacing: 8px;text-shadow: 0 0 1px #000;font-weight:lighter;}
#wrapper_sec .portfolio_main .portfolio_list_title3{ font-family:"Arial", "Helvetica",sans-serif; width:150px; margin:10px auto 10px auto; text-align:center; padding:2px 0;text-align:center; width:564px;color:#fcfcf6;letter-spacing: 8px;text-shadow: 0 0 1px #000;font-weight:lighter;}
#wrapper_sec .portfolio_main .portfolio_list_title4{ font-family:"Arial", "Helvetica",sans-serif; margin:10px auto 10px auto; text-align:center; width:564px;color:#fcfcf6;letter-spacing: 8px;text-shadow: 0 0 1px #000;font-weight:lighter;}

#wrapper_sec .portfolio_main .portfolio_list_thumbnail li{ float:left; width:50px; height:50px; padding-bottom:10px;letter-spacing: 8px;}

#wrapper_sec .portfolio_main .portfolio_graphic{ width:584px;}
#wrapper_sec .portfolio_main .portfolio_graphic li{ float:left; width:50px; height:50px; padding-bottom:10px;}

#wrapper_sec .dis-non{ display:none;}


/*-----------NEWS---------*/
#wrapper_sec .news_main{ 
    position: absolute;
    top: 10vh!important;
    left: 0;
    right: 0;
	margin:0px auto 0px auto; 
	width:80%;
	text-shadow: 0 0 1px #000;
	background-color: none;
    opacity: 1;
    z-index: 100;
    cursor: pointer;
	height: 90vh !important; 
	touch-action: pan-y pinch-zoom;
	display: block;
}
#wrapper_sec .news_main_scroll{
    position: absolute;
    top:10vh!important;
    left: 0;
    right: 0;
	height: 75vh!important;
	margin:0px auto 0px auto;
	width:90%;
	border-left:1px solid #fcfcf6;
	border-right:1px solid #fcfcf6;
	text-shadow: 0 0 1px #000;
	background: #171715;
	overflow: auto;
	background: #171715;
    z-index: 9999!important;
	    -webkit-transition: all 0.7s ease-out 1s;
		-moz-transition: all 0.7s ease-out 1s;
		-o-transition: all 0.7s ease-out 1s;
		transition: all 0.7s ease-out 1s;
    opacity:0.8;
}
#wrapper_sec .news_main_scroll.active{
    opacity:0.8;
}
#wrapper_sec .news_main_scroll .news_title{ background:url(../img3/title_news.gif) no-repeat; width:584px; height:21px; text-indent:-9999px;}
#wrapper_sec .menu ul#menu li.news{ width:105px; text-indent:-9999px; background:url(../img3/menu_news.png) no-repeat 23px 8px;text-indent:-9999px; position:relative;}
#wrapper_sec #domain{font-family: 'freight-big-pro',Arial, Helvetica, 'sans-serif';font-weight: bold; font-size: 17px; margin: 10px 0 10px 0;}

#wrapper_sec .news_main_scroll dl.news_list{
		background-image:url(../img3/submain_mark.gif)!important;
		background-position:0px 1px;
		background-repeat:no-repeat;
		border-bottom:1px solid #AEAEA5; 
		height:50px; 
        margin: 10px auto 5em auto;
		width: 70vw;
		display:block;
        padding-bottom:7em;
}

#wrapper_sec .news_main_scroll dl.news_list dt{color:#91835F; font-size:10px; padding-left:15px; padding-bottom:10px; font-weight:bold;}
#wrapper_sec .news_main_scroll dl.news_list dd{
		font-size:12px;
		color: #fcfcf6;
		letter-spacing: 6px;
		text-shadow: 0 0 1px #000;
		font-weight: lighter;
}

/*-----------LINK---------*/
#wrapper_sec .link_main{ margin:25px auto 35px auto; width:584px; border-left:1px solid #000000;border-right:1px solid #000000; height:1000px;min-height:100%;}

#wrapper_sec .link_main .link_list_top{ margin-top:5px; width:100%;}
#wrapper_sec .link_main .link_list{ margin-top:15px; width:100%;}

#wrapper_sec .link_main .link_title{ background:url(../img3/title_link.gif) no-repeat; width:584px; height:21px; text-indent:-9999px;}
#wrapper_sec .link_main .link_img_bn{float:left!important; width:183px; display:block; height:130px; margin:3px 3px 15px 3px;}
#wrapper_sec .link_main .link_img_bn .link_text{font-size:14px; font-weight:bold; margin-top:5px; padding:3px 0;}
#wrapper_sec .link_main .link_img_bn .link_url{font-size:9px; color:#888888;}
#wrapper_sec .link_main .link_gallery{width:570px; margin:0 auto;}
#wrapper_sec .link_main .link_01 a{ background:url(../img3/link_img_01.jpg) no-repeat; width:183px; height:91px; display:block;}
#wrapper_sec .link_main .link_01 a:hover{ background:url(../img3/link_img_01_over.jpg) no-repeat;width:193px; height:91px;display:block;}
#wrapper_sec .link_main .link_02 a{ background:url(../img3/link_img_02.jpg) no-repeat; width:183px; height:91px; display:block;}
#wrapper_sec .link_main .link_02 a:hover{ background:url(../img3/link_img_02_over.jpg) no-repeat;width:193px; height:91px;display:block;}
#wrapper_sec .link_main .link_03 a{ background:url(../img3/link_img_03.jpg) no-repeat; width:183px; height:91px; display:block;}
#wrapper_sec .link_main .link_03 a:hover{ background:url(../img3/link_img_03_over.jpg) no-repeat;width:193px; height:91px;display:block;}
#wrapper_sec .link_main .link_04 a{ background:url(../img3/link_img_04.jpg) no-repeat; width:183px; height:91px; display:block;}
#wrapper_sec .link_main .link_04 a:hover{ background:url(../img3/link_img_04_over.jpg) no-repeat;width:193px; height:91px;display:block;}
#wrapper_sec .link_main .link_05 a{ background:url(../img3/link_img_05.jpg) no-repeat; width:183px; height:91px; display:block;}
#wrapper_sec .link_main .link_05 a:hover{ background:url(../img3/link_img_05_over.jpg) no-repeat;width:193px; height:91px;display:block;}
#wrapper_sec .link_main .link_06 a{ background:url(../img3/link_img_06.jpg) no-repeat; width:183px; height:91px; display:block;}
#wrapper_sec .link_main .link_06 a:hover{ background:url(../img3/link_img_06_over.jpg) no-repeat;width:193px; height:91px;display:block;}
#wrapper_sec .link_main .link_07 a{ background:url(../img3/link_img_07.jpg) no-repeat; width:183px; height:91px; display:block;}
#wrapper_sec .link_main .link_07 a:hover{ background:url(../img3/link_img_07_over.jpg) no-repeat;width:193px; height:91px;display:block;}
#wrapper_sec .link_main .link_08 a{ background:url(../img3/link_img_08.jpg) no-repeat; width:183px; height:91px; display:block;}
#wrapper_sec .link_main .link_08 a:hover{ background:url(../img3/link_img_08_over.jpg) no-repeat;width:193px; height:91px;display:block;}
#wrapper_sec .link_main .link_09 a{ background:url(../img3/link_img_09.jpg) no-repeat; width:183px; height:91px; display:block;}
#wrapper_sec .link_main .link_09 a:hover{ background:url(../img3/link_img_09_over.jpg) no-repeat;width:193px; height:91px;display:block;}
#wrapper_sec .link_main .link_100 a{ background-color:#FFFFFF; width:183px; height:91px; display:block;}
#wrapper_sec .link_main .link_100 a:hover{ width:193px; height:91px;display:block;}

#popup
{z-index: 99;animation: 1s ease 0s alternate none infinite transform-7; transform: perspective(400px) rotateY(0deg);}

/*------------------------PASWORD------------------------*/
#pasward_main{margin:0 auto; width:584px;position:relative;}
#pasward_main #pasward{
	width:300px;
	height:361px;
	margin:100px auto 0 auto; 
	text-align:center;
	}
#pasward_main input#pasword_btn{
    width:300px;
    height:361px;
	background-image:url(../img/pasword_btn.jpg)!important;
	background-position:left top;
	background-repeat:no-repeat;
	display:block;
	border:none;
	overflow:hidden;
	margin:0;
	padding:0;
}
#pasward_main input#pasword_btn:hover{
    width:300px;
    height:361px;
	background:url(../img/pasword_btn_over.jpg)no-repeat left top!important;
	display:block;
	border:none;
	overflow:hidden;
	margin:0;
	padding:0;
}
.pasward_works{ margin:0 auto; text-align:center;width:564px;}
.img_border{border:1px solid #171715;}
.m_b200{ margin-bottom:200px;}
.m_b100{ margin-bottom:100px;}
.m_b80{ margin-bottom:80px;}
.m_b60{ margin-bottom:60px;}
.m_b50{ margin-bottom:50px;}
/*------------------------PASWORD------------------------*/

/*------------------------"isotope"------------------------*/

.isotope {
    width: 100vw;
    height: 100vh;
	background:#171715;
	text-align:center;
	margin: 0 auto;
	clear:both;
	display:block;
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
	position:relative;
}
#to,
#bo {
    height: 0;
    overflow: hidden;
    display: block;
    clear: both;
}

.isotope .item {
	width:12.5%;
	/*height:12.5%!important;*/
	padding:0;
	margin:0;
	overflow:hidden;
	position:relative;
	line-height:0;
	z-index:1;
	float:left;
	display:inline-block;
	background:-webkit-gradient(linear, left top, right top, from(#000), to(#000));
	background:-moz-linear-gradient(top left, #000, #000);
	background:-ms-linear-gradient(top left, #000, #000);
	background:-o-linear-gradient(top left, #000, #000);
	background:linear-gradient(to bottom right, #000, #000);
	-webkit-transition-property:-webkit-transform, opacity;
	-moz-transition-property:-moz-transform, opacity;
	-ms-transition-property:-moz-transform, opacity;
	-o-transition-property:-moz-transform, opacity;
	transition-property:transform, opacity;
    -webkit-transition-duration:0.8s;
    -moz-transition-duration:0.8s;
    -ms-transition-duration:0.8s;
    -o-transition-duration:0.8s;
    transition-duration:0.8s;
}

.isotope .item img {display:inline-block; line-height:0;}
.isotope .site {position:relative; width:100%; height:100%; background: #000;}
#isotope_main img {max-width:100%; height:auto;}
#isotope_main {
	clear:both; 
	display:block; 
	position:absolute; 
	width:100%;
}
#isotope_main:after {content:""; height:0; display:block; clear:both;}

.col {width:100%;}
.col:after {content:""; clear:both; display:block; height:0; visibility:hidden;}

.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9{float:left; padding:0; margin:0 2% 2% 0;}

.col-2 {width:60%; /*47.5% - 49%*/}
.col-3 {width:45%; /*30% - 32%*/}
.col-4 {width:30%; /*20% - 23.5%*/}
.col-5 {width:27%; /*15% - 18.4%*/}
.col-6 {width:24%; /*12.5% - 15%*/}
.col-7 {width:21%; /*12.5% - 15%*/}
.col-8 {width:18%; /*12.5% - 15%*/}
.col-9 {width:15%; /*12.5% - 15%*/}

.col-2:nth-child(even),
.col-3:nth-child(3), .col-3:nth-child(6),
.col-4:nth-child(4), .col-4:nth-child(8),
.col-5:nth-child(5), .col-5:nth-child(10),
.col-6:nth-child(6), .col-6:nth-child(12),
.col-7:nth-child(7), .col-7:nth-child(14),
.col-8:nth-child(8), .col-8:nth-child(16),
.col-9:last-child {float:right; margin:0 0 2% 0;}

.col-2:nth-child(odd),
.col-3:nth-child(2), .col-2:nth-child(8),
.col-4:nth-child(3), .col-3:nth-child(10),
.col-5:nth-child(4), .col-4:nth-child(12),
.col-6:nth-child(5), .col-5:nth-child(14),
.col-7:nth-child(6), .col-6:nth-child(16),
.col-8:nth-child(7), .col-7:nth-child(18),
.col-9:nth-child(8),
.col-10:nth-last-child(2) {margin:0 0 2% 0;}

.col-2:nth-child(3),
.col-3:nth-child(4),
.col-4:nth-child(5),
.col-5:nth-child(6),
.col-6:nth-child(7),
.col-7:nth-child(8),
.col-8:nth-child(9),
.col-9:nth-child(10) {clear:both;}
/******************/

@-webkit-keyframes rotateh {
0% {-webkit-transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);}
}
@-moz-keyframes rotateh {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
@-o-keyframes rotateh {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
@keyframes rotateh {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
/*------------------------"isotope"------------------------*/


/*------------------------"portfolio_btn"------------------------*/
.portfolio_btn {
  text-decoration: none;
  border: 5px solid #000;
  width: 184px!important;
  height: 116px!important;
  position: relative;
  box-sizing: border-box;
}
.change-border01::after,
.change-border01::before,
.change-border01__inner::after,
.change-border01__inner::before {
  background-color: #b69e71;
  content: '';
  display: block;
  position: absolute;
  z-index: 10;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  box-sizing: border-box; 
  width: 184px;
  height: 116px;
  top:0;
  left:0;
}
/* 左上へ配置 */
.change-border01::after {
    height: 5px;
    left: -5px;
    top: -5px;
    width: 0px;
}
/* 右下へ配置 */
.change-border01::before {
  bottom: -5px;
  height: 5px;
  right: -5px;
  width: 0px;
}
/* 左下へ配置 */
.change-border01__inner::after {
  bottom: -5px;
  height: 0px;
  left: -5px;
  width: 5px;
}
/* 右下へ配置 */
.change-border01__inner::before {
  height: 0px;
  right: -5px;
  top: -5px;
  width: 5px;
}

/* hover */
.change-border01:hover::after,
.change-border01:hover::before {
  width: 100%;
  width: calc(100% + 5px);
}
.change-border01:hover .change-border01__inner::after,
.change-border01:hover .change-border01__inner::before {
  height: 100%;
  height: calc(100% + 5px);
}
/*------------------------"portfolio_btn"------------------------*/

/*------------------------"#wrapper_sec"------------------------*/

/*------------------------"#DOOR"------------------------*/
.carbonAds {
	background-color: rgba(000, 000, 000, .03);
	padding: 1rem;
	width: 130px;
	z-index: 1000;
}
#carbonads .carbon-wrap .carbon-text {
	padding-top: 10px;
	display: block;
}
#carbonads a {
	color: #999;
}
[data-doorman] {
	display: inline-block;
	visibility: hidden;
}
/*------------------------"#DOOR"------------------------*/


/*------------------------"#ScrollTrigger"------------------------*/

div.block
{
	position:relative;
	height: 100vh;
	padding: 0vh 20vw 0 20vw;
}

div.block:nth-child(1n)
{
	background: none;
}

div.block:nth-child(2n)
{
	background: none;
}

div.block:nth-child(3n)
{
	background: none;
}


/**
 * Animations
 */
.invisible {
	transition: opacity 1.5s ease;
	opacity: 0.0;
}

.visible {
	transition: opacity 1,5s ease;
	opacity: 1.0;
}
.fromLeftIn
{
	transition: transform 1.0s ease, opacity 0.5s ease;
	
	transform: translate(50px,0);
	opacity: 1.0;
}

.fromLeftOut
{
	transition: transform 1.0s ease, opacity 0.5s ease;
	
	transform: translate(-10px,0);
	opacity: 0.0;
}
.fromRightIn
{
	transition: transform 1.0s ease, opacity 0.5s ease;
	
	transform: translate(0,0);
	opacity: 1.0;
}

.fromRightOut
{
	transition: transform 1.0s ease, opacity 0.5s ease;
	
	transform: translate(10px, 0);
	opacity: 1.0;
}


.fromTopIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0,0);
	opacity: 1.0;
}

.fromTopOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0,-10px);
	opacity: 0.0;
}

.fromBottomIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0,0);
	opacity: 1.0;
}

.fromBottomOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform:translate(0,10px);
	opacity: 0.0;
}

.UpIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(1.0,1.0);
	opacity: 1.0;
}

.UpOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(1.3,1.3);
	opacity: 0.0;
}

.DownIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(1.0,1.0);
	opacity: 1.0;
}

.DownOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0.7,0.7);
	opacity: 0.0;
}
/*------------------------"#ScrollTrigger"------------------------*/

/*---------------------------------------gallery */
#gallery2{
		z-index: 10;
		display: block;
		position: absolute;
		left: 0;
		margin-left: -300px;
	    -webkit-transition: all 0.7s ease-out;
		-moz-transition: all 0.7s ease-out;
		-o-transition: all 0.7s ease-out;
		transition: all 0.7s ease-out;
		opacity: 0;
}
#gallery2.active{
		-webkit-transform: translate3d(300px, 0px, 0px);
		-moz-transform: translate3d(300px, 0px, 0px);
		-ms-transform:translate3d(300px, 0px, 0px);
		transform: translate3d(300px, 0px, 0px);
		opacity: 1;
}
#gallery3{
		z-index: 10;
		display: block; 
		position: absolute;
		right: 0;
	    -webkit-transition: all 0.7s ease-out;
		-moz-transition: all 0.7s ease-out;
		-o-transition: all 0.7s ease-out;
		transition: all 0.7s ease-out;
		opacity: 0;
}
#gallery3.active{
		-webkit-transform: translate3d(0, 0px, 300px);
		-moz-transform: translate3d(0, 0px, 300px);
		-ms-transform:translate3d(0, 0px, 300px);
		transform: translate3d(0, 0px, 300px);
		opacity: 1;
}
#gallery4{
		z-index: 10;
		display: block; 
		position: absolute;
		left: 0;
		margin-left: -300px;		
	    -webkit-transition: all 0.7s ease-out;
		-moz-transition: all 0.7s ease-out;
		-o-transition: all 0.7s ease-out;
		transition: all 0.7s ease-out;
		opacity: 0;
}
#gallery4.active{
		-webkit-transform: translate3d(300px, 0px, 0px);
		-moz-transform: translate3d(300px, 0px, 0px);
		-ms-transform:translate3d(300px, 0px, 0px);
		transform: translate3d(300px, 0px, 0px);
		opacity: 1;
}
#gallery5{
		z-index: 10;
		display: block; 
		position: absolute;
		right: 0;		
	    -webkit-transition: all 0.7s ease-out;
		-moz-transition: all 0.7s ease-out;
		-o-transition: all 0.7s ease-out;
		transition: all 0.7s ease-out;
		opacity: 0;
}
#gallery5.active{
		-webkit-transform: translate3d(0, 0px, 300px);
		-moz-transform: translate3d(0, 0px, 300px);
		-ms-transform:translate3d(0, 0px, 300px);
		transform: translate3d(0, 0px, 300px);
		opacity: 1;
}
#gallery6{
		z-index: 10;
		display: block; 
		position: absolute;
		left: 0;
		bottom: 0;
		margin-left: -300px;		
	    -webkit-transition: all 0.7s ease-out;
		-moz-transition: all 0.7s ease-out;
		-o-transition: all 0.7s ease-out;
		transition: all 0.7s ease-out;
		opacity: 0;
}
#gallery6.active{
		-webkit-transform: translate3d(300px, 0px, 0px);
		-moz-transform: translate3d(300px, 0px, 0px);
		-ms-transform:translate3d(300px, 0px, 0px);
		transform: translate3d(300px, 0px, 0px);
		opacity: 1;
}
#gallery7{
		z-index: 10;
		display: block; 
		position: absolute;
		right: 0;
	    -webkit-transition: all 0.7s ease-out;
		-moz-transition: all 0.7s ease-out;
		-o-transition: all 0.7s ease-out;
		transition: all 0.7s ease-out;
		opacity: 0;
}
#gallery7.active{
		-webkit-transform: translate3d(0, 0px, 300px);
		-moz-transform: translate3d(0, 0px, 300px);
		-ms-transform:translate3d(0, 0px, 300px);
		transform: translate3d(0, 0px, 300px);
		opacity: 1;
}
#gallery8{
		z-index: 10;
		display: block; 
		position: absolute;
		left: 0;
		margin-left: -300px;		
	    -webkit-transition: all 0.7s ease-out;
		-moz-transition: all 0.7s ease-out;
		-o-transition: all 0.7s ease-out;
		transition: all 0.7s ease-out;
		opacity: 0;
}
#gallery8.active{
		-webkit-transform: translate3d(300px, 0px, 0px);
		-moz-transform: translate3d(300px, 0px, 0px);
		-ms-transform:translate3d(300px, 0px, 0px);
		transform: translate3d(300px, 0px, 0px);
		opacity: 1;
}
#gallery9{
		z-index: 10;
		display: block; 
		position: absolute;
		right: 0;	
	    -webkit-transition: all 0.7s ease-out;
		-moz-transition: all 0.7s ease-out;
		-o-transition: all 0.7s ease-out;
		transition: all 0.7s ease-out;
		opacity: 0;
}
#gallery9.active{
		-webkit-transform: translate3d(0, 0px, 300px);
		-moz-transform: translate3d(0, 0px, 300px);
		-ms-transform:translate3d(0, 0px, 300px);
		transform: translate3d(0, 0px, 300px);
		opacity: 1;
}
#gallery10{
		z-index: 10;
		display: block; 
		position: absolute;
		right: 0;	
	    -webkit-transition: all 0.7s ease-out;
		-moz-transition: all 0.7s ease-out;
		-o-transition: all 0.7s ease-out;
		transition: all 0.7s ease-out;
		opacity: 0;
}
#gallery10.active{
		-webkit-transform: translate3d(0, 0px, 300px);
		-moz-transform: translate3d(0, 0px, 300px);
		-ms-transform:translate3d(0, 0px, 300px);
		transform: translate3d(0, 0px, 300px);
		opacity: 1;
}
/*---------------------------------------gallery */

/*---------------------------------------article-content */
#article-content2{
       display: inline-block;
	   position: absolute;
	   right: 0;
	   top: 50px;
       width: 40%;
       min-height: 100vh;
       text-align: left;
	   z-index: 0;
}
#article-content2.active{
}
#article-content3{
       display: inline-block;
	   position: absolute;
	   left: 0;
	   top: 50px;
       width: 40%;
       min-height: 100vh;
       text-align: left;
	   z-index: 0;
}
#article-content3.active{
}
#article-content4{
       display: inline-block;
	   position: absolute;
	   right: 0;
	   top: 50px;
       width: 40%;
       min-height: 100vh;
       text-align: left;
	   z-index: 0;
}
#article-content4.active{
}
#article-content5{
       display: inline-block;
	   position: absolute;
	   left: 0;
	   top: 50px;
       width: 40%;
       min-height: 100vh;
       text-align: left;
	   z-index: 0;
}
#article-content5.active{
}
#article-content6{
	   display: inline-block;
	   position: absolute;
	   right: 0;
	   top: 50px;
       width: 40%;
       min-height: 100vh;
       text-align: left;
	   z-index: 0;
}
#article-content6.active{
}
#article-content7{
       display: inline-block;
	   position: absolute;
	   left: 0;
	   top: 50px;
       width: 40%;
       min-height: 100vh;
       text-align: left;
	   z-index: 0;
}
#article-content7.active{
}
#article-content8{
       display: inline-block;
	   position: absolute;
	   right: 0;
	   top: 50px;
       width: 40%;
       min-height: 100vh;
       text-align: left;
	   z-index: 0;
	   font-weight: bold;
}
#article-content8.active{
}
#article-content9{
       display: inline-block;
	   position: absolute;
	   left: 0;
	   top: 50px;
       width: 40%;
       min-height: 100vh;
       text-align: left;
	   z-index: 0;
}
#article-content9.active{
}
#article-content10{
       display: inline-block;
	   position: absolute;
	   left: 0;
	   top: 50px;
       width: 40%;
       min-height: 100vh;
       text-align: left;
	   z-index: 0;
}
#article-content10.active{
}
wrapper_sec #head_line,#wrapper_sec #head_line2,#wrapper_sec #head_line3,#wrapper_sec #head_line4,#wrapper_sec #head_line5,#wrapper_sec #head_line6,#wrapper_sec #head_line7,#wrapper_sec #head_line8,#wrapper_sec #head_line9,#wrapper_sec #head_line10{
	background:url(../img3/head_bg.png) repeat-x!important; 
	width:100%; 
	height:7px;
    position: absolute;
    top: 250px;
	left: 500px;
	background-position: bottom;
	transition: all 3s ease-out 0.5s;	
	opacity: 0;
	z-index: -999;
}
#wrapper_sec #head_line.active, #wrapper_sec #head_line2.active, #wrapper_sec #head_line3.active, #wrapper_sec #head_line4.active, #wrapper_sec #head_line5.active, #wrapper_sec #head_line6.active, #wrapper_sec #head_line7.active, #wrapper_sec #head_line8.active, #wrapper_sec #head_line9.active,#wrapper_sec #head_line10.active {
    -webkit-transform: translate3d(-500px, 0, 0px);
    -moz-transform: translate3d(-500px, 0, 0px);
    -ms-transform: translate3d(-500px, 0, 0px);
    transform: translate3d(-500px, 0, 0px);
    opacity: 1;
}
#wrapper_sec #rogo,#wrapper_sec #rogo2,#wrapper_sec #rogo3,#wrapper_sec #rogo4,#wrapper_sec #rogo5,#wrapper_sec #rogo6,#wrapper_sec #rogo7,#wrapper_sec #rogo8,#wrapper_sec #rogo9,#wrapper_sec #rogo10{
	width:400px;
	height:150px;
	position: absolute;
	top: 5vh;
	left: 2vw;
	margin:0 auto;
	background:url(../img3/name.png) no-repeat;
	    -webkit-transition: all 0.7s ease-out 2s;
		-moz-transition: all 0.7s ease-out 2s;
		-o-transition: all 0.7s ease-out 2s;
		transition: all 0.7s ease-out 2s;
	opacity: 0;
}
#rogo_photo{
	width:400px;
	height:150px;
	position: absolute;
	top: 4vh;
	left: 0vw;
	margin:0 auto;
	background:url("../img3/name.png")no-repeat;
	z-index: 9999;
}
#wrapper_sec #rogo.active,#wrapper_sec #rogo2.active,#wrapper_sec #rogo3.active,#wrapper_sec #rogo4.active,#wrapper_sec #rogo5.active,#wrapper_sec #rogo6.active,#wrapper_sec #rogo7.active,#wrapper_sec #rogo8.active,#wrapper_sec #rogo9.active{
	opacity: 1;
}
#wrapper_sec .portfolio_main .portfolio_content{
	width:100%;
	    -webkit-transition: all 0.7s ease-out 0s;
		-moz-transition: all 0.7s ease-out 0s;
		-o-transition: all 0.7s ease-out 0s;
		transition: all 0.7s ease-out 0s;
	opacity: 0;
	z-index: 9999;
	overflow: auto;
	touch-action:pan-y pinch-zoom!important;
	height: 80vh!important;
	margin-bottom:1px;
	cursor: pointer;
}
::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 10px;
}
::-webkit-scrollbar-thumb {
    background: #EE4125;
}
::-webkit-scrollbar-track{
  background: #fcfcf6;
}

#wrapper_sec .portfolio_main .portfolio_content.active{
	opacity: 1;
	z-index: 9999;
}
#wrapper_sec .portfolio_main .portfolio_content .portfolio_content_list{
	display: block; 
	width: 100%;
	height: 35vh!important;
	margin: 0 auto 3vh auto;
	padding: 0;
	z-index: 1;
}
#wrapper_sec .portfolio_main .portfolio_content .portfolio_content_list:hover{
	background:#000;
	opacity: 0.5;
	color: #b69e71;
}
#wrapper_sec .portfolio_main .portfolio_content .portfolio_content_list_left01{
    background: url(../img3/imgsec/imgsec_photograph/imgsec_photograph_21.jpg) no-repeat;
    background-size: cover;
    background-position: 0px -90px;
    width: 100%;
    height: 35vh;
    display: block;
    z-index: 10;
	position: relative;
	margin-bottom: 5vh;
}
#wrapper_sec .portfolio_main .portfolio_content .portfolio_content_list_left02{
	background:url(../img3/imgsec/imgsec_hanger_01.png) no-repeat;
	background-position: 0 -100px;
	width:  100%;
    height: 35vh;
	background-size: cover;
	display: block;
	position: relative;
	margin-bottom: 5vh;
}
#wrapper_sec .portfolio_main .portfolio_content .portfolio_content_list_left03{
	background:url(../img3/imgsec/imgsec_bossa_07.png) no-repeat;
	background-position: left -100px;
	width:  100%;
    height: 35vh;
	background-size: cover;
	display: block;
	position: relative;
	margin-bottom: 5vh;
}
#wrapper_sec .portfolio_main .portfolio_content .portfolio_content_list_left04{
	background:url(../img3/imgsec/imgsec_dekoboko_01.png) no-repeat;
	background-position: left 0px;
	width:  100%;
    height: 35vh;
	background-size: cover;
	display: block;
	text-indent: -9999;
	position: relative;
	margin-bottom: 5vh;
}
#wrapper_sec .portfolio_main .portfolio_content .portfolio_content_list_left05{
	background:url(../img3/imgsec/imgsec_akari_01.png) no-repeat;
	background-position: left -100px;
	width:  100%;
    height: 35vh;
	background-size: cover;
	display: block;
	text-indent: -9999;
	position: relative;
	margin-bottom: 5vh;
}
#wrapper_sec .portfolio_main .portfolio_content .portfolio_content_list_left06{
	background:url(../img3/imgsec/imgsec_gaito_01.png) no-repeat;
	background-position: left -140px;
	width:  100%;
    height: 35vh;
	background-size: cover;
	display: block;
	text-indent: -9999;
	position: relative;
	margin-bottom: 5vh;
}
#wrapper_sec .portfolio_main .portfolio_content .portfolio_content_list_left07{
	float: left;	
	background:url(../img3/imgsec/imgsec_irust_02.png) no-repeat;
	background-position: left -48px;
	width:  100%;
    height: 35vh;
	background-size: cover;
	display: block;
	text-indent: -9999;
	position: relative;
	margin-bottom: 5vh;
}
#wrapper_sec .portfolio_main .portfolio_content .portfolio_content_list_left08{
	background:url(../img3/imgsec/imgsec_web_01.png) no-repeat;
	background-position:left -135px;
	width:  100%;
    height: 35vh;
	background-size: cover;
	display: block;
	text-indent: -9999;
	position: relative;
	margin-bottom: 5vh;
}
#wrapper_sec .portfolio_main .portfolio_content .portfolio_content_list_left09{
	background:url(../img3/imgsec/imgsec_graphic_17.png) no-repeat;
	background-position: left -100px;
	width:  100%;
    height: 35vh;
	background-size: cover;
	display: block;
	text-indent: -9999;
	position: relative;
	margin-bottom: 5vh;
}
#wrapper_sec .portfolio_main .portfolio_content .portfolio_content_list_left10{
	background:url(../img3/imgsec/imgsec_graphic_01.png) no-repeat;
	background-position: left -12px;
	width:  100%;
    height: 35vh;
	background-size: cover;
	display: block;
	text-indent: -9999;
	position: relative;
	margin-bottom: 5vh;
}
#wrapper_sec .portfolio_main .portfolio_content .portfolio_content_list .portfolio_list_title{
    width: 100%;
    height: 100%;
	color:#171715;
	letter-spacing: 10px;
	font-size: 25px;
    font-weight: bold;
    text-shadow: 0 0 1px #000;
    font-family: "freight-big-pro","Helvetica", sans-serif,"Book Antiqua","Arial";
	position: absolute;
    display: block;
    position: absolute;
	line-height: 16;
}
#wrapper_sec .portfolio_main .portfolio_content .portfolio_content_list .portfolio_list_title:hover{
	display: block;
	color: #b69e71;
	text-shadow: 0 0 1px #b69e71;
}
@media screen and (max-width: 1440px){
#footer {
    display:none!important;
}
}
@media screen and (min-width: 1440px){
#footer {
    display:block!important;
    display:inline!important;
}
}