/* ブラウザの初期値をリセット */
html:before {
    content:"";
    position:fixed;
    z-index:-1;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border: 20px solid #fff;
}

body{
	margin: 0;
	font-family: "Helvetica Neue", "Helvetica", "Arial", "Verdana", "Roboto", "中ゴシックBBB";
	line-height: 1.8;
}

::selection{
	background-color: #eeede1;
}


ul{
    padding: 0px;
    margin: 0;
}

li{
	list-style: none;
}

li a{
    color: #000;
}

a{
    color: #888;
    text-decoration: none;
}

a:hover{
    color: #8bac86;
    text-decoration: none;
}

.about a{
	color: red;
	border: solid 1px;
	padding: 10px;
}

.about a:hover{
	color: #888;
	border: solid 1px;
	padding: 10px;
}

a img{
	filter:grayscale(0);
	opacity:1;
}

a img:hover{
	opacity:0.5;
	filter:grayscale(100);
	transition:0.3s;
}
	
h1{
	margin: 0;
}

h5{
	font-weight: bold;
	letter-spacing: 0.06em;
}

p{
	font-size: 12px;
	letter-spacing: 0.15em;
	color: #000;
}






/* ヘッダー／フッター */
.header{
    position: fixed;
    width: 100%;
	top:0;
	z-index:1000;
}

.header-inner{
}

.logo{
    position: fixed;		
	top:17px;
	left:50px;
	z-index:1000;
}

.menu{
    position: fixed;		
	top:20px;
	right:50px;
	z-index:999;
}

.footer{
	position: fixed;
	color: #000;
	font-size: 9px ;
	letter-spacing: 0.12em;
	left: 40px;
	bottom: 15px;
	transform:rotate(-90deg);
	transform-origin:left top;
	z-index:999;
}





.content{
	position: relative;
    padding-top: 125px;
	width: 100%;
	margin: 0 auto;
	max-width: 800px;
}

.content-index{
	position: relative;
    padding-top: 85px;
	width: 100%;
	margin: 0 auto;
}

.work-title{
	font-size: 15px;
	padding-bottom: 25px;
	text-align: center;
	letter-spacing: 0.12em;
	margin:0 auto;
}

.work-text{
	margin: 10px 20px;
	letter-spacing: 0.12em;
	line-height: 2;
}

.credit{
	font-size: 10px;
	letter-spacing: 0.12em;
	line-height: 1.8em;
	margin: -50px 30px 0px 30px;
	color: #888;
}

.about{
	font-size: 16px;
	letter-spacing: 0.12em;
	margin-left: 50px;
}

.item{
	margin-bottom: 100px;
}

.index{
	margin-bottom: 100px;
}


/*メニューボタン*/
.menu-wrapper{
    position: relative;
}

.btn{
    width: 100%;
    display: block; 
    width: 39px;
    height: 39px;      
    position: absolute;
    right: 0;
	top: 5px;
	z-index:999;
	cursor: pointer;
}
  
.bar{      
    width: 25px;      
    height: 1px;        
    display: block;      
    position: absolute;      
    left: 50%;      
    transform: translateX(-50%);      
    background-color: #000;    
}
  
.bar-top{
	top: 15px;
}

.bar-bottom{
	bottom: 15px;
}

.btn.close .bar-top{      
    transform: translate(-50%,4px) rotate(45deg);      
    transition: transform .3s;    
}  
 

.btn.close .bar-bottom{      
    transform: translate(-50%,-4px) rotate(-45deg);      
    transition: transform .3s;    
}

/*メニューオープン時*/
.menu-lists{
    display: none;
    background-color: #f8f6f1;
	text-align: left;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0px;
}

.menu-lists ul{
	font-size: 14px ;
	letter-spacing: 0.18em;
	line-height: 1.8 ;
	color: #bdaf95;
	padding: 100px 50px;
}

.menu-lists ul li{		
	margin-bottom: 20px;
}







/*全画面スライド表示*/
ul li {
  list-style:none;
}

.cb-slideshow,
.cb-slideshow:after {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 85px;
    left: 0px;
    z-index: -1000;
}

.cb-slideshow li span {
	width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: -1000;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 25s linear infinite 0s;
    -moz-animation: imageAnimation 25s linear infinite 0s;
    -o-animation: imageAnimation 25s linear infinite 0s;
    -ms-animation: imageAnimation 25s linear infinite 0s;
    animation: imageAnimation 25s linear infinite 0s; 
}

.cb-slideshow li:nth-child(1) span {
    background-image: url(../image/top/slide01.jpg)
}

.cb-slideshow li:nth-child(2) span {
    background-image: url(../image/top/slide02.jpg);
	-webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    -o-animation-delay: 5s;
    -ms-animation-delay: 5s;
    animation-delay: 5s;
}

