@charset "utf-8";

#contents ul.pages li.twitter .title-box h2 {
	color:#333;
	font-weight:bold;	
}
#contents ul.pages li.twitter .title-box h2:first-letter {
	color:rgba(204,0,0,1);
}
#contents ul.pages li.twitter .title-box p {
	color:#333;
	position:static;
}
#contents ul.pages li.twitter a.twitter-timeline {
	display:inline-block;
	color:#666;
	background:url(../images/icon-open-new-window.svg) no-repeat center right;
	background-size:1em 1em;
	padding-right:1.5em;
	margin-left:1rem;
}

@media screen and (max-width: 767px) {
/*BASE*/
body {
	padding-top:0 !important;
}


/*HEADER*/
#headerNavi {
	display:block;
	background-color:rgba(0,0,0,.8);
	width:100vw;
	height:60px;
	position:fixed;
	top:0;
	left:0;
	z-index:3;
}
#header {
	background-color:transparent !important;
}
#header ul.pc {
}
#header ul.pc li a {
	color:rgba(255,255,255,1);
}


/*CONTENTS*/
#home .bt-txt {
	display:block;
	width:240px;
	margin:auto;
}

/*私たちは*/
#about {
	padding:4rem 1rem;
}
#about img {
	height:auto;
}
#about .container {
}
#about h1 {
	margin-bottom:1rem;
}
#about h1 .en,
#about h1 .ja {
	font-size:16px;
	letter-spacing:.04em;
}
#about h1 .en {
	display:inline-block;
	margin-right:1rem;
}
#about h2 {
	font-family:'Noto Serif JP', serif;
	font-size:16px;
	letter-spacing:.04em;
	font-weight:bold;
	text-align:center;
	margin-bottom:1rem;
	display:flex;
	align-items: center;
	justify-content: center;
}
#about h2::before,
#about h2::after{
	content: "";
	flex-grow:1;
	border-top: 1px solid #999;
}
#about h2:before {
	margin-right: 1rem; 
}
#about h2:after {
	margin-left: 1rem; 
}
#about p.en {
}
#about p.en:first-letter {
	color:rgba(204,0,0,1);
}
#about .img-box,
#about .txt-box {
	margin-bottom:1.5rem;
}

/*CONTENTS*/
#contents {
	background-image:url(../images/filter_w080.png);
	background-color:rgba(244,227,225,.8);
	padding:4rem 1rem;
}
#contents .container .txt-box {
	margin-bottom:1.5rem;
}
#contents ul.pages {
	max-width:600px;
	margin:auto;
}
#contents ul.pages li:not(.twitter) {
	position:relative;
	overflow:hidden;
	margin-bottom:1rem;
}
#contents ul.pages li a img.img {
	display:block;
	width:100%;
}
#contents ul.pages li p {
	display:block;
	pointer-events:none;
	position:absolute;
	left:0;
}
#contents ul.pages li.flowchart p,
#contents ul.pages li.factory p,
#contents ul.pages li.recruit p {
	color:rgba(255,255,255,1);
	background-image:url(../images/filter_bk080.png);
	background-color:rgba(0,0,0,.8);
	width:calc(100% / 2);
	padding:1rem 0 1rem 1rem;
	top:50%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
}
#contents ul.pages li p span.ja,
#contents ul.pages li p span.en {
	display:block;
	letter-spacing:.04em;
}
#contents ul.pages li p span.ja {
	font-weight:bold;
}
#contents ul.pages li p span.en {
	font-size:12px;
	color:rgba(255,0,0,1);
	font-weight:bold;
}
#contents ul.pages li.twitter .title-box {
	background:url(../images/icon_twitter.svg) no-repeat center left;
	background-size:40px 40px;
	padding-left:50px;
	min-height:40px;
	margin-bottom:.5rem;
}
#contents ul.pages li.twitter .title-box p {
	font-size:12px;
}
#contents ul.pages li.twitter .anime-hs {
	padding-right:1rem;
}

/*実績紹介*/
#works {
	padding:80px 0;
}
}

