@charset "UTF-8";

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

	filename:	contents.css
	created:	17.10.26
	
/*--------------------------------------------------------------- */

/*----------------------------------------------------------------*/
/* ABOUT US */
/*----------------------------------------------------------------*/
#block-area {
}

#block-area span {
	display:block;
	width:5px;
	height:34px;
	position:absolute;
	background:#111;
	left:0;
	right:0;
	margin:0 auto;
	top:-34px;
	
}

/*----------------------------------------------------------------*/
/* ABOUT US */
/*----------------------------------------------------------------*/
#about-us h3 {
	font-size:16px;
	font-size:1.6rem;
}

/*----------------------------------------------------------------*/
/* BUSINESS */
/*----------------------------------------------------------------*/
#business {
}

#business .inner-content {
	clear:both;
}

#business h3 .jp {
	display:block;
	font-size:12px;
	font-size:1.2rem;
}

#business .btn {
	float:right;
}

/*----------------------------------------------------------------*/
/* COMPANY */
/*----------------------------------------------------------------*/
#map-canvas-wrap {
	width:100%;	
	clear:both;
}
#map-canvas {
	width:100%;
	height:240px;
	margin:0 0 55px;	
}

#company dt {
    float:left;
    clear:left;
	font-size:14px;
	font-size:1.4rem;
	width:30%;
}

#company dd {
    float:left;
    width:70%;
    vertical-align:bottom;
	margin:0 0 21px;
	font-size:14px;
	font-size:1.4rem;	
}

#company dd:last-child {
	margin:0;
}

#company-en {
	margin:55px 0 0;
}

#company-en h3 span {
	display:block;
	font-size:12.5px;
	font-size:1.25rem;
}

#company-en ul {
	margin:0 0 21px;
}

.map {
	display: inline-block;
	text-align:center;
	font-size:12px;
	font-size:1.2rem;
	line-height:1;
}

.map a {
	text-decoration:none;
	display: inline-block;
	background:#111;
	color:#fff;
    padding:3px;
	border-radius:2px;	
}

/*----------------------------------------------------------------*/
/* CONTACT */
/*----------------------------------------------------------------*/
#contact p {
	clear:both;
}

#policy {
	padding:55px 0 0;
}

#policy p,
#policy li {
	font-size:11px;
	font-size:1.1rem;
}

#policy li {
	margin:0 0 5px;
}

#policy li > ul {
	padding:5px 0 5px 20px;
}

#policy li > ul li {
	list-style-type:disc;
}

/*----------------------------------------------------------------*/
/* WORKS */
/*----------------------------------------------------------------*/

#works ul {
	clear:both;
}

.works-thumbnail {
	font-size:0;
	margin:0 -2%;
}

.works-thumbnail li {
	display:inline-block;
	width:46%;
	margin:0 2% 15%;
}

#works .hide {
  display: none;
}

#header-works {
	position:relative;
}

#header-works ul li {
	float:left;
	width:48%;
	margin:0 4% 20% 0;	
}

#header-works ul li:last-child {
	margin:0 0 20%;
}

#header-works ul li a {
	position:relative;	
	text-decoration:none;
	display:inline-block;
}

.web-title,
.icon {
	display: none;
}

#header-works ul li a:before,
#header-works ul li a:after {
  position: absolute;
  bottom:-0.3em;
  content: "";
  display: inline-block;
  width: 0;
  height: 2px; 
  background: #222;
  transition: .3s;
}

#header-works ul li a:before {
  left: 50%;
}

#header-works ul li a:after {
  right: 50%;
}

#header-works ul li a.stay:before,
#header-works ul li a.stay:after {
  width: 50%;	
}

#works .event {
	border-top:1px solid #ddd;
	padding:55px 0;
}

#works .inner .event:first-of-type {
	margin:34px 0 0;
}


#works .event h3 {
	margin:0 0 34px;
}

.event-logo > p:first-of-type {
	margin:0 0 55px;
	text-align:center;
}

.event-logo p img {
	width:70%;
}

.event-logo ul {
	margin:0 0 34px;
	clear:both;
}

.event-logo p {
	clear:both;	
}

.event-logo .fa {
	margin:0 5px 0 0;
}


#works .solution h4 {
	margin:0 0 13px;
	line-height:1;
}

#works .event-logo li {
	float:left;
	font-size:12px;
	font-size:1.2rem;
	margin:0 5px 5px 0;
	padding:5px;
	background:#eee;
	border-radius:2px;
	text-align:center;
}

#works .event-image {
	margin:0 -10%;
}

/*----------------------------------------------------------------*/
/*media Queries / min-width: 960px */
/*----------------------------------------------------------------*/
@media only screen and (min-width: 960px) {

/*----------------------------------------------------------------*/
/* ABOUT US */
/*----------------------------------------------------------------*/
#about-us h3 {
	font-size:21px;
	font-size:2.1rem;
}

