/*! index.css */

/* =============================================================================
   インデックス（総合トップ）用css
   ========================================================================== */


/*========================================
   Logo
  ========================================*/
  
.logo img {
	width: 100%;
	max-width: 424px;
}
  
@media screen and (min-width: 640px){
	.logo {
		position: relative;
		top: 8em;
		left: 0;
		width: 100%;
		max-width: 424px;
		z-index: 100;
} 
}

@media screen and (max-width: 640px){
	.logo {
		position: relative;
		top: 0;
		width: 80%;
		height: auto;
		margin: 0 auto;
		text-align: center;
		padding-top: 4em; 
} 
}
   

/*========================================
   Body
  ========================================*/
  
#body {
	position: relative;
	top: 0;
	left: 0;
}
  
@media screen and (min-width: 640px){
	#body {
		z-index: 1;
}
}


/*========================================
   Main
  ========================================*/

#main {
	width: 800px;
	height: 800px;
	font-size: 200%;
	display: table;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	background: #fff2f3;
}

@media screen and (min-width: 1280px){
	#main {
		width: 800px;
		height: 800px;
		margin: 0 auto;
	}
	
	br.bp {
		display: none;
	}
}

@media screen and (max-width: 1280px){
	#main {
		width: 600px;
		height: 600px;
		margin: 1em auto 0 auto;
	}
}

@media screen and (max-width: 960px){
	#main {
		width: 460px;
		height: 460px;
		margin: 1em auto 0 auto;
		font-size: 140%;
	}
}


@media screen and (max-width: 640px){
	#main {
		width: 360px;
		height: 360px;
		margin: 1em auto 0 auto;
		font-size: 120%;
	}
}

@media screen and (max-width: 480px){
	#main {
		width: 360px;
		height: 360px;
		margin: 1em auto 0 auto;
		font-size: 120%;
	}
}

@media screen and (max-width: 320px){
	#main {
		width: 280px;
		height: 280px;
		margin: 1em auto 0 auto;
		font-size: 100%;
	}

}

#main .text {
	text-align: center;
	vertical-align: middle;
	display: table-cell;
}

#main .text h1 {
	padding: 10px 25px;
	color: #fff;
	border-radius: 5px;
	background: #ffbbc0;
	font-size:40%;
	width:60%;
	margin:0 auto 15px auto;
	font-weight:normal;
}


/*========================================
   News
  ========================================*/

#news {
	padding: 0 0 1em 0;
	border-bottom: 2px solid #ffc3c7;
	overflow: hidden;
}

@media screen and (min-width: 640px){
	#news {
		width: 80%;
		margin: -2em auto 0 auto;
	}
}

@media screen and (max-width: 640px){
	#news {
		width: 90%;
		margin: 2em auto 0 auto;
	}
}

#news p.news_icon {
	width: 68px;
	height: 68px;
	color: #fff;
	text-align: center;
	display: table;
	float: left;
	background: url(../img/share/pink_lozenge.png) no-repeat;
	background-size: 100%;
}

#news p.news_icon span {
	vertical-align: middle;
	display: table-cell;
}

#news .news_post {
	width: 100%;
	margin: 0.7em 0 0 -68px;
	float: right;
}

#news .news_post p {
	margin-left: 90px;
}

#news .news_post p a {
	padding-right: 50px;
	display: block;
	background: url(../img/share/arrow_right.png) no-repeat right;
}

#news .news_post a:hover {
	color: #666;
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}


/*========================================
   Recent Works
  ========================================*/

#recent_works {
	margin: 8em 0 0 0;
	padding: 0;
}

#recent_works h2 {
	padding: 0;
	font-weight: normal;
}

@media screen and (min-width: 640px){
	#recent_works h2 {
		margin: 0 0 0 -1em;
		font-size: 350%;
	}
}

@media screen and (max-width: 640px){
	#recent_works h2 {
		margin: 0 auto;
		text-align: center;
		font-size: 300%;
	}
}

@media screen and (max-width: 640px){
	#recent_works h2 {
		margin: 0 auto;
		text-align: center;
		font-size: 200%;
	}
}

#recent_works h2 span.border {
	border-bottom: 2px solid #000;
}

.recent_works_list {
	width: 100%;
	margin: 4em 0 0 0;
	/*background: #fff2f3;*/
}

.recent_works_list figure {
	position: relative;
	overflow: hidden;
	height: auto;
	text-align: center;
}

.recent_works_list figcaption {
	position: relative;
	overflow: hidden;
	height: auto;
}