.cb-slideshow li:nth-child(3) span {
    background-image: url(../image/top/slide03.jpg);
	-webkit-animation-delay: 10s;
    -moz-animation-delay: 10s;
    -o-animation-delay: 10s;
    -ms-animation-delay: 10s;
    animation-delay: 10s; 	
}

.cb-slideshow li:nth-child(4) span {
    background-image: url(../image/top/slide04.jpg);
    -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s;
    -o-animation-delay: 15s;
    -ms-animation-delay: 15s;
    animation-delay: 15s;
}

.cb-slideshow li:nth-child(5) span {
    background-image: url(../image/top/slide05.jpg);
    -webkit-animation-delay: 20s;
    -moz-animation-delay: 20s;
    -o-animation-delay: 20s;
    -ms-animation-delay: 20s;
    animation-delay: 20s;
}

@keyframes imageAnimation {
    0% { opacity: 0; }
    5% { opacity: 1; }
    25% { opacity: 1 }
    30% { opacity: 0 }
    100% { opacity: 0 }

}

@media screen and (max-width : 1360px ){
    .cb-slideshow li div h3 { font-size: 12vmin }
}

/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
	opacity: 1;
}






/*スクロールでふわっと表示*/
.fade {
	opacity: 0;
	transform: translateY(0px);
	transition: opacity 1.5s, transform 1s;
}
.fade.active {
	opacity: 1;
	transform: translateY(0px);
}





/*カラムレイアウト*/
.box-parent {
	width:100%;
	height:auto;
	max-width:1280px;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;/*折り返し指定*/
	justify-content:space-between;/*子要素を均等に配置して余白を設ける*/
}

.box-parent::after{/*最後の列を左寄せ*/
	content:"";
	display: block;
	width:32%;
}

.box-child {
	width:32%;
	height:auto;
	display:flex;/*装飾用*/
	flex-direction:column;/*装飾用*/
	background-color: #fff;
}

.box-child:nth-of-type(n+4) {
  margin-top:50px;/*子要素を折り返した垂直方向の上部の余白指定*/
}
	
.box-img {
	width:100%;
	height:auto;
	position:relative;
}

.box-img::after {/*画像のアスペクト比固定で高さを可変にする設定*/
	display:block;
	content:'';
	width:100%;
	height:0;
	padding-top:60%;
}

.box-img img {
	display:block;
	width:100%;
	height:auto;/*画像のアスペクト比固定で高さを可変にする設定*/
	object-fit:cover;
	position:absolute;
	top:0;left:0;bottom:0;right:0;
}
.box-text {
	flex-grow:1;/*子要素の高さ調整のための指定*/
	font-size:12px;
	letter-spacing: 0.12em;
}

.box-category {
	font-size:10px;
	color:#8C8C8C;
	letter-spacing: 0.12em;
}

@media screen and (max-width: 24000px) {
  .box-parent {
	width:90%;
	max-width:initial;
	margin-top:50px; /*2つ並ぶ時のマージン*/
  }
}
@media screen and (max-width: 1280px) {
  .box-child {
    width:49%;
  }
  .box-child:nth-of-type(n+3) {
    margin-top:50px; /*2つ並ぶ時のマージン*/
  }
}
@media screen and (max-width: 680px) {
  .box-child {
    width:100%;
  }
  .box-child:nth-of-type(n+2) {
    margin-top:50px; /*SP時のマージン*/
  }
}






/*テキストエリアオープン*/
input[type="checkbox"].on-off{
  opacity: 0;
}

/*ラベル（「開く」ボタン）*/
.open-label{
	font-size: 15px;
	letter-spacing: 0.5em;
	width: 60px;
	margin: 0px 30px;
	border-bottom: solid 1px;
	padding-bottom: 2px;
	display: block;
	color: #000;
	margin-top: -70px;
	cursor: pointer;
}

/*ボタンっぽい効果*/
.open-label:active{
}

.open-label:hover{
	color: red;
}

/*開閉エリア*/
.open{
	font-size: 12px;/*本文サイズ*/
	line-height:2;
	letter-spacing: 0.1em;
	padding: 0px 30px;
	height: 0;
	opacity: 0;
	transition: .5s;
}

/*「開く」をタップで表示*/
.on-off:checked  ~ .open{
	padding: 20px 30px;
	height: auto;
	opacity: 1;
}





/*Wroks Main Image*/
.main-culmani{
	height:100vh;
	background-image:url("../works/_img/culmani/culmani-00.jpg"); /*表示する画像*/
	background-size:cover; /*画面サイズに合わせて画像の縦横比率を調整*/
	background-position:center; /*画像の真ん中を起点として表示させる*/
}

.main-study{
	height:100vh;
	background-image:url("../works/_img/study/study-00.jpg"); /*表示する画像*/
	background-size:cover; /*画面サイズに合わせて画像の縦横比率を調整*/
	background-position:center; /*画像の真ん中を起点として表示させる*/
}

