@charset "UTF-8";
/* CSS Document */
@font-face {
  font-family: "TITLE";
  src: url("SixCaps.ttf") format("truetype");
}

html,
body {
    height: 100%;
    background: #f2f2f2;
	font-family: 'M PLUS 1p', sans-serif;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}
	
.wrapper{
    min-height: 100vh;
    position: relative;/*←相対位置*/
    padding-bottom: 6rem;/*←footerの高さ*/
    box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}
.row{
	clear: both;
}

/* Controls
---------------------------------------------------------------------- */
.logo{
	width:100%;
	margin:auto;
	padding: 2rem 2.9rem 1rem;
	display: block;
}
.footer{
	width:100%;
	padding: 0 3rem 3rem;
	display: block;
	font-size:0.7rem;
	line-height: 125%;
	position: absolute;/*←絶対位置*/
    bottom: 0; /*下に固定*/
}

/* Controls
---------------------------------------------------------------------- */

.copy{
	text-align: center;
	line-height: 200%;
	margin:auto;
}

.keywords{
	text-align: center;
	padding: 0 2.5rem 2rem;
	margin:auto;
}

.keyword{
	margin:0.5vw;
	padding: 0.1vw 0.4vw;
	border-bottom: 0.1rem #000 solid;
	transition:200ms;
	font-family: "TITLE";
	color: #000;
}

.keyword:hover{
	background: #ccc;
}

.keyword:active{
	background: #ccc;
	color:#fff;
	-webkit-transform: translate(0.1rem, 0.1rem);
 	 transform: translate(0.1rem,0.1rem);
}

.mixitup-control-active {
    background: #333;
	color: #fff;
}




.border{
	margin: 4rem 0 0;
	border-bottom: 1px solid #aaa;
}
.backtoindex{
	margin: 1rem 0rem;
	border: 3px solid #bbb;
	width:17.8rem;
	text-align: center;
	font-size:2rem;
	font-weight:700;
	color: #bbb;
	transition: 0.5s;
}
.backtoindex:hover{
	background: #ccc;
	border: 3px solid #555;
	color: #555;
}

	
	
/* Container
---------------------------------------------------------------------- */

.container {
    margin: 1rem;
    text-align: justify;
    font-size: 0.1px;
	display: none;
}

.container:after {
    content: '';
    display: inline-block;
    width: 100%;
}

/* Target Elements
---------------------------------------------------------------------- */

.mix,
.gap {
    display: inline-block;
    vertical-align: top;
}

.mix {
    margin-bottom: 1rem;
    position: relative;
}

.mix:before {
    content: '';
    display: inline-block;
}



/* image
---------------------------------------------------------------------- */
.mix .up img{
	width:100%;
}
.mix .low img{
	width:100%;
}
.mix .left img{
	width: calc(200% / 3);
	float: left;
}
.mix .right img{
	width: calc(200% / 3);
	float: right;	
}

.whitehover {
	overflow:		hidden;
	position:		relative;	/* 相対位置指定 */
}
.whitehover .dummy {
	widows: 100%;
	aspect-ratio: 3 / 2;
}
.whitehover .works{
	width:			100%;
	height:			100%;
	position:		absolute;	/* 絶対位置指定 */
	top:			0;
	left:			0;
	transform: rotate(90deg);
}
.whitehover .works h3{
	font-family: "TITLE";
	color: #000;
	opacity: 0.15;
}

.whitehover .caption {
	widows: 100%;
	aspect-ratio: 3 / 1;
	text-align: 	left;
	transition:		all 0.3s ease;
}

.whitehover:checked .caption{
	opacity:		1;	/* マスクを表示する */
}
.whitehover .mask {
	width:			100%;
	height:			100%;
	position:		absolute;	/* 絶対位置指定 */
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	 #f2f2f2;	/* マスクは半透明 */
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;
}
.whitehover:hover .mask {
	opacity:		0.3;	/* マスクを表示する */
}
.whitehover .caption h1{
	font-family: "TITLE";
	color: 			#333;
	line-height: 85%;
}
.whitehover .caption h2{
	font-family: "TITLE";
	color: 			#888;
}