/*----------------------------------------------------------------*/
/* BUSINESS */
/*----------------------------------------------------------------*/
#business {
}

#business h3 {
	font-size:24px;
	font-size:2.4rem;
}

#business h3 .jp {
	display:block;
	font-size:14px;
	font-size:1.4rem;
}

.biz-block {
	float:left;
	width:50%;
	height:40vh;
	box-sizing:border-box;
	padding:34px;
	background:#111;
	color:#f9f9f9;
}

/*----------------------------------------------------------------*/
/* COMPANY */
/*----------------------------------------------------------------*/
#company-en h3 span {
	font-size:14px;
	font-size:1.4rem;
}

#company dt {
	font-size:15px;
	font-size:1.5rem;
}

#company dd {
	font-size:15px;
	font-size:1.5rem;	
}

#map-canvas {
	height:350px;
	width:57.3%;
	float:right;
	margin:0 0 89px;	
}

#home #company.content .inner {
	padding-bottom:55px;	
}

.map {
	font-size:14px;
	font-size:1.4rem;
}

/*----------------------------------------------------------------*/
/* CONTACT */
/*----------------------------------------------------------------*/
#contact {
}

#policy {
	padding:89px 0 0;
}

#policy p,
#policy li {
	font-size:12px;
	font-size:1.2rem;
}

/*----------------------------------------------------------------*/
/* WORKS */
/*----------------------------------------------------------------*/
.works-thumbnail {
}

.works-thumbnail li {
	width:29.3333%;
	margin:0 2% 8%;
	position:relative;
}

.works-thumbnail li {
	overflow:hidden;
}

.works-thumbnail a {
	display:block;
}

.works-thumbnail img {
	transition:all ease .3s;
}

.works-thumbnail a:hover img {
	transform: scale(1.1,1.1);
}

#header-works ul {
	position:absolute;
	top:0;
	right:0;
}

#header-works ul li {
	margin:0 0 0 34px !important;
	font-size:18px;
	font-size:1.8rem;
	width:auto;
}

#header-works ul li a:hover:before,
#header-works ul li a:hover:after {
  width: 50%;
}

.web-title {
	display:block;
	opacity:0;
	transition:all ease .3s;
	z-index:2;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	text-align:center;
	background: rgba(0,0,0,0.7);
	
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  /* 左右中央寄せ */
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;

  /* 上下中央寄せ */
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;	

}

.web-title h3 {
	color:#fff;
	font-size:14px;
	font-size:1.4rem;
	font-weight:600 !important;
	margin:0;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.icon {
	opacity:0;
	display:block;
	position:absolute;
	right:8px;
	bottom:5px;
	z-index:3;
	transition:all ease .3s;	
}

.icon .fa {
	color:#fff;	
	font-size:22px;
	font-size:2.2rem;
	padding:5px;	
}

.icon .fa-mobile {
	font-size:26px;
	font-size:2.6rem;
}

.icon .none {
	color: rgba(120,120,120,0.7);	
}

.works-thumbnail a:hover .web-title,
.works-thumbnail a:hover .icon {
	opacity:1;
}

.event {
	clear:both;
}

.event-logo {
	float:left;
	width:40%;
}

.event-logo > p:first-of-type {
	text-align:left;
}

.event-logo p img {
	width: auto;
}

.event-image {
	float:right;
	width:50%;
}

#works .event-logo li {
	font-size:14px;
	font-size:1.4rem;
}

#works .inner .event:first-of-type {
	margin:55px 0 0;
}

#works .event-image {
	margin:0;
}

}

/*----------------------------------------------------------------*/
/* form-2col */
/*----------------------------------------------------------------*/
table {
    border-collapse:collapse;
    border-spacing:0;		
}

table.form-2col {
	width: 100%;
	margin:0 0 21px;	
}

table.form-2col th,
table.form-2col td {
	padding: 1em 0;
}

table.form-2col th  {	
	width: 30%;
	text-align: left;
	font-size:15px;
	font-size:1.5rem;
    vertical-align:top;	
}
 
@media only screen and (max-width:768px){
table.form-2col th,
table.form-2col td {
    width:100%;
	font-size:14px;
	font-size:1.4rem;
    box-sizing:border-box;
    display: block;
    word-break: break-all;
}

table.form-2col th {
	padding: 1em 0 8px;
}

table.form-2col td {
	padding:0;
}

}

/*----------------------------------------------------------------*/
/*media Queries / min-width: 1280px */
/*----------------------------------------------------------------*/
@media only screen and (min-width: 1280px) {
/*----------------------------------------------------------------*/
/* 共通 */
/*----------------------------------------------------------------*/
#works .event {
	padding:89px 0;
}

.event-logo {
	width:400px;
}

.event-image {
	width: auto;
}
}

/* EOF */