.main-nooca{
	height:100vh;
	background-image:url("../works/_img/nooca/nooca-00.jpg"); /*表示する画像*/
	background-size:cover; /*画面サイズに合わせて画像の縦横比率を調整*/
	background-position:center; /*画像の真ん中を起点として表示させる*/
}

.main-barabara{
	height:100vh;
	background-image:url("../works/_img/barabara/barabara-00.jpg"); /*表示する画像*/
	background-size:cover; /*画面サイズに合わせて画像の縦横比率を調整*/
	background-position:center; /*画像の真ん中を起点として表示させる*/
}

.main-iki{
	height:100vh;
	background-image:url("../works/_img/iki/iki-00.jpg"); /*表示する画像*/
	background-size:cover; /*画面サイズに合わせて画像の縦横比率を調整*/
	background-position:center; /*画像の真ん中を起点として表示させる*/
}

.main-beardsley{
	height:100vh;
	background-image:url("../works/_img/beardsley/beardsley-00.jpg"); /*表示する画像*/
	background-size:cover; /*画面サイズに合わせて画像の縦横比率を調整*/
	background-position:center; /*画像の真ん中を起点として表示させる*/
}

.main-svf{
	height:100vh;
	background-image:url("../works/_img/svf/svf-00.jpg"); /*表示する画像*/
	background-size:cover; /*画面サイズに合わせて画像の縦横比率を調整*/
	background-position:center; /*画像の真ん中を起点として表示させる*/
}

.main-asanuma{
	height:100vh;
	background-image:url("../works/_img/asanuma/asanuma-00.jpg"); /*表示する画像*/
	background-size:cover; /*画面サイズに合わせて画像の縦横比率を調整*/
	background-position:center; /*画像の真ん中を起点として表示させる*/
}

.main-lw{
	height:100vh;
	background-image:url("../works/_img/lw/lw-00.jpg"); /*表示する画像*/
	background-size:cover; /*画面サイズに合わせて画像の縦横比率を調整*/
	background-position:center; /*画像の真ん中を起点として表示させる*/
}

.main-gf{
	height:100vh;
	background-image:url("../works/_img/gf/gf-00.jpg"); /*表示する画像*/
	background-size:cover; /*画面サイズに合わせて画像の縦横比率を調整*/
	background-position:center; /*画像の真ん中を起点として表示させる*/
}

.main-ics25{
	height:100vh;
	background-image:url("../works/_img/ics25/ics25-00.jpg"); /*表示する画像*/
	background-size:cover; /*画面サイズに合わせて画像の縦横比率を調整*/
	background-position:center; /*画像の真ん中を起点として表示させる*/
}


.main-ics{
	height:100vh;
	background-image:url("../works/_img/ics/ics-00.jpg"); /*表示する画像*/
	background-size:cover; /*画面サイズに合わせて画像の縦横比率を調整*/
	background-position:center; /*画像の真ん中を起点として表示させる*/
}

.main-sogo{
	height:100vh;
	background-image:url("../works/_img/sogoshikaku/sogo-00.jpg"); /*表示する画像*/
	background-size:cover; /*画面サイズに合わせて画像の縦横比率を調整*/
	background-position:center; /*画像の真ん中を起点として表示させる*/
}

.main-shirauo{
	height:100vh;
	background-image:url("../works/_img/shirauo/shirauo-00.jpg"); /*表示する画像*/
	background-size:cover; /*画面サイズに合わせて画像の縦横比率を調整*/
	background-position:center; /*画像の真ん中を起点として表示させる*/
}

.main-CM{
	height:100vh;
	background-image:url("../works/_img/coincidentalmemory/coincidentalmemory-00.jpg"); /*表示する画像*/
	background-size:cover; /*画面サイズに合わせて画像の縦横比率を調整*/
	background-position:center; /*画像の真ん中を起点として表示させる*/
}

.main-archive{
	height:100vh;
	background-image:url("../works/_img/archive/archive-00.jpg"); /*表示する画像*/
	background-size:cover; /*画面サイズに合わせて画像の縦横比率を調整*/
	background-position:center; /*画像の真ん中を起点として表示させる*/
}

.main-vision{
	height:100vh;
	background-image:url("../works/_img/vision/vision-00.jpg"); /*表示する画像*/
	background-size:cover; /*画面サイズに合わせて画像の縦横比率を調整*/
	background-position:center; /*画像の真ん中を起点として表示させる*/
}

.main-akerue{
	height:100vh;
	background-image:url("../works/_img/akerue/akerue-00.jpg"); /*表示する画像*/
	background-size:cover; /*画面サイズに合わせて画像の縦横比率を調整*/
	background-position:center; /*画像の真ん中を起点として表示させる*/
}