.recent_works_list figcaption p {
	text-align:center;
	padding:0 5%;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.recent_works_list figcaption span.tit {
	font-size: 180%;
overflow : hidden;
-webkit-line-clamp: 2; 
 -moz-line-clamp: 2;
	  line-clamp: 2;
-webkit-box-orient: vertical;
 -moz-box-orient: vertical;
	  box-orient: vertical;
-webkit-text-overflow: ellipsis;
 -moz-text-overflow: ellipsis;
	  text-overflow: ellipsis;
display: -webkit-box;
display: -moz-box;
display: box;
white-space: normal;
}

@-moz-document url-prefix() {
	.recent_works_list figcaption span.tit {
		white-space: nowrap;
	}
}


.recent_works_list figcaption span.client {
	font-size: 140%;
}

@media screen and (min-width: 1680px){
	.recent_works_list figure {
		width: 33.33%;
		float: left;
}
}

@media screen and (max-width: 1680px){
	.recent_works_list figure {
		width: 50%;
		float: left;
	}
}

@media screen and (max-width: 960px){
.recent_works_list figcaption span.tit {
	font-size: 140%;
}
.recent_works_list figcaption span.client {
	font-size: 100%;
}
}

@media screen and (max-width: 640px){
	.recent_works_list figure {
		width: 100%;
	}
}

.recent_works_list figure img {
	width: 100%;
}

.recent_works_list figure a {
	color: #fff;
}

.recent_works_list figcaption {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	-webkit-transition: .3s;
	transition: .3s;
}

.recent_works_list figure:hover figcaption {
	background: rgba(255,195,199,.8);
	opacity: 1;
}


/*========================================
   Column
  ========================================*/

#column {
	margin: 8em auto 0 auto;
	padding: 0;	
}
#column h2 {
	padding: 0;
	font-weight: normal;
}
@media screen and (min-width: 640px){
	#column h2 {
		margin: 0 0 0 -1em;
		font-size: 350%;
	}
}
@media screen and (max-width: 640px){
	#column h2 {
		margin: 0 auto;
		text-align: center;
		font-size: 300%;
	}
}
@media screen and (max-width: 640px){
	#column h2 {
		margin: 0 auto;
		text-align: center;
		font-size: 200%;
	}
}
#column h2 span.border {
	border-bottom: 2px solid #000;
}
#column h2 span.border span.jp {
	font-size: 26%;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#column ul.column_list {
	margin: 4em auto 0 auto;
	padding: 0;
	overflow: hidden;
	text-align: center;
}
#column ul.column_list li.column_post {
	width: 30%;
	height: auto;
	margin: 0 0.5em 2em 0.5em; 
	padding: 0;
	display: inline-flex;
}
@media screen and (min-width: 1280px){
	#column ul.column_list {
	width: 86%;
}
	#column ul.column_list li.column_post {
	width: 30%;
	height: auto;
	margin: 0 0.5em 2em 0.5em; 
	padding: 0;
	display: inline-flex;
}
}
@media screen and (max-width: 1279px){
	#column ul.column_list {
	width: 90%;
}
	#column ul.column_list li.column_post {
	width: 42%;
	height: auto;
	margin: 0 0.5em 2em 0.5em; 
	padding: 0;
	display: inline-flex;
}
}
@media screen and (max-width: 860px){
	#column ul.column_list {
	width: 80%;
}
	#column ul.column_list li.column_post {
	width: 100%;
	height: auto;
	margin: 0 0.5em 2em 0.5em; 
	padding: 0;
	display: inline-flex;
}
}
#column ul.column_list li.column_post .column_img {
	position: relative;
	width: 100%;
	height: auto;
	background: #fff2f3;
}
#column ul.column_list li.column_post .column_img img.column_new {
	position: absolute;
	top: 0.2em;
	left: 0.2em;
	width: 24%;
	height: auto;
	z-index: 100;
}
#column ul.column_list li.column_post .column_img img.column_thumb {
	width: 100%;
	height: auto;
	vertical-align: top;
	z-index: 99;
}
#column ul.column_list li.column_post p {
	margin: 1em 0 0 0; 
	padding: 0;
	text-align: left;
}
#column ul.column_list li.column_post .column_img:hover {
	opacity: 0.5;
	-webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}



/*========================================
   Recruit
  ========================================*/

#recruit {
	width: 80%;
	margin: 4em auto 0 auto;
	padding: 0;
}
#recruit img {
	width: 100%;
	height: auto;
}
#recruit img:hover {
	opacity: 0.5;
	-webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}
#recruit p {
	margin-top: 2em;
}