@media screen and (min-width: 768px) {
/*BASE*/
body {
	padding-top:0 !important;
}


/*HEADER*/
#headerNavi {
	display:block;
	background-color:rgba(0,0,0,.8);
	width:100%;
	height:100px;
	position:fixed;
	top:0;
	z-index:3;
}
#header {
	background-color:transparent !important;
}
#header ul.pc {
}
#header ul.pc li a {
	color:rgba(255,255,255,1);
}


/*CONTENTS*/
#home .bt-txt {
	display:block;
	width:240px;
	margin:auto;
}

/*私たちは*/
#about {
	padding:80px 0;
}
#about .container {
	width:1080px;
	margin:auto;
}
#about h1 {
	margin-bottom:1rem;
}
#about h1 .en,
#about h1 .ja {
	font-size:16px;
	letter-spacing:.04em;
}
#about h1 .en {
	display:inline-block;
	margin-right:1rem;
}
#about h2 {
	font-family:"游明朝体", "Yu Mincho", YuMincho, serif;
	font-size:24px;
	letter-spacing:.04em;
	font-weight:bold;
	margin-bottom:1rem;
	display:flex;
	align-items: center;
	justify-content: center;
}
#about h2::before,
#about h2::after{
	content: "";
	flex-grow:1;
	border-top: 1px solid #999;
}
#about h2:before {
	margin-right: 1rem; 
}
#about h2:after {
	margin-left: 1rem; 
}
#about p.en {
	/*font-family:"メイリオ", Meiryo, Osaka, sans-serif;
	font-size:16px;
	font-weight:bold;*/
}
#about p.en:first-letter {
	color:rgba(204,0,0,1);
}
#about .img-box,
#about .txt-box {
	margin-bottom:1.5rem;
}

/*CONTENTS*/
#contents {
	background-image:url(../images/filter_w080.png);
	background-color:rgba(244,227,225,.8);
	padding:80px 0;
}
#contents .container {
	width:1080px;
	margin:auto;
}
#contents .container .txt-box {
	margin-bottom:1.5rem;
}
#contents ul.pages {
	display:grid;
	grid-template-rows:auto;
	grid-template-columns:640px 400px;
	justify-content:space-between;
	align-content:space-between;
	row-gap:40px;
	column-gap:40px;
}
#contents ul.pages li {
	width:640px;
	height:180px;
	position:relative;
	overflow:hidden;
}
#contents ul.pages li.flowchart {
	grid-row:1 / 2;
	grid-column:1 / 2;
}
#contents ul.pages li.factory {
	grid-row:2 / 3;
	grid-column:1 / 2;
}
#contents ul.pages li.recruit {
	grid-row:3 / 4;
	grid-column:1 / 2;
}
#contents ul.pages li.twitter {
	grid-row:1 / 4;
	grid-column:2 / 3;
	width:400px;
	height:620px;
}
#contents ul.pages li.twitter iframe {
    width: 100%;
	height:100%;
}
#contents ul.pages li a img.img {
	display:block;
	transition:transform ease .6s;
}
#contents ul.pages li a:hover img.img {
	transform: scale(1.2,1.2);
}
#contents ul.pages li a img.txt {
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	z-index:1;
}
#contents ul.pages li p {
	display:block;
	pointer-events:none;
	position:absolute;
	left:0;
}
#contents ul.pages li.flowchart p,
#contents ul.pages li.factory p,
#contents ul.pages li.recruit p {
	color:rgba(255,255,255,1);
	background-image:url(../images/filter_bk080.png);
	background-color:rgba(0,0,0,.8);
	width:240px;
	padding:1rem 2rem;
	top:50%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
}
#contents ul.pages li p span.ja,
#contents ul.pages li p span.en {
	display:block;
	letter-spacing:.08em;
}
#contents ul.pages li p span.ja {
	font-weight:bold;
}
#contents ul.pages li p span.en {
	font-size:12px;
	color:rgba(255,0,0,1);
	font-weight:bold;
}
#contents ul.pages li.twitter .title-box {
	background:url(../images/icon_twitter.svg) no-repeat top left;
	background-size:40px 40px;
	padding-left:50px;
	height:56px;
}
#contents ul.pages li.twitter .title-box p {
	font-size:14px;
}

/*実績紹介*/
#works {
	padding:80px 0;
}
}