.mix input {
    display: none;
}
/*中身を非表示にしておく*/
.mix .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 1s;
	font-size:0.7rem;
	line-height:125%;
}

/*クリックで中身表示*/
.mix input:checked ~ .hidden_show {
	display: block;
    padding: 10px 0;
	width:100%;
    height: auto;
    opacity: 1;
}
a .readmore{
	position: absolute;
	bottom:0;
	right:0;
	width: 31%;
	
	color:#ccc;
	text-decoration: none;
	
	border-right:0.1rem solid #ccc;
	border-bottom:0.1rem solid #ccc;
	transition:200ms;
	
	font-family: "TITLE";	
}
.mix:hover .readmore {
	color:#d70c19;
	border-right:0.1rem solid #d70c19;
	border-bottom:0.1rem solid #d70c19;
}




.title{
		float:right;
	}
.title h1,
.title h2,
.title h3{
	text-align: left;
	line-height: 125%;
}
.large img{
	width:100%;
	margin-top:3rem;
}
.narrow img{
	width:70%;
	margin:3rem 15%;
}
.title img{
		width:100%;
		margin-bottom: 1rem;
}

/* Grid Breakpoints
---------------------------------------------------------------------- */


/* 2 Columns */

@media screen and (max-width: 749px) {
	.logo{width: 100vw;}
	.copy{font-size: 3vw;}
	.keyword{font-size:5.5vw;}
	.keyword h5{font-size:2vw;}
    .mix,
    .gap{
        width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
    }
	.whitehover .caption h1{
		font-size:8.4vw;
		padding: 1.5vw 0vw 0.4vw 0.5vw;
		letter-spacing: -0.01em;
		}
	.whitehover .caption h2{
		font-size:4.5vw;
		padding: 0.4vw 0vw 1.5vw 0.6vw;
		}
	.whitehover .works h3{
		font-size:15vw;
		}
	a .readmore{
		font-size:5vw;
	}
}

/* 3 Columns */

@media screen and (min-width: 750px) {
	.logo{width: 51vw;}
	.copy{font-size: 1.5vw;}
	.keyword{font-size:3vw;}
	.keyword h5{font-size:1vw;}
    .mix,
    .gap{
        width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
    }
	.whitehover .caption h1{
		font-size:5.8vw;
		padding: 1vw 0vw 0.3vw 0.6vw;
		letter-spacing: -10%;
		}
	.whitehover .caption h2{
		font-size:2.8vw;
		padding: 0.3vw 0vw 1vw 0.6vw;
		}
	.whitehover .works h3{
		font-size:10vw;
		}
	a .readmore{
		font-size:3.5vw;
	}
}

/* 5 Columns */

@media screen and (min-width: 1300px) {
	
	.logo{width: 42vw;}
	.copy{font-size: 1vw;}
	.keyword{font-size:2.5vw;}
	.keyword h5{font-size:0.5vw;}
    .mix,
    .gap{
        width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
    }
    
	.whitehover .caption h1{
		font-size:3.4vw;
		padding: 0.7vw 0vw 0.2vw 0.4vw;
		}
	.whitehover .caption h2{
		font-size:1.6vw;
		padding: 0.2vw 0vw 0.7vw 0.4vw;
		}
	.whitehover .works h3{
		font-size:6vw;
		}
	a .readmore{
		font-size:2.3vw;
	}
}

@media screen and (min-width: 1500px) {
	body{
	width:1510px;
	margin:0 auto;
	}
	.logo{width: 42vw;}
	.copy{font-size: 1vw;}
	.keyword{font-size:2.5vw;}
	.keyword h5{font-size:0.5vw;}
    .mix,
    .gap{
        width: calc(1465px/5 - (((5 - 1) * 1rem) / 5));
    }
	.whitehover .caption h1{
		font-size:51px;
		padding: 9px 0 3px 6px;
		}
	.whitehover .caption h2{
		font-size:25.5px;
		padding: 3px 0 9px 6px;
		}
	.whitehover .works h3{
		font-size:90px;
	}
	a .readmore{
		font-size:35px;
	}
}